/**
 * Brand typography and colour tokens — single source of truth for the app.
 * Values mirror ayraverse.com (landing/src/styles/globals.css) exactly,
 * including the light-theme overrides, so both apps share one design
 * language. Components reference these vars; never hard-code font names or
 * colours. See styles/app-tokens.css for frontend-only surface/structural
 * tokens (card backgrounds, neutral chrome borders, shadows) this file
 * doesn't cover, and styles/tokens.css for the separate --mobile-* set
 * backing the not-yet-shipped mobile redesign.
 *
 * Dark is the default (`:root`), matching the app's current single theme.
 * `[data-theme='light']` overrides it, driven by stores/themeStore.ts.
 */
:root,
[data-theme='dark'] {
  /* Font families */
  --font-display:    'Cinzel', serif;
  --font-display-jp: 'Noto Serif JP', serif;
  --font-body:       'Inter', sans-serif;
  --font-jp:         'Noto Sans JP', sans-serif;

  /* Fluid type scale */
  --text-hero:  clamp(3rem, 7vw, 6.5rem);
  --text-h2:    clamp(2rem, 4vw, 3.5rem);
  --text-h3:    clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body:  1rem;
  --text-small: 0.875rem;
  --text-jp:    clamp(0.875rem, 1.5vw, 1rem);

  /* Letter spacing */
  --tracking-display: 0.15em;
  --tracking-wide:    0.08em;

  /* Palette */
  --bg-void:        #070614;
  --bg-dark:        #0D0B1E;
  --bg-surface:     #13102A;
  --bg-glass:       rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.07);

  --pink:        #E879A0;
  --pink-soft:   #F4A7B9;
  --pink-glow:   rgba(232, 121, 160, 0.25);
  --gold:        #C9A84C;
  --gold-soft:   rgba(201, 168, 76, 0.15);
  --purple:      #9B6FD0;
  --purple-glow: rgba(155, 111, 208, 0.2);
  --red:         #CC3D5A;

  --text-primary:   #F0EEF8;
  --text-secondary: #9891B0;
  --text-accent:    #E879A0;

  --border-subtle: rgba(232, 121, 160, 0.12);
  --border-card:   rgba(155, 111, 208, 0.2);
  --border-glow:   rgba(232, 121, 160, 0.5);

  --gradient-hero: linear-gradient(135deg, #070614 0%, #1A0D2E 50%, #0D0B1E 100%);
  --gradient-pink: linear-gradient(135deg, #E879A0, #9B6FD0);
  --gradient-gold: linear-gradient(135deg, #C9A84C, #F0D080);
  --gradient-text: linear-gradient(135deg, #F4A7B9 0%, #C9A84C 50%, #9B6FD0 100%);
}

[data-theme='light'] {
  --bg-void:        #FDF6F8;
  --bg-dark:        #FFFFFF;
  --bg-surface:     #FDF1F4;
  --bg-glass:       rgba(212, 83, 126, 0.05);
  --bg-glass-hover: rgba(212, 83, 126, 0.09);

  --pink:        #D4537E;
  --pink-soft:   #E88BA3;
  --pink-glow:   rgba(212, 83, 126, 0.18);
  --gold:        #C98A2C;
  --gold-soft:   rgba(201, 138, 44, 0.15);
  --purple:      #8E7BC0;
  --purple-glow: rgba(142, 123, 192, 0.16);
  --red:         #D43D5A;

  --text-primary:   #2B2330;
  --text-secondary: #766C82;
  --text-accent:    #D4537E;

  --border-subtle: rgba(212, 83, 126, 0.14);
  --border-card:   rgba(142, 123, 192, 0.22);
  --border-glow:   rgba(212, 83, 126, 0.4);

  --gradient-hero: linear-gradient(135deg, #FDF6F8 0%, #FBEAF0 50%, #FFFFFF 100%);
  --gradient-pink: linear-gradient(135deg, #D4537E, #8E7BC0);
  --gradient-gold: linear-gradient(135deg, #C98A2C, #F2D98A);
  --gradient-text: linear-gradient(135deg, #D4537E 0%, #C98A2C 50%, #8E7BC0 100%);
}
/**
 * Design tokens for the AyraVerse mobile redesign (Home Hub, Bond, Live Session,
 * Memories, Explore, and the shared `components/mobile-ui` library).
 *
 * Distinct from fonts.css (the marketing-mirrored Cinzel/Inter theme used by the
 * existing dark-only screens) — new mobile-redesign components must reference
 * ONLY these --mobile-* vars, never hard-coded colors, so both themes stay in
 * sync automatically.
 *
 * Dark is the default (`:root`), matching the app's current single theme.
 * `[data-theme="light"]` overrides it. The active value is set on
 * `document.documentElement` by stores/themeStore.ts, which resolves
 * OS preference vs. a manual user override.
 */
:root,
[data-theme='dark'] {
  --mobile-font-heading: 'Comfortaa', sans-serif;
  --mobile-font-body: 'Inter', sans-serif;

  --mobile-radius-pill: 999px;
  --mobile-radius-card-sm: 18px;
  --mobile-radius-card: 22px;
  --mobile-radius-card-lg: 26px;
  --mobile-radius-input: 18px;

  --mobile-bg-base: #070614;
  --mobile-bg-frame: #0b0918;
  --mobile-bg-card: #12101f;
  --mobile-bg-card-alt: #1b1830;

  --mobile-border-subtle: rgba(255, 255, 255, 0.08);
  --mobile-border-default: rgba(255, 255, 255, 0.1);
  --mobile-border-strong: rgba(255, 255, 255, 0.18);
  --mobile-border-accent: rgba(237, 147, 177, 0.25);

  --mobile-overlay: rgba(18, 16, 31, 0.92);
  --mobile-btn-secondary-bg: transparent;
  /* "Chip" surface — quick-action pills, coin pill: translucent in dark,
     solid card in light (same asymmetry as --mobile-btn-secondary-bg). */
  --mobile-chip-bg: rgba(255, 255, 255, 0.06);
  --mobile-chip-border: rgba(255, 255, 255, 0.1);

  --mobile-primary: #ed93b1;
  --mobile-primary-strong: #f2a9c2;
  --mobile-primary-gradient: linear-gradient(135deg, #f2a9c2, #ed93b1);
  --mobile-primary-glow: rgba(237, 147, 177, 0.5);
  --mobile-primary-glow-transparent: rgba(237, 147, 177, 0);
  --mobile-on-primary: #1a1220;

  --mobile-secondary: #b9a8e8;
  --mobile-secondary-strong: #c9bcef;
  --mobile-secondary-gradient: linear-gradient(90deg, #c9bcef, #b9a8e8);

  --mobile-gold: #e0a93f;
  --mobile-gold-gradient: linear-gradient(135deg, #f2d98a, #e0a93f);

  --mobile-success: #6ee7a0;

  --mobile-text-primary: #f5f2f7;
  --mobile-text-secondary: #9994a8;
  --mobile-text-tertiary: #6d6879;

  --mobile-gauge-track: rgba(255, 255, 255, 0.08);
  /* Secondary (lavender) meter track — same neutral value as the primary
     track in dark, but a distinct tinted value in light (see override). */
  --mobile-track-secondary: rgba(255, 255, 255, 0.08);

  /* Diagonal-stripe placeholder used by hero/media cards before a real
     poster image or the live VRM canvas is available. */
  --mobile-media-stripe-a: rgba(237, 147, 177, 0.22);
  --mobile-media-stripe-b: rgba(185, 168, 232, 0.16);
  --mobile-media-label: #c79bb0;

  /* Flat tinted icon-swatch backgrounds (Home Hub daily-moment/gift cards). */
  --mobile-primary-tint: rgba(237, 147, 177, 0.15);
  --mobile-secondary-tint: rgba(185, 168, 232, 0.15);
  --mobile-gold-tint: rgba(224, 169, 63, 0.15);

  /* Ambient shadows barely register against a near-black base, so dark theme
     surfaces (cards/inputs) rely on their border alone; only the floating tab
     bar needs a real shadow to read as elevated above content. */
  --mobile-shadow-surface: none;
  --mobile-shadow-floating: 0 10px 30px rgba(0, 0, 0, 0.4);
  --mobile-shadow-glow-primary: 0 0 20px rgba(237, 147, 177, 0.5);
}

[data-theme='light'] {
  --mobile-bg-base: #fdf6f8;
  --mobile-bg-frame: #1a1418;
  --mobile-bg-card: #ffffff;
  --mobile-bg-card-alt: #fbeef2;

  --mobile-border-subtle: rgba(212, 83, 126, 0.12);
  --mobile-border-default: rgba(212, 83, 126, 0.16);
  --mobile-border-strong: rgba(212, 83, 126, 0.3);
  --mobile-border-accent: rgba(212, 83, 126, 0.2);

  --mobile-overlay: rgba(255, 255, 255, 0.92);
  --mobile-btn-secondary-bg: var(--mobile-bg-card);
  --mobile-chip-bg: var(--mobile-bg-card);
  --mobile-chip-border: rgba(212, 83, 126, 0.18);

  --mobile-primary: #d4537e;
  --mobile-primary-strong: #de6e93;
  --mobile-primary-gradient: linear-gradient(135deg, #de6e93, #d4537e);
  --mobile-primary-glow: rgba(212, 83, 126, 0.35);
  --mobile-primary-glow-transparent: rgba(212, 83, 126, 0);
  --mobile-on-primary: #ffffff;

  --mobile-secondary: #8e7bc0;
  --mobile-secondary-strong: #a794d6;
  --mobile-secondary-gradient: linear-gradient(90deg, #a794d6, #8e7bc0);

  --mobile-gold: #c98a2c;
  --mobile-gold-gradient: linear-gradient(135deg, #f2d98a, #e0a93f);

  --mobile-success: #34a65f;

  --mobile-text-primary: #2b2330;
  --mobile-text-secondary: #8a8190;
  --mobile-text-tertiary: #b0a6b6;

  --mobile-gauge-track: rgba(212, 83, 126, 0.12);
  --mobile-track-secondary: rgba(142, 123, 192, 0.12);

  --mobile-media-stripe-a: rgba(212, 83, 126, 0.16);
  --mobile-media-stripe-b: rgba(142, 123, 192, 0.12);
  --mobile-media-label: #b57690;

  --mobile-primary-tint: rgba(212, 83, 126, 0.12);
  --mobile-secondary-tint: rgba(142, 123, 192, 0.16);
  --mobile-gold-tint: rgba(224, 169, 63, 0.16);

  --mobile-shadow-surface: 0 4px 16px rgba(212, 83, 126, 0.06);
  --mobile-shadow-floating: 0 10px 30px rgba(212, 83, 126, 0.16);
  --mobile-shadow-glow-primary: 0 8px 20px rgba(212, 83, 126, 0.35);
}
/**
 * Structural/surface tokens for the main Ayra app — modal & card backgrounds,
 * neutral chrome borders (nav rails, dividers, drawers), shadows, and RGB
 * triplets for alpha-mixed colors. The brand palette itself (--pink, --gold,
 * --purple, --red, --text-primary/-secondary, --bg-void/-dark/-surface,
 * --border-subtle/-card/-glow for glass cards) lives in fonts.css, mirroring
 * landing/src/styles/globals.css — this file only adds what that shared
 * palette doesn't cover.
 *
 * --*-rgb hold "R, G, B" triplets (no rgba() wrapper) so call sites can do
 * `rgba(var(--pink-soft-rgb), 0.15)` and keep an exact alpha value while the
 * underlying color still flips between themes.
 */
:root,
[data-theme='dark'] {
  --surface-card: #13102a;
  --surface-card-alt: #1a1025;

  --chrome-border-subtle: rgba(255, 255, 255, 0.08);
  --chrome-border-default: rgba(255, 255, 255, 0.12);
  --chrome-border-strong: rgba(255, 255, 255, 0.18);

  --overlay-scrim: rgba(0, 0, 0, 0.55);

  --text-tertiary: #6d6879;
  --success: #6ee7a0;

  --fg-rgb: 255, 255, 255;
  --bg-rgb: 7, 6, 20;
  --bg-surface-rgb: 19, 16, 42;
  --pink-rgb: 232, 121, 160;
  --pink-soft-rgb: 244, 167, 185;
  --purple-rgb: 155, 111, 208;
  --gold-rgb: 201, 168, 76;
  --red-rgb: 204, 61, 90;
  --success-rgb: 110, 231, 160;

  --shadow-surface: none;
  --shadow-floating: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-glow-pink: 0 0 20px rgba(232, 121, 160, 0.5);

  /* Voice/video dock chrome (CompanionScreen's floating controls + chat sheet
     sit on top of the live avatar render, not the page background — like a
     video-call control bar, they intentionally stay dark-glass in every
     theme, so these are NOT redefined in [data-theme='light']. */
  --dock-bg-rgb: 12, 12, 18;
  --dock-fg-rgb: 255, 255, 255;
  --dock-gradient-accent: linear-gradient(135deg, #a855f7, #f472b6);
}

[data-theme='light'] {
  --surface-card: #ffffff;
  --surface-card-alt: #fbeef2;

  --chrome-border-subtle: rgba(212, 83, 126, 0.12);
  --chrome-border-default: rgba(212, 83, 126, 0.16);
  --chrome-border-strong: rgba(212, 83, 126, 0.3);

  --overlay-scrim: rgba(43, 35, 48, 0.45);

  --text-tertiary: #a89db0;
  --success: #34a65f;

  --fg-rgb: 43, 35, 48;
  --bg-rgb: 253, 246, 248;
  --bg-surface-rgb: 253, 241, 244;
  --pink-rgb: 212, 83, 126;
  --pink-soft-rgb: 232, 139, 163;
  --purple-rgb: 142, 123, 192;
  --gold-rgb: 201, 138, 44;
  --red-rgb: 212, 61, 90;
  --success-rgb: 52, 166, 95;

  --shadow-surface: 0 4px 16px rgba(212, 83, 126, 0.08);
  --shadow-floating: 0 10px 30px rgba(212, 83, 126, 0.16);
  --shadow-glow-pink: 0 8px 20px rgba(212, 83, 126, 0.35);
}
html,
body,
#root {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* Theme-matched base so no region ever flashes the wrong-theme color before/
     around the app's own background layers (the onboarding/app screens paint
     their own bg on top). */
  background: var(--bg-void);
}
.protected-route-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: var(--bg-void);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(var(--fg-rgb), 0.15);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Ambient particle layer. Sits INSIDE .companion-stage after .companion-glow and
   before the VRM canvas wrap (z-index 1), so particles glow above the CSS stage
   glow but pass BEHIND Ayra's silhouette through the transparent 3D canvas. */
.room-fx-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* ── Rail container ───────────────────────────────────────────────────── */
.nav-rail {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 72px;
  z-index: 20; /* above companion chrome (z:5), below SessionStartOverlay (z:50) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;

  background: rgba(var(--bg-rgb), 0.82);
  border-right: 1px solid rgba(var(--fg-rgb), 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-rail--expanded {
  width: 224px;
}

/* Hide entirely on mobile — MobileDrawer takes over. */
@media (max-width: 759px) {
  .nav-rail {
    display: none;
  }
}

/* ── Toggle button (top of rail) ─────────────────────────────────────── */
.nav-rail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 64px;
  padding: 0;
  border: none;
  background: none;
  color: rgba(var(--fg-rgb), 0.35);
  cursor: pointer;
  transition: color 0.2s;
}

.nav-rail-toggle:hover {
  color: var(--text-primary);
}

.nav-rail-toggle:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
  border-radius: 6px;
}

/* ── Nav item list ───────────────────────────────────────────────────── */
.nav-rail-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

/* ── Individual nav item ─────────────────────────────────────────────── */
.nav-rail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 48px;
  padding: 0 0 0 calc((72px - 22px) / 2); /* centre icon at 72px collapsed width */
  border: none;
  background: none;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  border-radius: 0;
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}

.nav-rail-item:hover {
  color: var(--text-primary);
  background: rgba(var(--pink-rgb), 0.08);
}

.nav-rail-item:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}

.nav-rail-item--active {
  color: var(--pink);
  background: rgba(var(--pink-rgb), 0.1);
}

.nav-rail-item--active .nav-rail-icon svg {
  filter: drop-shadow(0 0 6px rgba(var(--pink-rgb), 0.5));
}

/* ── Icon wrapper ────────────────────────────────────────────────────── */
.nav-rail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* ── Label: hidden when collapsed, visible when expanded ─────────────── */
.nav-rail-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition:
    opacity 0.2s ease,
    max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.nav-rail--expanded .nav-rail-label {
  opacity: 1;
  max-width: 160px;
  pointer-events: auto;
}

/* ── "SOON" badge on Watch with Ayra ─────────────────────────────────── */
.nav-rail-soon {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(var(--gold-rgb), 0.18);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* ── Bottom section ──────────────────────────────────────────────────── */
.nav-rail-bottom {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.75rem 0 1rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.06);
}

/* ── Plan badge ──────────────────────────────────────────────────────── */
.plan-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0 0 calc((72px - 14px) / 2);
  min-height: 32px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.plan-badge:hover {
  opacity: 0.8;
}

.plan-badge:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}

.plan-badge-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition:
    opacity 0.2s ease,
    max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-rail--expanded .plan-badge-label {
  opacity: 1;
  max-width: 120px;
}

.plan-badge--free    { color: rgba(var(--fg-rgb), 0.4); }
.plan-badge--sakura  { color: var(--pink); }
.plan-badge--koi     { color: var(--purple); }
.plan-badge--eternal { color: var(--gold); }

/* ── Logout button ───────────────────────────────────────────────────── */
.nav-rail-logout {
  color: rgba(var(--fg-rgb), 0.35);
}

.nav-rail-logout:hover {
  color: rgba(var(--fg-rgb), 0.75);
  background: rgba(var(--fg-rgb), 0.05);
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-rail,
  .nav-rail-label,
  .plan-badge-label,
  .nav-rail-item,
  .nav-rail-toggle {
    transition: none;
  }
}
/* ── Scrim ────────────────────────────────────────────────────────────── */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 29; /* below the drawer (30) */
  background: var(--overlay-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.drawer-scrim--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Drawer panel ────────────────────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: min(300px, 85vw);
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: rgba(var(--bg-rgb), 0.97);
  border-right: 1px solid rgba(var(--fg-rgb), 0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer--open {
  transform: translateX(0);
}

/* Only render the drawer on mobile; it's always in the DOM but invisible on desktop. */
@media (min-width: 760px) {
  .mobile-drawer,
  .drawer-scrim {
    display: none;
  }
}

/* ── Drawer header ───────────────────────────────────────────────────── */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem 1rem 1.5rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.06);
  flex-shrink: 0;
}

.drawer-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.drawer-close:hover {
  color: var(--text-primary);
  background: rgba(var(--fg-rgb), 0.08);
}

.drawer-close:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* ── Nav list ────────────────────────────────────────────────────────── */
.drawer-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

/* ── Drawer item ─────────────────────────────────────────────────────── */
.drawer-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: color 0.18s, background 0.18s;
}

.drawer-item:hover {
  color: var(--text-primary);
  background: rgba(var(--pink-rgb), 0.08);
}

.drawer-item:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}

.drawer-item--active {
  color: var(--pink);
  background: rgba(var(--pink-rgb), 0.1);
}

/* ── "SOON" badge ────────────────────────────────────────────────────── */
.drawer-soon {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(var(--gold-rgb), 0.18);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  color: var(--gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* ── Bottom: plan badge + logout ─────────────────────────────────────── */
.drawer-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0 calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(var(--fg-rgb), 0.06);
  flex-shrink: 0;
}

.drawer-plan-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.5rem;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}

.drawer-plan-badge:hover { opacity: 0.75; }

.drawer-plan-badge:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}

/* Reuse NavRail plan colour classes */
.plan-badge--free    { color: rgba(var(--fg-rgb), 0.4); }
.plan-badge--sakura  { color: var(--pink); }
.plan-badge--koi     { color: var(--purple); }
.plan-badge--eternal { color: var(--gold); }

.drawer-logout {
  color: rgba(var(--fg-rgb), 0.4);
}

.drawer-logout:hover {
  color: rgba(var(--fg-rgb), 0.7);
  background: rgba(var(--fg-rgb), 0.05);
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .drawer-scrim,
  .drawer-item,
  .drawer-close {
    transition: none;
  }
}
.farewell-overlay {
  position: fixed;
  inset: 0;
  z-index: 100; /* above SessionStartOverlay (50) and the nav rail (20) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(var(--bg-rgb), 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  animation: farewell-fade-in 0.25s ease-out;
}

.farewell-card {
  max-width: 380px;
  text-align: center;
  padding: 28px 32px;
  border-radius: 16px;
  background: var(--surface-card-alt);
  border: 1px solid rgba(var(--pink-rgb), 0.25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  cursor: default;
  animation: farewell-rise-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.farewell-line {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
}

.farewell-teaser {
  margin: 14px 0 0;
  color: var(--pink);
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  opacity: 0.85;
}

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

@keyframes farewell-rise-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .farewell-overlay,
  .farewell-card {
    animation: none;
  }
}
/* ── Guided tour overlay ───────────────────────────────────────────────
   Portaled to <body>, sits above all app chrome (PaywallModal/PreEnterSettings
   are z-index:1000; session-expired banner is z-index:9999) but blocks all
   page interaction while active — only its own controls + Escape respond. */
.guided-tour {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: auto;
}

.guided-tour-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
}

/* Spotlight cutout — a single element whose box-shadow dims everything
   outside its rect. One element (not four scrim panels) keeps the "glide"
   between steps to a single transform/size transition, and gives rounded
   corners around the hole for free. */
.guided-tour-spotlight {
  position: absolute;
  box-shadow: 0 0 0 100vmax var(--overlay-scrim);
  outline: 2px solid rgba(244, 114, 182, 0.9);
  outline-offset: 2px;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease,
    border-radius 0.25s ease;
}

.guided-tour-card {
  position: absolute;
  max-width: min(320px, calc(100vw - 24px));
  padding: 18px;
  border-radius: 16px;
  background: rgba(var(--dock-bg-rgb), 0.92);
  border: 1px solid rgba(var(--dock-fg-rgb), 0.16);
  color: rgb(var(--dock-fg-rgb));
  box-shadow: var(--shadow-floating);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: top 0.25s ease, left 0.25s ease;
}

.guided-tour-skip {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(var(--dock-fg-rgb), 0.55);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
}

.guided-tour-skip:hover {
  color: rgba(var(--dock-fg-rgb), 0.85);
}

.guided-tour-title {
  margin: 0 28px 6px 0;
  font-size: 16px;
  font-weight: 700;
}

.guided-tour-body {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(var(--dock-fg-rgb), 0.78);
}

.guided-tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.guided-tour-back {
  background: none;
  border: none;
  color: rgba(var(--dock-fg-rgb), 0.7);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 4px;
}

.guided-tour-back:hover {
  color: rgb(var(--dock-fg-rgb));
}

.guided-tour-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.guided-tour-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--dock-fg-rgb), 0.28);
}

.guided-tour-dot--active {
  background: rgba(244, 114, 182, 0.95);
}

.guided-tour-next {
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: var(--dock-gradient-accent);
  color: rgb(var(--dock-fg-rgb));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.guided-tour-next:hover {
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .guided-tour-spotlight,
  .guided-tour-card {
    transition: none;
  }
}
.app-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Passthrough container — the child route fills the full viewport. */
.app-shell-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

/* AyraRoom manages its own fixed-height/overflow internally; removing the
   scrollable ancestor here stops mobile browsers from scrolling this whole
   container to "reveal" the message input on focus (it's already visible). */
.app-shell-content--fixed {
  overflow: hidden;
}

/* ── Immersive mode: hide all navigation chrome ──────────────────────── */
.app-shell--immersive .nav-rail,
.app-shell--immersive .app-shell-hamburger {
  opacity: 0;
  pointer-events: none;
}

/* ── Mobile hamburger ────────────────────────────────────────────────── */
.app-shell-hamburger {
  display: none; /* shown only on mobile via media query below */
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top));
  left: calc(1rem + env(safe-area-inset-left));
  z-index: 20;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--chrome-border-default);
  background: rgba(var(--bg-rgb), 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.app-shell-hamburger:hover {
  background: rgba(var(--pink-rgb), 0.12);
  border-color: rgba(var(--pink-rgb), 0.3);
}

.app-shell-hamburger:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

@media (max-width: 759px) {
  .app-shell-hamburger {
    display: flex;
  }
}

/* ── Exit-immersive floating button ─────────────────────────────────────── */
/* Rendered by AppShell (always mounted) so it persists on non-AyraRoom routes. */
.app-shell-exit-immersive {
  position: fixed;
  top: calc(0.75rem + env(safe-area-inset-top));
  left: calc(0.75rem + env(safe-area-inset-left));
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--chrome-border-strong);
  background: rgba(var(--bg-rgb), 0.6);
  color: rgba(var(--fg-rgb), 0.55);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.app-shell-exit-immersive:hover {
  color: var(--text-primary);
  background: rgba(var(--bg-rgb), 0.8);
  border-color: rgba(var(--fg-rgb), 0.22);
}

.app-shell-exit-immersive:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell--immersive .nav-rail,
  .app-shell--immersive .app-shell-hamburger {
    transition: none;
  }
}
.ayra-ad-banner { position: fixed; z-index: 15; left: var(--nav-rail-width, 72px); right: 0; bottom: 0; min-height: 72px; max-height: 96px; overflow: hidden; padding: 14px 12px 6px; box-sizing: border-box; background: rgba(8,7,18,.96); border-top: 1px solid rgba(var(--pink-rgb),.18); text-align: center; }
.ayra-ad-label { display: block; color: var(--text-secondary); opacity: .65; font: 500 10px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.app-shell:has(.ayra-ad-banner) .app-shell-content { height: calc(100% - 88px); }
.ayra-ad-break { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(5,4,12,.82); backdrop-filter: blur(12px); }
.ayra-ad-break__card { width: min(420px,100%); padding: 28px; border: 1px solid rgba(var(--pink-rgb),.3); border-radius: 18px; background: var(--bg-card); color: var(--text-primary); text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.ayra-ad-break__card h2 { margin: 10px 0 8px; font-size: 1.35rem; }
.ayra-ad-break__card p { color: var(--text-secondary); line-height: 1.55; }
.ayra-ad-break__card button { min-height: 44px; margin-top: 12px; padding: 10px 20px; border: 0; border-radius: 10px; background: var(--gradient-pink); color: white; font-weight: 700; cursor: pointer; }
@media (max-width:759px) { .ayra-ad-banner { left:0; padding-bottom:calc(6px + env(safe-area-inset-bottom)); } }
.sakura-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.sakura-petal {
  position: absolute;
  top: -12px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, rgba(var(--pink-soft-rgb), 0.75), rgba(var(--pink-rgb), 0.5));
  opacity: 0;
}

@keyframes petalFall {
  0%   { transform: translateY(-12px) translateX(0)    rotate(0deg);   opacity: 0; }
  5%   { opacity: 0.7; }
  90%  { opacity: 0.45; }
  100% { transform: translateY(110vh) translateX(28px)  rotate(540deg); opacity: 0; }
}

@keyframes petalFall2 {
  0%   { transform: translateY(-12px) translateX(0)    rotate(20deg);  opacity: 0; }
  5%   { opacity: 0.6; }
  90%  { opacity: 0.35; }
  100% { transform: translateY(110vh) translateX(-22px) rotate(-380deg); opacity: 0; }
}

@keyframes petalFall3 {
  0%   { transform: translateY(-12px) translateX(0)    rotate(45deg);  opacity: 0; }
  5%   { opacity: 0.8; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(110vh) translateX(16px)  rotate(420deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sakura-petal {
    animation: none !important;
    display: none;
  }
}
/* ─── AyraVerse · Login ───────────────────────────────────────────────────────
   Immersive split layout: a brand "hero" on the left (desktop) and a glassy auth
   card on the right. Behind everything sits a drifting cosmic starfield, falling
   sakura petals, and slow aurora blobs. Collapses to a single centered card on
   mobile. Design tokens mirror the onboarding flow.

   Local --lg-* vars below are aliases onto the shared theme tokens (see
   styles/fonts.css + styles/app-tokens.css) so this file reacts to
   [data-theme='light'] instead of hardcoding dark-only values.
   ───────────────────────────────────────────────────────────────────────────── */

.login-screen {
  --lg-bg: var(--bg-void);
  --lg-surface: var(--bg-dark);
  --lg-text: var(--text-primary);
  --lg-muted: var(--text-secondary);
  --lg-pink: var(--pink);
  --lg-violet: var(--purple);
  --lg-violet-deep: var(--purple);

  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--lg-bg);
  color: var(--lg-text);
  font-family: 'Inter', system-ui, sans-serif;
  box-sizing: border-box;
}

.login-screen *,
.login-screen *::before,
.login-screen *::after {
  box-sizing: border-box;
}

/* ─── Background ─────────────────────────────────────────────────────────────── */
.login-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-bg .starfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.login-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  will-change: transform;
}

.login-aurora--1 {
  width: 46vmax;
  height: 46vmax;
  top: -16vmax;
  left: -12vmax;
  background: radial-gradient(circle, rgba(var(--purple-rgb), 0.5), transparent 68%);
  animation: lgAurora1 26s ease-in-out infinite;
}

.login-aurora--2 {
  width: 40vmax;
  height: 40vmax;
  bottom: -16vmax;
  right: -10vmax;
  background: radial-gradient(circle, rgba(var(--pink-rgb), 0.42), transparent 68%);
  animation: lgAurora2 32s ease-in-out infinite;
}

.login-aurora--3 {
  width: 32vmax;
  height: 32vmax;
  top: 38%;
  left: 52%;
  /* Distinct cool-blue accent blob — no catalog token matches this hue; left
     as a literal color (see conversion report). */
  background: radial-gradient(circle, rgba(71, 191, 255, 0.22), transparent 70%);
  animation: lgAurora3 38s ease-in-out infinite;
}

@keyframes lgAurora1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vmax, 6vmax) scale(1.12); }
}

