:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: dark; background:#090c13; color:#f7f9fc; }
* { box-sizing:border-box; }
/* Any explicit `display` beats the UA's `[hidden] { display:none }`, so setting
   element.hidden = true silently did nothing for the flex sections below. One global
   guard covers every current and future toggled element. */
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top,#19243a 0,#090c13 48%); }
button,input { font:inherit; }
button { border:0; color:white; cursor:pointer; }
button:disabled { opacity:.38; cursor:not-allowed; }
.shell { width:min(1180px,100%); min-height:100vh; margin:auto; padding:16px 18px 24px; display:flex; flex-direction:column; }
.topbar { min-height:58px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#2f76ef; font-weight:800; }
.brand div { display:flex; flex-direction:column; line-height:1.25; }
.brand strong { font-size:1rem; }
#status { color:#98a6bc; font-size:.78rem; margin-top:3px; }
.text-button { background:#ffffff10; border:1px solid #ffffff18; border-radius:11px; padding:9px 13px; }
.stage { position:relative; flex:1; min-height:58vh; border-radius:24px; overflow:hidden; background:#121824; border:1px solid #ffffff12; box-shadow:0 25px 70px #0009; }
#remoteVideo { width:100%; height:100%; min-height:58vh; object-fit:cover; background:#070a10; }
.empty-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:radial-gradient(circle,#182238,#0d111b 70%); }
.empty-state[hidden] { display:none; }
.empty-state .avatar,.incoming-avatar { width:96px; height:96px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#397ff3,#7549df); box-shadow:0 16px 40px #0007; font-weight:800; font-size:1.65rem; }
.empty-state h1 { margin:20px 0 7px; font-size:clamp(1.4rem,3vw,2rem); }
.empty-state p { margin:0; color:#9ba8bb; max-width:430px; }
.local-tile { position:absolute; right:16px; bottom:16px; width:min(25vw,235px); aspect-ratio:16/10; overflow:hidden; border-radius:16px; border:2px solid #ffffff4d; background:#202838; box-shadow:0 12px 35px #0008; }
.local-tile video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.local-tile span,.participant-badge { position:absolute; left:9px; bottom:8px; padding:5px 8px; border-radius:7px; background:#0009; font-size:.72rem; }
.participant-badge { top:12px; bottom:auto; left:12px; }
.room-panel { display:flex; gap:10px; flex-wrap:wrap; padding-top:14px; }
.room-panel input { flex:1; min-width:190px; border:1px solid #ffffff1c; border-radius:12px; background:#151b27; color:white; padding:12px 14px; outline:none; }
.room-panel input:focus { border-color:#4d8df5; }
.secondary { background:#253146; border-radius:12px; padding:12px 17px; font-weight:700; }
.call-controls { display:flex; justify-content:center; align-items:flex-start; gap:14px; min-height:90px; padding-top:16px; }
.round-control { width:68px; background:transparent; display:flex; flex-direction:column; align-items:center; gap:6px; }
.round-control .icon { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:#293246; font-size:1.22rem; box-shadow:0 7px 18px #0005; }
.round-control .label { font-size:.72rem; color:#b8c2d2; }
.round-control.call .icon { background:#28a765; width:58px; height:58px; font-size:1.35rem; }
.round-control.danger .icon { background:#e3484d; width:58px; height:58px; transform:rotate(135deg); }
.round-control.active .icon { background:#e3484d; }
.incoming-overlay { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:22px; background:#03050bd9; backdrop-filter:blur(12px); }
.incoming-overlay[hidden] { display:none; }
.incoming-card { width:min(390px,100%); text-align:center; padding:38px 26px 30px; border-radius:28px; background:linear-gradient(160deg,#222c41,#111621); border:1px solid #ffffff1c; box-shadow:0 30px 90px #000c; }
.incoming-avatar { margin:auto; width:112px; height:112px; }
.incoming-card p { margin:24px 0 5px; color:#aab5c6; }
.incoming-card h2 { margin:0; }
.incoming-actions { display:flex; justify-content:space-around; margin-top:42px; }
.incoming-button { background:transparent; display:flex; flex-direction:column; align-items:center; gap:8px; }
.incoming-button span { width:66px; height:66px; display:grid; place-items:center; border-radius:50%; font-size:1.5rem; }
.incoming-button small { color:#dce3ee; font-size:.8rem; }
.incoming-button.decline span { background:#e3484d; transform:rotate(135deg); }
.incoming-button.answer span { background:#28a765; }
@media (max-width:650px) {
  .shell { padding:10px 10px 18px; }
  .topbar { min-height:52px; }
  .stage,#remoteVideo { min-height:61vh; }
  .local-tile { width:34vw; right:10px; bottom:10px; border-radius:12px; }
  .room-panel { gap:8px; }
  .room-panel input { flex-basis:100%; }
  .secondary { flex:1; }
  .call-controls { gap:6px; justify-content:space-around; }
  .round-control { width:60px; }
  .round-control .icon { width:47px; height:47px; }
  .round-control.call .icon,.round-control.danger .icon { width:56px; height:56px; }
}
.scan-controls { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding-top:14px; }
.scan-request { display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:12px; background:#26364e; border:1px solid #ffffff16; font-weight:700; }
.scan-request span { font-size:1.2rem; }
.scan-overlay { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; background:#05070b; }
.scan-overlay[hidden],.result-overlay[hidden] { display:none; }
.scan-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left)); background:#101620; }
.scan-header div { display:flex; flex-direction:column; gap:3px; }
.scan-header small { color:#aab5c6; }
.scan-close { padding:10px 14px; border-radius:11px; background:#ffffff14; }
.scan-view { position:relative; flex:1; overflow:hidden; background:#000; }
.scan-view video { width:100%; height:100%; object-fit:cover; }
.scan-frame { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:3px solid #fff; border-radius:18px; box-shadow:0 0 0 9999px #0008; }
.scan-frame.id-card { width:min(82vw,760px); aspect-ratio:1.586/1; }
.scan-frame.passport { width:min(70vw,610px); aspect-ratio:1.42/1; }
.scan-frame::before,.scan-frame::after { content:""; position:absolute; inset:-3px; border-radius:18px; pointer-events:none; }
.scan-frame::before { border-top:8px solid #46cf85; border-bottom:8px solid #46cf85; clip-path:polygon(0 0,18% 0,18% 35%,82% 35%,82% 0,100% 0,100% 100%,82% 100%,82% 65%,18% 65%,18% 100%,0 100%); }
.scan-frame span { position:absolute; left:50%; bottom:-42px; transform:translateX(-50%); white-space:nowrap; padding:7px 11px; border-radius:8px; background:#000b; font-size:.84rem; }
.capture-button { position:absolute; z-index:31; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:78px; height:78px; border-radius:50%; background:#fff; border:5px solid #ffffff55; box-shadow:0 8px 28px #000b; }
.capture-button span { display:block; width:58px; height:58px; margin:auto; border-radius:50%; border:3px solid #111; }
.result-overlay { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:18px; background:#03050be8; }
.result-card { width:min(900px,100%); max-height:94vh; overflow:auto; padding:22px; border-radius:22px; background:#151c29; border:1px solid #ffffff1a; }
.result-card h2 { margin:0 0 14px; }
.result-card img { display:block; width:100%; max-height:72vh; object-fit:contain; border-radius:14px; background:#080a0f; }
.result-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:14px; }
.link-button { display:inline-flex; align-items:center; text-decoration:none; color:white; }
.tablet-mode .local-tile video { transform:scaleX(-1); }

/* ── Tablet kiosk mode ─────────────────────────────────────────────────────
   A tablet is a fixed, unattended endpoint. It shows the operator-assigned
   location name instead of room/device identifiers, and the two actions a
   person actually touches -- Call and End -- are sized for a finger rather
   than a mouse pointer. */
.location-panel { display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:16px; }
.location-panel[hidden] { display:none; }
.location-label { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#8d97a8; }
.location-panel strong { font-size:1.5rem; line-height:1.2; text-align:center; color:#eef2f8; }

.tablet-mode .call-controls { gap:34px; min-height:150px; padding-top:22px; }
.tablet-mode .round-control { width:132px; gap:10px; }
.tablet-mode .round-control .icon { width:104px; height:104px; font-size:2.6rem; }
.tablet-mode .round-control .label { font-size:1.05rem; font-weight:700; color:#d8e0ec; }
/* Call and End are the primary targets, so they get more size than mute/camera. */
.tablet-mode .round-control.call .icon,
.tablet-mode .round-control.danger .icon { width:124px; height:124px; font-size:3.1rem; }
.tablet-mode .round-control.call .icon { box-shadow:0 10px 30px #28a76566; }
.tablet-mode .round-control.danger .icon { box-shadow:0 10px 30px #e3484d55; }
/* Secondary controls stay smaller so the call actions read as primary. */
.tablet-mode .round-control#toggleMic .icon,
.tablet-mode .round-control#toggleCamera .icon { width:84px; height:84px; font-size:2rem; }

/* Answer/Decline on the incoming-call overlay are touch targets too. */
.tablet-mode .incoming-card { width:min(560px,100%); }
.tablet-mode .incoming-actions { margin-top:48px; }
.tablet-mode .incoming-button span { width:120px; height:120px; font-size:3rem; }
.tablet-mode .incoming-button small { font-size:1.05rem; font-weight:700; }

/* The enlarged controls plus the stage's 58vh minimum exceeded the viewport, pushing the
   Call button off the bottom of the screen. On a tablet the shell is pinned to the visible
   viewport and the stage shrinks instead, so the controls are always reachable. */
.tablet-mode .shell { height:100dvh; min-height:0; padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
.tablet-mode .stage { min-height:0; flex:1 1 auto; }
.tablet-mode #remoteVideo { min-height:0; height:100%; }
.tablet-mode .call-controls { flex:0 0 auto; }
.tablet-mode .location-panel { flex:0 0 auto; }

/* Non-blocking notice, replacing alert() so a media fault cannot freeze the controls. */
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:40; max-width:min(560px,92vw); padding:13px 20px; border-radius:14px;
  background:#1d2637f2; border:1px solid #ffffff26; color:#eef2f8; font-size:.95rem;
  text-align:center; box-shadow:0 14px 40px #000a; backdrop-filter:blur(8px); }
.tablet-mode .toast { font-size:1.15rem; padding:18px 26px; bottom:auto; top:calc(16px + env(safe-area-inset-top)); }
@media (max-width:650px) {
  .scan-controls { padding-top:10px; }
  .scan-request { flex:1; justify-content:center; }
  .scan-frame.id-card { width:88vw; }
  .scan-frame.passport { width:82vw; }
}