/* Lichca web client styles. Built from docs/design/tokens.css and docs/design/mockups/mockup.css (components only), plus the in-mockup rules and the app layout at the end. */

/*
  NeuroVision Звонок - design tokens v0.1 (task D1)
  Mobile-first. Two themes: light (default) and dark.
  - Pre-call screens follow the system theme (prefers-color-scheme) unless
    data-theme="light" | "dark" is set on <html>.
  - The call screen is always dark: put class "theme-call" on its root.
    Video looks better on dark, the screen glares less in a dim room.
  Palette: NeuroVision orange, black, white. Functional colors (danger,
  success, warning) exist only to carry state, never as decoration, and
  always come with a word or an icon (color is never the only signal).
  Contrast: every text/background pair below is WCAG AA (>= 4.5:1) or
  better; ratios are in the comments next to the pair.
  Rule for the orange fill: text on it is always black (7.5:1). White
  text on orange is forbidden (2.6:1).
*/

:root {
  /* ---------- Raw palette (do not use directly in components) ---------- */
  --nv-orange-300: #ffa866;
  --nv-orange-400: #ff8f45;
  --nv-orange-500: #ff7a1a;   /* brand orange, fill only */
  --nv-orange-600: #e8650a;
  --nv-orange-700: #b54a00;   /* orange text on white: 5.3:1 */
  --nv-black: #0b0b0c;
  --nv-white: #ffffff;

  --gray-50: #f6f5f3;
  --gray-100: #ecebe7;
  --gray-200: #d9d6d0;
  --gray-400: #8d8d94;
  --gray-500: #5a5a61;
  --gray-700: #2e2e33;
  --gray-800: #212124;
  --gray-850: #18181b;
  --gray-900: #111113;

  /* ---------- Typography ---------- */
  /* Inter when installed or self-hosted in web/; never fetched from a
     third party (a call page must not ping Google). Full system fallback. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale 1.25 from 16px. fs--1 (14px) is the single exception below the
     base: tile captions and timestamps only, never body text or buttons. */
  --fs--1: 0.875rem;   /* 14px  caption */
  --fs-0: 1rem;        /* 16px  body, inputs (16px stops iOS zoom on focus) */
  --fs-1: 1.25rem;     /* 20px  lead, button large */
  --fs-2: 1.5625rem;   /* 25px  screen title */
  --fs-3: 1.953rem;    /* 31px  hero */
  --fs-4: 2.441rem;    /* 39px  big numbers: challenge step, countdown */

  --lh-tight: 1.2;
  --lh-base: 1.45;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-caps: 0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- Radii ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Hit targets and sizes ---------- */
  --tap-min: 44px;        /* absolute minimum for anything tappable */
  --btn-height: 56px;     /* primary and secondary buttons */
  --ctl-size: 56px;       /* round call controls */
  --input-height: 52px;
  --focus-ring: 3px;

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Layers ---------- */
  --z-tile-overlay: 10;
  --z-controls: 20;
  --z-banner: 30;
  --z-sheet: 40;
  --z-toast: 50;

  /* ---------- Safe areas (notch, home indicator) ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- Breakpoints (reference; CSS vars do not work in @media)
     mobile  < 600px   one column, controls at the bottom
     tablet  600-1023  two-column grid for 3-4 tiles
     desktop >= 1024   side panel (people, lobby) + grid */

  /* ---------- Semantic colors: LIGHT (default) ---------- */
  color-scheme: light;
  --color-bg: var(--nv-white);
  --color-surface: var(--gray-50);
  --color-surface-raised: var(--nv-white);
  --color-surface-sunken: var(--gray-100);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-500);
  --color-text: var(--gray-900);           /* on bg 18.9:1 */
  --color-text-muted: var(--gray-500);     /* on bg 6.8:1, on surface 6.3:1 */
  --color-accent: var(--nv-orange-500);    /* fill */
  --color-accent-hover: var(--nv-orange-600);
  --color-on-accent: var(--nv-black);      /* on accent 7.5:1 */
  --color-accent-text: var(--nv-orange-700); /* on bg 5.3:1 */
  --color-accent-soft: #fff1e6;
  --color-focus: var(--nv-orange-700);

  --color-danger: #c42b2b;                 /* on bg 5.6:1 */
  --color-danger-soft: #fdecec;
  --color-success: #11774a;                /* on bg 5.6:1 */
  --color-success-soft: #e7f5ee;
  --color-warning: #8a5a00;                /* on bg 5.9:1 */
  --color-warning-soft: #fff5dc;

  --color-scrim: rgba(11, 11, 12, 0.62);   /* under text on video: white on it >= 5.4:1 even over a white frame */
  --color-on-scrim: var(--nv-white);
  --color-video-bg: var(--gray-850);

  --trust-fill: var(--nv-orange-500);
  --trust-empty: var(--gray-200);

  --shadow-1: 0 1px 2px rgba(11, 11, 12, 0.08), 0 2px 8px rgba(11, 11, 12, 0.06);
  --shadow-sheet: 0 -8px 32px rgba(11, 11, 12, 0.18);
}