@keyframes lgAurora2 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50% { transform: translate(-7vmax, -5vmax) scale(0.92); }
}

@keyframes lgAurora3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.18; }
  50% { transform: translate(-58%, -42%) scale(1.18); opacity: 0.3; }
}

.login-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 50% 40%, transparent 40%, rgba(var(--bg-rgb), 0.55) 78%, rgba(var(--bg-rgb), 0.9) 100%);
}

/* ─── Stage / layout ─────────────────────────────────────────────────────────── */
.login-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  margin: auto;
}

/* ─── Hero (desktop brand panel) ─────────────────────────────────────────────── */
.login-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 8px 0;
  animation: lgFadeUp 0.7s ease both;
}

.login-hero-mark {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.login-hero-logo {
  width: 52px;
  height: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 22px rgba(var(--purple-rgb), 0.55));
  animation: lgFloat 6s ease-in-out infinite;
}

.login-hero-halo {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--purple-rgb), 0.45), transparent 65%);
  filter: blur(14px);
  animation: lgPulse 4.5s ease-in-out infinite;
}

.login-hero-brand {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lg-muted);
}

.login-hero-headline {
  margin: 0 0 14px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.12;
  background: linear-gradient(120deg, var(--text-primary) 0%, var(--text-primary) 45%, var(--lg-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-hero-tagline {
  margin: 0 0 30px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--lg-muted);
  max-width: 32ch;
}

.login-hero-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-hero-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  color: rgba(var(--fg-rgb), 0.78);
}

.login-hero-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lg-violet), var(--lg-pink));
  box-shadow: 0 0 10px rgba(var(--purple-rgb), 0.7);
}

/* ─── Auth panel ─────────────────────────────────────────────────────────────── */
.login-panel {
  display: flex;
  justify-content: center;
  animation: lgFadeUp 0.7s ease 0.08s both;
}

.login-card {
  width: min(420px, 100%);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 1.5rem;
  background: linear-gradient(
    160deg,
    rgba(var(--bg-rgb), 0.82) 0%,
    rgba(var(--bg-rgb), 0.86) 100%
  );
  border: 1px solid rgba(var(--purple-rgb), 0.22);
  box-shadow:
    0 24px 70px rgba(5, 3, 14, 0.6),
    0 0 0 1px rgba(var(--fg-rgb), 0.02) inset,
    0 1px 0 rgba(var(--fg-rgb), 0.06) inset;
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  text-align: center;
}

/* Compact brand header — hidden on desktop where the hero carries the brand */
.login-brandbar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.login-brandbar-logo {
  width: 30px;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(var(--purple-rgb), 0.5));
}

.login-brandbar-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--lg-violet), var(--lg-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-title {
  margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--lg-text);
}

.login-subtitle {
  margin: 0.45rem 0 0;
  color: var(--lg-muted);
  font-size: 0.9rem;
}

.login-subtitle-jp {
  margin: 0.3rem 0 1.5rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--text-secondary) 55%, transparent);
}

/* ─── Alerts ─────────────────────────────────────────────────────────────────── */
.login-alerts:empty {
  display: none;
}

.login-error,
.login-info {
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.65rem;
  font-size: 0.84rem;
  text-align: left;
  animation: lgFadeUp 0.3s ease both;
}

.login-error {
  background: rgba(var(--red-rgb), 0.14);
  border: 1px solid rgba(var(--red-rgb), 0.3);
  color: var(--red);
}

.login-info {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  color: var(--success);
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.login-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: 0.85rem;
  border: none;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease,
    background 0.2s ease;
}

.login-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.login-btn--google {
  /* Google brand button — stays solid white with dark text in both themes
     per Google sign-in branding guidelines; not app-theme-driven. */
  background: #fff;
  color: #1f1830;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.login-btn--google:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
}

.login-google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.login-btn--email {
  position: relative;
  overflow: hidden;
  margin-top: 0.35rem;
  min-height: 2.95rem;
  background: linear-gradient(135deg, var(--lg-violet-deep), var(--lg-pink));
  box-shadow: 0 8px 24px rgba(var(--purple-rgb), 0.4);
}

.login-btn--email::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Shine sweep sits on the vivid brand gradient (stays colorful in both
     themes) — literal white highlight kept intentionally, see report. */
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.login-btn--email:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(var(--pink-rgb), 0.42);
}

.login-btn--email:hover:not(:disabled)::after {
  transform: translateX(120%);
}

/* ─── Divider ────────────────────────────────────────────────────────────────── */
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--purple-rgb), 0.28),
    transparent
  );
}

/* ─── Form ───────────────────────────────────────────────────────────────────── */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.login-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg-muted);
  padding-left: 0.15rem;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--purple-rgb), 0.22);
  background: rgba(var(--bg-rgb), 0.55);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-input-wrap:focus-within {
  border-color: rgba(var(--purple-rgb), 0.65);
  background: rgba(var(--bg-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--purple-rgb), 0.16);
}

.login-input-wrap--error {
  border-color: rgba(var(--red-rgb), 0.6);
}

.login-input-wrap--error:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.18);
}

.login-field-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-left: 0.8rem;
  color: color-mix(in srgb, var(--text-secondary) 85%, transparent);
  pointer-events: none;
}

.login-input {
  flex: 1;
  width: 100%;
  padding: 0.78rem 0.8rem 0.78rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--lg-text);
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  min-width: 0;
}

.login-input::placeholder {
  color: color-mix(in srgb, var(--text-secondary) 50%, transparent);
}

.login-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tame the browser autofill yellow on the dark card */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lg-text);
  -webkit-box-shadow: 0 0 0 40px var(--bg-surface) inset;
  caret-color: var(--lg-text);
  transition: background-color 9999s ease-out 0s;
}

.login-eye {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: 0.25rem;
  flex-shrink: 0;
  border: none;
  background: none;
  color: color-mix(in srgb, var(--text-secondary) 80%, transparent);
  cursor: pointer;
  border-radius: 0.5rem;
  transition: color 0.2s ease, background 0.2s ease;
}

.login-eye svg {
  width: 18px;
  height: 18px;
}

.login-eye:hover {
  color: var(--lg-violet);
  background: rgba(var(--purple-rgb), 0.1);
}

.login-field-error {
  margin: 0;
  padding-left: 0.15rem;
  font-size: 0.74rem;
  color: var(--red);
}

/* ─── Forgot password ────────────────────────────────────────────────────────── */
.login-forgot {
  align-self: flex-end;
  margin-top: -0.25rem;
  padding: 0;
  background: none;
  border: none;
  color: rgba(var(--purple-rgb), 0.85);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.login-forgot:hover {
  color: var(--lg-violet);
  text-decoration-color: var(--lg-violet);
}

.login-forgot:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Mode toggle ────────────────────────────────────────────────────────────── */
.login-mode-toggle {
  margin-top: 1.1rem;
  padding: 0.4rem 0;
  background: none;
  border: none;
  color: var(--lg-muted);
  font-family: inherit;
  font-size: 0.83rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.login-mode-toggle span {
  color: var(--lg-violet);
  font-weight: 600;
  transition: color 0.2s ease;
}

.login-mode-toggle:hover {
  color: rgba(var(--fg-rgb), 0.85);
}

.login-mode-toggle:hover span {
  color: var(--lg-pink);
}

/* ─── Spinners ───────────────────────────────────────────────────────────────── */
.login-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 2rem 0;
}

.login-spinner .spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(var(--purple-rgb), 0.15);
  border-top-color: var(--lg-violet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.login-spinner-label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--lg-muted);
}

.btn-spinner {
  /* Sits on the vivid login-btn--email brand gradient (stays colorful in
     both themes) — literal white kept intentionally for contrast, see report. */
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.login-footer {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--purple-rgb), 0.12);
  font-size: 0.69rem;
  line-height: 1.9;
  color: color-mix(in srgb, var(--text-secondary) 60%, transparent);
  text-align: center;
}

.login-footer a {
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.login-footer a:hover {
  color: var(--lg-violet);
}

/* ─── Shared keyframes ───────────────────────────────────────────────────────── */
@keyframes lgFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes lgPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* ─── Focus visibility (a11y) ────────────────────────────────────────────────── */
.login-screen a:focus-visible,
.login-screen button:focus-visible {
  outline: 2px solid var(--lg-violet);
  outline-offset: 2px;
  border-radius: 6px;
}

.login-eye:focus-visible {
  outline-offset: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

/* Tablet / narrow desktop: drop the hero, center the card */
@media (max-width: 860px) {
  .login-stage {
    grid-template-columns: 1fr;
    max-width: 460px;
    gap: 0;
  }

  .login-hero {
    display: none;
  }

  .login-brandbar {
    display: flex;
  }
}

/* Phones — the card itself is the full-height surface (min-height:100dvh, no
   separate outer background peeking above/below it), but its content stays
   ONE tight, naturally-spaced cluster — header sitting directly above the
   Google button with the same small gaps the desktop card uses, not spread
   across the screen. That whole cluster is then centered as a single unit,
   so any leftover space is shared evenly above the logo and below the footer
   rather than pulling the header and the form apart from each other. */
@media (max-width: 480px) {
  .login-screen {
    padding: 0;
  }

  .login-stage {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .login-panel {
    display: block;
  }

  .login-card {
    width: 100%;
    min-height: 100dvh;
    border: none;
    border-radius: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
  }

  .login-brandbar {
    margin-top: 0.5rem;
  }
}

/* Short / landscape viewports — never clip the card */
@media (max-height: 640px) and (min-width: 481px) {
  .login-screen {
    align-items: flex-start;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .login-aurora,
  .login-hero-logo,
  .login-hero-halo,
  .login-hero,
  .login-panel,
  .login-error,
  .login-info {
    animation: none !important;
  }

  .login-btn,
  .login-input-wrap,
  .login-eye {
    transition: none;
  }
}
/* Colors below are intentionally fixed, not theme tokens — this is the live
   avatar's own backdrop/vignette and its floating zoom control, which (like
   the CompanionScreen dock) stay dark/glass in every theme. */
.vrm-canvas-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.vrm-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Soft grounding vignette so the figure settles into the dark base at the edges */
.vrm-canvas-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    130% 100% at 50% 38%,
    rgba(7, 7, 11, 0) 58%,
    rgba(7, 7, 11, 0.55) 100%
  );
}

.vrm-canvas-status {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--dock-fg-rgb), 0.65);
  font-size: 0.95rem;
  pointer-events: none;
}

