.chat-socket-identity { margin-left: auto; color: #667085; font-size: 12px; }
.chat-message-line { padding: 7px 12px; line-height: 1.55; overflow-wrap: anywhere; }
.chat-message-line.is-mine { background: #f7faff; }
.chat-message-line.is-announcement { border-left: 3px solid #175cd3; background: #eff8ff; color: #1849a9; font-weight: 700; }
.chat-message-line.is-whisper { border-left: 3px solid #7f56d9; background: #f9f5ff; }
.chat-message-author { border: 0; padding: 0; background: transparent; color: #175cd3; font: inherit; font-weight: 700; cursor: pointer; }
.chat-message-time { margin-left: 7px; color: #98a2b3; font-size: 11px; }
.chat-message-whisper { margin-right: 5px; color: #6941c6; font-weight: 700; }
.chat-notice { display: block; }
#chat-reconnect { width: auto; min-width: 58px; padding-right: 8px; padding-left: 8px; white-space: nowrap; }
.socket-directory { box-sizing: border-box; max-width: 920px; margin: 24px auto; padding: 0 16px; color: #222; font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.socket-directory-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #d0d5dd; }
.socket-directory-head h1 { margin: 0; font-size: 24px; }
.socket-room-list { margin: 0; padding: 0; list-style: none; }
.socket-room-list li { display: flex; align-items: center; gap: 12px; padding: 16px 4px; border-bottom: 1px solid #eaecf0; }
.socket-room-copy { flex: 1 1 auto; min-width: 0; }
.socket-room-copy strong,.socket-room-copy span { display: block; }
.socket-room-copy span { margin-top: 3px; color: #667085; font-size: 13px; }
.socket-room-enter,.socket-room-create button { border: 1px solid #175cd3; border-radius: 4px; padding: 9px 14px; background: #175cd3; color: #fff; text-decoration: none; font-weight: 700; }
.socket-room-create { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 14px; border: 1px solid #d0d5dd; background: #f9fafb; }
.socket-room-create input { box-sizing: border-box; min-width: 0; border: 1px solid #98a2b3; border-radius: 4px; padding: 9px 10px; }
.socket-room-create input[name="title"] { flex: 0 1 240px; }.socket-room-create input[name="description"] { flex: 1 1 300px; }
.socket-directory-notice { margin: 12px 0; color: #475467; }
@media (max-width: 520px) { .socket-directory { margin-top: 12px; }.socket-room-list li { align-items: flex-start; }.socket-room-create input { flex-basis: 100% !important; } }