/* ---------- Semantic colors: DARK ---------- */
/* Same block twice: explicit choice, and system preference without an explicit light choice. */
[data-theme="dark"],
.theme-call {
  color-scheme: dark;
  --color-bg: var(--nv-black);
  --color-surface: var(--gray-850);
  --color-surface-raised: var(--gray-800);
  --color-surface-sunken: var(--gray-900);
  --color-border: var(--gray-700);
  --color-border-strong: var(--gray-400);
  --color-text: #f5f5f4;                   /* on bg 18.0:1 */
  --color-text-muted: #a8a8ae;             /* on bg 8.3:1, on surface 7.5:1, on raised 6.8:1 */
  --color-accent: var(--nv-orange-500);
  --color-accent-hover: var(--nv-orange-400);
  --color-on-accent: var(--nv-black);
  --color-accent-text: var(--nv-orange-400); /* on bg 8.7:1 */
  --color-accent-soft: #2a1a0d;
  --color-focus: var(--nv-orange-300);

  --color-danger: #ff6b6b;                 /* on bg 7.1:1 */
  --color-danger-soft: #3a1515;
  --color-success: #3dd68c;                /* on bg 10.5:1 */
  --color-success-soft: #0f2a1d;
  --color-warning: #ffc247;                /* on bg 12.2:1 */
  --color-warning-soft: #33270b;

  --color-scrim: rgba(11, 11, 12, 0.62);
  --color-on-scrim: var(--nv-white);
  --color-video-bg: var(--gray-900);

  --trust-fill: var(--nv-orange-500);
  --trust-empty: var(--gray-500);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--nv-black);
    --color-surface: var(--gray-850);
    --color-surface-raised: var(--gray-800);
    --color-surface-sunken: var(--gray-900);
    --color-border: var(--gray-700);
    --color-border-strong: var(--gray-400);
    --color-text: #f5f5f4;
    --color-text-muted: #a8a8ae;
    --color-accent: var(--nv-orange-500);
    --color-accent-hover: var(--nv-orange-400);
    --color-on-accent: var(--nv-black);
    --color-accent-text: var(--nv-orange-400);
    --color-accent-soft: #2a1a0d;
    --color-focus: var(--nv-orange-300);
    --color-danger: #ff6b6b;
    --color-danger-soft: #3a1515;
    --color-success: #3dd68c;
    --color-success-soft: #0f2a1d;
    --color-warning: #ffc247;
    --color-warning-soft: #33270b;
    --color-video-bg: var(--gray-900);
    --trust-empty: var(--gray-500);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.6);
  }
}

/* Light theme forced explicitly (wins over the system dark preference). */
[data-theme="light"] {
  color-scheme: light;
}

/* Motion off when the person asked for it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* High contrast request: borders get stronger, muted text gets darker. */
@media (prefers-contrast: more) {
  :root {
    --color-border: var(--color-border-strong);
  }
}


/* ======== Components (from mockup.css) ======== */
* { box-sizing: border-box; }
html, body { margin: 0; }