.vrm-canvas-error {
  color: #f87171;
}

.vrm-zoom-btn {
  position: absolute;
  bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  right: 0.75rem;
  z-index: 4;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.15);
  background: rgba(var(--dock-bg-rgb), 0.55);
  color: rgba(var(--dock-fg-rgb), 0.65);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  pointer-events: auto;
}

.vrm-zoom-btn:hover {
  background: rgba(192, 132, 252, 0.18);
  border-color: rgba(192, 132, 252, 0.4);
  color: #c084fc;
}
/* Scene image layers — sit inside .companion-stage's own stacking context
   (z-index:0, position:absolute). Background paints under the glow/particles/
   VRM canvas via DOM order; foreground gets an explicit z-index so it can
   occlude the avatar's lower body for depth without ever burying a control. */
.scene-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  animation: scene-fade-in 0.6s ease both;
}

.scene-layer--foreground {
  z-index: 2;
  /* Deliberately NOT `cover`: a foreground prop should read as an object
     sitting at the bottom of frame at its own natural scale, not get
     stretched/cropped to fill the whole viewport — that's what turned a
     close, softly-blurred asset into a giant blob covering half the stage.
     `contain` bounds it to its own aspect ratio; bottom-anchoring keeps it
     grounded at the base of the stage regardless of viewport shape. */
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}

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

@media (prefers-reduced-motion: reduce) {
  .scene-layer {
    animation: none;
  }
}
/* Discord Activity (Phase C+). The VRM stage fills the iframe; a compact status
   chip + any boot/error overlays float on top. Deliberately self-contained — the
   Activity iframe does not load the app shell's chrome. Dark to sit inside the
   Discord call view. */
.activity-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #1a1430 0%, #07050f 72%);
  color: #ece8f5;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Full-bleed avatar stage. VRMCanvas's wrap is 100%/100%, so this just gives it
   a sized, fixed parent. */
.activity-stage {
  position: absolute;
  inset: 0;
}

/* Boot / error / not-in-Discord messaging, centered over the (empty) stage. */
.activity-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem;
  pointer-events: none;
}

.activity-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f4a7c9;
}

.activity-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(244, 167, 201, 0.25);
  border-top-color: #f4a7c9;
  border-radius: 50%;
  animation: activity-spin 0.9s linear infinite;
}

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

.activity-hint {
  margin: 0;
  opacity: 0.7;
  font-size: 0.9rem;
}

.activity-error {
  margin: 0;
  color: #ff9d9d;
  font-size: 0.9rem;
}

/* Live/idle status chip — top-left, glassy, out of the way of the avatar. */
.activity-chip {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(7, 5, 15, 0.55);
  border: 1px solid rgba(236, 232, 245, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(236, 232, 245, 0.72);
}

.activity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6b7280;
}

.activity-chip[data-live='true'] .activity-dot {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.8);
}
/* Colors here are intentionally fixed, not theme tokens — like closed
   captions, subtitles need to read over the live avatar render in any theme,
   so white text + a dark drop-shadow for contrast never changes. */
.subtitle-overlay {
  position: absolute;
  left: 50%;
  /* Pulled up from 20% to clear the "Listening…"/"Thinking…" pill (bottom:
     112px, see .ayra-listening-pill/.ayra-thinking-pill in AyraRoom.css) —
     at 20% on a typical ~800-850px viewport that used to land almost exactly
     on top of the pill's old 172px offset. */
  bottom: 27%;
  transform: translateX(-50%);
  width: min(82%, 760px);
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
}

.subtitle-overlay__line {
  margin: 0;
  text-align: center;
  line-height: 1.45;
  font-size: clamp(1.05rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  /* Readable over any avatar / background without a hard box. */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(0, 0, 0, 0.5);
}

.subtitle-overlay__word {
  display: inline-block;
  margin: 0 0.18em;
  /* Resting state for already-revealed words. */
  opacity: 1;
  transform: translateY(0) scale(1);
}

.subtitle-overlay__word--pop {
  animation: subtitle-pop 360ms cubic-bezier(0.22, 1.4, 0.4, 1) both;
  color: #ffe1ec;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 16px rgba(244, 167, 185, 0.65);
}

@keyframes subtitle-pop {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.6);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .subtitle-overlay__word--pop {
    animation: subtitle-fade 160ms ease both;
  }
  @keyframes subtitle-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}
.message-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(192, 132, 252, 0.3) transparent;
}

.message-list::-webkit-scrollbar {
  width: 6px;
}

.message-list::-webkit-scrollbar-thumb {
  background: rgba(192, 132, 252, 0.3);
  border-radius: 3px;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.message-list-empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  color: rgba(var(--dock-fg-rgb), 0.4);
  font-size: 0.92rem;
}

.message-list-empty-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c084fc, #f472b6);
  box-shadow: 0 0 24px rgba(192, 132, 252, 0.45);
  opacity: 0.9;
}

/* ── Message rows ─────────────────────────────────────────────────────── */
.message-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  animation: message-in 0.28s ease both;
}

.message-row--user {
  justify-content: flex-end;
}

.message-row--assistant {
  justify-content: flex-start;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-avatar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c084fc, #f472b6);
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.4);
}

/* Column wrapper so the tiny feedback row can sit under the bubble without
   breaking the row's flex alignment. Owns the 80% cap the bubble used to have. */
.message-bubble-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80%;
  min-width: 0;
}

.message-row--user .message-bubble-wrap {
  align-items: flex-end;
}

.message-bubble {
  max-width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 1.05rem;
  font-size: 0.92rem;
  line-height: 1.5;
  word-break: break-word;
}

.message-bubble--user {
  background: var(--dock-gradient-accent);
  color: rgb(var(--dock-fg-rgb));
  border-bottom-right-radius: 0.3rem;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.28);
}

.message-bubble--assistant {
  background: rgba(var(--dock-fg-rgb), 0.07);
  border: 1px solid rgba(var(--dock-fg-rgb), 0.08);
  color: rgba(var(--dock-fg-rgb), 0.92);
  border-bottom-left-radius: 0.3rem;
}

/* ── Feedback (👍/👎) — quiet ghost buttons under assistant bubbles ─────── */
.message-feedback {
  display: flex;
  gap: 0.15rem;
  margin-top: 0.15rem;
  margin-left: 0.35rem;
  opacity: 0;
  transition: opacity 0.18s ease;
}

/* Reveal on hover of the row, or while either button holds focus / is active. */
.message-row--assistant:hover .message-feedback,
.message-feedback:focus-within,
.message-feedback:has(.message-feedback-btn--active) {
  opacity: 1;
}

/* Touch devices have no hover — keep the pair faintly visible instead. */
@media (hover: none) {
  .message-feedback {
    opacity: 0.45;
  }
}

.message-feedback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: rgba(var(--dock-fg-rgb), 0.35);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.message-feedback-btn:hover {
  color: rgba(var(--dock-fg-rgb), 0.75);
  background: rgba(var(--dock-fg-rgb), 0.06);
}

.message-feedback-btn--active {
  color: #f4a7b9;
}

.message-feedback-btn--active:hover {
  color: #f4a7b9;
}
.thinking-indicator {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0 0.25rem 0.5rem;
}

.thinking-avatar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c084fc, #f472b6);
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.4);
}

.thinking-bubble {
  padding: 0.55rem 0.85rem;
  border-radius: 1.05rem;
  border-bottom-left-radius: 0.3rem;
  background: rgba(var(--dock-fg-rgb), 0.07);
  border: 1px solid rgba(var(--dock-fg-rgb), 0.08);
}

.thinking-dots {
  display: flex;
  gap: 4px;
}

.thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c084fc;
  animation: thinking-bounce 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.thinking-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes thinking-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.canvas-mic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* Hero voice control — the primary action in the voice-first dock. */
.canvas-mic-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.16);
  background: rgba(var(--dock-bg-rgb), 0.55);
  color: rgba(var(--dock-fg-rgb), 0.78);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s, background 0.25s, color 0.2s, border-color 0.2s,
    box-shadow 0.25s;
}

.canvas-mic-btn svg {
  width: 30px;
  height: 30px;
}

.canvas-mic-btn:hover {
  transform: translateY(-1px);
  color: rgb(var(--dock-fg-rgb));
}

.canvas-mic-btn:active {
  transform: scale(0.95);
}

.canvas-mic-btn--on {
  background: var(--dock-gradient-accent);
  border-color: transparent;
  color: rgb(var(--dock-fg-rgb));
  box-shadow: 0 14px 34px rgba(168, 85, 247, 0.5);
}

.canvas-mic-btn--loading {
  opacity: 0.85;
  cursor: progress;
}

.canvas-mic-btn--error {
  background: rgba(40, 18, 26, 0.7);
  border-color: rgba(244, 114, 182, 0.45);
  color: rgba(244, 114, 182, 0.95);
}

/* Steady breathing glow while Aira is speaking back. */
.canvas-mic-btn--speaking {
  animation: canvas-mic-speaking 1.8s ease-in-out infinite;
}

@keyframes canvas-mic-speaking {
  0%,
  100% {
    box-shadow: 0 14px 34px rgba(168, 85, 247, 0.5), 0 0 0 0 rgba(192, 132, 252, 0.45);
  }
  50% {
    box-shadow: 0 14px 34px rgba(168, 85, 247, 0.5), 0 0 0 12px rgba(192, 132, 252, 0);
  }
}

/* Voice-reactive listening state. --mic-level (0–1, set per-frame in JS) drives a
   glow that swells with the user's voice — quiet = gentle halo, loud = strong
   bloom — like Google Meet's mic indicator. Falls back to 0 (calm) at silence. */
.canvas-mic-btn--listening {
  --mic-level: 0;
  box-shadow:
    0 14px 34px rgba(168, 85, 247, 0.5),
    0 0 calc(8px + var(--mic-level, 0) * 26px) calc(1px + var(--mic-level, 0) * 5px)
      rgba(244, 114, 182, calc(0.35 + var(--mic-level, 0) * 0.55));
  /* Subtle scale-up on louder speech (capped so it never gets jumpy). */
  transform: scale(calc(1 + var(--mic-level, 0) * 0.06));
}

/* Reactive ring: scales with the voice level instead of a fixed expand loop, and
   keeps a slow idle shimmer so it breathes even during silence. */
.canvas-mic-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(244, 114, 182, calc(0.45 + var(--mic-level, 0) * 0.5));
  transform: scale(calc(1.05 + var(--mic-level, 0) * 0.45));
  opacity: calc(0.4 + var(--mic-level, 0) * 0.6);
  animation: canvas-mic-ring-idle 2.4s ease-in-out infinite;
  transition: transform 0.06s linear, opacity 0.12s linear;
  pointer-events: none;
}

@keyframes canvas-mic-ring-idle {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.18);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.04);
  }
}

/* Loading spinner shown while the VAD is initializing. */
.canvas-mic-spinner {
  animation: canvas-mic-spin 0.8s linear infinite;
}

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

.canvas-mic-caption {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(var(--dock-fg-rgb), 0.62);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.canvas-mic-btn--listening + .canvas-mic-caption {
  color: rgba(244, 114, 182, 0.95);
}

.canvas-mic-error {
  max-width: 160px;
  font-size: 0.7rem;
  color: rgba(244, 114, 182, 0.9);
  text-align: center;
}
.camera-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* The self-view tile floats over the canvas (out of the dock flow) and is
   draggable — its left/top come from inline styles set by CameraPreview.tsx.
   The toggle button below stays inside the voice-first dock. */
.camera-preview__panel {
  position: fixed;
  z-index: 3;
  width: 0;
  height: 0;
  overflow: hidden;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  /* Ease the snap-to-corner on release; opacity handles show/hide. */
  transition: opacity 0.25s ease,
    left 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.camera-preview__panel--on {
  width: 208px;
  height: 156px;
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Dismiss (×) button — top-right corner of the floating panel. */
.camera-preview__dismiss {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 5;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(var(--dock-fg-rgb), 0.8);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.camera-preview__panel--on:hover .camera-preview__dismiss {
  opacity: 1;
}

/* While actively dragging: follow the pointer 1:1 (no position easing). */
.camera-preview__panel--dragging {
  cursor: grabbing;
  transition: opacity 0.25s ease;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  .camera-preview__panel--on {
    width: 132px;
    height: 99px;
  }
}

.camera-preview__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mirror like a selfie cam. */
  transform: scaleX(-1);
  background: #0b0b12;
}

.camera-preview__vision {
  position: absolute;
  left: 6px;
  bottom: 6px;
  right: 6px;
  display: flex;
  justify-content: flex-start;
}

.camera-preview__badge {
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  color: rgb(var(--dock-fg-rgb));
  background: rgba(var(--dock-bg-rgb), 0.7);
  border: 1px solid rgba(var(--dock-fg-rgb), 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.camera-preview__badge--muted {
  position: absolute;
  left: 6px;
  bottom: 6px;
  color: rgba(var(--dock-fg-rgb), 0.7);
}

.camera-preview__vision-btn {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.66rem;
  color: rgb(var(--dock-fg-rgb));
  background: var(--dock-gradient-accent);
  border: none;
  cursor: pointer;
}

/* Off-screen frame-capture canvas. */
.camera-preview__capture {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sub-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.sub-panel__current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
}

.sub-panel__badge {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.sub-panel__status {
  font-size: 0.8rem;
  color: rgba(var(--fg-rgb), 0.6);
}

.sub-panel__error {
  margin: 0;
  font-size: 0.82rem;
  color: var(--pink-soft);
}

.sub-panel__notice {
  margin: 0;
  font-size: 0.82rem;
  color: var(--success);
}

.sub-panel__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.sub-panel__plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.sub-panel__plan:hover {
  border-color: rgba(var(--pink-soft-rgb), 0.45);
  transform: translateY(-2px);
}

.sub-panel__plan--current {
  border-color: rgba(var(--success-rgb), 0.5);
  background: rgba(var(--success-rgb), 0.06);
}

.sub-panel__plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.sub-panel__plan-head h4 {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.sub-panel__price {
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb), 0.55);
  white-space: nowrap;
}

.sub-panel__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sub-panel__features li {
  font-size: 0.74rem;
  color: rgba(var(--fg-rgb), 0.62);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sub-panel__feature--no {
  opacity: 0.55;
}

.sub-panel__feature-check {
  color: var(--success);
}

.sub-panel__feature-cross {
  color: rgba(var(--fg-rgb), 0.35);
}

.sub-panel__cta {
  margin-top: 4px;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2a1620;
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  cursor: pointer;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.sub-panel__cta:hover:not(:disabled) {
  filter: brightness(1.05);
}

.sub-panel__cta:disabled {
  opacity: 0.5;
  cursor: default;
  background: rgba(var(--fg-rgb), 0.12);
  color: rgba(var(--fg-rgb), 0.7);
}

.sub-panel__cta-note {
  margin: 4px 0 0;
  padding: 9px 12px;
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

/* Plans wrapper — establishes positioning context for the preview overlay */
.sub-panel__plans-wrap {
  position: relative;
}

/* Plan change preview confirmation overlay */
.sub-panel__preview-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(var(--bg-rgb), 0.92);
  backdrop-filter: blur(6px);
}

.sub-panel__preview {
  width: 100%;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sub-panel__preview-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sub-panel__preview-row {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(var(--fg-rgb), 0.72);
}

.sub-panel__preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.sub-panel__preview-cancel {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  border-radius: 10px;
  background: none;
  color: rgba(var(--fg-rgb), 0.6);
  font-size: 0.83rem;
  cursor: pointer;
  transition: border-color 0.18s;
}

.sub-panel__preview-cancel:hover {
  border-color: rgba(var(--fg-rgb), 0.3);
}

.sub-panel__preview-confirm {
  flex: 1;
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pink-soft), var(--pink));
  color: #2a1620;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s;
}

.sub-panel__preview-confirm:hover {
  opacity: 0.9;
}

.sub-panel__cancel {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb), 0.45);
  cursor: pointer;
  text-decoration: underline;
}

.sub-panel__cancel:hover:not(:disabled) {
  color: var(--pink-soft);
}

.sub-panel__cancel:disabled {
  opacity: 0.5;
  cursor: default;
}
.pre-settings-overlay {
  position: fixed;
  inset: 0;
  /* Above the session-start overlay (z-index 50); portaled to <body> so it also
     escapes that overlay's pointer-events:none. */
  z-index: 1000;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(var(--bg-rgb), 0.62);
  backdrop-filter: blur(6px);
  animation: pre-settings-fade 180ms ease both;
}

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

.pre-settings {
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 24px 26px;
  border-radius: 20px;
  background: rgba(var(--bg-rgb), 0.96);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: pre-settings-rise 220ms cubic-bezier(0.22, 1, 0.4, 1) both;
}

@keyframes pre-settings-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

.pre-settings__header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.pre-settings__close {
  background: none;
  border: none;
  color: rgba(var(--fg-rgb), 0.6);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.pre-settings__close:hover {
  color: var(--text-primary);
}

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

.pre-settings__title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.pre-settings__hint {
  margin: 0 0 2px;
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb), 0.5);
}

.pre-settings__personalities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pre-settings__chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: rgba(var(--fg-rgb), 0.04);
  color: rgba(var(--fg-rgb), 0.78);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.pre-settings__chip:hover:not(:disabled) {
  border-color: rgba(var(--pink-soft-rgb), 0.5);
  color: var(--text-primary);
}

.pre-settings__chip--active {
  border-color: var(--pink-soft);
  background: rgba(var(--pink-soft-rgb), 0.16);
  color: var(--text-primary);
}

.pre-settings__chip:disabled {
  opacity: 0.6;
  cursor: default;
}

.pre-settings__loading {
  font-size: 0.8rem;
  color: rgba(var(--fg-rgb), 0.5);
}

.pre-settings__error {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--red, #cc3d5a);
}

.pre-settings__divider {
  height: 1px;
  margin: 18px 0;
  background: rgba(var(--fg-rgb), 0.08);
}
/* ── Cinematic "ethereal cosmic" entry ──────────────────────────────────────
   The overlay frames the LIVE VRM rather than hiding it: a transparent center
   vignette + drifting starfield + soft aura around her, with the title up top
   and the progress/Enter cluster down low so nothing covers her face. The
   container lets pointer events fall through to the avatar — only the Enter
   button opts back in.

   Colors below are intentionally hardcoded, not theme tokens: like the
   CompanionScreen voice/video dock, this is a cinematic layer over the live
   avatar render, not page chrome, so it stays the same dark/violet atmosphere
   in every theme. */
.session-start {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  animation: session-start-in 0.9s ease both;
}

/* Crossfade the whole overlay out on Enter before it unmounts. */
.session-start--leaving {
  animation: session-start-out 0.42s ease forwards;
}

.starfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Dark glowing edges, transparent center → the avatar reads clearly through it. */
.session-start__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      90% 75% at 50% 48%,
      rgba(7, 7, 11, 0) 38%,
      rgba(9, 6, 20, 0.55) 72%,
      rgba(5, 4, 10, 0.92) 100%
    );
}

/* Slow breathing aura halo behind/around her — pure atmosphere, no blur on her. */
.session-start__aura {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 70vmin;
  height: 70vmin;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(168, 85, 247, 0.22),
    rgba(244, 114, 182, 0.1) 42%,
    rgba(7, 7, 11, 0) 70%
  );
  filter: blur(8px);
  animation: session-start-breathe 6.5s ease-in-out infinite;
}

