:root {
  --bg:#0e0f13; --card:#16181f; --line:#262a35; --txt:#e7e9ee; --dim:#9aa1b2;
  --accent:#4f8cff; --talk:#ff4d4f; --ok:#39c07a;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--txt);
  font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; -webkit-font-smoothing:antialiased; }

.grid { display:grid; gap:12px; padding:max(12px, env(safe-area-inset-top)) 12px 12px;
  grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:820px){ .grid { grid-template-columns:1fr; } }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; }
.video { position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
/* video-streams stack absolutely so a new one can load behind the old (no blip on swap) */
.video video-stream { position:absolute; inset:0; }
.video video-stream video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.label { position:absolute; top:8px; left:10px; z-index:3; padding:3px 9px; border-radius:999px;
  background:rgba(0,0,0,.55); font-size:12.5px; font-weight:600; backdrop-filter:blur(4px);
  display:flex; align-items:center; gap:6px; pointer-events:none; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--dim); }
.card.live .dot { background:var(--ok); }
.card.talking .dot { background:var(--talk); box-shadow:0 0 0 3px rgba(255,77,79,.25); }

.controls { display:flex; align-items:center; gap:8px; padding:9px 10px; }
button { font:inherit; color:var(--txt); background:#20242f; border:1px solid var(--line);
  padding:8px 12px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:.12s; -webkit-tap-highlight-color:transparent; }
button:hover { border-color:#3a4152; background:#262b38; }
button:active { transform:translateY(1px); }
button.icon { padding:8px 10px; font-size:15px; }
.talk.active { background:var(--talk); border-color:var(--talk); color:#fff; }
.relay { margin-left:auto; }
.relay.busy { background:var(--accent); border-color:var(--accent); color:#fff; }

.menu-btn { position:fixed; top:max(12px, env(safe-area-inset-top)); right:12px; z-index:20;
  width:38px; height:38px; padding:0; justify-content:center; border-radius:10px; font-size:20px; line-height:1;
  background:rgba(22,24,31,.85); backdrop-filter:blur(6px); }
.menu { position:fixed; top:calc(max(12px, env(safe-area-inset-top)) + 44px); right:12px; z-index:20;
  min-width:172px; padding:6px; background:#1a1e28; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45); }
.menu[hidden] { display:none; }
.menu .head { padding:6px 10px 8px; font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--dim); }
.menu button { width:100%; justify-content:space-between; background:transparent; border:0; border-radius:8px; padding:9px 10px; }
.menu button:hover { background:#232838; }
.menu button .tick { color:var(--accent); opacity:0; }
.menu button.on .tick { opacity:1; }

.secnote { text-align:center; color:var(--dim); font-size:12px; padding:0 16px 14px; }

/* error/info toasts */
#toasts { position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column;
  gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:92vw; }
#toasts .toast { pointer-events:auto; max-width:92vw; padding:10px 14px; border-radius:10px;
  font:500 14px/1.35 system-ui,-apple-system,sans-serif; color:#fff; background:#b23b3b;
  box-shadow:0 6px 18px rgba(0,0,0,.45); cursor:pointer; opacity:1; transition:opacity .3s; }
#toasts .toast.info { background:#33506e; }
#toasts .toast.out { opacity:0; }