/* ---------- Icons: bundled Tabler outline SVGs (MIT), drawn as a mask so they take the text color ---------- */
.ti {
  display: inline-block; width: 1em; height: 1em; font-size: 22px; line-height: 1; flex: none; vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ti.ok { color: var(--color-success); }
.ti.bad { color: var(--color-danger); }
.ti-arrow-up { --ic: url("icons/arrow-up.svg"); }
.ti-bell-ringing { --ic: url("icons/bell-ringing.svg"); }
.ti-brand-chrome { --ic: url("icons/brand-chrome.svg"); }
.ti-bulb { --ic: url("icons/bulb.svg"); }
.ti-camera-off { --ic: url("icons/camera-off.svg"); }
.ti-check { --ic: url("icons/check.svg"); }
.ti-chevron-down { --ic: url("icons/chevron-down.svg"); }
.ti-circle-check { --ic: url("icons/circle-check.svg"); }
.ti-clock { --ic: url("icons/clock.svg"); }
.ti-copy { --ic: url("icons/copy.svg"); }
.ti-device-mobile { --ic: url("icons/device-mobile.svg"); }
.ti-door-enter { --ic: url("icons/door-enter.svg"); }
.ti-door-exit { --ic: url("icons/door-exit.svg"); }
.ti-eye { --ic: url("icons/eye.svg"); }
.ti-hand-finger { --ic: url("icons/hand-finger.svg"); }
.ti-hourglass { --ic: url("icons/hourglass.svg"); }
.ti-info-circle { --ic: url("icons/info-circle.svg"); }
.ti-link { --ic: url("icons/link.svg"); }
.ti-loader-2 { --ic: url("icons/loader-2.svg"); }
.ti-lock-check { --ic: url("icons/lock-check.svg"); }
.ti-message-circle { --ic: url("icons/message-circle.svg"); }
.ti-microphone { --ic: url("icons/microphone.svg"); }
.ti-microphone-off { --ic: url("icons/microphone-off.svg"); }
.ti-phone-off { --ic: url("icons/phone-off.svg"); }
.ti-plug-connected-x { --ic: url("icons/plug-connected-x.svg"); }
.ti-qrcode { --ic: url("icons/qrcode.svg"); }
.ti-refresh { --ic: url("icons/refresh.svg"); }
.ti-route { --ic: url("icons/route.svg"); }
.ti-share { --ic: url("icons/share.svg"); }
.ti-shield-lock { --ic: url("icons/shield-lock.svg"); }
.ti-shield-x { --ic: url("icons/shield-x.svg"); }
.ti-user-plus { --ic: url("icons/user-plus.svg"); }
.ti-user-question { --ic: url("icons/user-question.svg"); }
.ti-users { --ic: url("icons/users.svg"); }
.ti-video { --ic: url("icons/video.svg"); }
.ti-video-off { --ic: url("icons/video-off.svg"); }
.ti-wifi-off { --ic: url("icons/wifi-off.svg"); }
.ti-x { --ic: url("icons/x.svg"); }

/* ---------- Layout helpers ---------- */
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.pad { padding: 0 var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack--lg { gap: var(--space-5); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row > .grow { min-width: 0; }
.row--between { justify-content: space-between; }
.grow { flex: 1; }
.spacer { flex: 1; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Text ---------- */
.kicker { font-size: var(--fs--1); font-weight: var(--fw-semibold); color: var(--color-accent-text); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0; }
.title { font-size: var(--fs-2); line-height: var(--lh-tight); font-weight: var(--fw-bold); margin: 0; }
.hero { font-size: var(--fs-3); line-height: var(--lh-tight); font-weight: var(--fw-bold); margin: 0; letter-spacing: -0.01em; }
.lead { font-size: var(--fs-1); line-height: 1.35; margin: 0; }
.body { margin: 0; }
.muted { color: var(--color-text-muted); }
.caption { font-size: var(--fs--1); color: var(--color-text-muted); margin: 0; }
.mono { font-family: var(--font-mono); }

/* ---------- App bar ---------- */
.appbar { height: 56px; flex: none; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); }
.brand { white-space: nowrap; display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-0); }
.brand__mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--color-accent); color: var(--color-on-accent);
  display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: -0.02em;
}