/* ── Top: title + tagline ── */
.session-start__top {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: clamp(2.4rem, 9vh, 5rem);
  pointer-events: none;
  animation: session-start-rise 1.1s 0.15s ease both;
}

.session-start__title {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  font-weight: 800;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  background: linear-gradient(135deg, #e9d5ff 0%, #c084fc 45%, #f472b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 26px rgba(168, 85, 247, 0.55));
  animation: session-start-title-glow 5s ease-in-out infinite;
}

.session-start__tagline {
  margin: 0.7rem 0 0;
  font-size: clamp(0.8rem, 2.4vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(233, 213, 255, 0.7);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

/* ── Bottom: progress + Enter + sublines ── */
.session-start__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(92vw, 26rem);
  padding-bottom: clamp(2.2rem, 8vh, 4.5rem);
  pointer-events: none;
  animation: session-start-rise 1.1s 0.3s ease both;
}

/* ── Staged warmup checklist (VRM + voice + speech GPU workers) ── */
.session-start__stages {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  width: 100%;
}

.session-start__stage {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.32rem 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(233, 213, 255, 0.82);
  transition: color 0.3s ease;
}

.session-start__stage--done {
  color: rgba(233, 213, 255, 0.45);
}

/* Backend unreachable: unfinished stages hold a muted, static (non-spinning)
   state so they don't imply progress under the "can't connect" banner. */
.session-start__stage--paused {
  color: rgba(233, 213, 255, 0.34);
}

.session-start__stage-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1.5px solid rgba(244, 114, 182, 0.5);
  font-size: 0.7rem;
  line-height: 1;
  color: rgba(244, 167, 185, 0.95);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.session-start__stage--done .session-start__stage-dot {
  border-color: transparent;
  background: linear-gradient(135deg, #a855f7, #f472b6);
  color: #fff;
  box-shadow: 0 0 10px rgba(244, 114, 182, 0.6);
}

.session-start__stage--paused .session-start__stage-dot {
  border-color: rgba(233, 213, 255, 0.2);
  color: rgba(233, 213, 255, 0.4);
}

.session-start__spin {
  display: inline-block;
  animation: session-start-spin 0.95s linear infinite;
}

.session-start__progress {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(233, 213, 255, 0.12);
  overflow: hidden;
}

.session-start__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #a855f7, #f472b6);
  box-shadow: 0 0 14px rgba(244, 114, 182, 0.7);
  transition: width 0.4s ease;
}

.session-start__progress-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.45rem;
  margin-bottom: 1.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(233, 213, 255, 0.42);
}

.session-start__info {
  margin: 0 0 1.4rem;
  max-width: 24rem;
  font-size: 0.74rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(233, 213, 255, 0.6);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.session-start__info strong {
  color: rgba(244, 167, 185, 0.95);
  font-weight: 600;
}

/* Backend-unreachable banner — replaces the "1–2 minutes" note while the server
   is down. Warmer red tone to read as an error, not routine warmup. */
.session-start__error {
  margin: 0 0 1.4rem;
  max-width: 24rem;
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(248, 140, 150, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.session-start__error strong {
  color: rgba(248, 180, 188, 0.95);
  font-weight: 600;
}

.session-start__btn {
  position: relative;
  min-width: 12rem;
  padding: 0.95rem 2.8rem;
  border: 1px solid rgba(244, 114, 182, 0.5);
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(192, 132, 252, 0.5), rgba(168, 85, 247, 0) 70%),
    linear-gradient(135deg, rgba(168, 85, 247, 0.85), rgba(244, 114, 182, 0.85));
  box-shadow:
    0 0 0 0 rgba(244, 114, 182, 0.5),
    0 18px 44px rgba(168, 85, 247, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.18s ease, box-shadow 0.3s ease, opacity 0.25s ease,
    border-color 0.25s ease;
}

/* Pulsing halo only when she's ready and the button is actionable. */
.session-start__btn:not(:disabled) {
  animation: session-start-btn-pulse 2.6s ease-in-out infinite;
}

.session-start__btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 6px rgba(244, 114, 182, 0.14),
    0 24px 54px rgba(168, 85, 247, 0.65);
}

.session-start__btn:active:not(:disabled) {
  transform: scale(0.97);
}

.session-start__btn:disabled {
  opacity: 0.72;
  cursor: progress;
  border-color: rgba(233, 213, 255, 0.22);
  background: linear-gradient(135deg, rgba(88, 60, 140, 0.6), rgba(120, 60, 100, 0.6));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

.session-start__btn-label {
  position: relative;
  z-index: 1;
}

.session-start__vision {
  margin-top: 1.1rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(192, 132, 252, 0.65);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.session-start__hint {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(233, 213, 255, 0.38);
}

/* ── Settings/plans gear (top-right) ── */
.session-start__settings {
  position: absolute;
  top: clamp(1rem, 4vh, 2rem);
  right: clamp(1rem, 4vw, 2rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 14, 30, 0.55);
  color: rgba(233, 213, 255, 0.75);
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.session-start__settings:hover {
  color: #fff;
  border-color: rgba(244, 167, 185, 0.55);
  transform: rotate(35deg);
}

/* ── Warmup stage spinner ── */
@keyframes session-start-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Motion ── */
@keyframes session-start-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes session-start-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes session-start-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes session-start-breathe {
  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes session-start-title-glow {
  0%,
  100% {
    filter: drop-shadow(0 4px 22px rgba(168, 85, 247, 0.45));
  }
  50% {
    filter: drop-shadow(0 4px 32px rgba(244, 114, 182, 0.7));
  }
}

@keyframes session-start-btn-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(244, 114, 182, 0.45),
      0 18px 44px rgba(168, 85, 247, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(244, 114, 182, 0),
      0 18px 44px rgba(168, 85, 247, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-start,
  .session-start__top,
  .session-start__bottom,
  .session-start__aura,
  .session-start__title,
  .session-start__spin,
  .session-start__btn:not(:disabled) {
    animation: none;
  }
}
.paywall-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.paywall-modal {
  background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-card-alt) 100%);
  border: 1px solid rgba(var(--pink-soft-rgb), 0.3);
  border-radius: 20px;
  padding: 32px 28px;
  max-width: 860px;
  width: 100%;
  position: relative;
  box-shadow: 0 0 60px rgba(var(--pink-soft-rgb), 0.15);
}

.paywall-eyebrow { margin: 0 0 8px; color: var(--pink-soft); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.paywall-modal > h2 { margin: 0 0 10px; color: var(--text-primary); }
.paywall-modal > p { color: var(--text-secondary); line-height: 1.55; }
.paywall-actions { display: grid; gap: 10px; margin-top: 20px; }
.paywall-actions button { min-height: 44px; padding: 10px 14px; border: 1px solid rgba(var(--pink-soft-rgb),.35); border-radius: 10px; background: rgba(var(--pink-soft-rgb),.12); color: var(--pink-soft); font: inherit; font-weight: 700; cursor: pointer; }
.paywall-actions button:first-child { border: 0; background: var(--gradient-pink); color: white; }
.paywall-fine { margin-bottom: 0; font-size: .73rem; }

.paywall-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(var(--fg-rgb), 0.4);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s;
}
.paywall-close:hover {
  color: rgba(var(--fg-rgb), 0.8);
}

.paywall-header {
  text-align: center;
  margin-bottom: 28px;
}

.paywall-avatar {
  font-size: 40px;
  margin-bottom: 8px;
}

.paywall-header h2 {
  color: var(--pink-soft);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
}

.paywall-subtitle {
  color: rgba(var(--fg-rgb), 0.6);
  font-size: 14px;
  margin: 0;
}

.paywall-error {
  color: var(--red);
  text-align: center;
  font-size: 13px;
  margin: -12px 0 16px;
}

.paywall-trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(var(--success-rgb), 0.07);
  border: 1px solid rgba(var(--success-rgb), 0.3);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}

.paywall-trial-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paywall-trial-text strong {
  color: var(--success);
  font-size: 14px;
  font-weight: 700;
}

.paywall-trial-text span {
  color: rgba(var(--fg-rgb), 0.6);
  font-size: 12.5px;
}

.paywall-trial-cta {
  flex-shrink: 0;
  background: rgba(var(--success-rgb), 0.15);
  border: 1px solid rgba(var(--success-rgb), 0.45);
  color: var(--success);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
  white-space: nowrap;
}

.paywall-trial-cta:hover:not(:disabled) {
  background: rgba(var(--success-rgb), 0.25);
  transform: translateY(-1px);
}

.paywall-trial-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.paywall-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.paywall-plan-card {
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}

.paywall-plan-card--recommended {
  border-color: rgba(var(--pink-soft-rgb), 0.5);
  background: rgba(var(--pink-soft-rgb), 0.06);
  transform: scale(1.02);
}

.paywall-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pink-soft);
  color: #1a1025;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.paywall-plan-card h3 {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}

.paywall-price {
  margin-bottom: 14px;
}

.paywall-price-amount {
  color: var(--pink-soft);
  font-size: 26px;
  font-weight: 700;
}

.paywall-price-period {
  color: rgba(var(--fg-rgb), 0.5);
  font-size: 13px;
  margin-left: 2px;
}

.paywall-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.paywall-features li {
  color: rgba(var(--fg-rgb), 0.7);
  font-size: 13px;
}

.paywall-check {
  color: var(--pink-soft);
  margin-right: 6px;
}

.paywall-cta {
  width: 100%;
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--pink) 100%);
  color: #1a1025;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.paywall-cta:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.paywall-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.paywall-footer {
  text-align: center;
  color: rgba(var(--fg-rgb), 0.3);
  font-size: 12px;
  margin: 0;
}

/* Coupon section within each plan card */
.paywall-coupon {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.paywall-coupon-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: rgba(var(--fg-rgb), 0.35);
  cursor: pointer;
  text-decoration: underline;
  text-align: left;
  transition: color 0.18s;
}

.paywall-coupon-toggle:hover {
  color: rgba(var(--fg-rgb), 0.6);
}

.paywall-coupon-row {
  display: flex;
  gap: 6px;
}

.paywall-coupon-input {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: rgba(var(--fg-rgb), 0.05);
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
  transition: border-color 0.18s;
}

.paywall-coupon-input::placeholder { color: rgba(var(--fg-rgb), 0.28); }
.paywall-coupon-input:focus { border-color: rgba(var(--pink-soft-rgb), 0.4); }

.paywall-coupon-apply {
  padding: 6px 10px;
  border: 1px solid rgba(var(--pink-soft-rgb), 0.4);
  border-radius: 8px;
  background: none;
  color: var(--pink-soft);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.18s;
}

.paywall-coupon-apply:disabled { opacity: 0.4; cursor: default; }

.paywall-coupon-ok {
  margin: 0;
  font-size: 11px;
  color: var(--success);
}

.paywall-coupon-err {
  margin: 0;
  font-size: 11px;
  color: var(--red);
}

.paywall-price-original {
  font-size: 13px;
  color: rgba(var(--fg-rgb), 0.35);
  text-decoration: line-through;
  margin-left: 6px;
  vertical-align: middle;
}

.paywall-success {
  text-align: center;
  padding: 48px 32px;
}

.paywall-success-icon {
  font-size: 56px;
  margin-bottom: 16px;
}

.paywall-success h2 {
  color: var(--pink-soft);
  font-size: 22px;
  margin: 0 0 10px;
}

.paywall-success p {
  color: rgba(var(--fg-rgb), 0.6);
  font-size: 15px;
  margin: 0;
}
/* Room controls — floating toolkit on the stage. Uses the invariant dock-chrome
   tokens (like the zoom button / dock): stage overlays stay dark glass in every
   theme because they sit on the live avatar backdrop. */

.room-panel-toggle {
  position: absolute;
  bottom: 8.25rem;
  right: 0.75rem;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.15);
  background: rgba(var(--dock-bg-rgb), 0.55);
  color: rgba(var(--dock-fg-rgb), 0.65);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.4s ease;
}

.room-panel-toggle:hover,
.room-panel-toggle--open {
  background: rgba(244, 114, 182, 0.18);
  border-color: rgba(244, 114, 182, 0.4);
  color: #f472b6;
}

/* Follows the dock auto-hide (unless the panel is open — see `shown` in TSX). */
.room-panel-toggle--hidden {
  opacity: 0;
  pointer-events: none;
}

.room-panel {
  position: absolute;
  bottom: 11.25rem;
  right: 0.75rem;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(320px, calc(100vw - 1.5rem));
  max-height: min(62vh, 520px);
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.12);
  background: rgba(var(--dock-bg-rgb), 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  animation: room-panel-rise 180ms cubic-bezier(0.22, 1, 0.4, 1) both;
}

@keyframes room-panel-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .room-panel {
    animation: none;
  }
}

.room-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.room-panel-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #c084fc, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.room-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(var(--dock-fg-rgb), 0.5);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.room-panel-close:hover {
  color: rgba(var(--dock-fg-rgb), 0.9);
  background: rgba(var(--dock-fg-rgb), 0.08);
}

.room-panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.room-panel-section-title {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--dock-fg-rgb), 0.45);
}

.room-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.room-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.12);
  background: rgba(var(--dock-fg-rgb), 0.04);
  color: rgba(var(--dock-fg-rgb), 0.8);
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.room-chip:hover {
  border-color: rgba(244, 114, 182, 0.45);
  color: rgba(var(--dock-fg-rgb), 1);
}

.room-chip:active {
  background: rgba(244, 114, 182, 0.2);
}

.room-chip--active {
  border-color: rgba(244, 114, 182, 0.6);
  background: rgba(244, 114, 182, 0.14);
  color: rgba(var(--dock-fg-rgb), 1);
}

.room-chip-emoji {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.room-panel-grid--scene {
  grid-template-columns: repeat(2, 1fr);
}

.room-chip--scene {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 6px;
}

.room-chip-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  object-fit: cover;
  background: rgba(var(--dock-fg-rgb), 0.08);
}

.room-panel-fx-row {
  display: flex;
  gap: 6px;
}

.room-fx-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border-radius: 10px;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.12);
  background: rgba(var(--dock-fg-rgb), 0.04);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.room-fx-btn:hover {
  border-color: rgba(192, 132, 252, 0.5);
}

.room-fx-btn--active {
  border-color: rgba(244, 114, 182, 0.65);
  background: rgba(244, 114, 182, 0.16);
  transform: scale(1.05);
}

.room-roam-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.12);
  background: rgba(var(--dock-fg-rgb), 0.04);
  color: rgba(var(--dock-fg-rgb), 0.85);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.room-roam-row:hover {
  border-color: rgba(192, 132, 252, 0.5);
}

.room-roam-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.room-switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(var(--dock-fg-rgb), 0.18);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.room-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(var(--dock-fg-rgb), 0.85);
  transition: transform 0.2s ease;
}

.room-switch--on {
  background: rgba(244, 114, 182, 0.75);
}

.room-switch--on .room-switch-knob {
  transform: translateX(14px);
  background: #fff;
}

@media (max-width: 640px) {
  .room-panel-toggle {
    bottom: 7.5rem;
  }

  .room-panel {
    bottom: 10.25rem;
    max-height: 56vh;
  }

  .room-panel-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ── Voice-mode bottom bar — hero mic + mode-swap toggle ─────────────────
   Occupies the same slot .ayra-bottombar uses in text mode (AyraRoom.css).
   Floats directly over the avatar, so it uses the invariant dock tokens
   (app-tokens.css) rather than the theme-flipping --mobile-* set, matching
   CanvasMicButton's own styling. */
.ayra-voicebar {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 22px;
  pointer-events: auto;
  transition: transform 0.25s ease-out, opacity 0.2s ease-out;
}

.ayra-voicebar--hidden {
  transform: translateX(-50%) translateY(calc(100% + 2.5rem));
  opacity: 0;
  pointer-events: none;
}

.ayra-voicebar-keyboard-btn,
.ayra-voicebar-spacer {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.ayra-voicebar-keyboard-btn {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.16);
  background: rgba(var(--dock-bg-rgb), 0.55);
  color: rgba(var(--dock-fg-rgb), 0.78);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, color 0.2s ease;
}

.ayra-voicebar-keyboard-btn:hover {
  transform: translateY(-1px);
  color: rgb(var(--dock-fg-rgb));
}

.ayra-voicebar-keyboard-btn:active {
  transform: scale(0.95);
}

@media (max-height: 700px) {
  .ayra-voicebar {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ayra-voicebar {
    transition: none;
  }
}
.mv-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mobile-bg-card);
  border: 1px solid var(--mobile-border-default);
  border-radius: var(--mobile-radius-input);
  padding: 13px 16px;
  box-shadow: var(--mobile-shadow-surface);
  cursor: text;
}

.mv-input__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--mobile-text-tertiary);
}

.mv-input__field {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mobile-font-body);
  font-size: 14px;
  color: var(--mobile-text-primary);
}

.mv-input__field::placeholder {
  color: var(--mobile-text-tertiary);
}
.mv-button {
  font-family: var(--mobile-font-body);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.mv-button:active {
  transform: scale(0.97);
}

.mv-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.mv-button--primary {
  background: var(--mobile-primary-gradient);
  color: var(--mobile-on-primary);
  border-radius: var(--mobile-radius-pill);
  padding: 15px 30px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--mobile-shadow-glow-primary);
}

.mv-button--secondary {
  background: var(--mobile-btn-secondary-bg);
  color: var(--mobile-text-primary);
  border: 1.5px solid var(--mobile-border-strong);
  border-radius: var(--mobile-radius-pill);
  padding: 14px 28px;
  font-weight: 600;
  font-size: 15px;
}

.mv-button--icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mobile-bg-card);
  border: 1px solid var(--mobile-border-default);
  color: var(--mobile-primary);
  padding: 0;
}
.mv-bubble {
  max-width: 78%;
  padding: 14px 18px;
  font-family: var(--mobile-font-body);
  font-size: 15px;
  line-height: 1.5;
}

.mv-bubble--companion {
  align-self: flex-start;
  background: var(--mobile-bg-card-alt);
  border: 1px solid var(--mobile-border-accent);
  border-radius: 20px 20px 20px 6px;
  color: var(--mobile-text-primary);
}

.mv-bubble--user {
  align-self: flex-end;
  background: var(--mobile-primary-gradient);
  border-radius: 20px 20px 6px 20px;
  color: var(--mobile-on-primary);
}
/* Anchored above the bottom bar's emoji button — same glass-card treatment
   as the rest of the AyraRoom floating chrome (theme-aware --mobile-* tokens,
   this component always sits over the live avatar backdrop). */
.emoji-picker {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(272px, 80vw);
  padding: 10px;
  border-radius: 16px;
  background: var(--mobile-overlay);
  background: color-mix(in srgb, var(--mobile-bg-card-alt) 88%, transparent);
  border: 1px solid var(--mobile-border-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--mobile-shadow-surface);
  animation: emoji-picker-rise 160ms cubic-bezier(0.22, 1, 0.4, 1) both;
}

@keyframes emoji-picker-rise {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-picker {
    animation: none;
  }
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.emoji-picker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.emoji-picker-btn:hover {
  background: color-mix(in srgb, var(--mobile-primary) 16%, transparent);
}

.emoji-picker-btn:active {
  transform: scale(0.9);
}
.companion-screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  overflow: hidden;
}

