/* ===== /theme.css ===== */
/* ============================================
   OnFire Call — colour themes (onfiremobile-847hl.1)

   Every colour in call-web's stylesheets is a CSS variable. Literal values
   live in custom-property definitions only: this file, the :root tokens in
   style.css, and the module tokens at the top of some add-on stylesheets.
   tests/theme-tokens.test.js fails on a literal colour anywhere else, so new
   CSS picks a token here (or adds one, with a light value) and every theme
   covers it.

   Themes: theme.js sets <html data-theme="dark|light"> before first paint.
   Dark is the default and today's look. Light keeps video surfaces dark (the
   "media islands" below): video is shot for dark letterboxing, camera-off
   tiles do not flash white when a camera starts, and name pills stay legible
   over any picture.

   Load this file before every other stylesheet.

   Naming:
     --call-*        in-call surfaces and text
     --fg-aNN        neutral ink at NN% (white in dark, near-black in light)
     --text-*        solid text greys
     --surface-*     solid surfaces
     --shadow-aNN    drop-shadow colour; --scrim-aNN modal backdrops
     --inverse-*     glass toasts / banners / pills floating over the stage
     --media-*       chrome over video, the same in every theme
     --on-fill*      white on a saturated fill (avatars, red / orange buttons)
     --accent-aNN    OnFire orange (#FF6B1F) at NN%
     --pre-*         pre-call screens (onf.to palette)
     --fx-* / --illus-*  effect artwork and illustrations (theme-invariant)
   ============================================ */

/* ---- Dark (default) palette. The media islands re-declare it in light. ---- */
:root,
:root[data-theme="light"] .participant-tile,
:root[data-theme="light"] .screen-share-container,
:root[data-theme="light"] .video-preview-container,
:root[data-theme="light"] .floating-reaction,
:root[data-theme="light"] .stage-disp-stage,
:root[data-theme="light"] .stage-disp-tile,
:root[data-theme="light"] .stage-disp-thumb-n,
:root[data-theme="light"] .stage-item-media,
:root[data-theme="light"] .bgfx-preview,
:root[data-theme="light"] .fb-thumb,
:root[data-theme="light"] .ofx-layer {
  color-scheme: var(--color-scheme);

  /* In-call surfaces and text (were on #screen-call in style.css) */
  --call-bg: #131314;
  --call-surface: #202124;
  --call-surface-hover: #3c4043;
  --call-border: #3c4043;
  --call-panel: #1e1f20;
  --call-panel-border: #2e3134;
  --call-card: #282a2c;
  --call-card-hover: #333538;
  --call-menu: #28292a;
  --call-menu-hover: #353739;
  --call-text: #e3e3e3;
  --call-text-muted: #a8abaf;
  --call-danger: #ea4335;
  --call-danger-hover: #d93025;
  --color-scheme: dark;

  /* Neutral ink (hover washes, hairlines, tracks, soft text) */
  --fg-a02: rgba(255, 255, 255, 0.02);
  --fg-a025: rgba(255, 255, 255, 0.025);
  --fg-a03: rgba(255, 255, 255, 0.03);
  --fg-a04: rgba(255, 255, 255, 0.04);
  --fg-a05: rgba(255, 255, 255, 0.05);
  --fg-a06: rgba(255, 255, 255, 0.06);
  --fg-a07: rgba(255, 255, 255, 0.07);
  --fg-a08: rgba(255, 255, 255, 0.08);
  --fg-a10: rgba(255, 255, 255, 0.1);
  --fg-a12: rgba(255, 255, 255, 0.12);
  --fg-a14: rgba(255, 255, 255, 0.14);
  --fg-a15: rgba(255, 255, 255, 0.15);
  --fg-a16: rgba(255, 255, 255, 0.16);
  --fg-a18: rgba(255, 255, 255, 0.18);
  --fg-a20: rgba(255, 255, 255, 0.2);
  --fg-a22: rgba(255, 255, 255, 0.22);
  --fg-a24: rgba(255, 255, 255, 0.24);
  --fg-a28: rgba(255, 255, 255, 0.28);
  --fg-a30: rgba(255, 255, 255, 0.3);
  --fg-a35: rgba(255, 255, 255, 0.35);
  --fg-a40: rgba(255, 255, 255, 0.4);
  --fg-a45: rgba(255, 255, 255, 0.45);
  --fg-a50: rgba(255, 255, 255, 0.5);
  --fg-a55: rgba(255, 255, 255, 0.55);
  --fg-a60: rgba(255, 255, 255, 0.6);
  --fg-a70: rgba(255, 255, 255, 0.7);
  --fg-a75: rgba(255, 255, 255, 0.75);
  --fg-a85: rgba(255, 255, 255, 0.85);
  --fg-a90: rgba(255, 255, 255, 0.9);
  --fg-e3-a08: rgba(227, 227, 227, 0.08);
  --fg-e3-a12: rgba(227, 227, 227, 0.12);
  --fg-e8-a08: rgba(232, 234, 237, 0.08);

  /* Text */
  --chat-bubble-text: #f1f1f1;
  --text-dim: #9aa0a6;
  --text-faint: #5f6368;
  --text-hi: #e8eaed;
  --text-icon: #c4c7c5;
  --text-placeholder: #80868b;
  --text-strong: #ffffff;

  /* Surfaces, dividers, controls */
  --avatar-neutral: #5f6368;
  --border-control: #9aa0a6;
  --border-strong: #5f6368;
  --chat-bubble-self: #3a2418;
  --chip-selected-bg: #ffffff;
  --chip-selected-fg: #1a1a1a;
  --control-pill: rgba(60, 64, 67, 0.6);
  --divider: rgba(46, 49, 52, 0.6);
  --divider-2: rgba(60, 64, 67, 0.6);
  --glass-bar: rgba(32, 33, 36, 0.95);
  --meter-off: #5f6368;
  --surface-avatar: #3a3c40;
  --surface-chip-hover: #4a4e52;
  --surface-inset: rgba(0, 0, 0, 0.25);
  --surface-pill-hover: #303235;
  --surface-popover: #2f3133;
  --surface-raised: #2a2b2e;
  --surface-raised-hover: #2d2f31;
  --surface-sheet: #1a1a1e;
  --surface-toast: #303134;
  --surface-tonal-hover: #4a4d51;
  --switch-knob: #ffffff;
  --switch-knob-soft: #e8eaed;
  --switch-off: #5f6368;

  /* Shadows and modal scrims */
  --scrim-a32: rgba(0, 0, 0, 0.32);
  --scrim-a45: rgba(0, 0, 0, 0.45);
  --scrim-a55: rgba(0, 0, 0, 0.55);
  --scrim-a60: rgba(0, 0, 0, 0.6);
  --shadow-a15: rgba(0, 0, 0, 0.15);
  --shadow-a20: rgba(0, 0, 0, 0.2);
  --shadow-a25: rgba(0, 0, 0, 0.25);
  --shadow-a30: rgba(0, 0, 0, 0.3);
  --shadow-a35: rgba(0, 0, 0, 0.35);
  --shadow-a40: rgba(0, 0, 0, 0.4);
  --shadow-a45: rgba(0, 0, 0, 0.45);
  --shadow-a50: rgba(0, 0, 0, 0.5);
  --shadow-a55: rgba(0, 0, 0, 0.55);
  --shadow-a60: rgba(0, 0, 0, 0.6);

  /* Inverse surfaces: toasts and banners that float over the stage */
  --inverse-banner: rgba(26, 26, 30, 0.92);
  --inverse-banner-2: rgba(26, 26, 30, 0.96);
  --inverse-glass: rgba(32, 33, 36, 0.92);
  --inverse-glass-2: rgba(32, 33, 36, 0.94);
  --inverse-glass-3: rgba(32, 33, 36, 0.96);
  --inverse-toast: rgba(17, 17, 17, 0.92);
  --inverse-toast-2: rgba(17, 17, 17, 0.94);
  --inverse-toast-3: rgba(20, 24, 32, 0.95);

  /* Media: chrome over video, white on saturated fills, speaking glow, pulses */
  --avatar-fallback: #e65100;
  --glow-accent-a25: rgba(255, 107, 31, 0.25);
  --glow-accent-a45: rgba(255, 107, 31, 0.45);
  --glow-accent-a55: rgba(255, 107, 31, 0.55);
  --glow-accent-rgb: 255, 107, 31;
  --media-a12: rgba(0, 0, 0, 0.12);
  --media-a45: rgba(0, 0, 0, 0.45);
  --media-a50: rgba(0, 0, 0, 0.5);
  --media-a55: rgba(0, 0, 0, 0.55);
  --media-a60: rgba(0, 0, 0, 0.6);
  --media-a65: rgba(0, 0, 0, 0.65);
  --media-a70: rgba(0, 0, 0, 0.7);
  --media-black: #000000;
  --media-button: rgba(32, 33, 36, 0.85);
  --media-button-hover: rgba(60, 64, 67, 0.95);
  --media-label: rgba(30, 31, 32, 0.8);
  --media-label-2: rgba(30, 31, 32, 0.85);
  --media-tile-bottom: #25272a;
  --media-tile-top: #3a3d42;
  --media-white: #ffffff;
  --on-fill: #ffffff;
  --on-fill-a18: rgba(255, 255, 255, 0.18);
  --on-fill-a30: rgba(255, 255, 255, 0.3);
  --on-fill-a35: rgba(255, 255, 255, 0.35);
  --pulse-danger-a00: rgba(234, 67, 53, 0);
  --pulse-danger-a35: rgba(234, 67, 53, 0.35);
  --pulse-danger-a45: rgba(234, 67, 53, 0.45);
  --pulse-danger-a55: rgba(234, 67, 53, 0.55);
  --pulse-danger-a60: rgba(234, 67, 53, 0.6);

  /* OnFire orange and gold */
  --accent-a08: rgba(255, 107, 31, 0.08);
  --accent-a10: rgba(255, 107, 31, 0.1);
  --accent-a14: rgba(255, 107, 31, 0.14);
  --accent-a15: rgba(255, 107, 31, 0.15);
  --accent-a18: rgba(255, 107, 31, 0.18);
  --accent-a22: rgba(255, 107, 31, 0.22);
  --accent-a25: rgba(255, 107, 31, 0.25);
  --accent-a30: rgba(255, 107, 31, 0.3);
  --accent-a35: rgba(255, 107, 31, 0.35);
  --accent-a40: rgba(255, 107, 31, 0.4);
  --accent-a45: rgba(255, 107, 31, 0.45);
  --accent-a55: rgba(255, 107, 31, 0.55);
  --accent-a60: rgba(255, 107, 31, 0.6);
  --accent-a70: rgba(255, 107, 31, 0.7);
  --accent-bright: #ff8a4c;
  --accent-link-hover: #ffc9a8;
  --accent-text-a70: rgba(255, 179, 138, 0.7);
  --accent-text-soft: #ffd2b8;
  --gold-a16: rgba(255, 206, 84, 0.16);
  --gold-a35: rgba(255, 206, 84, 0.35);
  --gold-a50: rgba(255, 206, 84, 0.5);
  --gold-text: #ffce54;

  /* Status: danger / error / success / warning */
  --danger-a14: rgba(234, 67, 53, 0.14);
  --danger-a18: rgba(234, 67, 53, 0.18);
  --danger-a20: rgba(234, 67, 53, 0.2);
  --danger-a26: rgba(234, 67, 53, 0.26);
  --danger-a32: rgba(234, 67, 53, 0.32);
  --danger-text: #f28b82;
  --danger-text-2: #ff6b63;
  --danger-text-a12: rgba(242, 139, 130, 0.12);
  --danger-text-a60: rgba(242, 139, 130, 0.6);
  --danger-text-a70: rgba(242, 139, 130, 0.7);
  --error-a15: rgba(255, 91, 91, 0.15);
  --error-text: #ff5b5b;
  --error-text-2: #ff6b6b;
  --green-a16: rgba(52, 199, 89, 0.16);
  --green-a18: rgba(52, 199, 89, 0.18);
  --green-a20: rgba(52, 199, 89, 0.2);
  --green-a50: rgba(52, 199, 89, 0.5);
  --green-text: #34c759;
  --ios-red: #ff3b30;
  --ios-red-a08: rgba(255, 59, 48, 0.08);
  --ios-red-a12: rgba(255, 59, 48, 0.12);
  --ios-red-a15: rgba(255, 59, 48, 0.15);
  --ios-red-a16: rgba(255, 59, 48, 0.16);
  --ios-red-a18: rgba(255, 59, 48, 0.18);
  --ios-red-a25: rgba(255, 59, 48, 0.25);
  --ios-red-a40: rgba(255, 59, 48, 0.4);
  --ios-red-text: #ff3b30;
  --status-ok: #34a853;
  --status-ok-a18: rgba(52, 168, 83, 0.18);
  --success: #22c55e;
  --success-a18: rgba(34, 197, 94, 0.18);
  --success-deep-a18: rgba(22, 163, 74, 0.18);
  --success-fill: #1e8e3e;
  --success-icon: #22c55e;
  --success-ink: #0b1f12;
  --success-text: #81c995;
  --success-text-2: #4ade80;
  --success-text-a16: rgba(129, 201, 149, 0.16);
  --warning-a14: rgba(251, 188, 4, 0.14);
  --warning-a55: rgba(251, 188, 4, 0.55);
  --warning-text: #fdd663;
  --warning-text-2: #fbbc04;

  /* Pre-call screens (landing, join card, start meeting; onf.to palette) */
  --page-grad-1: #0f172a;
  --page-grad-2: #1e3a8a;
  --page-grad-3: #1e293b;
  --pre-accent: #f97316;
  --pre-accent-a12: rgba(249, 115, 22, 0.12);
  --pre-accent-a15: rgba(249, 115, 22, 0.15);
  --pre-accent-a18: rgba(249, 115, 22, 0.18);
  --pre-accent-a20: rgba(249, 115, 22, 0.2);
  --pre-accent-a25: rgba(249, 115, 22, 0.25);
  --pre-accent-a35: rgba(249, 115, 22, 0.35);
  --pre-accent-text: #fb923c;
  --pre-accent-text-soft: #fdba74;
  --pre-accent-text-strong: #f97316;
  --pre-avatar-from: #fb923c;
  --pre-avatar-to: #ef4444;
  --pre-danger-text: #fca5a5;
  --pre-footer-bg: rgba(10, 11, 20, 0.6);
  --pre-grad-hover: #ea580c;
  --pre-grad-red: #dc2626;
  --pre-grad-red-hover: #b91c1c;
  --pre-gray-600-a60: rgba(75, 85, 99, 0.6);
  --pre-gray-600-a70: rgba(75, 85, 99, 0.7);
  --pre-gray-700-a40: rgba(55, 65, 81, 0.4);
  --pre-gray-700-a50: rgba(55, 65, 81, 0.5);
  --pre-gray-700-a60: rgba(55, 65, 81, 0.6);
  --pre-gray-800-a60: rgba(31, 41, 55, 0.6);
  --pre-header-bg: rgba(15, 23, 42, 0.8);
  --pre-sheet: #1f2937;
  --pre-success-text: #86efac;
  --pre-text-2: #d1d5db;

  /* Artwork: effects, illustrations, QR paper, breakout takeover */
  --fx-gold: #ffce54;
  --fx-gold-a00: rgba(255, 206, 84, 0);
  --fx-gold-a55: rgba(255, 206, 84, 0.55);
  --fx-gold-a60: rgba(255, 206, 84, 0.6);
  --fx-gold-deep: #ff9a3d;
  --fx-gold-light: #fff6d6;
  --fx-orange-a00: rgba(255, 107, 31, 0);
  --fx-orange-a22: rgba(255, 107, 31, 0.22);
  --fx-shade-a00: rgba(0, 0, 0, 0);
  --fx-shade-a18: rgba(0, 0, 0, 0.18);
  --fx-shade-a35: rgba(0, 0, 0, 0.35);
  --fx-shade-a45: rgba(0, 0, 0, 0.45);
  --fx-shade-a50: rgba(0, 0, 0, 0.5);
  --fx-shade-a55: rgba(0, 0, 0, 0.55);
  --fx-shade-a60: rgba(0, 0, 0, 0.6);
  --fx-shade-a70: rgba(0, 0, 0, 0.7);
  --fx-white: #ffffff;
  /* Message effects (onfiremobile-2bzmp.10): balloon pennant, panda bubble, robot LED sign */
  --fx-bubble: #ffffff;
  --fx-bubble-text: #2a2420;
  --fx-cloth: #fff8ec;
  --fx-cloth-edge: #ff6b1f;
  --fx-cloth-text: #c4380c;
  --fx-rope: #6e4520;
  --fx-led-bg: #141826;
  --fx-led-text: #8af6ff;
  --fx-led-glow: rgba(124, 243, 255, 0.6);
  --fx-led-a00: rgba(124, 243, 255, 0);
  --illus-blue: #8ab4f8;
  --illus-figure: #e8eaed;
  --illus-green: #81c995;
  --illus-grey: #3c4043;
  --illus-grey-2: #5f6368;
  --illus-yellow: #fdd663;
  --qr-paper: #ffffff;
  --takeover-from: rgba(194, 65, 12, 0.97);
  --takeover-to: rgba(124, 45, 18, 0.97);
}

/* ---- Light palette ---- */
:root[data-theme="light"] {
  color-scheme: var(--color-scheme);

  /* In-call surfaces and text (were on #screen-call in style.css) */
  --call-bg: #f0f0f5;
  --call-surface: #ffffff;
  --call-surface-hover: #e9e9ef;
  --call-border: #cbccd2;
  --call-panel: #ffffff;
  --call-panel-border: #e3e4e9;
  --call-card: #f4f4f8;
  --call-card-hover: #ebebf0;
  --call-menu: #ffffff;
  --call-menu-hover: #f0f0f5;
  --call-text: #222222;
  --call-text-muted: #5f6570;
  --color-scheme: light;
  /* Neutral ink (hover washes, hairlines, tracks, soft text) */
  --fg-a02: rgba(26, 28, 34, 0.02);
  --fg-a025: rgba(26, 28, 34, 0.025);
  --fg-a03: rgba(26, 28, 34, 0.03);
  --fg-a04: rgba(26, 28, 34, 0.04);
  --fg-a05: rgba(26, 28, 34, 0.05);
  --fg-a06: rgba(26, 28, 34, 0.06);
  --fg-a07: rgba(26, 28, 34, 0.07);
  --fg-a08: rgba(26, 28, 34, 0.08);
  --fg-a10: rgba(26, 28, 34, 0.1);
  --fg-a12: rgba(26, 28, 34, 0.12);
  --fg-a14: rgba(26, 28, 34, 0.14);
  --fg-a15: rgba(26, 28, 34, 0.15);
  --fg-a16: rgba(26, 28, 34, 0.16);
  --fg-a18: rgba(26, 28, 34, 0.18);
  --fg-a20: rgba(26, 28, 34, 0.2);
  --fg-a22: rgba(26, 28, 34, 0.22);
  --fg-a24: rgba(26, 28, 34, 0.24);
  --fg-a28: rgba(26, 28, 34, 0.28);
  --fg-a30: rgba(26, 28, 34, 0.44);
  --fg-a35: rgba(26, 28, 34, 0.5);
  --fg-a40: rgba(26, 28, 34, 0.64);
  --fg-a45: rgba(26, 28, 34, 0.64);
  --fg-a50: rgba(26, 28, 34, 0.66);
  --fg-a55: rgba(26, 28, 34, 0.7);
  --fg-a60: rgba(26, 28, 34, 0.73);
  --fg-a70: rgba(26, 28, 34, 0.8);
  --fg-a75: rgba(26, 28, 34, 0.83);
  --fg-a85: rgba(26, 28, 34, 0.89);
  --fg-a90: rgba(26, 28, 34, 0.93);
  --fg-e3-a08: rgba(26, 28, 34, 0.08);
  --fg-e3-a12: rgba(26, 28, 34, 0.12);
  --fg-e8-a08: rgba(26, 28, 34, 0.08);
  /* Text */
  --chat-bubble-text: #222222;
  --text-dim: #5f6570;
  --text-faint: #8e939c;
  --text-hi: #2a2b30;
  --text-icon: #4b5059;
  --text-placeholder: #666c77;
  --text-strong: #222222;
  /* Surfaces, dividers, controls */
  --avatar-neutral: #6b717c;
  --border-control: #7b818b;
  --border-strong: #9a9ea8;
  --chat-bubble-self: #ffeadf;
  --chip-selected-bg: #222222;
  --chip-selected-fg: #ffffff;
  --control-pill: #ededf2;
  --divider: rgba(26, 28, 34, 0.1);
  --divider-2: rgba(26, 28, 34, 0.1);
  --glass-bar: rgba(255, 255, 255, 0.95);
  --meter-off: #c9ccd3;
  --surface-avatar: #e3e4ea;
  --surface-chip-hover: #dcdde3;
  --surface-inset: #f1f1f5;
  --surface-pill-hover: #ebebf0;
  --surface-popover: #ffffff;
  --surface-raised: #f1f1f5;
  --surface-raised-hover: #ebebf0;
  --surface-sheet: #ffffff;
  --surface-toast: #ffffff;
  --surface-tonal-hover: #dcdde3;
  --switch-knob-soft: #ffffff;
  --switch-off: #8e939c;
  /* Shadows and modal scrims */
  --scrim-a32: rgba(15, 23, 42, 0.192);
  --scrim-a45: rgba(15, 23, 42, 0.27);
  --scrim-a55: rgba(15, 23, 42, 0.33);
  --scrim-a60: rgba(15, 23, 42, 0.36);
  --shadow-a15: rgba(15, 23, 42, 0.045);
  --shadow-a20: rgba(15, 23, 42, 0.06);
  --shadow-a25: rgba(15, 23, 42, 0.075);
  --shadow-a30: rgba(15, 23, 42, 0.09);
  --shadow-a35: rgba(15, 23, 42, 0.105);
  --shadow-a40: rgba(15, 23, 42, 0.12);
  --shadow-a45: rgba(15, 23, 42, 0.135);
  --shadow-a50: rgba(15, 23, 42, 0.15);
  --shadow-a55: rgba(15, 23, 42, 0.165);
  --shadow-a60: rgba(15, 23, 42, 0.18);
  /* Inverse surfaces: toasts and banners that float over the stage */
  --inverse-banner: rgba(255, 255, 255, 0.94);
  --inverse-banner-2: rgba(255, 255, 255, 0.97);
  --inverse-glass: rgba(255, 255, 255, 0.92);
  --inverse-glass-2: rgba(255, 255, 255, 0.94);
  --inverse-glass-3: rgba(255, 255, 255, 0.96);
  --inverse-toast: rgba(255, 255, 255, 0.96);
  --inverse-toast-2: rgba(255, 255, 255, 0.96);
  --inverse-toast-3: rgba(255, 255, 255, 0.97);
  /* OnFire orange and gold */
  --accent-link-hover: #9a3412;
  --accent-text-a70: rgba(179, 68, 12, 0.7);
  --accent-text-soft: #9a3412;
  --gold-text: #946200;
  /* Status: danger / error / success / warning */
  --danger-text: #c5221f;
  --danger-text-2: #c5221f;
  --danger-text-a12: rgba(197, 34, 31, 0.08);
  --danger-text-a60: rgba(197, 34, 31, 0.5);
  --danger-text-a70: rgba(197, 34, 31, 0.6);
  --error-text: #c5221f;
  --error-text-2: #c5221f;
  --green-text: #137333;
  --ios-red-text: #d70015;
  --success-icon: #137333;
  --success-text: #137333;
  --success-text-2: #137333;
  --success-text-a16: rgba(19, 115, 51, 0.12);
  --warning-text: #946200;
  --warning-text-2: #946200;
  /* Pre-call screens (landing, join card, start meeting; onf.to palette) */
  --page-grad-1: #fff4ea;
  --page-grad-2: #f7f7fb;
  --page-grad-3: #eceff6;
  --pre-accent-text: #b3440c;
  --pre-accent-text-soft: #b3440c;
  --pre-accent-text-strong: #9a3412;
  --pre-danger-text: #b3261e;
  --pre-footer-bg: rgba(255, 255, 255, 0.6);
  --pre-gray-600-a60: rgba(26, 28, 34, 0.1);
  --pre-gray-600-a70: rgba(26, 28, 34, 0.12);
  --pre-gray-700-a40: rgba(26, 28, 34, 0.05);
  --pre-gray-700-a50: rgba(26, 28, 34, 0.06);
  --pre-gray-700-a60: rgba(26, 28, 34, 0.18);
  --pre-gray-800-a60: rgba(255, 255, 255, 0.72);
  --pre-header-bg: rgba(255, 255, 255, 0.8);
  --pre-sheet: #ffffff;
  --pre-success-text: #137333;
  --pre-text-2: #3f4550;
}

/* ---- Light: module tokens that are literal in their own stylesheet ---- */
:root[data-theme="light"] {
  /* style.css :root (pre-call screens, accent) */
  --color-danger: #d70015;
  --bg-secondary: rgba(255, 255, 255, 0.6);
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-input: rgba(26, 28, 34, 0.07);
  --bg-overlay: rgba(15, 23, 42, 0.3);
  --text-primary: #222222;
  --text-secondary: #5f6570;
  --text-tertiary: #707781;
  --border-color: rgba(26, 28, 34, 0.12);
  --shadow-card: 0 1px 4px rgba(15, 23, 42, 0.04), 0 16px 40px -12px rgba(15, 23, 42, 0.16);
  --shadow-elevated: 0 8px 40px rgba(15, 23, 42, 0.14);
  --bg-call: #f0f0f5;
  --bg-controls: rgba(255, 255, 255, 0.9);
  --call-accent-text: #b3440c;
  --call-accent-soft: rgba(255, 107, 31, 0.14);
  --call-focus: #c4500e;
  /* lobby.css :root */
  --lobby-surface: #ffffff;
  --lobby-surface-2: #f4f4f8;
  --lobby-text: #222222;
  --lobby-muted: #5f6570;
  --lobby-border: rgba(26, 28, 34, 0.12);
}
/* recording.css / stage.css (#screen-call) */
:root[data-theme="light"] #screen-call {
  --rec-red-line: rgba(197, 34, 31, 0.55);
  --rec-red-text: #b3261e;
  --stage-danger-text: #b3261e;
  --stage-danger-line: rgba(197, 34, 31, 0.5);
  --stage-skel: rgba(26, 28, 34, 0.06);
  --stage-skel-hi: rgba(26, 28, 34, 0.11);
}
/* side-panels.css */
:root[data-theme="light"] .sp-panel {
  --sp-bg: #ffffff;
  --sp-card: #f4f4f8;
  --sp-card-hover: #ebebf0;
  --sp-border: rgba(26, 28, 34, 0.1);
  --sp-text: #222222;
  --sp-muted: #5f6570;
}
:root[data-theme="light"] .sp-dialog { --sp-text: #222222; }
/* device-test.css / feedback.css */
:root[data-theme="light"] .dt-root { --dt-raised: rgba(26, 28, 34, 0.04); }
:root[data-theme="light"] .fb-layer { --fb-danger: #c5221f; }

/* ---- Theme picker (theme.js): account panel / sign-in row + pre-join control ---- */
:root {
  --seg-selected: #3c4043;
  --seg-selected-glass: rgba(255, 255, 255, 0.16);
}
:root[data-theme="light"] {
  --seg-selected: #ffffff;
  --seg-selected-glass: #ffffff;
}
.theme-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.theme-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--call-text);
  font-size: 14px;
  font-weight: 500;
}
.theme-row-head svg {
  color: var(--text-icon);
  flex-shrink: 0;
}
.theme-row .theme-seg {
  flex: 1 1 auto;
  max-width: 300px;
  margin-left: auto;
}
/* Account panel: under "Your plan". */
.acct-theme {
  padding: 2px 4px 14px;
}
.theme-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fg-a06);
  border: 1px solid var(--fg-a08);
}
.theme-seg-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--call-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.theme-seg-btn:hover {
  color: var(--call-text);
}
.theme-seg-btn:active {
  transform: scale(0.96);
}
.theme-seg-btn[aria-checked="true"] {
  background: var(--seg-selected);
  color: var(--call-text);
  box-shadow: 0 1px 3px var(--shadow-a30);
}
.theme-seg-btn[aria-checked="true"] svg {
  color: var(--call-accent-text);
}
.theme-seg-btn:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 1px;
}
/* Pre-join: icon-only, floating top right over the onf.to backdrop */
.theme-float {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 5;
}
.theme-seg-icons {
  background: var(--bg-card);
  border-color: var(--border-color);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.theme-seg-icons .theme-seg-btn {
  flex: 0 0 auto;
  width: 36px;
  padding: 0;
  color: var(--text-secondary);
}
.theme-seg-icons .theme-seg-btn:hover {
  color: var(--text-primary);
}
.theme-seg-icons .theme-seg-btn[aria-checked="true"] {
  background: var(--seg-selected-glass);
  color: var(--text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .theme-seg-btn { transition: none; }
  .theme-seg-btn:active { transform: none; }
}

/* Pickers: a pill button that opens a small menu. i18n.js globe() (language)
   and theme.js menu() (theme) share it. */
.pick-wrap {
  position: relative;
  display: inline-flex;
}
.pick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pick-btn svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}
.pick-btn:hover {
  background: var(--fg-a06);
}
.pick-btn:active {
  transform: scale(0.96);
}
.pick-btn:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}
.pick-wrap.is-open .pick-btn {
  background: var(--fg-a06);
}
/* Icon-only (no code / label): a circle. */
.pick-btn.pick-icon {
  width: 36px;
  padding: 0;
}
.pick-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 184px;
  padding: 6px;
  border-radius: 14px;
  background: var(--call-menu);
  border: 1px solid var(--call-border);
  box-shadow: 0 16px 40px var(--shadow-a55);
  color: var(--text-hi);
  text-align: left;
  transform-origin: top right;
  animation: pick-menu-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pick-menu[hidden] {
  display: none;
}
.pick-menu-start {
  right: auto;
  left: 0;
  transform-origin: top left;
}
/* Footer pickers open upwards. */
.pick-menu-up {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom left;
}
.pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pick-item:hover,
.pick-item:focus-visible {
  background: var(--call-menu-hover);
  outline: none;
}
.pick-item svg {
  flex-shrink: 0;
}
.pick-name {
  flex: 1 1 auto;
}
.pick-check {
  display: inline-flex;
  color: var(--call-accent-text);
  opacity: 0;
}
.pick-item[aria-checked="true"] {
  font-weight: 600;
}
.pick-item[aria-checked="true"] .pick-check {
  opacity: 1;
}
@keyframes pick-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pick-menu { animation: none; }
  .pick-btn, .pick-item { transition: none; }
  .pick-btn:active { transform: none; }
}

/* Where the pickers sit. */
.ch-nav-actions .pick-wrap {
  align-self: center;
}
/* Sign-in sheet: the globe sits in the header, left of the close button. */
.signin-header .lang-signin {
  margin-left: auto;
  margin-right: 8px;
}
.signin-header .lang-signin .pick-btn {
  height: 32px;
}
/* Pre-join: left of the theme icons (3 x 36px + padding + gap). */
.lang-float {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: calc(max(16px, env(safe-area-inset-right)) + 128px);
  z-index: 5;
}
.lang-foot {
  margin-top: 14px;
}
.lang-row {
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  /* Phones: the nav keeps just the icons. */
  .ch-nav-actions .pick-btn {
    width: 36px;
    padding: 0;
  }
  .ch-nav-actions .pick-code {
    display: none;
  }
}

/* ===== /style.css ===== */
/* ============================================
   OnFire Call - Styles (matched to onf.to design)
   ============================================ */

/* Inter (variable, 400-700), self-hosted (vendor/fonts, from Google Fonts): an @import of
   fonts.googleapis.com blocked the first paint wherever Google is unreachable (mainland China). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/vendor/fonts/inter-4-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/vendor/fonts/inter-4-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/vendor/fonts/inter-4-greek-ext.woff2) format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/vendor/fonts/inter-4-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/vendor/fonts/inter-4-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/vendor/fonts/inter-4-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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/vendor/fonts/inter-4-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}

:root {
  --color-primary: #FF6B1F;
  --color-primary-hover: #E85A10;
  --color-primary-light: #FFCE54;
  --color-danger: #FF3B30;
  --color-danger-hover: #E0342A;
  --color-success: #34C759;

  /* Pre-call screens (onf.to look); light values in theme.css */
  --bg-primary: transparent;
  --bg-secondary: rgba(31, 41, 55, 0.5);
  --bg-card: rgba(31, 41, 55, 0.8);
  --bg-input: rgba(55, 65, 81, 0.6);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --text-primary: #f5f5f7;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --border-color: rgba(55, 65, 81, 0.5);
  --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.4);

  /* Call screen */
  --bg-call: #111111;
  --bg-participant: #1c1c1e;
  --bg-controls: rgba(30, 30, 32, 0.9);

  /* Call-screen accent (OnFire orange). Solid accent fills carry dark ink
     (#1a1a1a on #FF6B1F = 6.1:1; on hover #ff7f3d = 6.9:1; pressed #e85a10 =
     4.9:1) — white on brand orange is only ~2.9:1. Module CSS (timer,
     feedback, meeting-ready) reads these with literal fallbacks. */
  --call-accent: #FF6B1F;
  --call-accent-hover: #ff7f3d;
  --call-accent-pressed: #e85a10;
  --call-accent-ink: #1a1a1a;
  --call-accent-soft: rgba(255, 107, 31, 0.16);
  --call-accent-soft-hover: rgba(255, 107, 31, 0.24);
  --call-accent-text: #ffb38a;
  --call-accent-2: #FFCE54;
  --call-focus: #ff7f3d;
}

/* ============================================
   Reset & Base
   ============================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(to bottom right, var(--page-grad-1), var(--page-grad-2), var(--page-grad-3));
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* Background pattern — matches onf.to */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fillRule='evenodd'%3E%3Cg fill='%23ffffff' fillOpacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

a {
  color: var(--pre-accent-text);
  text-decoration: none;
}

a:hover {
  color: var(--pre-accent-text-strong);
  text-decoration: underline;
}

/* ============================================
   Screen System
   ============================================ */

.screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.screen.active {
  display: flex;
}

/* ============================================
   Loading Screen
   ============================================ */

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.logo {
  animation: fadeIn 0.6s ease;
}

.logo-icon {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 4px 12px var(--accent-a30));
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--fg-a20);
  border-top-color: var(--pre-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  color: var(--text-secondary);
  font-size: 15px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Error Screen
   ============================================ */

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  animation: fadeIn 0.4s ease;
}

.error-icon {
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.error-container h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-strong);
}

.error-container p {
  color: var(--pre-text-2);
  font-size: 15px;
  max-width: 320px;
  line-height: 1.5;
}

/* ============================================
   Join Screen
   ============================================ */

.join-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
  padding: 24px;
  animation: fadeIn 0.5s ease;
}

.join-header {
  margin-bottom: 24px;
}

.logo-small svg {
  width: 44px;
  height: 44px;
}

.join-card {
  width: 100%;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
}

/* Creator Info */
.creator-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pre-avatar-from), var(--pre-avatar-to));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar span {
  color: var(--on-fill);
  font-size: 20px;
  font-weight: 600;
}

.creator-details h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong);
}

.call-type-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 2px;
}

.call-type-icon {
  display: inline-flex;
}

/* Form */
.join-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-field {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-family: inherit;
  background: var(--bg-input);
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-field:focus {
  border-color: var(--pre-accent);
  box-shadow: 0 0 0 3px var(--pre-accent-a20);
}

.input-field::placeholder {
  color: var(--text-tertiary);
}

/* Video Preview */
.video-preview-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--pre-gray-700-a50);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 4px;
}

.video-preview-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

/* Camera off (onfiremobile-425ji): black + avatar, like a camera-off tile.
   The <video> is hidden (app.js also empties it) so a frozen frame can't show. */
.preview-cam-off {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: var(--call-bg);
}

.video-preview-container.cam-off .preview-cam-off { display: flex; }
.video-preview-container.cam-off video { visibility: hidden; }

.preview-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--avatar-fallback);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 500;
  color: var(--on-fill);
}

.preview-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.preview-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--media-a50);
  color: var(--text-strong);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
}

.preview-btn:hover {
  background: var(--media-a70);
}

.preview-btn.muted {
  background: var(--color-danger);
}

.preview-btn .pv-off,
.preview-btn.muted .pv-on {
  display: none;
}

.preview-btn.muted .pv-off {
  display: block;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(to right, var(--pre-accent), var(--pre-grad-red));
  color: var(--on-fill);
  box-shadow: 0 10px 15px -3px var(--pre-accent-a20);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(to right, var(--pre-grad-hover), var(--pre-grad-red-hover));
  transform: scale(1.05);
  box-shadow: 0 10px 20px -3px var(--pre-accent-a35);
}

.btn-primary:active:not(:disabled) {
  transform: scale(1);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg-input);
  color: var(--text-strong);
}

.btn-secondary:hover {
  background: var(--pre-gray-600-a70);
  text-decoration: none;
}

.btn-join {
  width: 100%;
  padding: 16px;
  font-size: 17px;
  margin-top: 4px;
}

.btn-text {
  display: inline;
}

.btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--on-fill-a30);
  border-top-color: var(--on-fill);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.btn-spinner.hidden, .hidden {
  display: none !important;
}

/* App prompt */
.mobile-app-prompt {
  margin-top: 20px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.btn-app {
  width: 100%;
  background: var(--pre-gray-700-a50);
  color: var(--text-strong);
  font-weight: 500;
  border-radius: 9999px;
}

.btn-app:hover {
  background: var(--pre-gray-600-a60);
  text-decoration: none;
}

.btn-app svg {
  flex-shrink: 0;
}

.app-hint {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 8px;
}

.footer-text {
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 20px;
}

/* ============================================
   Call Screen (Meet-style, Stitch design)
   Spacing scale: 4 / 8 / 12 / 16 / 24 px
   ============================================ */

#screen-call {
  /* Colour tokens (--call-bg, --call-surface, --call-text, …): theme.css */
  --call-ease: cubic-bezier(0.2, 0, 0, 1);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: var(--call-bg);
  color: var(--call-text);
}

.call-container {
  position: fixed;
  inset: 0;
  background: var(--bg-call);
  display: flex;
  flex-direction: column;
}

.call-layout {
  position: fixed;
  inset: 0;
  display: flex;
  background: var(--call-bg, #131314);
  overflow: hidden;
}

.call-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Call header */
.call-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 4px 12px 8px;
  z-index: 10;
  font-size: 14px;
  color: var(--call-text-muted);
}

.call-info,
.call-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.call-meta {
  gap: 12px;
  flex-shrink: 0;
}

/* The right group (recording controls, timer, hands, note chip, people,
   account) can outgrow what the clock and the code leave it: a signed-in host
   on a phone. The left group takes only the room that is left and sheds the
   code, then the clock, so Meeting details (i) and the connection dot never
   end up under the right group (QA cb-qa2, onfiremobile-847hl.19). */
.call-info {
  flex: 1 1 0;
  min-width: 48px; /* (i) + gap + the connection dot */
  container: call-info / inline-size;
}

@container call-info (max-width: 180px) {
  .call-code,
  .call-sep {
    display: none;
  }
}

@container call-info (max-width: 124px) {
  .call-clock {
    display: none;
  }
}

.call-clock {
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text-strong);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.call-sep {
  color: var(--text-faint);
}

.call-code {
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.call-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease), color 150ms var(--call-ease);
}

.call-icon-btn:hover {
  background: var(--fg-a08);
  color: var(--text-strong);
}

/* Connection status: text while connecting / reconnecting, a green dot once connected */
.call-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--warning-text-2);
  white-space: nowrap;
}

.call-status.connected {
  font-size: 0;
  color: transparent;
}

.call-status.connected::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-ok);
  box-shadow: 0 0 0 3px var(--status-ok-a18);
}

.call-timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--call-surface);
  border: 1px solid var(--call-border);
  color: var(--call-text);
  font-size: 12px;
  font-weight: 500;
}

.call-timer-pill svg {
  color: var(--call-text-muted);
  flex-shrink: 0;
}

.call-timer {
  font-variant-numeric: tabular-nums;
}

.call-people {
  position: relative;
  display: inline-flex;
}

.call-people-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--avatar-fallback);
  color: var(--on-fill);
  font-size: 12px;
  font-weight: 600;
}

.call-people-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--call-border);
  border: 1px solid var(--call-bg);
  color: var(--text-hi);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Stage: holds the screen share (if any) and the participants grid */
.call-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Participants grid */
.participants-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 8px;
  overflow: hidden;
}

/* Grid layouts by participant count */
.participants-grid[data-count="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.participants-grid[data-count="2"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.participants-grid[data-count="3"],
.participants-grid[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.participants-grid[data-count="5"],
.participants-grid[data-count="6"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

/* 16-tile pages (gallery-pages.js; phones stay at 6) */
.participants-grid[data-count="7"],
.participants-grid[data-count="8"],
.participants-grid[data-count="9"] {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.participants-grid[data-count="10"],
.participants-grid[data-count="11"],
.participants-grid[data-count="12"] {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.participants-grid[data-count="13"],
.participants-grid[data-count="14"],
.participants-grid[data-count="15"],
.participants-grid[data-count="16"] {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.participants-grid[data-count="10"] .avatar-placeholder,
.participants-grid[data-count="11"] .avatar-placeholder,
.participants-grid[data-count="12"] .avatar-placeholder,
.participants-grid[data-count="13"] .avatar-placeholder,
.participants-grid[data-count="14"] .avatar-placeholder,
.participants-grid[data-count="15"] .avatar-placeholder,
.participants-grid[data-count="16"] .avatar-placeholder {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

.participants-grid[data-count="13"] .participant-name,
.participants-grid[data-count="14"] .participant-name,
.participants-grid[data-count="15"] .participant-name,
.participants-grid[data-count="16"] .participant-name {
  bottom: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 8px;
  font-size: 11px;
}

/* Never taller than wide (tile-shape.js, owner 2026-10-11): when the grid's 1fr cells would be
   tall slivers — a narrow window, or the call column beside a presented note — every track is
   one square's side, so tiles are square, packed in the middle. The id keeps this above the
   per-count templates, including the 768px two-up one. */
#screen-call .participants-grid.tiles-square {
  grid-template-columns: repeat(var(--tile-cols, 1), var(--tile-sq, 1fr));
  grid-template-rows: repeat(var(--tile-rows, 1), var(--tile-sq, 1fr));
  justify-content: center;
  align-content: center;
}

/* Page switcher: a pill under the grid (in flow, so it never covers a name label) */
.gallery-nav {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--media-label);
  border: 1px solid var(--fg-a10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px var(--shadow-a30);
  color: var(--text-strong);
}

.gallery-nav.hidden {
  display: none;
}

.gallery-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease), transform 150ms var(--call-ease);
}

.gallery-nav-btn:hover:not(:disabled) {
  background: var(--fg-a08);
}

.gallery-nav-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.gallery-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.gallery-page-label {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.gallery-density-btn.is-on {
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
}

/* Participant tile: rounded-2xl card with a hairline border */
.participant-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--call-surface, #202124);
  border: 1px solid var(--fg-a05);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 48px -12px var(--shadow-a50);
}

.participant-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.participant-tile.local video {
  transform: scaleX(-1);
}

.participant-tile .avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--avatar-fallback);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 500;
  color: var(--on-fill);
}

/* Name pill, bottom-left of each tile */
.participant-name {
  position: absolute;
  bottom: 16px;
  left: 16px;
  max-width: calc(100% - 32px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--media-label);
  border: 1px solid var(--fg-a10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px var(--shadow-a30);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.participant-name > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-name .mic-indicator {
  flex-shrink: 0;
  display: inline-flex;
}

.mic-indicator.muted svg {
  color: var(--call-danger, #ea4335);
}

/* Floating control area: reactions pill + main control pill */
.call-controls-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 16px);
  pointer-events: none;
}

.call-controls-wrap > * {
  pointer-events: auto;
}

.call-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--call-surface);
  border: 1px solid var(--call-border);
  box-shadow: 0 12px 32px var(--shadow-a45), 0 2px 6px var(--shadow-a30);
}

.control-btn {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-hi);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms var(--call-ease), color 150ms var(--call-ease), transform 150ms var(--call-ease);
  -webkit-tap-highlight-color: transparent;
}

.control-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.control-btn:hover {
  background: var(--call-surface-hover);
}

.control-btn:active {
  transform: scale(0.96);
}

.control-btn:focus-visible,
.call-icon-btn:focus-visible,
.reaction-btn:focus-visible,
.more-menu-item:focus-visible,
.chat-file-btn:focus-visible,
.chat-send-btn:focus-visible,
.chat-close-btn:focus-visible,
.chat-emoji-option:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

/* Mic / camera: pill toggles */
.control-btn-pill {
  width: 56px;
  background: var(--control-pill);
}

.control-btn-pill:hover {
  background: var(--call-surface-hover);
}

/* Muted mic / camera off — red like Meet */
.control-btn.muted {
  background: var(--call-danger);
  color: var(--on-fill);
}

.control-btn.muted:hover {
  background: var(--call-danger-hover);
}

/* In-call primary buttons (Create poll, Create session, End now …): solid
   brand orange with dark ink (6.1:1) instead of the lobby's orange→red
   gradient with white text (~2.8:1). The lobby keeps its onf.to gradient. */
#screen-call .btn-primary,
.breakout-panel .btn-primary {
  background: var(--call-accent);
  color: var(--call-accent-ink);
  box-shadow: none;
}
/* The breakout sheet's Start / End buttons: white on orange (owner's call). */
.breakout-panel .btn-primary { color: var(--on-fill); }

#screen-call .btn-primary:hover:not(:disabled),
.breakout-panel .btn-primary:hover:not(:disabled) {
  background: var(--call-accent-hover);
  box-shadow: none;
  transform: none;
}

#screen-call .btn-primary:active:not(:disabled),
.breakout-panel .btn-primary:active:not(:disabled) {
  background: var(--call-accent-pressed);
}

/* Toggled-on features (chat open, hand raised, presenting, menu open) */
.control-btn.active {
  background: var(--call-accent);
  color: var(--call-accent-ink);
}

.control-btn.active:hover {
  background: var(--call-accent-hover);
}

.control-btn.active:active {
  background: var(--call-accent-pressed);
}

#btn-more.active {
  background: var(--call-surface-hover);
  color: var(--text-strong);
}

/* Leave call: red pill with a filled handset glyph (no strokes) */
.control-btn-hangup {
  width: 56px;
  height: 40px;
  margin-left: 4px;
  background: var(--call-danger);
  color: var(--on-fill);
  box-shadow: 0 2px 6px var(--shadow-a30);
}

.control-btn-hangup:hover {
  background: var(--call-danger-hover);
}

.control-btn-hangup svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  stroke: none;
}

/* Unread badges on control buttons */
.control-btn .chat-badge {
  top: -4px;
  right: -4px;
  border: 2px solid var(--call-surface, #202124);
  height: 20px;
  min-width: 20px;
  border-radius: 10px;
}

/* Reactions pill */
.reactions-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--glass-bar);
  border: 1px solid var(--call-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px var(--shadow-a40);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  animation: call-pop-in 180ms var(--call-ease, ease-out);
}

.reactions-bar::-webkit-scrollbar {
  display: none;
}

/* The emoji row inside the picker; effects.css adds the Effects row under it. */
.reactions-row {
  display: flex;
  align-items: center;
  gap: inherit;
}

.reaction-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms var(--call-ease, ease-out), background-color 150ms var(--call-ease, ease-out);
}

.reaction-btn:hover {
  transform: scale(1.25);
  background: var(--fg-a06);
}

.reaction-btn:active {
  transform: scale(1.05);
}

/* Floating reactions (rise and fade over the sender's tile) */
.reactions-float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.floating-reaction {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: reaction-rise 3s cubic-bezier(0.2, 0.6, 0.35, 1) forwards;
  will-change: transform, opacity;
}

.floating-reaction-emoji {
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px var(--fx-shade-a35));
}

.floating-reaction-name {
  max-width: 140px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--media-label-2);
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes reaction-rise {
  0%   { opacity: 0; transform: translate(0, 16px) scale(0.6); }
  12%  { opacity: 1; transform: translate(0, 0) scale(1.05); }
  20%  { transform: translate(0, -12px) scale(1); }
  50%  { transform: translate(10px, -110px); }
  75%  { opacity: 1; transform: translate(-8px, -190px); }
  100% { opacity: 0; transform: translate(4px, -260px); }
}

@keyframes call-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* "More options" popover */
.more-menu {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 264px;
  max-width: calc(100vw - 32px);
  padding: 8px 0;
  border-radius: 12px;
  background: var(--call-menu);
  border: 1px solid var(--call-border);
  box-shadow: 0 16px 40px var(--shadow-a55);
  color: var(--text-hi);
  font-size: 14px;
  animation: call-pop-in 160ms var(--call-ease, ease-out);
  transform-origin: bottom right;
  /* Short screens (390x640 phones, landscape): the menu grew past the top of the window and its
     first items (Present…, Breakout rooms, …) could not be reached. Its bottom sits 76 px above the
     window's bottom edge; keep 12 px at the top and scroll inside. */
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.more-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out);
}

.more-menu-item:hover {
  background: var(--call-menu-hover);
}
.more-menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.more-menu-sub {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-dim);
  margin-top: 2px;
}

.more-menu-item.more-menu-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.more-menu-item.more-menu-disabled:hover {
  background: transparent;
}

.more-menu-item svg {
  color: var(--text-icon);
  flex-shrink: 0;
}

.more-menu-item.active svg {
  color: var(--call-accent);
}

.more-menu-sep {
  height: 1px;
  margin: 6px 0;
  background: var(--call-border);
}

/* Collapsed controls only appear in the menu at phone widths */
.more-menu-collapsed,
.more-menu-item.proxy-unavailable {
  display: none;
}

/* Phones: collapse lower-priority controls into the ⋮ menu */
@media (max-width: 599px) {
  .call-main {
    padding-left: 8px;
    padding-right: 8px;
  }

  .call-header {
    padding-left: 8px;
    padding-right: 8px;
  }

  .call-controls .control-btn-collapsible {
    display: none;
  }

  .more-menu-collapsed {
    display: flex;
  }

  .more-menu-sep.more-menu-collapsed {
    display: block;
  }

  .more-menu-item.proxy-unavailable {
    display: none;
  }

  .participant-name {
    bottom: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
  }

  .reaction-btn {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }

  .reactions-bar {
    gap: 2px;
    padding: 4px 6px;
  }
}

/* Any width: a video column too narrow for the full bar (side panels or
   the Stage open on a small desktop) collapses the same way. content-strip.js
   sets .controls-compact from the column's width (onfiremobile-847hl.10). */
#screen-call.controls-compact .call-controls .control-btn-collapsible {
  display: none;
}

#screen-call.controls-compact .more-menu-collapsed {
  display: flex;
}

#screen-call.controls-compact .more-menu-sep.more-menu-collapsed {
  display: block;
}

#screen-call.controls-compact .more-menu-item.proxy-unavailable {
  display: none;
}

@media (max-width: 360px) {
  .call-controls {
    gap: 4px;
  }

  .control-btn-pill,
  .control-btn-hangup {
    width: 48px;
  }

  .call-code,
  .call-sep {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-reaction {
    animation: reaction-fade 2.4s ease-out forwards;
  }

  .reactions-bar,
  .more-menu,
  .participant-tile {
    animation: none;
  }
}

@keyframes reaction-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================
   Screen Share Layout
   ============================================ */

.screen-share-container {
  display: none;
  position: relative;
  background: var(--media-black);
  border: 1px solid var(--fg-a05);
  border-radius: 16px;
  overflow: hidden;
}

.screen-share-container.active {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  animation: fadeIn 0.3s ease;
}

.screen-share-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--media-black);
}

.screen-share-label {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  background: var(--media-label);
  border: 1px solid var(--fg-a10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 500;
}

/* Strip mode: while a screen is shared the participants become a strip ABOVE
   it (onfiremobile-847hl.10): a centred top row on desktop, a sideways-scrolling
   strip on phones. content-strip.js keeps the active speaker's tile in view. */
.participants-grid.strip-mode {
  order: -1;
  flex: none;
  height: 120px;
  padding: 3px;
  grid-template-columns: none;
  grid-template-rows: none;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

@media (pointer: coarse) {
  .participants-grid.strip-mode {
    scrollbar-width: none;
  }

  .participants-grid.strip-mode::-webkit-scrollbar {
    display: none;
  }
}

.participants-grid.strip-mode .participant-tile {
  flex: 0 0 clamp(104px, calc((100% - 16px) / 3), 180px);
  height: 100%;
  min-width: 100px;
  scroll-snap-align: center;
  box-shadow: none;   /* the strip clips it into a band (visible in light) */
}

/* Centred while it fits; auto margins (unlike justify-content) keep an
   overflowing strip scrollable from its first tile. */
.participants-grid.strip-mode > .participant-tile:first-child {
  margin-left: auto;
}

.participants-grid.strip-mode > .participant-tile:last-child {
  margin-right: auto;
}

.participants-grid.strip-mode .participant-tile .avatar-placeholder {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.participants-grid.strip-mode .participant-name {
  font-size: 11px;
  bottom: 6px;
  left: 6px;
  padding: 4px 8px;
  max-width: calc(100% - 12px);
}

@media (min-width: 768px) {
  .participants-grid.strip-mode {
    height: 160px;
  }

  .participants-grid.strip-mode .participant-tile {
    flex: 0 0 200px;
  }
}

/* ============================================
   Call Ended Screen
   ============================================ */

.ended-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  animation: fadeIn 0.4s ease;
}

.ended-icon {
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.ended-container h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-strong);
}

.ended-duration {
  color: var(--text-secondary);
  font-size: 15px;
}

.ended-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* ============================================
   Responsive
   ============================================ */

@media (min-width: 768px) {
  .participants-grid[data-count="2"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .join-card {
    padding: 40px 36px;
  }
}

@media (max-width: 480px) {
  .join-card {
    border-radius: 16px;
    padding: 24px 20px;
  }

  .join-container {
    padding: 16px;
  }

  .creator-info {
    margin-bottom: 24px;
  }
}

/* ============================================
   Animations
   ============================================ */

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .participant-tile {
    animation: slideUp 0.3s ease;
  }
}

/* ============================================
   Connecting overlay
   ============================================ */

.connecting-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-call);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 20;
}

.connecting-overlay .spinner {
  border-color: var(--fg-a20);
  border-top-color: var(--pre-accent);
}

.connecting-overlay p {
  color: var(--fg-a60);
  font-size: 15px;
}

/* ============================================
   Landing Page
   ============================================ */

#screen-landing {
  overflow-y: auto;
}

body.landing-active,
body.landing-active html {
  overflow: auto;
}

.landing-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
}

/* Header */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--pre-header-bg);
  border-bottom: 1px solid var(--fg-a06);
}

.landing-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-strong);
  font-weight: 600;
  font-size: 18px;
}

.header-logo:hover {
  text-decoration: none;
  color: var(--text-strong);
}

.header-logo-icon {
  width: 34px;
  height: 34px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-nav a {
  color: var(--pre-text-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.header-nav a:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: linear-gradient(to right, var(--pre-accent), var(--pre-grad-red));
  color: var(--on-fill);
  font-size: 14px;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s;
}

.header-cta:hover {
  transform: scale(1.05);
  text-decoration: none;
  color: var(--on-fill);
}

/* Hero */
.landing-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.hero-content {
  max-width: 560px;
  text-align: center;
  animation: fadeIn 0.6s ease;
}

.hero-icon-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--pre-accent-a12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  color: var(--pre-accent-text-strong);
}

.hero-content h1 {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 12px;
}

.hero-subtitle {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Feature cards */
.hero-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
  text-align: left;
}

.hero-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--pre-gray-800-a60);
  border: 1px solid var(--pre-gray-700-a40);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--pre-accent-a12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pre-accent-text);
}

.hero-feature h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 2px;
}

.hero-feature p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* CTA */
.hero-cta-group {
  text-align: center;
}

.hero-prompt {
  font-size: 15px;
  color: var(--pre-text-2);
  margin-bottom: 16px;
}

.hero-prompt-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

/* Join by code form */
.join-code-form {
  margin-bottom: 24px;
}

.join-code-input-wrapper {
  display: flex;
  gap: 0;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--pre-gray-700-a60);
  background: var(--bg-input);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.join-code-input-wrapper:focus-within {
  border-color: var(--pre-accent);
  box-shadow: 0 0 0 3px var(--pre-accent-a20);
}

.join-code-input {
  flex: 1;
  padding: 14px 16px;
  font-size: 16px;
  font-family: inherit;
  background: transparent;
  border: none;
  color: var(--text-primary);
  outline: none;
  min-width: 0;
  letter-spacing: 0.3px;
}

.join-code-input::placeholder {
  color: var(--text-tertiary);
}

.btn-join-code {
  border-radius: 0;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

.join-code-error {
  font-size: 13px;
  color: var(--color-danger);
  margin-top: 8px;
  text-align: center;
}

.hero-download-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.download-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--fg-a08);
  border: 1px solid var(--fg-a12);
  border-radius: 10px;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.download-badge:hover {
  background: var(--fg-a14);
  text-decoration: none;
  color: var(--text-strong);
}

/* Footer */
.landing-footer {
  border-top: 1px solid var(--fg-a06);
  background: var(--pre-footer-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 24px;
  display: flex;
  gap: 60px;
}

.footer-brand {
  flex-shrink: 0;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-strong);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 8px;
}

.footer-logo:hover {
  text-decoration: none;
  color: var(--text-strong);
}

.footer-tagline {
  font-size: 13px;
  color: var(--text-tertiary);
}

.footer-columns {
  display: flex;
  gap: 48px;
  flex: 1;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-column h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.footer-column a {
  font-size: 14px;
  color: var(--pre-text-2);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-column a:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
  border-top: 1px solid var(--fg-a06);
}

.footer-bottom p {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Landing page responsive */
@media (max-width: 640px) {
  .header-nav {
    display: none;
  }

  .hero-content h1 {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .hero-icon-circle {
    width: 96px;
    height: 96px;
  }

  .hero-icon-circle svg {
    width: 48px;
    height: 48px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 32px;
  }

  .footer-columns {
    gap: 32px;
  }

  .landing-hero {
    padding: 40px 20px;
  }
}

/* ============================================
   Start Meeting Screen
   ============================================ */

.start-meeting-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
  padding: 24px;
  animation: fadeIn 0.5s ease;
}

.start-meeting-header {
  margin-bottom: 24px;
}

.start-meeting-card {
  width: 100%;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.start-meeting-icon {
  color: var(--pre-accent-text);
  margin-bottom: 16px;
}

.start-meeting-card h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.start-meeting-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.qr-code-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.qr-code-wrapper canvas {
  
  border-radius: 16px;
  box-shadow: 0 4px 20px var(--shadow-a20);
}

.meeting-slug-display {
  margin-bottom: 20px;
}

.slug-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.slug-url {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--pre-gray-700-a40);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.slug-url strong {
  color: var(--pre-accent-text);
  font-weight: 600;
}

.waiting-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--text-secondary);
  font-size: 13px;
}

.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid var(--fg-a20);
  border-top-color: var(--pre-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   Meeting Ready Screen
   ============================================ */

.meeting-ready-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
  padding: 24px;
  animation: fadeIn 0.5s ease;
}

.meeting-ready-header {
  margin-bottom: 24px;
}

.meeting-ready-card {
  width: 100%;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  text-align: center;
}

.meeting-ready-icon {
  margin-bottom: 16px;
  animation: scaleIn 0.4s ease;
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.meeting-ready-card h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.meeting-ready-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.meeting-link-field {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--pre-gray-700-a50);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.meeting-link-input {
  flex: 1;
  padding: 12px 14px;
  font-size: 14px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  background: transparent;
  border: none;
  color: var(--text-primary);
  outline: none;
  min-width: 0;
}

.btn-copy-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  background: var(--pre-accent-a15);
  border: none;
  border-left: 1px solid var(--border-color);
  color: var(--pre-accent-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn-copy-link:hover {
  background: var(--pre-accent-a25);
}

.meeting-ready-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.btn-share {
  flex: 1;
}

.btn-join-ready {
  flex: 2;
}

.creator-ready-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.avatar-small {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pre-avatar-from), var(--pre-avatar-to));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-small span {
  color: var(--on-fill);
  font-size: 11px;
  font-weight: 600;
}

.creator-ready-text {
  color: var(--text-secondary);
  font-size: 13px;
}

/* ============================================
   Chat Sidebar
   ============================================ */

.chat-panel {
  position: relative;
  width: 360px;
  display: flex;
  flex-direction: column;
  background: var(--call-panel, #1e1f20);
  border-left: 1px solid var(--call-panel-border, #2e3134);
  transition: width 0.2s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}

.chat-panel.hidden {
  width: 0;
  opacity: 0;
  border: none;
  pointer-events: none;
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 16px 12px 12px 24px;
  padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--divider);
}

.chat-panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--call-text, #e3e3e3);
}

.chat-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--call-text-muted, #a8abaf);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.chat-close-btn:hover {
  color: var(--text-strong);
  background: var(--fg-a08);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--call-border, #3c4043) transparent;
}

.chat-msg {
  position: relative;
  max-width: 85%;
}

.chat-msg.self {
  align-self: flex-end;
}

.chat-msg-sender {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 4px;
}

/* Bubbles are deliberately low-chroma so body text clears 7:1 (AAA):
   #f1f1f1 on peer #2a2b2e = 12.5:1, on own #3a2418 = 12.9:1. */
.chat-msg-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--fg-a06);
  color: var(--chat-bubble-text);
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}

.chat-msg.self .chat-msg-bubble {
  background: var(--chat-bubble-self);
  border-color: var(--accent-a22);
  color: var(--chat-bubble-text);
}

.chat-msg-bubble a {
  color: var(--call-accent-text, #ffb38a);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.chat-msg-bubble a:hover {
  color: var(--accent-link-hover);
}

.chat-msg-bubble a:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 1px;
  border-radius: 2px;
}

/* Emoji-only messages (1-3 emoji): no bubble, just big emoji. */
.chat-msg-bubble.chat-msg-emoji {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
  line-height: 1.15;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.chat-msg.self .chat-msg-bubble.chat-msg-emoji {
  background: transparent;
  text-align: right;
}

.chat-msg-emoji.emoji-1 { font-size: 44px; }
.chat-msg-emoji.emoji-2 { font-size: 38px; }
.chat-msg-emoji.emoji-3 { font-size: 32px; }

.chat-msg-time {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.chat-msg.self .chat-msg-time {
  text-align: right;
}

.chat-msg-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--call-card, #282a2c);
  border: 1px solid var(--fg-a05);
  color: var(--text-strong);
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 150ms ease-out;
}

.chat-msg-file:hover {
  background: var(--call-card-hover, #333538);
}

.chat-msg-file svg {
  flex-shrink: 0;
}

.chat-msg-file-info {
  min-width: 0;
}

.chat-msg-file-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-msg-file-size {
  font-size: 11px;
  color: var(--fg-a40);
}

/* ---- Chat message reactions ---------------------------------------------- */
.chat-msg-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-msg.self .chat-msg-time {
  justify-content: flex-end;
}

.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.chat-msg.self .chat-reactions {
  justify-content: flex-end;
}

.chat-reactions.empty {
  display: none;
}

.chat-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--call-surface-hover, #3c4043);
  color: var(--call-text, #e3e3e3);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}

.chat-reaction-chip.pop {
  animation: chat-reaction-pop 180ms cubic-bezier(0.2, 0, 0, 1);
}

.chat-reaction-chip:hover {
  background: var(--surface-chip-hover);
}

.chat-reaction-chip:active {
  transform: scale(0.94);
}

.chat-reaction-chip.mine {
  background: var(--call-accent-soft);
  border-color: var(--call-accent);
  color: var(--call-accent-text);
}

.chat-reaction-chip.mine:hover {
  background: var(--call-accent-soft-hover);
}

.chat-reaction-chip[aria-disabled="true"] {
  cursor: default;
}

.chat-reaction-emoji {
  font-size: 14px;
}

.chat-reaction-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Keyboard / touch entry point; mouse users get the bar on hover. */
.chat-react-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}

.chat-msg:hover .chat-react-trigger,
.chat-react-trigger:focus-visible {
  opacity: 1;
}

.chat-react-trigger:hover {
  color: var(--text-strong);
  background: var(--fg-a08);
}

@media (hover: none) {
  .chat-react-trigger {
    opacity: 0.7;
  }
}

.chat-react-bar {
  position: absolute;
  top: -34px;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-raised-hover);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 6px 18px var(--shadow-a45);
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  pointer-events: none;
  white-space: nowrap;
}

.chat-react-bar.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.chat-react-bar.below {
  top: auto;
  bottom: -30px;
  transform-origin: top right;
}

.chat-react-bar.align-left {
  right: auto;
  left: 0;
}

.chat-react-option,
.chat-react-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease-out, background-color 150ms ease-out;
}

.chat-react-more {
  color: var(--call-text-muted, #a8abaf);
}

.chat-react-option:hover {
  background: var(--call-surface-hover, #3c4043);
  transform: scale(1.18);
}

.chat-react-more:hover {
  background: var(--call-surface-hover, #3c4043);
  color: var(--text-strong);
}

.chat-reaction-chip:focus-visible,
.chat-react-option:focus-visible,
.chat-react-more:focus-visible,
.chat-react-trigger:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 1px;
}

@keyframes chat-reaction-pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-reaction-chip,
  .chat-react-bar,
  .chat-react-option {
    animation: none;
    transition: none;
  }
  .chat-react-option:hover {
    transform: none;
  }
}

.chat-input-area {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 12px 12px;
  margin-bottom: max(12px, env(safe-area-inset-bottom));
  padding: 4px 4px 4px 16px;
  border-radius: 999px;
  background: var(--call-card, #282a2c);
  border: 1px solid var(--call-border, #3c4043);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.chat-input-area:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--accent-a18);
}

.chat-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 8px 0;
  color: var(--call-text, #e3e3e3);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.chat-input::placeholder {
  color: var(--text-placeholder);
}

.chat-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--call-text-muted, #a8abaf);
  transition: color 150ms ease-out, background-color 150ms ease-out;
}

.chat-file-btn:hover,
.chat-file-btn.active {
  color: var(--text-strong);
  background: var(--fg-a08);
}

.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--call-accent);
  color: var(--call-accent-ink);
  cursor: pointer;
  transition: opacity 150ms ease-out, background-color 150ms ease-out, transform 150ms ease-out;
}

.chat-send-btn:not(:disabled):hover {
  background: var(--call-accent-hover);
}

.chat-send-btn:not(:disabled):active {
  transform: scale(0.94);
}

.chat-send-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Emoji grid for the chat input (opened by #btn-chat-emoji) */
.chat-emoji-grid {
  position: absolute;
  right: 12px;
  bottom: calc(68px + env(safe-area-inset-bottom));
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 12px 32px var(--shadow-a50);
  animation: call-pop-in 160ms cubic-bezier(0.2, 0, 0, 1);
}

.chat-emoji-option {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform 150ms ease-out, background-color 150ms ease-out;
}

.chat-emoji-option:hover {
  background: var(--call-menu-hover, #353739);
  transform: scale(1.15);
}

.chat-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--call-accent);
  color: var(--call-accent-ink);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.chat-badge.hidden {
  display: none;
}

/* Mobile: chat panel overlays full screen */
@media (max-width: 768px) {
  .chat-panel {
    position: absolute;
    inset: 0;
    width: 100% !important;
    z-index: 40;
  }

  .chat-panel.hidden {
    width: 0 !important;
  }
}

/* ============================================
   Enable-audio prompt (browser autoplay unblock)
   ============================================ */
.enable-audio-prompt {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: var(--call-accent);
  color: var(--call-accent-ink);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  box-shadow: 0 8px 24px var(--shadow-a35);
  cursor: pointer;
  animation: enable-audio-fade-in 180ms ease-out;
}
.enable-audio-prompt:hover { background: var(--accent-bright); }
.enable-audio-prompt:active { transform: translateX(-50%) scale(0.98); }
.enable-audio-prompt svg { flex: 0 0 auto; }

@keyframes enable-audio-fade-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================
   Raise Hand — badge on participant tile + toast
   ============================================ */
.raised-hand-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--call-accent);
  color: var(--call-accent-ink);
  box-shadow: 0 2px 6px var(--shadow-a35);
  animation: raised-hand-pop 220ms ease-out;
  z-index: 3;
}
.raised-hand-badge svg { display: block; }

@keyframes raised-hand-pop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.raise-hand-toast {
  position: fixed;
  /* Below the top bar, which now shows raised hands itself (hands-bar.js),
     and under the right-hand side panels. */
  top: 76px;
  right: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--inverse-toast);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  box-shadow: 0 8px 24px var(--shadow-a35);
  border: 1px solid var(--accent-a35);
  animation: raise-hand-toast-in 180ms ease-out;
}
.raise-hand-toast svg { color: var(--call-accent); flex: 0 0 auto; }
/* Mic / camera that would not open (app.js showDeviceNotice, onfiremobile-rpqmb): one line each. */
.raise-hand-toast.device-notice {
  flex-direction: column;
  align-items: flex-start;
  max-width: min(520px, calc(100vw - 40px));
  line-height: 1.4;
}
.raise-hand-toast.dismissing {
  animation: raise-hand-toast-out 200ms ease-in forwards;
}

@keyframes raise-hand-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes raise-hand-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

/* ============================================
   Poll panel (side drawer, sibling of chat-panel)
   ============================================ */
.poll-panel {
  width: 360px;
  display: flex;
  flex-direction: column;
  background: var(--call-panel, #1e1f20);
  border-left: 1px solid var(--call-panel-border, #2e3134);
  transition: width 0.2s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}

.poll-panel.hidden {
  width: 0;
  opacity: 0;
  border: none;
  pointer-events: none;
}

.poll-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 16px 12px 12px 24px;
  padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--divider);
}

.poll-panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--call-text, #e3e3e3);
}

.poll-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.poll-empty {
  color: var(--fg-a40);
  font-size: 13px;
  text-align: center;
  margin: 24px 0;
}

.poll-panel-footer {
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--divider);
}

.btn-create-poll {
  width: 100%;
  border-radius: 999px;
}

.poll-card {
  background: var(--call-card, #282a2c);
  border: 1px solid var(--fg-a05);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.poll-card:hover {
  background: var(--surface-raised-hover);
  box-shadow: 0 4px 16px var(--shadow-a25);
}

.poll-card.closed {
  opacity: 0.85;
}

.poll-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.poll-question {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.35;
  flex: 1;
  word-break: break-word;
}

.poll-close-btn {
  background: none;
  border: none;
  color: var(--fg-a45);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.poll-close-btn:hover {
  color: var(--text-strong);
  background: var(--fg-a06);
}

.poll-meta {
  font-size: 11px;
  color: var(--fg-a45);
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll-option-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--fg-a04);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-strong);
  transition: background 0.12s;
}

.poll-option-input:hover {
  background: var(--fg-a08);
}

.poll-option-input input {
  accent-color: var(--call-accent);
  margin: 0;
}

.poll-option-input.disabled {
  cursor: default;
  opacity: 0.7;
}

.poll-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.poll-vote-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: var(--call-accent);
  color: var(--call-accent-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.poll-vote-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.poll-status {
  font-size: 11px;
  color: var(--fg-a45);
  font-style: italic;
}

.poll-status.closed {
  color: var(--call-accent);
  font-style: normal;
  font-weight: 600;
}

.poll-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.poll-results-empty {
  font-size: 12px;
  color: var(--fg-a40);
  padding: 4px 0;
}

.poll-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poll-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-a85);
  gap: 8px;
}

.poll-bar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poll-bar-count {
  font-variant-numeric: tabular-nums;
  color: var(--fg-a60);
  font-size: 11px;
  flex-shrink: 0;
}

.poll-bar-track {
  height: 6px;
  background: var(--fg-a08);
  border-radius: 3px;
  overflow: hidden;
}

.poll-bar-fill {
  height: 100%;
  background: var(--call-accent);
  border-radius: 3px;
  transition: width 0.25s ease;
}

.poll-card-error {
  color: var(--error-text);
  font-size: 11px;
  margin: 0;
}

/* ============================================
   Create-poll modal (centered overlay)
   ============================================ */
.poll-create-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.poll-create-modal.hidden {
  display: none;
}

.poll-create-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.poll-create-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  background: var(--surface-sheet);
  border: 1px solid var(--fg-a08);
  border-radius: 16px;
  box-shadow: 0 20px 60px var(--shadow-a50);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: poll-modal-in 180ms ease-out;
}

@keyframes poll-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.poll-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--fg-a08);
}

.poll-create-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong);
}

.poll-create-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.poll-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-a60);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.poll-input {
  background: var(--fg-a06);
  border: 1px solid var(--fg-a08);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text-strong);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}

.poll-input:focus {
  border-color: var(--call-accent);
}

.poll-input::placeholder {
  color: var(--fg-a30);
}

.poll-type-group {
  display: flex;
  gap: 8px;
}

.poll-type-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--fg-a04);
  border: 1px solid var(--fg-a08);
  cursor: pointer;
  color: var(--text-strong);
  font-size: 13px;
}

.poll-type-option input {
  accent-color: var(--call-accent);
  margin: 0;
}

.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.poll-option-row .poll-input {
  flex: 1;
}

.poll-option-remove {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--fg-a06);
  color: var(--fg-a55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.poll-option-remove:hover {
  background: var(--error-a15);
  color: var(--error-text);
}

.poll-option-remove:disabled {
  opacity: 0.25;
  cursor: default;
}

.btn-add-option {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--fg-a15);
  color: var(--fg-a70);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.btn-add-option:hover {
  background: var(--fg-a04);
  color: var(--text-strong);
}

.btn-add-option:disabled {
  opacity: 0.35;
  cursor: default;
}

.poll-create-error {
  color: var(--error-text);
  font-size: 12px;
  margin: 0;
}

.poll-create-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--fg-a08);
}

/* Mobile: poll panel overlays full screen */
@media (max-width: 768px) {
  .poll-panel {
    position: absolute;
    inset: 0;
    width: 100% !important;
    z-index: 40;
  }

  .poll-panel.hidden {
    width: 0 !important;
  }
}

/* ============================================
   Breakouts UI
   ============================================ */

/* Host side sheet — slides in from the right like the chat/polls panels.
   Kept in the DOM while hidden (visibility, not display) so the slide can
   animate both ways; visibility flips after the exit transition. */
.breakout-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.breakout-panel.hidden {
  /* Beat the global `.hidden { display: none !important }` so the exit
     slide can play; visibility + pointer-events do the hiding instead. */
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 250ms;
}

.breakout-panel-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a45);
  opacity: 1;
  transition: opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.breakout-panel.hidden .breakout-panel-backdrop { opacity: 0; }

.breakout-panel-sheet {
  position: relative;
  background: var(--call-panel, #1e1f20);
  border-left: 1px solid var(--call-panel-border, #2e3134);
  width: min(400px, 100vw);
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px var(--shadow-a45);
  overflow: hidden;
  transform: translateX(0);
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.breakout-panel.hidden .breakout-panel-sheet { transform: translateX(100%); }

@media (prefers-reduced-motion: reduce) {
  .breakout-panel,
  .breakout-panel.hidden,
  .breakout-panel-backdrop,
  .breakout-panel-sheet {
    transition: none;
  }
}

.breakout-panel-header {
  min-height: 64px;
  padding: 16px 12px 12px 24px;
  padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--call-text, #e3e3e3);
}
.breakout-panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.breakout-panel-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text-strong);
}
.breakout-panel-body.hidden { display: none; }

.breakout-panel-footer {
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--fg-a08);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.breakout-panel-footer .hidden { display: none; }

.breakout-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.breakout-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-a70);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.breakout-input {
  background: var(--fg-a05);
  border: 1px solid var(--fg-a12);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-strong);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}
.breakout-input:focus { border-color: var(--call-accent); }
/* − / + around Number of rooms and Duration (onfiremobile-o8518): big round buttons. */
.breakout-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.breakout-stepper .breakout-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 12px;
  border-radius: 999px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.breakout-stepper .breakout-input::-webkit-outer-spin-button,
.breakout-stepper .breakout-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.breakout-step-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--accent-a40);
  background: var(--accent-a15);
  color: var(--text-strong);
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.breakout-step-btn:hover:not(:disabled) { background: var(--accent-a25); }
.breakout-step-btn:active:not(:disabled) { transform: scale(0.94); }
.breakout-step-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.breakout-step-btn:disabled { opacity: 0.4; cursor: default; }
textarea.breakout-input { resize: vertical; min-height: 56px; }

.breakout-help-text {
  color: var(--fg-a60);
  font-size: 12px;
  margin: 0 0 6px;
}

.breakout-manual-assign {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.breakout-manual-assign.hidden { display: none; }

.breakout-unassigned-row {
  min-height: 48px;
  padding: 8px;
  border: 1px dashed var(--fg-a18);
  border-radius: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--fg-a02);
}
.breakout-unassigned-row.drag-over {
  border-color: var(--call-accent);
  background: var(--accent-a08);
}

.breakout-rooms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.breakout-room-card {
  background: var(--fg-a04);
  border: 1px solid var(--fg-a08);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 72px;
  transition: border-color 0.12s, background 0.12s;
}
.breakout-room-card.drag-over {
  border-color: var(--call-accent);
  background: var(--accent-a08);
}
.breakout-room-card-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.breakout-room-card-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.breakout-participant-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;             /* a pill: radius = half the height */
  max-width: 100%;
  background: var(--accent-a14);
  border: 1px solid var(--accent-a35);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: var(--text-strong);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: none;           /* pointer drag on phones, not a page scroll */
  transition: background 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.breakout-participant-chip.dragging { opacity: 0.4; }
.breakout-participant-chip:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}
.breakout-participant-chip.selected {
  background: var(--call-accent);
  color: var(--call-accent-ink);
  border-color: var(--call-accent);
}
/* The host's own pill (onfiremobile-sk5tl.8): outlined, so it reads as "me". */
.breakout-participant-chip.is-self {
  background: transparent;
  border: 1.5px solid var(--call-accent);
  font-weight: 600;
}
.breakout-participant-chip.is-self.selected {
  background: var(--call-accent);
}
/* Active view: people already in a room (not movable from here). */
.breakout-participant-chip.is-static {
  cursor: default;
  touch-action: auto;
  background: var(--fg-a06);
  border-color: var(--fg-a12);
}
/* Sent just now, still in the main room: on the way. */
.breakout-participant-chip.is-pending {
  border-style: dashed;
  border-color: var(--accent-a45);
  background: var(--accent-a08);
  animation: breakout-pending 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes breakout-pending {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.breakout-participant-chip:disabled { opacity: 0.55; cursor: progress; }
@media (pointer: coarse) {
  .breakout-participant-chip { min-height: 36px; padding: 6px 14px; font-size: 14px; }
}
.breakout-chip-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  cursor: grabbing;
  box-shadow: 0 8px 20px var(--fg-a18);
}
.breakout-room-card.pick-target,
.breakout-unassigned-row.pick-target { border-style: dashed; border-color: var(--call-accent); cursor: pointer; }
.breakout-room-card-count { font-weight: 500; color: var(--fg-a60); font-size: 12px; }
.breakout-room-card-participants { min-height: 30px; gap: 6px; }
.breakout-unassigned-label {
  flex: 1 0 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-a60);
}
.breakout-self-hint { margin: -4px 0 0; }
.breakout-self-hint.hidden { display: none; }
.breakout-assign-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.breakout-assign-head .breakout-help-text { margin: 0; }
.breakout-shuffle-btn {
  flex: none;
  background: none;
  border: 0;
  padding: 4px 2px;
  color: var(--call-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.breakout-shuffle-btn.hidden { display: none; }

.breakout-create-error {
  color: var(--error-text-2);
  font-size: 13px;
  margin: 0;
}
.breakout-create-error.hidden { display: none; }

.breakout-timer-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 14px;
  background: var(--accent-a10);
  border: 1px solid var(--accent-a35);
  border-radius: 10px;
  color: var(--text-strong);
  font-size: 14px;
}
.breakout-timer-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.breakout-timer-banner strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--call-accent);
}
/* -5 / +5 min (onfiremobile-sk5tl.9): pill buttons beside the timer. */
.breakout-time-controls {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.breakout-time-controls.hidden { display: none; }
.breakout-time-btn {
  min-height: 44px;
  min-width: 96px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent-a40);
  background: var(--accent-a15);
  color: var(--text-strong);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.breakout-time-btn:hover:not(:disabled) { background: var(--accent-a25); }
.breakout-time-btn:active:not(:disabled) { transform: scale(0.96); }
.breakout-time-btn:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}
.breakout-time-btn:disabled { opacity: 0.45; cursor: default; }
@media (pointer: coarse) {
  .breakout-time-btn { min-height: 48px; padding: 10px 20px; }
}

/* "The host added 5 minutes": a line that fades in under the timer for ~8 s. Kept in the
   layout while empty (a live region must exist before its text changes). */
.breakout-time-note {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--call-accent-text);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.breakout-time-note.show { opacity: 1; transform: none; }
.breakout-timer-banner .breakout-time-note { flex: 1 0 100%; }
.breakout-timer-banner .breakout-time-note:empty { margin-top: -8px; }   /* no row gap while silent */
/* The timer flashes when the end moves. */
.breakout-timer-banner.time-changed,
.breakout-banner.time-changed,
.breakout-host-visit-banner.time-changed {
  animation: breakout-time-flash 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 2;
}
.time-changed .breakout-timer {
  border-radius: 999px;
  background: var(--accent-a22);
  box-shadow: 0 0 0 4px var(--accent-a22);
}
@keyframes breakout-time-flash {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-a45); }
  40% { box-shadow: 0 0 0 6px var(--accent-a30); }
}
@media (prefers-reduced-motion: reduce) {
  .breakout-timer-banner.time-changed,
  .breakout-banner.time-changed,
  .breakout-host-visit-banner.time-changed,
  .breakout-participant-chip.is-pending { animation: none; }
  .breakout-time-note,
  .breakout-participant-chip,
  .breakout-time-btn { transition: none; }
}

/* Active view: the people still in the main room, movable into a room. */
.breakout-main-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--fg-a18);
  border-radius: 10px;
  background: var(--fg-a02);
}
.breakout-main-row-head { display: flex; flex-direction: column; gap: 2px; }
.breakout-main-row-head .breakout-help-text { margin: 0; }
.breakout-main-row-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--fg-a70);
}

.breakout-active-rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.breakout-active-room {
  background: var(--fg-a04);
  border: 1px solid var(--fg-a08);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.breakout-active-room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.breakout-active-room-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.breakout-active-room-count {
  font-size: 11px;
  color: var(--fg-a55);
}
.breakout-active-room-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-a75);
  line-height: 1.4;
  min-height: 30px;
}
.breakout-active-room-empty { align-self: center; color: var(--fg-a55); }
.breakout-active-room {
  transition: border-color 0.12s, background 0.12s;
}
.breakout-active-room.pick-target { border-style: dashed; border-color: var(--call-accent); cursor: pointer; }
.breakout-active-room.drag-over {
  border-color: var(--call-accent);
  background: var(--accent-a08);
}
.breakout-active-room[data-bo-room]:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}
.breakout-active-room-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
}
.breakout-visit-btn {
  background: var(--accent-a15);
  border: 1px solid var(--accent-a40);
  color: var(--call-accent);
  border-radius: 999px;
  min-height: 32px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s;
}
.breakout-visit-btn:hover {
  background: var(--accent-a25);
}
.breakout-help-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ios-red);
  color: var(--on-fill);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.breakout-help-requests {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.breakout-help-request-card {
  background: var(--ios-red-a08);
  border: 1px solid var(--ios-red-a40);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-strong);
  font-size: 13px;
}
.breakout-help-request-actions {
  display: flex;
  gap: 6px;
}
.breakout-help-request-actions button {
  background: var(--fg-a08);
  border: 1px solid var(--fg-a15);
  color: var(--text-strong);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.breakout-help-request-actions button:hover {
  background: var(--fg-a14);
}

.breakout-broadcast-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.breakout-broadcast-btn {
  align-self: flex-end;
  padding: 6px 12px;
  font-size: 13px;
}

/* In-breakout banner (participant view, inside the call container) */
.breakout-banner {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--inverse-banner);
  border: 1px solid var(--accent-a45);
  border-radius: 999px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-strong);
  font-size: 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px var(--shadow-a35);
}
.breakout-banner.hidden { display: none; }
.breakout-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.breakout-banner-left svg { color: var(--call-accent); }
.breakout-banner-sep {
  color: var(--fg-a35);
}
.breakout-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--call-accent);
}
.breakout-banner-right {
  display: flex;
  gap: 6px;
}
.breakout-banner-btn {
  background: var(--fg-a08);
  border: 1px solid var(--fg-a15);
  color: var(--text-strong);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s;
}
.breakout-banner-btn:hover {
  background: var(--fg-a15);
}
.breakout-help-btn.requested {
  background: var(--green-a20);
  border-color: var(--green-a50);
  color: var(--green-text);
}
.breakout-leave-btn {
  background: var(--ios-red-a15);
  border-color: var(--ios-red-a40);
  color: var(--ios-red-text);
}
.breakout-leave-btn:hover {
  background: var(--ios-red-a25);
}

/* Phones: the participant's banner becomes a card under the header (like the visiting
   host's below): label row over a button row, nothing wraps mid-word. */
#breakout-banner-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .breakout-banner {
    left: 16px;
    right: 16px;
    transform: none;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 10px;
    border-radius: 18px;
    padding: 10px 12px;
  }
  .breakout-banner .breakout-banner-left { min-width: 0; }
  .breakout-banner .breakout-banner-right { flex: 1 1 100%; }
  .breakout-banner .breakout-banner-btn { flex: 1 1 0; min-height: 40px; }
}

/* "The host added 5 minutes" under the participant's / visiting host's banner. */
.breakout-banner .breakout-time-note,
.breakout-host-visit-banner .breakout-time-note {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -3px);
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--inverse-banner);
  border: 1px solid var(--accent-a45);
  box-shadow: 0 6px 20px var(--shadow-a35);
  white-space: normal;
  text-align: center;
  pointer-events: none;
}
.breakout-banner .breakout-time-note.show,
.breakout-host-visit-banner .breakout-time-note.show { transform: translate(-50%, 0); }

/* Host supervisor banner (a host / co-host visiting a breakout room). Same spot as
   the participant banner: a visiting host never gets that one. */
.breakout-host-visit-banner {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--inverse-banner);
  border: 1px solid var(--accent-a45);
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-strong);
  font-size: 13px;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px var(--shadow-a35);
}
.breakout-host-visit-banner.hidden { display: none; }
.breakout-host-visit-banner svg { color: var(--call-accent); flex: none; }
.breakout-visit-kicker { color: var(--fg-a85); }
.breakout-visit-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.breakout-host-visit-banner .breakout-banner-btn { min-height: 34px; padding: 6px 14px; font-size: 13px; }
.breakout-return-btn {
  background: var(--call-accent);
  border-color: var(--call-accent);
  color: var(--on-fill);
}
.breakout-return-btn:hover { background: var(--call-accent); filter: brightness(1.08); }
/* Phones: a full-width card under the header, label row over a button row. */
@media (max-width: 600px) {
  .breakout-host-visit-banner {
    left: 16px;
    right: 16px;
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 10px;
    border-radius: 18px;
    padding: 10px 12px;
  }
  .breakout-host-visit-banner .breakout-banner-left { min-width: 0; }
  .breakout-host-visit-banner .breakout-banner-right { flex: 1 1 100%; }
  .breakout-host-visit-banner .breakout-banner-btn { flex: 1 1 0; min-height: 40px; }
}
/* Sideways phones: short screen, the bar is on the side; just under the header row. */
@media (max-height: 500px) and (orientation: landscape) {
  .breakout-host-visit-banner { top: calc(52px + env(safe-area-inset-top)); }
}
.breakout-visiting-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--accent-a45);
  background: var(--fg-a08);
  font-size: 13px;
  color: var(--text-strong);
}
.breakout-active-room.is-here { border-color: var(--accent-a45); }
.breakout-visit-btn.is-here,
.breakout-visit-btn:disabled { opacity: 0.6; cursor: default; }

/* Pre-switch takeover overlay */
.breakout-assign-overlay {
  position: fixed;
  inset: 0;
  /* Deep orange so the white copy clears 4.5:1 (#c2410c = 5.2:1). */
  background: linear-gradient(160deg, var(--takeover-from), var(--takeover-to));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-fill);
  animation: breakout-assign-fade 180ms ease-out;
}
.breakout-assign-overlay.hidden { display: none; }

@keyframes breakout-assign-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.breakout-assign-card {
  text-align: center;
  padding: 24px;
  max-width: 360px;
}
.breakout-assign-icon {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--on-fill);
}
.breakout-assign-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
}
.breakout-assign-card p {
  margin: 4px 0;
  font-size: 15px;
  opacity: 0.95;
}
.breakout-assign-countdown {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 18px !important;
}
.breakout-assign-card .btn {
  background: var(--on-fill-a18);
  border: 1px solid var(--on-fill-a35);
  color: var(--on-fill);
}

/* Broadcast toast (re-uses raise-hand-toast visual language, different color accent) */
.breakout-broadcast-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--inverse-banner-2);
  border: 1px solid var(--accent-a45);
  color: var(--text-strong);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  z-index: 60;
  max-width: 80vw;
  box-shadow: 0 6px 22px var(--shadow-a45);
  animation: raise-hand-toast-in 180ms ease-out;
}
.breakout-broadcast-toast.dismissing {
  animation: raise-hand-toast-out 200ms ease-in forwards;
}
.breakout-broadcast-toast strong {
  color: var(--call-accent);
  margin-right: 6px;
}

/* Mobile: side sheet goes full width, matching chat/polls at this breakpoint */
@media (max-width: 768px) {
  .breakout-panel-sheet {
    width: 100vw;
    border-left: none;
    box-shadow: none;
  }
  .breakout-banner {
    top: calc(60px + env(safe-area-inset-top));
    font-size: 12px;
    padding: 6px 10px;
    gap: 8px;
  }
  .breakout-banner-right {
    flex-direction: row;
  }
}


/* ============================================
   Enable-audio prompt + raise-hand toast
   ============================================ */
.enable-audio-prompt {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px;
  border: none; border-radius: 999px; background: var(--call-accent); color: var(--call-accent-ink);
  font-size: 15px; font-weight: 600; font-family: inherit;
  box-shadow: 0 8px 24px var(--shadow-a35); cursor: pointer;
  animation: enable-audio-fade-in 180ms ease-out;
}
.enable-audio-prompt:hover { background: var(--accent-bright); }
.enable-audio-prompt:active { transform: translateX(-50%) scale(0.98); }
@keyframes enable-audio-fade-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.raise-hand-toast {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  padding: 10px 16px; background: var(--inverse-toast-3); color: var(--text-strong);
  border: 1px solid var(--accent-a40); border-radius: 12px;
  font-size: 14px; box-shadow: 0 6px 20px var(--shadow-a30);
  animation: enable-audio-fade-in 180ms ease-out;
}
#btn-raise-hand.active { background: var(--call-accent); color: var(--call-accent-ink); }
#btn-raise-hand.active:hover { background: var(--call-accent-hover); }

/* ============================================
   Waiting room (ported from caf943e0)
   ============================================ */

.waiting-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.waiting-header {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}

.waiting-card {
  text-align: center;
  max-width: 400px;
}

.waiting-card h2 {
  color: var(--text-strong);
  font-size: 24px;
  font-weight: 700;
  margin: 24px 0 8px;
}

.waiting-subtitle {
  color: var(--fg-a50);
  font-size: 16px;
  margin-bottom: 8px;
}

.waiting-name {
  color: var(--fg-a70);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 32px;
}

.waiting-animation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.waiting-pulse {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--accent-a15);
  animation: waitingPulse 2s ease-in-out infinite;
}

.waiting-icon {
  position: relative;
  color: var(--color-primary, #FF6B1F);
}

@keyframes waitingPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.3); opacity: 0.1; }
}

.btn-cancel-wait {
  min-width: 120px;
}

/* ============================================
   Breakout help-block (ported from fd1651f3)
   ============================================ */

.breakout-help-block {
  padding: 10px 12px;
  background: var(--accent-a15);
  border: 1px solid var(--accent-a40);
  border-radius: 10px;
  margin-bottom: 12px;
}

.breakout-help-block.hidden { display: none; }

.breakout-help-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--call-accent);
  margin-bottom: 6px;
}

.breakout-help-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-strong);
}

.breakout-help-actions {
  display: flex;
  gap: 6px;
}

/* ============================================
   Lobby: scrollable join screen, booking card, host sign-in
   (bead onfiremobile-eml5t)
   ============================================ */

/* The lobby can outgrow short / mobile viewports once the booking card is
   shown. Scroll instead of clipping; auto margins keep it centred when it fits. */
#screen-join {
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#screen-join .join-container {
  margin: auto 0;
}

.join-container.has-booking {
  max-width: 880px;
}

.join-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.join-layout .join-card {
  min-width: 0;
}

/* Phones: the booking card first, so a guest sees what they are joining. */
.booking-card {
  order: -1;
  width: 100%;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fadeIn 0.4s ease;
}

@media (min-width: 860px) {
  .join-container.has-booking .join-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .join-container.has-booking .join-card {
    flex: 1 1 440px;
  }

  .booking-card {
    order: 0;
    flex: 0 0 340px;
    padding: 28px 24px;
  }
}

.booking-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--pre-accent-text);
}

.booking-service-name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  margin-top: -8px;
  overflow-wrap: anywhere;
}

.booking-status {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--bg-input);
  color: var(--text-secondary);
}

.booking-status:empty {
  display: none;
}

.booking-status.is-soon {
  background: var(--pre-accent-a18);
  color: var(--pre-accent-text-soft);
}

.booking-status.is-live {
  background: var(--green-a18);
  color: var(--pre-success-text);
}

.booking-status.is-cancelled {
  background: var(--ios-red-a18);
  color: var(--pre-danger-text);
}

.booking-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.booking-row .avatar-small {
  width: 36px;
  height: 36px;
  overflow: hidden;
}

.booking-row .avatar-small img,
.account-row .avatar-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booking-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-secondary);
}

.booking-primary {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.booking-secondary {
  font-size: 14px;
  color: var(--text-secondary);
}

.booking-tertiary {
  font-size: 13px;
  color: var(--text-tertiary);
}

.booking-customer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.booking-customer .booking-eyebrow {
  margin-bottom: 4px;
}

.booking-link {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.booking-notes {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-input);
  font-size: 14px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Signed-in account row ---- */
.account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: -8px 0 20px;
  border-radius: 9999px;
  background: var(--bg-input);
}

.account-row .avatar-small {
  width: 32px;
  height: 32px;
  overflow: hidden;
}

.account-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.account-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-role {
  font-size: 12px;
  color: var(--text-secondary);
}

.account-role.is-host {
  color: var(--pre-accent-text-soft);
}

.link-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--pre-accent-text);
  cursor: pointer;
  border-radius: 9999px;
}

.link-btn:hover {
  color: var(--pre-accent-text-strong);
  text-decoration: underline;
}

.link-btn:focus-visible,
.signin-tab:focus-visible {
  outline: 2px solid var(--pre-accent);
  outline-offset: 2px;
}

.host-signin-prompt {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ---- Sign-in modal ---- */
.signin-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.signin-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.signin-sheet {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--pre-sheet);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-elevated);
  animation: slideUp 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.signin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.signin-header h3 {
  font-size: 18px;
  font-weight: 600;
}

.signin-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 9999px;
  background: var(--bg-input);
  margin-bottom: 18px;
}

.signin-tab {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.signin-tab.active {
  background: var(--pre-accent-a20);
  color: var(--text-strong);
}

.signin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signin-lead {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.5;
}

.signin-hint {
  font-size: 13px;
  color: var(--text-tertiary);
}

.signin-code-input {
  font-size: 24px;
  letter-spacing: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.signin-submit {
  width: 100%;
  margin-top: 6px;
}

.signin-back {
  align-self: center;
}

/* Sign in or sign up (onfiremobile-sk5tl.1 / .7): one line on what continuing does. */
.signin-intro {
  margin: -8px 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* The texted code: "Resend code in 20 s" and "Use a different number" side by side. */
.signin-sms-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  margin-top: 2px;
}
.signin-resend {
  font-variant-numeric: tabular-nums;
}
.signin-resend:disabled {
  color: var(--text-tertiary);
  cursor: default;
  text-decoration: none;
}
#signin-sms-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.signin-error {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ios-red-a12);
  color: var(--pre-danger-text);
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .booking-card,
  .signin-sheet {
    animation: none;
  }
}

/* ---- Lobby with a booking: the right column introduces the host, so the
   join card is only about the visitor (bead onfiremobile-o54l9) ---- */
.join-container.has-booking .creator-info {
  display: none;
}

.join-container.has-booking .account-row {
  margin-top: 0;
}

/* ---- QR sign-in (bead onfiremobile-o54l9) ---- */
.signin-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.signin-qr-frame {
  width: 244px;
  height: 244px;
  padding: 12px;
  border-radius: 20px;
  background: var(--qr-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.signin-qr-frame canvas {
  width: 220px;
  height: 220px;
  transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.signin-qr-frame.is-stale canvas {
  opacity: 0.15;
}

.signin-qr-status {
  font-size: 14px;
  color: var(--text-primary);
  text-align: center;
  min-height: 20px;
}

.signin-qr-hint {
  text-align: center;
}

/* ------------------------------------------------------------------
   Phone controls (onfiremobile-yzyv9): raise hand stays in the bar and
   hang-up asks first (#leave-menu). Android gets full screen in the bar
   (#btn-fullscreen, shown by app.js). The microphone and camera keep
   their own buttons at every width (owner 2026-10-25, onfiremobile-he9ct);
   devices.css gives the camera a slim chevron on phones for Backgrounds
   and effects and Cameras.
   ------------------------------------------------------------------ */
.leave-menu {
  width: 248px;
}

.leave-menu .more-menu-item.leave-menu-danger,
.leave-menu .more-menu-item.leave-menu-danger .more-menu-label {
  color: var(--danger-text, #ff6b6b);
  font-weight: 600;
}

@media (max-width: 599px) {
  #screen-call .call-controls #btn-raise-hand {
    display: flex;
  }

  #screen-call .more-menu [data-proxy="btn-raise-hand"] {
    display: none;
  }

  /* Seven buttons (eight on Android) on a 360-390 px phone. */
  #screen-call .call-controls {
    gap: 4px;
  }
}

/* Up to nine buttons (host on Android: breakouts + full screen) on 360-420 px. */
@media (max-width: 420px) {
  #screen-call .call-controls {
    gap: 2px;
    padding: 0 6px;
  }

  #screen-call .call-controls .control-btn {
    width: 36px;
  }

  #screen-call .call-controls .control-btn-hangup {
    width: 48px;
    margin-left: 2px;
  }
}

/* "Full screen" on presented content on Android (window.OnFireContentFs in app.js): the content
   covers the page, the browser is full screen, and the meeting controls stay on top of it, with
   room left for them (a bottom bar in portrait, the left column on a sideways phone). */
#screen-call .content-fs-cover {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  border: 0;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    calc(84px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  background: var(--media-black, #000);
}
@media (orientation: landscape) and (max-height: 539.98px) {
  #screen-call .content-fs-cover {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
      calc(var(--call-rail-w, 56px) + var(--call-rail-gap, 8px) * 2 + env(safe-area-inset-left));
  }
}
html.content-fs-on #screen-call .call-controls-wrap { visibility: visible; z-index: 2147483001; }
html.content-fs-on #screen-call .participants-grid,
html.content-fs-on #screen-call .screen-share-container,
html.content-fs-on #screen-call .call-header { visibility: hidden; }
/* Nothing above the cover may become its containing block (same as .is-page-fs, stage-kinds.css). */
#screen-call .call-layout > .stage-panel:has(.content-fs-cover) {
  z-index: 2147483000;
  transform: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  contain: none;
  will-change: auto;
  animation: none;
}
#screen-call .stage-panel:has(.content-fs-cover) .stage-body,
#screen-call .stage-panel:has(.content-fs-cover) .stage-kind-box,
#screen-call .stage-panel:has(.content-fs-cover) .stage-main-slot {
  transform: none;
  filter: none;
  backdrop-filter: none;
  contain: none;
  will-change: auto;
  animation: none;
}

/* Android full screen (html.android-fs, app.js syncAndroidFs): the system navigation /
   gesture bar and notifications slide in over the bottom edge without being reported as a
   safe area, so the meeting controls sit higher, clear of them. Sideways phones keep the
   left control column. */
@media (orientation: portrait), (min-height: 540px) {
  html.android-fs #screen-call .call-controls-wrap { bottom: calc(52px + env(safe-area-inset-bottom)); }
  html.android-fs #screen-call .call-main { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  html.android-fs #screen-call .content-fs-cover { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
}

/* Android keyboard, browsers that do not resize the page for it (app.js setupKeyboardInset):
   the chat sheet ends where the keyboard begins, so the message box stays visible. */
@media (max-width: 768px) {
  html.kb-open #screen-call .chat-panel { bottom: var(--kb-inset, 0px); }
}

/* A control whose feature does not exist on the route this call is running on
   (onfiremobile-jb0oo.5). It stays VISIBLE and says why — removing it would
   leave a user hunting for a button they have used before — but it cannot be
   pressed and it cannot look pressable. The accessible name carries the reason
   too (app.js setControlRouteState), because a tooltip reaches neither a screen
   reader nor a touch user. */
.control-btn.route-unavailable,
.more-menu-item.route-unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto; /* keep the tooltip reachable on hover */
}

.control-btn.route-unavailable:hover,
.more-menu-item.route-unavailable:hover,
.control-btn.route-unavailable:active {
  background: inherit;
  transform: none;
}

/* ===== /timer.css ===== */
/* timer.css — shared meeting countdown (see timer.js). All classes are
   prefixed `oft-` so they can't collide with style.css. */

/* ---------- Entry: the call-duration pill (onfiremobile-847hl.6) ----------
   timer.js turns .call-timer-pill into a button for whoever may set a timer
   (and for everyone while one runs). The "+ hourglass" hint shows only when
   tapping it adds a timer. The countdown hangs under it. */
.call-timer-pill { position: relative; }
.call-timer-pill.oft-entry {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out);
}
.call-timer-pill.oft-entry:hover { background: var(--call-surface-hover, #3c4043); }
.call-timer-pill.oft-entry:active { background: var(--call-card-hover, #333538); }
.call-timer-pill.oft-entry:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.call-timer-pill.oft-entry[aria-expanded="true"] { border-color: var(--call-accent, #FF6B1F); }
.call-timer-pill.oft-has-countdown { z-index: 12; }
.oft-entry-hint {
  display: none;
  align-items: center;
  gap: 1px;
  margin-left: 2px;
  padding-left: 7px;
  border-left: 1px solid var(--call-border, #3c4043);
  color: var(--call-accent, #FF6B1F);
  font-weight: 700;
  line-height: 1;
}
.oft-entry-hint::before { content: '+'; font-size: 13px; }
.call-timer-pill.oft-entry-add .oft-entry-hint { display: inline-flex; }

/* ---------- Top-bar countdown pill ---------- */
.oft-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--call-surface, #202124);
  border: 1px solid var(--call-border, #3c4043);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  animation: oft-pop 180ms var(--call-ease, ease-out);
  transition: background-color 180ms var(--call-ease, ease-out),
              border-color 180ms var(--call-ease, ease-out),
              color 180ms var(--call-ease, ease-out);
}
.oft-pill.hidden { display: none; }
.oft-pill svg { color: var(--call-accent, #FF6B1F); flex-shrink: 0; }
.oft-pill:hover { background: var(--call-surface-hover, #3c4043); }
.oft-pill:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.oft-pill-text { min-width: 3ch; text-align: right; }

/* Under the duration: centred below it, floating over the top of the stage. */
.oft-pill.oft-pill-under {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  translate: -50% 0;
  height: 24px;
  padding: 0 10px;
  gap: 5px;
  white-space: nowrap;
  box-shadow: 0 6px 16px var(--shadow-a40);
}
.oft-pill.oft-pill-under:focus-visible { outline: none; }
/* While it shows, the header keeps room for it so it never covers the first row
   of tiles (QA cb-qa2: it hung 4-24 px over them). It ends 30 px (6 + 24) under
   the duration, 17 px past the header's 8 px bottom padding; the taller header
   also re-centres the row by 2 px: 17 + 2 + 4 px of air = 23 px more room.
   --oft-countdown-room is the one source of that number: stage.css adds it to
   the phone strip's top (--stage-strip-top) so the Stage sheet moves down too.
   Checked by tests/scripts/cb-ui-shots.cjs (timer flow at 390 / 900 / 1280 and
   the phone Stage layout, dark + light). */
#screen-call:has(.call-timer-pill.oft-has-countdown) { --oft-countdown-room: 23px; }
.call-header { transition: padding-bottom 180ms var(--call-ease, ease-out); }
.call-header:has(.call-timer-pill.oft-has-countdown) { padding-bottom: calc(8px + var(--oft-countdown-room, 23px)); }
@media (prefers-reduced-motion: reduce) {
  .call-header { transition: none; }
}
/* It floats over video: the warn / critical tints sit on an opaque surface. */
.oft-pill.oft-pill-under.is-warn { background: linear-gradient(var(--warning-a14), var(--warning-a14)) var(--call-surface, #202124); }
.oft-pill.oft-pill-under.is-crit { background: linear-gradient(var(--danger-a20), var(--danger-a20)) var(--call-surface, #202124); }

.oft-pill.is-paused { color: var(--call-text-muted, #a8abaf); }
.oft-pill.is-paused svg { color: var(--call-text-muted, #a8abaf); }

.oft-pill.is-warn {
  background: var(--warning-a14);
  border-color: var(--warning-a55);
  color: var(--warning-text);
}
.oft-pill.is-warn svg { color: var(--warning-text); }

.oft-pill.is-crit {
  background: var(--danger-a20);
  border-color: var(--danger-text-a70);
  color: var(--danger-text);
  animation: oft-pulse 1s ease-in-out infinite;
}
.oft-pill.is-crit svg { color: var(--danger-text); }

@keyframes oft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pulse-danger-a45); }
  50%      { box-shadow: 0 0 0 5px var(--pulse-danger-a00); }
}
@keyframes oft-drop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes oft-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Sheet: drops down from the duration pill ----------
   timer.js sets --oft-top (below the duration / countdown) and --oft-right
   (lined up with the pill's right edge) each time it opens. */
.oft-sheet {
  position: fixed;
  top: var(--oft-top, 64px);
  right: var(--oft-right, 16px);
  z-index: 60;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - var(--oft-top, 64px) - 16px);
  max-height: calc(100dvh - var(--oft-top, 64px) - 16px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 16px 40px var(--shadow-a55);
  color: var(--text-hi);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  animation: oft-drop 180ms var(--call-ease, ease-out);
  transform-origin: top right;
}
.oft-sheet.hidden { display: none; }
.oft-sheet .hidden { display: none !important; }

.oft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -4px -4px 12px 0;
}
.oft-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-strong);
}
.oft-note {
  margin: 0 0 12px;
  color: var(--call-text-muted, #a8abaf);
  font-size: 13px;
}

.oft-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}
.oft-icon-btn:hover { background: var(--fg-a08); color: var(--text-strong); }

/* Preset chips */
.oft-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.oft-chip {
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--call-border, #3c4043);
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}
.oft-chip:hover { background: var(--call-menu-hover, #353739); }
.oft-chip.active {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  border-color: var(--call-accent, #FF6B1F);
  color: var(--call-accent-text, #ffb38a);
}

/* mm:ss stepper */
.oft-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 999px;
  background: var(--call-surface, #202124);
  border: 1px solid var(--call-border, #3c4043);
}
.oft-fields {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-strong);
}
.oft-num {
  width: 3.2ch;
  padding: 4px 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.oft-num:focus { outline: none; background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); }
.oft-colon { font-size: 22px; font-weight: 500; color: var(--call-text-muted, #a8abaf); }

/* Pill buttons */
.oft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out), opacity 150ms var(--call-ease, ease-out);
}
.oft-btn:disabled { opacity: 0.4; cursor: default; }
.oft-btn-wide { width: 100%; }
.oft-btn-primary { background: var(--call-accent, #FF6B1F); color: var(--call-accent-ink, #1a1a1a); }
.oft-btn-primary:not(:disabled):hover { background: var(--call-accent-hover, #ff7f3d); }
.oft-btn-primary:not(:disabled):active { background: var(--call-accent-pressed, #e85a10); }
.oft-btn-tonal { background: var(--call-surface-hover, #3c4043); color: var(--text-hi); }
.oft-btn-tonal:hover { background: var(--surface-tonal-hover); }
.oft-btn-danger { background: transparent; border-color: var(--danger-text-a60); color: var(--danger-text); }
.oft-btn-danger:hover { background: var(--danger-a14); }
.oft-btn-text { height: 32px; padding: 0 12px; background: transparent; color: var(--call-accent-text, #ffb38a); }
.oft-btn-text:hover { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); }
.oft-btn:focus-visible,
.oft-chip:focus-visible,
.oft-icon-btn:focus-visible,
.oft-switch:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

/* Running view */
.oft-live { text-align: center; margin-bottom: 16px; }
.oft-live-time {
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.oft-live-time.is-paused { color: var(--call-text-muted, #a8abaf); }
.oft-live-time.is-empty { font-size: 16px; color: var(--call-text-muted, #a8abaf); padding: 8px 0; }
.oft-live-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--call-text-muted, #a8abaf);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oft-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.oft-actions .oft-btn { flex: 1 1 0; padding: 0 12px; }

/* Sound switch */
.oft-sound {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--call-border, #3c4043);
  color: var(--call-text, #e3e3e3);
  font-size: 13px;
  cursor: pointer;
}
.oft-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--switch-off);
  cursor: pointer;
  transition: background-color 180ms var(--call-ease, ease-out);
}
.oft-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--switch-knob-soft);
  transition: transform 180ms var(--call-ease, ease-out);
}
.oft-switch.on { background: var(--call-accent, #FF6B1F); }
.oft-switch.on .oft-switch-knob { transform: translateX(16px); background: var(--call-accent-ink, #1a1a1a); }

/* ---------- "Time's up" banner ---------- */
.oft-banner {
  position: fixed;
  top: 64px;
  left: 50%;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--call-surface-hover, #3c4043);
  border: 1px solid var(--danger-text-a60);
  box-shadow: 0 12px 32px var(--shadow-a50);
  color: var(--text-strong);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  transform: translateX(-50%);
  animation: oft-banner-in 200ms var(--call-ease, ease-out);
}
.oft-banner.hidden { display: none; }
.oft-banner svg { color: var(--danger-text); flex-shrink: 0; }
.oft-banner-text { white-space: nowrap; }
@keyframes oft-banner-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Phones ---------- */
@media (max-width: 599px) {
  .oft-sheet {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    transform-origin: top center;
  }
  .oft-pill { padding: 0 10px; }
  .oft-entry-hint { padding-left: 6px; }
}

/* Narrow phones: the hint replaces the clock icon, so the meeting code keeps its room. */
@media (max-width: 480px) {
  .call-timer-pill.oft-entry-add { gap: 4px; padding: 0 10px; }
  .call-timer-pill.oft-entry-add > svg:first-child { display: none; }
  .call-timer-pill.oft-entry-add .oft-entry-hint { margin-left: 0; padding-left: 0; border-left: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oft-pill,
  .oft-pill.is-crit,
  .oft-sheet,
  .oft-banner { animation: none; }
  .oft-pill.is-crit { box-shadow: 0 0 0 2px var(--pulse-danger-a45); }
  .oft-pill, .oft-chip, .oft-btn, .oft-switch, .oft-switch-knob, .oft-icon-btn,
  .call-timer-pill.oft-entry { transition: none; }
}

/* ===== /feedback.css ===== */
/* feedback.css — Report a problem / Suggest an idea / Report abuse
   (feedback.js). Dark, Meet-like; reuses the call screen tokens from
   style.css with fallbacks so the file also works standalone. */

.fb-layer {
  --fb-panel: var(--call-panel, #1e1f20);
  --fb-input: var(--call-card, #282a2c);
  --fb-input-hover: var(--call-card-hover, #333538);
  --fb-border: var(--call-border, #3c4043);
  --fb-text: var(--call-text, #e3e3e3);
  --fb-muted: var(--call-text-muted, #a8abaf);
  --fb-focus: var(--call-focus, #ff7f3d);
  --fb-primary: var(--call-accent, #FF6B1F);
  --fb-primary-hover: var(--call-accent-hover, #ff7f3d);
  --fb-on-primary: var(--call-accent-ink, #1a1a1a);
  --fb-primary-text: var(--call-accent-text, #ffb38a);
  --fb-primary-soft: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  --fb-primary-soft-hover: rgba(255, 107, 31, 0.1);
  --fb-danger: #f28b82;
  --fb-ease: var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
  position: fixed;
  inset: 0;
  z-index: 1100;
  color: var(--fb-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.fb-layer.hidden,
.fb-layer .hidden {
  display: none !important;
}

/* Hidden while a screenshot frame is grabbed, so it shows the call. */
html.fb-capturing .fb-layer {
  visibility: hidden !important;
}

.fb-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-a32);
  animation: fb-fade 180ms var(--fb-ease, ease-out);
}

.fb-scrim-dim {
  background: var(--scrim-a60);
}

/* ---------- Side sheet ---------- */
.fb-sheet {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: 420px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  background: var(--fb-panel);
  border-radius: 16px;
  box-shadow: 0 24px 48px var(--shadow-a50);
  outline: none;
  overflow: hidden;
  animation: fb-slide-in 200ms var(--fb-ease, ease-out);
}

.fb-header {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 64px;
  padding: 8px 8px 8px 12px;
  flex-shrink: 0;
}

.fb-title {
  flex: 1;
  margin: 0 0 0 4px;
  font-size: 18px;
  font-weight: 500;
  color: var(--fb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb-icon-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--fb-muted);
  cursor: pointer;
  transition: background-color 150ms var(--fb-ease), color 150ms var(--fb-ease);
}

.fb-icon-btn:hover {
  background: var(--fg-e8-a08);
  color: var(--fb-text);
}

.fb-back.fb-hidden-keep {
  visibility: hidden;
}

.fb-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 24px 24px;
}

/* ---------- Chooser ---------- */
.fb-choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.fb-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--fb-border);
  border-radius: 12px;
  background: transparent;
  color: var(--fb-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms var(--fb-ease), border-color 150ms var(--fb-ease);
}

.fb-choice:hover {
  background: var(--fb-input);
}

.fb-choice > svg {
  color: var(--fb-muted);
  flex-shrink: 0;
}

.fb-choice-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fb-primary-soft);
  color: var(--fb-primary-text);
}

.fb-choice-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fb-choice-title {
  font-size: 15px;
  font-weight: 500;
}

.fb-choice-sub {
  color: var(--fb-muted);
  font-size: 13px;
}

/* ---------- Forms ---------- */
.fb-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fb-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.fb-label {
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--fb-text);
}

.fb-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--fb-border);
  border-radius: 12px;
  background: var(--fb-input);
  color: var(--fb-text);
  font: inherit;
  font-size: 14px;
  transition: border-color 150ms var(--fb-ease), box-shadow 150ms var(--fb-ease), background-color 150ms var(--fb-ease);
}

.fb-input::placeholder {
  color: var(--text-placeholder);
}

.fb-input:hover {
  background: var(--fb-input-hover);
}

.fb-input:focus {
  outline: none;
  border-color: var(--fb-focus);
  box-shadow: 0 0 0 1px var(--fb-focus);
}

.fb-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c4c7c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.fb-select:invalid {
  color: var(--text-dim);
}

.fb-select option {
  background: var(--fb-input);
  color: var(--fb-text);
}

.fb-textarea {
  min-height: 120px;
  resize: vertical;
}

.fb-hint {
  margin: 0;
  font-size: 12px;
  color: var(--fb-muted);
}

.fb-error {
  margin: 0;
  font-size: 12px;
  color: var(--fb-danger);
}

.fb-invalid .fb-input {
  border-color: var(--fb-danger);
}

.fb-invalid .fb-input:focus {
  box-shadow: 0 0 0 1px var(--fb-danger);
}

.fb-counter {
  align-self: flex-end;
  margin: -2px 0 0;
  font-size: 12px;
  color: var(--fb-muted);
  font-variant-numeric: tabular-nums;
}

.fb-counter-full {
  color: var(--fb-danger);
}

.fb-intro {
  margin: 0;
  color: var(--fb-muted);
}

.fb-child-note {
  color: var(--warning-text);
}

/* Screenshot */
.fb-shot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fb-shot-text {
  margin: 0;
  color: var(--fb-muted);
}

.fb-shot-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fb-thumb {
  position: relative;
  width: 160px;
  border: 1px solid var(--fb-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--media-black);
  animation: fb-fade 180ms var(--fb-ease, ease-out);
}

.fb-thumb-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: contain;
}

.fb-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--media-button);
  color: var(--text-hi);
  cursor: pointer;
  transition: background-color 150ms var(--fb-ease);
}

.fb-thumb-remove:hover {
  background: var(--media-button-hover);
}

/* Checkbox */
.fb-consent {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fb-check,
.fb-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.fb-check input,
.fb-person input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
}

.fb-check-box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid var(--border-control);
  border-radius: 3px;
  transition: background-color 150ms var(--fb-ease), border-color 150ms var(--fb-ease);
}

.fb-check input:checked + .fb-check-box,
.fb-person input:checked + .fb-check-box {
  border-color: var(--fb-primary);
  background: var(--fb-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.fb-check input:focus-visible + .fb-check-box,
.fb-person input:focus-visible + .fb-check-box {
  outline: 2px solid var(--fb-focus);
  outline-offset: 2px;
}

.fb-check-text {
  color: var(--fb-text);
}

/* Participants */
.fb-people-list {
  display: flex;
  flex-direction: column;
  max-height: 232px;
  overflow-y: auto;
  border: 1px solid var(--fb-border);
  border-radius: 12px;
  background: var(--fb-input);
}

.fb-person {
  padding: 10px 14px;
  transition: background-color 150ms var(--fb-ease);
}

.fb-person + .fb-person {
  border-top: 1px solid var(--divider-2);
}

.fb-person:hover {
  background: var(--fb-input-hover);
}

.fb-person-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--avatar-neutral);
  color: var(--on-fill);
  font-weight: 500;
}

.fb-person-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fb-person-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb-person-left {
  color: var(--fb-muted);
}

.fb-person-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--fb-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Form-level error */
.fb-form-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--danger-text-a12);
  color: var(--fb-danger);
}

.fb-form-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Buttons (pill) */
.fb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.fb-actions-center {
  justify-content: center;
}

.fb-btn {
  min-height: 40px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--fb-ease), color 150ms var(--fb-ease), opacity 150ms var(--fb-ease), transform 150ms var(--fb-ease);
}

.fb-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.fb-btn:disabled {
  cursor: default;
  opacity: 0.38;
}

.fb-btn-primary {
  background: var(--fb-primary);
  color: var(--fb-on-primary);
}

.fb-btn-primary:hover:not(:disabled) {
  background: var(--fb-primary-hover);
}

.fb-btn-primary:disabled {
  background: var(--fg-e3-a12);
  color: var(--fb-text);
}

.fb-btn-tonal {
  padding: 0 18px;
  border: 1px solid var(--fb-border);
  background: transparent;
  color: var(--fb-primary-text);
}

.fb-btn-tonal:hover:not(:disabled) {
  background: var(--fb-primary-soft-hover);
}

.fb-btn-text {
  padding: 0 16px;
  background: transparent;
  color: var(--fb-primary-text);
}

.fb-btn-text:hover:not(:disabled) {
  background: var(--fb-primary-soft-hover);
}

.fb-layer .fb-btn:focus-visible,
.fb-layer .fb-icon-btn:focus-visible,
.fb-layer .fb-choice:focus-visible,
.fb-layer .fb-thumb-remove:focus-visible {
  outline: 2px solid var(--fb-focus);
  outline-offset: 2px;
}

.fb-success-title:focus {
  outline: none;
}

/* Success */
.fb-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0 8px;
  text-align: center;
  animation: fb-fade 200ms var(--fb-ease, ease-out);
}

.fb-success-badge {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--success-text-a16);
  color: var(--success-text);
}

.fb-success-title {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 500;
}

.fb-success-text {
  margin: 0;
  max-width: 320px;
  color: var(--fb-muted);
}

/* ---------- Abuse modal ---------- */
.fb-modal-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.fb-modal {
  position: relative;
  width: 520px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--fb-panel);
  border-radius: 24px;
  box-shadow: 0 24px 48px var(--shadow-a55);
  outline: none;
  overflow: hidden;
  animation: fb-pop-in 180ms var(--fb-ease, ease-out);
}

.fb-modal-header {
  padding: 16px 12px 4px 20px;
  min-height: 0;
}

.fb-modal-header .fb-title {
  font-size: 22px;
  font-weight: 400;
  margin-left: 0;
}

.fb-modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 24px 24px;
}

/* Menu separator injected by feedback.js is always visible (unlike the
   phone-only .more-menu-collapsed separator). */
.more-menu-sep.fb-menu-sep {
  display: block;
}

/* ---------- Phones: full-screen sheet and modal ---------- */
@media (max-width: 599px) {
  .fb-sheet {
    inset: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    animation-name: fb-slide-up;
  }

  .fb-body {
    padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .fb-modal-layer {
    padding: 0;
  }

  .fb-modal {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    animation-name: fb-slide-up;
  }

  .fb-modal-body {
    flex: 1;
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .fb-people-list {
    max-height: none;
  }

  .fb-input,
  .fb-select {
    font-size: 16px; /* no iOS zoom-on-focus */
  }
}

@keyframes fb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fb-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fb-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fb-pop-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fb-layer *,
  .fb-layer {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== /meeting-ready.css ===== */
/*
 * meeting-ready.css — "Your meeting's ready" card (meeting-ready.js).
 *
 * INTEGRATION: index.html <head>, after style.css:
 *     <link rel="stylesheet" href="/meeting-ready.css?v=1">
 *
 * Uses the #screen-call tokens from style.css when present (the card is
 * appended inside #screen-call), with literal fallbacks.
 * --mr-bottom is set from JS = distance from viewport bottom to the top of
 * .call-controls-wrap, so the card always clears the control bar.
 */

.mr-card {
  position: fixed;
  left: 16px;
  bottom: calc(var(--mr-bottom, 88px) + 12px);
  z-index: 25; /* above the stage, below the control bar's popovers (30) */
  width: 360px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 20px 20px 16px 24px;
  border-radius: 16px;
  background: var(--call-menu, #28292a);
  color: var(--call-text, #e3e3e3);
  box-shadow: 0 4px 8px 3px var(--shadow-a15), 0 1px 3px var(--shadow-a30);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  pointer-events: none;
}
.mr-card.mr-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mr-card *,
.mr-card *::before,
.mr-card *::after { box-sizing: border-box; }

.mr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -8px 16px 0;
}
.mr-title {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--call-text, #e3e3e3);
}

.mr-icon-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.mr-icon-btn:hover { background: var(--fg-e3-a08); }
.mr-icon-btn:active { background: var(--fg-e3-a12); }
.mr-icon-btn:focus-visible,
.mr-add:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

.mr-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.mr-add:hover {
  background: var(--call-accent-hover, #ff7f3d);
  box-shadow: 0 1px 3px 1px var(--shadow-a15), 0 1px 2px var(--shadow-a30);
}
.mr-add:active { background: var(--call-accent-pressed, #e85a10); }

.mr-text {
  margin: 16px 0 12px;
  color: var(--call-text-muted, #a8abaf);
}

.mr-link {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 4px 0 16px;
  border-radius: 8px;
  background: var(--call-panel, #1e1f20);
}
.mr-link-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--call-text, #e3e3e3);
  font-size: 15px;
  letter-spacing: 0.1px;
  user-select: all;
  -webkit-user-select: all;
}
.mr-copy.mr-copied { color: var(--success-text); }

.mr-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  color: var(--call-text-muted, #a8abaf);
  font-size: 13px;
  line-height: 18px;
}
.mr-info-icon {
  flex: 0 0 20px;
  display: inline-flex;
  color: var(--call-text-muted, #a8abaf);
}

.mr-status {
  height: 0;
  overflow: hidden;
  color: var(--success-text);
  font-size: 13px;
  line-height: 18px;
  transition: height 150ms ease-out;
}
.mr-status.mr-status-on { height: 26px; padding-top: 8px; }

.mr-foot {
  margin: 12px 0 0;
  color: var(--call-text-muted, #a8abaf);
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phone: full-width bottom sheet docked just above the control bar. */
@media (max-width: 600px) {
  .mr-card {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    bottom: calc(var(--mr-bottom, 88px) + 8px);
    padding: 16px 16px 14px 20px;
    border-radius: 16px;
    max-height: calc(100vh - var(--mr-bottom, 88px) - 72px);
    overflow-y: auto;
  }
  .mr-head { margin-bottom: 12px; }
  .mr-text { margin: 12px 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mr-card { transition: opacity 120ms linear; transform: none; }
}

/* ===== /side-panels.css ===== */
/* =============================================================================
 * side-panels.css — "Meeting details" + "People" right-hand sheets
 * (side-panels.js). Orange accent comes from the call theme tokens with
 * literal fallbacks so this file works before/without the re-theme.
 * ========================================================================== */

.sp-panel {
  --sp-accent: var(--call-accent, #FF6B1F);
  --sp-accent-hover: var(--call-accent-hover, #E85A10);
  --sp-accent-soft: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  --sp-accent-text: var(--call-accent-text, #FF8A4C);
  --sp-bg: #1e1f20;
  --sp-card: #282a2c;
  --sp-card-hover: #303235;
  --sp-border: rgba(255, 255, 255, 0.08);
  --sp-text: #e3e3e3;
  --sp-muted: #9aa0a6;
  --sp-danger: #FF3B30;
  --sp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  width: 380px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--sp-bg);
  color: var(--sp-text);
  border-left: 1px solid var(--call-panel-border, #2e3134);
  box-shadow: -12px 0 32px var(--shadow-a35);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 250ms var(--sp-ease), visibility 0s linear 250ms;
  outline: none;
}

.sp-panel.sp-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 250ms var(--sp-ease), visibility 0s linear 0s;
}

@media (max-width: 599px) {
  .sp-panel {
    width: 100vw;
    border-left: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-panel,
  .sp-panel.sp-open {
    transition: none;
  }
  .sp-toast,
  .sp-dialog-overlay,
  .sp-dialog,
  .sp-bars i {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Header ------------------------------------------------------------- */
.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 64px;
  padding: 16px 12px 12px 24px;
  padding-top: max(16px, env(safe-area-inset-top));
  flex-shrink: 0;
}

.sp-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sp-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--sp-text);
  white-space: nowrap;
}

.sp-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--sp-accent-soft);
  color: var(--sp-accent-text);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sp-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--sp-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.sp-icon-btn:hover {
  background: var(--fg-a08);
  color: var(--sp-text);
}

.sp-panel :focus-visible,
.sp-dialog :focus-visible {
  outline: 2px solid var(--sp-accent, #FF6B1F);
  outline-offset: 2px;
}

/* ---- Body / cards --------------------------------------------------------- */
.sp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-card {
  background: var(--sp-card);
  border-radius: 12px;
  padding: 16px;
}

.sp-card-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-text);
}

.sp-muted {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sp-muted);
}

.sp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sp-icon svg {
  display: block;
}

/* ---- Meeting details ------------------------------------------------------ */
.sp-link-row {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-inset);
  margin-bottom: 12px;
}

.sp-link-text {
  display: block;
  font-size: 14px;
  color: var(--sp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}

.sp-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease;
  white-space: nowrap;
}

.sp-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.sp-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.sp-btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  gap: 6px;
}

.sp-btn-primary {
  background: var(--sp-accent);
  color: var(--call-accent-ink, #1a1a1a);
}

.sp-btn-primary:hover:not(:disabled) {
  background: var(--sp-accent-hover);
}

.sp-btn-primary.sp-copied {
  background: var(--success-fill);
}

.sp-btn-secondary {
  background: transparent;
  color: var(--sp-accent-text);
  border-color: var(--fg-a16);
}

.sp-btn-secondary:hover:not(:disabled) {
  background: var(--sp-accent-soft);
}

.sp-btn-ghost {
  background: transparent;
  color: var(--sp-text, #e3e3e3);
}

.sp-btn-ghost:hover {
  background: var(--fg-a08);
}

.sp-btn-danger {
  background: var(--sp-danger, #FF3B30);
  color: var(--on-fill);
}

.sp-btn-danger:hover {
  background: var(--color-danger-hover);
}

.sp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--sp-border);
  font-size: 14px;
}

.sp-card-title + .sp-row {
  border-top: none;
  padding-top: 0;
}

.sp-btn-row + .sp-row {
  margin-top: 8px;
}

.sp-row-label {
  color: var(--sp-muted);
  flex-shrink: 0;
}

.sp-row-value {
  color: var(--sp-text);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sp-row-mono .sp-row-value {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}

.sp-elapsed {
  font-variant-numeric: tabular-nums;
}

.sp-you {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sp-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--fg-a10);
  color: var(--sp-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sp-tag-host {
  background: var(--sp-accent-soft);
  color: var(--sp-accent-text);
}

/* Co-host (onfiremobile-847hl.7): same shape, quieter than the host tag. */
.sp-tag-cohost {
  background: transparent;
  color: var(--sp-accent-text);
  box-shadow: inset 0 0 0 1px var(--sp-accent-soft);
}

.sp-qr-card .sp-muted {
  margin-bottom: 12px;
}

.sp-qr-frame {
  display: flex;
  justify-content: center;
  padding: 14px;
  border-radius: 12px;
  background: var(--qr-paper);
  width: max-content;
  margin: 0 auto;
}

.sp-qr {
  display: block;
  width: 168px;
  height: 168px;
  image-rendering: pixelated;
}

/* ---- People --------------------------------------------------------------- */
.sp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border-radius: 24px;
  border: 1px solid var(--fg-a16);
  color: var(--sp-muted);
  transition: border-color 150ms ease;
  flex-shrink: 0;
}

.sp-search:focus-within {
  border-color: var(--sp-accent);
}

.sp-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--sp-text);
  font: inherit;
  font-size: 15px;
  outline: none;
}

.sp-search-input::placeholder {
  color: var(--sp-muted);
}

.sp-search-input:focus-visible {
  outline: none;
}

.sp-people-card {
  padding: 12px 8px 8px;
}

.sp-people-card .sp-card-title {
  padding: 0 8px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-muted);
}

.sp-people {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-person {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 4px 6px 8px;
  border-radius: 10px;
}

.sp-person:hover {
  background: var(--sp-card-hover);
}

.sp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--on-fill);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 150ms ease;
}

.sp-speaking .sp-avatar {
  box-shadow: 0 0 0 2px var(--sp-bg), 0 0 0 4px var(--sp-accent);
}

.sp-person-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.sp-person-name {
  display: flex;
  max-width: 100%;
  font-size: 14px;
  color: var(--sp-text);
}

.sp-person-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sp-you-suffix {
  color: var(--sp-muted);
  white-space: pre;
  flex-shrink: 0;
}

.sp-person-state {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--sp-muted);
}

.sp-state-hand {
  color: var(--sp-accent);
}

.sp-off {
  opacity: 0.55;
}

.sp-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.sp-mic svg {
  width: 16px;
  height: 16px;
}

.sp-mic-live {
  color: var(--sp-text);
}

.sp-mic-muted {
  background: var(--ios-red-a16);
  color: var(--danger-text-2);
}

.sp-mic-speaking {
  background: var(--sp-accent);
  color: var(--call-accent-ink, #1a1a1a);
}

.sp-bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}

.sp-bars i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  animation: sp-bar 900ms ease-in-out infinite;
  transform-origin: center;
}

.sp-bars i:nth-child(2) { animation-delay: -300ms; }
.sp-bars i:nth-child(3) { animation-delay: -600ms; }

@keyframes sp-bar {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

.sp-more {
  width: 36px;
  height: 36px;
}

/* Host / co-host: a participant's live mic or camera is a button that turns it
   off (onfiremobile-847hl.16). Icon-only, so circular. 36px hit area around
   the 28px mic badge. */
.sp-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sp-text) 10%, transparent);
  color: var(--sp-text);
  font: inherit;
  cursor: pointer;
  position: relative;
  transition: background 150ms var(--sp-ease), color 150ms var(--sp-ease), transform 150ms var(--sp-ease);
}

.sp-state-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}

.sp-state-btn svg {
  width: 16px;
  height: 16px;
}

.sp-state-btn:hover {
  background: color-mix(in srgb, var(--sp-danger) 16%, transparent);
  color: var(--sp-danger);
}

.sp-state-btn:active {
  transform: scale(0.92);
}

.sp-state-btn.sp-mic-speaking:not(:hover) {
  background: var(--sp-accent);
}

/* .sp-btn's display beats the [hidden] attribute: "Mute all" is for hosts only. */
.sp-mute-all[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sp-state-btn { transition: none; }
  .sp-state-btn:active { transform: none; }
}

.sp-menu {
  position: absolute;
  top: calc(100% - 6px);
  right: 4px;
  z-index: 3;
  min-width: 220px;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--surface-popover);
  box-shadow: 0 8px 28px var(--shadow-a50);
}

.sp-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--sp-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.sp-menu-item:hover:not(:disabled),
.sp-menu-item:focus-visible {
  background: var(--fg-a08);
  outline: none;
}

.sp-menu-item:disabled {
  color: var(--sp-muted);
  cursor: default;
}

.sp-menu-item.sp-danger {
  color: var(--danger-text-2);
}

.sp-empty {
  padding: 16px 8px;
  text-align: center;
}

.sp-trigger {
  cursor: pointer;
  border-radius: 999px;
}

.sp-trigger:focus-visible {
  outline: 2px solid var(--call-accent, #FF6B1F);
  outline-offset: 3px;
}

/* ---- Confirm dialog ------------------------------------------------------- */
.sp-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--scrim-a60);
  opacity: 0;
  transition: opacity 160ms ease;
}

.sp-dialog-overlay.sp-in {
  opacity: 1;
}

.sp-dialog {
  --sp-accent: var(--call-accent, #FF6B1F);
  --sp-text: #e3e3e3;
  --sp-danger: #FF3B30;
  width: 100%;
  max-width: 360px;
  padding: 24px 24px 16px;
  border-radius: 16px;
  background: var(--call-card, #282a2c);
  color: var(--call-text, #e3e3e3);
  box-shadow: 0 24px 64px var(--shadow-a50);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  transform: scale(0.96);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sp-dialog-overlay.sp-in .sp-dialog {
  transform: scale(1);
}

.sp-dialog-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.sp-dialog-text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-dim);
}

.sp-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Rename dialog (onfiremobile-3bgyx) ---------------------------------- */
.sp-rename-input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 4px 0 10px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--fg-a16);
  background: var(--call-surface, transparent);
  color: var(--call-text);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.sp-rename-input:focus-visible {
  border-color: var(--call-accent);
  box-shadow: 0 0 0 3px var(--accent-a40);
}

.sp-rename .sp-rename-hint {
  margin-bottom: 18px;
  font-size: 13px;
}

/* ---- Toasts --------------------------------------------------------------- */
.sp-toast-layer {
  position: fixed;
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}

.sp-toast {
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--surface-toast);
  color: var(--call-text, #e3e3e3);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  box-shadow: 0 8px 24px var(--shadow-a45);
  border-left: 3px solid var(--call-accent, #FF6B1F);
  overflow-wrap: anywhere;
  animation: sp-toast-in 180ms ease-out;
}

.sp-toast-warn {
  border-left-color: var(--ios-red);
}

.sp-toast-out {
  animation: sp-toast-out 200ms ease-in forwards;
}

@keyframes sp-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sp-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* ===== /lobby.css ===== */
/* ============================================
   OnFire Call — "Ask to join" lobby
   Guest waiting state (join card, driven by app.js) + host admit UI (lobby.js)
   ============================================ */

:root {
  --lobby-accent: var(--call-accent, #FF6B1F);
  --lobby-accent-hover: var(--call-accent-hover, #ff7f3d);
  --lobby-accent-pressed: var(--call-accent-pressed, #e85a10);
  --lobby-accent-ink: var(--call-accent-ink, #1a1a1a);
  --lobby-accent-soft: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  --lobby-accent-text: var(--call-accent-text, #ffb38a);
  --lobby-surface: #202124;
  --lobby-surface-2: #28292a;
  --lobby-text: #e8eaed;
  --lobby-muted: #9aa0a6;
  --lobby-border: rgba(255, 255, 255, 0.10);
  --lobby-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- Join row: "Your name" left of Join (onfiremobile-847hl.15) ----------- */

/* The label, field and message flow as items of the row (display: contents),
   so Join lines up with the field, not with the label above it. The field
   keeps ~9rem; below that (or with a long "Waiting for host..." label) Join
   wraps under it at full width. Signed in, the group is hidden and Join fills
   the row. */
.join-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: 8px;
  row-gap: 8px;
}

.join-row .guest-name-group {
  display: contents;
}

.join-row .input-label {
  order: 0;
  flex: 0 0 100%;
  margin-bottom: -2px;
}

.join-row .input-field {
  order: 1;
  flex: 999 1 9rem;
  min-width: 0;
  width: auto;
}

.join-row .btn-join {
  order: 2;
  flex: 1 0 auto;
  width: auto;
  margin-top: 0;
  padding: 0 22px;
  min-height: 50px;
  white-space: nowrap;
}

.join-row .guest-name-error {
  order: 3;
  flex: 0 0 100%;
}

.guest-name-error {
  margin: -2px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-danger, #FF3B30);
}

.guest-name-error::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.input-field.is-invalid,
.input-field.is-invalid:focus {
  border-color: var(--color-danger, #FF3B30);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger, #FF3B30) 28%, transparent);
  animation: join-name-nudge 360ms var(--lobby-ease) 1;
}

@keyframes join-name-nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .input-field.is-invalid,
  .input-field.is-invalid:focus { animation: none; }
}

/* ---- Personal-link options: first-host note, meeting password ------------- */

.join-host-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--lobby-accent-soft);
  color: var(--text-primary, #f5f5f7);
  font-size: 14px;
  line-height: 1.45;
  animation: lobby-in 220ms var(--lobby-ease) both;
}

.join-host-note::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--lobby-accent);
}

.join-host-note.hidden,
.join-password-row.hidden,
.lobby-password-row.hidden {
  display: none;
}

.join-password-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.join-password-row .input-label {
  margin-bottom: -2px;
}

.join-password-row .input-field,
.lobby-password-line .input-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

.join-password-row .input-field::placeholder,
.lobby-password-line .input-field::placeholder {
  font-family: inherit;
  letter-spacing: normal;
}

.join-password-hint {
  margin: -2px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary, #9ca3af);
}

.lobby-password-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin-top: 10px;
  text-align: left;
}

.lobby-password-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
}

.lobby-password-line {
  display: flex;
  gap: 8px;
}

.lobby-password-line .input-field {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.lobby-password-line .lobby-btn {
  flex: 0 0 auto;
  min-width: 0;
  height: auto;
  min-height: 44px;
}

.lobby-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---- Guest: waiting in the lobby ------------------------------------------ */

/* While knocking, the name field / Join button / sign-in prompt step aside;
   the camera + mic preview stays (Meet-style). */
.join-card.is-knocking #join-row,
.join-card.is-knocking #guest-name-group,
.join-card.is-knocking #btn-join,
.join-card.is-knocking #host-signin-prompt,
.join-card.is-knocking #join-password-row,
.join-card.is-knocking #join-host-note,
.join-card.is-knocking #mobile-app-prompt,
.join-card.is-knocking #btn-sign-out {
  display: none !important;
}

.lobby-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 8px 4px 4px;
  animation: lobby-in 220ms var(--lobby-ease) both;
}

.lobby-waiting.hidden {
  display: none;
}

.lobby-title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary, #f5f5f7);
}

.lobby-sub {
  margin: 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, #9ca3af);
}

.lobby-dots {
  display: inline-flex;
  gap: 6px;
  height: 10px;
  align-items: center;
}

.lobby-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lobby-accent);
  animation: lobby-dot 1.2s ease-in-out infinite;
}

.lobby-dots span:nth-child(2) { animation-delay: 0.15s; }
.lobby-dots span:nth-child(3) { animation-delay: 0.3s; }

.lobby-waiting:not([data-phase="waiting"]) .lobby-dots {
  display: none;
}

.lobby-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
}

.lobby-btn {
  min-width: 120px;
  height: 44px;
  padding: 0 22px;
  border-radius: 22px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out, transform 120ms ease-out;
}

.lobby-btn:active {
  transform: scale(0.97);
}

.lobby-btn:focus-visible,
.lobby-btn-pill:focus-visible,
.lobby-switch:focus-visible,
.lobby-toast-close:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

.lobby-btn-primary {
  background: var(--lobby-accent);
  color: var(--lobby-accent-ink);
}

.lobby-btn-primary:hover { background: var(--lobby-accent-hover); }
.lobby-btn-primary:active { background: var(--lobby-accent-pressed); }

.lobby-btn-secondary {
  background: transparent;
  color: var(--lobby-accent-text);
  border-color: var(--fg-a18);
}

.lobby-btn-secondary:hover {
  background: var(--lobby-accent-soft);
}

.lobby-btn.hidden {
  display: none;
}

/* ---- Host: toast card (bottom-left, like Meet) ---------------------------- */

.lobby-toast {
  position: fixed;
  left: 16px;
  bottom: 96px;
  z-index: 1200;
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  border-radius: 16px;
  background: var(--lobby-surface);
  border: 1px solid var(--lobby-border);
  box-shadow: 0 12px 32px var(--shadow-a45);
  color: var(--lobby-text);
  animation: lobby-toast-in 240ms var(--lobby-ease) both;
}

.lobby-toast.lobby-out,
.lobby-flash.lobby-out {
  animation: lobby-toast-out 180ms ease-out both;
}

.lobby-toast-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lobby-toast-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.lobby-toast-name {
  font-weight: 600;
}

.lobby-toast-close {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -6px -6px 0 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--lobby-muted);
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.lobby-toast-close:hover {
  background: var(--fg-a08);
  color: var(--lobby-text);
}

.lobby-toast-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.lobby-btn-pill {
  height: 36px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease-out, transform 120ms ease-out;
}

.lobby-btn-pill:active { transform: scale(0.97); }

.lobby-btn-accent {
  background: var(--lobby-accent);
  color: var(--lobby-accent-ink);
}

.lobby-btn-accent:hover { background: var(--lobby-accent-hover); }

.lobby-btn-ghost {
  background: transparent;
  color: var(--lobby-accent-text);
}

.lobby-btn-ghost:hover { background: var(--lobby-accent-soft); }

.lobby-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--on-fill);
  font-size: 14px;
  font-weight: 600;
}

.lobby-avatar-stack {
  display: inline-flex;
  flex-shrink: 0;
}

.lobby-avatar-sm {
  width: 30px;
  height: 30px;
  font-size: 12px;
  border: 2px solid var(--lobby-surface);
}

.lobby-avatar-stack .lobby-avatar-sm + .lobby-avatar-sm {
  margin-left: -10px;
}

/* Small confirmation line ("Could not admit — try again"). */
.lobby-flash {
  position: fixed;
  left: 50%;
  bottom: 104px;
  z-index: 1201;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 20px;
  background: var(--lobby-surface-2);
  color: var(--lobby-text);
  font-size: 14px;
  box-shadow: 0 8px 24px var(--shadow-a40);
  animation: lobby-in 200ms var(--lobby-ease) both;
}

.lobby-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Host: badge on the People trigger ------------------------------------ */

.lobby-people-badge {
  position: absolute;
  top: -6px;
  left: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--lobby-accent);
  color: var(--lobby-accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--call-bg, #111);
  animation: lobby-pop 220ms var(--lobby-ease) both;
  pointer-events: none;
}

/* ---- Host: "Waiting to join" in the People panel -------------------------- */

.lobby-section {
  border: 1px solid var(--accent-a35);
}

.lobby-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.lobby-section-title {
  margin: 0;
}

.lobby-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--lobby-accent-soft);
  color: var(--lobby-accent-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}

.lobby-section-head .sp-btn {
  margin-left: auto;
}

.lobby-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lobby-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 0;
}

.lobby-row + .lobby-row {
  border-top: 1px solid var(--sp-border, rgba(255, 255, 255, 0.08));
}

.lobby-row-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}

.lobby-row-name {
  font-size: 14px;
  color: var(--sp-text, #e3e3e3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-row-meta {
  font-size: 12px;
  color: var(--sp-muted, #9aa0a6);
}

.lobby-row .sp-btn {
  flex-shrink: 0;
}

/* ---- Meeting details: switch row ------------------------------------------ */

.lobby-switch-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0 2px;
  border-top: 1px solid var(--sp-border, rgba(255, 255, 255, 0.08));
}

.lobby-switch-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.lobby-switch-label {
  font-size: 14px;
  color: var(--sp-text, #e3e3e3);
}

.lobby-switch-hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--sp-muted, #9aa0a6);
}

.lobby-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border: none;
  border-radius: 13px;
  background: var(--fg-a22);
  cursor: pointer;
  transition: background 200ms ease-out;
}

.lobby-switch[aria-checked="true"] {
  background: var(--lobby-accent);
}

.lobby-switch:disabled {
  opacity: 0.6;
  cursor: progress;
}

.lobby-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: 0 1px 3px var(--shadow-a35);
  transition: transform 200ms var(--lobby-ease);
}

.lobby-switch[aria-checked="true"] .lobby-switch-thumb {
  transform: translateX(18px);
}

.lobby-info-note {
  margin: 0;
  padding: 10px 0 2px;
  border-top: 1px solid var(--sp-border, rgba(255, 255, 255, 0.08));
  font-size: 13px;
  color: var(--sp-muted, #9aa0a6);
}

/* ---- Motion ---------------------------------------------------------------- */

@keyframes lobby-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.lobby-flash { animation-name: lobby-flash-in; }

@keyframes lobby-flash-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes lobby-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes lobby-toast-out {
  to { opacity: 0; transform: translateY(8px); }
}

@keyframes lobby-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes lobby-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.45; }
  40%           { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .join-host-note,
  .lobby-waiting,
  .lobby-toast,
  .lobby-toast.lobby-out,
  .lobby-flash,
  .lobby-flash.lobby-out,
  .lobby-people-badge {
    animation: none;
  }
  .lobby-dots span {
    animation: none;
    opacity: 0.8;
  }
  .lobby-switch,
  .lobby-switch-thumb,
  .lobby-btn,
  .lobby-btn-pill {
    transition: none;
  }
}

/* ---- Phone ------------------------------------------------------------------ */

@media (max-width: 600px) {
  .lobby-toast {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 88px;
  }
  .lobby-actions .lobby-btn {
    flex: 1 1 0;
  }
}

/* ---------------------------------------------------------------------------
 * Region picker (onfiremobile-hxu4t.12, routing-ux.md §7.3). Four pill segments
 * in a pill container, under the switch row they sit beside. Existing custom
 * properties only — no new hex. The selection transitions on easeOutCubic, never
 * linear; prefers-reduced-motion drops it to an instant swap.
 * ------------------------------------------------------------------------- */
.region-row {
  flex-wrap: wrap;
  align-items: flex-start;
}

.region-segments {
  display: flex;
  flex: 1 1 100%;
  gap: 4px;
  margin-top: 8px;
  padding: 4px;
  border-radius: 999px;
  background: var(--sp-surface-2, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--sp-border, rgba(255, 255, 255, 0.08));
}

.region-segments.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

.region-segment {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sp-muted, #9aa0a6);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(0.33, 1, 0.68, 1),
              color 180ms cubic-bezier(0.33, 1, 0.68, 1);
}

.region-segment:disabled {
  cursor: default;
}

.region-segment.is-selected {
  background: var(--sp-surface-3, rgba(255, 255, 255, 0.14));
  color: var(--sp-text, #e3e3e3);
}

.region-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sp-surface-2, rgba(255, 255, 255, 0.06));
  color: var(--sp-muted, #9aa0a6);
  font-size: 11px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .region-segment {
    transition: none;
  }
}

/* ===== /presence.css ===== */
/* presence.css — idle-guard.js ("Are you still there?") + hands-bar.js
   (raised hands in the top bar). Reads the call theme tokens from style.css
   with literal fallbacks. */

/* ======================================================================
   Idle guard modal
   ====================================================================== */
.ig-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--scrim-a60);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.ig-backdrop.ig-in { opacity: 1; }

.ig-dialog {
  width: 100%;
  max-width: 420px;
  padding: 28px 24px 20px;
  border-radius: 16px;
  background: var(--call-surface, #202124);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 24px 64px var(--shadow-a50);
  color: var(--call-text, #e3e3e3);
  text-align: center;
  transform: translateY(8px) scale(0.97);
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.ig-backdrop.ig-in .ig-dialog { transform: none; }

.ig-ring {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
}

.ig-ring svg {
  display: block;
  transform: rotate(-90deg);
}

.ig-ring-track {
  fill: none;
  stroke: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  stroke-width: 4;
}

.ig-ring-bar {
  fill: none;
  stroke: var(--call-accent, #FF6B1F);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 950ms linear;
}

.ig-time {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--call-accent-text, #ffb38a);
}

.ig-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-strong);
}

.ig-body {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--call-text-muted, #a8abaf);
}

.ig-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ig-btn {
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.ig-btn:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

.ig-btn-secondary {
  background: transparent;
  border-color: var(--call-border, #3c4043);
  color: var(--call-accent-text, #ffb38a);
}

.ig-btn-secondary:hover { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); }

.ig-btn-primary {
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
}

.ig-btn-primary:hover { background: var(--call-accent-hover, #ff7f3d); }
.ig-btn-primary:active { background: var(--call-accent-pressed, #e85a10); }

.ig-ended-note {
  margin: -4px 0 16px;
  font-size: 14px;
  color: var(--call-accent-text, #ffb38a);
}

@media (max-width: 599px) {
  .ig-dialog { padding: 24px 20px 16px; }
  .ig-title { font-size: 20px; }
  .ig-actions { flex-direction: column-reverse; }
  .ig-btn { width: 100%; }
}

/* ======================================================================
   Raised hands bar (inside .call-meta, left of #call-people)
   ====================================================================== */
.hb-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hb-bar.hb-empty { display: none; }

.hb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--call-accent-soft-hover, rgba(255, 107, 31, 0.24));
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 200ms ease-out, transform 200ms cubic-bezier(0.2, 0, 0, 1),
    background-color 150ms ease-out;
}

.hb-pill.hb-in { opacity: 1; transform: none; }
.hb-pill.hb-leaving { opacity: 0; transform: scale(0.85); pointer-events: none; }

button.hb-pill { cursor: pointer; }
button.hb-pill:hover { background: var(--call-accent-soft-hover, rgba(255, 107, 31, 0.24)); }
button.hb-pill:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

.hb-pill.hb-own { border-color: var(--call-accent, #FF6B1F); }

.hb-hand {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transform-origin: 70% 90%; /* the wrist */
  animation: hb-wave 1.2s ease-in-out 3;
}

.hb-name {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb-order,
.hb-dd-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hb-more { padding: 0 10px; }
.hb-count { font-weight: 600; font-variant-numeric: tabular-nums; }

@keyframes hb-wave {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-15deg); }
  30%  { transform: rotate(15deg); }
  45%  { transform: rotate(-12deg); }
  60%  { transform: rotate(12deg); }
  75%  { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

/* Dropdown (appended to <body>, positioned under the anchor pill) */
.hb-dropdown {
  position: fixed;
  z-index: 1050;
  width: 260px;
  max-width: calc(100vw - 16px);
  max-height: min(60vh, 360px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  background: var(--call-surface, #202124);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 12px 40px var(--shadow-a45);
  color: var(--call-text, #e3e3e3);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.hb-dropdown.hb-in { opacity: 1; transform: none; }

.hb-dd-head {
  padding: 6px 10px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--call-text-muted, #a8abaf);
}

.hb-dd-list { list-style: none; margin: 0; padding: 0; }

.hb-dd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
}

button.hb-dd-row { cursor: pointer; transition: background-color 150ms ease-out; }
button.hb-dd-row:hover,
button.hb-dd-row:focus-visible { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); outline: none; }

.hb-dd-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hb-dd-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--call-accent-text, #ffb38a);
}

@media (prefers-reduced-motion: reduce) {
  .ig-backdrop,
  .ig-dialog,
  .ig-ring-bar,
  .hb-pill,
  .hb-dropdown { transition: opacity 120ms linear; }
  .ig-dialog,
  .hb-pill,
  .hb-pill.hb-leaving,
  .hb-dropdown { transform: none; }
  .hb-hand { animation: none; }
}

/* ===== /devices.css ===== */
/*
 * devices.css — Meet-style device picker (devices.js).
 * Load after style.css:  <link rel="stylesheet" href="/devices.css?v=1">
 */

/* ---- Combined pill: [^ | mic] ------------------------------------------ */
.dev-split {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 40px;
  border-radius: 999px;
  background: var(--control-pill);
  transition: background-color 150ms var(--call-ease, ease-out);
}

.dev-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
  padding: 0 0 0 4px;
  border: none;
  border-radius: 999px 0 0 999px;
  background: transparent;
  color: var(--text-hi);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}

.dev-chevron .dev-ico,
.dev-chevron svg {
  display: block;
  transition: transform 180ms var(--call-ease, ease-out);
}

.dev-chevron:hover {
  background: var(--call-surface-hover, #3c4043);
}

.dev-chevron.dev-open {
  color: var(--call-accent, #FF6B1F);
}

.dev-chevron.dev-open svg {
  transform: rotate(180deg);
}

.dev-chevron:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

/* The toggle keeps its own (red-when-muted) look as the right half. */
.dev-split > .control-btn-pill {
  width: 44px;
}

.dev-split > .control-btn-pill:not(.muted) {
  background: var(--fg-a06);
}

.dev-split > .control-btn-pill:not(.muted):hover {
  background: var(--call-surface-hover, #3c4043);
}

/* Audio-only call (btn-video hidden) or phones: no chevron segment. */
.dev-split.dev-split-solo .dev-chevron {
  display: none;
}

.dev-split.dev-split-solo {
  background: transparent;
}

.dev-split.dev-split-solo > .control-btn-pill {
  width: 56px;
}

.dev-split.dev-split-solo > .control-btn-pill:not(.muted) {
  background: var(--control-pill);
}

/* ---- Popover above the bar --------------------------------------------- */
.dev-popover {
  position: absolute;
  bottom: 64px;
  left: 0;
  z-index: 5;
  width: 540px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 16px;
  border-radius: 16px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 16px 40px var(--shadow-a55);
  color: var(--text-hi);
  font-size: 14px;
  text-align: left;
  animation: dev-pop-in 180ms var(--call-ease, ease-out);
  transform-origin: bottom left;
}

.dev-popover[aria-label="Video settings"] {
  width: 360px;
}

@keyframes dev-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dev-row {
  display: flex;
  gap: 12px;
}

.dev-field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.dev-field-label {
  margin: 0 0 6px 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}

/* Pill dropdown */
.dev-select {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--fg-a04);
  color: var(--text-hi);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out);
}

.dev-select:hover:not(:disabled) {
  background: var(--call-menu-hover, #353739);
}

.dev-select[aria-expanded="true"] {
  border-color: var(--call-accent, #FF6B1F);
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
}

.dev-select:disabled {
  cursor: default;
  opacity: 0.6;
}

.dev-select:focus-visible,
.dev-pill-btn:focus-visible,
.dev-option:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

.dev-ico {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-icon);
}

.dev-select > .dev-ico:first-child {
  color: var(--call-accent-text, #ffb38a);
}

.dev-select-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dev-select[aria-expanded="true"] > .dev-ico:last-child svg {
  transform: rotate(180deg);
}

.dev-select > .dev-ico:last-child svg {
  transition: transform 180ms var(--call-ease, ease-out);
}

/* Listbox (opens upward — the popover sits at the bottom of the screen) */
.dev-list {
  position: absolute;
  left: 0;
  bottom: 44px;
  width: max-content;
  min-width: 100%;
  max-width: min(380px, calc(100vw - 32px));
  box-sizing: border-box;
  z-index: 2;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border-radius: 12px;
  background: var(--call-surface, #202124);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 12px 32px var(--shadow-a55);
  animation: dev-pop-in 150ms var(--call-ease, ease-out);
}

/* Right-hand field: open the list toward the inside of the popover. */
.dev-field + .dev-field .dev-list {
  left: auto;
  right: 0;
}

.dev-list[hidden] {
  display: none;
}

.dev-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  cursor: pointer;
  line-height: 1.3;
  transition: background-color 150ms var(--call-ease, ease-out);
}

.dev-option:hover,
.dev-option:focus {
  background: var(--call-menu-hover, #353739);
  outline: none;
}

.dev-option:focus-visible {
  outline-offset: -2px;
}

.dev-option .dev-check {
  visibility: hidden;
  color: var(--call-accent, #FF6B1F);
}

.dev-option[aria-selected="true"] .dev-check {
  visibility: visible;
}

.dev-option[aria-selected="true"] {
  color: var(--call-accent-text, #ffb38a);
}

.dev-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-hint {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--fg-a04);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
}

.dev-note {
  margin: 12px 4px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
}

/* Tools row: meter + test speaker / effects */
.dev-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.dev-meter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dev-meter {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}

.dev-meter-seg {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--meter-off);
  transition: height 80ms linear, background-color 80ms linear;
}

.dev-meter-seg.on {
  height: 14px;
  background: var(--call-accent, #FF6B1F);
}

.dev-meter-state {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.dev-meter-state[hidden] {
  display: none;
}

.dev-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: transparent;
  color: var(--call-accent-text, #ffb38a);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out);
}

.dev-pill-btn .dev-ico {
  color: inherit;
}

.dev-pill-btn:hover:not(:disabled) {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  border-color: var(--call-accent, #FF6B1F);
}

.dev-pill-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.dev-effects {
  width: 100%;
  justify-content: center;
}

/* ---- Toast ------------------------------------------------------------- */
.dev-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--inverse-glass-3);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 8px 24px var(--shadow-a45);
  color: var(--text-hi);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 180ms var(--call-ease, ease-out), transform 180ms var(--call-ease, ease-out);
}

.dev-toast.dev-toast-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- "Switch camera" (phones only) -------------------------------------- */
.more-menu-item.dev-switch-cam,
#more-menu #menu-cameras {
  display: none;
}

/* ---- Narrow screens ---------------------------------------------------- */
@media (max-width: 599px) {
  .dev-popover,
  .dev-popover[aria-label="Video settings"] {
    width: calc(100vw - 16px);
    padding: 14px;
  }

  .dev-row {
    flex-direction: column;
    gap: 12px;
  }

  .dev-tools {
    flex-wrap: wrap;
  }
}

/* Phones (touch, < 600px): the mic chevron hides; the camera keeps a slim one, because
   Backgrounds and effects and Cameras live only there (they left ⋮, owner 2026-10-07).
   Camera flip stays in the ⋮ menu. */
@media (max-width: 599px) and (pointer: coarse) {
  .dev-chevron {
    display: none;
  }

  .dev-split[data-dev="cam"]:not(.dev-split-solo) {
    background: var(--control-pill);
  }

  .dev-split[data-dev="cam"]:not(.dev-split-solo) .dev-chevron {
    display: flex;
    width: 24px;
    padding: 0 0 0 4px;
  }

  .dev-split[data-dev="cam"]:not(.dev-split-solo) > .control-btn-pill {
    width: 44px;
  }

  .dev-split[data-dev="cam"]:not(.dev-split-solo) > .control-btn-pill:not(.muted) {
    background: var(--fg-a06);
  }

  .dev-split {
    background: transparent;
  }

  .dev-split > .control-btn-pill {
    width: 56px;
  }

  .dev-split > .control-btn-pill:not(.muted) {
    background: var(--control-pill);
  }

  .more-menu-item.dev-switch-cam:not(.hidden) {
    display: flex;
  }

  /* A host's bar has one more button (Breakout rooms, never folded into ⋮): tighter, so it
     still fits beside the camera chevron. Guests keep the roomier bar. */
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) {
    gap: 4px;
    padding: 0 6px;
  }
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) > .dev-split > .control-btn-pill,
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) > .control-btn-hangup {
    width: 48px;
  }
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) > .dev-split[data-dev="cam"]:not(.dev-split-solo) > .control-btn-pill {
    width: 40px;
  }
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) > .dev-split[data-dev="cam"]:not(.dev-split-solo) .dev-chevron {
    width: 20px;
    padding: 0 0 0 2px;
  }
}

@media (max-width: 360px) and (pointer: coarse) {
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) {
    padding: 0 4px;
  }
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) > .control-btn {
    width: 38px;
  }
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) > .dev-split > .control-btn-pill,
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) > .control-btn-hangup {
    width: 44px;
  }
  #screen-call .call-controls:has(#btn-breakouts:not(.hidden)) > .dev-split[data-dev="cam"]:not(.dev-split-solo) > .control-btn-pill {
    width: 40px;
  }
}

@media (max-width: 360px) {
  .dev-split > .control-btn-pill {
    width: 40px;
  }
}

@media (max-width: 360px) and (pointer: coarse) {
  .dev-split > .control-btn-pill {
    width: 48px;
  }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dev-popover,
  .dev-list {
    animation: none;
  }

  .dev-chevron svg,
  .dev-select > .dev-ico:last-child svg,
  .dev-meter-seg,
  .dev-toast {
    transition: none;
  }
}

/* ===== /settings.css ===== */
/* ---- Settings (the cogwheel, settings.js, onfiremobile-4ko0x) ------------------------------
   One sheet for every screen: right side sheet, bottom sheet on phones. Theme tokens only. */
.set-root {
  position: fixed;
  inset: 0;
  z-index: 1150;
}
.set-root.hidden {
  display: none;
}
.set-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a60);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.2, 0, 0, 1);
}
.set-root.is-open .set-backdrop {
  opacity: 1;
}
.set-sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(400px, 100vw);
  background: var(--call-panel);
  border-left: 1px solid var(--call-border);
  box-shadow: -16px 0 40px var(--shadow-a35, rgba(0, 0, 0, 0.35));
  color: var(--call-text);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}
.set-root.is-open .set-sheet {
  transform: translateX(0);
}
.set-grab {
  display: none;
}
.set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: max(14px, env(safe-area-inset-top)) 12px 10px 24px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.set-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.set-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.set-close:hover {
  background: var(--fg-a06);
}
.set-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
}
.set-plan.hidden,
.set-earn.hidden {
  display: none;
}
.set-prefs {
  margin-top: 4px;
}
.set-row {
  padding: 4px 4px 16px;
}
.set-country:empty {
  display: none;
}
.set-close:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}

/* ---- The cogwheel ---------------------------------------------------------------------- */
.set-gear {
  flex-shrink: 0;
}
.set-gear[aria-expanded="true"] {
  background: var(--fg-a06);
}
.set-gear:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}
/* Pre-join: floating top right, where the globe and the theme icons were. */
.set-float {
  display: flex;
  gap: 8px;
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 5;
}
/* In a call: the same height as the account chip beside it. */
.set-gear-call.pick-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-color: var(--call-border);
  background: var(--acct-surface, var(--fg-a06));
  color: var(--call-text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.set-gear-call.pick-btn:hover {
  background: var(--call-surface-hover, var(--fg-a06));
}

/* ⋮ "Settings": phones only (the bar's cogwheel is hidden there). */
#menu-settings {
  display: none;
}
.set-menu-icon {
  display: inline-flex;
  color: var(--text-icon);
  flex-shrink: 0;
}
.set-menu-icon svg {
  width: 20px;
  height: 20px;
}

/* ---- Phones: a bottom sheet ------------------------------------------------------------- */
@media (max-width: 599px) {
  .set-gear.set-gear-call {
    display: none;
  }
  #menu-settings {
    display: flex;
  }
  .set-sheet {
    top: auto;
    left: 0;
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-left: 0;
    border-top: 1px solid var(--call-border);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 40px var(--shadow-a35, rgba(0, 0, 0, 0.35));
    transform: translateY(100%);
  }
  .set-root.is-open .set-sheet {
    transform: translateY(0);
  }
  .set-grab {
    display: block;
    align-self: center;
    width: 40px;
    height: 5px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--fg-a20, rgba(127, 127, 127, 0.4));
    touch-action: none;
  }
  .set-head {
    min-height: 52px;
    padding: 6px 8px 8px 20px;
    border-bottom: 0;
    touch-action: none;
  }
  .set-body {
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .set-sheet,
  .set-backdrop {
    transition: none;
  }
}

/* ===== /bg-effects.css ===== */
/* bg-effects.css — "Backgrounds and effects" side sheet (see bg-effects.js).
   All classes are prefixed `bgfx-` so they can't collide with style.css. */

.bgfx-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  width: 360px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--call-panel, #1e1f20);
  border-left: 1px solid var(--call-panel-border, #2e3134);
  box-shadow: -12px 0 32px var(--shadow-a35);
  color: var(--call-text, #e3e3e3);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 250ms;
}
.bgfx-sheet.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 0s;
}

.bgfx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 16px 12px 12px 24px;
  padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.bgfx-title {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--call-text, #e3e3e3);
}
.bgfx-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--call-text-muted, #a8abaf);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.bgfx-close:hover { background: var(--fg-e8-a08); color: var(--call-text, #e3e3e3); }
.bgfx-close:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

.bgfx-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
}

/* ---------- Live self-preview ---------- */
.bgfx-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--media-black);
}
.bgfx-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scaleX(-1); /* mirrored, like the self tile */
}
.bgfx-preview-off {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
  background: var(--call-card, #282a2c);
}
.bgfx-preview.is-off .bgfx-preview-off { display: flex; }
.bgfx-preview.is-off .bgfx-video { visibility: hidden; }
.bgfx-preview-off-title { font-size: 14px; color: var(--call-text, #e3e3e3); }
.bgfx-preview-off-sub { font-size: 12px; color: var(--call-text-muted, #a8abaf); }

.bgfx-error {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--danger-a14);
  color: var(--danger-text);
  font-size: 13px;
  line-height: 1.4;
}
.bgfx-error.hidden { display: none; }

/* ---------- Sections + tiles ---------- */
.bgfx-section { margin-top: 20px; }
.bgfx-section-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--call-text-muted, #a8abaf);
}
.bgfx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bgfx-file { display: none; }

.bgfx-tile {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border: none;
  border-radius: 10px;
  background: var(--call-card, #282a2c) center / cover no-repeat;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 150ms ease-out, transform 150ms ease-out, background-color 150ms ease-out;
}
.bgfx-tile:hover { background-color: var(--call-card-hover, #333538); }
.bgfx-tile:active { transform: scale(0.97); }
.bgfx-tile:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.bgfx-tile.is-selected {
  box-shadow: 0 0 0 2px var(--call-panel, #1e1f20), 0 0 0 4px var(--call-accent, #FF6B1F);
}
.bgfx-tile-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.bgfx-tile svg { flex-shrink: 0; color: var(--call-text-muted, #a8abaf); }

/* Blur tiles: a little silhouette over a busy backdrop, blurred to taste. */
.bgfx-tile-blur {
  background-image:
    radial-gradient(circle at 20% 30%, var(--illus-blue) 0 10%, transparent 11%),
    radial-gradient(circle at 80% 25%, var(--illus-yellow) 0 9%, transparent 10%),
    radial-gradient(circle at 70% 80%, var(--illus-green) 0 12%, transparent 13%),
    linear-gradient(135deg, var(--illus-grey), var(--illus-grey-2));
}
.bgfx-blur-figure {
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 40% 40%;
  background: var(--illus-figure);
  box-shadow: 0 14px 0 -2px var(--illus-figure);
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.bgfx-tile-blur::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(2px);
}
.bgfx-tile-blur.is-strong::before { filter: blur(5px); }
.bgfx-tile-blur .bgfx-tile-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 4px;
  background: var(--fx-shade-a45);
  z-index: 1;
}

.bgfx-tile-upload { border: 1px dashed var(--call-border, #3c4043); }
.bgfx-tile-upload.has-image { border: none; }
.bgfx-tile-upload.has-image svg,
.bgfx-tile-upload.has-image .bgfx-tile-label {
  position: relative;
  z-index: 1;
  color: var(--fx-white);
  text-shadow: 0 1px 2px var(--fx-shade-a70);
}
.bgfx-tile-upload.has-image svg { filter: drop-shadow(0 1px 2px var(--fx-shade-a70)); }

/* Busy spinner (model / image loading) */
.bgfx-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--media-a45);
  z-index: 2;
}
.bgfx-spinner::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--on-fill-a35);
  border-top-color: var(--on-fill);
  animation: bgfx-spin 800ms linear infinite;
}
.bgfx-tile.is-busy .bgfx-spinner { display: flex; }
@keyframes bgfx-spin { to { transform: rotate(360deg); } }

.bgfx-note {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--call-text-muted, #a8abaf);
}

/* Pre-join: sparkle button in the preview controls; lit while an effect is on */
.preview-btn.bgfx-preview-btn.is-active {
  background: var(--call-accent, #FF6B1F);
  color: var(--on-fill, #fff);
}
.preview-btn.bgfx-preview-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

/* ---------- Touch up (onfiremobile-noji8) ---------- */
.bgfx-tu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -8px;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out);
}
.bgfx-tu-row:hover { background: var(--fg-a04); }
.bgfx-tu-text { display: flex; flex-direction: column; min-width: 0; }
.bgfx-tu-label { font-size: 14px; color: var(--call-text, #e3e3e3); }
.bgfx-tu-hint { font-size: 12px; line-height: 1.35; color: var(--call-text-muted, #a8abaf); }
.bgfx-tu-more { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; }
.bgfx-tu-more[hidden], .bgfx-range[hidden] { display: none; }

.bgfx-switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--switch-off);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out);
}
.bgfx-switch[aria-checked="true"] { background: var(--call-accent, #FF6B1F); }
.bgfx-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: 0 1px 2px var(--shadow-a30);
  transition: transform 180ms var(--call-ease, ease-out);
}
.bgfx-switch[aria-checked="true"] .bgfx-switch-knob { transform: translateX(16px); }
.bgfx-switch:focus-visible,
.bgfx-seg-opt:focus-visible,
.bgfx-range:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

.bgfx-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--fg-a04);
}
.bgfx-seg-opt {
  flex: 1 1 0;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}
.bgfx-seg-opt:hover:not([aria-checked="true"]) { background: var(--fg-a06); color: var(--text-hi); }
.bgfx-seg-opt[aria-checked="true"] {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  box-shadow: inset 0 0 0 1px var(--call-accent, #FF6B1F);
  color: var(--call-accent-text, #ffb38a);
}

.bgfx-range {
  --pct: 50%;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.bgfx-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--call-accent, #FF6B1F) var(--pct), var(--switch-off) var(--pct));
}
.bgfx-range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--switch-off); }
.bgfx-range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--call-accent, #FF6B1F); }
.bgfx-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: none;
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: 0 1px 3px var(--shadow-a30);
}
.bgfx-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: 0 1px 3px var(--shadow-a30);
}
.bgfx-touch { margin-top: 16px; }

/* Phones: full-width sheet */
@media (max-width: 600px) {
  .bgfx-sheet { width: 100%; border-left: none; }
  .bgfx-body { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bgfx-sheet, .bgfx-sheet.is-open { transition: none; }
  .bgfx-spinner::after { animation-duration: 1600ms; }
  .bgfx-switch, .bgfx-switch-knob, .bgfx-seg-opt, .bgfx-tu-row { transition: none; }
}

/* ===== /translate.css ===== */
/* translate.css — "Translate" side panel (translate.js). Classes are prefixed `tr-`.
   Colour tokens from theme.css / style.css, so it follows light and dark like the other sheets. */

.tr-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--call-panel, #1e1f20);
  border-left: 1px solid var(--call-panel-border, #2e3134);
  box-shadow: -12px 0 32px var(--shadow-a35);
  color: var(--call-text, #e3e3e3);
  container-type: inline-size;
  container-name: tr;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 250ms;
}
.tr-sheet.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0s linear 0s;
}
.tr-sheet.is-resizing { transition: none; user-select: none; }
.tr-sheet.is-resizing * { cursor: col-resize; }

/* Drag handle on the left edge */
.tr-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 10px;
  cursor: col-resize;
  z-index: 2;
  touch-action: none;
}
.tr-grip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 4px;
  height: 40px;
  margin-top: -20px;
  border-radius: 2px;
  background: var(--call-border, #3c4043);
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.tr-grip:hover::after,
.tr-grip:focus-visible::after,
.tr-sheet.is-resizing .tr-grip::after { opacity: 1; background: var(--call-accent, #FF6B1F); }
.tr-grip:focus-visible { outline: none; }

.tr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 16px 12px 12px 24px;
  padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.tr-title {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--call-text, #e3e3e3);
}

.tr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}
.tr-icon-btn:hover:not(:disabled) { background: var(--fg-e8-a08); color: var(--call-text, #e3e3e3); }
.tr-icon-btn:active:not(:disabled) { transform: scale(0.94); }
.tr-icon-btn:disabled { opacity: 0.4; cursor: default; }
.tr-icon-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.tr-close { width: 40px; height: 40px; }

.tr-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
}

/* ---------- Panes: column (narrow) / row (wide) ---------- */
.tr-panes {
  flex: 1 0 auto; /* never shrink under its content: the dictionary sits below */
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.tr-pane {
  flex: 1 0 auto; /* stacked: as tall as its content (pronunciation lines can add to it) */
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tr-swap {
  align-self: center;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-card, #282a2c);
  color: var(--call-text, #e3e3e3);
}
.tr-swap svg { transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.tr-swap.is-spun svg { transform: rotate(180deg); }

@container tr (min-width: 560px) {
  .tr-panes { flex-direction: row; }
  .tr-pane { flex: 1 1 0; }
  .tr-swap { align-self: flex-start; margin-top: 2px; }
  .tr-swap svg { rotate: 90deg; }
}
/* Fallback for browsers without container queries: translate.js sets data-layout. */
@supports not (container-type: inline-size) {
  .tr-sheet[data-layout="row"] .tr-panes { flex-direction: row; }
  .tr-sheet[data-layout="row"] .tr-pane { flex: 1 1 0; }
  .tr-sheet[data-layout="row"] .tr-swap { align-self: flex-start; margin-top: 2px; }
  .tr-sheet[data-layout="row"] .tr-swap svg { rotate: 90deg; }
}

/* ---------- Combobox ---------- */
.tr-combo { position: relative; }
.tr-combo-input {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 16px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 20px;
  background: var(--call-card, #282a2c);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.tr-combo-input:hover { border-color: var(--call-text-muted, #a8abaf); }
.tr-combo-input:focus { outline: none; border-color: var(--call-accent, #FF6B1F); box-shadow: 0 0 0 3px var(--accent-a22); }
.tr-combo-chevron {
  position: absolute;
  top: 12px;
  right: 14px;
  color: var(--call-text-muted, #a8abaf);
  pointer-events: none;
  transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tr-combo.is-open .tr-combo-chevron { transform: rotate(180deg); }
.tr-combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--call-panel-border, #2e3134);
  border-radius: 12px;
  background: var(--call-panel, #1e1f20);
  box-shadow: 0 12px 32px var(--shadow-a35);
  animation: tr-pop 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tr-combo-list[hidden] { display: none; }
@keyframes tr-pop { from { opacity: 0; transform: translateY(-4px); } }
.tr-combo-option {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--call-text, #e3e3e3);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-combo-option.is-active { background: var(--fg-e8-a08); }
.tr-combo-option.is-current { color: var(--call-accent, #FF6B1F); font-weight: 500; }
.tr-combo-empty { padding: 10px 12px; font-size: 13px; color: var(--call-text-muted, #a8abaf); }

/* ---------- Text boxes ---------- */
.tr-box {
  position: relative;
  flex: 1;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 14px;
  background: var(--call-card, #282a2c);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.tr-box:focus-within { border-color: var(--call-accent, #FF6B1F); box-shadow: 0 0 0 3px var(--accent-a22); }
.tr-box-out { background: var(--call-panel, #1e1f20); }
.tr-text {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 14px 44px 8px 16px;
  border: none;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tr-text:focus { outline: none; }
.tr-input::placeholder,
.tr-placeholder { color: var(--call-text-muted, #a8abaf); }
.tr-output { padding-right: 16px; user-select: text; }
.tr-sheet.is-busy .tr-output { opacity: 0.55; transition: opacity 150ms ease-out; }
.tr-clear { position: absolute; top: 6px; right: 6px; }
.tr-clear[hidden] { display: none; }
.tr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 0 6px 6px 16px;
  font-size: 12px;
  color: var(--call-text-muted, #a8abaf);
}
.tr-count.is-near { color: var(--danger-text); }
.tr-detected { color: var(--call-accent, #FF6B1F); }
.tr-copy.is-done { color: var(--call-accent, #FF6B1F); }

.tr-error {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--danger-a14);
  color: var(--danger-text);
  font-size: 13px;
  line-height: 1.4;
}
.tr-error.hidden { display: none; }

/* Plan lock (call_translate -> plan_required) */
.tr-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 14px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--accent-a22);
  border-radius: 14px;
  background: var(--call-card, #282a2c);
}
.tr-lock.hidden { display: none; }
.tr-lock-text { flex: 1 1 200px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--call-text, #e3e3e3); }
.tr-lock-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--call-accent, #FF6B1F);
  color: var(--on-fill, #fff);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 150ms ease-out, transform 150ms ease-out;
}
.tr-lock-link:hover { filter: brightness(1.06); }
.tr-lock-link:active { transform: scale(0.97); }
.tr-lock-link:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.tr-sheet.is-locked .tr-panes { opacity: 0.5; }
.tr-text:disabled { cursor: not-allowed; }

.tr-actions { display: flex; justify-content: flex-start; margin-top: 12px; } /* left: the support bubble sits bottom-right */
.tr-go {
  height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: var(--call-accent, #FF6B1F);
  color: var(--on-fill, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 150ms ease-out, transform 150ms ease-out, opacity 150ms ease-out;
}
.tr-go:hover:not(:disabled) { filter: brightness(1.06); }
.tr-go:active:not(:disabled) { transform: scale(0.97); }
.tr-go:disabled { opacity: 0.6; cursor: default; }
.tr-go:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

.tr-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--call-text-muted, #a8abaf);
}

/* ---------- Dictionary: pronunciation + part of speech under the texts ---------- */
.tr-foot-l { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: -10px; }
.tr-speak { width: 36px; height: 36px; flex: none; }
.tr-speak.is-playing { color: var(--call-accent, #FF6B1F); }
.tr-meta {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 8px;
  font-size: 13px;
  animation: tr-fade-in 220ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tr-meta.hidden { display: none; }
.tr-pron { color: var(--call-text-muted, #a8abaf); font-size: 13px; line-height: 1.4; }
.tr-pos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tr-pos { color: var(--call-text, #e3e3e3); font-weight: 500; cursor: default; }
.tr-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tr-chip {
  height: 24px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: var(--fg-e8-a08);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 13px;
  line-height: 24px;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.tr-chip:hover { background: var(--accent-a18); color: var(--call-accent-text, var(--call-text, #e3e3e3)); }
.tr-chip:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 1px; }

/* ---------- More translations ---------- */
.tr-dict {
  flex: none;
  margin-top: 12px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 14px;
  background: var(--call-panel, #1e1f20);
  overflow: hidden;
  animation: tr-fade-in 220ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tr-dict.hidden { display: none; }
.tr-dict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--divider);
}
.tr-dict-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.tr-dict-all {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--call-accent, #FF6B1F);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.tr-dict-all:hover { background: var(--accent-a10); }
.tr-dict-all:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.tr-dict-all[hidden] { display: none; }
.tr-dict-list { list-style: none; margin: 0; padding: 0; }
.tr-dict-row + .tr-dict-row { border-top: 1px solid var(--divider); }
.tr-dict-toggle {
  display: grid;
  grid-template-columns: minmax(64px, 30%) minmax(56px, auto) 1fr 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px 8px 16px;
  border: none;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.tr-dict-toggle:hover { background: var(--fg-e8-a08); }
.tr-dict-toggle:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: -2px; }
.tr-dict-term { font-size: 15px; overflow-wrap: anywhere; }
.tr-dict-pos { font-size: 13px; color: var(--call-text-muted, #a8abaf); }
.tr-dict-back {
  min-width: 0;
  font-size: 13px;
  color: var(--call-text-muted, #a8abaf);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-dict-chev { color: var(--call-text-muted, #a8abaf); transition: transform 220ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.tr-dict-row.is-open .tr-dict-chev { transform: rotate(180deg); }
.tr-dict-row.is-open .tr-dict-back { visibility: hidden; }
.tr-dict-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 12px;
  animation: tr-fade-in 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tr-dict-detail[hidden] { display: none; }
.tr-dict-detail-line { display: flex; align-items: center; gap: 6px; margin-left: -10px; }

/* Skeleton while the entry loads */
.tr-dict-row.is-skeleton {
  display: grid;
  grid-template-columns: 30% 64px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 16px;
}
.tr-skel {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--fg-e8-a08) 0%, var(--accent-a10) 50%, var(--fg-e8-a08) 100%);
  background-size: 200% 100%;
  animation: tr-shimmer 1.2s ease-in-out infinite;
}
.tr-skel-term { width: 70%; }
.tr-skel-chips { width: 85%; }
@keyframes tr-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes tr-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@container tr (max-width: 420px) {
  .tr-dict-toggle { grid-template-columns: 1fr auto 18px; }
  .tr-dict-back { display: none; }
}

/* ---------- Shown to everyone (onfiremobile-dyb3s) ---------- */
.tr-head-end { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tr-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--call-border, rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  background: none;
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.tr-share:hover { background: var(--fg-e8-a08); color: var(--call-text, #e3e3e3); }
.tr-share:active { transform: scale(0.97); }
.tr-share:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.tr-share.is-on {
  border-color: transparent;
  background: var(--call-accent, #FF6B1F);
  color: var(--on-fill, #fff);
}
.tr-share.is-on:hover { filter: brightness(1.06); }
.tr-share.hidden, .tr-share-bar.hidden { display: none; }

.tr-share-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 8px 8px 12px;
  border-radius: 12px;
  background: var(--accent-a10);
  color: var(--call-text, #e3e3e3);
  font-size: 13px;
  line-height: 1.35;
  animation: tr-fade-in 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tr-share-bar > svg { flex: none; color: var(--call-accent, #FF6B1F); }
.tr-share-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tr-share-act {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: var(--fg-e8-a08);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.tr-share-act:hover { background: var(--accent-a22); }
.tr-share-act:active { transform: scale(0.97); }
.tr-share-act:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.tr-sheet.is-following .tr-input { cursor: default; }

/* Phones: full-width sheet, no resize */
@media (max-width: 600px) {
  .tr-sheet { width: 100% !important; border-left: none; }
  .tr-grip { display: none; }
  .tr-body { padding-left: 16px; padding-right: 16px; }
  .tr-head { padding-left: 16px; }
  /* Icon only on a phone: the title keeps its room. */
  .tr-share { width: 36px; padding: 0; justify-content: center; }
  .tr-share-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-sheet, .tr-sheet.is-open { transition: none; }
  .tr-swap svg, .tr-combo-chevron { transition: none; }
  .tr-combo-list { animation: none; }
  .tr-meta, .tr-dict, .tr-dict-detail, .tr-skel, .tr-share-bar { animation: none; }
  .tr-share, .tr-share-act { transition: none; }
  .tr-dict-chev { transition: none; }
}

/* ===== /speaker-glow.css ===== */
/* speaker-glow.css — active-speaker highlight for .participant-tile.
   --speak-level (0..1) is set by speaker-glow.js from the LiveKit audioLevel. */

.participant-tile {
  transition: box-shadow 200ms ease-out, border-color 200ms ease-out;
}

/* Inner ring: drawn above the video (tiles clip with overflow:hidden). */
.participant-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 3px solid var(--call-accent, #FF6B1F);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 200ms ease-out;
}

.participant-tile.is-speaking {
  /* Paint the glow over neighbouring tiles (the grid clips its outer edge). */
  z-index: 2;
  border-color: transparent;
  box-shadow:
    0 0 0 1px var(--glow-accent-a55),
    0 0 calc(10px + 16px * var(--speak-level, 0.5)) calc(1px + 3px * var(--speak-level, 0.5)) rgba(var(--glow-accent-rgb), calc(0.30 + 0.35 * var(--speak-level, 0.5))),
    0 24px 48px -12px var(--shadow-a50);
}

.participant-tile.is-speaking::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .participant-tile,
  .participant-tile::after {
    transition: none;
  }
  .participant-tile.is-speaking {
    box-shadow:
      0 0 0 1px var(--glow-accent-a55),
      0 0 22px 4px var(--glow-accent-a45),
      0 24px 48px -12px var(--shadow-a50);
  }
}

/* ===== /presenting.css ===== */
/* presenting.css — "You're presenting" outline + pill (presenting.js,
   onfiremobile-1diys.5) and the presenter's filmstrip tag
   (onfiremobile-1diys.3). The call screen is dark-only (style.css :root), so
   one palette serves both OS colour schemes: the ring is the brand accent
   (#FF6B1F) and the pill is a dark call surface with light ink. */

/* ---------- Breathing outline around the call viewport ---------- */
.ofpr-frame {
  position: fixed;
  inset: 0;
  z-index: 90; /* above the call UI; never blocks it (pointer-events: none) */
  pointer-events: none;
  display: none;
  box-shadow: inset 0 0 0 3px var(--call-accent, #FF6B1F);
}

.ofpr-frame.ofpr-on {
  display: block;
}

/* The glow breathes on its own layer: only opacity animates (compositor). */
.ofpr-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 1px var(--gold-a35),
    inset 0 0 22px 6px var(--glow-accent-a55);
  opacity: 0.35;
  animation: ofpr-breathe 2s ease-in-out infinite;
}

@keyframes ofpr-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ---------- Pill: reserved band at the bottom of the stage ---------- */
#screen-call.ofpr-presenting .call-stage {
  padding-bottom: 52px;
}

.ofpr-pill {
  position: absolute; /* in .call-main, which spans the call area's height */
  left: 50%;
  bottom: calc(80px + 6px + env(safe-area-inset-bottom));
  z-index: 25; /* above the stage, below the control bar's popovers (30) */
  display: none;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  height: 40px;
  padding: 0 4px 0 14px;
  border-radius: 999px;
  background: var(--inverse-glass-2);
  border: 1px solid var(--accent-a55);
  box-shadow: 0 8px 24px var(--shadow-a45);
  color: var(--call-text, #e3e3e3);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}

.ofpr-pill.ofpr-on {
  display: flex;
  animation: ofpr-pill-in 220ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes ofpr-pill-in {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.98); }
  to { opacity: 1; transform: translateX(-50%); }
}

.ofpr-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--call-accent, #FF6B1F);
  box-shadow: 0 0 0 3px var(--glow-accent-a25);
  animation: ofpr-breathe 2s ease-in-out infinite;
}

.ofpr-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ofpr-stop {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 100ms var(--call-ease, ease-out);
}

.ofpr-stop:hover { background: var(--call-accent-hover, #ff7f3d); }
.ofpr-stop:active { background: var(--call-accent-pressed, #e85a10); transform: scale(0.96); }
.ofpr-stop:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.ofpr-stop:disabled { opacity: 0.6; cursor: progress; }

.ofpr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 380px) {
  .ofpr-pill { gap: 8px; padding-left: 12px; font-size: 13px; }
  .ofpr-stop { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ofpr-frame::after,
  .ofpr-dot {
    animation: none;
    opacity: 0.8;
  }
  .ofpr-pill.ofpr-on { animation: none; }
}

/* ---------- Filmstrip: the remote presenter's camera tile (app.js tags it) ---------- */
.participants-grid.strip-mode .participant-tile.is-presenter {
  border-color: var(--accent-a60);
}

.participants-grid.strip-mode .participant-tile.is-presenter::before {
  /* Text set (translated) by presenting.js; English fallback. */
  content: var(--ofpr-presenting-label, 'Presenting');
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  pointer-events: none;
}

/* ---------- Share mini view (share-mini.js, onfiremobile-dzjnd.3) ---------- */
/* "No sound": Share sound was on, the browser / OS gave none. Quiet, no toast. */
.ofpr-note {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  color: var(--call-text-muted, #a8abaf);
}
.ofpr-note[hidden],
.ofpr-mini[hidden] { display: none; }

/* "Mini view": re-open the floating mini window in one click. */
.ofpr-mini {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--call-surface, #3c4043);
  color: var(--call-text, #e3e3e3);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 100ms var(--call-ease, ease-out);
}
.ofpr-mini:hover { background: var(--call-surface-hover, #4a4e52); }
.ofpr-mini:active { transform: scale(0.94); }
.ofpr-mini:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ofpr-mini { transition: none; }
  .ofpr-mini:active { transform: none; }
}

/* ===== /private-chat.css ===== */
/* private-chat.css: recipient picker + private message styling (private-chat.js) */

/* ---- Recipient bar ------------------------------------------------------ */
.pc-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 8px 12px 0;
}

.pc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  height: 28px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--call-card, #282a2c);
  color: var(--text-icon);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 1;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.pc-pill:hover { background: var(--surface-pill-hover); color: var(--text-strong); }
.pc-pill:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}
.pc-pill-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pc-pill-label strong { font-weight: 600; color: var(--call-text, #e3e3e3); }
.pc-pill-lock { display: none; color: var(--call-accent, #FF6B1F); flex: 0 0 auto; }
.pc-pill-chev { display: inline-flex; flex: 0 0 auto; color: var(--text-dim); transition: transform 150ms cubic-bezier(0.2, 0, 0, 1); }
.pc-pill[aria-expanded="true"] .pc-pill-chev { transform: rotate(180deg); }

.pc-pill.pc-private {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  border-color: var(--accent-a55);
  color: var(--call-accent-text, #ffb38a);
}
.pc-pill.pc-private:hover { background: var(--call-accent-soft-hover, rgba(255, 107, 31, 0.24)); }
.pc-pill.pc-private strong { color: var(--accent-text-soft); }
.pc-pill.pc-private .pc-pill-lock { display: inline-flex; }
.pc-pill.pc-private .pc-pill-chev { color: var(--call-accent-text, #ffb38a); }
.pc-pill-priv { font-weight: 400; }

/* Input area gets an orange edge while a private recipient is selected. */
.chat-input-area.pc-private,
.chat-input-area.pc-private:focus-within {
  border-color: var(--accent-a60);
}
.chat-input-area.pc-private .chat-input::placeholder { color: var(--accent-text-a70); }
.chat-file-btn.pc-disabled { opacity: 0.35; cursor: not-allowed; }
.chat-file-btn.pc-disabled:hover { background: transparent; color: var(--call-text-muted, #a8abaf); }

/* Inline note ("Dana left the call…"). */
.pc-note {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-icon);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.pc-note.pc-note-on { opacity: 1; transform: none; }

/* ---- Dropdown ----------------------------------------------------------- */
.pc-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: min(296px, calc(100vw - 24px));
  max-height: min(360px, 55vh);
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 12px 32px var(--shadow-a45);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transform-origin: bottom left;
  transition: opacity 140ms ease-out, transform 160ms cubic-bezier(0.2, 0, 0, 1);
}
.pc-menu[hidden] { display: none; }
.pc-menu.pc-open { opacity: 1; transform: none; }

.pc-search {
  margin: 2px 2px 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-panel, #1e1f20);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.pc-search:focus { border-color: var(--accent-a60); }
.pc-search[hidden] { display: none; }

.pc-list {
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--call-border, #3c4043) transparent;
}

.pc-sep {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pc-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.pc-opt:hover { background: var(--fg-a06); }
.pc-opt:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: -2px; }
.pc-opt[aria-selected="true"] { background: var(--fg-a04); }
.pc-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface-avatar);
  color: var(--call-text, #e3e3e3);
  font-size: 12px;
  font-weight: 600;
}
.pc-opt-all .pc-av { background: var(--fg-a08); color: var(--text-icon); }
.pc-opt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-opt-check { display: inline-flex; flex: 0 0 auto; color: var(--call-accent, #FF6B1F); width: 16px; }

.pc-empty { padding: 8px 10px 10px; font-size: 13px; color: var(--text-dim); }

.pc-foot {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 10px 4px;
  border-top: 1px solid var(--fg-a06);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-dim);
}
.pc-foot svg { flex: 0 0 auto; margin-top: 1px; }

/* ---- Private messages in the list -------------------------------------- */
.pc-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--call-accent-text, #ffb38a);
}
.pc-label strong { font-weight: 600; }
.chat-msg.self .pc-label { justify-content: flex-end; }

.chat-msg-bubble.pc-bubble {
  border: 1px dashed var(--accent-a55);
}
.chat-msg.self .chat-msg-bubble.pc-bubble {
  border-color: var(--accent-a70);
}
.chat-msg.pc-failed .chat-msg-bubble { opacity: 0.6; }
.chat-msg.pc-failed .chat-msg-time span:first-child { color: var(--danger-text); }

/* "Reply privately" action (private and peer messages). */
.chat-msg-time .pc-reply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--call-accent-text, #ffb38a);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 150ms ease-out, background-color 150ms ease-out;
}
.chat-msg:hover .pc-reply,
.chat-msg .pc-reply:focus-visible,
.chat-msg.pc-msg .pc-reply { opacity: 1; }
.chat-msg .pc-reply:hover { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); }
.chat-msg .pc-reply:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 1px; }
@media (hover: none) {
  .chat-msg .pc-reply { opacity: 0.75; }
}

/* ---- Toast -------------------------------------------------------------- */
.pc-toast {
  position: fixed;
  top: 76px;
  right: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  background: var(--inverse-toast-2);
  border: 1px solid var(--accent-a45);
  box-shadow: 0 8px 24px var(--shadow-a35);
  color: var(--text-strong);
  font-size: 14px;
  animation: pc-toast-in 180ms ease-out;
}
.pc-toast-ic { display: inline-flex; color: var(--call-accent, #FF6B1F); flex: 0 0 auto; }
.pc-toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-toast-open {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pc-toast-open:hover { background: var(--call-accent-hover, #ff7f3d); }
.pc-toast-x {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pc-toast-x:hover { color: var(--text-strong); background: var(--fg-a08); }
.pc-toast-open:focus-visible,
.pc-toast-x:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.pc-toast.pc-toast-out { animation: pc-toast-out 200ms ease-in forwards; }

@keyframes pc-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes pc-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 599px) {
  .pc-toast {
    left: 16px;
    right: 16px;
    top: max(16px, env(safe-area-inset-top));
    max-width: none;
  }
  .pc-toast-text { flex: 1 1 auto; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-menu, .pc-note, .pc-pill-chev { transition: none; }
  .pc-toast, .pc-toast.pc-toast-out { animation: none; }
}

/* ===== /tile-actions.css ===== */
/* tile-actions.css — tile hover actions, unread private-message bubble and the
   "asks you to turn on your camera" prompt (tile-actions.js; onfiremobile-2bzmp.2 /
   .8 / .9). Classes are prefixed `ta-`. Every colour is a theme token
   (tests/theme-tokens.test.js); tiles are media islands and stay dark. */

/* ---- Tile actions (hover; touch: tap the tile) ---------------------------- */

.ta-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1), transform 220ms cubic-bezier(0.2, 0, 0, 1);
  z-index: 3;
}
/* Below call-cameras' pin / ⋯ when a tile has them. */
.participant-tile:has(> .cams-tile-tools) > .ta-tools { top: 46px; }
.participant-tile:hover > .ta-tools,
.participant-tile:focus-within > .ta-tools,
.participant-tile.ta-reveal > .ta-tools {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.ta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--fg-a10);
  border-radius: 16px;
  background: var(--media-button, rgba(32, 33, 36, 0.85));
  color: var(--media-white, #ffffff);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.ta-btn svg { flex: 0 0 auto; }
.ta-btn:hover { background: var(--media-button-hover, rgba(60, 64, 67, 0.95)); }
.ta-btn:active { transform: scale(0.95); }
.ta-btn.ta-ask {
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  border-color: transparent;
}
.ta-btn.ta-ask:hover { background: var(--call-accent-hover, #ff7f3d); }
.ta-btn:focus-visible,
.ta-unread:focus-visible,
.ta-pill:focus-visible {
  outline: 2px solid var(--call-focus, #8ab4f8);
  outline-offset: 2px;
}

/* Small tiles (filmstrip, speaker thumbnails, phones): round icon buttons. */
.strip-mode .ta-btn,
.lv-thumb .ta-btn,
.stage-main-on .participants-grid .ta-btn,
.cams-spotlight .participant-tile:not(:first-child) .ta-btn {
  width: 32px;
  padding: 0;
  justify-content: center;
}
.strip-mode .ta-btn-label,
.lv-thumb .ta-btn-label,
.stage-main-on .participants-grid .ta-btn-label,
.cams-spotlight .participant-tile:not(:first-child) .ta-btn-label { display: none; }
@media (max-width: 600px) {
  .ta-btn { width: 32px; padding: 0; justify-content: center; }
  .ta-btn-label { display: none; }
}

/* ---- Unread private message on the sender's tile -------------------------- */

.ta-unread {
  position: absolute;
  left: 16px;
  bottom: 60px;
  max-width: calc(100% - 32px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--accent-a45);
  border-radius: 17px;
  background: var(--media-label-2, rgba(30, 31, 32, 0.85));
  color: var(--media-white, #ffffff);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px var(--shadow-a35);
  z-index: 3;
}
/* Pop once: .ta-pop is dropped on animationend, so a tile moved in the DOM (speaker view puts
   the talker first) does not replay it. */
.ta-unread.ta-pop { animation: ta-bubble-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.ta-unread:hover { background: var(--media-button-hover, rgba(60, 64, 67, 0.95)); }
.ta-unread:active { transform: scale(0.97); }
.ta-unread-ic { display: inline-flex; color: var(--call-accent, #FF6B1F); flex: 0 0 auto; }
.ta-unread-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ta-unread-count {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}
.ta-unread:not(:has(.ta-unread-count)) { padding-right: 14px; }
/* Small tiles: icon (+ count) only, at the top left. */
.strip-mode .ta-unread,
.lv-thumb .ta-unread,
.cams-spotlight .participant-tile:not(:first-child) .ta-unread {
  top: 8px;
  bottom: auto;
  left: 8px;
  height: 30px;
  padding: 0 8px;
}
.strip-mode .ta-unread-text,
.lv-thumb .ta-unread-text,
.cams-spotlight .participant-tile:not(:first-child) .ta-unread-text { display: none; }
@media (max-width: 600px) {
  .ta-unread { bottom: 52px; left: 10px; max-width: calc(100% - 20px); }
}
@keyframes ta-bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* ---- People list: an OFF camera / mic you can ask about -------------------- */

.sp-state-btn.sp-ask { opacity: 1; }
.sp-state-btn.sp-ask:hover {
  background: var(--accent-a18);
  color: var(--call-accent, #FF6B1F);
}

/* ---- "<Host> asks you to turn on your camera" ------------------------------ */

.ta-prompt-layer {
  position: fixed;
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10002;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.ta-prompt {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 12px;
  width: min(420px, calc(100vw - 32px));
  padding: 14px 14px 12px 16px;
  border-radius: 20px;
  border: 1px solid var(--accent-a45);
  background: var(--inverse-toast-2);
  color: var(--text-strong);
  box-shadow: 0 16px 40px var(--shadow-a35);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.ta-prompt.ta-in { opacity: 1; transform: none; }
.ta-prompt.ta-out { opacity: 0; transform: translateY(-6px); transition-duration: 160ms; }
.ta-prompt-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-a18);
  color: var(--call-accent, #FF6B1F);
}
.ta-prompt-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
/* "This device can't share its screen." under the ask (onfiremobile-sk5tl.5). */
.ta-prompt-note {
  grid-column: 2;
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-a70);
}
.ta-prompt-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 120ms ease-out;
}
.ta-pill:active { transform: scale(0.97); }
.ta-pill-primary { background: var(--call-accent, #FF6B1F); color: var(--call-accent-ink, #1a1a1a); }
.ta-pill-primary:hover { background: var(--call-accent-hover, #ff7f3d); }
.ta-pill-ghost { background: transparent; color: var(--text-strong); border-color: var(--fg-a15); }
.ta-pill-ghost:hover { background: var(--fg-a08); }

@media (prefers-reduced-motion: reduce) {
  .ta-tools, .ta-prompt, .ta-btn, .ta-pill { transition: none; }
  .ta-unread.ta-pop { animation: none; }
}

/* ===== /effects.css ===== */
/* effects.css — "Effects for everyone" (see effects.js).
   All classes are prefixed `ofx-` so they can't collide with style.css.

   Stacking: the overlay (#ofx-layer, 80) sits above the call UI — stage,
   control bar + popovers (30), side panels (45), toasts / timer sheet (60),
   "Time's up" banner (70) — and below every modal / sheet that takes input:
   backgrounds sheet (900), poll / sign-in modals (1000), feedback +
   presence dialogs (1050-1100), side-panel confirms (10000). It never takes
   pointer events. The picker sheet (#ofx-sheet, 61) behaves like the timer
   sheet. */

/* ---------- Full-viewport overlay ---------- */
.ofx-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.ofx-layer * { pointer-events: none !important; }

.ofx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Caption ("🎉 Dana sent confetti") ---------- */
.ofx-caption {
  position: absolute;
  z-index: 3; /* above the effect canvas / medal scene */
  left: 50%;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--inverse-glass);
  border: 1px solid var(--fg-a08);
  box-shadow: 0 8px 24px var(--shadow-a45);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 240ms ease-out, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ofx-caption.ofx-in { opacity: 1; transform: translate(-50%, 0); }
.ofx-caption.ofx-out { opacity: 0; transform: translate(-50%, 6px); }

/* ---------- Medal ---------- */
.ofx-medal-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;
  box-sizing: border-box;
  --ofx-medal: min(38vmin, 240px);
  animation: ofx-fade-in 260ms ease-out both;
}
.ofx-medal-scene.ofx-out { animation: ofx-fade-out 650ms ease-in forwards; }
.ofx-dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, var(--fx-shade-a50) 0%, var(--fx-shade-a18) 45%, var(--fx-shade-a00) 75%);
}
.ofx-medal-stack {
  position: relative;
  width: var(--ofx-medal);
  height: calc(var(--ofx-medal) * 1.25);
}
.ofx-rays,
.ofx-glow {
  position: absolute;
  left: 50%;
  top: 64%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ofx-rays {
  width: calc(var(--ofx-medal) * 2.7);
  height: calc(var(--ofx-medal) * 2.7);
  background: repeating-conic-gradient(from 0deg,
    var(--fx-gold-a55) 0deg 6deg,
    var(--fx-gold-a00) 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.6) 38%, transparent 68%);
  mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0.6) 38%, transparent 68%);
  opacity: 0;
  animation: ofx-rays-in 700ms ease-out 150ms forwards, ofx-spin 16s linear infinite;
}
.ofx-glow {
  width: calc(var(--ofx-medal) * 1.9);
  height: calc(var(--ofx-medal) * 1.9);
  background: radial-gradient(circle, var(--fx-gold-a60) 0%, var(--fx-orange-a22) 38%, var(--fx-orange-a00) 70%);
  animation: ofx-glow 2.2s ease-in-out 300ms infinite alternate;
}
.ofx-medal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 14px 28px var(--fx-shade-a45));
  transform-origin: 50% 64%;
  animation: ofx-spring 900ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ofx-shine {
  transform-box: fill-box;
  transform-origin: center;
  animation: ofx-shine 1.6s ease-in-out 900ms both;
}
.ofx-medal-text {
  position: relative;
  margin-top: 8px;
  text-align: center;
  max-width: calc(100vw - 32px);
  animation: ofx-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 500ms both;
}
.ofx-medal-title {
  display: block;
  font-size: clamp(30px, 6.2vw, 60px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  background: linear-gradient(180deg, var(--fx-gold-light) 0%, var(--fx-gold) 55%, var(--fx-gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 10px var(--fx-shade-a55));
}
.ofx-medal-name {
  display: block;
  margin-top: 6px;
  font-size: clamp(20px, 3.6vw, 32px);
  font-weight: 700;
  color: var(--fx-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 12px var(--fx-shade-a60);
}

/* ---------- Praying hands (the medal's scene, 🙏 in its place) ---------- */
.ofx-pray-stack { height: var(--ofx-medal); }
.ofx-pray-stack .ofx-rays,
.ofx-pray-stack .ofx-glow { top: 50%; }
.ofx-pray-stack .ofx-rays {
  background: repeating-conic-gradient(from 0deg,
    var(--fx-gold-a55) 0deg 3deg,
    var(--fx-gold-a00) 3deg 15deg);
}
.ofx-pray-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--ofx-medal) * 0.8);
  line-height: 1;
  filter: drop-shadow(0 12px 26px var(--fx-shade-a45));
  animation: ofx-pray-in 1100ms cubic-bezier(0.22, 1, 0.36, 1) both, ofx-pray-breathe 2.4s ease-in-out 1100ms infinite alternate;
}
@keyframes ofx-pray-in {
  0%   { opacity: 0; transform: translateY(18%) scale(0.6); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ofx-pray-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* ---------- Message effects + GIF (onfiremobile-2bzmp.6 / .10) ----------
   DOM scenes: inline SVG artwork (theme-invariant, like the medal) and the
   message in a pennant / bubble / LED sign. Only transforms and opacity
   animate. Each scene gets .ofx-out ~700 ms before it ends. */
.ofx-glyph { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; }
.ofx-caption.ofx-caption-top { bottom: auto; top: calc(72px + env(safe-area-inset-top, 0px)); }

/* Hot-air balloon: rises from bottom-left, lingers mid-screen to be read, leaves top-right. */
.ofx-ha-scene {
  position: absolute;
  inset: 0;
  --ofx-ha: min(30vmin, 190px);
  animation: ofx-fade-in 300ms ease-out both;
}
.ofx-ha-scene.ofx-out { animation: ofx-fade-out 650ms ease-in forwards; }
.ofx-ha {
  position: absolute;
  left: 50%;
  top: 100%;
  animation: ofx-ha-fly var(--ofx-dur, 7600ms) both;
}
.ofx-ha-sway {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: ofx-ha-sway 2.6s ease-in-out infinite alternate;
}
.ofx-ha-svg {
  width: var(--ofx-ha);
  height: calc(var(--ofx-ha) * 1.45);
  overflow: visible;
  filter: drop-shadow(0 12px 22px var(--fx-shade-a35));
}
.ofx-ha-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ofx-flame 170ms ease-in-out infinite alternate;
}
.ofx-ha-sign {
  position: relative;
  max-width: min(72vw, 300px);
  margin-top: 18px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 6px;
  border-top: 4px solid var(--fx-cloth-edge);
  border-bottom: 4px solid var(--fx-cloth-edge);
  background: var(--fx-cloth);
  box-shadow: 0 8px 20px var(--fx-shade-a35);
  transform-origin: 50% -18px;
  animation: ofx-swing 1.9s ease-in-out infinite alternate;
}
.ofx-ha-sign::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -22px;
  width: 2px;
  height: 18px;
  background: var(--fx-rope);
  transform: translateX(-50%);
}
.ofx-ha-text {
  display: block;
  font: 700 clamp(15px, 2.2vw, 20px)/1.25 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: var(--fx-cloth-text);
  text-align: center;
  overflow-wrap: anywhere;
}
.ofx-cloud {
  position: absolute;
  left: 0;
  width: 120px;
  height: 36px;
  border-radius: 999px;
  background: var(--fx-white); /* solid: the whole cloud fades, so the puffs don't show seams */
  opacity: 0;
  animation: ofx-cloud var(--ofx-dur, 7600ms) linear both;
}
.ofx-cloud::before,
.ofx-cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.ofx-cloud::before { left: 18px; top: -26px; width: 54px; height: 54px; }
.ofx-cloud::after { left: 60px; top: -16px; width: 40px; height: 40px; }
.ofx-cloud-1 { top: 20%; --ofx-s: 1.1; animation-duration: calc(var(--ofx-dur, 7600ms) * 1.3); }
.ofx-cloud-2 { top: 52%; --ofx-s: 0.75; animation-delay: -1.8s; }
.ofx-cloud-3 { top: 74%; --ofx-s: 0.6; animation-delay: -3.4s; animation-duration: calc(var(--ofx-dur, 7600ms) * 1.15); }
@keyframes ofx-ha-fly {
  0%   { transform: translate(calc(-50% - 22vw), 0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  42%  { transform: translate(calc(-50% - 6vw), calc(-60vh - 50%)); animation-timing-function: linear; }
  70%  { transform: translate(calc(-50% + 4vw), calc(-68vh - 50%)); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.4); }
  100% { transform: translate(calc(-50% + 22vw), calc(-100vh - 100%)); }
}
@keyframes ofx-ha-sway {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}
@keyframes ofx-swing {
  from { transform: rotate(4deg); }
  to   { transform: rotate(-4deg); }
}
@keyframes ofx-flame {
  from { transform: scale(0.82, 0.72); }
  to   { transform: scale(1.08, 1.22); }
}
@keyframes ofx-cloud {
  0%   { opacity: 0; transform: translateX(-24vw) scale(var(--ofx-s, 1)); }
  18%  { opacity: 0.42; }
  82%  { opacity: 0.42; }
  100% { opacity: 0; transform: translateX(104vw) scale(var(--ofx-s, 1)); }
}

/* Panda: peeks in from the bottom-left corner, waves, the message in a speech bubble. */
.ofx-panda-scene {
  position: absolute;
  inset: 0;
  --ofx-panda: min(44vmin, 260px);
}
.ofx-panda {
  position: absolute;
  left: calc(var(--ofx-panda) * -0.04);
  bottom: calc(var(--ofx-panda) * -0.04);
  width: var(--ofx-panda);
  height: var(--ofx-panda);
  transform-origin: 0% 100%;
  animation: ofx-panda-in 900ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
    ofx-panda-bob 2.2s ease-in-out 900ms infinite alternate;
}
.ofx-panda-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 10px 24px var(--fx-shade-a45));
}
.ofx-panda-arm {
  transform-box: fill-box;
  transform-origin: 30% 95%;
  animation: ofx-wave 360ms ease-in-out 700ms 9 alternate both;
}
.ofx-panda-eyes,
.ofx-rb-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: ofx-blink 3.2s ease-in-out 1.2s infinite;
}
.ofx-bubble {
  position: absolute;
  left: calc(var(--ofx-panda) * 0.8);
  bottom: calc(var(--ofx-panda) * 0.86);
  max-width: min(60vw, 320px);
  padding: 12px 18px;
  box-sizing: border-box;
  border-radius: 22px;
  background: var(--fx-bubble);
  color: var(--fx-bubble-text);
  box-shadow: 0 10px 28px var(--fx-shade-a35);
  transform-origin: 0% 100%;
  animation: ofx-bubble-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 650ms both;
}
.ofx-bubble::after {
  /* the tail, towards the panda; under the text (the bubble's animation makes a stacking context) */
  content: '';
  position: absolute;
  z-index: -1;
  left: 12px;
  bottom: -7px;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: inherit;
  transform: rotate(52deg) skewX(18deg);
}
.ofx-bubble-text {
  display: block;
  font: 700 clamp(16px, 2.3vw, 21px)/1.3 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  overflow-wrap: anywhere;
}
.ofx-panda-scene.ofx-out .ofx-panda { animation: ofx-panda-out 620ms cubic-bezier(0.5, 0, 0.75, 0) forwards; }
.ofx-panda-scene.ofx-out .ofx-bubble { animation: ofx-bubble-out 300ms ease-in forwards; }
@keyframes ofx-panda-in {
  from { transform: translate(-62%, 78%) rotate(42deg); }
  to   { transform: translate(0, 0) rotate(10deg); }
}
@keyframes ofx-panda-bob {
  from { transform: translate(0, 0) rotate(10deg); }
  to   { transform: translate(0, -2%) rotate(7deg); }
}
@keyframes ofx-panda-out {
  from { transform: translate(0, 0) rotate(9deg); }
  to   { transform: translate(-62%, 80%) rotate(42deg); }
}
@keyframes ofx-wave {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(18deg); }
}
@keyframes ofx-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
@keyframes ofx-bubble-in {
  from { opacity: 0; transform: scale(0.3) translate(-10px, 14px); }
  to   { opacity: 1; transform: scale(1) translate(0, 0); }
}
@keyframes ofx-bubble-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.6); }
}

/* Robot: dances (120 bpm, 0.5 s a beat, starting with the first kick at 0.3 s) under an LED sign. */
.ofx-rb-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  --ofx-rb: min(28vmin, 180px);
}
.ofx-rb-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(100vw - 32px);
  animation: ofx-rb-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ofx-rb-scene.ofx-out .ofx-rb-stack { animation: ofx-rb-leave 600ms cubic-bezier(0.5, 0, 0.75, 0) forwards; }
.ofx-rb-sign {
  position: relative;
  max-width: min(84vw, 460px);
  margin-bottom: 16px;
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 14px;
  border: 3px dotted var(--fx-gold);
  background: var(--fx-led-bg);
  box-shadow: 0 0 0 3px var(--fx-led-bg), 0 0 26px var(--fx-led-glow), 0 12px 26px var(--fx-shade-a45);
  animation: ofx-rb-sign 0.5s ease-in-out 0.3s infinite alternate;
}
.ofx-rb-text {
  display: block;
  font: 700 clamp(16px, 2.4vw, 24px)/1.25 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.02em;
  color: var(--fx-led-text);
  text-align: center;
  text-shadow: 0 0 8px var(--fx-led-glow), 0 0 2px var(--fx-led-text);
  overflow-wrap: anywhere;
}
.ofx-rb-bot {
  position: relative;
  width: var(--ofx-rb);
  height: calc(var(--ofx-rb) * 1.25);
  animation: ofx-rb-bob 0.5s ease-in-out 0.3s infinite alternate;
}
.ofx-rb-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 10px 18px var(--fx-shade-a45));
}
.ofx-rb-upper,
.ofx-rb-svg .ofx-rb-head { transform-box: fill-box; transform-origin: 50% 100%; }
.ofx-rb-upper { animation: ofx-rb-twist 1s ease-in-out 0.3s infinite alternate; }
/* Scoped to the robot: .ofx-rb-head is also the reactions picker's "Effects for everyone" heading,
   which rocked with the robot's head (onfiremobile-0b004). */
.ofx-rb-svg .ofx-rb-head { animation: ofx-rb-tilt 1s ease-in-out 0.3s infinite alternate; }
.ofx-rb-arm { transform-box: fill-box; transform-origin: 50% 10%; }
.ofx-rb-arm-l { animation: ofx-rb-arm-l 0.5s ease-in-out 0.3s infinite alternate; }
.ofx-rb-arm-r { animation: ofx-rb-arm-r 0.5s ease-in-out 0.3s infinite alternate; }
.ofx-rb-leg { transform-box: fill-box; transform-origin: 50% 0%; }
.ofx-rb-leg-l { animation: ofx-rb-step 0.5s ease-in-out 0.3s infinite alternate; }
.ofx-rb-leg-r { animation: ofx-rb-step 0.5s ease-in-out 0.8s infinite alternate; }
.ofx-rb-bulb,
.ofx-rb-led { animation: ofx-rb-light 0.5s steps(1) 0.3s infinite alternate; }
.ofx-rb-led + .ofx-rb-led { animation-delay: 0.55s; }
.ofx-rb-led + .ofx-rb-led + .ofx-rb-led { animation-delay: 0.8s; }
.ofx-rb-floor {
  width: calc(var(--ofx-rb) * 1.4);
  height: 22px;
  margin-top: -14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--fx-led-glow) 0%, var(--fx-led-a00) 70%);
  animation: ofx-rb-floor 0.5s ease-in-out 0.3s infinite alternate;
}
.ofx-mnote {
  position: absolute;
  left: 50%;
  bottom: 62%;
  font-size: calc(var(--ofx-rb) * 0.17);
  line-height: 1;
  color: var(--fx-gold);
  text-shadow: 0 2px 6px var(--fx-shade-a45);
  opacity: 0;
  animation: ofx-mnote 1.8s ease-out infinite;
}
.ofx-mnote-1 { left: 6%; animation-delay: 0.4s; }
.ofx-mnote-2 { left: 84%; animation-delay: 0.9s; color: var(--fx-led-text); }
.ofx-mnote-3 { left: -4%; animation-delay: 1.5s; }
.ofx-mnote-4 { left: 92%; animation-delay: 2.1s; color: var(--fx-led-text); }
@keyframes ofx-rb-enter {
  from { opacity: 0; transform: translateY(40%) scale(0.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ofx-rb-leave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(30%) scale(0.6); }
}
@keyframes ofx-rb-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-7%); }
}
@keyframes ofx-rb-twist {
  from { transform: rotate(-6deg); }
  to   { transform: rotate(6deg); }
}
@keyframes ofx-rb-tilt {
  from { transform: rotate(9deg); }
  to   { transform: rotate(-11deg); }
}
@keyframes ofx-rb-arm-l {
  from { transform: rotate(14deg); }
  to   { transform: rotate(128deg); }
}
@keyframes ofx-rb-arm-r {
  from { transform: rotate(-128deg); }
  to   { transform: rotate(-14deg); }
}
@keyframes ofx-rb-step {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-8px) rotate(-5deg); }
}
@keyframes ofx-rb-light {
  from { opacity: 1; }
  to   { opacity: 0.3; }
}
@keyframes ofx-rb-sign {
  from { transform: scale(1) rotate(-1deg); }
  to   { transform: scale(1.03) rotate(1deg); }
}
@keyframes ofx-rb-floor {
  from { opacity: 0.55; transform: scaleX(0.92); }
  to   { opacity: 1; transform: scaleX(1.06); }
}
@keyframes ofx-mnote {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6) rotate(-10deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -96px) scale(1.1) rotate(14deg); }
}

/* GIF: big in the centre (shown once it has loaded), springs in, floats, leaves. */
.ofx-gif-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;
  box-sizing: border-box;
  opacity: 0;
}
.ofx-gif-scene.ofx-in { animation: ofx-fade-in 220ms ease-out both; }
.ofx-gif-scene.ofx-out { animation: ofx-fade-out 650ms ease-in forwards; }
.ofx-gif-glow {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(110vmin, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fx-gold-a55) 0%, var(--fx-orange-a22) 35%, var(--fx-orange-a00) 68%);
  opacity: 0.7;
  transform: translate(-50%, -50%);
}
.ofx-gif-pop { position: relative; }
.ofx-gif-scene.ofx-in .ofx-gif-pop { animation: ofx-gif-in 750ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ofx-gif-scene.ofx-out .ofx-gif-pop { animation: ofx-gif-out 600ms cubic-bezier(0.5, 0, 0.75, 0) forwards; }
.ofx-gif-card {
  width: min(78vw, 460px, calc(52vh * var(--ofx-gif-ar, 1)));
  aspect-ratio: var(--ofx-gif-ar, 1);
  padding: 6px;
  box-sizing: border-box;
  border-radius: 22px;
  background: var(--fx-white);
  box-shadow: 0 22px 50px var(--fx-shade-a55);
  animation: ofx-gif-float 2.6s ease-in-out 750ms infinite alternate;
}
.ofx-gif-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
@keyframes ofx-gif-in {
  0%   { opacity: 0; transform: translateY(30px) scale(0.25) rotate(-16deg); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(-3deg); }
}
@keyframes ofx-gif-out {
  from { opacity: 1; transform: translateY(0) scale(1) rotate(-3deg); }
  to   { opacity: 0; transform: translateY(-40px) scale(0.55) rotate(8deg); }
}
@keyframes ofx-gif-float {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-10px) rotate(1.5deg); }
}

/* ---------- Reduced-motion banner ---------- */
.ofx-static {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 22px 30px;
  border-radius: 24px;
  background: var(--inverse-glass-2);
  border: 1px solid var(--gold-a35);
  box-shadow: 0 16px 40px var(--shadow-a55);
  color: var(--text-strong);
  text-align: center;
  animation: ofx-static 2600ms ease-in-out forwards;
}
.ofx-static-emoji { font-size: 56px; line-height: 1; }
.ofx-static svg { width: 112px; height: 140px; }
.ofx-static-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--call-accent-2, #FFCE54);
}
.ofx-static-msg {
  /* The plane's banner message (peer data, set with textContent). */
  width: max-content; /* the card is shrink-to-fit at left: 50%: size it by the message */
  max-width: min(560px, calc(100vw - 92px));
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.ofx-static-gif {
  /* the GIF in the reduced-motion card (URL rebuilt from a GIPHY media URL) */
  display: block;
  width: min(64vw, 280px);
  aspect-ratio: var(--ofx-gif-ar, 1);
  object-fit: cover;
  border-radius: 14px;
}
.ofx-static-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- Effects row in the reactions picker (onfiremobile-847hl.4) ----------
   With the row, the picker pill becomes a two-row panel: emojis on top (they
   scroll sideways when the width is short), effects as a 3 x 2 grid below. */
.reactions-bar.ofx-has-row {
  flex-direction: column;
  align-items: stretch;
  row-gap: 6px;
  padding: 6px 8px 8px;
  border-radius: 20px;
  overflow: visible;
}
.reactions-bar.ofx-has-row .reactions-row {
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.reactions-bar.ofx-has-row .reactions-row::-webkit-scrollbar { display: none; }

.ofx-rb-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--call-border, #3c4043);
  min-width: 0;
}
.ofx-rb-row .hidden { display: none !important; }
.ofx-rb-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding-left: 4px;
}
.ofx-rb-icon { color: var(--call-accent, #FF6B1F); flex-shrink: 0; }
.ofx-rb-title { font-size: 13px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.ofx-rb-sub {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--call-text-muted, #a8abaf);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ofx-rb-more { width: 32px; height: 32px; margin-right: -2px; }
.ofx-rb-more[aria-expanded="true"] { color: var(--call-accent-text, #ffb38a); }

.ofx-rb-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* three chips a row; a short last row widens */
  gap: 6px;
}
.ofx-rb-grid > .ofx-chip { grid-column: span 2; }
.ofx-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-card, #282a2c);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms var(--call-ease, ease-out), background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out);
}
/* A last one alone on its row takes the row (seven effects with Praying,
   onfiremobile-xwhhe; ten with Drumroll, Ta-da and the Banner, onfiremobile-pg2u5);
   two on the last row share it (GIF… and Message…, onfiremobile-2bzmp). */
.ofx-rb-grid > .ofx-chip:last-child:nth-child(3n + 1),
.ofx-grid > .ofx-tile:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.ofx-rb-grid > .ofx-chip:last-child:nth-child(3n + 2),
.ofx-rb-grid > .ofx-chip:nth-last-child(2):nth-child(3n + 1) { grid-column: span 3; }
.ofx-chip:hover:not(:disabled) {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  border-color: var(--call-accent, #FF6B1F);
}
.ofx-chip:active:not(:disabled) { transform: scale(0.96); }
.ofx-chip:focus-visible,
.ofx-rb-more:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}
.ofx-chip:disabled { cursor: not-allowed; }
.ofx-chip:disabled .ofx-chip-emoji,
.ofx-chip:disabled .ofx-chip-label { opacity: 0.45; }
.ofx-chip-emoji { flex-shrink: 0; font-size: 18px; line-height: 1; }
.ofx-chip-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofx-chip-cd {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--call-text, #e3e3e3);
  background: conic-gradient(color-mix(in srgb, var(--call-bg, #131314) 70%, transparent) calc(var(--ofx-cd, 0) * 360deg), color-mix(in srgb, var(--call-bg, #131314) 20%, transparent) 0);
}
.ofx-chip.is-cooling .ofx-chip-cd { display: flex; }
.ofx-chip.is-cooling .ofx-chip-emoji,
.ofx-chip.is-cooling .ofx-chip-label { opacity: 0.16; }
.ofx-rb-note {
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--call-text-muted, #a8abaf);
}

@media (max-width: 599px) {
  .ofx-chip { height: 38px; padding: 0 8px; gap: 4px; font-size: 12px; }
  .ofx-chip-emoji { font-size: 16px; }
}

/* ---------- Picker sheet (popover on desktop, bottom sheet on phones) ---------- */
.ofx-sheet {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 61;
  width: 336px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 16px 40px var(--shadow-a55);
  color: var(--text-hi);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  animation: ofx-pop 180ms var(--call-ease, ease-out);
  transform-origin: bottom right;
}
.ofx-sheet.hidden { display: none; }
.ofx-sheet .hidden { display: none !important; }

.ofx-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -2px -6px 12px 0;
}
.ofx-head-text { flex: 1; min-width: 0; }
.ofx-back { margin: 0 2px 0 -8px; }
.ofx-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--text-strong); }
.ofx-sub { margin: 2px 0 0; font-size: 12px; color: var(--call-text-muted, #a8abaf); }

.ofx-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}
.ofx-icon-btn:hover { background: var(--fg-a08); color: var(--text-strong); }
.ofx-icon-btn:focus-visible,
.ofx-tile:focus-visible,
.ofx-select:focus-visible,
.ofx-switch:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}
.ofx-mute[aria-pressed="true"] { color: var(--call-accent-text, #ffb38a); }

.ofx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ofx-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 10px 4px 8px;
  border-radius: 14px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--fg-a03);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 150ms var(--call-ease, ease-out), background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out);
}
.ofx-tile:hover:not(:disabled) {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  border-color: var(--accent-a55);
  transform: translateY(-1px);
}
.ofx-tile:active:not(:disabled) { transform: scale(0.97); }
.ofx-tile:disabled { cursor: not-allowed; }
.ofx-tile:disabled .ofx-tile-emoji,
.ofx-tile:disabled .ofx-tile-label { opacity: 0.45; }
.ofx-tile-emoji { font-size: 32px; line-height: 1; }
.ofx-tile-label { font-size: 12px; font-weight: 500; }
.ofx-tile-cd {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  background: conic-gradient(var(--media-a55) calc(var(--ofx-cd, 0) * 360deg), var(--media-a12) 0);
}
.ofx-tile.is-cooling .ofx-tile-cd { display: flex; }

.ofx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.ofx-row-label { color: var(--call-text, #e3e3e3); font-size: 13px; }
.ofx-select {
  flex: 1;
  min-width: 0;
  max-width: 200px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 13px;
  color-scheme: var(--color-scheme);
}

/* ---------- The message and its carriers (onfiremobile-pg2u5, onfiremobile-2bzmp.10) ---------- */
.ofx-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 0;
}
.ofx-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
  color-scheme: var(--color-scheme);
  transition: border-color 150ms var(--call-ease, ease-out);
}
.ofx-banner > .ofx-input,
.ofx-gif-search { flex: none; width: 100%; }
.ofx-input::placeholder { color: var(--call-text-muted, #a8abaf); opacity: 1; }
.ofx-input:focus { outline: none; border-color: var(--call-accent, #FF6B1F); }
.ofx-input:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 1px; }
.ofx-carriers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.ofx-carrier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 62px;
  padding: 8px 2px 6px;
  border-radius: 14px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--fg-a03);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms var(--call-ease, ease-out), background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out);
}
.ofx-carrier:hover:not(:disabled) {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  border-color: var(--accent-a55);
  transform: translateY(-1px);
}
.ofx-carrier:active:not(:disabled) { transform: scale(0.96); }
.ofx-carrier:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.ofx-carrier:disabled { cursor: not-allowed; }
.ofx-carrier:disabled .ofx-carrier-emoji,
.ofx-carrier:disabled .ofx-carrier-label { opacity: 0.45; }
.ofx-carrier-emoji { font-size: 24px; line-height: 1; }
.ofx-carrier-label { max-width: 100%; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofx-carrier-cd {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-strong);
  background: conic-gradient(var(--media-a55) calc(var(--ofx-cd, 0) * 360deg), var(--media-a12) 0);
}
.ofx-carrier.is-cooling .ofx-carrier-cd { display: flex; }
.ofx-banner-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px;
  font-size: 12px;
  color: var(--call-text-muted, #a8abaf);
}
.ofx-banner-hint { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofx-banner-count { flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ---------- GIF view (onfiremobile-2bzmp.6) ---------- */
.ofx-view-gif.is-cooling::before {
  content: attr(data-cd);
  display: block;
  margin: -4px 0 8px;
  font-size: 12px;
  color: var(--call-accent-text, #ffb38a);
}
.ofx-gif-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 88px;
  gap: 6px;
  max-height: min(46vh, 300px);
  margin-top: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
}
.ofx-gif-grid:empty { display: none; }
.ofx-gif-item {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fg-a06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms var(--call-ease, ease-out), opacity 150ms var(--call-ease, ease-out);
}
.ofx-gif-item:hover:not(:disabled) { transform: scale(1.04); }
.ofx-gif-item:active:not(:disabled) { transform: scale(0.97); }
.ofx-gif-item:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.ofx-gif-item:disabled { cursor: not-allowed; opacity: 0.45; }
.ofx-gif-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.ofx-gif-skel {
  border-radius: 10px;
  background: linear-gradient(90deg, var(--fg-a05) 0%, var(--fg-a12) 50%, var(--fg-a05) 100%);
  background-size: 200% 100%;
  animation: ofx-skel 1.2s ease-in-out infinite;
}
.ofx-gif-status {
  margin: 14px 0 4px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--call-text-muted, #a8abaf);
}
.ofx-gif-credit {
  margin: 10px 2px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: right;
  color: var(--call-text-muted, #a8abaf);
}
@keyframes ofx-skel {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

.ofx-host {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--call-border, #3c4043);
}
.ofx-host .ofx-row { margin-top: 0; }
.ofx-switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: var(--switch-off);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out);
}
.ofx-switch[aria-checked="true"] { background: var(--call-accent, #FF6B1F); }
.ofx-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--switch-knob);
  transition: transform 150ms var(--call-ease, ease-out);
}
.ofx-switch[aria-checked="true"] .ofx-switch-knob { transform: translateX(16px); }

.ofx-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--call-text-muted, #a8abaf);
}

/* Reactions at the top of the sheet (the bar's 😊 opens it, onfiremobile-0b004). */
.ofx-emojis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 2px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--call-border, #3c4043);
}
.ofx-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ofx-emoji:hover { background: var(--fg-a06, rgba(255, 255, 255, 0.06)); }
.ofx-emoji:active { transform: scale(0.9); }
.ofx-emoji:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 1px; }

@media (max-width: 599px) {
  .ofx-sheet {
    left: 16px;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    transform-origin: bottom center;
  }
  .ofx-caption { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }
  .ofx-tile { min-height: 78px; }
  .ofx-emojis { grid-template-columns: repeat(10, 1fr); gap: 0; }
  .ofx-emoji { height: 40px; font-size: 22px; }
}

/* ---------- Keyframes ---------- */
@keyframes ofx-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ofx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ofx-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ofx-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ofx-rays-in { from { opacity: 0; } to { opacity: 0.95; } }
@keyframes ofx-glow {
  from { opacity: 0.75; transform: translate(-50%, -50%) scale(0.94); }
  to   { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes ofx-spring {
  0%   { opacity: 0; transform: scale(0.2) rotate(-14deg); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes ofx-shine {
  from { transform: translateX(-160%) skewX(-20deg); }
  to   { transform: translateX(260%) skewX(-20deg); }
}
@keyframes ofx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ofx-static {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ofx-sheet,
  .ofx-medal-scene,
  .ofx-medal-svg,
  .ofx-rays,
  .ofx-glow,
  .ofx-shine,
  .ofx-medal-text,
  .ofx-pray-emoji,
  .ofx-gif-skel { animation: none; }
  .ofx-rays { opacity: 0.6; }
  .ofx-caption,
  .ofx-tile,
  .ofx-chip,
  .ofx-switch,
  .ofx-switch-knob,
  .ofx-icon-btn { transition: opacity 200ms linear; }
  .ofx-tile:hover:not(:disabled) { transform: none; }
  .ofx-chip:active:not(:disabled) { transform: none; }
  .ofx-input,
  .ofx-carrier,
  .ofx-gif-item { transition: opacity 200ms linear; }
  .ofx-carrier:hover:not(:disabled),
  .ofx-carrier:active:not(:disabled),
  .ofx-gif-item:hover:not(:disabled),
  .ofx-gif-item:active:not(:disabled) { transform: none; }
  /* The scenes never mount under reduced motion (a static card plays instead); belt and braces: */
  .ofx-ha-scene *, .ofx-panda-scene *, .ofx-rb-scene *, .ofx-gif-scene * { animation: none !important; }
}

/* ===== /device-test.css ===== */
/*
 * device-test.css — "Test speaker & microphone" wizard (device-test.js).
 * Load after style.css / devices.css:
 *   <link rel="stylesheet" href="/device-test.css?v=1">
 *
 * The dialog is mounted on <body>, outside #screen-call; the call-screen
 * tokens (--call-menu, --call-text, …) come from theme.css :root, so the
 * dialog follows the light / dark theme. `color-scheme: var(--color-scheme)`
 * keeps native <select> popups and scrollbars in step with it.
 */

/* ---- Entry points ------------------------------------------------------ */
.dt-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 18px 8px 14px;
  border: 1px solid var(--border-color, rgba(55, 65, 81, 0.5));
  border-radius: 999px;
  background: var(--fg-a04);
  color: var(--call-accent-text, #ffb38a);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out);
}

.dt-entry svg {
  flex-shrink: 0;
}

.dt-entry:hover {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  border-color: var(--call-accent, #FF6B1F);
}

.dt-entry:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

/* ⋮ menu item: phones only (desktop reaches it from the mic chevron). */
.more-menu-item.dt-menu-item {
  display: none;
}

@media (max-width: 599px) and (pointer: coarse) {
  .more-menu-item.dt-menu-item {
    display: flex;
  }
}

/* ---- Dialog shell ------------------------------------------------------ */
.dt-root {
  --dt-surface: var(--call-menu, #28292a);
  --dt-raised: rgba(255, 255, 255, 0.05);
  --dt-raised-hover: var(--call-menu-hover, #353739);
  --dt-border: var(--call-border, #3c4043);
  --dt-text: var(--call-text, #e3e3e3);
  --dt-text-2: var(--call-text-muted, #a8abaf);
  --dt-ease: var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
  position: fixed;
  inset: 0;
  z-index: 1060; /* above the sign-in modal (1000), below idle-guard (1100) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--scrim-a60);
  color-scheme: var(--color-scheme);
  opacity: 0;
  transition: opacity 200ms var(--dt-ease);
}

.dt-root.dt-in {
  opacity: 1;
}

.dt-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 460px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 20px 24px 24px;
  border: 1px solid var(--dt-border);
  border-radius: 24px;
  background: var(--dt-surface);
  box-shadow: 0 24px 64px var(--shadow-a55);
  color: var(--dt-text);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  transform: translateY(8px) scale(0.98);
  transition: transform 240ms var(--dt-ease);
}

.dt-root.dt-in .dt-dialog {
  transform: none;
}

.dt-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.dt-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dt-text);
}

.dt-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--dt-text-2);
  cursor: pointer;
  transition: background-color 150ms var(--dt-ease), color 150ms var(--dt-ease);
}

.dt-close:hover {
  background: var(--dt-raised-hover);
  color: var(--dt-text);
}

/* Progress: Speaker · Microphone */
.dt-steps {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.dt-steps[hidden] {
  display: none;
}

.dt-step {
  flex: 1 1 0;
  padding-top: 8px;
  border-top: 3px solid var(--dt-border);
  font-size: 12px;
  font-weight: 500;
  color: var(--dt-text-2);
  transition: border-color 200ms var(--dt-ease), color 200ms var(--dt-ease);
}

.dt-step-on {
  border-top-color: var(--call-accent, #FF6B1F);
  color: var(--dt-text);
}

.dt-step-done {
  border-top-color: var(--call-accent-pressed, #e85a10);
  color: var(--dt-text-2);
}

/* "You're muted while testing" */
.dt-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin: 0 0 16px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font-size: 13px;
  font-weight: 500;
}

.dt-chip[hidden] {
  display: none;
}

/* ---- Step body --------------------------------------------------------- */
.dt-body {
  display: flex;
  flex-direction: column;
}

.dt-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 0 14px;
  border-radius: 50%;
  background: var(--dt-raised);
  color: var(--call-accent-text, #ffb38a);
}

.dt-hero-live {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
}

.dt-hero-live .dt-wave {
  animation: dt-wave 1.2s var(--dt-ease) infinite;
}

.dt-hero-live .dt-wave-2 {
  animation-delay: 0.2s;
}

@keyframes dt-wave {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.dt-hero-rec {
  background: var(--danger-a18);
  color: var(--danger-text);
  animation: dt-pulse 1.4s ease-in-out infinite;
}

@keyframes dt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pulse-danger-a35); }
  50% { box-shadow: 0 0 0 10px var(--pulse-danger-a00); }
}

.dt-hero-ok {
  background: var(--green-a16);
  color: var(--color-success, #34C759);
}

.dt-q {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--dt-text);
  overflow-wrap: anywhere;
}

/* Focused programmatically on a step change (tabindex=-1) so screen readers
   start there; it is not a control, so no focus ring. */
.dt-q:focus {
  outline: none;
}

.dt-sub {
  min-height: 1.45em;
  margin: 6px 0 16px;
  color: var(--dt-text-2);
}

.dt-sub-warn {
  color: var(--warning-text);
}

.dt-hint {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--dt-raised);
  font-size: 13px;
  color: var(--dt-text-2);
}

/* ---- Device picker (native <select>, pill-styled) ---------------------- */
.dt-label {
  display: block;
  margin: 0 0 6px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dt-text-2);
}

.dt-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.dt-select-ico,
.dt-select-caret {
  position: absolute;
  top: 50%;
  display: inline-flex;
  transform: translateY(-50%);
  pointer-events: none;
}

.dt-select-ico {
  left: 14px;
  color: var(--call-accent-text, #ffb38a);
}

.dt-select-caret {
  right: 14px;
  color: var(--dt-text-2);
}

.dt-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 40px 0 44px;
  border: 1px solid var(--dt-border);
  border-radius: 999px;
  background: var(--dt-raised);
  color: var(--dt-text);
  font: inherit;
  font-size: 14px;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 150ms var(--dt-ease), border-color 150ms var(--dt-ease);
}

.dt-select:hover:not(:disabled) {
  background: var(--dt-raised-hover);
}

.dt-select:disabled {
  cursor: default;
  opacity: 0.65;
}

.dt-select option {
  background: var(--dt-surface);
  color: var(--dt-text);
}

/* ---- Meter -------------------------------------------------------------- */
.dt-meter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--dt-text-2);
}

.dt-meter-row > svg {
  flex-shrink: 0;
}

.dt-meter {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 3px;
  height: 18px;
  min-width: 0;
}

/* Segmented input-level bar (Zoom-style). */
.dt-seg {
  flex: 1 1 0;
  height: 8px;
  border-radius: 2px;
  background: var(--surface-tonal-hover);
  transition: background-color 80ms linear;
}

.dt-seg:first-child {
  border-radius: 999px 2px 2px 999px;
}

.dt-seg:last-child {
  border-radius: 2px 999px 999px 2px;
}

.dt-seg.on {
  background: var(--call-accent, #FF6B1F);
}

.dt-count {
  min-width: 2.5em;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--dt-text);
}

.dt-meter-live .dt-count::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--call-danger, #ea4335);
  vertical-align: 1px;
}

/* ---- Actions ----------------------------------------------------------- */
.dt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}

.dt-spacer {
  flex: 1 1 auto;
}

.dt-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.dt-more:empty {
  display: none;
}

.dt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 88px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms var(--dt-ease), border-color 150ms var(--dt-ease), color 150ms var(--dt-ease), transform 120ms var(--dt-ease);
}

.dt-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.dt-btn:focus-visible,
.dt-select:focus-visible,
.dt-close:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

.dt-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

.dt-btn-primary {
  background: var(--call-accent, #FF6B1F);
  color: var(--on-fill, #fff);
}

.dt-btn-primary:hover:not(:disabled) {
  background: var(--call-accent-hover, #ff7f3d);
}

.dt-btn-secondary {
  border-color: var(--dt-border);
  background: var(--dt-raised);
  color: var(--dt-text);
}

.dt-btn-secondary:hover:not(:disabled) {
  background: var(--dt-raised-hover);
}

.dt-btn-stop svg {
  color: var(--danger-text);
}

.dt-btn-ghost {
  min-width: 0;
  padding: 0 14px 0 12px;
  background: transparent;
  color: var(--call-accent-text, #ffb38a);
}

.dt-btn-ghost:hover:not(:disabled) {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
}

.dt-btn-link {
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  background: transparent;
  color: var(--call-accent-text, #ffb38a);
  font-size: 14px;
  font-weight: 500;
}

.dt-btn-link:hover:not(:disabled) {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
}

.dt-hint .dt-btn-link {
  height: 32px;
  margin: 2px 0 -6px -12px;
  vertical-align: baseline;
}

/* ---- Done --------------------------------------------------------------- */
.dt-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.dt-summary-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--dt-raised);
}

.dt-summary-row dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--dt-text-2);
}

.dt-summary-row dt svg {
  color: var(--call-accent-text, #ffb38a);
}

.dt-summary-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dt-text);
  font-weight: 500;
}


/* Screen-reader-only live region */
.dt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Phones: bottom sheet ----------------------------------------------- */
@media (max-width: 599px) {
  .dt-root {
    align-items: flex-end;
    padding: 0;
  }

  .dt-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 280ms var(--dt-ease);
  }

  .dt-dialog::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 999px;
    background: var(--dt-border);
  }

  .dt-hero {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
  }

  .dt-q {
    font-size: 18px;
  }

  /* Yes / No share the row; secondary actions wrap above them. */
  .dt-actions .dt-btn-primary,
  .dt-actions .dt-btn-secondary {
    flex: 1 1 0;
    min-width: 0;
  }

  /* A spacer after a ghost action breaks the row; a leading one is unused. */
  .dt-actions .dt-btn + .dt-spacer {
    flex-basis: 100%;
    height: 0;
  }

  .dt-actions .dt-spacer:first-child {
    display: none;
  }

  .dt-actions .dt-btn-ghost:first-child {
    margin-left: -12px;
  }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dt-root,
  .dt-dialog,
  .dt-step,
  .dt-seg,
  .dt-btn,
  .dt-entry {
    transition: none;
  }

  .dt-dialog,
  .dt-root.dt-in .dt-dialog {
    transform: none;
  }

  .dt-hero-live .dt-wave,
  .dt-hero-rec {
    animation: none;
  }

  .dt-btn:active:not(:disabled) {
    transform: none;
  }
}

/* ===== /mic-fx.css ===== */
/*
 * mic-fx.css — "Noise cancellation" (mic-fx.js, bead onfiremobile-pg2u5).
 * Load after devices.css / device-test.css:
 *   <link rel="stylesheet" href="/mic-fx.css?v=1">
 *
 * Three places: the mic popover (devices.js), the phone sheet (⋮ → Noise
 * cancellation) and, compact, the device-test.js microphone step. Colours
 * are theme tokens only (tests/theme-tokens.test.js).
 */

/* ---- Panel ------------------------------------------------------------- */
.mfx-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--call-border, #3c4043);
}

.mfx-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 4px;
}

.mfx-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-hi);
}

/* ---- Mode picker: one pill, three segments ------------------------------ */
.mfx-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--fg-a04);
}

.mfx-opt {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out),
    box-shadow 150ms var(--call-ease, ease-out);
}

.mfx-opt:hover:not(:disabled):not([aria-checked="true"]) {
  background: var(--fg-a06);
  color: var(--text-hi);
}

.mfx-opt[aria-checked="true"] {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  box-shadow: inset 0 0 0 1px var(--call-accent, #FF6B1F);
  color: var(--call-accent-text, #ffb38a);
}

.mfx-opt:disabled {
  cursor: default;
  opacity: 0.6;
}

.mfx-opt:focus-visible,
.mfx-cmp-opt:focus-visible,
.mfx-adv-toggle:focus-visible,
.mfx-switch:focus-visible,
.mfx-btn:focus-visible,
.mfx-link:focus-visible,
.mfx-sheet-close:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

.mfx-opt-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mfx-badge {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--accent-a18);
  color: var(--call-accent-text, #ffb38a);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 16px;
}

.mfx-desc {
  min-height: 2.8em; /* two lines: switching modes doesn't move what's below */
  margin: 8px 4px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
}

.mfx-note {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--warning-a14);
  color: var(--warning-text);
  font-size: 12px;
  line-height: 1.4;
}

.mfx-note[hidden],
.mfx-adv[hidden],
.mfx-row[hidden],
.mfx-adv-body[hidden],
.mfx-chip[hidden],
.mfx-meter[hidden],
.mfx-cmp[hidden],
.mfx-link[hidden] {
  display: none;
}

/* ---- Advanced ---------------------------------------------------------- */
.mfx-adv {
  margin-top: 6px;
}

.mfx-adv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px 0 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 150ms var(--call-ease, ease-out), background-color 150ms var(--call-ease, ease-out);
}

.mfx-adv-toggle:hover {
  color: var(--text-hi);
  background: var(--fg-a04);
}

.mfx-adv-toggle svg {
  transition: transform 180ms var(--call-ease, ease-out);
}

.mfx-adv-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.mfx-adv-body {
  padding: 2px 0 4px;
}

.mfx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px 8px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out);
}

.mfx-row:hover:not(.mfx-row-disabled) {
  background: var(--fg-a04);
}

.mfx-row-disabled {
  cursor: default;
}

.mfx-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mfx-row-label {
  font-size: 13px;
  color: var(--text-hi);
}

.mfx-row-hint {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-dim);
}

.mfx-row-disabled .mfx-row-label {
  color: var(--text-dim);
}

.mfx-switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--switch-off);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out);
}

.mfx-switch[aria-checked="true"] {
  background: var(--call-accent, #FF6B1F);
}

.mfx-switch:disabled {
  cursor: default;
  opacity: 0.5;
}

.mfx-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: 0 1px 2px var(--shadow-a30);
  transition: transform 180ms var(--call-ease, ease-out);
}

.mfx-switch[aria-checked="true"] .mfx-switch-knob {
  transform: translateX(16px);
}

/* ---- Test -------------------------------------------------------------- */
.mfx-test {
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--fg-a04);
}

.mfx-test-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
  margin-bottom: 8px;
}

.mfx-test-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.mfx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  background: var(--danger-a14);
  color: var(--danger-text);
  font-size: 12px;
  white-space: nowrap;
}

.mfx-test-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.mfx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 12px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}

.mfx-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.mfx-btn-primary {
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
}

.mfx-btn-primary:hover:not(:disabled) {
  background: var(--call-accent-hover, #ff7f3d);
}

.mfx-btn-primary.mfx-btn-rec {
  background: var(--call-danger, #ea4335);
  color: var(--on-fill);
}

.mfx-btn-primary.mfx-btn-rec:hover {
  background: var(--call-danger-hover, #d93025);
}

.mfx-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.mfx-meter {
  display: flex;
  flex: 1 1 80px;
  align-items: center;
  gap: 3px;
  height: 16px;
  min-width: 0;
}

.mfx-meter-seg {
  flex: 1 1 0;
  max-width: 10px;
  height: 6px;
  border-radius: 999px;
  background: var(--meter-off);
  transition: height 80ms linear, background-color 80ms linear;
}

.mfx-meter-seg.on {
  height: 14px;
  background: var(--call-accent, #FF6B1F);
}

/* Original / Strong (AI) on the same take */
.mfx-cmp {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
}

.mfx-cmp-opt {
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}

.mfx-cmp-opt:hover:not(:disabled):not([aria-checked="true"]) {
  background: var(--fg-a06);
  color: var(--text-hi);
}

.mfx-cmp-opt[aria-checked="true"] {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
}

.mfx-cmp-opt:disabled {
  cursor: default;
  opacity: 0.5;
}

.mfx-link {
  height: 30px;
  margin-left: auto;
  padding: 0 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--call-accent-text, #ffb38a);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.mfx-link:hover {
  background: var(--fg-a04);
}

.mfx-test-status {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
}

.mfx-test-status.mfx-test-err {
  color: var(--danger-text);
}

/* ---- Wizard (device-test.js microphone step) ----------------------------- */
.mfx-picker.dt-fx {
  margin-top: 16px;
}

.mfx-compact .mfx-head {
  margin: 0 0 6px 4px;
}

.mfx-compact .mfx-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-dim);
}

.mfx-compact .mfx-desc {
  min-height: 0;
}

/* ---- ⋮ menu item: phones only (desktop has the mic chevron) -------------- */
.more-menu-item.mfx-menu-item {
  display: none;
}

@media (max-width: 599px) and (pointer: coarse) {
  .more-menu-item.mfx-menu-item {
    display: flex;
  }
}

/* ---- Sheet ------------------------------------------------------------- */
.mfx-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 1060; /* the device-test wizard's layer */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--scrim-a60);
  color-scheme: var(--color-scheme);
  opacity: 0;
  transition: opacity 200ms var(--call-ease, ease-out);
}

.mfx-sheet-root.mfx-in {
  opacity: 1;
}

.mfx-sheet {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 6px 16px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid var(--call-border, #3c4043);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  background: var(--call-menu, #28292a);
  box-shadow: 0 -12px 40px var(--shadow-a45);
  color: var(--text-hi);
  font-size: 14px;
  text-align: left;
  transform: translateY(24px);
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.mfx-sheet-root.mfx-in .mfx-sheet {
  transform: none;
}

.mfx-sheet-head {
  position: relative;
  z-index: 1; /* above the panel's title row, which slides up beside it */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 36px;
}

.mfx-sheet-grab {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 999px;
  background: var(--fg-a20);
}

.mfx-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-icon);
  cursor: pointer;
}

.mfx-sheet-close:hover {
  background: var(--fg-a06);
}

.mfx-sheet .mfx-panel {
  margin-top: -22px; /* the title sits beside the close button */
  padding-top: 0;
  border-top: none;
}

.mfx-sheet .mfx-head {
  min-height: 36px;
  margin-bottom: 12px;
}

.mfx-sheet .mfx-title {
  font-size: 18px;
  font-weight: 600;
}

.mfx-sheet .mfx-opt {
  height: 40px;
}

/* Wider than a phone: a centred dialog rather than a bottom sheet. */
@media (min-width: 600px) {
  .mfx-sheet-root {
    align-items: center;
    padding: 16px;
  }

  .mfx-sheet {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--call-border, #3c4043);
    border-radius: 24px;
  }

  .mfx-sheet-grab {
    display: none;
  }
}

/* ---- Narrow ------------------------------------------------------------ */
@media (max-width: 599px) {
  .mfx-opt {
    padding: 0 6px;
    font-size: 13px;
  }

  .mfx-link {
    margin-left: 0;
  }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mfx-opt,
  .mfx-cmp-opt,
  .mfx-switch,
  .mfx-switch-knob,
  .mfx-adv-toggle svg,
  .mfx-btn,
  .mfx-meter-seg,
  .mfx-sheet-root,
  .mfx-sheet {
    transition: none;
  }
}

/* ===== /recording.css ===== */
/* recording.css — host recording / transcription controls + the badges every
   participant sees (see recording.js, bead onfiremobile-1diys.1). All classes
   are prefixed `rec-` so they can't collide with style.css. Colours come from
   the call-screen tokens (#screen-call) with literal fallbacks. */

#screen-call {
  /* White on #c5221f is 5.9:1 (AA for normal text); the lighter brand red
     #ea4335 is only 3.9:1, so it is used for tints and the dot, not for text. */
  --rec-red: var(--call-danger, #ea4335);
  --rec-red-strong: #c5221f;
  --rec-red-strong-hover: #b31412;
  --rec-red-tint: rgba(234, 67, 53, 0.2);
  --rec-red-line: rgba(242, 139, 130, 0.7);
  --rec-red-text: #f6aea9;
}

/* ---------- Top bar: host pill toggles + everyone's badges ---------- */
.rec-bar {
  display: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.rec-bar.has-any { display: inline-flex; }

/* Host toggles (1diys.9). Idle = a quiet pill like the duration pill; on = the
   red, pulsing status pill (it replaces the badge for the host). */
.rec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out),
              color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.rec-pill.hidden { display: none; }
.rec-pill:hover { background: var(--call-surface-hover, #3c4043); }
.rec-pill:active:not([aria-disabled="true"]) { transform: scale(0.96); }
.rec-pill:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.rec-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.rec-pill-recording:not(.is-on) .rec-pill-icon { color: var(--rec-red); }
.rec-pill.is-on {
  background: var(--rec-red-tint);
  border-color: var(--rec-red-line);
  color: var(--text-strong);
}
.rec-pill.is-on:hover { background: var(--danger-a32); }
.rec-pill.is-on .rec-pill-icon { color: var(--rec-red-text); }
.rec-pill-recording.is-on { animation: rec-pill-pulse 1.6s ease-in-out infinite; }
.rec-pill.is-busy { cursor: progress; opacity: 0.85; }
.rec-pill.needs-signin { opacity: 0.6; }
.rec-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: rec-spin 800ms linear infinite;
}
@keyframes rec-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pulse-danger-a45); }
  50%      { box-shadow: 0 0 0 4px var(--pulse-danger-a00); }
}

.rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 9px;
  border-radius: 999px;
  background: var(--rec-red-tint);
  border: 1px solid var(--rec-red-line);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  animation: rec-pop 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.rec-badge.hidden { display: none; }
.rec-badge svg { color: var(--rec-red-text); flex-shrink: 0; }
.rec-badge-tr { font-weight: 500; letter-spacing: 0.01em; }

.rec-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rec-red);
  box-shadow: 0 0 0 0 var(--pulse-danger-a60);
  animation: rec-pulse 1.6s ease-in-out infinite;
}

@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pulse-danger-a55); opacity: 1; }
  50%      { box-shadow: 0 0 0 5px var(--pulse-danger-a00); opacity: 0.75; }
}
@keyframes rec-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Notices (aria-live) ---------- */
.rec-toasts {
  position: fixed;
  top: 60px;
  left: 50%;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.rec-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 12px 32px var(--shadow-a45);
  color: var(--call-text, #e3e3e3);
  font-size: 14px;
  line-height: 1.35;
  pointer-events: auto;
  animation: rec-toast-in 240ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.rec-toast-error { border-color: var(--rec-red-line); }
.rec-toast-out { opacity: 0; transform: translateY(-6px); }
.rec-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rec-red-tint);
  color: var(--rec-red-text);
}
.rec-toast-text { min-width: 0; }

@keyframes rec-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Confirm dialog ---------- */
.rec-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.rec-dialog.hidden { display: none; }
.rec-dialog .hidden { display: none !important; }
.rec-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a55);
  animation: rec-fade 180ms ease-out;
}
.rec-dialog-sheet {
  position: relative;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 20px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 24px 60px var(--shadow-a60);
  color: var(--call-text, #e3e3e3);
  animation: rec-sheet-in 220ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.rec-dialog-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-strong);
}
.rec-dialog-body {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--call-text-muted, #a8abaf);
}
.rec-lang {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--call-text-muted, #a8abaf);
}
.rec-lang-select {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
}
.rec-lang-select:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.rec-dialog-error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--rec-red-tint);
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.4;
}
.rec-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.rec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.rec-btn:active:not(:disabled) { transform: scale(0.97); }
.rec-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.rec-btn:disabled { cursor: default; opacity: 0.7; }
.rec-btn-secondary {
  border: 1px solid var(--call-border, #3c4043);
  background: transparent;
  color: var(--call-text, #e3e3e3);
}
.rec-btn-secondary:hover:not(:disabled) { background: var(--fg-a08); }
.rec-btn-primary {
  border: none;
  background: var(--rec-red-strong);
  color: var(--on-fill);
}
.rec-btn-primary:hover:not(:disabled) { background: var(--rec-red-strong-hover); }
.rec-btn.is-busy::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--on-fill-a35);
  border-top-color: var(--on-fill);
  animation: rec-spin 800ms linear infinite;
}

@keyframes rec-spin { to { transform: rotate(360deg); } }
@keyframes rec-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rec-sheet-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Sharing (98heq.3): gear + popover ---------- */
.rec-gear {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}
.rec-gear.hidden { display: none; }
.rec-gear:hover { background: var(--call-surface-hover, #3c4043); color: var(--text-strong); }
.rec-gear[aria-expanded="true"] { color: var(--text-strong); border-color: var(--call-focus, #ff7f3d); }
.rec-gear:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.rec-gear-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--call-accent, #FF6B1F);
  box-shadow: 0 0 0 2px var(--call-bg, #131314);
}
.rec-gear-dot.hidden { display: none; }

.rec-share {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 75;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 16px 18px 14px;
  border-radius: 18px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 18px 48px var(--shadow-a55);
  color: var(--call-text, #e3e3e3);
  font-size: 14px;
  animation: rec-sheet-in 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.rec-share.hidden { display: none; }
.rec-share .hidden { display: none !important; }
.rec-share-head { display: flex; align-items: center; justify-content: space-between; margin: -4px -6px 4px 0; }
.rec-share-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.rec-share-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: transparent; color: var(--call-text-muted, #a8abaf); cursor: pointer;
}
.rec-share-close:hover { background: var(--fg-a08); color: var(--text-strong); }
.rec-share-close:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.rec-share-hint { margin: 0 0 12px; font-size: 13px; color: var(--call-text-muted, #a8abaf); }
.rec-share-locked {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 12px;
  background: var(--fg-a06); font-size: 13px;
}
.rec-share-block {
  margin: 0 0 14px;
  padding: 12px 0 0;
  border: none;
  border-top: 1px solid var(--call-border, #3c4043);
  min-width: 0;
}
.rec-share-legend { margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 600; color: var(--text-strong); }
.rec-share-sub { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--call-text-muted, #a8abaf); }

/* Private / Anyone with the link: a two-option segmented pill (native radios). */
.rec-seg {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--call-surface, #202124);
  border: 1px solid var(--call-border, #3c4043);
}
.rec-seg-opt { position: relative; flex: 1; display: flex; }
.rec-seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rec-seg-opt span {
  flex: 1; text-align: center; padding: 6px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--call-text-muted, #a8abaf);
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}
.rec-seg-opt input:checked + span { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); color: var(--call-accent-text, #ffb38a); }
.rec-seg-opt input:focus-visible + span { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 1px; }
.rec-seg-opt input:disabled { cursor: default; }
.rec-seg-opt input:disabled + span { opacity: 0.6; }

/* Password-protect switch (native checkbox, role=switch). */
.rec-switch { display: flex; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer; position: relative; }
.rec-switch input { position: absolute; opacity: 0; width: 36px; height: 20px; margin: 0; cursor: pointer; }
.rec-switch-track {
  position: relative; flex-shrink: 0; width: 36px; height: 20px; border-radius: 999px;
  background: var(--call-surface-hover, #3c4043);
  transition: background-color 150ms var(--call-ease, ease-out);
}
.rec-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--switch-knob); transition: transform 160ms var(--call-ease, ease-out);
}
.rec-switch input:checked + .rec-switch-track { background: var(--call-accent, #FF6B1F); }
.rec-switch input:checked + .rec-switch-track::after { transform: translateX(16px); }
.rec-switch input:focus-visible + .rec-switch-track { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.rec-switch-label { font-size: 13px; }
.rec-switch.is-disabled { cursor: default; opacity: 0.55; }
.rec-switch.is-disabled input { cursor: default; }

/* Recipients: chips + input. */
.rec-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 14px; min-height: 40px; box-sizing: border-box;
  border: 1px solid var(--call-border, #3c4043); background: var(--call-surface, #202124);
}
.rec-chips:focus-within { border-color: var(--call-focus, #ff7f3d); }
.rec-chip-list { display: contents; list-style: none; margin: 0; padding: 0; }
.rec-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--fg-a08); font-size: 12px;
}
.rec-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.rec-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: none; border-radius: 50%;
  background: transparent; color: var(--call-text-muted, #a8abaf); cursor: pointer;
}
.rec-chip-x:hover:not(:disabled) { background: var(--fg-a12); color: var(--text-strong); }
.rec-chip-x:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 1px; }
.rec-chip-x:disabled { cursor: default; opacity: 0.5; }
.rec-chip-input {
  flex: 1; min-width: 140px; height: 28px; border: none; outline: none; background: transparent;
  color: var(--call-text, #e3e3e3); font: inherit; font-size: 13px;
}
.rec-chip-input::placeholder { color: var(--call-text-muted, #a8abaf); }
.rec-share-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.rec-chip-count { font-size: 12px; color: var(--call-text-muted, #a8abaf); font-variant-numeric: tabular-nums; }
.rec-btn-small { height: 32px; padding: 0 14px; font-size: 13px; }
.rec-share-field-error { margin: 6px 0 0; font-size: 12px; color: var(--rec-red-text); }
.rec-share-status { margin: 0; min-height: 16px; font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.rec-share-status.is-error { color: var(--rec-red-text); }

/* ---------- Phones ---------- */
@media (max-width: 599px) {
  .rec-toasts { top: 52px; }
  .rec-gear { width: 32px; height: 32px; }
  .rec-share {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 82vh;
    border-radius: 20px 20px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .rec-chip-text { max-width: 180px; }
  .rec-dialog {
    align-items: flex-end;
    padding: 0;
  }
  .rec-dialog-sheet {
    max-width: none;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .rec-dialog-actions .rec-btn { flex: 1; height: 44px; }
}
/* Phone header: clock, info and status on the left, badges + duration + people
   on the right. Keep REC readable; the transcription badge becomes its CC icon
   (its aria-label / title still say "This call is being transcribed"). */
/* Phones: host toggles collapse to 32 px icon buttons (name in aria-label /
   title), badges keep REC readable and turn Transcribing into its CC icon. */
@media (max-width: 599px) {
  .rec-pill {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
  }
  .rec-pill-text { display: none; }
  .rec-pill-icon { width: 16px; height: 16px; }
  .rec-pill-icon svg { width: 16px; height: 16px; }
}
@media (max-width: 480px) {
  .call-meta:has(.rec-bar.has-any) { gap: 8px; }
  .rec-bar { gap: 4px; }
  .rec-badge { gap: 4px; padding: 0 7px; }
  .rec-badge-tr .rec-badge-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rec-dot,
  .rec-pill-recording.is-on,
  .rec-share { animation: none; }
  .rec-switch-track, .rec-switch-track::after, .rec-seg-opt span { transition: none; }
  .rec-spinner { animation-duration: 2.4s; }
  .rec-pill { transition: none; }
  .rec-pill:active:not([aria-disabled="true"]) { transform: none; }
  .rec-badge,
  .rec-toast,
  .rec-dialog-sheet,
  .rec-dialog-backdrop { animation: none; }
  .rec-toast { transition: opacity 150ms linear; }
  .rec-toast-out { transform: none; }
  .rec-btn { transition: none; }
  .rec-btn:active:not(:disabled) { transform: none; }
  .rec-btn.is-busy::before { animation-duration: 2.4s; }
}

/* Who gets the meeting summary (dialog + Sharing). */
.rec-summary { margin: 0 0 16px; padding: 0; border: none; min-width: 0; }
.rec-summary.hidden { display: none; }
.rec-share .rec-summary { margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--call-border, #3c4043); }


/* Transcription opt-out notice (bead onfiremobile-sxms7): everyone but the
   person who turned transcription on, guests included. */
.rec-optout {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 71;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 12px 32px var(--shadow-a45);
  color: var(--call-text, #e3e3e3);
  font-size: 13px;
  line-height: 1.35;
  transform: translateX(-50%);
  animation: rec-toast-in 240ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.rec-optout.hidden { display: none; }
.rec-optout-icon { display: inline-flex; flex: none; color: var(--rec-red, #ea4335); }
.rec-optout-text { flex: 1; min-width: 0; }
.rec-optout-mute {
  flex: none;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rec-optout-mute:hover { background: var(--fg-a08); }
.rec-optout-mute:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
@media (max-width: 600px) {
  .rec-optout { top: 8px; border-radius: 18px; }
}
.rec-dialog-consent {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--call-border, #3c4043);
  color: var(--call-text, #e3e3e3);
  font-size: 13px;
  line-height: 1.5;
}
.rec-dialog-consent.hidden { display: none; }

/* ===== /fire-call.css ===== */
/* fire-call.css — Fire, the AI assistant, in a call (fire-call.js; epic onfiremobile-14ehv,
   beads .17 / .23): the host's "Add Fire" pill and everyone's Fire badge in the call header,
   the notice bar, the confirm / consent dialog, the host-private panel, the Fire tile and
   Fire's chat rows. Classes are prefixed `fire-`. Every colour is a theme token (theme.css,
   the #screen-call accent tokens in style.css) with a literal fallback only inside var(). */

/* ---------- Header: host pill + everyone's badge ---------- */
.fire-bar {
  display: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fire-bar.has-any { display: inline-flex; }

.fire-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out),
              color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.fire-pill.hidden { display: none; }
.fire-pill:hover { background: var(--call-surface-hover, #3c4043); }
.fire-pill:active:not([aria-disabled="true"]) { transform: scale(0.96); }
.fire-pill:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.fire-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--call-accent, #FF6B1F);
}
.fire-pill.is-on,
.fire-pill.is-joining {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  border-color: var(--accent-a45);
  color: var(--text-strong);
}
.fire-pill.is-on:hover,
.fire-pill.is-joining:hover { background: var(--call-accent-soft-hover, rgba(255, 107, 31, 0.24)); }
.fire-pill.is-on .fire-pill-icon,
.fire-pill.is-joining .fire-pill-icon { color: var(--call-accent-text, #ffb38a); }
.fire-pill.is-joining .fire-pill-icon { animation: fire-flicker 1.4s ease-in-out infinite; }
.fire-pill.is-busy { cursor: progress; opacity: 0.85; }
.fire-pill.needs-signin { opacity: 0.6; }

.fire-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px 0 9px;
  border-radius: 999px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  border: 1px solid var(--accent-a45);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  animation: fire-pop 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.fire-badge.hidden { display: none; }
.fire-badge .fire-glyph { color: var(--call-accent-text, #ffb38a); flex-shrink: 0; }

/* "AI" disclosure chip (tile name, badge, chat sender). */
.fire-ai-chip {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--fg-a14);
  color: var(--text-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.fire-private-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--accent-a45);
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.fire-private-btn.hidden { display: none; }
.fire-private-btn:hover { background: var(--call-accent-soft-hover, rgba(255, 107, 31, 0.24)); }
.fire-private-btn:active { transform: scale(0.96); }
.fire-private-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.fire-private-count { font-variant-numeric: tabular-nums; color: var(--text-strong); }

@keyframes fire-flicker {
  0%, 100% { opacity: 1; transform: none; }
  50%      { opacity: 0.6; transform: translateY(-1px) scale(0.94); }
}
@keyframes fire-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Toast icon (the toasts reuse recording.css's .rec-toast stack). */
.fire-toast-icon {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
}
.fire-toast.rec-toast-error { border-color: var(--accent-a55); }

/* ---------- Notice (everyone but the host who added Fire) ---------- */
.fire-notice {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 71;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(600px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--accent-a35);
  box-shadow: 0 12px 32px var(--shadow-a45);
  color: var(--call-text, #e3e3e3);
  font-size: 13px;
  line-height: 1.35;
  transform: translateX(-50%);
  animation: fire-notice-in 240ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.fire-notice.hidden { display: none; }
/* Below the transcription opt-out bar when both show. */
#screen-call:has(#rec-optout:not(.hidden)) .fire-notice { top: 60px; }
.fire-notice-icon { display: inline-flex; flex: none; color: var(--call-accent, #FF6B1F); }
.fire-notice-text { flex: 1; min-width: 0; }
.fire-notice-btn {
  flex: none;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.fire-notice-btn.hidden { display: none; }
.fire-notice-btn:hover { background: var(--fg-a08); }
.fire-notice-btn:active { transform: scale(0.97); }
.fire-notice-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
@keyframes fire-notice-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* ---------- Confirm / consent dialog ---------- */
.fire-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.fire-dialog.hidden { display: none; }
.fire-dialog .hidden { display: none !important; }
.fire-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a55);
  animation: fire-fade 180ms ease-out;
}
.fire-dialog-sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 20px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 24px 60px var(--shadow-a60);
  color: var(--call-text, #e3e3e3);
  animation: fire-sheet-in 220ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.fire-dialog-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.fire-dialog-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent, #FF6B1F);
}
.fire-dialog-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.fire-dialog-body {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--call-text-muted, #a8abaf);
}
.fire-dialog-consent {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--call-border, #3c4043);
  font-size: 13px;
  line-height: 1.5;
}
.fire-dialog-consent-text { margin: 0; }
.fire-dialog-consent-list { margin: 6px 0; padding-left: 18px; }
.fire-dialog-consent-list li { margin: 2px 0; }
.fire-dialog-error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--danger-a20);
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.4;
}
.fire-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

.fire-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.fire-btn:active:not(:disabled) { transform: scale(0.97); }
.fire-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.fire-btn:disabled { cursor: default; opacity: 0.7; }
.fire-btn-secondary {
  border: 1px solid var(--call-border, #3c4043);
  background: transparent;
  color: var(--call-text, #e3e3e3);
}
.fire-btn-secondary:hover:not(:disabled) { background: var(--fg-a08); }
/* Solid accent fills carry dark ink (style.css: white on brand orange is ~2.9:1). */
.fire-btn-primary {
  border: none;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
}
.fire-btn-primary:hover:not(:disabled) { background: var(--call-accent-hover, #ff7f3d); }
.fire-btn.is-busy::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: fire-spin 800ms linear infinite;
}

@keyframes fire-spin { to { transform: rotate(360deg); } }
@keyframes fire-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fire-sheet-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Host-private panel (.23) ---------- */
.fire-private {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 69;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  max-height: min(52vh, 480px);
  box-sizing: border-box;
  border-radius: 18px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--accent-a35);
  box-shadow: 0 16px 40px var(--shadow-a45);
  color: var(--call-text, #e3e3e3);
  animation: fire-sheet-in 220ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.fire-private.hidden { display: none; }
.fire-private-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 10px 14px;
  border-bottom: 1px solid var(--call-border, #3c4043);
}
.fire-private-glyph { display: inline-flex; flex: none; color: var(--call-accent, #FF6B1F); }
.fire-private-titles { flex: 1; min-width: 0; }
.fire-private-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.fire-private-sub { margin: 1px 0 0; font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.fire-private-close,
.fire-card-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}
.fire-card-dismiss { width: 28px; height: 28px; }
.fire-private-close:hover,
.fire-card-dismiss:hover { background: var(--fg-a08); color: var(--text-strong); }
.fire-private-close:focus-visible,
.fire-card-dismiss:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.fire-private-list {
  margin: 0;
  padding: 10px;
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--call-border, #3c4043) transparent;
}
.fire-card {
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  background: var(--call-surface, #202124);
  border: 1px solid var(--fg-a06);
  animation: fire-pop 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.fire-card-error { border-color: var(--danger-a32); }
.fire-card-head { display: flex; align-items: center; gap: 8px; }
.fire-card-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.fire-card-time { flex: none; font-size: 11px; color: var(--call-text-muted, #a8abaf); font-variant-numeric: tabular-nums; }
.fire-card-body {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--chat-bubble-text);
}
.fire-card-body a { color: var(--call-accent-text, #ffb38a); text-decoration: underline; }

/* ---------- The Fire tile (app.js createParticipantTile) ---------- */
.participant-tile.fire-tile { border-color: var(--accent-a35); }
.participant-tile.fire-tile .avatar-placeholder.fire-glyph-tile {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent, #FF6B1F);
}
.participant-tile.fire-tile .participant-name { gap: 6px; }

/* ---------- Fire's chat rows (app.js chatRenderMessages) ---------- */
.chat-msg.from-fire .chat-msg-sender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--call-accent-text, #ffb38a);
}
.chat-msg.from-fire .chat-msg-sender .fire-glyph { flex-shrink: 0; }
.chat-msg.from-fire .chat-msg-bubble { border-color: var(--accent-a25); }

/* ---------- Phones ---------- */
@media (max-width: 599px) {
  .fire-pill {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
  }
  .fire-pill-text { display: none; }
  .fire-pill-icon { width: 16px; height: 16px; }
  .fire-pill-icon svg { width: 16px; height: 16px; }
  .fire-private-btn { height: 32px; }
  .fire-notice { top: 8px; border-radius: 18px; }
  #screen-call:has(#rec-optout:not(.hidden)) .fire-notice { top: 64px; }
  .fire-dialog { align-items: flex-end; padding: 0; }
  .fire-dialog-sheet {
    max-width: none;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .fire-dialog-actions .fire-btn { flex: 1; height: 44px; }
  .fire-private {
    right: 8px;
    left: 8px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 46vh;
  }
}
@media (max-width: 480px) {
  .fire-badge { gap: 4px; padding: 0 7px; }
  .fire-badge-text { display: none; }
}

/* No motion under reduced motion (style.md: reduced motion means no motion). */
@media (prefers-reduced-motion: reduce) {
  .fire-pill,
  .fire-private-btn,
  .fire-notice-btn,
  .fire-btn,
  .fire-private-close,
  .fire-card-dismiss { transition: none; }
  .fire-pill:active:not([aria-disabled="true"]),
  .fire-private-btn:active,
  .fire-notice-btn:active,
  .fire-btn:active:not(:disabled) { transform: none; }
  .fire-pill.is-joining .fire-pill-icon,
  .fire-badge,
  .fire-notice,
  .fire-dialog-sheet,
  .fire-dialog-backdrop,
  .fire-private,
  .fire-card { animation: none; }
  .fire-btn.is-busy::before { animation-duration: 2.4s; }
}

/* ===== /subtitles.css ===== */
/*
 * subtitles.css — live transcription subtitles over the video stage (subtitles.js,
 * onfiremobile-z4yvw). Caption chrome sits over video, so it uses the theme-invariant
 * --media-* tokens (dark plate, white text) in both themes, like any player's captions.
 */
.cc-overlay {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cc-lift, 0px) + 12px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(880px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 6;
  pointer-events: none;
}

.cc-overlay.hidden,
.cc-overlay:empty {
  display: none;
}

.cc-line {
  max-width: 100%;
  padding: 4px 12px 5px;
  border-radius: 8px;
  background: var(--media-a70);
  color: var(--media-white);
  font-size: 17px;
  line-height: 1.4;
  font-weight: 450;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  animation: cc-in 180ms var(--call-ease, ease-out);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.cc-who {
  font-weight: 700;
}

.cc-line.cc-interim .cc-text {
  opacity: 0.82;
}

.cc-line.cc-out {
  opacity: 0;
  transform: translateY(-4px);
}

@keyframes cc-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Screen-reader copy of the final lines (the overlay itself is aria-hidden). */
.cc-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* More menu: "Subtitles" with a check when on. */
.cc-menu-item.hidden {
  display: none;
}

.cc-menu-check {
  margin-left: auto;
  width: 16px;
  height: 9px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: translateY(-2px) rotate(-45deg);
}

.cc-menu-item[aria-checked="true"] .cc-menu-check {
  border-color: var(--call-accent);
}

/* The menu row has a check, so its icon never shows the slash. */
.cc-menu-item .cc-slash {
  display: none;
}

/* Top bar: "Captions" pill toggle (onfiremobile-2bzmp.1), after the REC / Transcribing badges.
   Pressed = captions shown (accent icon); off = struck through and muted. Transcription runs
   on either way: only this browser's captions change. */
.cc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--call-border);
  background: var(--call-surface);
  color: var(--call-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out),
              transform 120ms var(--call-ease, ease-out);
}

.cc-toggle.hidden {
  display: none;
}

.cc-toggle:hover {
  background: var(--call-surface-hover);
}

.cc-toggle:active {
  transform: scale(0.96);
}

.cc-toggle:focus-visible {
  outline: 2px solid var(--call-focus, var(--call-accent));
  outline-offset: 2px;
}

.cc-toggle-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--call-accent-text);
}

.cc-toggle .cc-slash {
  display: none;
}

.cc-toggle.is-off {
  color: var(--call-text-muted);
}

.cc-toggle.is-off .cc-toggle-icon {
  color: var(--call-text-muted);
}

.cc-toggle.is-off .cc-slash {
  display: inline;
}

.cc-toggle.is-off .cc-toggle-text {
  text-decoration: line-through;
}

/* "Captions hidden. Still being transcribed…": a short note where the captions would be. */
.cc-note {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cc-lift, 0px) + 12px);
  transform: translateX(-50%);
  max-width: min(560px, calc(100% - 32px));
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--media-a70);
  color: var(--media-white);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  z-index: 6;
  pointer-events: none;
  animation: cc-in 180ms var(--call-ease, ease-out);
}

.cc-note.hidden {
  display: none;
}

@media (max-width: 599px) {
  .cc-toggle {
    width: 28px;
    padding: 0;
    justify-content: center;
  }

  .cc-toggle-text {
    display: none;
  }

  .cc-note {
    font-size: 12px;
    bottom: calc(var(--cc-lift, 0px) + 8px);
  }

  .cc-overlay {
    max-width: calc(100% - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    bottom: calc(var(--cc-lift, 0px) + 8px);
    gap: 3px;
  }

  .cc-line {
    font-size: 14px;
    padding: 3px 10px 4px;
    border-radius: 6px;
  }

  /* Phones: the newest two speakers only (a line can wrap to two rows). */
  .cc-line:nth-last-child(n+3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-note,
  .cc-toggle {
    animation: none;
    transition: none;
  }

  .cc-line {
    animation: none;
    transition: none;
  }
}

/* ===== /call-plan.css ===== */
/* call-plan.css — plan limits UX (call-plan.js, lane B2): the time-limit and full-call
   banners, the plain notice for guests, the host's upsell dialog and the ended-screen
   note. Classes are prefixed `cp-`. Colours are theme tokens (theme.css / style.css)
   with fallbacks; pill buttons; no motion with prefers-reduced-motion. */

.cp-stack .hidden,
.cp-dialog.hidden,
.cp-dialog .hidden { display: none !important; }

/* ---------- Banners + notice (top centre, under the call's top bar) ---------- */
.cp-stack {
  position: fixed;
  top: 64px;
  left: 50%;
  z-index: 65;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(560px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}

.cp-banner,
.cp-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 12px 32px var(--shadow-a45, rgba(0, 0, 0, 0.45));
  color: var(--call-text, #e3e3e3);
  font-size: 14px;
  line-height: 1.35;
  pointer-events: auto;
  animation: cp-in 240ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.cp-notice { padding: 10px 16px; border-radius: 16px; }

.cp-banner-time { border-color: var(--call-accent, #FF6B1F); }
.cp-banner-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--call-accent-text, #ffb38a);
}
.cp-banner-text {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.cp-banner-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.cp-banner-x:hover { background: var(--fg-a08, rgba(255, 255, 255, 0.08)); }

.cp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons (pills) ---------- */
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.cp-btn:active { transform: scale(0.97); }
.cp-btn:focus-visible,
.cp-banner-x:focus-visible,
.cp-ended-upgrade:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.cp-btn-primary {
  border: none;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
}
.cp-btn-primary:hover { background: var(--call-accent-hover, #ff7f3d); }
.cp-btn-secondary {
  border: 1px solid var(--call-border, #3c4043);
  background: transparent;
  color: var(--call-text, #e3e3e3);
}
.cp-btn-secondary:hover { background: var(--fg-a08, rgba(255, 255, 255, 0.08)); }
.cp-banner-btn { height: 32px; padding: 0 14px; font-size: 13px; }

/* ---------- Upsell dialog ---------- */
.cp-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cp-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a55, rgba(0, 0, 0, 0.55));
  animation: cp-fade 180ms ease-out;
}
.cp-dialog-sheet {
  position: relative;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 20px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 24px 60px var(--shadow-a60, rgba(0, 0, 0, 0.6));
  color: var(--call-text, #e3e3e3);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  animation: cp-sheet-in 220ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.cp-dialog-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cp-dialog-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong, #ffffff);
}
.cp-dialog-body {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--call-text-muted, #a8abaf);
}
.cp-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Ended screen ---------- */
.cp-ended-note {
  max-width: 420px;
  margin: 0;
  color: var(--text-secondary, #9ca3af);
  font-size: 15px;
  line-height: 1.5;
}
#screen-ended .ended-actions.cp-has-upgrade {
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- Phones ---------- */
@media (max-width: 480px) {
  .cp-stack { top: 56px; }
  /* Row 1: icon + text (+ x); row 2: Upgrade, right-aligned. */
  .cp-banner { border-radius: 16px; flex-wrap: wrap; row-gap: 8px; padding: 10px 10px 10px 14px; }
  .cp-banner-time .cp-banner-text { flex: 1 1 calc(100% - 40px); }
  .cp-banner-full .cp-banner-text { flex: 1 1 calc(100% - 52px); }
  .cp-banner-x { order: 2; }
  .cp-banner-btn { order: 3; margin-left: auto; }
  .cp-dialog { align-items: flex-end; padding: 0; }
  .cp-dialog-sheet { max-width: none; border-radius: 20px 20px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .cp-dialog-actions .cp-btn { flex: 1 1 0; }
}

@keyframes cp-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-sheet-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-banner, .cp-notice, .cp-dialog-backdrop, .cp-dialog-sheet { animation: none; }
  .cp-btn { transition: none; }
  .cp-btn:active { transform: none; }
}

/* ===== /stage.css ===== */
/* stage.css — in-call Stage, notes MVP (see stage.js, bead onfiremobile-oivqv.8).
   The presented-note panel (desktop sidebar / phone bottom sheet), the "Note"
   chip, the host's "Present a note" picker and the stage notices. All classes are
   prefixed `stage-` so they can't collide with style.css (`.call-stage` is the
   video area, not this). Colours come from the call-screen tokens (#screen-call)
   with literal fallbacks. */

#screen-call {
  --stage-accent-line: rgba(255, 107, 31, 0.55);
  --stage-danger-text: #f6aea9;
  --stage-danger-line: rgba(242, 139, 130, 0.6);
  --stage-danger-tint: rgba(234, 67, 53, 0.16);
  --stage-skel: rgba(255, 255, 255, 0.07);
  --stage-skel-hi: rgba(255, 255, 255, 0.14);
}

/* style.css's `.hidden` has the same specificity as these blocks and loads first. */
.stage-panel.hidden,
.stage-panel .hidden,
.stage-kind.hidden,
.stage-chip.hidden,
.stage-menu-item.hidden,
.stage-picker.hidden,
.stage-picker .hidden,
.stage-inbox .hidden { display: none !important; }

.stage-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Panel: desktop sidebar ---------- */
.stage-panel {
  position: relative;
  flex: 0 0 auto;
  width: var(--stage-w, 420px);
  min-width: 360px;
  max-width: 50%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--call-panel, #1e1f20);
  border-left: 1px solid var(--call-panel-border, #2e3134);
  color: var(--call-text, #e3e3e3);
}
.stage-panel.is-new { animation: stage-in-side 280ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)); }

.stage-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 10px;
  z-index: 2;
  cursor: col-resize;
  touch-action: none;
}
.stage-resize::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: transparent;
  transform: translateY(-50%);
  transition: background-color 150ms var(--call-ease, ease-out), height 150ms var(--call-ease, ease-out);
}
.stage-resize:hover::after,
.stage-panel.is-resizing .stage-resize::after { background: var(--call-accent, #FF6B1F); height: 64px; }
.stage-resize:focus-visible { outline: none; }
.stage-resize:focus-visible::after { background: var(--call-focus, #ff7f3d); height: 64px; }
.stage-panel.is-resizing,
.stage-panel.is-resizing * { cursor: col-resize; user-select: none; }
.stage-panel.is-resizing .stage-frame { pointer-events: none; }

.stage-grab { display: none; }

.stage-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 64px;
  padding: 16px 12px 12px 16px;
  padding-top: max(16px, env(safe-area-inset-top));
}
.stage-head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stage-title {
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.stage-title:focus { outline: none; }
.stage-title:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; border-radius: 4px; }
.stage-title-who { font-weight: 500; color: var(--call-text-muted, #a8abaf); }
.stage-title-sep { color: var(--call-text-muted, #a8abaf); }

/* Presenter avatar: their cursor colour (colorFor(identity)), live dot. */
.stage-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--stage-avatar-bg, var(--call-accent, #FF6B1F));
  color: var(--stage-avatar-ink, #1a1a1a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.stage-avatar-live {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--call-panel, #1e1f20);
  background: var(--call-accent, #FF6B1F);
  animation: stage-live 2s ease-in-out infinite;
}

.stage-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: 12px;
  color: var(--call-text-muted, #a8abaf);
}
.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font-weight: 600;
  white-space: nowrap;
}
.stage-badge.is-view { background: var(--fg-a08); color: var(--call-text, #e3e3e3); }
.stage-badge-icon { display: inline-flex; }
.stage-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-avatar.is-idle .stage-avatar-live { display: none; }

/* "Back to presenter": this viewer is looking at another tab than the presenter's. */
.stage-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--stage-accent-line);
  border-radius: 999px;
  background: transparent;
  color: var(--call-accent-text, #ffb38a);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.stage-back:hover { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); }
.stage-back:active { transform: scale(0.97); }
.stage-back:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

/* ---------- Tab strip (CONTRACT §9.8): one pill per open presentation ---------- */
.stage-tabstrip {
  position: relative;              /* offsetLeft of the tabs, for keeping the shown one in view */
  flex: none;
  display: flex;
  gap: 6px;
  padding: 0 16px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}
.stage-tabstrip::-webkit-scrollbar { display: none; }
.stage-tabitem {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 220px;
  height: 34px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--call-panel, #1e1f20);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out),
    box-shadow 150ms var(--call-ease, ease-out);
}
.stage-tabitem:hover { background: var(--fg-a05); }
.stage-tabitem.is-shown {
  border-color: var(--stage-accent-line);
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
}
.stage-tabitem.is-busy { opacity: 0.6; }
.stage-tabitem.is-movable .stage-tabbtn { cursor: grab; }
.stage-tabbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  padding: 0 12px 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.stage-tabitem.has-close .stage-tabbtn { padding-right: 2px; }
.stage-tabbtn:hover { color: var(--text-strong); }
.stage-tabitem.is-shown .stage-tabbtn { color: var(--call-accent-text, #ffb38a); }
.stage-tabbtn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-tabbtn-icon { display: inline-flex; flex-shrink: 0; }
.stage-tabbtn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The presenter's tab: everyone following sees this one. */
.stage-tabbtn-live {
  display: none;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--call-accent, #FF6B1F);
  animation: stage-live 2s ease-in-out infinite;
}
.stage-tabitem.is-active .stage-tabbtn-live { display: inline-block; }
.stage-tabclose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-right: 4px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out);
}
.stage-tabclose:hover:not(:disabled) { background: var(--fg-a10); color: var(--text-strong); }
.stage-tabclose:disabled { cursor: default; opacity: 0.5; }
.stage-tabstrip.is-reordering .stage-tabitem { transition: transform 160ms var(--call-ease, ease-out); }
.stage-tabstrip.is-reordering .stage-tabitem.is-dragging,
.stage-tabitem.is-dragging {
  z-index: 2;
  transition: none;
  box-shadow: 0 6px 18px var(--shadow-a45);
}
.stage-tabitem.is-dragging .stage-tabbtn { cursor: grabbing; }
.stage-tabitem.is-lifted { box-shadow: 0 0 0 2px var(--stage-accent-line); }

.stage-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out),
    transform 120ms var(--call-ease, ease-out);
}
.stage-icon-btn:hover { background: var(--fg-a08); color: var(--text-strong); }
.stage-icon-btn:active { transform: scale(0.94); }
.stage-icon-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-min-down { display: none; }

/* ---------- Host bar ---------- */
.stage-host {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 20px 12px;
}
.stage-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--call-surface, #202124);
  border: 1px solid var(--call-border, #3c4043);
}
.stage-seg.is-pending { opacity: 0.7; }
.stage-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms var(--call-ease, ease-out), color 160ms var(--call-ease, ease-out);
}
.stage-seg-btn:hover:not(:disabled) { color: var(--text-strong); }
.stage-seg-btn[aria-pressed="true"] { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); color: var(--call-accent-text, #ffb38a); }
.stage-seg-btn:disabled { cursor: default; }
.stage-seg-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 1px; }

.stage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.stage-btn:active:not(:disabled) { transform: scale(0.97); }
.stage-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-btn:disabled { cursor: default; opacity: 0.6; }
.stage-btn-stop {
  border-color: var(--stage-danger-line);
  background: var(--stage-danger-tint);
  color: var(--stage-danger-text);
}
.stage-btn-stop:hover:not(:disabled) { background: var(--danger-a26); }
.stage-btn-secondary {
  border-color: var(--call-border, #3c4043);
  color: var(--call-text, #e3e3e3);
}
.stage-btn-secondary:hover:not(:disabled) { background: var(--fg-a08); }
.stage-btn-primary {
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
}
.stage-btn-primary:hover:not(:disabled) { background: var(--call-accent-hover, #ff7f3d); }
.stage-btn-primary:active:not(:disabled) { background: var(--call-accent-pressed, #e85a10); }
.stage-btn-primary:disabled:not(.is-busy) { opacity: 1; background: var(--fg-a08); color: var(--call-text-muted, #a8abaf); }
.stage-btn.is-busy::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: stage-spin 800ms linear infinite;
}
.stage-btn-stop.is-busy svg { display: none; }

/* ---------- Body: editor iframe ---------- */
.stage-body {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 12px 12px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--call-card, #282a2c);
  border: 1px solid var(--call-panel-border, #2e3134);
}
.stage-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 220ms var(--call-ease, ease-out);
}
.stage-frame.is-ready { opacity: 1; }
.stage-frame-leaving { opacity: 0; pointer-events: none; }

.stage-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
}
.stage-skel-line {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--stage-skel) 0%, var(--stage-skel-hi) 50%, var(--stage-skel) 100%);
  background-size: 200% 100%;
  animation: stage-shimmer 1.4s ease-in-out infinite;
}
.stage-skeleton .stage-skel-line:first-child { height: 20px; margin-bottom: 6px; }
.stage-skel-line.w90 { width: 90%; }
.stage-skel-line.w80 { width: 80%; }
.stage-skel-line.w70 { width: 70%; }
.stage-skel-line.w60 { width: 60%; }
.stage-skel-line.w40 { width: 40%; }

.stage-message {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--call-card, #282a2c);
}
.stage-message-text { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.5; color: var(--call-text-muted, #a8abaf); }

/* Non-note kinds: the kind module's renderer, one box per mount (scrolls inside the card). */
.stage-kind { position: absolute; inset: 0; overflow: hidden; }
.stage-kind-box {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: opacity 200ms var(--call-ease, ease-out);
}
.stage-kind-box.is-leaving { opacity: 0; pointer-events: none; visibility: hidden; }
.stage-kind-error { margin: 0; padding: 24px; text-align: center; font-size: 14px; color: var(--call-text-muted, #a8abaf); }
.stage-chip-icon { display: inline-flex; }

/* ---------- "Note" chip (header) ---------- */
.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--stage-accent-line);
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  animation: stage-pop 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.stage-chip:hover { background: var(--call-accent-soft-hover, rgba(255, 107, 31, 0.24)); }
.stage-chip:active { transform: scale(0.96); }
.stage-chip:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--call-accent, #FF6B1F);
  animation: stage-live 2s ease-in-out infinite;
}

/* ---------- Notices ---------- */
.stage-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}
.stage-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 12px 32px var(--shadow-a45);
  color: var(--call-text, #e3e3e3);
  font-size: 14px;
  line-height: 1.35;
  pointer-events: auto;
  animation: stage-toast-in 240ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.stage-toast-error { border-color: var(--stage-danger-line); }
.stage-toast-out { opacity: 0; transform: translateY(6px); }
.stage-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
}
.stage-toast-error .stage-toast-icon { background: var(--stage-danger-tint); color: var(--stage-danger-text); }
.stage-toast-text { min-width: 0; }

/* ---------- Share requests: host cards + the requester's waiting card (top right; top on phones) ---------- */
.stage-inbox {
  position: fixed;
  top: calc(72px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 72;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 200px);
  max-height: calc(100dvh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}
.stage-inbox.hidden { display: none !important; }
.stage-req-card {
  display: flex;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  border-radius: 18px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 16px 40px var(--shadow-a50);
  color: var(--call-text, #e3e3e3);
  pointer-events: auto;
  animation: stage-sheet-in 240ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-req-avatar { margin-top: 0; }
.stage-req-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stage-req-top { display: flex; align-items: center; gap: 4px; margin: -8px -8px -4px 0; }
.stage-req-who { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.35; }
.stage-req-mine .stage-req-who { padding-top: 2px; }
.stage-req-later { width: 32px; height: 32px; }
.stage-req-what {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--call-text-muted, #a8abaf);
}
.stage-req-what-icon { display: inline-flex; flex-shrink: 0; font-size: 14px; line-height: 1; color: var(--call-accent-text, #ffb38a); }
.stage-req-what-kind { flex-shrink: 0; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-req-what-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage-req-message {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  color: var(--call-text-muted, #a8abaf);
  overflow-wrap: anywhere;
}
.stage-req-warn { margin: 0; font-size: 12px; line-height: 1.4; color: var(--call-accent-text, #ffb38a); }
.stage-req-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--call-text-muted, #a8abaf); }
.stage-req-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.stage-req-actions .stage-btn { height: 36px; padding: 0 18px; }
.stage-req-wait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  animation: stage-live 2s ease-in-out infinite;
}
.stage-req-more {
  align-self: flex-end;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--call-menu, #28292a);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
}
.stage-req-more:hover { background: var(--call-menu-hover, #353739); }
.stage-req-more:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-req-chip.hidden { display: none !important; }

/* Request mode: optional message for the host. */
.stage-req-msg { display: flex; flex-direction: column; gap: 6px; }
.stage-req-msg-label { font-size: 13px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-req-msg-input {
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 14px;
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  transition: border-color 150ms var(--call-ease, ease-out);
}
.stage-req-msg-input:focus { border-color: var(--call-focus, #ff7f3d); }
.stage-req-msg-input::placeholder { color: var(--call-text-muted, #a8abaf); }
.stage-req-msg-count { align-self: flex-end; font-size: 11px; color: var(--call-text-muted, #a8abaf); }

/* ---------- Picker ---------- */
.stage-picker {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.stage-picker-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a55);
  animation: stage-fade 180ms ease-out;
}
.stage-picker-sheet {
  --stage-pick-pad: 20px;
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: min(680px, calc(100vh - 32px));
  max-height: min(680px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 0 16px;
  border-radius: 20px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 24px 60px var(--shadow-a60);
  color: var(--call-text, #e3e3e3);
  animation: stage-sheet-in 220ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-picker-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 8px; padding: 0 12px 0 var(--stage-pick-pad); }
/* The scrolling middle: everything between the pill row and the footer. */
.stage-picker-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px var(--stage-pick-pad) 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.stage-picker-body > * { flex: none; }
.stage-picker-foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px var(--stage-pick-pad) 0; }
.stage-picker-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.stage-picker-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--call-text-muted, #a8abaf); }
.stage-picker-hint.is-warn { color: var(--call-accent-text, #ffb38a); font-weight: 600; }

.stage-search {
  position: sticky;                /* stays at the top of the scrolling body */
  top: -10px;
  z-index: 1;
  box-shadow: 0 -10px 0 var(--call-menu, #28292a), 0 6px 10px var(--call-menu, #28292a);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
  color: var(--call-text-muted, #a8abaf);
  transition: border-color 150ms var(--call-ease, ease-out);
}
.stage-search:focus-within { border-color: var(--call-focus, #ff7f3d); }
.stage-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 15px;
}
.stage-search-input::placeholder { color: var(--call-text-muted, #a8abaf); }

.stage-list {
  min-height: 132px;               /* the body scrolls, not the list */
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -8px;
  padding: 2px 8px;
}
.stage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms var(--call-ease, ease-out), border-color 140ms var(--call-ease, ease-out);
}
.stage-row:hover { background: var(--call-menu-hover, #353739); }
.stage-row[aria-checked="true"] { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); border-color: var(--stage-accent-line); }
.stage-row:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: -2px; }
.stage-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--call-card, #282a2c);
  border: 1px solid var(--call-border, #3c4043);
  color: var(--call-text-muted, #a8abaf);
  font-size: 20px;
  line-height: 1;
}
.stage-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stage-row-title,
.stage-row-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage-row-title { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.stage-row-meta { font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-row-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.stage-row-skel { cursor: default; }
.stage-row-skel:hover { background: transparent; }
.stage-row-skel .stage-row-icon { border-color: transparent; background: var(--stage-skel); }
.stage-row-skel .stage-skel-line { height: 10px; }

.stage-list-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 12px 4px; text-align: center; }
.stage-list-state-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--call-text-muted, #a8abaf); }

/* Footer decisions (always on screen, lead after ex2vn; same design as the app): "Can edit | View only"
   and a one-line summary that opens the options panel (guests, form answers, the host message). */
.stage-pick-decide { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.stage-pick-seg { align-self: flex-start; }
.stage-pick-seg .stage-seg-btn { height: 32px; padding: 0 14px; }
.stage-pick-seg .stage-seg-btn[aria-checked="true"] {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
}
.stage-pick-sum {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
button.stage-pick-sum { cursor: pointer; border-radius: 999px; }
button.stage-pick-sum:hover:not(:disabled) { color: var(--text-strong); }
button.stage-pick-sum:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-pick-sum-text { min-width: 0; }
.stage-pick-sum-icon { flex-shrink: 0; transition: transform 160ms var(--call-ease, ease-out); }
.stage-pick-sum[aria-expanded="true"] .stage-pick-sum-icon { transform: rotate(180deg); }
.stage-pick-more {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(40vh, 260px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: stage-fade 160ms var(--call-ease, ease-out);
}

/* The kind menu: a vertical list on the LEFT of the picker (owner: "a left hand side menu within that
   opened modal instead of top row pills"), one entry per kind the registry offers (Notes, Displays,
   Forms, Tasks, …, whatever registers). Desktop / tablet: icon + label + count once known. Phones: a
   compact rail (icon over a short label). It scrolls on its own; the body beside it scrolls separately. */
.stage-picker-main {
  flex: 1 1 auto;
  min-height: 0;                   /* lets the menu and the body scroll inside the sheet (ex2vn) */
  display: flex;
  align-items: stretch;
}
.stage-picker-main > .stage-picker-body { flex: 1 1 auto; min-width: 0; }
.stage-picker-sheet:has(> .stage-picker-main.has-menu) { max-width: 720px; }
.stage-tabs {
  flex: none;
  width: 188px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px 8px 12px;
  border-right: 1px solid var(--call-border, #3c4043);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.stage-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: 100%;
  min-height: 40px;
  padding: 0 10px 0 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), color 150ms var(--call-ease, ease-out),
    transform 120ms var(--call-ease, ease-out);
}
.stage-tab svg { flex: none; }
.stage-tab-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-tab-count {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fg-a06);
  color: var(--call-text-muted, #a8abaf);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.stage-tab:hover:not(:disabled) { color: var(--text-strong); background: var(--fg-a05); }
.stage-tab:active:not(:disabled) { transform: scale(0.98); }
.stage-tab[aria-selected="true"] {
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
}
/* The selected entry also gets a bar on its leading edge: clear without relying on colour alone. */
.stage-tab[aria-selected="true"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 2px;
  background: var(--call-accent, #FF6B1F);
}
.stage-tab[aria-selected="true"] .stage-tab-count { background: var(--stage-accent-line); color: inherit; }
.stage-tab:disabled { cursor: default; }
.stage-tab:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: -2px; }

.stage-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-filter {
  height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--fg-a06);
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms var(--call-ease, ease-out), color 140ms var(--call-ease, ease-out);
}
.stage-filter:hover:not(:disabled) { color: var(--text-strong); }
.stage-filter[aria-pressed="true"] { background: var(--chip-selected-bg); color: var(--chip-selected-fg); }
.stage-filter:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

.stage-row-icon.has-thumb { overflow: hidden; padding: 0; }
.stage-row-thumb { width: 100%; height: 100%; object-fit: cover; }

.stage-kind-options { display: flex; flex-direction: column; gap: 8px; }

/* A kind's warning before presenting (e.g. a task list anyone signed in can change). */
.stage-picker-confirm {
  margin: 0;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--stage-accent-line);
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.45;
  animation: stage-fade 160ms ease-out;
}

/* Share request: what approving hands out. */
.stage-req-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.stage-req-facts li {
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--fg-a07);
  font-size: 12px;
  font-weight: 600;
  color: var(--call-text, #e3e3e3);
}
.stage-req-facts li.is-edit { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); color: var(--call-accent-text, #ffb38a); }

.stage-picker-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--stage-danger-tint);
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.4;
}
.stage-picker-actions { display: flex; justify-content: flex-end; gap: 8px; }
.stage-picker-actions .stage-btn { height: 40px; padding: 0 20px; font-size: 14px; }

/* ---------- Phones / small tablets: bottom sheet above the control bar ---------- */
@media (max-width: 768px) {
  .stage-panel {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 26;   /* above the video area, below the control bar (30) and the chat overlay (40) */
    width: auto;
    min-width: 0;
    max-width: none;
    height: min(60%, calc(100% - 150px));
    border: 1px solid var(--call-panel-border, #2e3134);
    border-radius: 20px;
    box-shadow: 0 -8px 40px var(--shadow-a50);
    transition: transform 200ms var(--call-ease, ease-out);
  }
  .stage-panel.is-new { animation-name: stage-in-up; }
  .stage-panel.is-dragging { transition: none; }
  .stage-resize { display: none; }
  .stage-grab {
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--fg-a28);
  }
  .stage-head { min-height: 0; padding: 6px 8px 8px 12px; touch-action: none; }
  .stage-avatar { width: 32px; height: 32px; font-size: 12px; }
  .stage-host { padding: 0 16px 10px; }
  .stage-tabstrip { padding: 0 12px 10px; }
  .stage-tabitem { height: 36px; max-width: 200px; }
  .stage-tabclose { width: 30px; height: 30px; margin-right: 3px; }
  .stage-body { margin: 0 8px 8px; }
  .stage-min-side { display: none; }
  .stage-min-down { display: block; }
}

/* ---------- Phones: the video strip sits above the Stage sheet (onfiremobile-847hl.10) ----------
   While a presentation is up (panel shown, not minimised) the tiles leave the
   space behind the sheet and become a sideways-scrolling strip under the
   header; the sheet starts right below it (and grows into the freed space).
   content-strip.js keeps the active speaker's tile in view. Short landscape
   phones keep the plain sheet: there is no room for both. */
@media (max-width: 768px) and (min-height: 560px) {
  /* + --oft-countdown-room (timer.css): a running countdown makes the header taller. */
  #screen-call { --stage-strip-h: 112px; --stage-strip-top: calc(max(8px, env(safe-area-inset-top, 0px)) + 48px + var(--oft-countdown-room, 0px)); }
  .call-layout:has(> .stage-panel:not(.hidden)) .participants-grid {
    order: -1;
    flex: none;
    height: var(--stage-strip-h);
    padding: 3px;
    display: flex;
    gap: 8px;
    grid-template-columns: none;
    grid-template-rows: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .call-layout:has(> .stage-panel:not(.hidden)) .participants-grid::-webkit-scrollbar { display: none; }
  .call-layout:has(> .stage-panel:not(.hidden)) .participants-grid > .participant-tile {
    flex: 0 0 clamp(104px, calc((100% - 16px) / 3), 180px);
    height: 100%;
    min-width: 100px;
    scroll-snap-align: center;
    box-shadow: none;
  }
  .call-layout:has(> .stage-panel:not(.hidden)) .participants-grid > .participant-tile:first-child { margin-left: auto; }
  .call-layout:has(> .stage-panel:not(.hidden)) .participants-grid > .participant-tile:last-child { margin-right: auto; }
  .call-layout:has(> .stage-panel:not(.hidden)) .participants-grid .avatar-placeholder {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
  .call-layout:has(> .stage-panel:not(.hidden)) .participants-grid .participant-name {
    font-size: 11px;
    bottom: 6px;
    left: 6px;
    padding: 4px 8px;
    max-width: calc(100% - 12px);
  }
  .call-layout:has(> .stage-panel:not(.hidden)) .screen-share-container.active { display: none; }
  .call-layout > .stage-panel:not(.hidden) {
    top: calc(var(--stage-strip-top) + var(--stage-strip-h) + 16px);
    height: auto;
  }
}

/* ---------- Narrow desktop: video + note + a side panel don't fit (onfiremobile-847hl.10) ----------
   769-1399 px with the Stage open: a third column (chat, polls, "My notes &
   files") would crush the video tiles to slivers (769 px: 24 px wide). It
   floats over the right edge instead (over the note), so the tiles keep
   their column. content-strip.js compacts the control bar to the column. */
@media (min-width: 769px) and (max-width: 1399px) {
  .call-layout:has(> .stage-panel:not(.hidden)) > :is(.chat-panel:not(.hidden), .poll-panel:not(.hidden), .acct-panel.acct-open) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 27;   /* over the note and the video area, under the control bar's popovers (30) */
    box-shadow: -12px 0 32px var(--shadow-a35);
  }
}

@media (max-width: 599px) {
  .stage-inbox { top: calc(64px + env(safe-area-inset-top, 0px)); right: 12px; left: 12px; width: auto; }
  .stage-req-actions .stage-btn { flex: 1; height: 40px; }
  .stage-picker { align-items: flex-end; padding: 0; }
  .stage-picker-sheet {
    --stage-pick-pad: 16px;
    max-width: none;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    padding: 18px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .stage-picker-actions .stage-btn { flex: 1; height: 44px; }
  /* Phones: the kind menu is a compact rail (icon over a short label), the content keeps the width. */
  .stage-tabs {
    width: 84px;                 /* "Whiteboard" (first, selected, semibold) on one line */
    gap: 4px;
    padding: 4px 6px 16px 8px;
    /* the rail usually holds more kinds than fit: the bottom edge fades so it reads as scrollable */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
  }
  .stage-tab {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 7px 2px 6px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
  }
  .stage-tab-label {
    flex: none;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .stage-tab-count { position: absolute; top: 3px; right: 3px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 15px; }
  .stage-tab[aria-selected="true"]::before { top: 12px; bottom: 12px; }
  .stage-picker-main.has-menu > .stage-picker-body { padding-left: 12px; }
  .stage-pick-seg { align-self: stretch; }
  .stage-pick-seg .stage-seg-btn { flex: 1; justify-content: center; height: 36px; }
  .stage-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 480px) {
  .stage-chip { padding: 0 9px; }
  .stage-chip-text { display: none; }
  .stage-seg-btn { padding: 0 10px; }
}

@keyframes stage-in-side { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes stage-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes stage-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes stage-pop { from { opacity: 0; transform: translateY(-4px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes stage-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes stage-spin { to { transform: rotate(360deg); } }
@keyframes stage-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stage-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes stage-sheet-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .stage-panel.is-new,
  .stage-chip,
  .stage-toast,
  .stage-req-card,
  .stage-picker-sheet,
  .stage-picker-backdrop { animation: none; }
  .stage-req-wait { animation: none; }
  .stage-avatar-live,
  .stage-tabbtn-live,
  .stage-chip-dot,
  .stage-skel-line { animation: none; }
  .stage-frame,
  .stage-panel { transition: none; }
  .stage-toast { transition: opacity 150ms linear; }
  .stage-toast-out { transform: none; }
  .stage-btn,
  .stage-icon-btn,
  .stage-chip,
  .stage-row,
  .stage-tab,
  .stage-tabitem,
  .stage-tabclose,
  .stage-back,
  .stage-tabstrip.is-reordering .stage-tabitem,
  .stage-filter,
  .stage-pick-sum-icon { transition: none; }
  .stage-pick-more { animation: none; }
  .stage-tab:active:not(:disabled) { transform: none; }
  .stage-btn:active:not(:disabled),
  .stage-icon-btn:active,
  .stage-chip:active { transform: none; }
  .stage-btn.is-busy::before { animation-duration: 2.4s; }
}

/* ---- The presenter's note tools: rename in place, AI (onfiremobile-847hl.3 / .11) ---- */
.stage-note-tools { display: inline-flex; align-items: center; gap: 6px; }
.stage-note-tools.hidden { display: none; }
.stage-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.stage-tool:hover { background: var(--fg-a08); }
.stage-tool:active:not(:disabled) { transform: scale(0.97); }
.stage-tool:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-tool:disabled { opacity: 0.45; cursor: progress; }
.stage-tool.is-on {
  border-color: var(--call-accent, #FF6B1F);
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
}

/* The presenter's AI card for the shown note (note-ai-card.js, onfiremobile-9tgbf): the
   .acct-ai card look from account-panel.css, between the controls and the note. */
.stage-ai-box {
  position: relative;
  flex: 0 1 auto;
  max-height: 55%;
  min-height: 0;
  margin: 0 12px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.stage-panel .stage-ai-box.acct-ai { margin: 0 12px 10px; }
.stage-ai-box .acct-ai-head { padding-right: 36px; }
.stage-ai-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
}
.stage-ai-box .acct-ai-result { max-height: 28vh; }
@media (max-width: 599.98px) {
  .stage-panel .stage-ai-box.acct-ai { margin: 0 8px 8px; }
  .stage-ai-box { max-height: 60%; }
}
.stage-rename-input {
  width: 100%;
  min-width: 0;
  margin: -4px 0 -3px -8px;
  padding: 4px 8px;
  border: 1px solid var(--call-accent, #FF6B1F);
  border-radius: 10px;
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  outline: none;
}
.stage-rename-input::placeholder { color: var(--call-text-muted, #a8abaf); font-weight: 500; }
.stage-rename-input.hidden { display: none; }
.stage-title.hidden { display: none; }
@media (prefers-reduced-motion: reduce) {
  .stage-tool { transition: none; }
  .stage-tool:active:not(:disabled) { transform: none; }
}

/* ===== /stage-kinds.css ===== */
/* stage-kinds.css — Stage v2 kind renderers on call.onfire.so (onfiremobile-zlhgs.9):
   display (slides), form, tasks, item, calendar, goal, plus the shared pieces they use
   (switch, note, back chip, skeleton, message). Classes are prefixed `stage-`; colours come
   from the call-screen tokens (#screen-call, always dark) with literal fallbacks. Motion:
   ease-out curves only, and nothing moves under prefers-reduced-motion. */

.stage-kind .hidden,
.stage-picker .stage-kind-options .hidden { display: none !important; }

/* ---------- shared ---------- */
.stage-kind-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; }
.stage-kind-skeleton .stage-skel-line:first-child { height: 18px; }
.stage-kind-message {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.stage-kind-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
  background: var(--fg-a05);
  border: 1px solid var(--call-border, #3c4043);
  font-size: 13px;
  line-height: 1.45;
  color: var(--call-text-muted, #a8abaf);
}
.stage-kind-note p { margin: 0; flex: 1 1 200px; }
.stage-kind-note .stage-btn { height: 32px; padding: 0 14px; }

.stage-back-chip {
  align-self: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--stage-accent-line);
  border-radius: 999px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  animation: stage-pop 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
  transition: background-color 150ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.stage-back-chip:hover { background: var(--call-accent-soft-hover, rgba(255, 107, 31, 0.24)); }
.stage-back-chip:active { transform: scale(0.96); }
.stage-back-chip:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-back-chip.hidden { display: none !important; }

/* Switch (picker options): text left, a pill track right. */
.stage-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 14px;
  cursor: pointer;
}
.stage-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stage-switch-label { font-size: 14px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-switch-sub { font-size: 12px; line-height: 1.4; color: var(--call-text-muted, #a8abaf); }
.stage-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stage-switch-track {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--fg-a16);
  transition: background-color 160ms var(--call-ease, ease-out);
}
.stage-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--switch-knob);
  transition: transform 180ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-switch-input:checked ~ .stage-switch-track { background: var(--call-accent, #FF6B1F); }
.stage-switch-input:checked ~ .stage-switch-track::after { transform: translateX(18px); }
.stage-switch-input:focus-visible ~ .stage-switch-track { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

.stage-row.is-disabled { opacity: 0.5; cursor: default; }
.stage-row.is-disabled:hover { background: transparent; }

/* ---------- display: viewer + controls + carousel ---------- */
.stage-kind-box.stage-kind-display { display: flex; flex-direction: column; overflow: hidden; }
.stage-disp { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 12px; box-sizing: border-box; }
.stage-disp-stage {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100% - 140px);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--media-black);
}
.stage-disp.is-vertical .stage-disp-stage { aspect-ratio: 9 / 16; width: auto; height: calc(100% - 140px); }
.stage-disp-stage:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-disp-screen { position: absolute; inset: 0; }
.stage-disp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--media-black); transition: opacity 220ms var(--call-ease, ease-out); }
.stage-disp-frame.is-leaving { opacity: 0; pointer-events: none; }
.stage-disp-overlay { position: absolute; inset: 0; display: none; background: var(--call-card, #282a2c); }
.stage-disp-overlay.is-on { display: flex; flex-direction: column; justify-content: center; }
.stage-disp-overlay.is-badge { inset: auto auto 10px 10px; background: transparent; }
.stage-disp-overlay .stage-kind-message { min-height: 0; }
.stage-disp-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--media-a65);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 600;
}
.stage-disp-controls { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.stage-disp-controls.hidden,
.stage-disp-strip.hidden { display: none; }
.stage-disp-nav { width: 44px; height: 44px; border: 1px solid var(--call-border, #3c4043); color: var(--call-text, #e3e3e3); }
.stage-disp-nav:disabled { opacity: 0.35; cursor: default; }
.stage-disp-nav:disabled:hover { background: transparent; }
.stage-disp-count { min-width: 64px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--call-text, #e3e3e3); }
.stage-disp-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior: contain;
  scroll-snap-type: x proximity;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}
.stage-disp-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--call-surface, #202124);
  cursor: pointer;
  scroll-snap-align: center;
  transition: border-color 140ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.stage-disp.is-vertical .stage-disp-thumb { width: 60px; aspect-ratio: 9 / 16; }
.stage-disp-thumb:hover { border-color: var(--fg-a30); }
.stage-disp-thumb:active { transform: scale(0.97); }
.stage-disp-thumb.is-on { border-color: var(--call-accent, #FF6B1F); }
.stage-disp-thumb:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-disp-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage-disp-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
  background: linear-gradient(135deg, var(--media-tile-top), var(--media-tile-bottom));
  color: var(--text-strong);
  text-align: center;
}
.stage-disp-tile-emoji { font-size: 18px; line-height: 1; }
.stage-disp-tile-title { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; font-weight: 600; }
.stage-disp-thumb-n {
  position: absolute;
  left: 4px;
  top: 4px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--media-a60);
  color: var(--text-strong);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}

/* ---------- form ---------- */
.stage-form { padding: 18px 18px 22px; }
.stage-form-head { margin-bottom: 14px; }
.stage-form-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text-strong); }
.stage-form-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--call-text-muted, #a8abaf); white-space: pre-line; }
.stage-form-seg { margin-bottom: 14px; }
.stage-form-fields { display: flex; flex-direction: column; gap: 16px; }
.stage-form-field { display: flex; flex-direction: column; gap: 6px; }
.stage-form-label { font-size: 14px; font-weight: 600; color: var(--call-text, #e3e3e3); line-height: 1.4; }
.stage-form-req { color: var(--call-accent-text, #ffb38a); }
.stage-form-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 14px;
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  outline: none;
  color-scheme: var(--color-scheme);
  transition: border-color 150ms var(--call-ease, ease-out);
}
textarea.stage-form-input { resize: vertical; }
.stage-form-input:focus { border-color: var(--call-focus, #ff7f3d); }
.stage-form-input:disabled { opacity: 0.6; }
.stage-form-input::placeholder { color: var(--call-text-muted, #a8abaf); }
.stage-form-field.has-error .stage-form-input,
.stage-form-field.has-error .stage-form-choice:not(.is-on) { border-color: var(--stage-danger-line); }
.stage-form-err { margin: 0; min-height: 0; font-size: 12px; color: var(--stage-danger-text); }
.stage-form-err:empty { display: none; }
.stage-form-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-form-choice {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms var(--call-ease, ease-out), border-color 140ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.stage-form-choice:hover:not(:disabled) { background: var(--fg-a06); }
.stage-form-choice:active:not(:disabled) { transform: scale(0.97); }
.stage-form-choice.is-on { border-color: var(--stage-accent-line); background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); color: var(--call-accent-text, #ffb38a); }
.stage-form-choice:disabled { opacity: 0.55; cursor: default; }
.stage-form-choice:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-form-choices.is-rating .stage-form-choice { width: 44px; padding: 0; font-size: 20px; color: var(--call-text-muted, #a8abaf); }
.stage-form-choices.is-rating .stage-form-choice.is-on { color: var(--gold-text); background: transparent; border-color: var(--gold-a50); }
.stage-form-submit { align-self: flex-start; height: 44px; padding: 0 28px; font-size: 15px; }
.stage-form-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; text-align: center; animation: stage-pop 220ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)); }
.stage-form-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--success-deep-a18);
  color: var(--success-text-2);
  font-size: 26px;
  font-weight: 700;
}
.stage-form-done-title { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.stage-form-done-msg { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.5; color: var(--call-text-muted, #a8abaf); white-space: pre-line; }
.stage-form-results { display: flex; flex-direction: column; gap: 16px; }
.stage-form-count { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stage-form-muted { margin: 0; font-size: 13px; line-height: 1.5; color: var(--call-text-muted, #a8abaf); }
.stage-form-result-q { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-form-bar { display: grid; grid-template-columns: minmax(60px, 34%) 1fr 32px; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.stage-form-bar-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--call-text-muted, #a8abaf); }
.stage-form-bar-track { height: 10px; border-radius: 999px; background: var(--fg-a08); overflow: hidden; }
.stage-form-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--call-accent, #FF6B1F); transition: width 420ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)); }
.stage-form-bar-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--call-text, #e3e3e3); }
.stage-form-rating { margin: 0; font-size: 15px; font-weight: 600; color: var(--gold-text); }
/* Forms v2 (onfiremobile-eh8e3): quiz badge + points, grid questions, score card, review. */
.stage-form-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.stage-form-points { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--call-text-muted, #a8abaf); }
.stage-form-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; padding: 2px; }
.stage-form-grid-table { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.stage-form-grid-col {
  padding: 6px 8px;
  min-width: 56px;
  font-weight: 600;
  text-align: center;
  color: var(--call-text-muted, #a8abaf);
}
.stage-form-grid-rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  max-width: 160px;
  padding: 8px 12px 8px 4px;
  background: var(--call-surface, #202124);
  font-weight: 600;
  text-align: left;
  color: var(--call-text, #e3e3e3);
  overflow-wrap: anywhere;
}
.stage-form-grid-row:nth-child(odd) .stage-form-grid-cell,
.stage-form-grid-row:nth-child(odd) .stage-form-grid-rowhead { background-image: linear-gradient(var(--fg-a06), var(--fg-a06)); }
.stage-form-grid-cell { padding: 0; text-align: center; }
.stage-form-grid-input {
  width: 20px;
  height: 20px;
  margin: 12px;
  accent-color: var(--call-accent, #FF6B1F);
  cursor: pointer;
}
.stage-form-grid-input:disabled { cursor: default; opacity: 0.55; }
.stage-form-grid-input:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-form-field.has-error .stage-form-grid { box-shadow: inset 0 0 0 1px var(--stage-danger-line); border-radius: 12px; }
.stage-form-quiz { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.stage-form-quiz-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--stage-accent-line);
  border-radius: 18px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  text-align: center;
}
.stage-form-quiz-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--call-accent-text, #ffb38a); }
.stage-form-quiz-score { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stage-form-review { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stage-form-review-item { padding: 12px 14px; border: 1px solid var(--call-border, #3c4043); border-radius: 14px; }
.stage-form-review-item.is-right { border-color: var(--green-a50); }
.stage-form-review-item.is-wrong { border-color: var(--stage-danger-line); }
.stage-form-review-top { display: flex; align-items: baseline; gap: 8px; }
.stage-form-review-mark { flex: none; font-weight: 800; }
.is-right .stage-form-review-mark { color: var(--green-text); }
.is-wrong .stage-form-review-mark { color: var(--stage-danger-text); }
.stage-form-review-q { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--call-text, #e3e3e3); overflow-wrap: anywhere; }
.stage-form-review-pts { flex: none; font-size: 12px; font-weight: 700; color: var(--call-text-muted, #a8abaf); font-variant-numeric: tabular-nums; }
.stage-form-review-line { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--call-text-muted, #a8abaf); white-space: pre-line; overflow-wrap: anywhere; }
.stage-form-review-line.is-key { color: var(--green-text); }
.stage-form-result-pct { margin: -4px 0 8px; font-size: 12px; font-weight: 700; color: var(--green-text); }
.stage-form-result-row { margin: 8px 0 4px; font-size: 12px; font-weight: 600; color: var(--call-text, #e3e3e3); }

/* ---------- tasks ---------- */
.stage-tasks { padding: 16px 14px 22px; }
.stage-tasks-head { display: flex; flex-direction: column; gap: 8px; margin: 0 4px 14px; }
.stage-tasks-progress-text { font-size: 13px; font-weight: 600; color: var(--call-text-muted, #a8abaf); }
.stage-tasks-bar { height: 8px; border-radius: 999px; background: var(--fg-a08); overflow: hidden; }
.stage-tasks-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--success); transition: width 420ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)); }
.stage-tasks-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.stage-tasks-input {
  flex: 1 1 180px;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.stage-tasks-input:focus { border-color: var(--call-focus, #ff7f3d); }
.stage-tasks-input::placeholder { color: var(--call-text-muted, #a8abaf); }
.stage-tasks-who {
  flex: 0 1 150px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
  color-scheme: var(--color-scheme);
}
.stage-tasks-who:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 1px; }
.stage-tasks-addbtn { height: 44px; padding: 0 20px; }
.stage-tasks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.stage-tasks-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 6px 10px 8px;
  border-radius: 12px;
  transition: background-color 140ms var(--call-ease, ease-out), opacity 140ms var(--call-ease, ease-out);
}
.stage-tasks-row:hover { background: var(--fg-a04); }
.stage-tasks-row.is-busy { opacity: 0.7; }
.stage-tasks-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  padding: 0;
  border: 2px solid var(--fg-a35);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transition: background-color 160ms var(--call-ease, ease-out), border-color 160ms var(--call-ease, ease-out), transform 120ms var(--call-ease, ease-out);
}
.stage-tasks-check:hover:not(:disabled) { border-color: var(--success); }
.stage-tasks-check:active:not(:disabled) { transform: scale(0.9); }
.stage-tasks-check[aria-checked="true"] { border-color: var(--success); background: var(--success); color: var(--success-ink); }
.stage-tasks-check:disabled { cursor: default; }
.stage-tasks-check:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-tasks-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stage-tasks-title { font-size: 15px; line-height: 1.4; color: var(--call-text, #e3e3e3); overflow-wrap: anywhere; }
.stage-tasks-row.is-done .stage-tasks-title { color: var(--call-text-muted, #a8abaf); text-decoration: line-through; }
.stage-tasks-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stage-tasks-due { padding: 2px 8px; border-radius: 8px; background: var(--fg-a07); font-size: 12px; font-weight: 600; color: var(--call-text-muted, #a8abaf); }
.stage-tasks-due.is-late { background: var(--stage-danger-tint); color: var(--stage-danger-text); }
.stage-tasks-people { display: inline-flex; }
.stage-tasks-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: -6px;
  border: 2px solid var(--call-card, #282a2c);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}
.stage-tasks-people .stage-tasks-avatar:first-child { margin-left: 0; }
.stage-tasks-more { margin-left: 4px; font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-tasks-assignbtn { width: 36px; height: 36px; }
.stage-tasks-menu {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 0 34px;
  padding: 6px;
  border-radius: 14px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  animation: stage-pop 160ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-tasks-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 10px 4px 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.stage-tasks-person:hover { background: var(--call-menu-hover, #353739); }
.stage-tasks-person:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: -2px; }
.stage-tasks-person .stage-tasks-avatar { margin-left: 0; border: none; }
.stage-tasks-person-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage-tasks-person-tick { display: inline-flex; color: transparent; }
.stage-tasks-person.is-on .stage-tasks-person-tick { color: var(--success-icon); }
.stage-tasks-donetoggle {
  margin: 10px 4px 4px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.stage-tasks-donetoggle:hover { color: var(--text-strong); }
.stage-tasks-donetoggle:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-tasks-empty { padding: 14px 10px; font-size: 14px; color: var(--call-text-muted, #a8abaf); }
.stage-tasks-muted { margin: 8px 4px 0; font-size: 12px; color: var(--call-text-muted, #a8abaf); }

/* ---------- item card ---------- */
.stage-item-card { display: flex; flex-direction: column; }
.stage-item-media { position: relative; background: var(--media-black); }
.stage-item-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  aspect-ratio: 16 / 10;
}
.stage-item-gallery::-webkit-scrollbar { display: none; }
.stage-item-img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.stage-item-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.stage-item-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-a50); transition: background-color 150ms ease-out; }
.stage-item-dots span.is-on { background: var(--media-white); }
.stage-item-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 22px; }
.stage-item-head { display: flex; align-items: flex-start; gap: 12px; }
.stage-item-avatar { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; object-fit: cover; }
.stage-item-headtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stage-item-type {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stage-item-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--text-strong); overflow-wrap: anywhere; }
.stage-item-sub { margin: 0; font-size: 14px; color: var(--call-text-muted, #a8abaf); }
.stage-item-pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.stage-item-price { font-size: 20px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stage-item-was { font-size: 14px; color: var(--call-text-muted, #a8abaf); }
.stage-item-rating { font-size: 14px; font-weight: 600; color: var(--gold-text); }
.stage-item-rating-n { font-weight: 500; color: var(--call-text-muted, #a8abaf); }
.stage-item-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--call-text, #e3e3e3); white-space: pre-line; }
.stage-item-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 0; }
.stage-item-fact { padding: 10px 12px; border-radius: 12px; background: var(--fg-a05); }
.stage-item-fact dt { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--call-text-muted, #a8abaf); }
.stage-item-fact dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stage-item-tags li { padding: 4px 10px; border-radius: 8px; background: var(--fg-a07); font-size: 12px; color: var(--call-text, #e3e3e3); }
.stage-item-section { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.stage-item-menu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.stage-item-menu-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.stage-item-menu-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.stage-item-menu-name { flex: 1; min-width: 0; color: var(--call-text, #e3e3e3); }
.stage-item-menu-price { font-weight: 600; color: var(--call-text-muted, #a8abaf); }
.stage-item-open { align-self: flex-start; text-decoration: none; }

/* ---------- offer card (onfiremobile-hhtvd, kinds/offer.md) ---------- */
.stage-offer-card { display: flex; flex-direction: column; transition: opacity 200ms var(--call-ease, ease-out); }
.stage-offer-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--media-black); }
.stage-offer-media.is-empty { display: flex; align-items: center; justify-content: center; background: var(--fg-a05); }
.stage-offer-media-emoji { font-size: 44px; line-height: 1; }
.stage-offer-img,
.stage-offer-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage-offer-pct {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stage-offer-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 22px; }
.stage-offer-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.stage-offer-badge {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stage-offer-card[data-state="sold_out"] .stage-offer-badge,
.stage-offer-card[data-state="ended"] .stage-offer-badge { background: var(--stage-danger-tint); color: var(--stage-danger-text); }
.stage-offer-card[data-state="paused"] .stage-offer-badge,
.stage-offer-card[data-state="unavailable"] .stage-offer-badge,
.stage-offer-card[data-state="scheduled"] .stage-offer-badge,
.stage-offer-card[data-state="starting"] .stage-offer-badge { background: var(--fg-a07); color: var(--call-text, #e3e3e3); }
.stage-offer-timer { font-size: 13px; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stage-offer-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--text-strong); overflow-wrap: anywhere; }
.stage-offer-product { margin: -4px 0 0; font-size: 14px; color: var(--call-text-muted, #a8abaf); overflow-wrap: anywhere; }
.stage-offer-pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.stage-offer-price { font-size: 24px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stage-offer-was { font-size: 15px; color: var(--call-text-muted, #a8abaf); font-variant-numeric: tabular-nums; }
.stage-offer-left { margin: 0; font-size: 13px; font-weight: 700; color: var(--call-accent-text, #ffb38a); }
.stage-offer-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--call-text, #e3e3e3); white-space: pre-line; overflow-wrap: anywhere; }
.stage-offer-ended {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--fg-a07);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.stage-offer-cta { align-self: stretch; height: 46px; font-size: 15px; }
.stage-offer-error { margin: 0; font-size: 13px; color: var(--stage-danger-text); }
.stage-offer-signin { display: flex; flex-direction: column; gap: 8px; }
.stage-offer-signin-text { margin: 0; font-size: 13px; color: var(--call-text, #e3e3e3); }
.stage-offer-signin-btn { align-self: stretch; height: 42px; }
.stage-offer-card[data-state="all_held"] .stage-offer-timer { color: var(--call-accent-text, #ffb38a); font-variant-numeric: normal; }
.stage-offer-card[data-state="unavailable"] .stage-offer-media,
.stage-offer-card[data-state="unavailable"] .stage-offer-pricerow { opacity: 0.5; filter: grayscale(1); }
.stage-offer-continue { display: flex; }
.stage-offer-continue-link { text-decoration: none; }
.stage-offer-note { margin: 0; font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-offer-card.is-ended .stage-offer-media,
.stage-offer-card.is-ended .stage-offer-pricerow,
.stage-offer-card.is-ended .stage-offer-note { opacity: 0.5; filter: grayscale(1); }
.stage-offer-card.is-ended .stage-offer-note { display: none; }

/* ---- Offer: Stripe's embedded Checkout inside the card (onfiremobile-6cnc3.5) ----
   The card turns into a checkout view: Back + title, then Stripe's form (an iframe from
   js.stripe.com that sizes itself; the box scrolls), then the paid summary. */
.stage-offer-co {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 18px;
  animation: stage-fade 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-offer-co-head { display: flex; align-items: center; gap: 12px; }
.stage-offer-co-back { flex: none; gap: 2px; padding: 0 14px 0 8px; }
.stage-offer-co-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stage-offer-co-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text-strong); }
.stage-offer-co-sub {
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--call-text-muted, #a8abaf);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.stage-offer-co-status { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: 14px; color: var(--call-text, #e3e3e3); }
.stage-offer-co-spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--fg-a14);
  border-top-color: var(--call-accent, #FF6B1F);
  border-radius: 50%;
  animation: stage-spin 800ms linear infinite;
}
.stage-offer-co-skel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 360px;
  padding: 22px 18px;
  border-radius: 16px;
  background: var(--fg-a05);
}
.stage-offer-co-skel .stage-skel-line:first-child { height: 20px; margin-bottom: 6px; }
.stage-offer-co-mount { min-height: 120px; border-radius: 16px; overflow: hidden; }
.stage-offer-co-paidcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 18px 20px;
  border-radius: 16px;
  background: var(--call-card, #282a2c);
  text-align: center;
  animation: stage-sheet-in 260ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-offer-co-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--success-a18);
  color: var(--success);
}
.stage-offer-co-paidtitle { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-strong); }
.stage-offer-co-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  width: 100%;
  margin: 4px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--fg-a08);
  font-size: 14px;
  text-align: left;
}
.stage-offer-co-k { color: var(--call-text-muted, #a8abaf); }
.stage-offer-co-v {
  margin: 0;
  color: var(--text-strong);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.stage-offer-co-receipt { margin: 0; font-size: 13px; color: var(--call-text-muted, #a8abaf); overflow-wrap: anywhere; }
.stage-offer-co-done { align-self: stretch; height: 44px; margin-top: 4px; font-size: 15px; }
.stage-offer-co-note { margin: 0; font-size: 12px; text-align: center; color: var(--call-text-muted, #a8abaf); }
/* Desktop: the sidebar widens to fit Stripe's form while it is open. It stays a flex column
   next to the video (stage.css), so the tiles shrink a little and are never covered;
   max-width: 50% still holds. */
@media (min-width: 769px) {
  .stage-panel:has(.stage-offer.is-checkout) { width: max(var(--stage-w, 420px), 480px); }
}
/* Phones: the checkout takes the sheet's full height (it floats above the video). */
@media (max-width: 768px) {
  .call-layout > .stage-panel:has(.stage-offer.is-checkout) {
    top: max(8px, env(safe-area-inset-top, 0px));
    height: auto;
  }
}

/* ---------- goal ---------- */
.stage-goal { padding: 18px 18px 24px; }
.stage-goal-card { --goal-color: var(--call-accent, #FF6B1F); display: flex; flex-direction: column; gap: 18px; }
.stage-goal-head { display: flex; align-items: flex-start; gap: 12px; }
.stage-goal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--goal-color) 22%, transparent);
  font-size: 24px;
}
.stage-goal-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stage-goal-group { font-size: 12px; font-weight: 600; color: var(--call-text-muted, #a8abaf); }
.stage-goal-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--text-strong); overflow-wrap: anywhere; }
.stage-goal-status { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; background: var(--fg-a08); font-size: 12px; font-weight: 700; color: var(--call-text, #e3e3e3); }
.stage-goal-status.is-completed { background: var(--success-a18); color: var(--success-text-2); }
.stage-goal-status.is-paused { background: var(--gold-a16); color: var(--gold-text); }
.stage-goal-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.stage-goal-progress { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.stage-goal-ring { display: block; }
.stage-goal-track { fill: none; stroke: var(--fg-a08); stroke-width: 12; }
.stage-goal-arc { fill: none; stroke: var(--goal-color); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 700ms cubic-bezier(0.2, 0, 0, 1); }
.stage-goal-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stage-goal-pct { font-size: 28px; font-weight: 800; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stage-goal-pct-sub { font-size: 12px; font-weight: 600; color: var(--success-text-2); }
.stage-goal-side { flex: 1 1 160px; display: flex; flex-direction: column; gap: 6px; }
.stage-goal-amount { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stage-goal-due,
.stage-goal-start { margin: 0; font-size: 13px; color: var(--call-text-muted, #a8abaf); }
.stage-goal-due.is-late { color: var(--stage-danger-text); }
.stage-goal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.stage-goal-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--fg-a05); }
.stage-goal-stat-value { font-size: 18px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stage-goal-stat-label { font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-goal-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--call-text, #e3e3e3); white-space: pre-line; }

/* ---------- calendar ---------- */
.stage-cal { display: flex; flex-direction: column; min-height: 100%; }
.stage-cal-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 8px 6px;
  background: var(--call-card, #282a2c);
  border-bottom: 1px solid var(--call-panel-border, #2e3134);
}
.stage-cal-bar.hidden { display: none; }
.stage-cal-nav { width: 36px; height: 36px; }
.stage-cal-nav:disabled { opacity: 0.35; cursor: default; }
.stage-cal-nav.hidden { visibility: hidden; display: inline-flex; }
.stage-cal-range { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-strong); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage-cal-seg .stage-seg-btn { height: 28px; padding: 0 10px; font-size: 12px; }
.stage-cal > .stage-back-chip { margin: 10px auto 0; }
.stage-cal-note { margin: 10px 14px 0; font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-cal-note.hidden { display: none; }
.stage-cal-body { padding: 6px 10px 18px; }
.stage-cal-day { padding: 10px 4px 4px; }
.stage-cal-dayhead { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--call-text-muted, #a8abaf); }
.stage-cal-free { margin: 0 0 6px; font-size: 13px; color: var(--fg-a35); }
.stage-cal-empty { margin: 16px 4px; font-size: 14px; color: var(--call-text-muted, #a8abaf); }
.stage-cal-evwrap { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.stage-cal-ev {
  --ev-color: var(--call-accent, #FF6B1F);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "time title" ". place" ". more";
  gap: 2px 10px;
  width: 100%;
  padding: 10px 12px 10px 14px;
  border: 1px solid transparent;
  border-left: 4px solid var(--ev-color);
  border-radius: 12px;
  background: var(--fg-a05);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms var(--call-ease, ease-out), border-color 140ms var(--call-ease, ease-out), box-shadow 200ms var(--call-ease, ease-out);
}
.stage-cal-ev:hover { background: var(--fg-a08); }
.stage-cal-ev:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-cal-ev.is-busy {
  background: repeating-linear-gradient(135deg, var(--fg-a05) 0 8px, var(--fg-a025) 8px 16px);
  border-left-color: var(--fg-a30);
  color: var(--call-text-muted, #a8abaf);
}
.stage-cal-ev.is-highlight { border-color: var(--call-accent, #FF6B1F); box-shadow: 0 0 0 3px var(--accent-a25); }
.stage-cal-ev-time { grid-area: time; font-size: 12px; font-weight: 600; color: var(--call-text-muted, #a8abaf); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }
.stage-cal-ev-title { grid-area: title; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.stage-cal-ev-place { grid-area: place; font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-cal-ev-more { grid-area: more; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-cal-ev-link { align-self: flex-start; height: 32px; padding: 0 14px; text-decoration: none; }
.stage-cal-week { display: grid; grid-template-columns: repeat(var(--days, 7), minmax(0, 1fr)); gap: 4px; padding-top: 8px; }
.stage-cal-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stage-cal-colhead { display: flex; flex-direction: column; align-items: center; padding: 4px 0 6px; border-bottom: 1px solid var(--call-panel-border, #2e3134); }
.stage-cal-colday { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--call-text-muted, #a8abaf); }
.stage-cal-coldate { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.stage-cal-week .stage-cal-ev { grid-template-columns: 1fr; grid-template-areas: "time" "title"; padding: 6px 6px 6px 8px; border-left-width: 3px; border-radius: 8px; }
.stage-cal-week .stage-cal-ev-time { font-size: 10px; white-space: normal; }
.stage-cal-week .stage-cal-ev-title { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* calendar picker options */
.stage-cal-opts { display: flex; flex-direction: column; gap: 14px; }
.stage-cal-optgroup { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.stage-cal-optlabel { padding: 0; font-size: 13px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-cal-optnote { font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-cal-optnote.is-warn { color: var(--stage-danger-text); }
.stage-cal-cals { max-height: 180px; overflow-y: auto; }
.stage-cal-cal { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.stage-cal-cal:hover { background: var(--fg-a05); }
.stage-cal-cal input { width: 18px; height: 18px; accent-color: var(--call-accent, #FF6B1F); }
.stage-cal-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: var(--call-accent, #FF6B1F); }
.stage-cal-calname { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--call-text, #e3e3e3); }
.stage-cal-calsub { margin-left: auto; font-size: 12px; color: var(--call-text-muted, #a8abaf); }
/* Chat calendars (onfiremobile-8jep9): "My calendars" / "Chat calendars" disclosure sections */
.stage-cal-secs { gap: 6px; }
.stage-cal-sec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stage-cal-sechead {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 14px 0 10px;
  border: 1px solid var(--call-panel-border, #2e3134); border-radius: 999px; background: var(--fg-a05);
  color: var(--call-text, #e3e3e3); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.stage-cal-sechead:hover { background: var(--fg-a08); }
.stage-cal-sechead:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-cal-chev {
  width: 8px; height: 8px; margin: 0 4px; flex-shrink: 0;
  border-right: 2px solid var(--call-text-muted, #a8abaf); border-bottom: 2px solid var(--call-text-muted, #a8abaf);
  transform: rotate(-45deg); transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.stage-cal-sechead[aria-expanded="true"] .stage-cal-chev { transform: rotate(45deg); }
.stage-cal-sectitle { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage-cal-secbadge {
  flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fg-a08); color: var(--call-text-muted, #a8abaf); font-size: 12px; font-weight: 600;
}
.stage-cal-secbadge.is-on { background: var(--accent-a25); color: var(--text-strong); }
.stage-cal-sec .stage-cal-cals { margin: 0; padding: 2px 0 4px 6px; border: 0; min-width: 0; }
.stage-cal-sec .stage-cal-cals[hidden] { display: none; }
.stage-cal-avatar {
  --cal-color: var(--call-accent, #FF6B1F);
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cal-color); color: var(--text-on-accent, #fff); font-size: 10px; font-weight: 700;
}
.stage-cal-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage-cal-secerr { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 6px; }
.stage-cal-retry { height: 32px; padding: 0 14px; }
.stage-cal-sec-chats .stage-cal-calsub { flex-shrink: 0; white-space: nowrap; }
.stage-cal-skel .stage-kind-skeleton { padding: 4px 2px; gap: 12px; }

@media (max-width: 599px) {
  .stage-disp-thumb { width: 84px; }
  .stage-tasks-who { flex-basis: 120px; }
  .stage-item-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-back-chip,
  .stage-form-done,
  .stage-tasks-menu { animation: none; }
  .stage-cal-sechead,
  .stage-cal-chev,
  .stage-switch-track,
  .stage-switch-track::after,
  .stage-disp-thumb,
  .stage-disp-frame,
  .stage-form-choice,
  .stage-form-bar-fill,
  .stage-tasks-bar-fill,
  .stage-tasks-check,
  .stage-tasks-row,
  .stage-goal-arc,
  .stage-cal-ev,
  .stage-offer-card { transition: none; }
  .stage-offer-co,
  .stage-offer-co-paidcard,
  .stage-offer-co-spinner,
  .stage-offer-co-skel .stage-skel-line { animation: none; }
  .stage-back-chip:active,
  .stage-disp-thumb:active,
  .stage-form-choice:active:not(:disabled),
  .stage-tasks-check:active:not(:disabled) { transform: none; }
}

/* Picker: several option switches for one kind (form, tasks). */
.stage-kind-opts { display: flex; flex-direction: column; gap: 8px; }

/* Calendar picker: the exact span being shared, and the Show details confirm. */
.stage-cal-sharing { margin: 0; font-size: 13px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-cal-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stage-accent-line);
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  animation: stage-pop 180ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-cal-confirm-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-strong); }
.stage-cal-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.stage-cal-confirm-actions .stage-btn { height: 36px; }
@media (prefers-reduced-motion: reduce) { .stage-cal-confirm { animation: none; } }

/* ---------- world (Living Drawings, DW6): picker tiles, scene, my-drawing card, host controls ---------- */
.stage-world .hidden,
.stage-world-opts .hidden { display: none !important; }
/* Tile art: fixed illustration colours (theme-invariant, like --illus-*). */
.stage-world-env[data-env="field"],      .stage-world-envpill[data-env="field"]      { --world-a: #9be15d; --world-b: #3a8f3a; }
.stage-world-env[data-env="race_track"], .stage-world-envpill[data-env="race_track"] { --world-a: #f7b267; --world-b: #6b4f3a; }
.stage-world-env[data-env="space"],      .stage-world-envpill[data-env="space"]      { --world-a: #3b2a7a; --world-b: #0b1026; }
.stage-world-env[data-env="sky"],        .stage-world-envpill[data-env="sky"]        { --world-a: #bfe6ff; --world-b: #4aa3e8; }
.stage-world-env[data-env="water"],      .stage-world-envpill[data-env="water"]      { --world-a: #5fd3e6; --world-b: #135c9c; }
.stage-world-env[data-env="home"],       .stage-world-envpill[data-env="home"]       { --world-a: #ffd8a8; --world-b: #c9724a; }

.stage-world-opts { display: flex; flex-direction: column; gap: 10px; }
.stage-world-optlabel,
.stage-world-row-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--call-text-muted, #a8abaf); }
.stage-world-envs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stage-world-env {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px 6px 8px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 14px;
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)), transform 120ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-world-env:hover { border-color: var(--fg-a30); }
.stage-world-env:active { transform: scale(0.97); }
.stage-world-env:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-world-env[aria-checked="true"] { border-color: var(--call-accent, #FF6B1F); box-shadow: 0 0 0 1px var(--call-accent, #FF6B1F); }
.stage-world-env-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--world-a), var(--world-b));
  font-size: 26px;
}
.stage-world-env-name { font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stage-kind-box.stage-kind-world { display: flex; flex-direction: column; }
.stage-world { display: flex; flex-direction: column; gap: 12px; padding: 12px; box-sizing: border-box; }
.stage-world-scene {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--media-black);
}
.stage-world-scene:fullscreen { border-radius: 0; aspect-ratio: auto; }
.stage-world-screen { position: absolute; inset: 0; }
.stage-world-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--media-black); transition: opacity 220ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)); }
.stage-world-frame.is-leaving { opacity: 0; pointer-events: none; }
.stage-world-overlay { position: absolute; inset: 0; display: none; background: var(--call-card, #282a2c); }
.stage-world-overlay.is-on { display: flex; flex-direction: column; justify-content: center; }
.stage-world-overlay .stage-kind-message { min-height: 0; }
.stage-world-overlay-sub { margin: 0; font-size: 13px; color: var(--call-text-muted, #a8abaf); }
.stage-world-full {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  background: var(--media-a55);
  color: var(--media-white);
}
.stage-world-full:hover { background: var(--media-a70); color: var(--media-white); }
.stage-world-full.hidden { display: none; }

.stage-world-card,
.stage-world-host {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
}
.stage-world-card.hidden,
.stage-world-host.hidden { display: none; }
.stage-world-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  margin: -4px -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  cursor: pointer;
}
.stage-world-card-head:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-world-card-title,
.stage-world-host-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--call-text, #e3e3e3); }
.stage-world-chev { color: var(--call-text-muted, #a8abaf); transform: rotate(-90deg); transition: transform 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)); }
.stage-world-card.is-open .stage-world-chev { transform: none; }
.stage-world-card-body { display: flex; flex-direction: column; gap: 10px; animation: stage-pop 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)); }
.stage-world-card-body[hidden] { display: none; }
.stage-world-card-top { display: flex; gap: 14px; align-items: flex-start; }
.stage-world-qr {
  flex-shrink: 0;
  width: 132px;
  height: 132px;
  padding: 8px;                         /* quiet zone: white paper in both themes */
  box-sizing: content-box;
  border-radius: 12px;
  background: var(--qr-paper);
}
.stage-world-qr-canvas { display: block; width: 132px; height: 132px; }
.stage-world-qr.is-loading .stage-world-qr-canvas,
.stage-world-qr.is-missing .stage-world-qr-canvas { visibility: hidden; }
.stage-world-qr.is-loading { background: var(--fg-a08); animation: stage-world-pulse 1.4s var(--call-ease, cubic-bezier(0.2, 0, 0, 1)) infinite alternate; }
@keyframes stage-world-pulse { from { opacity: 0.55; } to { opacity: 1; } }
.stage-world-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.stage-world-steps { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--call-text, #e3e3e3); }
.stage-world-link { margin: 0; font-size: 13px; font-weight: 600; color: var(--call-accent-text, #ffb38a); overflow-wrap: anywhere; }
.stage-world-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.stage-world-code-label { font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-world-code { font: 700 15px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; color: var(--text-strong); }
.stage-world-copy.stage-btn { height: 30px; padding: 0 12px; font-size: 12px; }
.stage-world-code-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.stage-world-muted { margin: 0; font-size: 12px; line-height: 1.45; color: var(--call-text-muted, #a8abaf); }
.stage-world-counts { margin: 0; font-size: 13px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-world-open.stage-btn { align-self: flex-start; height: 36px; }

.stage-world-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.stage-world-envpills { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-world-envpill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(160deg, var(--world-a), var(--world-b));
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)), border-color 150ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-world-envpill:active { transform: scale(0.94); }
.stage-world-envpill[aria-checked="true"] { border-color: var(--call-accent, #FF6B1F); box-shadow: 0 0 0 2px var(--call-surface, #202124) inset; }
.stage-world-envpill:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-world-approval { min-height: 52px; }
.stage-world-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--call-border, #3c4043);
}
.stage-world-step { width: 32px; height: 32px; font-size: 18px; color: var(--call-text, #e3e3e3); }
.stage-world-step:disabled { opacity: 0.35; cursor: default; }
.stage-world-step-val { min-width: 28px; text-align: center; font-size: 14px; font-weight: 700; color: var(--call-text, #e3e3e3); }
.stage-world-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-world-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px 0 4px;
  border-radius: 999px;
  background: var(--fg-a06);
  border: 1px solid var(--call-border, #3c4043);
  animation: stage-pop 180ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-world-chip-img { width: 24px; height: 24px; border-radius: 50%; object-fit: contain; background: var(--qr-paper); }
.stage-world-chip-name { max-width: 120px; padding-left: 4px; font-size: 12px; font-weight: 600; color: var(--call-text, #e3e3e3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-world-chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
}
.stage-world-chip-btn:hover { background: var(--fg-a10); color: var(--text-strong); }
.stage-world-chip-btn.is-ok { color: var(--success-text); }
.stage-world-chip-btn.is-no:hover { color: var(--stage-danger-text); }
.stage-world-chip-btn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 1px; }
.stage-world-clear.stage-btn { align-self: flex-start; }
.stage-world-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stage-danger-line);
  background: var(--stage-danger-tint);
  animation: stage-pop 180ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-world-confirm p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-strong); }
.stage-world-confirm-acts { display: flex; justify-content: flex-end; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
  .stage-world-card-body,
  .stage-world-chip,
  .stage-world-confirm,
  .stage-world-qr.is-loading { animation: none; }
  .stage-world-chev,
  .stage-world-frame { transition: none; }
  .stage-world-env:active,
  .stage-world-envpill:active { transform: none; }
}

/* ---------- game (Questix quiz, onfiremobile-ombmd / 6ye4x.1.5): picker choices, big screen, answer pad ---------- */
.stage-game .hidden,
.stage-game-opts .hidden { display: none !important; }
.stage-game-opts { display: flex; flex-direction: column; gap: 10px; }
.stage-game-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--call-text-muted, #a8abaf); }
.stage-game-group { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.stage-game-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 14px;
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)), transform 120ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-game-choice:hover:not(:disabled) { border-color: var(--fg-a30); }
.stage-game-choice:active:not(:disabled) { transform: scale(0.98); }
.stage-game-choice:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-game-choice[aria-checked="true"] { border-color: var(--call-accent, #FF6B1F); box-shadow: 0 0 0 1px var(--call-accent, #FF6B1F); }
.stage-game-choice:disabled { cursor: default; opacity: 0.55; }
.stage-game-choice-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.14));
  font-size: 18px;
}
.stage-game-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stage-game-choice-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-game-choice-sub { font-size: 12px; color: var(--call-text-muted, #a8abaf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-game-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.stage-game-muted { margin: 0; font-size: 13px; line-height: 1.45; color: var(--call-text-muted, #a8abaf); }
.stage-game-pin { display: flex; flex-direction: column; gap: 6px; }
.stage-game-pin-input {
  height: 40px;
  max-width: 180px;
  padding: 0 16px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--call-surface, #202124);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}
.stage-game-pin-input:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-game-pin.is-on .stage-game-pin-input { border-color: var(--call-accent, #FF6B1F); }

.stage-kind-box.stage-kind-game { display: flex; flex-direction: column; container: stage-game / size; }
/*
 * The panel never scrolls (onfiremobile-u7m9x, owner 2026-10-11: "question and buttons - without
 * scrolling"): the header, status line and footer take their own height, the frames share what is
 * left (no 16:9 lock, no 420 px pad floor) and the Questix embed pages fit themselves to their
 * frame. Stacked in a tall panel (side panel, phones); side by side in a wide one (main area,
 * sideways phones), measured on the panel itself (container queries), not the window.
 */
.stage-game {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.stage-game-head { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stage-game-pinchip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.14));
  color: var(--call-text, #e3e3e3);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.stage-game-status {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--call-border, #3c4043);
  color: var(--call-text-muted, #a8abaf);
  font-size: 12px;
  font-weight: 600;
}
.stage-game-status[data-status="active"] { border-color: var(--call-accent, #FF6B1F); color: var(--call-text, #e3e3e3); }
.stage-game-toggle { display: inline-flex; margin-left: auto; padding: 2px; border-radius: 999px; background: var(--call-surface, #202124); border: 1px solid var(--call-border, #3c4043); }
.stage-game-seg {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)), color 150ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-game-seg[aria-selected="true"] { background: var(--call-accent, #FF6B1F); color: var(--call-accent-text, #ffffff); }
.stage-game-seg:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-game-area { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.stage-game-screen {
  position: relative;
  flex: 1.25 1 0;
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--media-black);
}
.stage-game-screen.is-msg { flex: 0 0 auto; min-height: 96px; background: var(--call-card, #282a2c); }
.stage-game-screen-msg { display: flex; flex-direction: column; justify-content: center; padding: 16px; }
.stage-game-screen:not(.is-msg) .stage-game-screen-msg { display: none; }
.stage-game-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--call-card, #282a2c); }
.stage-game-screen-frame,
.stage-game-pad-frame { position: absolute; inset: 0; }
.stage-game-pad {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-card, #282a2c);
}
.stage-game-hostcard {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
}
.stage-game-host-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--call-text, #e3e3e3); }
.stage-game-line,
.stage-game-foot { flex: none; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stage-game-line { font-size: 14px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-game-foot { font-size: 12px; color: var(--call-text-muted, #a8abaf); }
/* Wide panel (main area, sideways phone): big screen | pad (or host card) side by side. */
@container stage-game (min-width: 560px) and (min-aspect-ratio: 5 / 4) {
  .stage-game-area { flex-direction: row; }
  .stage-game-screen { flex: 1.5 1 0; }
  .stage-game-screen.is-msg { flex: 0 1 36%; }
  .stage-game-pad { flex: 1 1 0; min-width: 220px; max-width: 560px; }
  .stage-game-hostcard { flex: 0 1 300px; min-width: 200px; justify-content: center; overflow: hidden; }
}
/* Short panel (sideways phone, a low window): the frames get the height; the pad shows the status itself. */
@container stage-game (max-height: 380px) {
  .stage-game { gap: 6px; padding: 6px 8px; }
  .stage-game-area { gap: 6px; }
  .stage-game-line,
  .stage-game-foot { display: none; }
}
/* Very short panel (a 300 px window): slimmer header chips. */
@container stage-game (max-height: 260px) {
  .stage-game-pinchip,
  .stage-game-status { height: 22px; padding: 0 10px; font-size: 11px; }
  .stage-game-seg { height: 22px; padding: 0 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-game-choice, .stage-game-seg { transition: none; }
}

/* ---------- board (whiteboard, W4 / WL2): toolbar, guests switch, the link's boards, the board page frame ---------- */
.stage-board .hidden { display: none !important; }
.stage-kind-box.stage-kind-board { display: flex; flex-direction: column; overflow: hidden; }
.stage-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; box-sizing: border-box; }
.stage-board-bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 36px; }
.stage-board-spacer { flex: 1; }
.stage-board-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--fg-a06);
  color: var(--call-text-muted, #a8abaf);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  animation: stage-pop 180ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-board-chip[data-tone="ok"] { background: var(--success-text-a16); color: var(--success-text); }
.stage-board-chip[data-tone="warn"] { background: var(--warning-a14); color: var(--warning-text); }
.stage-board-listbtn.stage-btn { height: 32px; padding: 0 14px; }
.stage-board-listbtn[aria-expanded="true"] { background: var(--call-accent-soft, rgba(255, 107, 31, 0.16)); border-color: var(--stage-accent-line); color: var(--call-accent-text, #ffb38a); }
.stage-board-full { width: 36px; height: 36px; }
.stage-board-host { flex: none; }
.stage-board-guests { min-height: 52px; }
.stage-board-guests.is-busy { opacity: 0.7; cursor: progress; }
.stage-board-note { flex: none; margin: 0; }

.stage-board-list {
  flex: none;
  max-height: 45%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 6px 8px;
  border-radius: 14px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--call-surface, #202124);
  animation: stage-pop 180ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-board-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 2px 8px; }
.stage-board-list-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--call-text, #e3e3e3); }
.stage-board-list-close { width: 32px; height: 32px; }
.stage-board-list .stage-kind-message { min-height: 0; padding: 12px; }
.stage-board-muted { margin: 0; padding: 8px 10px 6px; font-size: 13px; line-height: 1.45; color: var(--call-text-muted, #a8abaf); }
.stage-board-rows { display: flex; flex-direction: column; gap: 2px; }
.stage-board-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px; border-radius: 12px; }
.stage-board-row:hover { background: var(--fg-a04); }
.stage-board-tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  border-radius: 8px;
  background: var(--board-tile-bg, var(--call-accent, #FF6B1F));
  color: var(--board-tile-ink, var(--call-accent-ink, #1a1a1a));
  font-size: 14px;
  font-weight: 700;
}
.stage-board-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stage-board-row-title { font-size: 14px; font-weight: 600; color: var(--call-text, #e3e3e3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-board-row-meta { font-size: 12px; color: var(--call-text-muted, #a8abaf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-board-badge {
  flex: none;
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  color: var(--call-accent-text, #ffb38a);
  font-size: 12px;
  font-weight: 600;
}
.stage-board-open.stage-btn { flex: none; height: 32px; padding: 0 14px; }

.stage-board-scene {
  position: relative;
  flex: 1;
  min-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--call-card, #282a2c);
  border: 1px solid var(--call-panel-border, #2e3134);
}
.stage-board-scene:fullscreen { border-radius: 0; border: 0; }
.stage-board-screen { position: absolute; inset: 0; }
.stage-board-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  transition: opacity 220ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-board-frame.is-leaving { opacity: 0; pointer-events: none; }
.stage-panel.is-resizing .stage-board-frame { pointer-events: none; }
.stage-board-overlay { position: absolute; inset: 0; display: none; background: var(--call-card, #282a2c); }
.stage-board-overlay.is-on { display: flex; flex-direction: column; justify-content: center; }
.stage-board-overlay .stage-kind-message { min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .stage-board-chip,
  .stage-board-list { animation: none; }
  .stage-board-frame { transition: none; }
}

/* ---- kind `video`: YouTube watch-together (stage-video.js, onfiremobile-oridx) ---- */
.stage-video { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.stage-video .hidden { display: none !important; }
.stage-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--stage-video-letterbox, #000);  /* black in both themes, like any video */
  box-shadow: var(--shadow-card);
}
.stage-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Viewers can't click the player (playback is the presenter's); their own volume is below. */
.stage-video-shield { position: absolute; inset: 0; z-index: 1; cursor: default; }
.stage-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim-a55);
  animation: stage-video-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.stage-video-play { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; }
.stage-video-bar { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.stage-video-status { flex: 1; margin: 0; font-size: 13px; line-height: 1.4; color: var(--call-text-muted, #a8abaf); }
.stage-video-tools { display: flex; align-items: center; gap: 6px; }
.stage-video-volume { width: 96px; accent-color: var(--accent, #ff6b1f); }
.stage-video-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
  border-radius: 14px;
  background: var(--fg-a08, rgba(255, 255, 255, 0.08));
}
@keyframes stage-video-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stage-video-overlay { animation: none; } }
@media (max-width: 768px) { .stage-video { padding: 12px; } .stage-video-volume { width: 72px; } }

/* Main area (stage-main-area.js, owner 2026-10-07): the video and the slide take all the room the
   centre stage has. The players letterbox inside, so the box drops its fixed ratio there. */
#screen-call .stage-panel.stage-main-panel .stage-video { height: 100%; box-sizing: border-box; }
#screen-call .stage-panel.stage-main-panel .stage-video-stage { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
#screen-call .stage-panel.stage-main-panel .stage-disp:not(.is-vertical) .stage-disp-stage {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}

/* The presenter's stream (relay, onfiremobile-xyb5r.4) in place of the YouTube player. */
.stage-video-relay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--stage-video-letterbox, #000); }
.stage-video-relay-btn { flex: none; min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; }

/* Full screen (onfiremobile-xyb5r.8): the whole video box — player, status, volume, the exit button.
   'native' is the browser's full screen; .is-page-fs covers the page where there is none (iPhone). */
.stage-video.is-fullscreen {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: var(--media-black, #000);
  color: var(--media-white, #fff);
}
.stage-video.is-fullscreen .stage-video-stage { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.stage-video.is-fullscreen .stage-video-status { color: var(--media-white, #fff); opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-video.is-fullscreen .stage-icon-btn { color: var(--media-white, #fff); }
.stage-video.is-fullscreen .stage-video-relay-btn { display: none; }
.stage-video.is-page-fs { position: fixed; inset: 0; z-index: 2147483000; }
/* The box is position: fixed inside the panel: nothing above it may become its containing block or
   paint over it (the panel's own stacking level is lifted over the header and the control bar). */
#screen-call .call-layout > .stage-panel:has(.stage-video.is-page-fs) {
  z-index: 2147483000;
  transform: none;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  contain: none;
  will-change: auto;
  animation: none;
}
#screen-call .stage-panel:has(.stage-video.is-page-fs) .stage-body,
#screen-call .stage-panel:has(.stage-video.is-page-fs) .stage-kind-box {
  transform: none;
  filter: none;
  backdrop-filter: none;
  contain: none;
  will-change: auto;
  animation: none;
}
/* Covering the page shows only the video (owner: "the video previews of other people can be hidden -
   in both landscape and portrait layouts. so only video should be full screen visible"); hidden, the
   tiles' <video> layers can't paint through it either (iOS). */
#screen-call:has(.stage-video.is-page-fs) .participants-grid,
#screen-call:has(.stage-video.is-page-fs) .screen-share-container,
#screen-call:has(.stage-video.is-page-fs) .call-header,
#screen-call:has(.stage-video.is-page-fs) .call-controls-wrap { visibility: hidden; }

/* ---------- bible (onfiremobile-eas66): a chapter or a few verses everyone reads together ---------- */
.stage-bible { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.stage-bible-wrap { max-width: 780px; margin: 0 auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 16px; }
.stage-bible-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.stage-bible-titles { min-width: 0; }
.stage-bible-ref { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--text-strong); overflow-wrap: anywhere; }
.stage-bible-tr { margin: 2px 0 0; font-size: 13px; color: var(--call-text-muted, #a8abaf); }
.stage-bible-tools,
.stage-bible-controls,
.stage-bible-picker,
.stage-bible-verses { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.stage-bible-picker { flex-direction: column; align-items: stretch; padding: 4px 0; }
.stage-bible-controls { align-items: center; padding: 8px 10px; border-radius: 16px; background: var(--fg-a05); border: 1px solid var(--call-border, #3c4043); }
.stage-bible-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stage-bible-field-label { font-size: 12px; color: var(--call-text-muted, #a8abaf); }
.stage-bible-select,
.stage-bible-num {
  height: 38px;
  max-width: 100%;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--call-border, #3c4043);
  background: var(--fg-a05);
  color: var(--text-strong);
  font: inherit;
  font-size: 14px;
}
.stage-bible-num { width: 96px; }
.stage-bible-select:focus-visible,
.stage-bible-num:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-bible-step { font-size: 20px; line-height: 1; }
.stage-bible-step:disabled { opacity: 0.35; pointer-events: none; }
.stage-bible-hint,
.stage-bible-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--call-text-muted, #a8abaf); }
.stage-bible-text { font-size: 19px; line-height: 1.7; color: var(--call-text, #e3e3e3); overflow-wrap: anywhere; }
.stage-bible-v { margin: 0 0 0.7em; border-radius: 10px; }
.stage-bible-n { margin-inline-end: 2px; font-size: 0.6em; font-weight: 700; color: var(--call-accent, #ff7f3d); }
.stage-bible-v.is-tappable { cursor: pointer; padding: 2px 6px; margin-inline: -6px; transition: background-color 0.15s ease-out; }
.stage-bible-v.is-tappable:hover { background: var(--fg-a08); }
.stage-bible-v.is-tappable:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-bible-text.is-focus { font-size: clamp(22px, 3.2vw, 34px); line-height: 1.55; color: var(--text-strong); }
.stage-bible-text.is-single { font-size: clamp(26px, 4vw, 44px); line-height: 1.45; text-align: center; padding-block: 12px; }
.stage-bible-empty { margin: 0; color: var(--call-text-muted, #a8abaf); text-align: center; }
@media (max-width: 540px) {
  .stage-bible-wrap { padding: 14px 14px 24px; }
  .stage-bible-text { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-bible-v.is-tappable { transition: none; }
}

/* ===== /account-panel.css ===== */
/* =============================================================================
 * account-panel.css — header "Sign in" chip + private "My notes & files" panel
 * (account-panel.js, bead onfiremobile-3h729). Desktop: right-hand sheet like
 * side-panels.css; phones (< 600px): a bottom sheet. Colours come from the
 * call theme tokens (#screen-call) with literal fallbacks.
 * ========================================================================== */

.acct-panel,
.acct-chip,
.acct-toast-layer,
.acct-ai-host {
  --acct-accent: var(--call-accent, #FF6B1F);
  --acct-accent-hover: var(--call-accent-hover, #ff7f3d);
  --acct-accent-ink: var(--call-accent-ink, #1a1a1a);
  --acct-accent-soft: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  --acct-accent-text: var(--call-accent-text, #ffb38a);
  --acct-bg: var(--call-panel, #1e1f20);
  --acct-border: var(--call-panel-border, #2e3134);
  --acct-card: var(--call-card, #282a2c);
  --acct-card-hover: var(--call-card-hover, #333538);
  --acct-surface: var(--call-surface, #202124);
  --acct-text: var(--call-text, #e3e3e3);
  --acct-muted: var(--call-text-muted, #a8abaf);
  --acct-focus: var(--call-focus, #ff7f3d);
  --acct-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- Sign-in modal: in-call context line ---------------------------------- */
.signin-context {
  margin: -4px 0 12px;
  line-height: 1.4;
}

/* ---- Header chip ---------------------------------------------------------- */
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--call-border, #3c4043);
  border-radius: 999px;
  background: var(--acct-surface);
  color: var(--acct-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms var(--acct-ease);
}

.acct-chip:hover {
  background: var(--call-surface-hover, #3c4043);
}

.acct-chip:active {
  transform: scale(0.97);
}

.acct-chip.is-signed-in {
  width: 32px;
  padding: 0;
  justify-content: center;
  border-color: transparent;
  background: transparent;
}

.acct-chip.is-signed-in[aria-expanded="true"] .acct-avatar {
  box-shadow: 0 0 0 2px var(--acct-accent);
}

.acct-chip:focus-visible,
.acct-panel :focus-visible {
  outline: 2px solid var(--acct-focus);
  outline-offset: 2px;
}

.acct-chip .acct-icon {
  display: inline-flex;
}

@media (max-width: 479px) {
  .acct-chip:not(.is-signed-in) {
    width: 32px;
    padding: 0;
    justify-content: center;
  }
  .acct-chip-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.acct-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--acct-accent-soft);
  color: var(--acct-accent-text);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.acct-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acct-avatar-lg {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

/* ---- More-menu entry -------------------------------------------------------- */
.acct-menu-icon {
  display: inline-flex;
  color: var(--text-icon);
  flex-shrink: 0;
}

.acct-menu-icon svg {
  width: 20px;
  height: 20px;
}

/* ---- Panel shell ------------------------------------------------------------
 * Desktop (> 768px): in the call layout's flex row like the chat panel, so the
 * stage and the controls shrink instead of hiding under it. 600-768px: a fixed
 * right-hand sheet over the call (the chat panel overlays there too). Phones
 * (< 600px): a bottom sheet.
 */
.acct-panel {
  position: relative;
  flex: 0 0 auto;
  width: 0;
  display: flex;
  flex-direction: column;
  background: var(--acct-bg);
  color: var(--acct-text);
  border-left: 1px solid transparent;
  overflow: hidden;
  visibility: hidden;
  transition: width 260ms var(--acct-ease), border-color 260ms var(--acct-ease), visibility 0s linear 260ms;
  outline: none;
}

.acct-panel > * {
  min-width: 380px;
  max-width: 380px;
}

.acct-panel.acct-open {
  width: 380px;
  border-left-color: var(--acct-border);
  visibility: visible;
  transition: width 260ms var(--acct-ease), border-color 260ms var(--acct-ease), visibility 0s linear 0s;
}

.acct-grab {
  display: none;
}

@media (max-width: 768px) {
  .acct-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    width: 380px;
    max-width: 100vw;
    border-left-color: var(--acct-border);
    box-shadow: -12px 0 32px var(--shadow-a35);
    transform: translateX(100%);
    transition: transform 280ms var(--acct-ease), visibility 0s linear 280ms;
  }
  .acct-panel > * {
    min-width: 0;
    max-width: none;
  }
  .acct-panel.acct-open {
    width: 380px;
    transform: none;
    transition: transform 280ms var(--acct-ease), visibility 0s linear 0s;
  }
}

@media (max-width: 599px) {
  .acct-panel,
  .acct-panel.acct-open {
    top: auto;
    left: 0;
    width: 100vw;
    height: min(86vh, 86dvh);
    border-left: none;
    border-top: 1px solid var(--acct-border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 32px var(--shadow-a45);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .acct-panel {
    transform: translateY(100%);
  }
  .acct-panel.acct-open {
    transform: none;
  }
  .acct-grab {
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--fg-a24);
    flex-shrink: 0;
  }
  .acct-panel > .acct-grab {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-panel,
  .acct-panel.acct-open,
  .acct-chip,
  .acct-toast,
  .acct-sk {
    transition: none !important;
    animation: none !important;
  }
}

.acct-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 12px 8px 20px;
  padding-top: max(16px, env(safe-area-inset-top));
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .acct-header {
    padding-top: 8px;
  }
}

.acct-title-wrap {
  min-width: 0;
}

.acct-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--acct-text);
}

.acct-private {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--acct-muted);
}

.acct-icon,
.acct-private .acct-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.acct-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--acct-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}

.acct-icon-btn:hover {
  background: var(--fg-a08);
  color: var(--acct-text);
}

.acct-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px 24px;
}

.acct-who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 12px;
}

.acct-who-avatar {
  display: inline-flex;
}

.acct-who-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.acct-status,
.acct-warn {
  margin: 0 4px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  background: var(--acct-card);
  color: var(--acct-muted);
}

.acct-warn {
  background: var(--acct-accent-soft);
  color: var(--acct-accent-text);
}

/* ---- Buttons (pill) ------------------------------------------------------- */
.acct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms var(--acct-ease);
}

.acct-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.acct-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.acct-btn-primary {
  background: var(--acct-accent);
  color: var(--acct-accent-ink);
}

.acct-btn-primary:hover:not(:disabled) {
  background: var(--acct-accent-hover);
}

.acct-btn-secondary {
  background: var(--acct-card);
  border-color: var(--acct-border);
  color: var(--acct-text);
}

.acct-btn-secondary:hover:not(:disabled) {
  background: var(--acct-card-hover);
}

.acct-btn-ghost {
  min-height: 32px;
  padding: 0 12px;
  background: transparent;
  border-color: var(--acct-border);
  color: var(--acct-muted);
  font-size: 13px;
}

.acct-btn-ghost:hover:not(:disabled) {
  color: var(--acct-text);
  background: var(--fg-a06);
}

.acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

/* ---- Share a note's view-only link (onfiremobile-2bzmp.11) --------------- */
.acct-share {
  margin: -4px 0 12px;
  padding: 10px;
  border: 1px solid var(--acct-border);
  border-radius: 14px;
  background: var(--acct-card);
  animation: acct-share-in 220ms var(--acct-ease);
}

.acct-share-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.acct-share-field {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--acct-border);
  border-radius: 999px;
  background: var(--acct-surface);
  color: var(--acct-text);
  font: inherit;
  font-size: 13px;
  text-overflow: ellipsis;
  user-select: all;
  -webkit-user-select: all;
}

.acct-share-field:focus-visible {
  outline: 2px solid var(--acct-focus);
  outline-offset: 1px;
}

.acct-share-copy {
  flex: 0 0 auto;
  min-width: 84px;
}

.acct-share-copy.is-copied {
  background: var(--acct-accent-hover);
}

.acct-share-status {
  margin: 8px 4px 0;
  color: var(--acct-muted);
  font-size: 12px;
  line-height: 1.4;
}

@keyframes acct-share-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .acct-share { animation: none; }
}

.acct-more {
  display: flex;
  margin: 12px auto 0;
}

/* ---- Tabs + search ---------------------------------------------------------- */
.acct-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: var(--acct-surface);
}

.acct-tab {
  flex: 1 1 0;
  min-height: 36px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--acct-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.acct-tab.active {
  background: var(--acct-accent-soft);
  color: var(--acct-accent-text);
}

.acct-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  margin-bottom: 8px;
  border: 1px solid var(--acct-border);
  border-radius: 999px;
  background: var(--acct-surface);
  color: var(--acct-muted);
}

.acct-search:focus-within {
  border-color: var(--acct-accent);
}

.acct-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--acct-text);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.acct-panel .acct-search-input:focus-visible {
  outline: none;
}

.acct-search-input::placeholder {
  color: var(--acct-muted);
}

/* ---- Lists ------------------------------------------------------------------ */
.acct-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acct-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease;
}

.acct-row:hover {
  background: var(--acct-card);
}

.acct-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--acct-card);
  color: var(--acct-muted);
  font-size: 18px;
  flex-shrink: 0;
}

.acct-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.acct-row-title,
.acct-row-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--acct-text);
}

.acct-row-sub {
  font-size: 12px;
  color: var(--acct-muted);
}

.acct-crumbs {
  margin: 0 4px 4px;
}

.acct-crumb-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--acct-muted);
}

.acct-crumb {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--acct-accent-text);
  font: inherit;
  cursor: pointer;
}

.acct-crumb:hover {
  background: var(--acct-card);
}

.acct-crumb-current {
  color: var(--acct-text);
  cursor: default;
}

.acct-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--acct-muted);
}

.acct-empty p {
  margin: 0;
}

.acct-muted {
  margin: 0;
  color: var(--acct-muted);
  font-size: 13px;
}

/* Skeleton loaders (shimmer) */
.acct-skeleton .acct-row {
  cursor: default;
}

.acct-sk {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--acct-card) 0%, var(--acct-card-hover) 50%, var(--acct-card) 100%);
  background-size: 200% 100%;
  animation: acct-shimmer 1.2s ease-in-out infinite;
}

.acct-sk-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

.acct-sk-line {
  height: 12px;
  width: 80%;
}

.acct-sk-short {
  width: 45%;
}

@keyframes acct-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.acct-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Detail (one note / one file) ---------------------------------------- */
.acct-detail-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px -8px;
}

.acct-detail-title {
  margin: 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.acct-note-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acct-note-emoji {
  font-size: 22px;
}

.acct-note-meta {
  margin: 0;
  font-size: 12px;
  color: var(--acct-muted);
  overflow-wrap: anywhere;
}

.acct-note-body {
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--acct-card);
  color: var(--acct-text);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.acct-preview {
  margin: 12px 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--acct-card);
  display: flex;
  justify-content: center;
}

.acct-preview img {
  display: block;
  max-width: 100%;
  max-height: 50vh;
  object-fit: contain;
}

.acct-preview p {
  padding: 16px;
}

/* ---- Notes: New note, the note editor, rename, AI (onfiremobile-847hl.2/.3/.11) ---- */
.acct-notes-tools {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.acct-notes-tools .acct-search {
  flex: 1 1 auto;
  min-width: 0;
}

.acct-new-note {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px 0 12px;
  gap: 6px;
}

.acct-btn.is-busy {
  cursor: progress;
}

.acct-detail-title:has(.acct-title-input) {
  flex: 1 1 auto;
}

.acct-title-input {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--acct-text);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  transition: border-color 150ms ease, background 150ms ease;
}

.acct-title-input:hover:not(.is-static) {
  border-color: var(--acct-border);
}

.acct-title-input.is-static {
  cursor: default;
}

.acct-panel .acct-title-input:not(.is-static):focus,
.acct-panel .acct-title-input:not(.is-static):focus-visible {
  outline: none;
  border-color: var(--acct-accent);
  background: var(--acct-surface);
}

.acct-title-input::placeholder {
  color: var(--acct-muted);
  font-weight: 500;
}

.acct-note-head .acct-note-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.acct-ai-toggle.is-on {
  background: var(--acct-accent-soft);
  border-color: var(--acct-accent);
  color: var(--acct-accent-text);
}

.acct-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--acct-accent-soft);
  color: var(--acct-accent-text);
  font-size: 13px;
  line-height: 1.45;
}

.acct-banner p {
  margin: 0;
}

.acct-note-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 10px;
  padding: 10px 12px;
  border: 1px dashed var(--acct-border);
  border-radius: 10px;
  background: var(--acct-surface);
  color: var(--acct-text);
  font-size: 13px;
  line-height: 1.45;
}

.acct-note-chip-icon {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 20px;
  justify-content: center;
  color: var(--acct-muted);
  font-size: 16px;
}

.acct-note-chip-text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.acct-note-chip-label {
  font-weight: 600;
}

.acct-note-chip-sub {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--acct-muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.acct-embed {
  height: max(360px, calc(100vh - 360px));
  margin: 4px -4px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--acct-card);
}

@media (max-width: 599px) {
  .acct-embed {
    height: max(320px, calc(86dvh - 300px));
  }
}

.acct-embed.is-loading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.acct-embed-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--acct-card);
  transition: opacity 160ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* An AI write is going in (flush -> write -> reload): the editor takes no typing meanwhile. */
.acct-embed.is-locked {
  cursor: progress;
}

.acct-embed.is-locked .acct-embed-frame {
  opacity: 0.55;
}

.acct-note-preview {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--acct-card);
  color: var(--acct-text);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.acct-note-preview p {
  margin: 0 0 4px;
}

.acct-note-preview .acct-pv-h {
  margin-top: 10px;
  font-weight: 600;
  font-size: 15px;
}

.acct-note-preview .acct-pv-h:first-child {
  margin-top: 0;
}

.acct-note-preview .acct-pv-done {
  color: var(--acct-muted);
}

.acct-note-preview .acct-pv-quote {
  padding-left: 10px;
  border-left: 3px solid var(--acct-border);
  color: var(--acct-muted);
}

.acct-note-preview .acct-pv-plain {
  white-space: pre-wrap;
}

.acct-pv-rule {
  margin: 8px 0;
  border: none;
  border-top: 1px solid var(--acct-border);
}

.acct-note-preview .acct-note-chip {
  margin: 6px 0;
}

.acct-ai {
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--acct-border);
  border-radius: 14px;
  background: var(--acct-card);
  animation: acct-rise 220ms var(--acct-ease);
}

@keyframes acct-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.acct-ai-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.acct-ai-cost {
  margin: 2px 0 12px;
  font-size: 12px;
  color: var(--acct-muted);
}

.acct-ai-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acct-ai-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--acct-border);
  border-radius: 999px;
  background: var(--acct-surface);
  color: var(--acct-text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms var(--acct-ease);
}

.acct-ai-mode:hover:not(:disabled) {
  background: var(--acct-card-hover);
}

.acct-ai-mode:active:not(:disabled) {
  transform: scale(0.97);
}

.acct-ai-mode[aria-pressed="true"] {
  border-color: var(--acct-accent);
  background: var(--acct-accent-soft);
  color: var(--acct-accent-text);
}

.acct-ai-mode:disabled {
  cursor: default;
  opacity: 0.45;
}

.acct-ai-mode .acct-icon {
  display: inline-flex;
}

/* The free-text request (note-ai-card.js): a growing field + "Ask AI". */
.acct-ai-ask {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.acct-ai-ask-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 14px;
  border: 1px solid var(--acct-border);
  border-radius: 19px;
  background: var(--acct-surface);
  color: var(--acct-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.acct-ai-ask-input::placeholder {
  color: var(--acct-muted);
}

.acct-ai-ask-input:focus {
  outline: none;
  border-color: var(--acct-accent);
  box-shadow: 0 0 0 3px var(--acct-accent-soft);
}

.acct-ai-ask-input:disabled {
  opacity: 0.55;
}

.acct-ai-ask-go {
  flex: 0 0 auto;
  min-height: 38px;
}

.acct-ai-ask-count {
  position: absolute;
  right: 0;
  bottom: -18px;
  font-size: 11px;
  color: var(--acct-muted);
}

.acct-ai-ask-count.is-over {
  color: var(--acct-accent-text);
}

.acct-ai-asked {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--acct-muted);
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .acct-ai-ask-go .acct-btn-label {
    display: none;
  }
  .acct-ai-ask-go {
    width: 38px;
    padding: 0;
  }
}

.acct-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.acct-ai-hint,
.acct-ai-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--acct-muted);
}

.acct-ai-state:empty {
  display: none;
}

.acct-ai-working {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
}

.acct-ai-working .acct-btn {
  margin-left: auto;
}

.acct-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid var(--acct-border);
  border-top-color: var(--acct-accent);
  border-radius: 50%;
  animation: acct-spin 800ms linear infinite;
}

@keyframes acct-spin {
  to { transform: rotate(360deg); }
}

.acct-ai-error {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--acct-accent-text);
}

.acct-ai-notice {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.acct-ai-label {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--acct-muted);
}

.acct-ai-result {
  max-height: 40vh;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--acct-surface);
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.acct-ai-result p {
  margin: 0 0 4px;
}

.acct-ai-result .acct-ai-h {
  margin-top: 8px;
  font-weight: 600;
}

.acct-ai-result .acct-ai-h:first-child {
  margin-top: 0;
}

.acct-ai-result .acct-ai-li,
.acct-ai-result .acct-ai-todo,
.acct-ai-result .acct-ai-done {
  padding-left: 4px;
}

.acct-ai-result .acct-ai-done {
  color: var(--acct-muted);
}

.acct-ai-result .acct-ai-quote {
  padding-left: 10px;
  border-left: 3px solid var(--acct-border);
  color: var(--acct-muted);
}

.acct-ai-result .acct-ai-att {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--acct-muted);
}

.acct-ai-rule {
  margin: 8px 0;
  border: none;
  border-top: 1px solid var(--acct-border);
}

@media (prefers-reduced-motion: reduce) {
  .acct-ai,
  .acct-ai-mode,
  .acct-ai-ask-input,
  .acct-title-input,
  .acct-embed-frame {
    transition: none !important;
    animation: none !important;
  }
  .acct-spinner {
    animation-duration: 2400ms;
  }
}

/* ---- Toast ------------------------------------------------------------------ */
.acct-toast-layer {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
  max-width: calc(100vw - 32px);
}

.acct-toast {
  max-width: 360px;
  padding: 10px 16px;
  border-radius: 18px;
  text-align: center;
  line-height: 1.4;
  background: var(--acct-card);
  color: var(--acct-text);
  font-size: 13px;
  box-shadow: 0 8px 24px var(--shadow-a35);
  animation: acct-toast-in 220ms var(--acct-ease);
  transition: opacity 200ms ease, transform 200ms var(--acct-ease);
}

.acct-toast-out {
  opacity: 0;
  transform: translateY(6px);
}

@keyframes acct-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.acct-panel .hidden,
.acct-ai-host .hidden,
.acct-chip.hidden,
.acct-menu-item.hidden {
  display: none !important;
}

/* "Your plan" in the panel (my-plan.js; the card's look is .mc-plan in my-calls.css). */
.acct-plan.mc-plan {
  max-width: none;
  margin: 0 0 12px;
  padding: 14px 14px 14px 16px;
}
.acct-plan .mc-plan-title { font-size: 17px; margin: 6px 0 2px; }
.acct-plan .mc-plan-detail { font-size: 13px; }
.acct-plan .mc-plan-btn { padding: 8px 16px; font-size: 14px; flex: 1 1 auto; }

/* "Country for prices" under the theme (onfiremobile-5uz24.5): billing country + its currency. */
.acct-country {
  padding: 0 4px 14px;
}
.acct-country.hidden { display: none; }
.acct-country-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.acct-country-select {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 300px;
  margin-left: auto;
  height: 36px;
  padding: 0 34px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--fg-a08);
  background-color: var(--fg-a06);
  color: var(--call-text);
  color-scheme: var(--color-scheme);
  font: inherit;
  font-size: 13.5px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.acct-country-select:hover { background-color: var(--fg-a10); }
.acct-country-select:focus-visible { outline: 2px solid var(--call-text-muted); outline-offset: 2px; }
.acct-country-select:disabled { opacity: 0.6; cursor: progress; }
.acct-country-select option,
.acct-country-select optgroup {
  background: var(--surface-popover);
  color: var(--call-text);
}
.acct-country-note {
  margin: 8px 0 0 28px;
  color: var(--call-text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.acct-country-note:empty { display: none; }
.acct-country-note.is-pending { color: var(--call-text); }
.acct-country-note.is-error { color: var(--call-danger); }

/* ===== /call-google.css ===== */
/* ---- "Continue with Google" in the sign-in modal (onfiremobile-3gbw8.9) ----
   call-google.js renders Google's own button (GIS iframe, pill shape) into
   #signin-google-btn and unhides #signin-google when Google sign-in is on.
   The button's colours are Google's (branding rules); only the frame and the
   "or" divider are ours, from theme tokens. */
.signin-google {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 14px;
}

.signin-google-btn {
  display: flex;
  justify-content: center;
  min-height: 44px;            /* GIS "large" is 40-44 px: no jump when it paints */
  /* Google's iframe document is light. Under the dark theme's
     color-scheme: dark, Chrome paints an opaque white backdrop behind a
     cross-origin iframe whose scheme differs; matching it keeps it transparent. */
  color-scheme: light;
  transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* An attempt is in flight: the button is inert until a fresh nonce is ready. */
.signin-google[aria-busy="true"] .signin-google-btn {
  opacity: 0.55;
  pointer-events: none;
}

.signin-or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.signin-or::before,
.signin-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

@media (prefers-reduced-motion: reduce) {
  .signin-google-btn {
    transition: none;
  }
}

/* ===== /signup-chooser.css ===== */
/* ---- Sign up: Google or e-mail (signup-chooser.js, owner 2026-10-08) ----
   The sheet reuses the sign-in modal's frame (.signin-modal / .signin-sheet in style.css) and the
   Google slot's styles (call-google.css). Only the chooser's own pieces are here, from theme tokens. */
.signup-modal .signin-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signup-modal .signin-step.hidden {
  display: none;
}

.signup-google {
  margin-bottom: 0;
}

/* Before Google's button paints: a quiet pill placeholder, so both choices show at once. */
.signup-google[aria-busy="true"] .signin-google-btn:empty {
  border-radius: 9999px;
  background: var(--bg-input);
  animation: signupPulse 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.signup-email {
  margin-top: 0;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 15px;
}

.signup-switch {
  text-align: center;
  margin-top: 2px;
}

.signup-switch .link-btn {
  font-size: inherit;
}

.signup-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.signup-names > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.signup-google-line b {
  font-weight: 600;
  word-break: break-all;
}

.signup-hint-bad {
  color: var(--pre-danger-text);
}

@media (max-width: 380px) {
  .signup-names {
    grid-template-columns: 1fr;
  }
}

@keyframes signupPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .signup-google[aria-busy="true"] .signin-google-btn:empty {
    animation: none;
  }
}

/* ===== /chat-file-share.css ===== */
/* =============================================================================
 * chat-file-share.css — file cards in the call chat + "Share to chat" in the
 * "My notes & files" panel (chat-file-share.js, bead onfiremobile-847hl.8).
 * Colours come from the call theme tokens (#screen-call) with literal fallbacks,
 * so a light theme only has to redefine the tokens.
 * ========================================================================== */

.cfs-card,
.cfs-detail,
.cfs-row-share {
  --cfs-accent: var(--call-accent, #FF6B1F);
  --cfs-accent-hover: var(--call-accent-hover, #ff7f3d);
  --cfs-accent-ink: var(--call-accent-ink, #1a1a1a);
  --cfs-accent-soft: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  --cfs-accent-text: var(--call-accent-text, #ffb38a);
  --cfs-card: var(--call-card, #282a2c);
  --cfs-card-hover: var(--call-card-hover, #333538);
  --cfs-surface: var(--call-surface, #202124);
  --cfs-surface-hover: var(--call-surface-hover, #3c4043);
  --cfs-border: var(--call-panel-border, #2e3134);
  --cfs-text: var(--call-text, #e3e3e3);
  --cfs-muted: var(--call-text-muted, #a8abaf);
  --cfs-danger: var(--call-danger, #ea4335);
  --cfs-focus: var(--call-focus, #ff7f3d);
  --cfs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- Chat card -------------------------------------------------------------- */
.cfs-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 260px;
  max-width: 100%;
  padding: 10px 12px 12px;
  border: 1px solid var(--cfs-border);
  border-radius: 14px;
  background: var(--cfs-card);
  color: var(--cfs-text);
}

.chat-msg.self .cfs-card {
  border-color: var(--cfs-accent-soft);
}

.cfs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cfs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cfs-surface);
  color: var(--cfs-accent-text);
  flex-shrink: 0;
}

.cfs-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cfs-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfs-meta,
.cfs-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--cfs-muted);
}

.cfs-dim .cfs-icon,
.cfs-dim .cfs-name,
.cfs-dim .cfs-meta {
  opacity: 0.55;
}

.cfs-ready {
  font-size: 13px;
  font-weight: 500;
  color: var(--cfs-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cfs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- Buttons (pill) ------------------------------------------------------- */
.cfs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms var(--cfs-ease);
}

.cfs-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.cfs-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.cfs-btn:focus-visible,
.cfs-row-share:focus-visible,
.cfs-ready:focus-visible {
  outline: 2px solid var(--cfs-focus);
  outline-offset: 2px;
}

.cfs-btn .cfs-ico {
  display: inline-flex;
}

.cfs-btn-primary {
  background: var(--cfs-accent);
  color: var(--cfs-accent-ink);
}

.cfs-btn-primary:hover:not(:disabled) {
  background: var(--cfs-accent-hover);
}

.cfs-btn-secondary {
  background: var(--cfs-surface);
  border-color: var(--cfs-border);
  color: var(--cfs-text);
}

.cfs-btn-secondary:hover:not(:disabled) {
  background: var(--cfs-surface-hover);
}

.cfs-btn-ghost {
  background: transparent;
  border-color: var(--cfs-border);
  color: var(--cfs-muted);
}

.cfs-btn-ghost:hover:not(:disabled) {
  color: var(--cfs-text);
  background: var(--cfs-surface);
}

/* ---- Panel: share button on a file row ------------------------------------ */
.acct-row-item.cfs-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.acct-row-item.cfs-row > .acct-row {
  flex: 1 1 auto;
  min-width: 0;
}

.cfs-row-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cfs-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms var(--cfs-ease);
}

.cfs-row-share:hover {
  background: var(--cfs-card);
  color: var(--cfs-accent-text);
}

.cfs-row-share:active {
  transform: scale(0.94);
}

/* ---- Panel: the share block in the file view ------------------------------ */
.cfs-detail:empty {
  display: none;
}

.cfs-detail {
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--cfs-border);
  border-radius: 14px;
  background: var(--cfs-card);
  color: var(--cfs-text);
}

.cfs-detail-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.cfs-detail-body {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cfs-muted);
}

.cfs-detail-body:last-child {
  margin-bottom: 0;
}

.cfs-detail-error {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cfs-danger);
}

/* No entry animation on cards: app.js rebuilds the whole chat list on every message. */
@media (prefers-reduced-motion: reduce) {
  .cfs-btn,
  .cfs-row-share { transition: none; }
}

/* ===== /note-attach.css ===== */
/* =============================================================================
 * note-attach.css — this page's own UI for note attachments (onfiremobile-847hl.12):
 *  - the "Choose file" prompt, shown only when the browser did not carry the click
 *    on Attach (inside the note editor iframe) over to this page; its button is a click here;
 *  - the "Uploading …" indicator, shown while any upload runs (the iframe can't hide it);
 *  - the drop zone laid over the editor iframe while files are dragged over it
 *    (onfiremobile-2bzmp.3), so the drop lands in this page, not in the iframe.
 * Both sit in one fixed column under the top bar. Colours come from the call theme
 * tokens with literal fallbacks.
 * ========================================================================== */

.na-layer {
  position: fixed;
  top: 72px;
  left: 16px;
  right: 16px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.na-layer > * {
  pointer-events: auto;
}

.na-prompt,
.na-indicator,
.na-drop {
  --na-accent: var(--call-accent, #FF6B1F);
  --na-accent-hover: var(--call-accent-hover, #ff7f3d);
  --na-accent-ink: var(--call-accent-ink, #1a1a1a);
  --na-surface: var(--surface-popover, #2f3133);
  --na-border: var(--call-panel-border, #2e3134);
  --na-text: var(--call-text, #e3e3e3);
  --na-muted: var(--call-text-muted, #a8abaf);
  --na-hover: var(--fg-a08, rgba(255, 255, 255, 0.08));
  --na-shadow: var(--shadow-a40, rgba(0, 0, 0, 0.4));
  --na-focus: var(--call-focus, #ff7f3d);
  --na-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, 100%);
  border: 1px solid var(--na-border);
  border-radius: 28px;
  background: var(--na-surface);
  color: var(--na-text);
  box-shadow: 0 8px 28px var(--na-shadow);
  box-sizing: border-box;
  animation: na-in 220ms var(--na-ease);
}

.na-prompt {
  padding: 10px 10px 10px 18px;
}

.na-indicator {
  padding: 8px 16px 8px 12px;
  font-size: 13px;
  line-height: 1.35;
}

.na-indicator__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--na-accent);
  animation: na-pulse 1.2s var(--na-ease) infinite alternate;
}

.na-prompt__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.na-prompt__choose {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  background: var(--na-accent);
  color: var(--na-accent-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms var(--na-ease), transform 160ms var(--na-ease);
}

.na-prompt__choose:hover {
  background: var(--na-accent-hover);
}

.na-prompt__close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--na-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms var(--na-ease);
}

.na-prompt__close:hover {
  background: var(--na-hover);
}

.na-prompt__choose:active,
.na-prompt__close:active {
  transform: scale(0.96);
}

.na-prompt__choose:focus-visible,
.na-prompt__close:focus-visible {
  outline: 2px solid var(--na-focus);
  outline-offset: 2px;
}

/* ---- Drop zone over the note editor (onfiremobile-2bzmp.3) --------------- */
.na-drop {
  position: fixed;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  padding: 12px;
  border: 2px dashed var(--na-accent);
  border-radius: 16px;
  background: var(--scrim-a45);
  box-shadow: none;
  box-sizing: border-box;
  animation: na-drop-in 160ms var(--na-ease);
}

.na-drop__card {
  max-width: 320px;
  padding: 16px 20px;
  border: 1px solid var(--na-border);
  border-radius: 20px;
  background: var(--na-surface);
  color: var(--na-text);
  box-shadow: 0 8px 28px var(--na-shadow);
  text-align: center;
  pointer-events: none;
}

.na-drop__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.na-drop__hint {
  margin: 6px 0 0;
  color: var(--na-muted);
  font-size: 12px;
  line-height: 1.4;
}

@keyframes na-drop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes na-pulse {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

@keyframes na-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .na-prompt, .na-indicator, .na-indicator__dot, .na-drop { animation: none; }
  .na-prompt__choose, .na-prompt__close { transition: none; }
}

/* ===== /landing.css ===== */
/* ============================================
   landing.css — "Your calls" on the call.onfire.so landing page
   (onfiremobile-847hl.9) and the /login sign-in link page
   (onfiremobile-847hl.5). Colours come only from theme.css / style.css
   tokens (theme-aware ones where dark and light differ), so the light theme
   covers these too.
   ============================================ */

/* The landing is taller than a phone screen (and than many laptop screens
   once "Your calls" has rows). `.screen` centres its child vertically, which
   pushed the top of a taller page above the scroll origin where it could not
   be reached (the header was already cut by ~190px at 390x844 before this
   module). Top-align it so the whole page scrolls. */
#screen-landing.screen {
  align-items: flex-start;
}

#screen-landing > .landing-page {
  width: 100%;
}

.landing-calls {
  text-align: left;
  margin: -8px 0 40px;
  /* Long titles must never widen the hero: the hero column is a flex item
     sized from its content, so without this a long call title pushed the
     whole landing past a phone's width. */
  contain: inline-size;
  animation: landingCallsIn 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes landingCallsIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.landing-calls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.landing-calls-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.landing-calls-account {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.landing-calls-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.landing-calls-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
}

.landing-calls-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-calls-link {
  background: none;
  border: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--call-accent-text);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 9999px;
  transition: background 0.18s cubic-bezier(0.33, 1, 0.68, 1);
}

.landing-calls-link:hover:not(:disabled) {
  background: var(--call-accent-soft);
}

.landing-calls-link:disabled {
  opacity: 0.6;
  cursor: default;
}

.landing-calls-link:focus-visible,
.landing-calls .btn:focus-visible,
.sign-in-link .download-badge:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}

/* Cards: signed out, empty, error */
.landing-calls-card {
  padding: 22px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.landing-calls-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--call-accent-soft);
  color: var(--call-accent);
}

.landing-calls-lead {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}

.landing-calls-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}

.landing-calls-qr {
  min-width: 220px;
}

.landing-calls-hint {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.landing-calls-retry {
  margin-top: 16px;
  padding: 10px 20px;
  font-size: 14px;
}

/* The list */
.landing-calls-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-calls-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}

.landing-calls-row.is-live {
  border-color: color-mix(in srgb, var(--success) 55%, transparent);
}

.landing-calls-kind {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
}

.landing-calls-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.landing-calls-top {
  display: flex;
  align-items: flex-start;
  gap: 6px 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.landing-calls-row-title {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-primary);
}

.landing-calls-role,
.landing-calls-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.landing-calls-role.is-host {
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
}

.landing-calls-role.is-guest {
  background: var(--bg-input);
  color: var(--text-secondary);
}

/* Theme-aware text tokens: light green / gold on dark, deep green / amber on
   light, so both badges stay readable in either theme. */
.landing-calls-badge.is-live {
  background: var(--success-a18);
  color: var(--success-text);
}

.landing-calls-badge.is-soon {
  background: var(--gold-a16);
  color: var(--gold-text);
}

.landing-calls-when {
  font-size: 13px;
  color: var(--text-secondary);
}

.landing-calls-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-calls-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.landing-calls-row-actions .btn {
  padding: 9px 16px;
  font-size: 14px;
}

.landing-calls-row-actions .btn-primary:hover:not(:disabled) {
  transform: none;
}

/* Skeleton */
.landing-calls-row.is-skeleton {
  pointer-events: none;
}

.landing-calls-sk {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
  background-size: 200% 100%;
  animation: landingCallsShimmer 1.4s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

.landing-calls-sk-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
}

.landing-calls-sk-line {
  height: 12px;
  width: 70%;
}

.landing-calls-sk-line.short {
  width: 45%;
}

@keyframes landingCallsShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Screen-reader announcements + the clipboard fallback buffer */
.landing-calls-live,
.landing-calls-copybuf {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .landing-calls-row {
    flex-wrap: wrap;
  }

  .landing-calls-row-actions {
    width: 100%;
    padding-left: 54px;
  }

  .landing-calls-row-actions .btn {
    flex: 1;
  }

  .landing-calls-name {
    max-width: 120px;
  }
}

/* ============================================
   /login — the sign-in link page (phone without the app)
   ============================================ */

.sign-in-link {
  overflow-y: auto;
  padding: 24px 16px;
  align-items: flex-start;
}

.sil-card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 28px 24px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: landingCallsIn 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

.sil-logo {
  display: block;
  margin: 0 auto 18px;
}

.sil-title {
  margin: 16px 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.sil-lead {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.sil-steps {
  max-width: 340px;
  margin: 20px auto 12px;
  padding-left: 22px;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
}

.sil-steps li + li {
  margin-top: 6px;
}

.sil-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 20px 0;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--gold-a16);
  border: 1px solid var(--gold-a35);
  border-radius: 12px;
}

.sil-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold-text);
}

.sil-stores-title {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* The sign-in modal's match number (app.js qrMatch, security review F2) */
.signin-qr-match {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px auto 0;
  padding: 8px 16px;
  width: fit-content;
  border-radius: 9999px;
  background: var(--call-accent-soft);
  color: var(--text-secondary);
  font-size: 13px;
}

.signin-qr-match.hidden {
  display: none;
}

.signin-qr-match-number {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.sil-noscript {
  max-width: 440px;
  margin: 48px auto;
  padding: 0 16px;
  text-align: center;
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .landing-calls,
  .sil-card {
    animation: none;
  }

  .landing-calls-sk {
    animation: none;
  }
}

/* ===== /my-calls.css ===== */
/* ============================================
   my-calls.css — "My calls", the signed-in home of call.onfire.so
   (my-calls.js, onfiremobile-sq45c). Google Meet layout with a Zoom-style
   upcoming-calls panel on the right; stacks on phones. Colours come only
   from theme.css / style.css tokens, so the light theme covers it.
   ============================================ */

#screen-my-calls.screen {
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mc-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 24px 40px;
}

.mc-sr,
.mc-copybuf {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Top bar ---- */
.mc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.mc-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.mc-brand b {
  font-weight: 700;
}

.mc-top-right {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.mc-top-clock {
  font-size: 15px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.mc-account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.mc-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
}

.mc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-account-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 500;
}

.mc-link-btn {
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--call-accent-text);
  padding: 6px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.33, 1, 0.68, 1);
}

.mc-link-btn:hover:not(:disabled) {
  background: var(--call-accent-soft);
}

.mc-link-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- Main: hero left, panel right ---- */
.mc-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 56px;
  align-items: center;
  padding: 24px 0;
  animation: mcIn 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes mcIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.mc-hero {
  min-width: 0;
  max-width: 560px;
}

.mc-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--call-accent-text);
  margin-bottom: 10px;
}

.mc-title {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.mc-sub {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.mc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.mc-btn {
  padding: 14px 22px;
}

.mc-btn svg {
  flex-shrink: 0;
}

.mc-btn[aria-busy="true"] {
  cursor: progress;
}

.btn.mc-btn:focus-visible,
.mc-row-go:focus-visible,
.mc-next-go:focus-visible,
.mc-icon-btn:focus-visible,
.mc-link-btn:focus-visible,
.mc-join-btn:focus-visible,
.mc-modal .btn:focus-visible,
.mc-empty-btn:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}

/* Join by code */
.mc-join {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  max-width: 440px;
}

.mc-join-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 50px;
  border-radius: 9999px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}

.mc-join-field:focus-within {
  border-color: var(--call-focus);
  box-shadow: 0 0 0 3px var(--call-accent-soft);
}

.mc-join-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--text-primary);
}

.mc-join-field input::placeholder {
  color: var(--text-tertiary);
}

.mc-join-btn {
  border: none;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--call-accent-text);
  padding: 12px 18px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.18s ease-out, opacity 0.18s ease-out;
}

.mc-join-btn:hover:not(:disabled) {
  background: var(--call-accent-soft);
}

.mc-join-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.mc-error {
  margin-top: 12px;
  font-size: 14px;
  color: var(--pre-danger-text);
}

.mc-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

/* "Next up" strip under the actions (a call that is on or starts within the hour) */
.mc-next {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 14px 14px 14px 16px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  max-width: 520px;
  animation: mcIn 0.36s cubic-bezier(0.33, 1, 0.68, 1);
}

.mc-next-badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--gold-a16);
  color: var(--gold-text);
}

.mc-next-badge.is-live {
  background: var(--success-a18);
  color: var(--success-text);
}

.mc-next-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mc-next-title {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-next-when {
  font-size: 13px;
  color: var(--text-secondary);
}

.mc-next-go {
  flex-shrink: 0;
  padding: 10px 20px;
  font-size: 15px;
}

/* ---- Your plan (my-plan.js, onfiremobile-1ydqc) ---- */
.mc-plan {
  margin-top: 20px;
  padding: 18px 18px 18px 20px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  max-width: 520px;
  animation: mcIn 0.36s cubic-bezier(0.33, 1, 0.68, 1);
}

.mc-plan.hidden {
  display: none;
}

.mc-plan[aria-busy="true"] .mc-sk-line {
  max-width: 320px;
}

.mc-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mc-plan-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mc-plan-badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--bg-input);
  color: var(--text-secondary);
}

.mc-plan-badge.is-pro {
  background: var(--accent-a14);
  color: var(--accent-text-soft);
}

.mc-plan-badge.is-business {
  background: var(--gold-a16);
  color: var(--gold-text);
}

.mc-plan-title {
  margin: 8px 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.mc-plan-detail {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.mc-plan-detail.is-warn {
  color: var(--danger-text);
}

.mc-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.mc-plan-btn {
  padding: 10px 20px;
  font-size: 15px;
}

/* Links styled as buttons: keep the button ink, never the global link look. */
.mc-plan-btn,
.mc-plan-btn:hover,
.mc-plan-btn:visited {
  text-decoration: none;
}

a.mc-plan-btn.btn-primary,
a.mc-plan-btn.btn-primary:hover,
a.mc-plan-btn.btn-primary:visited {
  color: var(--on-fill);
}

a.mc-plan-btn.btn-secondary,
a.mc-plan-btn.btn-secondary:hover,
a.mc-plan-btn.btn-secondary:visited {
  color: var(--text-strong);
}

.mc-plan-btn:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}

/* ---- The right column: Upcoming calls, then My links (my-links.css) ---- */
.mc-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Upcoming panel (Zoom-style) ---- */
.mc-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  /* Solid, so the sticky day labels do not show the page through. */
  background: var(--pre-sheet);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-elevated);
  max-height: min(680px, calc(100vh - 140px));
}

.mc-panel-head {
  padding: 26px 24px 22px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--pre-accent-a35), transparent 60%),
    linear-gradient(135deg, var(--pre-accent-a20), var(--accent-a08));
  border-bottom: 1px solid var(--border-color);
}

.mc-panel-time {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.mc-panel-date {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-secondary);
}

.mc-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 6px 24px;
}

.mc-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.mc-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 14px;
}

.mc-group + .mc-group {
  margin-top: 6px;
}

.mc-group-label {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: var(--pre-sheet);
}

.mc-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mc-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  transition: background 0.18s ease-out;
}

.mc-row:hover {
  background: var(--fg-a04);
}

.mc-row.is-live {
  background: var(--success-a18);
}

.mc-row-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

.mc-row-start,
.mc-row-end {
  white-space: nowrap;
}

.mc-row-start {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.mc-row-end {
  font-size: 12px;
  color: var(--text-tertiary);
}

.mc-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mc-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mc-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.mc-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
}

.mc-badge.is-live {
  background: var(--success-a18);
  color: var(--success-text);
}

.mc-badge.is-soon {
  background: var(--gold-a16);
  color: var(--gold-text);
}

.mc-row-meta {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-row-id {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-tertiary);
  min-width: 0;
}

.mc-row-id b {
  font-weight: 600;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}

.mc-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.mc-row-go {
  padding: 8px 18px;
  font-size: 14px;
  box-shadow: none;
}

.mc-row-go.btn-primary:hover:not(:disabled),
.mc-next-go.btn-primary:hover:not(:disabled) {
  transform: scale(1.03);
}

.mc-row-tools {
  display: flex;
  gap: 2px;
}

.mc-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease-out, color 0.18s ease-out, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mc-icon-btn:hover {
  background: var(--fg-a08);
  color: var(--text-primary);
}

.mc-icon-btn:active {
  transform: scale(0.92);
}

.mc-icon-btn.is-done {
  color: var(--success-text);
}

/* Skeleton */
.mc-row.is-skeleton {
  grid-template-columns: 74px minmax(0, 1fr);
}

.mc-sk {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
  background-size: 200% 100%;
  animation: mcShimmer 1.3s ease-in-out infinite;
}

.mc-sk-time {
  width: 44px;
  height: 16px;
  margin-top: 2px;
}

.mc-sk-line {
  height: 14px;
  width: 80%;
}

.mc-sk-line.short {
  width: 50%;
  margin-top: 6px;
}

@keyframes mcShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* Empty / error */
.mc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 20px 28px;
}

.mc-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
  margin-bottom: 14px;
}

.mc-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.mc-empty-hint {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 300px;
}

.mc-empty-btn {
  margin-top: 18px;
  padding: 10px 20px;
  font-size: 15px;
}

/* ---- Schedule dialog ---- */
.mc-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: mcFade 0.2s ease-out;
}

.mc-modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px;
  border-radius: 24px;
  background: var(--pre-sheet);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-elevated);
  animation: mcPop 0.32s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes mcFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mcPop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.mc-modal-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.mc-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mc-form .mc-modal-title {
  margin-bottom: 4px;
}

.mc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.mc-field > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.mc-field input,
.mc-field select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}

.mc-field input:focus,
.mc-field select:focus {
  border-color: var(--call-focus);
  box-shadow: 0 0 0 3px var(--call-accent-soft);
}

.mc-field-row {
  display: flex;
  gap: 12px;
}

.mc-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.mc-modal-actions .btn {
  padding: 12px 22px;
  font-size: 15px;
}

.mc-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mc-done .mc-modal-title {
  margin-bottom: 6px;
}

.mc-done-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success-a18);
  color: var(--success-text);
  margin-bottom: 14px;
  animation: mcPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mc-done-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.mc-done-when {
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-secondary);
}

.mc-done-link {
  width: 100%;
  margin: 18px 0 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.mc-done-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.mc-done-label b {
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.mc-done-url {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  user-select: all;
}

.mc-done .mc-modal-actions {
  width: 100%;
  justify-content: center;
}

/* ---- Narrow screens: stack, panel under the actions ---- */
@media (max-width: 900px) {
  .mc-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-top: 12px;
  }

  .mc-panel {
    max-height: none;
  }

  .mc-list {
    overflow: visible;
  }
}

@media (max-width: 560px) {
  .mc-page {
    padding: 0 16px 32px;
  }

  .mc-top-clock,
  .mc-account-name {
    display: none;
  }

  .mc-actions .mc-btn,
  .mc-plan-btn {
    flex: 1 1 100%;
  }

  .mc-panel-head {
    padding: 22px 20px 18px;
  }

  .mc-panel-time {
    font-size: 34px;
  }

  .mc-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .mc-row-actions {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .mc-field-row {
    flex-direction: column;
  }

  .mc-modal-card {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-main,
  .mc-next,
  .mc-plan,
  .mc-modal-backdrop,
  .mc-modal-card,
  .mc-done-icon,
  .mc-sk {
    animation: none;
  }
}

/* ===== /my-links.css ===== */
/*
 * my-links.css — "My links" under Upcoming calls on My calls
 * (my-links.js, onfiremobile-63cx2). Builds on my-calls.css (rows, badges,
 * icon buttons, dialog); colours are theme.css tokens only.
 */

/* Its own card under Upcoming calls (owner, 2026-10-16: it was squeezed into
   the bottom of the Upcoming panel, cut off and not scrollable). The same
   surface as .mc-panel; its list scrolls on its own. */
.ml-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: var(--pre-sheet);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-elevated);
  animation: mlIn 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Both cards share the column's height: Upcoming calls gives up some. */
.mc-side:has(.ml-section:not(.hidden)) .mc-panel {
  max-height: max(300px, min(440px, calc(100vh - 420px)));
}

.ml-bar {
  padding-top: 14px;
}

.ml-body {
  min-height: 0;
  /* About four rows on a laptop, fewer on a short window; the page scrolls past that. */
  max-height: max(136px, min(264px, calc(100vh - 600px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px 14px;
  /* Rows switch to two lines when the list is narrow (the side panel), not only on phones. */
  container-type: inline-size;
}

.ml-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 9999px;
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease-out, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ml-new-btn:hover:not(:disabled) {
  transform: scale(1.03);
}

.ml-new-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.ml-new-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.ml-new-btn:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}

/* Rows: icon | link | Start + tools on one line (my-calls.css .mc-row does the rest). */
.mc-row.ml-row {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  padding: 10px 12px;
}

.ml-row .mc-row-actions {
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.ml-row .mc-row-go {
  padding: 8px 14px;
}

.ml-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
}

.ml-row.is-paused .ml-icon {
  background: var(--fg-a08);
  color: var(--text-tertiary);
}

.ml-row.is-paused .mc-row-title {
  color: var(--text-secondary);
}

.mc-badge.ml-badge-paused {
  background: var(--fg-a08);
  color: var(--text-secondary);
}

.mc-icon-btn.ml-delete-btn:hover {
  background: var(--danger-a14);
  color: var(--danger-text);
}

.ml-url {
  display: flex;
  min-width: 0;
  gap: 0;
}

.ml-url b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}

.ml-url .ml-url-host {
  flex: 0 1000 auto;
  color: var(--text-tertiary);
  font-weight: 500;
}

.ml-url .ml-url-path {
  flex: 0 1 auto;
}

.ml-confirm,
.ml-row-error {
  grid-column: 1 / -1;
}

.ml-confirm,
.ml-s-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--danger-a14);
}

.ml-confirm-text {
  flex: 1 1 180px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
}

.ml-confirm-btns {
  display: flex;
  gap: 8px;
}

.ml-pill {
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  background: var(--pre-sheet);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ml-pill:active:not(:disabled) {
  transform: scale(0.96);
}

.ml-pill:disabled {
  opacity: 0.6;
  cursor: default;
}

.ml-pill.ml-pill-danger {
  border-color: transparent;
  background: var(--call-danger);
  color: var(--on-fill);
}

.ml-pill.ml-pill-danger:hover:not(:disabled) {
  background: var(--call-danger-hover);
}

.ml-row-error {
  margin-top: 0;
  font-size: 13px;
}

.ml-row.is-skeleton {
  grid-template-columns: 40px minmax(0, 1fr);
}

.ml-sk-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

/* Upsell / paused card */
.ml-promo {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 2px 0 8px;
  padding: 14px;
  border-radius: 16px;
  background: var(--call-accent-soft);
  animation: mlIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.ml-promo-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pre-sheet);
  color: var(--call-accent-text);
}

.ml-promo-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.ml-promo-hint {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.ml-promo-btn {
  grid-column: 2;
  justify-self: start;
  padding: 8px 18px;
  font-size: 14px;
  box-shadow: none;
}

.ml-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 12px 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.ml-empty-btn {
  padding: 8px 18px;
  font-size: 14px;
}

.ml-max {
  padding: 6px 12px 0;
}

/* Create dialog */
.ml-lead {
  margin-top: -2px;
}

.ml-slug-field {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 0 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}

.ml-slug-field:focus-within {
  border-color: var(--call-focus);
  box-shadow: 0 0 0 3px var(--call-accent-soft);
}

.ml-slug-host {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--text-tertiary);
  user-select: none;
}

.mc-field .ml-slug-field input {
  flex: 1;
  height: 44px;
  padding: 0 14px 0 1px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.mc-field .ml-slug-field input:focus {
  box-shadow: none;
}

.ml-rule {
  margin-top: -6px;
}

.ml-preview {
  font-weight: 600;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

/* ---- Link options: chips on the row, switches, the password box ---- */
.ml-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 3px;
}

.ml-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.ml-chip svg {
  flex-shrink: 0;
}

.ml-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ml-chip.is-off {
  background: var(--fg-a08);
  color: var(--text-tertiary);
}

.ml-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
}

.ml-switch-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.ml-switch-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.ml-switch-hint {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.ml-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border: none;
  border-radius: 13px;
  background: var(--fg-a22);
  cursor: pointer;
  transition: background 0.2s ease-out;
}

.ml-switch[aria-checked="true"] {
  background: var(--call-accent);
}

.ml-switch:disabled {
  opacity: 0.6;
  cursor: progress;
}

.ml-switch:focus-visible,
.ml-pill:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}

.ml-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--switch-knob);
  box-shadow: 0 1px 3px var(--shadow-a35);
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ml-switch[aria-checked="true"] .ml-switch-thumb {
  transform: translateX(18px);
}

.ml-s-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: -2px;
  font-size: 14px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.ml-s-name {
  font-weight: 600;
  color: var(--text-primary);
}

.ml-pwd-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--call-accent-soft);
  animation: mlIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.ml-pwd-box.hidden {
  display: none;
}

.ml-pwd-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ml-pwd-value {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  user-select: all;
}

.ml-pwd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ml-pwd-box .ml-s-confirm {
  background: var(--pre-sheet);
}

.ml-s-confirm.hidden {
  display: none;
}

.ml-done-pwd {
  margin-top: 12px;
  height: 36px;
  padding: 0 16px;
}

@keyframes mlIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .mc-side:has(.ml-section:not(.hidden)) .mc-panel {
    max-height: none;
  }

  .ml-body {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 560px) {
  .mc-row.ml-row {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
  }

  .ml-slug-host {
    font-size: 14px;
  }

  .ml-done-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* A narrow list (the My calls side panel, a phone): name, link and option chips
   get the full width; Start and the tools go on the line below. */
@container (max-width: 520px) {
  .mc-row.ml-row {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
  }

  .ml-row .mc-row-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ml-section,
  .ml-promo,
  .ml-pwd-box {
    animation: none;
  }

  .ml-switch,
  .ml-switch-thumb {
    transition: none;
  }
}

/* ===== /support-widget.css ===== */
/* support-widget.css — the "Help" button support-widget.js shows on "/" until Chatwoot
   is loaded (no chat consent yet). Bottom-right, where Chatwoot's own bubble then sits. */
.sw-launcher {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px 0 16px;
  border: none;
  border-radius: 9999px;
  background: var(--pre-accent, #f97316);
  color: var(--on-fill, #fff);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 10px 24px -6px var(--shadow-a35, rgba(0, 0, 0, 0.35));
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1), filter 0.15s ease-out, opacity 0.15s ease-out;
}
.sw-launcher:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.sw-launcher:active:not(:disabled) { transform: scale(0.97); }
.sw-launcher:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 3px; }
.sw-launcher.is-loading { opacity: 0.7; cursor: progress; }
@media (max-width: 560px) {
  .sw-launcher { padding: 0; width: 48px; justify-content: center; }
  .sw-launcher span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-launcher { transition: none; }
}

/* ===== /call-home.css ===== */
/* ============================================
   call-home.css — the call.onfire.so feature page (onfiremobile-csg5l).
   Scoped to #screen-landing (class prefix ch-). Behaviour + the three.js hero
   live in call-home.js; "Your calls" keeps its own styles in landing.css.

   Colours: only the --ch-* tokens below (tests/theme-tokens.test.js). Dark is
   the default like the rest of call-web; theme.js flips data-theme="light".
   ============================================ */

:root {
  --ch-bg: #07080c;
  --ch-bg-2: #0c0e14;
  --ch-surface: #12141b;
  --ch-surface-2: #181b24;
  --ch-glass: rgba(255, 255, 255, 0.055);
  --ch-glass-hover: rgba(255, 255, 255, 0.09);
  --ch-border: rgba(255, 255, 255, 0.09);
  --ch-border-strong: rgba(255, 255, 255, 0.16);
  --ch-text: #f4f5f7;
  --ch-text-2: #b4bac6;
  --ch-text-3: #7d8494;
  --ch-accent: #ff6b1f;
  --ch-accent-2: #ffce54;
  --ch-accent-ink: #ffffff;
  --ch-accent-soft: rgba(255, 107, 31, 0.14);
  --ch-accent-glow: rgba(255, 107, 31, 0.45);
  --ch-accent-line: rgba(255, 107, 31, 0.5);
  --ch-ok: #34d399;
  --ch-ok-soft: rgba(52, 211, 153, 0.14);
  --ch-rec: #ff3b30;
  --ch-shadow: rgba(0, 0, 0, 0.45);
  --ch-shadow-soft: rgba(0, 0, 0, 0.25);
  --ch-nav-bg: rgba(7, 8, 12, 0.72);
  --ch-scrim-0: rgba(7, 8, 12, 0);
  --ch-scrim-1: rgba(7, 8, 12, 0.78);
  --ch-scrim-2: rgba(7, 8, 12, 0.96);
  --ch-photo-scrim: rgba(5, 6, 10, 0.82);
  --ch-photo-text: #ffffff;
  --ch-photo-text-2: rgba(255, 255, 255, 0.8);
  --ch-grid-line: rgba(255, 255, 255, 0.035);
  --ch-radius: 22px;
  --ch-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ch-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme="light"] {
  --ch-bg: #faf8f5;
  --ch-bg-2: #f3f0eb;
  --ch-surface: #ffffff;
  --ch-surface-2: #f6f4f0;
  --ch-glass: rgba(20, 22, 27, 0.04);
  --ch-glass-hover: rgba(20, 22, 27, 0.07);
  --ch-border: rgba(20, 22, 27, 0.09);
  --ch-border-strong: rgba(20, 22, 27, 0.16);
  --ch-text: #14161b;
  --ch-text-2: #4d5462;
  --ch-text-3: #7a8190;
  --ch-accent-soft: rgba(255, 107, 31, 0.1);
  --ch-accent-glow: rgba(255, 107, 31, 0.3);
  --ch-ok-soft: rgba(16, 150, 100, 0.12);
  --ch-ok: #0f9f6e;
  --ch-shadow: rgba(30, 24, 16, 0.14);
  --ch-shadow-soft: rgba(30, 24, 16, 0.08);
  --ch-nav-bg: rgba(250, 248, 245, 0.78);
  --ch-scrim-0: rgba(250, 248, 245, 0);
  --ch-scrim-1: rgba(250, 248, 245, 0.8);
  --ch-scrim-2: rgba(250, 248, 245, 0.97);
  --ch-grid-line: rgba(20, 22, 27, 0.045);
}

/* ---------- Page shell ---------- */

#screen-landing.screen {
  align-items: flex-start;
  background: var(--ch-bg);
  scroll-behavior: smooth;
}

#screen-landing .ch-page {
  min-height: 100dvh;
  overflow: visible;
  color: var(--ch-text);
  background: var(--ch-bg);
  font-size: 16px;
  line-height: 1.55;
}

.ch-page h1,
.ch-page h2,
.ch-page h3 {
  font-family: var(--ch-font-display);
  color: var(--ch-text);
  letter-spacing: -0.02em;
}

/* zero-specificity resets so every component's own margins win */
:where(.ch-page) :where(h1, h2, h3, p) { margin: 0; }
.ch-page a:hover { text-decoration: none; }

.ch-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.ch-section { padding: 112px 0; position: relative; }

.ch-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.ch-head h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; font-weight: 650; }
.ch-sub { margin-top: 14px; color: var(--ch-text-2); }

.ch-kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ch-accent);
}

.ch-lead { color: var(--ch-text-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; }

/* ---------- Buttons (pill) ---------- */

.ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 15px/1 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s var(--ch-ease), background 0.25s var(--ch-ease), box-shadow 0.25s var(--ch-ease), border-color 0.25s var(--ch-ease), color 0.25s var(--ch-ease);
}

.ch-btn:active { transform: scale(0.97); }
.ch-btn:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 3px; }
.ch-btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.ch-btn-block { width: 100%; }

.ch-btn-primary,
#screen-landing .ch-btn-primary:hover {
  color: var(--ch-accent-ink);
}

.ch-btn-primary {
  background: linear-gradient(135deg, var(--ch-accent) 0%, var(--ch-accent) 55%, var(--ch-accent-2) 140%);
  box-shadow: 0 8px 28px -8px var(--ch-accent-glow);
}

.ch-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -8px var(--ch-accent-glow); }

.ch-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ch-btn-glass,
.ch-btn-ghost {
  color: var(--ch-text);
  background: var(--ch-glass);
  border-color: var(--ch-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#screen-landing .ch-btn-glass:hover,
#screen-landing .ch-btn-ghost:hover {
  color: var(--ch-text);
  background: var(--ch-glass-hover);
  border-color: var(--ch-border-strong);
}

.ch-btn-ghost { background: transparent; border-color: transparent; }

/* ---------- Nav ---------- */

.ch-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background 0.3s var(--ch-ease), border-color 0.3s var(--ch-ease);
  border-bottom: 1px solid transparent;
}

.ch-nav.is-scrolled {
  background: var(--ch-nav-bg);
  border-bottom-color: var(--ch-border);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

.ch-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.ch-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--ch-text);
  font: 600 18px/1 var(--ch-font-display);
  letter-spacing: -0.01em;
}

#screen-landing .ch-brand:hover { color: var(--ch-text); }
.ch-brand img { border-radius: 8px; }
.ch-brand b { font-weight: 600; color: var(--ch-accent); }

.ch-nav-links { display: flex; gap: 4px; margin-left: 12px; }

.ch-nav-links a {
  padding: 8px 12px;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--ch-text-2);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
}

#screen-landing .ch-nav-links a:hover { color: var(--ch-text); background: var(--ch-glass); }

.ch-nav-actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------- Hero ---------- */

.ch-hero {
  position: relative;
  min-height: min(880px, 100dvh);
  display: flex;
  align-items: center;
  margin-top: -71px; /* sit under the transparent sticky nav */
  padding: 140px 0 80px;
  overflow: hidden;
  isolation: isolate;
}

.ch-hero::before {
  /* faint grid + warm glow behind the tiles */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 55% at 72% 45%, var(--ch-accent-soft), transparent 70%),
    linear-gradient(var(--ch-grid-line) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--ch-grid-line) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: radial-gradient(80% 80% at 60% 45%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(80% 80% at 60% 45%, #000 40%, transparent 85%);
}

.ch-hero-stage { position: absolute; inset: 0; z-index: -1; }

#ch-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s var(--ch-ease);
}

.ch-hero.is-3d #ch-hero-canvas { opacity: 1; }
.ch-hero.is-3d .ch-hero-fallback { opacity: 0; visibility: hidden; }

.ch-hero-fallback {
  position: absolute;
  right: max(24px, calc((100% - 1200px) / 2 + 24px));
  top: 50%;
  transform: translateY(-46%) perspective(1400px) rotateY(-14deg);
  width: min(560px, 46vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  transition: opacity 0.8s var(--ch-ease), visibility 0.8s;
}

.ch-hero-fallback img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px var(--ch-shadow);
}

.ch-hero-fallback img:nth-child(2) { outline: 2px solid var(--ch-accent); outline-offset: 2px; }

.ch-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ch-scrim-2) 0%, var(--ch-scrim-1) 30%, var(--ch-scrim-0) 58%),
    linear-gradient(0deg, var(--ch-bg) 0%, var(--ch-scrim-0) 22%);
}

.ch-hero-copy {
  /* .hero-content is kept for landing.js; reset anything style.css gives it */
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: left;
}

.ch-hero-copy > * { max-width: 560px; }
.ch-hero-copy > h1 { max-width: 700px; }

.ch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--ch-glass);
  border: 1px solid var(--ch-border);
  color: var(--ch-text-2);
  font-size: 13.5px;
  font-weight: 500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ch-ok);
  box-shadow: 0 0 0 0 var(--ch-ok-soft);
  animation: chPulse 2.4s var(--ch-ease) infinite;
}

@keyframes chPulse {
  0% { box-shadow: 0 0 0 0 var(--ch-ok-soft); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.ch-hero h1 {
  margin: 22px 0 20px;
  font-size: clamp(38px, 5.6vw, 70px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.ch-grad {
  background: linear-gradient(100deg, var(--ch-accent) 10%, var(--ch-accent-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ch-hero .ch-lead { margin-bottom: 30px; }

.ch-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ch-center { justify-content: center; }

/* Join with code (ids wired by app.js setupJoinCodeForm) */
.ch-join { margin-top: 30px; }

.ch-join-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ch-text-3);
  font-size: 13.5px;
  font-weight: 500;
}

#screen-landing .ch-join .join-code-form { margin: 0; max-width: none; }

#screen-landing .ch-join-row {
  display: flex;
  margin: 0;
  width: 100%;
  align-items: center;
  gap: 6px;
  max-width: 460px;
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  background: var(--ch-glass);
  border: 1px solid var(--ch-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#screen-landing .ch-join-row:focus-within {
  border-color: var(--ch-accent-line);
  box-shadow: 0 0 0 4px var(--ch-accent-soft);
}

.ch-join-icon { color: var(--ch-text-3); flex: none; }

#screen-landing .ch-join .join-code-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ch-text);
  font-size: 15px;
  box-shadow: none;
}

#screen-landing .ch-join .join-code-input::placeholder { color: var(--ch-text-3); }

#screen-landing .ch-join .btn-join-code {
  height: 40px;
  min-width: 0;
  padding: 0 20px;
  border-radius: 999px;
}

#screen-landing .ch-join .join-code-error { margin-top: 8px; font-size: 13.5px; }

.ch-hero-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ch-text-3);
  font-size: 13.5px;
}

.ch-hero-ticks li { display: inline-flex; align-items: center; gap: 7px; }

.ch-hero-ticks li::before,
.ch-feats li::before,
.ch-use-copy li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ch-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b1f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---------- "Your calls" slot ---------- */

.ch-calls { padding: 0 0 8px; }
.ch-calls-slot:empty { display: none; }

#screen-landing .ch-calls-slot .landing-calls {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px;
  border-radius: var(--ch-radius);
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  box-shadow: 0 20px 60px -30px var(--ch-shadow);
}

/* ---------- Trust strip ---------- */

.ch-strip { border-block: 1px solid var(--ch-border); background: var(--ch-bg-2); }

.ch-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.ch-strip-item { display: flex; align-items: center; gap: 14px; color: var(--ch-accent); }
.ch-strip-item svg { flex: none; }
.ch-strip-item div { display: flex; flex-direction: column; gap: 2px; }
.ch-strip-item b { color: var(--ch-text); font-size: 15px; font-weight: 600; }
.ch-strip-item span { color: var(--ch-text-3); font-size: 13.5px; }

/* ---------- Bento ---------- */

.ch-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 16px;
}

.ch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  border-radius: var(--ch-radius);
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  overflow: hidden;
  transition: transform 0.5s var(--ch-ease), border-color 0.3s, box-shadow 0.5s var(--ch-ease);
}

.ch-card:hover {
  transform: translateY(-4px);
  border-color: var(--ch-border-strong);
  box-shadow: 0 30px 60px -30px var(--ch-shadow);
}

.ch-span-2 { grid-column: span 2; }
.ch-card-body { padding: 22px 24px 24px; margin-top: auto; position: relative; }
.ch-card h3 { font-size: 21px; font-weight: 650; margin: 10px 0 8px; }
.ch-card p { color: var(--ch-text-2); font-size: 15px; }

.ch-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ch-ok);
  background: var(--ch-ok-soft);
}

.ch-tag-pro { color: var(--ch-accent); background: var(--ch-accent-soft); }

/* photo cards: text on a scrim over the image */
.ch-card-photo { min-height: 400px; }

.ch-card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ch-ease);
}

.ch-card-photo:hover img { transform: scale(1.04); }

.ch-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, var(--ch-photo-scrim) 100%);
}

.ch-card-photo .ch-card-body { z-index: 1; }
.ch-card-photo h3 { color: var(--ch-photo-text); }
.ch-card-photo p { color: var(--ch-photo-text-2); max-width: 520px; }

/* UI mock cards */
.ch-mock {
  margin: 22px 22px 0;
  padding: 16px;
  border-radius: 16px;
  background: var(--ch-surface-2);
  border: 1px solid var(--ch-border);
  font-size: 13.5px;
  color: var(--ch-text-2);
}

.ch-mock-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ch-rec);
}

.ch-mock-top em { font-style: normal; font-weight: 500; letter-spacing: 0; color: var(--ch-text-3); margin-left: auto; }

.ch-rec {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ch-rec);
  animation: chBlink 1.6s ease-in-out infinite;
}

@keyframes chBlink { 50% { opacity: 0.25; } }

.ch-mock-transcript p { margin: 6px 0; line-height: 1.45; }
.ch-mock-transcript b { color: var(--ch-text); margin-right: 6px; font-weight: 600; }

.ch-typing i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--ch-text-3);
  animation: chType 1.2s ease-in-out infinite;
}

.ch-typing i:nth-child(3) { animation-delay: 0.15s; }
.ch-typing i:nth-child(4) { animation-delay: 0.3s; }
@keyframes chType { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

.ch-mock-q { color: var(--ch-text); font-weight: 600; margin-bottom: 10px; }

.ch-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  margin-top: 6px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ch-glass);
  color: var(--ch-text);
}

.ch-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  right: auto;
  width: 0;
  background: var(--ch-accent-soft);
  border-right: 2px solid var(--ch-accent);
  transition: width 1.4s var(--ch-ease) 0.2s;
}

.ch-card.is-in .ch-bar::before,
.ch-noanim .ch-bar::before { width: calc(var(--v, 0) * 100%); }
.ch-bar span, .ch-bar b { position: relative; }
.ch-bar b { font-weight: 600; }

.ch-lobby-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: var(--ch-text);
}

.ch-lobby-row + .ch-lobby-row { border-top: 1px solid var(--ch-border); }
.ch-lobby-row img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ch-lobby-row b { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: 12px; color: var(--ch-ok); background: var(--ch-ok-soft); }

.ch-card-mini { min-height: 0; padding: 24px; gap: 4px; color: var(--ch-accent); }
.ch-card-mini h3 { font-size: 18px; margin-top: 14px; }

/* ---------- Use cases ---------- */

.ch-uses { background: var(--ch-bg-2); }

.ch-uses-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  margin: 0 auto 36px;
  padding: 5px;
  border-radius: 999px;
  background: var(--ch-glass);
  border: 1px solid var(--ch-border);
}

.ch-uses-tabs button {
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ch-text-2);
  font: 600 14.5px/1 'Inter', -apple-system, sans-serif;
  cursor: pointer;
  transition: background 0.3s var(--ch-ease), color 0.3s var(--ch-ease);
}

.ch-uses-tabs button[aria-selected="true"] { background: var(--ch-accent); color: var(--ch-accent-ink); }
.ch-uses-tabs button:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; }

.ch-use {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: 56px;
  animation: chFadeUp 0.6s var(--ch-ease);
}

.ch-use img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--ch-radius);
  box-shadow: 0 40px 80px -40px var(--ch-shadow);
}

.ch-use-copy h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; margin-bottom: 14px; }
.ch-use-copy p { color: var(--ch-text-2); font-size: 17px; }
.ch-use-copy ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.ch-use-copy li { display: flex; align-items: center; gap: 10px; color: var(--ch-text); }

/* display: grid above would otherwise beat the [hidden] attribute */
.ch-use[hidden] { display: none; }

@keyframes chFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Business ---------- */

.ch-biz-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ch-biz-visual { position: relative; }

.ch-biz-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--ch-radius);
}

.ch-biz-card {
  position: absolute;
  left: -20px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 260px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  box-shadow: 0 30px 60px -20px var(--ch-shadow);
  font-size: 13.5px;
  color: var(--ch-text-2);
  animation: chFloat 6s ease-in-out infinite;
}

.ch-biz-card b { color: var(--ch-text); font-size: 15px; }
.ch-biz-card-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ch-ok); }
.ch-biz-card-s { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ch-accent); font-weight: 500; }
.ch-biz-card-s i { width: 8px; height: 8px; border-radius: 50%; background: var(--ch-accent); animation: chBlink 1.6s ease-in-out infinite; }

@keyframes chFloat { 50% { transform: translateY(-8px); } }

.ch-biz-copy h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin-bottom: 18px; }

.ch-steps { list-style: none; counter-reset: s; margin: 30px 0 34px; padding: 0; display: grid; gap: 18px; }

.ch-steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 14px;
}

.ch-steps li::before {
  content: counter(s);
  grid-row: span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ch-accent-soft);
  color: var(--ch-accent);
  font-weight: 700;
}

.ch-steps b { color: var(--ch-text); font-weight: 600; }
.ch-steps span { color: var(--ch-text-2); font-size: 15px; }

/* ---------- How ---------- */

.ch-how { padding-top: 40px; }
.ch-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.ch-how-step {
  padding: 30px;
  border-radius: var(--ch-radius);
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
}

.ch-num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ch-accent), var(--ch-accent-2));
  color: var(--ch-accent-ink);
  font: 700 18px/1 var(--ch-font-display);
}

.ch-how-step h3 { font-size: 20px; margin-bottom: 8px; }
.ch-how-step p { color: var(--ch-text-2); font-size: 15px; }

/* ---------- Pricing ---------- */

.ch-pricing { background: var(--ch-bg-2); }

.ch-billing {
  display: flex;
  width: fit-content;
  margin: -24px auto 40px;
  padding: 5px;
  gap: 4px;
  border-radius: 999px;
  background: var(--ch-glass);
  border: 1px solid var(--ch-border);
}

.ch-billing button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ch-text-2);
  font: 600 14.5px/1 'Inter', -apple-system, sans-serif;
  cursor: pointer;
  transition: background 0.3s var(--ch-ease), color 0.3s var(--ch-ease);
}

.ch-billing button[aria-pressed="true"] { background: var(--ch-surface); color: var(--ch-text); box-shadow: 0 4px 16px -6px var(--ch-shadow); }
.ch-billing button:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; }

.ch-save {
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--ch-ok-soft);
  color: var(--ch-ok);
  font-size: 11.5px;
}

.ch-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }

.ch-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--ch-radius);
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
}

.ch-plan-hot {
  border-color: var(--ch-accent-line);
  box-shadow: 0 0 0 1px var(--ch-accent-line), 0 40px 80px -40px var(--ch-accent-glow);
}

.ch-plan-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ch-accent);
  color: var(--ch-accent-ink);
  font-size: 12px;
  font-weight: 700;
}

.ch-plan h3 { font-size: 22px; }
.ch-plan-for { color: var(--ch-text-3); font-size: 14.5px; margin-top: 4px; }

.ch-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; margin: 24px 0 4px; }
/* Local currencies (onfiremobile-5uz24.5): grid items may shrink; long amounts ("104.13",
   "CZK 54.96") step down a size so a 375px card never overflows. */
.ch-plans > .ch-plan { min-width: 0; }
.ch-amt.is-long { font-size: 44px; }
.ch-cur.is-code { font-size: 18px; margin-top: 12px; margin-right: 6px; }
.ch-cur.is-code.is-after { margin-right: 0; margin-left: 6px; }
.ch-cur { font: 600 24px/1 var(--ch-font-display); color: var(--ch-text-2); align-self: flex-start; margin-top: 8px; white-space: nowrap; }
/* A locale that writes the symbol after the number ("2,25 €"), or a code-style one ("CHF"). */
.ch-cur.is-after { margin-left: 4px; }
.ch-amt { font: 700 56px/1 var(--ch-font-display); letter-spacing: -0.04em; color: var(--ch-text); display: inline-block; }
.ch-amt.is-flip { animation: chFlip 0.45s var(--ch-ease); }
@keyframes chFlip { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ch-per { color: var(--ch-text-3); font-size: 15px; margin-left: 6px; }
.ch-billed { color: var(--ch-text-3); font-size: 13.5px; min-height: 20px; margin-bottom: 22px; }

.ch-feats { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ch-border); display: grid; gap: 11px; }
.ch-feats li { display: flex; gap: 10px; align-items: flex-start; color: var(--ch-text-2); font-size: 14.5px; }
.ch-feats li::before { margin-top: 3px; }
.ch-feats li:has(b)::before { visibility: hidden; }
.ch-feats b { color: var(--ch-text); font-weight: 600; }

/* ---------- FAQ ---------- */

.ch-faq-inner { max-width: 820px; }
.ch-faq-list { display: grid; gap: 10px; }

.ch-faq details {
  border-radius: 18px;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  transition: border-color 0.3s;
}

.ch-faq details[open] { border-color: var(--ch-border-strong); }

.ch-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  color: var(--ch-text);
  font-weight: 600;
  font-size: 16.5px;
}

.ch-faq summary::-webkit-details-marker { display: none; }

.ch-faq summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ch-text-3);
  border-bottom: 2px solid var(--ch-text-3);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.35s var(--ch-ease);
}

.ch-faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.ch-faq details p { padding: 0 24px 22px; color: var(--ch-text-2); }
.ch-faq summary:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: -2px; border-radius: 18px; }

/* ---------- Final CTA ---------- */

.ch-final { padding: 40px 0 120px; }

.ch-final-inner {
  text-align: center;
  padding: 72px 24px;
  border-radius: 32px;
  background:
    radial-gradient(70% 90% at 50% 0%, var(--ch-accent-soft), transparent 70%),
    var(--ch-surface);
  border: 1px solid var(--ch-border);
}

.ch-final h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; margin: 24px 0 12px; }
.ch-final .ch-lead { margin-bottom: 32px; }

.ch-faces { display: inline-flex; }

.ch-faces img {
  width: 52px;
  height: 52px;
  margin-left: -12px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ch-surface);
}

.ch-faces img:first-child { margin-left: 0; }

/* ---------- Footer ---------- */

.ch-footer { border-top: 1px solid var(--ch-border); padding: 56px 0 30px; color: var(--ch-text-3); font-size: 14.5px; }
.ch-footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ch-footer-brand p { margin-top: 12px; }
.ch-footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.ch-footer-cols div { display: flex; flex-direction: column; gap: 10px; }
.ch-footer-cols h4 { margin: 0 0 4px; color: var(--ch-text); font-size: 14px; font-weight: 600; }
.ch-footer-cols a { color: var(--ch-text-3); }
#screen-landing .ch-footer-cols a:hover { color: var(--ch-text); }

.ch-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--ch-border);
  font-size: 13px;
}

.ch-credits { max-width: 560px; }
.ch-credits summary { cursor: pointer; text-align: right; }
.ch-credits p { margin-top: 8px; line-height: 1.6; }
.ch-credits a { color: var(--ch-text-2); text-decoration: underline; }

/* ---------- Reveal on scroll (call-home.js adds .ch-anim, then .is-in) ---------- */

.ch-anim [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ch-ease), transform 0.9s var(--ch-ease);
  transition-delay: var(--d, 0s);
}

.ch-anim [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .ch-nav-links { display: none; }
  .ch-bento { grid-template-columns: repeat(2, 1fr); }
  .ch-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .ch-plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}

@media (max-width: 860px) {
  .ch-section { padding: 80px 0; }
  .ch-hero { min-height: 0; padding: 120px 0 56px; align-items: flex-start; }
  .ch-hero-stage { bottom: auto; height: 100%; }
  .ch-hero-scrim {
    background:
      linear-gradient(180deg, var(--ch-scrim-0) 0%, var(--ch-scrim-1) 32%, var(--ch-scrim-2) 62%, var(--ch-bg) 100%);
  }
  .ch-hero-fallback {
    right: 50%;
    top: 92px;
    transform: translateX(50%);
    width: min(440px, 92vw);
    opacity: 0.35;
  }
  .ch-use, .ch-biz-inner { grid-template-columns: 1fr; gap: 32px; }
  .ch-biz-card { left: 12px; bottom: 12px; }
  .ch-how-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ch-wrap, .ch-nav-inner, .ch-hero-copy { padding-left: 16px; padding-right: 16px; }
  .ch-nav-inner { gap: 12px; }
  .ch-nav-actions .ch-btn-ghost { display: none; }
  .ch-bento { grid-template-columns: 1fr; }
  .ch-span-2 { grid-column: auto; }
  .ch-card-photo { min-height: 340px; }
  .ch-strip-inner { grid-template-columns: 1fr; gap: 18px; }
  .ch-hero-ctas .ch-btn-lg { flex: 1 1 auto; }
  .ch-uses-tabs { border-radius: 22px; }
  .ch-uses-tabs button { padding: 0 14px; }
  .ch-plan { padding: 28px 22px; }
  .ch-footer-cols { gap: 36px; }
  .ch-credits summary { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-anim [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ch-dot, .ch-rec, .ch-typing i, .ch-biz-card, .ch-biz-card-s i { animation: none; }
  .ch-card, .ch-card-photo img, .ch-btn { transition: none; }
  #screen-landing.screen { scroll-behavior: auto; }
}

/* ---------- Why OnFire: pains people hit elsewhere, and the fix ---------- */

.ch-limits {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  padding: 36px 40px;
  margin-bottom: 20px;
  border-radius: var(--ch-radius);
  background:
    radial-gradient(60% 120% at 100% 50%, var(--ch-accent-soft), transparent 70%),
    var(--ch-surface);
  border: 1px solid var(--ch-border);
}

.ch-limits-copy h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; margin-bottom: 10px; }
.ch-limits-copy p { color: var(--ch-text-2); }
.ch-limits-chart { display: grid; gap: 14px; }

.ch-limit {
  display: grid;
  grid-template-columns: 130px 1fr 72px;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  color: var(--ch-text-2);
}

.ch-limit b { text-align: right; color: var(--ch-text); font-weight: 600; }

.ch-limit-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--ch-glass);
  overflow: hidden;
}

.ch-limit-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--ch-text-3);
  transition: width 1.6s var(--ch-ease) 0.2s;
}

.ch-limits.is-in .ch-limit-bar i,
.ch-noanim .ch-limit-bar i { width: calc(var(--w, 0) * 100%); }
.ch-limit.is-us { color: var(--ch-text); font-weight: 600; }
.ch-limit.is-us b { color: var(--ch-accent); }
.ch-limit.is-us .ch-limit-bar i { background: linear-gradient(90deg, var(--ch-accent), var(--ch-accent-2)); box-shadow: 0 0 18px var(--ch-accent-glow); }

.ch-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.ch-pain {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: var(--ch-radius);
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  transition: transform 0.5s var(--ch-ease), border-color 0.3s;
}

.ch-pain:hover { transform: translateY(-3px); border-color: var(--ch-border-strong); }

.ch-pain-quote {
  font: 600 19px/1.3 var(--ch-font-display);
  letter-spacing: -0.01em;
  color: var(--ch-text);
  text-decoration: line-through;
  text-decoration-color: var(--ch-accent-line);
  text-decoration-thickness: 2px;
}

.ch-pain-what { margin: 12px 0 20px; color: var(--ch-text-3); font-size: 15px; }

.ch-pain-fix {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ch-accent-soft);
  color: var(--ch-text);
  font-size: 15px;
}

.ch-pain-fix b { display: block; margin-bottom: 2px; color: var(--ch-accent); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

.ch-footnote { margin-top: 22px; text-align: center; color: var(--ch-text-3); font-size: 12.5px; }

@media (max-width: 1080px) {
  .ch-pains { grid-template-columns: repeat(2, 1fr); }
  .ch-limits { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 560px) {
  .ch-pains { grid-template-columns: 1fr; }
  .ch-limits { padding: 26px 20px; }
  .ch-limit { grid-template-columns: 96px 1fr 62px; gap: 10px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-limit-bar i { transition: none; }
  .ch-pain { transition: none; }
}

/* ---------- "It's your call" band ---------- */

.ch-yourcall { padding: 24px 0 112px; }

.ch-yourcall-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.ch-yourcall h2 {
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 4px 0 22px;
}

.ch-choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ch-choices li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  transition: border-color 0.3s, transform 0.5s var(--ch-ease);
}

.ch-choices li:hover { border-color: var(--ch-accent-line); transform: translateY(-2px); }
.ch-choices span { color: var(--ch-accent); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ch-choices b { color: var(--ch-text); font-weight: 600; font-size: 16px; line-height: 1.35; }

@media (max-width: 860px) {
  .ch-yourcall { padding-bottom: 80px; }
  .ch-yourcall-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .ch-choices { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-choices li { transition: none; }
}

/* ---------- "Coming soon" markers ---------- */

.ch-tag-soon { color: var(--ch-text-2); background: var(--ch-glass-hover); }

.ch-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--ch-glass-hover);
  color: var(--ch-text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 2px;
  white-space: nowrap;
}

.ch-card-mini h3 .ch-tag { margin-left: 8px; vertical-align: 3px; }

/* ---------- notes + whiteboard mocks ---------- */

.ch-note-sum {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--ch-accent-soft);
  color: var(--ch-text);
  line-height: 1.45;
}

.ch-note-sum b { display: block; color: var(--ch-accent); font-size: 12px; margin-bottom: 2px; }
.ch-note-line { padding: 3px 0; color: var(--ch-text-2); }

.ch-mock-board {
  background:
    linear-gradient(var(--ch-grid-line) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--ch-grid-line) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--ch-surface-2);
}

.ch-ink, .ch-ink-2, .ch-ink-3 { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ch-ink { stroke: var(--ch-accent); stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 2.2s var(--ch-ease) 0.3s; }
.ch-ink-2 { stroke: var(--ch-text-2); }
.ch-ink-3 { stroke: var(--ch-accent-2); }
.ch-card.is-in .ch-ink, .ch-noanim .ch-ink { stroke-dashoffset: 0; }

/* ---------- Activities & games ---------- */

.ch-play-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.ch-play-copy h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin-bottom: 18px; }
.ch-play-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }

.ch-play-list li {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
}

.ch-play-list b { color: var(--ch-text); font-weight: 600; }
.ch-play-list li > span:not(.ch-soon) { display: block; color: var(--ch-text-2); font-size: 15px; margin-top: 2px; }
.ch-play-list li { position: relative; }
.ch-play-list .ch-soon { position: absolute; top: 16px; right: 16px; margin: 0; }

.ch-play-visual { position: relative; }

.ch-play-visual > img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--ch-radius);
}

.ch-board {
  position: absolute;
  right: -16px;
  bottom: 24px;
  width: 250px;
  padding: 16px;
  border-radius: 18px;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  box-shadow: 0 30px 60px -20px var(--ch-shadow);
  animation: chFloat 6s ease-in-out infinite;
}

.ch-board-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ch-accent); margin-bottom: 8px; }
.ch-board-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--ch-text); font-size: 14.5px; }
.ch-board-row + .ch-board-row { border-top: 1px solid var(--ch-border); }
.ch-board-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ch-board-row b { margin-left: auto; font-weight: 600; }
.ch-board-row.is-top b { color: var(--ch-accent); }

/* ---------- Business: booked + offer cards ---------- */

.ch-biz-booked { left: auto; right: -16px; top: 24px; bottom: auto; animation-delay: -3s; }
.ch-biz-card-k.is-offer { color: var(--ch-accent); }
.ch-offer-price { font-size: 15px; }
.ch-offer-price s { color: var(--ch-text-3); }
.ch-offer-price strong { color: var(--ch-text); font-size: 20px; margin-left: 4px; }

.ch-offer-pay {
  margin-top: 8px;
  padding: 9px 0;
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
  color: var(--ch-accent-ink);
  background: linear-gradient(135deg, var(--ch-accent), var(--ch-accent-2));
}

/* ---------- Ecosystem ---------- */

.ch-eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.ch-eco-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border-radius: 18px;
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  transition: border-color 0.3s, transform 0.5s var(--ch-ease);
}

.ch-eco-item:hover { border-color: var(--ch-accent-line); transform: translateY(-2px); }
.ch-eco-item b { color: var(--ch-text); font: 650 18px/1.2 var(--ch-font-display); }
.ch-eco-item > span { color: var(--ch-text-2); font-size: 14.5px; }

@media (max-width: 1080px) {
  .ch-eco-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-nav-links a { padding: 8px 10px; }
}

@media (max-width: 860px) {
  .ch-play-inner { grid-template-columns: 1fr; gap: 32px; }
  .ch-board { right: 12px; bottom: 12px; width: 220px; }
  .ch-biz-booked { right: 12px; top: 12px; }
}

@media (max-width: 560px) {
  .ch-eco-grid { grid-template-columns: 1fr; }
  .ch-biz-booked { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-board { animation: none; }
  .ch-ink { transition: none; stroke-dashoffset: 0; }
  .ch-eco-item { transition: none; }
}

.ch-steps .ch-soon,
.ch-use-copy .ch-soon,
.ch-feats .ch-soon { font-size: 11px; color: var(--ch-text-2); margin-top: 0; }

/* wide UI cards: mock on the left, copy on the right */
.ch-card-wide { flex-direction: row; align-items: stretch; min-height: 0; }
.ch-card-wide .ch-mock { flex: 1 1 52%; margin: 22px 0 22px 22px; align-self: center; }
.ch-card-wide .ch-card-body { flex: 1 1 48%; margin-top: 0; align-self: center; }

@media (max-width: 1080px) {
  .ch-card-wide { flex-direction: column; }
  .ch-card-wide .ch-mock { margin: 22px 22px 0; align-self: stretch; }
}

/* ---------- Pro term ladder + trial ---------- */

.ch-terms { flex-wrap: wrap; justify-content: center; max-width: 100%; }

.ch-ladder {
  max-width: 560px;
  margin: 0 auto 40px;
  padding: 22px 26px 18px;
  border-radius: var(--ch-radius);
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
  text-align: center;
}

.ch-ladder-k { color: var(--ch-text); font-weight: 600; margin-bottom: 16px; }
.ch-ladder-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; height: 150px; }

.ch-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
  cursor: pointer;
}

.ch-step i {
  display: block;
  width: 100%;
  height: calc(var(--h, 1) * 90px);
  border-radius: 12px 12px 6px 6px;
  background: var(--ch-glass-hover);
  transition: background 0.35s var(--ch-ease), box-shadow 0.35s var(--ch-ease);
}

.ch-step b { color: var(--ch-text-2); font: 650 17px/1 var(--ch-font-display); transition: color 0.3s; }
.ch-step span { color: var(--ch-text-3); font-size: 12.5px; }
.ch-step.is-on i { background: linear-gradient(180deg, var(--ch-accent-2), var(--ch-accent)); box-shadow: 0 10px 30px -10px var(--ch-accent-glow); }
.ch-step.is-on b { color: var(--ch-accent); }
.ch-ladder-note { margin-top: 14px; color: var(--ch-text-3); font-size: 13.5px; }
.ch-ladder-note b { color: var(--ch-ok); font-weight: 600; }

.ch-trial {
  margin: -10px 0 18px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ch-ok-soft);
  color: var(--ch-text);
  font-size: 13.5px;
  line-height: 1.45;
}

.ch-trial b { color: var(--ch-ok); }
.ch-cardnote { margin-top: 10px; color: var(--ch-text-3); font-size: 12.5px; text-align: center; line-height: 1.45; }

@media (max-width: 560px) {
  .ch-terms button { padding: 0 12px; font-size: 13.5px; }
  .ch-ladder { padding: 18px 16px 14px; }
  .ch-ladder-bars { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-step i { transition: none; }
}

/* ---------- Intro offer (until 1 Nov 2026) ---------- */

.ch-offer {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ch-accent-soft);
  border: 1px solid var(--ch-accent-line);
  color: var(--ch-text);
  font-size: 14.5px;
}

.ch-offer b { color: var(--ch-accent); }
.ch-offer-days { font-weight: 700; color: var(--ch-text); white-space: nowrap; }
@media (max-width: 560px) { .ch-offer { border-radius: 20px; padding: 10px 16px; } }
.ch-offer[hidden], [data-ch-intro][hidden] { display: none; }
.ch-was { margin-right: 10px; color: var(--ch-text-3); font: 600 22px/1 var(--ch-font-display); align-self: center; }
.ch-was:empty { display: none; }
.ch-step em { color: var(--ch-text-3); font-size: 12px; font-style: normal; text-decoration: line-through; }
.ch-step em:empty { display: none; }

/* ---------- Steering towards Business ---------- */

.ch-plan-biz {
  background:
    radial-gradient(90% 60% at 50% 0%, var(--ch-accent-soft), transparent 70%),
    var(--ch-surface);
}

.ch-upsell {
  display: block;
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed var(--ch-accent-line);
  color: var(--ch-text-2);
  font-size: 14px;
  line-height: 1.5;
  transition: background 0.3s var(--ch-ease), border-color 0.3s var(--ch-ease);
}

#screen-landing .ch-upsell:hover { background: var(--ch-accent-soft); color: var(--ch-text-2); text-decoration: none; }
.ch-upsell b { color: var(--ch-text); }
.ch-upsell span { display: block; margin-top: 6px; color: var(--ch-accent); font-weight: 600; }

.ch-biz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.ch-biz-cta p { color: var(--ch-text-3); font-size: 14px; }
.ch-biz-cta b { color: var(--ch-text); }

/* ---------- Simplified layout (owner: less cognitive load) ---------- */

.ch-span-4 { grid-column: 1 / -1; }
.ch-card-mini h3 { margin-top: 0; font-size: 17px; }
.ch-card-mini { justify-content: center; min-height: 92px; }
.ch-card-soon { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--ch-text-2); }
.ch-card-soon h3 { color: var(--ch-text-2); font-weight: 600; }
.ch-card-ui .ch-card-body h3, .ch-card-photo .ch-card-body h3 { margin-bottom: 0; }
.ch-card-photo .ch-card-body p { margin-top: 6px; }
.ch-pains { grid-template-columns: repeat(4, 1fr); }
.ch-pain-quote { margin-bottom: 16px; font-size: 17px; }
.ch-strip-item b { font-size: 15px; }
.ch-eco-item { align-items: center; text-align: center; padding: 20px 16px; }
.ch-final h2 { margin-bottom: 28px; }
.ch-head .ch-offer { margin-top: 14px; }

@media (max-width: 1080px) {
  .ch-pains { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .ch-pains { grid-template-columns: 1fr; }
  .ch-span-4 { grid-column: auto; }
}

/* ---------- Price comparison (owner: huge value, very little cost) ---------- */

.ch-compare {
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 26px 28px 20px;
  border-radius: var(--ch-radius);
  background: var(--ch-surface);
  border: 1px solid var(--ch-border);
}

.ch-compare-k { color: var(--ch-text); font-weight: 600; margin-bottom: 18px; text-align: center; }
.ch-compare-rows { display: grid; gap: 12px; }

.ch-cmp {
  display: grid;
  grid-template-columns: 150px 1fr max(76px, var(--ch-cmp-ch, 0px));
  align-items: center;
  gap: 14px;
  color: var(--ch-text-2);
  font-size: 15px;
}

.ch-cmp i {
  display: block;
  height: 14px;
  width: calc(var(--w, 1) * 100%);
  border-radius: 999px;
  background: var(--ch-text-3);
  opacity: 0.55;
  transform-origin: left;
  transition: transform 1.4s var(--ch-ease) 0.2s;
}

.ch-anim .ch-compare:not(.is-in) .ch-cmp i { transform: scaleX(0); }
.ch-cmp b { text-align: right; color: var(--ch-text); font-weight: 600; white-space: nowrap; }
.ch-cmp sup { font-size: 10px; }
.ch-cmp.is-us { color: var(--ch-text); font-weight: 700; font-size: 16px; }
.ch-cmp.is-us i { opacity: 1; background: linear-gradient(90deg, var(--ch-accent), var(--ch-accent-2)); box-shadow: 0 0 18px var(--ch-accent-glow); }
.ch-cmp.is-us b { color: var(--ch-accent); font-size: 20px; }
.ch-compare-note { margin-top: 16px; color: var(--ch-text-3); font-size: 12px; text-align: center; line-height: 1.5; }
.ch-compare-more { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 600; }
.ch-compare-more a { color: var(--ch-accent); text-decoration: none; border-radius: 999px; padding: 6px 10px; transition: background-color .2s var(--ch-ease); }
.ch-compare-more a:hover { background: var(--ch-accent-soft); }
.ch-compare-more a:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .ch-compare { padding: 20px 16px 16px; }
  .ch-cmp { grid-template-columns: 104px 1fr max(58px, var(--ch-cmp-ch, 0px)); gap: 8px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-cmp i { transition: none; }
}

/* ===== /call-cameras.css ===== */
/* call-cameras.css — multi-camera tiles, spotlight, Cameras sheet (call-cameras.js,
   epic onfiremobile-6ye4x.3). Classes are prefixed `cams-`. Every colour is a theme
   token (tests/theme-tokens.test.js); tiles are media islands and stay dark. */

/* ---- Tiles (MC4) ---------------------------------------------------------- */

/* Extra cameras and phones are never mirrored (an overhead camera must read right). */
.participant-tile.local.cams-extra video,
.participant-tile.cams-extra video {
  transform: none;
}

.participant-tile.is-main {
  box-shadow: 0 0 0 2px var(--call-accent, #FF6B1F), 0 24px 48px -12px var(--shadow-a50);
}

.cams-main-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.cams-tile-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 180ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
  z-index: 2;
}
.participant-tile:hover .cams-tile-tools,
.participant-tile:focus-within .cams-tile-tools,
.cams-tile-tools:has(.is-on) {
  opacity: 1;
}
@media (hover: none) {
  .cams-tile-tools { opacity: 1; }
}

.cams-tile-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--fg-a10);
  border-radius: 50%;
  background: var(--media-button, rgba(32, 33, 36, 0.6));
  color: var(--media-white, #fff);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 150ms var(--call-ease, ease-out);
}
.cams-tile-btn:hover { background: var(--media-button-hover, rgba(60, 64, 67, 0.8)); }
.cams-tile-btn:active { transform: scale(0.94); }
.cams-tile-btn:focus-visible,
.cams-set-main:focus-visible,
.cams-layout-opt:focus-visible,
.cams-pill:focus-visible,
.cams-icon-btn:focus-visible,
.cams-close:focus-visible {
  outline: 2px solid var(--call-focus, #8ab4f8);
  outline-offset: 2px;
}
.cams-tile-btn.is-on {
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  border-color: transparent;
}

.cams-set-main {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--fg-a10);
  border-radius: 14px;
  background: var(--media-button, rgba(32, 33, 36, 0.6));
  color: var(--media-white, #fff);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms var(--call-ease, ease-out);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.participant-tile:hover .cams-set-main,
.cams-set-main:focus-visible { opacity: 1; }
@media (hover: none) { .cams-set-main { opacity: 1; } }

.cams-tile-cam {
  display: inline-flex;
  color: var(--media-label-2, #e8eaed);
}

.cams-menu {
  position: absolute;
  z-index: 5;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: var(--call-menu, #2d2e31);
  border: 1px solid var(--call-panel-border, #3c4043);
  box-shadow: 0 12px 32px var(--shadow-a45);
  display: flex;
  flex-direction: column;
}
.cams-menu-item {
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.cams-menu-item:hover,
.cams-menu-item:focus-visible { background: var(--call-menu-hover, #3c4043); outline: none; }
.cams-menu-item.is-danger { color: var(--danger-text, #f28b82); }

/* ---- Spotlight (MC4 §3) --------------------------------------------------- */

.participants-grid.cams-spotlight:not(.strip-mode) {
  grid-template-columns: repeat(var(--cams-thumbs, 1), minmax(0, 200px));
  grid-template-rows: minmax(0, 1fr) 112px;
  justify-content: center;
  transition: grid-template-rows 250ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.participants-grid.cams-spotlight:not(.strip-mode) > .participant-tile:first-child {
  grid-column: 1 / -1;
}
.participants-grid.cams-spotlight:not(.strip-mode) > .participant-tile:not(:first-child) .avatar-placeholder {
  width: 44px;
  height: 44px;
  font-size: 16px;
}
.participants-grid.cams-spotlight:not(.strip-mode) > .participant-tile:not(:first-child) .participant-name {
  bottom: 6px;
  left: 6px;
  padding: 3px 8px;
  font-size: 11px;
  max-width: calc(100% - 12px);
}
.participants-grid.cams-spotlight:not(.strip-mode) > .participant-tile:not(:first-child) .cams-main-chip {
  top: 6px;
  left: 6px;
}
@media (max-width: 600px) {
  .participants-grid.cams-spotlight:not(.strip-mode) {
    grid-template-rows: minmax(0, 1fr) 96px;
    grid-template-columns: repeat(var(--cams-thumbs, 1), minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .participants-grid.cams-spotlight { transition: none; }
}

.cams-layout {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 18px;
  background: var(--inverse-glass, rgba(32, 33, 36, 0.72));
  border: 1px solid var(--fg-a10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cams-layout-opt {
  height: 30px;
  padding: 0 14px;
  border: none;
  border-radius: 15px;
  background: none;
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.cams-layout-opt.is-on {
  background: var(--seg-selected, #3c4043);
  color: var(--call-text, #e3e3e3);
}

/* Toolbar: a camera besides the primary is live. */
#btn-video.cams-has-extra { position: relative; }
#btn-video.cams-has-extra::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--call-accent, #FF6B1F);
}

/* ---- Cameras sheet (MC3) -------------------------------------------------- */

.cams-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  width: 380px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--call-panel, #1e1f20);
  border-left: 1px solid var(--call-panel-border, #2e3134);
  box-shadow: -12px 0 32px var(--shadow-a35);
  color: var(--call-text, #e3e3e3);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 250ms var(--call-ease, cubic-bezier(0.2, 0.8, 0.2, 1)), visibility 0s linear 250ms;
}
.cams-sheet.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 250ms var(--call-ease, cubic-bezier(0.2, 0.8, 0.2, 1)), visibility 0s linear 0s;
}
.cams-grab { display: none; }
@media (max-width: 600px) {
  .cams-sheet {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 85vh;
    border-left: none;
    border-top: 1px solid var(--call-panel-border, #2e3134);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .cams-sheet.is-open { transform: translateY(0); }
  .cams-grab {
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--fg-a20);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cams-sheet,
  .cams-sheet.is-open {
    transform: none;
    opacity: 0;
    transition: opacity 150ms ease-out, visibility 0s linear 150ms;
  }
  .cams-sheet.is-open { opacity: 1; transition: opacity 150ms ease-out, visibility 0s; }
}

.cams-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 16px 12px 12px 24px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.cams-title {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--call-text, #e3e3e3);
}
.cams-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
}
.cams-close:hover { background: var(--fg-a08); }

.cams-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cams-intro,
.cams-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--call-text-muted, #a8abaf);
}
.cams-banner {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--warning-a14, rgba(251, 188, 4, 0.14));
  color: var(--warning-text, #fdd663);
  font-size: 13px;
  line-height: 1.4;
}
.cams-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.cams-mod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--call-card, #28292c);
}
.cams-mod-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cams-mod-label { font-size: 14px; font-weight: 500; }
.cams-mod-hint { font-size: 12px; color: var(--call-text-muted, #a8abaf); }

.cams-list { display: flex; flex-direction: column; gap: 10px; }
.cams-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
  background: var(--call-card, #28292c);
  transition: opacity 200ms var(--call-ease, ease-out);
}
.cams-row.is-dim { opacity: 0.6; }
.cams-preview {
  position: relative;
  flex: 0 0 112px;
  width: 112px;
  height: 63px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--media-black, #000);
}
.cams-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cams-preview.is-mirror video { transform: scaleX(-1); }
.cams-skel {
  background: linear-gradient(90deg, var(--fg-a05) 0%, var(--fg-a10) 50%, var(--fg-a05) 100%);
  background-size: 200% 100%;
  animation: cams-sweep 1.2s var(--call-ease, ease-in-out) infinite;
}
@keyframes cams-sweep { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cams-skel { animation: none; } }

.cams-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cams-row-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cams-row-label {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cams-row-sub {
  font-size: 12px;
  color: var(--call-text-muted, #a8abaf);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cams-rename {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-strong, #5f6368);
  border-radius: 8px;
  background: var(--bg-input, #303134);
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
}
.cams-row-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.cams-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--fg-a10);
  border-radius: 50%;
  background: var(--call-surface, #202124);
  color: var(--call-text-muted, #a8abaf);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out), transform 150ms var(--call-ease, ease-out);
}
.cams-icon-btn:hover { background: var(--call-surface-hover, #303134); color: var(--call-text, #e3e3e3); }
.cams-icon-btn:active { transform: scale(0.94); }
.cams-icon-btn.cams-edit { width: 24px; height: 24px; border: none; background: none; }
.cams-onoff.is-on { background: var(--accent-a18, rgba(255, 107, 31, 0.18)); color: var(--call-accent, #FF6B1F); border-color: transparent; }
.cams-remove:hover { color: var(--danger-text, #f28b82); }

.cams-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms var(--call-ease, ease-out), transform 150ms var(--call-ease, ease-out);
}
.cams-pill:active:not(:disabled) { transform: scale(0.97); }
.cams-pill:disabled { opacity: 0.45; cursor: default; }
.cams-pill-on {
  border: 1px solid transparent;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
}
.cams-pill-outline {
  border: 1px solid var(--border-strong, #5f6368);
  background: none;
  color: var(--call-text, #e3e3e3);
}
.cams-pill-outline:hover:not(:disabled) { background: var(--fg-a08); }

.cams-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.cams-actions .cams-pill { height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14px; }
.cams-add-wrap { position: relative; }
.cams-devlist {
  position: absolute;
  bottom: 46px;
  left: 0;
  z-index: 2;
  min-width: 240px;
  padding: 6px;
  border-radius: 12px;
  background: var(--call-menu, #2d2e31);
  border: 1px solid var(--call-panel-border, #3c4043);
  box-shadow: 0 12px 32px var(--shadow-a45);
  display: flex;
  flex-direction: column;
}
.cams-devitem {
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--call-text, #e3e3e3);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.cams-devitem:hover,
.cams-devitem:focus-visible { background: var(--call-menu-hover, #3c4043); outline: none; }

.cams-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
/* The QR card stays light in both themes so phones can scan it. */
.cams-qr-card {
  width: 232px;
  height: 232px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--qr-paper, #fff);
}
.cams-qr-canvas { width: 200px; height: 200px; }
.cams-qr-expired { color: var(--text-secondary, #5f6368); font-weight: 500; }
.cams-qr-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--call-text, #e3e3e3);
}

.cams-info-setting { margin-top: 8px; }

/* ===== /layout-views.css ===== */
/* layout-views.css — Speaker / Multi-speaker views, filmstrip, hide toggles,
   side-by-side screen share and the Layout panel (layout-views.js,
   onfiremobile-vxyiy). Colours: theme tokens only. */

/* ---- Speaker / multi-speaker: big tile(s) on top, a filmstrip below ---- */

.participants-grid.lv-own:not(.strip-mode) {
  --lv-strip-h: 112px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 8px;
  grid-template-columns: none;
  grid-template-rows: none;
}

.participants-grid.lv-own:not(.strip-mode) > .participant-tile.lv-main {
  flex: 0 0 calc((100% - (var(--lv-main, 1) - 1) * 8px) / var(--lv-main, 1));
  height: calc(100% - var(--lv-strip-h) - 8px);
}

.participants-grid.lv-own.lv-no-strip:not(.strip-mode) > .participant-tile.lv-main {
  height: 100%;
}

/* One speaker: show the whole picture, letterboxed like a stage. */
.participants-grid.lv-speaker:not(.strip-mode) > .participant-tile.lv-main {
  background: var(--media-black);
}

.participants-grid.lv-speaker:not(.strip-mode) > .participant-tile.lv-main video {
  object-fit: contain !important;
}

.participants-grid.lv-own:not(.strip-mode) > .participant-tile.lv-thumb {
  flex: 0 0 200px;
  height: var(--lv-strip-h);
  box-shadow: none;
}

.participants-grid.lv-own:not(.strip-mode) > .participant-tile.lv-thumb .avatar-placeholder {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

.participants-grid.lv-own:not(.strip-mode) > .participant-tile.lv-thumb .participant-name {
  bottom: 6px;
  left: 6px;
  max-width: calc(100% - 12px);
  padding: 3px 8px;
  font-size: 11px;
}

@media (max-width: 767px) {
  .participants-grid.lv-own:not(.strip-mode) {
    --lv-strip-h: 88px;
  }

  .participants-grid.lv-own:not(.strip-mode) > .participant-tile.lv-thumb {
    flex-basis: 104px;
  }

  /* Phones: the multi-speaker tiles stack instead of three slivers. */
  .participants-grid.lv-multi:not(.strip-mode) > .participant-tile.lv-main {
    flex-basis: 100%;
    height: calc((100% - var(--lv-strip-h) - var(--lv-main, 1) * 8px) / var(--lv-main, 1));
  }

  .participants-grid.lv-multi.lv-no-strip:not(.strip-mode) > .participant-tile.lv-main {
    height: calc((100% - (var(--lv-main, 1) - 1) * 8px) / var(--lv-main, 1));
  }
}

.lv-strip-nav.hidden {
  display: none;
}

/* ---- Empty state (everyone hidden by a toggle) ---- */

.participants-grid > .lv-empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--call-text-muted);
}

.lv-empty-text {
  margin: 0;
  font-size: 15px;
  color: var(--text-strong);
}

.lv-pill {
  min-height: 36px;
  padding: 8px 18px;
  border: 1px solid var(--call-border);
  border-radius: 999px;
  background: var(--call-surface);
  color: var(--text-strong);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease), transform 150ms var(--call-ease);
}

.lv-pill:hover {
  background: var(--call-surface-hover);
}

.lv-pill:active {
  transform: scale(0.97);
}

.lv-pill:focus-visible,
.lv-radio:focus-visible,
.lv-switch:focus-visible,
.lv-close:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}

/* ---- "Following host's video order" ---- */

.lv-note {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--media-label);
  border: 1px solid var(--fg-a10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.participant-tile[draggable="true"] {
  cursor: grab;
}

.participant-tile.lv-dragging {
  opacity: 0.5;
}

.participant-tile.lv-drop {
  outline: 2px dashed var(--call-accent, #FF6B1F);
  outline-offset: -2px;
}

/* ---- Screen share side by side (larger screens) ---- */

@media (min-width: 768px) {
  .call-stage.lv-side {
    flex-direction: row;
  }

  .call-stage.lv-side > .participants-grid.strip-mode {
    order: 1;
    flex: 0 0 232px;
    width: 232px;
    height: auto;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y proximity;
    padding-bottom: 56px;   /* room for the page switcher over the column */
  }

  .call-stage.lv-side > .participants-grid.strip-mode > .participant-tile {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0;
  }

  .call-stage.lv-side > .gallery-nav {
    position: absolute;
    right: 24px;
    bottom: 8px;
    z-index: 3;
  }
}

/* ---- Header button and the Layout panel ---- */

.lv-header-btn[aria-expanded="true"] {
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
}

@media (max-width: 767px) {
  .lv-header-btn {
    display: none;
  }
}

.lv-panel {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 12px 14px;
  border-radius: 16px;
  background: var(--call-menu);
  border: 1px solid var(--call-border);
  box-shadow: 0 16px 40px var(--shadow-a55);
  color: var(--text-hi);
  font-size: 14px;
}

.lv-panel.hidden {
  display: none;
}

.lv-panel.lv-anim {
  animation: call-pop-in 180ms var(--call-ease, ease-out);
  transform-origin: top right;
}

@media (max-width: 767px) {
  .lv-panel {
    top: auto;
    left: 16px;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 120px);
    transform-origin: bottom center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-panel.lv-anim {
    animation: none;
  }

  .lv-pill,
  .lv-radio,
  .lv-switch,
  .lv-switch-knob {
    transition: none;
  }
}

.lv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 8px 4px;
}

.lv-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
}

.lv-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted);
  cursor: pointer;
}

.lv-close:hover {
  background: var(--fg-a08);
  color: var(--text-strong);
}

.lv-group {
  padding: 8px 0;
  border-top: 1px solid var(--call-border);
}

.lv-group.hidden,
.lv-row.hidden,
.lv-following.hidden {
  display: none;
}

.lv-group-label {
  padding: 2px 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--call-text-muted);
}

.lv-radios {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lv-radios-share {
  flex-direction: row;
}

.lv-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms var(--call-ease), border-color 150ms var(--call-ease);
}

.lv-radios-share .lv-radio {
  justify-content: center;
  text-align: center;
}

.lv-radio:hover {
  background: var(--call-menu-hover);
}

.lv-radio[aria-checked="true"] {
  background: var(--call-accent-soft);
  border-color: var(--accent-a40);
  color: var(--call-accent-text);
}

.lv-radio svg {
  flex-shrink: 0;
  color: currentColor;
}

.lv-radio-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lv-radio-label {
  font-weight: 500;
}

.lv-radio-sub,
.lv-row-sub {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--call-text-muted);
}

.lv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 4px 4px;
  cursor: pointer;
}

.lv-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lv-switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: var(--switch-off);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out);
}

.lv-switch[aria-checked="true"] {
  background: var(--call-accent, #FF6B1F);
}

.lv-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--switch-knob);
  transition: transform 150ms var(--call-ease, ease-out);
}

.lv-switch[aria-checked="true"] .lv-switch-knob {
  transform: translateX(16px);
}

.lv-following {
  margin: 6px 4px 0;
  font-size: 12px;
  color: var(--call-text-muted);
}

/* ===== /stage-main-area.css ===== */
/* stage-main-area.css — a Quiz / World / Whiteboard on the Stage in the MAIN area, like a screen
   share, with the participant tiles in a filmstrip on the left (stage-main-area.js,
   onfiremobile-6ye4x.4). Desktop only (> 768 px): on phones the Stage already fills the width
   under the tile strip (stage.css). Sideways phones of any width get it too (the second media
   query, the same as stage-main-area.js's LANDSCAPE_QUERY); call-landscape.css then moves the strip to
   the right and the controls to the left. Loaded after stage.css / call-cameras.css; #screen-call in the
   selectors outranks the screen-share strip (style.css), the cameras spotlight (call-cameras.css)
   and the Stage sidebar rules without !important. Colours: call-screen tokens only. */

.stage-main-slot { display: none; }
.stage-main-toggle.hidden,
.stage-main-swap.hidden { display: none !important; }

@media (min-width: 769px), (orientation: landscape) and (max-height: 539.98px) {
  #screen-call { --stage-main-strip-w: clamp(150px, 15vw, 216px); }

  /* The video stage: filmstrip | main area (the shared screen, when swapped, tops the strip). */
  #screen-call .call-layout.stage-main-on .call-stage {
    display: grid;
    grid-template-columns: var(--stage-main-strip-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
  }
  #screen-call .call-layout.stage-main-on .stage-main-slot {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
    min-height: 0;
  }

  /* Filmstrip: every tile (extra cameras too), stacked, scrolling when it overflows. */
  #screen-call .call-layout.stage-main-on .participants-grid {
    grid-column: 1;
    grid-row: 2;
    order: 0;
    height: auto;
    min-height: 0;
    padding: 3px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y proximity;
    scrollbar-width: thin;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  #screen-call .call-layout.stage-main-on .participants-grid > .participant-tile {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-width: 0;
    aspect-ratio: 4 / 3;
    margin: 0;
    grid-column: auto;
    scroll-snap-align: start;
    box-shadow: none;   /* the strip clips it into a band (visible in light) */
  }
  #screen-call .call-layout.stage-main-on .participants-grid .avatar-placeholder {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  #screen-call .call-layout.stage-main-on .participants-grid .participant-name {
    font-size: 11px;
    bottom: 6px;
    left: 6px;
    padding: 3px 8px;
    max-width: calc(100% - 12px);
  }
  /* The spotlight / grid chooser has no job while the tiles are a strip. */
  #screen-call .call-layout.stage-main-on .cams-layout { display: none; }

  /* Swapped over a screen share: the shared screen leads the strip. */
  #screen-call .call-layout.stage-main-on .screen-share-container.active {
    grid-column: 1;
    grid-row: 1;
    flex: none;
    aspect-ratio: 16 / 9;
    margin-bottom: 8px;
    animation: none;
  }
  #screen-call .call-layout.stage-main-on .screen-share-label {
    top: 6px;
    left: 6px;
    padding: 3px 8px;
    font-size: 11px;
  }

  /* The panel over the slot. It never moves in the DOM (an iframe would reload). */
  #screen-call .call-layout > .stage-panel.stage-main-panel {
    position: absolute;
    left: var(--stage-main-x, 0);
    top: var(--stage-main-y, 0);
    width: var(--stage-main-w, 0);
    height: var(--stage-main-h, 0);
    min-width: 0;
    max-width: none;
    z-index: 6;   /* over the video stage (reactions 5), under the header (10) and the control bar (30) */
    border: 1px solid var(--call-panel-border, #2e3134);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px var(--shadow-a50);
  }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-resize { display: none; }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-head { padding-top: 12px; min-height: 0; }
  #screen-call .call-layout > .stage-panel.stage-main-panel.is-new,
  #screen-call .call-layout > .stage-panel.stage-main-panel.stage-main-enter {
    animation: stage-main-in 260ms cubic-bezier(0.33, 1, 0.68, 1);   /* easeOutCubic */
  }
}

/* "Show in main area" over a screen share: a pill under the panel header. */
.stage-main-swap {
  align-self: flex-start;
  margin: 0 16px 10px;
  height: 32px;
  padding: 0 14px 0 10px;
  font-size: 13px;
  border-color: var(--stage-accent-line, rgba(255, 107, 31, 0.55));
}
.stage-main-swap svg { width: 16px; height: 16px; }

@keyframes stage-main-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-call .call-layout > .stage-panel.stage-main-panel.is-new,
  #screen-call .call-layout > .stage-panel.stage-main-panel.stage-main-enter { animation: none; }
}

/* ---------- Docked (onfiremobile-6ye4x.5): the call controls under the filmstrip, the panel the
   full height, one header row for a kind that offers dock slots (the whiteboard). stage-main-area.js
   sets .stage-main-dock / .stage-main-docked / .stage-main-compact only while DOCK_QUERY matches;
   the query is repeated here so a stale class can never reach a phone layout. The control bar is
   the SAME element (#btn-mic … #btn-hangup, the device chevrons, ⋯, reactions): only styled. ---------- */
.stage-dock-stop.hidden { display: none !important; }

@media (min-width: 900px) and (min-height: 540px) {
  #screen-call .call-layout.stage-main-dock .call-main {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  /* filmstrip | main area, with a row under the strip for the controls (height from JS). */
  #screen-call .call-layout.stage-main-dock .call-stage {
    grid-template-rows: auto minmax(0, 1fr) calc(var(--stage-dock-h, 232px) + 10px);
  }
  #screen-call .call-layout.stage-main-dock .stage-main-slot { grid-row: 1 / -1; }

  #screen-call .call-layout.stage-main-dock .call-controls-wrap {
    left: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: none;
    width: var(--stage-main-strip-w);
    max-width: none;
    align-items: stretch;
    animation: stage-dock-in 220ms cubic-bezier(0.33, 1, 0.68, 1);
  }
  #screen-call .call-layout.stage-main-dock .call-controls {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 8px;
    border-radius: 22px;
    box-shadow: 0 8px 24px var(--shadow-a35), 0 1px 4px var(--shadow-a25);
  }
  /* Icon buttons: three a row; mic / camera (with their device chevrons): two a row; Leave at the
     bottom right; Stop / Stop all (presenter) across the top. */
  #screen-call .call-layout.stage-main-dock .call-controls > .control-btn {
    grid-column: span 2;
    justify-self: stretch;
    width: auto;
    height: 40px;
  }
  #screen-call .call-layout.stage-main-dock .call-controls > .control-btn-pill { grid-column: span 3; }
  #screen-call .call-layout.stage-main-dock .call-controls > .dev-split {
    grid-column: span 3;
    min-width: 0;
    width: auto;
  }
  #screen-call .call-layout.stage-main-dock .call-controls > .dev-split > .control-btn-pill { flex: 1 1 auto; min-width: 0; width: auto; }
  #screen-call .call-layout.stage-main-dock .call-controls > .control-btn-hangup {
    grid-column: -3 / -1;
    margin-left: 0;
  }
  #screen-call .call-layout.stage-main-dock .call-controls .stage-dock-stop {
    grid-column: 1 / -1;
    display: flex;
  }
  #screen-call .call-layout.stage-main-dock .stage-dock-stop .stage-btn-stop {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
  }
  /* Every control is in the grid: none collapses into ⋯ (content-strip.js / phones' rule). */
  #screen-call .call-layout.stage-main-dock .call-controls .control-btn-collapsible { display: flex; }
  #screen-call .call-layout.stage-main-dock .more-menu .more-menu-collapsed { display: none; }

  /* Pop-ups of the bar open above the column, over the board, left-aligned. */
  #screen-call .call-layout.stage-main-dock .more-menu {
    left: 0;
    right: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom left;
    max-height: calc(100vh - var(--stage-dock-h, 232px) - 96px);
    max-height: calc(100dvh - var(--stage-dock-h, 232px) - 96px);
  }
  #screen-call .call-layout.stage-main-dock .dev-popover { bottom: calc(100% + 8px); }
  #screen-call .call-layout.stage-main-dock .reactions-bar {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(560px, calc(100vw - 40px));
  }

  /* The panel: the Stop button lives in the controls now. */
  #screen-call .call-layout > .stage-panel.stage-main-docked .stage-host { display: none; }

  /* One header row (a kind with dock slots): no Stage head, no inner card. */
  #screen-call .call-layout > .stage-panel.stage-main-compact > .stage-head,
  #screen-call .call-layout > .stage-panel.stage-main-compact > .stage-main-swap { display: none; }
  #screen-call .call-layout > .stage-panel.stage-main-compact > .stage-body {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #screen-call .call-layout > .stage-panel.stage-main-compact .stage-kind-board .stage-board { padding: 6px 8px 8px; gap: 6px; }
  #screen-call .call-layout > .stage-panel.stage-main-compact .stage-board-scene { border-radius: 12px; }
}

@keyframes stage-dock-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-call .call-layout.stage-main-dock .call-controls-wrap { animation: none; }
}

/* ---------- Tiles on top (onfiremobile-jmgih): a note expanded from the side panel on a wide window,
   and the whiteboard (onfiremobile-dzjnd.2: any window over 768 px wide and 540 px tall). The note's
   .stage-main-top only comes while DOCK_QUERY matches (NOTE_AREA is wideOnly); the height bound keeps
   it off sideways phones (call-landscape.css lays those out).
   The tiles are one centred row along the top (like a screen share's strip, content-strip.js keeps
   the speaker in view when it scrolls), the note fills the rest, the control bar stays at the
   bottom. Swapped in over a screen share, the shared screen leads the row. ---------- */
@media (min-width: 769px) and (min-height: 540px) {
  #screen-call { --stage-top-strip-h: clamp(96px, 16vh, 150px); }

  #screen-call .call-layout.stage-main-on.stage-main-top .call-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--stage-top-strip-h) minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 10px;
  }
  #screen-call .call-layout.stage-main-on.stage-main-top.stage-main-share .call-stage {
    grid-template-columns: auto minmax(0, 1fr);
  }
  #screen-call .call-layout.stage-main-on.stage-main-top .stage-main-slot {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #screen-call .call-layout.stage-main-on.stage-main-top .participants-grid {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scroll-snap-type: x proximity;
  }
  #screen-call .call-layout.stage-main-on.stage-main-top.stage-main-share .participants-grid { grid-column: 2; }
  #screen-call .call-layout.stage-main-on.stage-main-top .participants-grid > .participant-tile {
    flex: 0 0 calc(var(--stage-top-strip-h) * 4 / 3);
    width: auto;
    height: 100%;
    aspect-ratio: auto;
    scroll-snap-align: center;
  }
  /* Centred while it fits; auto margins (unlike justify-content) keep an overflowing row scrollable
     from its first tile (style.css .strip-mode does the same). */
  #screen-call .call-layout.stage-main-on.stage-main-top .participants-grid > .participant-tile:first-child { margin-left: auto; }
  #screen-call .call-layout.stage-main-on.stage-main-top .participants-grid > .participant-tile:last-child { margin-right: auto; }

  /* With the shared screen leading, the tiles follow it (not centred in what is left). */
  #screen-call .call-layout.stage-main-on.stage-main-top.stage-main-share .participants-grid > .participant-tile:first-child { margin-left: 0; }

  /* Same height as the tiles (the row's 3 px padding above and below). */
  #screen-call .call-layout.stage-main-on.stage-main-top .screen-share-container.active {
    grid-column: 1;
    grid-row: 1;
    width: calc(var(--stage-top-strip-h) * 16 / 9);
    height: auto;
    aspect-ratio: auto;
    margin: 3px 0;
  }

  /* More than one page of tiles: the page switcher sits over the row's right end. */
  #screen-call .call-layout.stage-main-on.stage-main-top .gallery-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    margin: 0 6px 6px 0;
    z-index: 3;
  }
}

/* One header row on top of the tiles-on-top layout (the whiteboard, onfiremobile-dzjnd.2): the kind's
   bar holds the presenter avatar, tabs and status (lent by stage-main-area.js); no Stage head, no inner
   card, so the board gets the height between the tile row and the control bar. */
@media (min-width: 769px) and (min-height: 540px) {
  #screen-call .call-layout.stage-main-top > .stage-panel.stage-main-compact > .stage-head,
  #screen-call .call-layout.stage-main-top > .stage-panel.stage-main-compact > .stage-main-swap { display: none; }
  #screen-call .call-layout.stage-main-top > .stage-panel.stage-main-compact > .stage-body {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #screen-call .call-layout.stage-main-top > .stage-panel.stage-main-compact .stage-kind-board .stage-board { padding: 6px 8px 8px; gap: 6px; }
  #screen-call .call-layout.stage-main-top > .stage-panel.stage-main-compact .stage-board-scene { border-radius: 12px; }
}

/* ===== /stage-board.css ===== */
/* stage-board.css — the whiteboard's ONE header row and its ⋯ menu (stage-board.js,
   onfiremobile-6ye4x.5). Loaded after stage-kinds.css (the board's base styles live there) and
   stage-main-area.css. Call-screen tokens only (theme.css: light + dark); pills / circles;
   focus rings; reduced motion respected. */

.stage-board { position: relative; gap: 8px; padding: 8px 10px 10px; }

/* ---------- the header row ---------- */
.stage-board-bar {
  position: relative;
  z-index: 3;                       /* the menu opens over the board */
  gap: 8px;
  min-height: 40px;
  min-width: 0;
}
.stage-board-bar > * { flex-shrink: 0; }
.stage-board-bar > .stage-board-spacer { flex: 1 1 0; min-width: 4px; }

/* Slots stage-main-area.js fills while docked (presenter avatar; tab strip + meta row). */
.stage-dock-lead:empty,
.stage-dock-tabs:empty { display: none; }
.stage-dock-lead { display: inline-flex; align-items: center; }
.stage-dock-lead .stage-avatar { width: 30px; height: 30px; margin-top: 0; font-size: 11px; }
.stage-dock-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto !important;
  min-width: 0;
  max-width: 55%;
}
.stage-dock-tabs .stage-tabstrip {
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px 4px;
}
.stage-dock-tabs .stage-tabitem { height: 32px; max-width: 200px; }
.stage-dock-tabs .stage-meta { flex: none; display: flex; align-items: center; gap: 8px; }
.stage-dock-tabs .stage-meta.hidden { display: none; }

/* Title: shown in the docked header (the Stage head says it elsewhere) and while renaming. */
.stage-board-titlebox { display: none; align-items: center; min-width: 0; flex-shrink: 1 !important; }
.stage-panel.stage-main-compact .stage-board-titlebox,
.stage-board.is-renaming .stage-board-titlebox { display: inline-flex; }
.stage-board-titlebox .hidden { display: none !important; }
.stage-board-title-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}
.stage-board-title-static { padding: 0 6px; max-width: 360px; }
.stage-board-titlebtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 360px;
  height: 34px;
  padding: 0 10px 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: text;
  transition: background-color 150ms var(--call-ease, ease-out), border-color 150ms var(--call-ease, ease-out);
}
.stage-board-titlebtn:hover:not(:disabled) { background: var(--fg-a06); border-color: var(--call-border, #3c4043); }
.stage-board-titlebtn:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.stage-board-titlebtn:disabled { cursor: progress; opacity: 0.75; }
.stage-board-title-pen { display: inline-flex; color: var(--call-text-muted, #a8abaf); opacity: 0.8; }
.stage-board-titlebtn:hover .stage-board-title-pen,
.stage-board-titlebtn:focus-visible .stage-board-title-pen { opacity: 1; color: var(--text-strong); }
.stage-board-titleinput {
  width: min(360px, 40vw);
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--stage-accent-line, rgba(255, 107, 31, 0.55));
  border-radius: 999px;
  background: var(--call-surface, #202124);
  color: var(--text-strong);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  box-shadow: 0 0 0 3px var(--call-accent-soft, rgba(255, 107, 31, 0.16));
}
.stage-board-titleinput[aria-invalid="true"] { border-color: var(--stage-danger-line); box-shadow: 0 0 0 3px var(--danger-a14); }

/* "Live · 3 here" (the page reports presence when it hides its own bar). */
.stage-board-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: var(--fg-a06);
  color: var(--call-text-muted, #a8abaf);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  animation: stage-pop 180ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-board-live.hidden { display: none; }
/* On a phone the row is full (Live, follow switch, AI credits, ⋯, red X): the chip gives way first,
   down to its dot, so the red X never leaves the screen (onfiremobile-dzjnd). */
.stage-board-bar > .stage-board-live { flex-shrink: 1; min-width: 26px; overflow: hidden; }
.stage-board-live-dot { flex: none; }
.stage-board-live-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stage-board-live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stage-board-live[data-tone="live"] { background: var(--success-text-a16); color: var(--success-text); }
.stage-board-live[data-tone="live"] .stage-board-live-dot { animation: stage-live 2s ease-in-out infinite; }
.stage-board-signin.stage-btn { height: 30px; padding: 0 12px; font-size: 12px; }

/* ⋯ */
.stage-board-more { width: 36px; height: 36px; }
.stage-board-more.is-open { background: var(--fg-a08); color: var(--text-strong); }

/* ---------- the ⋯ menu ---------- */
.stage-board-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8;
  width: 272px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: 16px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 16px 40px var(--shadow-a55);
  color: var(--text-hi);
  transform-origin: top right;
  animation: stage-board-menu-in 160ms cubic-bezier(0.33, 1, 0.68, 1);
}
.stage-board-menu.hidden { display: none; }
.stage-board-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.stage-board-menu-item:hover:not(:disabled),
.stage-board-menu-item:focus-visible { background: var(--call-menu-hover, var(--fg-a08)); outline: none; }
.stage-board-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--call-focus, #ff7f3d); }
.stage-board-menu-item:disabled { cursor: default; opacity: 0.5; }
.stage-board-menu-item.is-check { border-radius: 16px; }
.stage-board-menu-icon { display: inline-flex; flex-shrink: 0; color: var(--call-text-muted, #a8abaf); }
.stage-board-menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stage-board-menu-label { font-weight: 500; }
.stage-board-menu-sub { font-size: 12px; line-height: 1.35; color: var(--call-text-muted, #a8abaf); }
.stage-board-menu-sep { height: 1px; margin: 6px 8px; background: var(--call-border, #3c4043); }
.stage-board-menu-switch {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 22px;
  border-radius: 999px;
  background: var(--switch-off, var(--fg-a20));
  transition: background-color 180ms var(--call-ease, ease-out);
}
.stage-board-menu-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--switch-knob, #fff);
  box-shadow: 0 1px 3px var(--shadow-a30);
  transition: transform 180ms cubic-bezier(0.33, 1, 0.68, 1);
}
.stage-board-menu-switch.is-on { background: var(--call-accent, #FF6B1F); }
.stage-board-menu-switch.is-on::after { transform: translateX(14px); }

/* ---------- the link's boards: a popover over the board, not a row that pushes it down ---------- */
.stage-board-list {
  position: absolute;
  top: 54px;
  right: 10px;
  z-index: 6;
  width: min(420px, calc(100% - 20px));
  max-height: calc(100% - 66px);
  box-shadow: 0 16px 40px var(--shadow-a55);
}

.stage-board-scene { min-height: 200px; }

@keyframes stage-board-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-board-menu,
  .stage-board-live,
  .stage-board-live[data-tone="live"] .stage-board-live-dot { animation: none; }
  .stage-board-menu-switch,
  .stage-board-menu-switch::after,
  .stage-board-titlebtn { transition: none; }
}

/* Phones: the header row scrolls sideways rather than wrapping. */
@media (max-width: 768px) {
  .stage-board { padding: 6px 8px 8px; }
  .stage-board-titleinput { width: min(260px, 60vw); }
  .stage-board-menu { width: 260px; }
}
.stage-board-menu-item.is-busy { cursor: progress; }
.stage-board-menu-item.is-busy .stage-board-menu-switch { opacity: 0.6; }

/* ---------- Presenting (onfiremobile-dzjnd.2) ---------- */
/* "Follow my view" chip slot (follow-view.css styles the chip). */
.stage-board-follow { display: inline-flex; align-items: center; }
.stage-board-follow:empty { display: none; }

/* The red X, top right: the presenter / host stops sharing the board. */
.stage-board-stopx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--call-danger, #ea4335);
  color: var(--on-fill, #fff);
  cursor: pointer;
  box-shadow: 0 4px 12px var(--shadow-a30, rgba(0, 0, 0, 0.3));
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms cubic-bezier(0.33, 1, 0.68, 1), transform 140ms cubic-bezier(0.33, 1, 0.68, 1);
  animation: stage-pop 180ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.stage-board-stopx.hidden { display: none; }
.stage-board-stopx:hover:not(:disabled) { background: var(--call-danger-hover, #d93025); }
.stage-board-stopx:active:not(:disabled) { transform: scale(0.92); }
.stage-board-stopx:focus-visible { outline: 2px solid var(--call-danger, #ea4335); outline-offset: 2px; }
.stage-board-stopx:disabled { opacity: 0.55; cursor: default; }
.stage-board-stopx.is-busy { cursor: progress; opacity: 0.7; }
/* The Stage's own Stop row gives way to the red X. */
.stage-panel.stage-own-stop .stage-host { display: none; }

@media (prefers-reduced-motion: reduce) {
  .stage-board-stopx { animation: none; transition: none; }
}

/* ===== /follow-view.css ===== */
/* follow-view.css — the "Follow my view" chip (follow-view.js, onfiremobile-dzjnd.2): the presenter's
   switch, "Following Anna" for viewers, "Back to Anna's view in 4 s" while a viewer roams. Quiet on
   purpose: one 26 px pill in the board's header row / the note's meta row. Call-screen tokens only
   (both themes); motion: a short easeOutCubic, none with reduced motion. */

.fv { display: inline-flex; align-items: center; min-width: 0; }
.fv.hidden,
.fv .hidden { display: none !important; }
.fv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  max-width: 100%;
  min-width: 0;
  padding: 0 10px 0 9px;
  border: 0;
  border-radius: 999px;
  background: var(--fg-a06);
  color: var(--call-text-muted, #a8abaf);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  animation: fv-in 180ms cubic-bezier(0.33, 1, 0.68, 1);
}
.fv-chip svg { flex: none; }
.fv-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.fv-chip { cursor: pointer; transition: background-color 160ms cubic-bezier(0.33, 1, 0.68, 1), color 160ms cubic-bezier(0.33, 1, 0.68, 1), transform 120ms cubic-bezier(0.33, 1, 0.68, 1); }
button.fv-chip:hover { background: var(--fg-a10); color: var(--call-text, #e3e3e3); }
button.fv-chip:active { transform: scale(0.96); }
button.fv-chip:focus-visible { outline: 2px solid var(--call-accent, #FF6B1F); outline-offset: 2px; }

/* The presenter's switch: an orange track while everyone follows. */
.fv-switch {
  position: relative;
  flex: none;
  width: 24px;
  height: 14px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--fg-a16, rgba(127, 127, 127, 0.35));
  transition: background-color 180ms cubic-bezier(0.33, 1, 0.68, 1);
}
.fv-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--call-surface, #fff);
  box-shadow: 0 1px 2px var(--shadow-a30, rgba(0, 0, 0, 0.3));
  transition: transform 220ms cubic-bezier(0.34, 1.36, 0.64, 1);
}
.fv-lead.is-on { color: var(--call-text, #e3e3e3); }
.fv-lead.is-on .fv-switch { background: var(--call-accent, #FF6B1F); }
.fv-lead.is-on .fv-switch::after { transform: translateX(10px); }

/* A viewer roaming: the way back is the accent colour, so it reads as an action. */
.fv-back { background: var(--accent-a15, rgba(255, 107, 31, 0.15)); color: var(--call-accent-text, #ff8a4c); }
.fv-back:hover { background: var(--accent-a25, rgba(255, 107, 31, 0.25)); color: var(--call-accent-text, #ff8a4c); }

/* Narrow: icon + switch for the presenter; the viewer's text stays (it is the point). */
@media (max-width: 480px) {
  .fv-lead .fv-text { display: none; }
  .fv-chip { padding: 0 8px; }
}

@keyframes fv-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fv-chip, .fv-switch, .fv-switch::after { animation: none; transition: none; }
}

/* ===== /call-pro.css ===== */
/* =============================================================================
 * call-pro.css — the Call Pro upgrade panel (call-pro.js, bead onfiremobile-8i541).
 * A dialog: centred card on wide screens, bottom sheet on phones (< 600px). Colours
 * come from the theme tokens (theme.css, :root) with literal fallbacks, so the light
 * and dark themes both cover it. Motion: short ease-out, none with reduced motion.
 * ========================================================================== */

.cpro-overlay {
  --cpro-accent: var(--call-accent, #FF6B1F);
  --cpro-accent-hover: var(--call-accent-hover, #ff7f3d);
  --cpro-accent-ink: var(--on-fill, #ffffff);
  --cpro-accent-soft: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  --cpro-accent-text: var(--call-accent-text, #ffb38a);
  --cpro-bg: var(--call-panel, #1e1f20);
  --cpro-border: var(--call-panel-border, #2e3134);
  --cpro-card: var(--call-card, #282a2c);
  --cpro-card-hover: var(--call-card-hover, #333538);
  --cpro-text: var(--call-text, #e3e3e3);
  --cpro-muted: var(--call-text-muted, #a8abaf);
  --cpro-focus: var(--call-focus, #ff7f3d);
  --cpro-scrim: var(--scrim-a55, rgba(0, 0, 0, 0.55));
  --cpro-shadow: var(--shadow-elevated, 0 8px 40px rgba(0, 0, 0, 0.45));
  --cpro-ok: var(--success-text, #81c995);
  --cpro-danger: var(--danger-text, #f28b82);
  --cpro-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cpro-ease-out: cubic-bezier(0.33, 1, 0.68, 1);      /* easeOutCubic */
  --cpro-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* a light overshoot */
  --cpro-inset: var(--surface-inset, rgba(0, 0, 0, 0.25));
  --cpro-seg-on: var(--seg-selected, #3c4043);
  --cpro-strong: var(--text-strong, #ffffff);
  --cpro-save-text: var(--success-text, #81c995);
  --cpro-save-bg: var(--success-text-a16, rgba(129, 201, 149, 0.16));
  --cpro-on-accent-soft: var(--on-fill-a18, rgba(255, 255, 255, 0.18));

  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: inherit;
}

.cpro-overlay[hidden] {
  display: none;
}

.cpro-scrim {
  position: absolute;
  inset: 0;
  background: var(--cpro-scrim);
  opacity: 0;
  transition: opacity 200ms var(--cpro-ease);
}

.cpro-dialog {
  position: relative;
  width: min(480px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  background: var(--cpro-bg);
  color: var(--cpro-text);
  border: 1px solid var(--cpro-border);
  border-radius: 20px;
  box-shadow: var(--cpro-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 200ms var(--cpro-ease), transform 220ms var(--cpro-ease);
}

.cpro-dialog[data-view="checkout"] {
  width: min(560px, 100%);
}

.cpro-overlay.is-open .cpro-scrim {
  opacity: 1;
}

.cpro-overlay.is-open .cpro-dialog {
  opacity: 1;
  transform: none;
}

.cpro-dialog:focus {
  outline: none;
}

.cpro-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 8px 20px;
}

.cpro-badge {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--cpro-accent-text);
  background: var(--cpro-accent-soft);
}

.cpro-badge[hidden] {
  display: none;
}

.cpro-title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cpro-title:focus {
  outline: none;
}

.cpro-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cpro-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}

.cpro-icon-btn:hover {
  background: var(--cpro-card);
  color: var(--cpro-text);
}

.cpro-icon-btn[hidden] {
  display: none;
}

.cpro-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cpro-head,
.cpro-foot {
  flex-shrink: 0;
}

.cpro-lead {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cpro-muted);
}

.cpro-center {
  text-align: center;
}

.cpro-feats {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.cpro-feats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.cpro-tick {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--cpro-accent-text);
  background: var(--cpro-accent-soft);
}

.cpro-intro {
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--cpro-accent-text);
  background: var(--cpro-accent-soft);
}

/* ---- shared with business-buy.js ----------------------------------------- */
.cpro-legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cpro-muted);
}

.cpro-term-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.cpro-was {
  font-size: 15px;
  color: var(--cpro-muted);
  text-decoration-thickness: 1.5px;
}

.cpro-summary {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}

.cpro-legal {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cpro-muted);
}

.cpro-legal p {
  margin: 0 0 4px;
}

.cpro-link {
  color: var(--cpro-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cpro-link:focus-visible,
.cpro-btn:focus-visible,
.cpro-icon-btn:focus-visible {
  outline: 2px solid var(--cpro-focus);
  outline-offset: 2px;
}

/* ---- buttons: pill-shaped ------------------------------------------------ */
.cpro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cpro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, transform 120ms var(--cpro-ease), opacity 150ms ease;
}

.cpro-btn:active {
  transform: scale(0.97);
}

.cpro-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.cpro-btn-block {
  flex: 1 1 100%;
}

.cpro-btn-primary {
  background: var(--cpro-accent);
  color: var(--cpro-accent-ink);
}

.cpro-btn-primary:hover:not(:disabled) {
  background: var(--cpro-accent-hover);
}

.cpro-btn-secondary {
  background: var(--cpro-card);
  border-color: var(--cpro-border);
  color: var(--cpro-text);
}

.cpro-btn-secondary:hover {
  background: var(--cpro-card-hover);
}

.cpro-btn-ghost {
  background: transparent;
  color: var(--cpro-muted);
}

.cpro-btn-ghost:hover {
  color: var(--cpro-text);
  background: var(--cpro-card);
}

/* ---- checkout ------------------------------------------------------------ */
.cpro-embed {
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
}

.cpro-embed[hidden] {
  display: none;
}

.cpro-wait {
  margin: 0;
  padding: 120px 0;
  text-align: center;
  font-size: 14px;
  color: var(--cpro-muted);
}

.cpro-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cpro-muted);
}

.cpro-fallback {
  display: grid;
  gap: 10px;
}

.cpro-error {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cpro-danger);
}

/* ---- confirming / done ----------------------------------------------------- */
.cpro-spinner {
  width: 32px;
  height: 32px;
  margin: 24px auto 12px;
  border-radius: 50%;
  border: 3px solid var(--cpro-accent-soft);
  border-top-color: var(--cpro-accent);
  animation: cpro-spin 800ms linear infinite;
}

@keyframes cpro-spin {
  to { transform: rotate(360deg); }
}

.cpro-done {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-bottom: 8px;
}

.cpro-done-tick {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  border-radius: 50%;
  color: var(--cpro-ok);
  background: var(--cpro-accent-soft);
}

.cpro-skeleton {
  display: grid;
  gap: 10px;
  padding: 8px 0 16px;
}

.cpro-skel-row {
  height: 44px;
  border-radius: 12px;
  background: var(--cpro-card);
  animation: cpro-pulse 1.2s ease-in-out infinite;
}

.cpro-skel-row:first-child {
  height: 16px;
  width: 70%;
}

@keyframes cpro-pulse {
  50% { opacity: 0.55; }
}

.cpro-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- More menu item -------------------------------------------------------- */
.cpro-menu-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--call-accent-text, #ffb38a);
}

.cpro-menu-item.hidden,
.cpro-menu-sep.hidden {
  display: none;
}

/* ---- plan comparison (view "plans"): Free - Pro - Business ----------------- */
.cpro-dialog[data-view="plans"] .cpro-title {
  font-size: 20px;
}

.cpro-cmp-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  margin-bottom: 4px;
}

.cpro-cmp-top .cpro-lead {
  flex: 1 1 260px;
}

/* "Prices go up on 1 November" + the landing page's price comparison (#ch-pricing) */
.cpro-rise {
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--cpro-accent-soft);
  background: var(--cpro-card);
  animation: cpro-rise-in 0.42s var(--cpro-ease-out) both;
}

.cpro-rise-head { margin-bottom: 12px; }

.cpro-rise-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cpro-accent-text);
}

.cpro-rise-lead {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cpro-muted);
}

.cpro-vs-k {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cpro-text);
}

.cpro-vs-rows { display: grid; gap: 6px; }

.cpro-vs-row {
  display: grid;
  grid-template-columns: 118px 1fr 56px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--cpro-muted);
}

.cpro-vs-row i {
  display: block;
  height: 8px;
  width: calc(var(--w, 1) * 100%);
  border-radius: 999px;
  background: var(--cpro-muted);
  opacity: 0.45;
  transform-origin: left;
  animation: cpro-vs-grow 0.9s var(--cpro-ease-out) 0.15s both;
}

.cpro-vs-row b { text-align: right; font-weight: 600; color: var(--cpro-text); }
.cpro-vs-row.is-us { color: var(--cpro-text); font-weight: 700; }
.cpro-vs-row.is-us i { opacity: 1; background: var(--cpro-accent); }
.cpro-vs-row.is-us b { color: var(--cpro-accent-text); font-size: 14px; }

.cpro-vs-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--cpro-muted);
}

@keyframes cpro-rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cpro-vs-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 560px) {
  .cpro-rise { padding: 12px; }
  .cpro-vs-row { grid-template-columns: 96px 1fr 50px; gap: 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cpro-rise, .cpro-vs-row i { animation: none; }
}

/* phones: Free | Pro | Business switcher (hidden on wide screens) */
.cpro-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 999px;
  background: var(--cpro-inset);
}

.cpro-switch-btn {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cpro-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms var(--cpro-ease-out), color 200ms var(--cpro-ease-out), box-shadow 200ms var(--cpro-ease-out);
}

.cpro-switch-btn[aria-pressed="true"] {
  background: var(--cpro-seg-on);
  color: var(--cpro-text);
  box-shadow: 0 1px 4px var(--shadow-a20, rgba(0, 0, 0, 0.2));
}

.cpro-switch-btn:focus-visible,
.cpro-seg-btn:focus-visible {
  outline: 2px solid var(--cpro-focus);
  outline-offset: 2px;
}

.cpro-plans {
  display: grid;
  gap: 12px;
}

.cpro-plan {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--cpro-border);
  border-radius: 18px;
  background: var(--cpro-card);
  animation: cpro-rise 320ms var(--cpro-ease-out) both;
}

.cpro-plan.is-hot {
  border: 2px solid var(--cpro-accent);
  padding: 17px;
  background:
    linear-gradient(180deg, var(--cpro-accent-soft), transparent 180px),
    var(--cpro-card);
  box-shadow: 0 10px 32px var(--glow-accent-a25, rgba(255, 107, 31, 0.25));
}

.cpro-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
}

.cpro-plan-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cpro-plan-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--cpro-accent-ink);
  background: var(--cpro-accent);
}

.cpro-plan-badge.is-quiet {
  color: var(--cpro-text);
  background: var(--cpro-inset);
  border: 1px solid var(--cpro-border);
}

.cpro-plan-for {
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cpro-muted);
}

.cpro-plan-slot:empty {
  display: none;
}

/* Pro term: a pill-shaped segmented radiogroup */
.cpro-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--cpro-inset);
}

.cpro-seg-btn {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 46px;
  padding: 4px 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cpro-muted);
  font: inherit;
  cursor: pointer;
  transition: background 220ms var(--cpro-ease-out), color 220ms var(--cpro-ease-out), transform 160ms var(--cpro-ease-out);
}

.cpro-seg-btn:hover:not(.is-on) {
  color: var(--cpro-text);
}

.cpro-seg-btn:active {
  transform: scale(0.96);
}

.cpro-seg-btn.is-on {
  background: var(--cpro-accent);
  color: var(--cpro-accent-ink);
  box-shadow: 0 2px 10px var(--glow-accent-a25, rgba(255, 107, 31, 0.25));
}

.cpro-seg-name {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
}

.cpro-seg-short {
  display: none;
}

/* a narrow Pro column: "12 mo" instead of "12 months" (on the slot: a contained card
   could not be a subgrid) */
.cpro-plan-pro .cpro-plan-slot {
  container-type: inline-size;
}

@container (max-width: 300px) {
  .cpro-seg-long {
    display: none;
  }

  .cpro-seg-short {
    display: inline;
  }
}

.cpro-plan-cta .cpro-btn {
  width: 100%;
}

.cpro-save {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--cpro-save-text);
  background: var(--cpro-save-bg);
}

.cpro-seg-btn.is-on .cpro-save {
  color: var(--cpro-accent-ink);
  background: var(--cpro-on-accent-soft);
}

.cpro-price-block {
  display: grid;
  align-content: start;
  gap: 4px;
}

.cpro-price {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cpro-amt {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--cpro-text);
}

.cpro-per {
  font-size: 14px;
  font-weight: 500;
  color: var(--cpro-muted);
}

.cpro-price-text {
  font-size: 16px;
  font-weight: 650;
  white-space: normal;
  line-height: 1.35;
}

.cpro-price-wrap.is-flip .cpro-price {
  animation: cpro-flip 280ms var(--cpro-ease-out);
}

.cpro-billed {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cpro-muted);
  font-variant-numeric: tabular-nums;
}

.cpro-first {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cpro-text);
  background: var(--cpro-inset);
  font-variant-numeric: tabular-nums;
}

.cpro-first b {
  font-size: 13px;
  color: var(--cpro-accent-text);
}

.cpro-first span[hidden] {
  display: none;
}

.cpro-btn-current {
  border-color: var(--cpro-border);
  color: var(--cpro-muted);
  background: transparent;
  cursor: default;
}

.cpro-plan-feats {
  list-style: none;
  margin: 4px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--cpro-border);
  display: grid;
  align-content: start;
  gap: 7px;
}

.cpro-plan-feats li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
}

.cpro-plan-feats .cpro-tick {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.cpro-plan-feats .cpro-tick svg {
  width: 12px;
  height: 12px;
}

.cpro-plan-feats li.cpro-plus {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--cpro-muted);
}

.cpro-plan-feats li.is-focus,
.cpro-plan-feats li.is-limit {
  margin: -3px -8px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 650;
  color: var(--cpro-accent-text);
  background: var(--cpro-accent-soft);
}

.cpro-feat-text {
  flex: 1;
  min-width: 0;
}

.cpro-soon {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
  color: var(--cpro-muted);
  background: var(--cpro-inset);
}

.cpro-dialog[data-view="plans"] .cpro-legal {
  margin: 14px 0 0;
}

.cpro-more summary {
  cursor: pointer;
  width: fit-content;
  color: var(--cpro-text);
  font-weight: 600;
}

.cpro-more summary:focus-visible {
  outline: 2px solid var(--cpro-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.cpro-more p {
  margin: 6px 0 0;
}

/* sticky footer: summary line + the CTA of the plan on show */
.cpro-foot {
  display: grid;
  gap: 8px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--cpro-border);
  background: var(--cpro-bg);
}

.cpro-foot[hidden] {
  display: none;
}

.cpro-foot-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--cpro-muted);
  font-variant-numeric: tabular-nums;
}

.cpro-foot-cta {
  display: flex;
}

.cpro-compare {
  margin-top: 6px;
}

@keyframes cpro-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes cpro-flip {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* narrow: one plan at a time (the switcher picks it); the CTA lives in the sticky footer */
@media (max-width: 859px) {
  .cpro-plans[data-show="free"] .cpro-plan:not([data-plan="free"]),
  .cpro-plans[data-show="pro"] .cpro-plan:not([data-plan="pro"]),
  .cpro-plans[data-show="business"] .cpro-plan:not([data-plan="business"]) {
    display: none;
  }

  .cpro-plan .cpro-plan-cta {
    display: none;
  }

  .cpro-plan {
    animation-duration: 260ms;
  }
}

/* wide: three columns, Pro in the middle; rows line up across the cards (subgrid) */
@media (min-width: 860px) {
  .cpro-dialog[data-view="plans"],
  .cpro-dialog[data-view="loading"][data-wide="1"] {
    width: min(1060px, 100%);
    max-height: min(880px, calc(100dvh - 32px));
  }

  .cpro-dialog[data-view="plans"] .cpro-head {
    padding: 20px 16px 6px 24px;
  }

  .cpro-dialog[data-view="plans"] .cpro-body {
    padding: 4px 24px 20px;
  }

  .cpro-switch,
  .cpro-foot {
    display: none;
  }

  .cpro-plans {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 10px 16px;
    align-items: start;
  }

  .cpro-plan {
    grid-row: span 6;
    grid-template-rows: subgrid;
    gap: 10px;
  }

  .cpro-plan-slot:empty {
    display: block;
  }

  .cpro-plan:nth-child(2) {
    animation-delay: 40ms;
  }

  .cpro-plan:nth-child(3) {
    animation-delay: 80ms;
  }
}

/* short wide screens (1280x720 laptops): a little tighter */
@media (min-width: 860px) and (max-height: 760px) {
  .cpro-amt {
    font-size: 30px;
  }

  .cpro-plan-feats {
    gap: 5px;
  }

  .cpro-plan {
    padding: 14px 16px;
  }

  .cpro-plan.is-hot {
    padding: 13px 15px;
  }
}

/* ---- phones: bottom sheet ------------------------------------------------- */
@media (max-width: 599px) {
  .cpro-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .cpro-dialog,
  .cpro-dialog[data-view="checkout"] {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    transform: translateY(24px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .cpro-head {
    padding: 14px 8px 6px 16px;
  }

  .cpro-body {
    padding: 4px 16px 16px;
  }
}

@media (max-width: 599px) {
  .cpro-foot {
    padding: 10px 16px 12px;
  }

  .cpro-plan {
    padding: 16px;
  }

  .cpro-plan.is-hot {
    padding: 15px;
  }
}

@media (max-width: 359px) {
  .cpro-seg-name {
    font-size: 11.5px;
  }

  .cpro-amt {
    font-size: 30px;
  }
}

/* ---- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cpro-scrim,
  .cpro-dialog,
  .cpro-seg-btn,
  .cpro-switch-btn,
  .cpro-btn {
    transition: none;
  }

  .cpro-plan,
  .cpro-price-wrap.is-flip .cpro-price {
    animation: none;
  }

  .cpro-dialog {
    transform: none;
  }

  .cpro-spinner,
  .cpro-skel-row {
    animation: none;
  }
}

.cpro-overlay.cpro-still .cpro-scrim,
.cpro-overlay.cpro-still .cpro-dialog {
  transition: none;
}

.cpro-overlay.cpro-still .cpro-plan {
  animation: none;
}

/* ===== /business-buy.css ===== */
/* business-buy.css — the Business dialog's own bits (business-buy.js). Everything else is
   call-pro.css (.cpro-*), so Pro and Business look the same in light and dark. */
.cpro-dialog .hidden { display: none; }
.cpro-term-price { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--cpro-text); }
.biz-form { display: grid; gap: 10px; margin: 4px 0 14px; }
.biz-field { display: grid; gap: 4px; font-size: 13px; color: var(--cpro-muted); }
.biz-field input,
.biz-field select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cpro-border);
  border-radius: 12px;
  background: var(--cpro-card);
  color: var(--cpro-text);
  font: inherit;
  font-size: 15px;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.biz-field input:focus,
.biz-field select:focus { outline: none; border-color: var(--cpro-accent); box-shadow: 0 0 0 3px var(--cpro-accent-soft); }
.biz-ai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--cpro-border);
  border-radius: 14px;
  background: var(--cpro-card);
  cursor: pointer;
}
.biz-ai-text { display: grid; gap: 2px; font-size: 14px; color: var(--cpro-text); }
.biz-ai-text span { font-size: 13px; color: var(--cpro-muted); }
.biz-ai input { width: 20px; height: 20px; accent-color: var(--cpro-accent); flex-shrink: 0; }

/* ===== /ai-credits.css ===== */
/* =============================================================================
 * ai-credits.css — the AI credits top-up dialog, the "Your plan" row and the whiteboard
 * chip (ai-credits.js, bead onfiremobile-dff4c). Same dialog family as call-pro.css, own
 * aic- classes. Centred card on wide screens, bottom sheet on phones (< 600px) with the
 * CTA in a footer that never scrolls away. Colours: theme tokens (theme.css) with literal
 * fallbacks only inside var(). Motion: easeOutCubic / a soft spring; none when reduced.
 * ========================================================================== */

.aic-overlay,
.aic-chip,
.aic-plan-row {
  --aic-accent: var(--call-accent, #FF6B1F);
  --aic-accent-hover: var(--call-accent-hover, #ff7f3d);
  --aic-accent-ink: var(--on-fill, #ffffff);
  --aic-accent-soft: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  --aic-accent-faint: var(--accent-a08, rgba(255, 107, 31, 0.08));
  --aic-accent-line: var(--accent-a35, rgba(255, 107, 31, 0.35));
  --aic-accent-text: var(--call-accent-text, #ffb38a);
  --aic-bg: var(--call-panel, #1e1f20);
  --aic-border: var(--call-panel-border, #2e3134);
  --aic-card: var(--call-card, #282a2c);
  --aic-card-hover: var(--call-card-hover, #333538);
  --aic-text: var(--call-text, #e3e3e3);
  --aic-muted: var(--call-text-muted, #a8abaf);
  --aic-focus: var(--call-focus, #ff7f3d);
  --aic-scrim: var(--scrim-a55, rgba(0, 0, 0, 0.55));
  --aic-shadow: var(--shadow-elevated, 0 8px 40px rgba(0, 0, 0, 0.45));
  --aic-ok: var(--success-text, #81c995);
  --aic-ok-soft: var(--success-a18, rgba(34, 197, 94, 0.18));
  --aic-danger: var(--danger-text, #f28b82);
  --aic-ease: cubic-bezier(0.33, 1, 0.68, 1);          /* easeOutCubic */
  --aic-spring: cubic-bezier(0.34, 1.36, 0.64, 1);     /* a soft overshoot */
}

.aic-overlay {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: inherit;
}

.aic-overlay[hidden] {
  display: none;
}

.aic-scrim {
  position: absolute;
  inset: 0;
  background: var(--aic-scrim);
  opacity: 0;
  transition: opacity 220ms var(--aic-ease);
}

.aic-dialog {
  position: relative;
  width: min(500px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  background: var(--aic-bg);
  color: var(--aic-text);
  border: 1px solid var(--aic-border);
  border-radius: 24px;
  box-shadow: var(--aic-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 200ms var(--aic-ease), transform 340ms var(--aic-spring);
}

.aic-dialog[data-view="checkout"] {
  width: min(560px, 100%);
}

.aic-overlay.is-open .aic-scrim {
  opacity: 1;
}

.aic-overlay.is-open .aic-dialog {
  opacity: 1;
  transform: none;
}

.aic-dialog:focus,
.aic-title:focus {
  outline: none;
}

/* ---- head ------------------------------------------------------------------ */
.aic-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 6px 20px;
}

.aic-badge {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--aic-accent-text);
  background: var(--aic-accent-soft);
}

.aic-badge[hidden] {
  display: none;
}

.aic-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.aic-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--aic-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms var(--aic-ease), color 160ms var(--aic-ease), transform 160ms var(--aic-ease);
}

.aic-icon-btn:hover {
  background: var(--aic-card);
  color: var(--aic-text);
}

.aic-icon-btn:active {
  transform: scale(0.92);
}

.aic-icon-btn[hidden] {
  display: none;
}

/* ---- body + sticky footer ---------------------------------------------------- */
.aic-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.aic-foot {
  flex: none;
  display: grid;
  gap: 8px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--aic-border);
  background: var(--aic-bg);
}

.aic-foot[hidden] {
  display: none;
}

.aic-small {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--aic-muted);
}

.aic-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--aic-muted);
}

.aic-center {
  text-align: center;
}

/* ---- balance hero ------------------------------------------------------------ */
.aic-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 12px;
  padding: 16px 18px;
  border: 1px solid var(--aic-accent-line);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--aic-accent-soft), transparent 60%),
    var(--aic-card);
}

.aic-coin {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--aic-accent-ink);
  background: linear-gradient(145deg, var(--aic-accent-hover), var(--aic-accent));
  box-shadow: 0 6px 16px -6px var(--aic-accent-line);
}

.aic-coin svg {
  width: 24px;
  height: 24px;
}

.aic-hero-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.aic-hero-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aic-muted);
}

.aic-hero-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.aic-hero-num {
  font-size: 34px;
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.aic-hero-unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--aic-muted);
}

/* ---- packs (native radios: arrow keys move between packs) --------------------- */
.aic-packs {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.aic-legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--aic-muted);
}

.aic-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 8px;   /* room for the "Most popular" badge */
}

.aic-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 18px 10px 14px;
  border: 1.5px solid var(--aic-border);
  border-radius: 18px;
  background: var(--aic-card);
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms var(--aic-ease), background 180ms var(--aic-ease), transform 220ms var(--aic-spring), box-shadow 180ms var(--aic-ease);
}

.aic-pack:hover {
  background: var(--aic-card-hover);
}

.aic-pack:active {
  transform: scale(0.97);
}

.aic-pack.is-on {
  border-color: var(--aic-accent);
  background: linear-gradient(180deg, var(--aic-accent-soft), var(--aic-accent-faint));
  box-shadow: 0 8px 22px -12px var(--aic-accent-line);
}

.aic-pack input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.aic-pack:has(input:focus-visible) {
  outline: 2px solid var(--aic-focus);
  outline-offset: 2px;
}

.aic-pack-top {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.aic-pack-amount {
  display: grid;
  justify-items: center;
  line-height: 1.05;
}

.aic-pack-total {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.aic-pack-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--aic-muted);
}

.aic-bonus {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--aic-ok);
  background: var(--aic-ok-soft);
}

.aic-pack-price {
  display: grid;
  justify-items: center;
  gap: 1px;
  margin-top: auto;
  padding-top: 10px;
  width: 100%;
  border-top: 1px solid var(--aic-border);
}

.aic-pack-cost {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.aic-pack-per {
  font-size: 11.5px;
  color: var(--aic-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.aic-popular {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--aic-accent-ink);
  background: var(--aic-accent);
  pointer-events: none;
}

/* ---- buttons: pill-shaped ------------------------------------------------------ */
.aic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.aic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--aic-ease), transform 200ms var(--aic-spring), opacity 160ms var(--aic-ease), box-shadow 160ms var(--aic-ease);
}

.aic-btn:active {
  transform: scale(0.97);
}

.aic-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.aic-btn-block {
  flex: 1 1 100%;
  width: 100%;
}

.aic-cta {
  min-height: 50px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px -12px var(--aic-accent-line);
}

.aic-btn-primary {
  background: var(--aic-accent);
  color: var(--aic-accent-ink);
}

.aic-btn-primary:hover:not(:disabled) {
  background: var(--aic-accent-hover);
}

.aic-btn-secondary {
  background: var(--aic-card);
  border-color: var(--aic-border);
  color: var(--aic-text);
}

.aic-btn-secondary:hover {
  background: var(--aic-card-hover);
}

.aic-btn-ghost {
  background: transparent;
  color: var(--aic-muted);
}

.aic-btn-ghost:hover {
  color: var(--aic-text);
  background: var(--aic-card);
}

.aic-link {
  color: var(--aic-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aic-btn:focus-visible,
.aic-icon-btn:focus-visible,
.aic-link:focus-visible,
.aic-chip:focus-visible,
.aic-plan-topup:focus-visible {
  outline: 2px solid var(--aic-focus);
  outline-offset: 2px;
}

/* ---- checkout ------------------------------------------------------------------ */
.aic-embed {
  min-height: 320px;
  border-radius: 14px;
  overflow: hidden;
}

.aic-embed[hidden] {
  display: none;
}

.aic-wait {
  margin: 0;
  padding: 120px 0;
  text-align: center;
  font-size: 14px;
  color: var(--aic-muted);
}

.aic-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--aic-muted);
}

.aic-fallback {
  display: grid;
  gap: 10px;
}

.aic-error {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--aic-danger);
}

/* ---- confirming / done ------------------------------------------------------------ */
.aic-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 0 8px;
}

.aic-spinner {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 3px solid var(--aic-accent-soft);
  border-top-color: var(--aic-accent);
  animation: aic-spin 900ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes aic-spin {
  to { transform: rotate(360deg); }
}

.aic-done {
  padding-bottom: 18px;
}

.aic-done-tick {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 50%;
  color: var(--aic-ok);
  background: var(--aic-ok-soft);
  animation: aic-pop 420ms var(--aic-spring);
}

.aic-done-title {
  margin: 0;
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.aic-done .aic-lead {
  margin: 0;
}

@keyframes aic-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

.aic-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 16px;
}

.aic-skel {
  border-radius: 18px;
  background: var(--aic-card);
  animation: aic-pulse 1.2s ease-in-out infinite;
}

.aic-skel-hero {
  grid-column: 1 / -1;
  height: 82px;
}

.aic-skel-pack {
  height: 150px;
}

@keyframes aic-pulse {
  50% { opacity: 0.55; }
}

.aic-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- "Your plan" row (my-plan.js card: #mc-plan, #acct-plan) ----------------------- */
.aic-plan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, var(--aic-border));
  font-size: 14px;
  animation: aic-fade 260ms var(--aic-ease);
}

.aic-plan-row.hidden,
.aic-plan-row[hidden] {
  display: none;
}

.aic-plan-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--aic-accent-text);
  background: var(--aic-accent-soft);
}

.aic-plan-icon svg {
  width: 15px;
  height: 15px;
}

.aic-plan-label {
  color: var(--text-secondary, var(--aic-muted));
}

.aic-plan-val {
  font-weight: 700;
  color: var(--text-primary, var(--aic-text));
  font-variant-numeric: tabular-nums;
}

.aic-plan-topup {
  margin-left: auto;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--aic-accent-text);
  background: var(--aic-accent-soft);
  cursor: pointer;
  transition: background 160ms var(--aic-ease), transform 200ms var(--aic-spring);
}

.aic-plan-topup:hover {
  background: var(--aic-accent-line);
}

.aic-plan-topup:active {
  transform: scale(0.95);
}

@keyframes aic-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- whiteboard chip (in the board's header row, stage-board.js) --------------------- */
.aic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--aic-border);
  border-radius: 999px;
  background: var(--aic-card);
  color: var(--aic-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms var(--aic-ease), border-color 160ms var(--aic-ease), transform 200ms var(--aic-spring);
  animation: aic-chip-in 320ms var(--aic-spring);
}

.aic-chip.hidden,
.aic-chip[hidden] {
  display: none;
}

.aic-chip:hover {
  background: var(--aic-card-hover);
  border-color: var(--aic-accent-line);
}

.aic-chip:active {
  transform: scale(0.95);
}

.aic-chip-icon {
  display: inline-grid;
  place-items: center;
  color: var(--aic-accent-text);
}

.aic-chip-icon svg {
  width: 15px;
  height: 15px;
}

.aic-chip-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.aic-chip-unit {
  color: var(--aic-muted);
  font-weight: 500;
}

.aic-chip-plus {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  border-radius: 50%;
  color: var(--aic-accent-ink);
  background: var(--aic-accent);
}

@keyframes aic-chip-in {
  from { opacity: 0; scale: 0.85; }
  to { opacity: 1; scale: 1; }
}

/* Narrow board bars: the number and the + only. */
@media (max-width: 599px) {
  .aic-chip-unit {
    display: none;
  }
}

/* ---- phones: bottom sheet, packs as compact rows -------------------------------------- */
@media (max-width: 599px) {
  .aic-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .aic-dialog,
  .aic-dialog[data-view="checkout"] {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    transform: translateY(48px);
  }

  .aic-dialog::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    translate: -50% 0;
    border-radius: 999px;
    background: var(--aic-border);
  }

  .aic-head {
    padding: 16px 8px 4px 16px;
  }

  .aic-body {
    padding: 4px 16px 12px;
  }

  .aic-foot {
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .aic-hero {
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  .aic-coin {
    width: 40px;
    height: 40px;
  }

  .aic-hero-num {
    font-size: 28px;
  }

  .aic-lead {
    margin-bottom: 12px;
    font-size: 13.5px;
  }

  .aic-pack-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 0;
  }

  .aic-pack {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    text-align: left;
  }

  .aic-pack-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .aic-pack-amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
  }

  .aic-pack-total {
    font-size: 22px;
  }

  .aic-pack-price {
    justify-items: end;
    width: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    text-align: right;
  }

  .aic-popular {
    top: 0;
    left: auto;
    right: 14px;
    translate: 0 -50%;
    font-size: 10.5px;
    padding: 2px 8px;
  }

  .aic-pack.is-popular {
    margin-top: 6px;
  }

  .aic-skeleton {
    grid-template-columns: 1fr;
  }

  .aic-skel-pack {
    height: 60px;
  }
}

/* ---- reduced motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aic-scrim,
  .aic-dialog,
  .aic-pack,
  .aic-btn,
  .aic-chip,
  .aic-plan-topup {
    transition: none;
  }

  .aic-dialog {
    transform: none;
  }

  .aic-spinner,
  .aic-skel,
  .aic-done-tick,
  .aic-chip,
  .aic-plan-row {
    animation: none;
  }
}

.aic-overlay.aic-still .aic-scrim,
.aic-overlay.aic-still .aic-dialog {
  transition: none;
}

/* ===== /plan-manage.css ===== */
/* plan-manage.css — the "Manage plan" / "Delete account" sheet (plan-manage.js, onfiremobile-spwdo).
   The dialog, buttons, term picker and fields are call-pro.css (.cpro-*) and business-buy.css
   (.biz-field), so all three billing dialogs look alike in light and dark. Only .pm-* lives here. */
.pm-dialog .hidden { display: none; }

.pm-card {
  display: grid;
  gap: 6px;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--cpro-border);
  border-radius: 16px;
  background: var(--cpro-card);
}
.pm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pm-plan-name {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  color: var(--cpro-text);
}
.pm-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cpro-muted);
}
.pm-line.is-warn { color: var(--cpro-danger); }
.pm-plan-warn { margin: 10px 0 0; font-weight: 600; }

.pm-note {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}
.pm-note.pm-ok { color: var(--cpro-ok); }

.pm-actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.pm-actions .cpro-btn { width: 100%; }

.pm-btn-danger {
  background: transparent;
  border-color: var(--danger-a32);
  color: var(--cpro-danger);
}
.pm-btn-danger:hover:not(:disabled) { background: var(--danger-a14); }

.pm-danger {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--cpro-border);
  display: grid;
  gap: 8px;
}
.pm-danger .cpro-note { margin: 0; }
.pm-danger .cpro-btn { justify-self: start; }
.pm-danger-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--cpro-danger);
}

.pm-danger-lead { font-weight: 600; }
.pm-erase {
  margin: 0 0 4px;
  padding-left: 20px;
  display: grid;
  gap: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cpro-text);
}
.pm-field { margin: 16px 0 10px; }

@media (max-width: 599px) {
  .pm-danger .cpro-btn { justify-self: stretch; }
}

/* ===== /affiliate.css ===== */
/* =============================================================================
 * affiliate.css — "Invite & earn" (affiliate.js, bead onfiremobile-u96cj).
 * The sheet is the call-pro.css dialog family (.cpro-*: centred card on wide screens,
 * bottom sheet under 600px, pill buttons); only .afl-* lives here. Colours are theme
 * tokens (theme.css) with literal fallbacks inside var() only, so light and dark both
 * cover it. Motion: easeOutCubic, none with reduced motion.
 * ========================================================================== */

.afl-entry {
  --afl-accent-text: var(--call-accent-text, #ffb38a);
  --afl-accent-soft: var(--call-accent-soft, rgba(255, 107, 31, 0.16));
  --afl-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

.afl-overlay {
  --afl-ease: cubic-bezier(0.33, 1, 0.68, 1);                                  /* easeOutCubic */
  --afl-warn: var(--warning-text, #fdd663);
  --afl-warn-bg: var(--warning-a14, rgba(251, 188, 4, 0.14));
  --afl-danger-bg: var(--danger-text-a12, rgba(242, 139, 130, 0.12));
}

/* ---- entry rows: #mc-earn (My calls) and #acct-earn (account panel) ------------------- */
.afl-host.hidden,
.afl-host[hidden] {
  display: none;
}

.mc-earn {
  margin-top: 12px;
  max-width: 520px;
}

.acct-earn {
  margin: 0 0 12px;
}

.afl-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--border-color, var(--call-panel-border, #2e3134));
  border-radius: 18px;
  background: var(--bg-card, var(--call-card, #282a2c));
  color: var(--text-primary, var(--call-text, #e3e3e3));
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: afl-fade 260ms var(--afl-ease);
  transition: background 150ms ease, transform 160ms var(--afl-ease);
}

.afl-entry:hover {
  background: var(--call-card-hover, #333538);
}

.afl-entry:active {
  transform: scale(0.985);
}

.afl-entry:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: 2px;
}

.afl-entry-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--afl-accent-text);
  background: var(--afl-accent-soft);
}

.afl-entry-words {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.afl-entry-title {
  font-size: 15px;
  font-weight: 650;
}

.afl-entry-sub {
  font-size: 13px;
  color: var(--text-secondary, var(--call-text-muted, #a8abaf));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.afl-entry-chev {
  display: inline-grid;
  color: var(--text-secondary, var(--call-text-muted, #a8abaf));
  flex-shrink: 0;
}

.afl-entry svg,
.afl-dialog .afl-ico svg {
  display: block;
}

/* ---- the sheet -------------------------------------------------------------------- */
.afl-dialog {
  width: min(520px, 100%);
}

.afl-dialog .hidden {
  display: none;
}

.afl-body {
  display: grid;
  gap: 20px;
}

.afl-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.afl-h {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cpro-muted);
}

.afl-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cpro-text);
}

.afl-hint,
.afl-empty {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cpro-muted);
}

.afl-msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cpro-danger);
}

.afl-msg:empty {
  display: none;
}

.afl-msg p {
  margin: 0;
}

.afl-msg.is-ok {
  color: var(--cpro-ok);
}

.afl-msg.is-muted {
  color: var(--cpro-muted);
}

.afl-btn .afl-ico {
  display: inline-grid;
  margin-right: 6px;
}

/* hero */
.afl-hero {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--cpro-border);
  background: linear-gradient(160deg, var(--cpro-accent-soft), var(--cpro-card) 70%);
  animation: afl-rise 280ms var(--cpro-ease-out);
}

.afl-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cpro-accent-text);
}

.afl-hero-title {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cpro-strong);
  text-wrap: balance;
}

.afl-hero-lead,
.afl-hero-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cpro-muted);
}

.afl-hero-note {
  font-size: 12.5px;
}

.afl-tiers {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.afl-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--cpro-inset);
  font-size: 14px;
  color: var(--cpro-muted);
}

.afl-tier.is-now {
  color: var(--cpro-text);
  background: var(--cpro-card);
  box-shadow: inset 0 0 0 1px var(--cpro-accent);
}

.afl-tier-label {
  flex: 1 1 auto;
  min-width: 0;
}

.afl-tier-now {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cpro-accent-ink);
  background: var(--cpro-accent);
}

.afl-tier-pct {
  min-width: 44px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.afl-tier.is-now .afl-tier-pct {
  color: var(--cpro-accent-text);
}

/* share link */
.afl-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.afl-link {
  flex: 1 1 220px;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--cpro-border);
  background: var(--cpro-inset);
  color: var(--cpro-text);
  font: inherit;
  font-size: 14px;
  text-overflow: ellipsis;
}

.afl-link:focus-visible,
.afl-field:focus-visible {
  outline: 2px solid var(--cpro-focus);
  outline-offset: 1px;
}

.afl-link-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.afl-btn.is-done,
.afl-btn.cpro-btn-primary.is-done {
  background: var(--cpro-save-bg);
  color: var(--cpro-save-text);
}

/* email invites */
.afl-invite-form {
  display: grid;
  gap: 6px;
}

.afl-field {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--cpro-border);
  background: var(--cpro-inset);
  color: var(--cpro-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

.afl-field::placeholder {
  color: var(--cpro-muted);
}

.afl-field:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.afl-invite-form .afl-label:not(:first-child) {
  margin-top: 6px;
}

.afl-invite-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.afl-count {
  font-size: 12px;
  color: var(--cpro-muted);
  font-variant-numeric: tabular-nums;
}

.afl-count[hidden],
.afl-btn[hidden] {
  display: none;
}

/* stats */
.afl-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.afl-stat {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--cpro-card);
  border: 1px solid var(--cpro-border);
}

.afl-stat-n {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cpro-strong);
}

.afl-stat-l {
  font-size: 13px;
  color: var(--cpro-muted);
}

/* earnings */
.afl-money {
  display: grid;
  padding: 4px 14px;
  border-radius: 14px;
  background: var(--cpro-card);
  border: 1px solid var(--cpro-border);
}

.afl-money-cur {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cpro-muted);
}

.afl-money-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
}

.afl-money .afl-money-row + .afl-money-row {
  border-top: 1px solid var(--cpro-border);
}

.afl-money-words {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.afl-money-label {
  font-size: 14px;
  color: var(--cpro-text);
}

.afl-money-hint {
  font-size: 12px;
  color: var(--cpro-muted);
}

.afl-money-val {
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--cpro-strong);
  white-space: nowrap;
}

.afl-money-row.is-available .afl-money-val {
  color: var(--cpro-ok);
}

.afl-money-row.is-reversed .afl-money-val {
  color: var(--cpro-danger);
}

.afl-money-row.is-zero .afl-money-val {
  color: var(--cpro-muted);
}

.afl-eur {
  padding: 0 14px;
}

/* payouts */
.afl-payout-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--cpro-card);
  border: 1px solid var(--cpro-border);
}

.afl-payout-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cpro-text);
}

.afl-payout-card.is-error .afl-payout-text,
.afl-payout-card.is-rejected .afl-payout-head {
  color: var(--cpro-danger);
}

.afl-payout-card:not(.is-loading) {
  animation: afl-rise 240ms var(--afl-ease);
}

.afl-payout-head {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--cpro-strong);
}

.afl-payout-card:focus,
.afl-payout-head:focus,
.afl-ready:focus {
  outline: none;
}

.afl-payout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.afl-payout-card .afl-hint {
  margin: -4px 0 0;
}

/* "Stripe didn't finish. Pick up where you left off." after a return that did not complete. */
.afl-notice {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--afl-warn-bg);
  font-size: 13px;
  line-height: 1.45;
  color: var(--cpro-text);
}

/* A secondary pill on the card needs a fill of its own, or its edge is all that shows. */
.afl-payout-card .cpro-btn-secondary {
  background: var(--cpro-bg);
}

.afl-payout-card .cpro-btn-secondary:hover {
  background: var(--cpro-card-hover);
}

/* The walk: Connect Stripe -> Stripe verifies you -> Ready to be paid */
.afl-steps {
  display: flex;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.afl-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 0 2px;
  text-align: center;
}

.afl-step + .afl-step::before {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(-50% + 18px);
  right: calc(50% + 18px);
  height: 2px;
  border-radius: 1px;
  background: var(--cpro-border);
  transition: background 260ms var(--afl-ease);
}

.afl-step.is-done + .afl-step::before {
  background: var(--cpro-accent);
}

.afl-payout-card.is-ready .afl-step.is-done + .afl-step::before {
  background: var(--cpro-ok);
}

.afl-step-dot {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--cpro-border);
  background: var(--cpro-card);
  color: var(--cpro-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: background 260ms var(--afl-ease), border-color 260ms var(--afl-ease), color 260ms var(--afl-ease);
}

.afl-step.is-now .afl-step-dot {
  border-color: var(--cpro-accent);
  background: var(--cpro-accent-soft);
  color: var(--cpro-accent-text);
}

.afl-step.is-done .afl-step-dot {
  border-color: var(--cpro-accent);
  background: var(--cpro-accent);
  color: var(--cpro-accent-ink);
}

.afl-payout-card.is-ready .afl-step.is-done .afl-step-dot {
  border-color: var(--cpro-ok);
  background: var(--cpro-save-bg);
  color: var(--cpro-ok);
}

.afl-step.is-problem .afl-step-dot {
  border-color: var(--cpro-danger);
  background: var(--afl-danger-bg);
  color: var(--cpro-danger);
}

.afl-step-tick {
  display: inline-grid;
}

.afl-step-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--cpro-muted);
  overflow-wrap: anywhere;
}

.afl-step.is-now .afl-step-label,
.afl-step.is-done .afl-step-label {
  color: var(--cpro-text);
  font-weight: 600;
}

.afl-step.is-problem .afl-step-label {
  color: var(--cpro-danger);
  font-weight: 600;
}

/* What Stripe still needs */
.afl-due {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cpro-inset);
}

.afl-due .afl-hint {
  margin: 0;
}

.afl-due-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.afl-due-list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cpro-text);
}

.afl-due-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cpro-accent);
}

/* "Checking your Stripe setup…" */
.afl-checking {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--cpro-text);
}

.afl-spinner {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--cpro-border);
  border-top-color: var(--cpro-accent);
  animation: afl-spin 900ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes afl-spin {
  to { transform: rotate(360deg); }
}

/* Next payout + history (my_affiliate_payouts) */
.afl-payout-sum {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.afl-payout-sum:empty {
  display: none;
}

.afl-next {
  display: grid;
  gap: 10px;
  padding: 6px 14px 14px;
  border-radius: 14px;
  background: var(--cpro-card);
  border: 1px solid var(--cpro-border);
}

.afl-next-grid {
  display: grid;
  margin: 0;
}

.afl-next-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
}

.afl-next-row + .afl-next-row {
  border-top: 1px solid var(--cpro-border);
}

.afl-next-label {
  margin: 0;
  font-size: 14px;
  color: var(--cpro-text);
}

.afl-next-val {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--cpro-strong);
}

.afl-next-row.is-zero .afl-next-val {
  font-size: 14px;
  font-weight: 500;
  color: var(--cpro-muted);
}

.afl-hold {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--afl-warn-bg);
  font-size: 13px;
  line-height: 1.45;
  color: var(--cpro-text);
}

.afl-hold-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--afl-warn);
}

.afl-next .afl-hint {
  margin: 0;
}

.afl-sub-h {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--cpro-text);
}

.afl-pay-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 14px;
  background: var(--cpro-card);
  border: 1px solid var(--cpro-border);
  overflow: hidden;
}

.afl-pay-row {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}

.afl-pay-row + .afl-pay-row {
  border-top: 1px solid var(--cpro-border);
}

.afl-pay-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.afl-pay-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--cpro-text);
}

.afl-pay-amt {
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--cpro-strong);
}

.afl-pay-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--cpro-muted);
  white-space: nowrap;
}

.afl-pay-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.afl-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}

.afl-chip.is-ok {
  color: var(--cpro-save-text);
  background: var(--cpro-save-bg);
}

.afl-chip.is-info {
  color: var(--cpro-accent-text);
  background: var(--cpro-accent-soft);
}

.afl-chip.is-hold {
  color: var(--afl-warn);
  background: var(--afl-warn-bg);
}

.afl-chip.is-bad {
  color: var(--cpro-danger);
  background: var(--afl-danger-bg);
}

.afl-chip.is-muted {
  color: var(--cpro-muted);
  background: var(--cpro-inset);
}

.afl-pay-detail {
  font-size: 13px;
  line-height: 1.45;
  color: var(--cpro-muted);
}

.afl-terms {
  color: var(--cpro-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
}

.afl-terms:hover {
  color: var(--cpro-accent-hover);
}

.afl-terms:focus-visible {
  outline: 2px solid var(--cpro-focus);
  outline-offset: 2px;
}

.afl-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin: 0;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cpro-save-text);
  background: var(--cpro-save-bg);
}

.afl-ready-tick {
  display: inline-grid;
}

.afl-skel {
  height: 64px;
}

/* call-pro.css makes a first-child skeleton row a thin text line; these two stand in for a card. */
.afl-payout-card .afl-skel:first-child {
  width: 100%;
  height: 64px;
}

.afl-payout-sum .afl-skel:first-child {
  width: 100%;
  height: 96px;
}

/* people */
.afl-people {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.afl-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cpro-border);
  animation: afl-fade 220ms var(--cpro-ease-out);
}

.afl-person:last-child {
  border-bottom: 0;
}

.afl-person-who,
.afl-person-side {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.afl-person-side {
  justify-items: end;
  flex-shrink: 0;
  max-width: 50%;
}

.afl-person-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cpro-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.afl-person-meta,
.afl-person-earned {
  font-size: 12px;
  color: var(--cpro-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.afl-person.is-void .afl-person-name,
.afl-person.is-deleted .afl-person-name {
  color: var(--cpro-muted);
}

.afl-plan {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: var(--cpro-muted);
  background: var(--cpro-inset);
}

.afl-plan.is-pro,
.afl-plan.is-business {
  color: var(--cpro-accent-text);
  background: var(--cpro-accent-soft);
}

.afl-person.is-void .afl-plan,
.afl-person.is-deleted .afl-plan {
  color: var(--cpro-muted);
  background: var(--cpro-inset);
}

.afl-more {
  justify-self: center;
}

.afl-small {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--cpro-muted);
}

@keyframes afl-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes afl-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 599px) {
  .afl-hero-title {
    font-size: 19px;
  }

  .afl-link-actions {
    flex: 1 1 100%;
  }

  .afl-link-actions .afl-btn {
    flex: 1 1 0;
  }

  .afl-payout-actions .afl-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .afl-entry,
  .afl-hero,
  .afl-person,
  .afl-payout-card,
  .afl-step::before,
  .afl-step-dot {
    animation: none;
    transition: none;
  }

  .afl-spinner {
    animation: none;
  }
}

.cpro-overlay.cpro-still .afl-hero,
.cpro-overlay.cpro-still .afl-person,
.cpro-overlay.cpro-still .afl-payout-card,
.cpro-overlay.cpro-still .afl-spinner {
  animation: none;
}

/* ===== /call-ended.css ===== */
/* ============================================
   call-ended.css — end-of-call rating, "Host your own meeting?", plans and
   "Invite & earn" on #screen-ended (call-ended.js, bead onfiremobile-2bzmp.12).
   Colours are theme.css / style.css tokens only (tests/theme-tokens.test.js).
   Buttons are style.css .btn pills; motion is easeOutCubic and off under
   prefers-reduced-motion.
   ============================================ */

/* With the extra sections the screen scrolls (body is overflow:hidden). */
#screen-ended.ce-on {
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#screen-ended.ce-on .ended-container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: max(32px, env(safe-area-inset-top)) 16px max(48px, env(safe-area-inset-bottom));
  gap: 16px;
}

#screen-ended.ce-on .ended-icon { margin-bottom: 0; }
#screen-ended.ce-on .ended-actions { flex-wrap: wrap; justify-content: center; }

.ce-section {
  width: 100%;
  text-align: left;
}

.ce-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 20px;
}

.ce-title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: var(--text-strong);
  outline: none;
}

.ce-sub {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.ce-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.ce-cta { padding: 12px 20px; font-size: 15px; }

.ce-link {
  background: none;
  border: none;
  padding: 6px 2px;
  font: inherit;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ce-link:hover { color: var(--text-strong); }

.ce-error {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--error-text);
}

.ce-section :focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}

/* ---- 1. Rating (first and largest) ---- */

.ce-rate {
  text-align: center;
  padding: 24px 20px 16px;
  border-color: var(--accent-a25);
  box-shadow: 0 12px 32px -18px var(--shadow-a40);
}
.ce-rate .ce-title { font-size: 20px; }

.ce-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
}

.ce-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-a35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(0.33, 1, 0.68, 1), color 0.18s cubic-bezier(0.33, 1, 0.68, 1);
}
.ce-star svg path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: fill 0.18s cubic-bezier(0.33, 1, 0.68, 1);
}
.ce-star:hover:not(:disabled) { transform: scale(1.08); }
.ce-star.is-on { color: var(--gold-text); }
.ce-star.is-on svg path { fill: var(--fx-gold); }
.ce-star.is-preview svg path { fill: var(--gold-a50); }
.ce-star:disabled { cursor: default; }
.ce-star.is-pop { animation: ce-pop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ce-stars.is-done .ce-star { width: 40px; height: 40px; }
.ce-stars.is-done .ce-star svg { width: 26px; height: 26px; }

.ce-star-word {
  min-height: 20px;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.ce-detail {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  text-align: left;
}
.ce-rate.is-detail .ce-detail { animation: ce-rise 0.32s cubic-bezier(0.33, 1, 0.68, 1); }

.ce-detail-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.ce-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ce-chip {
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  background: var(--bg-input);
  color: var(--text-strong);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ce-chip[aria-pressed="true"] {
  background: var(--chip-selected-bg);
  color: var(--chip-selected-fg);
  border-color: var(--chip-selected-bg);
}

.ce-label {
  display: block;
  margin: 16px 0 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.ce-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 84px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-input);
  color: var(--text-strong);
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
}
.ce-textarea::placeholder { color: var(--text-placeholder); }

.ce-count {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  text-align: right;
  color: var(--text-tertiary);
}

.ce-detail .ce-row { justify-content: flex-end; margin-top: 8px; }
.ce-send { padding: 12px 28px; font-size: 15px; }
.ce-skip { margin-top: 6px; }

.ce-done {
  margin: 8px 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--success-text);
  outline: none;
}

/* ---- 3. Plans ---- */

.ce-plans { margin-top: 8px; }
.ce-plans-head { padding: 0 4px; }

.ce-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.ce-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--bg-card);
}
.ce-plan-pro { border-color: var(--accent-a45); }

.ce-plan-name { margin: 0; font-size: 16px; font-weight: 650; color: var(--text-strong); }
.ce-plan-tag { margin: 0; font-size: 13px; line-height: 1.35; color: var(--text-secondary); }

.ce-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin: 6px 0 0;
  color: var(--text-strong);
}
.ce-plan-price .ce-amt { font-size: 20px; font-weight: 700; }
.ce-plan-price .ce-per,
.ce-plan-price .ce-from { font-size: 12px; color: var(--text-secondary); }
.ce-plan-price .ce-was { font-size: 13px; color: var(--text-tertiary); }

.ce-plan-cta { margin-top: auto; padding: 10px 16px; font-size: 14px; }
.ce-plan .ce-plan-price + .ce-plan-cta,
.ce-plan .ce-plan-tag + .ce-plan-price[hidden] + .ce-plan-cta { margin-top: 12px; }

.ce-compare { display: inline-block; margin: 8px 4px 0; }

/* ---- 4. Invite & earn ---- */

.ce-earn-big {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--accent-bright);
}
.ce-earn .ce-cta { margin-top: 14px; }

/* ---- Phones: plans stack as compact rows ---- */

@media (max-width: 560px) {
  .ce-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .ce-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name cta" "tag cta" "price cta";
    column-gap: 12px;
    align-items: center;
  }
  .ce-plan-name { grid-area: name; }
  .ce-plan-tag { grid-area: tag; }
  .ce-plan-price { grid-area: price; margin-top: 2px; }
  .ce-plan-cta,
  .ce-plan .ce-plan-price + .ce-plan-cta { grid-area: cta; margin-top: 0; }
  .ce-star { width: 48px; height: 48px; }
}

/* ---- Entrance: calm, staggered ---- */

#screen-ended.ce-anim .ce-section {
  animation: ce-rise 0.42s cubic-bezier(0.33, 1, 0.68, 1) both;
}
#screen-ended.ce-anim .ce-rate { animation-delay: 0.05s; }
#screen-ended.ce-anim .ce-host { animation-delay: 0.12s; }
#screen-ended.ce-anim .ce-plans { animation-delay: 0.18s; }
#screen-ended.ce-anim .ce-earn { animation-delay: 0.24s; }

@keyframes ce-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes ce-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #screen-ended.ce-anim .ce-section,
  .ce-rate.is-detail .ce-detail,
  .ce-star.is-pop { animation: none; }
  .ce-star,
  .ce-star svg path { transition: none; }
  .ce-star:hover:not(:disabled) { transform: none; }
}

/* ===== /host-picker.css ===== */
/*
 * host-picker.css — participant picker (Leave and reassign host / Add co-host,
 * host-picker.js) and the host's "copy the meeting link" toast
 * (host-join-copy.js). Tokens only (theme.css); pill buttons.
 */

/* ---- Picker --------------------------------------------------------------- */
.hp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--scrim-a60);
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hp-overlay.hp-in {
  opacity: 1;
}

.hp-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  max-height: min(560px, calc(100dvh - 32px));
  padding: 20px 20px 16px;
  border-radius: 20px;
  background: var(--call-card);
  color: var(--call-text);
  box-shadow: 0 24px 64px var(--shadow-a50);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  transform: translateY(8px) scale(0.98);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hp-overlay.hp-in .hp-sheet {
  transform: none;
}

.hp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hp-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.hp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.hp-close:hover {
  background: var(--fg-a08);
  color: var(--call-text);
}

.hp-sub {
  margin: 4px 0 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dim);
}

.hp-list {
  list-style: none;
  margin: 0 -8px;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}

.hp-list[hidden],
.hp-empty[hidden],
.hp-error[hidden] {
  display: none;
}

.hp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

.hp-row:hover:not([disabled]) {
  background: var(--call-card-hover);
}

.hp-row:active:not([disabled]) {
  background: var(--fg-a12);
}

.hp-row[disabled] {
  cursor: default;
}

.hp-row[disabled]:not(.hp-busy) .hp-avatar,
.hp-row[disabled]:not(.hp-busy) .hp-name {
  opacity: 0.5;
}

.hp-row:focus-visible,
.hp-btn:focus-visible,
.hp-close:focus-visible {
  outline: 2px solid var(--call-accent);
  outline-offset: 2px;
}

.hp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--on-fill);
  font-size: 15px;
  font-weight: 600;
}

.hp-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.hp-name {
  max-width: 100%;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-tag {
  font-size: 12px;
  color: var(--text-dim);
}

.hp-tag-role {
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
}

.hp-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--fg-a20);
  border-top-color: var(--call-accent);
  border-radius: 50%;
  animation: hp-spin 800ms linear infinite;
}

@keyframes hp-spin {
  to { transform: rotate(360deg); }
}

.hp-empty {
  margin: 8px 0 4px;
  padding: 16px;
  border-radius: 14px;
  background: var(--fg-a06);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dim);
  text-align: center;
}

.hp-error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--call-danger);
}

.hp-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.hp-btn {
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.hp-btn:active:not([disabled]) {
  transform: scale(0.97);
}

.hp-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

.hp-btn-secondary {
  background: var(--fg-a08);
  color: var(--call-text);
}

.hp-btn-secondary:hover:not([disabled]) {
  background: var(--fg-a12);
}

.hp-btn-danger {
  background: var(--call-danger);
  color: var(--on-fill);
}

.hp-btn-danger:hover:not([disabled]) {
  background: var(--call-danger-hover);
}

/* Phones: a bottom sheet. */
@media (max-width: 599px) {
  .hp-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .hp-sheet {
    max-width: none;
    max-height: calc(100dvh - 48px);
    padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    transform: translateY(24px);
  }

  .hp-actions .hp-btn {
    flex: 1 1 0;
    min-height: 44px;
  }
}

/* ---- Meeting link toast with a Copy button (host-join-copy.js) ------------ */
.hjc-toast {
  position: fixed;
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  left: 50%;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 8px 10px 16px;
  border-radius: 16px;
  border-left: 3px solid var(--call-accent);
  background: var(--surface-toast);
  color: var(--call-text);
  box-shadow: 0 8px 24px var(--shadow-a45);
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  transform: translateX(-50%);
  animation: hjc-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes hjc-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.hjc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hjc-title {
  font-size: 14px;
}

.hjc-link {
  font-size: 12px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
  user-select: all;
}

.hjc-copy {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--call-accent);
  color: var(--on-fill);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.hjc-copy:hover:not([disabled]) {
  background: var(--call-accent-hover);
}

.hjc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.hjc-copy:focus-visible,
.hjc-close:focus-visible {
  outline: 2px solid var(--call-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hp-overlay,
  .hp-sheet,
  .hp-btn,
  .hjc-toast {
    animation: none !important;
    transition: none !important;
  }

  .hp-spinner {
    animation-duration: 2s;
  }
}

/* ===== /call-landscape.css ===== */
/* call-landscape.css — the call on a sideways phone (and any short, wide window), onfiremobile-xyb5r.8.
   Owner: "the horizontal call layout on mobile - needs to have meeting controls moved to the left
   and have the presented content in the middle of the screen for most of the available height".

   - The control bar leaves the bottom and becomes a column on the left (the SAME buttons, only
     styled, so mute / chat badges / ⋯ keep working). Lower-priority buttons fold into ⋯ as on phones.
   - The header shrinks to one short row; the bottom padding the bar needed goes to the content.
   - Presented content (Stage main area, stage-main-area.js) sits in the middle, the tiles in a slim
     strip on the right.
   - While something is presented (.stage-main-land), its first row is the top row of the screen:
     the call header loses the clock and meeting ID and floats at the top right; the panel keeps clear
     of it (--stage-main-reserve) and the tiles start under it (--call-head-h), both measured by
     stage-main-area.js. A whiteboard gets one header row (its dock slots), and Stop moves to the top
     of the control column.

   The media query is stage-main-area.js's LANDSCAPE_QUERY. Loaded after stage-main-area.css.
   Colours: call-screen tokens only. */

@media (orientation: landscape) and (max-height: 539.98px) {
  #screen-call {
    --call-rail-w: 56px;
    --call-rail-gap: 8px;
    --stage-main-strip-w: clamp(96px, 15vw, 150px);
  }

  #screen-call .call-main {
    padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      calc(var(--call-rail-w) + var(--call-rail-gap) * 2 + env(safe-area-inset-left));
  }
  #screen-call .call-header {
    min-height: 32px;
    padding: 0 4px 4px;
    font-size: 13px;
  }

  /* ---- the control column ---- */
  #screen-call .call-controls-wrap {
    left: calc(var(--call-rail-gap) + env(safe-area-inset-left));
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    max-width: none;
    max-height: calc(100% - 12px);
    align-items: flex-start;
  }
  #screen-call .call-controls {
    flex-direction: column;
    width: var(--call-rail-w);
    height: auto;
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
    padding: 6px 0;
    gap: 4px;
    border-radius: 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  #screen-call .call-controls::-webkit-scrollbar { display: none; }
  #screen-call .call-controls > .control-btn,
  #screen-call .call-controls > .dev-split > .control-btn-pill {
    width: 44px;
    height: 40px;
  }
  #screen-call .call-controls > .control-btn.muted { margin: 0; }
  #screen-call .call-controls > .dev-split {
    height: auto;
    background: transparent;
  }
  #screen-call .call-controls > .dev-split > .control-btn-pill:not(.muted) { background: var(--control-pill); }
  #screen-call .call-controls .dev-chevron { display: none; }
  /* The camera's settings (Backgrounds and effects, Cameras): a slim tab above the camera
     button, opening to the right like the column's other pop-ups. */
  #screen-call .call-controls > .dev-split[data-dev="cam"]:not(.dev-split-solo) {
    flex-direction: column;
    gap: 0;
    border-radius: 14px;
    background: var(--control-pill);
  }
  #screen-call .call-controls > .dev-split[data-dev="cam"]:not(.dev-split-solo) .dev-chevron {
    display: flex;
    width: 44px;
    height: 18px;
    padding: 0;
    border-radius: 14px 14px 0 0;
  }
  #screen-call .call-controls > .dev-split[data-dev="cam"]:not(.dev-split-solo) .dev-chevron svg { transform: rotate(90deg); }
  #screen-call .call-controls > .dev-split[data-dev="cam"]:not(.dev-split-solo) > .control-btn-pill:not(.muted) { background: var(--fg-a06); }
  #screen-call .call-controls > .control-btn-hangup { margin: 2px 0 0; }

  /* Fold the lower-priority buttons into ⋯ (the phones' rule, style.css). */
  #screen-call .call-controls .control-btn-collapsible { display: none; }
  #screen-call .more-menu .more-menu-collapsed { display: flex; }
  #screen-call .more-menu .more-menu-sep.more-menu-collapsed { display: block; }
  #screen-call .more-menu .more-menu-item.proxy-unavailable { display: none; }
  #screen-call .more-menu .more-menu-item.dev-switch-cam:not(.hidden) { display: flex; }

  /* Pop-ups of the column open to its right, bottom-aligned, scrolling when the screen is short. */
  #screen-call .call-controls-wrap .more-menu {
    left: calc(100% + 8px);
    right: auto;
    bottom: 0;
    transform-origin: bottom left;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  #screen-call .call-controls-wrap .dev-popover {
    left: calc(100% + 8px);
    bottom: 0;
    max-width: calc(100vw - var(--call-rail-w) - 40px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
  #screen-call .call-controls-wrap .reactions-bar {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    width: max-content;
    max-width: calc(100vw - var(--call-rail-w) - 40px);
  }

  /* ---- presented content in the middle, the tiles in a strip on the right ---- */
  #screen-call .call-layout.stage-main-on .call-stage {
    grid-template-columns: minmax(0, 1fr) var(--stage-main-strip-w);
    column-gap: 8px;
  }
  #screen-call .call-layout.stage-main-on .stage-main-slot { grid-column: 1; }
  #screen-call .call-layout.stage-main-on .participants-grid {
    grid-column: 2;
    padding: 2px;
    gap: 6px;
  }
  #screen-call .call-layout.stage-main-on .screen-share-container.active { grid-column: 2; margin-bottom: 6px; }
  #screen-call .call-layout.stage-main-on .participants-grid .avatar-placeholder {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  #screen-call .call-layout.stage-main-on .participants-grid .participant-name {
    bottom: 4px;
    left: 4px;
    padding: 2px 6px;
    font-size: 10px;
    max-width: calc(100% - 8px);
  }

  /* The panel in the middle: a short header, no sheet handle, every pixel to the content. */
  #screen-call .call-layout > .stage-panel.stage-main-panel {
    border-radius: 14px;
    transition: none;
  }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-grab { display: none; }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-head {
    padding: 6px 6px 6px 10px;
    touch-action: auto;
  }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-avatar { width: 26px; height: 26px; font-size: 11px; }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-host { padding: 0 10px 6px; }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-tabstrip { padding: 0 10px 6px; }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-body { margin: 0 6px 6px; }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-video { padding: 6px; gap: 6px; }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-video-bar { min-height: 30px; gap: 8px; }
  #screen-call .call-layout > .stage-panel.stage-main-panel .stage-video-status {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- presenting: one top row ---- */
  #screen-call .call-layout.stage-main-land .call-header {
    position: absolute;
    top: max(4px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    min-height: 40px;
    padding: 0;
    gap: 8px;
  }
  #screen-call .call-layout.stage-main-land .call-info { flex: none; min-width: 0; }
  #screen-call .call-layout.stage-main-land .call-clock,
  #screen-call .call-layout.stage-main-land .call-sep,
  #screen-call .call-layout.stage-main-land .call-code { display: none; }
  #screen-call .call-layout.stage-main-land .call-stage {
    grid-template-rows: var(--call-head-h, 46px) auto minmax(0, 1fr);
  }
  #screen-call .call-layout.stage-main-land .stage-main-slot { grid-row: 1 / -1; }
  #screen-call .call-layout.stage-main-land .screen-share-container.active { grid-row: 2; }
  #screen-call .call-layout.stage-main-land .participants-grid { grid-row: 3; }
  #screen-call .call-layout.stage-main-land > .stage-panel.stage-main-panel > .stage-head {
    min-height: 40px;
    padding-right: calc(6px + var(--stage-main-reserve, 0px));
  }

  /* Lent like the dock (stage-main-area.js): no host row; Stop tops the control column. */
  #screen-call .call-layout.stage-main-land > .stage-panel.stage-main-docked .stage-host { display: none; }
  #screen-call .call-layout.stage-main-land .call-controls .stage-dock-stop {
    display: flex;
    justify-content: center;
    padding-bottom: 2px;
  }
  #screen-call .call-layout.stage-main-land .stage-dock-stop .stage-btn-stop {
    width: 44px;
    height: 40px;
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    justify-content: center;
  }
  #screen-call .call-layout.stage-main-land .stage-dock-stop .stage-btn-stop > span { display: none; }

  /* One header row for a kind with dock slots (the whiteboard): no Stage head, no inner card. */
  #screen-call .call-layout.stage-main-land > .stage-panel.stage-main-compact > .stage-head,
  #screen-call .call-layout.stage-main-land > .stage-panel.stage-main-compact > .stage-main-swap { display: none; }
  #screen-call .call-layout.stage-main-land > .stage-panel.stage-main-compact > .stage-body {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #screen-call .call-layout.stage-main-land > .stage-panel.stage-main-compact .stage-kind-board .stage-board { padding: 4px 6px 6px; gap: 4px; }
  #screen-call .call-layout.stage-main-land > .stage-panel.stage-main-compact .stage-board-bar {
    min-height: 40px;
    padding-right: calc(4px + var(--stage-main-reserve, 0px));
  }
  #screen-call .call-layout.stage-main-land > .stage-panel.stage-main-compact .stage-board-scene { border-radius: 10px; }

  /* The call's pills on that row: icons only (names stay in aria-label / title), as on phones. */
  #screen-call .call-layout.stage-main-land .rec-pill { width: 32px; height: 32px; padding: 0; justify-content: center; }
  #screen-call .call-layout.stage-main-land .rec-pill-text,
  #screen-call .call-layout.stage-main-land .rec-badge-tr .rec-badge-text,
  #screen-call .call-layout.stage-main-land .acct-chip-label,
  #screen-call .call-layout.stage-main-land .oft-entry-hint,
  #screen-call .call-layout.stage-main-land .call-meta .stage-chip-text { display: none; }
  #screen-call .call-layout.stage-main-land .rec-gear { width: 32px; height: 32px; }
  #screen-call .call-layout.stage-main-land .acct-chip:not(.is-signed-in) { width: 32px; padding: 0; justify-content: center; }
  #screen-call .call-layout.stage-main-land .call-meta { gap: 6px; }
  /* The board row: tabs and "Sign in to draw" give way to the title first. */
  #screen-call .call-layout.stage-main-land .stage-dock-tabs .stage-tabitem { max-width: 128px; }
  #screen-call .call-layout.stage-main-land .stage-board-signin { height: 32px; padding: 0 12px; font-size: 13px; }
  #screen-call .call-layout.stage-main-land .stage-board-titlebox { min-width: 64px; }
}

/* ===== /share-sheet.css ===== */
/* share-sheet.css — pull anything shared up to full screen on phones (share-sheet.js,
   onfiremobile-b6wfq). Two snap points: default (as before) and full (#screen-call.share-full:
   the content covers the tile strip and the call header; the control bar stays on top).
   Portrait phones (<= 768 px) and sideways phones (the LANDSCAPE_QUERY of stage-main-area.js).
   Loaded after call-landscape.css. Colours: call-screen tokens only. */

.share-sheet-handle { display: none; }

.share-sheet-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.share-sheet-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding-top: env(safe-area-inset-top, 0px);
  visibility: hidden;
  pointer-events: none;
}

/* ---------- the handle: a real button (tap = toggle), the bar inside it ---------- */
#screen-call.share-sheet-on .share-sheet-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 88px;
  height: 22px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#screen-call.share-sheet-on .share-sheet-handle:active { cursor: grabbing; }
#screen-call.share-sheet-on .share-sheet-handle:focus-visible {
  outline: 2px solid var(--call-focus, #ff7f3d);
  outline-offset: -2px;
}
.share-sheet-bar {
  display: block;
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: var(--fg-a28);
  transition: width 220ms cubic-bezier(0.33, 1, 0.68, 1), background-color 220ms cubic-bezier(0.33, 1, 0.68, 1);
}
#screen-call.share-sheet-on .share-sheet-handle:hover .share-sheet-bar,
#screen-call.share-dragging .share-sheet-bar { width: 52px; background: var(--call-accent, #FF6B1F); }

/* The Stage panel: the handle replaces stage.js's decorative grab bar. */
#screen-call.share-sheet-on .stage-panel > .stage-grab { display: none; }
#screen-call.share-sheet-on .stage-panel > .share-sheet-handle { margin-top: 2px; }
#screen-call.share-sheet-on .stage-panel.share-dragging .stage-frame { pointer-events: none; }

/* A screen share: the handle floats over the top of the video, on a dark pill (video stays dark
   in both themes). */
#screen-call.share-sheet-on .screen-share-container > .share-sheet-handle {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 2;
  height: 24px;
  width: 72px;
  translate: -50% 0;
  background: var(--media-label);
}
#screen-call.share-sheet-on .screen-share-container > .share-sheet-handle .share-sheet-bar { background: var(--on-fill-a35); }

/* ---------- the snap: animate only while settling (share-sheet.js adds .share-anim) ---------- */
#screen-call.share-anim .call-layout > .stage-panel {
  transition: top 420ms cubic-bezier(0.32, 0.72, 0, 1), bottom 420ms cubic-bezier(0.32, 0.72, 0, 1),
    left 420ms cubic-bezier(0.32, 0.72, 0, 1), right 420ms cubic-bezier(0.32, 0.72, 0, 1),
    width 420ms cubic-bezier(0.32, 0.72, 0, 1), height 420ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
#screen-call .call-layout > .stage-panel.share-dragging,
#screen-call .screen-share-container.share-dragging { transition: none; }
#screen-call.share-anim .screen-share-container.active { transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1); }

/* ---------- full: portrait phones ---------- */
@media (max-width: 768px) {
  #screen-call.share-full[data-share-full="stage"] .call-layout > .stage-panel:not(.hidden) {
    top: max(8px, env(safe-area-inset-top, 0px));
    height: auto;
    z-index: 27;   /* over the header (10) and the tile strip; under the control bar (30) */
  }
}

/* ---------- full: sideways phones (the panel sits in the main area, the tiles on the right) ---- */
@media (orientation: landscape) and (max-height: 539.98px) {
  #screen-call.share-full[data-share-full="stage"] .call-layout > .stage-panel:not(.hidden) {
    position: absolute;
    left: calc(var(--call-rail-w, 56px) + var(--call-rail-gap, 8px) * 2 + env(safe-area-inset-left, 0px));
    top: max(4px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(6px, env(safe-area-inset-bottom, 0px));
    width: auto;
    height: auto;
    max-width: none;
    min-width: 0;
    z-index: 27;
    border: 1px solid var(--call-panel-border, #2e3134);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px var(--shadow-a50);
  }
  #screen-call.share-full[data-share-full="stage"] .call-layout.stage-main-land > .stage-panel.stage-main-panel > .stage-head { padding-right: 6px; }
}

/* ---------- full: a screen share — the tiles and the header step aside ---------- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 539.98px) {
  #screen-call.share-full[data-share-full="share"] .participants-grid.strip-mode,
  #screen-call.share-full[data-share-full="share"] .call-layout:not(.stage-main-on) .participants-grid { display: none; }
  #screen-call.share-full[data-share-full="share"] .call-header { display: none; }
  #screen-call.share-full[data-share-full="share"] .screen-share-container.active { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  #screen-call.share-anim .call-layout > .stage-panel,
  #screen-call.share-anim .screen-share-container.active,
  .share-sheet-bar { transition: none; }
}

/* ===== /share-menu.css ===== */
/* share-menu.css — the Share window (share-menu.js, onfiremobile-sk5tl.12): big option cards.
   Desktop: a centred dialog, two columns (max 560 px). Phones (<= 600 px): a bottom sheet, one
   column of wide rows. The Present / YouTube / Translate cards are the modules' own ⋮ nodes
   (.more-menu-item), restyled here. Colours: theme tokens only (theme.css / style.css). */

/* On <body> (share-menu.js): over Translate / Backgrounds / Cameras (900), under the sign-in modal
   (1000). #screen-call's font stack, since it is outside #screen-call. */
.shw {
  position: fixed;
  inset: 0;
  z-index: 950;
  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.shw-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-a55);
  opacity: 0;
  transition: opacity 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.shw.shw-in .shw-backdrop { opacity: 1; }

.shw-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 24px;
  background: var(--call-menu, #28292a);
  border: 1px solid var(--call-border, #3c4043);
  box-shadow: 0 24px 60px var(--shadow-a60);
  color: var(--call-text, #e3e3e3);
  outline: none;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)),
              transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.shw.shw-in .shw-dialog { opacity: 1; transform: none; }

.shw-grab { display: none; }

.shw-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -6px -8px 14px 4px;
}
.shw-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong);
}
.shw-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-icon);
  cursor: pointer;
  transition: background-color 150ms var(--call-ease, ease-out);
}
.shw-close:hover { background: var(--call-menu-hover); }
.shw-close:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

.shw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  margin: -4px;
  padding: 4px;            /* room for the focus ring inside the scroller */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- a card ---------- */
.shw-grid .shw-card {
  position: relative;
  width: auto;
  min-width: 0;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--call-panel-border, #2e3134);
  border-radius: 18px;
  background: var(--call-card, #282a2c);
  color: var(--call-text, #e3e3e3);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--call-ease, ease-out), border-color 160ms var(--call-ease, ease-out),
              box-shadow 200ms var(--call-ease, ease-out), transform 200ms var(--call-ease, ease-out);
}
.shw-grid .shw-card:hover {
  background: var(--call-card-hover, #333538);
  border-color: var(--call-border, #3c4043);
  box-shadow: 0 8px 20px var(--shadow-a20);
  transform: translateY(-1px);
}
.shw-grid .shw-card:active { transform: scale(0.985); }
.shw-grid .shw-card:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.shw-grid .shw-card.more-menu-disabled { opacity: 0.62; }
.shw-grid .shw-card.more-menu-disabled:hover { background: var(--call-card, #282a2c); box-shadow: none; transform: none; }

/* The icon sits in a tinted circle (the SVG box itself: no wrapper, the modules own the node). */
.shw-grid .shw-card > svg {
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: var(--call-accent-soft);
  color: var(--call-accent-text);
}

.shw-grid .shw-card .more-menu-text { gap: 4px; min-width: 0; }
.shw-grid .shw-card .more-menu-label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong);
}
.shw-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--call-text-muted, #a8abaf);
}
/* A module's own status line ("Sign in to present", "Close a tab first") replaces the description. */
.shw-grid .shw-card .more-menu-sub { margin-top: 0; font-size: 13px; color: var(--call-accent-text); }
.shw-grid .shw-card .more-menu-sub:not(.hidden) ~ .shw-desc { display: none; }

/* Sharing your screen: the card is the Stop. */
.shw-grid .shw-card.active {
  border-color: var(--accent-a45);
  background: var(--call-accent-soft);
}
.shw-grid .shw-card.active:hover { background: var(--call-accent-soft-hover); }
.shw-grid .shw-card.active > svg { background: var(--call-accent); color: var(--call-accent-ink); }

/* "On" (Translate is open). */
.shw-state {
  position: absolute;
  top: 14px;
  right: 14px;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--success-text-a16);
  color: var(--success-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
}

/* An odd card count: the last card takes the whole row, laid out sideways. */
.shw-grid .shw-card.shw-wide {
  grid-column: 1 / -1;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.shw-grid .shw-card.shw-wide .shw-state { position: static; margin-left: auto; flex: none; }

/* ---------- phones: a bottom sheet, one column of rows ---------- */
@media (max-width: 600px) {
  .shw { align-items: flex-end; padding: 0; }
  .shw-dialog {
    max-width: none;
    max-height: 88vh;
    max-height: 88dvh;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    border-bottom: none;
    transform: translateY(100%);
    transition: opacity 160ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)),
                transform 340ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .shw-grab {
    display: block;
    flex: none;
    width: 40px;
    height: 5px;
    margin: 0 auto 6px;
    border-radius: 999px;
    background: var(--fg-a28);
  }
  .shw-head { margin: 0 -8px 10px 4px; }
  .shw-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .shw-grid .shw-card,
  .shw-grid .shw-card.shw-wide {
    min-height: 72px;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
  }
  .shw-grid .shw-card .shw-state { position: static; margin-left: auto; flex: none; }
}

/* ---------- sideways phones: short, keep two columns of compact rows ---------- */
@media (orientation: landscape) and (max-height: 539.98px) {
  .shw { padding: 8px; }
  .shw-dialog { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 14px 16px 16px; }
  .shw-head { margin-bottom: 8px; }
  .shw-grid { gap: 8px; }
  .shw-grid .shw-card {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
  }
  .shw-grid .shw-card .shw-state { position: static; margin-left: auto; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shw-backdrop,
  .shw-dialog,
  .shw-grid .shw-card { transition: none; }
  .shw-dialog { transform: none; }
  .shw-grid .shw-card:hover,
  .shw-grid .shw-card:active { transform: none; }
}

/* ===== /share-mini.css ===== */
/* share-mini.css — "Share sound" in the Share window and the desktop app's mini layout
   (share-mini.js, onfiremobile-dzjnd.3). The mini view itself is pip.js's window UI (its own
   stylesheet, in a shadow root here). Colours: theme tokens only (theme.css / style.css). */

/* ---------- Share sound: a switch row under the Share window's cards ---------- */
.shm-sound {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--call-panel-border, #2e3134);
  border-radius: 16px;
  background: var(--call-card, #282a2c);
  color: var(--call-text, #e3e3e3);
  cursor: pointer;
  transition: background-color 160ms var(--call-ease, ease-out), border-color 160ms var(--call-ease, ease-out);
}
.shm-sound.hidden { display: none; }
.shm-sound:hover { background: var(--call-card-hover, #333538); border-color: var(--call-border, #3c4043); }

/* The real checkbox stays in the tab order (role=switch), drawn by .shm-switch. */
.shm-sound-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.shm-switch {
  position: relative;
  flex: none;
  order: 2;
  margin-left: auto;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--call-surface, #3c4043);
  box-shadow: inset 0 0 0 1px var(--call-border, #3c4043);
  transition: background-color 200ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.shm-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--call-text, #e3e3e3);
  box-shadow: 0 1px 3px var(--shadow-a35, rgba(0, 0, 0, 0.35));
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
.shm-sound-input:checked + .shm-switch { background: var(--call-accent, #FF6B1F); box-shadow: none; }
.shm-sound-input:checked + .shm-switch::after { transform: translateX(18px); background: var(--call-accent-ink, #1a1a1a); }
.shm-sound-input:focus-visible + .shm-switch { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }

.shm-sound-text {
  order: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shm-sound-label { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text-strong); }
.shm-sound-desc { font-size: 13px; line-height: 1.4; color: var(--call-text-muted, #a8abaf); }

@media (max-width: 600px) {
  .shm-sound { margin-top: 8px; }
}

/* ---------- desktop app: the page is the mini window (pip.js openInline) ---------- */
/* The host covers the page; nothing behind it may scroll or take focus by accident. */
html[data-share-mini],
html[data-share-mini] body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .shm-sound,
  .shm-switch,
  .shm-switch::after { transition: none; }
}

/* ===== /laser.css ===== */
/* laser.css — the laser pointer over a shared screen (laser.js, onfiremobile-sk5tl.6). Classes are
   prefixed `lz-`. The share container is a media island (theme.css): it stays dark in every theme,
   so the pill uses the --media-* chrome tokens; its "on" state is the call accent. */

/* The canvas covers the share; it takes the pointer only while the laser is on. Over the video
   and app.js' label, under share-sheet.js' handle (z-index 2) and the pill. */
.screen-share-container > .lz-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.screen-share-container.lz-on > .lz-canvas {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.screen-share-container > .lz-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--fg-a10);
  border-radius: 18px;
  background: var(--media-button, rgba(32, 33, 36, 0.85));
  color: var(--media-white, #ffffff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px var(--media-a45);
  transition: background-color 160ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)),
              color 160ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1)),
              transform 160ms var(--call-ease, cubic-bezier(0.2, 0, 0, 1));
}
.screen-share-container > .lz-toggle:hover { background: var(--media-button-hover, rgba(60, 64, 67, 0.95)); }
.screen-share-container > .lz-toggle:active { transform: scale(0.96); }
.screen-share-container > .lz-toggle:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
.screen-share-container > .lz-toggle svg { flex: none; }
.screen-share-container > .lz-toggle[aria-pressed="true"] {
  border-color: transparent;
  background: var(--call-accent, #FF6B1F);
  color: var(--call-accent-ink, #1a1a1a);
  box-shadow: 0 0 0 3px var(--accent-a25), 0 4px 14px var(--media-a45);
}
.screen-share-container > .lz-toggle[aria-pressed="true"]:hover { background: var(--call-accent-hover, #ff7f3d); }

/* A small share (the stage-main-area thumbnail / top strip, a phone): an icon-only circle. */
.screen-share-container.lz-small > .lz-toggle {
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.screen-share-container.lz-small > .lz-toggle .lz-toggle-label,
.screen-share-container > .lz-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .screen-share-container > .lz-toggle { transition: none; }
  .screen-share-container > .lz-toggle:active { transform: none; }
}

/* ===== /annotate-tools.css ===== */
/* annotate-tools.css — the ONE annotation bar (annotate-tools.js, onfiremobile-dzjnd.1): screen-share
   annotation (annotate.css places it over the share) and the whiteboard (share-web-board imports this
   file and places it over the canvas). Classes are prefixed `an-`. A dark glass bar in every theme: over
   a shared screen (a media island, theme.css) and over a board alike, so both look exactly the same.
   Every token has a fallback, because the whiteboard page has none of call-web's theme.css. */

.an-tools {
  --an-bg: var(--media-button, rgba(32, 33, 36, 0.92));
  --an-fg: var(--media-white, #ffffff);
  --an-hover: var(--media-button-hover, rgba(255, 255, 255, 0.12));
  --an-border: var(--fg-a10, rgba(255, 255, 255, 0.1));
  --an-sep: var(--fg-a20, rgba(255, 255, 255, 0.2));
  --an-shadow: var(--media-a45, rgba(0, 0, 0, 0.45));
  --an-ring: var(--media-a12, rgba(255, 255, 255, 0.12));
  --an-accent: var(--call-accent, #FF6B1F);
  --an-accent-ink: var(--call-accent-ink, #1a1a1a);
  --an-focus: var(--call-focus, #ff7f3d);
  --an-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color: var(--an-fg);
  font-family: "Google Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- The bar ---- */
.an-tools .an-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 5px;
  border: 1px solid var(--an-border);
  border-radius: 999px;
  background: var(--an-bg);
  color: var(--an-fg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px var(--an-shadow);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.an-tools .an-bar::-webkit-scrollbar { display: none; }
.an-tools .an-btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms var(--an-ease), color 140ms var(--an-ease), transform 120ms var(--an-ease);
}
.an-tools .an-btn svg { width: 20px; height: 20px; flex: none; }
.an-tools .an-btn:hover { background: var(--an-hover); }
.an-tools .an-btn:active { transform: scale(0.92); }
.an-tools .an-btn:focus-visible { outline: 2px solid var(--an-focus); outline-offset: 1px; }
.an-tools .an-btn[aria-pressed="true"] {
  background: var(--an-accent);
  color: var(--an-accent-ink);
}
.an-tools .an-btn[aria-expanded="true"] { background: var(--an-hover); }
/* Shapes: the last shape picked, with a small caret for "more". */
.an-tools .an-btn .an-caret {
  position: absolute;
  right: 4px;
  bottom: 5px;
  width: 8px;
  height: 8px;
  opacity: 0.8;
}
.an-tools .an-sep {
  flex: none;
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--an-sep);
}
.an-tools .an-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--an-color, #FF6B1F);
  box-shadow: 0 0 0 2px var(--an-fg), 0 0 0 3px var(--an-shadow);
}
/* The colour button shows the size too: a smaller / bigger dot. */
.an-tools .an-color[data-size="s"] .an-swatch { width: 14px; height: 14px; }
.an-tools .an-color[data-size="l"] .an-swatch { width: 24px; height: 24px; }

/* ---- Pop-ups (Shapes, Colour and size, Delete), under the bar ---- */
.an-tools { position: relative; }
.an-tools .an-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: max-content;
  max-width: min(320px, calc(100vw - 20px));
  padding: 8px;
  border: 1px solid var(--an-border);
  border-radius: 18px;
  background: var(--an-bg);
  color: var(--an-fg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px var(--an-shadow);
  transform: translateX(-50%);
  box-sizing: border-box;
  animation: an-pop-in 160ms var(--an-ease);
}
.an-tools .an-pop.hidden { display: none; }
.an-tools .an-pop[data-kind="delete"] { flex-direction: column; flex-wrap: nowrap; }
.an-tools .an-pop[data-kind="color"] { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.an-tools .an-pop-row { display: flex; flex-wrap: wrap; gap: 6px; }
.an-tools .an-sizes { justify-content: center; padding-top: 6px; border-top: 1px solid var(--an-sep); }
.an-tools .an-swatch-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--an-color);
  box-shadow: inset 0 0 0 1px var(--an-ring);
  cursor: pointer;
  transition: transform 120ms var(--an-ease);
}
.an-tools .an-swatch-btn:active { transform: scale(0.9); }
.an-tools .an-swatch-btn[aria-checked="true"] { box-shadow: 0 0 0 2px var(--an-bg), 0 0 0 4px var(--an-fg); }
.an-tools .an-swatch-btn:focus-visible { outline: 2px solid var(--an-focus); outline-offset: 3px; }
.an-tools .an-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 140ms var(--an-ease), transform 120ms var(--an-ease);
}
.an-tools .an-size-btn:hover { background: var(--an-hover); }
.an-tools .an-size-btn:active { transform: scale(0.92); }
.an-tools .an-size-btn[aria-checked="true"] { background: var(--an-accent); color: var(--an-accent-ink); }
.an-tools .an-size-btn:focus-visible { outline: 2px solid var(--an-focus); outline-offset: 1px; }
.an-tools .an-size-dot { display: block; border-radius: 50%; background: currentColor; }
.an-tools .an-size-btn[data-size="s"] .an-size-dot { width: 5px; height: 5px; }
.an-tools .an-size-btn[data-size="m"] .an-size-dot { width: 9px; height: 9px; }
.an-tools .an-size-btn[data-size="l"] .an-size-dot { width: 15px; height: 15px; }
.an-tools .an-menu-item {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.an-tools .an-menu-item:hover:not(:disabled) { background: var(--an-hover); }
.an-tools .an-menu-item:disabled { opacity: 0.45; cursor: default; }
.an-tools .an-menu-item:focus-visible { outline: 2px solid var(--an-focus); outline-offset: 1px; }

/* ---- Compact (a small share, a phone board): two rows, every button in sight, pop-ups above ---- */
.an-tools.an-compact .an-bar {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  width: max-content;
  padding: 3px;
  border-radius: 22px;
  overflow: visible;
}
.an-tools.an-compact .an-sep { display: none; }
.an-tools.an-compact .an-btn { width: 38px; height: 38px; }
.an-tools.an-compact.an-pop-up .an-pop { top: auto; bottom: calc(100% + 8px); }

@keyframes an-pop-in {
  from { opacity: 0; transform: translate(-50%, -4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .an-tools .an-btn,
  .an-tools .an-swatch-btn,
  .an-tools .an-size-btn { transition: none; }
  .an-tools .an-pop { animation: none; }
}

/* ===== /annotate.css ===== */
/* annotate.css — annotation tools over a shared screen (annotate.js, onfiremobile-5k7np; the bar itself is
   annotate-tools.css, shared with the whiteboard, onfiremobile-dzjnd.1). Classes are prefixed `an-`. The
   share container is a media island (theme.css): it stays dark in every theme, so the chrome uses the
   --media-* tokens; a pressed tool is the call accent. */

/* laser.js' own pill gives way: Laser is the first tool in the bar. */
.screen-share-container.an-ready > .lz-toggle {
  display: none;
}

/* The drawings: over the video, under laser.js' canvas (same z-index, earlier in the DOM). Takes the
   pointer only while a drawing tool is picked. */
.screen-share-container > .an-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.screen-share-container.an-drawing > .an-canvas {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---- The "Annotate" pill (top right, where the Laser pill was) ---- */
.screen-share-container > .an-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--fg-a10);
  border-radius: 18px;
  background: var(--media-button, rgba(32, 33, 36, 0.85));
  color: var(--media-white, #ffffff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px var(--media-a45);
  transition: background-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.screen-share-container > .an-toggle svg { width: 18px; height: 18px; flex: none; }
.screen-share-container > .an-toggle:hover { background: var(--media-button-hover, rgba(60, 64, 67, 0.95)); }
.screen-share-container > .an-toggle:active { transform: scale(0.96); }
.screen-share-container > .an-toggle:focus-visible { outline: 2px solid var(--call-focus, #ff7f3d); outline-offset: 2px; }
/* While the bar is open its ✕ closes it: the pill steps aside. */
.screen-share-container.an-open > .an-toggle { display: none; }
.screen-share-container.an-small > .an-toggle {
  top: 8px;
  right: 8px;
  width: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.screen-share-container.an-small > .an-toggle .an-toggle-label,
.screen-share-container > .an-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- The bar (annotate-tools.css draws it; here it is placed over the share: top centre) ---- */
.screen-share-container > .an-tools {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 4;
  display: none;
  max-width: calc(100% - 20px);
  transform: translateX(-50%);
}
.screen-share-container.an-open > .an-tools {
  display: block;
  animation: an-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The pointer over the drawings says what a press does. */
.screen-share-container.an-drawing[data-an-tool="select"] > .an-canvas { cursor: default; }
.screen-share-container.an-drawing[data-an-tool="text"] > .an-canvas { cursor: text; }
.screen-share-container.an-drawing[data-an-tool="eraser"] > .an-canvas { cursor: none; }

/* ---- Typing a text annotation, at the tapped point ---- */
.screen-share-container > .an-text-input {
  position: absolute;
  z-index: 3;
  min-width: 160px;
  max-width: 60%;
  padding: 2px 6px;
  border: 1px dashed var(--media-white, #ffffff);
  border-radius: 6px;
  background: var(--media-a45);
  font-family: "Google Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  outline: none;
  transform: translate(-6px, -3px);
}
.screen-share-container > .an-text-input::placeholder { color: var(--media-white, #ffffff); opacity: 0.6; }

/* ---- A small share (phone, thumbnail, top strip): the bar along the bottom, two rows ---- */
.screen-share-container.an-small > .an-tools {
  top: auto;
  bottom: 8px;
  max-width: calc(100% - 16px);
}

@keyframes an-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .screen-share-container > .an-toggle { transition: none; }
  .screen-share-container.an-open > .an-tools { animation: none; }
}

/* ===== /open-app.css ===== */
/*
 * open-app.css — the join screen's "Open in the OnFire app" prompt (open-app.js,
 * onfiremobile-2bzmp.14). data-app on #mobile-app-prompt:
 *   installed  the big button under an "or" divider (style.css .btn-app, unchanged)
 *   unknown    a small text link under Join: Join with a name stays the obvious action
 *   absent     a quiet "Get the OnFire app" link
 */
.mobile-app-prompt[data-app="unknown"],
.mobile-app-prompt[data-app="absent"] {
  margin-top: 12px;
  text-align: center;
}
.mobile-app-prompt[data-app="unknown"] .divider,
.mobile-app-prompt[data-app="unknown"] .app-hint,
.mobile-app-prompt[data-app="absent"] .divider,
.mobile-app-prompt[data-app="absent"] .app-hint {
  display: none;
}
.mobile-app-prompt[data-app="unknown"] .btn-app,
.mobile-app-prompt[data-app="absent"] .btn-app {
  width: auto;
  min-height: 44px;            /* still a comfortable tap target */
  padding: 8px 14px;
  gap: 6px;
  background: none;
  box-shadow: none;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
}
.mobile-app-prompt[data-app="unknown"] .btn-app img,
.mobile-app-prompt[data-app="absent"] .btn-app img {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}
.mobile-app-prompt[data-app="unknown"] .btn-app:hover,
.mobile-app-prompt[data-app="absent"] .btn-app:hover,
.mobile-app-prompt[data-app="unknown"] .btn-app:focus-visible,
.mobile-app-prompt[data-app="absent"] .btn-app:focus-visible {
  background: none;
  color: var(--pre-accent-text);
  text-decoration: underline;
}

/* ===== /mac-app.css ===== */
/* mac-app.css — the Mac and Linux app links (mac-app.js, onfiremobile-jmc5k,
   onfiremobile-d4lh7, onfiremobile-k298v). Each group starts `hidden`; mac-app.js
   reveals it on any desktop, with the visitor's own system first. */
[data-desktop-apps][hidden] { display: none !important; }

/* Landing hero: the two apps side by side under the ticks, not a third CTA. */
.desktop-apps-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
}

.mac-app-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ch-text-2) 30%, transparent);
  color: var(--ch-text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.mac-app-hero:hover {
  color: var(--ch-accent);
  border-color: color-mix(in srgb, var(--ch-accent) 55%, transparent);
  background: color-mix(in srgb, var(--ch-accent) 8%, transparent);
}
.mac-app-hero:focus-visible {
  outline: 2px solid var(--ch-accent);
  outline-offset: 3px;
}
.mac-app-hero svg { flex: none; margin-top: -2px; }

/* Join screen: a small line under "Hosting this meeting?". */
.mac-app-join {
  text-align: center;
  font-size: 13px;
  margin-top: 10px;
}
.mac-app-join a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  text-decoration: none;
}
.mac-app-join a:hover { color: var(--text-primary); text-decoration: underline; }
.mac-app-join a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.mac-app-join svg { flex: none; margin-top: -2px; }

/* Linux: the .deb is the pill; "AppImage" (other distributions) is a small
   link beside it. */
.linux-app-hero {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.linux-app-alt {
  color: var(--ch-text-3);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linux-app-alt:hover { color: var(--ch-text); }
.linux-app-alt:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; border-radius: 4px; }
.mac-app-join .linux-app-sep { margin: 0 6px; color: var(--text-secondary); }

/* Join screen: Mac and Linux on one line when the card is wide enough. */
.desktop-apps-join {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
  margin-top: 10px;
}
.desktop-apps-join .mac-app-join { margin: 0; }

/* Footer: the group adds no box, its links are Product column items. */
.desktop-apps-footer { display: contents; }

@media (prefers-reduced-motion: reduce) {
  .mac-app-hero { transition: none; }
}

/* ===== /mobile-history.css ===== */
/*
 * mobile-history.css — phones in a call (mobile-history.js, onfiremobile-2bzmp.15 / .16).
 *   .mh-off  a remote screen share folded away by browser Back (the tiles show; Forward or the
 *            pill brings it back). The container keeps .active, so nothing else re-lays out.
 *   .mh-pill "<Name> is sharing a note · Tap to view" while shared content is closed.
 */
#screen-call .screen-share-container.active.mh-off { display: none; }

.mh-pill {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  z-index: 60;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  min-height: 44px;
  padding: 10px 16px 10px 14px;
  border: 1px solid var(--accent-a45);
  border-radius: 9999px;
  background: linear-gradient(to right, var(--pre-accent), var(--pre-grad-red));
  color: var(--on-fill);
  box-shadow: 0 10px 24px -6px var(--accent-a55), 0 2px 8px var(--shadow-a30);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: mh-pill-in 360ms cubic-bezier(0.2, 0, 0, 1) both, mh-pill-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) 400ms infinite;
  transition: transform 140ms cubic-bezier(0.2, 0, 0, 1);
}
.mh-pill.hidden { display: none; }
.mh-pill:active { transform: translateX(-50%) scale(0.97); }
.mh-pill:focus-visible { outline: 2px solid var(--on-fill); outline-offset: 3px; }

.mh-pill-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on-fill);
  box-shadow: 0 0 0 3px var(--on-fill-a30);
}
.mh-pill-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mh-pill-tap {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--on-fill-a18);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* While the whiteboard owns the screen or a content view is full screen, nothing to point at. */
#screen-call.wb-stage .mh-pill { display: none; }

@keyframes mh-pill-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%); }
}
@keyframes mh-pill-pulse {
  0%, 100% { box-shadow: 0 10px 24px -6px var(--accent-a55), 0 2px 8px var(--shadow-a30), 0 0 0 0 var(--accent-a45); }
  50% { box-shadow: 0 10px 24px -6px var(--accent-a55), 0 2px 8px var(--shadow-a30), 0 0 0 10px var(--accent-a08); }
}

@media (prefers-reduced-motion: reduce) {
  .mh-pill { animation: none; transition: none; }
}

/* ===== /side-dock.css ===== */
/* side-dock.css — the right-hand side panels as one sidebar on a wide desktop window: pill tabs
   or stacked (side-dock.js, onfiremobile-kv3r8). side-dock.js sets .sd-on / .sd-tabs / .sd-stack
   on .call-layout only while WIDE_QUERY matches; the query is repeated here so a stale class can
   never reach a phone or a narrow window. Panels never move in the DOM: .call-layout becomes a
   grid (call | column) and the panels are placed in column 2. #screen-call in the selectors
   outranks every panel's own rules (chat / polls / notes / Stage sidebar, the 769-1399 px
   "float over the note" rule in stage.css) without !important. Colours: theme tokens only. */

.sd-slot { display: none; }
.sd-bar.hidden { display: none !important; }

@media (min-width: 1024px) and (min-height: 540px) {
  #screen-call .call-layout.sd-on {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sd-w, 380px);
    grid-template-rows: auto minmax(0, 1fr);
  }
  #screen-call .call-layout.sd-on.sd-stack {
    grid-template-rows: var(--sd-rows, minmax(0, 1fr));
  }

  /* Everything that is not docked stays in the call column (absolute / fixed children are out of
     the flow anyway: banners, the main-area Stage, the poll creator). */
  #screen-call .call-layout.sd-on > * {
    grid-column: 1;
    grid-row: 1 / -1;
    min-width: 0;
  }

  /* A docked panel: column 2, its own width / float rules switched off. */
  #screen-call .call-layout.sd-on > .sd-docked {
    grid-column: 2;
    grid-row: auto;
    position: relative;
    inset: auto;
    z-index: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    box-shadow: none;
    border-left: 1px solid var(--call-panel-border);
    transition: none;
  }
  #screen-call .call-layout.sd-on.sd-tabs > .sd-docked { grid-row: 2; }
  #screen-call .call-layout.sd-on.sd-stack > .sd-docked ~ .sd-docked { border-top: 1px solid var(--call-panel-border); }
  /* A background tab: still open (an editor iframe never reloads), not shown. */
  #screen-call .call-layout.sd-on > .sd-docked.sd-back { display: none !important; }
  /* My notes pins its children to 380 px for its open / close animation. */
  #screen-call .call-layout.sd-on > .acct-panel.sd-docked > * { min-width: 0; max-width: none; }
  /* Translate: the empty cell it is placed over. */
  #screen-call .call-layout.sd-on > .sd-slot.sd-docked { display: block; }

  /* The pill bar on top of the column. */
  #screen-call .call-layout.sd-on > .sd-bar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: max(10px, env(safe-area-inset-top)) 10px 8px;
    background: var(--call-panel);
    border-left: 1px solid var(--call-panel-border);
    border-bottom: 1px solid var(--call-panel-border);
  }
  /* Right below the pills: no second top padding on the panel's own header. */
  #screen-call .call-layout.sd-on.sd-tabs:has(> .sd-bar:not(.hidden)) > .stage-panel.sd-docked .stage-head { padding-top: 12px; }
}

/* Translate sheet over its cell (fixed on <body>; side-dock.js measures the cell). */
@media (min-width: 1024px) and (min-height: 540px) {
  #tr-sheet.tr-sheet.sd-placed {
    left: var(--sd-x, auto);
    top: var(--sd-y, 0);
    right: auto;
    bottom: auto;
    width: var(--sd-tw, 400px) !important;   /* translate.js writes an inline width */
    height: var(--sd-h, 100%);
    max-width: none;
    z-index: 27;      /* like a panel in the column: under the control bar's popovers (30) */
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  #tr-sheet.tr-sheet.sd-placed.sd-back { display: none !important; }
}

/* ---- pills ---- */
/* .sd-tablist, never .sd-tabs: that one is the layout's mode class (.call-layout.sd-tabs). */
.sd-tablist {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sd-tablist::-webkit-scrollbar { display: none; }

.sd-tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--call-border);
  background: transparent;
  transition: background-color 160ms cubic-bezier(0.33, 1, 0.68, 1), border-color 160ms cubic-bezier(0.33, 1, 0.68, 1);
}
.sd-tab:hover { background: var(--call-surface-hover); }
.sd-tab.is-front {
  background: var(--call-accent-soft);
  border-color: transparent;
}

.sd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--call-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.sd-pill svg { flex: 0 0 auto; }
.sd-tab.is-front .sd-pill { color: var(--call-accent-text); }
.sd-pill:active { transform: scale(0.97); }
.sd-pill:focus-visible,
.sd-x:focus-visible {
  outline: 2px solid var(--call-focus);
  outline-offset: 2px;
}
.sd-pill-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* Something new in a background tab (a chat message, a presentation that started while typing). */
.sd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--call-accent);
  animation: sd-dot-in 260ms cubic-bezier(0.33, 1, 0.68, 1);
}

.sd-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--call-text-muted);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease-out, background-color 120ms ease-out;
}
.sd-x:hover { opacity: 1; background: var(--fg-a08); }
.sd-tab.is-front .sd-x { color: var(--call-accent-text); }

@keyframes sd-dot-in {
  from { transform: scale(0); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-dot { animation: none; }
  .sd-tab { transition: none; }
}