/* ---------- Buttons ---------- */
.btn {
  min-height: var(--btn-height); padding: 0 var(--space-5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: var(--fw-semibold) var(--fs-0)/1 var(--font-sans); cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--secondary { background: var(--color-surface-raised); color: var(--color-text); border-color: var(--color-border); }
.btn--ghost { background: transparent; color: var(--color-text); min-height: var(--tap-min); padding: 0 var(--space-3); }
.btn--danger { background: var(--color-danger); color: var(--nv-white); }
.theme-call .btn--danger, [data-theme="dark"] .btn--danger { color: var(--nv-black); }
.btn--sm { min-height: var(--tap-min); padding: 0 var(--space-4); font-size: var(--fs-0); }
.btn[aria-disabled="true"] { opacity: 1; background: var(--color-surface-sunken); color: var(--color-text-muted); border-color: var(--color-border); }
.btn-row { display: flex; gap: var(--space-2); }
.btn-row > .btn { flex: 1; }

/* ---------- Fields ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label { font-size: var(--fs-0); font-weight: var(--fw-medium); }
.field__input {
  height: var(--input-height); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong);
  background: var(--color-surface-raised); color: var(--color-text);
  font: var(--fs-0) var(--font-sans); padding: 0 var(--space-4); display: flex; align-items: center;
}
.field__hint { font-size: var(--fs--1); color: var(--color-text-muted); }

/* ---------- Cards, sheets ---------- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.card--raised { background: var(--color-surface-raised); box-shadow: var(--shadow-1); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  background: var(--color-surface-raised); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-sheet); padding: var(--space-3) var(--space-4) var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.sheet::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--color-border-strong); align-self: center; opacity: 0.6; }
.scrim-full { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: calc(var(--z-sheet) - 1); }
.divider { height: 1px; background: var(--color-border); border: 0; margin: 0; }

/* ---------- Pills, chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; white-space: nowrap;
  border-radius: var(--radius-pill); font-size: var(--fs--1); font-weight: var(--fw-medium);
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
}
.pill .ti { font-size: 18px; }
.pill--success { color: var(--color-success); background: var(--color-success-soft); border-color: transparent; }
.pill--warning { color: var(--color-warning); background: var(--color-warning-soft); border-color: transparent; }
.pill--danger { color: var(--color-danger); background: var(--color-danger-soft); border-color: transparent; }
.pill--accent { color: var(--color-accent-text); background: var(--color-accent-soft); border-color: transparent; }
.pill--on-video { background: var(--color-scrim); color: var(--color-on-scrim); border-color: transparent; }
.pill--btn { min-height: var(--tap-min); }

/* Trust ladder chip: word first, then 5 segments. Level = filled segments. */
.trust { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs--1); font-weight: var(--fw-medium); white-space: nowrap; }
.trust__bar { display: inline-flex; gap: 2px; }
.trust__bar i { width: 6px; height: 12px; border-radius: 2px; background: var(--trust-empty); display: block; }
.trust[data-level="1"] .trust__bar i:nth-child(-n+1),
.trust[data-level="2"] .trust__bar i:nth-child(-n+2),
.trust[data-level="3"] .trust__bar i:nth-child(-n+3),
.trust[data-level="4"] .trust__bar i:nth-child(-n+4),
.trust[data-level="5"] .trust__bar i:nth-child(-n+5) { background: var(--trust-fill); }
.on-video .trust__bar i { background: rgba(255, 255, 255, 0.28); }
.on-video .trust[data-level="1"] .trust__bar i:nth-child(-n+1),
.on-video .trust[data-level="2"] .trust__bar i:nth-child(-n+2),
.on-video .trust[data-level="3"] .trust__bar i:nth-child(-n+3),
.on-video .trust[data-level="4"] .trust__bar i:nth-child(-n+4),
.on-video .trust[data-level="5"] .trust__bar i:nth-child(-n+5) { background: var(--nv-orange-500); }

/* ---------- Banners, toasts ---------- */
.banner {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); font-size: var(--fs-0); line-height: 1.35;
}
.banner .ti { font-size: 24px; flex: none; margin-top: -1px; }
.banner__title { font-weight: var(--fw-semibold); display: block; }
.banner--danger { background: var(--color-danger-soft); color: var(--color-text); border: 1px solid var(--color-danger); }
.banner--danger .ti { color: var(--color-danger); }
.banner--warning { background: var(--color-warning-soft); color: var(--color-text); border: 1px solid var(--color-warning); }
.banner--warning .ti { color: var(--color-warning); }
.banner--info { background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.banner--success { background: var(--color-success-soft); border: 1px solid var(--color-success); }
.banner--success .ti { color: var(--color-success); }
.toast {
  background: var(--color-surface-raised); color: var(--color-text); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-1);
  display: flex; gap: var(--space-3); align-items: center; font-size: var(--fs-0);
}