/* ── Avatar stage (full-bleed background) ─────────────────────────────── */
.companion-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.companion-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      52% 46% at 47% 40%,
      rgba(var(--purple-rgb), 0.22),
      rgba(var(--pink-rgb), 0.1) 45%,
      rgba(var(--bg-rgb), 0) 72%
    ),
    radial-gradient(120% 90% at 50% 120%, rgba(var(--purple-rgb), 0.14), rgba(var(--bg-rgb), 0) 60%);
  transition: opacity 0.6s ease;
  animation: companion-glow-breathe 7s ease-in-out infinite;
}

.companion-glow--speaking {
  animation: companion-glow-pulse 2.4s ease-in-out infinite;
}

@keyframes companion-glow-breathe {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

@keyframes companion-glow-pulse {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* Until the session starts, the Enter screen owns the view — keep the header and
   dock out of the way (and non-interactive), then fade them in after Enter.
   Opacity-only so the dock's translateX(-50%) centering is preserved. */
.companion-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Toggle pill — floats just above the dock bottom edge.
   Visible only when the dock is hidden (dock--visible hides it when controls are shown). */
.dock-toggle-pill {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0.7rem;
  transform: translateX(-50%);
  width: 44px;
  height: 14px;
  border-radius: 999px;
  background: rgba(var(--dock-fg-rgb), 0.12);
  border: 1px solid rgba(var(--dock-fg-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: rgba(var(--dock-fg-rgb), 0.5);
  pointer-events: auto;
  transition: background 0.15s, opacity 0.25s;
  opacity: 1;
}

.dock-toggle-pill svg {
  transform: rotate(-90deg);
  width: 10px;
  height: 10px;
}

.dock-toggle-pill--visible {
  opacity: 0;
  pointer-events: none;
}

.dock-toggle-pill:hover {
  background: rgba(var(--dock-fg-rgb), 0.24);
}

/* Chat history now lives in the .ayra-chat-overlay/.ayra-chat-panel right-edge
   drawer (AyraRoom.css) — the old centered floating .companion-chat sheet was
   removed since it overlapped the lower-third/caption band. */

@media (max-width: 768px) {
  .companion-glow {
    background:
      radial-gradient(
        62% 30% at 50% 24%,
        rgba(var(--purple-rgb), 0.24),
        rgba(var(--pink-rgb), 0.1) 50%,
        rgba(var(--bg-rgb), 0) 78%
      );
  }
}
/* ── New Live Session floating chrome ────────────────────────────────────
   Everything below styles the ayra-mobile-desgin "Live Session" reskin.
   Tokens only (--mobile-*, styles/tokens.css) — this chrome must track the
   system/light/dark theme. The stage/dock/chat chrome underneath (VRMCanvas,
   .companion-glow, .companion-chat, .companion-dock) is untouched legacy CSS
   living in CompanionScreen.css — left as-is per plan. */

/* ── Floating chrome container — shrinks to make room for the desktop
   NavRail (72px/224px, z-index:20) so nothing underneath ever sits under
   it; every child's left:50%/right-anchored math re-centers automatically
   within the narrowed box. Full-bleed below NavRail's own 760px breakpoint. */
.ayra-live-chrome {
  position: absolute;
  inset: 0;
  /* This wrapper now spans the full stage (see NavRail-offset comment below),
     so it must NOT itself intercept clicks — otherwise it silently swallows
     everything meant for elements underneath it in .companion-stage (e.g.
     the VRM zoom-cycle button). Every interactive child group opts back in
     with its own pointer-events: auto. */
  pointer-events: none;
}

@media (min-width: 760px) {
  .ayra-live-chrome {
    left: var(--nav-rail-width, 72px);
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ── Top floating pills (menu/download/share · audio) ────────────────────── */
.ayra-top-pills {
  position: absolute;
  z-index: 6;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.ayra-pill-group {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.ayra-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--mobile-overlay);
  background: color-mix(in srgb, var(--mobile-bg-frame) 55%, transparent);
  border: 1px solid var(--mobile-border-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--mobile-text-primary);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: var(--mobile-shadow-surface);
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.ayra-pill:hover {
  transform: translateY(-1px);
}

.ayra-pill:active {
  transform: scale(0.95);
}

.ayra-pill--accent {
  border-color: var(--mobile-border-accent);
  color: var(--mobile-primary);
}

/* ── Right-edge vertical stack (camera-flip · mode) — stubs, per plan ────── */
.ayra-side-stack {
  position: absolute;
  z-index: 6;
  right: 16px;
  top: calc(200px + env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

.ayra-side-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mobile-overlay);
  background: color-mix(in srgb, var(--mobile-bg-frame) 55%, transparent);
  border: 1px solid var(--mobile-border-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--mobile-text-primary);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.ayra-side-btn:active {
  transform: scale(0.95);
}

.ayra-side-btn--active {
  border-color: var(--mobile-border-accent);
  color: var(--mobile-primary);
}

/* ── Lower third — listening waveform / thinking dots. Speaking text lives
   solely in SubtitleOverlay (on-canvas, synced to actual TTS playback) —
   there used to be a duplicate .ayra-speech-bubble here showing the same
   reply text a second time; removed rather than reconciling two
   independent state sources. */
.ayra-listening-pill,
.ayra-thinking-pill {
  position: absolute;
  /* Just above SubtitleOverlay's z-index:30 (which was raised from bottom:20%
     to 27% to create more room in the first place, see SubtitleOverlay.css) —
     belt-and-suspenders so this time-critical status pill always wins any
     residual overlap with caption text instead of being covered by it.
     NOT lowered further: .ayra-session-timer sits at bottom:130px on this
     same centered axis, so pulling this any closer to the bottom bar would
     trade the caption collision for a session-timer collision instead. */
  z-index: 32;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(172px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mobile-overlay);
  background: color-mix(in srgb, var(--mobile-bg-card-alt) 65%, transparent);
  border: 1px solid var(--mobile-border-accent);
  border-radius: var(--mobile-radius-pill);
  padding: 12px 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--mobile-text-primary);
  font-family: var(--mobile-font-body);
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--mobile-shadow-surface);
  pointer-events: none;
  white-space: nowrap;
}

.ayra-wavebars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}

.ayra-wavebar {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--mobile-primary);
  animation: ayra-wavebar 0.9s ease-in-out infinite;
}

@keyframes ayra-wavebar {
  0%, 100% { transform: scaleY(0.3); }
  50%       { transform: scaleY(1); }
}

.ayra-thinking-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ayra-thinking-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mobile-gold);
  animation: ayra-thinking-dot 1.2s ease-in-out infinite;
}

.ayra-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.ayra-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ayra-thinking-dot {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .ayra-wavebar,
  .ayra-thinking-dots span {
    animation: none;
  }
}

/* ── Session elapsed timer ────────────────────────────────────────────── */
.ayra-session-timer {
  position: absolute;
  z-index: 6;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(130px + env(safe-area-inset-bottom, 0px));
  background: var(--mobile-overlay);
  background: color-mix(in srgb, var(--mobile-bg-frame) 45%, transparent);
  border: 1px solid var(--mobile-border-default);
  border-radius: var(--mobile-radius-pill);
  padding: 5px 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mobile-font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--mobile-text-secondary);
  pointer-events: none;
}

/* ── Bottom message bar (input · emoji stub · send) ───────────────────── */
.ayra-bottombar {
  position: absolute;
  z-index: 6;
  left: 18px;
  right: 18px;
  bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  transition: transform 0.25s ease-out, opacity 0.2s ease-out;
}

.ayra-bottombar--hidden {
  transform: translateY(calc(100% + 2.5rem));
  opacity: 0;
  pointer-events: none;
}

/* Back-to-voice button — the text-mode mirror of VoiceFirstBar's keyboard
   toggle (VoiceFirstBar.css). Same size/position role and the same dock-glass
   treatment (not --mobile-*), so swapping modes reads as one control with two
   states rather than two different-looking buttons. */
.ayra-voice-switch-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--dock-fg-rgb), 0.16);
  background: rgba(var(--dock-bg-rgb), 0.55);
  color: rgba(var(--dock-fg-rgb), 0.78);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.15s ease, color 0.2s ease;
}

.ayra-voice-switch-btn:hover {
  transform: translateY(-1px);
  color: rgb(var(--dock-fg-rgb));
}

.ayra-voice-switch-btn:active {
  transform: scale(0.95);
}

.ayra-bottombar .ayra-bottombar-input {
  flex: 1;
  min-width: 0;
  background: var(--mobile-overlay);
  background: color-mix(in srgb, var(--mobile-bg-card-alt) 60%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--mobile-border-strong);
}

.ayra-emoji-anchor {
  position: relative;
  flex-shrink: 0;
}

.ayra-emoji-scrim {
  position: fixed;
  inset: 0;
  z-index: 6;
  background: transparent;
}

.ayra-emoji-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--mobile-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.ayra-emoji-btn:hover {
  color: var(--mobile-text-primary);
}

.ayra-bottombar .ayra-send-btn.mv-button--icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: var(--mobile-primary-gradient);
  color: var(--mobile-on-primary);
  box-shadow: var(--mobile-shadow-glow-primary);
}

/* ── Conversation starters — float above the input bar until first send ── */
.ayra-starters {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: min(92vw, 640px);
  padding: 0 0.75rem;
  pointer-events: none; /* the chips re-enable — gaps stay click-through to the stage */
}

.ayra-starter-chip {
  pointer-events: auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: rgba(var(--bg-rgb), 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(var(--fg-rgb), 0.78);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.ayra-starter-chip:hover:not(:disabled) {
  border-color: rgba(var(--pink-soft-rgb), 0.5);
  color: var(--text-primary);
}

.ayra-starter-chip:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 640px) {
  .ayra-starters {
    bottom: calc(8.8rem + env(safe-area-inset-bottom, 0px));
  }

  .ayra-starter-chip {
    font-size: 0.78rem;
    padding: 7px 12px;
  }
}

/* ── Recent exchange — takes StarterChips' slot once the chat has started ── */
.ayra-recent-exchange {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(84vw, 480px);
  pointer-events: none;
}

.ayra-recent-exchange .mv-bubble {
  max-width: 100%;
  box-shadow: var(--mobile-shadow-surface);
  /* Keep the recap compact — this is a "what we just said" glance, not a
     replacement for the full transcript sheet. Clamped (not scrollable) so
     it never grows tall enough to swallow the input bar below it; ellipsis
     signals truncation instead of the text just stopping mid-sentence. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .ayra-recent-exchange {
    bottom: calc(8.8rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Bottom legibility scrim — busy scene art behind the input bar/recap/
   starters otherwise fights with the text; a soft gradient keeps it readable
   without a hard panel edge. Non-interactive, sits under the z:6 chrome. */
.ayra-bottom-scrim {
  position: absolute;
  z-index: 5;
  inset: auto 0 0 0;
  height: 44vh;
  background: linear-gradient(to top, rgba(7, 7, 11, 0.6), rgba(7, 7, 11, 0));
  pointer-events: none;
}

/* Short/narrow viewports — the mockup's fixed px offsets were tuned for a
   844px-tall phone; tighten the lower-third/timer stack so it never crowds
   the input bar on smaller devices. */
@media (max-height: 700px) {
  .ayra-side-stack {
    top: calc(160px + env(safe-area-inset-top, 0px));
  }

  .ayra-listening-pill,
  .ayra-thinking-pill {
    bottom: calc(180px + env(safe-area-inset-bottom, 0px));
  }

  .ayra-session-timer {
    bottom: calc(102px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Toast — download/share feedback ──────────────────────────────────── */
.ayra-toast {
  position: fixed;
  z-index: 45;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding: 10px 16px;
  border-radius: var(--mobile-radius-pill);
  background: var(--mobile-overlay);
  background: color-mix(in srgb, var(--mobile-bg-card-alt) 85%, transparent);
  border: 1px solid var(--mobile-border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--mobile-text-primary);
  font-family: var(--mobile-font-body);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--mobile-shadow-surface);
  pointer-events: none;
  animation: ayra-toast-rise 200ms cubic-bezier(0.22, 1, 0.4, 1) both;
}

@keyframes ayra-toast-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ayra-toast {
    animation: none;
  }
}

/* ── Session menu — personality, voice/camera, room, display, usage ─────── */
.ayra-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: flex-end;
  animation: ayra-menu-fade 0.18s ease both;
}

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

.ayra-menu {
  width: min(360px, 88vw);
  height: 100vh;
  height: 100dvh;
  background: var(--mobile-bg-frame);
  border-left: 1px solid var(--mobile-border-default);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.4);
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: ayra-menu-slide 0.22s cubic-bezier(0.22, 1, 0.4, 1) both;
}

@keyframes ayra-menu-slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ayra-menu-overlay,
  .ayra-menu,
  .ayra-chat-overlay,
  .ayra-chat-panel {
    animation: none;
  }
}

/* ── Chat history — right-edge drawer (mirrors the session menu above),
   replacing the old .companion-chat sheet that floated centered over the
   stage and collided with the lower-third/caption band. ──────────────── */
.ayra-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: flex-end;
  animation: ayra-menu-fade 0.18s ease both;
}

.ayra-chat-panel {
  width: min(380px, 88vw);
  height: 100vh;
  height: 100dvh;
  background: var(--mobile-bg-frame);
  border-left: 1px solid var(--mobile-border-default);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(16px + env(safe-area-inset-bottom, 0px));
  animation: ayra-menu-slide 0.22s cubic-bezier(0.22, 1, 0.4, 1) both;
}

.ayra-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding-bottom: 14px;
}

.ayra-chat-title {
  font-family: var(--mobile-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--mobile-text-primary);
}

.ayra-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ayra-menu-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ayra-menu-title {
  font-family: var(--mobile-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--mobile-text-primary);
}

.ayra-menu-subtitle {
  font-family: var(--mobile-font-body);
  font-size: 12px;
  color: var(--mobile-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ayra-menu-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--mobile-bg-card);
  border: 1px solid var(--mobile-border-default);
  color: var(--mobile-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.ayra-menu-close:hover {
  color: var(--mobile-text-primary);
}

.ayra-menu-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ayra-menu-section-title {
  font-family: var(--mobile-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mobile-text-tertiary);
}

.ayra-menu-persona-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ayra-menu-persona-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--mobile-radius-pill);
  border: 1px solid var(--mobile-border-default);
  background: var(--mobile-chip-bg);
  color: var(--mobile-text-secondary);
  font-family: var(--mobile-font-body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.ayra-menu-persona-chip:hover:not(:disabled) {
  border-color: var(--mobile-border-accent);
  color: var(--mobile-text-primary);
}

.ayra-menu-persona-chip--active {
  border-color: var(--mobile-primary);
  background: var(--mobile-primary-tint);
  color: var(--mobile-text-primary);
}

.ayra-menu-persona-chip--locked {
  border-style: dashed;
}

.ayra-menu-persona-chip-req {
  font-size: 11px;
  color: var(--mobile-primary);
}

.ayra-menu-persona-chip:disabled {
  opacity: 0.6;
  cursor: default;
}

.ayra-menu-error {
  margin: 0;
  font-size: 12px;
  color: var(--mobile-primary);
}

.ayra-menu-row-embed {
  border-radius: var(--mobile-radius-card-sm);
  background: var(--mobile-bg-card);
  border: 1px solid var(--mobile-border-subtle);
  padding: 10px 4px;
}

.ayra-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--mobile-radius-card-sm);
  background: var(--mobile-bg-card);
  border: 1px solid var(--mobile-border-subtle);
  color: var(--mobile-text-primary);
  font-family: var(--mobile-font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease;
}

.ayra-menu-row:hover {
  border-color: var(--mobile-border-accent);
}

.ayra-menu-usage-cta {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--mobile-radius-pill);
  background: var(--mobile-primary-tint);
  border: 1px solid var(--mobile-border-accent);
  color: var(--mobile-primary);
  font-family: var(--mobile-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.ayra-menu-usage-text {
  font-family: var(--mobile-font-body);
  font-size: 12px;
}
/* ─── AyraVRMStage ───────────────────────────────────────────────────────────
   Wraps the live VRM canvas in the onboarding flow.
   Mirrors AyraAvatarPlaceholder sizing so screens are swap-compatible.
   The canvas is clipped to a circle by overflow:hidden on vrm-stage-inner.
   ─────────────────────────────────────────────────────────────────────────── */

.ayra-vrm-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ayra-vrm-stage.size-small  { width: 80px;  height: 80px; }
.ayra-vrm-stage.size-medium { width: 140px; height: 140px; }
.ayra-vrm-stage.size-large  { width: 200px; height: 200px; }

/* Inner circle: clips the canvas to a circle and shows the accent border/glow */
.vrm-stage-inner {
  position: relative;
  z-index: 1;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  border: 1.5px solid transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hard dark base under the (transparent) WebGL canvas — the avatar slot can never
     paint white, even if the inline gradient or the canvas fail to present a frame. */
  background-color: #07050F;
  transition: border-color 0.6s ease, box-shadow 0.6s ease, background 0.6s ease;
}

/* ✦ placeholder shown while VRM loads */
.vrm-stage-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
  line-height: 1;
  z-index: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.vrm-stage-mark.hidden {
  opacity: 0;
}

/* Canvas fills the circle; revealed once VRM idle animation is playing */
.vrm-stage-canvas {
  /* Force canvas to fill its circular container regardless of buffer dimensions */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 0.9s ease;
  z-index: 2;
  display: block;
  background: transparent;
}

.vrm-stage-canvas.visible {
  opacity: 1;
}

/* Ambient glow behind the avatar circle */
.vrm-stage-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.6s ease;
  z-index: 0;
}

/* ─── Pulsing (ScreenEntering) ───────────────────────────────────────────── */
@keyframes vrmPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.85; }
}

.ayra-vrm-stage.pulsing .vrm-stage-inner {
  animation: vrmPulse 2s ease-in-out infinite;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ayra-vrm-stage.pulsing .vrm-stage-inner {
    animation: none;
  }

  .vrm-stage-canvas,
  .vrm-stage-mark,
  .vrm-stage-inner {
    transition: none;
  }
}
.ayra-avatar-ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ayra-avatar-ph.size-small  { width: 80px;  height: 80px; }
.ayra-avatar-ph.size-medium { width: 140px; height: 140px; }
.ayra-avatar-ph.size-large  { width: 200px; height: 200px; }

.avatar-ph-inner {
  position: relative;
  z-index: 1;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.6s ease, box-shadow 0.6s ease, background 0.6s ease;
}

.avatar-ph-mark {
  font-size: 1.4em;
  line-height: 1;
  transition: color 0.6s ease;
}

.avatar-ph-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.6s ease;
}

/* Pulsing state used on ScreenEntering */
@keyframes avatarPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.85; }
}

.ayra-avatar-ph.pulsing .avatar-ph-inner {
  animation: avatarPulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ayra-avatar-ph.pulsing .avatar-ph-inner {
    animation: none;
  }
}
.screen-arrival {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.arrival-brand {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.arrival-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 12px;
  line-height: 1.2;
}

.arrival-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0 0 36px;
  line-height: 1.6;
}

.screen-arrival .ob-btn-primary {
  margin-bottom: 14px;
}
.screen-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  width: 100%;
}

.screen-name .ob-input-group {
  margin-bottom: 28px;
}

.screen-name .ob-btn-primary {
  width: 100%;
}
.screen-nickname {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  width: 100%;
}

.screen-nickname .ob-input-group {
  margin-bottom: 16px;
}

.nickname-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}

.nickname-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--purple-rgb), 0.35);
  background: rgba(var(--bg-rgb), 0.6);
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.nickname-chip:hover {
  border-color: rgba(var(--purple-rgb), 0.65);
  color: var(--text-primary);
}

