*{margin:0;padding:0}body{--light-gray: #f5f3f1;--gray: #c2bdba;--black: #332e2b;--white: #fefdfb;--orange: #ff8c00;display:flex;justify-content:center;align-items:center;height:100vh;color:var(--black)}img{vertical-align:top}*::-webkit-scrollbar{width:10px;height:4px}*::-webkit-scrollbar-thumb{background:var(--gray);border-radius:10px;border:3px solid var(--white)}*::-webkit-scrollbar-track{background:transparent}#app{position:relative}.speech-bubble{position:absolute;padding:16px;border:1px solid var(--gray);border-radius:16px;display:flex;flex-direction:column;gap:8px;background:var(--white);left:50%;bottom:-50%;transform:translateY(100%) translate(-50%)}.speech-bubble:before{position:absolute;top:0;left:50%;margin-left:-6px;margin-top:-8px;width:0;height:0;content:"";border-top:0px solid transparent;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--gray)}.speech-bubble:after{position:absolute;top:0;left:50%;margin-left:-5px;margin-top:-6px;width:0;height:0;content:"";border-top:0px solid transparent;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid var(--white)}.speech-bubble.me{align-items:center;gap:8px}#peerList{display:inline-flex;border:1px solid var(--gray);border-radius:100px;white-space:nowrap}.peer{position:relative;margin:12px}.profile-img{width:52px;cursor:pointer}.peer.me{order:-1}.peer .name{font-weight:900;white-space:nowrap}.peer.more{display:flex;justify-content:center;align-items:center;width:52px;height:52px;background:var(--light-gray);border-radius:100%;font-weight:900;font-size:24px;cursor:pointer}.peer-more-list{font-size:16px;gap:12px}.peer-more-list .peer{display:flex;align-items:center;margin:0 0 12px}.peer-more-list .profile-img{width:26px}.small-peer{display:flex;align-items:center;gap:4px}.edit-profile-btn{margin-top:8px;padding:12px;background:var(--white);color:var(--orange);border:1px solid var(--orange);border-radius:4px;font-size:16px;font-weight:400;cursor:pointer}.modal{display:none;position:absolute;z-index:1;width:100%;height:100%;background-color:#0006}.modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--white);padding:32px;border-radius:8px;display:flex;flex-direction:column;gap:32px}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header button{font-size:32px;padding:4px;background:transparent;color:var(--gray);border:none;cursor:pointer}.modal-body{display:flex;flex-direction:column;gap:16px}.modal-body input{width:500px;padding:12px;border:1px solid var(--gray);border-radius:4px}.modal-body button{margin-left:auto;width:fit-content;padding:12px;background:var(--orange);color:var(--white);border:1px solid var(--orange);border-radius:4px;font-size:16px;font-weight:400;cursor:pointer}