/* ---------- Status chain (lobby) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--space-3); align-items: start; padding: 10px 0; position: relative; }
.step__dot {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--color-border-strong); color: var(--color-text-muted); background: var(--color-bg);
}
.step__dot .ti { font-size: 16px; }
.step__text { line-height: 1.3; padding-top: 3px; }
.step__text small { display: block; color: var(--color-text-muted); font-size: var(--fs--1); margin-top: 2px; }
.step__time { font-family: var(--font-mono); font-size: var(--fs--1); color: var(--color-text-muted); padding-top: 5px; }
.step--done .step__dot { background: var(--color-success); border-color: var(--color-success); color: var(--color-bg); }
.step--active .step__dot { border-color: var(--color-accent); color: var(--color-accent-text); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.step--active .step__text { font-weight: var(--fw-semibold); }
.step--pending .step__text { color: var(--color-text-muted); }
.step--fail .step__dot { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-bg); }
.step:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 40px; bottom: -8px; width: 2px; background: var(--color-border); }
.step--done:not(:last-child)::after { background: var(--color-success); }

/* ---------- Video placeholder (stylised person, no real video) ----------
   Sizes in cqmin: the parent tile is a size container, so the head keeps its
   proportions in any tile shape (portrait phone, 16:9 desktop, small preview). */
.tile, .knock__shot, .mirror { container-type: size; }
.video {
  --h: 24;
  --skin: hsl(var(--h) 28% 72%);
  --cloth: hsl(var(--h) 24% 40%);
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 15cqmin 19cqmin at 50% 40%, var(--skin) 0 96%, transparent 100%),
    radial-gradient(ellipse 40cqmin 26cqmin at 50% calc(40% + 44cqmin), var(--cloth) 0 98%, transparent 100%),
    radial-gradient(ellipse 80% 60% at 30% 10%, hsl(var(--h) 30% 30% / 0.9), transparent 70%),
    linear-gradient(165deg, hsl(var(--h) 22% 22%), hsl(var(--h) 18% 10%));
}
.video--wide { /* kept for compatibility: same as .video */ }
.video--dark-face {
  --skin: hsl(var(--h) 12% 30%);
  --cloth: hsl(var(--h) 10% 22%);
  background:
    radial-gradient(ellipse 15cqmin 19cqmin at 50% 40%, var(--skin) 0 96%, transparent 100%),
    radial-gradient(ellipse 40cqmin 26cqmin at 50% calc(40% + 44cqmin), var(--cloth) 0 98%, transparent 100%),
    radial-gradient(ellipse 60% 50% at 85% 15%, hsl(45 60% 75% / 0.55), transparent 70%),
    linear-gradient(165deg, hsl(var(--h) 10% 16%), hsl(var(--h) 10% 7%));
}
/* Hand over the face (same-person challenge). */
.video--hand::after {
  content: ""; position: absolute; left: 50%; top: 40%; width: 34cqmin; height: 40cqmin; transform: translate(-42%, -46%) rotate(-8deg);
  border-radius: 45% 45% 40% 40%; background: hsl(28 45% 64%); box-shadow: inset -6px -8px 0 hsl(28 35% 52%);
}
.video--frozen { filter: grayscale(0.7) brightness(0.55); }
.video--off { background: var(--color-video-bg); display: grid; place-items: center; }
.avatar {
  flex: none;
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gray-700); color: var(--nv-white); font-size: var(--fs-2); font-weight: var(--fw-semibold);
}
.avatar--sm { width: 48px; height: 48px; font-size: var(--fs-1); }