.nickname-chip.active {
  border-color: var(--ob-accent, #E8619A);
  background: color-mix(in srgb, var(--ob-accent, #E8619A) 12%, transparent);
  color: var(--ob-accent, #E8619A);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .nickname-chip.active {
    background: rgba(232, 97, 154, 0.12);
  }
}

.screen-nickname .ob-btn-primary {
  width: 100%;
  margin-bottom: 14px;
}
.screen-personality {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  width: 100%;
}

.personality-quote {
  min-height: 52px;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.personality-quote.visible {
  opacity: 1;
  transform: translateY(0);
}

.personality-quote-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.archetype-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-bottom: 24px;
}

.archetype-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  background: rgba(var(--bg-rgb), 0.7);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  text-align: center;
}

.archetype-card:hover {
  border-color: rgba(var(--purple-rgb), 0.4);
  background: rgba(var(--bg-rgb), 0.9);
}

.archetype-card.selected {
  background: rgba(var(--bg-rgb), 0.9);
}

.archetype-card--locked {
  cursor: default;
  opacity: 0.55;
}

.archetype-card--locked:hover {
  border-color: rgba(var(--purple-rgb), 0.2);
  background: rgba(var(--bg-rgb), 0.7);
}

.archetype-lock-badge {
  margin-top: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}

.archetype-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1;
  transition: color 0.25s ease;
}

.archetype-en {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.archetype-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.screen-personality .ob-btn-primary {
  width: 100%;
  transition: background 0.4s ease, opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .personality-quote {
    transition: none;
  }
}
.screen-interests {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  width: 100%;
}

.interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
  width: 100%;
}

.interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--purple-rgb), 0.35);
  background: rgba(var(--bg-rgb), 0.6);
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.interest-chip:hover {
  border-color: rgba(var(--purple-rgb), 0.65);
  color: var(--text-primary);
}

.interest-chip.active {
  border-color: var(--ob-accent, #E8619A);
  background: color-mix(in srgb, var(--ob-accent, #E8619A) 12%, transparent);
  color: var(--ob-accent, #E8619A);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .interest-chip.active {
    background: rgba(232, 97, 154, 0.12);
  }
}

.interest-emoji {
  font-size: 1rem;
  line-height: 1;
}

.screen-interests .ob-btn-primary {
  width: 100%;
}
.screen-aboutyou {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  width: 100%;
}

.aboutyou-group {
  width: 100%;
  margin-bottom: 22px;
}

.aboutyou-group-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 10px;
  text-align: center;
}

/* ── Age confirmation row ── */
.aboutyou-age-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--purple-rgb), 0.35);
  background: rgba(var(--bg-rgb), 0.6);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.aboutyou-age-row:hover {
  border-color: rgba(var(--purple-rgb), 0.65);
}

.aboutyou-age-row.confirmed {
  border-color: var(--ob-accent, #E8619A);
  background: color-mix(in srgb, var(--ob-accent, #E8619A) 10%, transparent);
}

.aboutyou-age-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid rgba(var(--purple-rgb), 0.5);
  background: rgba(var(--bg-rgb), 0.8);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s;
}

.aboutyou-age-row.confirmed .aboutyou-age-box {
  border-color: var(--ob-accent, #E8619A);
  background: var(--ob-accent, #E8619A);
}

/* ── Chip rows (language + referral) ── */
.aboutyou-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.aboutyou-chip {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(var(--purple-rgb), 0.35);
  background: rgba(var(--bg-rgb), 0.6);
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.aboutyou-chip:hover {
  border-color: rgba(var(--purple-rgb), 0.65);
  color: var(--text-primary);
}

.aboutyou-chip.active {
  border-color: var(--ob-accent, #E8619A);
  background: color-mix(in srgb, var(--ob-accent, #E8619A) 12%, transparent);
  color: var(--ob-accent, #E8619A);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .aboutyou-age-row.confirmed {
    background: rgba(232, 97, 154, 0.1);
  }

  .aboutyou-chip.active {
    background: rgba(232, 97, 154, 0.12);
  }
}

.screen-aboutyou .ob-btn-primary {
  width: 100%;
  margin-top: 4px;
}

/* Short viewports: tighten the vertical rhythm so the whole screen tends to fit;
   anything that still overflows scrolls via .ob-root (never clipped). */
@media (max-height: 560px) {
  .aboutyou-group {
    margin-bottom: 14px;
  }

  .aboutyou-group-label {
    margin-bottom: 6px;
  }
}
.screen-paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  text-align: center;
}

.paywall-heading {
  margin-bottom: 8px;
}

.screen-paywall .ob-subtext {
  margin-bottom: 28px;
}

/* ── Self-serve 24h Koi trial banner ──────────────────────────────────────── */
.paywall-trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(var(--success-rgb), 0.07);
  border: 1px solid rgba(var(--success-rgb), 0.3);
  border-radius: 14px;
  padding: 14px 18px;
  width: 100%;
  margin-bottom: 16px;
  text-align: left;
}

.paywall-trial-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paywall-trial-text strong {
  color: var(--success);
  font-size: 0.9rem;
  font-weight: 700;
}

.paywall-trial-text span {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.paywall-trial-cta {
  flex-shrink: 0;
  background: rgba(var(--success-rgb), 0.15);
  border: 1px solid rgba(var(--success-rgb), 0.45);
  color: var(--success);
  border-radius: 10px;
  padding: 9px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
  white-space: nowrap;
}

.paywall-trial-cta:hover:not(:disabled) {
  background: rgba(var(--success-rgb), 0.25);
  transform: translateY(-1px);
}

.paywall-trial-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.plan-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-bottom: 20px;
}

.plan-card {
  border: 1px solid rgba(var(--purple-rgb), 0.2);
  border-radius: 16px;
  background: rgba(var(--bg-rgb), 0.7);
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  outline: none;
}

.plan-card:hover {
  border-color: rgba(var(--purple-rgb), 0.38);
  background: rgba(var(--bg-rgb), 0.9);
}

.plan-card:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.plan-card.selected {
  background: rgba(var(--bg-rgb), 0.95);
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.plan-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  transition: color 0.25s ease;
}

.plan-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-en {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-price {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.plan-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.plan-tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0 0 10px;
  line-height: 1.4;
}

.plan-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  animation: featuresIn 0.3s ease forwards;
}

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

.feature-chip {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--purple-rgb), 0.25);
  background: rgba(var(--fg-rgb), 0.04);
}

.plan-cta {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.plan-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.plan-cta:active {
  transform: translateY(0);
}

/* Coupon input in selected plan card */
.plan-coupon {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.plan-coupon-row {
  display: flex;
  gap: 6px;
}

.plan-coupon-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(var(--purple-rgb), 0.25);
  background: rgba(var(--fg-rgb), 0.05);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  outline: none;
  transition: border-color 0.18s;
}

.plan-coupon-input::placeholder { color: rgba(var(--purple-rgb), 0.5); }
.plan-coupon-input:focus { border-color: rgba(var(--purple-rgb), 0.5); }

.plan-coupon-apply {
  padding: 7px 12px;
  border: 1px solid rgba(var(--purple-rgb), 0.4);
  border-radius: 9px;
  background: none;
  color: var(--purple);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.18s;
}

.plan-coupon-apply:disabled { opacity: 0.4; cursor: default; }

.plan-coupon-ok {
  margin: 0;
  font-size: 12px;
  color: var(--success);
}

.plan-coupon-error {
  margin: 0;
  font-size: 12px;
  color: var(--pink-soft);
}

/* Discounted price display */
.plan-price-discounted {
  color: var(--text-primary);
  font-weight: 700;
}

.plan-price-original {
  color: rgba(var(--purple-rgb), 0.6);
  text-decoration: line-through;
  margin: 0 2px;
}

.paywall-free {
  margin-bottom: 16px;
  font-size: 0.82rem;
}

.paywall-footnote {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: rgba(var(--purple-rgb), 0.55);
  margin: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .plan-features {
    animation: none;
  }
}
.screen-entering {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.entering-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
  margin: 0;
}
/* ─── Design Tokens (onboarding scope) ───────────────────────────────────────── */
/* Structure (bg/surface/text/muted) reads the shared theme tokens from
   fonts.css so this flow goes light in [data-theme='light']. Per-personality
   accent colors (PERSONALITY_COLORS in OnboardingScreen.tsx) intentionally
   stay fixed across themes — they're a character-selection feature, not a
   theme surface. */

/* ─── Root ──────────────────────────────────────────────────────────────────── */
.ob-root {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-void);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Scroll-safe vertical centering: the ::before/::after flex spacers center the
     avatar + content as a group when there's room, but collapse and let the root
     SCROLL (instead of clipping) when the viewport is too short — so content is
     never cut off on landscape phones / short windows. */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
}

.ob-root::-webkit-scrollbar {
  display: none;
}

.ob-root::before,
.ob-root::after {
  content: '';
  flex: 1 0 16px;
}

.ob-glow-blob {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 0.7s ease;
}

/* ─── Step dots ─────────────────────────────────────────────────────────────── */
.ob-step-dots {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.ob-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--purple-rgb), 0.3);
  transition: background 0.3s ease, transform 0.3s ease;
}

.ob-dot.active {
  background: var(--ob-accent, #E8619A);
  transform: scale(1.3);
}

.ob-dot.done {
  background: rgba(var(--purple-rgb), 0.65);
}

/* ─── Slide transition ──────────────────────────────────────────────────────── */
.ob-slide {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.ob-slide.visible {
  opacity: 1;
  transform: translateY(0);
}

.ob-slide.hidden {
  opacity: 0;
  transform: translateY(14px);
}

/* ─── Content container ─────────────────────────────────────────────────────── */
.ob-container {
  width: 100%;
  max-width: 400px;
  padding: 24px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Content sizes to its own natural height in ALL states. Overflow (e.g. the
     paywall on a short screen) is handled by the scrollable .ob-root, so the
     content height is NEVER coupled to the VRM's presence or readiness. */
}

/* ─── Shared typographic elements ───────────────────────────────────────────── */
.ob-step-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.ob-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 10px;
  line-height: 1.25;
  text-align: center;
}

.ob-subtext {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 28px;
  line-height: 1.6;
  text-align: center;
}

/* ─── Shared form elements ──────────────────────────────────────────────────── */
.ob-input-group {
  width: 100%;
}

.ob-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  background: rgba(var(--bg-rgb), 0.8);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  caret-color: var(--ob-accent, #E8619A);
}

.ob-input::placeholder {
  color: rgba(var(--purple-rgb), 0.5);
}

.ob-input:focus {
  border-color: var(--ob-accent, #E8619A);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ob-accent, #E8619A) 15%, transparent);
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .ob-input:focus {
    box-shadow: 0 0 0 3px rgba(232, 97, 154, 0.15);
  }
}

.ob-input-helper {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 8px 0 0;
  text-align: left;
}

/* ─── Shared buttons ────────────────────────────────────────────────────────── */
.ob-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #E8619A, #c84b82);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease, background 0.4s ease;
  min-width: 180px;
  text-align: center;
  line-height: 1;
}

.ob-btn-primary:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
}

.ob-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

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

.ob-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: rgba(var(--purple-rgb), 0.7);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
  border-radius: 8px;
}

.ob-btn-ghost:hover {
  color: var(--text-secondary);
}

.ob-btn-ghost:focus-visible {
  outline: 2px solid var(--ob-accent, #E8619A);
  outline-offset: 2px;
}

/* ─── VRM Stage wrapper ─────────────────────────────────────────────────────── */
/* The VRM stage is hoisted here (outside ob-slide) so it never unmounts during
   cross-fade transitions. On steps with no avatar it is removed from layout with
   display:none — the React node persists (no unmount), and AyraVRMStage pauses its
   render loop while hidden (see the `active` prop). The wrapper never caps or
   collapses the content container: content height is fully independent of the VRM. */
.ob-vrm-wrap {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.28s ease;
}

.ob-vrm-wrap.hidden {
  display: none;
}

/* ─── Tap-to-hear affordance (Screen 0, audio blocked by autoplay policy) ────── */
.ob-audio-hint {
  position: absolute;
  bottom: -2px;
  right: calc(50% - 110px); /* align near the avatar edge */
  background: rgba(var(--bg-rgb), 0.75);
  border: 1px solid rgba(var(--purple-rgb), 0.35);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.ob-audio-hint:hover {
  color: var(--ob-accent, #E8619A);
  border-color: var(--ob-accent, #E8619A);
}

/* When avatar is shown, give ob-slide a bit less slide-up transform so the
   two-part layout (VRM + content) doesn't over-travel */
.ob-slide.has-avatar.hidden {
  transform: translateY(8px);
}

/* ─── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ob-slide,
  .ob-glow-blob,
  .ob-dot,
  .ob-btn-primary,
  .ob-btn-ghost {
    transition: none;
  }

  .ob-slide.hidden {
    opacity: 1;
    transform: none;
  }

  .ob-vrm-wrap {
    transition: none;
  }
}

/* ─── Mobile adjustments ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ob-container {
    padding: 20px 18px 36px;
  }

  .ob-heading {
    font-size: 1.45rem;
  }
}

/* ─── Short viewports (landscape phones / short windows) ─────────────────────── */
/* The root already scrolls so nothing is ever clipped, but tightening the avatar
   and vertical rhythm here keeps the whole flow visible without scrolling on the
   common landscape-phone case. Heights are independent of the VRM either way. */
@media (max-height: 560px) {
  .ob-root::before,
  .ob-root::after {
    flex-basis: 8px;
  }

  .ob-vrm-wrap {
    margin-bottom: 12px;
  }

  .ayra-vrm-stage.size-large,
  .ayra-avatar-ph.size-large {
    width: 132px;
    height: 132px;
  }

  .ayra-vrm-stage.size-medium,
  .ayra-avatar-ph.size-medium {
    width: 104px;
    height: 104px;
  }

  .ob-container {
    padding: 12px 24px 20px;
  }

  .ob-subtext,
  .arrival-subtext {
    margin-bottom: 18px;
  }
}
.memory-scr {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  padding: 40px 40px 60px calc(72px + 40px);
  box-sizing: border-box;
}

.memory-scr__inner {
  width: 100%;
  max-width: 620px;
  position: relative;
}

/* ── Page title ── */
.memory-scr__page-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 32px;
}

/* ── Toast ── */
.memory-scr__toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--pink) 40%, transparent);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  animation: memory-toast-in 0.2s ease;
  max-width: 320px;
}

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

/* ── Sections ── */
.memory-scr__section {
  margin-bottom: 36px;
}

.memory-scr__section-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

/* ── Add form ── */
.memory-scr__section--add {
  margin-bottom: 40px;
}

.memory-scr__section--add .memory-scr__section-title {
  font-size: 0.93rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  color: var(--text-secondary);
}

.memory-scr__add-form {
  display: flex;
  gap: 10px;
}

.memory-scr__add-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 25%, transparent);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.93rem;
  outline: none;
  transition: border-color 0.15s;
}

.memory-scr__add-input:focus {
  border-color: var(--pink);
}

.memory-scr__add-input:disabled {
  opacity: 0.55;
}

.memory-scr__add-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.memory-scr__add-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.memory-scr__add-btn:hover:not(:disabled) {
  opacity: 0.88;
}

.memory-scr__add-err {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--red);
}

.memory-scr__add-err--forgotten {
  color: var(--gold);
}

/* ── Load / error states ── */
.memory-scr__loading {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 24px 0;
}

.memory-scr__load-error {
  margin: 24px 0;
}

.memory-scr__load-error p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--red);
  margin: 0 0 10px;
}

.memory-scr__retry-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 35%, transparent);
  border-radius: 6px;
  padding: 6px 14px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.memory-scr__retry-btn:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* ── Empty states ── */
.memory-scr__empty-all {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 36px;
}

.memory-scr__empty-section {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

/* ── Memory cards ── */
.memory-scr__card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memory-scr__card {
  background: var(--bg-surface);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent);
  transition: border-color 0.15s;
}

.memory-scr__card:hover {
  border-color: color-mix(in srgb, var(--text-secondary) 25%, transparent);
}

.memory-scr__card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.memory-scr__card-text {
  flex: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.memory-scr__forget-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 30%, transparent);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.memory-scr__forget-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--red) 60%, transparent);
  color: var(--red);
}

.memory-scr__forget-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.memory-scr__card-err {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--red);
}

/* ── Danger zone ── */
.memory-scr__danger-zone {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--red) 20%, transparent);
}

.memory-scr__danger-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--red) 50%, transparent);
  border-radius: 8px;
  padding: 8px 18px;
  color: var(--red);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.memory-scr__danger-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border-color: var(--red);
}

.memory-scr__danger-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.memory-scr__reset-confirm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.memory-scr__reset-warning {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.memory-scr__reset-error {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--red);
  margin: 0;
}

.memory-scr__reset-actions {
  display: flex;
  gap: 10px;
}

.memory-scr__ghost-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 30%, transparent);
  border-radius: 8px;
  padding: 8px 18px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.memory-scr__ghost-btn:hover:not(:disabled) {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.memory-scr__ghost-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Responsive ── */
@media (max-width: 759px) {
  .memory-scr {
    padding: 64px 20px 60px 20px;
  }

  .memory-scr__toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }

  .memory-scr__add-form {
    flex-direction: column;
  }

  .memory-scr__add-btn {
    width: 100%;
  }
}

@media (min-width: 760px) and (max-width: 1100px) {
  .memory-scr {
    padding: 40px 32px 60px calc(72px + 32px);
  }
}
.mv-card {
  background: var(--mobile-bg-card);
  border: 1px solid var(--mobile-border-subtle);
  box-shadow: var(--mobile-shadow-surface);
  padding: 16px;
}

.mv-card--sm {
  border-radius: var(--mobile-radius-card-sm);
}

.mv-card--md {
  border-radius: var(--mobile-radius-card);
}

.mv-card--lg {
  border-radius: var(--mobile-radius-card-lg);
  padding: 24px;
}
.mv-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--mobile-radius-pill);
  padding: 11px 16px;
  border: 1px solid var(--mobile-chip-border);
  background: var(--mobile-chip-bg);
  color: var(--mobile-text-secondary);
  font-family: var(--mobile-font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.mv-chip__icon {
  display: flex;
}

.mv-chip--emphasized {
  background: var(--mobile-primary-gradient);
  border-color: transparent;
  color: var(--mobile-on-primary);
  font-weight: 700;
  box-shadow: var(--mobile-shadow-glow-primary);
}
.mv-coinpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mobile-chip-bg);
  border: 1px solid var(--mobile-chip-border);
  border-radius: var(--mobile-radius-pill);
  padding: 5px 6px 5px 12px;
}

.mv-coinpill__balance {
  font-family: var(--mobile-font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--mobile-text-primary);
}

.mv-coinpill__add {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--mobile-primary-gradient);
  color: var(--mobile-on-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mv-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mv-meter__row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mobile-text-secondary);
  font-family: var(--mobile-font-body);
}

.mv-meter__value {
  font-weight: 600;
}

.mv-meter__value--primary {
  color: var(--mobile-primary);
}

.mv-meter__value--secondary {
  color: var(--mobile-secondary);
}

.mv-meter__track {
  width: 100%;
  height: 8px;
  border-radius: var(--mobile-radius-pill);
  position: relative;
  overflow: hidden;
}

.mv-meter__track--primary {
  background: var(--mobile-gauge-track);
}

.mv-meter__track--secondary {
  background: var(--mobile-track-secondary);
}

.mv-meter__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: var(--mobile-radius-pill);
}

.mv-meter__fill--primary {
  background: var(--mobile-primary-gradient);
}

.mv-meter__fill--secondary {
  background: var(--mobile-secondary-gradient);
}
.mv-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--mobile-overlay);
  backdrop-filter: blur(10px);
  border: 1px solid var(--mobile-border-subtle);
  border-radius: var(--mobile-radius-pill);
  padding: 10px 8px;
  box-shadow: var(--mobile-shadow-floating);
}

