:root { color-scheme: dark; --bg:#1e1f22; --panel:#2b2d31; --line:#3a3c42; --text:#e3e5e8; --muted:#9aa0a6; --accent:#5865f2; --danger:#da373c; --ok:#3ba55d; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, sans-serif; }
[hidden] { display: none !important; }
input, button { font: inherit; }
input { width: 100%; padding: .6rem .7rem; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
button { padding: .55rem .9rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
button:hover { filter: brightness(1.1); }
button.danger { background: var(--danger); }
button.off { background: var(--danger); }

.card { max-width: 380px; margin: 8vh auto; padding: 1.5rem; background: var(--panel); border-radius: 10px; }
.card h1 { margin: 0 0 1rem; }
.card label { display: block; margin-bottom: .8rem; color: var(--muted); font-size: .85rem; }
.card label input { margin-top: .25rem; }
.card button { width: 100%; }
.error { color: #ff7b7b; min-height: 1.2em; margin: .6rem 0 0; }
.hint { color: var(--muted); font-size: .8rem; margin: .4rem 0 0; }

#app { display: flex; flex-direction: column; height: 100%; }
header { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.spacer { flex: 1; }
.body { flex: 1; display: flex; min-height: 0; }
aside { width: 200px; padding: 1rem; background: var(--panel); border-right: 1px solid var(--line); overflow: auto; }
aside h2 { font-size: .75rem; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
#users { list-style: none; margin: 0; padding: 0; }
#users li { padding: .3rem .4rem; border-radius: 4px; display: flex; align-items: center; gap: .5rem; }
#users li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
#users li.voice::before { background: var(--ok); }
#users li.speaking::before { box-shadow: 0 0 0 3px rgba(59,165,93,.5); }
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#messages { flex: 1; overflow-y: auto; padding: 1rem; }
.msg { margin-bottom: .6rem; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg .who { font-weight: 600; margin-right: .5rem; }
.msg .time { color: var(--muted); font-size: .75rem; }
.sys { color: var(--muted); font-size: .85rem; margin-bottom: .5rem; font-style: italic; }
#chatForm { display: flex; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid var(--line); }
#chatForm input { flex: 1; }
#chatForm button { width: auto; }

@media (max-width: 600px) {
  aside { width: 110px; padding: .6rem; }
}