/* heyQT tokens (design/handoff-v1/01-design-system/tokens), dark theme only. Fonts are self-hosted. */
@font-face{font-family:"DM Sans";font-style:italic;font-weight:300 800;font-display:swap;src:url("/static/v/dmsans-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:300 800;font-display:swap;src:url("/static/v/dmsans-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("/static/v/dmsans-roman-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("/static/v/dmsans-roman-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/static/v/dmmono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ============ APPROVED BRAND PALETTE (do not alter) ============ */
:root{
--qt-inky-navy:#0F1B2D;
--qt-off-white:#F5F1EB;
--qt-aqua-mint:#7EDBD1;
--qt-soft-blush:#E8CDC6;
--qt-warm-sand:#D7C2AE;
--qt-accent-coral:#FF7A6E;
/* ============ DERIVED SCALES (PROPOSED: tints/shades of approved colours) ============ */
--navy-50:#EEF0F4;--navy-100:#D8DDE4;--navy-200:#B5BDCA;--navy-300:#8793A6;--navy-400:#5A6A84;--navy-500:#4E5D76;--navy-600:#3A4A66;--navy-700:#26354F;--navy-800:#1A2840;--navy-900:#0F1B2D;--navy-950:#08111D;
--coral-50:#FFF1EF;--coral-100:#FFDCD8;--coral-200:#FFBDB6;--coral-300:#FFA79E;--coral-400:#FF8D82;--coral-500:#FF7A6E;--coral-600:#F0604F;--coral-700:#D9473B;--coral-800:#B4382F;--coral-900:#8A2A23;
--mint-100:#DDF5F2;--mint-300:#B5EBE5;--mint-500:#7EDBD1;--mint-700:#3FAFA3;--mint-800:#1F7A70;--mint-900:#145750;
--blush-50:#FAF1EE;--blush-100:#F4E4DF;--blush-300:#E8CDC6;--blush-500:#D3A89E;--blush-700:#9C6A5F;
--sand-0:#FFFFFF;--sand-50:#FBF8F4;--sand-100:#F5F1EB;--sand-200:#EDE6DC;--sand-300:#E2D8CB;--sand-400:#D7C2AE;--sand-500:#B9A38D;--sand-600:#8C6F55;--sand-700:#6B5440;
/* Live + feedback (PROPOSED, AA-checked) */
--live-red:#C8402F;        /* white text 4.96:1 */
--success-600:#1F7A70;--success-100:#DDF5F2;
--warning-600:#7D5F27;--warning-100:#F6EBD3;--warning-400:#E3B35C;
--error-600:#B42C3C;--error-100:#F9DEE0;--error-400:#F07A86;
--info-600:#3A4A66;--info-100:#E3E8EF;
--gold-500:#D9A441;        /* subscriber / premium marker, non-text */
}
:root{
--font-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--font-display:var(--font-sans);
--font-numeric:var(--font-sans);--font-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800;
/* Desktop values; tablet + mobile overrides below */
--type-display-xl:88px;--type-display-l:64px;--type-display-m:48px;
--type-h1:36px;--type-h2:28px;--type-h3:20px;--type-h4:17px;
--type-body-l:17px;--type-body:15px;--type-body-s:13px;--type-caption:12px;--type-overline:11px;--type-micro:10px;
--leading-display:1.04;--leading-heading:1.18;--leading-body:1.5;--leading-tight:1.25;--leading-ui:1.2;
--tracking-display:-0.025em;--tracking-heading:-0.015em;--tracking-body:0;--tracking-ui:0.005em;--tracking-overline:0.28em;--tracking-overline-wide:0.36em;
/* Semantic text styles (font shorthand) */
--text-display:var(--weight-light) var(--type-display-l)/var(--leading-display) var(--font-display);
--text-heading:var(--weight-semibold) var(--type-h1)/var(--leading-heading) var(--font-sans);
--text-body:var(--weight-regular) var(--type-body)/var(--leading-body) var(--font-sans);
--text-label:var(--weight-semibold) var(--type-body-s)/var(--leading-ui) var(--font-sans);
--text-caption:var(--weight-regular) var(--type-caption)/1.35 var(--font-sans);
--text-overline:var(--weight-semibold) var(--type-overline)/1.2 var(--font-sans);
}
@media (max-width:1199px){:root{--type-display-xl:72px;--type-display-l:56px;--type-display-m:40px;--type-h1:32px;--type-h2:26px}}
@media (max-width:599px){:root{--type-display-xl:48px;--type-display-l:40px;--type-display-m:32px;--type-h1:28px;--type-h2:22px;--type-body-l:16px}}
:root{
--space-0:0;--space-0-5:2px;--space-1:4px;--space-1-5:6px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--inset-control-x:var(--space-4);--inset-card:var(--space-5);--inset-section:var(--space-20);--gap-stack:var(--space-3);--gap-inline:var(--space-2);
--size-control-sm:32px;--size-control-md:40px;--size-control-lg:48px;--size-control-xl:56px;--size-touch:44px;
--size-avatar-xs:20px;--size-avatar-sm:28px;--size-avatar-md:40px;--size-avatar-lg:56px;--size-avatar-xl:96px;
--size-icon-sm:16px;--size-icon-md:20px;--size-icon-lg:24px;
}
:root{
--radius-none:0;--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:36px;--radius-pill:999px;--radius-round:50%;
--radius-app-icon:22.5%;--radius-button:var(--radius-pill);--radius-input:var(--radius-md);--radius-card:var(--radius-lg);--radius-sheet:var(--radius-xl);--radius-chip:var(--radius-pill);--radius-video:var(--radius-lg);
--border-width-hairline:1px;--border-width-default:1px;--border-width-strong:1.5px;--border-width-focus:2px;
}
:root{
/* Breakpoints (reference values; use in media queries literally) xs 0 · sm 600 · md 900 · lg 1200 · xl 1440 */
--bp-sm:600px;--bp-md:900px;--bp-lg:1200px;--bp-xl:1440px;
--grid-columns-mobile:4;/* @kind other */--grid-columns-tablet:8;/* @kind other */--grid-columns-desktop:12;/* @kind other */
--grid-gutter-mobile:16px;--grid-gutter-tablet:20px;--grid-gutter-desktop:24px;
--grid-margin-mobile:16px;--grid-margin-tablet:32px;--grid-margin-desktop:48px;
--container-max:1280px;--container-reading:680px;--container-wide:1440px;
--nav-height-web:64px;--nav-height-mobile:56px;--tabbar-height:64px;--sidenav-width:248px;--chat-panel-width:360px;
}
:root{
/* Warm, navy-tinted, soft. Never pure black. */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(15,27,45,.06),0 1px 1px rgba(15,27,45,.04);
--shadow-2:0 4px 12px -2px rgba(15,27,45,.08),0 2px 4px rgba(15,27,45,.04);
--shadow-3:0 12px 28px -6px rgba(15,27,45,.14),0 4px 8px rgba(15,27,45,.05);
--shadow-4:0 24px 56px -12px rgba(15,27,45,.24),0 8px 16px rgba(15,27,45,.06);
--shadow-glow-coral:0 8px 24px -6px rgba(255,122,110,.55);
--shadow-text-overlay:0 1px 2px rgba(0,0,0,.35);
--elevation-card:var(--shadow-1);--elevation-card-hover:var(--shadow-3);--elevation-popover:var(--shadow-3);--elevation-modal:var(--shadow-4);--elevation-fab:var(--shadow-glow-coral);
--z-base:0;/* @kind other */--z-sticky:100;/* @kind other */--z-overlay:400;/* @kind other */--z-drawer:500;/* @kind other */--z-modal:600;/* @kind other */--z-toast:700;/* @kind other */--z-tooltip:800;/* @kind other */
}
:root{
--duration-instant:80ms;
--duration-fast:140ms;
--duration-base:220ms;
--duration-slow:360ms;
--duration-gentle:520ms;
--duration-float:2400ms;
--ease-standard:cubic-bezier(.2,0,0,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in:cubic-bezier(.4,0,1,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
--press-scale:.97;
--hover-lift:-2px;
}
@media (prefers-reduced-motion:reduce){:root{
--duration-fast:0ms;
--duration-base:0ms;
--duration-slow:0ms;
--duration-gentle:0ms;
--duration-float:0ms;
--hover-lift:0;
--press-scale:1;
}}
/* Semantic tokens, dark theme. Pages set data-theme="dark" on <html>; :root carries the same values as a fallback. */
/* Semantic tokens: light base values first, then the dark theme overrides them (also on :root, so the page is dark without the attribute). */
:root{
--bg-canvas:var(--sand-100);--bg-surface:var(--sand-0);--bg-surface-raised:var(--sand-0);--bg-surface-sunken:var(--sand-200);--bg-subtle:var(--sand-50);--bg-inverse:var(--navy-900);--bg-tint-blush:var(--blush-100);--bg-tint-mint:var(--mint-100);--bg-tint-sand:var(--sand-200);
--text-primary:var(--navy-900);--text-secondary:var(--navy-600);--text-tertiary:var(--navy-400);--text-disabled:var(--navy-300);--text-inverse:var(--sand-100);--text-accent:var(--coral-800);--text-on-accent:var(--navy-900);--text-on-inverse:var(--sand-100);--text-link:var(--navy-900);
--border-subtle:rgba(15,27,45,.08);--border-default:rgba(15,27,45,.14);--border-strong:rgba(15,27,45,.32);--border-focus:var(--coral-500);--border-inverse:rgba(245,241,235,.16);
--action-primary:var(--coral-500);--action-primary-hover:var(--coral-600);--action-primary-pressed:var(--coral-700);--action-primary-text:var(--navy-900);
--action-secondary:var(--navy-900);--action-secondary-hover:var(--navy-800);--action-secondary-pressed:var(--navy-950);--action-secondary-text:var(--sand-100);
--action-tertiary:transparent;--action-tertiary-hover:rgba(15,27,45,.06);--action-tertiary-pressed:rgba(15,27,45,.10);--action-tertiary-text:var(--navy-900);
--action-disabled:var(--sand-200);--action-disabled-text:var(--navy-300);
--focus-ring:0 0 0 2px var(--bg-canvas),0 0 0 4px var(--coral-500);
--live-bg:var(--live-red);--live-text:#FFFFFF;--live-dot:#FFFFFF;--upcoming-bg:var(--mint-500);--upcoming-text:var(--navy-900);--offline-bg:var(--sand-200);--offline-text:var(--navy-600);
--reaction-heart:var(--coral-500);--verified:var(--mint-700);--subscriber:var(--gold-500);
--feedback-success-bg:var(--success-100);--feedback-success-fg:var(--success-600);--feedback-warning-bg:var(--warning-100);--feedback-warning-fg:var(--warning-600);--feedback-error-bg:var(--error-100);--feedback-error-fg:var(--error-600);--feedback-info-bg:var(--info-100);--feedback-info-fg:var(--info-600);
--overlay-scrim:rgba(8,17,29,.56);--overlay-glass:rgba(15,27,45,.48);--overlay-glass-border:rgba(255,255,255,.14);--overlay-text:#FFFFFF;--overlay-blur:16px;
--skeleton-base:var(--sand-200);--skeleton-shine:var(--sand-50);
color-scheme:light;
}
:root,[data-theme="dark"]{
--bg-canvas:var(--navy-950);--bg-surface:var(--navy-900);--bg-surface-raised:var(--navy-800);--bg-surface-sunken:#0B1524;--bg-subtle:var(--navy-900);--bg-inverse:var(--sand-100);--bg-tint-blush:rgba(232,205,198,.12);--bg-tint-mint:rgba(126,219,209,.12);--bg-tint-sand:rgba(215,194,174,.12);
--text-primary:var(--sand-100);--text-secondary:var(--navy-200);--text-tertiary:var(--navy-300);--text-disabled:var(--navy-400);--text-inverse:var(--navy-900);--text-accent:var(--coral-400);--text-on-accent:var(--navy-900);--text-on-inverse:var(--navy-900);--text-link:var(--sand-100);
--border-subtle:rgba(245,241,235,.08);--border-default:rgba(245,241,235,.14);--border-strong:rgba(245,241,235,.32);--border-inverse:rgba(15,27,45,.16);
--action-secondary:var(--sand-100);--action-secondary-hover:#FFFFFF;--action-secondary-pressed:var(--sand-200);--action-secondary-text:var(--navy-900);
--action-tertiary-hover:rgba(245,241,235,.08);--action-tertiary-pressed:rgba(245,241,235,.14);--action-tertiary-text:var(--sand-100);
--action-disabled:var(--navy-800);--action-disabled-text:var(--navy-400);
--offline-bg:var(--navy-800);--offline-text:var(--navy-200);--verified:var(--mint-500);
--feedback-success-bg:rgba(126,219,209,.14);--feedback-success-fg:var(--mint-500);--feedback-warning-bg:rgba(227,179,92,.14);--feedback-warning-fg:var(--warning-400);--feedback-error-bg:rgba(240,122,134,.14);--feedback-error-fg:var(--error-400);--feedback-info-bg:rgba(181,189,202,.12);--feedback-info-fg:var(--navy-200);
--skeleton-base:var(--navy-800);--skeleton-shine:var(--navy-700);
color-scheme:dark;
}
/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
input,select,textarea{font-size:17px}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{margin:0;font-family:var(--font-sans);color:var(--text-primary);background:var(--bg-canvas)}
a{color:var(--text-link);text-decoration-color:var(--coral-500);text-underline-offset:3px}
a:hover{color:var(--text-accent)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@keyframes qt-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes qt-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes qt-float-up{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-10px) scale(1)}100%{transform:translateY(-180px) scale(1.1);opacity:0}}
@keyframes qt-spin{to{transform:rotate(360deg)}}
@keyframes qt-pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes qt-slide-up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ===================== Viewer pages (design/handoff-v1/03-spec) ===================== */
:root{--tint:#E8CDC6;--stage:#060C16}
[hidden]{display:none!important}
.spacer{flex:1}
.mono{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0}
.icon{display:block;flex-shrink:0}
body{background:var(--navy-950);color:#fff}

/* Buttons: primary coral with navy text, glass. Heights sm 36, md 44, lg 52. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-pill);font:600 15px/1 var(--font-sans);letter-spacing:var(--tracking-ui);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.btn:active{transform:scale(var(--press-scale))}
.btn-sm{height:36px;padding:0 14px;font-size:13.5px}
.btn-md{height:44px;padding:0 20px}
.btn-lg{height:52px;padding:0 24px;font-size:17px}
.btn-primary,.btn-primary:hover{color:var(--navy-900)}
.btn-primary{background:var(--coral-500)}
.btn-primary:hover{background:var(--coral-600)}
.btn-glass,.btn-glass:hover{color:#fff}
.btn-glass{background:rgba(245,241,235,.08);border-color:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-glass:hover{background:rgba(245,241,235,.14)}

/* Identity: avatar with optional tint ring, quiet mark, socials */
.avatar{position:relative;display:inline-grid;place-items:center;flex-shrink:0;border-radius:50%;background:var(--blush-300);color:var(--navy-900);font-weight:600;line-height:1}
.avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.quiet-mark{display:block;flex-shrink:0;opacity:.55}
.socials{--gap:8px;display:inline-flex;align-items:center;gap:var(--gap)}
.social,.social:hover{display:inline-flex;color:inherit}
.photo-fallback{display:grid;place-items:center;background:radial-gradient(90% 70% at 50% 30%,color-mix(in srgb,var(--tint) 30%,transparent),transparent 70%),var(--navy-900)}

/* LIVE mark: coral LIVE segment, glass uptime segment in DM Mono */
.live-row{display:flex;gap:6px}
.live-mark{display:inline-flex;align-items:stretch;height:28px;flex-shrink:0;border-radius:var(--radius-pill);overflow:hidden;font:700 11.5px/1 var(--font-sans);letter-spacing:.08em}
.live-mark-live{display:flex;align-items:center;gap:6px;padding:0 9px;background:var(--coral-500);color:var(--navy-900)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--navy-900)}
.live-mark-clock{display:flex;align-items:center;padding:0 9px;background:rgba(6,12,22,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font:500 12.5px/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.live-mark-lg{height:36px;font-size:13px}
.live-mark-lg .live-mark-live,.live-mark-lg .live-mark-clock{padding:0 12px}
.live-mark-lg .live-mark-clock{font-size:14px}
.viewer-count{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;flex-shrink:0;border-radius:var(--radius-pill);background:rgba(6,12,22,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font:500 12.5px/1 var(--font-mono);white-space:nowrap}

/* Stage: edge to edge on the phone, the one video element inside a slot */
.stage{position:relative;flex-shrink:0;overflow:hidden;background:var(--stage);cursor:pointer}
.video-slot{position:absolute;inset:0}
.stage-video{display:block;width:100%;height:100%;background:transparent}
.blur-backdrop{position:absolute;top:-40px;left:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(36px) brightness(.5) saturate(1.1)}
.stage-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,12,22,.45),transparent 30%,transparent 62%,rgba(6,12,22,.55))}
.stage-top{position:absolute;top:10px;left:10px;z-index:2}
.stage-corner{position:absolute;right:10px;bottom:10px;z-index:4}
.sound-pill{position:absolute;left:50%;bottom:14px;z-index:4;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border:0;border-radius:var(--radius-pill);background:var(--sand-100);color:var(--navy-900);font:600 15px/1 var(--font-sans);white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer}
.sound-pill-portrait{bottom:20px}
.sound-pill-lg{bottom:20px;height:48px;padding:0 22px 0 16px;font-size:16px}
.glass-round{display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(6,12,22,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;cursor:pointer}

/* E3 to E7 and loading, over the stage */
.overlay{position:absolute;inset:0;z-index:3;cursor:default}
.overlay-loading{display:grid;place-items:center;pointer-events:none}
.overlay-blocked{display:grid;place-items:center;background:rgba(6,12,22,.45)}
.tap-to-play{display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:none;color:#fff;font:600 15px/1 var(--font-sans);cursor:pointer}
.tap-to-play-disc{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--sand-100);color:var(--navy-900);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.overlay-dim{display:grid;place-items:center;padding:24px;text-align:center;background:rgba(6,12,22,.6)}
.spinner{display:inline-block;width:26px;height:26px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:qt-spin 1s linear infinite}
.overlay-title{margin-top:12px;font:600 16px/1.3 var(--font-sans);color:#fff}
.overlay-body{max-width:300px;margin:4px auto 0;font:400 13.5px/1.4 var(--font-sans);color:var(--navy-100)}
.overlay-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 32px;text-align:center;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--tint) 16%,transparent),transparent 70%),var(--stage)}
.overlay-panel .overlay-title{margin-top:8px}
.overlay-panel .overlay-body{margin-top:0;font-size:13px}
.overlay-icon{display:inline-flex;color:var(--tint)}
.overlay-action{margin-top:12px}
.overlay-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
.overlay-hint{font:400 12px/1.3 var(--font-sans);color:var(--navy-200)}

/* Phone room (A1, A1b, A6) */
.room-phone{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--navy-950)}
.creator-bar{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:14px 16px 12px;background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 16%,transparent),transparent)}
.creator-bar-text{flex:1;min-width:0}
.creator-bar-name{overflow:hidden;font:600 18px/1.15 var(--font-sans);letter-spacing:-.01em;color:#fff;white-space:nowrap;text-overflow:ellipsis}
.creator-bar-meta{display:flex;align-items:center;gap:10px;margin-top:4px;font:400 12.5px/1 var(--font-sans);color:var(--navy-200)}
.chat{display:flex;flex:1;flex-direction:column;min-height:0}
/* Bottom-anchored list for Plan 3: the first child's auto margin keeps messages at the bottom and still scrolls. */
.chat-list{display:flex;flex:1;flex-direction:column;min-height:0;overflow-y:auto;padding:20px 16px 26px;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 28px);mask-image:linear-gradient(transparent,#000 28px)}
.chat-list>:first-child{margin-top:auto}

/* Sideways (D1 to D3) */
.room-side{position:fixed;inset:0;overflow:hidden;background:var(--stage);color:#fff;cursor:pointer}
.side-video{transition:right 260ms var(--ease-out)}
.stage-shade-side{background:linear-gradient(180deg,rgba(6,12,22,.45),transparent 26%,transparent 66%,rgba(6,12,22,.6))}
.side-area{position:absolute;top:0;bottom:0;left:0;transition:right 260ms var(--ease-out)}
.side-top{position:absolute;top:16px;left:max(60px,env(safe-area-inset-left));z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.side-who{display:flex;align-items:center;gap:10px}
.side-name{font:600 14px/1 var(--font-sans);white-space:nowrap;text-shadow:var(--shadow-text-overlay)}
.sound-pill-side{bottom:16px;transition:left 260ms var(--ease-out)}
.side-controls{position:absolute;bottom:16px;z-index:4;display:flex;gap:8px;transition:right 260ms var(--ease-out)}
.chat-pill{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:0;border-radius:var(--radius-pill);background:rgba(6,12,22,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font:600 13.5px/1 var(--font-sans);cursor:pointer}
.side-chat{position:absolute;top:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;width:252px;padding-left:22px;background:linear-gradient(90deg,rgba(6,12,22,0),rgba(6,12,22,.72) 18%,rgba(6,12,22,.82));transition:transform 260ms var(--ease-out);cursor:default}
.side-chat-hidden{transform:translateX(100%)}
.side-chat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 6px 0;font:600 13px/1 var(--font-sans);color:var(--navy-100)}
.side-chat-hide{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(245,241,235,.08);color:#fff;cursor:pointer}
.side-chat .chat-list{padding:0 14px 14px 0;-webkit-mask-image:linear-gradient(transparent,#000 30px);mask-image:linear-gradient(transparent,#000 30px)}
.side-hint{position:absolute;bottom:68px;z-index:6;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:var(--sand-100);color:var(--navy-900);font:600 12.5px/1.25 var(--font-sans);white-space:nowrap}

/* Desktop room (G1) */
.room-desk{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--navy-950)}
.desk-top{display:flex;align-items:center;gap:14px;flex-shrink:0;height:72px;padding:0 40px;background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 10%,transparent),transparent)}
.desk-top-name{font:600 18px/1.1 var(--font-sans);color:#fff}
.desk-top-meta{display:flex;align-items:center;gap:10px;margin-top:4px;font:400 12.5px/1 var(--font-sans);color:var(--navy-200)}
.desk-grid{display:grid;flex:1;grid-template-columns:minmax(0,1fr) 380px;gap:24px;min-height:0;padding:0 40px 32px}
.desk-main{display:flex;flex-direction:column;gap:16px;min-height:0}
.desk-stage{position:relative;width:min(100%,calc((100vh - 104px) * 16 / 9));aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:var(--stage);cursor:pointer}
@supports (height:100dvh){.desk-stage{width:min(100%,calc((100dvh - 104px) * 16 / 9))}}
.desk-stage:fullscreen{width:100%;height:100%;border-radius:0}
.desk-stage-top{position:absolute;top:16px;left:16px;z-index:2}
.desk-controls{position:absolute;right:16px;bottom:16px;z-index:4;display:flex;gap:8px}
.desk-chat{display:flex;flex-direction:column;min-height:0;border:1px solid rgba(245,241,235,.08);border-radius:20px;background:var(--navy-900)}
.desk-chat-head{padding:16px 20px 10px;font:600 15px/1 var(--font-sans)}
.desk-chat .chat-list{padding:0 20px 16px;-webkit-mask-image:linear-gradient(transparent,#000 40px);mask-image:linear-gradient(transparent,#000 40px)}

/* Offline, starting soon, ended: phone (E1, E2, E8) */
.offline{min-height:100vh;min-height:100dvh;background:var(--navy-950)}
@media (min-width:600px) and (max-width:899px){.offline{max-width:560px;margin:0 auto}}
.ended-block{padding:28px 24px 26px;text-align:center;background:var(--stage);border-bottom:1px solid rgba(245,241,235,.08)}
.ended-icon{display:inline-flex;color:var(--tint)}
.ended-title{margin-top:6px;font:300 26px/1.12 var(--font-sans);letter-spacing:-.02em;color:#fff;text-wrap:balance}
.ended-body{margin-top:6px;font:400 14px/1.45 var(--font-sans);color:var(--navy-100);text-wrap:pretty}
.hero{position:relative;height:384px;overflow:hidden}
.hero-short{height:300px}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.hero-shade{position:absolute;inset:0 0 -1px;background:linear-gradient(180deg,rgba(6,12,22,.25),transparent 30%,rgba(6,12,22,.35) 60%,var(--navy-950))}
.hero-chip{position:absolute;top:14px;left:14px}
.chip-soon{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--radius-pill);background:rgba(6,12,22,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font:700 11px/1 var(--font-sans);letter-spacing:.08em;white-space:nowrap}
.chip-soon-dot{width:6px;height:6px;border-radius:50%;background:var(--tint)}
.hero-text{position:absolute;right:20px;bottom:14px;left:20px}
.hero-name{margin:0;font:300 44px/1 var(--font-sans);letter-spacing:-.035em;color:#fff}
.hero-meta{display:flex;align-items:center;gap:12px;margin-top:10px;font:400 13.5px/1 var(--font-sans);color:var(--navy-100)}
.hero-meta .socials{--gap:10px}
.bio{margin:0;padding:6px 20px 0;font:italic 300 18px/1.4 var(--font-sans);color:var(--navy-100)}
.offline-card{margin:20px 16px 0}
.offline-card:empty{display:none}
.show-card{padding:18px 18px 20px;border:1px solid rgba(245,241,235,.1);border-radius:20px;background:var(--navy-900)}
.show-card-soon{border-color:color-mix(in srgb,var(--tint) 40%,transparent);background:color-mix(in srgb,var(--tint) 14%,var(--navy-900))}
.show-card-label{font:600 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tint)}
.show-card-label-quiet{color:var(--navy-300)}
.show-card-count{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.show-card-clock{font-size:40px;line-height:1;color:#fff}
.show-card-until{font:400 14px/1 var(--font-sans);color:var(--navy-100)}
.show-card-note{margin-top:10px;font:400 13px/1.4 var(--font-sans);color:var(--navy-200)}
.show-card-day{margin-top:10px;font:300 30px/1.1 var(--font-sans);letter-spacing:-.02em;color:#fff}
.show-card-time{margin-top:4px;font:400 15px/1.3 var(--font-sans);color:var(--navy-100)}
.offline-foot{padding:14px 24px 30px;text-align:center;font:400 12px/1.4 var(--font-sans);color:var(--navy-300)}
.offline-foot a,.offline-foot a:hover{color:var(--navy-300)}

/* Offline on desktop (G2) */
.offline-desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--navy-950)}
.offline-desk-photo{position:relative;overflow:hidden}
.offline-desk-fade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--navy-950))}
.hero-chip-desk{top:24px;left:24px}
.offline-desk-side{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:48px 96px 48px 56px;background:radial-gradient(80% 60% at 0% 50%,color-mix(in srgb,var(--tint) 10%,transparent),transparent)}
.offline-desk-name{margin:28px 0 0;font:300 88px/.98 var(--font-sans);letter-spacing:-.04em;color:#fff}
.offline-desk-meta{display:flex;align-items:center;gap:14px;margin-top:16px;font:400 15px/1 var(--font-sans);color:var(--navy-100)}
.offline-desk-meta .socials{--gap:14px}
.offline-desk-bio{max-width:480px;margin:26px 0 0;font:italic 300 24px/1.4 var(--font-sans);color:var(--navy-100)}
.show-card-lg{width:100%;max-width:440px;margin-top:40px;padding:26px 28px;border-radius:24px}
.show-card-lg .show-card-day{margin-top:12px;font-size:40px;line-height:1.05}
.show-card-lg .show-card-time{margin-top:6px;font-size:17px}
.offline-foot-desk{margin-top:28px;padding:0;text-align:left;font-size:13px}
.ended-block-desk{max-width:480px;margin-bottom:32px;padding:0;border:0;text-align:left;background:none}

/* Not found (same as 404.html) */
.nf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);min-height:100vh;min-height:100dvh;padding:var(--space-6) var(--grid-margin-mobile);text-align:center}
.nf img{width:160px;height:auto}
.nf h1{margin:0;font:var(--text-heading);letter-spacing:var(--tracking-heading)}
.nf a{font:var(--text-label);color:var(--text-secondary)}

/* Homepage (J): phone first, desktop from 900 */
.home-head{display:flex;align-items:center;height:60px;padding:0 20px}
.home-logo img{display:block;width:auto;height:24px}
.home-head-link,.home-head-link:hover{font:500 13.5px/1 var(--font-sans);color:var(--navy-100)}
.home-hero{padding:24px 20px 0}
.home-hero h1{margin:0;font:300 52px/.96 var(--font-sans);letter-spacing:-.045em}
.home-hero p{max-width:520px;margin:18px 0 0;font:400 16px/1.5 var(--font-sans);color:var(--navy-100);text-wrap:pretty}
.home-live{padding:32px 20px 0}
.home-label{display:flex;align-items:center;gap:10px;margin-bottom:14px;font:600 12px/1 var(--font-sans);letter-spacing:.16em;color:var(--navy-200)}
.home-label-dot{width:8px;height:8px;border-radius:50%;background:var(--coral-500)}
.live-card,.live-card:hover{color:#fff;text-decoration:none}
.live-card{display:grid;grid-template-columns:1fr;overflow:hidden;border:1px solid rgba(245,241,235,.1);border-radius:28px;background:var(--navy-900)}
.live-card-photo{position:relative;height:240px}
.live-card-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.live-card-photo .photo-fallback{height:100%}
.live-card-mark{position:absolute;top:14px;left:14px}
.live-card-body{display:flex;flex-direction:column;padding:18px 18px 20px;background:radial-gradient(90% 80% at 100% 0%,color-mix(in srgb,var(--tint) 14%,transparent),transparent)}
.live-card-who{display:flex;align-items:center;gap:12px}
.live-card-name{font:600 18px/1.15 var(--font-sans)}
.live-card-handle{margin-top:4px;font:400 13px/1 var(--font-sans);color:var(--navy-200)}
.live-card-bio{margin:14px 0 0;font:italic 300 17px/1.35 var(--font-sans);color:var(--navy-100)}
.live-card-gap{flex:1;min-height:16px}
.live-card-btn{width:100%;height:44px;padding:0 20px}
.nobody{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:22px 18px;border:1px solid rgba(245,241,235,.1);border-radius:28px;background:var(--navy-900)}
.nobody-text{flex:1}
.nobody-title{font:300 26px/1.1 var(--font-sans);letter-spacing:-.02em}
.nobody-body{margin-top:8px;font:400 15px/1.45 var(--font-sans);color:var(--navy-100)}
.next-up,.next-up:hover{color:#fff;text-decoration:none}
.next-up{display:flex;align-items:center;align-self:stretch;gap:14px;padding:12px 18px 12px 12px;border:1px solid rgba(245,241,235,.1);border-radius:20px;background:var(--navy-950)}
.next-up>.icon{color:var(--navy-200)}
.next-up-text{flex:1}
.next-up-label{font:600 11px/1 var(--font-sans);letter-spacing:.14em;color:var(--tint)}
.next-up-name{margin-top:6px;font:600 16px/1.2 var(--font-sans)}
.next-up-when{margin-top:2px;font:400 13px/1.2 var(--font-sans);color:var(--navy-200)}
.home-get{padding:52px 20px 0}
.home-get h2{margin:0;font:300 32px/1.02 var(--font-sans);letter-spacing:-.035em}
.home-get-list{display:grid;grid-template-columns:1fr;margin-top:18px}
.home-get-item{padding:18px 0;border-top:1px solid rgba(245,241,235,.1)}
.home-get-head{display:flex;align-items:baseline;gap:14px}
.home-get-n{font:300 34px/1 var(--font-sans);color:var(--tint)}
.home-get-t{font:600 18px/1.2 var(--font-sans)}
.home-get-item p{margin:8px 0 0;font:400 15px/1.5 var(--font-sans);color:var(--navy-100);text-wrap:pretty}
.home-trust{display:grid;grid-template-columns:1fr;gap:20px;margin:40px 16px 0;padding:24px 20px;border-radius:28px;background:var(--navy-900)}
.home-trust-item{display:flex;gap:14px}
.home-trust-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:rgba(126,219,209,.12);color:var(--mint-300)}
.home-trust-t{font:600 16px/1.3 var(--font-sans)}
.home-trust-d{margin-top:3px;font:400 14px/1.45 var(--font-sans);color:var(--navy-200)}
.home-creators{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:48px 20px 0}
.home-creators h2{margin:0;font:300 26px/1.1 var(--font-sans);letter-spacing:-.02em}
.home-creators p{max-width:560px;margin:8px 0 0;font:400 15px/1.5 var(--font-sans);color:var(--navy-100)}
.home-foot{display:flex;align-items:center;gap:22px;margin:48px 20px 0;padding:20px 0 30px;border-top:1px solid rgba(245,241,235,.08);font:400 13px/1 var(--font-sans);color:var(--navy-300)}
.home-foot a,.home-foot a:hover{color:var(--navy-300)}
@media (min-width:900px){
.home-head{height:84px;padding:0 80px}
.home-logo img{height:30px}
.home-head-link,.home-head-link:hover{font-size:15px}
.home-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:end;padding:56px 80px 0}
.home-hero h1{font-size:112px}
.home-hero p{margin:0 0 12px;font-size:20px}
.home-live{padding:72px 80px 0}
.home-label{margin-bottom:20px}
.live-card{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.live-card-photo{height:420px}
.live-card-body{padding:40px}
.live-card-who .avatar{width:48px!important;height:48px!important}
.live-card-name{font-size:22px}
.live-card-bio{margin-top:24px;font-size:24px}
.live-card-gap{min-height:24px}
.live-card-btn{align-self:flex-start;width:auto;height:52px;padding:0 24px;font-size:17px}
.nobody{flex-direction:row;align-items:center;gap:32px;padding:36px 40px}
.nobody-title{font-size:36px}
.next-up{align-self:auto}
.home-get{padding:112px 80px 0}
.home-get h2{font-size:56px}
.home-get-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:40px}
.home-get-item{padding:0;border-top:0}
.home-get-n{font-size:64px}
.home-get-t{font-size:22px}
.home-get-item p{margin-top:16px;font-size:17px}
.home-trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:112px 80px 0;padding:44px 48px}
.home-creators{flex-direction:row;align-items:center;gap:32px;padding:96px 80px 0}
.home-creators-text{flex:1}
.home-creators h2{font-size:40px}
.home-creators p{font-size:17px}
.home-creators-btn{height:52px;padding:0 24px;font-size:17px}
.home-foot{margin:96px 80px 0;padding:28px 0 40px}
}

/* Privacy notice (I2): layout only, legal text to be supplied */
.privacy-back{display:flex;align-items:center;height:52px;padding:0 16px;border-bottom:1px solid var(--border-default)}
.privacy-back a,.privacy-back a:hover{display:flex;align-items:center;gap:10px;font:500 14px/1 var(--font-sans);color:var(--text-primary);text-decoration:none}
.privacy{max-width:680px;margin:0 auto;padding:28px 20px 40px}
.privacy-logo img{display:block;width:auto;height:18px}
.privacy h1{margin:22px 0 0;font:300 38px/1.02 var(--font-sans);letter-spacing:-.03em}
.privacy-updated{margin-top:10px;font:400 13px/1 var(--font-sans);color:var(--text-tertiary)}
.privacy-short{margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--bg-tint-mint);font:400 14.5px/1.5 var(--font-sans);color:var(--text-primary)}
.privacy-short b{font-weight:600}
.privacy section{margin-top:26px}
.privacy h2{margin:0;font:600 17px/1.3 var(--font-sans)}
.privacy-lines{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.privacy-lines span{height:10px;border-radius:5px;background:var(--navy-800)}
.privacy-lines span:nth-child(2){width:92%}
.privacy-lines span:nth-child(3){width:64%}
.privacy-note{margin:28px 0 0;font:400 12px/1.4 var(--font-sans);color:var(--text-tertiary)}
/* Links on the viewer pages underline in their own colour: coral is kept for LIVE, the primary action and focus. */
.offline-foot a,.home-foot a,.home-head-link,.privacy-back a,.nf a{text-decoration-color:currentColor}

/* Social links: 44px hit area from padding, cancelled by a negative margin so nothing moves.
   Neighbours are only one gap apart, so between two icons each area stops at the middle of the gap
   instead of overlapping (otherwise the later icon would take most of the earlier one's taps). */
.social{padding:15px;margin:-15px}
.social:not(:last-child){padding-right:calc(var(--gap) / 2);margin-right:calc(var(--gap) / -2)}
.social:not(:first-child){padding-left:calc(var(--gap) / 2);margin-left:calc(var(--gap) / -2)}
/* Long one-word names, URLs in bios and long handles wrap instead of scrolling the page sideways. */
.hero-name,.bio,.offline-desk-name,.offline-desk-bio,.live-card-name,.live-card-bio,.live-card-handle,.next-up-name,.desk-top-name,
.hero-meta,.offline-desk-meta,.creator-bar-meta,.desk-top-meta{overflow-wrap:anywhere}
.hero-meta,.offline-desk-meta,.live-card-who>div,.next-up-text,.desk-top-text{min-width:0}
.side-name{max-width:min(360px,40vw);overflow:hidden;text-overflow:ellipsis}
/* The one persistent chat element sits in a per-layout box that passes the flex column through. */
.chat-slot{display:flex;flex:1;flex-direction:column;min-height:0}
/* Before the first API reply (creator page) and while the homepage slot loads. */
.page-loading{display:grid;place-items:center;min-height:100vh;min-height:100dvh;background:var(--navy-950)}
.slot-loading{display:grid;place-items:center;min-height:120px}

/* Chat (screens.md A2 to A5, D, F1 to F6, G1; components.md Chat message, Pinned card, Code input, Notice card, Inputs) */
.room-phone .chat-list{padding-bottom:6px}
.desk-chat .chat-list{padding-bottom:6px}
.chat-lines{display:flex;flex-direction:column}
.chat-line{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.chat-line-own{opacity:.6}
.chat-text{min-width:0;padding-top:4px;font:400 15px/1.4 var(--font-sans);color:var(--navy-100);overflow-wrap:anywhere}
.chat-name{margin-right:6px;font-weight:600;color:#fff}
.chat-name-host{color:var(--tint)}
.chat-tag{display:inline-block;margin-right:7px;padding:3px 6px;border-radius:4px;font:700 9.5px/1 var(--font-sans);letter-spacing:.08em;color:var(--navy-900);vertical-align:2px}
.chat-tag-host{background:var(--tint)}
.chat-tag-team{background:var(--sand-400)}
.chat-you{margin-right:6px;font:600 11px/1 var(--font-sans);color:var(--navy-300)}
.chat-own-note{display:flex;align-items:center;gap:5px;margin-top:3px;font:500 12px/1.3 var(--font-sans);color:var(--navy-200)}
.chat-team-avatar{width:28px;height:28px;background:var(--sand-100)}
.chat-team-avatar img{width:20px;height:20px;border-radius:0}
.side-chat .chat-line{padding:5px 0}
.side-chat .chat-text{padding-top:2px;font-size:14px}
.side-chat .chat-line .avatar{width:24px!important;height:24px!important}
.side-chat .chat-team-avatar img{width:17px;height:17px}

.pinned{display:flex;flex-shrink:0;align-items:center;gap:10px;margin:0 16px 6px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--tint) 30%,transparent);border-radius:14px;background:color-mix(in srgb,var(--tint) 12%,var(--navy-900))}
.pinned-compact{padding:8px 12px}
.pinned-icon{display:inline-flex;color:var(--tint)}
.pinned-text{flex:1;min-width:0;font:400 13.5px/1.35 var(--font-sans);color:#fff;overflow-wrap:anywhere}
.pinned-text b{margin-right:6px;font-weight:600;color:var(--tint)}
.pinned-compact .pinned-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.side-chat .pinned{margin:0 14px 4px 0}
.desk-chat .pinned{margin:0 16px 8px}

.chat-action{flex-shrink:0}
.say-hi{padding:10px 16px 26px}
.chat-action-desk .say-hi{padding:16px}
.btn-block{width:100%}
.btn .icon{flex-shrink:0}
.btn:disabled{cursor:default;opacity:.5}
.btn:disabled:active{transform:none}
.chat-closed{padding:14px 16px 26px;text-align:center;font:400 13px/1.4 var(--font-sans);color:var(--navy-300)}

.notice{display:flex;align-items:flex-start;gap:12px;margin:10px 12px 26px;padding:14px 16px;border:1px solid rgba(245,241,235,.12);border-radius:16px;background:var(--navy-900)}
.notice-icon{display:inline-flex;margin-top:1px;color:var(--navy-200)}
.notice-title{font:600 14.5px/1.3 var(--font-sans);color:#fff}
.notice-body{margin-top:3px;font:400 13px/1.4 var(--font-sans);color:var(--navy-200)}
.chat-action-desk .notice{margin:12px 16px 16px;background:var(--navy-950)}

.chat-panel{padding:18px 16px 16px;border-top:1px solid rgba(245,241,235,.1);background:var(--navy-950)}
.chat-action-desk .chat-panel{border-radius:0 0 20px 20px;background:var(--navy-900)}
.chat-panel-head{display:flex;align-items:flex-start;gap:10px}
.chat-panel-titles{flex:1;min-width:0}
.chat-panel-title{font:600 19px/1.2 var(--font-sans);color:#fff}
.chat-panel-sub{margin-top:4px;font:400 14px/1.4 var(--font-sans);color:var(--navy-200);overflow-wrap:anywhere}
.chat-email{font-weight:600;color:#fff}
.chat-panel-close{display:grid;place-items:center;width:44px;height:44px;margin:-10px -12px 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--navy-200);cursor:pointer}
.chat-panel-body,.chat-form{display:flex;flex-direction:column;gap:10px}
.chat-panel-body{margin-top:14px}
.chat-privacy{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;font:400 12px/1.3 var(--font-sans);color:var(--navy-300)}
.chat-privacy a{color:var(--navy-200);text-decoration-color:currentColor}
/* Reserved for Sign in with Apple later (screens.md A2). */
.chat-apple-row:empty{display:none}

/* Inputs: 52 tall, radius 14, 17px text so iOS does not zoom; coral border and ring on focus, coral-400 on error */
.field{width:100%;height:52px;padding:0 16px;border:1px solid rgba(245,241,235,.22);border-radius:14px;outline:none;background:var(--navy-900);color:#fff;font:400 17px/1 var(--font-sans)}
.field:focus,.field:focus-visible{border-color:var(--coral-500);box-shadow:0 0 0 3px rgba(255,122,110,.22)}
.field-error,.field-error:focus,.field-error:focus-visible{border-color:var(--coral-400);box-shadow:none}
.field-msg{display:flex;align-items:center;gap:6px;font:500 13.5px/1.35 var(--font-sans);color:var(--coral-300)}
.field-msg .icon{flex-shrink:0}

/* Code input: six boxes over one hidden input (one-time-code autofill, numeric keyboard) */
.code{position:relative}
.code-input{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;opacity:0;font-size:17px;color:transparent;caret-color:transparent;cursor:text}
.code-boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.code-box{display:grid;place-items:center;height:56px;border:1px solid rgba(245,241,235,.22);border-radius:14px;background:var(--navy-900);color:#fff;font:500 24px/1 var(--font-mono)}
.code-box-active{border-color:var(--coral-500);box-shadow:0 0 0 3px rgba(255,122,110,.22)}
.code-box-error{border-color:var(--coral-400)}
.code-links{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 0}
.code-resend{font:400 13px/1 var(--font-sans);color:var(--navy-300)}
.text-link{min-height:32px;padding:0;border:0;background:none;color:var(--navy-100);font:500 13px/1 var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.text-link:disabled{opacity:.5;cursor:default}

/* Composer (A5) and the slow mode ring (F2) */
.composer-wrap{padding:10px 12px 26px}
.chat-action-desk .composer-wrap{padding:12px 16px 16px}
.composer{display:flex;align-items:center;gap:8px;height:48px;padding:0 5px 0 16px;border:1px solid rgba(245,241,235,.16);border-radius:var(--radius-pill);background:var(--navy-900)}
.composer:focus-within{border-color:var(--coral-500);box-shadow:0 0 0 3px rgba(255,122,110,.22)}
.composer-input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:transparent;color:#fff;font:400 17px/1 var(--font-sans)}
.composer-input::placeholder{color:var(--navy-300)}
.composer-input:focus-visible{box-shadow:none}
.send{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:rgba(245,241,235,.1);color:var(--navy-300);cursor:pointer}
.send-on{background:var(--coral-500);color:var(--navy-900)}
.send:disabled{cursor:default}
.send-ring{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%}
.send-ring-inner{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy-900);font-size:12px;color:#fff}
.composer-note{display:flex;align-items:center;gap:6px;padding:8px 16px 0;font:400 11.5px/1.3 var(--font-sans);color:var(--navy-300)}
.composer-note b{font-weight:600;color:var(--navy-100)}
.composer-note-error{color:var(--coral-300)}

/* Sideways (D): Say hi asks for the phone upright; the hidden chat's pill counts what came in */
.side-say-hi{flex-shrink:0;padding:8px 14px 14px 0}
.side-say-hi-hint{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:var(--sand-100);color:var(--navy-900);font:600 12.5px/1.25 var(--font-sans)}
.chat-pill-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sand-100);color:var(--navy-900);font:700 11px/18px var(--font-sans);text-align:center}