.mv-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 4px 8px;
  color: var(--mobile-text-tertiary);
  font-family: var(--mobile-font-body);
  cursor: pointer;
  position: relative;
}

.mv-tabbar__item--active {
  color: var(--mobile-primary);
}

.mv-tabbar__label {
  font-size: 10px;
}

.mv-tabbar__item--active .mv-tabbar__label {
  font-weight: 600;
}

.mv-tabbar__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mobile-primary);
}

.mv-tabbar__fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid var(--mobile-bg-base);
  background: var(--mobile-primary-gradient);
  color: var(--mobile-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -28px;
  cursor: pointer;
  box-shadow: var(--mobile-shadow-glow-primary);
  animation: mv-fab-pulse 2.6s ease-in-out infinite;
}

@keyframes mv-fab-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--mobile-primary-glow), var(--mobile-shadow-glow-primary);
  }
  50% {
    box-shadow: 0 0 0 10px var(--mobile-primary-glow-transparent), var(--mobile-shadow-glow-primary);
  }
}
.home-hub {
  min-height: 100%;
  background: var(--mobile-bg-base);
  color: var(--mobile-text-primary);
  font-family: var(--mobile-font-body);
  padding: 20px 20px 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 760px) {
  .home-hub {
    max-width: none;
    padding-left: calc(72px + 20px);
  }
}

.home-hub__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-hub__topbar-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-hub__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  color: var(--mobile-text-secondary);
  cursor: pointer;
}

.home-hub__avatar-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--mobile-border-accent);
  background: radial-gradient(circle at 40% 35%, var(--mobile-primary-tint), var(--mobile-secondary-tint) 60%, transparent 85%),
    var(--mobile-bg-card);
  cursor: pointer;
  padding: 0;
}

.home-hub__hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-hub__hero-media {
  position: relative;
  width: 100%;
  height: 168px;
  border-radius: var(--mobile-radius-card-sm);
  overflow: hidden;
  background: repeating-linear-gradient(
    135deg,
    var(--mobile-media-stripe-a),
    var(--mobile-media-stripe-a) 10px,
    var(--mobile-media-stripe-b) 10px,
    var(--mobile-media-stripe-b) 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hub__hero-media-label {
  font-family: var(--mobile-font-body), monospace;
  font-size: 12px;
  color: var(--mobile-media-label);
  text-align: center;
  padding: 0 20px;
}

.home-hub__hero-play {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--mobile-bg-base) 55%, transparent);
  backdrop-filter: blur(4px);
  color: var(--mobile-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hub__hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-hub__hero-name {
  font-family: var(--mobile-font-heading);
  font-weight: 700;
  font-size: 20px;
}

.home-hub__hero-status {
  font-size: 12px;
  color: var(--mobile-text-secondary);
}

.home-hub__hero-meters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-hub__actions {
  display: flex;
  gap: 10px;
}

.home-hub__daily-moment {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border-color: var(--mobile-border-accent);
}

.home-hub__daily-moment-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  flex-shrink: 0;
  background: var(--mobile-primary-tint);
  color: var(--mobile-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hub__daily-moment-copy {
  flex: 1;
  min-width: 0;
}

.home-hub__daily-moment-title {
  font-family: var(--mobile-font-heading);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}

.home-hub__daily-moment-sub {
  font-size: 13px;
  color: var(--mobile-text-secondary);
}

.home-hub__secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-hub__secondary-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-hub__secondary-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hub__secondary-icon--gold {
  background: var(--mobile-gold-tint);
  color: var(--mobile-gold);
}

.home-hub__secondary-icon--secondary {
  background: var(--mobile-secondary-tint);
  color: var(--mobile-secondary);
}

.home-hub__secondary-title {
  font-family: var(--mobile-font-heading);
  font-weight: 600;
  font-size: 13px;
}

.home-hub__secondary-sub {
  font-size: 12px;
  color: var(--mobile-text-secondary);
}

.home-hub__tabbar {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 24px;
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 760px) {
  .home-hub__tabbar {
    left: calc(72px + 20px);
  }
}
.moments-screen {
  min-height: 100%;
  background: var(--mobile-bg-base);
  color: var(--mobile-text-primary);
  font-family: var(--mobile-font-body);
  padding: 24px 20px 120px;
  box-sizing: border-box;
}

@media (min-width: 760px) {
  .moments-screen {
    padding-left: calc(72px + 20px);
  }
}

.moments-screen__header {
  max-width: 520px;
  margin: 0 auto 20px;
}

.moments-screen__title {
  font-family: var(--mobile-font-heading);
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 16px;
}

.moments-screen__subnav {
  display: inline-flex;
  gap: 6px;
  background: var(--mobile-bg-card);
  border: 1px solid var(--mobile-border-default);
  border-radius: var(--mobile-radius-pill);
  padding: 4px;
}

.moments-screen__subtab {
  border: none;
  background: none;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: var(--mobile-radius-pill);
  font-family: var(--mobile-font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--mobile-text-secondary);
}

.moments-screen__subtab--active {
  background: var(--mobile-primary-gradient);
  color: var(--mobile-on-primary);
}

.moments-screen__content {
  max-width: 520px;
  margin: 0 auto;
}

.moments-screen__tabbar {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 24px;
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 760px) {
  .moments-screen__tabbar {
    left: calc(72px + 20px);
  }
}
.mv-gauge {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mv-gauge__inner {
  border-radius: 50%;
  background: var(--mobile-bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mv-gauge__value {
  font-family: var(--mobile-font-heading);
  font-weight: 700;
  color: var(--mobile-text-primary);
  line-height: 1;
}

.mv-gauge__sublabel {
  color: var(--mobile-text-secondary);
  margin-top: 2px;
  line-height: 1;
}
.bond-scr {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bond-scr__gauge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.bond-scr__tier-name {
  font-family: var(--mobile-font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--mobile-text-primary);
  margin-top: 4px;
}

.bond-scr__next {
  font-size: 12.5px;
  color: var(--mobile-text-secondary);
}

.bond-scr__next-name {
  color: var(--mobile-primary);
  font-weight: 600;
}

.bond-scr__streak {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bond-scr__streak-icon {
  font-size: 20px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--mobile-bg-card-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bond-scr__streak-copy {
  flex: 1;
  min-width: 0;
}

.bond-scr__streak-title {
  font-family: var(--mobile-font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--mobile-text-primary);
}

.bond-scr__streak-sub {
  font-size: 12px;
  color: var(--mobile-text-secondary);
}

.bond-scr__section-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mobile-text-secondary);
  margin-bottom: 10px;
}

.bond-scr__unlockables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

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

.bond-scr__unlockable-icon {
  width: 100%;
  height: 66px;
  border-radius: 12px;
  background: var(--mobile-bg-card-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.bond-scr__unlockable-icon--locked {
  opacity: 0.45;
}

.bond-scr__unlockable-name {
  font-family: var(--mobile-font-heading);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--mobile-text-primary);
}

.bond-scr__unlockable-name--locked {
  color: var(--mobile-text-tertiary);
}

.bond-scr__unlockable-status {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mobile-text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.bond-scr__unlockable-status--unlocked {
  color: var(--mobile-success);
}

.bond-scr__error {
  font-size: 13px;
  color: var(--mobile-primary);
  text-align: center;
}
.memories-scr {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Timeline ─────────────────────────────────────────────────────────── */
.memories-scr__timeline {
  display: flex;
  flex-direction: column;
}

.memories-scr__entry {
  display: flex;
  gap: 14px;
}

.memories-scr__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 12px;
}

.memories-scr__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mobile-primary-gradient);
  margin-top: 6px;
  flex-shrink: 0;
}

.memories-scr__line {
  width: 2px;
  flex: 1;
  background: var(--mobile-border-subtle);
  margin-top: 4px;
}

.memories-scr__entry:last-child .memories-scr__line {
  display: none;
}

.memories-scr__entry-card {
  flex: 1;
  min-width: 0;
  margin-bottom: 16px;
}

.memories-scr__entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.memories-scr__date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mobile-text-secondary);
}

.memories-scr__role-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--mobile-text-tertiary);
  white-space: nowrap;
}

.memories-scr__detail {
  font-family: var(--mobile-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mobile-text-primary);
  margin: 0;
}

/* ── Status / loading / error ────────────────────────────────────────── */
.memories-scr__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--mobile-text-secondary);
  padding: 4px 2px;
}

.memories-scr__status--error {
  color: var(--mobile-primary);
}

.memories-scr__status--error p {
  margin: 0;
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.memories-scr__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 40px 20px;
}

.memories-scr__empty-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--mobile-primary-tint);
  color: var(--mobile-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.memories-scr__empty-title {
  font-family: var(--mobile-font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--mobile-text-primary);
}

.memories-scr__empty-copy {
  font-size: 13px;
  color: var(--mobile-text-secondary);
  line-height: 1.6;
  max-width: 260px;
  margin: 0;
}

/* ── Load more ────────────────────────────────────────────────────────── */
.memories-scr__load-more {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
/* ── Layout ───────────────────────────────────────────────────────────────── */
.sub-screen {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  min-height: 100%;
  padding: 40px 40px 40px calc(72px + 40px); /* left-offset accounts for the fixed NavRail */
  background: var(--bg-void);
  box-sizing: border-box;
  overflow-y: auto;
  font-family: var(--font-body);
}

.sub-screen__eyebrow { margin: 0; color: var(--pink); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.sub-screen__notice { max-width: 920px; padding: 12px 16px; border: 1px solid rgba(var(--success-rgb),.35); border-radius: 10px; background: rgba(var(--success-rgb),.08); color: var(--success); }
.sub-screen__notice--error { border-color: rgba(var(--danger-rgb),.35); background: rgba(var(--danger-rgb),.08); color: var(--danger); }
.sub-screen__money-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; max-width: 1100px; }
.sub-screen__money-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; border: 1px solid var(--border-card); border-radius: 18px; background: var(--bg-card); }
.sub-screen__money-card--plus { border-color: rgba(var(--pink-rgb),.5); box-shadow: 0 20px 60px rgba(var(--pink-rgb),.08); }
.sub-screen__money-card h2,.sub-screen__money-card p { margin: 0; }
.sub-screen__money-card ul { flex: 1; margin: 0; padding-left: 20px; color: var(--text-secondary); line-height: 1.9; }
.sub-screen__badge { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: rgba(var(--pink-rgb),.12); color: var(--pink); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sub-screen__money-price { font-size: clamp(1.55rem,3vw,2.25rem); font-weight: 800; color: var(--text-primary); }
.sub-screen__money-price small { margin-left: 4px; color: var(--text-secondary); font-size: .8rem; font-weight: 500; }
.sub-screen__money-price--small { font-size: 1.4rem; }
.sub-screen__credit-total { font-size: 3rem; font-weight: 800; color: var(--pink); }
.sub-screen__credit-breakdown { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-secondary); font-size: .78rem; }
.sub-screen__credit-breakdown span { padding: 5px 8px; border-radius: 8px; background: rgba(var(--fg-rgb),.05); }
.sub-screen__purchase-row { display: grid; grid-template-columns: 1fr 82px; gap: 10px; }
.sub-screen__purchase-row input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border-card); border-radius: 9px; background: var(--bg-void); color: var(--text-primary); font: inherit; }
.sub-screen__cta--secondary { background: rgba(var(--pink-rgb),.12); color: var(--pink); border: 1px solid rgba(var(--pink-rgb),.3); }
.sub-screen__text-action { align-self: center; border: 0; background: none; color: var(--text-secondary); text-decoration: underline; cursor: pointer; }
.sub-screen__fine { color: var(--text-secondary); font-size: .75rem; line-height: 1.5; }
@media (max-width: 980px) { .sub-screen__money-grid { grid-template-columns: 1fr; } }

/* Center variant — used for loading/error full-screen states */
.sub-screen--center {
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

@media (max-width: 759px) {
  /* NavRail is hidden on mobile; hamburger lives top-left */
  .sub-screen {
    padding: 64px 20px 40px 20px;
  }
}

@media (min-width: 760px) and (max-width: 1100px) {
  .sub-screen {
    padding: 40px 32px 40px calc(72px + 32px);
  }
}

/* ── Status header ────────────────────────────────────────────────────────── */
.sub-screen__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sub-screen__heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.sub-screen__sub {
  margin: 0;
  font-size: var(--text-small);
  color: var(--text-secondary);
}

/* ── Self-serve trial banner ──────────────────────────────────────────────── */
.sub-screen__trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(var(--success-rgb), 0.07);
  border: 1px solid rgba(var(--success-rgb), 0.3);
  border-radius: 14px;
  padding: 14px 18px;
  max-width: 900px;
}

.sub-screen__trial-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-screen__trial-text strong {
  color: var(--success);
  font-size: 0.9rem;
  font-weight: 700;
}

.sub-screen__trial-text span {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.sub-screen__trial-cta {
  flex-shrink: 0;
  background: rgba(var(--success-rgb), 0.15);
  border: 1px solid rgba(var(--success-rgb), 0.45);
  color: var(--success);
  border-radius: 10px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
  white-space: nowrap;
}

.sub-screen__trial-cta:hover:not(:disabled) {
  background: rgba(var(--success-rgb), 0.25);
  transform: translateY(-1px);
}

.sub-screen__trial-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Banners (notice / error / activating) ────────────────────────────────── */
.sub-screen__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: var(--text-small);
  line-height: 1.45;
}

.sub-screen__banner--info {
  background: rgba(var(--purple-rgb), 0.12);
  border: 1px solid rgba(var(--purple-rgb), 0.3);
  color: var(--purple);
}

.sub-screen__banner--ok {
  background: rgba(var(--success-rgb), 0.08);
  border: 1px solid rgba(var(--success-rgb), 0.25);
  color: var(--success);
}

.sub-screen__banner--err {
  background: rgba(var(--red-rgb), 0.1);
  border: 1px solid rgba(var(--red-rgb), 0.3);
  color: var(--pink-soft);
}

.sub-screen__banner-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
  transition: opacity 0.15s;
}

.sub-screen__banner-close:hover {
  opacity: 1;
}

/* ── Loading / error helpers ──────────────────────────────────────────────── */
.sub-screen__loading-text {
  margin: 0;
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.sub-screen__error-text {
  margin: 0;
  font-size: var(--text-small);
  color: var(--pink-soft);
}

.sub-screen__retry-btn {
  padding: 9px 20px;
  border: 1px solid rgba(var(--pink-soft-rgb), 0.4);
  border-radius: 10px;
  background: none;
  color: var(--pink-soft);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.sub-screen__retry-btn:hover {
  background: rgba(var(--pink-soft-rgb), 0.08);
  border-color: rgba(var(--pink-soft-rgb), 0.65);
}

/* ── Plans-section error ──────────────────────────────────────────────────── */
.sub-screen__plans-err {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.sub-screen__plans-err p {
  margin: 0;
  font-size: var(--text-small);
  color: var(--pink-soft);
}

/* ── Card grid ────────────────────────────────────────────────────────────── */
.sub-screen__grid-wrap {
  width: 100%;
}

.sub-screen__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 900px;
}

@media (max-width: 900px) {
  .sub-screen__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
}

/* ── Individual tier card ─────────────────────────────────────────────────── */
.sub-screen__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 20px;
  border-radius: 18px;
  background: var(--bg-surface);
  border: 1px solid rgba(var(--fg-rgb), 0.07);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sub-screen__card:hover {
  border-color: rgba(var(--pink-soft-rgb), 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

/* Active (current) plan */
.sub-screen__card--current {
  border-color: rgba(var(--success-rgb), 0.45);
  background: rgba(var(--success-rgb), 0.04);
  box-shadow: 0 0 0 1px rgba(var(--success-rgb), 0.15);
}

.sub-screen__card--current:hover {
  border-color: rgba(var(--success-rgb), 0.6);
}

/* Featured / recommended card */
.sub-screen__card--featured {
  border-color: rgba(var(--pink-rgb), 0.3);
}

.sub-screen__card--featured:hover {
  border-color: rgba(var(--pink-rgb), 0.55);
}

/* Lower-tier (downgrade) — muted */
.sub-screen__card--muted {
  opacity: 0.5;
  pointer-events: none; /* cards not actionable in v1 downgrade-less mode */
}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.sub-screen__card-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sub-screen__card-badge--pop {
  background: linear-gradient(135deg, var(--pink), var(--pink-soft));
  color: #fff;
}

.sub-screen__card-badge--active {
  background: rgba(var(--success-rgb), 0.15);
  border: 1px solid rgba(var(--success-rgb), 0.4);
  color: var(--success);
}

/* ── Card content ─────────────────────────────────────────────────────────── */
.sub-screen__card-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sub-screen__card-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.sub-screen__price-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.sub-screen__price-period {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ── Card tagline (detail comparison lives in the table below) ───────────── */
.sub-screen__card-tagline {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  flex: 1; /* push CTA to the bottom of the card */
}

/* ── Loading skeleton ─────────────────────────────────────────────────────── */
.sub-screen__card--skeleton {
  gap: 14px;
}

.sub-screen__skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(var(--fg-rgb), 0.06) 25%,
    rgba(var(--fg-rgb), 0.12) 37%,
    rgba(var(--fg-rgb), 0.06) 63%
  );
  background-size: 400% 100%;
  animation: sub-screen-skel-shimmer 1.4s ease infinite;
}

.sub-screen__skel-line--title {
  width: 50%;
  height: 18px;
}

.sub-screen__skel-line--price {
  width: 35%;
  height: 22px;
}

.sub-screen__skel-line--cta {
  margin-top: auto;
  height: 40px;
  border-radius: 12px;
}

@keyframes sub-screen-skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sub-screen__skel-line {
    animation: none;
  }
}

/* ── Feature comparison table ─────────────────────────────────────────────── */
.sub-screen__compare-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sub-screen__compare-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.07);
  background: var(--bg-surface);
}

.sub-screen__compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.sub-screen__compare-table th,
.sub-screen__compare-table td {
  padding: 12px 16px;
  text-align: center;
  white-space: nowrap;
}

.sub-screen__compare-table th:first-child,
.sub-screen__compare-table td:first-child {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 500;
}

.sub-screen__compare-table th {
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.sub-screen__compare-table td {
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.05);
  color: var(--text-primary);
}

.sub-screen__compare-table tbody tr:last-child td {
  border-bottom: none;
}

.sub-screen__compare-check {
  color: var(--success);
  font-weight: 700;
}

.sub-screen__compare-cross {
  color: rgba(var(--fg-rgb), 0.3);
}

/* ── Coupon input ─────────────────────────────────────────────────────────── */
.sub-screen__price-amount--struck {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: line-through;
  opacity: 0.7;
}

.sub-screen__coupon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sub-screen__coupon-toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}

.sub-screen__coupon-row {
  display: flex;
  gap: 6px;
}

.sub-screen__coupon-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14));
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.sub-screen__coupon-apply {
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--surface-3, rgba(255, 255, 255, 0.08));
  cursor: pointer;
}

.sub-screen__coupon-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sub-screen__coupon-ok {
  margin: 0;
  font-size: 0.75rem;
  color: var(--success);
}

