/* atlas-calls.css - in-app voice / video calls on RealtimeKit (v2, 18 Sep 2026).
   Header icons inherit the thread's --mr-* tokens (both surfaces set them on
   the messenger root). The call layer is deliberately dark on both themes,
   like every call UI, and takes the house gold for the accent. States are
   driven by [data-state] on the layer: ringing / incoming / connecting /
   connected / ended / failed. z-index sits above the messenger panel (9998)
   so the layer owns the screen. */

.acall-wrap{display:flex;flex:none;gap:2px;align-items:center}
.acall-btn{flex:none;width:44px;height:44px;border-radius:22px;border:none;background:transparent;color:var(--mr-ink,var(--atl-ink,#F4F1EA));display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background var(--atl-dur-fast,120ms) ease-out}
.acall-btn svg{width:22px;height:22px}
.acall-btn:active{background:var(--mr-quote,rgba(255,255,255,.07))}
.acall-btn:focus-visible{outline:2px solid var(--atl-gold,#D4B26A);outline-offset:2px}
.acall-btn[disabled]{opacity:.45;cursor:default}
@media (max-width:599px){.cmsg-th .acall-wrap{gap:0}}

/* ── Layer ─────────────────────────────────────────────────────────────── */
.acall-layer{--ac-bg:#0A0E0E;--ac-ink:#F4F1EA;--ac-ink2:rgba(244,241,234,.66);--ac-gold:var(--atl-gold-fill,#D4B26A);--ac-on-gold:var(--atl-on-gold,#171207);--ac-danger:#E5484D;--ac-up:#3FB77E;--ac-chip:rgba(255,255,255,.10);
  position:fixed;inset:0;z-index:10050;background:var(--ac-bg);color:var(--ac-ink);font-family:var(--atl-font,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,sans-serif);
  display:flex;flex-direction:column;opacity:0;transform:translateY(12px);transition:opacity 220ms ease-out,transform 220ms ease-out;overflow:hidden}
.acall-layer.on{opacity:1;transform:none}
body.acall-open{overflow:hidden}

.acall-stage{position:absolute;inset:0;background:#000}
.acall-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:none}
.acall-layer.remote-video[data-state="connected"] .acall-remote{display:block}
.acall-persona{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 80% at 50% 30%,#1B2422 0%,#0A0E0E 70%)}
.acall-layer.remote-video[data-state="connected"] .acall-persona{display:none}
.acall-avatar{width:112px;height:112px;border-radius:56px;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:600;color:var(--ac-on-gold);background:var(--ac-gold);box-shadow:0 0 0 10px rgba(212,178,106,.12),0 0 0 22px rgba(212,178,106,.06)}
.acall-layer[data-state="incoming"] .acall-avatar,.acall-layer[data-state="ringing"] .acall-avatar{animation:acall-pulse 1.8s ease-in-out infinite}
@keyframes acall-pulse{0%,100%{box-shadow:0 0 0 10px rgba(212,178,106,.12),0 0 0 22px rgba(212,178,106,.06)}50%{box-shadow:0 0 0 16px rgba(212,178,106,.16),0 0 0 34px rgba(212,178,106,.05)}}

.acall-local{position:absolute;right:16px;top:calc(96px + env(safe-area-inset-top,0px));width:104px;height:140px;border-radius:14px;object-fit:cover;background:#111;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.45);display:none;transform:scaleX(-1)}
.acall-layer.local-video[data-state="connected"] .acall-local,.acall-layer.local-video[data-state="ringing"] .acall-local,.acall-layer.local-video[data-state="connecting"] .acall-local{display:block}

.acall-top{position:relative;flex:none;padding:calc(18px + env(safe-area-inset-top,0px)) 20px 0;text-align:center;pointer-events:none}
.acall-name{font-size:24px;font-weight:650;letter-spacing:-.01em;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.acall-status{margin-top:4px;font-size:15px;color:var(--ac-ink2);font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.5);min-height:20px}
.acall-layer[data-state="failed"] .acall-status{color:var(--ac-ink);max-width:32ch;margin-left:auto;margin-right:auto;line-height:1.45}
.acall-layer[data-state="ended"] .acall-status{color:var(--ac-ink)}
/* Consent line (19 Sep 2026): quiet, under the timer, connected only. A 6px
   recording dot, no pulse - informative, never alarming. */
.acall-rec{margin-top:10px;font-size:12.5px;line-height:1.3;color:var(--ac-ink2);display:inline-flex;align-items:center;gap:6px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.acall-rec i{width:6px;height:6px;border-radius:3px;background:var(--ac-danger);opacity:.85;flex:none}
.acall-rec[hidden]{display:none}
.acall-layer:not([data-state="connected"]) .acall-rec{display:none}

/* ── Scoped reset (18 Sep 2026, Harry on build 88: "gold boxes on the
   buttons"). setState() focuses End / Accept by script so a keyboard user
   lands on the primary action; WebKit treats that script focus as
   :focus-visible, and two rules then painted on the touch screen: the app's
   global `:focus-visible { outline: 2px solid rgba(212,178,106,.7) }`
   (atlas-sections.css) drew a gold BOX round the whole icon + label column,
   and this file's ring rule drew a second gold ring on the circle (the
   Cockpit chain, without atlas-sections.css, showed the UA blue box). The
   layer now owns focus styling: every button inside it loses the page's
   focus outline (:where keeps specificity at the class), and the ring comes
   back only once a key has actually been pressed inside the layer
   (.acall-kb, set on keydown, cleared on pointerdown - atlas-calls.js). */
.acall-layer :where(button){-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.acall-layer :where(button):focus,.acall-layer :where(button):focus-visible{outline:0;box-shadow:none}
.acall-layer.acall-kb .acall-cbtn:focus-visible .i,.acall-layer.acall-kb .acall-abtn:focus-visible .i{outline:2px solid var(--ac-gold);outline-offset:3px}
.acall-layer.acall-kb .acall-close:focus-visible{outline:2px solid var(--ac-gold);outline-offset:3px}

/* ── Controls ─────────────────────────────────────────────────────────── */
.acall-ctl,.acall-answer,.acall-done{position:relative;margin-top:auto;flex:none;display:none;justify-content:center;align-items:flex-end;gap:14px;padding:16px 16px calc(28px + env(safe-area-inset-bottom,0px))}
.acall-layer[data-state="ringing"] .acall-ctl,.acall-layer[data-state="connecting"] .acall-ctl,.acall-layer[data-state="connected"] .acall-ctl{display:flex}
/* consent (19 Sep 2026) = a client dialling for the first time: the same two
   buttons read Call / Cancel, the consent block sits above them, no ring. */
.acall-layer[data-state="incoming"] .acall-answer,.acall-layer[data-state="consent"] .acall-answer{display:flex;gap:56px}
.acall-consent{position:relative;flex:none;margin:0 24px;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-align:center}
.acall-consent[hidden]{display:none}
.acall-consent p{margin:0 0 10px;font-size:14.5px;line-height:1.4;color:var(--ac-ink)}
.acall-norec{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.28);border-radius:22px;background:transparent;color:var(--ac-ink2);font:inherit;font-size:13.5px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.acall-norec:active{background:rgba(255,255,255,.08)}
.acall-layer[data-state="failed"] .acall-done{display:flex}
.acall-layer[data-state="ringing"] [data-acall-act="flip"],.acall-layer[data-state="ringing"] [data-acall-act="speaker"],.acall-layer[data-state="connecting"] [data-acall-act="flip"],.acall-layer[data-state="connecting"] [data-acall-act="speaker"]{display:none}
.acall-layer[data-kind="voice"] [data-acall-act="flip"]{display:none}

.acall-cbtn,.acall-abtn{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:none;padding:0;color:var(--ac-ink);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-width:56px}
.acall-cbtn .i,.acall-abtn .i{width:56px;height:56px;border-radius:28px;display:flex;align-items:center;justify-content:center;background:var(--ac-chip);transition:background 120ms ease-out,transform 120ms ease-out}
.acall-cbtn .i svg,.acall-abtn .i svg{width:24px;height:24px}
.acall-cbtn .l,.acall-abtn .l{font-size:12px;color:var(--ac-ink2);line-height:1}
.acall-cbtn:active .i,.acall-abtn:active .i{transform:scale(.95)}
.acall-cbtn[aria-pressed="true"] .i{background:var(--ac-ink);color:var(--ac-bg)}
.acall-cbtn.end .i{background:var(--ac-danger);color:#fff}
/* Incoming: 76px Accept (green) / Decline (red) targets, the ring visible in
   the Accept halo and the avatar pulse - the screen itself reads as ringing. */
.acall-abtn .i{width:76px;height:76px;border-radius:38px}
.acall-abtn .i svg{width:32px;height:32px}
.acall-abtn.decline .i{background:var(--ac-danger);color:#fff}
.acall-abtn.accept .i{background:var(--ac-up);color:#fff;animation:acall-nudge 1.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(63,183,126,.55)}
.acall-layer[data-state="incoming"] .acall-abtn.accept .i{animation:acall-nudge 1.6s ease-in-out infinite,acall-halo 1.5s ease-out infinite}
.acall-layer[data-state="incoming"] .acall-status,.acall-layer[data-state="consent"] .acall-status{font-size:17px;color:var(--ac-ink)}
@keyframes acall-nudge{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@keyframes acall-halo{0%{box-shadow:0 0 0 0 rgba(63,183,126,.55)}100%{box-shadow:0 0 0 22px rgba(63,183,126,0)}}
.acall-abtn .l{font-size:14px;color:var(--ac-ink)}
.acall-cbtn[disabled]{opacity:.4;cursor:default}
.acall-close{min-height:48px;padding:0 28px;border-radius:24px;border:none;background:var(--ac-ink);color:var(--ac-bg);font:inherit;font-size:15px;font-weight:650;cursor:pointer;touch-action:manipulation}

.acall-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10060;max-width:calc(100vw - 32px);background:#1A1B1E;color:#F4F1EA;border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.35;box-shadow:0 8px 28px rgba(0,0,0,.35)}

@media (min-width:900px){.acall-layer{left:50%;top:50%;bottom:auto;right:auto;width:min(560px,100vw);height:min(760px,100vh);transform:translate(-50%,-50%) translateY(12px);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.6)}.acall-layer.on{transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.acall-layer,.acall-btn,.acall-cbtn .i,.acall-abtn .i{transition:none}.acall-avatar,.acall-abtn.accept .i,.acall-layer[data-state="incoming"] .acall-abtn.accept .i{animation:none}}