/* chat.css — public/index.html 에서 분리 (로드 순서가 의존 순서다) */
/* ===== 채팅 ===== */
/* 좁은 폭에서 flex 아이템이 내용보다 작게 줄어들며 글자가 단어 중간에서 꺾인다
("닉네/임", "접속/됨"). 길이가 고정된 것들은 안 줄이고, 길이가 변하는 참가자
목록만 말줄임으로 흘린다. */
#nickbar { display: flex; gap: 6px; padding: 4px 10px; background: #20242b; align-items: center; }
#nickbar label { font-size: 12px; color: #9aa0a6; flex: none; white-space: nowrap; }
#nick {
background: #2c313a; border: 1px solid #3a4150; color: #e8eaed;
padding: 3px 8px; border-radius: 6px; font-family: inherit; font-size: 13px;
flex: 0 1 100px; min-width: 64px;
}
#msgs { flex: 1; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.msg { max-width: 75%; align-self: flex-start; }
.msg.mine { align-self: flex-end; }
.msg .meta { font-size: 10px; color: #9aa0a6; margin: 3px 2px 1px; }
.msg.mine .meta { text-align: right; }
.msg .bubble {
background: #2c313a; padding: 5px 10px; border-radius: 10px;
font-size: 13px; line-height: 1.45; word-break: break-word; white-space: pre-wrap;
}
.msg.mine .bubble { background: #33518a; }
.msg .bubble.dm { background: #4a3468; }
.msg.mine .bubble.dm { background: #5d4287; }
.msg .bubble img {
display: block; max-width: min(100%, 320px); max-height: 320px;
border-radius: 8px; object-fit: contain; cursor: zoom-in;
}
.msg .bubble.mention { box-shadow: 0 0 0 2px #e0af68; }
#lightbox {
display: none; position: fixed; inset: 0; z-index: 100;
background: rgba(0,0,0,.85); cursor: zoom-out;
align-items: center; justify-content: center; padding: 20px;
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
#notif-btn {
background: none; border: none; cursor: pointer; font-size: 15px;
padding: 0 4px; line-height: 1; filter: grayscale(1); opacity: .5;
flex: none; white-space: nowrap;
}
#notif-btn.on { filter: none; opacity: 1; }
.meta .dmtag { color: #bb9af7; font-weight: bold; }
.msg .readmark { font-size: 10px; color: #e0af68; margin: 1px 3px 0; }
.msg.mine .readmark { text-align: right; }
/* 이름 수는 예측이 안 되니 여기만 줄어들게 두고, 넘치면 잘라서 보여준다 (전체는 hover) */
#participants {
font-size: 12px; color: #9ece6a; margin-left: 6px;
flex: 1 1 auto; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#typing { font-size: 11px; color: #9aa0a6; padding: 0 12px 2px; min-height: 15px; }
#dm-to {
background: #2c313a; border: 1px solid #3a4150; color: #e8eaed;
border-radius: 7px; font-size: 12px; font-family: inherit; padding: 0 4px; max-width: 100px;
}
#inputbar { display: flex; gap: 6px; padding: 6px 10px; background: #20242b; align-items: center; }
#text {
flex: 1; background: #2c313a; border: 1px solid #3a4150; color: #e8eaed;
padding: 6px 10px; border-radius: 7px; font-size: 13px; font-family: inherit;
}
#upload-status { font-size: 11px; color: #9aa0a6; white-space: nowrap; }
button.primary {
background: #7aa2f7; color: #1a1d23; border: none; padding: 7px 14px;
border-radius: 7px; font-size: 13px; font-weight: bold; cursor: pointer; font-family: inherit;
}
button.primary:hover { background: #92b4ff; }
#connstat { font-size: 12px; margin-left: auto; flex: none; white-space: nowrap; }
.on { color: #9ece6a; } .off { color: #f7768e; }
/* ===== 개인톡 (오른쪽에서 열리는 도크) ===== */
#dm-toggle {
background: none; border: 1px solid #3a4150; color: #bb9af7;
padding: 5px 12px; border-radius: 999px; cursor: pointer;
font-size: 13px; font-family: inherit; display: flex; align-items: center; gap: 5px;
}
#dm-toggle:hover { background: #2c313a; border-color: #bb9af7; }
#dm-toggle[aria-expanded="true"] { background: #3a2d54; border-color: #bb9af7; color: #d7c4ff; }
#dm-dock {
/* --dock-top: 헤더 높이 (헤더가 줄바꿈되면 JS가 다시 잰다) — 여는 버튼이 가려지지 않게 */
position: fixed; top: var(--dock-top, 44px); right: 0; bottom: 0; z-index: 90;
width: min(400px, 100%); display: flex; flex-direction: column;
background: #20242b; border-left: 1px solid #3a4150;
box-shadow: -20px 0 50px rgba(0,0,0,.5);
transform: translateX(102%); visibility: hidden;
transition: transform .24s cubic-bezier(.32,.72,0,1), visibility 0s .24s;
}
#dm-dock.open { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.32,.72,0,1); }
@media (prefers-reduced-motion: reduce) { #dm-dock { transition: none; } }
#dm-dockbar {
display: flex; align-items: center; gap: 8px; padding: 12px 14px;
border-bottom: 1px solid #333a45; flex: none;
}
#dm-title { flex: 1; font-size: 14px; font-weight: bold; color: #bb9af7; }
#dm-back, #dm-close {
background: none; border: none; color: #9aa0a6; cursor: pointer;
font-size: 12px; font-family: inherit; padding: 4px 8px; border-radius: 6px;
}
#dm-back:hover, #dm-close:hover { background: #2c313a; color: #e8eaed; }
#dm-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.dm-item { padding: 11px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.dm-item:hover { background: #2c313a; }
.dm-item .nm { font-size: 14px; font-weight: bold; display: flex; align-items: center; gap: 6px; }
.dm-item .nm .who { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-item .pv { font-size: 12px; color: #9aa0a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-badge { background: #f7768e; color: #1a1d23; border-radius: 9px; padding: 0 6px; font-size: 10px; font-weight: bold; }
.dot-on { color: #9ece6a; font-size: 9px; }
#dm-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#dm-chat[hidden], #dm-back[hidden] { display: none; }
#dm-msgs { flex: 1; overflow-y: auto; padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 10px; }
/* 개인톡은 폭이 좁아 답답해지기 쉬워서 본문 채팅보다 여백을 넉넉히 준다 */
#dm-msgs .msg { max-width: 84%; }
#dm-msgs .msg .bubble { padding: 8px 12px; border-radius: 12px; line-height: 1.55; }
#dm-msgs .msg .meta { margin: 0 3px 3px; }
#dm-empty { margin: auto; color: #9aa0a6; font-size: 13px; text-align: center; line-height: 1.7; }
#dm-inputbar { display: flex; gap: 8px; padding: 10px 14px 14px; align-items: center; flex: none; }
#dm-text {
flex: 1; background: #2c313a; border: 1px solid #3a4150; color: #e8eaed;
padding: 9px 12px; border-radius: 9px; font-size: 13px; font-family: inherit;
}
#dm-text:disabled { opacity: .5; }
#dm-upload-status { font-size: 11px; color: #9aa0a6; white-space: nowrap; }
.tabbadge { background: #f7768e; color: #1a1d23; border-radius: 9px; padding: 0 5px; font-size: 10px; }