:root{
  --bg:#0b1220; --panel:#111a2e; --tile:#16233d; --tile2:#1b2c4d;
  --txt:#e8eef9; --dim:#8aa0c8; --accent:#3b82f6; --green:#22c55e; --red:#ef4444;
  --amber:#f59e0b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#bar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--panel);position:sticky;top:0;z-index:5;
  border-bottom:1px solid #0006}
.me{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.dot{width:12px;height:12px;border-radius:50%;background:var(--dim)}
.dot.on{background:var(--green);box-shadow:0 0 8px var(--green)}
.dot.off{background:var(--red)}
.mini{background:#0003;color:var(--dim);border:1px solid #ffffff22;border-radius:8px;
  padding:6px 10px;font-size:13px}

/* Zello-style contact list */
#grid{display:flex;flex-direction:column;max-width:640px;margin:0 auto;padding:6px 0}
.row{display:flex;align-items:center;gap:14px;padding:13px 18px;cursor:pointer;
  border-bottom:1px solid #ffffff0e}
.row:active{background:#ffffff12}
.row.offline{opacity:.5;cursor:default}
.row.busy{cursor:default}
.rav{position:relative;width:50px;height:50px;border-radius:50%;background:#204a86;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex:0 0 auto}
.row.offline .rav{background:var(--tile2)}
.pres{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;border:2px solid var(--bg)}
.pres.on{background:var(--green)} .pres.off{background:#64748b}
.rmid{flex:1;min-width:0}
.rnm{font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rst{font-size:13px;color:var(--dim)}
.row.online .rst{color:var(--green)}
.row.busy .rst{color:var(--amber)}
.ract{font-size:20px;opacity:.75;flex:0 0 auto}
.row.me{background:#0f1c36}
.row.me .rst{color:var(--dim)}
/* Everyone channel row */
.row.chan{background:#122543;border-bottom:2px solid #ffffff14}
.row.chan .chav{background:#7c3aed;font-size:22px}
.row.chan.inchan{background:#134e2b}
.row.chan.inchan .chav{background:var(--green);color:#04210f}
.row.chan .rnm{font-size:18px}

/* live call overlay */
#call{position:fixed;inset:0;background:rgba(6,10,20,.97);z-index:20;
  display:flex;align-items:center;justify-content:center}
#call.hidden{display:none}
.callInner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px}
.callWith{font-size:30px;font-weight:800}
.callState{color:var(--dim);font-size:15px}
.callState.live{color:var(--green);font-weight:700}
.callBtns{display:flex;gap:22px;margin-top:14px}
.round{width:96px;height:96px;border-radius:50%;border:none;color:#fff;font-size:17px;
  font-weight:800;cursor:pointer}
.round:active{transform:scale(.95)}
.round.end{background:var(--red)}
.round.mute{background:#334155}
.round.accept{background:var(--green);color:#04210f}
.round.mute.on{background:var(--amber);color:#111}
.hint{color:var(--dim);font-size:13px;margin-top:6px}
.pulse{position:relative;width:120px;height:120px}
.pulse span{position:absolute;inset:0;border-radius:50%;border:3px solid var(--green);
  animation:ring 1.8s ease-out infinite;opacity:0}
.pulse span:nth-child(2){animation-delay:.6s}
.pulse span:nth-child(3){animation-delay:1.2s}
@keyframes ring{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.15);opacity:0}}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:#1f2937;border:1px solid #ffffff22;border-radius:12px;padding:12px 18px;
  z-index:30;box-shadow:0 8px 30px #0008;font-weight:600}
.toast.hidden{display:none}

/* voice command button */
.mini.von{background:var(--green);color:#04210f;border-color:transparent}
.mini:disabled{opacity:.4}

/* peer muted badge */
.peerMute{background:#7c2d12;border:1px solid #f59e0b55;color:#fde68a;border-radius:20px;
  padding:6px 14px;font-weight:700;font-size:14px}

/* captions + language chips */
.ccbar{display:flex;gap:10px;align-items:center}
.chip{background:#0b1220;color:var(--txt);border:1px solid #ffffff2a;border-radius:20px;
  padding:8px 14px;font-size:14px;font-weight:600}
.chip.on{background:var(--green);color:#04210f;border-color:transparent}
select.chip{max-width:170px}
.capWrap{display:flex;width:min(560px,92vw);max-height:34vh;overflow:hidden}
.captions{width:100%;overflow-y:auto;background:#0b1220aa;border:1px solid #ffffff1a;
  border-radius:14px;padding:12px 14px;text-align:left;font-size:16px;line-height:1.5}
.capline{margin:6px 0}
.capline b{color:var(--dim);font-weight:700}
.capme b{color:#93c5fd}
.cappeer b{color:#6ee7b7}
.capsub{color:var(--green);font-size:15px;margin-top:2px;padding-left:4px;border-left:2px solid var(--green)}