/* Pagina della videochiamata per il cliente (VIDEO_FQDN/j/<codice>) */
:root { --bg: #f3f5f9; --surface: #fff; --line: #e3e7ef; --fg: #182033; --muted: #69748a; --accent: #2f6fed; --err: #d93a3a;
  --tile: #10141c; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg: #0f131b; --surface: #171c27; --line: #2a3142; --fg: #e7ebf3; --muted: #9aa4b8;
  --accent: #6b9bff; --err: #ff6b6b; --tile: #05070b; color-scheme: dark; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 14px; }
h1 { margin: 0; font-size: 20px; }
p { margin: 0; color: var(--muted); }
.btn { border: 0; border-radius: 999px; padding: 12px 18px; font: inherit; font-weight: 650; cursor: pointer; background: var(--accent); color: #fff; }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn.danger { background: var(--err); }
.btn[aria-pressed="true"] { background: var(--muted); color: var(--surface); }
.err { color: var(--err); }
#call { position: fixed; inset: 0; background: var(--tile); display: grid; grid-template-rows: 1fr auto; }
#call.hidden, .hidden { display: none !important; }
#stage { position: relative; overflow: hidden; }
#remote { position: absolute; inset: 0; display: grid; gap: 4px; grid-auto-flow: column; }
#remote video { width: 100%; height: 100%; object-fit: contain; background: #000; }
#local { position: absolute; right: 12px; bottom: 12px; width: min(28vw, 180px); aspect-ratio: 3/4; object-fit: cover; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.6); background: #000; transform: scaleX(-1); }
#wait { position: absolute; inset: 0; display: grid; place-items: center; color: #cfd6e4; text-align: center; padding: 16px; }
.bar { display: flex; gap: 10px; justify-content: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.6); flex-wrap: wrap; }
.small { font-size: 13px; }