/* ---------- Tiles ---------- */
.tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-video-bg); }
.tile--speaking { box-shadow: inset 0 0 0 3px var(--nv-orange-500); }
.tile__label {
  position: absolute; left: 8px; bottom: 8px; right: 8px; z-index: var(--z-tile-overlay);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tile__name {
  display: inline-flex; align-items: center; gap: 6px; background: var(--color-scrim); color: var(--color-on-scrim);
  border-radius: var(--radius-pill); padding: 4px 10px; font-size: var(--fs--1); font-weight: var(--fw-semibold); line-height: 1.3;
}
.tile__name .ti { font-size: 16px; }
.tile__state {
  position: absolute; inset: 0; z-index: var(--z-tile-overlay); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px;
  color: var(--nv-white); background: rgba(11, 11, 12, 0.55); font-size: var(--fs--1); line-height: 1.3;
}
.tile__state .ti { font-size: 28px; }
.tile__state b { font-size: var(--fs-0); }
.tile__corner { position: absolute; top: 8px; right: 8px; z-index: var(--z-tile-overlay); }
.mic-off { color: var(--color-danger); }
.on-video { color: var(--nv-white); }

/* ---------- Call chrome ---------- */
.call-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-controls);
  padding: 8px var(--space-4) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.controls {
  flex: none; display: flex; justify-content: space-around; align-items: flex-start;
  padding: var(--space-3) var(--space-2) var(--space-1); background: var(--color-bg);
}
.ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; font-size: 13px; color: var(--color-text); text-align: center; line-height: 1.15; }
.ctl__btn {
  width: var(--ctl-size); height: var(--ctl-size); border-radius: 50%; display: grid; place-items: center;
  background: var(--color-surface-raised); color: var(--color-text); border: 1px solid var(--color-border);
}
.ctl__btn .ti { font-size: 26px; }
.ctl--off .ctl__btn { background: var(--color-text); color: var(--color-bg); border-color: transparent; }
.ctl--leave .ctl__btn { background: var(--color-danger); color: var(--nv-black); border-color: transparent; }
.ctl--disabled .ctl__btn { opacity: 0.5; }

/* ---------- Meter (mic level) ---------- */
.meter { display: flex; gap: 3px; align-items: flex-end; height: 20px; }
.meter i { width: 4px; border-radius: 2px; background: var(--color-success); display: block; }
.meter i.off { background: var(--color-border); }

/* ---------- Segmented toggle (mic / cam before entering) ---------- */
.toggle {
  flex: 1; min-height: var(--btn-height); border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--color-surface-raised); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3);
  font-size: var(--fs-0); font-weight: var(--fw-medium);
}
.toggle__state { margin-left: auto; font-size: var(--fs--1); color: var(--color-text-muted); }
.toggle--on .ti { color: var(--color-success); }
.toggle--off { background: var(--color-surface-sunken); }
.toggle--off .ti { color: var(--color-text-muted); }

/* ---------- Progress ring / dots ---------- */
.ring {
  --p: 60; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--nv-orange-500) calc(var(--p) * 1%), rgba(255, 255, 255, 0.18) 0);
}
.ring > span {
  width: 80px; height: 80px; border-radius: 50%; background: var(--color-scrim); display: grid; place-items: center;
  color: var(--nv-white); font: var(--fw-bold) var(--fs-3)/1 var(--font-mono);
}
.dots { display: flex; gap: 8px; }
.dots i { width: 28px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); display: block; }
.dots i.done { background: var(--color-success); }
.dots i.now { background: var(--nv-orange-500); }

/* ---------- Kbd hint (desktop) ---------- */
.kbd { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; color: var(--color-text-muted); }

/* ---------- Link box ---------- */
.linkbox {
  font-family: var(--font-mono); font-size: var(--fs--1); background: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3);
  overflow-wrap: anywhere; line-height: 1.4;
}