.sub-screen__coupon-err {
  margin: 0;
  font-size: 0.75rem;
  color: var(--danger, #e5484d);
}

/* ── CTA button ───────────────────────────────────────────────────────────── */
.sub-screen__cta {
  margin-top: 4px;
  padding: 11px 14px;
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a0a14;
  background: linear-gradient(135deg, var(--pink), var(--pink-soft));
  cursor: pointer;
  transition: opacity 0.18s ease, filter 0.18s ease, transform 0.12s ease;
}

.sub-screen__cta:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.sub-screen__cta:active:not(:disabled) {
  transform: translateY(0);
}

/* Current plan state */
.sub-screen__cta--current {
  background: rgba(var(--success-rgb), 0.1);
  border: 1px solid rgba(var(--success-rgb), 0.3);
  color: var(--success);
  cursor: default;
}

.sub-screen__cta:disabled:not(.sub-screen__cta--current) {
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  color: var(--text-secondary);
  cursor: not-allowed;
  filter: none;
  transform: none;
  opacity: 1;
}

/* Lower-tier cards: informational only, no downgrade action */
.sub-screen__cta-note {
  margin: 4px 0 0;
  padding: 11px 14px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ── Preview / confirm dialog ─────────────────────────────────────────────── */
.sub-screen__preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(var(--bg-rgb), 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sub-screen__preview {
  width: 100%;
  max-width: 400px;
  padding: 28px 24px 24px;
  border-radius: 20px;
  background: var(--bg-surface);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.sub-screen__preview-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sub-screen__preview-row {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.sub-screen__preview-row strong {
  color: var(--text-primary);
}

.sub-screen__preview-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.sub-screen__preview-cancel {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 12px;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}

.sub-screen__preview-cancel:hover {
  border-color: rgba(var(--fg-rgb), 0.25);
  color: var(--text-primary);
}

.sub-screen__preview-confirm {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pink), var(--pink-soft));
  color: #1a0a14;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s, filter 0.18s;
}

.sub-screen__preview-confirm:hover {
  filter: brightness(1.07);
}

/* ── Billing history ──────────────────────────────────────────────────────── */
.sub-screen__billing {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sub-screen__billing-heading {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sub-screen__billing-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.sub-screen__billing-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(var(--fg-rgb), 0.07);
  background: var(--bg-surface);
}

.sub-screen__billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
}

.sub-screen__billing-table th,
.sub-screen__billing-table td {
  padding: 12px 16px;
  text-align: left;
}

.sub-screen__billing-table th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.sub-screen__billing-table td {
  color: var(--text-primary);
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.05);
}

.sub-screen__billing-table tbody tr:last-child td {
  border-bottom: none;
}

.sub-screen__billing-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  text-transform: capitalize;
  background: rgba(var(--fg-rgb), 0.08);
  color: var(--text-secondary);
}

.sub-screen__billing-status--captured {
  background: rgba(var(--success-rgb), 0.12);
  color: var(--success);
}

.sub-screen__billing-status--failed {
  background: rgba(220, 60, 60, 0.14);
  color: #e5747a;
}

.sub-screen__billing-download {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.76rem;
  cursor: pointer;
  white-space: nowrap;
}

.sub-screen__billing-download:hover:not(:disabled) {
  border-color: rgba(var(--pink-soft-rgb), 0.4);
}

.sub-screen__billing-download:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.sub-screen__footer {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(var(--fg-rgb), 0.25);
  text-align: center;
  padding-top: 8px;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sub-screen__card,
  .sub-screen__cta {
    transition: none;
  }
}
/* SettingsScreen.css — self-contained, component-scoped, uses fonts.css tokens */

/* ── Page layout ─────────────────────────────────────────────────────────── */
.settings-scr {
  width: 100%;
  min-height: 100%;
  padding: 40px 40px 60px calc(72px + 40px); /* left offset for fixed NavRail */
  background: var(--bg-void);
  box-sizing: border-box;
  overflow-y: auto;
  font-family: var(--font-body);
}

@media (max-width: 759px) {
  .settings-scr {
    padding: 64px 20px 60px 20px;
  }
}

@media (min-width: 760px) and (max-width: 1100px) {
  .settings-scr {
    padding: 40px 32px 60px calc(72px + 32px);
  }
}

.settings-scr__inner {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Page title ──────────────────────────────────────────────────────────── */
.settings-scr__page-title {
  margin: 0 0 36px;
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.settings-scr__section {
  padding: 28px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.07);
}

.settings-scr__section:last-child {
  border-bottom: none;
}

.settings-scr__section-title {
  margin: 0 0 16px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.settings-scr__hint {
  margin: 0 0 16px;
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.5;
}

.settings-scr__hint--mt {
  margin-top: 10px;
  margin-bottom: 0;
}

.settings-scr__loading {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.settings-scr__saved-notice {
  margin: 10px 0 0;
  font-size: var(--text-small);
  color: var(--success);
}

.settings-scr__error-notice {
  margin: 10px 0 0;
  font-size: var(--text-small);
  color: var(--red, #cc3d5a);
}

/* ── Personality grid ────────────────────────────────────────────────────── */
.settings-scr__persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.settings-scr__persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 10px;
  background: var(--bg-glass);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}

.settings-scr__persona-card:hover:not(:disabled) {
  border-color: rgba(var(--pink-rgb), 0.4);
  background: rgba(var(--pink-rgb), 0.06);
}

.settings-scr__persona-card--active {
  border-color: var(--pink);
  background: rgba(var(--pink-rgb), 0.1);
}

.settings-scr__persona-card:disabled {
  opacity: 0.6;
  cursor: default;
}

.settings-scr__persona-name {
  font-size: 0.875rem;
  font-weight: 600;
}

.settings-scr__persona-blurb {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* ── Voice & sound controls ──────────────────────────────────────────────── */
.settings-scr__control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.04);
}

.settings-scr__control-row:last-child {
  border-bottom: none;
}

.settings-scr__control-label {
  font-size: var(--text-small);
  color: var(--text-primary);
}

/* Toggle switch */
.settings-scr__toggle {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.12);
  cursor: pointer;
  transition: background 0.2s;
}

.settings-scr__toggle--on {
  background: var(--pink);
}

.settings-scr__toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  pointer-events: none;
}

.settings-scr__toggle--on .settings-scr__toggle-thumb {
  transform: translateX(20px);
}

/* Slider */
.settings-scr__slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 200px;
}

.settings-scr__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(var(--fg-rgb), 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.settings-scr__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pink);
  cursor: pointer;
}

.settings-scr__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pink);
  border: none;
  cursor: pointer;
}

.settings-scr__slider-val {
  font-size: 0.75rem;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
}

/* ── Chips (Appearance / Language) ──────────────────────────────────────── */
.settings-scr__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-scr__chip {
  padding: 8px 18px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-small);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.settings-scr__chip:hover:not(:disabled) {
  border-color: rgba(var(--pink-rgb), 0.4);
  color: var(--text-primary);
}

.settings-scr__chip--active {
  border-color: var(--pink);
  color: var(--text-primary);
  background: rgba(var(--pink-rgb), 0.1);
}

.settings-scr__chip:disabled {
  cursor: default;
}

/* ── Account fields ──────────────────────────────────────────────────────── */
.settings-scr__account-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.04);
}

.settings-scr__account-key {
  font-size: var(--text-small);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.settings-scr__account-val {
  font-size: var(--text-small);
  color: var(--text-primary);
  text-align: right;
  word-break: break-all;
}

.settings-scr__account-note {
  font-size: var(--text-small);
  color: var(--text-secondary);
  text-align: right;
}

/* ── Delete account zone ─────────────────────────────────────────────────── */
.settings-scr__delete-zone {
  margin-top: 20px;
}

.settings-scr__delete-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(var(--red-rgb), 0.35);
  border-radius: 10px;
  background: rgba(var(--red-rgb), 0.06);
}

.settings-scr__delete-warning {
  margin: 0;
  font-size: var(--text-small);
  color: var(--pink-soft);
  line-height: 1.5;
}

.settings-scr__delete-label {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

.settings-scr__delete-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.04);
  color: var(--text-primary);
  font-size: var(--text-small);
  font-family: var(--font-body);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.settings-scr__delete-input:focus {
  border-color: rgba(var(--red-rgb), 0.5);
}

.settings-scr__delete-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

.settings-scr__delete-error {
  margin: 0;
  font-size: var(--text-small);
  color: var(--red);
}

.settings-scr__delete-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.settings-scr__danger-btn {
  padding: 9px 18px;
  border: 1px solid rgba(var(--red-rgb), 0.5);
  border-radius: 8px;
  background: transparent;
  color: var(--red);
  font-size: var(--text-small);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.settings-scr__danger-btn:hover:not(:disabled) {
  background: rgba(var(--red-rgb), 0.12);
  border-color: var(--red);
}

.settings-scr__danger-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.settings-scr__ghost-btn {
  padding: 9px 18px;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-small);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.settings-scr__ghost-btn:hover:not(:disabled) {
  border-color: rgba(var(--fg-rgb), 0.25);
  color: var(--text-primary);
}

.settings-scr__ghost-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.settings-scr__nav-link {
  padding: 11px 20px;
  border: 1px solid rgba(var(--pink-rgb), 0.3);
  border-radius: 8px;
  background: transparent;
  color: var(--pink);
  font-size: var(--text-small);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.settings-scr__nav-link:hover {
  background: rgba(var(--pink-rgb), 0.08);
  border-color: var(--pink);
}
.watch-input {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  color: var(--text-primary);
}

.watch-input__inner {
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.watch-input__title {
  font-size: 30px;
  margin: 0 0 10px;
  background: linear-gradient(120deg, var(--pink-soft), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.watch-input__desc {
  color: rgba(var(--fg-rgb), 0.65);
  margin: 0 0 24px;
  line-height: 1.5;
}

.watch-input__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.watch-input__field {
  flex: 1 1 240px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--pink-soft-rgb), 0.35);
  background: rgba(var(--bg-rgb), 0.7);
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
}

.watch-input__field:focus {
  border-color: rgba(var(--pink-soft-rgb), 0.8);
}

.watch-input__btn {
  padding: 13px 22px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(120deg, var(--pink-soft), var(--purple));
  color: #1a0e22;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.watch-input__btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.watch-input__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.watch-input__error {
  margin-top: 14px;
  color: var(--pink-soft);
  font-size: 14px;
}

.watch-input__history-link {
  display: inline-block;
  margin-top: 26px;
  color: rgba(var(--fg-rgb), 0.55);
  text-decoration: none;
  font-size: 14px;
}

.watch-input__history-link:hover {
  color: var(--pink-soft);
}
/* Karaoke-style caption band (replaces the old popup bubble).
   Colors here are intentionally fixed, not theme tokens — like closed
   captions over a playing video, they stay the same in every theme. */
.watch-caption {
  position: absolute;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 8px);
  max-width: min(92%, 560px);
  padding: 10px 18px;
  border-radius: 14px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  background: rgba(8, 4, 12, 0.55);
  backdrop-filter: blur(6px);
  color: #fbeaf0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 30;
}

.watch-caption--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Karaoke: unspoken words dim, spoken words pop bright. */
.watch-caption__w {
  color: rgba(251, 234, 240, 0.4);
  transition: color 0.12s ease, text-shadow 0.12s ease;
}

.watch-caption__w--lit {
  color: #ffd9e6;
  text-shadow: 0 0 10px rgba(244, 167, 185, 0.55);
}

/* User echo: compact lilac chip near the top. */
.watch-caption--user {
  bottom: auto;
  top: 18px;
  font-size: 14px;
  background: rgba(14, 18, 34, 0.85);
  border: 1px solid rgba(150, 180, 255, 0.4);
  color: #cdd9ff;
}

.watch-caption__who {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(170, 195, 255, 0.9);
  margin-bottom: 2px;
}
/* Colors here are intentionally fixed, not theme tokens — this overlays a
   playing video (like the CompanionScreen dock over the live avatar), so it
   stays the same dark/pink chrome in every theme. */
.watch-mic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.watch-mic-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(244, 167, 185, 0.5);
  background: rgba(20, 10, 30, 0.85);
  color: #f4a7b9;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.watch-mic-btn:hover:not(:disabled) {
  transform: scale(1.05);
}

.watch-mic-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.watch-mic-btn--recording {
  background: #f4a7b9;
  color: #1a0e22;
  box-shadow: 0 0 0 6px rgba(244, 167, 185, 0.25);
  animation: watch-mic-pulse 1.2s ease-in-out infinite;
}

.watch-mic-btn--busy {
  opacity: 0.7;
}

@keyframes watch-mic-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(244, 167, 185, 0.2);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(244, 167, 185, 0.05);
  }
}

.watch-mic-caption {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 120px;
}
/* Colors here are intentionally fixed, not theme tokens — this overlays a
   playing video (like the CompanionScreen dock over the live avatar), so it
   stays the same dark/pink chrome in every theme. */
.watch-controls {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Transparent click-capture layer over the video. */
.watch-controls__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.watch-controls__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.watch-controls--visible .watch-controls__bar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.watch-controls__btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.watch-controls__btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* Captions toggle: tint pink while on so its state is obvious. */
.watch-controls__btn--active {
  color: #f4a7b9;
  background: rgba(244, 167, 185, 0.18);
}

.watch-controls__btn--active:hover {
  background: rgba(244, 167, 185, 0.28);
}

/* Caption-language picker — only shown when captions are on. */
.watch-controls__cc-select {
  flex: 0 0 auto;
  max-width: 130px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.watch-controls__cc-select:focus {
  outline: none;
  border-color: rgba(244, 167, 185, 0.7);
}

.watch-controls__cc-select option {
  color: #111;
}

.watch-controls__time {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
  min-width: 40px;
  text-align: center;
}

.watch-controls__time--dur {
  color: rgba(255, 255, 255, 0.6);
}

/* Seek scrubber fills proportionally via the --fill custom property. */
.watch-controls__scrub {
  flex: 1 1 auto;
  height: 5px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #f4a7b9 0%,
    #f4a7b9 var(--fill, 0%),
    rgba(255, 255, 255, 0.25) var(--fill, 0%),
    rgba(255, 255, 255, 0.25) 100%
  );
  cursor: pointer;
}

.watch-controls__vol {
  flex: 0 0 84px;
  width: 84px;
  height: 5px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.watch-controls__scrub::-webkit-slider-thumb,
.watch-controls__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.watch-controls__scrub::-moz-range-thumb,
.watch-controls__vol::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

@media (max-width: 860px) {
  .watch-controls__vol {
    flex-basis: 56px;
    width: 56px;
  }
  .watch-controls__bar {
    gap: 7px;
    padding: 8px 10px;
  }
}
/* Colors here are intentionally fixed, not theme tokens — this overlays a
   playing video (like the CompanionScreen dock over the live avatar), so it
   stays the same dark/pink chrome in every theme. */
.watch-chat-input {
  display: flex;
  gap: 8px;
  width: min(92%, 420px);
  margin-bottom: 12px;
}

.watch-chat-input input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(244, 167, 185, 0.4);
  background: rgba(8, 4, 12, 0.6);
  color: #fbeaf0;
  font-size: 14px;
  outline: none;
}

.watch-chat-input input:focus {
  border-color: rgba(244, 167, 185, 0.8);
}

.watch-chat-input button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(120deg, #f4a7b9, #c98bd9);
  color: #1a0e22;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.watch-chat-input button:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Colors here are intentionally fixed, not theme tokens — this is the split
   video-player + live-avatar view (like the CompanionScreen dock and the
   WatchControls/WatchMicButton/WatchSpeechBubble chrome it hosts), so it
   stays the same dark/pink chrome in every theme. */
.watch-room {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  background: #0d0712;
  color: #fbeaf0;
}

.watch-room__player {
  position: relative;
  flex: 0 0 60%;
  max-width: 60%;
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.watch-room__player-host {
  width: 100%;
  height: 100%;
}

.watch-room__player-host iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.watch-room__side {
  position: relative;
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-left: 1px solid rgba(244, 167, 185, 0.18);
}

.watch-room__avatar {
  position: absolute;
  inset: 0;
}

.watch-room__avatar--full {
  position: relative;
  width: min(420px, 80%);
  height: 60%;
}

.watch-room__mic {
  position: relative;
  z-index: 20;
  margin-bottom: 22px;
}

/* Tap-to-start veil — shown when the AudioContext is still suspended (cold
   deep-link / refresh). The first tap unlocks audio so Ayra can be heard. */
.watch-room__start-veil {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: none;
  cursor: pointer;
  color: #fbeaf0;
  background: radial-gradient(circle at 50% 45%, rgba(26, 14, 34, 0.72), rgba(8, 4, 12, 0.92));
  backdrop-filter: blur(2px);
}

.watch-room__start-veil-icon {
  font-size: 40px;
}

.watch-room__start-veil-text {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Loading / processing state */
.watch-room--loading {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}

.watch-room__loading-copy {
  max-width: 360px;
}

.watch-room__loading-title {
  font-size: 18px;
  color: #f4a7b9;
  margin: 0 0 6px;
}

.watch-room__eta {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  margin: 0;
}

/* Notices (failed / player error) */
.watch-room--message {
  align-items: center;
  justify-content: center;
}

.watch-room__notice {
  text-align: center;
  max-width: 360px;
  padding: 24px;
}

.watch-room__notice h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.watch-room__notice p {
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 18px;
}

.watch-room__notice button {
  padding: 11px 20px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(120deg, #f4a7b9, #c98bd9);
  color: #1a0e22;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 860px) {
  .watch-room {
    flex-direction: column;
  }
  .watch-room__player,
  .watch-room__side {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
  .watch-room__player {
    height: 38%;
  }
  .watch-room__side {
    height: 62%;
    border-left: none;
    border-top: 1px solid rgba(244, 167, 185, 0.18);
  }
}


.watch-room__autopause {
  align-self: center;
  margin-bottom: 0.5rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.watch-room__autopause--on {
  background: rgba(244, 167, 185, 0.25);
  border-color: rgba(244, 167, 185, 0.6);
  color: #f4a7b9;
}

/* Top-right control cluster: chat / fullscreen / hide-UI. */
.watch-room__controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  z-index: 40;
}

.watch-room__controls button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(8, 4, 12, 0.55);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.watch-room__controls button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.watch-room__controls button[aria-pressed='true'] {
  background: rgba(244, 167, 185, 0.25);
  border-color: rgba(244, 167, 185, 0.6);
  color: #f4a7b9;
}

/* Bottom dock on the avatar side: autopause toggle + chat box + mic. */
.watch-room__dock {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}
.watch-history {
  padding: 28px 24px 64px;
  color: var(--text-primary);
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.watch-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.watch-history__title {
  font-size: 24px;
  margin: 0;
}

.watch-history__new {
  color: var(--pink-soft);
  text-decoration: none;
  font-size: 14px;
}

.watch-history__error,
.watch-history__empty {
  color: var(--text-secondary);
}

.watch-history__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.watch-card {
  text-align: left;
  background: rgba(var(--bg-rgb), 0.6);
  border: 1px solid rgba(var(--pink-soft-rgb), 0.18);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.watch-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--pink-soft-rgb), 0.5);
}

.watch-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.watch-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.watch-card__thumb-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(var(--bg-rgb), 0.9), rgba(var(--bg-rgb), 0.75));
}

.watch-card__duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.75);
  font-size: 12px;
}

.watch-card__title {
  padding: 12px 14px 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.watch-card__cta {
  padding: 0 14px 14px;
  font-size: 13px;
  color: var(--pink-soft);
}
.requires-plan {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  color: var(--text-primary);
}

.requires-plan--loading {
  color: var(--text-secondary);
}

.requires-plan__card {
  max-width: 420px;
  text-align: center;
  background: rgba(var(--bg-rgb), 0.7);
  border: 1px solid rgba(var(--pink-soft-rgb), 0.3);
  border-radius: 16px;
  padding: 30px 26px;
}

.requires-plan__title {
  margin: 0 0 10px;
  font-size: 22px;
  color: var(--pink-soft);
}

.requires-plan__desc {
  color: rgba(var(--fg-rgb), 0.65);
  line-height: 1.5;
  margin: 0 0 22px;
}

.requires-plan__btn {
  padding: 12px 22px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(120deg, var(--pink-soft), var(--purple));
  color: #1a0e22;
  font-weight: 600;
  cursor: pointer;
}
/*$vite$:1*/