:root {
  --bg:#1f2227; --bg2:#2b2f36; --bg3:#363b44; --fg:#e8e8e8; --muted:#9aa3af;
  --accent:#88c0d0; --accent2:#5e81ac; --err:#bf616a; --ok:#a3be8c;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; font:14px/1.4 system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--fg); }
#app { height:100%; }

.auth { max-width:360px; margin:10vh auto; padding:2rem; background:var(--bg2); border-radius:8px; }
.auth h1 { margin:0 0 1rem; color:var(--accent); }
.auth input { display:block; width:100%; padding:.6rem .75rem; margin-bottom:.75rem; background:var(--bg3); color:var(--fg); border:1px solid var(--bg3); border-radius:4px; font:inherit; }
.auth .row { display:flex; gap:.5rem; }
.auth button { flex:1; padding:.6rem; background:var(--accent2); color:var(--fg); border:none; border-radius:4px; font:inherit; cursor:pointer; }
.auth button:hover { background:var(--accent); color:var(--bg); }
.auth .err { color:var(--err); margin-top:.5rem; min-height:1.2em; font-size:.9em; }

.main { display:flex; height:100%; }
.main aside { min-height:0; background:var(--bg2); display:flex; flex-direction:column; border-right:1px solid var(--bg3); }
.main aside header { padding:.75rem 1rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--bg3); }
.main aside .who { font-weight:bold; color:var(--accent); }
.main aside .logout { background:transparent; color:var(--muted); border:none; font-size:1.2em; cursor:pointer; }
.main aside .rooms { flex:1; overflow-y:auto; padding:.5rem 0; }
.main aside .room { padding:.5rem 1rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.main aside .room:hover { background:var(--bg3); }
.main aside .room.active { background:var(--accent2); color:var(--fg); }
.main aside .room .tag { font-size:.75em; color:var(--muted); background:var(--bg); padding:.1rem .4rem; border-radius:3px; }
.main aside .room.member .name::before { content:"# "; color:var(--muted); }
.main aside .room:not(.member) .name::before { content:"+ "; color:var(--muted); }
.main aside .newroom { display:flex; padding:.5rem; gap:.25rem; border-top:1px solid var(--bg3); }
.main aside .newroom input { flex:1; padding:.4rem .5rem; background:var(--bg3); color:var(--fg); border:1px solid var(--bg3); border-radius:4px; font:inherit; }
.main aside .newroom select { padding:.4rem .3rem; background:var(--bg3); color:var(--fg); border:1px solid var(--bg3); border-radius:4px; font:inherit; }
.main aside .newroom button { padding:.4rem .75rem; background:var(--accent2); color:var(--fg); border:none; border-radius:4px; cursor:pointer; }

.main main { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.main main header { padding:.75rem 1rem; border-bottom:1px solid var(--bg3); font-weight:bold; display:flex; align-items:center; }
.main main .messages { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.msg { padding:.4rem .5rem; border-radius:4px; }
.msg .meta { color:var(--muted); font-size:.8em; margin-right:.5rem; }
.msg .name { color:var(--accent); font-weight:bold; margin-right:.5rem; }
.msg .body { white-space:pre-wrap; word-wrap:break-word; }
.empty { color:var(--muted); text-align:center; margin:auto; }

.main main .compose { display:flex; padding:.5rem 1rem 1rem; gap:.5rem; }
.main main .compose input { flex:1; padding:.6rem .75rem; background:var(--bg3); color:var(--fg); border:1px solid var(--bg3); border-radius:4px; font:inherit; }
.main main .compose button { padding:.6rem 1rem; background:var(--accent2); color:var(--fg); border:none; border-radius:4px; cursor:pointer; }
.main main .compose button:disabled, .main main .compose input:disabled { opacity:.5; cursor:not-allowed; }

/* Voice / video */
.voice-controls { display:flex; gap:.5rem; align-items:center; margin-left:auto; }
.voice-controls button { padding:.4rem .75rem; background:var(--accent2); color:var(--fg); border:none; border-radius:4px; cursor:pointer; font:inherit; }
.voice-controls button:hover { background:var(--accent); color:var(--bg); }

.video-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:.5rem;
  padding:.5rem 1rem;
  background:var(--bg);
}
.video-grid video {
  width:100%;
  border-radius:6px;
  background:#000;
  aspect-ratio:4/3;
  object-fit:cover;
}
.video-tile { position:relative; border:2px solid transparent; border-radius:8px; transition:border-color .15s; }
.video-tile video { transform:scaleX(-1); }
.video-tile.speaking { border-color:var(--ok); }
.video-tile .label {
  position:absolute; bottom:4px; left:6px;
  background:rgba(0,0,0,.6); color:var(--fg);
  font-size:.75rem; padding:1px 6px; border-radius:3px;
}

/* Error overlay */
#error-log {
  position:fixed; bottom:0; right:0; z-index:9999;
  display:flex; flex-direction:column-reverse;
  padding:8px; gap:4px; pointer-events:none;
  max-height:40vh; overflow:hidden;
}
.error-toast {
  pointer-events:auto;
  background:var(--err); color:#fff;
  font:12px/1.3 monospace; padding:6px 10px; border-radius:4px;
  max-width:420px; word-break:break-word;
  animation: toast-in .2s ease-out, toast-out .4s ease-in 7.6s forwards;
}
.error-toast.warn { background:var(--accent2); }
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes toast-out { to { opacity:0; } }