/* ======== Rules that sat inside single mockups ======== */
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.facts li { display: flex; gap: 12px; align-items: center; }
.facts .ti { color: var(--color-accent-text); }
.big-ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--color-surface-raised); color: var(--color-text-muted); }
.big-ico .ti { font-size: 34px; }
.big-ico--warn { background: var(--color-warning-soft); color: var(--color-warning); }
.big-ico--bad { background: var(--color-danger-soft); color: var(--color-danger); }
.steps-ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.steps-ol b { color: var(--color-text); }
.how { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.how__card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px; background: var(--color-surface); display: flex; flex-direction: column; gap: 8px; }
.how__num { width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font: 700 14px/24px var(--font-sans); text-align: center; }
.how__pic { height: 70px; border-radius: 8px; background: var(--color-surface-raised); border: 1px solid var(--color-border); position: relative; overflow: hidden; }
.how__pic .bar { position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--color-surface-sunken); }
.how__pic .dots3 { position: absolute; right: 6px; top: 3px; width: 22px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 2px var(--nv-orange-500); font-size: 12px; line-height: 12px; text-align: center; }
.how__pic .menu { position: absolute; right: 6px; top: 22px; width: 110px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: 6px; font-size: 11px; line-height: 1.2; }
.how__pic .menu span { display: block; padding: 3px 6px; color: var(--color-text-muted); }
.how__pic .menu span.hl { color: var(--color-text); background: var(--color-accent-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--nv-orange-500); }
.how__txt { font-size: 15px; line-height: 1.3; }
.pointer { align-self: flex-end; display: flex; flex-direction: column; align-items: center; font-size: 13px; font-weight: 600; color: var(--color-accent-text); }
.pointer .ti { font-size: 30px; }
.me { display: flex; gap: var(--space-3); align-items: center; }
.me .tile { width: 84px; height: 112px; flex: none; }
.me__txt { display: flex; flex-direction: column; gap: 6px; }
.reply { display: flex; gap: 10px; align-items: flex-start; background: var(--color-accent-soft); border-radius: var(--radius-md); padding: 12px 14px; }
.reply .ti { color: var(--color-accent-text); }
.knock { display: flex; gap: var(--space-3); align-items: flex-start; }
.knock .avatar { width: 72px; height: 72px; }
.knock__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.knock__name { font-size: var(--fs-1); font-weight: var(--fw-bold); line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.next { display: flex; align-items: center; gap: 10px; }
.next .avatar { width: 40px; height: 40px; font-size: 16px; }
.fact { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.fact .ti { font-size: 24px; margin-top: 1px; }
.fact p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.35; }
.fact--ok .ti { color: var(--color-success); }
.fact--warn .ti { color: var(--color-warning); }
.expander { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--color-text-muted); background: none; border: 0; font: inherit; width: 100%; padding: 0; cursor: pointer; }
.fail-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.banner__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.banner__actions .btn { min-height: 44px; padding: 0 14px; }
.countdown { font-family: var(--font-mono); font-weight: 700; }
.tile__state.blocked { background: rgba(58, 21, 21, .92); }
.tile__state.waiting { background: rgba(11, 11, 12, .7); }
.trust-pill { background: var(--color-scrim); color: #fff; border-radius: 999px; padding: 3px 8px; font-size: 13px; }
.qr { width: 196px; height: 196px; margin: 0 auto; display: block; border-radius: 12px; }

/* ======== App shell and layout ======== */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--fs-0); line-height: var(--lh-base);
  min-height: 100dvh;
}
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.page { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; background: var(--color-bg); color: var(--color-text); min-height: 100dvh; padding-top: var(--safe-top); }
.page .screen { padding-bottom: calc(var(--space-5) + var(--safe-bottom)); }
.page .appbar { padding-top: 0; }
.boot { margin: auto; text-align: center; color: var(--color-text-muted); padding: var(--space-6); }
button { font-family: inherit; }
.btn { text-align: center; }
.btn[aria-disabled="true"] { cursor: default; }
a.btn { color: inherit; }
a.btn.btn--primary { color: var(--color-on-accent); }
.field__input { width: 100%; }
.field__input::placeholder { color: var(--color-text-muted); }
.field__input:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 1px; }
.title--sm { font-size: var(--fs-1); margin: 0; }
.pill--sm { min-height: 28px; padding: 0 8px; }
.pill--btn { font-family: inherit; cursor: pointer; }
.pill .ok { color: var(--color-success); }
@media (max-width: 599px) { .pill__more { display: none; } }

