/* CHESSWAR — text chat + voice chat widgets (chat.js / voice.js). Lives inside #hud; palette from game.css. */

/* ---------- chat: bottom-left, above the rank/health panel ---------- */
#chat-box{position:absolute;left:26px;bottom:150px;width:min(430px,42vw);display:flex;flex-direction:column;gap:5px;font-family:var(--body);pointer-events:none;z-index:25}
#chat-log{display:flex;flex-direction:column;gap:3px;justify-content:flex-end;max-height:40vh;overflow:hidden}
.chat-line{background:var(--glass);border:1px solid transparent;border-radius:8px;padding:4px 10px;font-size:14px;line-height:1.35;color:var(--cream);text-shadow:0 1px 0 #000;word-break:break-word;opacity:1;transition:opacity .7s}
.chat-line .cn{font-weight:900;margin-right:6px}
.chat-line .cn::after{content:":"}
.chat-line .ct{display:inline-block;margin-right:6px;padding:0 5px;border-radius:4px;background:var(--gold);color:#2a1706;font-size:10px;font-weight:900;letter-spacing:.1em;vertical-align:1px}
.chat-line.team{border-left:3px solid var(--gold)}
.chat-line.sys{color:var(--gold);font-weight:700;font-style:italic;background:rgba(26,16,8,.55)}
.chat-line.old{opacity:0}
#chat-box.typing .chat-line.old{opacity:1;transition:none}
#chat-form{display:none;align-items:stretch;gap:0;pointer-events:auto}
#chat-box.typing #chat-form{display:flex}
#chat-tag{display:flex;align-items:center;padding:0 10px;border-radius:9px 0 0 9px;background:var(--gold);color:#2a1706;font-family:var(--head);font-size:12px;letter-spacing:.1em}
#chat-box.team-in #chat-tag{background:var(--gold2)}
#chat-input{flex:1;min-width:0;background:var(--glass2);border:1px solid var(--gold);border-left:0;border-radius:0 9px 9px 0;padding:8px 10px;color:var(--cream);font:700 15px var(--body);outline:none;pointer-events:auto}
#chat-input::placeholder{color:rgba(251,239,207,.45)}

/* ---------- voice: speakers list (top-right, under the kill feed) ---------- */
#voice-list{position:absolute;top:300px;right:20px;display:flex;flex-direction:column;gap:4px;align-items:flex-end;font-family:var(--body);pointer-events:none}
.voice-row{display:flex;align-items:center;gap:7px;background:var(--glass);border:1px solid var(--line);border-radius:9px;padding:4px 10px 4px 8px;font-size:14px;font-weight:900;text-shadow:0 2px 0 #000;animation:voice-pop .15s ease-out}
.voice-row b{letter-spacing:.04em}
.voice-ico{display:flex;color:var(--gold);animation:voice-pulse .8s ease-in-out infinite}
@keyframes voice-pulse{50%{opacity:.45}}
@keyframes voice-pop{from{transform:translateX(10px);opacity:0}}

/* ---------- voice: MIC indicator (bottom centre) ---------- */
#voice-mic{position:absolute;left:50%;bottom:108px;transform:translateX(-50%);display:none;align-items:center;gap:9px;background:var(--glass2);border:1px solid var(--line);border-radius:999px;padding:6px 16px 6px 12px;font-family:var(--head);font-size:14px;letter-spacing:.12em;color:var(--cream);text-shadow:0 2px 0 #000;pointer-events:none}
#voice-mic.on{display:flex}
#voice-mic .vm-dot{width:11px;height:11px;border-radius:50%;background:#7a6a4a}
#voice-mic.live{border-color:var(--red)}
#voice-mic.live .vm-dot{background:var(--red);box-shadow:0 0 8px var(--red);animation:voice-pulse .9s ease-in-out infinite}
#voice-mic.wait .vm-dot{background:var(--gold)}
#voice-mic.denied{border-color:#7a6a4a;color:#bda878}
#voice-mic .vm-bar{display:block;width:54px;height:6px;border-radius:3px;background:rgba(255,226,160,.15);overflow:hidden}
#voice-mic .vm-bar u{display:block;height:100%;width:0;background:var(--gold);text-decoration:none;transition:width .08s}
#voice-mic small{font-family:var(--body);font-size:11px;font-weight:900;letter-spacing:.1em;color:#d8c28e}
#voice-mic small:empty{display:none}

@media (max-width:760px){#chat-box{bottom:130px;width:60vw}#chat-log{max-height:28vh}}