:root {
  --bg: #0b0c0e; --panel: #16181c; --line: #2a2e36; --line2: #3a3f49;
  --text: #f3f4f6; --muted: #9ca3af; --green: #4ade80; --red: #dc2626; --red-text: #f87171;
  --blue: #2563eb; --glass: rgba(10, 11, 13, 0.72);
  --sans: "IBM Plex Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.45 var(--sans); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn { height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line2); background: transparent; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 500; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn.big { height: 52px; padding: 0 28px; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: default; }

.screen { position: fixed; inset: 0; }
.screen.center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.screen.center h1 { font-size: 28px; margin: 0; font-weight: 600; }

/* ---------- before the call ---------- */
#pre { display: flex; align-items: center; justify-content: center; gap: 64px; padding: 24px; flex-wrap: wrap; overflow: auto; }
.pre-media { display: flex; flex-direction: column; gap: 12px; width: min(480px, 100%); }
.preview { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #2a2e36; border: 1px solid var(--line2); }
.preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.tag { position: absolute; left: 10px; bottom: 8px; font-size: 12px; color: #d1d5db; text-shadow: 0 1px 2px #000; }
.no-cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.meter { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.meter .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
#mic-level { height: 6px; width: 0; background: var(--green); transition: width .08s; }
.pre-info { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.countdown { font: 600 96px/1 var(--mono); color: var(--green); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  #pre { flex-direction: column; gap: 24px; }
  .countdown { font-size: 72px; }
  .pre-info { align-items: center; text-align: center; }
}

/* ---------- the call ---------- */
#call { overflow: hidden; background: #000; touch-action: none; }
.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.stage video { width: 100%; height: 100%; object-fit: contain; }
.stage.fill video { object-fit: cover; }
.remote-empty { position: absolute; color: var(--muted); font-size: 16px; padding: 24px; text-align: center; }

.timer { position: absolute; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  padding: 6px 14px; border-radius: 10px; background: var(--glass); pointer-events: none;
  font: 600 32px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--green); }
.timer.warn { color: var(--red-text); }
.timer.over { background: var(--red); color: #fff; }

.icon-btn { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--glass); color: var(--text);
  display: flex; align-items: center; justify-content: center; }
.fit-btn { top: max(18px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.sas-reopen { top: max(18px, env(safe-area-inset-top)); right: calc(max(16px, env(safe-area-inset-right)) + 52px); }

.sas { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px;
  padding: 10px 12px 10px 20px; border-radius: 12px; background: rgba(10, 11, 13, .85); border: 1px solid var(--line); }
.sas-code { font: 600 22px/1.2 var(--mono); letter-spacing: .06em; }

.banner { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 10px;
  background: rgba(10, 11, 13, .85); border: 1px solid var(--line); font-size: 14px; max-width: calc(100% - 32px); text-align: center; }

.self { position: absolute; width: 256px; height: 144px; border-radius: 12px; overflow: hidden; background: #2a2e36;
  border: 1px solid var(--line2); touch-action: none; user-select: none; cursor: move; z-index: 2; }
.self video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.self.mirror video { transform: scaleX(-1); }
.mini { position: absolute; top: 4px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: rgba(10, 11, 13, .6);
  color: #d1d5db; display: flex; align-items: center; justify-content: center; touch-action: none; }
.mini svg { width: 16px; height: 16px; }
.mini.resize { left: 4px; cursor: nwse-resize; }
.mini.hide { right: 4px; }
.self-show { position: absolute; right: 16px; bottom: 100px; background: var(--glass); z-index: 2; }

.controls { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--glass); z-index: 3;
  transition: opacity .3s; }
.ctl { width: 52px; height: 52px; border: 0; border-radius: 12px; background: #2a2e36; color: var(--text);
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.ctl .off { display: none; }
.ctl.muted-state { background: #7f1d1d; }
.ctl.muted-state .on { display: none; }
.ctl.muted-state .off { display: block; }
.ctl.end { width: auto; padding: 0 22px; background: var(--red); color: #fff; font-weight: 600; }
.sep { width: 1px; height: 32px; background: var(--line2); }
body.idle .controls, body.idle .fit-btn, body.idle .sas-reopen { opacity: 0; pointer-events: none; }
body.idle #call { cursor: none; }

.overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.dialog { width: min(420px, calc(100% - 32px)); padding: 28px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.dialog h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }

/* Phones: round buttons on a bar along the edge, sheet-style confirmation */
@media (pointer: coarse) {
  .controls { left: 0; right: 0; bottom: 0; transform: none; border-radius: 0; justify-content: center; gap: 14px;
    padding: 16px 16px max(24px, env(safe-area-inset-bottom)); }
  .ctl { width: 56px; height: 56px; border-radius: 28px; }
  .ctl.end { width: 56px; padding: 0; }
  .ctl.end span, .sep { display: none; }
  .sas { top: 80px; left: 16px; right: 16px; transform: none; justify-content: space-between; }
  .overlay { align-items: flex-end; }
  .dialog { width: 100%; max-width: 480px; border-radius: 20px 20px 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn { height: 52px; width: 100%; }
}
@media (pointer: coarse) and (orientation: landscape) {
  .controls { left: auto; top: 0; bottom: 0; right: 0; width: 96px; flex-direction: column;
    padding: 12px max(20px, env(safe-area-inset-right)) 12px 20px; }
  .fit-btn { right: 112px; }
  .sas-reopen { right: 164px; }
  .sas { top: 16px; left: 50%; right: auto; transform: translateX(-60%); }
}

/* ---------- host page ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
.page h1 { font-size: 26px; margin: 0 0 4px; font-weight: 600; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-top: 20px; }
.card h2 { font-size: 18px; margin: 0 0 14px; font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
input, select { height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: #0f1114; color: var(--text); font: inherit; }
input[type="text"] { min-width: 220px; }
.link-box { margin-top: 14px; padding: 14px; border-radius: 10px; background: #0f1114; border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 10px; }
.link { font: 13px/1.4 var(--mono); word-break: break-all; color: #d1d5db; }
.list { display: flex; flex-direction: column; }
.item { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item .grow { flex: 1; min-width: 200px; }
.item .btn { height: 36px; padding: 0 12px; font-size: 14px; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); }
.badge.live { border-color: var(--green); color: var(--green); }
.err { color: var(--red-text); }
.ok { color: var(--green); }
.as-link { display: inline-flex; align-items: center; text-decoration: none; }
.link.token { font-size: 18px; }
.gap-top { margin-top: 12px; }
code { font-family: var(--mono); font-size: 13px; }