.mirror { position: relative; height: 262px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-video-bg); }
.mirror .tile { position: absolute; inset: 0; border-radius: 0; }
.mirror--small { height: 150px; margin: 0 var(--space-4); flex: none; }
.mirror__top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; z-index: 11; }
.mirror__hint { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 11; background: rgba(11,11,12,.78); color: #fff; border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.3; }
.mirror__hint .ti { color: var(--nv-orange-300); font-size: 22px; flex: none; }
.primer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 0 28px; height: 100%; color: var(--color-text); }
.primer .ti { font-size: 40px; color: var(--color-accent); }
.primer__txt { margin: 0; font-size: var(--fs-1); line-height: 1.3; }

.toggle { text-align: left; color: var(--color-text); cursor: pointer; font-family: inherit; }
.toggle[aria-disabled="true"] { cursor: default; }
.toggle:focus-visible, .ctl__btn:focus-visible, .pill--btn:focus-visible, .expander:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; }

.tile { background: var(--color-video-bg); }
.tile--info { display: grid; place-items: center; background: var(--color-surface); }
.slot { position: absolute; inset: 0; }
.slot video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--color-video-bg); }
.slot--hidden { visibility: hidden; }
.selfview { transform: scaleX(-1); }
.tile__avatar { position: absolute; inset: 0; display: grid; place-items: center; background: var(--color-video-bg); }
.tile--speaking { box-shadow: inset 0 0 0 3px var(--nv-orange-500); }
.tile--speaking::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--nv-orange-500); pointer-events: none; z-index: 12; }
.tile__state { text-align: center; }
.tile__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.call { display: flex; flex-direction: column; width: 100%; height: 100dvh; background: var(--color-bg); color: var(--color-text); padding-top: var(--safe-top); }
.call-top { position: static; flex: none; padding: 8px var(--space-4); }
.banners { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.banners:empty { display: none; }
.stage { flex: 1; min-height: 0; position: relative; }
.stage--duo .tile { position: absolute; inset: 0; border-radius: 0; }
.stage--duo .tile.pip { inset: auto; right: 12px; top: 12px; width: 100px; height: 136px; z-index: 15; box-shadow: 0 4px 16px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.25); border-radius: var(--radius-md); }
.stage--duo .tile__label { left: 12px; bottom: 12px; }
.stage--duo .tile.pip .tile__label { left: 4px; right: 4px; bottom: 4px; }
.stage--duo .tile.pip .tile__name { padding: 2px 6px; font-size: 12px; }
.stage--grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; padding: 0 6px 6px; }
.stage--grid .tile { position: relative; min-height: 0; }
.stage--grid .tile.wide { grid-column: 1 / 3; }
.stage .tile__label { flex-direction: column; align-items: flex-start; gap: 4px; }
.controls { flex: none; padding-bottom: calc(var(--space-1) + var(--safe-bottom)); }
.ctl__btn { cursor: pointer; font: inherit; padding: 0; }
.ctl--off .ctl__btn { background: var(--color-text); color: var(--color-bg); }
.ctl--leave .ctl__btn { background: var(--color-danger); color: var(--nv-black); }
.ctl--disabled .ctl__btn { opacity: 0.5; cursor: default; }
.call--wait .scroll { overflow-y: auto; }
.call--wait .appbar { flex: none; }
.call--wait .mirror--small { margin-top: 0; }

.scrim-full { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: calc(var(--z-sheet) - 1); }
.sheet { position: fixed; left: 50%; right: auto; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; padding-bottom: calc(var(--space-4) + var(--safe-bottom)); color: var(--color-text); }
.toast-wrap { position: fixed; left: 12px; right: 12px; bottom: calc(112px + var(--safe-bottom)); z-index: var(--z-toast); display: flex; justify-content: center; pointer-events: none; }
.toast-wrap .toast { max-width: 520px; }
.page .toast { margin: 0; }

@media (min-width: 1024px) {
  .stage--grid { padding: 0 14px 14px; gap: 10px; }
  .stage--duo .tile.pip { width: 200px; height: 140px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ti-loader-2 { animation: nv-spin 1.4s linear infinite; }
  @keyframes nv-spin { to { transform: rotate(360deg); } }
}