/* ============================================================================
   Ferguson Family Archive - Prototype Styles
   Design System & Component Library
   ============================================================================ */

/* CSS Variables / Design Tokens */

:root {

    /* ── THE TOP-INSET PRIMITIVE (welcome-walk P0-4, 2026-08-29) ─────────────
       The vault ships viewport-fit=cover, so content extends under the iOS
       status bar / notch / Dynamic Island and EVERY viewport-top-anchored
       control must add the inset itself. Measured live on Joe's iPhone while
       he was trapped on a full-screen photo: env(safe-area-inset-top) = 62px
       (Dynamic Island) — a close chip at a bare top:8px was untappable.
       Anchor top-region chrome with:
           top: max(<gap>, env(safe-area-inset-top));
       (or var(--ffa-safe-top)). Enforced by pre-deploy
       deployment/check_top_inset_chrome.py — a dismiss affordance that can
       render inside the inset band refuses the deploy. */
    --ffa-safe-top: env(safe-area-inset-top, 0px);
  /* Primary colors */
  --color-primary: #3b82f6;
  --color-secondary: #f59e0b;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Neutrals */
  --color-bg: #ffffff;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f3f4f6;
  --color-bg-tertiary: #e5e7eb;
  --color-border: #e5e7eb;
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-text-lighter: #9ca3af;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Typography
     ------------------------------------------------------------------
     Type-scale knob (unbifurcating-vault-surfaces S3, 2026-07-23).
     `--type-scale` is the single controllable multiplier for the whole
     ramp. At 1.5 the body floor is 16px → 24px, which S1's projection
     measurements set as the target so desktop text stays legible when the
     1600×900 canvas is scaled onto a phone at k≈0.42–0.48 (S1 findings §
     Legibility). Every ramp token below scales through it via calc(), so
     the visual hierarchy is preserved (base 24 < lg 27 < xl 30 < 2xl 36…)
     and the entire scale is retunable from ONE number. Spacing tokens are
     deliberately NOT routed through this knob — projection needs bigger
     TYPE, not a 1.5× layout zoom (that would regress Joe's daily desktop).
     Set --type-scale:1 to revert the whole boost.
     Scoped to projection 2026-07-24 (Joe /listen): real desktops run at 1 —
     the 1.5× target was measured for the k≈0.42–0.48 phone-scaled frame and
     is oversized on a monitor (Control Panel labels overlapped their fixed
     44px rows). mobile-detect.js stamps html.ffa-projected under ?projected=1
     and that rule (below) restores 1.5 for the projected canvas only. */
  --type-scale: 1;
  --font-xs: calc(0.75rem * var(--type-scale));
  --font-sm: calc(0.875rem * var(--type-scale));
  --font-base: calc(1rem * var(--type-scale));
  --font-lg: calc(1.125rem * var(--type-scale));
  --font-xl: calc(1.25rem * var(--type-scale));
  --font-2xl: calc(1.5rem * var(--type-scale));
  --font-3xl: calc(1.875rem * var(--type-scale));
  --font-4xl: calc(2.25rem * var(--type-scale));

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Layout. The Control Panel is a PERMANENT band of self-labelling launcher
     cards on desktop (squaring-chrome-maximize S2, Return 028): no launcher
     interaction may change this token, .main-content's left edge, or
     FFACanvas.rect().x. Only a breakpoint change or the pane-maximized story
     takeover may change the frame envelope. The mobile slide-in drawer keeps
     its own width via --mobile-drawer-width.

     96px, widened from 88px (which was widened from 60px earlier the same day)
     on 2026-08-05 (Joe: "make the icons in the desktop control panel twice the
     size they are now" + "keep the captions!!!", then "too much black
     background visible"). Still far narrower than the labelled 220px rows the
     band replaced — which is the point: the rail lost its labels to save width
     and became incomprehensible, and a self-labelling tile gives the
     destination back without the wide row.

     ⛔ THIS TOKEN IS CANVAS INPUT, NOT JUST A RAIL DECLARATION. ffa-canvas.js
     measures `.side-nav`'s live right edge and falls back to this var, and the
     canvas rect is what every designer window is placed and reflowed against
     (--ffa-canvas-x/y/w/h, spatial-manager's proportional reflow, the scene
     seats). Changing it moves the left edge of the whole window system, so a
     change here is verified by measuring canvas.x against the rail's measured
     right edge — not by reading the declaration back.

     unsilencing-vault-surfaces S3, D3.1/D3.2. The measured "black background"
     Joe named: at 88px the artwork covered 41.2% of the launcher card box with
     16.0px of dark surround on each side of the tile. See the band block
     (~line 1000) for the arithmetic of the 96px shape. */
  --nav-height: 60px;   /* + the safe-area top on the desktop shell: see @property below */
  --side-nav-width: 96px;
  --mobile-drawer-width: 220px;

  /* ========================================================================
     Z-INDEX LAYER SYSTEM
     Documented hierarchy to prevent stacking conflicts
     ======================================================================== */
  /* Layer 1: Base content */
  --z-base: 1;
  /* Layer 2: In-content elements (tooltips, dropdowns) */
  --z-tooltip: 50;
  /* Layer 3: Navigation */
  --z-nav: 100;
  /* Layer 4: Sidebar */
  --z-sidebar: 200;
  /* Layer 5: Hero panel (leaderboard side-by-side) */
  --z-hero-panel: 500;
  /* Layer 6: Modal backdrops */
  --z-modal-backdrop: 9999;
  /* Layer 7: Primary modals (Family Member, Browse Media) */
  --z-modal-primary: 10000;
  /* Layer 8: Secondary modals (Add Document, Tag People) */
  --z-modal-secondary: 10001;
  /* Layer 9: Tertiary modals (AI Analysis, Rejection) */
  --z-modal-tertiary: 10002;
  /* Layer 10: Full-screen takeover (Stories) */
  --z-fullscreen: 15000;
  /* Layer 11: System overlays (toasts, loading) */
  --z-system: 20000;
  /* Layer 12: Critical (bug capture, errors) */
  --z-critical: 99999;

  /* Onboarding/Setup typography (used only on login/setup screens) */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Onboarding brand colors */
  --ffa-purple-start: #667eea;
  --ffa-purple-end: #764ba2;
  --ffa-warm-amber: rgba(245, 158, 11, 0.08);
  --ffa-warm-pink: rgba(236, 72, 153, 0.06);
}

/* ═══ The desktop shell under a status bar (Greg M-3/M-4, 2026-10-01) ═══
   The iPad Home Screen app runs the DESKTOP shell (Joe ruling 2026-09-17) with
   `black-translucent` status-bar style, so the page draws UNDER the clock. The
   header (`.top-nav`, top:0, 60px) put 🏠, the title, Fergi and the account
   button in the 32px status strip: measured on FergiPAD, title overprinted by
   the time, 🏠 and Open Fergi AI at y=8, i.e. inside env(safe-area-inset-top).
   One variable carries the header's height to ~90 consumers (rail, canvas,
   rooms, consoles), so the inset goes INTO --nav-height and everything moves
   together.
   ⛔ @property IS LOAD-BEARING. ffa-canvas.js and spatial-manager.js read the
   variable with parseInt(getPropertyValue('--nav-height')). An unregistered
   `calc(60px + env())` comes back as that literal string, parseInt gives NaN, the
   code silently falls back to 60, and every window lands 32px under the header.
   Registered as a <length>, the computed value is resolved pixels ("92px"),
   so every reader is right with no JS change. Measured live on FergiPAD: "92px",
   canvas y=92, 0 controls in a safe-area strip across landing / Stories /
   maximized / docked. env() is 0 on every desktop browser: no change there.
   ≥769px only. The phone shell owns its own insets. */
@property --nav-height {
  syntax: '<length>';
  inherits: true;
  initial-value: 60px;
}

@media (min-width: 769px) {
  :root {
    --nav-height: calc(60px + env(safe-area-inset-top, 0px));
  }

  /* `html .top-nav`, not `.top-nav`: this block sits ABOVE the base `.top-nav`
     rule, whose `padding: 0 var(--space-lg)` shorthand would win the
     equal-specificity tie and zero the inset. Measured on 1.1.274 (FergiPAD):
     header grew to 92px but 🏠 sat at y=24, still inside the 32px strip. */
  html .top-nav {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* Projection restores the S1-measured 1.5× type boost — the 1600×900 canvas
   scaled onto a phone needs it; real desktops (no class) stay at 1. */
html.ffa-projected {
  --type-scale: 1.5;
}

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

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  overflow-x: hidden;
}

html, body {
  height: 100%;
  /* iOS PWA large-viewport fix (2026-07-06, diagnosed live via iPhone Web
     Inspector over USB). In a standalone black-translucent + viewport-fit=cover
     PWA, `height: 100%` resolves against the iOS SMALL layout viewport (e.g.
     812 on iPhone 16 Pro = screen 874 − safe-area-inset-top 62), NOT the full
     screen. That short viewport (a) leaves a 62px unpainted dead strip at the
     bottom and (b) strands `position: fixed; bottom: 0` elements — the mobile
     tab bar / universal control panel — 62px above the true bottom (the
     long-standing "control panel floats" bug that resisted 7+ prior trains and
     ~300 lines of JS measure-and-pin compensation). Giving the document
     `min-height: 100lvh` (the LARGE viewport, 874) makes iOS commit to the full
     screen height: innerHeight expands to 874, the dead strip closes, and every
     bottom-anchored fixed element (tab bar, context controls, stop-talking,
     popups, pocket-stage bars) seats correctly with no per-element patching.
     100vh is the fallback for engines without lvh (iOS <15.4). This single rule
     is the root-cause fix; the JS pin in mobile-shell.js is retired alongside. */
  min-height: 100vh;
  min-height: 100lvh;
}

a {
  color: var(--ffvr-accent, var(--color-primary));
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--ffvr-accent, #2563eb);
}

/* ============================================================================
   Top Navigation
   ============================================================================ */

/* cementing-modal-chrome-fleet S1 D1 (2026-05-13) — Iron-Law smoking-gun
   variable. `--ffa-band-default` carries the mobile-band fallback color
   (matches static <meta name="theme-color" content="#0a2e2e"> at
   index.html:28). Desktop .top-nav keeps `background: white` (intentional
   desktop chrome); mobile.css overrides .top-nav background to this var
   so the palette-stripped state on mobile renders dark teal instead of
   white. Paired with D3's onNavigate() fix at the JS layer (every mobile
   view sets data-modal-palette on mount, so the var is fallback-only). */
:root {
  --ffa-band-default: #0a2e2e;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: white;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-logo {
  font-size: var(--font-2xl);
  cursor: pointer;
  transition: transform 0.2s;
}

.nav-logo:hover {
  transform: scale(1.1);
}

.nav-title {
  font-size: calc(0.85rem * var(--type-scale)); /* Reduced to fit on single line on iPhone */
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
}

/* Demo sandbox badge in header */
.demo-sandbox-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  font-size: calc(0.6rem * var(--type-scale));
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: demo-pulse 3s ease-in-out infinite;
  /* containing-repaint-firehose S3 2026-05-29 — this badge lives in the HEADER
     shell (always-visible, NOT inside a .view, so it is NOT covered by the S2
     `.view{contain:layout paint}` backstop). Its opacity pulse is the same class
     as the abb6e505 pulse-glow OOM root cause (an opacity animation on an
     always-visible non-composited shell element → ~60fps shell repaint into
     #document → unbounded WebContent paint memory). Unlike pulse-glow (deleted as
     imperceptible), the 1↔0.7 dip is perceptible + carries information ("this is
     the demo sandbox"), so we ISOLATE it on its own compositor layer via
     will-change instead of removing it. The repaint now stays inside the badge's
     own backing and can never accumulate #document-wide. Demo-tenant only
     (ferguson production never renders this badge). */
  will-change: opacity;
}
@keyframes demo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Version number in header */

.nav-version {
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: var(--font-medium);
  color: #9ca3af;
  margin-left: 4px;
}

/* Copyright mark trailing the header version. Subtle by design — the claim is
   present on every screen without competing with the vault's own content.
   Hover/long-press surfaces the full notice via the title attribute. */

.nav-copyright {
  margin-left: 3px;
  opacity: 0.6;
  cursor: default;
}

/* On mobile, show version on its own line below title */

@media (max-width: 768px) {
  .nav-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .nav-version {
    margin-left: 0;
    font-size: calc(0.65rem * var(--type-scale));
    opacity: 0.8;
  }
}

/* ── ACTIVE-FOCUS BANNER (fitting-rail-and-cards S2 / D11, OBS-0) ──────────
   The vault says, in the one piece of chrome that is always on screen, when it
   is showing less than all of itself — and offers the way out. It exists in the
   DOM ONLY while a focus is active (focus-chips.js empties it otherwise), so
   the header's resting state is exactly what it was. This is NOT the return of
   the focus chips: it names and clears, it never sets. */
.ffa-focus-banner {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ffa-focus-banner:empty { display: none; }

.ffa-focus-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 320px;
  padding: 3px 4px 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  /* Amber, not the interface's blue: this is a STATE the member may not have
     chosen — the same register as a "you are filtered" notice, not a control
     they are being invited to use. */
  background: rgba(212, 154, 56, 0.20);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}
.ffa-focus-pill-icon { font-size: 0.8rem; }
.ffa-focus-pill-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ffa-focus-pill-clear {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.ffa-focus-pill-clear:hover { background: rgba(255, 255, 255, 0.34); }
.ffa-focus-pill-clear:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

@media (max-width: 768px) {
  /* .nav-center is the mobile title slot and it does not wrap, so the pill
     yields width to the title rather than pushing it. ⚠️ Whether two pills at
     once still read on a phone is an EYE question — declared OWED to S4. */
  .ffa-focus-pill { max-width: 40vw; padding-left: 7px; font-size: 0.72rem; }
}

.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Ensure focus controls stay in single row */
  white-space: nowrap;
  flex-shrink: 0;
  /* Prevent wrapping at all costs */
  flex-wrap: nowrap;
  max-width: none;
  /* Force children to stay on single line */
  min-width: max-content;
}

.nav-search {
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  transition: all 0.2s;
}

.nav-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Improved vertical alignment and spacing */

.nav-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Fergi AI header summon (directing-desktop-scenes S4, Issue 5). Teal kin of
   the Control Panel's menu-item-ai theme. Static icon — no animation on
   always-visible header chrome (see the pulse-glow OOM note below). */
.header-fergi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(20, 184, 166, 0.35);
  border-radius: 10px;
  background: rgba(13, 148, 136, 0.10);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.header-fergi-btn:hover {
  background: rgba(13, 148, 136, 0.20);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12);
}

.header-fergi-btn.active {
  background: rgba(13, 148, 136, 0.28);
  border-color: rgba(20, 184, 166, 0.6);
}

@media (max-width: 768px) {
  /* Mobile header untouched — mobile keeps its own Fergi entries. */
  .header-fergi-btn { display: none; }
}

@media (min-width: 769px) {
  /* Issue 5: Fergi AI leaves the Control Panel on desktop — the header summon
     is the universal control. The entry stays in the DOM + ACCESS_TIER_NAV for
     the mobile Control Panel (mobile pristine; CHECK 46 unchanged). !important
     outranks applyNavGating's inline display. */
  #sidebarAIBtn { display: none !important; }
}

/* Presentation embedded header elements (injected by PresentationPlayer in embedded mode) */

.pres-embedded-separator {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light);
  margin: 0 2px;
}

.pres-embedded-chapter {
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: var(--font-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.pres-embedded-comment {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: calc(0.78rem * var(--type-scale));
  font-weight: var(--font-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.pres-embedded-comment:hover {
  opacity: 0.85;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s;
}

.user-menu:hover {
  background: var(--color-bg-secondary);
}

/* Rectangular user control with blue background */

/* Added margin-bottom to prevent clipping at bottom */

.user-menu-rect {
  background: var(--color-primary);
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 4px;
}

.user-menu-rect:hover {
  background: #5a6fd6; /* Slightly darker blue on hover */
}

.user-name-btn {
  color: white;
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: var(--font-medium);
  white-space: nowrap;
}

/* Initials variant of the user control. Hidden on desktop (the rectangular
   .user-name-btn shows "Joe ▼"). On mobile, mobile.css shows this span and
   hides .user-name-btn; stories.css shapes .user-menu-rect into a 36px
   circular blue avatar. meticulous-tailoring-canvas D-E1 (Issue #7). */
.user-initials {
  display: none;
  color: white;
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

/* Legacy styles - kept for backwards compatibility */

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  font-size: var(--font-sm);
}

.user-name {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-sm);
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: var(--space-sm);
  display: none;
  z-index: 100001; /* Higher than all modals (typically ~10000-100000) to always appear on top */
}

.user-dropdown.active {
  display: block;
}

.user-dropdown a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}

.user-dropdown a:hover {
  background: var(--color-bg-secondary);
}

.user-dropdown hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-sm) 0;
}

/* ============================================================================
   Side Navigation
   ============================================================================ */

.side-nav {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  width: var(--side-nav-width);
  height: calc(100vh - var(--nav-height));
  background: white;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  z-index: 90;
  transition: transform 0.3s;
}

/* Mobile Control Panel - slide in from left */

/* Improved as dismissible overlay with backdrop */

@media (max-width: 768px) {
  /* Mobile owns its drawer width: the root token sizes the desktop band, so
     mobile re-declares it from the drawer token. Every mobile consumer of
     --side-nav-width keeps its pre-band 220px behavior. (The comment used to
     name the root value as "60px"; it is the TOKEN that matters here, not its
     current desktop magnitude, which has moved twice — 60 → 88 → 96.) */
  :root {
    --side-nav-width: var(--mobile-drawer-width);
  }

  .side-nav {
    transform: translateX(-100%);
    z-index: 11000; /* Above modals */
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease-out;
  }

  .side-nav.mobile-visible {
    transform: translateX(0);
  }
}

/* Mobile Control Panel backdrop */

.mobile-control-panel-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10999; /* Just below side-nav */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-control-panel-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Reduced padding for compact Control Panel */

.side-menu {
  padding: 8px;
}

/* Compact Control Panel - uniform height for all items */

/* Fixed height ensures visual consistency across all control items */

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 12px;
  min-height: 44px;  /* Uniform floor for all Control Panel items — height may
                        grow with the type scale (fixed 44px overlapped labels
                        under the 1.5× boost, Joe /listen 2026-07-24) */
  box-sizing: border-box;
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: all 0.2s;
  margin-bottom: 2px;
  font-size: calc(0.9rem * var(--type-scale));
}

.menu-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.menu-item.active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-weight: var(--font-medium);
}

/* BR-152 (unifying-vault-spine S5) — keyboard focus on a Control Panel launcher.
   There was NO :focus-visible rule on .menu-item: a keyboard user tabbing the
   Control Panel had no indication of where they were. That is a bare missing
   affordance, not a weak style, which is why it lands in a train that otherwise
   changes nothing visual — it adds an indicator where none existed rather than
   restyling one that did. Invisible to pointer users: :focus-visible fires only
   for keyboard/AT focus, never on click.

   LAUNCHERS.md § 9: a 2 px white outline with a 1 px dark offset ring. The dark
   ring fills the offset gap so the white stays legible on the light resting fills
   (media #10b981, explore #ec4899) as well as the dark ones. Declared AFTER
   .menu-item.active so it wins the cascade at equal specificity — a focused
   launcher that is also the active one still shows the ring. */
.menu-item:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), 0 2px 8px rgba(0,0,0,0.2);
}

/* Three Foci - Phase 10: Focus indicator dot on nav items */

.menu-item.has-active-focus {
  position: relative;
}

.menu-item.has-active-focus::after {
  /* SYS-2 (tightening-about-cues S1, 2026-05-23): the focus indicator dot
     previously drew a small purple disc + 8px purple glow (hardcoded
     rgba(102,126,234,0.6)) over the gradient nav button. On the blue family
     nav, green stories, and green media-curator buttons the purple bled
     visibly as a "second-color sliver behind the button" (Joe Camtasia
     review burst 21). The dot is now visually neutral (a soft white pill
     with a subtle white halo), so it reads as a focus indicator on ALL
     button themes without injecting a second hue. */
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06);
  /* shedding-idle-ballast 2026-05-29 — focusPulse REMOVED (OOM co-cause with
     .menu-item-ai pulse-glow): animated opacity+scale on this always-visible
     active-focus dot repainted #sideNav ~60×/sec. The static white dot + halo
     still reads as the focus indicator. See the .menu-item-ai .fergi-ai-icon note. */
}

@keyframes focusPulse {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.75; transform: translateY(-50%) scale(1.18); }
}

/* Fergi AI control styling - highlighted at top of Control Panel */

/* Updated to PCB teal/pink theme per FERGI_AI_LOGO_SPECIFICATION.md */

.menu-item-ai {
  background: linear-gradient(135deg, #0a2e2e 0%, #134040 100%);
  color: white !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(10, 46, 46, 0.4);
  border: 1px solid #2a7575;
  /* Same height as other menu-items - inherited from .menu-item */
}

.menu-item-ai:hover {
  background: linear-gradient(135deg, #134040 0%, #1a5252 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(42, 117, 117, 0.5);
  border-color: #3a8585;
}

/* Fergi AI active state - v12.1.0: Show when AI modal is open */

.menu-item-ai.active {
  background: linear-gradient(135deg, #1a5252 0%, #2a6666 100%);
  box-shadow: 0 0 12px rgba(109, 212, 212, 0.6), inset 0 0 4px rgba(109, 212, 212, 0.3);
  border-color: #6DD4D4;
  transform: translateY(-1px);
}

/* Fergi AI label with teal/pink gradient text */

.menu-item-ai .menu-label {
  background: linear-gradient(90deg, #6DD4D4, #E8A0B8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Fergi AI icon — THE APPROVED BRAND MARK, in the Control Panel and the header.
   2026-08-05: this rule used to draw `content: '🧠'` — a bare brain emoji, no PCB
   field — while mobile (mobile-drawer.js FERGI_AI_LOCKED_ICON_PATH) and the favicon
   both used the real artwork. Desktop was the one surface that was wrong. Both
   sites now carry <img class="launcher-art" src="assets/branding/fergi-ai-icon.svg">
   in the markup, so the mark is right at first paint and there is no ::after glyph
   left to go stale. Spec: FERGI_AI_LOGO_SPECIFICATION.md ("Final Design Approved",
   2025-12-30) — teal PCB field, brain, not to be redesigned. */

.fergi-ai-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0;               /* no text glyph lives here any more */
}

.fergi-ai-icon > .launcher-art {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6px;         /* the mark is a square teal plate; soften its corners
                                 to match the launcher card it sits in */
  object-fit: contain;
}

/* shedding-idle-ballast 2026-05-29 — pulse-glow REMOVED (OOM ROOT CAUSE).
   This imperceptible opacity 1↔0.85 "breathing" on the always-visible Fergi AI
   sidebar icon forced WebKit to repaint the full-height #sideNav ~60×/sec forever,
   JS main thread idle. WebContent paint/tile memory accumulated to multi-GB →
   Safari's "significant memory" reaper on left-open FFV tabs. Verified on real
   Safari 2026-05-29: killing it stopped AND reversed the climb (925→859 MB);
   no visual loss (the pulse was not perceptible). RULE: infinite animations on
   always-visible shell elements (#sideNav/.side-nav/.header/.top-bar) must be
   removed or GPU-composited via will-change. */
.menu-item-ai .fergi-ai-icon {
  /* intentionally no animation — static icon (see note above) */
}

/* Fergi AI PCB icon with brain - for larger presentations outside Control Panel */

.fergi-ai-icon-pcb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #0a2e2e;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  font-size: calc(28px * var(--type-scale));
  box-shadow: inset 0 0 0 1px rgba(42, 117, 117, 0.5);
}

/* PCB circuit trace pattern background - for larger icon */

.fergi-ai-icon-pcb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none'%3E%3Cpath stroke='%23134040' stroke-width='1.5' d='M0 3 H64 M0 61 H64 M3 0 V64 M61 0 V64'/%3E%3Cpath stroke='%231a5252' stroke-width='1' d='M0 7 H18 L21 10 H43 L46 7 H64 M0 57 H18 L21 54 H43 L46 57 H64 M7 0 V18 L10 21 V43 L7 46 V64 M57 0 V18 L54 21 V43 L57 46 V64'/%3E%3Cpath stroke='%23206060' stroke-width='0.75' d='M0 12 H15 M49 12 H64 M0 20 H10 M54 20 H64 M0 28 H6 M58 28 H64 M0 36 H6 M58 36 H64 M0 44 H10 M54 44 H64 M0 52 H15 M49 52 H64 M12 0 V15 M12 49 V64 M20 0 V10 M20 54 V64 M28 0 V6 M28 58 V64 M36 0 V6 M36 58 V64 M44 0 V10 M44 54 V64 M52 0 V15 M52 49 V64'/%3E%3Cpath stroke='%232a7575' stroke-width='0.5' d='M6 6 L12 12 M52 6 L58 12 M6 58 L12 52 M52 58 L58 52'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
}

/* Brain emoji overlay - for larger icon */

.fergi-ai-icon-pcb::after {
  content: '🧠';
  position: relative;
  z-index: 1;
  font-size: calc(26px * var(--type-scale));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* BR-147 (unifying-vault-spine S5) — .menu-item-storyteller and .menu-item-curate
   were deleted here, with .menu-item-stories below. Fully authored, used by
   nothing. Proven dead before deletion, not assumed: a repo-wide search for all
   three names across every .html/.js/.css returned hits in exactly ONE file, this
   one (7 selector lines) — and a separate search for dynamic construction
   ('menu-item-' + x, `menu-item-${x}`, className templates) returned nothing,
   with a known-positive control confirming that search shape does find the three
   real dynamic-class sites elsewhere in app/js/. A class no markup carries and no
   code can compose renders nothing, so this deletion is invisible by definition —
   which is what makes it the one deletion this otherwise delete-nothing train can
   safely take.
   Reversal: Joe says Stories should be orange → restore .menu-item-stories from
   git and set group:'stories' on one registry row; the .active shade already
   passes AA at 6.04:1. The reversal is cheaper than the deletion, which is why
   the rules were read in full before they were removed. */

/* ============================================================================
   v10.3.0: Color-Coded Control Panel Groups
   All menu items now have solid color backgrounds for visual grouping
   ============================================================================ */

/* Stories group (Stories, Portraits, Dressing Room, Studio) - Amber (Joe 2026-10-01: bright,
   functionally grouped desktop rail). The pre-overlay fallback paint; the dressed rail's
   palette is launcher-visual.css § BRIGHT FUNCTIONAL GROUPS. */
.menu-item-stories {
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
  color: #0f172a;
}
.menu-item-stories:hover { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.menu-item-stories.active { background: #f59e0b; }

/* Family group (Navigator, Member) - Blue theme */

.menu-item-family {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white !important;
  font-weight: 500;
}

.menu-item-family:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.menu-item-family.active {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

/* BR-147 (unifying-vault-spine S5) — .menu-item-stories deleted here; see the
   note above the v10.3.0 block. Stories carries .menu-item-media (green), which
   stays the content group: five of thirteen is not too many, because colour
   groups navigation while the glyph and label identify the item. */

/* Media group (Media, Curate) - Green theme */

.menu-item-media {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white !important;
  font-weight: 500;
}

.menu-item-media:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.menu-item-media.active {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
}

/* Explore group (Training Story, Leaderboard) - Pink/Magenta theme */

/* Changed from Amber to Pink for better visual distinction */

.menu-item-explore {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: white !important;
  font-weight: 500;
}

.menu-item-explore:hover {
  background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
}

.menu-item-explore.active {
  background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
}

/* Tools group (Media and Document Import, Photo Tagging) - Purple theme */

.menu-item-tools {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white !important;
  font-weight: 500;
}

.menu-item-tools:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.menu-item-tools.active {
  background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
}

/* Admin - Red theme (unique, powerful) */

.menu-item-admin {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white !important;
  font-weight: 500;
}

.menu-item-admin:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.menu-item-admin.active {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
}

/* About/Info - Slate theme (subtle, always visible) */

.menu-item-info {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  color: white !important;
  margin-top: 8px;
}

.menu-item-info:hover {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

.menu-item-info.active {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
}

/* Compact menu icon and label for tighter vertical fit */

.menu-icon {
  font-size: calc(1.1rem * var(--type-scale));
}

/* ============================================================================
   THE CANONICAL ILLUSTRATED LAUNCHER SET — art tile + live caption
   (2026-08-05, Joe directive; assets from the six-round Gemini set at
   app/assets/launcher-icons/, docs/design/launcher-icons/README.md)

   These rules live in styles.css — the sheet that loads in <head> — and NOT in
   launcher-visual.css, deliberately. launcher-visual.css is fetched by the
   overlay only after it has loaded its manifest, which is precisely why Joe saw
   "the emojis flash by to be replaced by the incomprehensible icons": the first
   paint was the old markup. The art is in the markup and its styling is in the
   always-loaded sheet, so first paint IS the final icon — flags on or off.

   ⛔ art/ ONLY at this size. The captioned/ set bakes its caption into ~17% of
   tile height; at 72px that is ~12px of resampled JPEG against 10px of crisp
   live text, and the rail slot carries its own caption anyway. The asset-tier
   rule is unchanged and still satisfied at 72px: a slot BELOW 96px, or any slot
   carrying its own label, uses art/. The caption below is LIVE TEXT, styled to
   echo the baked look (small caps, warm cream, letter-spaced).

   This is the GENERIC default tile size. The desktop band overrides it to 72px
   (see the band block below); mobile overrides it to 36px.
   ============================================================================ */

.launcher-art {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  /* The tiles are illustrated plates with their own board colour; a hairline
     keeps them from bleeding into a launcher card of a similar darkness. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 1px 3px rgba(0, 0, 0, 0.35);
  -webkit-user-drag: none;
  user-select: none;
}

.launcher-caption {
  display: none;               /* desktop band only — see the min-width block */
}

/* The Curator icon - emoji in gold museum frame */

.curator-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(145deg, #8B6914, #C9A227);
  border: 3px solid #D4AF37;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(22px * var(--type-scale));
  box-shadow:
    inset 0 0 0 2px rgba(139,105,20,0.5),
    inset 2px 2px 4px rgba(255,255,255,0.2),
    0 2px 4px rgba(0,0,0,0.3);
}

.menu-label {
  font-size: var(--font-base);
}

/* ============================================================================
   Desktop band — squaring-chrome-maximize S2 (Return 028), re-proportioned
   2026-08-05 for the canonical illustrated set.

   The ONLY desktop Control Panel state. Was a 60px band of 44×44 squares
   carrying a 24px glyph; then (earlier on 2026-08-05) an 88px band of 80px
   cards holding a 48px tile; it is now a 96px band of 88px launcher CARDS, each
   a 72px art tile over its own live caption.

   ── The 2026-08-05 PM re-proportion (unsilencing-vault-surfaces S3, D3.1) ──
   Joe, on the 48px shape: "too much black background visible." That is a RATIO
   complaint, and it was measured before it was answered (fixture
   logs/unsilencing-vault-surfaces/fixtures/s3-probe.mjs, live v1.0.220):

       artwork covered 41.2% of the card box
       16.0px of dark surround on EACH side of the tile

   The tile grows 48 → 72 and the card grows with it, so the surround becomes a
   margin instead of a field. Measured on the shipped result at v1.0.224, by the
   same fixture (logs/unsilencing-vault-surfaces/fixtures/s3-verify.mjs):

       artwork covers 60.7% of the card box   (was 41.2%)
       8.0px of surround on EACH side         (was 16.0px)

   — that 8px is 3px of card padding plus 5px inside the content box.

   ⛔ 72px IS NOT A ROUND-NUMBER CHOICE — IT IS THE ASSET LADDER.
   art/ ships at 48 / 96 / 144. A 72px CSS slot asks for 72 device px at DPR 1
   (served by the 96 file) and exactly 144 at DPR 2 (served by the 144 file).
   76px would have covered 4 points more of the card and been under-resolved at
   every Retina display in the family, which is the "bigger but blurrier"
   trade — a metric that improves while the result gets worse. The markup's
   srcset was converted from x-descriptors to w-descriptors + `sizes` in the
   same change; x-descriptors are anchored to the intrinsic width=48 and would
   have kept serving the 48 file into a 72px slot.

   Width arithmetic, so the next change does not have to re-derive it:
       rail 96 = card 88 + 4px rail padding each side
       card 88 = content 82 + 3px card padding each side
       tile 72 centred in 82  → 5px of surround per side
       caption 10px: DOCUMENTATION, the longest, measures 71px at 9px, so
                     71 × 10/9 = 79px in 82px of content — 3px of slack, with
                     nowrap + ellipsis as the standing safety valve.

   Cost, stated rather than discovered later, and MEASURED rather than
   estimated: a card is 97px tall against the ~70px it replaced, and the admin
   rail's scrollHeight is 1311px (was 940px and not scrolling at 88/48). On a
   1000px-tall laptop window it therefore scrolls, on .side-nav's existing
   overflow-y:auto — the safety valve was already there, and this is the honest
   price of a dominant tile plus a caption. On Joe's 27" display (1440 logical
   minus the 60px header = 1380px of rail) 1311px still FITS without scrolling.

   .menu-label is still CLIPPED, never display:none, so the canonical accessible
   name survives — the caption is a short DESTINATION word ("Navigator"), the
   label is the full title ("Family Navigator"), and only the label is spoken.
   Guarded to min-width:769px — mobile keeps its 220px drawer anatomy untouched.
   ============================================================================ */

/* @ffa-anchor: desktop-control-band — DO NOT REMOVE OR RENAME.
   control-band.smoke.cjs reads the band's real geometry out of the rules below
   and cross-checks it against launcher-visual.css. It cannot anchor on
   `@media (min-width: 769px)` (styles.css has three of them, and the first
   precedes the BASE `.side-menu { padding: 8px }` rule, so the gate silently
   measured the wrong block and reported a card overflowing a rail that fits it
   exactly). It cannot anchor on the prose above either, which is editable. This
   sentinel is the stable contract between the sheet and its gate. */
@media (min-width: 769px) {
  .side-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;

    /* ── THE FLUID FIT (fitting-rail-and-cards S1, D1) ─────────────────────
       Joe, 2026-08-12: "reduce the size of the rectangular control in the
       control panel on the left so that they all appear in the pasted display
       without scrolling."

       ⛔ NOT A SMALLER FIXED SIZE. The rail overflowed because its card height
       was a CONSTANT (97px) while the height it had to fit in is a VARIABLE.
       Any fixed replacement is needlessly tiny on a 27" display and still
       overflows on a short laptop — it just moves the machine on which the
       overflow happens. The tile is therefore DERIVED from the height the
       rail actually has, and every input below is a declared fact rather than
       a number measured on one window.

       The arithmetic, written down so the next author does not re-derive it:

           available   = 100vh - --nav-height        (.side-nav's own height)
           usable      = available - 12px            (this rule's 6px top+bottom)
                                   - (N-1) x 2px     (this rule's flex gap)
           per card    = usable / N
           tile        = per card - --rail-card-chrome

       --rail-card-chrome is everything in a card that is NOT the tile:
       4px + 5px of card padding, the 3px flex gap, and one 11px caption line
       (10px x 1.1 line-height, rounded up) = 23px.

       N = 13 is the ADMIN rail — the worst case, and the only case that has to
       fit: About, Navigator, Stories, Portraits, Dressing (injected by
       room-windows.js), Browse, Documentation, Import, Explore, Faces,
       Training, Dashboard, Admin. Media Curator and User Dashboard are
       display:none and contribute nothing (OBS-9); a family member sees fewer
       and simply gets a larger tile. If a fourteenth doorway is ever added to
       the rail, RAISE THIS NUMBER — it is the one thing here that is not
       self-maintaining.

       The clamp bounds are both material facts, not taste:
         · 72px ceiling — art/ tops out at 144px, so a tile above 72 is
           under-resolved at DPR 2 (control-band.smoke.cjs asserts this).
         · 40px floor  — the launcher set's MEASURED size rule: no illustrated
           raster survives below ~40px (launcher-registry.js:110). Below the
           floor the rail owes VECTOR art, which is a different deliverable
           (D2) with a different asset path; the floor is where this rule stops
           rather than quietly shipping mud.

       At 100vh >= 915px the fluid term is above the floor and the rail fits
       with its captions. Below that the caption is dropped and only
       --rail-card-chrome changes (see the short-viewport block after the
       band) — one token, not a second geometry. */
    --rail-controls: 13;
    --rail-card-chrome: 23px;
    --rail-tile-min: 40px;
    --rail-tile-max: 72px;
    --rail-tile: clamp(
        var(--rail-tile-min),
        calc((100vh - var(--nav-height) - 12px
              - (var(--rail-controls) - 1) * 2px
              - var(--rail-controls) * var(--rail-card-chrome))
             / var(--rail-controls)),
        var(--rail-tile-max));
  }

  .side-menu .menu-item {
    width: 88px;
    height: auto;
    min-height: 44px;
    padding: 4px 3px 5px;
    margin-bottom: 0;          /* the flex gap owns the 2px rhythm */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    overflow: visible;         /* the focus ring must not be clipped */
  }

  /* The tile well. Sized to the art, not to the old 24px glyph slot — and now
     to the FLUID tile, so the well can never disagree with the plate it holds. */
  .side-menu .menu-item .menu-icon {
    width: var(--rail-tile);
    height: var(--rail-tile);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The art tile itself. The generic .launcher-art default is 48px; the band
     is the slot that grew, so the band declares its own size rather than
     moving the default out from under every other consumer (the 28px header
     mark among them). The radius grows with the tile so the plate keeps the
     same visual corner softness at 1.5× the size. */
  .side-menu .menu-item .launcher-art {
    width: var(--rail-tile);
    height: var(--rail-tile);
    border-radius: 10px;
  }

  /* The caption — live text, styled to echo the baked caption in the
     captioned/ set (small caps, warm cream #E8DCC4, letter-spaced). 10px is
     what the widened card affords: DOCUMENTATION, the longest, measures 71px
     at 9px, so it takes 79px of the 82px of card content at 10px. Live text at
     that size is crisp on any display, which resampled JPEG never is.
     aria-hidden in the markup: the accessible name is .menu-label's. */
  .side-menu .menu-item .launcher-caption {
    display: block;
    max-width: 100%;
    font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
    font-size: calc(10px * var(--type-scale));
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: #E8DCC4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }

  /* Clipped, not display:none — the canonical title stays in the
     accessibility tree (and in the tooltip + aria-label the authoritative
     renderer stamps). */
  .side-menu .menu-item .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Truthful corner badge: compact 16px overlay in the square's top-right,
     never displacing the 24px glyph. The badge node is aria-hidden; the
     count is folded into the launcher's accessible name. */
  .side-menu .menu-item .menu-badge {
    top: 2px;
    right: 2px;
  }

  /* Three Foci dot moves flush to the edge so it cannot collide with the
     centered glyph at 44px. */
  .side-menu .menu-item.has-active-focus::after {
    right: 3px;
  }

  /* Non-color selected marker for the vanilla (undressed) renderer: the
     left-edge bar. Dressed launchers carry their own .ffvl-bar. */
  .side-menu .menu-item.active:not(.ffvl-dressed)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: rgba(255, 255, 255, 0.95);
    pointer-events: none;
  }
}

/* ── SHORT-VIEWPORT STAGE: the caption yields before the artwork does ────────
   fitting-rail-and-cards S1, D1/D2.

   Below 915px of viewport the fluid tile above has bottomed out on its 40px
   floor and the rail would scroll again. Something has to give, and the order
   is deliberate: the CAPTION goes first, because it is the one part of the
   card that is DUPLICATED — .menu-label carries the same destination as the
   canonical accessible name, clipped but present, and the overlay stamps both
   `title` and `aria-label` from the registry. Nothing is lost that a hover or
   a screen reader cannot recover; shrinking the plate instead would cross the
   measured ~40px legibility floor, and that loss is not recoverable.

   Dropping the caption is worth 14px of card chrome, which buys back MORE than
   it costs: at 900px the tile goes from its 40px floor to ~53px. The rail is
   therefore roomier just after the switch than just before it — the artwork
   grows as the window shrinks, which is the opposite of the failure this
   deliverable exists to fix.

   ONE TOKEN CHANGES. The clamp above re-solves itself from
   --rail-card-chrome; there is no second geometry to keep in sync.

   ⚠️ THE PAIR: launcher-visual.css restates the caption's `display` at flag-on
   specificity, so it carries the matching rule. Never edit one without the
   other — control-band.smoke.cjs asserts both are present. */
@media (min-width: 769px) and (max-height: 915px) {
  .side-menu {
    --rail-card-chrome: 9px;   /* 4px + 5px of card padding; no caption line */
  }

  .side-menu .menu-item .launcher-caption {
    display: none;
  }
}

/* @ffa-anchor: desktop-control-band-v15 — DO NOT REMOVE OR RENAME.
   control-band.smoke.cjs reads the v15 geometry out of the rules below exactly
   as it reads the flag-off band out of the block above, and cross-checks it
   against launcher-visual.css's mirror. The sentinel is the stable contract.

   ── THE BESIDE-CAPTION RAIL (certifying-desktop-frame S1, D2/D3/D4) ─────────
   Joe /listen 2026-08-13: "I need the text labels back in the controls in the
   control panel. I also need them to be a bit shorter, or else just make them a
   contiguous strip on the left with no space between, so that they are all
   visible in my browser without scrolling. They are close now but not quite all
   visible."

   RULED by Joe in session: the caption moves BESIDE the tile, not beneath it,
   and the tiles stop being squares — he accepted that explicitly. Beneath a
   tile floored at 40px the two halves of his request are arithmetically
   incompatible below ~954px of viewport height; beside it, the label costs
   WIDTH instead of HEIGHT and both hold from 758px upward. That number is the
   whole reason this shape was chosen, so it is written down rather than
   re-derived:

       card height  = 9px of card padding + the tile   (no caption line — the
                      caption sits beside the tile and is shorter than it)
       rail height  = 12px of rail padding + 14 x card height + 13 x 0px gap
       at the 40px floor: 12 + 14x49 = 698, + 60px header = 758px of viewport.

   ⛔ EVERY RULE HERE IS SCOPED TO html.ffv-frame-geometry-v15, AND THAT IS THE
   POINT, NOT A STYLE CHOICE. This block was authored on Deep Thought, which can
   measure geometry and cannot certify a visual outcome; a push to main is a
   production deploy. Flag-off must reproduce today's rail EXACTLY, so nothing
   above is edited and nothing here is unconditioned. S4 (Mac, --chrome) walks
   the rail at Joe's real window height and flips the flag.

   THREE CHANGES, ONE SHAPE:

   1. --rail-controls: 13 -> 14. A PLAIN COUNTING BUG, true under any caption
      layout. The rail dresses FOURTEEN launchers — the console says
      `[FFALauncherVisual] 14 dressed` on every load — and the divisor said 13,
      so the band budgeted height for 13 cards and laid out 14, overflowing by
      exactly one card at every viewport height. That is precisely Joe's "close
      now but not quite all visible," and it is the same constant-vs-variable
      error fitting-rail-and-cards set out to fix: the card HEIGHT stopped being
      a constant, the card COUNT did not.

      ⛔ AND IT IS NOW GUARDED, because a constant that must equal a count and is
      maintained by hand IS the defect. control-band.smoke.cjs derives the count
      from the thing that actually lays out — the number of `.launcher-caption`
      elements in index.html's rail, plus the one room-windows.js injects for
      the Dressing Room doorway — and fails RED if this number disagrees. Add a
      fifteenth doorway and the gate tells you, instead of a family member
      finding it clipped at the bottom of the rail.

   2. --rail-card-chrome: 23px -> 9px. Chrome is everything in a card that is
      NOT the tile. Beneath-caption it was 4+5 padding + a 3px gap + an 11px
      caption line; beside-caption the gap and the line are horizontal costs, so
      only the 4+5 of card padding remains. ONE TOKEN CHANGES — the clamp in the
      band above re-solves itself from it, exactly as the short-viewport block
      does. There is no second geometry to keep in sync.

   3. The card becomes a ROW, and the rail widens to hold the longest name.
      --side-nav-width 96px -> 172px, card 88px -> 164px:

          3px card padding + 72px tile ceiling + 6px gap + 80px caption + 3px
          = 164px card, + 2 x 4px rail padding = 172px rail.

      The caption column is sized for DOCUMENTATION, the longest of the fourteen
      (Fergi AI · About · Navigator · Stories · Portraits · Dressing · Browse ·
      Documentation · Import · Explore · Faces · Training · Dashboard · Admin),
      which the band's own note measures at 79px at this size. It is sized
      against the tile CEILING, not the tile at Joe's window, because the card
      width is a constant and the tile is not — at a shorter window the tile
      shrinks and the caption simply gains slack.

      ⚠️ THE APP PANEL LOSES 76px, AND EVERY ROOM IS SIZED AGAINST IT. rectFor
      computes each room's default from the App-Panel rect, which is why the
      rail and the max-size-first default are ONE deliverable in ONE session
      rather than two: sequenced apart, the geometry would be computed against a
      width that was about to change. FFACanvas reads --side-nav-width live, so
      nothing here needs a second declaration to stay in step.

   4. THE 915px CAPTION-DROP PAIR IS RETIRED BY THE FLAG, NOT DELETED. The block
      immediately above drops the caption below 915px of viewport height, and it
      is RIGHT to, in the flag-off world: a caption BENEATH the tile stole the
      height the tile needed, and dropping it bought the artwork back. A caption
      BESIDE the tile steals no height at all, so the breakpoint is no longer
      the right instrument — it would now hide a label for no benefit at exactly
      the window sizes Joe is complaining about.

      It is not deleted because flag-off still needs it and must stay
      byte-identical. It is OVERRIDDEN here, at the same breakpoint, in both
      sheets. control-band.smoke.cjs keeps its original assertion (the flag-off
      pair still exists and still agrees on its number) AND gains a new one (the
      v15 override exists in both sheets, at that same number) — the guard is
      replaced, never dropped to make a test pass. When a later train deletes
      this flag, the flag-off half goes with it.

   NOT SPENT, DELIBERATELY: the 40px floor holds (launcher-registry.js:110 — no
   illustrated raster survives below it), so the vector-art escape hatch
   fitting-rail-and-cards named as D2 stays unspent; and the 72px ceiling holds,
   because art/ tops out at 144px and a larger tile is under-resolved at DPR 2.

   OWED TO S4's EYE, and stated as owed rather than claimed: whether 172px is
   the right bite out of Joe's actual window (never measured — it is the one
   decisive number this session does not have), and whether the artwork reads
   well at the ~50px the fluid term lands on at a 900px viewport. */
@media (min-width: 769px) {
  html.ffv-frame-geometry-v15 {
    --side-nav-width: 172px;
  }

  html.ffv-frame-geometry-v15 .side-menu {
    /* 15 since founding-story-studio S4 added the Studio launcher (dd849cbc6) — the same counting bug as
       13 -> 14 below, caught by control-band.smoke §6a (Greg 2026-10-08). Chrome 9 -> 8: at 15 cards the
       9px card (4+5 padding) needed 12 + 15x49 + 60 = 807px of viewport; 4+4 gives 792, under the 800 a
       short laptop has. */
    --rail-controls: 15;
    --rail-card-chrome: 8px;
    gap: 0px;                  /* Joe: "no space between". Written `0px` rather
                                  than `0` on purpose: --rail-tile's clamp
                                  subtracts this value, and control-band.smoke
                                  reads it back out of this declaration to
                                  recompute the fit. A unitless 0 is the same
                                  layout and an unreadable input. */
  }

  html.ffv-frame-geometry-v15 .side-menu .menu-item {
    width: 164px;
    padding: 4px 3px 4px;      /* 8px of chrome = --rail-card-chrome (15 cards fit 800px) */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  html.ffv-frame-geometry-v15 .side-menu .menu-item .launcher-caption {
    display: block;
    flex: 1 1 auto;
    min-width: 0;              /* a flex item's default min-width is its content;
                                  without this an over-long name would push the
                                  card wider than the rail instead of ellipsing */
    max-width: none;
    text-align: left;
  }
}

/* The v15 override of the caption drop. Same breakpoint as the pair above, on
   purpose: this is a REPLACEMENT of that rule's decision, not a second
   breakpoint. ⚠️ THE PAIR RULE STILL APPLIES — launcher-visual.css carries the
   flag-on mirror of this override at its own specificity, and
   control-band.smoke.cjs asserts both are present and agree. */
@media (min-width: 769px) and (max-height: 915px) {
  html.ffv-frame-geometry-v15 .side-menu {
    --rail-card-chrome: 8px;
  }

  html.ffv-frame-geometry-v15 .side-menu .menu-item .launcher-caption {
    display: block;
  }
}

/* ── THE STRAY VERSION WATERMARK (certifying-desktop-frame S1, D6) ───────────
   #heroVersion lives inside #view-dashboard, whose own markup comment reads
   "desktop: hidden (no hero)" — and Joe's landing screenshot shows it painting
   a bare `v1.0.272` at the top-left of an otherwise empty App Panel. It is the
   vault's SINGLE SOURCE OF TRUTH for the version (Critical JS Rule 2: read the
   version from this element, never hardcode it in JS), so it cannot be deleted
   and it cannot be display:none — a removed element and a hidden one both read
   back as empty.

   So it is CLIPPED, exactly the way `.menu-label` is: present in the DOM, its
   textContent intact for every reader, occupying no space and painting nothing.

   ⛔ THIS IS A CONTAINMENT, NOT THE ROOT FIX, AND SAYING SO IS THE POINT.
   The root cause of the empty landing is separate and was found against the
   production database at S1: `user_view_state.current_view` is being persisted
   as 'ffv-desktop' — the NEUTRAL BACKDROP view, which room-windows.js
   stageCanvas() navigates to before raising a room — for 3 of the 7 rows in the
   live table. On the next session that value is restored as a destination, the
   member lands on an empty canvas with no room on it, and the only thing left
   painting is this watermark. `ViewState._NON_RESUMABLE_VIEWS` exists for
   precisely this class and lists only 'about'. Adding 'ffv-desktop' to it heals
   both the save side and the restore side in one edit — but view-state.js is
   NOT in S1's write manifest, so that edit is named, evidenced and handed on
   rather than smuggled in. See docs/listen/2026-08-13_S1_FRAME_GEOMETRY.md.
   room-windows.js's landing backstop covers the behaviour meanwhile, and does
   so for the honest reason that a landing with nothing presented is wrong
   however it was reached. */
html.ffv-frame-geometry-v15 #heroVersion {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The mobile slide-in drawer keeps its labelled-row anatomy: the art tile rides
   at 36px beside the full title, and the caption stays hidden because the row
   already carries the label it would duplicate. (2026-08-05) */
@media (max-width: 768px) {
  .side-nav .menu-item .launcher-art {
    width: 36px;
    height: 36px;
  }

  .side-nav .menu-item .fergi-ai-icon {
    width: 36px;
    height: 36px;
  }
}

/* ============================================================================
   Main Content
   ============================================================================ */

.main-content {
  margin-top: var(--nav-height);
  margin-left: var(--side-nav-width);
  min-height: calc(100vh - var(--nav-height));
  padding: var(--space-xl);
  position: relative; /* Required for absolutely positioned children like fm-expanded-container */
}

.view {
  display: none;
  /* containing-repaint-firehose S1 (2026-05-29) — `animation: fadeIn 0.3s` REMOVED.
     Identified #document-repaint driver. This full-page opacity fade ran on the
     active view container (#view-stories etc. — ~1169×2225, taller than the
     viewport, NOT promoted to its own compositor layer), so every (re)activation
     of a view repainted the entire page ROOT. Real-Safari Layers measured
     #document at 9,114 paints racing ~60-76/s while getAnimations()=0 (a one-shot
     CSS opacity animation on the layer root, re-triggered on view (re)mount); the
     `*{animation:none}` kill froze it. This is the SAME class the abb6e505
     shedding-idle-ballast fix removed from the sidebar (imperceptible opacity
     pulse-glow/focusPulse): an opacity animation on a large NON-composited element
     forces a ~60fps container repaint, accumulating multi-GB WebContent paint
     memory until Safari's significant-memory reaper kills the tab. A 0.3s
     view-switch fade is cosmetically marginal; removing it makes view switches
     instant AND eliminates the full-page repaint. (Small modal/popup `fadeIn`
     usages elsewhere keep the keyframe — they are composited surfaces, not the
     page root.) real-Safari 84 MB/s verification PENDING Joe. */

  /* containing-repaint-firehose S2 (2026-05-29) — STRUCTURAL CONTAINMENT (the
     defense-by-construction backstop to the S1 root fix). Each view becomes its
     own layout + paint containment root: ANY un-composited animation, or any
     future repaint driver that slips through, now repaints ONLY within that
     view's own backing and can NEVER accumulate #document-wide paint memory.
     This makes the leak class structurally non-recurring even if a new animation
     lands on an in-view element. `layout paint` is deliberate: NOT `size`
     (auto-height views must keep intrinsic content-driven sizing — `size` would
     collapse them) and NOT `content-visibility:auto` (measurement / scroll-anchor
     side effects on always-on containers, per the S2 plan). Safety verified by
     A/B Playwright layout-regression (WebKit, desktop 1440x900 + iPhone 390x844,
     17 content views A/B'd against this exact rule): ZERO clip-risk (no descendant
     extends beyond any view box, so paint-clip removes nothing), ZERO view-rect /
     page-scroll delta, ZERO position:fixed|sticky descendants re-anchored — every
     modal/overlay/lightbox/toast/banner mounts at document.body, never inside a
     .view, so the new containing-block establishment touches nothing. /about/ is
     a standalone full-page shell (0 .view containers) and is unaffected.
     real-Safari 84 MB/s leak verification PENDING Joe (headless cannot reproduce
     the GPU-compositor leak — Joe's overnight FFV test is the sole gate). */
  contain: layout paint;
}

.view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================================
   View Header
   ============================================================================ */

.view-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.view-header h2 {
  flex: 1;
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
}

.view-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ============================================================================
   Dashboard
   ============================================================================ */

.hero-section {
  text-align: center;
  padding: var(--space-2xl) 0;
  margin-bottom: var(--space-xl);
}

.hero-title {
  font-size: var(--font-4xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.hero-stats {
  font-size: var(--font-xl);
  color: var(--color-text-light);
}

.hero-version {
  margin-top: var(--space-md);
  font-size: var(--font-sm);
  color: var(--color-text-light);
  opacity: 0.6;
  font-weight: var(--font-medium);
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.icon-card {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.icon-card-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: var(--space-md);
}

.icon-card h3 {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.icon-card p {
  color: var(--color-text-light);
  font-size: var(--font-sm);
}

.recent-activity {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.recent-activity h2 {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-lg);
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.activity-item {
  display: flex;
  align-items: start;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  transition: background 0.2s;
}

.activity-item:hover {
  background: var(--color-bg-secondary);
}

.activity-icon {
  font-size: var(--font-xl);
}

.activity-content p {
  margin-bottom: var(--space-xs);
}

.activity-time {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}


/* Enhanced Person Detail Panel */

.person-panel-enhanced {
  position: fixed;
  top: var(--nav-height);
  right: -450px;
  width: 450px;
  height: calc(100vh - var(--nav-height));
  background: var(--ffvr-surface-raised, white);
  box-shadow: var(--shadow-xl);
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 95;
  display: flex;
  flex-direction: column;
}

.person-panel-enhanced.active {
  right: 0;
}

.person-panel-header {
  padding: var(--space-lg);
  border-bottom: 2px solid var(--ffvr-rule, var(--color-border));
  background: var(--ffvr-surface, var(--color-bg-secondary));
  position: relative;
}

.person-panel-header h3 {
  margin: 0;
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--ffvr-ink, var(--color-text));
  padding-right: 3rem;
}

.btn-close-enhanced {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 40px;
  height: 40px;
  border: none;
  background: var(--ffvr-surface-raised, white);
  border-radius: var(--radius-full);
  font-size: var(--font-2xl);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ffvr-ink-muted, var(--color-text-light));
  box-shadow: var(--shadow-sm);
}

.btn-close-enhanced:hover {
  background: var(--color-danger);
  color: white;
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.person-panel-content {
  flex: 1;
  padding: var(--space-xl);
  overflow-y: auto;
}

.btn-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  font-size: var(--font-2xl);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
}

.btn-close:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
}

/* ============================================================================
   Media Browser
   ============================================================================ */

.search-bar {
  flex: 1;
}

.search-bar input {
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
}

.view-switcher {
  display: flex;
  gap: var(--space-xs);
  background: var(--color-bg-secondary);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
}

.btn-view {
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--color-text-light);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-view:hover {
  color: var(--color-text);
}

.btn-view.active {
  background: white;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Curator button in Media header */

.btn-curator {
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: linear-gradient(145deg, #8B6914, #C9A227);
  color: white;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  margin-left: var(--space-sm);
}

.btn-curator:hover:not(.disabled):not(:disabled) {
  background: linear-gradient(145deg, #C9A227, #D4AF37);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.3);
}

.btn-curator.disabled,

.btn-curator:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

.media-layout {
  display: flex;
  gap: var(--space-lg);
}

.media-filters {
  width: 280px;
  background: white;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  height: fit-content;
}

.media-filters h3 {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-lg);
}

.filter-section {
  margin-bottom: var(--space-xl);
}

.filter-section label {
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.slider {
  width: 100%;
  margin: var(--space-md) 0;
}

.slider-values {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.media-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Enable infinite scroll by making this the scroll container */
  /* Explicit height to enable scroll - use calc to fill available space */
  height: calc(100vh - var(--nav-height) - 140px);
}

/* Load More button for media grid */

.media-load-more {
  display: flex;
  justify-content: center;
  padding: var(--space-lg);
}

.btn-load-more-media {
  padding: 12px 24px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-load-more-media:hover {
  background: var(--color-primary-dark, #4f46e5);
  transform: translateY(-1px);
}

.btn-load-more-media:disabled {
  background: var(--color-text-lighter);
  cursor: not-allowed;
  transform: none;
}

.media-count {
  font-size: var(--font-base);
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-lg);
}

/* List view for media grid */

.media-grid.list-view {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.media-grid.list-view .media-card {
  display: flex;
  flex-direction: row;
  max-height: 120px;
}

.media-grid.list-view .media-card-thumbnail {
  width: 160px;
  min-width: 160px;
  height: 120px;
  flex-shrink: 0;
}

.media-grid.list-view .media-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-grid.list-view .media-card-placeholder {
  width: 160px;
  height: 120px;
}

.media-grid.list-view .media-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-md) var(--space-lg);
}

.media-grid.list-view .media-card-title {
  font-size: var(--font-base);
  margin-bottom: var(--space-sm);
}

.media-grid.list-view .media-card-meta {
  flex-direction: row;
  gap: var(--space-md);
}

/* Compact mode for media grid - smaller cards for bulk selection */

.media-grid.compact-mode {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.media-grid.compact-mode .media-card {
  border-radius: 6px;
}

.media-grid.compact-mode .media-card-thumbnail {
  height: 70px;
}

.media-grid.compact-mode .media-card-thumbnail img {
  height: 70px;
}

.media-grid.compact-mode .media-card-placeholder {
  height: 70px;
  font-size: calc(1.5rem * var(--type-scale));
}

.media-grid.compact-mode .media-card-info {
  padding: 6px 8px;
}

.media-grid.compact-mode .media-card-title {
  font-size: calc(0.65rem * var(--type-scale));
  -webkit-line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.media-grid.compact-mode .media-card-meta {
  display: none;
}

.media-grid.compact-mode .media-card:hover {
  transform: translateY(-2px);
}

@media (min-width: 640px) {
  .media-grid.compact-mode {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }
}

.media-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.media-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.media-card-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.media-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 60px;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  opacity: 0;
  transition: opacity 0.2s;
}

.media-card:hover .media-card-overlay {
  opacity: 1;
}

.media-card-action {
  color: white;
  font-size: var(--font-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  transition: background 0.2s;
}

.media-card-action:hover {
  background: rgba(255, 255, 255, 0.3);
}

.media-card-info {
  padding: var(--space-md);
}

.media-card-title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-xs);
  color: var(--color-text);
  font-size: var(--font-sm);
}

.media-card-meta {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Enhanced Media Browser Styles */

.media-card-thumbnail {
  width: 100%;
  aspect-ratio: 4/3;
  background: #f3f4f6;
  position: relative;
  overflow: hidden;
}

.media-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.media-card:hover .media-card-thumbnail img {
  transform: scale(1.05);
}

.media-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

.media-card-placeholder span {
  font-size: calc(48px * var(--type-scale));
  opacity: 0.7;
}

.media-card-type {
  background: rgba(102, 126, 234, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.media-card-date {
  color: #9ca3af;
}

/* Media Loading */

.media-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: #6b7280;
}

.media-loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e5e7eb;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Media Empty State */

.media-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.media-empty-icon {
  font-size: calc(64px * var(--type-scale));
  margin-bottom: 16px;
  opacity: 0.5;
}

.media-empty-state h3 {
  margin: 0 0 8px;
  color: #374151;
}

.media-empty-state p {
  margin: 0;
  font-size: calc(14px * var(--type-scale));
}

/* Media Detail Modal */

.media-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: none;
}

.media-detail-modal.active {
  display: block;
}

.media-detail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.media-detail-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 16px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.media-detail-close {
  position: absolute;
  top: max(16px, var(--ffa-safe-top)); /* P0-4: .media-detail-modal is fixed top:0 under viewport-fit=cover — a bare offset puts the ✕ under the Dynamic Island */
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  font-size: calc(24px * var(--type-scale));
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.media-detail-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Fixed image overflow issue in media detail modal */

.media-detail-view {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  max-height: 60vh;
  overflow: hidden;
}

.media-detail-view img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.media-detail-view video {
  max-width: 100%;
  max-height: 100%;
}

.media-detail-placeholder {
  padding: 60px;
  text-align: center;
  color: white;
}

.media-detail-icon {
  font-size: calc(64px * var(--type-scale));
  display: block;
  margin-bottom: 16px;
}

/* Hint text for unavailable media */

.media-detail-hint {
  font-size: calc(12px * var(--type-scale));
  color: rgba(255, 255, 255, 0.6);
  margin: 4px 0 0;
}

.media-detail-info {
  padding: 24px;
  background: white;
}

.media-detail-info h2 {
  margin: 0 0 8px;
  font-size: calc(18px * var(--type-scale));
  color: #111827;
}

.media-detail-date {
  color: #6b7280;
  margin: 0 0 12px;
}

.media-detail-desc {
  color: #374151;
  margin: 0 0 16px;
  line-height: 1.6;
}

.media-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: calc(13px * var(--type-scale));
  color: #9ca3af;
}

.media-detail-meta span {
  background: #f3f4f6;
  padding: 4px 10px;
  border-radius: 6px;
}

/* PDF Document Viewer */

.media-detail-pdf-container {
  width: 100%;
  height: 60vh;
  min-height: 400px;
  background: #f3f4f6;
  border-radius: 8px;
  overflow: hidden;
}

.media-detail-pdf-viewer {
  width: 100%;
  height: 100%;
  border: none;
}

.media-detail-pdf-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 16px;
  flex-wrap: wrap;
}

.media-detail-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: calc(14px * var(--type-scale));
  transition: transform 0.2s, box-shadow 0.2s;
}

.media-detail-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Mobile Responsive Media */

@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .media-card-placeholder span {
    font-size: calc(32px * var(--type-scale));
  }

  .media-card-info {
    padding: 8px 10px;
  }

  .media-card-title {
    font-size: calc(12px * var(--type-scale));
  }

  .media-card-meta {
    font-size: calc(10px * var(--type-scale));
  }

  .media-detail-content {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 12px;
  }

  .media-detail-view {
    max-height: 50vh;
  }

  .media-detail-info {
    padding: 16px;
  }

  .media-detail-info h2 {
    font-size: calc(16px * var(--type-scale));
  }

  .media-detail-close {
    top: max(8px, var(--ffa-safe-top)); /* P0-4: same trap as the base rule, one breakpoint down */
    right: 8px;
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .media-card {
    border-radius: 8px;
  }

  .media-card-thumbnail {
    aspect-ratio: 1;
  }
}

/* ============================================================================
   Lightbox Modal
   ============================================================================ */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
}

.lightbox.active {
  display: block;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
}

.lightbox-content {
  position: relative;
  width: 90%;
  max-width: 1400px;
  height: 90vh;
  margin: 5vh auto;
  background: white;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.lightbox-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.lightbox-header h3 {
  flex: 1;
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
}

.lightbox-nav-btn {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border);
  background: white;
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  cursor: pointer;
  transition: all 0.2s;
}

.lightbox-nav-btn:hover {
  background: var(--color-bg-secondary);
}

.lightbox-close {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  font-size: var(--font-2xl);
  cursor: pointer;
  transition: all 0.2s;
}

.lightbox-close:hover {
  background: var(--color-bg-tertiary);
}

.lightbox-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.lightbox-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background: var(--color-bg-secondary);
}

.lightbox-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.lightbox-sidebar {
  width: 400px;
  padding: var(--space-xl);
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
}

.lightbox-section {
  margin-bottom: var(--space-xl);
}

.lightbox-section h4 {
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-md);
}

.lightbox-description {
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.lightbox-confidence {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.lightbox-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.person-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--ffvr-surface-raised, var(--color-bg-secondary));
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.person-tag:hover {
  background: var(--ffvr-surface, var(--color-bg-tertiary));
}

.lightbox-details {
  font-size: var(--font-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.detail-row {
  display: flex;
  gap: var(--space-sm);
}

.detail-label {
  color: var(--color-text-light);
}

.detail-value {
  font-weight: var(--font-medium);
}

/* ============================================================================
   Collections
   ============================================================================ */

.collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.collection-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all 0.2s;
}

.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.collection-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.collection-card-content {
  padding: var(--space-lg);
}

.collection-card-title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
}

.collection-card-meta {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ============================================================================
   Timeline
   ============================================================================ */

.timeline-container {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.timeline-year {
  margin-bottom: var(--space-2xl);
}

.timeline-year-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  cursor: pointer;
}

.timeline-year-header h3 {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.timeline-year-stats {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.timeline-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-md);
  padding-left: var(--space-xl);
}

/* ============================================================================
   Map View
   ============================================================================ */

.map-layout {
  display: flex;
  gap: var(--space-lg);
  height: calc(100vh - var(--nav-height) - 200px);
}

.map-canvas {
  flex: 1;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
}

.map-placeholder p {
  font-size: var(--font-xl);
  margin-bottom: var(--space-sm);
}

.map-note {
  font-size: var(--font-sm);
  opacity: 0.8;
}

.map-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.map-marker {
  position: absolute;
  font-size: var(--font-2xl);
  cursor: pointer;
  transition: transform 0.2s;
}

.map-marker:hover {
  transform: scale(1.3);
}

.map-sidebar {
  width: 300px;
  background: white;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow-y: auto;
}

.map-sidebar h3 {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-lg);
}

.location-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.location-item {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.location-item:hover {
  background: var(--color-bg-secondary);
}

.location-item strong {
  font-weight: var(--font-semibold);
}

.location-item span {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

/* ============================================================================
   Statistics
   ============================================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.stat-value {
  font-size: var(--font-3xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.stat-label {
  font-size: var(--font-base);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.stat-sublabel {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin-top: var(--space-sm);
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-md);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-full);
  transition: width 0.3s;
}

.stats-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.chart-card {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.chart-card h3 {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-lg);
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  height: 200px;
}

.bar {
  flex: 1;
  background: var(--color-primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

.bar:hover {
  opacity: 0.8;
}

.bar-label {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-xs);
  color: var(--color-text-light);
  white-space: nowrap;
}

.insights-card {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.insights-card h3 {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-lg);
}

.insights-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.insights-list li {
  padding-left: var(--space-xl);
  position: relative;
  font-size: var(--font-base);
  line-height: 1.6;
}

.insights-list li::before {
  content: "•";
  position: absolute;
  left: var(--space-sm);
  color: var(--color-primary);
  font-size: var(--font-xl);
}

/* ============================================================================
   Upload Interface
   ============================================================================ */

.upload-container {
  max-width: 800px;
  margin: 0 auto;
}

.upload-dropzone {
  background: white;
  border: 3px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-dropzone:hover {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.02);
}

.dropzone-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: var(--space-lg);
}

.dropzone-content h3 {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-lg);
}

.dropzone-help {
  margin-top: var(--space-lg);
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.upload-queue {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  margin-top: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.upload-queue h3 {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-lg);
}

.upload-item {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.upload-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.upload-item-name {
  font-weight: var(--font-medium);
}

.upload-item-size {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.upload-progress {
  height: 6px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s;
}

.upload-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ============================================================================
   AI Review Queue
   ============================================================================ */

.review-counter {
  font-size: var(--font-base);
  color: var(--color-text-light);
}

.review-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.review-image-container {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  min-height: 500px;
}

.review-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.review-details {
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.review-section h3 {
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-md);
}

.review-description {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  line-height: 1.6;
  min-height: 100px;
}

.review-description:focus {
  outline: none;
  border-color: var(--color-primary);
}

.review-confidence {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin-top: var(--space-sm);
}

.review-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.review-metadata {
  font-size: var(--font-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.review-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
}

/* ============================================================================
   Person Profile
   ============================================================================ */

.profile-container {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xl);
}

.profile-header {
  display: flex;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.profile-photo-large {
  width: 150px;
  height: 150px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-4xl);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}

.profile-info h1 {
  font-size: var(--font-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-sm);
}

.profile-info > div {
  font-size: var(--font-base);
  color: var(--color-text-light);
  margin-bottom: var(--space-xs);
}

.profile-bio {
  font-size: var(--font-base);
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--space-xl);
}

.profile-tabs {
  display: flex;
  gap: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.tab-button {
  padding: var(--space-md) var(--space-xl);
  border: none;
  background: transparent;
  font-size: var(--font-base);
  font-weight: var(--font-medium);
  color: var(--color-text-light);
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.tab-button:hover {
  color: var(--color-text);
}

.tab-button.active {
  color: var(--color-primary);
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
}

.profile-tab-content {
  min-height: 300px;
}

/* ============================================================================
   Settings
   ============================================================================ */

.settings-layout {
  display: flex;
  gap: var(--space-xl);
}

.settings-sidebar {
  width: 200px;
  background: white;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  height: fit-content;
}

.settings-menu-item {
  display: block;
  padding: var(--space-md);
  color: var(--color-text);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
  transition: background 0.2s;
}

.settings-menu-item:hover {
  background: var(--color-bg-secondary);
}

.settings-menu-item.active {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

.settings-content {
  flex: 1;
  background: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.settings-tab {
  display: none;
}

.settings-tab.active {
  display: block;
}

.settings-tab h3 {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-xl);
}

/* ========================================================================
   Privacy principles (Settings → Privacy tab)
   lucid-sourcing-constellation S1 — four-principle canonical layout
   ======================================================================== */
.privacy-principles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}
.privacy-principle {
  padding: 1.25rem 1.5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  line-height: 1.65;
}
.privacy-principle h4 {
  margin: 0 0 0.75rem 0;
  font-size: calc(1.05rem * var(--type-scale));
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.privacy-principle .pp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 700;
  flex: 0 0 auto;
}
.privacy-principle p {
  margin: 0 0 0.6rem 0;
  color: #374151;
}
.privacy-principle p:last-child { margin-bottom: 0; }
.privacy-principle strong { color: #1f2937; }

.privacy-action-card {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #c4b5fd;
}
.privacy-action-card .pp-num {
  background: #7c3aed;
}
.privacy-action-card h4 {
  color: #5b21b6;
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-sm);
  color: var(--ffvr-ink, var(--color-text));
}

.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Textarea with voice input button */

.textarea-with-voice {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.textarea-with-voice textarea {
  flex: 1;
}

.voice-mic-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  cursor: pointer;
  font-size: calc(1.25rem * var(--type-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.voice-mic-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-primary);
}

.voice-mic-btn.recording {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
  animation: pulse-recording 1s infinite;
}

@keyframes pulse-recording {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.profile-photo-upload {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-xl);
}

.profile-photo-preview {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
}

.profile-photo-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ============================================================================
   Buttons
   ============================================================================ */

.btn {
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
}

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

.btn-primary:hover {
  background: #2563eb;
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--ffvr-surface-raised, var(--color-bg-secondary));
  color: var(--ffvr-ink, var(--color-text));
  border: 1px solid var(--ffvr-rule, var(--color-border));
}

.btn-secondary:hover {
  background: var(--ffvr-surface, var(--color-bg-tertiary));
}

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

.btn-danger:hover {
  background: #dc2626;
}

/* Rejection Reason Modal Styles */

.rejection-option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.rejection-option:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
}

.rejection-option input[type="radio"] {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

.rejection-option span {
  font-size: var(--font-md);
  color: var(--color-text);
}

.rejection-option:has(input:checked) {
  background: rgba(79, 70, 229, 0.1);
  border-color: var(--color-primary);
}

.btn-success {
  background: var(--color-success);
  color: white;
}

.btn-success:hover {
  background: #059669;
}

.btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-sm);
}

.btn-icon {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  background: white;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: var(--color-bg-secondary);
}

.btn-back {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  background: white;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.btn-back:hover {
  background: var(--color-bg-secondary);
}

.btn-close-view {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  font-size: var(--font-2xl);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
}

.btn-close-view:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
}

/* ============================================================================
   Forms
   ============================================================================ */

.select-input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  background: white;
  cursor: pointer;
}

.select-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ============================================================================
   Modals
   ============================================================================ */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  pointer-events: auto;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 500px;
  margin: 10vh auto;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xl);
}

.modal-content h3 {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-lg);
}

.modal-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  justify-content: flex-end;
}

/* Modal Dialog Variant */

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Add Relationship Modal must appear above Family Member Modal */

#addRelationshipModal {
  z-index: 10001;
}

#addRelationshipModal .modal-overlay {
  z-index: 10000;
}

#addRelationshipModal .modal-dialog {
  z-index: 10002;
}

/* Feedback Modal must appear above all other modals */

#feedbackModal {
  z-index: 10001;
}

#feedbackModal .modal-overlay {
  z-index: 10000;
}

#feedbackModal .modal-dialog {
  z-index: 10002;
}

/* Biography AI Modal must appear above Family Member Modal */

#biographyAIModal {
  z-index: 10001;
}

#biographyAIModal .modal-content {
  z-index: 10002;
}

.modal-dialog {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1001;
}

.modal-dialog.modal-large {
  max-width: 800px;
}

.modal-dialog.modal-small {
  max-width: 400px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  margin: 0;
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 600;
  color: #1f2937;
}

.modal-close {
  background: none;
  border: none;
  font-size: calc(2rem * var(--type-scale));
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* modal-integrity-scan S3: enumerated props (was `transition: all`) — OOM §4.2 */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
  background: #f3f4f6;
  color: #1f2937;
}

/* Universal exit button — light variant for standard modals */
.ffa-exit-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* modal-integrity-scan S3: enumerated props (was `transition: all`) — OOM §4.2 */
  transition: background-color 200ms, border-color 200ms, color 200ms;
  padding: 0;
}
.ffa-exit-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.9);
}

.ffa-exit-btn--light {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* modal-integrity-scan S3: enumerated props (was `transition: all`) — OOM §4.2 */
  transition: background-color 200ms, border-color 200ms, color 200ms;
  padding: 0;
}
.ffa-exit-btn--light:hover {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.3);
  color: rgba(0,0,0,0.7);
}

/* ── Common enrichment-operator machinery (unifying-enrichment-machinery S4, #4/#5) ──
   The shared EnrichmentOperators.buildPaletteRow() palette — presented identically by
   the single-object modal, the Media Curator, and (future) every single-object surface. */
.enrichment-operator-palette {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.enrichment-operator-palette .eop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: calc(0.85rem * var(--type-scale));
  transition: background 0.15s ease, border-color 0.15s ease;
}
.enrichment-operator-palette .eop-btn:hover {
  background: rgba(102, 126, 234, 0.25);
  border-color: rgba(102, 126, 234, 0.5);
}
/* Destructive operator (Ignore Unconfirmed Faces) — tinted so its nature is
   readable at a glance, and never mistaken for the additive operators beside it. */
.enrichment-operator-palette .eop-btn.eop-destructive {
  color: #f2b8b8;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.10);
}
.enrichment-operator-palette .eop-btn.eop-destructive:hover {
  background: rgba(239, 68, 68, 0.24);
  border-color: rgba(239, 68, 68, 0.7);
}
.enrichment-operator-palette .eop-ico { font-size: calc(1rem * var(--type-scale)); }
.curator-enrich-palette-mount { width: 100%; }
.curator-enrich-palette-mount .enrichment-operator-palette { margin-top: 0.4rem; }

/* Enrich-description operator modal — on the canonical foundation (.ffa-modal), focus
   tier, × = Done via ModalManager. Backdrop dim (the foundation supplies no dim). */
#enrichmentDescriptionOverlay.enrichment-description-overlay {
  background: rgba(0, 0, 0, 0.7);
}
.enrichment-description-overlay .eop-desc-card {
  background: var(--color-bg, #0f0f23);
  border-radius: 12px;
  width: 92%;
  max-width: 560px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.enrichment-description-overlay .eop-desc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
  border-bottom: 1px solid rgba(102, 126, 234, 0.3);
}
.enrichment-description-overlay .eop-desc-title {
  margin: 0;
  font-size: calc(1.1rem * var(--type-scale));
  color: #fff;
}
.enrichment-description-overlay .eop-desc-body { padding: 1.25rem; }
.enrichment-description-overlay .eop-desc-textarea-wrap { position: relative; }
.enrichment-description-overlay textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 0.75rem;
  font-size: calc(0.9rem * var(--type-scale));
  resize: vertical;
}
.enrichment-description-overlay .eop-desc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.enrichment-description-overlay .eop-desc-send,
.enrichment-description-overlay .eop-desc-cancel {
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: calc(0.85rem * var(--type-scale));
  border: none;
}
.enrichment-description-overlay .eop-desc-send {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}
.enrichment-description-overlay .eop-desc-send:disabled { opacity: 0.6; cursor: default; }
.enrichment-description-overlay .eop-desc-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Exit button positioning in modal headers with absolute positioning */
.face-training-header,
.vt-header {
  position: relative;
}
.face-training-header > .ffa-exit-btn,
.vt-header > .ffa-exit-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

/* Form Styles */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--ffvr-ink, #374151);
  font-size: calc(0.875rem * var(--type-scale));
}

.form-input {
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: calc(0.95rem * var(--type-scale));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input textarea {
  resize: vertical;
  min-height: 100px;
}

.text-warning {
  color: #dc2626;
  font-size: calc(0.875rem * var(--type-scale));
  margin-top: 0.5rem;
}

/* Responsive Form Layout */

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Toast Notifications
   ============================================================================ */

.toast-container {
  position: fixed;
  top: calc(var(--nav-height) + var(--space-md));
  right: var(--space-md);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.toast {
  background: white;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 300px;
  animation: slideInRight 0.3s;
}

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-success {
  border-left: 4px solid var(--color-success);
}

.toast-error {
  border-left: 4px solid var(--color-danger);
}

.toast-info {
  border-left: 4px solid var(--color-primary);
}

.toast-icon {
  font-size: var(--font-xl);
}

.toast-message {
  flex: 1;
  font-size: var(--font-sm);
}

.toast-close {
  background: none;
  border: none;
  font-size: calc(18px * var(--type-scale));
  color: #666;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.toast-close:hover {
  background: rgba(0,0,0,0.1);
  color: #333;
}

.toast-error .toast-close {
  color: var(--color-danger);
}

/* ============================================================================
   Toast Notification (showToast function)
   ============================================================================ */

.toast-notification {
  position: fixed;
  top: auto;
  bottom: 120px; /* Moved down into white space, above action buttons */
  right: 20px;
  max-width: 400px;
  padding: 14px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  font-size: calc(14px * var(--type-scale));
  font-weight: 500;
  z-index: var(--z-system, 20000);
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-notification.show {
  opacity: 1;
  transform: translateX(0);
}

/* ══ MOBILE PLACEMENT — blocking-pocket-geometry S6 (#1, adjacent) ═════════════
   `bottom: 120px` is a desktop measurement ("moved down into white space, above
   action buttons"). On the pocket that band is not white space: it is the tab
   bar, and inside the Fergi modal it is the input bar and the All / Voice /
   Import quick-action row — so every toast lands on the next thing the member
   would tap. Joe's screenshot shows the welcome greeting doing exactly that.

   Suppressing the redundant greeting (above) removes the toast he saw; it does
   not remove the class of defect, because a legitimate warning or error covers
   that same row just as completely. So the placement is stated as a RELATIONSHIP
   to the bottom chrome rather than a second hand-picked number: the vault already
   declares one, `--mobile-modal-bottom-reservation` in mobile-tab-bar.css (the
   control-panel height + safe-area inset + breathing room), and every mobile
   surface that must keep bottom-edge content visible is required to reserve it.
   A toast is such a surface. Clearing it is the whole rule; the +44px is the
   Fergi input row that sits on top of the reservation inside the modal. */
@media (max-width: 768px) {
  .toast-notification {
    /* 16 px, inherited from the duplicate block this rule used to lose to — it is the
       inset that has actually been shipping (ceding-welcome-precedence S1, issue #5). */
    left: 16px;
    right: 16px;
    max-width: none;
    top: auto;
    bottom: calc(var(--mobile-modal-bottom-reservation, 80px) + 44px);
  }
}

.toast-notification.toast-info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.toast-notification.toast-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.toast-notification.toast-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.toast-notification.toast-error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

/* Persistent error toasts - require dismissal */

.toast-notification.toast-persistent {
  padding-right: 14px;
}

.toast-notification .toast-message {
  flex: 1;
  line-height: 1.4;
}

/* Inline toast action (e.g. Undo) — the one-action reversal of a shipped edit.
   Reads as an affordance, not decoration: a bordered pill next to the message. */

.toast-notification .toast-action {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: white;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-size: calc(13px * var(--type-scale));
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toast-notification .toast-action:hover {
  background: rgba(255, 255, 255, 0.35);
}

.toast-notification .toast-dismiss {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: calc(14px * var(--type-scale));
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toast-notification .toast-dismiss:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* ⛔ A SECOND `@media (max-width: 768px)` BLOCK LIVED HERE AND SILENTLY OVERRODE THE ONE
   ABOVE — removed by ceding-welcome-precedence S1, 2026-09-20 (issue #5).

   It set `bottom: 100px`, a hand-picked number, and because it appears LATER in the same
   stylesheet at equal specificity it won against `blocking-pocket-geometry` S6's deliberate
   `calc(var(--mobile-modal-bottom-reservation) + 44px)`. So the fix Joe asked for in August
   was overwritten by a duplicate that predated it, and every toast since has sat 8 px lower
   than the rule that was written to clear the composer.

   MEASURED (webkit-iphone 390×844, served v1.1.245, real family session, Fergi AI modal
   open): the reservation resolves to 64 px, so the S6 rule asks for 108 px — and the
   computed value was **100 px**, which put the toast 17 px onto `.unified-ai-input-area`.
   That is the mobile half of what Joe saw.

   ⚠️ The left/right inset from this block (16 px) is NOT lost — it is folded into the S6
   rule above, which used 12 px. The wider inset is the one that has actually been shipping. */

/* ============================================================================
   Loading Spinner Overlay
   ============================================================================ */

#globalLoadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#globalLoadingOverlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-spinner-content {
  background: white;
  padding: var(--space-xl) var(--space-2xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  text-align: center;
  min-width: 200px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-bg-tertiary);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-md);
}

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

.loading-message {
  font-size: var(--font-base);
  color: var(--color-text);
  font-weight: 500;
}

/* Dynamically created global spinner (from utils.js showLoadingSpinner) */

.global-loading-spinner,

#globalLoadingSpinner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.global-loading-spinner .spinner-content {
  background: white;
  padding: 2rem 3rem;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
  min-width: 200px;
}

.global-loading-spinner .spinner-icon {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

.global-loading-spinner .spinner-message {
  font-size: calc(1rem * var(--type-scale));
  color: #374151;
  font-weight: 600;
}

/* ============================================================================
   FFV Dialog — shared promise-based confirm / compose dialog (utils.js ffaDialog)
   Sits above the Review grid overlay (10100) AND the person selector (10300)
   because it can be chained after a person pick (bulk Different warning).
   ============================================================================ */

.ffa-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10450;
  padding: 1rem;
}

.ffa-dialog {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  padding: 1.25rem 1.4rem 1.1rem;
  width: min(480px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  color: #e5e7eb;
}

.ffa-dialog-title {
  font-size: calc(1.05rem * var(--type-scale));
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: #f8fafc;
}

.ffa-dialog-message {
  font-size: calc(0.9rem * var(--type-scale));
  line-height: 1.45;
  color: #cbd5e1;
  margin-bottom: 0.75rem;
}

.ffa-dialog-detail {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.75rem;
  max-height: 180px;
  overflow-y: auto;
}

.ffa-dialog-breakdown-row {
  font-size: calc(0.83rem * var(--type-scale));
  color: #cbd5e1;
  padding: 0.12rem 0;
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
}

.ffa-dialog-breakdown-count {
  color: #f59e0b;
  font-weight: 700;
  min-width: 2.1em;
  text-align: right;
}

.ffa-dialog-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #f1f5f9;
  font-size: calc(0.9rem * var(--type-scale));
  padding: 0.55rem 0.7rem;
  resize: vertical;
  margin-bottom: 0.75rem;
  font-family: inherit;
}

.ffa-dialog-textarea:focus {
  outline: none;
  border-color: rgba(102, 126, 234, 0.7);
}

.ffa-dialog-textarea-required {
  border-color: rgba(239, 68, 68, 0.8);
}

.ffa-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ffa-dialog-btn {
  border: none;
  border-radius: 6px;
  padding: 0.45rem 1rem;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}

.ffa-dialog-btn:hover {
  filter: brightness(1.12);
}

.ffa-dialog-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.ffa-dialog-confirm {
  background: linear-gradient(135deg, #667eea, #5a67d8);
  color: white;
}

.ffa-dialog-warning .ffa-dialog-confirm {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.ffa-dialog-danger .ffa-dialog-confirm {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* ============================================================================
   v7.32.0: Story Generation Progress Overlay
   Dramatic spinner with entertaining progress messages
   ============================================================================ */

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

@media (max-width: 1024px) {
  /* ⛔ NO .side-nav / .main-content rules in this block (Greg M-2, 2026-10-01).
     This legacy tablet rule used to slide the rail off-screen (translateX(-100%))
     and zero .main-content's margin, expecting `.side-nav.active` to bring it
     back, but nothing in the app adds `.active` any more. So between 769 and
     1024px wide (every iPad in portrait, a narrowed laptop window, Split View)
     the desktop shell had NO navigation at all. The canvas still reserved the
     rail's 172px gutter, so members saw a blank strip and closing the last
     window left them stranded. Measured: Chromium 1024x768, rail at x=-172;
     at 1025, rail at x=0. FergiPAD Home Screen app, rail at -172 and a real tap
     on the header opened nothing. The phone's drawer is the ≤768px rule above
     (`.side-nav.mobile-visible`). The desktop compact rail is the ONLY state
     from 769px up (launcher-visual-overlay.js). Regression:
     tests/mobile/desktop-rail-narrow.test.js. */

  .media-layout {
    flex-direction: column;
  }

  .media-filters {
    width: 100%;
  }

  .settings-layout {
    flex-direction: column;
  }

  .settings-sidebar {
    width: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    /* Neutralize the S3 type-scale boost on real narrow/pocket viewports
       (unbifurcating-vault-surfaces S3, 2026-07-23). The 1.5× boost is for
       DESKTOP legibility under projection — under projection the iframe is
       1600×900 so THIS media query never matches and the boost stays live.
       But a real phone (≤767px pocket, still the routed mobile UI until S5)
       WOULD match here; without this reset every styles.css mobile @media
       rule (69 of them) would render 1.5× and could overflow live pocket
       layouts. Pocket keeps its native sizing; projection & desktop keep 1.5×. */
    --type-scale: 1;
  }

  /* cementing-modal-chrome-fleet S1 D4 (2026-05-13) — Iron-Law smoking-gun #2.
     Pre-S1 this rule hid .nav-center entirely on mobile, but mobile-shell.js
     appends .mobile-view-title INSIDE .nav-center (the canonical title slot
     in the FFA Window Frame top band). With the parent display:none, every
     `MobileShell.setTitle('Fergi AI' / 'Family' / 'Stories' / …)` call was a
     silent no-op visually — the title element existed in the DOM and
     received the correct textContent, but never rendered. This was the
     reason Joe's 12:59 PM screenshot of the Fergi AI modal showed a pink
     band with only the hamburger top-left and otherwise empty. The fix
     restores .nav-center to its default flex layout (the same `position:
     absolute; left:50%; transform:translateX(-50%)` centering set at
     styles.css:238 still applies, so the title remains centered between
     hamburger-left and Fergi-AI-launcher-right). The focus-chips-container
     inside .nav-center is independently hidden via mobile.css:224, so its
     absence on mobile is preserved without hiding the parent. Title text +
     centered-horizontally-right-of-hamburger requirement satisfied per
     Joe's directive 2026-05-13 Issue #2.

     ── 2026-05-15 addendum (excavating-mobile-bookends S1) ──
     The S1 D4 fix in THIS file (specificity 0,1,0) was insufficient on its
     own — a duplicate higher-specificity rule `.top-nav .nav-center
     { display: none }` (specificity 0,2,0) lived at stories.css:4426 since
     the Phase 6 extraction (March 2026) and silently defeated this fix
     across six consecutive trains. Iron-Law audit pattern: when fixing a
     cascade-default class, grep for ALL selector specificities, not just
     the first hit. The stories.css duplicate has been removed; see
     stories.css ~line 4425 for the full Iron-Law commentary and the
     grep-checkable INVARIANT for the .nav-center title slot. */
  .nav-center {
    display: flex;
  }

  .main-content {
    padding: var(--space-md);
  }

  /* Mobile media grid - 3 columns with square thumbnails per Claude.ai design */
  .media-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* Square aspect ratio for mobile grid */
  .media-grid .media-card {
    border-radius: 8px;
  }

  .media-grid .media-card-thumbnail {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
  }

  .media-grid .media-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .media-grid .media-card-info {
    padding: 4px 6px;
  }

  .media-grid .media-card-title {
    font-size: calc(11px * var(--type-scale));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }

  .media-grid .media-card-meta {
    font-size: calc(10px * var(--type-scale));
    display: none; /* Hide meta on mobile to save space */
  }

  .collections-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stats-charts {
    grid-template-columns: 1fr;
  }

  .review-container {
    grid-template-columns: 1fr;
  }

  .lightbox-body {
    flex-direction: column;
  }

  .lightbox-sidebar {
    width: 100%;
  }

  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* Keep 3-column grid on small screens, just reduce gap */
  .media-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }

  .dashboard-cards {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: var(--font-2xl);
  }
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

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

.text-light {
  color: var(--color-text-light);
}

.mb-0 { margin-bottom: 0; }

.mb-sm { margin-bottom: var(--space-sm); }

.mb-md { margin-bottom: var(--space-md); }

.mb-lg { margin-bottom: var(--space-lg); }

.mb-xl { margin-bottom: var(--space-xl); }

.mt-0 { margin-top: 0; }

.mt-sm { margin-top: var(--space-sm); }

.mt-md { margin-top: var(--space-md); }

.mt-lg { margin-top: var(--space-lg); }

.mt-xl { margin-top: var(--space-xl); }

/* ============================================================================
   Training Photos Styles
   ============================================================================ */

.training-photos-status-message {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: none;
}

.training-photos-status-message.training-photos-status-success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #10b981;
  display: block;
}

.training-photos-status-message.training-photos-status-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #ef4444;
  display: block;
}

.training-photos-age-group-selector {
  margin: 20px 0;
}

.training-photos-age-group-selector label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1f2937;
}

.training-photos-age-group-selector select {
  width: 100%;
  max-width: 400px;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: calc(16px * var(--type-scale));
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.training-photos-age-group-selector select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.training-photos-camera-section {
  margin: 20px 0;
}

.training-photos-camera-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: calc(18px * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
}

.training-photos-camera-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px rgba(102, 126, 234, 0.4);
}

.training-photos-camera-btn:active {
  transform: translateY(0);
}

.training-photos-camera-icon {
  font-size: calc(24px * var(--type-scale));
}

.training-photos-spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: training-photos-spin 1s linear infinite;
  display: none;
}

@keyframes training-photos-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.training-photos-preview-section {
  margin: 20px 0;
  padding: 20px;
  background: #f9fafb;
  border-radius: 12px;
}

.training-photos-preview-section h3 {
  margin-top: 0;
  color: #1f2937;
}

.training-photos-photo-grid {
  margin: 30px 0;
}

.training-photos-age-group-section {
  margin-bottom: 30px;
}

.training-photos-age-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e5e7eb;
}

.training-photos-age-group-title {
  font-size: calc(18px * var(--type-scale));
  font-weight: 600;
  color: #1f2937;
}

.training-photos-photo-count {
  background: #667eea;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: calc(12px * var(--type-scale));
  font-weight: 600;
}

.training-photos-photos-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.training-photos-photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e0e0e0;
  transition: all 0.2s ease;
}

.training-photos-photo-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.training-photos-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.training-photos-photo-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--type-scale));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.training-photos-photo-item:hover .training-photos-photo-delete {
  opacity: 1;
}

.training-photos-photo-delete:hover {
  background: rgba(220, 38, 38, 1);
}

.training-photos-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #9ca3af;
  background: #f9fafb;
  border-radius: 12px;
  border: 2px dashed #e5e7eb;
}

.training-photos-empty-state p {
  margin: 0;
  font-size: calc(16px * var(--type-scale));
}

/* Mobile Optimization for Training Photos */

@media (max-width: 768px) {
  .training-photos-camera-btn {
    width: 100%;
    justify-content: center;
    font-size: calc(16px * var(--type-scale));
    padding: 18px;
    min-height: 60px;
  }

  .training-photos-age-group-selector select {
    max-width: 100%;
    font-size: calc(16px * var(--type-scale));
    min-height: 50px;
  }

  .training-photos-photos-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .training-photos-photo-delete {
    opacity: 1;
  }
}

/* ============================================================================
   Mobile-First Person Profile (v1.0)
   Contribution-focused design with large touch-friendly buttons
   ============================================================================ */

/* Mobile Profile Header */

.mobile-profile-header {
  padding: var(--space-md);
  background: white;
  border-bottom: 1px solid var(--color-border);
}

.btn-back-mobile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-lg);
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  transition: background-color 0.2s;
}

.btn-back-mobile:hover {
  background: var(--color-bg-secondary);
}

.btn-back-mobile:active {
  background: var(--color-bg-tertiary);
}

.back-arrow {
  font-size: calc(1.5rem * var(--type-scale));
}

/* Person Card (Mobile-First) */

.person-card-mobile {
  padding: var(--space-xl);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
}

.profile-photo-container {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.profile-photo-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: white;
  color: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(3rem * var(--type-scale));
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border: 4px solid white;
}

.profile-photo-circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.person-info-mobile {
  text-align: center;
}

.person-name-mobile {
  font-size: calc(1.75rem * var(--type-scale));
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: white;
}

.person-dates-mobile {
  font-size: calc(1rem * var(--type-scale));
  opacity: 0.9;
  margin-bottom: var(--space-md);
}

.person-stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.person-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
}

.person-stat-value {
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
}

.person-stat-label {
  font-size: calc(0.875rem * var(--type-scale));
  opacity: 0.9;
  margin-top: 0.25rem;
}

/* Contribution Section (LARGE BUTTONS) */

.training-btn {
  border-color: #667eea;
}

.training-btn:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.document-btn {
  border-color: #10b981;
}

.document-btn:hover {
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* Existing Content Section (Collapsible) */

.existing-content-section {
  padding: var(--space-xl);
  background: var(--color-bg-secondary);
}

.existing-content-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 500;
  color: var(--color-text);
  transition: all 0.2s;
}

.existing-content-toggle:hover {
  background: var(--color-bg-secondary);
}

.existing-content-toggle:active {
  transform: scale(0.98);
}

#existingContentToggleIcon {
  transition: transform 0.2s;
}

#existingContentToggleIcon.rotated {
  transform: rotate(180deg);
}

.existing-content-container {
  margin-top: var(--space-lg);
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Mobile Tabs */

.profile-tabs-mobile {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  background: white;
  overflow-x: auto;
}

.tab-button-mobile {
  flex: 1;
  min-width: 120px;
  padding: 1rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-light);
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.tab-button-mobile.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.profile-tab-content-mobile {
  padding: var(--space-lg);
}

/* ============================================================================
   Mobile Modals (Full-Screen)
   ============================================================================ */

.mobile-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 10000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.mobile-modal.active {
  display: flex;
}

.mobile-modal-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
}

.mobile-modal-back {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: calc(1rem * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: -0.5rem;
  border-radius: var(--radius-md);
  transition: background-color 0.2s;
}

.mobile-modal-back:hover {
  background: var(--color-bg-secondary);
}

/* Mobile Modal Close Button (X) - v3.5.2 */

.mobile-modal-close {
  background: none;
  border: none;
  font-size: calc(1.75rem * var(--type-scale));
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: background-color 0.2s, color 0.2s;
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
}

.mobile-modal-close:hover {
  background: var(--color-bg-secondary);
  color: #1f2937;
}

/* iPhone Navigation - Home button in modal headers */

.mobile-modal-home {
  position: absolute;
  right: 55px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: calc(1.2rem * var(--type-scale));
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 10;
}

.mobile-modal-home:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5);
}

.mobile-modal-home:active {
  transform: translateY(-50%) scale(0.95);
}

/* Hide home button on desktop - only for mobile */

@media (min-width: 1024px) {
  .mobile-modal-home {
    display: none;
  }
}

/* Adjust close button position when home button is present */

.mobile-modal-header.with-home .mobile-modal-close {
  right: var(--space-md);
}

/* Update header to support close button positioning */

.mobile-modal-header {
  position: relative;
}

.mobile-modal-title {
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
  margin-top: var(--space-md);
  color: var(--color-text);
}

.mobile-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  -webkit-overflow-scrolling: touch;
}

/* Modal Help Text */

.modal-help-text {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
}

.modal-help-text p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: var(--color-text);
}

.modal-help-text p:last-child {
  margin-bottom: 0;
}

/* Age Group Selector (Mobile) */

.age-group-selector-mobile {
  margin-bottom: var(--space-xl);
}

.mobile-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-text);
  font-size: calc(1rem * var(--type-scale));
}

.mobile-select {
  width: 100%;
  padding: 1rem;
  font-size: calc(1rem * var(--type-scale));
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: white;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s;
  /* iOS appearance fix */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
}

.mobile-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Mobile Camera Button */

.mobile-camera-btn {
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: var(--radius-xl);
  font-size: calc(1.125rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  min-height: 64px;
}

.mobile-camera-btn:active {
  transform: scale(0.98);
}

.camera-icon {
  font-size: calc(1.75rem * var(--type-scale));
}

.camera-text {
  font-size: calc(1.125rem * var(--type-scale));
}

/* Mobile Preview Section */

.mobile-preview-section {
  margin-top: var(--space-xl);
}

.mobile-preview-title {
  font-size: calc(1.125rem * var(--type-scale));
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.mobile-preview-image {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.mobile-upload-btn {
  width: 100%;
  padding: 1.25rem;
  background: var(--color-success);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: calc(1.125rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 56px;
}

.mobile-upload-btn:active {
  transform: scale(0.98);
}

.mobile-upload-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Existing Training Photos Grid */

.existing-training-photos {
  margin-top: var(--space-2xl);
}

/* Tag Button Pulse Animation */

@keyframes tagButtonPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.7), 0 0 60px rgba(16, 185, 129, 0.3);
    transform: scale(1.02);
  }
}

.fm-tag-modal-btn:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.6) !important;
}

/* Document Tagging Modal */

/* Wider layout with 3 columns to show all core family members without scrolling */

.document-tagging-modal .family-focus-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 12px;
  padding: 8px 0;
}

.document-tagging-modal .family-focus-item {
  padding: 6px 12px;
  font-size: calc(13px * var(--type-scale));
}

.document-tagging-modal .family-focus-checkbox {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.document-tagging-modal .family-focus-name {
  font-size: calc(13px * var(--type-scale));
  line-height: 1.2;
}

/* Hide generation badges to save space */

.document-tagging-modal .family-focus-generation {
  display: none;
}

/* Reduce header/footer padding */

.document-tagging-modal .family-focus-modal-header {
  padding: 10px 16px;
}

.document-tagging-modal .family-focus-modal-footer {
  padding: 8px 16px;
}

.document-tagging-modal .family-focus-search {
  padding: 8px 12px;
}

.document-tagging-modal .family-focus-search input {
  padding: 8px 12px;
  font-size: calc(13px * var(--type-scale));
}

.document-tagging-modal .family-focus-actions {
  padding: 6px 12px;
  gap: 8px;
}

.document-tagging-modal .family-focus-action-btn {
  padding: 6px 12px;
  font-size: calc(12px * var(--type-scale));
}

.document-tagging-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10003; /* Raised from 10000 to ensure above hero side-by-side (10000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s;
}

.document-tagging-modal {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 720px; /* Wider to fit 3 columns without scrolling */
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
}

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

.document-tagging-modal-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.document-tagging-modal-header h3 {
  margin: 0;
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.document-tagging-modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: calc(1.25rem * var(--type-scale));
  display: flex;
  align-items: center;
  justify-content: center;
}

.document-tagging-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.document-tagging-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.document-tagging-search {
  margin-bottom: 16px;
}

.document-tagging-search input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: calc(1rem * var(--type-scale));
  outline: none;
  transition: border-color 0.2s;
}

.document-tagging-search input:focus {
  border-color: #10b981;
}

.document-tagging-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.document-tagging-chip {
  padding: 10px 16px;
  border-radius: 25px;
  border: 2px solid #d1d5db;
  background: white;
  color: #374151;
  font-size: calc(0.95rem * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.document-tagging-chip:hover {
  border-color: #10b981;
  background: #f0fdf4;
}

.document-tagging-chip.selected {
  border-color: #10b981;
  background: #10b981;
  color: white;
}

.document-tagging-chip.selected::before {
  content: '✓';
  font-weight: bold;
}

.document-tagging-modal-footer {
  padding: 16px 24px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.document-tagging-count {
  color: #6b7280;
  font-size: calc(0.9rem * var(--type-scale));
}

.document-tagging-done-btn {
  padding: 12px 28px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: calc(1rem * var(--type-scale));
  cursor: pointer;
}

.document-tagging-done-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* ============================================================================
   Person Modal Sections (Mobile-First)
   ============================================================================ */

.person-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border);
}

.person-section-title {
  font-size: calc(1.125rem * var(--type-scale));
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-help-text {
  color: #6b7280;
  font-size: calc(0.9375rem * var(--type-scale));
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.form-help-text {
  color: #6b7280;
  font-size: calc(0.875rem * var(--type-scale));
  margin-top: 0.5rem;
  display: block;
}

.mobile-input {
  width: 100%;
  padding: 0.875rem;
  font-size: calc(1rem * var(--type-scale));
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: white;
  color: var(--color-text);
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.mobile-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.mobile-textarea {
  width: 100%;
  padding: 0.875rem;
  font-size: calc(1rem * var(--type-scale));
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: white;
  color: var(--color-text);
  transition: border-color 0.2s;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  resize: vertical;
  min-height: 120px;
}

.mobile-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.mobile-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  padding: 0.5rem 0;
}

.mobile-checkbox-label input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.mobile-checkbox-label span {
  font-size: calc(1rem * var(--type-scale));
  color: var(--color-text);
}

.mobile-action-btn {
  width: 100%;
  padding: 1.125rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  min-height: 56px;
  margin-bottom: var(--space-md);
}

.mobile-action-btn:active {
  transform: scale(0.98);
}

.btn-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.btn-text {
  font-size: calc(1rem * var(--type-scale));
}

/* Relationship Cards */

.relationship-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.relationship-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.relationship-card-info {
  flex: 1;
}

.relationship-type {
  font-size: calc(0.8125rem * var(--type-scale));
  color: #6b7280;
  text-transform: capitalize;
  margin-bottom: 0.25rem;
}

.relationship-name {
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text);
}

/* Training Photos Grid */

.training-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.training-photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--color-border);
}

.training-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Documents Grid */

.documents-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.document-item {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.875rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.document-icon {
  font-size: calc(2rem * var(--type-scale));
  flex-shrink: 0;
}

.document-info {
  flex: 1;
  min-width: 0;
}

.document-title {
  font-size: calc(0.9375rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-date {
  font-size: calc(0.8125rem * var(--type-scale));
  color: #6b7280;
}

/* Biography Tabs */

.bio-tabs {
  display: flex;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-border);
}

.bio-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: calc(0.9375rem * var(--type-scale));
  font-weight: 500;
  color: #6b7280;
  transition: all 0.2s;
}

.bio-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.bio-preview {
  padding: 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  min-height: 150px;
  line-height: 1.6;
}

/* Mobile Modal Footer (Fixed Bottom) */

.mobile-modal-footer {
  position: sticky;
  bottom: 0;
  padding: var(--space-lg);
  background: white;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-md);
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.btn-secondary-mobile,

.btn-primary-mobile {
  flex: 1;
  padding: 0.875rem 1.5rem;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 48px;
}

.btn-secondary-mobile {
  background: white;
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.btn-secondary-mobile:active {
  background: var(--color-bg-secondary);
}

.btn-primary-mobile {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-primary-mobile:active {
  transform: scale(0.98);
}

/* ============================================================================
   AI Analysis Modal (Full-Screen Conversational)
   ============================================================================ */

.ai-modal-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 20000;
  display: none;
  flex-direction: column;
}

.ai-modal-fullscreen.active {
  display: flex;
}

.ai-modal-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.ai-modal-close {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  transition: background-color 0.2s;
}

.ai-modal-close:hover {
  background: var(--color-bg-secondary);
}

.ai-modal-title {
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 700;
  color: var(--color-text);
}

.ai-modal-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* AI Document Preview */

.ai-document-preview {
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.ai-document-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: white;
}

/* AI Conversation Area */

.ai-conversation {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  -webkit-overflow-scrolling: touch;
}

.ai-message {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.ai-message.user {
  flex-direction: row-reverse;
}

.ai-message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.ai-message.user .ai-message-avatar {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
}

.ai-message-bubble {
  max-width: 75%;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  color: var(--color-text);
  line-height: 1.6;
}

.ai-message.user .ai-message-bubble {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* AI Input Area */

.ai-input-area {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: white;
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.ai-input-field {
  flex: 1;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: calc(1rem * var(--type-scale));
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.ai-input-field:focus {
  outline: none;
  border-color: var(--color-primary);
  background: white;
}

.ai-send-btn {
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-send-btn:active {
  transform: scale(0.95);
}

.ai-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Voice Recording Button */

.ai-voice-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  font-size: calc(1.25rem * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.ai-voice-btn.recording {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  animation: pulse-recording 1s infinite;
}

@keyframes pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

/* AI Modal Footer (v4.6.18 - full width, cache-bust fix confirmed) */

.ai-modal-footer {
  padding: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
}

.ai-modal-footer > * {
  width: 100%;
  max-width: none;
}

.ai-save-btn {
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: calc(1.125rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 200px;
}

.ai-save-btn:active {
  transform: scale(0.98);
}

.ai-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* AI Analysis Results */

.ai-analysis-results {
  margin-top: 1rem;
}

.ai-result-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ai-result-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.ai-result-section strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.ai-result-section ul {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
}

.ai-result-section li {
  margin-bottom: 0.25rem;
}

.ai-extracted-text {
  background: rgba(0, 0, 0, 0.04);
  padding: 0.75rem;
  border-radius: var(--radius-md);
  font-family: monospace;
  font-size: calc(0.875rem * var(--type-scale));
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

.ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ai-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 500;
}

/* ============================================================================
   Mobile Responsive Enhancements
   ============================================================================ */

@media (min-width: 769px) {
  /* On desktop, center the mobile views */
  #view-person-profile {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    box-shadow: var(--shadow-xl);
  }

  .mobile-modal {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: var(--shadow-xl);
  }

  .ai-modal-fullscreen {
    max-width: 800px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: var(--shadow-xl);
  }
}

/* ============================================================================
   Family Navigator - Mobile-First Hierarchical Navigation
   ============================================================================ */

/* Desktop: Side panel */

@media (min-width: 1024px) {
  .family-navigator {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    border: none;
    background: var(--ffvr-surface, white);
    z-index: 1;
    display: flex;
    flex-direction: column;
  }

  .tree-canvas-fullwidth {
    margin-right: 0 !important;
  }
}

/* Mobile: ALWAYS VISIBLE - Family Navigator is the hero screen */

@media (max-width: 1023px) {
  .family-navigator {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    background: var(--ffvr-surface, white);
    z-index: 1;
    display: flex; /* ALWAYS VISIBLE - Hero screen */
    flex-direction: column;
  }

  .family-navigator.active {
    display: flex;
    flex-direction: column;
  }
}

/* Navigator header */

.family-navigator-header {
  padding: var(--space-lg);
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: white;
  border-bottom: 1px solid var(--color-border);
}

.family-navigator-header h3 {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-xs) 0;
}

.nav-description {
  font-size: var(--font-sm);
  opacity: 0.8;
  margin: 0;
}

/* Compact Navigator Header */

.family-navigator-header-compact {
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: white;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-back-btn-compact {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: calc(0.875rem * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-back-btn-compact:hover {
  background: rgba(255, 255, 255, 0.2);
}

.nav-back-btn-compact:active {
  transform: scale(0.95);
}

.nav-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-header-info h3 {
  margin: 0;
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 700;
}

.nav-stats-compact {
  font-size: calc(0.75rem * var(--type-scale));
  opacity: 0.8;
}

.nav-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Family / Friend toggle — abundant-hopping-sifakis S1 */
.nav-mode-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.nav-mode-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: none;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-mode-btn:hover {
  color: #fff;
}
.nav-mode-btn.active {
  background: rgba(255, 255, 255, 0.95);
  color: #111827;
}

/* Header search */
.nav-header-search {
  display: flex;
  align-items: center;
  min-width: 180px;
}
.nav-header-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  font-size: calc(0.85rem * var(--type-scale));
  outline: none;
}
.nav-header-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.nav-header-search-input:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Friend view groups */
.fnav-friend-group {
  margin-bottom: 1.5rem;
}
.fnav-friend-group-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}
.fnav-friend-group-title {
  margin: 0;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text-primary);
}
.fnav-friend-group-count {
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-lighter);
  background: var(--color-bg-muted, #f3f4f6);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}
.fnav-member-type-badge {
  display: inline-block;
  font-size: calc(0.7rem * var(--type-scale));
  background: #e0e7ff;
  color: #3730a3;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  margin-top: 0.2rem;
}
.fnav-search-note {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-lighter);
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #6366f1;
  border-radius: 4px;
}
.fnav-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-lighter);
}

/* Mobile: stack the toggle + search in the header */
@media (max-width: 720px) {
  .family-navigator-header-compact {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .nav-header-info { flex: 1 1 auto; }
  .nav-mode-toggle { order: 3; flex: 0 0 auto; }
  .nav-header-search { order: 4; flex: 1 1 100%; min-width: 0; }
  .nav-header-actions { order: 2; }
}

/* Navigator content */

.family-navigator-content {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.nav-loading,

.nav-error {
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-text-light);
}

/* Navigation header (context) */

.nav-header {
  padding: var(--space-lg);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.nav-header-title {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-xs);
}

.nav-header-subtitle {
  font-size: var(--font-sm);
  opacity: 0.9;
}

/* Back button */

.nav-back-button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-secondary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  transition: background 0.2s, transform 0.2s;
  width: fit-content;
}

.nav-back-button:hover {
  background: var(--color-border);
  transform: translateX(-2px);
}

/* Controls list */

.nav-controls-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Couple control - compact for mobile fit */

.nav-couple-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 56px;
}

.nav-couple-control:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nav-couple-control:active {
  transform: translateY(0);
}

.nav-couple-names {
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  line-height: 1.3;
}

.nav-couple-arrow {
  font-size: calc(20px * var(--type-scale));
  opacity: 0.9;
}

/* Individual control - compact for mobile fit */

.nav-individual-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: white;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-left-color 0.2s;
  min-height: 48px;
}

.nav-individual-control:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left-width: 6px;
}

.nav-individual-control:active {
  transform: translateY(0);
}

.nav-individual-name {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  line-height: 1.3;
}

.nav-individual-icon {
  font-size: calc(16px * var(--type-scale));
  color: var(--color-text-light);
}

/* Scrollbar styling for navigator */

.family-navigator-content::-webkit-scrollbar {
  width: 8px;
}

.family-navigator-content::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

.family-navigator-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}

.family-navigator-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-lighter);
}

/* Mobile: Compact controls to fit without scrolling */

@media (max-width: 1023px) {
  .nav-controls-list {
    gap: var(--space-sm);
  }

  .nav-couple-control {
    min-height: 52px;
    padding: var(--space-sm) var(--space-md);
  }

  .nav-individual-control {
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
  }

  .nav-couple-names {
    font-size: var(--font-sm);
  }

  .nav-individual-name {
    font-size: var(--font-xs);
  }

  .nav-couple-arrow {
    font-size: calc(18px * var(--type-scale));
  }

  .nav-individual-icon {
    font-size: calc(14px * var(--type-scale));
  }
}

/* ============================================================================
   Full-Pane Family Navigator (fnav-*)
   ============================================================================ */

/* Headshots */
.fnav-headshot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.fnav-headshot-lg {
  width: 72px;
  height: 72px;
}

.fnav-headshot-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 700;
  font-size: calc(16px * var(--type-scale));
}

.fnav-headshot-lg.fnav-headshot-fallback {
  font-size: calc(22px * var(--type-scale));
}

/* Unit header (couple level) */
.fnav-unit-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 18px;
  margin-bottom: 1.75rem;
  color: white;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.25);
}

.fnav-unit-headshots {
  display: flex;
  gap: 0.5rem;
}

.fnav-unit-title {
  margin: 0;
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
}

.fnav-unit-subtitle {
  margin: 0.25rem 0 0;
  font-size: calc(0.875rem * var(--type-scale));
  opacity: 0.85;
}

/* Members grid */
.fnav-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

/* Couple card (navigate into unit) */
.fnav-couple-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 3px 12px rgba(102, 126, 234, 0.2);
}

.fnav-couple-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
}

.fnav-couple-card:active {
  transform: translateY(0);
}

.fnav-couple-headshots {
  display: flex;
  gap: 0.25rem;
}

.fnav-couple-headshots .fnav-headshot {
  width: 44px;
  height: 44px;
}

.fnav-couple-card .fnav-couple-info {
  flex: 1;
}

.fnav-couple-card .fnav-couple-names {
  font-weight: 600;
  font-size: calc(1.1rem * var(--type-scale));
}

.fnav-couple-meta {
  font-size: calc(0.75rem * var(--type-scale));
  opacity: 0.8;
  margin-top: 0.125rem;
}

.fnav-couple-card .fnav-couple-arrow {
  font-size: calc(1.25rem * var(--type-scale));
  opacity: 0.8;
}

/* Individual member card */
.fnav-member-card {
  background: white;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--member-accent, #6b7280);
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.fnav-member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-left-width: 6px;
}

.fnav-member-card:active {
  transform: translateY(0);
}

.fnav-member-me {
  border-left-color: #10b981 !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2), 0 1px 4px rgba(0, 0, 0, 0.06);
}

.fnav-member-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.fnav-member-info {
  flex: 1;
  min-width: 0;
}

.fnav-member-name {
  font-weight: 600;
  font-size: calc(1.05rem * var(--type-scale));
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fnav-me-badge {
  display: inline-block;
  background: #10b981;
  color: white;
  font-size: calc(0.65rem * var(--type-scale));
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.fnav-member-dates {
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-light);
  margin-top: 0.125rem;
}

/* Action buttons row */
.fnav-actions {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.fnav-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-secondary, #f8fafc);
  cursor: pointer;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 500;
  color: var(--color-text-light);
  transition: all 0.15s;
  line-height: 1;
}

.fnav-action-btn:hover {
  background: var(--color-primary, #3b82f6);
  color: white;
  border-color: var(--color-primary, #3b82f6);
}

.fnav-action-icon {
  font-size: calc(0.85rem * var(--type-scale));
}

.fnav-action-label {
  white-space: nowrap;
}

.fnav-error {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-light);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .fnav-members-grid {
    grid-template-columns: 1fr;
  }

  .fnav-unit-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    padding: 1rem;
  }

  .fnav-unit-title {
    font-size: calc(1.25rem * var(--type-scale));
  }

  .fnav-headshot-lg {
    width: 52px;
    height: 52px;
  }

  .fnav-action-label {
    display: none;
  }

  .fnav-action-btn {
    padding: 0.35rem;
  }

  .fnav-action-icon {
    font-size: calc(1rem * var(--type-scale));
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Full-Pane Invitations Panel (inv-*)
   ═══════════════════════════════════════════════════════════════════ */

.inv-pane {
  position: fixed;
  top: var(--nav-height);
  left: var(--side-nav-width);
  right: 0;
  bottom: 0;
  background: #0d0d1a;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inv-pane-header {
  flex-shrink: 0;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.05));
}

.inv-pane-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.inv-pane-title {
  margin: 0;
  font-size: calc(1.4rem * var(--type-scale));
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.inv-pane-count {
  font-size: calc(13px * var(--type-scale));
  color: rgba(255,255,255,0.4);
}

.inv-pane-spacer { flex: 1; }

.inv-close-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: calc(28px * var(--type-scale));
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
}

.inv-close-btn:hover { color: #fff; }

.inv-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.inv-status-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.inv-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: calc(12px * var(--type-scale));
  font-weight: 500;
  white-space: nowrap;
}

.inv-toolbar-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.inv-search {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.9);
  font-size: calc(13px * var(--type-scale));
  width: 180px;
  outline: none;
  transition: border-color 0.2s;
}

.inv-search:focus {
  border-color: rgba(102,126,234,0.5);
}

/* Card list — vertical scroll of full-width horizontal panels */
.inv-card-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inv-card {
  display: flex;
  align-items: stretch;
  /* flex-shrink 0: overflow:hidden removes the min-content floor, so without
     this the column compresses all N cards to fit the viewport instead of
     scrolling once N × card-height exceeds it (51-person roster → 6px slivers) */
  flex-shrink: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.inv-card:hover {
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.inv-card-editing {
  border-color: rgba(102,126,234,0.5) !important;
  box-shadow: 0 0 16px rgba(102,126,234,0.2);
}

/* Status-specific left border accents */
.inv-card-uninvited { border-left: 4px solid #6b7280; }
.inv-card-draft     { border-left: 4px solid #f59e0b; }
.inv-card-ready     { border-left: 4px solid #10b981; }
.inv-card-invited   { border-left: 4px solid #3b82f6; }
.inv-card-active    { border-left: 4px solid #059669; }

/* Headshot — fallback always visible, image layered on top */
.inv-headshot-wrap {
  flex-shrink: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
}

.inv-headshot-fallback {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(102,126,234,0.35), rgba(118,75,162,0.35));
  border: 2px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18px * var(--type-scale));
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
}

.inv-headshot {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.12);
}

/* Card body — right of headshot */
.inv-card-body {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 14px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

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

.inv-card-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.inv-card-name {
  font-weight: 700;
  font-size: calc(16px * var(--type-scale));
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.inv-card-role {
  font-size: calc(11px * var(--type-scale));
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
}

.inv-role-guest {
  background: rgba(139,92,246,0.15);
  color: rgba(139,92,246,0.9);
}

.inv-card-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: calc(11px * var(--type-scale));
  font-weight: 600;
}

.inv-audio-badge {
  font-size: calc(10px * var(--type-scale));
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16,185,129,0.15);
  color: #10b981;
}

.inv-card-preview {
  font-size: calc(13px * var(--type-scale));
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.inv-action-btn {
  padding: 5px 12px;
  border-radius: 8px;
  border: none;
  font-size: calc(12px * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.inv-action-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

.inv-action-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(102,126,234,0.3);
}

.inv-action-secondary {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
}

.inv-action-secondary:hover {
  background: rgba(255,255,255,0.14);
}

.inv-action-link {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
}

.inv-action-link:hover {
  background: rgba(59,130,246,0.25);
}

.inv-active-indicator {
  font-size: calc(12px * var(--type-scale));
  color: #10b981;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.inv-active-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.inv-trash-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.2);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.inv-trash-btn:hover {
  color: #ef4444;
  background: rgba(239,68,68,0.1);
}

/* Editor panel */
.inv-editor-panel {
  border-top: 2px solid rgba(102,126,234,0.4);
  flex-shrink: 0;
  max-height: 45vh;
  overflow-y: auto;
  background: rgba(102,126,234,0.03);
}

.inv-editor-inner {
  padding: 16px 24px;
}

.inv-editor-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.inv-editor-title {
  margin: 0;
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
}

.inv-editor-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inv-word-count {
  font-size: calc(12px * var(--type-scale));
  color: rgba(255,255,255,0.5);
}

.inv-editor-textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.9);
  font-size: calc(14px * var(--type-scale));
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}

.inv-editor-textarea:focus {
  outline: none;
  border-color: rgba(102,126,234,0.5);
}

.inv-audio-preview {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.inv-audio-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inv-audio-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.inv-audio-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}

.inv-audio-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 2px;
  transition: width 0.1s linear;
}

.inv-audio-times {
  display: flex;
  justify-content: space-between;
  font-size: calc(11px * var(--type-scale));
  color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}

.inv-editor-bottom {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

/* Mobile */
@media (max-width: 768px) {
  .inv-pane {
    left: 0;
  }

  .inv-card-list {
    padding: 12px 12px;
    gap: 8px;
  }

  .inv-card {
    flex-direction: row;
  }

  .inv-headshot-wrap {
    width: 64px;
    padding: 10px 8px;
  }

  .inv-headshot-fallback {
    width: 44px;
    height: 44px;
    font-size: calc(15px * var(--type-scale));
  }

  .inv-headshot {
    width: 44px;
    height: 44px;
  }

  .inv-card-body {
    padding: 10px 12px 10px 4px;
  }

  .inv-card-name {
    font-size: calc(14px * var(--type-scale));
  }

  .inv-card-identity {
    gap: 6px;
  }

  .inv-pane-header {
    padding: 16px;
  }

  .inv-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .inv-toolbar-right {
    margin-left: 0;
  }

  .inv-search {
    width: 100%;
  }

  .inv-editor-inner {
    padding: 12px 16px;
  }
}

/* Relationship Editing */

.relationship-person-card-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.relationship-delete-btn {
  background: #fee2e2;
  border: none;
  border-radius: 0.375rem;
  padding: 0.5rem;
  cursor: pointer;
  font-size: calc(1.125rem * var(--type-scale));
  transition: all 0.2s;
  flex-shrink: 0;
}

.relationship-delete-btn:hover {
  background: #fecaca;
  transform: scale(1.1);
}

.relationship-delete-btn:active {
  transform: scale(0.95);
}

/* View All Button for Siblings/Cousins */

.view-all-btn {
  width: 100%;
  padding: 0.625rem 1rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: calc(0.875rem * var(--type-scale));
  color: #6366f1;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
}

.view-all-btn:hover {
  background: #e5e7eb;
  color: #4f46e5;
}

.view-all-btn:active {
  transform: scale(0.98);
}

/* Add Relationship Button */

.add-relationship-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.add-relationship-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.add-relationship-btn:active {
  transform: translateY(0);
}

/* Modal Styles - Removed duplicate (using styles from line 2447 instead) */

.modal-content {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  margin: 0;
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  font-size: calc(2rem * var(--type-scale));
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  transition: all 0.2s;
}

.modal-close:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.modal-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--ffvr-ink, #374151);
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--ffvr-rule, #e5e7eb);
  border-radius: 0.5rem;
  font-size: calc(1rem * var(--type-scale));
  transition: all 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modal-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 1rem;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: var(--ffvr-surface-raised, #f3f4f6);
  color: var(--ffvr-ink, #374151);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--ffvr-surface, #e5e7eb);
}

.btn-danger {
  background: #ef4444;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

/* ========================================
   v3.0 Training Photo Review Modal Styles
   ======================================== */

.photo-preview {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 20px;
}

.quality-assessment {
  margin-top: 20px;
}

.quality-score {
  text-align: center;
  margin-bottom: 20px;
}

.score-value {
  font-size: calc(48px * var(--type-scale));
  font-weight: bold;
  color: #10b981;
  display: block;
}

.score-label {
  font-size: calc(14px * var(--type-scale));
  color: #6b7280;
  display: block;
  margin-top: 8px;
}

.quality-factors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.factor {
  padding: 12px;
  background: #f3f4f6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(14px * var(--type-scale));
}

.factor .icon {
  font-size: calc(20px * var(--type-scale));
}

.recommendation {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: calc(15px * var(--type-scale));
}

.recommendation .icon {
  font-size: calc(24px * var(--type-scale));
}

.recommendation.accept {
  background: #d1fae5;
  color: #065f46;
  border: 2px solid #10b981;
}

.recommendation.reject {
  background: #fee2e2;
  color: #991b1b;
  border: 2px solid #ef4444;
}

.issues {
  padding: 12px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  margin-bottom: 16px;
}

.issues ul {
  margin: 8px 0;
  padding-left: 20px;
}

.issues li {
  margin: 4px 0;
  color: #92400e;
}

.explanation {
  color: #374151;
  line-height: 1.6;
  font-size: calc(14px * var(--type-scale));
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

/* ========================================
   v3.0 Document Review Modal Styles
   ======================================== */

.document-modal .modal-content {
  max-width: 95%;
  max-height: 95vh;
}

.document-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .document-layout {
    flex-direction: row;
  }

  .document-preview {
    flex: 1;
    min-width: 300px;
  }

  .document-metadata {
    flex: 1;
    min-width: 400px;
  }
}

.document-preview {
  display: flex;
  flex-direction: column;
}

.doc-image {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.document-metadata {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-confidence {
  display: block;
  font-size: calc(12px * var(--type-scale));
  color: #10b981;
  margin-top: 4px;
  font-weight: 500;
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  min-height: 44px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #667eea;
  color: white;
  border-radius: 16px;
  font-size: calc(14px * var(--type-scale));
  font-weight: 500;
}

.chip button {
  background: none;
  border: none;
  color: white;
  font-size: calc(18px * var(--type-scale));
  cursor: pointer;
  padding: 0;
  margin: 0;
  min-width: 20px;
  min-height: 20px;
  line-height: 1;
}

.chip button:hover {
  opacity: 0.8;
}

.conversation {
  margin-top: 24px;
  border-top: 1px solid #e5e7eb;
  padding-top: 24px;
}

.conversation label {
  display: block;
  font-weight: 600;
  margin-bottom: 12px;
  color: #374151;
}

.chat-history {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.chat-history:empty::before {
  content: "No messages yet. Ask Claude a question about this document.";
  color: #9ca3af;
  font-style: italic;
  font-size: calc(14px * var(--type-scale));
}

.chat-message {
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: calc(14px * var(--type-scale));
}

.chat-message.user {
  background: #e0e7ff;
  color: #1e40af;
  text-align: right;
  margin-left: 20%;
}

.chat-message.assistant {
  background: #f3f4f6;
  color: #1f2937;
  margin-right: 20%;
}

.chat-input {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.chat-input input {
  flex: 1;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: calc(16px * var(--type-scale));
}

.chat-input button {
  padding: 12px 24px;
  min-width: 80px;
  white-space: nowrap;
}

/* Mobile optimizations for v3.0 modals */

@media (max-width: 768px) {
  .photo-preview {
    max-height: 250px;
  }

  .quality-factors {
    grid-template-columns: 1fr;
  }

  .score-value {
    font-size: calc(36px * var(--type-scale));
  }

  .document-modal .modal-content {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .doc-image {
    max-height: 300px;
  }

  .chat-message.user {
    margin-left: 10%;
  }

  .chat-message.assistant {
    margin-right: 10%;
  }
}

/* ======================= RELATIONSHIP CARDS (Updated) ======================= */

.fm-relationship-group {
  margin-bottom: 20px;
}

.fm-relationship-group-label {
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  padding: 0 4px;
}

.fm-relationship-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 8px;
  transition: all 0.2s;
}

.fm-relationship-card-clickable {
  cursor: pointer;
}

.fm-relationship-card-clickable:active {
  transform: scale(0.98);
  background: #f9fafb;
}

.fm-rel-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  flex-shrink: 0;
}

.fm-rel-info {
  flex: 1;
  min-width: 0;
}

.fm-rel-name {
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-rel-type {
  font-size: calc(0.8125rem * var(--type-scale));
  color: #6b7280;
  margin: 0;
}

.fm-rel-arrow {
  color: #9ca3af;
  flex-shrink: 0;
}

/* Safe Delete Button (not a trash can - uses text to prevent mistakes) */

.fm-rel-remove-btn {
  padding: 8px 12px;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.fm-rel-remove-btn:hover {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #dc2626;
}

.fm-rel-remove-btn:active {
  transform: scale(0.95);
}

/* Confirmation state for delete */

.fm-rel-remove-btn.confirm {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
  animation: pulse-danger 1s infinite;
}

@keyframes pulse-danger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* ============================================================================
   LEADERBOARD STYLES
   Gamification UI for family contributions
   ============================================================================ */

/* Period Toggle */

.leaderboard-period-toggle {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.period-btn {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  background: white;
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}

.period-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.period-btn.active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: #f59e0b;
  color: white;
}

/* ── Family Together — collective accomplishment band (furnishing-vault-foyer D2) ──
   The hero of the redesigned leaderboard: the family as one team, the shared
   thing everyone is building, before the individual ranking. Warm parchment
   register, distinct from the gold competition palette of the cards below. */

.fam-together {
  margin: 20px 0 8px 0;
}

.fam-together-inner {
  background: linear-gradient(160deg, #fffaf2 0%, #fdf1de 100%);
  border: 1px solid #f3dcb8;
  border-radius: var(--radius-xl);
  padding: 22px 20px 20px;
  box-shadow: 0 1px 3px rgba(120, 80, 20, 0.06);
}

.fam-together-lede {
  text-align: center;
  font-size: var(--font-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a6a1c;
  font-weight: 600;
  margin-bottom: 16px;
}

.fam-together-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.fam-together-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 92px;
  flex: 1 1 92px;
  max-width: 140px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(243, 220, 184, 0.7);
}

.ft-tile-icon {
  font-size: calc(1.4rem * var(--type-scale));
  line-height: 1;
  margin-bottom: 6px;
}

.ft-tile-value {
  font-size: calc(1.6rem * var(--type-scale));
  font-weight: 700;
  color: #b45309;
  line-height: 1.1;
}

.ft-tile-label {
  font-size: calc(0.72rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-light);
  margin-top: 4px;
  text-align: center;
}

.fam-together-pulse {
  margin-top: 16px;
  text-align: center;
  font-size: var(--font-sm);
  color: #7c5410;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-full);
  padding: 8px 14px;
}

.fam-together-pulse-quiet {
  color: var(--color-text-light);
  font-style: italic;
}

/* Family Contributors section header (recognition ranking) */

.leaderboard-contributors-header {
  margin: 24px 0 4px 0;
}

.leaderboard-contributors-header h3 {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-text);
}

.leaderboard-contributors-sub {
  margin: 4px 0 0 0;
  font-size: var(--font-sm);
  color: var(--color-text-light);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .fam-together-tile {
    min-width: 80px;
    flex-basis: 80px;
  }
  .ft-tile-value { font-size: calc(1.4rem * var(--type-scale)); }
}

/* Family Goal Card */

.family-goal-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #f59e0b;
}

.goal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.goal-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.goal-title {
  font-weight: 600;
  color: #92400e;
  font-size: var(--font-lg);
}

.goal-progress-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 8px;
}

.goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.goal-stats {
  text-align: center;
  font-weight: 600;
  color: #92400e;
}

/* Leaderboard List */

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.leader-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all 0.2s;
}

.leader-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.leader-engagement {
  font-size: calc(0.75rem * var(--type-scale));
  color: #6b7280;
  margin-top: 2px;
}

/* Top 3 special styling */

.leader-card.rank-1 {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
}

.leader-card.rank-2 {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-color: #9ca3af;
}

.leader-card.rank-3 {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  border-color: #ea580c;
}

.leader-rank {
  font-size: calc(1.75rem * var(--type-scale));
  width: 48px;
  text-align: center;
  flex-shrink: 0;
}

.leader-info {
  flex: 1;
  min-width: 0;
}

.leader-name {
  font-weight: 600;
  font-size: var(--font-lg);
  color: var(--color-text);
  margin-bottom: 4px;
}

.leader-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--font-xs);
  color: var(--color-text-light);
}

.leader-breakdown span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.leader-points {
  text-align: right;
  flex-shrink: 0;
}

.leader-points-value {
  font-size: var(--font-xl);
  font-weight: 700;
  color: #f59e0b;
}

.leader-points-label {
  font-size: var(--font-xs);
  color: var(--color-text-light);
}

.leader-docs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-sm);
  color: #3b82f6;
  margin-top: 4px;
}

.leader-streak {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-sm);
  color: #ea580c;
  margin-top: 4px;
}

/* Your Stats Card */

.your-stats-card {
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border: 2px solid #8b5cf6;
  border-radius: var(--radius-xl);
  padding: 20px;
  margin: 20px 0;
}

.your-stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.your-stats-title {
  font-weight: 600;
  color: #5b21b6;
  font-size: var(--font-lg);
}

.your-stats-rank {
  background: #8b5cf6;
  color: white;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: 600;
}

.your-stats-points {
  text-align: center;
  margin-bottom: 16px;
}

.your-stats-points .points-value {
  font-size: calc(2.5rem * var(--type-scale));
  font-weight: 700;
  color: #5b21b6;
  display: block;
}

.your-stats-points .points-label {
  font-size: var(--font-sm);
  color: #7c3aed;
}

.your-stats-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.your-stat-item {
  text-align: center;
  padding: 12px;
  background: white;
  border-radius: var(--radius-lg);
}

.your-stat-item .stat-icon {
  font-size: calc(1.25rem * var(--type-scale));
  display: block;
  margin-bottom: 4px;
}

.your-stat-item .stat-count {
  font-weight: 700;
  color: #5b21b6;
}

.your-stat-item .stat-label {
  font-size: var(--font-xs);
  color: var(--color-text-light);
}

.your-stats-streak {
  text-align: center;
  font-size: var(--font-lg);
  color: #7c3aed;
  font-weight: 600;
}

.your-stats-streak .streak-icon {
  font-size: calc(1.5rem * var(--type-scale));
  margin-right: 8px;
}

/* Points Info Card */

.points-info-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: 20px;
  border: 1px solid var(--color-border);
  margin: 20px 0;
}

.points-info-card h3 {
  margin: 0 0 16px 0;
  color: var(--color-text);
  font-size: var(--font-lg);
}

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

.point-type {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

/* Clickable point actions */

.point-type.clickable {
  cursor: pointer;
}

.point-type.clickable:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  transform: translateX(4px);
}

.point-type.clickable:active {
  transform: translateX(2px);
}

.point-arrow {
  color: var(--color-text-light);
  font-weight: 500;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.point-type.clickable:hover .point-arrow {
  opacity: 1;
  color: #667eea;
  transform: translateX(4px);
}

/* Subtitle for earn points section */

.points-info-subtitle {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin: 0 0 12px 0;
}

.point-icon {
  font-size: calc(1.25rem * var(--type-scale));
  width: 32px;
  text-align: center;
}

.point-name {
  flex: 1;
  font-weight: 500;
  color: var(--color-text);
}

.point-value {
  font-weight: 700;
  color: #10b981;
}

/* Loading indicator for leaderboard */

.leaderboard-list .loading-indicator {
  text-align: center;
  padding: 40px;
  color: var(--color-text-light);
}

/* Leaderboard Hero Presentation - "Wow Moment" */

/* Hero Header Animation */

#view-leaderboard .view-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  color: white;
  padding: 32px 24px;
  border-radius: 0 0 24px 24px;
  margin: -16px -16px 24px -16px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.4);
}

#view-leaderboard .view-header h2 {
  font-size: calc(2rem * var(--type-scale));
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Animated Trophy */

#view-leaderboard .view-header h2::before {
  content: '🏆';
  display: inline-block;
  font-size: calc(2.5rem * var(--type-scale));
  margin-right: 12px;
  animation: trophy-bounce 1.5s ease-in-out infinite;
}

@keyframes trophy-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(-5deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-4px) rotate(5deg); }
}

/* Period Toggle in Hero */

#view-leaderboard .leaderboard-period-toggle {
  margin-top: 20px;
  justify-content: center;
}

#view-leaderboard .period-btn {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
  transition: all 0.3s ease;
}

#view-leaderboard .period-btn.active {
  background: white;
  color: #b45309;
  border-color: white;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Animated Leader Cards */

.leader-card {
  animation: slide-in-right 0.5s ease-out forwards;
  opacity: 0;
  transform: translateX(50px);
}

.leader-card:nth-child(1) { animation-delay: 0.1s; }

.leader-card:nth-child(2) { animation-delay: 0.2s; }

.leader-card:nth-child(3) { animation-delay: 0.3s; }

.leader-card:nth-child(4) { animation-delay: 0.4s; }

.leader-card:nth-child(5) { animation-delay: 0.5s; }

.leader-card:nth-child(6) { animation-delay: 0.6s; }

.leader-card:nth-child(7) { animation-delay: 0.7s; }

.leader-card:nth-child(8) { animation-delay: 0.8s; }

.leader-card:nth-child(9) { animation-delay: 0.9s; }

.leader-card:nth-child(10) { animation-delay: 1.0s; }

@keyframes slide-in-right {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Top 3 Podium Enhancement */

.leader-card.rank-1 {
  position: relative;
  transform: scale(1.02);
  z-index: 3;
}

.leader-card.rank-1::before {
  content: '🌟 TOP CONTRIBUTOR 🌟';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.leader-card.rank-1 .leader-rank {
  font-size: calc(2.5rem * var(--type-scale));
  animation: crown-shimmer 2s ease-in-out infinite;
}

@keyframes crown-shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3) drop-shadow(0 0 8px gold); }
}

/* Glowing rank badges for top 3 */

.leader-card.rank-2 .leader-rank,

.leader-card.rank-3 .leader-rank {
  font-size: calc(2rem * var(--type-scale));
}

/* Family Goal Card Enhancement */

.family-goal-card {
  animation: fade-in-up 0.6s ease-out 0.2s forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Goal Progress Bar Animation */

.goal-progress-fill {
  transition: width 1.5s ease-out;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  position: relative;
  overflow: hidden;
}

.goal-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% { left: 100%; }
}

/* Your Stats Card Animation */

.your-stats-card {
  animation: pop-in 0.4s ease-out 1.2s forwards;
  opacity: 0;
  transform: scale(0.9);
}

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

/* Empty state */

.leaderboard-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-light);
}

.leaderboard-empty .empty-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: 16px;
}

.leaderboard-empty h3 {
  color: var(--color-text);
  margin-bottom: 8px;
}

/* Mobile adjustments */

@media (max-width: 768px) {
  .leaderboard-period-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }

  .leader-card {
    flex-wrap: wrap;
  }

  .leader-rank {
    width: 40px;
    font-size: calc(1.5rem * var(--type-scale));
  }

  .leader-info {
    flex: 1 1 calc(100% - 120px);
  }

  .leader-points {
    margin-left: auto;
  }

  .your-stats-breakdown {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
   Review Queue Styles
   ============================================================================ */

/* Review Queue Header */

.review-queue-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.review-filter-toggle {
  display: flex;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: 4px;
  gap: 4px;
}

.filter-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  background: var(--color-bg-tertiary);
}

.filter-btn.active {
  background: var(--color-primary);
  color: white;
}

/* Review Stats Bar */

.review-stats-bar {
  display: flex;
  justify-content: space-around;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.review-stat {
  text-align: center;
}

.review-stat .stat-number {
  display: block;
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.review-stat .stat-label {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

/* Bulk Action Bar */

.bulk-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.bulk-select-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--font-medium);
}

.bulk-select-info input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.bulk-buttons {
  display: flex;
  gap: var(--space-sm);
}

/* Review Queue Grid */

.review-queue-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Review Item Card */

.review-item-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.review-item-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.review-item-select {
  flex-shrink: 0;
}

.review-item-select input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.review-item-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-secondary);
  cursor: pointer;
}

.review-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-item-info {
  flex: 1;
  min-width: 0;
}

.review-item-name {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--space-xs);
}

.review-item-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-xs);
  color: var(--color-text-light);
  flex-wrap: wrap;
}

.review-item-ai {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin-top: var(--space-xs);
  font-style: italic;
}

.review-item-faces {
  font-size: var(--font-sm);
  color: var(--color-success);
  margin-top: var(--space-xs);
}

.review-item-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Status Badges */

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  margin-top: var(--space-xs);
}

.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-processing {
  background: #dbeafe;
  color: #1e40af;
}

.status-ready {
  background: #d1fae5;
  color: #065f46;
}

.status-approved {
  background: #d1fae5;
  color: #065f46;
}

.status-rejected {
  background: #fee2e2;
  color: #991b1b;
}

.status-promoted {
  background: #ddd6fe;
  color: #5b21b6;
}

.status-failed {
  background: #fee2e2;
  color: #991b1b;
}

.status-approval_requested {
  background: #fef3c7;
  color: #92400e;
}

.status-needs-recovery {
  background: #fef3c7;
  color: #92400e;
  animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.status-interrupted {
  background: #dbeafe;
  color: #1e40af;
  animation: pulse-warning 2s infinite;
}

.status-dedup-review {
  background: #fef3c7;
  color: #92400e;
}

/* Review Empty State */

.review-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
}

.review-empty .empty-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: var(--space-lg);
}

.review-empty h3 {
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.review-empty p {
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}

.review-error {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-light);
}

.review-error button {
  margin-top: var(--space-md);
}

/* AI Analysis Tags */

.ai-tag {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  margin: 2px;
}

.fm-ai-message {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.fm-ai-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(1.5rem * var(--type-scale));
  flex-shrink: 0;
}

.fm-ai-content {
  flex: 1;
  background: var(--color-bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
}

.fm-ai-content p {
  margin-bottom: var(--space-sm);
}

.fm-ai-content p:last-child {
  margin-bottom: 0;
}

/* Face Detection Preview Styles */

.face-detection-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.face-detection-results {
  margin-top: var(--space-md);
}

.face-warning {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: #fef3c7;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
}

.face-warning.error {
  background: #fee2e2;
}

.face-warning .warning-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.face-warning .warning-text {
  flex: 1;
  color: #92400e;
  font-weight: var(--font-medium);
}

.face-warning.error .warning-text {
  color: #991b1b;
}

.face-detection-success {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: #d1fae5;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
}

.face-detection-success .success-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.face-detection-success .success-text {
  flex: 1;
  color: #065f46;
  font-weight: var(--font-medium);
}

.face-detection-success .quality-badge {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  color: white;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
}

.face-recommendation {
  padding: var(--space-sm);
  margin: 0;
  font-size: var(--font-sm);
  text-align: center;
}

.face-recommendation.good {
  color: #065f46;
}

.face-recommendation.warning {
  color: #92400e;
}

.face-recommendation.error {
  color: #991b1b;
}

/* Canvas overlay for bounding boxes */

.face-bbox-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Ensure parent container is positioned for canvas overlay */

.fm-crop-image-container,

.training-photos-crop-image-container {
  position: relative;
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .review-queue-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .review-filter-toggle {
    justify-content: center;
  }

  .review-stats-bar {
    flex-direction: column;
    gap: var(--space-md);
  }

  .bulk-action-bar {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .review-item-card {
    flex-wrap: wrap;
  }

  .review-item-thumb {
    width: 60px;
    height: 60px;
  }

  .review-item-info {
    flex-basis: calc(100% - 100px);
  }

  .review-item-actions {
    width: 100%;
    justify-content: flex-end;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
  }
}

/* ============================================================================
   Photo Source Selection Modal
   ============================================================================ */

.photo-source-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10010; /* Raised from 10000 to appear above FM modal (10002) */
  padding: 0;
}

.photo-source-modal {
  background: var(--color-bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 500px;
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  animation: slideUpModal 0.3s ease-out;
}

@keyframes slideUpModal {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.photo-source-title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 var(--space-lg) 0;
}

.photo-source-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.photo-source-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-secondary);
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.photo-source-btn:hover,

.photo-source-btn:focus {
  background: var(--color-bg-tertiary);
  border-color: var(--color-primary);
}

.photo-source-btn:active {
  transform: scale(0.98);
}

.photo-source-icon {
  font-size: calc(2rem * var(--type-scale));
  flex-shrink: 0;
  width: 50px;
  text-align: center;
}

.photo-source-label {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-text);
  display: block;
}

.photo-source-desc {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  display: block;
  margin-top: 2px;
}

.photo-source-cancel {
  display: block;
  width: 100%;
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: transparent;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.2s ease;
}

.photo-source-cancel:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-light);
}

/* Desktop adjustments */

@media (min-width: 768px) {
  .photo-source-modal-overlay {
    align-items: center;
  }

  .photo-source-modal {
    border-radius: var(--radius-xl);
    margin: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .photo-source-options {
    flex-direction: row;
    gap: var(--space-md);
  }

  .photo-source-btn {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
    flex: 1;
  }

  .photo-source-icon {
    width: auto;
    font-size: calc(2.5rem * var(--type-scale));
    margin-bottom: var(--space-sm);
  }
}

/* ============================================================================
   Login / Authentication Styles
   ============================================================================ */

/* Hidden state for main UI when showing login */

.top-nav.hidden,

.side-nav.hidden,

.main-content.hidden {
  display: none !important;
}

/* Login Overlay */

/* ============================================================================
   Login / Setup / Onboarding Overlay — Redesigned February 2026
   Warm frosted-glass card on atmospheric purple gradient
   ============================================================================ */

.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--ffa-purple-start) 0%, var(--ffa-purple-end) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--space-md);
  overflow: hidden;
}

/* Noise texture overlay for depth */

.login-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 0;
}

/* Warm ambient orbs */

.login-overlay::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
  top: -200px;
  right: -150px;
  animation: floatOrb 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-30px, 20px); }
  66% { transform: translate(20px, -15px); }
}

/* Secondary warm orb (bottom-left) via box-shadow on overlay */

.login-overlay .login-container::before {
  content: '';
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
  bottom: -200px;
  left: -150px;
  animation: floatOrb 25s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: -1;
}

.login-container {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 25px 50px rgba(102, 126, 234, 0.25),
    0 10px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 2rem;
  animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .login-container {
    max-width: 480px;
    max-height: calc(100vh - 4rem);
    padding: 2.5rem;
  }
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Kept for backwards compat */

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

.login-header {
  text-align: center;
  margin-bottom: 1.75rem;
  animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.login-logo {
  max-width: 180px;
  height: auto;
  margin-bottom: var(--space-md);
  animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.login-header h1 {
  font-family: var(--font-heading);
  font-size: calc(1.65rem * var(--type-scale));
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.login-header p {
  font-family: var(--font-body);
  color: #6b7280;
  font-size: calc(0.95rem * var(--type-scale));
  font-weight: 400;
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.login-form h3 {
  font-family: var(--font-heading);
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.login-form .form-description {
  font-family: var(--font-body);
  font-size: calc(0.9rem * var(--type-scale));
  color: #6b7280;
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.login-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  animation: fieldFadeIn 0.4s ease-out both;
}

.login-form .form-group:nth-child(1) { animation-delay: 0.2s; }

.login-form .form-group:nth-child(2) { animation-delay: 0.3s; }

.login-form .form-group:nth-child(3) { animation-delay: 0.4s; }

.login-form .form-group:nth-child(4) { animation-delay: 0.5s; }

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

.login-form label {
  font-family: var(--font-body);
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.01em;
}

.login-form input[type="email"],

.login-form input[type="password"],

.login-form input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-size: calc(1rem * var(--type-scale));
  font-family: var(--font-body);
  background: rgba(255, 255, 255, 0.7);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.login-form input:focus {
  outline: none;
  border-color: var(--ffa-purple-start);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
  background: #fff;
}

.login-error {
  color: var(--color-danger);
  font-family: var(--font-body);
  font-size: var(--font-sm);
  min-height: 1.25rem;
}

.login-btn {
  width: 100%;
  padding: 0.85rem;
  background: linear-gradient(135deg, var(--ffa-purple-start) 0%, var(--ffa-purple-end) 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-position 0.4s, transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.3);
}

.login-btn:hover:not(:disabled) {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.login-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.forgot-password,

.back-to-login {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: calc(0.85rem * var(--type-scale));
  color: #6b7280;
  margin-top: var(--space-md);
  transition: color 0.2s;
}

.forgot-password:hover,

.back-to-login:hover {
  color: var(--ffa-purple-start);
}

/* Contact hint box (forgot password screen) */

.login-contact-box {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.04) 100%);
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(102, 126, 234, 0.12);
  margin-bottom: 1rem;
}

.login-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
  font-family: var(--font-body);
  font-size: calc(1rem * var(--type-scale));
  color: #374151;
}

.login-hint-box {
  font-family: var(--font-body);
  font-size: calc(0.9rem * var(--type-scale));
  color: #6b7280;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Secret Questions Setup (legacy — kept for form handler compat) */

.question-item {
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.question-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  line-height: 1.4;
}

.question-checkbox input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.question-answer {
  margin-top: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-family: inherit;
}

.question-answer:focus {
  outline: none;
  border-color: var(--color-primary);
}

.questions-counter {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  text-align: center;
  margin: var(--space-md) 0;
}

/* Form hints */

.form-hint {
  display: block;
  font-family: var(--font-body);
  font-size: calc(0.75rem * var(--type-scale));
  color: #9ca3af;
  margin-top: 0.25rem;
}

/* Account setup password hint box */

.login-password-hint {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.04) 100%);
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(102, 126, 234, 0.12);
  font-family: var(--font-body);
  font-size: calc(0.85rem * var(--type-scale));
  color: #4b5563;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}

/* Account setup form specific */

#accountSetupForm h4 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

/* Mobile adjustments */

@media (max-width: 480px) {
  .login-container {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .login-header h1 {
    font-size: calc(1.35rem * var(--type-scale));
  }

  .login-header p {
    font-size: calc(0.85rem * var(--type-scale));
  }

  .login-logo {
    max-width: 130px;
    margin-bottom: var(--space-sm);
  }

  .login-header {
    margin-bottom: 1.25rem;
  }

  .login-btn {
    padding: 0.75rem;
    margin-top: var(--space-sm);
  }
}

/* Account setup form - compact layout */

#accountSetupForm .form-group {
  margin-bottom: 0.75rem;
}

#accountSetupForm label {
  font-size: calc(0.85rem * var(--type-scale));
  margin-bottom: 0.25rem;
}

#accountSetupForm input {
  padding: 0.625rem 0.75rem;
  font-size: calc(0.9rem * var(--type-scale));
}

#accountSetupForm .form-hint {
  font-size: calc(0.72rem * var(--type-scale));
  margin-top: 0.125rem;
  line-height: 1.3;
}

#accountSetupForm .form-description {
  font-size: calc(0.85rem * var(--type-scale));
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

#accountSetupForm h3 {
  font-size: calc(1.15rem * var(--type-scale));
  margin-bottom: 0.25rem;
}

#accountSetupForm > p.form-description:first-of-type {
  margin-bottom: 0.75rem;
}

/* Account setup - small iPhone */

@media (max-width: 480px) {
  #accountSetupForm .form-group {
    margin-bottom: 0.5rem;
  }

  #accountSetupForm label {
    font-size: var(--font-sm);
    margin-bottom: 0.125rem;
  }

  #accountSetupForm input {
    padding: 0.5rem;
    font-size: var(--font-sm);
  }

  #accountSetupForm .form-hint {
    font-size: calc(0.65rem * var(--type-scale));
    margin-top: 0.125rem;
  }

  #accountSetupForm .form-description {
    font-size: var(--font-sm);
    padding: 0.375rem 0.5rem;
    margin-top: 0.25rem;
  }

  #accountSetupForm h3 {
    font-size: var(--font-lg);
    margin-bottom: var(--space-sm);
  }
}

/* AI Document Analysis modal full width overlay */

@media (min-width: 768px) {
  /* fluffy-puzzling-dongarra S1 D1: 100vw → 100% + box-sizing for the
     modal-anchoring Iron Law (scrollbar-gutter overhang on iOS-style
     touchpads). Desktop overflow path: still bounded by viewport, but
     no longer measures the scrollbar gutter. */
  .ai-modal-fullscreen {
    width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
    box-sizing: border-box;
  }
}

/* Compact header for AI Document Analysis modal (Mac Safari) */

.ai-modal-header-compact {
  padding: 8px var(--space-lg);
  justify-content: center;
}

.ai-modal-header-compact .ai-modal-title {
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
}

/* Home button for AI modal (iPhone navigation) */

.ai-modal-home {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  font-size: calc(1.4rem * var(--type-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 10;
}

.ai-modal-home:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5);
}

.ai-modal-home:active {
  transform: translateY(-50%) scale(0.95);
}

/* Hide home button on desktop */

@media (min-width: 1024px) {
  .ai-modal-home {
    display: none;
  }
}

/* Rejection modal must appear above AI modal */

#rejectionReasonModal {
  z-index: 25000;
}

#rejectionReasonModal .modal-overlay {
  z-index: 24999;
}

#rejectionReasonModal .modal-dialog {
  z-index: 25001;
}

/* ============================================================================
   v4.6.25 - iPad/Tablet Specific Styles (768px - 1024px)
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* AI Modal - centered on tablet instead of full-screen */
  .ai-modal-fullscreen {
    top: 5vh;
    left: 5vw;
    right: 5vw;
    bottom: 5vh;
    width: 90vw;
    max-width: none;
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* Document duplicate dialog - comfortable width */
  #duplicateDocumentOverlay > div {
    max-width: 450px;
  }

  /* Larger touch targets for buttons */
  .ai-save-btn,
  .btn-primary-mobile {
    min-height: 48px;
    font-size: calc(1rem * var(--type-scale));
  }

  /* Footer action buttons - comfortable spacing */
  .ai-modal-footer {
    padding: 12px 16px;
  }

  /* Filename input - ensure adequate size */
  #aiFilenameInput {
    font-size: calc(0.85rem * var(--type-scale));
    padding: 6px 8px;
  }

  /* Navigation - show full names */
  .nav-title {
    font-size: calc(1.1rem * var(--type-scale));
  }

  /* Tree panel - wider on tablet */
  .tree-nav-panel {
    width: 300px;
  }

  /* Photo grid - 3 columns on tablet */
  .training-photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Documents grid - 2 columns */
  .documents-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
   Leaderboard Hero Screen
   Full-screen overlay shown on app launch
   v7.3.0: Fixed to respect header height - modals must never cover header
   ============================================================================ */

.leaderboard-hero-overlay {
  position: fixed;
  top: var(--nav-height);
  left: var(--side-nav-width);
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  z-index: 10001;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Mobile: hero overlay takes full width but respects half-height header */

@media (max-width: 767px) {
  .leaderboard-hero-overlay {
    top: calc(var(--nav-height) / 2);
    left: 0;
  }
}

.leaderboard-hero-overlay.hero-visible {
  opacity: 1;
}

.leaderboard-hero-overlay.hero-hiding {
  opacity: 0;
  pointer-events: none; /* Ensure clicks pass through to modal below */
}

.hero-container {
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: heroSlideUp 0.4s ease-out;
}

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

/* Hero Header */

.hero-header {
  text-align: center;
  padding: 10px 0;
}

.hero-greeting {
  font-size: calc(1.75rem * var(--type-scale));
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-subtitle {
  font-size: calc(0.95rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.hero-version {
  font-size: calc(0.75rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
  font-weight: 500;
}

/* Hero Goal Card */

.hero-goal-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-goal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.hero-goal-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.hero-goal-title {
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
  color: #fff;
}

.hero-goal-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-goal-bar {
  height: 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  overflow: hidden;
}

.hero-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 6px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.hero-goal-stats {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(0.9rem * var(--type-scale));
}

/* Hero Podium */

.hero-podium {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-podium-title {
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 600;
  color: #fff;
  text-align: center;
  margin: 0;
}

.hero-podium-ranks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-rank-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease;
}

.hero-rank-card.gold {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 184, 0, 0.15));
  border-color: rgba(255, 215, 0, 0.4);
}

.hero-rank-card.silver {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.25), rgba(169, 169, 169, 0.15));
  border-color: rgba(192, 192, 192, 0.4);
}

.hero-rank-card.bronze {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.25), rgba(180, 100, 40, 0.15));
  border-color: rgba(205, 127, 50, 0.4);
}

.hero-rank-icon {
  font-size: calc(2rem * var(--type-scale));
  flex-shrink: 0;
}

.hero-rank-info {
  flex: 1;
}

.hero-rank-name {
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.hero-rank-points {
  font-size: calc(0.95rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.8);
}

.hero-rank-streak {
  font-size: calc(0.85rem * var(--type-scale));
  color: #fbbf24;
  margin-top: 4px;
}

/* Your Rank (if not in top 3) */

.hero-your-rank {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-your-rank-label {
  font-size: calc(0.9rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.7);
}

.hero-your-rank-value {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-your-rank-position {
  font-size: calc(1.2rem * var(--type-scale));
  font-weight: 700;
  color: #fff;
}

.hero-your-rank-points {
  font-size: calc(0.9rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.8);
}

/* Continue Button */

.hero-continue-btn {
  width: 100%;
  padding: 18px 24px;
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
  color: #1e1b4b;
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  margin-top: 10px;
}

.hero-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.hero-continue-btn:active {
  transform: translateY(0);
}

/* Loading/Error states */

.hero-loading,

.hero-error,

.hero-empty {
  text-align: center;
  padding: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(0.95rem * var(--type-scale));
}

/* Tablet adjustments */

@media (min-width: 768px) {
  .hero-container {
    max-width: 550px;
    padding: 20px;
  }

  .hero-greeting {
    font-size: calc(2rem * var(--type-scale));
  }

  .hero-rank-card {
    padding: 18px 20px;
  }
}

/* Desktop adjustments */

@media (min-width: 1024px) {
  .hero-container {
    max-width: 600px;
  }

  .hero-greeting {
    font-size: calc(2.25rem * var(--type-scale));
  }

  /* Horizontal layout for podium on desktop */
  .hero-podium-ranks {
    flex-direction: row;
    gap: 12px;
  }

  .hero-rank-card {
    flex: 1;
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
  }

  .hero-rank-info {
    text-align: center;
  }
}

/* ============================================================================
   Leaderboard Hero Side-by-Side
   Shows alongside Family Member Modal on first open (desktop only)
   v7.2.0: Fixed to respect sidebar, position within app content area
   ============================================================================ */

.leaderboard-hero-side-by-side {
  position: fixed;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  z-index: 10000; /* Below modal but above backdrop */
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateX(-100%);
}

.leaderboard-hero-side-by-side.hero-visible {
  opacity: 1;
  transform: translateX(0);
}

.leaderboard-hero-side-by-side.hero-hiding {
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

.hero-side-panel {
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: heroSlideIn 0.4s ease-out;
}

@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Hide dashboard/main content when hero is visible (navigation is in sidebar) */

body:has(.leaderboard-hero-side-by-side.hero-visible) .main-content {
  visibility: hidden;
}

/* Tablet: slightly wider side panel */

@media (min-width: 768px) and (max-width: 1023px) {
  .leaderboard-hero-side-by-side {
    width: 45%;
  }
}

/* Mobile: Hide side-by-side (mobile uses overlay instead) */

@media (max-width: 767px) {
  .leaderboard-hero-side-by-side {
    display: none !important;
  }
}

/* ============================================================================
   v7.2.0: Desktop Hero Layout - Respect Sidebar
   On desktop (≥1024px), hero and modal render within the app content area
   (to the right of the sidebar), not over the entire viewport.
   ============================================================================ */

@media (min-width: 1024px) {
  /* Leaderboard panel: starts at sidebar edge, takes left half of content area */
  .leaderboard-hero-side-by-side {
    left: var(--side-nav-width);
    top: var(--nav-height);
    height: calc(100% - var(--nav-height));
    /* Width = half of content area = (100% - sidebar) / 2 */
    width: calc((100% - var(--side-nav-width)) / 2);
  }
}


/* ============================================================================
   STORIES VIEW - v4.8.0
   ============================================================================ */

/* Stories Header */

.stories-header {
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Title section with Add Story button */

.stories-title-section {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.stories-title-section h2 {
  margin: 0;
  font-size: var(--font-2xl);
}

/* Add Story button in header */

.add-story-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.add-story-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.add-story-btn:active {
  transform: translateY(0);
}

.add-story-icon {
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 700;
}

/* Mobile: Hide text, show only icon */

@media (max-width: 767px) {
  /* Ensure title section keeps button visible on mobile portrait */
  .stories-title-section {
    width: 100%;
    justify-content: space-between;
  }

  .stories-title-section h2 {
    flex: 1;
    min-width: 0; /* Allow text to shrink if needed */
  }

  .add-story-btn {
    padding: 8px 12px;
    flex-shrink: 0; /* Don't allow button to shrink */
  }

  .add-story-text {
    display: none;
  }
}

.stories-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* View Mode Buttons */

.stories-view-modes {
  display: flex;
  gap: var(--space-xs);
  background: var(--ffvr-surface-sunken, var(--color-bg-secondary));
  padding: var(--space-xs);
  border-radius: var(--radius-lg);
}

.stories-view-mode-btn {
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--ffvr-ink-muted, var(--color-text-light));
  transition: all 0.2s ease;
  white-space: nowrap;
}

.stories-view-mode-btn:hover {
  background: var(--ffvr-surface-raised, var(--color-bg));
  color: var(--ffvr-ink, var(--color-text));
}

.stories-view-mode-btn.active {
  background: var(--ffvr-accent, var(--color-primary));
  color: var(--ffvr-on-accent, white);
}

/* Filters */

.stories-filters {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.stories-filters .select-input {
  min-width: 150px;
}

/* Stories Container */

.stories-container {
  padding: var(--space-lg);
  min-height: 400px;
}

.stories-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  color: var(--color-text-light);
  font-size: var(--font-lg);
}

.stories-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-light);
}

/* Person Filter Pill */

/* Simplified - single dismissible chip with just name */

.stories-person-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  font-size: calc(13px * var(--type-scale));
  margin-bottom: 8px;
}

/* Removed .person-filter-label - no longer used */

.person-filter-name {
  font-weight: 500;
}

.person-filter-clear {
  background: rgba(255,255,255,0.25);
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  font-size: calc(11px * var(--type-scale));
  transition: background 0.2s;
}

.person-filter-clear:hover {
  background: rgba(255,255,255,0.4);
}

/* ============================================================================
   v6.5.1: STORY FILTER PANEL STYLES
   ============================================================================ */

/* Focal Person Indicator (when entering from Family Member Modal) */

.focal-person-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: var(--radius-md);
  color: white;
  font-size: var(--font-sm);
  margin-bottom: var(--space-md);
}

.focal-person-indicator strong {
  font-weight: 600;
}

.focal-person-clear {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  font-size: calc(12px * var(--type-scale));
  transition: background 0.2s;
}

.focal-person-clear:hover {
  background: rgba(255,255,255,0.4);
}

/* Filter Panel Rows */

.filter-panel-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-panel-row-1 {
  margin-bottom: 8px;
}

/* Family Focus Button */

.family-focus-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
}

.family-focus-btn:hover {
  background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
}

.family-focus-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
}

.family-focus-icon {
  font-size: calc(16px * var(--type-scale));
}

.family-focus-label {
  white-space: nowrap;
}

.family-focus-badge {
  background: rgba(255,255,255,0.2);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: calc(11px * var(--type-scale));
}

/* Media Family Focus button in Browse Media header */

.media-family-focus-btn {
  margin-right: 12px;
}

.media-family-focus-badge {
  background: var(--color-primary);
  color: white;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 9px;
  font-size: calc(10px * var(--type-scale));
  font-weight: 600;
}

/* Era and Type Dropdowns */

.filter-select {
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-sm);
  min-height: 44px;
  min-width: 70px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.filter-era {
  min-width: 70px;
}

.filter-type {
  min-width: 80px;
}

/* Search Input */

.filter-search-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.filter-search-icon {
  position: absolute;
  left: 12px;
  font-size: calc(14px * var(--type-scale));
  color: var(--ffvr-ink-muted, var(--color-text-light));
  pointer-events: none;
}

.filter-search-input {
  width: 100%;
  padding: 10px 36px 10px 36px;
  background: var(--ffvr-surface-sunken, var(--color-bg));
  border: 1px solid var(--ffvr-rule, var(--color-border));
  border-radius: var(--radius-md);
  color: var(--ffvr-ink, var(--color-text));
  font-size: var(--font-sm);
  min-height: 44px;
}

.filter-search-input:focus {
  outline: none;
  border-color: var(--ffvr-accent, var(--color-primary));
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.filter-search-input::placeholder {
  color: var(--ffvr-ink-faint, var(--color-text-light));
}

.filter-search-clear {
  position: absolute;
  right: 8px;
  background: var(--ffvr-surface-raised, var(--color-bg-secondary));
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ffvr-ink-muted, var(--color-text-light));
  cursor: pointer;
  font-size: calc(12px * var(--type-scale));
}

.filter-search-clear:hover {
  background: var(--ffvr-surface, var(--color-border));
  color: var(--ffvr-ink, var(--color-text));
}

/* ============================================================================
   v6.5.1: FAMILY FOCUS MODAL STYLES
   ============================================================================ */

.family-focus-modal-overlay {
  position: fixed;
  /* Position within app content area, after sidebar and header */
  top: var(--nav-height);
  left: var(--side-nav-width);
  right: 0;
  bottom: 0;
  background: transparent;  /* No background - modal fills entire area */
  /* z-index 30000 ensures Focus modals ALWAYS appear above all other modals */
  /* This includes Face Training (10003), FM modal (10002), etc. */
  z-index: 30000 !important;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  animation: fadeIn 0.2s ease-out;
}

.family-focus-modal {
  background: var(--color-bg);
  border-radius: 0;  /* No rounded corners - fills entire App Panel */
  /* Full app content area - fills available space completely */
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  box-shadow: none;  /* No shadow since it fills the panel */
  animation: fadeIn 0.2s ease-out;
}

.family-focus-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.family-focus-modal-header h3 {
  margin: 0;
  font-size: var(--font-lg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.family-focus-close {
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: calc(24px * var(--type-scale));
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.family-focus-close:hover {
  color: var(--color-text);
}

.family-focus-done {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}

.family-focus-done:hover {
  opacity: 0.9;
}

/* Include section (Contributor/Tagged checkboxes) */

.family-focus-include-section {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.family-focus-include-label {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  font-weight: 500;
}

.family-focus-include-options {
  display: flex;
  gap: var(--space-lg);
  flex: 1;
}

.family-focus-include-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 0;
}

.family-focus-include-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.family-focus-include-text {
  font-size: var(--font-md);
  color: var(--color-text);
}

/* Action buttons (Select All / Clear All) */

.family-focus-actions {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.family-focus-action-btn {
  flex: 1;
  padding: 8px 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.family-focus-action-btn:hover {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.family-focus-search {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.family-focus-search input {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-md);
}

.family-focus-search input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.family-focus-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) 0;
}

.family-focus-item {
  display: flex;
  align-items: center;
  padding: 12px var(--space-lg);
  cursor: pointer;
  transition: background 0.15s;
}

.family-focus-item:hover {
  background: var(--color-bg-secondary);
}

.family-focus-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s;
  flex-shrink: 0;
}

.family-focus-item.selected .family-focus-checkbox {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
}

.family-focus-name {
  flex: 1;
  font-size: var(--font-md);
}

.family-focus-generation {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  background: var(--color-bg-secondary);
  padding: 2px 8px;
  border-radius: 10px;
}

.family-focus-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.family-focus-clear-all {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-light);
  padding: 8px 16px;
  cursor: pointer;
}

.family-focus-clear-all:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.family-focus-selected-count {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

/* 3-column checkbox grid for Family Focus */

.family-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 8px;
  padding: var(--space-md);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.family-focus-grid-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  font-size: calc(13px * var(--type-scale));
}

.family-focus-grid-item:hover {
  background: var(--color-bg-secondary);
}

.family-focus-grid-item .family-focus-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: calc(12px * var(--type-scale));
  flex-shrink: 0;
  transition: all 0.15s;
}

.family-focus-grid-item.selected .family-focus-checkbox {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
}

.family-focus-grid-item .family-focus-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Focus Group row with edit/delete buttons */

.family-focus-group-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.family-focus-group-edit,

.family-focus-group-delete {
  padding: 8px 10px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: calc(16px * var(--type-scale));
  line-height: 1;
  transition: all 0.15s;
}

.family-focus-group-edit:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: var(--color-primary);
}

.family-focus-group-delete:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #ef4444;
}

.family-focus-group-edit:disabled,

.family-focus-group-delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Tagged/Contributor flags section */

.family-focus-flags-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}

.family-focus-flag {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--font-sm);
}

.family-focus-flag input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* AI button section within modal */

.family-focus-ai-section {
  padding: var(--space-sm) var(--space-md);
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-border);
}

.family-focus-ai-btn {
  width: 100%;
  justify-content: center;
}

/* Candidates section with counts and Create Profile buttons */

.family-focus-candidates-section {
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-top: 1px solid var(--color-border);
}

.candidate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 8px 0;
}

.candidate-row + .candidate-row {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

.candidate-count {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--color-text);
}

.candidate-create-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.candidate-create-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.candidate-create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Footer adjustments */

.family-focus-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.family-focus-actions-inline {
  display: flex;
  gap: 8px;
}

.family-focus-action-btn-sm {
  padding: 6px 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: all 0.15s;
}

.family-focus-action-btn-sm:hover {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.family-focus-cancel-btn {
  padding: 8px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s;
}

.family-focus-cancel-btn:hover {
  background: var(--color-bg-secondary);
}

/* Show All button - clears filter immediately */

.family-focus-show-all-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.family-focus-show-all-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Story Profile button in Family Focus modal */

.family-focus-story-profile-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.family-focus-story-profile-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.family-focus-story-profile-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Focus Group dropdown and save functionality */

.family-focus-group-section {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.family-focus-group-label {
  display: block;
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-xs);
}

.family-focus-group-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-base);
  cursor: pointer;
}

.family-focus-group-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Membership type toggle (Family Only vs Also Show Friends) */

.family-focus-membership-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.family-focus-membership-toggle .toggle-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--color-text);
}

.family-focus-membership-toggle .toggle-option input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.family-focus-membership-toggle .toggle-option span {
  white-space: nowrap;
}

/* Hidden by membership filter */

.family-focus-grid-item.hidden-by-filter {
  display: none !important;
}

.family-focus-footer-buttons {
  display: flex;
  gap: var(--space-sm);
}

.family-focus-save-group-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.family-focus-save-group-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.family-focus-save-group-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Save Focus Group Dialog */

.save-focus-group-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10003;
  animation: fadeIn 0.2s ease-out;
}

.save-focus-group-dialog {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  width: 90%;
  max-width: 400px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease-out;
}

.save-focus-group-dialog h3 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-lg);
  color: var(--color-text);
}

.save-focus-group-dialog p {
  margin: 0 0 var(--space-lg) 0;
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.focus-group-name-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-base);
  margin-bottom: var(--space-md);
  box-sizing: border-box;
}

.focus-group-name-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.focus-group-desc-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-sm);
  margin-bottom: var(--space-lg);
  resize: vertical;
  box-sizing: border-box;
}

.focus-group-desc-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.save-focus-group-buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
}

.save-focus-group-cancel {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-light);
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 500;
}

.save-focus-group-cancel:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.save-focus-group-save {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.save-focus-group-save:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.save-focus-group-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   v6.8.0: STORY PROFILE MODAL
   Drag-to-reorder story ordering for focus groups
   ============================================================================ */

/* Story Profile name input section */

/* Mobile optimizations for Story Profile */

/* ============================================================================
   v7.9.0: MEDIA PROFILE MODAL STYLES
   ============================================================================ */

.media-profile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  /* z-index 30002 ensures Focus modals ALWAYS appear above ALL other modals */
  /* Including Face Training (10003), FM modal (10002), etc. */
  z-index: 30002 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.media-profile-modal {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.media-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.media-profile-header h3 {
  margin: 0;
  font-size: var(--font-lg);
  flex: 1;
  text-align: center;
}

.media-profile-close {
  background: none;
  border: none;
  font-size: calc(24px * var(--type-scale));
  color: var(--color-text-light);
  cursor: pointer;
  padding: 4px 8px;
}

.media-profile-close:hover {
  color: var(--color-text);
}

/* Header actions container for multiple buttons */

.media-profile-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.media-profile-save {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
}

.media-profile-save:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Create Story button in Media Profile modal */

.media-profile-create-story {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.media-profile-create-story:hover {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
  transform: translateY(-1px);
}

.media-profile-create-story:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Full Editor button in Media Profile modal */

.media-profile-full-editor {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.media-profile-full-editor:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

/* Name input section */

.media-profile-name-section {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.media-profile-name-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-md);
}

.media-profile-name-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.media-profile-focus-label {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.media-profile-hint {
  padding: var(--space-sm) var(--space-lg);
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-text-light);
  background: var(--color-bg-alt);
}

.media-profile-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.media-profile-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: all 0.15s ease;
}

.media-profile-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.media-profile-item.dragging {
  opacity: 0.5;
  border-style: dashed;
  border-color: var(--color-primary);
}

.media-profile-drag-handle {
  color: var(--color-text-light);
  font-size: calc(16px * var(--type-scale));
  cursor: grab;
}

.media-profile-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  font-size: var(--font-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.media-profile-info {
  flex: 1;
  min-width: 0;
}

/* Remove button for individual media items */

.media-profile-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--type-scale));
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}

.media-profile-item:hover .media-profile-remove {
  opacity: 1;
}

.media-profile-remove:hover {
  background: var(--color-error);
  color: white;
}

.media-profile-title {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-profile-type {
  display: block;
  font-size: var(--font-xs);
  color: var(--color-text-light);
}

.media-profile-empty {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--space-xl);
}

.media-profile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
  gap: var(--space-sm);
}

.media-profile-clear {
  background: none;
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.media-profile-clear:hover {
  background: var(--color-error);
  color: white;
}

.media-profile-cancel {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-left: auto;
}

.media-profile-cancel:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Media Profile button in Family Focus modal */

.family-focus-media-profile-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.family-focus-media-profile-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.family-focus-media-profile-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   MEDIA PROFILES MODAL (Full redesign)
   ============================================================================ */

.mp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 30002 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  padding-top: 8vh;
}

.mp-modal {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.mp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.mp-modal-header h3 {
  margin: 0;
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
}

.mp-modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: calc(16px * var(--type-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.mp-modal-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.mp-modal-toolbar {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
}

.mp-search-box {
  flex: 1;
}

.mp-search-box input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
}

.mp-search-box input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.mp-ai-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  color: white;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-sm);
  white-space: nowrap;
  transition: all 0.2s;
}

.mp-ai-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.mp-profiles-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.mp-profile-card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background: var(--color-bg);
  transition: all 0.2s;
  overflow: hidden;
}

.mp-profile-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.mp-profile-card.mp-active {
  border-color: var(--color-primary);
  background: rgba(102, 126, 234, 0.06);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.mp-profile-card.mp-all-media {
  background: var(--color-bg-secondary);
}

.mp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
}

.mp-card-name {
  font-weight: 600;
  font-size: calc(0.95rem * var(--type-scale));
  color: var(--color-text);
}

.mp-card-count {
  font-size: calc(0.8rem * var(--type-scale));
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  padding: 2px 8px;
  border-radius: 10px;
}

.mp-card-context {
  padding: 0 14px 8px;
}

.mp-context-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: calc(0.85rem * var(--type-scale));
  background: var(--color-bg-secondary);
  color: var(--color-text);
  resize: vertical;
  min-height: 36px;
  max-height: 100px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.mp-context-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.mp-context-input::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}

.mp-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 10px;
}

.mp-card-date {
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-muted);
}

.mp-card-actions {
  display: flex;
  gap: 6px;
}

.mp-action-btn {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: calc(0.8rem * var(--type-scale));
  transition: all 0.15s;
}

.mp-action-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

.mp-action-btn.mp-delete-btn:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.mp-empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--color-text-muted);
}

.mp-empty-state p {
  margin: 8px 0;
}

@media (max-width: 600px) {
  .mp-modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-md);
  }

  .mp-modal-toolbar {
    flex-direction: column;
  }

  .mp-ai-btn {
    width: 100%;
    text-align: center;
  }
}

/* Profile Dropdown in header */

.profile-dropdown-container {
  display: flex;
  align-items: center;
  margin-right: var(--space-sm);
}

.profile-dropdown {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: var(--font-sm);
  cursor: pointer;
  min-width: 150px;
  max-width: 200px;
}

.profile-dropdown:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Custom Profile Dropdown with edit/delete icons */

.profile-dropdown-container {
  position: relative;
}

.profile-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--ffvr-rule, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--ffvr-surface-raised, var(--color-bg));
  font-size: var(--font-sm);
  cursor: pointer;
  min-width: 180px;  /* Increased from 140px for longer profile names */
  max-width: 280px;  /* Increased from 200px */
  color: var(--ffvr-ink, var(--color-text));
}

.profile-dropdown-trigger:hover {
  background: var(--ffvr-surface, var(--color-bg-secondary));
  border-color: var(--ffvr-accent, var(--color-primary));
}

.profile-dropdown-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-dropdown-arrow {
  font-size: calc(10px * var(--type-scale));
  opacity: 0.6;
}

.profile-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 300px;  /* Increased from 220px for longer profile names + actions */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 400px;  /* Increased from 300px */
  overflow-y: auto;
  margin-top: 4px;
}

.profile-dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.15s;
}

.profile-dropdown-item:last-child {
  border-bottom: none;
}

.profile-dropdown-item:hover {
  background: var(--color-bg-secondary);
}

.profile-dropdown-item.selected {
  background: var(--color-primary-light);
}

.profile-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-sm);
}

.profile-item-actions {
  display: flex;
  gap: 4px;
  margin-left: 8px;
  opacity: 0.7;  /* Always visible (was 0), slightly muted */
  transition: opacity 0.15s;
  flex-shrink: 0;  /* Don't shrink action buttons */
}

.profile-dropdown-item:hover .profile-item-actions {
  opacity: 1;
}

.profile-action-btn {
  padding: 4px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: calc(14px * var(--type-scale));
  line-height: 1;
  transition: background 0.15s;
}

.profile-action-btn:hover {
  background: var(--color-bg-tertiary);
}

.profile-edit-btn:hover {
  background: rgba(59, 130, 246, 0.2);
}

.profile-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Story Profile Item Remove button (in edit modal) */

/* Story Profile Item Preview button */

/* Story Preview Modal */

/* Media Profile Item Preview button */

.media-profile-preview {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: calc(16px * var(--type-scale));
  transition: all 0.15s;
  margin-right: 4px;
}

.media-profile-preview:hover {
  background: rgba(102, 126, 234, 0.2);
  color: var(--color-primary);
}

/* Media Preview Modal */

.media-preview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

.media-preview-modal {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 450px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease-out;
}

.media-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.media-preview-header h3 {
  margin: 0;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 10px;
}

.media-preview-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: calc(0.9rem * var(--type-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.media-preview-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.media-preview-content {
  padding: 16px;
}

.media-preview-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  background: #f3f4f6;
  margin-bottom: 12px;
}

.media-preview-placeholder {
  background: #f3f4f6;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
  font-size: calc(24px * var(--type-scale));
  margin-bottom: 12px;
}

.media-preview-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.media-preview-date {
  background: #f3f4f6;
  color: #6b7280;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: calc(12px * var(--type-scale));
}

.media-preview-type {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: calc(12px * var(--type-scale));
  text-transform: capitalize;
}

.media-preview-tags {
  color: #6b7280;
  font-size: calc(13px * var(--type-scale));
}

.media-preview-tags strong {
  color: #374151;
}

.media-preview-footer {
  padding: 14px 16px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.media-preview-open {
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.media-preview-open:hover {
  opacity: 0.9;
}

/* Mobile optimizations for Media Profile */

@media (max-width: 768px) {
  .media-profile-modal {
    width: 95%;
    max-height: 85vh;
  }

  .media-profile-item {
    padding: var(--space-sm) var(--space-md);
  }

  .media-profile-drag-handle {
    font-size: calc(20px * var(--type-scale));
    padding: 4px;
  }

  .profile-dropdown {
    min-width: 120px;
    padding: 6px 10px;
    font-size: var(--font-xs);
  }

  /* Mobile optimizations for custom dropdown */
  .profile-dropdown-trigger {
    min-width: 100px;
    max-width: 150px;
    padding: 6px 10px;
    font-size: var(--font-xs);
  }

  .profile-dropdown-menu {
    min-width: 180px;
  }

  .profile-item-actions {
    opacity: 1; /* Always show on mobile (no hover) */
  }

  .profile-action-btn {
    padding: 6px 8px;
    font-size: calc(16px * var(--type-scale));
  }
}

/* ============================================================================
   v6.5.1: RESPONSIVE STYLES FOR FILTER PANEL
   ============================================================================ */

/* Desktop: Single row layout */

/* iPhone: Two row layout */

/* Never-Empty Stories View */

.stories-never-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.stories-create-cta {
  background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  color: white;
}

/* Compact version - 50% shorter */

.stories-create-cta-compact {
  padding: var(--space-md) var(--space-lg);
}

.stories-create-cta-compact .stories-create-cta-icon {
  font-size: calc(32px * var(--type-scale));
  margin-bottom: var(--space-xs);
}

.stories-create-cta-compact h3 {
  font-size: var(--font-lg);
  margin-bottom: var(--space-xs);
}

.stories-create-cta-compact p {
  font-size: var(--font-sm);
  margin-bottom: var(--space-sm);
}

.stories-create-cta-icon {
  font-size: calc(48px * var(--type-scale));
  margin-bottom: var(--space-md);
}

.stories-create-cta h3 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-xl);
}

.stories-create-cta p {
  margin: 0 0 var(--space-lg) 0;
  opacity: 0.8;
}

.stories-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: var(--font-md);
}

.stories-section {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.stories-section-header {
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-bottom: 1px solid var(--color-border);
}

.stories-section-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-lg);
}

.stories-section-header .section-icon {
  font-size: var(--font-xl);
}

.stories-section-subtitle {
  margin: 4px 0 0 0;
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.stories-section-cards {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stories-welcome {
  text-align: center;
  padding: var(--space-2xl);
  background: linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%);
  border-radius: var(--radius-lg);
  color: white;
}

.stories-welcome-icon {
  font-size: calc(64px * var(--type-scale));
  margin-bottom: var(--space-lg);
}

.stories-welcome h2 {
  margin: 0 0 var(--space-md) 0;
}

.stories-welcome p {
  opacity: 0.8;
  margin: 0 0 var(--space-xl) 0;
}

/* Timeline Mode */

.stories-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================================================================
   INTRODUCTORY STORIES BANNER
   Shown to new users at top of Stories view until dismissed
   ============================================================================ */

.stories-intro-banner {
  position: relative;
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  background: linear-gradient(135deg, #1a365d 0%, #2d3748 50%, #1a202c 100%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  overflow: hidden;
}

.stories-intro-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L35 15H25L30 5z' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.stories-intro-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.stories-intro-dismiss:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.stories-intro-header {
  text-align: center;
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.stories-intro-icon {
  margin-bottom: var(--space-sm);
}

.intro-icon-tree {
  font-size: calc(2.5rem * var(--type-scale));
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.stories-intro-header h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-2xl);
  font-weight: 700;
  background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stories-intro-subtitle {
  margin: 0;
  font-size: var(--font-base);
  color: rgba(255, 255, 255, 0.8);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.5;
}

.stories-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.stories-intro-card {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  gap: var(--space-sm);
}

.stories-intro-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.stories-intro-card.featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
  border-color: rgba(102, 126, 234, 0.4);
}

.stories-intro-card.featured:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.4) 100%);
}

.intro-card-badge {
  position: absolute;
  top: -8px;
  left: 16px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  font-size: calc(0.65rem * var(--type-scale));
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

.intro-card-icon {
  font-size: calc(1.75rem * var(--type-scale));
  flex-shrink: 0;
}

.intro-card-content {
  flex: 1;
  min-width: 0;
}

.intro-card-content h4 {
  margin: 0 0 4px;
  font-size: var(--font-base);
  font-weight: 600;
  color: white;
}

.intro-card-content p {
  margin: 0;
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.intro-card-links {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.intro-link {
  color: #93c5fd;
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.intro-link:hover {
  color: #bfdbfe;
  text-decoration: underline;
}

.intro-link-divider {
  color: rgba(255, 255, 255, 0.3);
}

.stories-intro-contribute {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.intro-contribute-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.intro-contribute-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.intro-contribute-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.intro-contribute-text strong {
  color: white;
  font-size: var(--font-sm);
}

.intro-contribute-text span {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-xs);
}

.intro-contribute-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.intro-contribute-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.stories-intro-explore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.stories-intro-explore:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Mobile responsive */

@media (max-width: 480px) {
  .stories-intro-banner {
    padding: var(--space-md);
  }

  .stories-intro-header h2 {
    font-size: var(--font-xl);
  }

  .stories-intro-subtitle {
    font-size: var(--font-sm);
  }

  .stories-intro-grid {
    grid-template-columns: 1fr;
  }

  .stories-intro-card.featured {
    grid-column: 1;
  }

  .stories-intro-contribute {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  .intro-contribute-content {
    flex-direction: column;
    text-align: center;
  }
}

/* Narratives Mode */

.stories-narratives {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Collection header styles for Spielberg emotional arcs */

.collection-header-main {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.collection-subtitle {
  margin: 4px 0 0;
  font-size: var(--font-sm);
  opacity: 0.8;
  font-style: italic;
}

/* Collection-specific header colors */

/* Gallery Mode */

.stories-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
}

/* Story History View */

.stories-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stories-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
}

.stories-history-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.stories-history-title h3 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--color-text);
}

.stories-history-count {
  padding: 2px 8px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 600;
}

.stories-history-filters {
  display: flex;
  gap: var(--space-xs);
}

.stories-history-filter-btn {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-light);
  cursor: pointer;
  font-size: var(--font-sm);
  transition: all 0.2s ease;
}

.stories-history-filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.stories-history-filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.stories-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.stories-history-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-light);
}

.stories-history-empty-icon {
  font-size: calc(48px * var(--type-scale));
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

/* Mobile responsive for Story History */

/* Story Card */

.persons-label {
  font-weight: 500;
}

/* Training Story Card Styling */

.training-story-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: calc(11px * var(--type-scale));
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
  z-index: 1;
}

/* Draft story badge */

.draft-story-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: calc(11px * var(--type-scale));
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  z-index: 1;
}

/* Story Card Play Button */

/* Chapter Detail View */

/* Create Story Card - dark theme to match story cards */

/* Story Detail Modal */

/* Raised z-index from 1000 to 9998 to prevent modals opening behind it */

.btn-close-story-modal {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
}

/* .btn-close-story-modal:hover handled by .ffa-exit-btn */

/* Watch Full Video Button */

.btn-watch-full-video {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(135deg, var(--color-primary), #4f46e5);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--font-md);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.btn-watch-full-video:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}

.btn-watch-full-video:active {
  transform: translateY(0);
}

/* Full Story Video Player Modal */

/* Desktop - contained within app area. Mobile - true fullscreen */

#fullStoryVideoPlayer {
  position: fixed;
  /* Desktop: Respect app frame boundaries */
  top: var(--nav-height);
  left: var(--side-nav-width);
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Mobile: True fullscreen */

@media (max-width: 768px) {
  #fullStoryVideoPlayer {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

#fullStoryVideoPlayer .video-player-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: calc(1.5rem * var(--type-scale));
  cursor: pointer;
  z-index: 10001;
}

#fullStoryVideoPlayer video {
  max-width: 95%;
  max-height: 85%;
  border-radius: var(--radius-md);
}

/* Mobile: Larger video area */

@media (max-width: 768px) {
  #fullStoryVideoPlayer video {
    max-width: 100%;
    max-height: 90%;
  }
}

/* Story Media Gallery */

/* Story Photo Lightbox */

/* Story Gallery Modal */

/* Gallery Load More Button */

/* Event Photo Gallery Modal */

.event-photo-gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
}

.event-photo-gallery-modal.active {
  display: block;
}

.event-gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
}

.event-gallery-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.event-gallery-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: calc(1.5rem * var(--type-scale));
  cursor: pointer;
  z-index: 10001;
}

.event-gallery-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-height: 70vh;
}

.event-gallery-nav {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: calc(2rem * var(--type-scale));
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.event-gallery-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.event-gallery-image-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 var(--space-md);
  max-height: 100%;
}

.event-gallery-image-container img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.event-gallery-counter {
  color: white;
  font-size: var(--font-md);
  margin: var(--space-md) 0;
}

.event-gallery-thumbnails {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: var(--space-sm);
  max-width: 100%;
}

.event-gallery-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
}

.event-gallery-thumb:hover {
  opacity: 0.8;
}

.event-gallery-thumb.active {
  opacity: 1;
  border-color: white;
}

/* Mobile adjustments for gallery */

@media (max-width: 767px) {
  .event-gallery-nav {
    width: 40px;
    height: 40px;
    font-size: calc(1.5rem * var(--type-scale));
  }

  .event-gallery-thumb {
    width: 50px;
    height: 50px;
  }
}

/* Watch hint under Watch Full Video button */

.watch-hint {
  margin-top: var(--space-sm);
  font-size: var(--font-xs);
  color: var(--color-text-light);
}

.story-modal-description,

.story-modal-persons,

.story-modal-description h3,

.story-modal-persons h3,

/* Chapter content containers (narrative + media wrapper) */

/* Chapter narrative text - the primary content */

/* Blockquote styling for direct family quotes */

/* Narration master toggle bar */

/* iOS-style toggle switch */

/* Chapter subtitle in header */

/* Custom narration player */

/* Minimal narration play/stop toggle */

/* Narration section wraps waveform + full player */

/* Waveform in chapter header bar — right-aligned, visible even when collapsed */

.header-waveform {
  margin: 0 8px 0 auto;
  padding: 8px 4px;
  flex-shrink: 0;
}

/* Waveform indicator — animated bars showing narration playback */

.waveform-bar {
  width: 3px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 1px;
  transition: height 0.2s ease;
}

@keyframes waveform-pulse {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* Narration complete state — static bars with green tint */

/* ─── Welcome Narrative Card (.wn-*) ──────────────────────── */

.wn-narrative-card {
  margin: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(102, 126, 234, 0.3);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.wn-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 0;
}

.wn-avatar {
  font-size: calc(28px * var(--type-scale));
  flex-shrink: 0;
}

.wn-title {
  font-size: calc(15px * var(--type-scale));
  font-weight: 600;
  color: #e2e8f0;
}

.wn-subtitle {
  font-size: calc(12px * var(--type-scale));
  color: rgba(226, 232, 240, 0.6);
  margin-top: 2px;
}

.wn-script {
  padding: 14px 16px;
  font-size: calc(14px * var(--type-scale));
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.75);
  max-height: 180px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.wn-sentence {
  transition: color 0.3s ease, opacity 0.3s ease;
}

.wn-sentence.wn-active {
  color: #fff;
  font-weight: 500;
}

.wn-sentence.wn-past {
  color: rgba(226, 232, 240, 0.45);
}

/* ── The About-control spotlight ────────────────────────────────────────────
   Applied to the Control Panel's About item by the welcome RAF loop for the
   seconds in which Fergi says "You will find the control for the About story
   in the Control Panel on the left side of the display." The member's eye is
   already travelling left; this tells it where to stop.

   Amber, and amber alone. The Control Panel's own colour vocabulary assigns a
   hue per group (info/family/media/…); a spotlight in any of those would read
   as "this item changed category". Amber is used nowhere in the rail, so it
   can only mean "here, now" — and it is gone the moment the sentence is.

   ⛔ IT MUST LIGHT THE TILE, NOT DRAW A BOX BEHIND IT (Joe, 2026-08-20 walk:
   "the highlight seems to be at a layer below the control"). The first cut set
   a plain `background` on `.menu-item.wn-cp-spotlight` (0,2,0) and an OUTER
   `box-shadow` ring. Both were wrong for this rail:

     * `.side-nav .menu-item.ffvl-dressed` (launcher-visual.css, 0,3,0, and
       attached by the overlay AFTER styles.css so it also wins ties) paints
       `background` + `border` + `box-shadow: none` itself. The fill lost
       outright; only the keyframed shadow survived, because an animation beats
       a normal declaration.
     * An outer `0 0 0 Npx` ring sits OUTSIDE the border box, so it read as a
       loose outline floating on the rail behind the tile — exactly the "layer
       below" Joe saw.

   So: `!important` on every property the dressed rail also claims, and the
   ring is INSET — it hugs the tile's own edge, and the amber wash composites
   OVER the room colour rather than replacing it, which keeps the light label
   text readable and the illustrated glyph unmuddied. */
@keyframes wnCpSpotlightPulse {
  0%, 100% {
    box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.90),
                0 0 16px 3px rgba(251, 191, 36, 0.40);
  }
  50% {
    box-shadow: inset 0 0 0 3px rgba(251, 191, 36, 1),
                0 0 30px 9px rgba(251, 191, 36, 0.68);
  }
}

.side-nav .menu-item.wn-cp-spotlight,
.side-nav .menu-item.ffvl-dressed.wn-cp-spotlight {
  position: relative;
  z-index: 3;
  border-radius: 10px;
  /* Amber laid OVER whatever the tile already is — a flat amber fill would
     erase the room colour and strand the light label on a pale ground. */
  background: linear-gradient(rgba(251, 191, 36, 0.42), rgba(251, 191, 36, 0.28)),
              var(--ffvl-bg-default, rgba(15, 23, 42, 0.92)) !important;
  border-color: rgba(251, 191, 36, 0.95) !important;
  /* !important: the dressed rail declares `transform: none` at (0,3,0) and its
     stylesheet is attached AFTER styles.css, so it wins every tie. */
  transform: scale(1.035) !important;
  transform-origin: left center;
  animation: wnCpSpotlightPulse 1.5s ease-in-out infinite;
  transition: background 0.25s ease, transform 0.25s ease;
  /* box-shadow is NON-COMPOSITABLE: every pulse frame re-rasters, and without
     a layer of its own that re-raster paints into #document — the
     repaint-storm class the `containing-repaint-firehose` train closed, and
     what CHECK 15 fails on. `will-change` promotes the tile so the pulse
     repaints only itself. Purely a compositing hint: it changes nothing about
     how the spotlight looks, which is what §339 spent two versions getting
     right. Shipped with v1.1.118 because v1.1.117 reached production without
     this check running. */
  will-change: box-shadow, transform;
}

.side-nav .menu-item.wn-cp-spotlight .menu-label,
.side-nav .menu-item.wn-cp-spotlight .launcher-caption {
  color: #fde68a !important;   /* beats .menu-item-ai's own `color: white !important` */
  font-weight: 700;
}

/* The pulse is an attention cue, not a requirement. Members who ask the OS for
   less motion still get the ring — held steady. */
@media (prefers-reduced-motion: reduce) {
  .side-nav .menu-item.wn-cp-spotlight,
  .side-nav .menu-item.ffvl-dressed.wn-cp-spotlight {
    animation: none;
    transform: none !important;
    box-shadow: inset 0 0 0 3px rgba(251, 191, 36, 0.95),
                0 0 22px 5px rgba(251, 191, 36, 0.50) !important;
  }
}

.wn-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 12px;
}

.wn-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: calc(16px * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.wn-play-btn:active { transform: scale(0.92); }

.wn-progress-wrap {
  flex: 1;
  height: 30px;
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

.wn-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.wn-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.15s linear;
}

.wn-time {
  font-size: calc(12px * var(--type-scale));
  color: rgba(226, 232, 240, 0.6);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Recitation speed chip (1× / 1.2× / 1.5×) — Joe directive, Mary-walk /listen 2026-08-19 */
.wn-speed-btn {
  font-size: calc(11px * var(--type-scale));
  color: rgba(226, 232, 240, 0.75);
  background: rgba(226, 232, 240, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.22);
  border-radius: 999px;
  padding: 2px 9px;
  min-width: 42px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease, color 0.15s ease;
}
.wn-speed-btn:hover { background: rgba(226, 232, 240, 0.16); color: rgba(226, 232, 240, 0.95); }
.wn-speed-btn:active { transform: scale(0.94); }

.wn-waveform {
  display: none;
  gap: 3px;
  align-items: center;
  height: 20px;
}

.wn-waveform .waveform-bar {
  width: 3px;
  height: 16px;
}

.wn-skip-btn {
  display: block;
  width: 100%;
  padding: 14px 10px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: rgba(226, 232, 240, 0.5);
  font-size: calc(13px * var(--type-scale));
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.wn-skip-btn:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
}

/* Post-welcome orientation actions */

.wn-orientation-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.wn-action-btn {
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  font-size: calc(14px * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.wn-action-btn:active { transform: scale(0.95); }

.wn-action-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

.wn-action-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wn-action-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-height: 600px) {
  .wn-script { max-height: 120px; }
}

/* ── Welcome landing takeover (S8, desktop vessel) ─────────────────
   While the vessel hosts the welcome card the gateway steps it to the
   full-panel rung; the card flexes to the messages viewport so the FULL
   script lands visible — header + player + Skip pinned, internal scroll
   only as overflow safety. Mobile keeps its compact clipped card. */
body.fv-active .unified-ai-messages:has(> .wn-narrative-card:not(.wn-card-yielded)) {
  overflow: hidden;
}

body.fv-active .unified-ai-messages > .wn-narrative-card:not(.wn-card-yielded) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.fv-active .wn-narrative-card .wn-header,
body.fv-active .wn-narrative-card .wn-player,
body.fv-active .wn-narrative-card .wn-skip-btn {
  flex-shrink: 0;
}

/* The welcome is a gateway, not a chat state — while the card is up the
   composer row rests so the script owns the page; the player and Skip are
   the gateway's interactions. Orientation (post-dismiss) restores chat. */
body.fv-active .unified-ai-conversation-panel:has(.wn-narrative-card:not(.wn-card-yielded)) .unified-ai-input-area {
  display: none;
}

/* A generous reading measure at takeover width — the script column centers
   and breathes; the player centers under it so the card reads as one page. */
body.fv-active .wn-narrative-card .wn-script {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  width: 100%;
  max-width: 76ch;
  margin: 0 auto;
  padding: 18px 26px;
  font-size: calc(15.5px * var(--type-scale));
  line-height: 1.8;
}

body.fv-active .wn-narrative-card .wn-player {
  width: 100%;
  max-width: 76ch;
  margin: 0 auto;
}

/* The header joins the same column so the card reads as one page. */
body.fv-active .wn-narrative-card .wn-header {
  width: 100%;
  max-width: 76ch;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── The card yields the page to a conversation (answering-spoken-asks S2) ──
   Joe, 2026-09-23: Say It in the Fergi AI modal is a chat turn — including during the
   greeting. A spoken question adds `wn-card-yielded` (_wnYieldCardToConversation): every
   takeover rule above and in the pocket block below is scoped to a card WITHOUT it, so the
   messages viewport scrolls again and the composer comes back. The card stays, compact — its
   player (▶ still resumes the greeting) and Skip, with a short scrolling window on the script
   that keeps the reading highlight — so the answer below it is what fills the screen.
   `body.fv-active` is repeated because the desktop takeover's script rule carries it. */
.unified-ai-messages > .wn-narrative-card.wn-card-yielded,
body.fv-active .unified-ai-messages > .wn-narrative-card.wn-card-yielded {
  flex: none;
  margin-bottom: 12px;
}

.wn-narrative-card.wn-card-yielded .wn-header,
body.fv-active .wn-narrative-card.wn-card-yielded .wn-header {
  display: none;
}

.wn-narrative-card.wn-card-yielded .wn-script,
body.fv-active .wn-narrative-card.wn-card-yielded .wn-script {
  flex: none;
  max-height: 5.4em;
  overflow-y: auto;
  padding-top: 10px;
  padding-bottom: 6px;
}

/* ── Pocket voice — the greeting card owns the sheet (perfecting-pocket-arrival S2) ──
   Gate vocabulary is the canon isPocket pair (AT-9): portrait mobile OR pocket
   landscape — pointer:coarse keeps a short desktop window out, so neither gate
   can match a fine-pointer desktop and the desktop greeting is untouched by
   construction. The welcome-open path lands in the plain modal (the tab-bar's
   MobileAISheet chrome is not on this rail), so these rules are the card's own
   pocket presentation: the fv-active gateway law in pocket form — the card owns
   the messages viewport, header + player + Skip pinned, only the script
   scrolls, and the composer rests while the greeting is the page. */
@media (max-width: 767px), (orientation: landscape) and (max-height: 480px) and (pointer: coarse) {
  /* !important: mobile.css declares the messages area's overflow/flex with
     !important at lower specificity; the card takeover must win that tie. */
  .unified-ai-messages:has(> .wn-narrative-card:not(.wn-card-yielded)) {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .unified-ai-messages > .wn-narrative-card:not(.wn-card-yielded) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* The welcome is a gateway, not a chat state — same law as the desktop
     takeover: while the card is up the composer rests. */
  .unified-ai-conversation-panel:has(.wn-narrative-card:not(.wn-card-yielded)) .unified-ai-input-area {
    display: none !important;
  }

  .wn-narrative-card .wn-header {
    flex-shrink: 0;
    padding: 14px 16px 0;
  }

  .wn-narrative-card .wn-avatar { font-size: calc(30px * var(--type-scale)); }
  .wn-narrative-card .wn-title { font-size: calc(17px * var(--type-scale)); }
  .wn-narrative-card .wn-subtitle { font-size: calc(13px * var(--type-scale)); }

  .wn-narrative-card .wn-script {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    font-size: calc(17px * var(--type-scale));
    line-height: 1.75;
    padding: 14px 18px;
  }

  .wn-narrative-card .wn-player {
    flex-shrink: 0;
    padding: 10px 16px 12px;
  }

  .wn-narrative-card .wn-play-btn {
    width: 52px;
    height: 52px;
    font-size: calc(19px * var(--type-scale));
  }

  .wn-narrative-card .wn-time { font-size: calc(13px * var(--type-scale)); min-width: 36px; }

  .wn-narrative-card .wn-speed-btn {
    min-height: 32px;
    min-width: 46px;
    font-size: calc(13px * var(--type-scale));
  }

  .wn-narrative-card .wn-skip-btn {
    flex-shrink: 0;
    padding: 15px 10px;
    font-size: calc(15px * var(--type-scale));
  }

  /* Post-dismiss orientation: the action pair stacks full-width at thumb size. */
  .wn-orientation-actions { flex-direction: column; }
  .wn-orientation-actions .wn-action-btn {
    width: 100%;
    min-height: 48px;
    font-size: calc(16px * var(--type-scale));
  }
}

/* Featured media card */

.featured-media-card {
  border: 2px solid #667eea;
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0;
  background: linear-gradient(135deg, #1e1e2e, #141424);
}

/* Video cards are compact — smaller default size */

.featured-video-card {
  max-width: 240px;
  border-width: 1px;
}

.featured-media-label {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 12px;
  font-size: calc(11px * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.featured-media-thumbnail {
  position: relative;
  cursor: pointer;
}

.featured-poster-img {
  width: 100%;
  display: block;
  max-height: 160px;
  object-fit: cover;
}

.featured-poster-video {
  width: 100%;
  display: block;
  max-height: 160px;
  object-fit: cover;
}

.featured-video-expanded {
  max-height: 160px;
  object-fit: cover;
}

.featured-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.85);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18px * var(--type-scale));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Custom video controls overlay */

.video-custom-controls {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-custom-controls.visible {
  opacity: 1;
  pointer-events: auto;
}

.video-ctrl-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}

.video-ctrl-btn:active {
  transform: scale(0.9);
}

/* Video modal — fits inside App Panel (right of sidebar, below header) */

.video-fullscreen-modal {
  position: fixed;
  top: var(--nav-height, 60px);
  left: var(--side-nav-width, 60px);
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-fs-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
}

.video-fs-content {
  position: relative;
  width: 95%;
  max-width: 95%;
  z-index: 1;
}

.video-fs-close {
  position: absolute;
  top: max(8px, var(--ffa-safe-top)); /* P0-4: the fullscreen variant sets the modal to top:0 — the exit must clear the inset */
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: calc(18px * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.video-fs-player {
  width: 100%;
  max-height: calc(100vh - var(--nav-height, 60px) - 40px);
  border-radius: 8px;
  background: #000;
}

/* Mobile: video modal takes full width (no sidebar) */

@media (max-width: 768px) {
  .video-fullscreen-modal {
    left: 0;
    top: 0;
  }
  .video-fs-player {
    max-height: calc(100vh - 40px);
    border-radius: 0;
  }
}

/* ── Chapter Video Player (large initial size, expandable to full App Panel) ── */

/* App Panel expanded state — fills the main content area */

/* Mobile: App Panel expand takes full viewport */

/* Auto-playing decoration videos */

.decoration-video-autoplay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.decoration-video-thumb {
  position: relative;
  overflow: hidden;
}

/* Inline PDF viewer — fits inside App Panel */

.pdf-inline-viewer {
  position: fixed;
  top: var(--nav-height, 60px);
  left: var(--side-nav-width, 60px);
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.pdf-inline-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.pdf-inline-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #f8fafc;
}

.pdf-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  flex-shrink: 0;
}

.pdf-inline-title {
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 12px;
}

.pdf-inline-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: calc(16px * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pdf-inline-frame {
  flex: 1;
  width: 100%;
  border: none;
}

@media (max-width: 768px) {
  .pdf-inline-viewer {
    left: 0;
    top: 0;
  }
}

.featured-audio-wrap {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.featured-audio-title {
  color: #e5e7eb;
  font-size: calc(14px * var(--type-scale));
  font-weight: 500;
}

.featured-audio {
  width: 100%;
  height: 36px;
}

.featured-image-wrap {
  padding: 8px;
}

.featured-image {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
}

.featured-doc-wrap {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.featured-doc-icon {
  font-size: calc(32px * var(--type-scale));
}

.featured-doc-title {
  color: #e5e7eb;
  font-size: calc(14px * var(--type-scale));
}

.featured-caption {
  padding: 8px 12px;
  color: #9ca3af;
  font-size: calc(12px * var(--type-scale));
  font-style: italic;
}

/* Decoration videos — compact thumbnail row */

.decoration-videos-section {
  margin-top: 12px;
}

.decoration-videos-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.decoration-video-thumb {
  position: relative;
  width: 100px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #1e293b;
  flex-shrink: 0;
}

.decoration-video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.decoration-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--type-scale));
  pointer-events: none;
}

.btn-show-more-videos {
  display: block;
  margin: 8px 0;
  padding: 6px 16px;
  background: transparent;
  color: #667eea;
  border: 1px solid #667eea;
  border-radius: 6px;
  cursor: pointer;
  font-size: calc(12px * var(--type-scale));
}

/* Archive audio clips in chapters */

.archive-audio-clip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.clip-voice-label {
  font-size: calc(11px * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.clip-title {
  font-size: calc(12px * var(--type-scale));
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.clip-audio {
  height: 32px;
  flex-shrink: 0;
  width: 180px;
  min-width: 140px;
}

/* Chapter media containers */

.chapter-media-loading,

/* Infographic video styles */

.infographic-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.infographic-icon {
  font-size: 1.2em;
}

.infographic-player {
  border: 1px solid rgba(102, 126, 234, 0.3);
}

/* Infographic badge on chapter items */

.infographic-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-sm);
  padding: 2px 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: calc(10px * var(--type-scale));
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================================================
   v7.19.0: Training Infographics Player System
   Animated visual overlays synchronized to audio narration
   ============================================================================ */

/* Main infographic player container */

.infographic-player-container {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Visual layer - displays animated infographics */

.infographic-visual-layer {
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .infographic-visual-layer {
    min-height: 400px;
    padding: var(--space-xl);
  }
}

.infographic-content-area {
  width: 100%;
  max-width: 600px;
  color: white;
  text-align: center;
}

/* Hide the native audio player - we use custom controls */

.infographic-audio {
  display: none;
}

/* Custom controls bar */

.infographic-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

.infographic-play-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-sm);
  transition: all 0.2s ease;
}

.infographic-play-btn:hover {
  background: var(--color-primary-dark, #5a6fd6);
  transform: scale(1.05);
}

.infographic-play-btn:active {
  transform: scale(0.98);
}

.infographic-progress {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.infographic-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), #764ba2);
  border-radius: 3px;
  transition: width 0.1s linear;
}

.infographic-time {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.8);
  font-family: monospace;
  min-width: 80px;
  text-align: right;
}

/* ============================================================================
   Infographic Segment Base Styles
   ============================================================================ */

.infographic-segment {
  width: 100%;
}

.segment-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.segment-header h3 {
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.segment-icon {
  font-size: calc(2rem * var(--type-scale));
}

/* Animation base class */

.infographic-item {
  opacity: 0;
  transform: translateY(20px);
}

.infographic-item.animate-in {
  animation: infographicFadeIn 0.5s ease forwards;
}

@keyframes infographicFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   Title Card
   ============================================================================ */

.infographic-segment.title-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.title-icon {
  font-size: calc(4rem * var(--type-scale));
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.title-main {
  font-size: calc(1.8rem * var(--type-scale));
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .title-main {
    font-size: calc(2.2rem * var(--type-scale));
  }
}

.title-subtitle {
  font-size: calc(1.1rem * var(--type-scale));
  opacity: 0.9;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   Stats Reveal
   ============================================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
}

.stat-icon {
  font-size: calc(2rem * var(--type-scale));
}

.stat-value {
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 800;
}

.stat-label {
  font-size: calc(0.85rem * var(--type-scale));
  opacity: 0.8;
}

/* ============================================================================
   Feature List
   ============================================================================ */

.feature-items {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.feature-item {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  font-size: calc(1.1rem * var(--type-scale));
  backdrop-filter: blur(5px);
}

/* ============================================================================
   Generations Flow
   ============================================================================ */

.generation-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.generation-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  min-width: 100px;
}

.gen-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.gen-name {
  font-weight: 600;
  font-size: calc(0.9rem * var(--type-scale));
}

.gen-era {
  font-size: calc(0.75rem * var(--type-scale));
  opacity: 0.7;
}

.gen-arrow {
  font-size: calc(1.5rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================================
   Call to Action
   ============================================================================ */

.infographic-segment.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.cta-icon {
  font-size: calc(4rem * var(--type-scale));
}

.cta-title {
  font-size: calc(1.8rem * var(--type-scale));
  font-weight: 800;
  margin: 0;
}

.cta-subtitle {
  font-size: calc(1.1rem * var(--type-scale));
  opacity: 0.9;
  margin: 0;
}

.cta-button {
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.4);
  margin-top: var(--space-sm);
}

/* ============================================================================
   Tip Card
   ============================================================================ */

.infographic-segment.tip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.tip-icon {
  font-size: calc(3rem * var(--type-scale));
}

.tip-title {
  font-size: calc(1.3rem * var(--type-scale));
  font-weight: 700;
  margin: 0;
}

.tip-content {
  font-size: calc(1.1rem * var(--type-scale));
  margin: 0;
  line-height: 1.5;
  opacity: 0.95;
}

/* ============================================================================
   Tree Diagram
   ============================================================================ */

.tree-description {
  font-size: calc(1rem * var(--type-scale));
  opacity: 0.9;
  margin-bottom: var(--space-md);
}

.tree-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.tree-node {
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

/* ============================================================================
   Feature Highlight
   ============================================================================ */

.highlight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-size: calc(1rem * var(--type-scale));
}

.highlight-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: calc(0.8rem * var(--type-scale));
}

/* ============================================================================
   Profile Preview
   ============================================================================ */

.profile-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.profile-section-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
}

.section-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.section-name {
  font-weight: 600;
  font-size: calc(0.95rem * var(--type-scale));
}

.section-desc {
  font-size: calc(0.8rem * var(--type-scale));
  opacity: 0.75;
}

/* ============================================================================
   Media Stats
   ============================================================================ */

.media-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.media-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
}

.media-stat-icon {
  font-size: calc(1.8rem * var(--type-scale));
}

.media-stat-value {
  font-size: calc(1.4rem * var(--type-scale));
  font-weight: 800;
}

.media-stat-label {
  font-size: calc(0.85rem * var(--type-scale));
  opacity: 0.8;
}

/* ============================================================================
   Timeline
   ============================================================================ */

.timeline-range {
  font-size: calc(1.3rem * var(--type-scale));
  font-weight: 700;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  display: inline-block;
}

.timeline-items {
  text-align: left;
  padding-left: var(--space-md);
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  margin-left: var(--space-md);
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: calc(0.95rem * var(--type-scale));
}

.timeline-dot {
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  margin-left: -22px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* ============================================================================
   Search Demo
   ============================================================================ */

.search-description {
  font-size: calc(1rem * var(--type-scale));
  opacity: 0.9;
  margin-bottom: var(--space-md);
}

.search-examples {
  text-align: left;
}

.search-example {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: calc(0.95rem * var(--type-scale));
}

.example-bullet {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================================
   Feature Grid / Filter Grid
   ============================================================================ */

.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.filter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
}

.filter-icon {
  font-size: calc(1.8rem * var(--type-scale));
}

.filter-name {
  font-weight: 600;
  font-size: calc(0.9rem * var(--type-scale));
}

/* ============================================================================
   Story Types / Contribution Types / Upload Types
   ============================================================================ */

.story-type-grid,

.upload-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.story-type-card,

.upload-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  text-align: center;
}

.type-icon,

.contrib-icon,

.upload-icon {
  font-size: calc(1.8rem * var(--type-scale));
}

.type-name,

.contrib-name,

.upload-name {
  font-weight: 600;
  font-size: calc(0.9rem * var(--type-scale));
}

.type-desc,

.contrib-desc,

.upload-desc {
  font-size: calc(0.75rem * var(--type-scale));
  opacity: 0.75;
}

/* ============================================================================
   AI Feature
   ============================================================================ */

.ai-description {
  font-size: calc(1rem * var(--type-scale));
  opacity: 0.9;
  margin-bottom: var(--space-md);
}

.ai-steps {
  text-align: left;
}

.ai-step {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  font-size: calc(0.95rem * var(--type-scale));
  border-left: 3px solid rgba(255, 255, 255, 0.4);
}

/* ============================================================================
   Points Preview / System
   ============================================================================ */

.points-list,

.points-actions {
  width: 100%;
}

.points-row,

.points-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.points-action,

.action-name {
  flex: 1;
  text-align: left;
  font-size: calc(0.95rem * var(--type-scale));
}

.action-icon {
  font-size: calc(1.2rem * var(--type-scale));
  margin-right: var(--space-sm);
}

.points-value,

.action-points {
  font-weight: 700;
  color: #4ade80;
  font-size: calc(1rem * var(--type-scale));
}

/* ============================================================================
   Training Requirements
   ============================================================================ */

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.requirement-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  text-align: center;
}

.req-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.req-text {
  font-size: calc(0.85rem * var(--type-scale));
}

/* ============================================================================
   Current Status
   ============================================================================ */

.status-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.status-stat {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.status-value {
  font-weight: 700;
}

.status-label {
  opacity: 0.8;
}

/* ============================================================================
   Streaks & Goals
   ============================================================================ */

.streaks-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.streak-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  text-align: left;
}

.streak-icon {
  font-size: calc(2rem * var(--type-scale));
}

.streak-name {
  font-weight: 600;
  display: block;
}

.streak-desc {
  font-size: calc(0.85rem * var(--type-scale));
  opacity: 0.8;
}

/* ============================================================================
   Leaderboard Preview
   ============================================================================ */

.leaderboard-desc {
  font-size: calc(1rem * var(--type-scale));
  opacity: 0.9;
  margin-bottom: var(--space-md);
}

.period-tabs {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.period-tab {
  padding: var(--space-xs) var(--space-md);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  font-size: calc(0.85rem * var(--type-scale));
}

.period-tab:first-child {
  background: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

/* ============================================================================
   AI Analysis
   ============================================================================ */

.ai-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.ai-feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-size: calc(0.95rem * var(--type-scale));
}

.ai-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(74, 222, 128, 0.3);
  color: #4ade80;
  border-radius: 50%;
  font-size: calc(0.8rem * var(--type-scale));
}

/* ============================================================================
   Where to Upload
   ============================================================================ */

.upload-locations {
  text-align: left;
}

.upload-location {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: calc(0.95rem * var(--type-scale));
}

.location-bullet {
  font-size: calc(0.9rem * var(--type-scale));
}

/* ============================================================================
   Collaboration
   ============================================================================ */

.collab-description {
  font-size: calc(1.1rem * var(--type-scale));
  margin-bottom: var(--space-md);
}

.collab-points {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.collab-point {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  font-size: calc(1rem * var(--type-scale));
  border-left: 3px solid rgba(255, 255, 255, 0.4);
}

/* ============================================================================
   Invitation & Finale
   ============================================================================ */

.infographic-segment.invitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.invitation-icon {
  font-size: calc(3.5rem * var(--type-scale));
}

.invitation-title {
  font-size: calc(1.4rem * var(--type-scale));
  font-weight: 700;
  margin: 0;
}

.invitation-message {
  font-size: calc(1.1rem * var(--type-scale));
  line-height: 1.6;
  margin: 0;
  opacity: 0.95;
}

.infographic-segment.finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.finale-icon {
  font-size: calc(4rem * var(--type-scale));
  animation: celebratePulse 1s ease infinite;
}

@keyframes celebratePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.finale-title {
  font-size: calc(1.8rem * var(--type-scale));
  font-weight: 800;
  margin: 0;
}

.finale-subtitle {
  font-size: calc(1.1rem * var(--type-scale));
  opacity: 0.9;
  margin: 0;
}

.finale-cta {
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: calc(1.1rem * var(--type-scale));
  margin-top: var(--space-sm);
  border: 2px solid rgba(255, 255, 255, 0.4);
}

/* ============================================================================
   How It Works
   ============================================================================ */

.works-description {
  font-size: calc(1rem * var(--type-scale));
  opacity: 0.9;
  margin-bottom: var(--space-md);
}

.works-steps {
  text-align: left;
}

.works-step {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  font-size: calc(0.95rem * var(--type-scale));
  border-left: 3px solid rgba(255, 255, 255, 0.4);
}

/* End of v7.19.0 Infographics styles */

/* v4.9.x: Story Events Section */

.event-icon {
  font-size: calc(1.5rem * var(--type-scale));
  flex-shrink: 0;
}

.event-info {
  flex: 1;
  min-width: 0;
}

.event-info strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.event-year {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.event-description {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-sm);
  color: var(--color-text-light);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-play-icon {
  font-size: calc(1.25rem * var(--type-scale));
  color: var(--color-primary);
  flex-shrink: 0;
  opacity: 0.7;
}

/* Event Video Player Modal */

.event-video-player-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
}

.event-video-player-modal.active {
  display: flex;
}

.event-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
}

/* Wrapper and close bar for Safari compatibility */

/* Safari's native video controls capture clicks, so close button must be OUTSIDE video area */

.event-video-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  width: 90vw;
}

.event-video-close-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.event-video-close-bar .video-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 500;
}

.event-video-close-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  /* Ensure clickable on Mac Safari */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  /* Explicit z-index and pointer-events for Safari */
  position: relative;
  z-index: 10002;
  pointer-events: auto !important;
}

.event-video-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.event-video-close-btn:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.3);
}

.event-video-container {
  position: relative;
  width: 100%;
  max-height: 80vh;
}

.event-video-container video {
  width: 100%;
  max-height: 75vh;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: #000;
  display: block;
}

/* Keep old close button styles for backwards compatibility but hide it */

.event-video-close {
  display: none;
}

.contributor-name {
  font-weight: 500;
  color: var(--color-text);
}

/* Mobile Adjustments for Stories */

/* ============================================
   Story Sidebar Layout
   ============================================ */

/* Story Modal with Sidebar Layout */

/* Left Sidebar - Contribution Tools */

.sidebar-header {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-xs);
  writing-mode: horizontal-tb;
}

.sidebar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  height: 56px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: var(--space-xs);
}

.sidebar-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.sidebar-btn:active {
  transform: scale(0.98);
}

.sidebar-icon {
  font-size: calc(1.3rem * var(--type-scale));
  line-height: 1;
}

.sidebar-label {
  font-size: calc(9px * var(--type-scale));
  color: var(--color-text-light);
  font-weight: 500;
  text-align: center;
  line-height: 1.1;
}

.sidebar-btn.voice:hover { border-color: #e74c3c; }

.sidebar-btn.text:hover { border-color: #3498db; }

.sidebar-btn.media:hover { border-color: #2ecc71; }

.sidebar-btn.ai:hover {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

.sidebar-divider {
  width: 40px;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-xs) 0;
}

/* Story Content Area (adjusted for sidebar) */

/* Mobile: Convert sidebar to horizontal bar at bottom */

/* Go Live button moves to top of modal on mobile */

/* Fixed story content visibility issues on iPhone */

/* Story header controls container */


/* Go Live floating button - hidden on desktop */

/* Go Live floating button at top of story modal on mobile */


/* ============================================
   AI Modification Proposal Card
   ============================================ */

.modification-proposal-container {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 10001;
  display: none;
  justify-content: flex-end;
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.modification-proposal-card {
  background: linear-gradient(145deg, #1e3a5f 0%, #0d1b2a 100%);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 16px;
  padding: 16px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 16px rgba(99, 102, 241, 0.2);
}

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

.proposal-action {
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  color: #a5b4fc;
}

.proposal-dismiss {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: calc(1.25rem * var(--type-scale));
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proposal-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

.proposal-content {
  margin-bottom: 16px;
}

.proposal-rationale {
  color: #94a3b8;
  font-size: calc(0.85rem * var(--type-scale));
  margin: 0 0 8px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border-left: 3px solid #6366f1;
}

.proposal-preview {
  color: #e2e8f0;
  font-size: calc(0.9rem * var(--type-scale));
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.proposal-target {
  color: #64748b;
  font-size: calc(0.8rem * var(--type-scale));
  margin: 0;
}

.proposal-actions {
  display: flex;
  gap: 8px;
}

.btn-accept-proposal {
  flex: 1;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-accept-proposal:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-dismiss-proposal {
  background: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: calc(0.9rem * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.btn-dismiss-proposal:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #d1d5db;
}

/* Mobile responsive */

@media (max-width: 767px) {
  .modification-proposal-container {
    bottom: 80px;
    left: 10px;
    right: 10px;
  }

  .modification-proposal-card {
    max-width: none;
  }
}

/* ============================================
   AI Dialogue Lock Banner
   ============================================ */


/* ============================================
   Commentary Panel
   ============================================ */

.commentary-header {
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.commentary-header:hover {
  background: var(--color-bg-tertiary);
}

.commentary-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text);
}

.commentary-toggle-icon {
  color: var(--color-text-light);
  font-size: calc(0.8rem * var(--type-scale));
  transition: transform 0.2s ease;
}

.commentary-count-badge {
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: normal;
  color: var(--color-text-light);
}

.commentary-hint {
  margin: 4px 0 0 24px;
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light);
}

.commentary-content {
  padding: 0 var(--space-lg) var(--space-lg);
  max-height: 400px;
  overflow-y: auto;
}

.commentary-loading,

.commentary-empty,

.commentary-error {
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-light);
  font-size: calc(0.9rem * var(--type-scale));
}

.commentary-empty-hint {
  font-size: calc(0.85rem * var(--type-scale));
  margin-top: 4px;
  opacity: 0.8;
}

.commentary-error a {
  color: var(--color-primary);
  text-decoration: underline;
}

.commentary-item {
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-border);
}

.commentary-item:last-child {
  margin-bottom: 0;
}

.commentary-item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: calc(0.85rem * var(--type-scale));
}

.commentary-type-icon {
  font-size: calc(1rem * var(--type-scale));
}

.commentary-type-label {
  font-weight: 600;
  color: var(--color-text);
}

.commentary-contributor {
  color: var(--color-text-light);
}

.commentary-timestamp {
  color: var(--color-text-lighter);
  font-size: calc(0.8rem * var(--type-scale));
  margin-left: auto;
}

.commentary-prompt {
  background: rgba(102, 126, 234, 0.08);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: calc(0.85rem * var(--type-scale));
}

.commentary-prompt .prompt-label {
  color: var(--color-text-light);
  font-weight: 500;
}

.commentary-prompt .prompt-text {
  color: var(--color-text);
  font-style: italic;
}

.commentary-item-content {
  color: var(--color-text);
  font-size: calc(0.95rem * var(--type-scale));
  line-height: 1.6;
}

/* AI Feedback styling */

.commentary-item.ai_feedback {
  border-left: 3px solid #667eea;
}

/* Family Comment styling */

.commentary-item.family_comment {
  border-left: 3px solid #10b981;
}

/* Note styling */

.commentary-item.note {
  border-left: 3px solid #f59e0b;
}

/* Mobile adjustments for commentary */

@media (max-width: 768px) {
  .commentary-content {
    padding: 0 var(--space-md) var(--space-md);
    max-height: 300px;
  }

  .commentary-header {
    padding: var(--space-sm) var(--space-md);
  }

  .commentary-hint {
    margin-left: 20px;
    font-size: calc(0.8rem * var(--type-scale));
  }

  .commentary-item-header {
    font-size: calc(0.8rem * var(--type-scale));
  }

  .commentary-timestamp {
    width: 100%;
    margin-left: 24px;
    margin-top: 2px;
  }
}

/* ============================================
   Contribution Bar & Modals
   ============================================ */

/* Contribution Bar - Fixed at bottom of story detail */

/* AI Dialogue Button - More prominent */

/* Contribution Modal Overlay */

/* Fixed contribution modal - container needs position:fixed, content needs card styling */

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

/* Colorful gradient header for contribution modals */

/* Modal footer styling */

/* Improved voice record button */

.voice-record-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.voice-record-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.voice-record-btn.recording {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
  animation: pulse-btn 1s infinite;
}

@keyframes pulse-btn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.voice-record-btn .record-icon {
  font-size: calc(1.2rem * var(--type-scale));
}

.voice-record-btn .record-icon.recording {
  color: #ef4444;
}

/* Text input area styling */

.text-input-area textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: calc(0.95rem * var(--type-scale));
  font-family: inherit;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.2s ease;
}

.text-input-area textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Contribution type selector styling */

/* Voice Recording Area */

.voice-recording-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
}

.voice-recording-indicator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(3rem * var(--type-scale));
  color: white;
  transition: all 0.3s ease;
}

.voice-recording-indicator.recording {
  animation: pulse-recording 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5);
}

@keyframes pulse-recording {
  0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
  70% { box-shadow: 0 0 0 20px rgba(231, 76, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.voice-recording-timer {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.voice-recording-hint {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  text-align: center;
}

.voice-recording-controls {
  display: flex;
  gap: var(--space-md);
  width: 100%;
  max-width: 300px;
}

.voice-btn {
  flex: 1;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.voice-btn-record {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  border: none;
}

.voice-btn-record:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.voice-btn-record.recording {
  background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

.voice-btn-submit {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: white;
  border: none;
}

.voice-btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

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

/* Text Input Area */

.text-input-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.text-input-area textarea {
  width: 100%;
  min-height: 150px;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-base);
  resize: vertical;
  transition: border-color 0.2s ease;
}

.text-input-area textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.text-input-area textarea::placeholder {
  color: var(--color-text-lighter);
}

.text-input-submit {
  align-self: flex-end;
  padding: var(--space-sm) var(--space-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.text-input-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

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

/* Media Upload Area */

.media-upload-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.media-upload-options {
  display: flex;
  gap: var(--space-md);
}

.media-upload-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.media-upload-btn:hover {
  border-color: var(--color-primary);
  background: rgba(102, 126, 234, 0.05);
}

.media-upload-btn .upload-icon {
  font-size: calc(2rem * var(--type-scale));
}

.media-upload-btn .upload-label {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  font-weight: 500;
}

.media-upload-preview {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.media-upload-preview.has-file {
  display: flex;
}

.media-preview-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.media-preview-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.media-preview-name {
  font-size: var(--font-sm);
  color: var(--color-text);
  font-weight: 500;
}

.media-preview-remove {
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  font-size: var(--font-sm);
  padding: var(--space-xs);
}

/* Add Media modal preview constraints */

.media-preview {
  position: relative;
  max-height: 250px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  margin-top: var(--space-md);
}

.media-preview img,

#mediaPreviewImage {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
}

/* Media annotation area */

.media-annotation-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
}

.media-annotation-area label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.media-annotation-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-sm);
  resize: vertical;
}

.media-annotation-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.media-annotation-voice-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  transition: all 0.2s;
}

.media-annotation-voice-btn:hover {
  background: var(--color-bg-tertiary);
}

.media-annotation-voice-btn.recording {
  background: #fee2e2;
  border-color: #ef4444;
  color: #ef4444;
}

.media-caption-input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-sm);
}

.media-caption-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.media-upload-submit {
  padding: var(--space-sm) var(--space-lg);
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.media-upload-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

.media-upload-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile responsiveness for contribution bar */

/* ============================================
   Story Chat UI Styles
   ============================================ */

/* Tab Navigation */

/* Chat Container */

/* Chat Messages Area */

/* Welcome Message */

.chat-welcome-icon {
  font-size: calc(48px * var(--type-scale));
  margin-bottom: var(--space-md);
}

/* Chat Messages */

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

/* Typing Indicator */

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-light);
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Chat Input Area */

/* ============================================================================
   v6.8.0 - Chat Mode Badge (Contribution/Commentary indicator)
   Shows current mode based on story lock state
   ============================================================================ */


/* Input area layout update for mode badge */

/* Flex row for textarea + send button */

/* AI Dialogue input area mode badge */

/* Mobile Adjustments for Story Chat */

/* =============================================================================
   AI DIALOGUE MODAL - DEPRECATED (v5.1.0 - v7.9.x)
   v7.10.5: Moved to end of file for AI Dialogue Filter feature
   See "AI Dialogue Filter Modal" section at line ~18986
   ============================================================================= */

/*
 * NOTE: The .ai-dialogue-modal styles are now consolidated at the end of the file
 * to support the new AI Dialogue Filter feature (v7.10.0+).
 * The full-screen dark modal design replaced the original desktop sidebar layout.
 */

.ai-welcome-text {
  flex: 1;
}

.ai-welcome-text p {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-text);
  line-height: 1.5;
}

.ai-welcome-text .ai-prompts {
  font-weight: 600;
  margin-top: var(--space-md);
  color: var(--color-primary);
}

.ai-welcome-text ul {
  margin: var(--space-xs) 0 0 0;
  padding-left: var(--space-lg);
  color: var(--color-text-light);
}

.ai-welcome-text li {
  margin-bottom: var(--space-xs);
  font-style: italic;
}

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

/* AI Dialogue Voice Button */

.voice-icon.recording-pulse {
  color: white;
  animation: voice-icon-pulse 0.8s ease-in-out infinite;
}

@keyframes voice-recording-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

@keyframes voice-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Two-button layout - Save and Exit */

/* Legacy class - keep for backwards compatibility */

/* Mobile adjustments v7.3.0: Full-screen below half-height header */

/* =============================================================================
   SEGMENTED VIDEO PLAYER (v5.1.0 - Chapter Markers & Transcript Sync)
   ============================================================================= */

.segmented-video-player-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  padding: var(--space-md);
}

.segmented-video-player-modal.active {
  display: flex;
}

.segmented-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
}

/* Wrapper and close bar for Safari compatibility */

.segmented-video-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  width: 95vw;
  max-height: 95vh;
}

.segmented-video-close-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.segmented-video-close-bar .video-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 500;
}

.segmented-video-close-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.segmented-video-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.segmented-video-close-btn:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.3);
}

.segmented-video-container {
  position: relative;
  background: #1a1a1a;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  width: 100%;
  max-height: calc(95vh - 60px);
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.segmented-video-container.has-segments {
  flex-direction: row;
}

/* Hide old close button */

.segmented-video-close {
  display: none;
}

/* Keep old styles for reference but hidden */

.segmented-video-close-old {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  color: white;
  font-size: var(--font-xl);
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  /* Safari touch target fix */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.segmented-video-close:hover {
  background: rgba(0, 0, 0, 0.9);
}

.segmented-video-close:active {
  transform: scale(0.95);
}

.segmented-video-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  min-width: 0;
}

.segmented-video-main video {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

/* Sidebar with segments */

.segmented-video-sidebar {
  width: 320px;
  background: #1a1a1a;
  border-left: 1px solid #333;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.segment-list-header {
  padding: var(--space-md);
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.segment-list-header h4 {
  margin: 0;
  color: white;
  font-size: var(--font-base);
}

.segment-count {
  font-size: var(--font-xs);
  color: #888;
}

.segment-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.segment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: var(--space-xs);
}

.segment-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.segment-item.active {
  background: rgba(102, 126, 234, 0.3);
  border-left: 3px solid var(--color-primary);
}

.segment-time {
  font-size: var(--font-sm);
  color: var(--color-primary);
  font-weight: 600;
  min-width: 45px;
  font-family: monospace;
}

.segment-info {
  flex: 1;
  min-width: 0;
}

.segment-title {
  font-size: var(--font-sm);
  color: white;
  font-weight: 500;
  margin-bottom: 2px;
}

.segment-preview {
  font-size: var(--font-xs);
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-duration {
  font-size: var(--font-xs);
  color: #666;
  min-width: 30px;
  text-align: right;
}

.current-transcript {
  padding: var(--space-md);
  border-top: 1px solid #333;
  background: #222;
}

.transcript-label {
  font-size: var(--font-xs);
  color: #888;
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.transcript-text {
  font-size: var(--font-sm);
  color: white;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
}

/* Mobile: Stack layout */

@media (max-width: 900px) {
  .segmented-video-container.has-segments {
    flex-direction: column;
  }

  .segmented-video-sidebar {
    width: 100%;
    max-height: 40vh;
    border-left: none;
    border-top: 1px solid #333;
  }

  .segmented-video-main video {
    max-height: 50vh;
  }
}

@media (max-width: 640px) {
  .segmented-video-player-modal {
    padding: 0;
  }

  .segmented-video-container {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
  }

  .segmented-video-sidebar {
    max-height: 35vh;
  }

  .segment-list-header {
    padding: var(--space-sm) var(--space-md);
  }

  .segment-item {
    padding: var(--space-xs) var(--space-sm);
  }
}

/* ============================================================================
   CHAPTER NAVIGATION PLAYER
   Interview Story video player with chapter navigation
   ============================================================================ */

/* Desktop layout: video left, chapters right */

/* Mobile layout: video top, chapters bottom (collapsible) */

/* Video main area */

/* Chapter title overlay (appears at start of each chapter) */

.overlay-chapter-number {
  display: block;
  font-size: calc(0.75rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.overlay-chapter-title {
  display: block;
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
}

/* Mobile: Sticky chapter indicator above video */

/* Desktop: Chapter sidebar */

/* Chapter list (shared between desktop and mobile) */

/* Mobile: Chapter list below video (collapsible) */

/* Chapter navigation items */

/* Mobile responsive adjustments */

/* ============================================================================
   GLOBAL LIVE MODE BANNER
   ============================================================================ */

.global-live-mode-banner {
  position: fixed;
  top: 60px; /* Below top-nav */
  left: 0;
  right: 0;
  z-index: 9990;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  padding: 0;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.global-live-mode-banner.active {
  transform: translateY(0);
  opacity: 1;
}

/* Body adjustment when live banner is showing */

body.has-live-banner .main-content {
  margin-top: 48px;
}

body.has-live-banner .side-nav {
  top: 108px; /* 60px nav + 48px banner */
}

body.has-live-banner .family-navigator {
  top: 108px;
}

.live-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  max-width: 100%;
  gap: 12px;
}

.live-banner-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.live-banner-indicator.opted-out {
  opacity: 0.7;
}

.live-dot {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
  will-change: opacity, transform; /* shedding-idle-ballast: GPU-composite the live pulse so it doesn't repaint its container (OOM-reaper class) */
}

.live-banner-indicator.opted-out .live-dot {
  animation: none;
  opacity: 0.5;
}

@keyframes livePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.live-text {
  font-weight: 700;
  color: white;
  font-size: calc(0.85rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.live-banner-info {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.live-story-title {
  color: white;
  font-weight: 600;
  font-size: calc(0.95rem * var(--type-scale));
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.live-story-title:hover {
  text-decoration-style: solid;
}

.live-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.live-banner-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.live-banner-btn.opt-out {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.live-banner-btn.opt-out:hover {
  background: rgba(255, 255, 255, 0.3);
}

.live-banner-btn.opt-in {
  background: #10b981;
  color: white;
}

.live-banner-btn.opt-in:hover {
  background: #059669;
}

.live-banner-btn.close {
  background: rgba(0, 0, 0, 0.2);
  color: white;
}

.live-banner-btn.close:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Mobile responsive banner */

@media (max-width: 640px) {
  .global-live-mode-banner {
    top: 56px; /* Mobile nav height */
  }

  body.has-live-banner .main-content {
    margin-top: 44px;
  }

  body.has-live-banner .side-nav {
    top: 100px;
  }

  .live-banner-content {
    padding: 8px 12px;
    gap: 8px;
  }

  .live-text {
    font-size: calc(0.75rem * var(--type-scale));
  }

  .live-story-title {
    font-size: calc(0.85rem * var(--type-scale));
  }

  .live-banner-btn {
    padding: 5px 10px;
    font-size: calc(0.75rem * var(--type-scale));
  }
}

/* ============================================================================
   STORY MODAL LIVE MODE BUTTON
   ============================================================================ */

.sidebar-btn.live-mode {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  position: relative;
}

.sidebar-btn.live-mode::before {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
  will-change: opacity, transform; /* shedding-idle-ballast: GPU-composite the live pulse so it doesn't repaint #sideNav (OOM-reaper class) */
}

.sidebar-btn.live-mode .sidebar-icon {
  color: white !important;
}

.sidebar-btn.live-mode .sidebar-label {
  color: white !important;
}

.sidebar-btn.live-mode:hover {
  transform: scale(1.05);
}

/* Live mode indicator on story cards */

/* Start Live Mode checkbox in Create Story form */

.create-story-live-mode {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
  border-radius: 12px;
  margin-top: 16px;
}

.create-story-live-mode input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #dc2626;
}

.create-story-live-mode label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.create-story-live-mode .live-mode-title {
  font-weight: 600;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 6px;
}

.create-story-live-mode .live-mode-desc {
  font-size: calc(0.8rem * var(--type-scale));
  color: #6b7280;
}

/* ========================================================================
   Pane Maximize — FrameController
   Collapses sidebar + header for immersive viewing of any App Panel content.
   General-purpose: used by presentation player, available to any view.
   ======================================================================== */

body.pane-maximized {
  --nav-height: 0px;
  --side-nav-width: 0px;
}

body.pane-maximized .top-nav {
  transform: translateY(-100%);
  pointer-events: none;
}

body.pane-maximized .side-nav {
  transform: translateX(-100%);
  pointer-events: none;
}

body.pane-maximized .main-content {
  margin-top: 0;
  margin-left: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Smooth transitions for maximize/restore */

.top-nav {
  transition: transform 0.3s ease-in-out;
}

.main-content {
  transition: margin 0.3s ease-in-out;
}

/* Control Panel Collapse (FFAPanelCollapse) RETIRED — squaring-chrome-maximize
   S2, Return 028 (2026-08-02). The desktop Control Panel is now a permanent
   60px band of 44px squares; there is no collapsed state, no expand tab, and
   no launcher interaction may change the canvas envelope. The pane-maximized
   story takeover above remains the one sanctioned frame takeover. */

/* Floating restore button */

.pane-restore-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 14999;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.pane-maximized .pane-restore-btn {
  opacity: 0.3;
}

.pane-restore-btn:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}

/* Hide maximize + restore controls on mobile (maximize is default state) */

@media (max-width: 768px) {
  .pres-scrub-maximize,
  .pane-restore-btn {
    display: none !important;
  }
}

/* Story Person Picker Modal (v5.3.4 Contextual Tagging) */

/* Respects FAA header boundary */

.btn-close-picker {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-close-picker:hover {
  background: var(--color-danger);
  color: white;
}

/* Grid-based person tagging */

/* Mobile: single column grid */

/* Story persons header with add button */

/* Story chapters header with add button (v6.5.2, v6.5.4: improved mobile visibility) */

/* Add Chapter Modal */

.add-chapter-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.add-chapter-modal.active {
  display: block;
}

.add-chapter-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.add-chapter-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.add-chapter-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.add-chapter-modal-header h3 {
  margin: 0;
  font-size: var(--font-lg);
}

.add-chapter-modal-close {
  background: none;
  border: none;
  font-size: calc(24px * var(--type-scale));
  cursor: pointer;
  color: var(--color-text-light);
  padding: var(--space-xs);
  line-height: 1;
}

.add-chapter-modal-body {
  padding: var(--space-lg);
}

.add-chapter-form-group {
  margin-bottom: var(--space-lg);
}

.add-chapter-form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.add-chapter-input-wrapper {
  display: flex;
  gap: var(--space-xs);
}

.add-chapter-input-wrapper input,

.add-chapter-input-wrapper textarea {
  flex: 1;
  padding: var(--space-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  transition: border-color 0.2s;
}

.add-chapter-input-wrapper input:focus,

.add-chapter-input-wrapper textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.add-chapter-input-wrapper textarea {
  resize: vertical;
  min-height: 80px;
}

.add-chapter-voice-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(20px * var(--type-scale));
  transition: all 0.2s;
}

.add-chapter-voice-btn:hover {
  background: var(--color-bg-secondary);
}

.add-chapter-voice-btn.recording {
  background: #fee2e2;
  border-color: #ef4444;
  animation: pulse-recording 1s infinite;
}

@keyframes pulse-recording {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Chapter reorder list */

.add-chapter-reorder-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.add-chapter-reorder-section h4 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-base);
  color: var(--color-text);
}

.add-chapter-reorder-hint {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

/* Modal footer */

.add-chapter-modal-footer {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.add-chapter-modal-footer button {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.add-chapter-cancel-btn {
  background: white;
  border: 2px solid var(--color-border);
  color: var(--color-text);
}

.add-chapter-cancel-btn:hover {
  background: var(--color-bg-secondary);
}

.add-chapter-submit-btn {
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: white;
}

.add-chapter-submit-btn:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.add-chapter-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile responsive */

/* =============================================================================
   TRAINING HUB VIEW
   ============================================================================= */

/* View subtitle */

.view-subtitle {
  color: var(--ffvr-ink-faint, var(--color-text-light));
  font-size: var(--font-sm);
  margin-top: var(--space-xs);
}

/* Training Hub Overview Stats */

.training-hub-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.training-stat-card {
  background: var(--ffvr-surface-raised, white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.training-stat-card .stat-icon {
  font-size: calc(2rem * var(--type-scale));
}

.training-stat-card .stat-info {
  display: flex;
  flex-direction: column;
}

.training-stat-card .stat-value {
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
  color: var(--ffvr-ink, var(--color-text));
}

.training-stat-card .stat-label {
  font-size: var(--font-sm);
  color: var(--ffvr-ink-faint, var(--color-text-light));
}

/* Training Hub Sections */

.training-hub-section {
  margin-bottom: var(--space-xl);
}

.training-hub-section h3 {
  margin-bottom: var(--space-md);
  font-size: var(--font-lg);
  color: var(--ffvr-ink, var(--color-text));
}

/* Filter Bar */

.training-filter-bar {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.training-filter-btn {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--ffvr-rule, var(--color-border));
  background: var(--ffvr-surface-raised, white);
  /* filling-bespoke-vessels S4, same case as .context-mic-btn: a <button> that
     never declared a colour, so its ink was the UA sheet's `buttontext` — fine
     over white, 1.45:1 once the vessel darkened the fill. The fallback is the
     UA keyword, so flag-off computes byte-identically. */
  color: var(--ffvr-ink, buttontext);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.training-filter-btn:hover {
  border-color: var(--ffvr-accent, var(--color-primary));
  color: var(--ffvr-accent, var(--color-primary));
}

/* An accent pill is accent + on-accent, BOTH or neither (RECIPE, from Stories'
   .bio-card-version). White on --color-primary measured 3.68:1 — a shortfall
   this train inherited rather than caused, but a fatal one for an admitted
   room, and substituting only the fill would have left white on teal. */
.training-filter-btn.active {
  background: var(--ffvr-accent, var(--color-primary));
  color: var(--ffvr-on-accent, white);
  border-color: var(--ffvr-accent, var(--color-primary));
}

/* Members Grid */

.training-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.training-member-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.training-member-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-light);
}

.training-member-card.ready {
  border-color: var(--color-success);
  background: linear-gradient(135deg, white, #ecfdf5);
}

.training-member-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.training-member-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.training-member-avatar .avatar-initial {
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-primary);
}

.training-member-avatar .ready-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: calc(0.875rem * var(--type-scale));
}

.training-member-info {
  flex: 1;
  min-width: 0;
}

.training-member-name {
  font-weight: 600;
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-xs);
}

.training-progress-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.training-progress-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.training-progress-row .progress-icon {
  font-size: calc(0.75rem * var(--type-scale));
  width: 16px;
}

.progress-bar-mini {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-mini .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.training-progress-row .progress-count {
  font-size: calc(0.7rem * var(--type-scale));
  color: var(--color-text-light);
  width: 28px;
  text-align: right;
}

.training-member-action {
  color: var(--color-text-light);
}

.training-member-action .action-arrow {
  font-size: calc(1.25rem * var(--type-scale));
}

/* Quick Actions */

.training-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.training-action-card {
  background: var(--ffvr-surface-raised, white);
  color: var(--ffvr-ink, buttontext);   /* see .training-filter-btn */
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--ffvr-rule, var(--color-border));
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.training-action-card:hover {
  border-color: var(--ffvr-accent, var(--color-primary));
  box-shadow: var(--shadow-md);
}

.training-action-card .action-icon {
  font-size: calc(2rem * var(--type-scale));
}

.training-action-card .action-title {
  font-weight: 600;
  color: var(--ffvr-ink, var(--color-text));
}

.training-action-card .action-desc {
  font-size: var(--font-sm);
  color: var(--ffvr-ink-faint, var(--color-text-light));
}

/* Training Tips */

.training-tips-card {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
}

.training-tips-card h3 {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-text);
}

.training-tips-list {
  margin: 0;
  padding-left: var(--space-lg);
  color: var(--color-text);
}

.training-tips-list li {
  margin-bottom: var(--space-sm);
  line-height: 1.5;
}

.training-tips-list li:last-child {
  margin-bottom: 0;
}

/* Empty State */

.training-empty-state {
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  color: var(--color-text-light);
}

.training-empty-state .empty-icon {
  font-size: calc(3rem * var(--type-scale));
  margin-bottom: var(--space-md);
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .training-hub-overview {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .training-stat-card {
    padding: var(--space-md);
  }

  .training-stat-card .stat-value {
    font-size: calc(1.25rem * var(--type-scale));
  }

  .training-members-grid {
    grid-template-columns: 1fr;
  }

  .training-actions-grid {
    grid-template-columns: 1fr;
  }

  .training-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-xs);
  }

  .training-filter-btn {
    flex-shrink: 0;
  }
}

/* ============================================================================
   v6.3.0: MY ACTIVITY / REVIEW & ROLLBACK STYLES
   ============================================================================ */

/* Activity header with view toggle */

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.activity-count {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  font-weight: 500;
}

.activity-view-toggle {
  display: flex;
  gap: 4px;
  background: var(--color-bg);
  padding: 2px;
  border-radius: var(--radius-md);
}

.view-toggle-btn {
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: calc(14px * var(--type-scale));
  color: var(--color-text-light);
  transition: all 0.15s ease;
}

.view-toggle-btn:hover {
  background: var(--color-surface);
}

.view-toggle-btn.active {
  background: var(--color-primary);
  color: white;
}

.my-activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Grid mode for My Activity */

.my-activity-list.grid-mode {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

/* Desktop: 3 columns in grid mode */

@media (min-width: 768px) {
  .my-activity-list.grid-mode {
    grid-template-columns: repeat(3, 1fr);
  }
}

.my-activity-list.grid-mode .activity-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-md);
}

.my-activity-list.grid-mode .activity-thumbnail {
  width: 100%;
  height: 120px;
  margin-bottom: var(--space-sm);
}

.my-activity-list.grid-mode .activity-icon {
  width: 100%;
  height: 80px;
  font-size: calc(2.5rem * var(--type-scale));
}

.my-activity-list.grid-mode .activity-details {
  width: 100%;
}

.my-activity-list.grid-mode .activity-description {
  font-size: var(--font-sm);
  line-height: 1.3;
}

.my-activity-list.grid-mode .activity-file-name {
  max-width: 100%;
}

.my-activity-list.grid-mode .activity-meta {
  justify-content: center;
}

.my-activity-list.grid-mode .activity-undo-btn {
  margin-top: var(--space-sm);
  width: 100%;
}

/* Activity grid size variations (compact, medium, large) */

.my-activity-list.grid-mode.size-compact {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-sm);
}

.my-activity-list.grid-mode.size-compact .activity-item {
  padding: var(--space-sm);
}

.my-activity-list.grid-mode.size-compact .activity-thumbnail {
  height: 80px;
}

.my-activity-list.grid-mode.size-compact .activity-icon {
  height: 60px;
  font-size: calc(1.8rem * var(--type-scale));
}

.my-activity-list.grid-mode.size-compact .activity-description {
  font-size: var(--font-xs);
}

.my-activity-list.grid-mode.size-medium {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.my-activity-list.grid-mode.size-large {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.my-activity-list.grid-mode.size-large .activity-item {
  padding: var(--space-lg);
}

.my-activity-list.grid-mode.size-large .activity-thumbnail {
  height: 160px;
}

.my-activity-list.grid-mode.size-large .activity-icon {
  height: 100px;
  font-size: calc(3rem * var(--type-scale));
}

/* Size toggle button styling */

.view-toggle-btn.size-toggle {
  font-size: calc(0.9rem * var(--type-scale));
  min-width: 32px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.activity-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.activity-item.rolled-back {
  opacity: 0.6;
  background: var(--color-surface-alt);
}

.activity-icon {
  font-size: calc(1.5rem * var(--type-scale));
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

/* Activity thumbnails */

.activity-thumbnail {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(1.5rem * var(--type-scale));
}

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

.activity-file-name {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.activity-points {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--font-xs);
  font-weight: 600;
}

.activity-details {
  flex: 1;
  min-width: 0;
}

.activity-description {
  font-weight: 500;
  color: var(--color-text);
  word-break: break-word;
}

.activity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  font-size: var(--font-sm);
}

.activity-time {
  color: var(--color-text-light);
}

.activity-status.rolled-back {
  color: var(--color-success);
  font-weight: 500;
}

.activity-warning {
  color: var(--color-warning);
  font-size: var(--font-xs);
}

.activity-undo-btn {
  flex-shrink: 0;
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-light);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 70px;
}

.activity-undo-btn:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: white;
}

.activity-pagination {
  text-align: center;
  padding: var(--space-md);
  color: var(--color-text-light);
  font-size: var(--font-sm);
}

/* Blocked activity item state */

.activity-item.blocked {
  opacity: 0.7;
  background: var(--color-surface-alt);
}

.activity-blocked {
  color: var(--color-text-light);
  font-size: var(--font-xs);
  display: flex;
  align-items: center;
  gap: 4px;
}

.activity-cascade {
  color: var(--color-warning);
  font-size: var(--font-xs);
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.activity-blocked-btn {
  flex-shrink: 0;
  padding: var(--space-xs);
  background: transparent;
  border: none;
  font-size: calc(1.2rem * var(--type-scale));
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-blocked-btn:hover {
  opacity: 1;
}

/* Undo Confirmation Modal */

.undo-confirm-modal {
  max-width: 400px;
  margin: auto;
}

.undo-primary-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.undo-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.undo-text {
  font-weight: 500;
  color: var(--color-text);
}

.undo-cascade-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.undo-cascade-warning p {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-warning);
  font-weight: 500;
}

.undo-cascade-list {
  margin: 0;
  padding-left: var(--space-lg);
  list-style: none;
}

.undo-cascade-list li {
  margin-bottom: var(--space-xs);
  font-size: var(--font-sm);
  color: var(--color-text);
}

.undo-cascade-list li::before {
  content: "•";
  margin-right: var(--space-xs);
  color: var(--color-warning);
}

.undo-warning-text {
  color: var(--color-text-light);
  font-size: var(--font-sm);
  margin: 0;
  text-align: center;
}

/* Blocked Explanation Modal */

.blocked-modal {
  max-width: 400px;
  margin: auto;
}

.blocked-contributors {
  margin-bottom: var(--space-md);
}

.blocked-contributors p {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-text);
}

.blocked-list {
  margin: 0;
  padding-left: var(--space-lg);
  list-style: none;
}

.blocked-list li {
  margin-bottom: var(--space-xs);
  font-size: var(--font-sm);
  color: var(--color-text);
}

.blocked-list li::before {
  content: "•";
  margin-right: var(--space-xs);
  color: var(--color-primary);
}

.blocked-reason {
  text-align: center;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.blocked-help-text {
  color: var(--color-text-light);
  font-size: var(--font-sm);
  text-align: center;
  margin: var(--space-md) 0 0 0;
}

/* Danger button style */

.btn-danger {
  background: var(--color-danger);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

/* Mobile adjustments */

@media (max-width: 768px) {
  .activity-item {
    flex-wrap: wrap;
    padding: var(--space-sm);
    gap: var(--space-sm);
  }

  .activity-icon {
    width: 32px;
    height: 32px;
    font-size: calc(1.2rem * var(--type-scale));
  }

  .activity-undo-btn {
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    min-height: 44px;
  }

  .activity-blocked-btn {
    width: auto;
    margin-top: var(--space-sm);
  }

  .undo-confirm-modal,
  .blocked-modal {
    max-width: 100%;
    margin: var(--space-md);
  }
}

/* ============================================================================
   DESKTOP WINDOWING SYSTEM
   ============================================================================

   On desktop screens (≥1024px), the sidebar is always visible.
   Full-screen modals should respect the sidebar and render in the
   "application window" area to the right of the sidebar.

   This creates a professional desktop app experience where users can:
   - See navigation at all times
   - Switch between apps without closing modals
   - Use horizontal space efficiently on wide screens

   On mobile (<1024px), modals remain full-viewport as before.
   ============================================================================ */

/* ============================================================================
   v7.7.0: Mobile Header & Modal Positioning - Full-Height Header
   Mobile devices now use full-height header (no clipping) with circular user control
   ============================================================================ */

/* ============================================================================
   PDF Options Modal
   Shows view/download options before opening PDF
   ============================================================================ */

.pdf-options-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

.pdf-options-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.pdf-options-container {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.pdf-options-container h3 {
  margin: 0 0 8px 0;
  font-size: calc(18px * var(--type-scale));
  color: #1e293b;
  word-break: break-word;
}

.pdf-options-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.pdf-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  font-size: calc(15px * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pdf-option-view {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.pdf-option-view:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.pdf-option-download {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.pdf-option-download:hover {
  background: #e2e8f0;
}

.pdf-options-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
  padding: 8px 16px;
}

.pdf-options-close:hover {
  color: #64748b;
}

/* ============================================================================
   PDF Viewer Modal
   Full-screen PDF viewer with download option
   ============================================================================ */

.pdf-viewer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-fullscreen);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdf-viewer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
}

.pdf-viewer-container {
  position: relative;
  width: 95%;
  height: 90%;
  max-width: 1200px;
  background: white;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.pdf-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.pdf-viewer-header h3 {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: var(--space-md);
}

.pdf-viewer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.pdf-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  text-decoration: none;
  transition: background 0.2s;
}

.pdf-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.pdf-viewer-close {
  background: none;
  border: none;
  color: white;
  font-size: var(--font-2xl);
  cursor: pointer;
  padding: var(--space-xs);
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.pdf-viewer-close:hover {
  opacity: 1;
}

.pdf-viewer-content {
  flex: 1;
  overflow: hidden;
  background: #525659;
}

/* Mobile responsive */

@media (max-width: 767px) {
  .pdf-viewer-container {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .pdf-viewer-header h3 {
    font-size: var(--font-base);
  }

  .pdf-action-btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-xs);
  }
}

/* ============================================================================
   AI Dialogue Filter Modal (v7.10.0, v7.10.5)
   Natural language interface for creating Story/Media Profiles
   v7.10.5: Raised z-index to 15000 to ensure visibility above all other modals
   ============================================================================ */

/* Header */

/* Messages Area */

.ai-message {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  animation: aiDialogueFadeIn 0.3s ease-out;
}

.ai-message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ai-message.assistant {
  align-self: flex-start;
  background: rgba(255,255,255,0.95);
  color: #1a2938;
  border-bottom-left-radius: 4px;
}

.ai-message-content {
  line-height: 1.5;
}

.ai-message-content p {
  margin: 0 0 8px 0;
}

.ai-message-content p:last-child {
  margin-bottom: 0;
}

/* Suggestion chips */

.ai-suggestions {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
}

.ai-suggestions li {
  padding: 10px 14px;
  margin: 6px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-style: italic;
  transition: all 0.2s;
  color: #fff;
}

.ai-suggestions li:hover {
  background: linear-gradient(135deg, #7b8ff0 0%, #8a5db5 100%);
  transform: translateY(-1px);
}

/* Clarification options */

.ai-clarification-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ai-clarification-btn {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.ai-clarification-btn:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.6);
}

/* Loading indicator */

.ai-loading {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}

.ai-loading-dot {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: aiDialogueLoadingDot 1.4s infinite ease-in-out both;
}

.ai-loading-dot:nth-child(1) { animation-delay: -0.32s; }

.ai-loading-dot:nth-child(2) { animation-delay: -0.16s; }

.ai-loading-dot:nth-child(3) { animation-delay: 0s; }

@keyframes aiDialogueLoadingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Preview Panel */

.ai-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.ai-preview-count {
  font-weight: 600;
  color: #10b981;
  font-size: calc(15px * var(--type-scale));
}

.ai-preview-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-preview-toggle:hover {
  color: #fff;
}

.ai-preview-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  -webkit-overflow-scrolling: touch;
}

.ai-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 4px 0;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  cursor: grab;
  transition: all 0.2s;
}

.ai-preview-item:hover {
  background: rgba(255,255,255,0.08);
}

.ai-preview-item.dragging {
  opacity: 0.6;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.ai-preview-item .drag-handle {
  color: rgba(255,255,255,0.4);
  font-size: calc(16px * var(--type-scale));
  cursor: grab;
  flex-shrink: 0;
}

.ai-preview-item .item-info {
  flex: 1;
  min-width: 0;
}

.ai-preview-item .item-title {
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-preview-item .item-reason {
  font-size: calc(13px * var(--type-scale));
  color: rgba(255,255,255,0.85);  /* Improved contrast from 0.6 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.ai-preview-item .item-type {
  font-size: calc(11px * var(--type-scale));
  color: #667eea;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 4px;
}

.ai-preview-item .item-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: calc(16px * var(--type-scale));
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.ai-preview-item .item-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.ai-preview-actions {
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.ai-profile-name-input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #fff;
  font-size: calc(15px * var(--type-scale));
  outline: none;
  transition: border-color 0.2s;
}

.ai-profile-name-input:focus {
  border-color: #667eea;
}

.ai-profile-name-input::placeholder {
  color: rgba(255,255,255,0.5);
}

.ai-save-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.ai-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.ai-save-btn:active {
  transform: translateY(0);
}

/* Create Story button in AI Dialogue */

.ai-create-story-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ai-create-story-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.ai-create-story-btn:active {
  transform: translateY(0);
}

.ai-create-story-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Exit button in AI Dialogue */

.ai-exit-btn {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.ai-exit-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

/* Input Area */

.ai-voice-btn, .ai-send-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

/* Voice button - subtle style */

.ai-voice-btn {
  background: rgba(0,0,0,0.1);
  color: #6b7280;
}

.ai-voice-btn:hover {
  background: rgba(0,0,0,0.15);
  color: #374151;
}

/* Send button - prominent gradient to match app style */

/* Ensure send icon SVG is visible - polygon needs fill for arrow shape */

.ai-voice-btn.recording {
  background: #ef4444;
  color: white;
  animation: aiDialoguePulse 1s infinite;
}

#aiDialogueInput,

#storyAIDialogueInput {
  flex: 1;
  padding: 12px 16px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  color: #1f2937;
  font-size: calc(15px * var(--type-scale));
  resize: none;
  max-height: 120px;
  min-height: 44px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}

#aiDialogueInput:focus,

#storyAIDialogueInput:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

#aiDialogueInput::placeholder,

#storyAIDialogueInput::placeholder {
  color: #9ca3af;
}

/* AI Filter Button (for Stories/Media views) */

.ai-filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;  /* Adjusted padding for larger icon */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 24px;  /* Slightly larger radius */
  color: #fff;
  font-size: calc(14px * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 48px;  /* Ensure sufficient touch target */
}

.ai-filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.ai-filter-btn .ai-icon {
  font-size: calc(32px * var(--type-scale));  /* Increased from 16px to 32px per Claude.ai spec */
  line-height: 1;
}

.ai-filter-btn .ai-label {
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Family Focus button enhancements */

.family-focus-btn .family-focus-icon {
  font-size: calc(20px * var(--type-scale));  /* Family silhouette icon */
}

/* Animations */

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

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

@keyframes aiDialoguePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

/* Mobile responsive for AI Dialogue */

/* ============================================================================
   Batch Restructure Styles
   Progress overlay and success messaging for story restructuring
   ============================================================================ */

/* Progress overlay - full screen takeover during restructuring */

.batch-restructure-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-system);
  animation: fadeIn 0.3s ease;
}

.progress-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-spinner {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-lg);
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.progress-card h3 {
  color: #fff;
  font-size: var(--font-xl);
  margin: 0 0 var(--space-sm);
  font-weight: var(--font-semibold);
}

.progress-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-sm);
  margin: 0;
  line-height: 1.5;
}

/* Success message - shown after restructure completes */

.restructure-success-message {
  margin-top: var(--space-lg);
  animation: slideIn 0.4s ease;
}

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

.success-card {
  background: linear-gradient(135deg, #065f46 0%, #064e3b 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.success-card h4 {
  color: #fff;
  font-size: var(--font-lg);
  margin: 0 0 var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.success-card h4::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #10b981;
  border-radius: 50%;
  font-size: calc(14px * var(--type-scale));
}

.success-details {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-sm);
  margin: var(--space-sm) 0 var(--space-lg);
  line-height: 1.6;
}

.success-details strong {
  color: #fff;
  font-weight: var(--font-semibold);
}

.success-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.success-actions button {
  flex: 1;
  min-width: 120px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.view-chapters-btn {
  background: #10b981;
  color: #fff;
}

.view-chapters-btn:hover {
  background: #059669;
  transform: translateY(-1px);
}

.undo-restructure-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.undo-restructure-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.close-success-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  min-width: auto;
  flex: 0;
  padding: var(--space-sm);
}

.close-success-btn:hover {
  color: #fff;
}

/* Draft chapter badge */

/* Chapter narrative display */

/* Mobile responsive */

@media (max-width: 767px) {
  .progress-card {
    padding: var(--space-xl);
  }

  .success-actions {
    flex-direction: column;
  }

  .success-actions button {
    width: 100%;
  }
}

/* ============================================================================
   v7.27.0: Browse Media Enhancements
   - Checkbox selection with persistence
   - Size toggle (compact/medium/large)
   - Selection bar with actions
   - Delete, AI analyze buttons
   ============================================================================ */

/* Size toggle button */

.media-size-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: calc(1.2rem * var(--type-scale));
  transition: all 0.2s;
}

.media-size-toggle-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-primary);
}

/* Grid size variations */

.media-grid.size-compact {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.media-grid.size-medium {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.media-grid.size-large {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* Size-specific card adjustments */

.media-grid.size-compact .media-card-thumbnail {
  height: 80px;
}

.media-grid.size-compact .media-card-info {
  padding: 6px 8px;
}

.media-grid.size-compact .media-card-title {
  font-size: calc(11px * var(--type-scale));
}

.media-grid.size-compact .media-card-meta {
  display: none;
}

.media-grid.size-large .media-card-thumbnail {
  height: 200px;
}

.media-grid.size-large .media-card-info {
  padding: var(--space-md);
}

/* Media card checkbox */

.media-card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.media-card-checkbox input[type="checkbox"] {
  display: none;
}

.media-checkbox-visual {
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.media-card-checkbox:hover .media-checkbox-visual {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 1);
}

.media-card-checkbox input[type="checkbox"]:checked + .media-checkbox-visual {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.media-card-checkbox input[type="checkbox"]:checked + .media-checkbox-visual::after {
  content: '✓';
  color: white;
  font-size: calc(14px * var(--type-scale));
  font-weight: bold;
}

/* Selected card styling */

.media-card.selected {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

.media-card.selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--color-primary-rgb, 102, 126, 234), 0.1);
  pointer-events: none;
}

/* Media card action buttons */

.media-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.media-card:hover .media-card-actions {
  opacity: 1;
}

.media-action-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(14px * var(--type-scale));
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: all 0.15s;
}

.media-action-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.media-action-btn.danger:hover {
  background: #fee2e2;
}

/* Primary action button (Review) */

.media-action-btn.primary:hover {
  background: #dbeafe;
}

/* Selection bar */

.media-selection-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, #764ba2 100%);
  color: white;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  animation: slideUp 0.2s ease-out;
}

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

.selection-bar-left,

.selection-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.selection-count {
  font-weight: var(--font-semibold);
  font-size: var(--font-base);
}

.selection-btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.selection-btn.primary {
  background: white;
  color: var(--color-primary);
}

.selection-btn.primary:hover {
  background: #f0f0f0;
}

.selection-btn.secondary {
  background: rgba(255,255,255,0.2);
  color: white;
}

.selection-btn.secondary:hover {
  background: rgba(255,255,255,0.3);
}

.selection-btn.danger {
  background: #ef4444;
  color: white;
}

.selection-btn.danger:hover {
  background: #dc2626;
}

/* Fade out animation for deleted items */

@keyframes fadeSlideOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* Mobile adjustments for selection bar */

@media (max-width: 640px) {
  .media-selection-bar {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .selection-bar-left,
  .selection-bar-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .selection-btn {
    padding: 6px 12px;
    font-size: calc(12px * var(--type-scale));
  }

  /* Compact checkbox for mobile */
  .media-card-checkbox {
    top: 4px;
    left: 4px;
  }

  .media-checkbox-visual {
    width: 20px;
    height: 20px;
  }

  /* Compact actions for mobile */
  .media-card-actions {
    top: 4px;
    right: 4px;
  }

  .media-action-btn {
    width: 24px;
    height: 24px;
    font-size: calc(12px * var(--type-scale));
  }

  /* Always show actions on mobile (no hover) */
  .media-card .media-card-actions {
    opacity: 1;
  }
}

/* Size toggle compact adjustments */

.media-grid.size-compact .media-card-checkbox {
  top: 4px;
  left: 4px;
}

.media-grid.size-compact .media-checkbox-visual {
  width: 18px;
  height: 18px;
}

.media-grid.size-compact .media-card-actions {
  top: 4px;
  right: 4px;
  gap: 2px;
}

.media-grid.size-compact .media-action-btn {
  width: 22px;
  height: 22px;
  font-size: calc(11px * var(--type-scale));
}

/* ============================================================================
   Unified Media Browser Modal
   Full-window modal for consolidated media browsing
   ============================================================================ */

/* Modal overlay - v7.47.0: Fill app content area (below header, right of sidebar) */

.media-browser-modal-overlay {
  position: fixed;
  /* Position to fill app content area */
  top: 65px;  /* Height of top nav */
  left: 200px;  /* Width of side nav */
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  animation: fadeIn 0.2s ease-out;
}

/* Modal container - v7.47.0: Fill entire overlay area */

.media-browser-modal {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  background: var(--color-bg);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  animation: browserSlideUp 0.25s ease-out;
}

.media-browser-modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

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

/* Modal header */

.media-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  flex-shrink: 0;
}

.media-browser-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.media-browser-close-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.media-browser-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.media-browser-close-btn svg {
  stroke: currentColor;
}

.media-browser-title-area {
  display: flex;
  flex-direction: column;
}

.media-browser-title {
  font-size: var(--font-xl);
  font-weight: var(--font-semibold);
  margin: 0;
}

.media-browser-subtitle {
  font-size: var(--font-sm);
  opacity: 0.85;
  margin: 0;
}

.media-browser-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Header action buttons */

.media-browser-action-btn {
  padding: 8px 14px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.media-browser-action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.media-browser-action-btn.upload {
  background: var(--color-success);
}

.media-browser-action-btn.upload:hover {
  background: #059669;
}

.media-browser-action-btn.ai {
  background: #f59e0b;
}

.media-browser-action-btn.ai:hover {
  background: #d97706;
}

/* Toolbar section */

.media-browser-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.media-browser-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  max-width: 400px;
}

.media-browser-search-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-sm);
  background: white;
  transition: all 0.2s;
}

.media-browser-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.media-browser-search-btn {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: white;
  cursor: pointer;
  transition: all 0.15s;
}

.media-browser-search-btn:hover {
  background: var(--color-bg-secondary);
}

/* Filters section */

.media-browser-filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.media-browser-filter-select {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-sm);
  background: white;
  cursor: pointer;
  min-width: 140px;
}

.media-browser-filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Stats display */

.media-browser-stats {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  white-space: nowrap;
}

/* Grid container - scrollable area */

.media-browser-grid-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
}

/* Grid in browser modal */

.media-browser-grid {
  display: grid;
  gap: var(--space-md);
}

/* Grid size variations */

.media-browser-grid.size-compact {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-sm);
}

.media-browser-grid.size-medium {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.media-browser-grid.size-large {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* Browser media card */

.browser-media-card {
  position: relative;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  cursor: pointer;
}

.browser-media-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.browser-media-card.selected {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

/* Card thumbnail */

.browser-card-thumbnail {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.browser-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.browser-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: calc(2rem * var(--type-scale));
  color: var(--color-text-lighter);
  background: var(--color-bg-tertiary);
}

/* Card info section */

.browser-card-info {
  padding: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.browser-card-title {
  font-size: var(--font-xs);
  font-weight: var(--font-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.browser-card-meta {
  font-size: calc(10px * var(--type-scale));
  color: var(--color-text-lighter);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Card checkbox */

.browser-card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
}

.browser-card-checkbox input {
  display: none;
}

.browser-checkbox-visual {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.browser-card-checkbox input:checked + .browser-checkbox-visual {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.browser-checkbox-visual::after {
  content: '✓';
  color: white;
  font-size: calc(14px * var(--type-scale));
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.15s;
}

.browser-card-checkbox input:checked + .browser-checkbox-visual::after {
  opacity: 1;
}

/* Card actions (shown on hover) */

.browser-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.browser-media-card:hover .browser-card-actions {
  opacity: 1;
}

.browser-action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(13px * var(--type-scale));
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.browser-action-btn:hover {
  background: white;
  transform: scale(1.1);
}

.browser-action-btn.danger:hover {
  background: #fee2e2;
  color: var(--color-danger);
}

/* Loading state */

.media-browser-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  grid-column: 1 / -1;
}

.media-browser-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.media-browser-loading p {
  margin-top: var(--space-md);
  color: var(--color-text-light);
}

/* Empty state */

.media-browser-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-light);
  grid-column: 1 / -1;
}

.media-browser-empty h3 {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  margin: var(--space-md) 0 var(--space-sm);
  color: var(--color-text);
}

.media-browser-empty p {
  font-size: var(--font-sm);
  color: var(--color-text-lighter);
  margin-bottom: var(--space-md);
}

.media-browser-empty .upload-btn,

.media-browser-empty .retry-btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: white;
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.15s;
}

.media-browser-empty .upload-btn:hover,

.media-browser-empty .retry-btn:hover {
  background: #2563eb;
}

/* Selection bar in browser modal */

.media-browser-selection-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, #764ba2 100%);
  color: white;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  animation: browserSlideUpBar 0.2s ease-out;
  z-index: 10;
}

@keyframes browserSlideUpBar {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.media-browser-selection-bar .selection-bar-left,

.media-browser-selection-bar .selection-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Compact size adjustments in browser */

.media-browser-grid.size-compact .browser-card-checkbox {
  top: 4px;
  left: 4px;
}

.media-browser-grid.size-compact .browser-checkbox-visual {
  width: 18px;
  height: 18px;
}

.media-browser-grid.size-compact .browser-checkbox-visual::after {
  font-size: calc(11px * var(--type-scale));
}

.media-browser-grid.size-compact .browser-card-actions {
  top: 4px;
  right: 4px;
}

.media-browser-grid.size-compact .browser-action-btn {
  width: 22px;
  height: 22px;
  font-size: calc(11px * var(--type-scale));
}

.media-browser-grid.size-compact .browser-card-info {
  display: none;
}

/* Large size adjustments in browser */

.media-browser-grid.size-large .browser-card-info {
  padding: var(--space-md);
}

.media-browser-grid.size-large .browser-card-title {
  font-size: var(--font-sm);
}

.media-browser-grid.size-large .browser-card-meta {
  font-size: calc(11px * var(--type-scale));
}

/* Mobile responsiveness for browser modal - v7.47.0 */

@media (max-width: 768px) {
  .media-browser-modal-overlay {
    /* Mobile: full screen below header, no sidebar */
    top: 56px;
    left: 0;
  }

  .media-browser-modal {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .media-browser-header {
    padding: var(--space-sm) var(--space-md);
  }

  .media-browser-title {
    font-size: var(--font-base);
  }

  .media-browser-header-actions {
    gap: 4px;
  }

  .media-browser-action-btn {
    padding: 6px 10px;
    font-size: calc(12px * var(--type-scale));
  }

  .media-browser-action-btn span:last-child {
    display: none;
  }

  .media-browser-toolbar {
    padding: var(--space-sm) var(--space-md);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .media-browser-search {
    max-width: none;
  }

  .media-browser-filters {
    justify-content: space-between;
  }

  .media-browser-grid-container {
    padding: var(--space-md);
  }

  .media-browser-selection-bar {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .media-browser-selection-bar .selection-bar-left,
  .media-browser-selection-bar .selection-bar-right {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Always show actions on mobile */
  .browser-media-card .browser-card-actions {
    opacity: 1;
  }
}

/* ============================================================================
   UNIFIED FFA AI MODAL
   Brain icon accessible from anywhere - single AI entity for the archive
   ============================================================================ */

/* Brain icon button in top nav */

.nav-brain-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  border: none;
  font-size: calc(20px * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.nav-brain-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.nav-brain-btn:active {
  transform: scale(0.95);
}

/* Unified AI Modal - Fergi AI assistant "always-on-top" tier */

.unified-ai-modal {
  position: fixed;
  /* Position to fill App Panel (below header, right of sidebar) */
  top: var(--nav-height);
  left: var(--side-nav-width);
  right: 0;
  bottom: 0;
  background: transparent;
  display: none;
  /* Strictly above the face-tagging surfaces (face-training 10003,
     Review grid 10100, mobile face sheets 10300) so invoking
     Fergi AI from within Face Tagging paints on top; below .um-overlay
     (10400, UMI Heart). See Z_INDEX_HIERARCHY.md Tier 6.
     (refining-modal-tagging-surfaces #5 — was 10003, tied with Face
     Tagging so DOM order won and Fergi AI opened behind it.) */
  z-index: 10350;
}

/* THE CASCADE DELTA (opening-fergi-apertures S7, closing audit item P5 for this
   modal). `.is-open` is ModalManager's canonical open-state and `.active` is
   this room's legacy driver; four of Fergi's five open paths wrote only the
   latter, so the manager believed the room shut while a member sat in it. Both
   are now written as a pair by _fergiSetModalOpenClass() in unified-ai-modal.js,
   and every Fergi rule that keyed on `.active` accepts either.

   `:is()` takes the specificity of its most specific argument, so `.active` →
   `:is(.active, .is-open)` is a class-for-class swap at IDENTICAL specificity
   (0,2,0 here). Nothing in the six stylesheets that style this room re-orders,
   which is what makes the delta behavior-identical rather than merely meant to
   be. Nine rules across styles.css, mobile.css, mobile-ai-sheet.css,
   fergi-ai-vessel.css and fergi-presentation.css moved together. */
.unified-ai-modal:is(.active, .is-open) {
  display: block;
}

/* Prevent scroll behind modal */

body.ai-modal-open {
  overflow: hidden;
}

body.ai-modal-open .main-content {
  overflow: hidden;
}

.unified-ai-container {
  width: 100%;
  height: 100%;
  /* THE MIND CONSOLE'S PLANE (opening-fergi-apertures S7). One substitution, in
     the room's own stylesheet, with the current value preserved as the fallback
     — filling-bespoke-vessels' room-vessel pattern exactly. --ffvr-surface is
     defined ONLY on this element, in launcher-visual.css, and that file has no
     <link> in index.html: the overlay attaches it only when both launcher flags
     resolve on. Flags off → no stylesheet → no token → `white`, byte-identical
     to before this session.

     It matters that this is a real substitution rather than a reliance on the
     chrome wash. The wash paints frame.surface behind the room's content and
     WOULD cover an opaque white plane, so the room would look right as long as
     the wash lands — but a wash that is skipped for any reason (a chrome pass
     that threw, a room not yet built at measurement time) would leave the S7
     token block's light ink on a white plane, which is invisible text. The pair
     moves together or not at all. */
  background: var(--ffvr-surface, white);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Comment mode: large modal centered in App Panel, focused on feedback */

/* Header */

.unified-ai-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
  gap: 12px;
}

.unified-ai-minimize {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.unified-ai-minimize:hover {
  background: rgba(255, 255, 255, 0.3);
}

.unified-ai-minimize svg {
  stroke: white;
}

.unified-ai-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  /* ⛔ THE EXIT MUST ALWAYS FIT (welcome-walk P0-4/P2-10, measured 2026-08-29).
     Flexbox floors a flex item at min-width:auto (its content width), so on a
     390px phone this title (187px) plus the context chip (91px) pushed the
     44px close button to x=382–426 — the ✕ of the family's PRIMARY modal hung
     off the right edge of the viewport, untappable, clipped by the container's
     overflow:hidden. min-width:0 lets the text members shrink and truncate;
     the fixed-size buttons (flex 0 0 auto) then always fit. */
  min-width: 0;
  overflow: hidden;
}

.unified-ai-title span:last-child {
  font-weight: 600;
  font-size: calc(16px * var(--type-scale));
  /* P0-4/P2-10: truncate rather than push the ✕ off-viewport (see
     .unified-ai-title's min-width:0 note). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Persistent model badge in AI header */

.ai-header-model-badge {
  font-size: calc(11px * var(--type-scale));
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.unified-ai-context {
  display: none;
  /* P0-4/P2-10: when a mode shows this chip it shares the header row with the
     close button — it must yield, never push the ✕ out (measured doing exactly
     that at 390px, 2026-08-29). */
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* New Conversation button in header (icon-only) */

.unified-ai-new-convo-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.unified-ai-new-convo-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.unified-ai-new-convo-btn:active {
  transform: scale(0.95);
}

/* Exit Studio button — hidden by default, visible in Story Studio mode */

.unified-ai-exit-studio-btn {
  display: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 6px 12px;
  color: white;
  font-size: calc(13px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.unified-ai-exit-studio-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.unified-ai-exit-studio-btn:active {
  transform: scale(0.98);
}

/* Story Studio mode — deeper purple header gradient */

/* In Story Studio mode: hide New Chat, show Exit Studio */

.context-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: calc(12px * var(--type-scale));
  white-space: nowrap;
}

/* Messages Area - v7.47.0: Fill available space */

.unified-ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* min-height: 0, NOT 200px — the standard idiom for a scrollable flex child,
     already used by the welcome card above (`.wn-narrative-card` context).

     A flex item's min-height is a FLOOR ON SHRINKING, and this is the only item
     in the column that can afford to give: it scrolls. At 200px it refused, so
     in a vessel shorter than header + 200px + composer the composer became the
     only thing left able to shrink — and with the vessel's `overflow: hidden`
     it was pushed past the bottom edge and vanished. The member saw a chat they
     could read and could not answer, with nothing on screen to explain why;
     resizing the vessel larger brought it back. See the paired flex-shrink: 0
     on .unified-ai-input-area, which is the other half of this fix. */
  min-height: 0;
  max-height: none;
  /* THE WELL MOVES WITH THE ROOM (opening-fergi-apertures S8 root fix).

     No text is painted directly on the well — every word lives inside a bubble
     — so this line is not part of the legibility defect and is not claimed as
     one. It is here because the same substitution that makes the bubbles the
     raised plane would otherwise leave them floating on a near-white slab
     inside a #0B0924 frame, which is not the Mind Console and is not the
     lighter room either. Surface and ink move together, and so do the two
     surfaces. Flags-off resolves the fallback: byte-identical. */
  background: var(--ffvr-surface, #f9fafb);
}

.unified-ai-message {
  display: flex;
  gap: 10px;
  max-width: 85%;
}

.unified-ai-message.user {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.unified-ai-message.assistant {
  align-self: flex-start;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(18px * var(--type-scale));
  flex-shrink: 0;
  /* The avatars KEEP their identity gradients — they are how a member tells
     their own turn from Fergi's at a glance — and therefore they stay LIGHT
     planes in both flag states. A light plane inside the vessel must state its
     own ink, because the room's ink is now light and ink inherits where
     background does not. #1f2937 is the value this glyph already computed to
     with the flags off (the document default the container never overrode), so
     declaring it here is byte-identical pre-train and correct post-train.
     See the S8 header block above .unified-ai-messages. */
  color: #1f2937;
}

.unified-ai-message.user .message-avatar {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.message-content {
  /* THE BUBBLE MOVES WITH THE ROOM (opening-fergi-apertures S8 root fix).

     S7 substituted ONE pair on .unified-ai-container — `background:
     var(--ffvr-surface, white)` and `color: var(--ffvr-ink)` — and stated the
     governing principle exactly right: *the pair moves together or not at all*.
     The pair does move together, but only on the element that DECLARES it.
     Ink inherits; background does not. So the assistant bubble kept its
     hardcoded `white` while the light ink poured down into it, and every
     assistant message painted #F6F2FF on #FFFFFF — 1.10:1, invisible — in the
     default production flag posture. The container itself measured a true
     17.67:1 the whole time, on a plane no conversation is ever written on.

     The fix is the room-vessel substitution the rest of the vocabulary already
     uses: the bubble becomes the vessel's RAISED plane, so the light ink is
     correct rather than merely tolerated, and flags-off resolves the fallback
     and is byte-identical to before. The user bubble is untouched — its own
     rule below is more specific and carries its own gradient AND its own ink,
     which is exactly why it never broke. */
  background: var(--ffvr-surface-raised, white);
  padding: 10px 14px;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
}

.unified-ai-message.user .message-content {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
}

.message-text {
  font-size: calc(14px * var(--type-scale));
  line-height: 1.6;
}

/* User messages: plain text, preserve whitespace */

.unified-ai-message.user .message-text {
  white-space: pre-wrap;
}

/* AI messages: rendered markdown styling */

.unified-ai-message.assistant .message-text p {
  margin: 0 0 8px 0;
}

.unified-ai-message.assistant .message-text p:last-child {
  margin-bottom: 0;
}

.unified-ai-message.assistant .message-text strong {
  font-weight: 600;
  /* This literal is the reason the defect was PROVABLE rather than argued: it
     is the one element in the assistant bubble that states its own ink, and it
     was the one element that stayed legible while everything around it went to
     1.10:1. Now that the bubble is the vessel's raised plane, a hardcoded dark
     #1e293b would be the thing that disappears — so it moves into the
     vocabulary, with its own value as the flags-off fallback. */
  color: var(--ffvr-ink, #1e293b);
}

.unified-ai-message.assistant .message-text em {
  font-style: italic;
}

.unified-ai-message.assistant .message-text ul,

.unified-ai-message.assistant .message-text ol {
  margin: 6px 0;
  padding-left: 20px;
}

.unified-ai-message.assistant .message-text li {
  margin: 2px 0;
  line-height: 1.4;
}

.unified-ai-message.assistant .message-text li p {
  margin: 0;
}

.unified-ai-message.assistant .message-text ol {
  list-style: decimal;
}

.unified-ai-message.assistant .message-text ul {
  list-style: disc;
}

.message-time {
  font-size: calc(11px * var(--type-scale));
  /* De-emphasised by design, but de-emphasised is not the same as unreadable.
     On the raised plane #9ca3af still clears the floor; routing it through the
     muted ink is what makes it de-emphasised RELATIVE TO THE ROOM it is in
     rather than relative to a white bubble that no longer exists. The literal
     survives as the flags-off fallback, where this row's 2.54:1 is a
     PRE-EXISTING shortfall this train did not introduce and does not silently
     fix — it is on the SR's flagged list for Joe. */
  color: var(--ffvr-ink-muted, #9ca3af);
  margin-top: 4px;
}

.unified-ai-message.user .message-time {
  color: rgba(255, 255, 255, 0.7);
}

.memory-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: calc(16px * var(--type-scale));
}

/* Message meta container for time and model badge */

.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* Model badge showing which AI model was used */

.model-badge {
  font-size: calc(10px * var(--type-scale));
  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
  color: #7c3aed;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Story Studio badge — purple gradient pill */

/* Story Studio: Job progress widget in chat */

.ai-job-progress {
  margin: 8px 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f0f0ff 0%, #f5f0ff 100%);
  border: 1px solid #e0d8f0;
  border-radius: 12px;
  font-size: calc(13px * var(--type-scale));
}

.job-progress-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #4c1d95;
}

.job-progress-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(102, 126, 234, 0.3);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.job-progress-bar-container {
  height: 6px;
  background: rgba(102, 126, 234, 0.15);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.job-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.job-progress-detail {
  color: #6b7280;
  font-size: calc(11px * var(--type-scale));
}

.ai-job-progress.job-complete {
  border-color: #10b981;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}

.ai-job-progress.job-complete .job-progress-label {
  color: #059669;
}

.ai-job-progress.job-error {
  border-color: #ef4444;
  background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
}

.ai-job-progress.job-error .job-progress-label {
  color: #dc2626;
}

/* Button guide in AI welcome message */

.ai-button-guide {
  margin-top: 8px;
  padding: 6px 10px;
  background: #f0f9ff;
  border-radius: 8px;
  color: #0369a1;
  font-size: calc(12px * var(--type-scale));
  line-height: 1.4;
}

.ai-button-guide strong {
  color: #0284c7;
}

/* Loading indicator */

.unified-ai-message.loading .message-content {
  /* Same substitution as .message-content — this rule re-declares the
     background, so it would otherwise reintroduce the white plane for exactly
     the moments the member is watching Fergi think. */
  background: var(--ffvr-surface-raised, white);
  padding: 12px 20px;
}

.thinking-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.thinking-label {
  font-size: calc(14px * var(--type-scale));
  color: #8b5cf6;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
}

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

.loading-dots span {
  width: 8px;
  height: 8px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }

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

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Input Area */

.unified-ai-input-area {
  display: flex;
  flex-direction: column;
  /* The composer is NEVER the thing that gives. Without this it inherits
     flex-shrink: 1 and is a candidate for squeezing whenever the column runs
     short — and a chat you cannot type into is not a degraded chat, it is a
     broken one. Belt and braces with min-height: 0 on the messages well: that
     one makes the scroll area able to yield, this one makes the composer
     ineligible to. Either alone leaves a height at which the composer goes. */
  flex-shrink: 0;
  padding: 12px 16px;
  background: white;
  border-top: 1px solid #e5e7eb;
}

.unified-ai-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* ══ #4a/#4b — THE CHROME YIELDS TO THE CONTENT ════════════════════════════
   ceding-welcome-precedence S3, 2026-09-20. Joe, walking as Mary on an iPhone:
   two stacked header bars, and "most of the elements within the second panel
   are themselves unnecessary, not merely redundant" — only the panel above and
   the close control need clearly survive. And: the input panel should be
   shorter.

   ── WHY THIS IS MOBILE-ONLY, AND WHY THAT IS NOT A DODGE ──────────────────
   The stacking only HAPPENS on mobile. There, `.top-nav` (56 px: hamburger ·
   "Fergi AI" · brain avatar) sits directly above `.unified-ai-header`, which
   was repeating the same identity in a title so crowded that a previous train
   had to add `min-width: 0` + ellipsis just to keep the ✕ on screen — Joe's
   phone rendered it "Fergus…". On DESKTOP this same bar is the vessel's window
   title bar AND its drag handle (fergi-ai-vessel.css § Header), and there is no
   bar above it; retiring its title there would leave the window nameless.

   ⚠️ So these three are RETIRED PER SURFACE rather than deleted from the
   markup, and that is a deliberate departure from Joe's "remove, do not hide"
   which is named in WALK_NOTES_FOR_JOE.md as an open question rather than
   quietly taken. The 🧠 — the one element with no job on ANY surface — WAS
   deleted outright (index.html, and its two CSS homes, and its JS swap).
   This is S1's `#unifiedAISayItBtn` precedent: one shared markup, a surface
   where the element is the only one of its kind, keep it and declare it.

   · .unified-ai-title      — duplicated by .top-nav's own "Fergi AI" 56 px
                              above. ⛔ NOT deleted: #unifiedAITitle is this
                              dialog's accessible name (aria-labelledby, pinned
                              by fergi-mind-console.smoke.cjs) and its Story
                              Studio mode label. A display:none element that is
                              DIRECTLY REFERENCED by aria-labelledby is still
                              used for the accessible name, so the name survives
                              here; the duplicate reading of it does not.
   · .unified-ai-new-convo-btn — "start a fresh conversation" is meaningless
                              while the greeting is still reading, and the
                              mobile sheet path already retired this same
                              sparkle (ai-mobile-sheet.js § 3) by folding
                              new-chat into its right-side AI icon.
   · #unifiedAIContext      — the "👋 Welcome" pill, directly above a card whose
                              first words are "Welcome to the family vault".

   `justify-content: space-between` replaces the flex:1 spacer the title used to
   provide, so minimize stays left and the ✕ stays hard right — the P0-4/P2-10
   invariant (THE EXIT MUST ALWAYS FIT) is preserved by construction now rather
   than by truncation.

   ── THE FLOOR, AND THAT WE ARE ON IT ──────────────────────────────────────
   ⛔ Nothing here shrinks a touch target. `--ffa-min-touch-target: 44px`
   (mobile-tab-bar.css) is untouched; the space comes from the removed elements
   and from padding. Measured at 390×844 on webkit-iphone, family tier, against
   THIS worktree's build:

       .unified-ai-header    69 → 53 px   (44 px close + 4+4 padding + 1 border)
       .unified-ai-input-area 69 → 57 px   (44 px row  + 6+6 padding + 1 border)
       .unified-ai-messages  602 → 630 px  ⭐ +28 px of content
       C6 effective-44 targets: 4/4 green, before and after.

   Both bands now sit exactly ON the 44 px floor — there is no further vertical
   space to recover here without either violating the floor or dropping one of
   the two bars entirely. That second option is Joe's ruling, not this
   session's, and it is question (v) in the walk notes.

   `!important` on the input area is not laziness: mobile.css §"Input area"
   already declares `padding-bottom: calc(12px + safe-area) !important`, and an
   !important is only beaten by another. Specificity (#unifiedAIModal …) is what
   orders the two, so this wins regardless of file load order. The safe-area
   term is CARRIED THROUGH, not dropped — a phone with a home indicator still
   gets its inset. */
@media (max-width: 767px) {
  #unifiedAIModal .unified-ai-header {
    padding: 4px 8px;
    justify-content: space-between;
  }
  #unifiedAIModal .unified-ai-header .unified-ai-title,
  #unifiedAIModal .unified-ai-header .unified-ai-new-convo-btn,
  #unifiedAIModal .unified-ai-header #unifiedAIContext {
    display: none;
  }
  #unifiedAIModal .unified-ai-input-area {
    padding: 6px 12px !important;
    padding-bottom: calc(6px + var(--mobile-safe-area-bottom, 0px)) !important;
  }
  /* C7, measured: the placeholder needed 54 px of content in a 42 px box, so
     Joe's phone cut "Ask me anything about the Ferguson family..." mid-line.
     The box is already AT the 44 px floor and must not grow, so the placeholder
     is the thing that yields — one line, ellipsised. The member's own typed
     text is untouched; only the hint truncates. */
  #unifiedAIInput::placeholder {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

/* Image paste preview strip */

.ai-image-preview-strip {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  overflow-x: auto;
  max-height: 80px;
}

.ai-preview-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.ai-preview-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #e5e7eb;
}

.ai-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  border: none;
  font-size: calc(14px * var(--type-scale));
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image thumbnails in sent messages */

.message-image-thumbs {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.message-image-thumb {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  object-fit: cover;
}

/* `.unified-ai-voice-btn` (the Fergi AI composer's plain dictation mic) was removed
   here by ceding-welcome-precedence S1, 2026-09-20 (issue #3) along with its markup:
   the mic press already opened Say It, so it was a second door wearing a mic glyph.
   ⚠️ `@keyframes pulse` below STAYS — styles.css:9385 is a second, unrelated consumer. */

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Conversation control — opening-fergi-apertures S4, Joe I.2.
   PRESENT AND INERT BY RULING. It is deliberately rendered at reduced emphasis
   rather than hidden: the member should see that Fergi is built to hold a
   spoken conversation and that this part is not ready yet. It never counts as
   voice capability anywhere in telemetry. */
/* `hidden` must actually hide a control the board lays out with display:flex.
   The UA sheet's `[hidden] { display: none }` loses to any rule that sets
   `display`, so without this the retired inert conversation control (see
   _applyFergiVoiceModeVisibility) would stay visible while claiming to be
   hidden — the exact silent failure the attribute is meant to prevent.
   Written on the BOARD, not on one button, so every control the contract can
   retire on any manifestation obeys the same rule. (opening-fergi-apertures S7) */
.fic-board [data-fic-role][hidden] {
  display: none !important;
}

/* ── The board's live region (opening-fergi-apertures S7) ───────────────────
   Visually hidden, NOT `display:none` — a display:none live region is removed
   from the accessibility tree and announces nothing, which is the failure this
   element exists to fix. `position:absolute` also takes it out of the composer's
   flex flow, so the row's `gap` does not open a phantom column beside the send
   button in the adopting host. */
.fic-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── The mic's non-idle states (opening-fergi-apertures S7) ─────────────────
   setMicState() has always written an honest aria-label and title for `denied`,
   `failed` and `transcribing`, and the button has always LOOKED exactly like an
   idle mic in all three. A member whose browser refused the microphone saw
   nothing change.

   The manifest's own accessibility contract says colour is never the sole
   signal (`shared.accessibility.colorNeverSoleSignal`), so each state carries a
   second, non-colour mark: a dashed ring for the two error states and reduced
   opacity plus the disabled cursor for `transcribing`. The colours read the
   room's vocabulary, so the Mind Console's `--ffvr-danger` is what a denial is
   drawn in, and the pre-vessel fallback is the value that was there before. */
.fic-board [data-fic-role="mic"][data-fic-mic-state="denied"],
.fic-board [data-fic-role="mic"][data-fic-mic-state="failed"] {
  color: var(--ffvr-danger, #dc2626);
  border: 1px dashed var(--ffvr-danger, #dc2626);
}

.fic-board [data-fic-role="mic"][data-fic-mic-state="transcribing"] {
  opacity: 0.6;
  cursor: progress;
}

/* `.unified-ai-conversation-btn` (the inert speech bubble, Joe I.2) was removed here
   by ceding-welcome-precedence S1, 2026-09-20 (issue #3) along with its markup — the
   ruling that put it there is withdrawn for this surface in
   `fergi-contracts.js` §4 `CONTROL_BOARD_DOM.supersededRoles.full_modal`. */

/* Voice Mode button — launches conversational voice (ElevenLabs Agent in Joe's voice).
   The ADMIN-ONLY live ElevenLabs launcher, and the only conversation-ish control left in
   this row. Untouched by S1's removals: Joe walked as a family member and never saw it.
   Producer-only; reveal handled in JS. */
.unified-ai-voice-mode-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5b7 0%, #6366f1 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.unified-ai-voice-mode-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(14, 165, 183, 0.35);
}

.unified-ai-voice-mode-btn.is-live {
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.3);
}

/* ElevenLabs conversational-voice widget lives at document.body level and
   defaults to ~z-index 1000, which sits behind FFA modals (10000+). Lift it
   above modals so the "Start a call" control is reachable while the Fergi
   AI modal is open. */
elevenlabs-convai {
  z-index: 25000 !important;
  position: relative;
}

.unified-ai-input-area textarea {
  flex: 1;
  resize: none;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: calc(14px * var(--type-scale));
  font-family: inherit;
  /* Default to 2 lines of text height */
  min-height: 60px;
  max-height: 120px;
  line-height: 1.4;
}

.unified-ai-input-area textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.unified-ai-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.unified-ai-send-btn:hover {
  transform: scale(1.1);
}

.unified-ai-send-btn svg {
  stroke: white;
  width: 20px;
  height: 20px;
}

/* opening-fergi-apertures S5: the send control while a turn is in flight.
   It IS the stop control then (FergiInputControlBoard.setBusy), so it has to
   read as a different action rather than as a disabled send — a control that
   looks like Send and does Stop is worse than either. Keyed on the board's
   own state attribute so any host adopting the board inherits the treatment
   without re-deriving when to apply it. */
.unified-ai-send-btn[data-fic-busy="true"],
.fic-send[data-fic-busy="true"] {
  background: linear-gradient(135deg, #e05252 0%, #b93b3b 100%);
}

.unified-ai-send-btn[data-fic-busy="true"] svg rect,
.fic-send[data-fic-busy="true"] svg rect {
  fill: white;
  stroke: white;
}

@media (prefers-reduced-motion: reduce) {
  .unified-ai-send-btn { transition: none; }
  .unified-ai-send-btn:hover { transform: none; }
}

/* ── Reduced motion in the Mind Console (opening-fergi-apertures S7) ────────
   The manifest's shared accessibility contract promises
   `reducedMotionRemovesAmbientMotion`, and the desktop vessel keeps that
   promise for its three shell animations (fergi-ai-vessel.css). The modal
   INTERIOR kept none of it: four animations ran forever inside the room —
   the thinking dots, the header spinner, the recording mic and the live
   conversational widget — and only the send button's transition was covered.

   THE TRAP, AND WHY `animation: none` ALONE WOULD HAVE BEEN A REGRESSION.
   `@keyframes bounce` runs `scale(0)` → `scale(1)` → `scale(0)` with
   `animation-fill-mode: both`, so its resting state is INVISIBLE. Switching the
   animation off leaves three dots of zero size, i.e. a reduced-motion member
   gets no "Fergi is thinking" indicator at all — a strictly worse experience
   than the motion. Every rule below therefore states the resting appearance
   explicitly rather than only removing the animation.

   The same rule in the other direction for the two STATE indicators: the
   recording mic and the live conversational widget pulse to say something is
   happening RIGHT NOW. Stilling them without replacement would delete a state
   signal, so each keeps a static ring at the same colour it pulses in. Motion
   is removed; meaning is not. */
@media (prefers-reduced-motion: reduce) {
  /* The thinking indicator: still, and VISIBLE — see the trap above. */
  .loading-dots span {
    animation: none;
    transform: scale(1);
  }
  /* A staggered opacity keeps the three dots reading as a group rather than as
     three identical marks, without any of them moving. */
  .loading-dots span:nth-child(1) { opacity: 0.45; }
  .loading-dots span:nth-child(2) { opacity: 0.7; }
  .loading-dots span:nth-child(3) { opacity: 1; }

  /* The job-progress spinner: a rotating ring with nothing to say when it
     stops, so it becomes a full static ring rather than a frozen partial arc
     (its border-top-color is what makes the gap that reads as motion). */
  .job-progress-spinner {
    animation: none;
    border-top-color: rgba(102, 126, 234, 0.3);
    opacity: 0.85;
  }

  /* The recording mic's entry lived here until ceding-welcome-precedence S1
     (2026-09-20, issue #3) removed `.unified-ai-voice-btn` itself. Nothing on this
     surface pulses while recording any more — the Say It sheet's breathing Halo is
     the recording indicator now, and `say-it.css` stills it under this same media
     query with its own rule. A reduced-motion entry for a control that no longer
     exists would be dead CSS pretending to be an accessibility guarantee. */

  /* The live ElevenLabs conversational session, same treatment. */
  .unified-ai-voice-mode-btn.is-live {
    animation: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 183, 0.55);
  }

  /* Insight cards arrive already in place rather than sliding in. The keyframe
     runs opacity 0 -> 1 with no fill mode, so its resting state is the visible
     one and removing it is safe — unlike `bounce` above, which is why that one
     needed an explicit transform and this one does not. */
  .ai-insight {
    animation: none;
  }
}

/* Account Setup Continue Button */

.account-setup-continue-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: calc(16px * var(--type-scale));
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.account-setup-continue-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.account-setup-continue-btn:active {
  transform: translateY(0);
}

/* Bottom Action Bar */

.unified-ai-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

.unified-ai-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.unified-ai-action-btn:hover {
  background: #f3f4f6;
  border-color: #8b5cf6;
}

.unified-ai-action-btn .action-icon {
  font-size: calc(20px * var(--type-scale));
}

.unified-ai-action-btn .action-label {
  font-size: calc(11px * var(--type-scale));
  color: #6b7280;
  font-weight: 500;
}

/* Minimized button */

.unified-ai-minimized {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  border: none;
  font-size: calc(24px * var(--type-scale));
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.unified-ai-minimized:hover {
  transform: scale(1.1);
}

/* Modal Renaissance S6 (Track B4): the Activity Dock owns minimize — the
   floating brain button is a hidden fallback for one release (markup stays;
   activity-dock.js stamps html.ffadock-ready at parse). */
html.ffadock-ready .unified-ai-minimized { display: none !important; }

.minimized-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: calc(11px * var(--type-scale));
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Responsive - v7.47.0: Full screen on mobile */

@media (max-width: 768px) {
  .nav-brain-btn {
    width: 36px;
    height: 36px;
    font-size: calc(18px * var(--type-scale));
    margin-right: 8px;
  }

  .unified-ai-modal {
    padding: 0;
    /* Mobile: full screen below header, no sidebar */
    top: 56px;
    left: 0;
  }

  .unified-ai-container {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    height: 100%;
  }

  .unified-ai-messages {
    min-height: 200px;
    max-height: none;
    flex: 1;
  }

  .unified-ai-message {
    max-width: 90%;
  }

  .unified-ai-action-btn .action-label {
    font-size: calc(10px * var(--type-scale));
  }

  .unified-ai-minimized {
    bottom: 70px;
    right: 10px;
    width: 50px;
    height: 50px;
    font-size: calc(20px * var(--type-scale));
  }
}

/* ===========================================
   Fergi AI Proactive Insights - v8.3.0
   =========================================== */

.ai-insights-container {
  padding: 0 16px 16px 16px;
  max-height: 200px;
  overflow-y: auto;
}

.ai-insights-container.hidden {
  display: none;
}

.ai-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
  border-left: 3px solid var(--color-primary, #3b82f6);
  border-radius: 8px;
  margin-bottom: 10px;
  animation: insightFadeIn 0.3s ease-out;
}

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

.ai-insight:last-child { margin-bottom: 0; }

.insight-icon {
  font-size: 1.3em;
  flex-shrink: 0;
  margin-top: 2px;
}

.insight-content {
  flex: 1;
  min-width: 0;
}

.insight-text {
  font-size: 0.9em;
  line-height: 1.4;
  color: #333;
  margin-bottom: 8px;
}

.insight-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.insight-action-btn {
  background: var(--color-primary, #3b82f6);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.insight-action-btn:hover {
  background: #2563eb;
}

.insight-action-btn:active {
  transform: scale(0.98);
}

.insight-dismiss-btn {
  background: transparent;
  border: 1px solid #ccc;
  color: #666;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.insight-dismiss-btn:hover {
  background: #f5f5f5;
  color: #333;
}

.ai-insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.ai-insights-title {
  font-size: 0.85em;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-insights-collapse-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  font-size: 0.9em;
}

/* Insight animations for dismiss */

@keyframes insightSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

.ai-insight.dismissing {
  animation: insightSlideOut 0.3s ease-out forwards;
}

/* Mobile adjustments for insights */

@media (max-width: 480px) {
  .ai-insight { padding: 10px 12px; }
  .insight-text { font-size: 0.85em; }
  .insight-actions { flex-direction: column; }
  .insight-action-btn, .insight-dismiss-btn { width: 100%; text-align: center; }
}

/* ============================================================================
   Fergi AI Presentation Modal & Output Styles (v12.1.0)
   For displaying help, images, videos, and media grids from AI actions
   ============================================================================ */

/* Presentation message in AI chat */

.presentation-message .markdown-content h1,

/* AI Media Grid (inline in chat) */

.ai-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.ai-media-grid-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ai-media-grid-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ai-media-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-media-grid-more {
  font-size: 0.85em;
  color: #666;
  text-align: center;
  padding: 8px 0;
}

/* Fergi Presentation Modal (popup) */

.fergi-presentation-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20000;
}

/* refining-portrait-surfaces S1 (Issue 7): visibility is now driven by the
   canonical ModalManager `.is-open` state (z-order + dismissal manager-owned);
   `.active` retained for any legacy direct caller during the migration window. */
.fergi-presentation-modal.active,
.fergi-presentation-modal.is-open {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mobile adjustments for presentation */

/* ============================================================================
   Fergi AI Presentation Panel Styles
   v12.2.0 - Split layout with media presentation capability
   ============================================================================ */

/* Split Layout Body - Contains Conversation and Presentation panels */

.unified-ai-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Conversation Panel - Left side (or full width when presentation hidden) */

.unified-ai-conversation-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  transition: flex 0.3s ease;
}

/* When presentation panel is visible, conversation takes 50% */

.unified-ai-body.split-view .unified-ai-conversation-panel {
  flex: 0 0 50%;
}

/* Presentation Panel - Right side (hidden by default) */

.unified-ai-presentation-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 50%;
  min-width: 0;
  max-width: 50%;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  overflow: hidden;
}

.unified-ai-presentation-panel.hidden {
  display: none;
}

/* Presentation Media Container — constrains all presentation content */
.presentation-media-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Story Summary Card in Presentation Panel */

.presentation-story-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  color: #e0e0e0;
}

.presentation-story-cover {
  max-height: 200px;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  flex-shrink: 0;
}

.presentation-story-cover img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.presentation-story-cover-placeholder {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(3rem * var(--type-scale));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 0 0 12px 12px;
  flex-shrink: 0;
}

.presentation-story-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.presentation-story-title {
  font-size: 1.3em;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.presentation-story-subtitle {
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.4;
}

.presentation-story-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.presentation-story-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75em;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

.presentation-story-badge.narrated {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.presentation-story-badge.status-published,
.presentation-story-badge.status-live {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.presentation-story-badge.status-draft {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.presentation-story-description {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.presentation-story-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.presentation-story-section-label {
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
}

.presentation-story-chapters {
  margin: 0;
  padding-left: 20px;
  max-height: 180px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.presentation-story-chapter-item {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.75);
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.presentation-story-chapter-more {
  list-style: none;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
  padding: 3px 0;
}

.presentation-story-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.presentation-story-person-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8em;
  background: rgba(102, 126, 234, 0.2);
  color: #a5b4fc;
}

.presentation-story-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}

.presentation-story-stat {
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.5);
}

.presentation-story-open-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.presentation-story-open-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ============================================
   Fergi AI Story Pane (.fergi-ai-story-pane)
   Read-only single-chapter display in the right-hand
   presentation panel. Mirrors media-pane card styling.
   ============================================ */

.fergi-ai-story-pane {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px;
  color: #e0e0e0;
  overflow-y: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.fergi-ai-story-pane-header {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
}

.fergi-ai-story-pane-story-title {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.fergi-ai-story-pane-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 1.35em;
  line-height: 1.3;
}

.fergi-ai-story-pane-chapter-num {
  padding: 2px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.fergi-ai-story-pane-chapter-title {
  font-weight: 600;
  color: #f3f3f8;
}

.fergi-ai-story-pane-audio {
  margin-bottom: 16px;
}

.fergi-ai-story-pane-audio audio {
  width: 100%;
}

.fergi-ai-story-pane-overview {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: rgba(102, 126, 234, 0.08);
  border-left: 3px solid rgba(102, 126, 234, 0.6);
  border-radius: 6px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}

.fergi-ai-story-pane-narrative {
  flex: 1;
  line-height: 1.65;
  font-size: 1em;
}

.fergi-ai-story-pane-narrative p {
  margin: 0 0 1em 0;
}

.fergi-ai-story-pane-narrative h1,
.fergi-ai-story-pane-narrative h2,
.fergi-ai-story-pane-narrative h3 {
  margin-top: 1.2em;
}

.fergi-ai-story-pane-empty {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.fergi-ai-story-pane-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  margin-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fergi-ai-story-pane--loading,
.fergi-ai-story-pane--error {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.fergi-ai-story-pane-loader {
  color: rgba(255, 255, 255, 0.6);
  padding: 40px 20px;
}

.fergi-ai-story-pane-error {
  color: #e77b7b;
  padding: 40px 20px;
}

/* ============================================
   Story Reader Panel (.story-reader-*)
   Full narrative reading view in Presentation Panel
   ============================================ */

.story-reader-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 24px;
  max-width: 100%;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Cover image with overlay */
.story-reader-cover {
  position: relative;
  width: 100%;
  max-height: 180px;
  overflow: hidden;
  border-radius: 0;
}

.story-reader-cover img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.story-reader-cover--no-image {
  background: linear-gradient(135deg, #2d1b69 0%, #1a1a2e 50%, #16213e 100%);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-reader-cover--broken {
  background: linear-gradient(135deg, #2d1b69 0%, #1a1a2e 100%);
  min-height: 200px;
}

.story-reader-cover--broken img {
  display: none;
}

.story-reader-cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 24px 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  text-align: center;
}

.story-reader-cover--no-image .story-reader-cover-overlay {
  position: relative;
  background: none;
  padding: 32px 24px;
}

.story-reader-cover-icon {
  font-size: 3em;
  margin-bottom: 12px;
  opacity: 0.6;
}

.story-reader-cover-title {
  color: #fff;
  font-size: 1.6em;
  font-weight: 700;
  margin: 0 0 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.story-reader-cover-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1em;
  font-weight: 400;
  margin: 0;
  font-style: italic;
}

/* Metadata Bar */
.story-reader-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.story-reader-meta-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.story-reader-meta-badge--status {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.story-reader-meta-badge--published {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.story-reader-meta-badge--draft {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.story-reader-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8em;
}

.story-reader-meta-icon {
  font-size: 1em;
  line-height: 1;
}

/* Table of Contents */
.story-reader-toc {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.story-reader-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}

.story-reader-toc-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.story-reader-toc-toggle {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7em;
  transition: transform 0.2s ease;
}

.story-reader-toc--collapsed .story-reader-toc-toggle {
  transform: rotate(-90deg);
}

.story-reader-toc--collapsed .story-reader-toc-list {
  display: none;
}

.story-reader-toc-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.story-reader-toc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.story-reader-toc-item:hover {
  background: rgba(167, 139, 250, 0.1);
}

.story-reader-toc-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
  font-size: 0.7em;
  font-weight: 700;
}

.story-reader-toc-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85em;
  flex: 1;
}

.story-reader-toc-audio {
  font-size: 0.85em;
  opacity: 0.6;
}

/* Chapters */
.story-reader-chapter {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: padding 0.2s ease;
}

.story-reader-chapter:last-of-type {
  border-bottom: none;
}

.story-reader-chapter-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
}

.story-reader-chapter--collapsed .story-reader-chapter-header {
  margin-bottom: 0;
}

.story-reader-chapter-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
}

.story-reader-chapter-title {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95em;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  flex: 1;
}

.story-reader-chapter-toggle {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.65em;
  transition: transform 0.2s ease;
  margin-left: auto;
}

.story-reader-chapter--collapsed .story-reader-chapter-toggle {
  transform: rotate(-90deg);
}

.story-reader-narrated-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  font-size: 0.7em;
  font-weight: 500;
  white-space: nowrap;
}

.story-reader-chapter-preview {
  display: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.82em;
  font-style: italic;
  padding: 6px 0 0 44px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.story-reader-chapter--collapsed .story-reader-chapter-preview {
  display: -webkit-box;
}

.story-reader-chapter--collapsed .story-reader-narrative,
.story-reader-chapter--collapsed .story-reader-tools-row,
.story-reader-chapter--collapsed .story-reader-media-section {
  display: none;
}

/* Compact audio control — always visible */
.story-reader-audio-control {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 44px;
}

.story-reader-audio-play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
  font-size: 0.75em;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.story-reader-audio-play:hover {
  background: rgba(167, 139, 250, 0.35);
}

.story-reader-audio-info {
  flex-shrink: 0;
}

.story-reader-audio-time {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7em;
  font-variant-numeric: tabular-nums;
}

.story-reader-audio-seek {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.story-reader-audio-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a78bfa;
  cursor: pointer;
}

/* Production tools row — hidden when collapsed */
.story-reader-tools-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px 44px;
  flex-wrap: wrap;
}

.story-reader-narrative {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88em;
  line-height: 1.65;
  padding-left: 36px;
  max-width: 100%;
  overflow-x: hidden;
}

.story-reader-narrative p {
  margin: 0 0 12px;
}

.story-reader-narrative p:last-child {
  margin-bottom: 0;
}

.story-reader-no-narrative {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Footer */
.story-reader-footer {
  display: flex;
  justify-content: center;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .story-reader-cover {
    max-height: 200px;
    border-radius: 8px 8px 0 0;
  }

  .story-reader-cover img {
    height: 200px;
  }

  .story-reader-cover--no-image {
    min-height: 140px;
  }

  .story-reader-cover-title {
    font-size: 1.25em;
  }

  .story-reader-cover-overlay {
    padding: 24px 16px 14px;
  }

  .story-reader-meta-bar {
    padding: 10px 16px;
    gap: 8px;
  }

  .story-reader-toc {
    padding: 10px 16px;
  }

  .story-reader-toc-item {
    padding: 5px 6px;
  }

  .story-reader-chapter {
    padding: 14px 16px;
  }

  .story-reader-narrative {
    padding-left: 0;
    font-size: 0.9em;
    line-height: 1.65;
  }

  .story-reader-chapter-preview {
    padding-left: 0;
  }

  .story-reader-chapter-number {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 0.8em;
  }

  .story-reader-narrated-badge {
    display: none;
  }

  .story-reader-footer {
    padding: 14px 16px;
  }

  .story-reader-media-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
  }
  .story-reader-media-thumb {
    height: 60px;
  }
  .story-reader-media-featured {
    height: 80px;
  }
}

/* ============================================
   Story Reader — Chapter Media Browser
   Namespace: .story-reader-media-*
   ============================================ */

.story-reader-media-section {
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 6px;
}

.story-reader-media-header {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 0;
    user-select: none;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.story-reader-media-header:hover {
    opacity: 1;
}

.story-reader-media-toggle {
    font-size: 0.65em;
    transition: transform 0.2s ease;
    color: #a78bfa;
}
.story-reader-media-section--expanded .story-reader-media-toggle {
    transform: rotate(90deg);
}

.story-reader-media-label {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.story-reader-media-body {
    display: none;
    padding: 8px 0 4px;
}
.story-reader-media-section--expanded .story-reader-media-body {
    display: block;
}

.story-reader-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

.story-reader-media-thumb {
    position: relative;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.3);
}
.story-reader-media-thumb:hover {
    border-color: rgba(167, 139, 250, 0.4);
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.15);
}
.story-reader-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-reader-media-featured {
    height: 110px;
    grid-column: span 2;
    border-color: rgba(167, 139, 250, 0.25);
}
.story-reader-media-featured:hover {
    border-color: rgba(167, 139, 250, 0.6);
}

.story-reader-media-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-size: 0.6em;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;
}

.story-reader-media-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    font-size: 0.85em;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: all 0.15s ease;
}
.story-reader-media-thumb:hover .story-reader-media-remove {
    display: flex;
}
.story-reader-media-remove:hover {
    background: rgba(239, 68, 68, 0.8);
    color: #fff;
}

.story-reader-media-empty {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    padding: 8px 0;
}

.story-reader-media-enrich {
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(167, 139, 250, 0.05));
    border: 1px dashed rgba(167, 139, 250, 0.3);
    color: #a78bfa;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78em;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}
.story-reader-media-enrich:hover {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.1));
    border-color: rgba(167, 139, 250, 0.5);
}

/* ============================================
   Story Editor — Inline narrative editing
   Namespace: .story-editor-*
   ============================================ */

/* Edit button (pencil) in chapter header */
.story-editor-edit-btn {
    background: none;
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #a78bfa;
    cursor: pointer;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.85em;
    margin-left: auto;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.story-editor-edit-btn:hover {
    background: rgba(167, 139, 250, 0.15);
    border-color: #a78bfa;
    color: #c4b5fd;
}

/* Word count badge in chapter header */
.story-editor-word-count {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Active editing state — border glow on chapter */
.story-editor-editing {
    border-color: rgba(167, 139, 250, 0.4) !important;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.15), inset 0 0 8px rgba(167, 139, 250, 0.05);
}

/* Textarea for editing narrative */
.story-editor-textarea {
    width: 100%;
    min-height: 200px;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 8px;
    padding: 16px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 0.95em;
    line-height: 1.7;
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
}
.story-editor-textarea:focus {
    outline: none;
    border-color: #a78bfa;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.2);
}

/* Editing toolbar below textarea */
.story-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Save button — green */
.story-editor-save-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: none;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.story-editor-save-btn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
.story-editor-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Cancel button — gray */
.story-editor-cancel-btn {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.story-editor-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

/* AI Rewrite button — purple outline */
.story-editor-ai-btn {
    background: none;
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.4);
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}
.story-editor-ai-btn:hover {
    background: rgba(167, 139, 250, 0.12);
    border-color: #a78bfa;
}

/* Character/word count in editor toolbar */
.story-editor-char-count {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 4px;
}

/* Mobile adjustments for editor */
@media (max-width: 768px) {
    .story-editor-textarea {
        padding: 12px;
        font-size: 0.9em;
        min-height: 150px;
    }
    .story-editor-toolbar {
        gap: 6px;
    }
    .story-editor-save-btn,
    .story-editor-cancel-btn,
    .story-editor-ai-btn {
        padding: 6px 12px;
        font-size: 0.8em;
    }
    .story-editor-ai-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-top: 4px;
    }
    .story-editor-word-count {
        display: none;
    }
}

/* ===================== Session 4: Story Creation Flow Controls ===================== */

/* Editable metadata (title/subtitle click-to-edit) */
.story-editor-meta-editable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    transition: border-color 0.2s;
}
.story-editor-meta-editable:hover {
    border-bottom-color: #a78bfa;
}
.story-editor-meta-placeholder {
    opacity: 0.4;
    font-style: italic;
}
.story-editor-meta-active {
    border-bottom-color: #a78bfa !important;
}
.story-editor-meta-input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #a78bfa;
    border-radius: 4px;
    color: white;
    font-family: inherit;
    padding: 4px 8px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}
.story-reader-cover-title .story-editor-meta-input,
.story-reader-cover-title.story-editor-meta-active .story-editor-meta-input {
    font-size: 1.4em;
    font-weight: 700;
}
.story-reader-cover-subtitle .story-editor-meta-input,
.story-reader-cover-subtitle.story-editor-meta-active .story-editor-meta-input {
    font-size: 1em;
    font-weight: 400;
}

/* Narrative Arc Selector */
.story-editor-arc-trigger {
    cursor: pointer;
    position: relative;
}
.story-editor-arc-trigger:hover .story-editor-arc-label {
    color: #a78bfa;
}
.story-editor-arc-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 12px;
    background: linear-gradient(135deg, #1e1e3a 0%, #1a2744 100%);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 8px;
    z-index: 20;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.story-editor-arc-dropdown.hidden {
    display: none;
}
.story-editor-arc-option {
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.9em;
}
.story-editor-arc-option:hover {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
}
.story-editor-arc-custom {
    padding: 8px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.story-editor-arc-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: white;
    padding: 6px 10px;
    font-size: 0.85em;
    outline: none;
    box-sizing: border-box;
}
.story-editor-arc-input:focus {
    border-color: #a78bfa;
}

/* Add Chapter Button */
.story-editor-add-chapter-btn {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border: 1px dashed rgba(167, 139, 250, 0.4);
    border-radius: 8px;
    color: #a78bfa;
    padding: 10px 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 8px;
}
.story-editor-add-chapter-btn:hover {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
    border-color: #a78bfa;
}
.story-editor-add-chapter-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .story-editor-meta-input {
        font-size: 0.95em;
        padding: 3px 6px;
    }
    .story-editor-arc-dropdown {
        margin: 0 8px;
    }
    .story-editor-add-chapter-btn {
        padding: 8px 14px;
        font-size: 0.85em;
        width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
    }
}

/* ============================================================================
   Phrase Key / Cue Editor (.story-editor-cue-*)
   ============================================================================ */

/* Cues toggle button in chapter header */
.story-editor-cues-btn {
    background: transparent;
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #a78bfa;
    font-size: 0.72em;
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.story-editor-cues-btn:hover {
    background: rgba(167, 139, 250, 0.15);
    border-color: #a78bfa;
}
.story-editor-cues-active .story-editor-cues-btn {
    background: rgba(167, 139, 250, 0.25);
    border-color: #a78bfa;
    color: #c4b5fd;
}

/* Cue highlight spans in narrative text */
.story-editor-cue-highlight {
    background: rgba(167, 139, 250, 0.18);
    border-bottom: 2px solid #a78bfa;
    padding: 1px 2px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}
.story-editor-cue-highlight:hover {
    background: rgba(167, 139, 250, 0.35);
}

/* Tooltip with thumbnail on hover/tap */
.story-editor-cue-tooltip {
    position: absolute;
    z-index: 10000;
    background: #1e1e3a;
    border: 1px solid rgba(167, 139, 250, 0.4);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.story-editor-cue-tooltip.visible {
    opacity: 1;
    pointer-events: auto;
}
.story-editor-cue-tooltip-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
}
.story-editor-cue-remove-btn {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(14px * var(--type-scale));
    line-height: 1;
    transition: all 0.2s ease;
}
.story-editor-cue-remove-btn:hover {
    background: rgba(239, 68, 68, 0.4);
}

/* Suggest Cues bar below narrative */
.story-editor-suggest-cues-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.story-editor-suggest-cues-btn {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #c4b5fd;
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82em;
    transition: all 0.2s ease;
}
.story-editor-suggest-cues-btn:hover {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.35) 0%, rgba(139, 92, 246, 0.35) 100%);
    border-color: #a78bfa;
}
.story-editor-suggest-cues-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.story-editor-cue-count {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.45);
}

/* Suggestion cards panel */
.story-editor-suggestions-panel {
    margin: 8px 12px 12px;
    background: rgba(167, 139, 250, 0.06);
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 10px;
    overflow: hidden;
}
.story-editor-suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: rgba(167, 139, 250, 0.1);
    color: #c4b5fd;
    font-size: 0.82em;
    font-weight: 600;
}
.story-editor-suggestions-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: calc(16px * var(--type-scale));
    padding: 0 4px;
}
.story-editor-suggestions-close:hover {
    color: #fff;
}
.story-editor-suggestions-list {
    max-height: 360px;
    overflow-y: auto;
}

/* Individual suggestion card */
.story-editor-suggestion-card {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}
.story-editor-suggestion-card:last-child {
    border-bottom: none;
}
.story-editor-suggestion-card--approved {
    opacity: 0;
    transform: translateX(30px);
}
.story-editor-suggestion-thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.story-editor-suggestion-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    font-size: calc(20px * var(--type-scale));
}
.story-editor-suggestion-body {
    flex: 1;
    min-width: 0;
}
.story-editor-suggestion-phrase {
    margin: 0 0 4px;
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    line-height: 1.3;
}
.story-editor-suggestion-reason {
    margin: 0 0 3px;
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.3;
}
.story-editor-suggestion-scene {
    font-size: 0.68em;
    color: #a78bfa;
    opacity: 0.7;
}
.story-editor-suggestion-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.story-editor-suggestion-approve {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    cursor: pointer;
    font-size: calc(14px * var(--type-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.story-editor-suggestion-approve:hover {
    background: rgba(34, 197, 94, 0.3);
    border-color: #22c55e;
}
.story-editor-suggestion-dismiss {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    cursor: pointer;
    font-size: calc(14px * var(--type-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.story-editor-suggestion-dismiss:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}

@media (max-width: 768px) {
    .story-editor-cues-btn {
        font-size: 0.65em;
        padding: 2px 6px;
    }
    .story-editor-suggest-cues-bar {
        padding: 6px 10px;
        flex-wrap: wrap;
    }
    .story-editor-suggestion-card {
        padding: 8px 10px;
    }
    .story-editor-suggestion-thumb {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .story-editor-cue-tooltip {
        left: 8px !important;
        right: 8px;
        max-width: calc(100vw - 16px);
    }
}

/* ==========================================================================
   Production Dashboard (.story-prod-*)
   Session 7: Job monitoring, TTS controls, audio preview
   ========================================================================== */

/* Production job banner — sits at top of the reader panel */
.story-prod-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: calc(0.85rem * var(--type-scale));
    animation: storyProdBannerIn 0.3s ease-out;
}

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

.story-prod-banner--complete {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.story-prod-banner--error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.15) 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

.story-prod-banner-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(167, 139, 250, 0.3);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: storyProdSpin 0.8s linear infinite;
    flex-shrink: 0;
}

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

.story-prod-banner--complete .story-prod-banner-spinner,
.story-prod-banner--error .story-prod-banner-spinner {
    display: none;
}

.story-prod-banner-icon {
    display: none;
    font-size: calc(1.1rem * var(--type-scale));
    flex-shrink: 0;
}

.story-prod-banner--complete .story-prod-banner-icon,
.story-prod-banner--error .story-prod-banner-icon {
    display: inline;
}

.story-prod-banner-info {
    flex: 1;
    min-width: 0;
}

.story-prod-banner-label {
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-prod-banner-detail {
    font-size: calc(0.78rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

/* Progress bar inside banner */
.story-prod-progress {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.story-prod-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #818cf8);
    border-radius: 2px;
    transition: width 0.4s ease;
    width: 0%;
}

.story-prod-banner--complete .story-prod-progress-bar {
    background: linear-gradient(90deg, #10b981, #34d399);
    width: 100%;
}

.story-prod-banner--error .story-prod-progress-bar {
    background: #ef4444;
}

.story-prod-banner-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: calc(1.1rem * var(--type-scale));
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    flex-shrink: 0;
}

.story-prod-banner-dismiss:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Render Narration button in chapter header */
.story-prod-render-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: calc(0.72rem * var(--type-scale));
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(99, 102, 241, 0.2));
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 6px;
    color: #c4b5fd;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.story-prod-render-btn:hover {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.35), rgba(99, 102, 241, 0.35));
    color: #ddd6fe;
    border-color: rgba(167, 139, 250, 0.5);
}

.story-prod-render-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.story-prod-render-btn .story-prod-btn-spinner {
    display: none;
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(167, 139, 250, 0.3);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: storyProdSpin 0.8s linear infinite;
}

.story-prod-render-btn.rendering .story-prod-btn-spinner {
    display: inline-block;
}

.story-prod-render-btn.rendering {
    pointer-events: none;
    opacity: 0.6;
}

/* Audio preview per chapter */
.story-prod-audio-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 8px 0 4px 0;
    background: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: 8px;
}

.story-prod-audio-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #818cf8);
    border: none;
    color: white;
    font-size: calc(0.9rem * var(--type-scale));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s;
}

.story-prod-audio-play:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.4);
}

.story-prod-audio-play.playing {
    background: linear-gradient(135deg, #818cf8, #6366f1);
}

.story-prod-audio-info {
    flex: 1;
    min-width: 0;
}

.story-prod-audio-label {
    font-size: calc(0.78rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-prod-audio-time {
    font-size: calc(0.72rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
}

.story-prod-audio-seek {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.story-prod-audio-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a78bfa;
    cursor: pointer;
}

/* Audio available badge in chapter header */
.story-prod-audio-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    font-size: calc(0.68rem * var(--type-scale));
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 5px;
    color: #6ee7b7;
    white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .story-prod-banner {
        padding: 8px 10px;
        gap: 8px;
        font-size: calc(0.8rem * var(--type-scale));
    }
    .story-prod-audio-preview {
        padding: 6px 8px;
        gap: 6px;
    }
    .story-prod-audio-play {
        width: 28px;
        height: 28px;
        font-size: calc(0.8rem * var(--type-scale));
    }
    .story-prod-render-btn {
        font-size: calc(0.68rem * var(--type-scale));
        padding: 2px 6px;
    }
}

/* ============================================================
   Story Audit & Health (.story-prod-audit-*, .story-reader-version-badge)
   ============================================================ */

.story-prod-audit-container {
    padding: 0;
}

.story-prod-audit-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12) 0%, rgba(22, 33, 62, 0.5) 100%);
    border-radius: 12px 12px 0 0;
}

.story-prod-audit-header.story-prod-audit--pass {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.12) 0%, rgba(22, 33, 62, 0.5) 100%);
}

.story-prod-audit-header.story-prod-audit--warn {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(22, 33, 62, 0.5) 100%);
}

.story-prod-audit-icon {
    font-size: calc(2rem * var(--type-scale));
    flex-shrink: 0;
}

.story-prod-audit--pass .story-prod-audit-icon {
    color: #34d399;
}

.story-prod-audit--warn .story-prod-audit-icon {
    color: #fbbf24;
}

.story-prod-audit-title-block {
    flex: 1;
    min-width: 0;
}

.story-prod-audit-title {
    font-size: calc(1.1rem * var(--type-scale));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-prod-audit-verdict {
    font-size: calc(0.75rem * var(--type-scale));
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 2px;
}

.story-prod-audit--pass .story-prod-audit-verdict {
    color: #34d399;
}

.story-prod-audit--warn .story-prod-audit-verdict {
    color: #fbbf24;
}

.story-prod-audit-badges {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.story-prod-audit-checklist {
    padding: 12px 16px;
}

.story-prod-audit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.story-prod-audit-item:last-child {
    border-bottom: none;
}

.story-prod-audit-item-icon {
    font-size: calc(1rem * var(--type-scale));
    flex-shrink: 0;
    margin-top: 1px;
    width: 20px;
    text-align: center;
}

.story-prod-audit-item--pass .story-prod-audit-item-icon {
    color: #34d399;
}

.story-prod-audit-item--fail .story-prod-audit-item-icon {
    color: #f87171;
}

.story-prod-audit-item--info .story-prod-audit-item-icon {
    color: #60a5fa;
}

.story-prod-audit-item-body {
    flex: 1;
    min-width: 0;
}

.story-prod-audit-item-label {
    font-size: calc(0.88rem * var(--type-scale));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.story-prod-audit-detail {
    font-size: calc(0.78rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.story-prod-audit-item--fail .story-prod-audit-detail {
    color: rgba(248, 113, 113, 0.7);
}

.story-prod-audit-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: center;
}

/* Version Badge */
.story-reader-version-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: calc(0.7rem * var(--type-scale));
    font-weight: 600;
    font-family: 'SF Mono', 'Menlo', monospace;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.story-reader-version-badge:hover {
    background: rgba(167, 139, 250, 0.22);
    border-color: rgba(167, 139, 250, 0.4);
}

@media (max-width: 768px) {
    .story-prod-audit-header {
        flex-wrap: wrap;
        padding: 14px;
        gap: 8px;
    }

    .story-prod-audit-badges {
        width: 100%;
        justify-content: flex-start;
    }

    .story-prod-audit-item {
        padding: 8px 0;
    }

    .story-reader-version-badge {
        font-size: calc(0.65rem * var(--type-scale));
        padding: 2px 6px;
    }
}

/* ============================================================
   Clip Interleaving & Assembly (.story-prod-clip-*, .story-prod-timeline, .story-prod-segment-*)
   ============================================================ */

/* --- Insert Clip button in chapter header --- */
.story-prod-clip-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    font-size: calc(0.72rem * var(--type-scale));
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 5px;
    color: #c4b5fd;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.story-prod-clip-btn:hover {
    background: rgba(167, 139, 250, 0.25);
    border-color: rgba(167, 139, 250, 0.4);
    color: #ddd6fe;
}

/* --- Clip Picker Overlay --- */
.story-prod-clip-picker {
    margin: 12px 0;
    background: rgba(30, 30, 60, 0.95);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 10px;
    overflow: hidden;
    animation: storyProdSlideIn 0.25s ease-out;
}

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

.story-prod-clip-picker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.story-prod-clip-picker-icon {
    font-size: calc(1.1rem * var(--type-scale));
}
.story-prod-clip-picker-title {
    flex: 1;
    font-size: calc(0.85rem * var(--type-scale));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.story-prod-clip-picker-search {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.story-prod-clip-picker-input {
    flex: 1;
    padding: 7px 10px;
    font-size: calc(0.82rem * var(--type-scale));
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    outline: none;
}
.story-prod-clip-picker-input:focus {
    border-color: rgba(167, 139, 250, 0.5);
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.15);
}
.story-prod-clip-picker-search-btn {
    padding: 7px 14px;
    font-size: calc(0.8rem * var(--type-scale));
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: opacity 0.2s;
}
.story-prod-clip-picker-search-btn:hover {
    opacity: 0.85;
}

.story-prod-clip-picker-results {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
}
.story-prod-clip-picker-empty,
.story-prod-clip-picker-loading {
    padding: 20px;
    text-align: center;
    font-size: calc(0.8rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.45);
}
.story-prod-clip-picker-loading {
    color: #a78bfa;
}

.story-prod-clip-picker-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.story-prod-clip-picker-result:hover {
    background: rgba(255, 255, 255, 0.06);
}
.story-prod-clip-picker-result.selected {
    background: rgba(167, 139, 250, 0.15);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.story-prod-clip-picker-thumb {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.story-prod-clip-picker-result-info {
    flex: 1;
    min-width: 0;
}
.story-prod-clip-picker-result-title {
    font-size: calc(0.78rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Selection panel (time inputs + actions) */
.story-prod-clip-picker-selection {
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(167, 139, 250, 0.05);
}
.story-prod-clip-picker-selection.hidden {
    display: none;
}
.story-prod-clip-picker-selected-info {
    font-size: calc(0.8rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}
.story-prod-clip-picker-media-id {
    font-size: calc(0.7rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.4);
}
.story-prod-clip-picker-times {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}
.story-prod-clip-picker-times label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(0.78rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.65);
}
.story-prod-clip-picker-time-input {
    width: 70px;
    padding: 5px 8px;
    font-size: calc(0.8rem * var(--type-scale));
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.9);
    outline: none;
}
.story-prod-clip-picker-time-input:focus {
    border-color: rgba(167, 139, 250, 0.5);
}
.story-prod-clip-picker-actions {
    display: flex;
    gap: 8px;
}
.story-prod-clip-picker-preview-btn,
.story-prod-clip-picker-insert-btn {
    padding: 7px 14px;
    font-size: calc(0.8rem * var(--type-scale));
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.story-prod-clip-picker-preview-btn {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.story-prod-clip-picker-preview-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}
.story-prod-clip-picker-insert-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
}
.story-prod-clip-picker-insert-btn:hover {
    opacity: 0.85;
}

/* --- Clip Preview Card --- */
.story-prod-clip-preview {
    margin: 12px 0;
    animation: storyProdSlideIn 0.25s ease-out;
}
.story-prod-clip-preview-inner {
    background: rgba(30, 30, 60, 0.9);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 10px;
    overflow: hidden;
}
.story-prod-clip-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.story-prod-clip-preview-icon {
    font-size: calc(1.1rem * var(--type-scale));
}
.story-prod-clip-preview-info {
    flex: 1;
}
.story-prod-clip-preview-title {
    font-size: calc(0.82rem * var(--type-scale));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.story-prod-clip-preview-meta {
    font-size: calc(0.72rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}
.story-prod-clip-preview-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: calc(1.1rem * var(--type-scale));
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    transition: color 0.2s;
}
.story-prod-clip-preview-dismiss:hover {
    color: rgba(255, 255, 255, 0.8);
}
.story-prod-clip-preview-player {
    padding: 10px 14px;
}
.story-prod-clip-preview-player .story-prod-audio-play {
    flex-shrink: 0;
}

/* --- Narration Segment List --- */
.story-prod-segment-list {
    margin: 12px 0;
    animation: storyProdSlideIn 0.25s ease-out;
}
.story-prod-segment-list-inner {
    background: rgba(30, 30, 60, 0.9);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 10px;
    overflow: hidden;
}
.story-prod-segment-list-inner.story-prod-segment-list--active {
    border-color: rgba(167, 139, 250, 0.4);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.1);
}
.story-prod-segment-list-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.story-prod-segment-list-icon {
    font-size: calc(1rem * var(--type-scale));
}
.story-prod-segment-list-title {
    flex: 1;
    font-size: calc(0.82rem * var(--type-scale));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.story-prod-segment-list-count {
    font-size: calc(0.72rem * var(--type-scale));
    color: rgba(167, 139, 250, 0.8);
    padding: 2px 8px;
    background: rgba(167, 139, 250, 0.1);
    border-radius: 10px;
}

.story-prod-segment-items {
    padding: 6px 8px;
}
.story-prod-segment-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}
.story-prod-segment-item:last-child {
    border-bottom: none;
}
.story-prod-segment-item:hover {
    background: rgba(255, 255, 255, 0.03);
}
.story-prod-segment-icon {
    font-size: calc(0.85rem * var(--type-scale));
    flex-shrink: 0;
    margin-top: 2px;
}
.story-prod-segment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 80px;
    flex-shrink: 0;
}
.story-prod-segment-type {
    font-size: calc(0.75rem * var(--type-scale));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
.story-prod-segment-words {
    font-size: calc(0.68rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.4);
}
.story-prod-segment-preview {
    flex: 1;
    font-size: calc(0.73rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.story-prod-segment-status {
    font-size: calc(0.75rem * var(--type-scale));
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.35);
}

/* --- Assembly Timeline --- */
.story-prod-timeline {
    margin: 12px 0;
    animation: storyProdSlideIn 0.25s ease-out;
}
.story-prod-timeline-inner {
    background: rgba(30, 30, 60, 0.9);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 10px;
    overflow: hidden;
}
.story-prod-timeline-inner.story-prod-timeline--active {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.08);
}
.story-prod-timeline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.08) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.story-prod-timeline-header-icon {
    font-size: calc(1rem * var(--type-scale));
}
.story-prod-timeline-title {
    flex: 1;
    font-size: calc(0.82rem * var(--type-scale));
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.story-prod-timeline-count {
    font-size: calc(0.72rem * var(--type-scale));
    color: rgba(245, 158, 11, 0.8);
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 10px;
}

.story-prod-timeline-track {
    display: flex;
    gap: 2px;
    padding: 12px 14px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.story-prod-timeline-piece {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: calc(0.72rem * var(--type-scale));
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 0;
}
.story-prod-timeline-piece--narration {
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.2);
    color: #c4b5fd;
}
.story-prod-timeline-piece--clip {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}
.story-prod-timeline-piece-icon {
    font-size: calc(0.75rem * var(--type-scale));
}
.story-prod-timeline-piece-label {
    font-size: calc(0.72rem * var(--type-scale));
    font-weight: 500;
}

.story-prod-timeline-audio {
    padding: 0 14px 10px;
}
.story-prod-timeline-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: calc(0.78rem * var(--type-scale));
    color: rgba(245, 158, 11, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Mobile responsive — Clip, Segments, Timeline */
@media (max-width: 768px) {
    .story-prod-clip-picker-search {
        flex-direction: column;
        gap: 6px;
    }
    .story-prod-clip-picker-times {
        flex-direction: column;
        gap: 8px;
    }
    .story-prod-clip-picker-actions {
        flex-direction: column;
    }
    .story-prod-clip-picker-thumb {
        width: 48px;
        height: 32px;
    }
    .story-prod-timeline-track {
        padding: 8px 10px;
    }
    .story-prod-timeline-piece {
        padding: 4px 8px;
        font-size: calc(0.68rem * var(--type-scale));
    }
    .story-prod-clip-btn {
        font-size: calc(0.68rem * var(--type-scale));
        padding: 2px 6px;
    }
    .story-prod-segment-item {
        flex-wrap: wrap;
    }
    .story-prod-segment-preview {
        width: 100%;
    }
}

/* Mobile: Stack split-view and tighten story reader layout */
@media (max-width: 768px) {
    .unified-ai-body.split-view {
        flex-direction: column;
    }
    .unified-ai-body.split-view .unified-ai-conversation-panel {
        flex: 1 1 auto;
        max-height: 50vh;
    }
    .unified-ai-presentation-panel {
        flex: 1 1 auto !important;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .story-reader-cover img {
        height: 200px;
    }
    .story-reader-cover {
        max-height: 200px;
    }
    .story-reader-cover-overlay {
        padding: 20px 16px 12px;
    }
    .story-reader-cover-title {
        font-size: 1.2em;
    }
    .story-reader-meta-bar {
        padding: 8px 12px;
        gap: 6px;
    }
    .story-reader-toc {
        padding: 10px 12px;
    }
    .story-reader-chapter {
        padding: 14px 12px;
    }
    .story-reader-chapter-header {
        flex-wrap: wrap;
        gap: 6px;
    }
    .story-reader-chapter-title {
        font-size: 1em;
        flex-basis: calc(100% - 50px);
    }
    .story-reader-narrative {
        font-size: 0.9em;
        line-height: 1.7;
    }
    .story-reader-footer {
        padding: 12px;
        gap: 8px;
    }
    .story-reader-version-badge {
        font-size: 0.68em;
        padding: 2px 6px;
    }
    .story-editor-word-count {
        font-size: 0.65em;
    }
    .story-reader-media-grid {
        grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
        gap: 4px;
    }
}

/* Presentation Panel Header */

/* Media Display Container */

/* Photo in presentation panel */

/* Video in presentation panel */

/* Audio in presentation panel */

/* Media Controls (type-specific) */

/* Gallery Navigation */

.gallery-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  padding: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gallery-nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.gallery-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.gallery-thumbnails {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.gallery-thumbnails::-webkit-scrollbar {
  height: 6px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
  background: transparent;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.gallery-thumbnail {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.gallery-thumbnail:hover {
  opacity: 0.9;
}

.gallery-thumbnail.active {
  border-color: #667eea;
  opacity: 1;
}

/* Video thumbnail placeholder */

.gallery-thumbnail-video {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: all 0.2s ease;
  flex-shrink: 0;
  color: white;
  font-size: calc(16px * var(--type-scale));
}

.gallery-thumbnail-video:hover {
  opacity: 0.9;
}

.gallery-thumbnail-video.active {
  border-color: #667eea;
  opacity: 1;
}

/* ============================================================================
   Presentation Fullscreen Overlay
   z-index: 25000 - Above all modals except system critical
   ============================================================================ */

/* Fullscreen Header */

.fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.fullscreen-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 8px;
  padding: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.fullscreen-title {
  color: white;
  font-weight: 600;
  font-size: 1.1em;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 16px;
}

.fullscreen-counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9em;
  min-width: 60px;
  text-align: right;
}

/* Fullscreen Media Container */

.fullscreen-media-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 24px;
  overflow: auto;
}

.fullscreen-media-container .fullscreen-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.fullscreen-media-container .fullscreen-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  background: black;
}

/* Fullscreen Audio wrapper */

.fullscreen-audio-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
}

.fullscreen-audio-icon {
  font-size: calc(96px * var(--type-scale));
  opacity: 0.8;
}

.fullscreen-audio-title {
  color: white;
  font-size: 1.3em;
  text-align: center;
}

/* Fullscreen Gallery Navigation */

.fullscreen-gallery-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

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

.fullscreen-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fullscreen-nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.fullscreen-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.fullscreen-thumbnails {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  flex: 1;
  padding: 8px 0;
  justify-content: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.fullscreen-thumbnails::-webkit-scrollbar {
  height: 8px;
}

.fullscreen-thumbnails::-webkit-scrollbar-track {
  background: transparent;
}

.fullscreen-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.fullscreen-thumbnails .gallery-thumbnail {
  width: 64px;
  height: 64px;
}

.fullscreen-thumbnails .gallery-thumbnail-video {
  width: 64px;
  height: 64px;
  font-size: calc(20px * var(--type-scale));
}

/* Mobile Responsive - Presentation Panel */

/* ============================================================================
   Media and Document Import Sandbox Styles
   ============================================================================ */

/* Sandbox View Container */

.sandbox-view {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

.sandbox-header {
  margin-bottom: var(--space-lg);
}

.sandbox-header h2 {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.sandbox-header p {
  color: var(--color-text-light);
  font-size: var(--font-sm);
}

/* Sandbox Tab Navigation */

.sandbox-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-xs);
  flex-wrap: wrap;
}

.sandbox-tab {
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--color-text-light);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.sandbox-tab:hover {
  color: var(--color-text);
  background: var(--color-bg-secondary);
}

.sandbox-tab.active {
  color: var(--color-primary);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: -1px;
}

.sandbox-tab .tab-icon {
  font-size: 1.1em;
}

.sandbox-tab .badge {
  background: var(--color-primary);
  color: white;
  font-size: 0.75em;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  text-align: center;
}

/* Sandbox Tab Content Panels */

.sandbox-tab-content {
  display: none;
}

.sandbox-tab-content.active {
  display: block;
}

/* Batch List */

.sandbox-batch-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sandbox-batch-list.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-light);
}

.sandbox-batch-list.empty-state .empty-icon {
  font-size: 3em;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

/* Batch Card */

.sandbox-batch-card {
  background: var(--ffvr-surface-raised, var(--color-bg));
  border: 1px solid var(--ffvr-rule, var(--color-border));
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.sandbox-batch-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.batch-card-info {
  flex: 1;
}

.batch-card-name {
  font-weight: var(--font-semibold);
  font-size: var(--font-lg);
  color: var(--ffvr-ink, var(--color-text));
  margin-bottom: var(--space-xs);
}

.batch-card-meta {
  font-size: var(--font-sm);
  color: var(--ffvr-ink-faint, var(--color-text-light));
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.batch-card-stats {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.batch-stat {
  text-align: center;
  padding: var(--space-xs) var(--space-sm);
}

.batch-stat-value {
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  color: var(--ffvr-ink, var(--color-text));
}

.batch-stat-label {
  font-size: var(--font-xs);
  color: var(--ffvr-ink-faint, var(--color-text-light));
  text-transform: uppercase;
}

/* Batch Status Badges */

.batch-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

.batch-status.uploading {
  background: #dbeafe;
  color: #1d4ed8;
}

.batch-status.preprocessing {
  background: #fef3c7;
  color: #92400e;
}

.batch-status.ready {
  background: #d1fae5;
  color: #065f46;
}

.batch-status.approval_requested {
  background: #fce7f3;
  color: #9d174d;
}

.batch-status.approved {
  background: #d1fae5;
  color: #065f46;
}

.batch-status.rejected {
  background: #fee2e2;
  color: #991b1b;
}

.batch-status.promoted {
  background: #ede9fe;
  color: #5b21b6;
}

/* Batch Status Modal */

.batch-status-modal-content {
  max-width: 420px;
  padding: var(--space-lg);
}

.batch-status-modal-content .modal-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  font-size: var(--font-xl);
}

.batch-status-icon {
  font-size: 1.5em;
}

.batch-status-body {
  margin-bottom: var(--space-lg);
}

.batch-status-badge-row {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.batch-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
}

.batch-status-badge.status-ready {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
}

.batch-status-badge.status-processing {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
  animation: pulse 2s ease-in-out infinite;
}

.batch-status-badge.status-approved {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #065f46;
}

.batch-status-badge.status-promoted {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
}

.batch-status-badge.status-approval_requested {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #9d174d;
}

.batch-status-badge.status-rejected {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
}

.batch-status-badge.status-failed {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
}

.batch-status-progress {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.batch-status-progress .progress-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.batch-status-progress .progress-bar {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.batch-status-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.batch-status-progress .progress-percent {
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  min-width: 40px;
  text-align: right;
}

.batch-status-progress .progress-text {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin: 0;
  text-align: center;
}

/* Multi-stage progress breakdown */

.batch-status-progress .stage-progress-container {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.batch-status-progress .stage-progress-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.batch-status-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.batch-stat-item {
  text-align: center;
  padding: var(--space-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.batch-stat-item .batch-stat-value {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.batch-stat-item .batch-stat-label {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  text-transform: uppercase;
}

.batch-status-meta {
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--font-sm);
}

/* Batch card widget styling enhancements */

.sandbox-batch-card.widget-style {
  border-left: 4px solid var(--color-primary);
  transition: all 0.2s ease;
}

.sandbox-batch-card.widget-style:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sandbox-batch-card.widget-style.processing {
  border-left-color: #3b82f6;
}

.sandbox-batch-card.widget-style.ready {
  border-left-color: #10b981;
}

.sandbox-batch-card.widget-style.promoted {
  border-left-color: #8b5cf6;
}

/* Mobile responsive for batch status modal */

@media (max-width: 480px) {
  .batch-status-modal-content {
    padding: var(--space-md);
  }

  .batch-status-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Create Batch Form */

.create-batch-form {
  max-width: 800px;
  margin: 0 auto;
}

.create-batch-form .form-group {
  margin-bottom: var(--space-lg);
}

.create-batch-form label {
  display: block;
  font-weight: var(--font-medium);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.create-batch-form input[type="text"] {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  transition: border-color 0.2s;
}

.create-batch-form input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Upload Options (dedup checkboxes) */

.sandbox-upload-options {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) 0;
}

.sandbox-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    font-size: calc(0.9rem * var(--type-scale));
    color: var(--ffvr-ink-muted, var(--color-text-secondary));
    user-select: none;
}

.sandbox-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.sandbox-checkbox span {
    line-height: 1.3;
}

/* Upload Zone */

.sandbox-upload-zone {
  border: 2px dashed var(--ffvr-rule, var(--color-border));
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  background: var(--ffvr-surface-raised, var(--color-bg-secondary));
  cursor: pointer;
  transition: all 0.3s;
}

.sandbox-upload-zone:hover,

.sandbox-upload-zone.dragover {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.05);
}

.sandbox-upload-zone.dragover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.sandbox-upload-zone .upload-icon {
  font-size: 3em;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.sandbox-upload-zone .upload-text {
  font-size: var(--font-lg);
  color: var(--ffvr-ink, var(--color-text));
  margin-bottom: var(--space-xs);
}

.sandbox-upload-zone .upload-subtext {
  font-size: var(--font-sm);
  color: var(--ffvr-ink-faint, var(--color-text-light));
}

/* iOS fix - use opacity instead of display:none for file input
   iOS Safari doesn't allow programmatic .click() on display:none inputs.
   This positions the input as an invisible overlay that the user can tap directly. */

.sandbox-upload-zone {
  position: relative;
}

.sandbox-upload-zone input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

/* Pulse attention animation for Create Batch button after file selection */

.pulse-attention {
  animation: pulseAttention 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
}

@keyframes pulseAttention {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Has files state for upload zone */

.sandbox-upload-zone.has-files {
  border-color: #059669;
  border-style: solid;
  background: rgba(16, 185, 129, 0.05);
}

/* Context Input with Microphone */

.context-input-wrapper {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.context-mic-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ffvr-rule, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--ffvr-surface-raised, var(--color-bg-secondary));
  /* filling-bespoke-vessels S4. This button never declared a colour, so its ink
     came from the UA sheet (`color: buttontext`, i.e. black) — fine over the light
     fill it used to have, 1.44:1 once the vessel darkened that fill. The fallback
     is the UA keyword itself, so flag-off computes byte-identically (check (d)
     proves it) while the vessel supplies a light ink. */
  color: var(--ffvr-ink, buttontext);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.context-mic-btn:hover {
  border-color: var(--color-primary);
  background: rgba(59, 130, 246, 0.1);
}

.context-mic-btn.recording {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  animation: pulse-recording 1.5s infinite;
}

.context-mic-btn .mic-icon {
  font-size: calc(1.25rem * var(--type-scale));
}

.context-textarea {
  flex: 1;
  resize: vertical;
  min-height: 80px;
}

.recording-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-sm);
  color: var(--ffvr-danger, #ef4444);
  font-size: var(--font-sm);
}

.recording-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Checkbox styling */

.checkbox-group {
  margin: var(--space-md) 0;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-sm);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.checkbox-text {
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.label-hint {
  color: var(--ffvr-ink-faint, var(--color-text-tertiary));
  font-weight: normal;
  font-size: 0.9em;
}

/* Preview Grid for files before upload */

.preview-grid-container {
  margin: var(--space-lg) 0;
  display: none;
}

.preview-grid-container.visible {
  display: block;
}

.preview-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.preview-grid-header h4 {
  margin: 0;
  font-size: var(--font-md);
}

.preview-grid-actions {
  display: flex;
  gap: var(--space-sm);
}

.preview-grid {
  display: grid;
  /* v11.32.0: Changed from 140px to 120px for better mobile fit, and explicit min-width */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-md);
  max-height: 50vh;
  overflow-y: auto;
  padding: var(--space-md);
  background: var(--ffvr-surface-sunken, var(--color-bg-tertiary));
  border-radius: var(--radius-md);
}

.preview-item {
  position: relative;
  /* v11.32.0: Explicit sizing for Safari iOS compatibility */
  aspect-ratio: 1;
  min-width: 100px;     /* Minimum size even if grid allows smaller */
  min-height: 100px;    /* Explicit height for Safari aspect-ratio support */
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-secondary);
  cursor: pointer;
}

.preview-item img {
  position: absolute;   /* Position absolutely within container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-item .preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: calc(2rem * var(--type-scale));
  color: var(--color-text-tertiary);
}

.preview-item .preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.85);
  color: white;
  font-size: calc(16px * var(--type-scale));
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.2s, transform 0.2s;
  z-index: 5;
}

.preview-item .preview-remove:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.preview-item .preview-filename {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: calc(10px * var(--type-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Video thumbnail indicator overlay */

.preview-item .video-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: calc(14px * var(--type-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding-left: 3px; /* Visual centering for play icon */
}

.preview-overflow {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 100px;
  min-height: 100px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--text-secondary, #666);
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  text-align: center;
  padding: var(--space-sm);
}


/* Upload Progress */

.upload-progress-container {
  margin-top: var(--space-lg);
}

.upload-progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  font-size: var(--font-sm);
}

.upload-progress-bar {
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #60a5fa);
  border-radius: var(--radius-full);
  transition: width 0.3s;
}

.upload-file-list {
  margin-top: var(--space-md);
  max-height: 200px;
  overflow-y: auto;
}

.upload-file-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: var(--font-sm);
  border-bottom: 1px solid var(--color-bg-tertiary);
}

.upload-file-item .file-icon {
  width: 24px;
  text-align: center;
}

.upload-file-item .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-file-item .file-status {
  color: var(--color-success);
}

.upload-file-item .file-status.error {
  color: var(--color-danger);
}

/* Batch Detail View */

.batch-detail-view {
  display: none;
}

.batch-detail-view.active {
  display: block;
}

.batch-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
  flex-wrap: wrap;
}

.batch-detail-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.batch-detail-title h3 {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
}

.batch-back-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: all 0.2s;
}

.batch-back-btn:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.batch-detail-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Filter Bar */

.sandbox-filter-bar {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

.sandbox-filter-btn {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.sandbox-filter-btn:hover {
  border-color: var(--color-primary);
}

.sandbox-filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.sandbox-filter-btn .count {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  font-size: 0.85em;
}

.sandbox-filter-btn.active .count {
  background: rgba(255, 255, 255, 0.2);
}

/* Sandbox Item Grid */

.sandbox-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.sandbox-item {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.sandbox-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sandbox-item.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.sandbox-item.decision-keep {
  border-color: var(--color-success);
}

.sandbox-item.decision-discard {
  border-color: var(--color-danger);
  opacity: 0.7;
}

.sandbox-item-thumbnail {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sandbox-item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sandbox-item-thumbnail .type-icon {
  font-size: 3em;
  color: var(--color-text-light);
}

.sandbox-item-info {
  padding: var(--space-sm);
}

.sandbox-item-name {
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-item-meta {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  margin-top: 2px;
}

/* Duplicate Indicator */

.sandbox-item .duplicate-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: var(--color-warning);
  color: white;
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* G6 document first-class: corner ext badge + typed placeholder tile */
.sandbox-item-card .doc-ext-badge {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  background: rgba(11, 20, 35, 0.82);
  color: #eaf0ff;
  font-size: calc(10px * var(--type-scale));
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.sandbox-item-card .item-placeholder-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(140deg, rgba(120, 140, 220, 0.18), rgba(80, 110, 200, 0.08));
  width: 100%;
  height: 100%;
}
.sandbox-item-card .doc-placeholder-icon {
  font-size: calc(32px * var(--type-scale));
  line-height: 1;
}
.sandbox-item-card .doc-placeholder-ext {
  font-size: calc(11px * var(--type-scale));
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #d8e0f5;
}

/* Decision Overlay */

.sandbox-item .decision-overlay {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
}

.sandbox-item.decision-keep .decision-overlay {
  background: var(--color-success);
  color: white;
}

.sandbox-item.decision-discard .decision-overlay {
  background: var(--color-danger);
  color: white;
}

/* Decision Buttons */

.sandbox-decision-buttons {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.decision-btn {
  flex: 1;
  padding: var(--space-xs);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.decision-btn.keep {
  background: #d1fae5;
  color: #065f46;
}

.decision-btn.keep:hover {
  background: #a7f3d0;
}

.decision-btn.keep.active {
  background: var(--color-success);
  color: white;
}

.decision-btn.discard {
  background: #fee2e2;
  color: #991b1b;
}

.decision-btn.discard:hover {
  background: #fecaca;
}

.decision-btn.discard.active {
  background: var(--color-danger);
  color: white;
}

/* Batch Action Buttons */

.batch-action-btn {
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.batch-action-btn.primary {
  background: var(--color-primary);
  color: white;
}

.batch-action-btn.primary:hover {
  background: #2563eb;
}

.batch-action-btn.success {
  background: var(--color-success);
  color: white;
}

.batch-action-btn.success:hover {
  background: #059669;
}

.batch-action-btn.danger {
  background: var(--color-danger);
  color: white;
}

.batch-action-btn.danger:hover {
  background: #dc2626;
}

.batch-action-btn.secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.batch-action-btn.secondary:hover {
  background: var(--color-bg-tertiary);
}

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

/* Admin Queue */

.admin-queue-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.admin-queue-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border-left: 4px solid var(--color-warning);
}

.admin-queue-card .contributor-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.admin-queue-card .contributor-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-sm);
}

.admin-queue-card .approval-message {
  background: var(--color-bg-secondary);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin: var(--space-sm) 0;
  font-style: italic;
}

.admin-queue-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Rejection Modal */

.rejection-modal-content {
  padding: var(--space-lg);
}

.rejection-modal-content textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  resize: vertical;
  margin-bottom: var(--space-md);
}

/* Sandbox Loading State */

.sandbox-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  color: var(--color-text-light);
}

.sandbox-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-bg-tertiary);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-md);
}

/* Inline spinner for processing status */

.spinner-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

/* Smaller inline spinner for buttons */

.spinner-inline-small {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* Progress bar animation during processing */

.processing-animation {
  animation: processing-pulse 1.5s ease-in-out infinite;
  width: 100% !important;
}

@keyframes processing-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Pagination */

.sandbox-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.sandbox-pagination button {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.sandbox-pagination button:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sandbox-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sandbox-pagination .page-info {
  color: var(--color-text-light);
  font-size: var(--font-sm);
}

/* Mobile Responsiveness */

@media (max-width: 768px) {
  .sandbox-view {
    padding: var(--space-md);
  }

  .sandbox-tabs {
    gap: 0;
  }

  .sandbox-tab {
    flex: 1;
    justify-content: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-xs);
  }

  .sandbox-batch-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .batch-card-stats {
    width: 100%;
    justify-content: space-around;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
  }

  .batch-detail-header {
    flex-direction: column;
  }

  .batch-detail-actions {
    width: 100%;
  }

  .batch-action-btn {
    flex: 1;
    justify-content: center;
  }

  .sandbox-item-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
  }

  .sandbox-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-sm);
  }

  .sandbox-filter-btn {
    white-space: nowrap;
  }
}

/* =============================================================================
   v10.11.0: CURATOR PREVIEW PANEL (Redesigned Right Panel)
   ============================================================================= */

/* Curator Preview Container */

.curator-preview {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}

.curator-preview-media {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.curator-preview-media img,

.curator-preview-media video {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

/* Document Viewer Styles */

.curator-preview-document-viewer {
  width: 100%;
  height: 60vh;
  display: flex;
  flex-direction: column;
}

.curator-pdf-viewer {
  flex: 1;
  width: 100%;
  min-height: 400px;
  border: none;
  border-radius: var(--radius-md);
  background: white;
}

.curator-preview-document-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.curator-document-image {
  max-width: 100%;
  max-height: 50vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.curator-preview-document {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  min-height: 300px;
  text-align: center;
}

.curator-preview-document .doc-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: var(--space-md);
}

.curator-preview-document .doc-name {
  font-size: var(--font-md);
  font-weight: var(--font-medium);
  color: var(--color-text);
  word-break: break-word;
  margin-bottom: var(--space-xs);
}

.curator-preview-document .doc-size {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.document-actions {
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.curator-preview-info {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: auto;
  max-height: 70vh;
}

/* Meta Header Section */

.curator-meta-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-sm);
}

.curator-meta-header h3 {
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-xs) 0;
  word-break: break-word;
}

.meta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}

.meta-badge.type-photo { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

.meta-badge.type-video { background: rgba(168, 85, 247, 0.1); color: #a855f7; }

.meta-badge.type-document { background: rgba(34, 197, 94, 0.1); color: #22c55e; }

/* Section Styles */

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.section-icon { font-size: 1.1em; }

.section-label { font-size: var(--font-sm); font-weight: var(--font-medium); }

/* Context Section */

.curator-context-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.context-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-sm);
  border: 1px solid var(--ffvr-rule, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--ffvr-surface-sunken, var(--color-bg));
  color: var(--ffvr-ink, var(--color-text));
  font-family: inherit;
  font-size: var(--font-sm);
  resize: vertical;
}

.context-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.context-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xs);
}

.context-hint, .context-counter {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}

/* Faces Section */

.curator-faces-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.faces-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.faces-placeholder {
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  width: 100%;
}

.faces-expand-btn {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: var(--font-xs);
  cursor: pointer;
}

.faces-expand-btn:hover {
  background: var(--color-primary);
  color: white;
}

/* Face Chip - Larger for better face visibility */

.face-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 88px;
  cursor: pointer;
  transition: all 0.2s;
}

.face-chip:hover { border-color: var(--color-primary); }

/* Face Status Color Coding (per spec):
   - Green (#22c55e): Human confirmed (100%)
   - Blue (#3b82f6): Auto-tagged by Spotter (70-99%)
   - Orange (#f97316): Predicted needs review (<70%)
   - Red (#ef4444): Not identified
*/

.face-chip.face-status-confirmed { border-color: #22c55e; background: rgba(34, 197, 94, 0.05); }

.face-chip.face-status-auto-tagged { border-color: #3b82f6; background: rgba(59, 130, 246, 0.05); }

.face-chip.face-status-predicted { border-color: #f97316; background: rgba(249, 115, 22, 0.05); }

.face-chip.face-status-unknown { border-color: #ef4444; background: rgba(239, 68, 68, 0.05); opacity: 0.7; }

.face-chip.face-status-corrected { border-color: #22c55e; background: rgba(34, 197, 94, 0.05); }

.face-chip.face-status-friend { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }

.face-chip-crop {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.face-chip-placeholder { font-size: 1.5em; }

.face-chip-info { text-align: center; }

.face-chip-name { font-size: var(--font-xs); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; }

.face-chip-conf { font-size: calc(10px * var(--type-scale)); color: var(--color-text-muted); }

.face-chip-actions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}

.face-action {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  cursor: pointer;
  font-size: calc(10px * var(--type-scale));
  display: flex;
  align-items: center;
  justify-content: center;
}

.face-action.confirm:hover { background: rgba(34, 197, 94, 0.2); color: #22c55e; }

.face-action.correct:hover { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }

.face-action.friend:hover { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }

.face-action.unknown:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

.face-chip-more {
  justify-content: center;
  background: var(--color-bg-tertiary);
}

.face-chip-more .more-count { font-size: var(--font-md); font-weight: bold; }

.face-chip-more .more-label { font-size: var(--font-xs); color: var(--color-text-muted); }

/* Virtual "Tag Person" chip */

.face-chip-virtual {
  border: 2px dashed var(--color-border);
  background: var(--color-bg-tertiary);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s, border-color 0.2s;
}

.face-chip-virtual:hover {
  opacity: 1;
  border-color: var(--color-primary);
  background: var(--color-bg-hover);
}

.face-chip-virtual-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}

.face-chip-virtual .virtual-icon {
  font-size: 1.5em;
  opacity: 0.6;
}

.face-chip-virtual:hover .virtual-icon {
  opacity: 1;
}

.face-chip-virtual .face-chip-conf {
  color: var(--color-primary);
  font-weight: 600;
}

/* Manual person chip (confirmed) */

.face-chip-manual {
  border-left: 3px solid var(--color-success, #10b981);
}

.face-chip-conf-manual {
  color: var(--color-success, #10b981) !important;
  font-weight: 600;
}

.face-chip-actions-manual {
  display: flex;
  opacity: 0;
  transition: opacity 0.2s;
}

.face-chip-manual:hover .face-chip-actions-manual {
  opacity: 1;
}

.face-chip-manual .face-action.remove {
  font-size: calc(14px * var(--type-scale));
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.1);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-muted);
}

.face-chip-manual .face-action.remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Manual Tag Picker Modal */

.manual-tag-picker-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

.manual-tag-picker-content {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: min(90vw, 400px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.manual-tag-picker-content .modal-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.manual-tag-picker-content .modal-header h3 {
  margin: 0;
  font-size: var(--font-lg);
}

.manual-tag-picker-content .modal-body {
  padding: var(--space-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.manual-tag-picker-content #manualTagSearch {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-md);
}

.manual-tag-list {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.manual-tag-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.15s;
}

.manual-tag-option:last-child {
  border-bottom: none;
}

.manual-tag-option:hover {
  background: var(--color-bg-hover);
}

.manual-tag-option .option-name {
  font-weight: 500;
}

.manual-tag-option .option-relationship {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}

/* Transcript Section */

.curator-transcript-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.transcript-status-badge { margin-left: var(--space-xs); }

.transcript-status-badge.status-success { color: #22c55e; }

.transcript-status-badge.status-processing { color: #f59e0b; }

.transcript-status-badge.status-none { color: var(--color-text-muted); }

.transcript-status-text { font-size: var(--font-xs); color: var(--color-text-muted); margin-left: 4px; }

.transcript-preview {
  margin-top: var(--space-xs);
  padding: var(--space-sm);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.transcript-preview .preview-text {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* Transcript click hint */

.transcript-click-hint {
  display: block;
  font-size: var(--font-xs);
  color: var(--color-primary);
  margin-top: var(--space-xs);
  opacity: 0.7;
}

.curator-transcript-section:hover .transcript-click-hint {
  opacity: 1;
}

.curator-transcript-section[onclick]:hover {
  background: var(--color-bg-hover);
}

/* Relates To Section (Documents) */

.curator-relates-to-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.relates-to-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.relates-to-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
}

.relates-to-chip .chip-name {
  color: var(--color-text);
}

.relates-to-chip .chip-remove {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 1.1em;
  line-height: 1;
}

.relates-to-chip .chip-remove:hover {
  color: var(--color-danger);
}

.no-relations {
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  font-style: italic;
}

.add-person-btn {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-primary);
  font-size: var(--font-xs);
  cursor: pointer;
}

.add-person-btn:hover {
  background: var(--color-primary);
  color: white;
}

/* Relates To Picker Modal */

.relates-to-picker-modal .relates-to-picker-content {
  max-width: 400px;
  width: 90%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.relates-to-picker-modal .modal-body {
  padding: var(--space-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.relates-to-picker-modal #relatesToSearch {
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.relates-to-list {
  overflow-y: auto;
  max-height: 300px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.relates-to-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.relates-to-option:last-child {
  border-bottom: none;
}

.relates-to-option:hover {
  background: var(--color-bg-hover);
}

.relates-to-option .option-name {
  font-weight: 500;
}

.relates-to-option .option-relationship {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}

/* Transcript Modal - needs high z-index to appear above Curator modal */

.transcript-modal {
  z-index: 25000;
}

.transcript-modal .transcript-modal-content {
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.transcript-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.transcript-full-text {
  font-size: var(--font-sm);
  line-height: 1.7;
  color: var(--color-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.transcript-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* AI Section */

.curator-ai-section {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(168, 85, 247, 0.05));
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

.ai-summary {
  font-size: var(--font-sm);
  margin: var(--space-xs) 0 0 0;
  line-height: 1.5;
}

.ai-hint {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0 0;
  font-style: italic;
}

.ask-fergi-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: var(--font-xs);
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s;
}

.ask-fergi-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

/* Warnings */

.curator-warnings { margin-top: auto; }

.duplicate-warning {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-md);
  color: #f59e0b;
}

.warning-icon { font-size: 1.2em; }

.warning-text { font-size: var(--font-sm); font-weight: var(--font-medium); }

/* Decision States */

.curator-preview.decision-keep { border: 2px solid var(--color-success); }

.curator-preview.decision-discard { border: 2px solid var(--color-danger); opacity: 0.8; }

.curator-preview.decision-review { border: 2px solid var(--color-warning); }

/* Expanded Face Modal */

.curator-expanded-face-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expanded-face-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.expanded-face-content {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.expanded-face-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.expanded-face-header h3 { margin: 0; font-size: var(--font-lg); }

.expanded-face-body {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  overflow-y: auto;
  flex: 1;
}

.expanded-face-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expanded-face-preview img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.expanded-face-grid {
  flex: 0 0 280px;
}

.expanded-face-grid h4 { margin: 0 0 var(--space-md) 0; }

.expanded-face-grid .faces-grid { max-height: 50vh; overflow-y: auto; }

.expanded-face-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  text-align: right;
}

/* Mobile */

@media (max-width: 768px) {
  .curator-preview { flex-direction: column; }
  .curator-preview-info { flex: none; max-height: none; width: 100%; }
  .face-chip { width: 60px; }
  .face-chip-crop { width: 40px; height: 40px; }
  .expanded-face-body { flex-direction: column; }
  .expanded-face-grid { flex: none; }
}

/* =============================================================================
   v8.11.0: PHOTO TAGGING & FAMILY EXPLAINER MODALS
   ============================================================================= */

/* Shared Scope Selector Styles */

.scope-selector-container {
  padding: var(--space-lg);
  text-align: center;
}

.scope-selector-container h3 {
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.scope-description {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  font-size: calc(14px * var(--type-scale));
}

.scope-type-toggle {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.scope-type-btn {
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: pointer;
  font-size: calc(14px * var(--type-scale));
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.scope-type-btn:hover {
  border-color: var(--color-primary);
  background: rgba(102, 126, 234, 0.05);
}

.scope-type-btn.active {
  border-color: var(--color-primary);
  background: rgba(102, 126, 234, 0.1);
  color: var(--color-primary);
}

.scope-profiles-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  text-align: left;
}

.scope-profile-item {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.scope-profile-item:last-child {
  border-bottom: none;
}

.scope-profile-item:hover {
  background: var(--color-bg-secondary);
}

.scope-profile-item.selected {
  background: rgba(102, 126, 234, 0.1);
  border-left: 3px solid var(--color-primary);
}

.scope-profile-icon {
  font-size: calc(24px * var(--type-scale));
}

.scope-profile-info {
  flex: 1;
}

.scope-profile-name {
  font-weight: 600;
  color: var(--color-text);
}

.scope-profile-desc {
  font-size: calc(12px * var(--type-scale));
  color: var(--color-text-muted);
}

.scope-continue-btn {
  min-width: 200px;
}

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

.loading-indicator {
  padding: var(--space-xl);
  text-align: center;
  color: var(--ffvr-ink-faint, var(--color-text-muted));
}

/* Photo Tagging Modal */

.photo-tagging-modal .modal-content {
  max-width: 1000px;
  width: 95vw;
  max-height: 90vh;
}

.photo-tagging-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: var(--space-md) var(--space-lg);
}

.photo-tagging-header .modal-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  margin: 0;
  color: white;
  font-size: calc(18px * var(--type-scale));
}

.photo-tagging-header .modal-close {
  color: white;
  font-size: calc(24px * var(--type-scale));
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.photo-tagging-progress {
  background: rgba(255, 255, 255, 0.2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-size: calc(13px * var(--type-scale));
}

.photo-tagging-body {
  padding: 0;
}

.photo-tagging-phase {
  padding: var(--space-lg);
}

/* Photo Tagging Review Layout */

.photo-tagging-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  min-height: 400px;
}

.photo-tagging-photo-panel {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}

.photo-tagging-photo-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#photoTaggingFullPhoto {
  max-width: 100%;
  max-height: 350px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.photo-tagging-photo-info {
  margin-top: var(--space-sm);
  font-size: calc(12px * var(--type-scale));
  color: var(--color-text-muted);
  text-align: center;
}

.photo-tagging-faces-panel {
  display: flex;
  flex-direction: column;
}

.photo-tagging-faces-panel h4 {
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.photo-tagging-faces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-md);
  max-height: 350px;
  overflow-y: auto;
}

/* Face Card */

.face-card {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
  transition: all 0.2s;
}

.face-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.face-card.confirmed {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

.face-card.corrected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.face-card.unknown {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.05);
}

.face-card-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

.face-card-prediction {
  font-weight: 600;
  font-size: calc(13px * var(--type-scale));
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.face-card-confidence {
  font-size: calc(11px * var(--type-scale));
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.face-card-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.face-action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: calc(11px * var(--type-scale));
  font-weight: 500;
  transition: all 0.2s;
}

.face-action-btn.confirm {
  background: #10b981;
  color: white;
}

.face-action-btn.confirm:hover {
  background: #059669;
}

.face-action-btn.different {
  background: #f59e0b;
  color: white;
}

.face-action-btn.different:hover {
  background: #d97706;
}

.face-action-btn.unknown {
  background: #ef4444;
  color: white;
}

.face-action-btn.unknown:hover {
  background: #dc2626;
}

/* Photo Tagging Navigation */

.photo-tagging-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-lg);
}

.photo-tagging-stats {
  display: flex;
  gap: var(--space-lg);
  font-size: calc(14px * var(--type-scale));
}

.stat-confirmed {
  color: #10b981;
}

.stat-corrected {
  color: #f59e0b;
}

.stat-unknown {
  color: #ef4444;
}

/* Photo Tagging Summary */

.photo-tagging-summary {
  text-align: center;
  padding: var(--space-xl);
}

.photo-tagging-summary h3 {
  font-size: calc(24px * var(--type-scale));
  margin-bottom: var(--space-lg);
}

.summary-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.summary-stat {
  text-align: center;
}

.summary-stat-value {
  font-size: calc(32px * var(--type-scale));
  font-weight: 700;
}

.summary-stat-label {
  font-size: calc(12px * var(--type-scale));
  color: var(--color-text-muted);
}

.summary-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

/* Person Selector Modal - needs high z-index to appear above Curator modal (9998) */

.person-selector-modal {
  z-index: 10100;
}

/* Remove dark overlay so user can see target face behind modal */

.person-selector-modal .modal-overlay {
  background: transparent;
  pointer-events: none;
}

.person-selector-modal .modal-content {
  max-width: 500px;
  max-height: 70vh;
  z-index: 10301;
  position: relative;
  pointer-events: auto;
  /* Add subtle shadow to distinguish from background */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Person Selector Header with New button */

.person-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.person-selector-header .modal-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.person-selector-header .person-selector-new-btn {
  padding: 0.35rem 0.75rem;
  font-size: calc(0.8rem * var(--type-scale));
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.person-selector-header .person-selector-new-btn:hover {
  opacity: 0.9;
}

.person-search-input {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: calc(14px * var(--type-scale));
}

.person-selector-list {
  max-height: 300px;
  overflow-y: auto;
}

.person-selector-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.person-selector-item:hover {
  background: var(--color-bg-secondary);
}

/* Auto-highlighted state when single search result (Enter key will select) */

.person-selector-item.person-selector-highlighted {
  background: rgba(102, 126, 234, 0.25);
  border: 2px solid var(--color-accent, #667eea);
  margin: -2px;
  margin-bottom: 0;
}

.person-selector-item.person-selector-highlighted .person-selector-name {
  color: var(--color-accent, #667eea);
  font-weight: 600;
}

.person-selector-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(14px * var(--type-scale));
}

.person-selector-name {
  font-weight: 500;
  color: var(--color-text);
}

/* Person Selector Empty State */

.person-selector-empty {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.person-selector-empty .empty-icon {
  font-size: calc(48px * var(--type-scale));
  margin-bottom: var(--space-md);
  opacity: 0.6;
}

.person-selector-empty .empty-message {
  font-size: calc(16px * var(--type-scale));
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.person-selector-empty .empty-hint {
  font-size: calc(14px * var(--type-scale));
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.person-selector-empty .empty-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

.person-selector-empty .empty-actions .btn {
  min-width: 200px;
}

/* Family Explainer Modal */

.family-explainer-modal .modal-content {
  max-width: 900px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.family-explainer-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: var(--space-md) var(--space-lg);
}

.family-explainer-header .modal-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  margin: 0;
  color: white;
  font-size: calc(18px * var(--type-scale));
}

.family-explainer-header .modal-close {
  color: white;
  font-size: calc(24px * var(--type-scale));
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.family-explainer-profile-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-size: calc(13px * var(--type-scale));
}

.family-explainer-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.family-explainer-phase {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Gap Analysis */

.family-explainer-gaps {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  max-height: 250px;
  overflow-y: auto;
}

.family-explainer-gaps h4 {
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.gaps-loading {
  text-align: center;
  padding: var(--space-xl);
}

.gaps-loading p {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
}

.gap-category {
  margin-bottom: var(--space-md);
}

.gap-category h5 {
  font-size: calc(13px * var(--type-scale));
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

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

.gap-list li {
  font-size: calc(12px * var(--type-scale));
  color: var(--color-text-muted);
  padding: var(--space-xs) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-border);
}

.gap-list li:hover {
  background: var(--color-bg);
  border-left-color: var(--color-primary);
  cursor: pointer;
}

/* Family Explainer Dialogue */

.family-explainer-dialogue {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-lg);
  min-height: 0;
}

.family-explainer-dialogue h4 {
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.family-explainer-messages {
  flex: 1;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  min-height: 200px;
}

.family-explainer-message {
  margin-bottom: var(--space-md);
  display: flex;
  gap: var(--space-sm);
}

.family-explainer-message.ai {
  flex-direction: row;
}

.family-explainer-message.user {
  flex-direction: row-reverse;
}

.family-explainer-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--type-scale));
  flex-shrink: 0;
}

.family-explainer-message.ai .family-explainer-message-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.family-explainer-message.user .family-explainer-message-avatar {
  background: var(--color-primary);
}

.family-explainer-message-content {
  max-width: 80%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: calc(14px * var(--type-scale));
  line-height: 1.5;
}

.family-explainer-message.ai .family-explainer-message-content {
  background: var(--color-bg);
  color: var(--color-text);
}

.family-explainer-message.user .family-explainer-message-content {
  background: var(--color-primary);
  color: white;
}

.family-explainer-input-area {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
}

.family-explainer-voice-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  font-size: calc(18px * var(--type-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.family-explainer-voice-btn:hover {
  background: var(--color-bg-secondary);
}

.family-explainer-voice-btn.recording {
  background: #ef4444;
  border-color: #ef4444;
  animation: pulse 1s infinite;
}

#familyExplainerInput {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: calc(14px * var(--type-scale));
  font-family: inherit;
  min-height: 44px;
  max-height: 120px;
}

#familyExplainerInput:focus {
  outline: none;
  border-color: var(--color-primary);
}

.family-explainer-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.family-explainer-send-btn:hover {
  background: #5a67d8;
}

.family-explainer-send-btn svg {
  width: 20px;
  height: 20px;
}

/* Loading Spinner */

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

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

/* Mobile Responsive */

@media (max-width: 768px) {
  .photo-tagging-layout {
    grid-template-columns: 1fr;
  }

  .photo-tagging-faces-grid {
    max-height: 200px;
  }

  .scope-type-toggle {
    flex-direction: column;
  }

  .family-explainer-gaps {
    max-height: 150px;
  }

  .family-explainer-messages {
    min-height: 150px;
  }

  /* fluffy-puzzling-dongarra S1 D1: 100vw → 100% + box-sizing on
     mobile modal content. Same viewport-anchoring fix. */
  .photo-tagging-modal .modal-content,
  .family-explainer-modal .modal-content {
    max-height: 95vh;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-sizing: border-box;
  }
}

/* ============================================================================ */

/* FAMILY FOCUS CHIPS                                                  */

/* Focus chips appear in header showing currently focused family members        */

/* ============================================================================ */

/* Focus Chips Container */

#focusChipsContainer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  min-height: 32px;
  flex-wrap: wrap;
  max-width: 400px;
}

#focusChipsContainer.has-focus {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  border-radius: 16px;
}

.focus-label {
  font-size: calc(12px * var(--type-scale));
  color: #666;
  font-weight: 500;
  white-space: nowrap;
}

/* Hidden per user feedback - users don't need "Exploring all" label */

.focus-explore-label {
  display: none;
}

/* Individual Chip */

.focus-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 8px 4px 12px;
  border-radius: 16px;
  font-size: calc(13px * var(--type-scale));
  font-weight: 500;
  animation: chipAppear 0.2s ease-out;
  cursor: default;
}

.focus-chip-more {
  cursor: pointer;
  padding: 4px 12px;
  background: linear-gradient(135deg, #888, #666);
}

.focus-chip-more:hover {
  background: linear-gradient(135deg, #777, #555);
}

@keyframes chipAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.focus-chip-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-chip-remove {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(14px * var(--type-scale));
  line-height: 1;
  transition: background 0.15s;
  padding: 0;
}

.focus-chip-remove:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Clear All Button */

.focus-clear-all {
  background: transparent;
  border: 1px solid #ccc;
  color: #666;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: calc(11px * var(--type-scale));
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.focus-clear-all:hover {
  background: #f0f0f0;
  border-color: #999;
}

/* Collapse Button */

.focus-chip-collapse {
  background: transparent;
  border: 1px solid #ccc;
  color: #666;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: calc(11px * var(--type-scale));
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.focus-chip-collapse:hover {
  background: #f0f0f0;
  border-color: #999;
}

/* Focus action button in family member modal */

.fm-action-btn.focused {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-color: #667eea;
}

.fm-action-btn.focused:hover {
  background: linear-gradient(135deg, #5a6fd6, #6a4290);
}

/* Mobile Responsiveness */

@media (max-width: 768px) {
  #focusChipsContainer {
    padding: 4px 8px;
    max-width: 200px;
  }

  .focus-chip {
    padding: 2px 6px 2px 10px;
    font-size: calc(12px * var(--type-scale));
  }

  .focus-chip-name {
    max-width: 60px;
  }

  .focus-label {
    display: none;
  }
}

@media (max-width: 480px) {
  #focusChipsContainer {
    max-width: 150px;
  }

  .focus-explore-label {
    display: none;
  }
}

/* =============================================================================
   GLOBAL FOCUS CONTROLS (Header Center)
   Interactive clickable controls for Family, Media, and Story focus
   ============================================================================= */

.global-focus-controls,

.focus-chips-container {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  /* Force single line - prevent any wrapping */
  flex-direction: row !important;
  /* Ensure container doesn't cause wrapping */
  overflow: visible;
  min-width: max-content;
}

/* Individual Focus Control (clickable chip) */

.focus-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--color-bg-secondary, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: calc(13px * var(--type-scale));
  color: var(--color-text, #374151);
  white-space: nowrap;
  user-select: none;
}

.focus-control:hover {
  background: var(--color-bg, #ffffff);
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.focus-control:active {
  transform: scale(0.98);
}

/* Selected state - gradient background */

.focus-control.has-selection {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-color: transparent;
}

.focus-control.has-selection:hover {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Type-specific colors when selected */

.focus-control-family.has-selection {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.focus-control-media.has-selection {
  background: linear-gradient(135deg, #10b981, #059669);
}

.focus-control-story.has-selection {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.focus-control-icon {
  font-size: calc(14px * var(--type-scale));
  line-height: 1;
}

.focus-control-text {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.focus-control-arrow {
  font-size: calc(10px * var(--type-scale));
  opacity: 0.6;
  margin-left: 2px;
}

.focus-control-clear {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: inherit;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: calc(14px * var(--type-scale));
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  transition: background 0.15s;
  padding: 0;
}

.focus-control-clear:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Mobile: Smaller controls */

@media (max-width: 768px) {
  .global-focus-controls {
    gap: 4px;
  }

  .focus-control {
    padding: 4px 8px;
    font-size: calc(12px * var(--type-scale));
    gap: 4px;
  }

  .focus-control-text {
    max-width: 100px;
  }

  .focus-control-icon {
    font-size: calc(12px * var(--type-scale));
  }
}

/* Very small screens: Icons only */

@media (max-width: 480px) {
  .focus-control-text {
    display: none;
  }

  .focus-control-arrow {
    display: none;
  }

  .focus-control {
    padding: 6px 8px;
  }
}

/* =============================================================================
   USER DASHBOARD MODAL
   realizing-conditioning-fabric S1 D1 (2026-05-16).
   Single explicit-setting surface for the three global focal controls —
   Family Focus, Media Profile, Story Profile. Replaces header-chrome chips
   on Mac browser + the three-row layout that used to sit in the mobile
   profile bottom sheet. Modal opens from user dropdown (Mac), side-nav
   (Mac/Control Panel), and profile bottom sheet (mobile).
   ============================================================================= */

.user-dashboard-modal-overlay {
  /* modal-integrity-scan S4: visibility + fade now owned by .ffa-modal/.is-open
   * (modal-foundation.css). Layout/padding retained; one-shot fadeIn removed. */
  background: rgba(0, 0, 0, 0.55);
  padding: 16px;
  box-sizing: border-box;
}

.user-dashboard-modal {
  background: var(--color-bg, #ffffff);
  border-radius: var(--radius-lg, 12px);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  /* modal-integrity-scan S4: rise now via .ffa-modal__panel (compositor-only) */
}

.user-dashboard-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
}

.user-dashboard-modal-header h2 {
  margin: 0;
  font-size: calc(20px * var(--type-scale));
  font-weight: 600;
  color: var(--color-text, #111827);
}

.user-dashboard-modal-close {
  background: none;
  border: none;
  font-size: calc(26px * var(--type-scale));
  cursor: pointer;
  color: var(--color-text-light, #6b7280);
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.user-dashboard-modal-close:hover {
  color: var(--color-text, #111827);
}

.user-dashboard-modal-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
}

.ud-section {
  margin-bottom: 20px;
}

.ud-section:last-child {
  margin-bottom: 0;
}

.ud-section-header h3 {
  margin: 0 0 4px;
  font-size: calc(15px * var(--type-scale));
  font-weight: 600;
  color: var(--color-text, #111827);
}

.ud-section-hint {
  margin: 0 0 12px;
  font-size: calc(13px * var(--type-scale));
  color: var(--color-text-light, #6b7280);
  line-height: 1.45;
}

.ud-foci-controls {
  padding: 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  background: var(--color-bg-secondary, #f9fafb);
}

/* When focus-chips render inside the dashboard, lay them out as a vertical
   stack rather than the inline-flex row used in the header. The base
   `.focus-chips-container` rule uses `!important` for the original header
   inline-flex / row layout (forced single-line per the prior header
   contract); the dashboard override must match its specificity. */
.user-dashboard-modal .ud-foci-chips,
.ud-foci-chips {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 10px;
  max-width: none;
  padding: 0;
  min-height: 0;
  flex-wrap: nowrap;
  white-space: normal;
}

.ud-foci-chips .focus-control {
  width: 100%;
  justify-content: flex-start;
}

@media (max-width: 480px) {
  .user-dashboard-modal {
    max-height: 90vh;
  }

  .user-dashboard-modal-header h2 {
    font-size: calc(18px * var(--type-scale));
  }
}

/* =============================================================================
   PROFILE SELECTOR MODAL
   Modal for selecting Media or Story profiles from header
   ============================================================================= */

.profile-selector-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  animation: fadeIn 0.2s ease-out;
}

.profile-selector-modal {
  background: var(--color-bg, #ffffff);
  border-radius: var(--radius-lg, 12px);
  width: 90%;
  max-width: 400px;
  max-height: 70vh;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease-out;
}

.profile-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-secondary, #f9fafb);
}

.profile-selector-header h3 {
  margin: 0;
  font-size: calc(18px * var(--type-scale));
  font-weight: 600;
  color: var(--color-text, #111827);
}

.profile-selector-close {
  background: none;
  border: none;
  font-size: calc(24px * var(--type-scale));
  cursor: pointer;
  color: var(--color-text-light, #6b7280);
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.profile-selector-close:hover {
  color: var(--color-text, #111827);
}

.profile-selector-list {
  max-height: 55vh;
  overflow-y: auto;
}

.profile-selector-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  cursor: pointer;
  transition: background 0.15s;
}

.profile-selector-item:hover {
  background: var(--color-bg-secondary, #f3f4f6);
}

.profile-selector-item:last-child {
  border-bottom: none;
}

.profile-selector-item.selected {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
}

.profile-selector-item.selected .profile-selector-name {
  color: #667eea;
  font-weight: 600;
}

.profile-selector-name {
  font-weight: 500;
  color: var(--color-text, #111827);
}

.profile-selector-desc {
  font-size: calc(12px * var(--type-scale));
  color: var(--color-text-light, #6b7280);
}

.profile-selector-count {
  color: var(--color-text-light, #6b7280);
  font-size: calc(13px * var(--type-scale));
}

.profile-selector-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-light, #6b7280);
}

/* Profile Selector Search Bar */

.profile-selector-search-bar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.profile-selector-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font-size: calc(15px * var(--type-scale));
  color: var(--color-text, #111827);
  background: var(--color-bg, #ffffff);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.profile-selector-search:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.profile-selector-search::placeholder {
  color: var(--color-text-light, #9ca3af);
}

.profile-selector-no-results {
  padding: 24px 20px;
  text-align: center;
  color: var(--color-text-light, #6b7280);
  font-size: calc(14px * var(--type-scale));
}

/* Profile Selector Create Footer */

.profile-selector-create-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-secondary, #f9fafb);
}

.profile-create-ai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-create-ai-btn:hover {
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.profile-create-ai-btn .btn-icon {
  font-size: calc(18px * var(--type-scale));
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.profile-create-ai-btn .btn-text {
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
  color: white;
}

/* =============================================================================
   CURATION MODAL STYLES
   v10.0.0 - Unified media management interface
   ============================================================================= */

/* Modal Overlay */

.curation-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.curation-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal Content */

.curation-modal-content {
  background: white;
  border-radius: 12px;
  width: 95vw;
  max-width: 1400px;
  height: 90vh;
  max-height: 900px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Header */

.curation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.curation-header h2 {
  margin: 0;
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 600;
}

/* Profile indicator in curation header */

.curation-profile-indicator {
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: 400;
  opacity: 0.9;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  margin-left: auto;
  margin-right: 16px;
}

/* .curation-close-btn visuals handled by .ffa-exit-btn */

/* Body Layout */

.curation-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar (Mode Selector) */

.curation-sidebar {
  width: 80px;
  background: #f8f9fa;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  padding: 12px 0;
}

.curation-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  margin: 4px 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.curation-mode-btn:hover {
  background: #e5e7eb;
}

.curation-mode-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.mode-icon {
  font-size: calc(24px * var(--type-scale));
  margin-bottom: 4px;
}

.mode-label {
  font-size: calc(11px * var(--type-scale));
  font-weight: 500;
  text-align: center;
}

/* Main Content Area */

.curation-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Filter Bar */

.curation-filters {
  padding: 12px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.curation-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.curation-filter-left,

.curation-filter-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Search Input */

.curation-search {
  position: relative;
  min-width: 200px;
}

.curation-search input {
  width: 100%;
  padding: 8px 12px;
  padding-right: 30px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: calc(14px * var(--type-scale));
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.curation-search input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.curation-search .search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: calc(18px * var(--type-scale));
  color: #9ca3af;
  cursor: pointer;
  padding: 0 4px;
}

.curation-search .search-clear:hover {
  color: #6b7280;
}

/* Select Dropdowns */

.curation-select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: calc(14px * var(--type-scale));
  background: white;
  cursor: pointer;
  outline: none;
  min-width: 120px;
}

.curation-select:focus {
  border-color: #667eea;
}

/* Date Range */

.curation-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.curation-date-range input[type="date"] {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: calc(13px * var(--type-scale));
}

.date-separator {
  color: #6b7280;
  font-size: calc(13px * var(--type-scale));
}

/* Grid Size Buttons */

.curation-grid-size {
  display: flex;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
}

.grid-size-btn {
  padding: 6px 10px;
  border: none;
  background: white;
  cursor: pointer;
  font-size: calc(12px * var(--type-scale));
  transition: all 0.2s;
}

.grid-size-btn:not(:last-child) {
  border-right: 1px solid #d1d5db;
}

.grid-size-btn.active {
  background: #667eea;
  color: white;
}

.grid-size-btn:hover:not(.active) {
  background: #f3f4f6;
}

/* Count Display */

.curation-count {
  font-size: calc(14px * var(--type-scale));
  color: #6b7280;
}

/* Active Filters */

.curation-active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  background: #e0e7ff;
  border-radius: 16px;
  font-size: calc(13px * var(--type-scale));
  color: #4f46e5;
}

.filter-chip button {
  background: none;
  border: none;
  font-size: calc(14px * var(--type-scale));
  color: #6366f1;
  cursor: pointer;
  padding: 0 2px;
}

.filter-chip button:hover {
  color: #4338ca;
}

.clear-all-filters {
  background: none;
  border: none;
  font-size: calc(13px * var(--type-scale));
  color: #6366f1;
  cursor: pointer;
  text-decoration: underline;
}

.clear-all-filters:hover {
  color: #4338ca;
}

/* Content Area */

.curation-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

/* Loading State */

.curation-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #6b7280;
}

.curation-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Error State */

.curation-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #dc2626;
  text-align: center;
}

.curation-error button {
  margin-top: 12px;
  padding: 8px 16px;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Empty State */

.curation-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #6b7280;
  text-align: center;
}

.empty-icon {
  font-size: calc(48px * var(--type-scale));
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-hint {
  font-size: calc(14px * var(--type-scale));
  color: #9ca3af;
  margin-top: 8px;
}

/* Grid Layout */

.curation-grid {
  display: grid;
  gap: 12px;
}

.curation-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.curation-grid-medium {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.curation-grid-large {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Grid Items */

.curation-item {
  position: relative;
  background: #f9fafb;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.curation-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.curation-item.selected {
  border-color: #667eea;
  background: #e0e7ff;
}

.curation-item-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.curation-item-checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #667eea;
}

.curation-item-thumb {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  overflow: hidden;
}

.curation-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.curation-item-thumb .thumb-icon,

.curation-item-thumb .no-thumb {
  font-size: calc(32px * var(--type-scale));
  color: #9ca3af;
}

.curation-item-label {
  padding: 8px;
  font-size: calc(12px * var(--type-scale));
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #374151;
}

/* Compact grid adjustments */

.curation-grid-compact .curation-item-label {
  display: none;
}

.curation-grid-compact .curation-item-checkbox input {
  width: 14px;
  height: 14px;
}

/* Actions Bar */

.curation-actions {
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.curation-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 16px;
}

.actions-left,

.actions-center,

.actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selection-hint,

.import-hint,

.profile-hint {
  font-size: calc(14px * var(--type-scale));
  color: #6b7280;
}

.selection-count {
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
  color: #374151;
}

/* Buttons */

.curation-btn {
  padding: 8px 14px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.curation-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.curation-btn-primary {
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: calc(14px * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.curation-btn-primary:hover {
  background: linear-gradient(135deg, #5a6fd6, #6a4290);
}

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

.curation-btn-link {
  background: none;
  border: none;
  color: #667eea;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
  text-decoration: underline;
}

.curation-btn-link:hover {
  color: #5a6fd6;
}

.curation-btn-danger {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.curation-btn-danger:hover {
  background: #fecaca;
}

/* Dropdown Menu */

.action-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 4px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  z-index: 100;
  padding: 4px 0;
}

.dropdown-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-menu button:hover {
  background: #f3f4f6;
}

.dropdown-menu hr {
  margin: 4px 0;
  border: none;
  border-top: 1px solid #e5e7eb;
}

.dropdown-menu .action-danger {
  color: #dc2626;
}

.dropdown-menu .action-danger:hover {
  background: #fee2e2;
}

/* Import Mode Styles */

.curation-import {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.curation-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  transition: all 0.3s;
  cursor: pointer;
}

.curation-dropzone:hover,

.curation-dropzone.dragover {
  border-color: #667eea;
  background: #e0e7ff;
}

.dropzone-icon {
  font-size: calc(48px * var(--type-scale));
  margin-bottom: 16px;
}

.curation-dropzone p {
  margin: 0 0 16px;
  color: #6b7280;
  font-size: calc(16px * var(--type-scale));
}

.curation-dropzone button {
  padding: 10px 24px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
}

/* Import Context Fields */

.curation-import-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding-top: 8px;
}

.import-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.import-field label {
  font-size: calc(13px * var(--type-scale));
  font-weight: 500;
  color: #374151;
}

.import-field input,

.import-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: calc(14px * var(--type-scale));
}

.import-hint {
  font-size: calc(13px * var(--type-scale));
  color: #6b7280;
}

/* Pending Uploads */

.curation-pending-uploads {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pending-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.upload-name {
  flex: 1;
  font-size: calc(14px * var(--type-scale));
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.upload-size {
  font-size: calc(12px * var(--type-scale));
  color: #6b7280;
  margin: 0 12px;
}

.upload-status {
  font-size: calc(12px * var(--type-scale));
  padding: 2px 8px;
  background: #e0e7ff;
  border-radius: 4px;
  color: #4f46e5;
}

.pending-upload button {
  background: none;
  border: none;
  font-size: calc(18px * var(--type-scale));
  color: #9ca3af;
  cursor: pointer;
  margin-left: 12px;
}

.pending-upload button:hover {
  color: #dc2626;
}

/* Upload Progress */

.upload-progress-bar {
  width: 200px;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 4px;
  transition: width 0.3s;
}

/* Profiles Mode */

.curation-profiles {
  padding: 16px;
}

.profiles-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.profile-type-btn {
  padding: 10px 20px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 6px;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.profile-type-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-color: #667eea;
}

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

.profile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s;
}

.profile-item:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.profile-icon {
  font-size: calc(20px * var(--type-scale));
}

.profile-name {
  flex: 1;
  font-weight: 500;
}

.profile-count {
  font-size: calc(13px * var(--type-scale));
  color: #6b7280;
}

.profiles-empty {
  text-align: center;
  color: #6b7280;
  padding: 40px;
}

/* Review Mode */

.curation-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.review-stats {
  display: flex;
  gap: 16px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  flex-wrap: wrap;
}

.review-stat {
  font-size: calc(14px * var(--type-scale));
  padding: 4px 12px;
  background: white;
  border-radius: 4px;
}

.review-queue {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.review-item-thumb {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-item-info {
  flex: 1;
}

.review-item-info p {
  margin: 0 0 4px;
}

.review-confidence {
  font-size: calc(13px * var(--type-scale));
  color: #6b7280;
}

.review-item-actions {
  display: flex;
  gap: 8px;
}

.review-item-actions button {
  width: 40px;
  height: 40px;
  border: 1px solid #e5e7eb;
  background: white;
  border-radius: 8px;
  font-size: calc(18px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.review-item-actions button:hover {
  transform: scale(1.1);
}

.review-empty {
  text-align: center;
  color: #6b7280;
  padding: 40px;
}

.review-empty .empty-icon {
  font-size: calc(48px * var(--type-scale));
  display: block;
  margin-bottom: 16px;
}

.review-empty h4 {
  font-size: calc(18px * var(--type-scale));
  color: #374151;
  margin: 0 0 8px;
}

.review-empty .empty-hint {
  font-size: calc(13px * var(--type-scale));
  color: #9ca3af;
  margin-top: 8px;
}

.review-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px;
  gap: 16px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.review-header h3 {
  margin: 0;
  font-size: calc(16px * var(--type-scale));
  font-weight: 600;
  color: #374151;
}

.review-stat.confirmed { color: #10b981; }

.review-stat.rejected { color: #ef4444; }

.review-stat.skipped { color: #6b7280; }

/* Weaver Review Package Cards */

.weaver-review-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.weaver-review-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: box-shadow 0.2s;
}

.weaver-review-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.weaver-review-thumb {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weaver-review-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weaver-review-thumb .thumb-placeholder {
  font-size: calc(48px * var(--type-scale));
  color: #d1d5db;
}

.weaver-review-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.weaver-suggestion-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.weaver-suggestion-group label {
  font-size: calc(12px * var(--type-scale));
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 100px;
  flex-shrink: 0;
}

.weaver-suggestion-group .original-name {
  font-size: calc(14px * var(--type-scale));
  color: #9ca3af;
}

.weaver-suggestion-group input[type="text"],

.weaver-suggestion-group input[type="date"] {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: calc(14px * var(--type-scale));
}

.weaver-suggestion-group input.accepted {
  border-color: #10b981;
  background: #ecfdf5;
}

.weaver-suggestion-group.accepted {
  background: #f0fdf4;
  border-radius: 6px;
  padding: 8px;
  margin: -8px;
}

.accept-btn.small {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  font-size: calc(16px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.accept-btn.small:hover {
  background: #10b981;
  color: white;
  border-color: #10b981;
}

.suggested-persons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.person-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #f3f4f6;
  border-radius: 20px;
  font-size: calc(13px * var(--type-scale));
}

.person-chip.confidence-high { background: #dcfce7; color: #166534; }

.person-chip.confidence-medium { background: #fef3c7; color: #92400e; }

.person-chip.confidence-low { background: #fee2e2; color: #991b1b; }

.person-chip.confidence-unknown { background: #f3f4f6; color: #6b7280; }

.person-chip.confirmed {
  background: #10b981;
  color: white;
}

.person-chip.rejected {
  background: #fee2e2;
  color: #991b1b;
  text-decoration: line-through;
}

.person-chip .confidence {
  font-size: calc(11px * var(--type-scale));
  opacity: 0.8;
}

.person-chip button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  font-size: calc(12px * var(--type-scale));
  cursor: pointer;
  transition: all 0.15s;
}

.person-chip button:hover {
  background: rgba(255, 255, 255, 0.5);
}

.confirm-person-btn:hover {
  background: #10b981 !important;
  color: white;
}

.reject-person-btn:hover {
  background: #ef4444 !important;
  color: white;
}

.ai-description .description-text {
  font-size: calc(14px * var(--type-scale));
  color: #4b5563;
  line-height: 1.5;
  margin: 0;
}

.weaver-review-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: center;
}

.weaver-review-actions button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: calc(14px * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.weaver-review-actions .approve-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.weaver-review-actions .approve-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.weaver-review-actions .reject-btn {
  background: #fee2e2;
  color: #dc2626;
}

.weaver-review-actions .reject-btn:hover {
  background: #fecaca;
}

.weaver-review-actions .skip-btn {
  background: #f3f4f6;
  color: #6b7280;
}

.weaver-review-actions .skip-btn:hover {
  background: #e5e7eb;
}

/* Responsive adjustments for Weaver review */

@media (max-width: 768px) {
  .weaver-review-item {
    flex-direction: column;
  }

  .weaver-review-thumb {
    width: 100%;
    height: 200px;
  }

  .weaver-review-actions {
    flex-direction: row;
    width: 100%;
  }

  .weaver-review-actions button {
    flex: 1;
  }
}

.review-stats-mini {
  display: flex;
  gap: 12px;
}

.review-stats-mini .stat {
  font-size: calc(13px * var(--type-scale));
}

.review-stats-mini .confirmed {
  color: #10b981;
}

.review-stats-mini .corrected {
  color: #f59e0b;
}

.review-stats-mini .rejected {
  color: #ef4444;
}

.review-stats-mini .skipped {
  color: #6b7280;
}

/* Review Filter Toggle */

.review-type-toggle {
  display: flex;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
}

.review-type-toggle button {
  padding: 6px 14px;
  border: none;
  background: white;
  font-size: calc(13px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.review-type-toggle button:not(:last-child) {
  border-right: 1px solid #d1d5db;
}

.review-type-toggle button.active {
  background: #667eea;
  color: white;
}

/* Confidence Slider */

.confidence-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.confidence-slider label {
  font-size: calc(13px * var(--type-scale));
  color: #6b7280;
  white-space: nowrap;
}

.confidence-slider input[type="range"] {
  width: 120px;
  accent-color: #667eea;
}

/* Profile Actions - unsaved indicator */

.unsaved-indicator {
  color: #f59e0b;
  margin-left: 4px;
}

/* Load More Button */

.curation-load-more {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.curation-load-more button {
  padding: 10px 24px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
}

.curation-load-more button:hover {
  background: #f3f4f6;
}

/* Responsive Adjustments */

@media (max-width: 768px) {
  /* fluffy-puzzling-dongarra S1 D1: 100vw/100vh → 100% + box-sizing on
     the curation modal-content. Pairs with the body.modal-open `inset: 0`
     four-edge pinning in browse-media.css. */
  .curation-modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    box-sizing: border-box;
  }

  .curation-sidebar {
    width: 60px;
  }

  .mode-label {
    font-size: calc(9px * var(--type-scale));
  }

  .mode-icon {
    font-size: calc(20px * var(--type-scale));
  }

  .curation-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .curation-filter-left,
  .curation-filter-right {
    justify-content: center;
  }

  .curation-date-range {
    flex-direction: column;
    align-items: stretch;
  }

  .curation-actions-bar {
    flex-wrap: wrap;
  }

  .actions-center {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

@media (max-width: 480px) {
  .curation-sidebar {
    width: 50px;
  }

  .mode-label {
    display: none;
  }

  .curation-mode-btn {
    padding: 12px 4px;
  }

  .curation-grid-medium {
    grid-template-columns: repeat(2, 1fr);
  }

  .curation-grid-large {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   STORYTELLER MODE (v10.0.0 Phase 4)
   ============================================================================ */

.storyteller-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.storyteller-modal.active {
  display: flex;
}

.storyteller-content {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.storyteller-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
}

.storyteller-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.storyteller-title h2 {
  margin: 0;
  font-size: calc(18px * var(--type-scale));
  font-weight: 600;
}

.storyteller-icon {
  font-size: calc(24px * var(--type-scale));
}

.model-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: calc(11px * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.model-badge.haiku {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.model-badge.sonnet {
  background: #fbbf24;
  color: #92400e;
}

.model-badge.opus {
  background: #10b981;
  color: white;
}

.storyteller-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.model-switch-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  font-size: calc(18px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.model-switch-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* .storyteller-close-btn visuals handled by .ffa-exit-btn */

.storyteller-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.storyteller-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.storyteller-message {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  line-height: 1.5;
}

.storyteller-message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border-bottom-right-radius: 4px;
}

.storyteller-message.assistant {
  align-self: flex-start;
  background: #f3f4f6;
  color: #1f2937;
  border-bottom-left-radius: 4px;
}

.storyteller-message.system {
  align-self: center;
  background: #fef3c7;
  color: #92400e;
  font-size: calc(13px * var(--type-scale));
}

.storyteller-message .message-content {
  font-size: calc(14px * var(--type-scale));
}

.storyteller-message .message-meta {
  font-size: calc(11px * var(--type-scale));
  opacity: 0.7;
  margin-top: 6px;
}

.storyteller-message.processing .message-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-indicator {
  display: flex;
  gap: 4px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #9ca3af;
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

.storyteller-suggestions {
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.suggestion-chip {
  padding: 8px 14px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  font-size: calc(13px * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.suggestion-chip:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: white;
}

.storyteller-input-area {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: white;
}

.storyteller-input-area textarea {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: calc(14px * var(--type-scale));
  resize: none;
  font-family: inherit;
  color: #1f2937; /* Explicit dark text color for visibility */
  background: white;
}

.storyteller-input-area textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.storyteller-send-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: calc(14px * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.storyteller-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.storyteller-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.storyteller-sidebar {
  width: 200px;
  background: #f9fafb;
  border-left: 1px solid #e5e7eb;
  padding: 16px;
  overflow-y: auto;
}

.storyteller-sidebar h3 {
  font-size: calc(13px * var(--type-scale));
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Responsive adjustments */

@media (max-width: 768px) {
  .storyteller-content {
    max-height: 100vh;
    border-radius: 0;
  }

  .storyteller-sidebar {
    display: none;
  }

  .storyteller-message {
    max-width: 95%;
  }

  .storyteller-input-area {
    flex-direction: column;
  }

  .storyteller-send-btn {
    width: 100%;
  }
}

/* =============================================================================
   INLINE AI PANEL (v10.0 Phase 5)
   ============================================================================= */

.fergi-inline-panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 320px;
  max-height: 400px;
  background: white;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  animation: slideUp 0.2s ease-out;
}

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

.fergi-inline-panel.closing {
  animation: slideDown 0.2s ease-in forwards;
}

@keyframes slideDown {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.fergi-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}

.fergi-inline-title {
  font-weight: 600;
  font-size: calc(15px * var(--type-scale));
}

.fergi-inline-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: calc(18px * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.fergi-inline-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.fergi-inline-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 150px;
  max-height: 280px;
}

.fergi-inline-welcome {
  font-size: calc(14px * var(--type-scale));
  color: #6b7280;
  text-align: center;
  padding: 16px;
}

.inline-message {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: fadeIn 0.2s ease-out;
}

.inline-message.user {
  flex-direction: row-reverse;
}

.inline-message-avatar {
  font-size: calc(16px * var(--type-scale));
  flex-shrink: 0;
}

.inline-message-content {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: calc(14px * var(--type-scale));
  line-height: 1.4;
  max-width: 85%;
}

.inline-message.assistant .inline-message-content {
  background: #f3f4f6;
  color: #1f2937;
  border-bottom-left-radius: 4px;
}

.inline-message.user .inline-message-content {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border-bottom-right-radius: 4px;
}

.inline-suggested-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.inline-action-btn {
  padding: 6px 12px;
  border: none;
  background: #e0e7ff;
  color: #4f46e5;
  border-radius: 20px;
  font-size: calc(12px * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.inline-action-btn:hover {
  background: #c7d2fe;
}

.fergi-inline-input-area {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 0 0 16px;
}

#inlinePanelInput {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  font-size: calc(14px * var(--type-scale));
  outline: none;
  transition: border-color 0.2s;
}

#inlinePanelInput:focus {
  border-color: #8b5cf6;
}

.fergi-inline-send {
  width: 40px;
  height: 40px;
  border: none;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.fergi-inline-send:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.inline-loading-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.inline-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af;
  animation: loadingDot 1.4s infinite ease-in-out both;
}

.inline-loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.inline-loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loadingDot {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* =============================================================================
   FOCUS INSIGHT TOAST (v10.0 Phase 5)
   ============================================================================= */

.focus-insight-toast {
  position: fixed;
  bottom: 90px;
  right: 24px;
  max-width: 340px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 9000;
  animation: insightSlideIn 0.3s ease-out;
  border-left: 4px solid #8b5cf6;
}

@keyframes insightSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.focus-insight-toast.dismissing {
  animation: insightSlideOut 0.3s ease-in forwards;
}

@keyframes insightSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.focus-insight-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.focus-insight-icon {
  font-size: calc(24px * var(--type-scale));
}

.focus-insight-title {
  font-weight: 600;
  font-size: calc(14px * var(--type-scale));
  color: #1f2937;
}

.focus-insight-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: calc(18px * var(--type-scale));
  padding: 4px;
  line-height: 1;
}

.focus-insight-dismiss:hover {
  color: #6b7280;
}

.focus-insight-message {
  font-size: calc(14px * var(--type-scale));
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 12px;
}

.focus-insight-actions {
  display: flex;
  gap: 8px;
}

.focus-insight-action {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  font-size: calc(13px * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.focus-insight-action.primary {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.focus-insight-action.primary:hover {
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.focus-insight-action.secondary {
  background: #f3f4f6;
  color: #6b7280;
}

.focus-insight-action.secondary:hover {
  background: #e5e7eb;
}

/* Responsive inline panel */

@media (max-width: 480px) {
  .fergi-inline-panel {
    width: 100%;
    border-radius: 20px 20px 0 0;
  }

  .focus-insight-toast {
    left: 16px;
    right: 16px;
    max-width: none;
    bottom: 80px;
  }
}

/* ===========================================
   Storyteller Mode - v10.1.0
   =========================================== */

.storyteller-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.storyteller-modal.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.storyteller-content {
  background: #1a1a2e;
  color: #e8e8e8;
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.storyteller-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.storyteller-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.storyteller-title h2 {
  margin: 0;
  font-size: calc(1.4rem * var(--type-scale));
  font-weight: 600;
}

.storyteller-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.model-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
}

.model-badge.haiku { background: rgba(100, 200, 100, 0.3); }

.model-badge.sonnet { background: rgba(100, 150, 255, 0.3); }

.model-badge.opus { background: rgba(180, 100, 255, 0.3); }

.storyteller-actions {
  display: flex;
  gap: 12px;
}

.model-switch-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(1.1rem * var(--type-scale));
  transition: all 0.2s;
}

.model-switch-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* .storyteller-close-btn visuals handled by .ffa-exit-btn */

.storyteller-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
}

.storyteller-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  margin-bottom: 16px;
  min-height: 200px;
  max-height: 400px;
}

.storyteller-message {
  margin-bottom: 16px;
  animation: fadeSlideIn 0.3s ease-out;
}

.storyteller-message.user {
  text-align: right;
}

.storyteller-message.user .message-content {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  display: inline-block;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  max-width: 80%;
}

.storyteller-message.assistant .message-content {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: 18px 18px 18px 4px;
  max-width: 80%;
}

.storyteller-message.system .message-content {
  background: rgba(239, 68, 68, 0.2);
  border-left: 3px solid #ef4444;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: calc(0.9rem * var(--type-scale));
}

.message-meta {
  font-size: calc(0.7rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.storyteller-message.processing .message-content {
  background: rgba(255, 255, 255, 0.05);
}

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }

.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.storyteller-suggestions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.suggestion-chip {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: calc(0.85rem * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.suggestion-chip:hover {
  background: rgba(245, 158, 11, 0.3);
  transform: translateY(-1px);
}

.storyteller-input-area {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.storyteller-input-area textarea {
  flex: 1;
  padding: 14px 18px;
  border-radius: 20px;
  border: 1px solid #d1d5db;
  background: white;
  color: #1f2937; /* Dark text for visibility */
  font-size: calc(1rem * var(--type-scale));
  resize: none;
  font-family: inherit;
}

.storyteller-input-area textarea::placeholder {
  color: #9ca3af;
}

.storyteller-input-area textarea:focus {
  outline: none;
  border-color: #f59e0b;
}

.storyteller-send-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  padding: 14px 24px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.storyteller-send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.storyteller-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.storyteller-sidebar {
  position: absolute;
  right: 0;
  top: 80px;
  bottom: 0;
  width: 240px;
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  overflow-y: auto;
}

.storyteller-sidebar h3 {
  margin: 0 0 16px 0;
  font-size: calc(0.9rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile Storyteller */

@media (max-width: 768px) {
  .storyteller-content {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .storyteller-sidebar {
    display: none;
  }

  .storyteller-message.user .message-content,
  .storyteller-message.assistant .message-content {
    max-width: 90%;
  }
}

/* ===========================================
   Curation Modal - v10.1.0
   =========================================== */

.curation-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.curation-modal.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.curation-content {
  background: white;
  width: 95%;
  max-width: 1200px;
  max-height: 90vh;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.curation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.curation-header h2 {
  margin: 0;
  font-size: calc(1.4rem * var(--type-scale));
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* .curation-close-btn visuals handled by .ffa-exit-btn */

.curation-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.curation-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.curation-sidebar {
  width: 280px;
  background: #f9fafb;
  border-left: 1px solid #e5e7eb;
  padding: 20px;
  overflow-y: auto;
}

.curation-section-title {
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Mobile Curation */

@media (max-width: 768px) {
  .curation-content {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .curation-body {
    flex-direction: column;
  }

  .curation-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid #e5e7eb;
    max-height: 200px;
  }
}

/* ========================================
   v10.12.0 FRIEND TAGGING MODAL
   ======================================== */

.curator-friend-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.curator-friend-content {
  background: var(--color-bg-primary, #fff);
  border-radius: var(--radius-lg, 12px);
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.curator-friend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.curator-friend-header h3 {
  margin: 0;
  font-size: var(--font-lg, 18px);
  color: var(--color-text-primary);
}

.curator-friend-header .close-btn {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
}

.curator-friend-body {
  padding: 20px;
}

.recent-friends-section {
  margin-bottom: 16px;
}

.recent-friends-section label {
  display: block;
  font-size: var(--font-sm, 14px);
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.recent-friends-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.friend-quick-chip {
  background: var(--color-bg-secondary, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-full, 20px);
  padding: 8px 16px;
  font-size: var(--font-sm, 14px);
  cursor: pointer;
  transition: all 0.2s;
}

.friend-quick-chip:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.or-divider {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-sm, 14px);
  margin: 16px 0;
  position: relative;
}

.or-divider::before,

.or-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: var(--color-border, #e5e7eb);
}

.or-divider::before { left: 0; }

.or-divider::after { right: 0; }

.new-friend-form label {
  display: block;
  font-size: var(--font-sm, 14px);
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  margin-top: 12px;
}

.new-friend-form label:first-child { margin-top: 0; }

.new-friend-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-base, 16px);
  box-sizing: border-box;
}

.new-friend-form input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.curator-friend-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  justify-content: flex-end;
}

.curator-friend-footer .btn-secondary {
  background: var(--color-bg-secondary, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-secondary);
  padding: 10px 20px;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  font-size: var(--font-base, 16px);
}

.curator-friend-footer .btn-primary {
  background: #8b5cf6;
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  font-size: var(--font-base, 16px);
}

.curator-friend-footer .btn-primary:hover {
  background: #7c3aed;
}

/* ============================================================================
   LOGGING DASHBOARD MODAL
   Admin view for all 13 logging tables + Weaver status
   ============================================================================ */

.logging-dashboard-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10001;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}

.logging-dashboard-modal.active {
  display: flex;
}

.logging-modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 1200px;
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

/* Header */

.logging-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.logging-modal-header h2 {
  margin: 0;
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 600;
}

.logging-header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auto-refresh-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: calc(0.875rem * var(--type-scale));
  cursor: pointer;
}

.auto-refresh-toggle input {
  width: 16px;
  height: 16px;
}

.logging-header-controls select {
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: calc(0.875rem * var(--type-scale));
}

.btn-close-logging {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: calc(1.25rem * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.btn-close-logging:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Tab Navigation */

.logging-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.logging-tab {
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: 500;
  color: #6b7280;
  transition: all 0.2s;
}

.logging-tab:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.02);
}

.logging-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

/* Tab Content */

.logging-tab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.logging-panel {
  display: none;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}

.logging-panel.active {
  display: flex;
}

/* Filters */

.logging-filters {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
}

.logging-filters select,

.logging-search-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: calc(0.875rem * var(--type-scale));
  background: white;
}

.logging-search-input {
  flex: 1;
  min-width: 200px;
}

.logging-search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Stats Bar */

.logging-stats-bar {
  display: flex;
  gap: 2rem;
  padding: 0.75rem 1.5rem;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  font-size: calc(0.875rem * var(--type-scale));
  color: #6b7280;
}

.stats-item strong {
  color: #374151;
}

/* Log List */

.logging-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

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

.logging-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.log-entry {
  padding: 0.875rem 1rem;
  border-radius: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.log-entry:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateX(2px);
}

.log-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.log-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.log-badge-blue { background: #dbeafe; color: #1e40af; }

.log-badge-lightblue { background: #e0f2fe; color: #0369a1; }

.log-badge-green { background: #dcfce7; color: #166534; }

.log-badge-purple { background: #ede9fe; color: #5b21b6; }

.log-badge-orange { background: #ffedd5; color: #9a3412; }

.log-badge-yellow { background: #fef3c7; color: #92400e; }

.log-time {
  font-size: calc(0.75rem * var(--type-scale));
  color: #9ca3af;
}

.log-entry-summary {
  font-size: calc(0.875rem * var(--type-scale));
  color: #374151;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Loading/Empty/Error States */

.logging-loading,

.logging-empty,

.logging-error {
  padding: 3rem;
  text-align: center;
  color: #6b7280;
}

.logging-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

.logging-error {
  color: #dc2626;
}

.logging-placeholder {
  color: #9ca3af;
  font-style: italic;
  padding: 2rem;
  text-align: center;
}

/* Weaver Tab */

.weaver-health-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.health-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.health-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9ca3af;
}

.health-indicator.healthy .health-dot {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.health-indicator.degraded .health-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.health-indicator.unhealthy .health-dot,

.health-indicator.offline .health-dot {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.health-label {
  font-weight: 600;
  text-transform: capitalize;
}

.weaver-meta {
  display: flex;
  gap: 1.5rem;
  font-size: calc(0.875rem * var(--type-scale));
  color: #6b7280;
}

.weaver-queue-stats {
  padding: 1rem 1.5rem;
}

.queue-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.queue-stat {
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
}

.queue-stat.pending { background: #fef3c7; }

.queue-stat.processing { background: #dbeafe; }

.queue-stat.completed { background: #dcfce7; }

.queue-stat.failed { background: #fee2e2; }

.queue-stat-value {
  font-size: calc(1.75rem * var(--type-scale));
  font-weight: 700;
  color: #374151;
}

.queue-stat-label {
  font-size: calc(0.75rem * var(--type-scale));
  color: #6b7280;
  margin-top: 0.25rem;
}

.weaver-events-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.weaver-events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.weaver-events-header h4 {
  margin: 0;
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: 600;
}

.weaver-events-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.weaver-event {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.weaver-event:hover {
  background: #f9fafb;
}

.event-type {
  flex: 1;
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: 500;
}

.event-status-badge {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
}

.event-status-badge.pending { background: #fef3c7; color: #92400e; }

.event-status-badge.processing { background: #dbeafe; color: #1e40af; }

.event-status-badge.completed { background: #dcfce7; color: #166534; }

.event-status-badge.failed { background: #fee2e2; color: #991b1b; }

.event-time {
  font-size: calc(0.75rem * var(--type-scale));
  color: #9ca3af;
}

/* Sessions Tab */

.sessions-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.sessions-header h4 {
  margin: 0;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
}

.sessions-description {
  margin: 0.25rem 0 0;
  font-size: calc(0.875rem * var(--type-scale));
  color: #6b7280;
}

.sessions-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.session-card {
  padding: 1rem;
  border-radius: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.session-card:hover {
  background: #f9fafb;
  border-color: #667eea;
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.session-type {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  background: #ede9fe;
  color: #5b21b6;
}

.session-time {
  font-size: calc(0.75rem * var(--type-scale));
  color: #9ca3af;
}

.session-meta {
  display: flex;
  gap: 1rem;
  font-size: calc(0.875rem * var(--type-scale));
  color: #6b7280;
}

/* AI Analysis Tab */

.ai-analysis-stats {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.ai-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.ai-stat {
  padding: 1rem;
  border-radius: 8px;
  background: #f9fafb;
  text-align: center;
}

.ai-stat-value {
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
  color: #374151;
}

.ai-stat-label {
  font-size: calc(0.75rem * var(--type-scale));
  color: #6b7280;
  margin-top: 0.25rem;
}

.ai-sessions-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

/* Details Panel (Slide-in) */

.logging-details-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  background: white;
  border-left: 1px solid #e5e7eb;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
}

.logging-details-panel.active {
  transform: translateX(0);
}

.details-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.details-panel-header h4 {
  margin: 0;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
}

.details-panel-header button {
  background: none;
  border: none;
  font-size: calc(1.5rem * var(--type-scale));
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  line-height: 1;
}

.details-panel-header button:hover {
  color: #374151;
}

.details-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.log-details .details-meta {
  margin-bottom: 1rem;
}

.log-details .details-meta p {
  margin: 0.25rem 0;
  font-size: calc(0.875rem * var(--type-scale));
}

.json-viewer {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 8px;
  font-size: calc(0.75rem * var(--type-scale));
  font-family: 'Monaco', 'Menlo', monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 60vh;
}

/* Session Replay */

.session-replay .replay-meta {
  margin-bottom: 1rem;
}

.session-replay .replay-meta p {
  margin: 0.25rem 0;
  font-size: calc(0.875rem * var(--type-scale));
}

.replay-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.replay-message {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #f3f4f6;
}

.replay-message.user {
  background: #dbeafe;
  margin-left: 1rem;
}

.replay-message.assistant {
  background: #dcfce7;
  margin-right: 1rem;
}

.replay-message.system {
  background: #fef3c7;
  font-style: italic;
}

.message-role {
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.message-content {
  font-size: calc(0.875rem * var(--type-scale));
  line-height: 1.4;
}

.message-time {
  font-size: calc(0.7rem * var(--type-scale));
  color: #9ca3af;
  margin-top: 0.25rem;
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .logging-dashboard-modal {
    padding: 0;
  }

  .logging-modal-content {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
  }

  .logging-tabs {
    padding: 0 1rem;
    overflow-x: auto;
  }

  .logging-tab {
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }

  .logging-filters {
    flex-direction: column;
    padding: 1rem;
  }

  .logging-search-input {
    min-width: unset;
    width: 100%;
  }

  .queue-stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .logging-details-panel {
    width: 100%;
  }

  .ai-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   BULK IMPORT PROGRESS BANNER - Enhanced Upload Experience
   ============================================================================= */

/* Progress Banner Container */

.progress-banner {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: white;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.progress-banner-header {
  text-align: center;
  margin-bottom: var(--space-md);
}

.banner-title {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.7);
}

/* Progress Bar Wrapper */

.progress-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.progress-bar-wrapper .progress-bar {
  flex: 1;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-wrapper .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.progress-percent {
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  min-width: 50px;
  text-align: right;
  color: #a5b4fc;
}

.progress-banner .progress-text {
  text-align: center;
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 var(--space-md) 0;
}

/* News Ticker */

.news-ticker {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  min-height: 44px;
}

.ticker-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.ticker-icon {
  font-size: calc(1.1rem * var(--type-scale));
}

.ticker-label {
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: #ef4444;
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  animation: pulse-live 2s ease-in-out infinite;
  will-change: opacity; /* shedding-idle-ballast: GPU-composite the LIVE-label pulse so it doesn't repaint its container (OOM-reaper class) */
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.ticker-content {
  flex: 1;
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.9);
  transition: opacity 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats Cards Grid */

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s, background 0.2s;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.stat-card .stat-value {
  font-size: calc(1.75rem * var(--type-scale));
  font-weight: var(--font-bold);
  color: white;
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.stat-card .stat-subtext {
  font-size: calc(0.7rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}

/* Stat card color accents */

#statSelected { border-top: 3px solid #3b82f6; }

#statCompressed { border-top: 3px solid #10b981; }

#statUploaded { border-top: 3px solid #8b5cf6; }

#statAnalyzed { border-top: 3px solid #f59e0b; }

/* Fun Fact Area */

.fun-fact {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  border-left: 3px solid #fbbf24;
}

.fact-icon {
  font-size: calc(1.1rem * var(--type-scale));
  flex-shrink: 0;
}

.fact-text {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

/* Progress banner mobile responsive */

@media (max-width: 768px) {
  .progress-banner {
    padding: var(--space-md);
  }

  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-ticker {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .ticker-content {
    white-space: normal;
  }

  .stat-card .stat-value {
    font-size: calc(1.5rem * var(--type-scale));
  }

  .fun-fact {
    flex-direction: column;
  }
}

/* Media and Document Import Progress Modal - ALWAYS fullscreen overlay covering App Panel */

.sandbox-upload-progress {
  position: fixed !important;
  top: var(--nav-height) !important;
  left: var(--side-nav-width) !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 500 !important;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  display: flex !important;
  align-items: flex-start;  /* Start from top, not center - prevents top clipping */
  justify-content: center;
  padding: var(--space-lg) var(--space-xl);
  padding-top: var(--space-md);  /* Reduce top padding */
  overflow-y: auto;
}

/* Hide removed elements (news ticker and fun fact) */

.sandbox-upload-progress .news-ticker,

.sandbox-upload-progress .fun-fact {
  display: none !important;
}

/* Hidden state - must use !important to override the display: flex !important above */

.sandbox-upload-progress.progress-hidden {
  display: none !important;
}

.sandbox-upload-progress .progress-banner {
  max-width: 800px;
  width: 100%;
  background: transparent;
  box-shadow: none;
  padding: var(--space-xl);
}

.sandbox-upload-progress .progress-banner-header {
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress .banner-title {
  font-size: var(--font-lg);
  letter-spacing: 3px;
}

.sandbox-upload-progress .progress-bar-wrapper .progress-bar {
  height: 16px;
}

.sandbox-upload-progress .progress-percent {
  font-size: var(--font-2xl);
}

.sandbox-upload-progress .progress-text {
  font-size: var(--font-lg);
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress .stats-cards {
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress .stat-card {
  padding: var(--space-md);
}

.sandbox-upload-progress .stat-card .stat-value {
  font-size: calc(2.5rem * var(--type-scale));
}

.sandbox-upload-progress .stat-card .stat-label {
  font-size: var(--font-sm);
}

.sandbox-upload-progress .news-ticker {
  padding: var(--space-md);
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress .ticker-content {
  font-size: var(--font-md);
}

.sandbox-upload-progress .fun-fact {
  padding: var(--space-md);
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress .fact-text {
  font-size: var(--font-md);
}

/* Mobile adjustments for Media and Document Import Progress */

@media (max-width: 768px) {
  .sandbox-upload-progress {
    left: 0;
    top: var(--nav-height-mobile, 60px);
    padding: var(--space-md);
  }

  .sandbox-upload-progress .progress-banner {
    padding: var(--space-md);
  }

  .sandbox-upload-progress .stat-card .stat-value {
    font-size: calc(1.75rem * var(--type-scale));
  }

  .sandbox-upload-progress .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Fullscreen Entertainment Mode - Takes over entire App Panel area (legacy class, now default) */

.sandbox-upload-progress.fullscreen-mode {
  position: fixed;
  top: var(--nav-height);
  left: var(--side-nav-width);
  right: 0;
  bottom: 0;
  z-index: 100;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  overflow-y: auto;
}

.sandbox-upload-progress.fullscreen-mode .progress-banner {
  max-width: 800px;
  width: 100%;
  background: transparent;
  box-shadow: none;
  padding: var(--space-xl);
}

.sandbox-upload-progress.fullscreen-mode .progress-banner-header {
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress.fullscreen-mode .banner-title {
  font-size: var(--font-lg);
  letter-spacing: 3px;
}

.sandbox-upload-progress.fullscreen-mode .progress-bar-wrapper .progress-bar {
  height: 16px;
}

.sandbox-upload-progress.fullscreen-mode .progress-percent {
  font-size: var(--font-2xl);
}

.sandbox-upload-progress.fullscreen-mode .progress-text {
  font-size: var(--font-lg);
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress.fullscreen-mode .stats-cards {
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress.fullscreen-mode .stat-card {
  padding: var(--space-md);
}

.sandbox-upload-progress.fullscreen-mode .stat-card .stat-value {
  font-size: calc(2.5rem * var(--type-scale));
}

.sandbox-upload-progress.fullscreen-mode .stat-card .stat-label {
  font-size: var(--font-sm);
}

.sandbox-upload-progress.fullscreen-mode .news-ticker {
  padding: var(--space-md);
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress.fullscreen-mode .ticker-content {
  font-size: var(--font-md);
}

.sandbox-upload-progress.fullscreen-mode .fun-fact {
  padding: var(--space-md);
  margin-bottom: var(--space-xl);
}

.sandbox-upload-progress.fullscreen-mode .fact-text {
  font-size: var(--font-md);
}

/* Entertainment Exit Section */

.entertainment-exit {
  text-align: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.entertainment-exit .exit-message {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-sm);
  margin-bottom: var(--space-md);
}

.entertainment-exit .exit-buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

.entertainment-exit .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

.entertainment-exit .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

/* Fullscreen mode mobile adjustments */

@media (max-width: 768px) {
  .sandbox-upload-progress.fullscreen-mode {
    left: 0; /* On mobile, sidebar is hidden, fill entire width */
    top: var(--nav-height-mobile, 60px);
    padding: var(--space-md);
  }

  .sandbox-upload-progress.fullscreen-mode .progress-banner {
    padding: var(--space-md);
  }

  .sandbox-upload-progress.fullscreen-mode .stat-card .stat-value {
    font-size: calc(1.75rem * var(--type-scale));
  }

  .sandbox-upload-progress.fullscreen-mode .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .entertainment-exit .exit-buttons {
    flex-direction: column;
  }
}

/* Entertainment mode within App Panel - hide other sandbox content */

body.entertainment-fullscreen #sandboxCreateTab > *:not(.sandbox-upload-progress) {
  display: none !important;
}

/* Make sandbox create tab position relative for absolute positioning */

#sandboxCreateTab {
  position: relative;
  min-height: 500px;
}

/* =============================================================================
   BULK IMPORT CONTROL CENTER - Master Dashboard Design
   ============================================================================= */

/* Dashboard Container */

.progress-dashboard {
  max-width: 900px;
  width: 100%;
  padding: var(--space-lg) var(--space-xl) var(--space-md);
}

/* Dashboard Header */

.dashboard-header {
  text-align: center;
  margin-bottom: var(--space-md);
}

.dashboard-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: 4px;
}

.dashboard-icon {
  font-size: calc(1.5rem * var(--type-scale));
}

.dashboard-title-text {
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
}

.batch-info {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-sm);
}

.batch-name {
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
}

/* Upload Protection Banner */

.upload-protection-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 8px var(--space-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  font-weight: 600;
  transition: all 0.3s ease;
}

.upload-protection-banner.uploading {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border: 2px solid #fca5a5;
  animation: upload-pulse 1.5s ease-in-out infinite;
}

.upload-protection-banner.safe {
  background: linear-gradient(135deg, #059669, #047857);
  border: 2px solid #6ee7b7;
  animation: none;
}

.upload-protection-banner .banner-icon {
  font-size: calc(1.1rem * var(--type-scale));
}

.upload-protection-banner .banner-text {
  color: white;
  text-align: center;
}

.upload-protection-banner .banner-text strong {
  display: inline;
  font-size: calc(0.9rem * var(--type-scale));
}

@keyframes upload-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(220, 38, 38, 0.6);
    transform: scale(1.01);
  }
}

/* Overall Progress Section */

.overall-progress-section {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.overall-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.overall-label {
  font-size: var(--font-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
}

.overall-eta {
  font-size: var(--font-sm);
  color: #60a5fa;
  font-weight: 500;
}

.overall-progress-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.overall-progress-bar {
  flex: 1;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.overall-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
  will-change: width;
}

.overall-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.overall-percent {
  font-size: calc(1.4rem * var(--type-scale));
  font-weight: 700;
  color: #a5b4fc;
  min-width: 60px;
  text-align: right;
}

.overall-status {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-md);
  margin: 0;
}

/* Pipeline Tracker (compact horizontal) */

.pipeline-tracker {
  margin-bottom: var(--space-lg);
}

.pipeline-row {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
}

.pipeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  min-width: 64px;
  transition: all 0.3s ease;
  position: relative;
}

.pipeline-node .pnode-icon {
  font-size: calc(1rem * var(--type-scale));
  line-height: 1;
}

.pipeline-node .pnode-label {
  font-size: calc(0.6rem * var(--type-scale));
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  white-space: nowrap;
}

.pipeline-node .pnode-count {
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  min-height: 1em;
}

/* Node states */

.pipeline-node.waiting {
  opacity: 0.4;
}

.pipeline-node.active {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.4);
  opacity: 1;
}

.pipeline-node.active .pnode-count {
  color: #fbbf24;
}

.pipeline-node.active .pnode-label {
  color: rgba(255, 255, 255, 0.8);
}

.pipeline-node.complete {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  opacity: 1;
}

.pipeline-node.complete .pnode-count {
  color: #10b981;
}

.pipeline-node.complete .pnode-label {
  color: rgba(255, 255, 255, 0.7);
}

/* Pulse animation for active nodes */

.pipeline-node.active {
  animation: node-pulse 2s ease-in-out infinite;
}

@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  50% { box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.2); }
}

/* Connector between nodes */

.pipeline-connector {
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* Responsive: 7 pipeline nodes on mobile */
@media (max-width: 500px) {
  .pipeline-node {
    min-width: 44px;
    padding: 4px 4px;
  }
  .pipeline-node .pnode-label {
    font-size: calc(0.5rem * var(--type-scale));
    letter-spacing: 0;
  }
  .pipeline-connector {
    width: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BULK IMPORT CONTROL CENTER — Archive Dusk register (p5-pipeline-enhancements
   S9, Atelier lane, broad license: Joe 2026-09-25 "pretty good but it could be
   better").

   REGISTER: Archive Dusk, the family room — the Control Center is where a
   member watches their own family's photographs arrive, not an operator
   console. Substrate teal-dusk (#0a2e2e → #0d3535); gem amber (#f0b860 /
   #ffd28a) is WORK IN PROGRESS; river teal (#6dd4d4) is DONE. Colour carries
   state only: nothing is amber that is not running or asking for care, nothing
   is teal that is not finished, a stage no item needs is drawn faint with "—".
   Red is reserved for failure — the upload banner used to pulse red for the
   whole of a healthy upload. Joe may overrule the register at /listen.
   ═══════════════════════════════════════════════════════════════════════════ */
.sandbox-upload-progress {
  background: linear-gradient(135deg, #0a2e2e 0%, #0d3535 100%) !important;
}
.sandbox-upload-progress .dashboard-title-text { color: rgba(255, 240, 214, 0.92); }
.sandbox-upload-progress .batch-name { background: rgba(109, 212, 212, 0.10); color: rgba(255, 255, 255, 0.75); }

/* The upload banner: caution while bytes are in flight, teal once they are safe. */
.sandbox-upload-progress .upload-protection-banner.uploading {
  background: linear-gradient(135deg, rgba(240, 184, 96, 0.22), rgba(240, 184, 96, 0.12));
  border: 1px solid rgba(240, 184, 96, 0.55);
  animation: none;
}
.sandbox-upload-progress .upload-protection-banner.safe {
  background: linear-gradient(135deg, rgba(109, 212, 212, 0.18), rgba(109, 212, 212, 0.08));
  border: 1px solid rgba(109, 212, 212, 0.5);
}
.sandbox-upload-progress .upload-protection-banner .banner-text { color: rgba(255, 244, 226, 0.95); }

.sandbox-upload-progress .overall-progress-section {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(109, 212, 212, 0.18);
}
.sandbox-upload-progress .overall-eta { color: #6dd4d4; font-variant-numeric: tabular-nums; }
.sandbox-upload-progress .overall-percent { color: #ffd28a; font-variant-numeric: tabular-nums; }
.sandbox-upload-progress .overall-progress-bar { background: rgba(255, 255, 255, 0.08); }
.sandbox-upload-progress .overall-progress-fill { background: linear-gradient(90deg, #d99a3e, #f0b860 60%, #ffd28a); }
.sandbox-upload-progress .overall-status { color: rgba(255, 244, 226, 0.88); }
.sandbox-upload-progress .overall-ready {
  margin: 4px 0 0;
  text-align: center;
  font-size: var(--font-sm);
  color: #6dd4d4;
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}

/* Chips: waiting · queued · running · done · not needed. */
.sandbox-upload-progress .progress-entertainment[hidden] { display: none; }

/* The one action on this surface, in the room's own register (it wore the vault's purple CTA). */
.sandbox-upload-progress .dashboard-exit .btn-primary {
  background: #0f766e;
  border: 1px solid rgba(109, 212, 212, 0.6);
  color: #f2fbfb;
  box-shadow: none;
}
.sandbox-upload-progress .dashboard-exit .btn-primary:hover { background: #115e59; }
.sandbox-upload-progress .dashboard-exit .btn-primary:focus-visible { outline: 2px solid #ffd28a; outline-offset: 2px; }
.sandbox-upload-progress .pipeline-node { min-width: 76px; padding: 6px 10px 5px; }
.sandbox-upload-progress .pipeline-node .pnode-count { font-variant-numeric: tabular-nums; }
.sandbox-upload-progress .pipeline-node .pnode-eta {
  font-size: calc(0.58rem * var(--type-scale));
  min-height: 1em;
  color: rgba(255, 244, 226, 0.55);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sandbox-upload-progress .pipeline-node.waiting { opacity: 0.55; }
.sandbox-upload-progress .pipeline-node.queued {
  opacity: 1;
  border: 1px dashed rgba(240, 184, 96, 0.55);
  background: rgba(240, 184, 96, 0.05);
  animation: none;
}
.sandbox-upload-progress .pipeline-node.queued .pnode-count { color: rgba(255, 210, 138, 0.8); }
.sandbox-upload-progress .pipeline-node.active {
  background: rgba(240, 184, 96, 0.14);
  border-color: rgba(240, 184, 96, 0.6);
  animation: cc-node-pulse 2s ease-in-out infinite;
}
.sandbox-upload-progress .pipeline-node.active .pnode-count,
.sandbox-upload-progress .pipeline-node.active .pnode-eta { color: #ffd28a; }
.sandbox-upload-progress .pipeline-node.complete {
  background: rgba(109, 212, 212, 0.10);
  border-color: rgba(109, 212, 212, 0.45);
}
.sandbox-upload-progress .pipeline-node.complete .pnode-count { color: #6dd4d4; }
.sandbox-upload-progress .pipeline-node.na { opacity: 0.28; animation: none; }
.sandbox-upload-progress .pipeline-node.na .pnode-count { color: rgba(255, 255, 255, 0.5); }
@keyframes cc-node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 184, 96, 0); }
  50% { box-shadow: 0 0 10px 2px rgba(240, 184, 96, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .sandbox-upload-progress .pipeline-node.active { animation: none; }
}

/* ── The lifecycle (truing-import-receiver S10 — Joe directives 1 + 13) ─────────────────────────
   One batch, five places it can be, ONE forecast at a time (K1). The stepper says WHERE; the
   headline says HOW LONG until the member can do the next thing (leave · review · know the Vault
   has learned); the bar is that phase's bar. Same register: amber is the phase in progress, teal is
   what is behind it, faint is what is ahead. */
.sandbox-upload-progress .cc-lifecycle {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0 0 var(--space-sm);
  padding: 0;
  counter-reset: none;
}
.sandbox-upload-progress .cc-lifecycle-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  min-width: 0;
  color: rgba(255, 244, 226, 0.45);
  font-size: var(--font-xs);
  letter-spacing: 0.02em;
  text-align: center;
}
.sandbox-upload-progress .cc-lifecycle-step + .cc-lifecycle-step::before {
  content: '';
  position: absolute;
  top: 11px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  z-index: 0;
}
.sandbox-upload-progress .cc-step-dot {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #0d3535;
  border: 2px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 244, 226, 0.55);
}
.sandbox-upload-progress .cc-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sandbox-upload-progress .cc-lifecycle-step[data-state="done"] { color: #6dd4d4; }
.sandbox-upload-progress .cc-lifecycle-step[data-state="done"] .cc-step-dot {
  border-color: #6dd4d4; background: rgba(109, 212, 212, 0.18); color: transparent;
}
.sandbox-upload-progress .cc-lifecycle-step[data-state="done"] .cc-step-dot::after { content: '✓'; color: #6dd4d4; position: absolute; }
.sandbox-upload-progress .cc-lifecycle-step[data-state="done"] + .cc-lifecycle-step::before,
.sandbox-upload-progress .cc-lifecycle-step[data-state="current"]::before { background: rgba(109, 212, 212, 0.55); }
.sandbox-upload-progress .cc-lifecycle-step[data-state="current"] { color: #ffd28a; font-weight: 600; }
.sandbox-upload-progress .cc-lifecycle-step[data-state="current"] .cc-step-dot {
  border-color: #f0b860; color: #ffd28a; background: rgba(240, 184, 96, 0.16);
  box-shadow: 0 0 0 4px rgba(240, 184, 96, 0.12);
}
.sandbox-upload-progress .cc-lifecycle[data-phase="done"] .cc-lifecycle-step[data-step="done"] { color: #6dd4d4; }

/* The headline IS the forecast: the one time on screen, sized to be read across the room. */
.sandbox-upload-progress .overall-progress-header { align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.sandbox-upload-progress .overall-eta {
  font-size: calc(1.15rem * var(--type-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
}
.sandbox-upload-progress .overall-eta[data-phase="uploading"] { color: #ffd28a; }
.sandbox-upload-progress .overall-eta[data-phase="curating"],
.sandbox-upload-progress .overall-eta[data-phase="done"] { color: #6dd4d4; }
.sandbox-upload-progress .overall-eta[data-phase="held"],
.sandbox-upload-progress .overall-eta[data-phase="failed"] { color: #ffd28a; }
.sandbox-upload-progress .overall-eta[data-phase="stopped"] { color: rgba(255, 244, 226, 0.7); }
.sandbox-upload-progress[data-phase="curating"] .overall-progress-fill,
.sandbox-upload-progress[data-phase="done"] .overall-progress-fill { background: linear-gradient(90deg, #0f766e, #6dd4d4); }
.sandbox-upload-progress[data-phase="curating"] .overall-progress-fill::after,
.sandbox-upload-progress[data-phase="done"] .overall-progress-fill::after { animation: none; }

/* "Ready for your review" is a place, not a pause: its one action. */
.sandbox-upload-progress .cc-phase-actions { display: flex; justify-content: center; margin-top: var(--space-sm); }
.sandbox-upload-progress .cc-phase-actions[hidden] { display: none; }
.sandbox-upload-progress .cc-review-now {
  background: #0f766e; border: 1px solid rgba(109, 212, 212, 0.6); color: #f2fbfb;
  padding: 10px 22px; border-radius: var(--radius-md); font-weight: 600; cursor: pointer;
}
.sandbox-upload-progress .cc-review-now:hover { background: #115e59; }
.sandbox-upload-progress .cc-review-now:focus-visible { outline: 2px solid #ffd28a; outline-offset: 2px; }

/* After publish: the Vault's learning, step by step, in family words. */
.sandbox-upload-progress .cc-enrichment-steps {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(109, 212, 212, 0.14);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 6px;
}
.sandbox-upload-progress .cc-enrichment-steps[hidden] { display: none; }
.sandbox-upload-progress .cc-enrich-step {
  display: grid;
  grid-template-columns: 1.4em 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-size: var(--font-sm);
  color: rgba(255, 244, 226, 0.45);
}
.sandbox-upload-progress .cc-enrich-step[data-state="done"] { color: #6dd4d4; }
.sandbox-upload-progress .cc-enrich-step[data-state="running"] { color: #ffd28a; font-weight: 600; }
.sandbox-upload-progress .cc-enrich-mark { text-align: center; }
.sandbox-upload-progress .cc-enrich-detail { font-variant-numeric: tabular-nums; font-weight: 400; opacity: 0.85; white-space: nowrap; }

@media (max-width: 720px) {
  .sandbox-upload-progress .cc-step-label { font-size: 0.66rem; }
}

/* The doors into the lifecycle view: a card's "Progress" and each curator's header control. */
.batch-progress-btn { white-space: nowrap; }
.sc-progress-btn {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.sc-progress-btn:hover { background: rgba(255, 255, 255, 0.24); }
.sc-progress-btn:focus-visible { outline: 2px solid #ffd28a; outline-offset: 2px; }
.sc-progress-btn[hidden] { display: none; }

/* The curator's counters (S9): every bucket shown, summing to the total they name;
   the open question is amber, a decision is neutral — never red. */
.sc-stat.setaside {
  background: rgba(156, 163, 175, 0.16);
  color: #b8bec8;
}
.sc-stat-total {
  font-size: calc(0.78rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.ai-analysis-held { font-style: italic; opacity: 0.85; }
.curator-date-tier { opacity: 0.7; font-size: 0.92em; }

/* Entertainment Fun Facts Banner */
.progress-entertainment {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-md);
  min-height: 44px;
}

.progress-entertainment .entertainment-icon {
  font-size: calc(1.1rem * var(--type-scale));
  flex-shrink: 0;
}

.progress-entertainment .entertainment-text {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.75);
  font-style: italic;
  line-height: 1.4;
  transition: opacity 0.3s ease;
}

/* Legacy stage card compat (hidden elements still targeted by updateStageCard) */

.pipeline-stage-card { display: none; }

.stage-header, .stage-status, .stage-progress, .stage-count,

.stage-progress-bar, .stage-progress-fill, .stage-metrics,

.stage-metrics .metric, .stage-metrics .metric-value,

.stage-metrics .metric-label, .stage-eta, .stage-eta .eta-value,

.stage-icon, .stage-title { /* kept for compat */ }

/* Dashboard Exit Section */

.dashboard-exit {
  text-align: center;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-exit .exit-message {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-sm);
  font-size: var(--font-xs);
}

.dashboard-exit .exit-buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

.dashboard-exit .btn-primary,

.dashboard-exit .btn-secondary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dashboard-exit .btn-primary:hover,

.dashboard-exit .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .progress-dashboard {
    padding: var(--space-md);
  }

  .pipeline-stages {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .pipeline-stage-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .stage-header {
    flex: 0 0 100%;
    border-bottom: none;
    padding-bottom: 0;
  }

  .stage-status {
    flex: 0 0 auto;
  }

  .stage-progress {
    flex: 1;
    min-width: 100px;
  }

  .stage-count {
    font-size: calc(1.25rem * var(--type-scale));
  }

  .stage-metrics {
    flex: 0 0 100%;
  }

  .stage-eta {
    flex: 0 0 100%;
    border-top: none;
    padding-top: 0;
  }

  .dashboard-exit .exit-buttons {
    flex-direction: column;
  }

  .overall-percent {
    font-size: calc(1.25rem * var(--type-scale));
  }
}

/* Update existing progress bar styles to work with new dashboard */

.sandbox-upload-progress .progress-dashboard .news-ticker {
  margin-bottom: var(--space-lg);
}

.sandbox-upload-progress .progress-dashboard .fun-fact {
  margin-bottom: var(--space-lg);
}

/* ============================================================================
   FACE TAGGING VIEW
   Face recognition tagging and review interface
   Fills App Panel area per FFA Window Frame Architecture
   ============================================================================

   PANEL TERMINOLOGY (Official - use these terms in code and documentation):

   ┌─────────────────────────────────────────────────────────────────────────┐
   │                           MODAL HEADER                                   │
   │  [Done] │ "Face Tagging" │ [✓ ✗ → stats]                               │
   │  CSS: .face-training-header (purple gradient, flex-shrink:0)            │
   ├─────────────────┬───────────────────────────────────────────────────────┤
   │ TARGET FACE     │              FOCAL CANDIDATE PHOTO                    │
   │    PANEL        │  Full photo with numbered bbox overlays               │
   │ .ft-face-sidebar│  CSS: .ft-photo-preview                               │
   │ (scrollable)    │                                                        │
   ├─────────────────┴───────────────────────────────────────────────────────┤
   │                     CANDIDATE THUMBNAIL PANEL                            │
   │  Horizontal scrolling photo strip | CSS: .ft-thumbnail-strip            │
   ├─────────────────────────────────────────────────────────────────────────┤
   │                      CONFIRMATION PANEL (grouped, S6)                    │
   │  [← Prev] [Identity] [Enrichment] [Destructive] [Review] [Next →]       │
   │  CSS: .ft-actions-row + .review-action-group (shared grid idiom)        │
   └─────────────────────────────────────────────────────────────────────────┘

   ============================================================================ */

/* Face Tagging View container - FILLS App Panel */

/* Position: right of Control Panel (60px per --side-nav-width), below Header Panel (60px) */

.face-training-modal {
  position: fixed !important;
  /* Position within App Panel area - fills entire App Panel like other major modals */
  top: 60px !important;        /* Below header */
  left: var(--side-nav-width, 60px) !important;  /* Right of sidebar - use CSS variable */
  right: 0 !important;
  bottom: 0 !important;
  /* z-index lower than Focus modals (30000+) so they appear on top. NOT
     !important: the desktop window band (FFVWindowManager, 10300–10999)
     assigns inline focus-order z that must win while this modal is a
     managed window; off-band this tier still applies unchanged. */
  z-index: 10003;
  display: none;
  /* Override base .modal.active centering - we want to fill, not center */
  align-items: stretch !important;
  justify-content: stretch !important;
}

.face-training-modal.is-open {
  /* modal-integrity-scan S4: state driven by ModalManager `.is-open` (was .active).
   * !important still beats any stale inline display:none from the close path. */
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

.face-training-modal .modal-overlay {
  /* No overlay needed since modal fills entire App Panel */
  display: none !important;
}

.face-training-modal .modal-content,

.face-training-modal .face-training-content {
  /* Fill entire modal area - NO GAPS */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--ffvr-surface, #f5f5f5);  /* Light grey to show modal fills the space */
  border-radius: 0;
  z-index: 1;
  /* Flex layout to properly contain header + body */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.face-training-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  padding-right: 64px;  /* Reserve space for abs-positioned exit button */
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 0;  /* No rounded corners - fills App Panel */
  flex-shrink: 0;  /* CRITICAL: Prevent header from collapsing */
  min-height: 60px;  /* Ensure header always has height */
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Done button (left side) */

.face-training-done-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: white;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 500;
  transition: background 0.2s;
  flex-shrink: 0;
}

.face-training-done-btn:hover {
  background: rgba(255,255,255,0.3);
}

/* v12.1.0: AI Help button in curator header */

.curator-ai-help-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #0a2e2e, #134040);
  border: 1px solid #2a7575;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  color: white;
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 500;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-right: 8px;
}

.curator-ai-help-btn:hover {
  background: linear-gradient(135deg, #134040, #1a5252);
  border-color: #3a8585;
  transform: translateY(-1px);
}

.curator-ai-help-btn .ai-help-icon {
  font-size: 1.1em;
}

.curator-ai-help-btn .ai-help-label {
  font-size: 0.85em;
}

@media (max-width: 768px) {
  .curator-ai-help-btn .ai-help-label {
    display: none;
  }
  .curator-ai-help-btn {
    padding: 0.4rem 0.5rem;
  }
}

/* Centered title area */

.face-training-title-area {
  flex: 1;
  text-align: center;
}

.face-training-title-area h2 {
  margin: 0;
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 600;
}

.ft-profile-badge {
  display: inline-block;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 500;
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  vertical-align: middle;
}

/* #2 (unifying-enrichment-machinery S2): candidate-selection legibility badge.
   Names which selection mechanism is feeding the modal — Community Service
   (KG-ranked facework-queue) vs Family Focus (person-filter smart-candidates)
   vs training-priority sweep. Colour-coded so the two are never conflated. */
.ft-candidate-source {
  display: inline-block;
  font-size: calc(0.72rem * var(--type-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 2px 9px;
  border-radius: 10px;
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  vertical-align: middle;
}
.ft-candidate-source:empty { display: none; }
.ft-candidate-source.cs {
  color: #d1fae5;
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid rgba(16, 185, 129, 0.45);
}
.ft-candidate-source.person {
  color: #dbeafe;
  background: rgba(96, 165, 250, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.4);
}
.ft-candidate-source.all {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
/* forging-universal-enrichment S1: explicit-pool provenance (queue / Curate selection / singleton) */
.ft-candidate-source.pool {
  color: #fde8d0;
  background: rgba(217, 119, 6, 0.2);
  border: 1px solid rgba(217, 119, 6, 0.45);
}

/* forging-universal-enrichment S5: in-place pool exit chip — a pool session
   launched from a surface INSIDE the modal (Bulk Review) returns through this
   affordance beside the provenance badge; modal close stays close. */
.ft-pool-exit-chip {
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #cbd5e1;
  font-size: calc(0.72rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  padding: 2px 9px;
  border-radius: 10px;
  margin-left: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  vertical-align: middle;
  transition: filter 0.15s;
}
.ft-pool-exit-chip:hover { filter: brightness(1.25); }

/* forging-universal-enrichment S2: pool provenance context strip — one verbatim
   line (e.g. the community queue's KG framing hint) floated over the top of the
   focal photo preview. Green = the Community Service identity tone. */
.ft-pool-context {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92%, 640px);
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(6, 46, 36, 0.82);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #a7f3d0;
  font-size: calc(0.78rem * var(--type-scale));
  z-index: 5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.face-training-subtitle {
  margin: 0;
  font-size: calc(0.875rem * var(--type-scale));
  opacity: 0.9;
}

.face-training-stats {
  display: flex;
  gap: 0.5rem;
}

.face-training-stats .stat-item {
  font-size: calc(0.8rem * var(--type-scale));
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.face-training-stats .stat-confirmed { color: #a7f3d0; }

.face-training-stats .stat-rejected { color: #fca5a5; }

.face-training-stats .stat-corrected { color: #fcd34d; }

.face-training-stats .stat-different { color: #fca5a5; }

.face-training-stats .stat-skipped { color: #fcd34d; }

/* ============================================================================
   Face Write Queue Status Indicators
   Optimistic UI feedback for background database writes
   ============================================================================ */

/* Queue status indicator in modal header */

.queue-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 500;
  margin-left: 0.75rem;
  transition: all 0.2s ease;
}

.queue-status.has-pending {
  background: rgba(59, 130, 246, 0.3);
  color: #bfdbfe;
}

.queue-status.has-failed {
  background: rgba(239, 68, 68, 0.3);
  color: #fecaca;
}

.queue-pending-count,

.queue-failed-count {
  white-space: nowrap;
}

/* Spinning indicator */

.queue-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: queue-spin 0.8s linear infinite;
}

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

/* Retry button in header */

.queue-retry-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: calc(0.75rem * var(--type-scale));
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.queue-retry-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Face cell pending indicator - blue dot */

.ft-face-cell.write-pending::before,

.review-face-cell.write-pending::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
  animation: queue-pulse 1.5s ease-in-out infinite;
  z-index: 10;
}

@keyframes queue-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Face cell failed indicator - red border + badge */

.ft-face-cell.write-failed,

.review-face-cell.write-failed {
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}

.ft-face-cell.write-failed::after,

.review-face-cell.write-failed::after {
  content: '!';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  font-size: calc(11px * var(--type-scale));
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Error banner at top of modal */

.queue-error-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-bottom: 1px solid #fecaca;
  color: #991b1b;
  font-size: calc(0.875rem * var(--type-scale));
}

.queue-error-message {
  flex: 1;
  font-weight: 500;
}

.queue-error-retry,

.queue-error-dismiss {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.queue-error-retry {
  background: #dc2626;
  border: none;
  color: white;
}

.queue-error-retry:hover {
  background: #b91c1c;
}

.queue-error-dismiss {
  background: transparent;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.queue-error-dismiss:hover {
  background: rgba(220, 38, 38, 0.1);
}

/* ============================================================================
   Write Progress Blocker
   Full-screen blocker shown when closing modals with pending writes
   ============================================================================ */

.write-progress-blocker {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.write-progress-content {
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 16px;
  padding: 2rem 3rem;
  text-align: center;
  border: 1px solid rgba(102, 126, 234, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-width: 400px;
}

.write-progress-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(102, 126, 234, 0.3);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: write-progress-spin 1s linear infinite;
  margin: 0 auto 1.5rem;
}

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

.write-progress-icon {
  font-size: calc(48px * var(--type-scale));
  margin-bottom: 1rem;
}

.write-progress-icon.error {
  animation: write-progress-shake 0.5s ease-in-out;
}

@keyframes write-progress-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.write-progress-message {
  color: #fff;
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.write-progress-submessage {
  color: #9ca3af;
  font-size: calc(0.9rem * var(--type-scale));
}

.write-progress-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.write-progress-actions .btn {
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.write-progress-actions .btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  color: white;
}

.write-progress-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.write-progress-actions .btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #9ca3af;
}

.write-progress-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ============================================================================
   Review Tagged Faces Modal - Consolidated Header
   Single-line header with Person Selector, Size Toggle, Nav Buttons
   ============================================================================ */

.review-header-consolidated {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #4a5490, #5b3f7e);
  border-bottom: 1px solid rgba(102, 126, 234, 0.5);
  flex-shrink: 0;
  gap: 1rem;
}

.review-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.review-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Nav buttons - compact arrows */

.review-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: calc(1rem * var(--type-scale));
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  transition: all 0.15s;
}

.review-nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Person Selector Dropdown */

.person-selector-dropdown {
  flex: 1;
  max-width: 220px;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.person-selector-dropdown:focus {
  outline: none;
  border-color: rgba(102, 126, 234, 0.6);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.person-selector-dropdown option {
  background: #1f2937;
  color: #fff;
}

/* Size Toggle Group */

.size-toggle-group {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 2px;
}

.size-toggle-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border-radius: 4px;
  font-size: calc(0.75rem * var(--type-scale));
  transition: all 0.15s;
}

.size-toggle-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}

.size-toggle-btn.active {
  background: rgba(102, 126, 234, 0.4);
  color: #fff;
}

.size-icon {
  letter-spacing: -2px;
}

/* Nav Indicator */

.nav-indicator {
  color: #9ca3af;
  font-size: calc(0.8rem * var(--type-scale));
  white-space: nowrap;
}

/* Done Button */

.review-done-btn {
  background: rgba(102, 126, 234, 0.3);
  border: none;
  color: #fff;
  font-size: calc(0.85rem * var(--type-scale));
  cursor: pointer;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s;
}

.review-done-btn:hover {
  background: rgba(102, 126, 234, 0.5);
}

/* ============================================================================
   Review Faces Grid - Size Variants
   ============================================================================ */

.review-faces-grid {
  display: grid;
  gap: 0.75rem;
}

/* Compact: 55px cells */

.review-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
  gap: 0.5rem;
}

/* Medium: 80px cells (default, HALF of previous 110px) */

.review-grid-medium {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

/* Large: 110px cells (previous default) */

.review-grid-large {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

/* Curated-gallery bless control + TRAIN badge — responsive to card size so neither
   clips nor overruns the top-left selection checkbox at small sizes (v14.0.898). */
.review-grid-compact .train-badge-label { display: none; }          /* compact: TRAIN badge shows just ⭐ */
.review-grid-compact .gallery-bless-label,
.review-grid-medium .gallery-bless-label { display: none; }         /* compact+medium: bless shows just the star */
.review-grid-compact .gallery-bless-btn,
.review-grid-medium .gallery-bless-btn {
  padding: 0.1rem 0.28rem;
  font-size: calc(0.95rem * var(--type-scale));
}

/* Face Training Header Button */

.ft-header-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: calc(0.85rem * var(--type-scale));
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}

.ft-header-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.ft-header-btn.review-all-btn {
  background: rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.4);
}

.ft-header-btn.review-all-btn:hover {
  background: rgba(102, 126, 234, 0.35);
}

/* ============================================================================
   Review grid — unified bulk platform (selection bar + grouped action bar).
   The shared visual idiom for the face-review grids: identity decisions,
   enrichment, and destructive actions read as three distinct groups; the
   destructive group is set apart with a red-tinted frame and extra distance.
   ============================================================================ */

.review-selection-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.review-selection-stats {
  color: #9ca3af;
  font-size: calc(0.875rem * var(--type-scale));
}

.review-selection-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.review-select-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: calc(0.75rem * var(--type-scale));
  cursor: pointer;
  font-weight: 500;
  transition: filter 0.15s;
}

.review-select-btn:hover {
  filter: brightness(1.15);
}

.review-select-unconfirmed {
  background: rgba(249, 115, 22, 0.25);
  border: 1px solid rgba(249, 115, 22, 0.5);
  color: #fb923c;
}

.review-select-all {
  background: rgba(59, 130, 246, 0.25);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #93c5fd;
}

.review-select-clear {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.review-selection-count {
  color: #f59e0b;
  font-size: calc(0.875rem * var(--type-scale));
  margin-left: 0.25rem;
}

.review-action-footer {
  flex-shrink: 0;
  background: #1e293b;
  padding: 0.6rem 1rem 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.review-action-bar {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.review-action-group {
  display: flex;
  gap: 0.4rem;
  padding: 0.3rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.review-action-group-destructive {
  margin-left: 1.25rem;
  background: rgba(239, 68, 68, 0.07);
  border-color: rgba(239, 68, 68, 0.3);
}

.review-btn {
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  color: white;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.1s;
}

.review-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

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

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

.review-btn-confirm { background: linear-gradient(135deg, #22c55e, #16a34a); }
.review-btn-different { background: linear-gradient(135deg, #f59e0b, #d97706); }
.review-btn-unknown { background: linear-gradient(135deg, #f97316, #ea580c); }
.review-btn-commentary { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.review-btn-curate { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.review-btn-train { background: linear-gradient(135deg, #eab308, #ca8a04); box-shadow: 0 0 8px rgba(234, 179, 8, 0.4); }
.review-btn-context { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.review-btn-ignore { background: linear-gradient(135deg, #6b7280, #4b5563); }

.review-action-caption {
  text-align: center;
  margin-top: 0.45rem;
  color: #6b7280;
  font-size: calc(0.7rem * var(--type-scale));
}

/* Mobile adjustments for review header */

@media (max-width: 768px) {
  .review-header-consolidated {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .review-header-left {
    order: 1;
    flex: 1 1 100%;
  }

  .review-header-center {
    order: 2;
  }

  .review-header-right {
    order: 3;
  }

  .person-selector-dropdown {
    max-width: none;
  }

  .nav-indicator {
    display: none;
  }
}

/* Community Service Toggle */

.community-service-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.community-service-toggle .toggle-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 500;
  white-space: nowrap;
}

/* Toggle Switch */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3);
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #10b981;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* Progress Header (relocated from body) */

.ft-progress-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(0.85rem * var(--type-scale));
  padding: 0 1rem;
  flex-shrink: 0;
}

.ft-progress-header .progress-item {
  white-space: nowrap;
}

.ft-progress-header .progress-divider {
  opacity: 0.5;
}

/* Community Service Active State - Emerald theme */

.face-training-header.community-service-active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Make labeled stats more visible */

.face-training-stats .stat-item {
  font-size: calc(0.8rem * var(--type-scale));
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

/* Mode tabs */

.face-training-mode-tabs {
  display: flex;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.mode-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: calc(0.95rem * var(--type-scale));
  font-weight: 500;
  color: var(--color-text-light);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mode-tab:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
}

.mode-tab.active {
  background: var(--color-primary);
  color: white;
}

.mode-icon {
  font-size: calc(1.1rem * var(--type-scale));
}

/* Face Tagging Body - contains all panels below Modal Header */

.face-training-body {
  padding: 0.5rem;
  flex: 1 1 auto;  /* Grow AND shrink to fill available space */
  min-height: 0;   /* Allow shrinking below content size */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ffvr-surface, #f5f5f5);  /* Match modal background */
}

/* Train mode */

.train-mode-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.person-selector-section h3 {
  margin: 0 0 1rem 0;
  font-size: calc(1.1rem * var(--type-scale));
  color: var(--color-text);
}

.person-group-label {
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text-light);
  margin: 1rem 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.person-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.5rem;
  background: var(--color-bg-secondary);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.person-card:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-primary);
}

.person-card.selected {
  background: var(--accent-bg);
  border-color: var(--color-primary);
}

.person-card.add-new-person {
  border: 2px dashed var(--color-border);
  background: transparent;
}

.person-card.add-new-person:hover {
  border-color: var(--color-primary);
  background: var(--accent-bg);
}

.person-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: calc(1.1rem * var(--type-scale));
  margin-bottom: 0.5rem;
  background-size: cover;
  background-position: center;
}

.person-avatar.has-photo {
  background-image: var(--photo-url);
}

.person-avatar.add-new {
  background: var(--color-primary);
  font-size: calc(1.5rem * var(--type-scale));
}

.person-name {
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.person-training-count {
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-lighter);
  margin-top: 0.25rem;
}

/* Upload section */

.train-upload-section {
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}

.selected-person-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--accent-bg);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.selected-person-label {
  color: var(--color-text-light);
  font-size: calc(0.9rem * var(--type-scale));
}

.selected-person-name {
  font-weight: 600;
  color: var(--color-primary);
}

.change-person-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: calc(0.85rem * var(--type-scale));
}

.upload-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-dropzone:hover {
  border-color: var(--color-primary);
  background: var(--accent-bg);
}

.dropzone-icon {
  font-size: calc(3rem * var(--type-scale));
  display: block;
  margin-bottom: 1rem;
}

.dropzone-hint {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-lighter);
  margin-top: 0.5rem;
}

/* Preview section */

.train-preview-section {
  text-align: center;
}

.train-preview-image-container {
  position: relative;
  max-width: 400px;
  margin: 0 auto 1rem;
  border-radius: 12px;
  overflow: hidden;
}

.train-preview-image-container img {
  width: 100%;
  display: block;
}

.face-detection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.face-bbox {
  position: absolute;
  border: 3px solid #10b981;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.train-quality-indicator {
  padding: 0.75rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: calc(0.95rem * var(--type-scale));
}

.train-quality-indicator .detecting { color: var(--color-text-light); }

.train-quality-indicator .excellent { color: #10b981; }

.train-quality-indicator .good { color: #3b82f6; }

.train-quality-indicator .fair { color: #f59e0b; }

.train-quality-indicator .poor { color: #ef4444; }

.train-quality-indicator .error { color: #ef4444; }

.train-quality-indicator .warning { color: #f59e0b; }

.train-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Review mode */

.review-mode-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  overflow: hidden;  /* Let internal layout handle sizing */
}

.review-filter-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--accent-bg);
  border-radius: 8px;
}

.clear-filter-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: calc(0.9rem * var(--type-scale));
}

.review-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-section {
  background: var(--color-bg-secondary);
  border-radius: 12px;
  overflow: hidden;
}

.review-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: var(--color-bg-tertiary);
}

.review-section .section-header h3 {
  margin: 0;
  font-size: calc(1rem * var(--type-scale));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-icon { font-size: calc(1.1rem * var(--type-scale)); }

.section-count { color: var(--color-text-lighter); font-weight: normal; }

.section-expand { color: var(--color-text-light); }

.section-content {
  padding: 1rem;
}

.section-empty {
  text-align: center;
  color: var(--color-text-light);
  padding: 1rem;
}

/* Face grid */

.face-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.face-review-card {
  background: var(--color-bg);
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.face-review-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.face-review-card.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.face-review-card.confirmed {
  opacity: 0.6;
  border-color: #10b981;
}

.face-review-card.rejected {
  opacity: 0.6;
  border-color: #ef4444;
}

.face-review-card.corrected {
  opacity: 0.6;
  border-color: #f59e0b;
}

.face-review-image-container {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.face-review-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.face-review-bbox {
  position: absolute;
  border: 2px solid #667eea;
  border-radius: 2px;
}

.face-review-prediction {
  padding: 0.5rem;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.face-review-confidence {
  padding: 0.25rem 0.5rem;
  font-size: calc(0.75rem * var(--type-scale));
  text-align: center;
  font-weight: 600;
}

.face-review-confidence.high { background: #d1fae5; color: #065f46; }

.face-review-confidence.near-threshold { background: #fef3c7; color: #92400e; border: 2px solid #f59e0b; } /* Highest training value - near auto-tag threshold */

.face-review-confidence.medium { background: #dbeafe; color: #1e40af; }

.face-review-confidence.low { background: #fee2e2; color: #991b1b; }

.face-review-actions {
  display: flex;
  justify-content: space-around;
  padding: 0.5rem;
  background: var(--color-bg-secondary);
}

.face-action-btn {
  flex: 1;
  padding: 0.5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: calc(0.9rem * var(--type-scale));
  border-radius: 6px;
  transition: all 0.2s;
}

.face-action-btn span {
  font-size: calc(0.7rem * var(--type-scale));
  opacity: 0.7;
  margin-right: 0.25rem;
}

.face-action-btn.confirm:hover { background: #d1fae5; }

.face-action-btn.reject:hover { background: #fee2e2; }

.face-action-btn.different:hover { background: #fef3c7; }

.review-keyboard-hint {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.key-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light);
}

.key-hint kbd {
  background: var(--color-bg-tertiary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: monospace;
  border: 1px solid var(--color-border);
}

/* Review complete */

.review-complete {
  text-align: center;
  padding: 2rem;
}

.review-complete .complete-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: 1rem;
}

.review-complete h2 {
  margin: 0 0 1.5rem 0;
}

.complete-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.complete-stat {
  text-align: center;
}

.complete-stat-value {
  font-size: calc(2rem * var(--type-scale));
  font-weight: 700;
}

.complete-stat-label {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light);
}

.complete-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* ============================================================
   SMART REVIEW LAYOUT - Thumbnail Grid + Large Preview
   v10.58.0: New unified navigation design
   ============================================================ */

.smart-review-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-bottom: 1rem;
}

.smart-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--color-bg-secondary);
  border-radius: 8px;
}

.smart-review-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.smart-review-person .person-name {
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text);
}

.smart-review-person .training-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 600;
}

.training-badge.good { background: #d1fae5; color: #065f46; }

.training-badge.fair { background: #fef3c7; color: #92400e; }

.training-badge.needs-more { background: #fee2e2; color: #991b1b; }

.smart-review-count {
  font-size: calc(0.9rem * var(--type-scale));
  color: var(--color-text-light);
}

/* Large Preview */

.smart-review-preview {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  max-height: 400px;
}

.preview-image-container {
  position: relative;
  max-width: 100%;
  max-height: 380px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.preview-image-container img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
}

.preview-image-container.processed {
  opacity: 0.7;
}

.preview-bbox {
  position: absolute;
  border: 3px solid #3b82f6;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  pointer-events: none;
}

.processed-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, 0.9);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 600;
}

/* Target face side-by-side layout */

.preview-split-layout {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.preview-target-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--color-bg-secondary, rgba(255,255,255,0.1));
  border-radius: 12px;
  min-width: 100px;
  flex-shrink: 0;
}

.preview-target-face .target-label {
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-light, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.preview-target-face .target-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-primary, #667eea);
  background: var(--color-bg-tertiary, #e5e7eb);
}

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

.preview-target-face .target-avatar .initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #667eea);
  color: white;
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 600;
}

.preview-target-face .target-name {
  font-weight: 600;
  color: var(--color-text, #1f2937);
  font-size: calc(0.95rem * var(--type-scale));
  text-align: center;
}

/* Navigation + Signal Display */

.smart-review-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;
}

.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s;
}

.nav-btn:hover {
  background: var(--color-primary);
  color: white;
}

.signal-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-bg-secondary);
  border-radius: 20px;
  min-width: 200px;
  justify-content: center;
}

.signal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: calc(1rem * var(--type-scale));
}

.signal-label {
  font-weight: 500;
  color: var(--color-text);
}

.signal-detail {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light);
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signal-display .confidence {
  font-weight: 600;
  color: var(--color-primary);
  margin-left: 0.5rem;
}

/* Action Buttons */

.smart-review-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.smart-review-actions .action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
  justify-content: center;
}

.action-btn .shortcut {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 700;
}

.action-btn.confirm {
  background: #10b981;
  color: white;
}

.action-btn.confirm:hover {
  background: #059669;
}

.action-btn.reject {
  background: #ef4444;
  color: white;
}

.action-btn.reject:hover {
  background: #dc2626;
}

.action-btn.different {
  background: #f59e0b;
  color: white;
}

.action-btn.different:hover {
  background: #d97706;
}

.action-btn.new-friend {
  background: #8b5cf6;
  color: white;
}

.action-btn.new-friend:hover {
  background: #7c3aed;
}

.action-btn.ignore {
  background: #6b7280;
  color: white;
}

.action-btn.ignore:hover {
  background: #4b5563;
}

/* Thumbnail Grid */

.smart-review-grid {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  flex-shrink: 0;
  min-height: 80px;
}

.smart-review-grid .thumb {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.2s;
}

.smart-review-grid .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smart-review-grid .thumb.selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.smart-review-grid .thumb.processed {
  opacity: 0.5;
}

.smart-review-grid .thumb.processed.confirmed::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(1.5rem * var(--type-scale));
  color: #10b981;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.smart-review-grid .thumb.processed.rejected::after {
  content: '✗';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(1.5rem * var(--type-scale));
  color: #ef4444;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.smart-review-grid .thumb.processed.ignored::after {
  content: '🚫';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(1.5rem * var(--type-scale));
  color: #6b7280;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.thumb-signal {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(0.65rem * var(--type-scale));
  font-weight: 600;
}

/* Keyboard Hints */

.smart-review-hints {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.smart-review-hints span {
  font-size: calc(0.8rem * var(--type-scale));
  color: var(--color-text-light);
}

.smart-review-hints kbd {
  background: var(--color-bg-tertiary);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: calc(0.75rem * var(--type-scale));
  border: 1px solid var(--color-border);
  margin: 0 0.1rem;
}

/* Mobile responsiveness for smart review */

@media (max-width: 640px) {
  .smart-review-layout {
    max-height: calc(100vh - 160px);
  }

  .smart-review-preview {
    min-height: 200px;
    max-height: 280px;
  }

  .preview-image-container img {
    max-height: 260px;
  }

  .smart-review-actions {
    gap: 0.5rem;
  }

  .smart-review-actions .action-btn {
    padding: 0.5rem 0.75rem;
    min-width: auto;
    font-size: calc(0.8rem * var(--type-scale));
  }

  .action-btn .label {
    display: none;
  }

  .smart-review-grid .thumb {
    width: 52px;
    height: 52px;
  }

  .smart-review-hints {
    gap: 0.75rem;
  }
}

/* ============================================================
   END SMART REVIEW LAYOUT
   ============================================================ */

/* ============================================================
   FACE TRAINING VIEW - REVIEW MODE SPLIT LAYOUT
   Contains: Target Face Panel (left) + Focal Candidate Photo (right)
             Candidate Thumbnail Panel + Confirmation Panel + Shortcuts
   ============================================================ */

.ft-split-layout {
  display: flex;
  flex-direction: column;
  flex: 1;  /* Fill available space in body, not 100% which caused header overflow */
  min-height: 0;  /* Allow flex shrinking */
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  gap: 0.5rem;
}

/* forging-universal-enrichment S6: display size (S/M/L). One header control
   scales the candidate carousel thumbnails AND the target-face rail together
   via custom properties on the modal root. Medium = the pre-toggle dimensions;
   the var() fallbacks below keep surfaces that share these classes without a
   sized root (Sandbox/Media Curator chassis) at those same dimensions. */
#faceTrainingModal.ft-size-compact { --ft-thumb-size: 78px; --ft-face-col: 118px; }
#faceTrainingModal.ft-size-medium { --ft-thumb-size: 110px; --ft-face-col: 160px; }
#faceTrainingModal.ft-size-large { --ft-thumb-size: 150px; --ft-face-col: 215px; }

/* Main content wrapper - flex-grow to fill available space */

.ft-main-content {
  display: grid;
  grid-template-columns: var(--ft-face-col, 160px) 1fr;  /* Target Face Panel width (S6 size toggle) */
  /* truing-import-receiver S11 (P6-F13): ONE row that may shrink. Without it the implicit row is
     sized by its content, so a 23-face class photo's rail grew the whole page below the viewport
     instead of scrolling inside the window. */
  grid-template-rows: minmax(0, 1fr);
  gap: 0.5rem;
  flex: 1;
  min-height: 0;  /* Critical for flex item with overflow children */
  overflow: hidden;
}

/* When no faces, collapse sidebar column (unified with Sandbox Curator) */

.ft-main-content.no-sidebar {
  grid-template-columns: 1fr;  /* No sidebar, media takes full width */
}

.ft-main-content.no-sidebar .ft-face-sidebar {
  display: none;  /* Hide the sidebar div when parent has no-sidebar class */
}

/* Person info header - shows who we're reviewing (inside body, not Modal Header) */

.ft-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.ft-person-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ft-person-name {
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text);
}

.ft-training-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 600;
  background: #d1fae5;
  color: #065f46;
}

.ft-progress {
  font-size: calc(0.9rem * var(--type-scale));
  color: var(--color-text-light);
}

/* FRIENDS TOGGLE: Include friends in candidate search */

.ft-friends-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.friends-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-muted);
  cursor: pointer;
}

.friends-toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.friends-select {
  max-width: 150px;
  max-height: 80px;
  font-size: calc(0.8rem * var(--type-scale));
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
}

.friends-select.hidden {
  display: none;
}

.friends-select option {
  padding: 0.2rem 0.4rem;
}

/* Loading overlay for candidate reload */

.ft-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 8px;
}

.ft-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: ft-spin 0.8s linear infinite;
}

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

/* TARGET FACE PANEL: Vertically scrollable column of face crops with labels */

.ft-face-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 8px;
  background: var(--ffvr-surface-sunken, var(--color-bg-tertiary));
  border-radius: 8px;
  min-height: 0;  /* Allow flex shrinking */
}

.ft-face-crop {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ffvr-surface-raised, var(--color-bg-secondary));
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 6px solid transparent;  /* 2x thicker per user feedback */
  transition: border-color 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.ft-face-crop-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.ft-face-crop:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.ft-face-crop.focused {
  /* Keep original category color - do NOT override border-color */
  border-width: 6px !important;  /* 2x thicker per user feedback */
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);  /* Blue glow to match typical face color */
  z-index: 10;
  animation: focusBlink 1s ease-in-out infinite;  /* Blinking animation for clarity */
}

/* Blinking animation for focused target face */

@keyframes focusBlink {
  0%, 100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  }
  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.9), 0 0 40px rgba(59, 130, 246, 0.5);
  }
}

.ft-face-crop.processed {
  opacity: 0.6;
}

/* Face Status Color Coding for Target Panel (per spec):
   - Green (#22c55e): Human confirmed (100%)
   - Blue (#3b82f6): Auto-tagged by Spotter (70-99%)
   - Orange (#f97316): Predicted needs review (<70%)
   - Red (#ef4444): Not identified/unknown
*/

.ft-face-crop.processed.confirmed {
  border-color: #22c55e;
}

.ft-face-crop.processed.rejected {
  border-color: #ef4444;
}

.ft-face-crop.processed.corrected {
  border-color: #22c55e;
}

.ft-face-crop.processed.ignored {
  border-color: #6b7280;
  opacity: 0.4;
}

/* Error state - face action failed, can retry */

.ft-face-crop.ft-error {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  animation: pulse-error 2s infinite;
}

.ft-face-crop.ft-error .ft-face-name {
  color: #f59e0b;
}

@keyframes pulse-error {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

/* Unprocessed face color coding by confidence */

.ft-face-crop.confirmed {
  border-color: #22c55e;  /* Green for confirmed/100% confidence */
}

.ft-face-crop.auto-tagged {
  border-color: #3b82f6;
}

.ft-face-crop.predicted {
  border-color: #f97316;
}

.ft-face-crop.unidentified {
  border-color: #ef4444;
}

.ft-face-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ft-face-crop-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  padding: 4px 6px;
  font-size: calc(0.7rem * var(--type-scale));
  text-align: center;
}

.ft-face-crop-index {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  z-index: 2;
}

/* Label section below the face crop image */

.ft-face-crop-label {
  padding: 6px 8px;
  background: var(--ffvr-surface-sunken, var(--color-bg-tertiary));
  text-align: center;
}

.ft-face-name {
  display: block;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 600;
  color: var(--ffvr-ink, var(--color-text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* filling-bespoke-vessels S4: ink-MUTED, not ink-faint. Both roles were solved
   against surface-raised, and the FOCUSED crop's label adds a blue tint over
   that plane (rgba(59,130,246,.15) → #22374B), which lifted the plane enough to
   take ink-faint to 4.01:1 — under the floor. These two are the crop's name and
   its confidence, i.e. secondary rather than tertiary text, so the muted role is
   also the more accurate reading of what they are: 6.8:1 on the focused label
   and higher on every unfocused one. */
.ft-face-name.unknown {
  color: var(--ffvr-ink-muted, var(--color-text-light));
  font-style: italic;
}

.ft-face-confidence {
  display: block;
  font-size: calc(0.7rem * var(--type-scale));
  color: var(--ffvr-ink-muted, var(--color-text-light));
  margin-top: 2px;
}

.ft-face-crop.focused .ft-face-crop-label {
  background: rgba(59, 130, 246, 0.15);  /* Blue-tinted to not override category colors */
}

.ft-face-crop.processed.confirmed .ft-face-name {
  color: #10b981;
}

.ft-face-crop.processed.corrected .ft-face-name {
  color: #f59e0b;
}

.ft-face-crop.processed.ignored .ft-face-name {
  color: #6b7280;
  text-decoration: line-through;
}

/* FOCAL CANDIDATE PHOTO: Full source photo with numbered bbox overlays */

.ft-photo-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ffvr-surface-sunken, var(--color-bg-tertiary));
  border-radius: 8px;
  overflow: hidden;
  flex: 1;  /* Take remaining space */
  min-height: 0;  /* Allow flex shrinking */
  padding: 1rem;  /* Give the image some breathing room */
}

.ft-photo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ft-photo-container {
  position: relative;
  display: inline-block;  /* Shrink-wrap the photo so bbox % positions align with the image */
  line-height: 0;  /* Remove inline spacing under img */
}

/* F57 (2026-09-24): the stage is hidden until its photo has fully arrived and
   decoded (presentCuratorPhotoWhenDecoded), so a face box is never shown over a
   picture that is still painting in top-down. The note stays visible because a
   child may override an inherited visibility:hidden. */
.ft-photo-container.ft-photo-pending {
  visibility: hidden;
}

.ft-photo-container.ft-photo-unavailable .ft-bbox-overlay {
  display: none;
}

.ft-photo-container.ft-photo-pending::after {
  content: 'Loading photo\2026';
  visibility: visible;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  color: var(--color-text-secondary, #9ca3af);
  font-size: calc(0.95rem * var(--type-scale, 1));
}

/* Higher specificity (0-2-1) to override .ft-photo-preview img (0-1-1) */

/* This ensures the focal photo uses viewport-relative sizing, not parent-relative 100% */

.ft-photo-preview .ft-photo-container img {
  display: block;
  max-width: calc(100vw - 430px);   /* Viewport width minus left nav (220px) + sidebar (160px) + padding */
  max-height: calc(100vh - 280px);  /* Viewport height minus header(60)+modal-header(50)+thumbs(80)+actions(50)+hints(30)+margin */
  width: auto;
  height: auto;
  object-fit: unset;  /* Override contain from .ft-photo-preview img */
}

/* Face bounding boxes on photo */

.ft-bbox-overlay {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ft-bbox-overlay:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.ft-bbox-overlay.focused {
  border-color: #f59e0b !important;
  border-width: 4px !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.8);
  animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.8); }
  50% { box-shadow: 0 0 25px rgba(245, 158, 11, 1); }
}

/* Bbox color coding for processed faces (per spec) */

.ft-bbox-overlay.processed.confirmed {
  border-color: #22c55e;
}

.ft-bbox-overlay.processed.rejected {
  border-color: #ef4444;
}

.ft-bbox-overlay.processed.corrected {
  border-color: #3b82f6;
}

.ft-bbox-overlay.processed.ignored {
  border-color: #6b7280;
  opacity: 0.4;
}

/* Processed faces when focused: keep status color, indicate focus via effects */

/* These use !important to override the generic .focused rule */

.ft-bbox-overlay.focused.processed.confirmed {
  border-color: #22c55e !important;
  border-width: 4px !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.8);
  animation: pulse-border-green 1.5s ease-in-out infinite;
}

.ft-bbox-overlay.focused.processed.rejected {
  border-color: #ef4444 !important;
  border-width: 4px !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
  animation: pulse-border-red 1.5s ease-in-out infinite;
}

.ft-bbox-overlay.focused.processed.corrected {
  border-color: #3b82f6 !important;
  border-width: 4px !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
  animation: pulse-border-blue 1.5s ease-in-out infinite;
}

@keyframes pulse-border-green {
  0%, 100% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.8); }
  50% { box-shadow: 0 0 25px rgba(34, 197, 94, 1); }
}

@keyframes pulse-border-red {
  0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.8); }
  50% { box-shadow: 0 0 25px rgba(239, 68, 68, 1); }
}

@keyframes pulse-border-blue {
  0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.8); }
  50% { box-shadow: 0 0 25px rgba(59, 130, 246, 1); }
}

/* Bbox color coding for unprocessed faces by confidence */

.ft-bbox-overlay.auto-tagged {
  border-color: #3b82f6;
}

.ft-bbox-overlay.predicted {
  border-color: #f97316;
}

.ft-bbox-overlay.unidentified {
  border-color: #ef4444;
}

.ft-bbox-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: calc(0.7rem * var(--type-scale));
  white-space: nowrap;
  pointer-events: none;
}

/* CANDIDATE THUMBNAIL PANEL: Horizontal scrolling photo navigation strip */

.ft-thumbnail-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 12px;
  background: var(--ffvr-surface-raised, var(--color-bg-secondary));
  border-radius: 8px;
  scrollbar-width: thin;
  flex-shrink: 0;
  margin-top: 4px;
}

.ft-thumbnail-strip .thumb {
  position: relative;
  flex: 0 0 auto;
  width: var(--ft-thumb-size, 110px);
  height: var(--ft-thumb-size, 110px);
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
}

.ft-thumbnail-strip .thumb:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.ft-thumbnail-strip .thumb.selected {
  border-color: #3b82f6;
  border-width: 4px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  animation: focal-pulse-blue 1.5s ease-in-out 3;
}

@keyframes focal-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15); }
}

.ft-thumbnail-strip .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ft-thumb-face-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 1px 5px;
  border-radius: 10px;
  font-size: calc(0.65rem * var(--type-scale));
}

/* ═══════════════════════════════════════════════════════════════════════════
   Face-Tagging candidate carousel — PERMANENT DELETE affordance
   repairing-portrait-custody S3 (D3.5)

   EVERY rule below is scoped to #ftThumbnailStrip, never to the shared
   .ft-thumbnail-strip class. The Sandbox Curator's #scThumbnailStrip carries
   that same class, and a class-scoped rule here would put a delete button on a
   surface that has no delete handler and no archive media_id behind it. The ID
   scope is the whole safety property — do not relax it to the class.
   ═══════════════════════════════════════════════════════════════════════════ */

#ftThumbnailStrip .thumb .ft-candidate-delete {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 3;                 /* above .ft-thumb-face-count (unlayered) */
  width: 18px;
  height: 18px;
  padding: 0;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: calc(0.85rem * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Quiet until wanted: a permanent-delete control should not compete with the
     tagging work for attention on every thumbnail at once. */
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s;
}

/* Reveal on hover of the thumb, and on focus so the control is keyboard-
   reachable rather than hover-only. */
#ftThumbnailStrip .thumb:hover .ft-candidate-delete,
#ftThumbnailStrip .thumb .ft-candidate-delete:focus-visible {
  opacity: 1;
}

#ftThumbnailStrip .thumb .ft-candidate-delete:hover {
  background: #dc2626;        /* destructive-red only at the point of action */
}

#ftThumbnailStrip .thumb .ft-candidate-delete:disabled,
#ftThumbnailStrip .thumb .ft-candidate-delete.is-deleting {
  opacity: 0.6;
  cursor: progress;
  background: #7f1d1d;
}

/* Touch devices have no hover state, so an opacity-0 control would be
   permanently invisible AND permanently tappable — the worst combination for a
   destructive action. Show it outright where hover does not exist. */
@media (hover: none) {
  #ftThumbnailStrip .thumb .ft-candidate-delete { opacity: 0.9; }
}

/* Move the face-count badge out from under the × — ft strip only, so the
   sandbox strip keeps its original top-right placement. */
#ftThumbnailStrip .thumb .ft-thumb-face-count {
  right: 24px;
}

.ft-empty-queue {
  padding: 24px;
  text-align: center;
  color: var(--color-text-secondary, #6b7280);
  font-size: calc(0.9rem * var(--type-scale));
}
.ft-empty-queue strong { color: var(--color-text-primary, #111827); }

/* Similarity group indicators for burst/similar photos */

.similarity-group {
  border-left: 4px solid transparent;
}

.ft-thumb-group-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(0.6rem * var(--type-scale));
  font-weight: 700;
  color: white;
  background: rgba(0,0,0,0.5);
  z-index: 2;
}

/* filling-bespoke-vessels S4. The five hues ARE the group signal, so they are
   kept exactly as they are — VOCABULARY is explicit that a semantic colour is
   left alone and that there is no --ffvr-success/--ffvr-warn to launder it
   through. What moves is the INK on them: white measured 2.15:1 (amber),
   2.49:1 (teal), 3.67:1 (rose) and 4.23:1 (violet), all of which were under
   the floor before this train existed. --ffvr-on-accent is exactly "text on an
   accent fill", it is #000000 for this room, and it takes the same four to
   9.4 / 8.4 / 5.7 / 4.9. The fallback is the `white` these inherit from
   .ft-thumb-group-badge, so flag-off computes byte-identically — check (d)
   proves it. The base badge (black fill, white text) is untouched. */
.similarity-group-a { border-left-color: #8b5cf6; }

.similarity-group-a .ft-thumb-group-badge { background: #8b5cf6; color: var(--ffvr-on-accent, white); }

.similarity-group-b { border-left-color: #14b8a6; }

.similarity-group-b .ft-thumb-group-badge { background: #14b8a6; color: var(--ffvr-on-accent, white); }

.similarity-group-c { border-left-color: #f59e0b; }

.similarity-group-c .ft-thumb-group-badge { background: #f59e0b; color: var(--ffvr-on-accent, white); }

.similarity-group-d { border-left-color: #f43f5e; }

.similarity-group-d .ft-thumb-group-badge { background: #f43f5e; color: var(--ffvr-on-accent, white); }

.similarity-group-e { border-left-color: #10b981; }

.similarity-group-e .ft-thumb-group-badge { background: #10b981; color: var(--ffvr-on-accent, white); }

/* Carousel decision badges: decided candidates stay navigable, the badge records
   the outcome. ✓ all faces reviewed w/ identification · ✗ all reviewed, none
   identified · dot = partially reviewed. Bottom-right corner (face-count owns
   top-right, similarity-group owns top-left). */
.ft-thumb-decision {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  z-index: 2;
}
.ft-thumb-decision.decided,
.ft-thumb-decision.cleared {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: calc(0.7rem * var(--type-scale));
  /* S6 polish: thin dark ring keeps the badge legible over bright photo corners */
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35);
}
.ft-thumb-decision.decided { background: rgba(34, 197, 94, 0.9); }
.ft-thumb-decision.cleared { background: rgba(107, 114, 128, 0.9); }
.ft-thumb-decision.partial {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.95);
  border: 1.5px solid rgba(0, 0, 0, 0.35);
}

/* Unified thumbnail badge (works in both modes) */

.ft-thumb-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(0.65rem * var(--type-scale));
  color: white;
}

.ft-thumb-badge.approved {
  background: #22c55e;
}

.ft-thumb-badge.review {
  background: #f59e0b;
}

.ft-thumb-badge.rejected {
  background: #ef4444;
}

/* Rotation control overlay for photo preview */

.ft-rotation-control {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 4px 8px;
  z-index: 10;
}

.rotation-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 6px;
  font-size: calc(1.2rem * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.rotation-btn:hover {
  background: rgba(102, 126, 234, 0.6);
}

.rotation-btn:active {
  background: rgba(102, 126, 234, 0.8);
}

.rotation-value {
  color: white;
  font-size: calc(0.8rem * var(--type-scale));
  min-width: 32px;
  text-align: center;
  font-family: var(--font-mono, monospace);
}

/* Photo container with rotation transform */

.ft-photo-container {
  position: relative;
  display: inline-block;
  transition: transform 0.2s ease;
  transform-origin: center center;
}

/* Unified thumbnail element (used by both Face Tagging and Sandbox Curator) */

/* Size matches .ft-thumbnail-strip .thumb at 110x110px for visual consistency */

.ft-thumb {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--color-bg-secondary, #242438);
  flex-shrink: 0;
  transition: border-color 0.2s, transform 0.15s;
}

.ft-thumb:hover {
  transform: scale(1.05);
  border-color: rgba(139, 92, 246, 0.5);
}

.ft-thumb.current {
  border-color: #8b5cf6;
  border-width: 4px;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
  animation: focal-pulse-purple 1.5s ease-in-out 3;
}

@keyframes focal-pulse-purple {
  0%, 100% { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.15); }
}

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

.ft-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: calc(1.5rem * var(--type-scale));
}

/* Decision state borders on thumbnails (unified) */

.ft-thumb.decision-keep {
  border-color: #22c55e;
}

.ft-thumb.decision-review {
  border-color: #f59e0b;
}

.ft-thumb.decision-reject {
  border-color: #ef4444;
}

/* Duplicate item in Sandbox Curator — non-interactive with X overlay */

.ft-thumb.duplicate {
  opacity: 0.4;
  cursor: pointer;
  border-color: #6b7280;
}

.ft-thumb.duplicate:hover {
  opacity: 0.6;
  border-color: #f59e0b;
}

.ft-thumb-duplicate-x {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(2rem * var(--type-scale));
  font-weight: bold;
  color: #ef4444;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* ============================================================================
   REPLACEMENT WORKFLOW STYLES
   Items that will replace existing media on promotion
   ============================================================================ */

/* Replacement thumbnail - distinct from regular duplicates */

.ft-thumb.replacement {
  border: 2px solid #8b5cf6;  /* Purple border for replacement items */
  opacity: 1;  /* Full opacity unlike regular duplicates */
}

.ft-thumb.replacement:hover {
  border-color: #a78bfa;
  transform: translateY(-2px);
}

/* Replacement badge in corner */

.ft-thumb-replacement-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.ft-thumb-replacement-badge.confirmed {
  background: linear-gradient(135deg, #10b981, #059669);
}

/* Replacement confirmation modal */

.replacement-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10020;
  animation: fadeIn 0.2s ease-out;
}

.replacement-confirm-modal .modal-content {
  background: var(--color-bg);
  border-radius: 12px;
  width: 90%;
  max-width: 450px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.replacement-confirm-modal .modal-header {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  padding: 16px 20px;
}

.replacement-confirm-modal .modal-header h3 {
  margin: 0;
  font-size: calc(1.1rem * var(--type-scale));
}

.replacement-confirm-modal .modal-body {
  padding: 20px;
}

.replacement-confirm-modal .modal-body p {
  margin: 0 0 12px 0;
  color: var(--color-text);
}

.replacement-confirm-modal .modal-body .info-text {
  font-size: calc(0.9rem * var(--type-scale));
  color: var(--color-text-secondary);
  background: rgba(139, 92, 246, 0.1);
  padding: 12px;
  border-radius: 8px;
  border-left: 3px solid #8b5cf6;
}

.replacement-confirm-modal .modal-footer {
  padding: 16px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--color-border);
}

.replacement-confirm-modal .btn-cancel {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.replacement-confirm-modal .btn-cancel:hover {
  background: var(--color-bg-tertiary);
}

.replacement-confirm-modal .btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.replacement-confirm-modal .btn-primary:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

/* Duplicate Media Modal */

.duplicate-media-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  animation: fadeIn 0.2s ease-out;
}

.duplicate-media-modal {
  background: var(--color-bg);
  border-radius: 12px;
  width: 95%;
  max-width: 700px;
  max-height: 85vh;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.duplicate-media-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(234, 88, 12, 0.15));
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
  flex-shrink: 0;
}

.duplicate-media-modal-header h3 {
  margin: 0;
  font-size: calc(1.25rem * var(--type-scale));
  color: var(--color-text);
}

.duplicate-media-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.duplicate-media-preview {
  display: flex;
  justify-content: center;
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  max-height: 50vh;
}

.duplicate-media-preview img {
  max-width: 100%;
  max-height: 50vh;
  object-fit: contain;
}

.duplicate-media-preview .duplicate-doc-icon {
  font-size: calc(4rem * var(--type-scale));
  padding: 2rem 3rem;
  color: var(--color-text-muted);
}

.duplicate-media-info {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: calc(0.9rem * var(--type-scale));
  line-height: 1.6;
  color: var(--color-text-muted);
}

.duplicate-media-info strong {
  color: var(--color-text);
}

.duplicate-media-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Replacement-enabled duplicate modal styling */

.duplicate-media-modal.replacement-pending .duplicate-media-modal-header {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.15));
  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
}

.duplicate-media-modal.replacement-confirmed .duplicate-media-modal-header {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15));
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}

.duplicate-media-info p {
  margin: 0 0 8px 0;
}

.duplicate-media-info p:last-child {
  margin-bottom: 0;
}

.duplicate-media-info code {
  font-family: monospace;
  font-size: 0.85em;
  background: rgba(0,0,0,0.2);
  padding: 2px 6px;
  border-radius: 4px;
}

.duplicate-explanation {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: calc(0.9rem * var(--type-scale));
  line-height: 1.6;
}

.duplicate-explanation p {
  margin: 0 0 8px 0;
  color: var(--color-text-muted);
}

.duplicate-explanation p:last-child {
  margin-bottom: 0;
}

.duplicate-explanation strong {
  color: var(--color-text);
}

.duplicate-action-status {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: calc(0.9rem * var(--type-scale));
  color: var(--color-text-muted);
}

.duplicate-action-status.confirmed {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15));
  color: #10b981;
  font-weight: 500;
}

.duplicate-media-modal-footer .btn-replace {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.duplicate-media-modal-footer .btn-replace:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.duplicate-media-modal-footer .btn-secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.duplicate-media-modal-footer .btn-secondary:hover {
  background: var(--color-bg-tertiary);
}

.duplicate-media-modal-footer .btn-close {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.duplicate-media-modal-footer .btn-close:hover {
  background: var(--color-bg-secondary);
}

/* Unified document preview (works in Sandbox Curator) */

.ft-document-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.ft-document-preview .doc-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: 1rem;
}

.ft-document-preview .doc-name {
  font-size: calc(1rem * var(--type-scale));
  color: var(--color-text, #f0f0f0);
  word-break: break-word;
}

.ft-document-preview .doc-size {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light, #9ca3af);
  margin-top: 0.5rem;
}

/* Unified PDF viewer */

.ft-pdf-viewer {
  width: 100%;
  height: 100%;
  border: none;
  min-height: 400px;
}

/* CONFIRMATION PANEL: Prev/Next navigation and Confirm/Different/Unknown buttons */

.ft-actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--ffvr-surface, var(--color-bg));
  border-top: 1px solid var(--ffvr-rule, var(--color-border));
  margin-top: auto;
}

/* forging-universal-enrichment S6: the split-layout action row adopts the
   grids' grouped idiom (.review-action-group frames from the S4 footer) —
   identity / enrichment / destructive read as one control system across the
   universal modal and both grids. */
.ft-actions-row .review-action-group {
  align-items: center;
}

.ft-actions-row .action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.ft-actions-row .action-btn.nav {
  background: var(--ffvr-surface-raised, var(--color-bg-tertiary));
  color: var(--ffvr-ink, var(--color-text));
}

.ft-actions-row .action-btn.nav:hover {
  background: var(--color-primary);
  color: white;
}

/* S6 palette alignment: the modal's decision buttons carry the SAME hues the
   grid footers use (review-btn-* gradients) — confirm green, different amber,
   unknown orange (NOT red: Unknown is a terminal answer, not a destructive
   act), context purple, train gold. One color vocabulary everywhere. */
.ft-actions-row .action-btn.confirm {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.ft-actions-row .action-btn.confirm:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.ft-actions-row .action-btn.reject {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: white;
}

.ft-actions-row .action-btn.reject:hover {
  background: linear-gradient(135deg, #ea580c, #c2410c);
}

.ft-actions-row .action-btn.different {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.ft-actions-row .action-btn.different:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
}

/* S6: whole-media-object operators (shared EnrichmentOperators module).
   Describe rides the Fergi-AI blue of the grids' Commentary (same commentary
   chokepoint); Tag Person takes indigo — object-scoped, unused elsewhere in
   the row, so the face-scoped and object-scoped clusters stay legible. */
.ft-actions-row .action-btn.person-tag {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
}

.ft-actions-row .action-btn.person-tag:hover {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.ft-actions-row .action-btn.describe {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
}

.ft-actions-row .action-btn.describe:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* Pre-focused button - highlighted for Enter/Tab activation */

.ft-actions-row .action-btn.prefocus,

.sc-unified-actions .action-btn.prefocus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.6), 0 0 12px rgba(59, 130, 246, 0.4);
  animation: prefocus-pulse 1.5s ease-in-out infinite;
  position: relative;
}

.ft-actions-row .action-btn.prefocus::after,

.sc-unified-actions .action-btn.prefocus::after {
  content: '↵';
  position: absolute;
  top: -8px;
  right: -8px;
  background: #3b82f6;
  color: white;
  font-size: calc(0.65rem * var(--type-scale));
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: bold;
}

@keyframes prefocus-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.6), 0 0 12px rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.6); }
}

.ft-actions-row .action-btn.ignore {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

.ft-actions-row .action-btn.ignore:hover {
  background: linear-gradient(135deg, #4b5563, #374151);
}

/* Training button - gold theme for adding to training set (S6: aligned to the
   grids' review-btn-train gold; the previous amber collided with Different) */

.ft-actions-row .action-btn.training {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  color: white;
  border: 1px solid #a16207;
}

.ft-actions-row .action-btn.training:hover {
  background: linear-gradient(135deg, #ca8a04, #a16207);
}

/* Gold badge for training set faces */

.face-training-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(10px * var(--type-scale));
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 10;
}

/* Gold ring around training set face thumbnails */

.ft-face-thumb.in-training {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* Gold glow for training set faces in Review Tagged Faces grid */

.review-face-cell.in-training-set {
  box-shadow: 0 0 10px 3px rgba(245, 158, 11, 0.6) !important;
}

.review-face-cell.in-training-set:hover {
  box-shadow: 0 0 14px 4px rgba(245, 158, 11, 0.8) !important;
  transform: scale(1.02);
}

/* Context button - purple, matching the grids' review-btn-context (S6; the
   previous amber collided with Different) */

.ft-actions-row .action-btn.context {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.ft-actions-row .action-btn.context:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

/* Auto-focus suggestion styling for action buttons */

.ft-actions-row .action-btn.suggested {
  animation: suggestBlink 0.8s ease-in-out infinite;
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.3);
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

@keyframes suggestBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

/* CONTEXT MODAL: Add age, year, location, notes */

.context-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease-out;
}

.context-modal {
  background: var(--color-bg);
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.context-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: rgba(245, 158, 11, 0.15);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

.context-modal-header h3 {
  margin: 0;
  font-size: calc(1.1rem * var(--type-scale));
  color: var(--color-text);
}

.context-modal-close {
  background: none;
  border: none;
  font-size: calc(1.5rem * var(--type-scale));
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  line-height: 1;
}

.context-modal-close:hover {
  color: var(--color-text);
}

.context-modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.context-field label {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-muted);
  font-weight: 500;
}

.context-field input,

.context-field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: calc(0.95rem * var(--type-scale));
  box-sizing: border-box;
}

.context-field input:focus,

.context-field textarea:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.context-field textarea {
  resize: vertical;
  min-height: 60px;
}

.context-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.context-modal-footer .action-btn {
  padding: 0.5rem 1rem;
}

/* CURATOR CONTEXT MODAL: Enhanced modal for Sandbox Curator with penumbra summary */

/* z-index: 10010 ensures it appears ABOVE the curator modal (10003) */

.curator-context-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  /* The context dialog opens OVER a curator window, and windows live in the 10300–10999 band
     (window-manager.js Z_BASE/Z_TOP). A literal 10010 drew it UNDER the Sandbox Curator: the
     screen went black and nothing appeared (P6, 2026-09-27). Use the declared tier. */
  z-index: var(--z-modal-system);
  animation: fadeIn 0.2s ease-out;
}

.curator-context-modal {
  background: var(--color-bg);
  border-radius: 12px;
  width: 95%;
  max-width: 900px;
  max-height: 85vh;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.curator-context-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(234, 88, 12, 0.15));
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  flex-shrink: 0;
}

.curator-context-modal-header h3 {
  margin: 0;
  font-size: calc(1.25rem * var(--type-scale));
  color: var(--color-text);
}

.curator-close-btn {
  background: none;
  border: none;
  font-size: calc(1.75rem * var(--type-scale));
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.curator-close-btn:hover {
  color: var(--color-text);
}

.curator-context-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
  flex: 1;
}

.context-hint {
  font-size: calc(0.9rem * var(--type-scale));
  color: var(--color-text-muted);
  margin: 0;
}

/* Penumbra Summary Section */

.penumbra-section {
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 8px;
  padding: 1rem;
}

.penumbra-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--color-text);
}

.penumbra-summary {
  font-size: calc(0.95rem * var(--type-scale));
  line-height: 1.6;
  color: var(--color-text-light);
  max-height: 40vh;
  overflow-y: auto;
}

.penumbra-empty {
  font-style: italic;
  color: var(--color-text-muted);
}

/* AI Analysis Formatting - Clean display of markdown-sourced content */

.ai-analysis-section {
  margin-top: 0.5rem;
}

.ai-analysis-content {
  margin-top: 0.75rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--color-primary-light, #8b9fed);
}

.ai-analysis-content p {
  margin: 0.5rem 0;
  line-height: 1.6;
}

.ai-analysis-content p:first-child {
  margin-top: 0;
}

.ai-section-header {
  font-weight: 600;
  color: var(--color-text);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border-light, #e5e7eb);
  font-size: calc(0.9rem * var(--type-scale));
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-section-header:first-child {
  margin-top: 0;
}

.ai-label {
  color: var(--color-text);
  font-weight: 500;
}

.ai-bullet-list {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
  list-style-type: disc;
}

.ai-bullet-list li {
  margin: 0.35rem 0;
  line-height: 1.5;
  color: var(--color-text-light);
}

.ai-bullet-list li strong {
  color: var(--color-text);
}

/* Nested lists in AI content */

.ai-bullet-list .ai-bullet-list {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* User Context Textarea */

.context-textarea-full {
  width: 100%;
  min-height: 120px;
  max-height: 30vh;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: calc(0.95rem * var(--type-scale));
  line-height: 1.5;
  resize: vertical;
  overflow-y: auto;
}

.context-textarea-full:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.context-textarea-full::placeholder {
  color: var(--color-text-muted);
}

.curator-context-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

/* Context Integration Status */

.context-integration-status {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: calc(0.9rem * var(--type-scale));
  text-align: center;
}

.context-integration-status .integrating {
  color: #60a5fa;
  animation: pulse 1.5s ease-in-out infinite;
}

.context-integration-status .integrated {
  color: #34d399;
}

.context-integration-status .error {
  color: #f87171;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Save Context button state */

.btn-save-context {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  /* containing-repaint-firehose S3 2026-05-29 — `subtle-glow` (an infinite
     box-shadow pulse) REMOVED. box-shadow is a NON-COMPOSITABLE property: it
     forces a full re-rasterization of the element's backing every frame and
     cannot be GPU-isolated (will-change:box-shadow does NOT make it
     compositor-only). This button lives inside the curator-context-modal, which
     mounts at document.body level — OUTSIDE any `.view`, so the S2
     `.view{contain:layout paint}` backstop does NOT bound it; while the modal is
     open the glow repaints #document ~30×/sec perpetually. The pulsing glow was
     decorative (zero informational value beyond the static gradient) — per Joe's
     verdict that imperceptible/decorative pulses are deleted, not preserved. A
     static mid-level glow keeps the button's depth with zero repaint cost. */
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
}

/* AGE/DATE CAPTURE PROMPT: Optional context after confirmation */

.age-data-prompt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.age-prompt-label {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-muted);
  white-space: nowrap;
}

.age-input {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: calc(0.9rem * var(--type-scale));
  text-align: center;
}

.age-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

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

/* KEYBOARD SHORTCUTS PANEL (.ft-hints) retired 2026-07-10
   (forging-universal-enrichment S6): the class was already display:none per
   user feedback; S6 deleted the last renderers, so the selector block goes
   with them. Keyboard handlers themselves remain live; tooltips carry keys. */

/* Mobile: collapse to vertical */

@media (max-width: 640px) {
  .ft-split-layout {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 160px);
  }

  .ft-face-sidebar {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
  }

  .ft-face-crop {
    width: 60px;
    min-width: 60px;
    flex: 0 0 auto;
  }

  .ft-photo-preview {
    min-height: 200px;
  }

  .ft-photo-preview .ft-photo-container img {
    max-width: calc(100vw - 40px);   /* Full width minus small padding on mobile */
    max-height: calc(100vh - 300px);
  }

  .ft-actions-row .action-btn {
    padding: 0.5rem 0.75rem;
    font-size: calc(0.8rem * var(--type-scale));
  }

  .ft-thumbnail-strip .thumb,
  .sc-thumb,
  .ft-thumb {
    width: 80px;
    height: 80px;
  }
}

/* ============================================================
   END FACE TRAINING SPLIT LAYOUT
   ============================================================ */

/* Discover mode */

.discover-mode-container {
  max-width: 400px;
  margin: 0 auto;
}

.discover-intro {
  text-align: center;
  margin-bottom: 1.5rem;
}

.discover-intro h3 {
  margin: 0 0 0.5rem 0;
}

.discover-intro p {
  color: var(--color-text-light);
  margin: 0;
}

.discover-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 500;
  font-size: calc(0.95rem * var(--type-scale));
}

.form-group .required {
  color: #ef4444;
}

.form-group input[type="text"] {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: calc(1rem * var(--type-scale));
  background: var(--color-bg);
  color: var(--color-text);
}

.form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-hint {
  font-size: calc(0.8rem * var(--type-scale));
  color: var(--color-text-lighter);
}

.person-type-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}

.radio-option:hover {
  background: var(--color-bg-secondary);
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.form-actions button {
  flex: 1;
}

/* Empty and error states */

.review-empty,

.review-error {
  text-align: center;
  padding: 3rem 2rem;
}

.review-empty h3,

.review-error h3 {
  margin: 0 0 0.5rem 0;
}

.review-empty p,

.review-error p {
  color: var(--color-text-light);
  margin: 0 0 1.5rem 0;
}

.review-empty-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Loading */

.review-loading {
  text-align: center;
  padding: 3rem;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

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

/* Mobile responsive */

@media (max-width: 768px) {
  /* On mobile, fill entire screen (no sidebar visible) */
  .face-training-modal {
    top: 60px !important;  /* Below header */
    left: 0 !important;    /* No sidebar on mobile */
  }

  .face-training-modal .modal-content {
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .face-training-header {
    border-radius: 0;
  }

  .face-training-mode-tabs {
    overflow-x: auto;
  }

  .person-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .face-review-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .review-keyboard-hint {
    display: none;
  }
}

/* FM Modal Face Training Link */

.fm-face-training-link {
  padding: 0 0 1rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}

.fm-open-face-training-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: calc(0.95rem * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.fm-open-face-training-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.fm-open-face-training-btn:active {
  transform: translateY(0);
}

.fm-open-face-training-btn .fm-face-count {
  background: rgba(255,255,255,0.2);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: calc(0.8rem * var(--type-scale));
}

.fm-open-face-training-btn svg {
  flex-shrink: 0;
}

/* ============================================================================
   THE CURATOR - Mode-Aware Styles
   ============================================================================ */

/* Mode Badge */

.curator-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: calc(12px * var(--type-scale));
  font-weight: 600;
  white-space: nowrap;
}

.curator-mode-badge.sandbox {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.curator-mode-badge.archive {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
}

/* Keyboard Hints */

.curator-keyboard-hints {
  font-size: calc(11px * var(--type-scale));
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: auto;
}

/* Decision Bar Layout */

.curator-decision-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}

.curator-decision-buttons {
  display: flex;
  gap: 8px;
}

.curator-stats-inline {
  display: flex;
  gap: 8px;
  font-size: calc(13px * var(--type-scale));
}

.curator-batch-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Thumbnail Strip */

.curator-thumbnail-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-bg-tertiary);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
}

.curator-batch-info {
  font-size: calc(13px * var(--type-scale));
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: auto;
}

.curator-close-btn-inline {
  background: none;
  border: none;
  font-size: calc(20px * var(--type-scale));
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px 8px;
}

.curator-close-btn-inline:hover {
  color: var(--color-text);
}

/* Curator Thumb */

.curator-thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  transition: all 0.15s;
}

.curator-thumb:hover {
  transform: scale(1.05);
}

.curator-thumb.current {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
}

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

.thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-bg-secondary);
  font-size: calc(20px * var(--type-scale));
}

/* Video type indicator - play button overlay on video thumbnails */

.thumb-type-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(16px * var(--type-scale));
  color: white;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Media type badge on thumbnail (VIDEO/DOCUMENT label) */

.media-type-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  font-size: calc(8px * var(--type-scale));
  font-weight: 600;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Duration badge for videos */

.duration-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: calc(9px * var(--type-scale));
  font-weight: 500;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

.thumb-decision {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: calc(10px * var(--type-scale));
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
  padding: 1px 4px;
}

.curator-thumb.decision-keep .thumb-decision {
  background: #10b981;
  color: white;
}

.curator-thumb.decision-review .thumb-decision {
  background: #f59e0b;
  color: white;
}

.curator-thumb.decision-saved .thumb-decision {
  background: #3b82f6;
  color: white;
}

/* Navigation */

.curator-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.curator-position {
  font-size: calc(14px * var(--type-scale));
  color: var(--color-text);
}

/* Preview Area */

.curator-preview-area {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

/* Curator Modal Container - MUST match Face Tagging positioning within App Panel */

.curator-modal {
  position: fixed;
  /* Position within App Panel area - same as .face-training-modal */
  top: 60px;                                      /* Below header */
  left: var(--side-nav-width, 60px);             /* Right of sidebar */
  right: 0;
  bottom: 0;
  /* Explicit height for iOS Safari which has issues with fixed + bottom:0 */
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px); /* Dynamic viewport height for mobile browsers */
  background: var(--color-bg);
  z-index: 10003;  /* Same as face-training-modal */
  display: none;
  overflow: hidden; /* Prevent content from overflowing modal bounds */
}

.curator-modal.active {
  display: flex;
  flex-direction: column;
}

/* Mobile: fill entire App Panel (sidebar already hidden) */

@media (max-width: 768px) {
  .curator-modal {
    top: 60px;
    left: 0;  /* No sidebar on mobile */
  }
}

.curator-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Expanded mode */

.curator-modal.curator-expanded {
  top: 5vh;
  left: 5vw;
  right: 5vw;
  bottom: 5vh;
  border-radius: 12px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

/* ============================================================================
   VIDEO FACES REVIEW MODAL
   ============================================================================ */

.video-faces-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.video-faces-modal-overlay.active {
  display: flex;
}

.video-faces-modal {
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 16px;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-faces-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.video-faces-title {
  flex: 1;
  margin: 0;
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-faces-stats {
  display: flex;
  gap: 16px;
}

.vf-stat {
  font-size: calc(0.85rem * var(--type-scale));
  opacity: 0.9;
  background: rgba(255,255,255,0.15);
  padding: 4px 12px;
  border-radius: 12px;
}

.video-faces-close {
  background: none;
  border: none;
  color: white;
  font-size: calc(28px * var(--type-scale));
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.video-faces-close:hover {
  opacity: 1;
}

.video-faces-toolbar {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-tertiary, #151520);
}

.vf-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-primary, #fff);
  font-size: calc(0.9rem * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
}

.vf-toolbar-btn:hover {
  background: #667eea;
}

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

.vf-icon {
  font-size: calc(1.1rem * var(--type-scale));
}

.video-faces-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* Loading State */

.video-faces-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-secondary, #999);
}

.vf-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color, #333);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: vf-spin 0.8s linear infinite;
  margin-bottom: 16px;
}

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

.vf-loading-note {
  font-size: calc(0.85rem * var(--type-scale));
  opacity: 0.7;
  margin-top: 8px;
}

/* Empty State */

.video-faces-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.vf-empty-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: 16px;
}

.video-faces-empty h3 {
  margin: 0 0 8px;
  color: var(--text-primary, #fff);
}

.video-faces-empty p {
  margin: 0 0 20px;
  color: var(--text-secondary, #999);
}

.vf-action-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-primary, #fff);
  cursor: pointer;
  font-size: calc(0.95rem * var(--type-scale));
  transition: all 0.2s;
}

.vf-action-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.vf-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Cluster Grid */

.video-faces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Cluster Card */

.vf-cluster-card {
  background: var(--bg-tertiary, #151520);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.2s;
}

.vf-cluster-card:hover {
  border-color: #667eea;
  transform: translateY(-2px);
}

.vf-cluster-card.identified {
  border-color: #10b981;
}

.vf-cluster-thumbnail {
  position: relative;
  height: 150px;
  background: #0a0a15;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-cluster-thumbnail img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.vf-no-thumb {
  font-size: calc(3rem * var(--type-scale));
  opacity: 0.3;
}

.vf-cluster-count {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 600;
}

.vf-cluster-info {
  padding: 12px 16px;
}

.vf-cluster-person {
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin-bottom: 4px;
}

.vf-cluster-person.identified {
  color: #10b981;
}

.vf-cluster-meta {
  display: flex;
  gap: 12px;
  font-size: calc(0.8rem * var(--type-scale));
  color: var(--text-secondary, #999);
}

.vf-cluster-actions {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color, #333);
}

.vf-person-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-primary, #fff);
  font-size: calc(0.9rem * var(--type-scale));
  cursor: pointer;
}

.vf-person-select:focus {
  outline: none;
  border-color: #667eea;
}

/* Error State */

.video-faces-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.vf-error-icon {
  font-size: calc(3rem * var(--type-scale));
  margin-bottom: 16px;
}

.video-faces-error h3 {
  margin: 0 0 8px;
  color: #ef4444;
}

.video-faces-error p {
  margin: 0 0 20px;
  color: var(--text-secondary, #999);
}

/* Mobile Responsive */

@media (max-width: 768px) {
  .video-faces-modal {
    max-height: 100vh;
    border-radius: 0;
  }

  .video-faces-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .video-faces-stats {
    width: 100%;
    justify-content: flex-start;
  }

  .video-faces-grid {
    grid-template-columns: 1fr;
  }

  .vf-cluster-thumbnail {
    height: 200px;
  }
}

/* ============================================================================
   Drag-to-Select for Review Face Tags Grid
   ============================================================================ */

/* Visual feedback during drag selection */

.review-face-cell.drag-selecting {
  transform: scale(0.95);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Prevent text selection during drag */

.review-face-cell {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Cursor feedback */

#taggedGridBody .review-face-cell {
  cursor: pointer;
}

#taggedGridBody .review-face-cell:active {
  cursor: grabbing;
}

/* ============================================================================
   SANDBOX CURATOR (SC) - Split Panel Layout
   Adopted from Face Tagging UI/UX for unified experience
   ============================================================================ */

/* Main modal container - respects FFA Window Frame */

.sc-modal {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%; /* Prevent overflow beyond parent container */
  overflow: hidden;
  background: #0f0f1a;
}

/* Sandbox Curator: Photo preview area */

.sc-modal .ft-photo-preview {
  flex: 3;  /* Take more flex space than sidebar */
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make the main content area expand to fill available space */

.sc-modal .ft-main-content {
  flex: 1;
  min-height: 0;
}

/* ============================================================================
   truing-import-receiver S11 — curator chrome (F16 walk + item review · F18 · d8 zoom ·
   d7 Context pop-up · F10 error reference). Curator/context/rail blocks only.
   ============================================================================ */

/* The item review rail: a faceless item's left column carries its own review (F16). */
.ft-main-content.sc-review-rail {
  grid-template-columns: minmax(240px, 32%) 1fr;
}
.sc-review-rail .ft-face-sidebar { gap: 10px; }
.sc-rail-tags .curator-person-tags-panel { margin: 0; }

.sc-item-review {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ffvr-surface-raised, rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.22);
  color: var(--color-text);
  font-size: calc(0.88rem * var(--type-scale, 1));
  line-height: 1.4;
}
.sc-review-kind {
  font-size: calc(0.72rem * var(--type-scale, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 158, 11, 0.9);
}
.sc-review-row { display: flex; flex-direction: column; gap: 2px; }
.sc-review-label {
  font-size: calc(0.72rem * var(--type-scale, 1));
  color: var(--color-text-muted);
}
.sc-review-title { font-weight: 600; overflow-wrap: anywhere; }
.sc-review-title.sc-untitled, .sc-undated { color: var(--color-text-muted); font-style: italic; font-weight: 400; }
.sc-review-file { font-size: calc(0.72rem * var(--type-scale, 1)); color: var(--color-text-muted); overflow-wrap: anywhere; }
.sc-review-note { color: var(--color-text-muted); font-size: calc(0.8rem * var(--type-scale, 1)); }
.sc-review-quote {
  margin: 2px 0;
  padding: 6px 8px;
  border-left: 3px solid rgba(245, 158, 11, 0.5);
  background: rgba(0, 0, 0, 0.18);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 16rem;
  overflow-y: auto;
  font-family: Georgia, 'Times New Roman', serif;
}
.sc-review-certainty { font-size: calc(0.74rem * var(--type-scale, 1)); color: var(--color-text-muted); }
.sc-review-more summary { cursor: pointer; font-size: calc(0.78rem * var(--type-scale, 1)); color: var(--color-text-muted); }
.sc-review-context {
  align-self: flex-start;
  margin-top: 2px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-text);
  cursor: pointer;
}
.sc-review-context:hover { background: rgba(245, 158, 11, 0.22); }

/* The walk counters (F16): every bucket shown, summing to the item total. */
.sc-walk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: calc(0.82rem * var(--type-scale, 1));
  color: var(--color-text-muted);
}
.sc-walk-stat { padding: 0.2rem 0.45rem; border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--color-text); }
.sc-walk-stat.skipped { border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.1); cursor: pointer; font: inherit; }
.sc-walk-stat.skipped:disabled { opacity: 0.45; cursor: default; }
.ft-thumb.walk-done::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(134, 239, 172, 0.85);
}
.ft-thumb.walk-skipped { outline: 2px dashed rgba(245, 158, 11, 0.7); outline-offset: -2px; }

/* Zoom (directive 8): the photo container is transformed, so the face boxes stay on the faces. */
.ft-zoom-control {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 4px 6px;
  z-index: 10;
}
.ft-zoom-btn {
  min-width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
}
.ft-zoom-btn:hover, .ft-zoom-btn.active { background: rgba(245, 158, 11, 0.55); }
.ft-zoom-value { min-width: 3.2em; text-align: center; color: #fff; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.sc-modal .ft-photo-container { touch-action: none; }
.ft-photo-preview.ft-zoom-active { cursor: grab; }
.ft-photo-preview.ft-zoom-active:active { cursor: grabbing; }
.ft-photo-container.ft-zoomed { transition: transform 0.06s linear; }
.ft-photo-container.ft-zoomed .ft-bbox-label { transform-origin: top left; }

/* The Context POP-UP (directive 7): anchored, smaller, no backdrop — the app stays visible. */
.curator-context-modal-overlay.ccx-popover {
  background: transparent;
  pointer-events: none;
  display: block;
  animation: none;
}
.curator-context-modal.ccx-dialog {
  position: fixed;
  width: min(460px, calc(100vw - 16px));
  max-width: none;
  max-height: min(78vh, 680px);
  pointer-events: auto;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  animation: fadeIn 0.15s ease-out;
}
.curator-context-modal.ccx-dialog.ccx-sheet {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-height: 72vh;
  border-radius: 16px 16px 0 0;
}
.ccx-dialog .curator-context-modal-header { padding: 0.6rem 0.9rem; gap: 0.6rem; }
.ccx-dialog .curator-context-modal-header h3 { font-size: calc(1.05rem * var(--type-scale, 1)); white-space: nowrap; }
.ccx-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: calc(0.8rem * var(--type-scale, 1));
}
.ccx-dialog .curator-context-modal-body { padding: 0.8rem 0.9rem; gap: 0.7rem; }
.ccx-dialog .curator-context-modal-footer { padding: 0.6rem 0.9rem; }
.ccx-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: calc(0.8rem * var(--type-scale, 1)); color: var(--color-text-muted); }
.ccx-field input {
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--color-text);
  font-size: calc(0.92rem * var(--type-scale, 1));
}
.ccx-fields { display: flex; flex-direction: column; gap: 0.45rem; }
.ccx-fields-note { margin: 0; font-size: calc(0.72rem * var(--type-scale, 1)); color: var(--color-text-muted); }
.ccx-note { display: flex; flex-direction: column; gap: 0.35rem; }
.ccx-note-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.ccx-note-row .context-textarea-full { flex: 1; min-height: 6.5rem; }
.ccx-note-row .sc-sayit { flex: 0 0 auto; }
.ccx-penumbra > summary { cursor: pointer; list-style: none; }
.ccx-penumbra > summary::-webkit-details-marker { display: none; }
.ccx-penumbra:not([open]) .penumbra-summary { display: none; }

/* The note's scope read (S5 scope_read): what it will teach the Vault, before it is saved. */
.ccx-scope-read { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 0.5rem; }
.ccx-scope-head { font-weight: 600; font-size: calc(0.86rem * var(--type-scale, 1)); margin-bottom: 0.35rem; }
.ccx-scope-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ccx-scope-list li { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; font-size: calc(0.84rem * var(--type-scale, 1)); }
.ccx-scope-tag { padding: 0.05rem 0.4rem; border-radius: 999px; font-size: calc(0.72rem * var(--type-scale, 1)); background: rgba(255, 255, 255, 0.1); }
.ccx-scope-item { background: rgba(96, 165, 250, 0.2); }
.ccx-scope-series { background: rgba(167, 139, 250, 0.22); }
.ccx-scope-person { background: rgba(52, 211, 153, 0.22); }
.ccx-scope-batch { background: rgba(245, 158, 11, 0.25); }
.ccx-scope-hold, .ccx-scope-cut { background: rgba(148, 163, 184, 0.25); }
.ccx-scope-basis, .ccx-scope-why, .ccx-scope-members, .ccx-scope-when, .ccx-scope-empty {
  color: var(--color-text-muted);
  font-size: calc(0.76rem * var(--type-scale, 1));
}
.ccx-scope-members { flex-basis: 100%; padding-left: 0.5rem; }
.ccx-scope-when, .ccx-scope-empty { margin: 0.35rem 0 0; }

/* F10: the reference the error message promises, shown and selectable. */
.ffa-err-ref { display: inline-block; margin-top: 0.2rem; }
.ffa-err-ref code { user-select: all; padding: 0 0.3rem; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }

/* The phone's Sandbox Curator (parity): the date line and the reading's certainty. */
.msc-item-date { font-size: 0.82rem; color: rgba(235, 225, 205, 0.85); margin: 0.2rem 0; }
.msc-item-date.msc-undated { font-style: italic; color: rgba(235, 225, 205, 0.6); }
.msc-item-reading-certainty { font-size: 0.72rem; color: rgba(235, 225, 205, 0.6); margin-top: 0.2rem; }

/* ================================================================
   BULK FACE REVIEW PANEL
   Grid-based bulk confirmation of pending face identifications
   ================================================================ */

.bulk-review-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.bulk-review-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.bulk-back-btn {
    font-size: calc(0.85rem * var(--type-scale));
    padding: 0.4rem 0.8rem;
}

.bulk-review-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bulk-review-filters label {
    font-size: calc(0.85rem * var(--type-scale));
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bulk-review-filters select {
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-size: calc(0.85rem * var(--type-scale));
}

.bulk-review-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* .bulk-selected-count retired (forging-universal-enrichment S5) — the count
   now rides the shared .review-selection-count idiom. */

.bulk-review-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: calc(0.85rem * var(--type-scale));
    flex-shrink: 0;
}

.bulk-stats-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.bulk-stat {
    color: var(--color-text-light);
}

.bulk-stat strong {
    color: var(--color-text);
}

.bulk-stat-session {
    margin-left: auto;
    color: var(--color-success);
    font-weight: 500;
}

/* settling-kg-remainder S4 — the KG-routed queue's standing explanation.
   Carries information, not decoration: this row is the ONLY place the reviewer
   is told that the person's name came from a record rather than from the face
   detector, which is the whole difference between the two queues. Accented on
   the left in the info hue so it reads as provenance rather than as an alert. */
.bulk-routed-note {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--color-info, #3b82f6);
    background: var(--color-surface-alt, rgba(59, 130, 246, 0.06));
    border-radius: 0 4px 4px 0;
    color: var(--color-text-light);
    font-size: 0.9em;
    line-height: 1.45;
}

.bulk-routed-note strong {
    color: var(--color-text);
}

.bulk-review-groups {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.bulk-person-group {
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg);
}

.bulk-person-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #667eea15, #764ba215);
    border-bottom: 1px solid var(--color-border);
}

.bulk-person-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bulk-person-name {
    margin: 0;
    font-size: calc(1rem * var(--type-scale));
    font-weight: 600;
}

.bulk-person-count {
    font-size: calc(0.8rem * var(--type-scale));
    color: var(--color-text-light);
    background: var(--color-bg-secondary);
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
}

.bulk-person-confidence {
    font-size: calc(0.8rem * var(--type-scale));
    color: var(--color-text-lighter);
}

/* ── The Unidentified bucket (LESSONS §273) ──────────────────────────────────
   Not a person group. Colour carries the distinction: amber says "these need a
   name", against the violet person-group header. It sits first in the grid, so
   the visual break also marks where the named work begins. */

.bulk-person-group.bulk-group-unidentified {
    border-color: rgba(245, 158, 11, 0.45);
}

.bulk-group-unidentified .bulk-person-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.10));
    border-bottom-color: rgba(245, 158, 11, 0.35);
}

.bulk-group-unidentified .bulk-person-info {
    flex-wrap: wrap;
}

.bulk-person-hint {
    font-size: calc(0.78rem * var(--type-scale));
    color: var(--color-text-lighter);
    font-style: italic;
}

.bulk-person-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bulk-select-all-label {
    font-size: calc(0.85rem * var(--type-scale));
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: calc(0.8rem * var(--type-scale));
}

.bulk-face-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    padding: 0.75rem;
}

.bulk-face-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.3s, transform 0.3s;
    background: var(--color-bg-secondary);
}

.bulk-face-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.bulk-face-card.selected {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3);
}

.bulk-face-img-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

.bulk-face-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bulk-face-bbox {
    position: absolute;
    border: 2px solid #7c3aed;
    border-radius: 2px;
    pointer-events: none;
}

.bulk-face-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    font-size: calc(0.75rem * var(--type-scale));
}

.bulk-face-conf {
    font-weight: 600;
}

.bulk-face-conf.high { color: #22c55e; }

.bulk-face-conf.medium { color: #f59e0b; }

.bulk-face-conf.low { color: #ef4444; }

.bulk-face-check {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.bulk-empty {
    text-align: center;
    padding: 3rem;
    color: var(--color-text-light);
}

.bulk-error {
    color: var(--color-danger);
    font-weight: 500;
}

@media (max-width: 768px) {
    .bulk-review-toolbar {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .bulk-face-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 6px;
    }

    .bulk-person-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ================================================================
   VOICE TAGGING MODAL
   Speaker identification interface (mirrors Face Tagging pattern)
   ================================================================ */

.voice-tagging-modal {
  position: fixed !important;
  top: 60px !important;
  left: var(--side-nav-width, 60px) !important;
  right: 0 !important;
  bottom: 0 !important;
  /* NOT !important: the desktop window band's inline focus-order z
     (FFVWindowManager, 10300–10999) must win while managed (S5). */
  z-index: 10003;
  display: none;
  align-items: stretch !important;
  justify-content: stretch !important;
}

.voice-tagging-modal.active {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

.voice-tagging-modal .modal-overlay {
  display: none !important;
}

.vt-modal-content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  background: var(--color-bg-primary, #fff);
  overflow: hidden;
  border-radius: 0 !important;
}

/* Header bar - purple gradient matching Face Tagging */

.vt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 0;
  flex-shrink: 0;
  min-height: 60px;
}

.vt-title {
  margin: 0;
  font-size: calc(1.2rem * var(--type-scale));
  font-weight: 600;
}

.vt-done-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: white;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 500;
  transition: background 0.2s;
  flex-shrink: 0;
}

.vt-done-btn:hover {
  background: rgba(255,255,255,0.3);
}

.vt-stats {
  display: flex;
  gap: 0.75rem;
  font-size: calc(0.9rem * var(--type-scale));
  align-items: center;
}

.vt-stat-identified {
  color: #a5f3c0;
}

.vt-stat-skipped {
  color: #fde68a;
}

.vt-stat-global {
  color: rgba(255,255,255,0.8);
}

/* Split layout - sidebar + main content */

.vt-split-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Speaker sidebar (left) */

.vt-speaker-sidebar {
  width: 220px;
  min-width: 220px;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-secondary, #f8f9fa);
  padding: 0.5rem 0;
}

.vt-speaker-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}

.vt-speaker-item:hover {
  background: var(--color-bg-tertiary, #e9ecef);
}

.vt-speaker-item.vt-speaker-active {
  background: var(--color-bg-tertiary, #e9ecef);
  border-left-color: #667eea;
}

.vt-speaker-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.vt-speaker-indicator.unknown {
  background: #f59e0b;
  animation: vt-pulse-unknown 2s ease-in-out infinite;
}

@keyframes vt-pulse-unknown {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.vt-speaker-indicator.identified {
  background: #10b981;
}

.vt-speaker-details {
  flex: 1;
  min-width: 0;
}

.vt-speaker-label {
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text-primary);
}

.vt-speaker-duration {
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-light);
  margin-top: 2px;
}

.vt-speaker-person {
  font-size: calc(0.8rem * var(--type-scale));
  margin-top: 3px;
}

.vt-speaker-identified .vt-speaker-person {
  color: #10b981;
}

.vt-speaker-unknown .vt-speaker-person {
  color: #f59e0b;
}

/* Main content (right of sidebar) */

.vt-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1rem 1.5rem;
  gap: 1rem;
}

/* Player section */

.vt-player-section {
  flex-shrink: 0;
}

.vt-player {
  width: 100%;
  max-height: 300px;
  border-radius: 8px;
  background: #000;
}

.vt-audio-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  background: var(--color-bg-secondary, #f8f9fa);
  border-radius: 8px;
}

.vt-audio-icon {
  font-size: calc(3rem * var(--type-scale));
}

.vt-audio-player {
  width: 100%;
  max-width: 500px;
}

.vt-file-name {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light);
  margin-top: 0.5rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Transcript excerpt */

.vt-transcript-section {
  flex-shrink: 0;
}

.vt-transcript-label {
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-light);
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.vt-transcript-text {
  font-size: calc(0.95rem * var(--type-scale));
  line-height: 1.6;
  color: var(--color-text-primary);
  font-style: italic;
  padding: 0.75rem 1rem;
  background: var(--color-bg-secondary, #f8f9fa);
  border-left: 3px solid #667eea;
  border-radius: 0 8px 8px 0;
}

.vt-no-transcript {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light);
  font-style: italic;
}

/* Speaker segment timeline */

.vt-timeline-section {
  flex-shrink: 0;
}

.vt-timeline-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vt-timeline-label {
  display: flex;
  justify-content: space-between;
  font-size: calc(0.8rem * var(--type-scale));
  color: var(--color-text-light);
}

.vt-timeline-bar {
  position: relative;
  height: 28px;
  background: var(--color-bg-secondary, #f0f0f0);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.vt-timeline-segment {
  position: absolute;
  top: 2px;
  bottom: 2px;
  background: #667eea;
  border-radius: 3px;
  opacity: 0.7;
  transition: opacity 0.15s;
  min-width: 2px;
}

.vt-timeline-segment:hover {
  opacity: 1;
}

.vt-timeline-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

/* Full transcript collapsible */

.vt-full-transcript-details {
  margin-top: 0.5rem;
}

.vt-full-transcript-details summary {
  cursor: pointer;
  font-size: calc(0.85rem * var(--type-scale));
  color: #667eea;
  font-weight: 500;
  padding: 0.25rem 0;
}

.vt-full-transcript-details summary:hover {
  text-decoration: underline;
}

.vt-full-transcript {
  max-height: 200px;
  overflow-y: auto;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: var(--color-bg-secondary, #f8f9fa);
  border-radius: 6px;
  font-size: calc(0.85rem * var(--type-scale));
  line-height: 1.5;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.vt-clip-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-primary, #fff);
  cursor: pointer;
  font-size: calc(0.85rem * var(--type-scale));
  transition: all 0.15s;
}

.vt-clip-btn:hover:not(:disabled) {
  background: var(--color-bg-secondary, #f8f9fa);
  border-color: #667eea;
}

.vt-clip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.vt-play-btn {
  background: #667eea;
  color: white;
  border-color: #667eea;
  font-weight: 600;
}

.vt-play-btn:hover:not(:disabled) {
  background: #5a6fd6;
  border-color: #5a6fd6;
}

/* Actions */

.vt-actions {
  flex-shrink: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.vt-action-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.vt-action-btn {
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: calc(0.95rem * var(--type-scale));
  font-weight: 500;
  transition: all 0.15s;
}

.vt-action-btn.vt-identify {
  background: #667eea;
  color: white;
}

.vt-action-btn.vt-identify:hover {
  background: #5a6fd6;
}

.vt-action-btn.vt-skip {
  background: #f59e0b;
  color: white;
}

.vt-action-btn.vt-skip:hover {
  background: #d97706;
}

.vt-action-btn.vt-unknown {
  background: var(--color-bg-secondary, #f8f9fa);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.vt-action-btn.vt-unknown:hover {
  background: var(--color-bg-tertiary, #e9ecef);
}

.vt-identified-banner {
  text-align: center;
  padding: 0.75rem;
  background: #ecfdf5;
  border-radius: 8px;
  color: #065f46;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.vt-action-btn.vt-reassign {
  background: rgba(16,185,129,0.15);
  color: #065f46;
  font-size: calc(0.8rem * var(--type-scale));
  padding: 0.3rem 0.75rem;
}

.vt-action-btn.vt-reassign:hover {
  background: rgba(16,185,129,0.25);
}

/* Video navigation footer */

.vt-video-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary, #f8f9fa);
  flex-shrink: 0;
}

.vt-nav-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-primary, #fff);
  cursor: pointer;
  font-size: calc(0.85rem * var(--type-scale));
  transition: all 0.15s;
}

.vt-nav-btn:hover:not(:disabled) {
  background: var(--color-bg-tertiary, #e9ecef);
  border-color: #667eea;
}

.vt-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.vt-video-counter {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light);
}

/* Keyboard hints */

.vt-hints {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-primary, #fff);
  flex-shrink: 0;
}

.vt-hints span {
  font-size: calc(0.8rem * var(--type-scale));
  color: var(--color-text-light);
}

.vt-hints kbd {
  background: var(--color-bg-tertiary, #e9ecef);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: calc(0.75rem * var(--type-scale));
  border: 1px solid var(--color-border);
  margin: 0 0.1rem;
}

/* Loading & empty states */

.vt-loading,

.vt-empty,

.vt-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}

.vt-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: vt-spin 0.8s linear infinite;
}

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

.vt-empty-icon {
  font-size: calc(3rem * var(--type-scale));
}

/* Mobile responsive */

@media (max-width: 640px) {
  .voice-tagging-modal {
    top: 60px !important;
    left: 0 !important;
  }

  .vt-split-layout {
    flex-direction: column;
  }

  .vt-speaker-sidebar {
    width: 100%;
    min-width: 100%;
    max-height: 120px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .vt-speaker-item {
    min-width: 140px;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 0.75rem;
  }

  .vt-speaker-item.vt-speaker-active {
    border-left-color: transparent;
    border-bottom-color: #667eea;
  }

  .vt-main-content {
    padding: 0.75rem;
  }

  .vt-player {
    max-height: 200px;
  }

  .vt-hints {
    display: none;
  }

  .vt-header {
    padding: 0.75rem 1rem;
    min-height: 50px;
  }

  .vt-title {
    font-size: calc(1rem * var(--type-scale));
  }

  .vt-video-nav {
    padding: 0.5rem 0.75rem;
  }
}

/* SC Modal Header - Purple gradient bar (mirrors .face-training-header) */

.sc-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  flex-shrink: 0;
  z-index: 10;
}

.sc-done-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.sc-done-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sc-title-area {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sc-title {
  color: white;
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
  margin: 0;
}

.sc-batch-name {
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(0.9rem * var(--type-scale));
  font-style: italic;
}

/* Lane 1 F10: arriving from a publish, the Media Curator says the items are in the Vault. */
.sc-vault-note {
  color: #0b3d1f;
  background: #bbf7d0;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 600;
  white-space: nowrap;
}

/* Stats in header */

.sc-stats {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.sc-stat {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
}

.sc-stat.approved {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.sc-stat.review {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.sc-stat.rejected {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.sc-stat.pending {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
}

/* Split Layout Container */

.sc-split-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  gap: 0.5rem;
}

/* Main content wrapper - always grid layout to match Face Tagging */

.sc-main-content {
  display: grid;
  grid-template-columns: 130px 1fr;  /* Reduced sidebar for more photo space */
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.5rem;
}

/* When no faces, collapse sidebar column (use when .no-sidebar class is applied) */

.sc-main-content.no-sidebar {
  grid-template-columns: 1fr;  /* No sidebar, media takes full width */
}

/* TARGET FACE PANEL: Vertically scrollable face crops */

.sc-face-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 8px;
  background: var(--color-bg-tertiary, #1a1a2e);
  border-radius: 8px;
  min-height: 0;
}

.sc-face-crop {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary, #242438);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 4px solid transparent;
  transition: border-color 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.sc-face-crop-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.sc-face-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-face-crop:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.sc-face-crop.focused {
  border-width: 4px !important;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  z-index: 10;
  animation: scFocusBlink 1s ease-in-out infinite;
}

@keyframes scFocusBlink {
  0%, 100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  }
  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.9), 0 0 40px rgba(59, 130, 246, 0.5);
  }
}

.sc-face-crop-index {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  z-index: 2;
}

.sc-face-crop-label {
  padding: 6px 8px;
  background: var(--color-bg-tertiary, #1a1a2e);
  text-align: center;
}

.sc-face-name {
  display: block;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text, #f0f0f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-face-name.unknown {
  color: var(--color-text-light, #9ca3af);
  font-style: italic;
}

.sc-face-confidence {
  display: block;
  font-size: calc(0.65rem * var(--type-scale));
  color: var(--color-text-light, #9ca3af);
  margin-top: 2px;
}

/* Face category colors (same as Face Tagging) */

.sc-face-crop.confirmed {
  border-color: #22c55e;
}

.sc-face-crop.auto-tagged {
  border-color: #3b82f6;
}

.sc-face-crop.predicted {
  border-color: #f97316;
}

.sc-face-crop.unidentified {
  border-color: #ef4444;
}

/* MEDIA PREVIEW: Full photo/video/document display */

.sc-media-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary, #242438);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.sc-media-preview img,

.sc-media-preview video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Photo preview with bounding box overlays */

.sc-photo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sc-photo-container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Bounding box overlay container */

.sc-bbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Individual bounding box */

.sc-bbox {
  position: absolute;
  border: 2px solid;
  border-radius: 4px;
  pointer-events: auto;
  cursor: pointer;
  transition: border-width 0.15s, box-shadow 0.15s;
}

.sc-bbox:hover {
  border-width: 3px;
}

.sc-bbox.focused {
  border-width: 3px;
  box-shadow: 0 0 10px currentColor;
}

.sc-bbox-number {
  position: absolute;
  top: -2px;
  left: -2px;
  background: inherit;
  background-color: currentColor;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 700;
}

/* Document preview */

.sc-document-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.sc-document-preview .doc-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: 1rem;
}

.sc-document-preview .doc-name {
  font-size: calc(1rem * var(--type-scale));
  color: var(--color-text, #f0f0f0);
  word-break: break-word;
}

.sc-document-preview .doc-size {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light, #9ca3af);
  margin-top: 0.5rem;
}

/* PDF viewer */

.sc-pdf-viewer {
  width: 100%;
  height: 100%;
  border: none;
  min-height: 400px;
}

/* CANDIDATE THUMBNAIL PANEL: Horizontal scrolling strip */

.sc-thumbnail-strip {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-bg-tertiary, #1a1a2e);
  border-radius: 8px;
  overflow-x: auto;
  flex-shrink: 0;
  margin: 0 0.5rem;
}

.sc-thumbnail-strip::-webkit-scrollbar {
  height: 6px;
}

.sc-thumbnail-strip::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.sc-thumbnail-strip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.sc-thumb {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  flex-shrink: 0;
  transition: border-color 0.2s, transform 0.15s;
}

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

.sc-thumb:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.sc-thumb.current {
  border-color: #667eea;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

/* Decision badges on thumbnails */

.sc-thumb-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(0.65rem * var(--type-scale));
  font-weight: 700;
  color: white;
  z-index: 5;
}

.sc-thumb-badge.approved {
  background: #22c55e;
}

.sc-thumb-badge.review {
  background: #f59e0b;
}

.sc-thumb-badge.rejected {
  background: #ef4444;
}

/* Decision state borders on thumbnails */

.sc-thumb.decision-keep {
  border-color: #22c55e;
}

.sc-thumb.decision-review {
  border-color: #f59e0b;
}

.sc-thumb.decision-reject {
  border-color: #ef4444;
}

/* Type indicator on thumbnails */

.sc-thumb-type {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: calc(0.6rem * var(--type-scale));
}

/* Face count on thumbnails */

.sc-thumb-face-count {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: calc(0.65rem * var(--type-scale));
  font-weight: 600;
}

/* Placeholder icon for non-photo items */

.sc-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  font-size: calc(1.5rem * var(--type-scale));
}

/* ACTION PANEL: Decision buttons */

.sc-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--color-bg-secondary, #242438);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: 0 0.5rem;
}

.sc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.sc-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sc-action-btn:active {
  transform: translateY(0);
}

.sc-action-btn .shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: calc(0.75rem * var(--type-scale));
}

/* Action button variants */

.sc-action-btn.nav {
  background: #4b5563;
  color: white;
}

.sc-action-btn.approve {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
}

.sc-action-btn.approve.active {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5), 0 4px 12px rgba(34, 197, 94, 0.3);
}

.sc-action-btn.review-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.sc-action-btn.review-btn.active {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.5), 0 4px 12px rgba(245, 158, 11, 0.3);
}

.sc-action-btn.reject {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.sc-action-btn.context {
  background: #6366f1;
  color: white;
}

.sc-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* FACE ACTIONS ROW - For tagging faces during curation */

.sc-face-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  margin: 0 0.5rem;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.3);
}

.sc-face-current-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sc-face-number {
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.2);
  padding: 4px 10px;
  border-radius: 12px;
}

.sc-face-prediction {
  font-size: calc(0.95rem * var(--type-scale));
  font-weight: 600;
  color: white;
}

.sc-face-prediction .confidence {
  font-size: calc(0.8rem * var(--type-scale));
  opacity: 0.8;
  margin-left: 4px;
}

.sc-face-status {
  font-size: calc(0.75rem * var(--type-scale));
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 600;
}

.sc-face-status.confirmed {
  background: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.sc-face-status.auto-tagged {
  background: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.sc-face-status.predicted {
  background: rgba(249, 115, 22, 0.3);
  color: #f97316;
}

.sc-face-status.unidentified {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.sc-face-actions-buttons {
  display: flex;
  gap: 8px;
}

.sc-face-actions-buttons .sc-action-btn.confirm {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
}

.sc-face-actions-buttons .sc-action-btn.confirm.active {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.sc-face-actions-buttons .sc-action-btn.different {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

.sc-face-actions-buttons .sc-action-btn.unknown {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
}

.sc-face-progress {
  font-size: calc(0.8rem * var(--type-scale));
  color: rgba(255, 255, 255, 0.7);
}

.sc-face-progress .progress-text {
  background: rgba(0, 0, 0, 0.2);
  padding: 4px 10px;
  border-radius: 10px;
}

/* UNIFIED ACTIONS ROW - Face info + action buttons (like FFA Curator) */

.sc-face-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
  border-radius: 8px 8px 0 0;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: 0 0.5rem;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.3);
}

.sc-face-info-row + .sc-unified-actions {
  border-radius: 0 0 8px 8px;
  margin-top: 0;
}

/* Person Tag info row styling (manual tags without detected faces) */

.sc-face-info-row.sc-person-tag-info {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}

/* Unified actions row uses FFA Curator styling */

.sc-unified-actions {
  margin: 0 0.5rem;
  border-radius: 8px;
}

.sc-unified-actions.ft-actions-row {
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.8) 0%, rgba(109, 40, 217, 0.8) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FFA MEDIA CURATOR STYLES
   Uses unified 7-action layout (same as Sandbox Curator via .sc-* classes)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Media Curator mode header adjustments */

.mc-header {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.mc-header .mc-spacer {
  flex: 1;
}

/* Media Curator now uses unified Sandbox Curator controls (.sc-* classes) */

/* No separate .mc-curator-actions styles needed */

/* ═══════════════════════════════════════════════════════════════════════════
   MEDIA CURATOR VIEW (Phase 2 - Fills App Panel)
   Replaces Browse Media with curator-first interface
   ═══════════════════════════════════════════════════════════════════════════ */

/* View container needs explicit height for Media Curator to fit within App Panel */

#view-media {
  height: calc(100vh - var(--nav-height));
  display: none;
  flex-direction: column;
  overflow: hidden;
  /* Override .main-content padding to fill App Panel exactly */
  margin: calc(-1 * var(--space-xl));
  width: calc(100% + 2 * var(--space-xl));
  padding: 0;
}

#view-media.active {
  display: flex;
}

/* About view needs same panel-fill as Media Curator */

#view-about,

#view-story-presentation {
  height: calc(100vh - var(--nav-height));
  display: none;
  overflow: hidden;
  /* Override .main-content padding to fill App Panel exactly */
  margin: calc(-1 * var(--space-xl));
  width: calc(100% + 2 * var(--space-xl));
  padding: 0;
}

#view-about.active,

#view-story-presentation.active {
  display: block;
}

/* Main container - fills the view */

.media-curator-view-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Critical for flex shrinking */
  background: var(--color-bg);
}

/* Loading state */

.mcv-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: var(--color-text-secondary, #6b7280);
}

.mcv-loading p {
  margin: 0;
  font-size: calc(0.875rem * var(--type-scale));
}

/* Empty state - no profile selected */

.mcv-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 2rem;
  gap: 1.5rem;
}

.mcv-empty-icon {
  font-size: calc(4rem * var(--type-scale));
  opacity: 0.3;
}

.mcv-empty-title {
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text, #374151);
  margin: 0;
}

.mcv-empty-subtitle {
  font-size: calc(1rem * var(--type-scale));
  color: var(--color-text-secondary, #6b7280);
  max-width: 400px;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* Profile dropdown styles removed - now uses global Media Focus control */

.mcv-browse-btn {
  padding: 0.75rem 1.5rem;
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: 500;
  color: var(--color-primary, #3b82f6);
  background: white;
  border: 2px solid var(--color-primary, #3b82f6);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.mcv-browse-btn:hover {
  background: var(--color-primary, #3b82f6);
  color: white;
}

/* Curator content wrapper - when curator is active */

.mcv-curator-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Critical for flex shrinking */
}

/* Embedded curator mode - no modal overlay positioning */

.mcv-embedded {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  flex: 1;
  min-height: 0; /* Critical for flex shrinking */
  z-index: auto;
  display: flex;
  flex-direction: column;
}

/* Header actions removed - profile switching now uses global Media Focus control */

/* Mobile responsive */

@media (max-width: 640px) {
  .mcv-empty-state {
    padding: 1rem;
  }

  .mcv-empty-icon {
    font-size: calc(3rem * var(--type-scale));
  }

  .mcv-empty-title {
    font-size: calc(1.25rem * var(--type-scale));
  }
}

/* Mobile responsive for face actions */

@media (max-width: 640px) {
  .sc-face-actions-row {
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
  }

  .sc-face-current-info {
    justify-content: center;
    text-align: center;
  }

  .sc-face-actions-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .sc-face-actions-buttons .sc-action-btn {
    padding: 8px 12px;
    font-size: calc(0.85rem * var(--type-scale));
  }
}

/* KEYBOARD SHORTCUTS PANEL */

.sc-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 8px 8px;
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-light, #9ca3af);
  flex-shrink: 0;
  margin: 0 0.5rem 0.5rem;
}

.sc-hints kbd {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-family: monospace;
  font-size: calc(0.7rem * var(--type-scale));
  margin: 0 2px;
}

/* LOADING STATE */

.sc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 1rem;
}

.sc-loading .spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: scSpin 1s linear infinite;
}

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

/* EMPTY STATE */

.sc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 2rem;
}

.sc-empty-icon {
  font-size: calc(4rem * var(--type-scale));
  margin-bottom: 1rem;
  opacity: 0.5;
}

.sc-empty h3 {
  color: var(--color-text, #f0f0f0);
  margin: 0 0 0.5rem;
}

.sc-empty p {
  color: var(--color-text-light, #9ca3af);
  margin: 0;
}

/* MOBILE RESPONSIVE */

@media (max-width: 768px) {
  .sc-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  .sc-stats {
    width: 100%;
    justify-content: center;
  }

  .sc-main-content {
    flex-direction: column;
  }

  .sc-main-content.has-sidebar {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }

  .sc-face-sidebar {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 120px;
  }

  .sc-face-crop {
    min-width: 80px;
    max-width: 80px;
  }

  .sc-thumbnail-strip {
    margin: 0;
    border-radius: 0;
  }

  .sc-actions-row {
    margin: 0;
    border-radius: 0;
    gap: 4px;
    padding: 8px;
  }

  .sc-action-btn {
    padding: 8px 12px;
    font-size: calc(0.8rem * var(--type-scale));
  }

  .sc-action-btn .shortcut {
    display: none;
  }

  .sc-hints {
    margin: 0;
    border-radius: 0;
    font-size: calc(0.65rem * var(--type-scale));
    gap: 0.5rem;
    padding: 6px;
  }
}

/* =============================================================================
   SANDBOX CURATOR - MULTI-MEDIA ENHANCEMENTS
   Video player, document viewer, person tags panel, delete buttons
   ============================================================================= */

/* DELETE BUTTON ON THUMBNAILS */

.ft-thumb-delete {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: calc(14px * var(--type-scale));
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ft-thumb:hover .ft-thumb-delete {
  opacity: 1;
}

.ft-thumb-delete:hover {
  background: rgba(239, 68, 68, 0.9);
}

/* PERSON TAGS PANEL (for video/document mode) */

.curator-person-tags-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
  padding: 8px;
}

.curator-tags-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
  border-radius: 8px;
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text);
}

.curator-tags-title {
  font-weight: 600;
  color: var(--color-text-light);
}

.curator-tags-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.curator-person-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  transition: background-color 0.2s;
}

.curator-person-tag:hover {
  background: rgba(34, 197, 94, 0.25);
}

.curator-tag-name {
  font-weight: 500;
  color: var(--color-text);
}

.curator-tag-remove {
  background: transparent;
  border: none;
  color: rgba(239, 68, 68, 0.7);
  font-size: calc(18px * var(--type-scale));
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.curator-tag-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.curator-no-tags {
  text-align: center;
  color: var(--color-text-light);
  font-style: italic;
  padding: 16px;
  opacity: 0.7;
}

.curator-tags-loading {
  text-align: center;
  color: var(--color-text-light);
  padding: 16px;
}

/* TAG PERSON WIDGET (blinking animation) */

.curator-tag-person-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  margin-top: auto;
  background: rgba(102, 126, 234, 0.1);
  border: 2px dashed rgba(102, 126, 234, 0.4);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  animation: tag-blink 1.5s ease-in-out infinite;
}

.curator-tag-person-widget:hover {
  background: rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.7);
  animation: none;
}

@keyframes tag-blink {
  0%, 100% {
    opacity: 0.6;
    border-color: rgba(102, 126, 234, 0.3);
  }
  50% {
    opacity: 1;
    border-color: rgba(102, 126, 234, 0.7);
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.3);
  }
}

.curator-widget-icon {
  font-size: calc(24px * var(--type-scale));
}

.curator-widget-text {
  font-weight: 600;
  color: var(--color-text);
}

.curator-widget-hint {
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-light);
}

/* VIRTUAL FACETAG WIDGET (Issue 3: for documents/videos/audio in sandbox) */

.curator-virtual-facetag-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
  border: 2px solid rgba(102, 126, 234, 0.5);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.curator-virtual-facetag-widget:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.5), rgba(118, 75, 162, 0.5));
  border-color: rgba(102, 126, 234, 0.8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.curator-virtual-facetag-widget .curator-widget-icon {
  font-size: calc(20px * var(--type-scale));
}

.curator-virtual-facetag-widget .curator-widget-text {
  font-weight: 600;
  color: var(--color-text);
}

/* SANDBOX PERSON TAG (styled with confidence) */

.curator-sandbox-person-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  transition: background-color 0.2s;
}

.curator-sandbox-person-tag:hover {
  background: rgba(34, 197, 94, 0.25);
  cursor: pointer;
}

.curator-sandbox-person-tag.focused {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

.curator-sandbox-person-tag.focused .curator-tag-confidence {
  background: rgba(139, 92, 246, 0.2);
  color: rgba(139, 92, 246, 0.95);
}

.curator-sandbox-person-tag .curator-tag-name {
  flex: 1;
  font-weight: 500;
  color: var(--color-text);
}

.curator-tag-confidence {
  font-size: calc(0.8rem * var(--type-scale));
  color: rgba(34, 197, 94, 0.9);
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 4px;
}

.curator-sandbox-hint {
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-light);
  text-align: center;
  margin-top: 12px;
  padding: 8px;
  opacity: 0.8;
  line-height: 1.4;
}

/* METADATA EDITING PANEL (Media Profile Mode) */

.curator-metadata-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  gap: 8px;
}

.curator-metadata-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.2));
  border-radius: 8px;
  font-size: calc(0.85rem * var(--type-scale));
}

.curator-metadata-icon {
  font-size: calc(1.1rem * var(--type-scale));
}

.curator-metadata-title {
  font-weight: 600;
  color: var(--color-text);
}

.curator-metadata-filename {
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--color-text-light);
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.8;
}

.curator-metadata-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.curator-metadata-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.curator-metadata-field label {
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.curator-metadata-field input,

.curator-metadata-field textarea {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
  font-size: calc(0.9rem * var(--type-scale));
  transition: border-color 0.2s, background-color 0.2s;
}

.curator-metadata-field input:focus,

.curator-metadata-field textarea:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.curator-metadata-field textarea {
  resize: vertical;
  min-height: 60px;
}

.curator-metadata-field input::placeholder,

.curator-metadata-field textarea::placeholder {
  color: var(--color-text-light);
  opacity: 0.5;
}

.curator-metadata-save-btn {
  margin-top: auto;
  padding: 12px 16px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  font-size: calc(0.9rem * var(--type-scale));
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.curator-metadata-save-btn:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.curator-metadata-save-btn:active {
  transform: translateY(0);
}

/* SIMPLE PERSON PICKER DROPDOWN (fallback) */

.curator-person-picker-dropdown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  border-radius: 8px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.curator-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 8px 8px 0 0;
  color: white;
  font-weight: 600;
}

.curator-picker-header button {
  background: transparent;
  border: none;
  color: white;
  font-size: calc(20px * var(--type-scale));
  cursor: pointer;
  padding: 4px 8px;
}

.curator-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.curator-picker-option {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
  color: var(--color-text);
}

.curator-picker-option:hover {
  background: rgba(102, 126, 234, 0.2);
}

/* VIDEO PLAYER */

.curator-video-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.curator-video-container video {
  flex: 1;
  width: 100%;
  max-height: calc(100% - 80px);
  object-fit: contain;
  background: #000;
}

.curator-video-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(20, 20, 20, 0.95));
}

.curator-video-btn {
  padding: 8px 16px;
  background: rgba(102, 126, 234, 0.3);
  border: 1px solid rgba(102, 126, 234, 0.5);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.curator-video-btn:hover {
  background: rgba(102, 126, 234, 0.5);
}

.curator-play-btn {
  min-width: 50px;
}

.curator-video-seek {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  cursor: pointer;
  -webkit-appearance: none;
}

.curator-video-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
}

.curator-video-time {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-light);
  min-width: 100px;
  text-align: right;
  font-family: monospace;
}

.curator-video-title {
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-text-light);
  font-size: calc(0.85rem * var(--type-scale));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AUDIO PLAYER (Issue 6) */

.curator-audio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 8px;
  padding: 24px;
  gap: 16px;
}

.curator-audio-visualization {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.curator-audio-icon {
  font-size: calc(64px * var(--type-scale));
  animation: audio-pulse 2s ease-in-out infinite;
}

@keyframes audio-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

.curator-audio-waveform {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
}

.curator-audio-bar {
  width: 6px;
  height: 15px;
  background: rgba(102, 126, 234, 0.5);
  border-radius: 3px;
  transition: all 0.3s;
}

.curator-audio-waveform.playing .curator-audio-bar {
  animation: audio-wave 0.8s ease-in-out infinite;
  background: #667eea;
}

.curator-audio-waveform.playing .curator-audio-bar:nth-child(1) { animation-delay: 0s; }

.curator-audio-waveform.playing .curator-audio-bar:nth-child(2) { animation-delay: 0.1s; }

.curator-audio-waveform.playing .curator-audio-bar:nth-child(3) { animation-delay: 0.2s; }

.curator-audio-waveform.playing .curator-audio-bar:nth-child(4) { animation-delay: 0.3s; }

.curator-audio-waveform.playing .curator-audio-bar:nth-child(5) { animation-delay: 0.2s; }

.curator-audio-waveform.playing .curator-audio-bar:nth-child(6) { animation-delay: 0.1s; }

.curator-audio-waveform.playing .curator-audio-bar:nth-child(7) { animation-delay: 0s; }

@keyframes audio-wave {
  0%, 100% { height: 15px; }
  50% { height: 35px; }
}

.curator-audio-player {
  width: 100%;
  max-width: 400px;
  height: 50px;
  border-radius: 25px;
  filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.3));
}

.curator-audio-title {
  color: var(--color-text-light);
  font-size: calc(1rem * var(--type-scale));
  font-weight: 500;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.curator-audio-description {
  color: var(--color-text-muted);
  font-size: calc(0.85rem * var(--type-scale));
  text-align: center;
  max-width: 100%;
  line-height: 1.4;
  opacity: 0.8;
}

/* DOCUMENT VIEWER */

.curator-document-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--color-bg-tertiary);
  border-radius: 8px;
  overflow: hidden;
}

.curator-doc-image {
  flex: 1;
  width: 100%;
  object-fit: contain;
  max-height: calc(100% - 40px);
}

.curator-pdf-container {
  background: #525659;
}

.curator-pdf-viewer {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: 16px;
}

.curator-pdf-viewer canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.curator-document-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.7);
}

.curator-doc-btn {
  padding: 6px 14px;
  background: rgba(102, 126, 234, 0.3);
  border: 1px solid rgba(102, 126, 234, 0.5);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.curator-doc-btn:hover {
  background: rgba(102, 126, 234, 0.5);
}

.curator-page-info {
  color: var(--color-text-light);
  font-size: calc(0.9rem * var(--type-scale));
}

.curator-document-title {
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-text-light);
  font-size: calc(0.85rem * var(--type-scale));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TEXT DOCUMENT */

.curator-text-container {
  background: var(--color-bg);
}

.curator-text-content {
  flex: 1;
  overflow: auto;
  padding: 16px;
  margin: 0;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text);
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  margin: 16px;
}

/* GENERIC DOCUMENT (non-PDF, non-text) */

.curator-generic-doc {
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
}

.curator-doc-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.curator-doc-thumb {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.curator-doc-type {
  padding: 4px 12px;
  background: rgba(102, 126, 234, 0.2);
  border-radius: 4px;
  font-weight: 600;
  color: var(--color-text-light);
}

.curator-document-actions {
  display: flex;
  gap: 12px;
}

.curator-download-btn {
  padding: 12px 24px;
  font-size: calc(1rem * var(--type-scale));
}

/* PDF FALLBACK/ERROR */

.curator-pdf-fallback,

.curator-pdf-error {
  text-align: center;
  padding: 32px;
  color: var(--color-text-light);
}

.curator-pdf-fallback p,

.curator-pdf-error p {
  margin-bottom: 16px;
}

/* MOBILE RESPONSIVE - Multi-media */

@media (max-width: 768px) {
  .curator-video-controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .curator-video-seek {
    width: 100%;
    order: 10;
  }

  .curator-video-time {
    width: 100%;
    text-align: center;
    order: 11;
  }

  .curator-document-nav {
    flex-wrap: wrap;
  }

  .curator-person-tags-panel {
    padding: 4px;
  }

  .curator-tag-person-widget {
    padding: 12px;
  }
}

/* ============================================================================
   ADMIN VIEW - Redesigned (v13.2.0)
   Clean tabbed interface for administration
   ============================================================================ */

/* Admin Header */

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.admin-header-content h2 {
  margin: 0 0 0.25rem 0;
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 600;
}

.admin-header-content p {
  margin: 0;
  opacity: 0.9;
  font-size: calc(0.875rem * var(--type-scale));
}

.admin-quick-stats {
  display: flex;
  gap: 2rem;
}

.admin-stat {
  text-align: center;
}

.admin-stat-value {
  display: block;
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
}

.admin-stat-label {
  display: block;
  font-size: calc(0.75rem * var(--type-scale));
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Admin Tabs */

.admin-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0 0.5rem;
  border-bottom: 2px solid var(--ffvr-rule, #e5e7eb);
  margin-bottom: 1.5rem;
}

.admin-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 500;
  color: var(--ffvr-ink-muted, #6b7280);
  transition: all 0.2s;
  border-radius: 8px 8px 0 0;
}

.admin-tab:hover {
  color: var(--ffvr-ink, #374151);
  background: rgba(0, 0, 0, 0.02);
}

.admin-tab.active {
  color: var(--ffvr-accent, #667eea);
  border-bottom-color: var(--ffvr-accent, #667eea);
  background: rgba(102, 126, 234, 0.05);
}

.admin-tab-icon {
  font-size: calc(1.1rem * var(--type-scale));
}

/* Admin Tab Content */

.admin-tab-content {
  min-height: 400px;
}

.admin-panel {
  display: none;
}

.admin-panel.active {
  display: block;
}

/* Admin Section Grid */

.admin-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

/* Admin section heading (S8 IA: Tools & Settings tab subdivides into Tools / System Settings groups) */
.admin-section-heading {
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ffvr-ink-muted, var(--color-text-light, #6b7280));
  margin: 1.5rem 0 0.75rem 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ffvr-rule, var(--color-border, #e5e7eb));
}
.admin-section-heading:first-child {
  margin-top: 0;
}

/* Admin Cards */

.admin-card {
  background: var(--ffvr-surface-raised, white);
  border-radius: 12px;
  border: 1px solid var(--ffvr-rule, #e5e7eb);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.admin-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.admin-card-wide {
  grid-column: span 2;
}

.admin-card-featured {
  border: 2px solid #667eea;
}

.admin-card-dark {
  background: #0f0f1a;
  border-color: #1f1f2e;
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ffvr-rule, #e5e7eb);
  background: var(--ffvr-surface, #f9fafb);
}

.admin-card-dark .admin-card-header {
  background: #1a1a2e;
  border-bottom-color: #2a2a3e;
}

.admin-card-header h3 {
  margin: 0;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  color: var(--ffvr-ink, #374151);
}

.admin-card-dark .admin-card-header h3 {
  color: #e5e7eb;
}

.admin-card-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  background: #e5e7eb;
  color: #374151;
}

.admin-card-badge.oracle {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.admin-card-badge.watcher {
  background: #10b981;
  color: white;
  animation: pulse-glow 2s ease-in-out infinite;
}

.admin-card-badge.success {
  background: #dcfce7;
  color: #166534;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.admin-card-body {
  padding: 1.25rem;
}

.admin-card-body p {
  color: var(--ffvr-ink-muted, #6b7280);
  font-size: calc(0.875rem * var(--type-scale));
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.admin-card-desc {
  color: var(--ffvr-ink-muted, #6b7280);
  font-size: calc(0.875rem * var(--type-scale));
  margin: 0 0 1rem 0;
}

.admin-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Oracle Quick Stats */

.oracle-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--ffvr-surface, linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%));
  border-radius: 8px;
}

.oracle-stat {
  text-align: center;
}

.oracle-stat-value {
  display: block;
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 700;
  color: var(--ffvr-ink, #374151);
}

.oracle-stat-health {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
}

.oracle-stat-label {
  display: block;
  font-size: calc(0.7rem * var(--type-scale));
  color: var(--ffvr-ink-muted, #6b7280);
  text-transform: uppercase;
  margin-top: 0.25rem;
}

/* Watcher Body in Admin */

.watcher-body {
  background: #0f0f1a;
  color: #e5e7eb;
}

.watcher-status {
  padding: 0.75rem;
  background: #1a1a2e;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.watcher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.watcher-section h4 {
  font-size: calc(0.75rem * var(--type-scale));
  color: #9ca3af;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
}

.watcher-section > div {
  font-size: calc(0.875rem * var(--type-scale));
}

.btn-watcher {
  background: #667eea !important;
  color: white !important;
  border: none !important;
}

.btn-watcher-secondary {
  background: #374151 !important;
  color: white !important;
  border: none !important;
}

/* Admin Info List */

.admin-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-info-row {
  display: flex;
  justify-content: space-between;
  font-size: calc(0.875rem * var(--type-scale));
}

.admin-info-label {
  color: var(--ffvr-ink-muted, #6b7280);
}

.admin-info-value {
  font-weight: 500;
  color: var(--ffvr-ink, #374151);
}

/* AI Settings Table */

.ai-settings-table {
  margin-bottom: 1rem;
}

.ai-settings-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.875rem * var(--type-scale));
}

.ai-settings-table th {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 2px solid var(--ffvr-rule, #e5e7eb);
  color: var(--ffvr-ink, #374151);
}

.ai-settings-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--ffvr-rule, #e5e7eb);
}

.ai-settings-table .loading-row {
  text-align: center;
  color: var(--ffvr-ink-muted, #6b7280);
}

.save-status {
  font-size: calc(0.875rem * var(--type-scale));
  color: var(--ffvr-ink-muted, #6b7280);
}

/* Activity Logs Container */

.activity-logs-container {
  max-height: 400px;
  overflow-y: auto;
}

/* Family Activity Log */

.family-activity-container {
  max-height: 600px;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.family-activity-summaries {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.family-activity-member-card {
  background: linear-gradient(135deg, #667eea15, #764ba215);
  border: 1px solid #667eea40;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  min-width: 180px;
  flex: 1;
}

.fam-card-name {
  font-weight: 600;
  color: var(--ffvr-ink, #374151);
  font-size: calc(0.95rem * var(--type-scale));
  margin-bottom: 0.35rem;
}

.fam-card-stats {
  display: flex;
  gap: 0.75rem;
  font-size: calc(0.75rem * var(--type-scale));
  color: var(--ffvr-ink-muted, #6b7280);
}

.fam-card-stats span {
  white-space: nowrap;
}

.family-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fam-feed-date {
  font-weight: 600;
  font-size: calc(0.8rem * var(--type-scale));
  color: var(--ffvr-accent, #667eea);
  padding: 0.75rem 0 0.25rem;
  border-bottom: 1px solid var(--ffvr-rule, #e5e7eb);
  margin-bottom: 0.25rem;
}

.fam-feed-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  font-size: calc(0.85rem * var(--type-scale));
}

.fam-feed-item:hover {
  background: var(--ffvr-surface, #f3f4f6);
}

.fam-feed-icon {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.fam-feed-name {
  font-weight: 600;
  color: var(--ffvr-ink, #374151);
  flex-shrink: 0;
  min-width: 60px;
}

.fam-feed-desc {
  color: var(--ffvr-ink-muted, #6b7280);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fam-feed-time {
  color: var(--ffvr-ink-faint, #9ca3af);
  font-size: calc(0.75rem * var(--type-scale));
  flex-shrink: 0;
}

.placeholder-text {
  color: var(--ffvr-ink-faint, #9ca3af);
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* ============================================================================
   THE PRODUCER CONSOLE — THE INTERIOR OF THE ADMIN ROOM
   authoring-admin-interior S1, 2026-08-12. Presentation only.

   The ninth and last Room of the fleet-wide interior program. Every other Room
   got its interior from `furnishing-vessel-interiors`; Administration never did,
   because furnishing it needs an administrator-tier render and no session had
   one. S0 obtained that render at v1.0.269 and measured the Room; this section
   is what it asked for.

   ── WHY IT LIVES HERE AND NOT IN A room-*.css FILE ─────────────────────────
   The fleet idiom is one interior stylesheet per Room. A new file needs a new
   <link> in index.html, and index.html is NOT in this session's declared file
   scope. The admin components already live in this file (§ ADMIN VIEW, above)
   and already carry the `var(--ffvr-role, legacy)` base layer that
   `furnishing-vessel-interiors` wired in, so this is the same seam either way.

   ── THE SEAM, AND WHY EVERY SELECTOR CARRIES BOTH HALVES ───────────────────
   `html.ffvr-vessel` + `#view-admin`, together, on every rule below.

     · `#view-admin` is load-bearing because `.admin-header`, `.admin-card*`
       and `.admin-card-header h3` are SHARED WITH THE DASHBOARD ROOM
       (index.html:632 — `#view-family-dashboard` uses the same markup) and
       room-stewards-compass.css already authored the Dashboard's copy of that
       band behind its own seam, deliberately firewalled against Admin. Editing
       the bare shared class here would make this file a second owner of a live
       family-facing Room. Not one rule below names a bare shared class.

     · `html.ffvr-vessel` is load-bearing because it is exactly the admission
       state. The class is reflected onto <html> by ffa-flags.js for
       `ffa_room_vessel`, and `#view-admin`'s token block — activated in
       launcher-visual.css in this same commit — is what turns --ffvr-* from
       "unset, so every fallback applies" into the Room's steel palette. So the
       PAINT and the TOKENS are gated by one condition and land together. That
       is the mechanical answer to "tokens under foreign paint is the failure
       mode": here they cannot be separated, and with the flag off the Room is
       computed-style-identical to what it was before this section existed.

   ── WHAT THIS SECTION MAY NOT DO ───────────────────────────────────────────
   No handler, no route, no authorization boundary, no label, no truthful
   string, no `!important`, no geometry that moves a control, no second scroll
   owner. Colour, ground, edge and focus ring only. Single-step revert: delete
   this section and the two lines in launcher-visual.css.

   ── WITHHELD, AND SAID OUT LOUD ────────────────────────────────────────────
     · The four invite-modal `#374151` sites (admin.js :529 :655 :718 :904)
       render into a different vessel over a light ground, where #374151 may be
       entirely correct. They were NOT swept by colour value; they are left as
       they are, and measuring them where they render is owed work.
     · `.btn-watcher` / `.btn-watcher-secondary` carry `!important`. They cannot
       be re-dressed without `!important`, which this section forbids, so they
       keep their own dark chrome — which is legible on this plane — and are
       reported rather than forced.
     · `.admin-card-featured` and `.admin-card-dark` appear ZERO times in the
       Room's static markup. Nothing here paints a component this session could
       not show was in the Room.
     · `.admin-card-badge.success` (#dcfce7 on #166534) is a self-contained
       semantic pair that carries meaning, not house style. Left alone.
   ============================================================================ */

/* ── The classes admin.js now emits instead of inline styles ───────────────
   NOT vessel-gated, and that is the point: each carries the exact value its
   inline predecessor carried as the fallback, so with the vessel off the Room
   renders as it did before the markup changed. An inline style is the one
   thing no token substitution can reach — moving these six declarations into
   the stylesheet is what made the last two in-Room #374151 components
   reachable at all. Handler, label and the `.ai-category-select` hook that
   saveAICategorySettings() queries are untouched. */

/* ⚠️ THE TABLE CLASSES ARE SCOPED UNDER `.ai-settings-table` AND THAT IS NOT
   TIDINESS — IT IS THE WHOLE CORRECTNESS OF THE EXTRACTION. An inline style
   beats every stylesheet rule; a class does not. `.ai-settings-table td` is
   (0,1,1) and already declares `padding: 0.75rem 0.5rem`, so a bare
   `.ai-cat-control` at (0,1,0) LOSES the padding the inline style used to win —
   measured, not reasoned: the first cut of this section moved the control cell
   from 8px to 12px and the error cell from 16px to 8px/12px. Scoping lifts
   these to (0,2,0), which is what restores the inline's authority. */
.ai-settings-table .ai-cat-row {
  border-bottom: 1px solid var(--ffvr-rule, #e5e7eb);
}

.ai-settings-table .ai-cat-name {
  padding: 0.75rem 0.5rem;
  color: var(--ffvr-ink, #374151);
}

.ai-cat-nondefault {
  font-size: 0.7rem;
  color: #f59e0b;
  margin-left: 4px;
}

.ai-settings-table .ai-cat-control {
  padding: 0.5rem;
}

.ai-settings-table .ai-cat-error {
  padding: 1rem;
  color: var(--ffvr-danger, #ef4444);
  text-align: center;
}

.ai-category-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ffvr-rule, #d1d5db);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--ffvr-surface-raised, white);
  cursor: pointer;
  min-width: 100px;
}

/* Scoped to its host container for the same reason the table classes are: it
   is emitted only into `#familyActivityLog.family-activity-container`, which
   sits inside `#view-admin` — but `.admin-*` markup is SHARED with the
   Dashboard Room, so an unscoped class here is a rule that could reach a live
   family-facing surface the day someone reuses the name. Structural isolation,
   not a fact about who happens to call it today. */
.family-activity-container .fam-feed-heading {
  margin: 1.5rem 0 0.75rem;
  color: var(--ffvr-ink, #374151);
}

/* ── The band ──────────────────────────────────────────────────────────────
   The single most foreign element in the Room: a 135deg #667eea→#764ba2
   gradient with white ink and a 12px radius — a separate product's masthead
   floating inside a steel console.

   ⚠️ THE PLAN SAID THIS BAND WAS ALREADY CHROMED AND MUST NOT BE PAINTED.
   It is not. S0 measured `#view-admin .admin-header` at v1.0.269 carrying the
   class `admin-header` ONLY, with the generic indigo gradient computed, and
   found ZERO `[class*="chromed"]` elements anywhere in the `#view-admin`
   subtree while the same selector found seven in other Rooms — so the zero is
   a real absence, not a selector that never fires.

   But the overlay's design still NAMES this element: `.admin-header` is entry
   2 of HEADER_SELECTORS in launcher-visual-overlay.js, and the manifest gives
   admin a `modalChrome.header.surface`. So the chrome layer is the band's
   designated owner even though it is not reaching it today. `:not(.ffvl-chromed-header)`
   is how both truths hold at once: this rule dresses the band while the band
   is undressed, and VACATES the instant the overlay stamps its class. A
   fallback that stands down on contact is not a second owner.

   The gradient is rebuilt from the Room's OWN admitted tokens rather than from
   a copy of the manifest's header gradient — copying that value would be
   second-ownership by duplication, and it is the value S9 and the plan each
   recorded once, differently, and each time wrong. */
html.ffvr-vessel #view-admin .admin-header:not(.ffvl-chromed-header) {
  background: linear-gradient(135deg,
              var(--ffvr-surface-raised, #667eea) 0%,
              var(--ffvr-surface, #764ba2) 100%);
  color: var(--ffvr-ink, #ffffff);
  border-radius: 0;
  border-bottom: 1px solid var(--ffvr-rule, transparent);
}

/* The plane step between surface-raised and surface is 1.23:1 by the token
   deriver's own audit — a band, not a wall. The coral rule above is what
   carries the separation; the subtitle's 0.9 opacity is replaced by an opaque
   muted ink for the same reason room-stewards-compass.css replaced it: an
   opacity that lowers a text role's contrast is not a hierarchy device. */
html.ffvr-vessel #view-admin .admin-header:not(.ffvl-chromed-header) .admin-header-content p,
html.ffvr-vessel #view-admin .admin-header:not(.ffvl-chromed-header) .admin-stat-label {
  color: var(--ffvr-ink-muted, #ffffff);
  opacity: 1;
}

/* ── The tab rail ──────────────────────────────────────────────────────────
   The colours were already token-wired; the two GROUNDS were not, and both
   were authored for a white plane: a 2%-black hover is invisible on steel and
   a 5% indigo active tint is a colour from no part of this vessel. */
html.ffvr-vessel #view-admin .admin-tab:hover {
  background: rgba(255, 255, 255, 0.06);
}

html.ffvr-vessel #view-admin .admin-tab.active {
  background: color-mix(in srgb, var(--ffvr-accent, #55B8FF) 12%, transparent);
}

/* ── The chips ─────────────────────────────────────────────────────────────
   `.admin-card-badge` was the one component in the Room whose ink AND ground
   were both hard-coded (#374151 on #e5e7eb) — a light-grey chip that survives
   on any plane but announces the wrong house. Sunken black with muted ink
   measures 11.0:1 by the deriver's palette. The oracle variant drops the
   indigo gradient for the Room's own azure, whose paired on-accent ink the
   deriver audits at 9.69:1. */
html.ffvr-vessel #view-admin .admin-card-badge {
  background: var(--ffvr-surface-sunken, #e5e7eb);
  color: var(--ffvr-ink-muted, #374151);
}

html.ffvr-vessel #view-admin .admin-card-badge.oracle {
  background: var(--ffvr-accent, #667eea);
  color: var(--ffvr-on-accent, #ffffff);
}

/* ── The member cards ──────────────────────────────────────────────────────
   An indigo wash (#667eea15 → #764ba215) over an indigo hairline. Both become
   the Room's raised plane and its own rule at the same weight. */
html.ffvr-vessel #view-admin .family-activity-member-card {
  background: var(--ffvr-surface-raised, transparent);
  background-image: none;
  border-color: color-mix(in srgb, var(--ffvr-rule, #667eea) 40%, transparent);
}

/* ── The buttons ───────────────────────────────────────────────────────────
   S0 measured 26 `button.btn` in the Room with NO background image — `.btn`
   sets padding, radius and type but never a ground, so a button carrying no
   colour modifier renders in the user agent's own light system chrome. On a
   steel plane that is a hole. `.btn-primary`'s indigo gradient is the same
   masthead colour as the band, seventeen more times.

   `:where()` keeps these at the specificity of the seam alone, so a modifier
   that arrives later still wins without anyone having to unpick a selector. */
html.ffvr-vessel #view-admin :where(.btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-watcher):not(.btn-watcher-secondary)) {
  background: var(--ffvr-surface-raised, transparent);
  color: var(--ffvr-ink, inherit);
  /* PAINTED, not laid out. `border: 1px` moved the furniture: base `.btn` is
     `border: none`, so the shorthand took border-top/bottom-width 0px → 1px and
     failed verify-vessel's (e) invariant — the dress may change colour only.
     `box-shadow: inset` draws the same 1px edge at zero layout cost, and is the
     fleet's own idiom for it (`.ffvl-chrome__rim`). The shorthand shipped in
     20564802d2 alongside the interior and survived certification because that
     pass never ran the (e) check. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ffvr-rule, #5A687E) 45%, transparent);
}

html.ffvr-vessel #view-admin :where(.btn-primary) {
  background: var(--ffvr-accent, #55B8FF);
  background-image: none;
  color: var(--ffvr-on-accent, #000000);
}

html.ffvr-vessel #view-admin :where(.btn-primary):hover {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--ffvr-accent, #55B8FF) 86%, #FFFFFF 14%);
}

/* The select the AI-settings table renders: its ground is token-wired above,
   but a `<select>` does not inherit `color`, so on a dark ground it would keep
   the user agent's near-black text. Set only inside the vessel, where the
   ground is known to be dark. */
html.ffvr-vessel #view-admin .ai-category-select {
  color: var(--ffvr-ink, inherit);
}

/* ── Focus, which the Room never had ───────────────────────────────────────
   Every interior sheet the fleet shipped carries a `:focus-visible` pass; the
   admin components carry none anywhere in the tree. A white ring on a black
   inner outline reads on every ground this Room has. */
html.ffvr-vessel #view-admin .admin-tab:focus-visible,
html.ffvr-vessel #view-admin .btn:focus-visible,
html.ffvr-vessel #view-admin .ai-category-select:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #000000;
}

/* ── High Contrast ─────────────────────────────────────────────────────────
   forced-colors overrides background-COLOR but not background-IMAGE, so the
   two gradients above would survive under system-coloured text that was never
   measured against them. Same stand-down room-windows.css writes for the fleet
   header and the manifest band. */
@media (forced-colors: active) {
  html.ffvr-vessel #view-admin .admin-header:not(.ffvl-chromed-header),
  html.ffvr-vessel #view-admin .family-activity-member-card,
  html.ffvr-vessel #view-admin :where(.btn-primary) {
    background-image: none;
    background-color: Canvas;
    color: CanvasText;
  }
}

/* ========================================================================
 * Family Edits Review Queue (Immediate-Impact-Audit-Later)
 * patient-consolidating-archipelago S6 (2026-04-28)
 * ======================================================================== */
.family-edits-container {
  max-height: 600px;
  overflow-y: auto;
}
.family-edits-feed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.family-edit-row {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.family-edit-row.family-edit-rolled {
  background: #f3f4f6;
  opacity: 0.7;
}
.family-edit-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: calc(0.8rem * var(--type-scale));
  color: #6b7280;
  flex-wrap: wrap;
}
.family-edit-surface {
  font-weight: 600;
  color: #4f46e5;
}
.family-edit-contributor {
  font-weight: 500;
  color: #374151;
}
.family-edit-rolled-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
}
.family-edit-artifact {
  font-weight: 500;
  color: #374151;
  font-size: calc(0.95rem * var(--type-scale));
}
.family-edit-summary {
  color: #6b7280;
  font-size: calc(0.85rem * var(--type-scale));
}
.family-edit-comment {
  font-style: italic;
  color: #4b5563;
  background: #fff;
  border-left: 3px solid #c7d2fe;
  padding: 0.4rem 0.75rem;
  font-size: calc(0.85rem * var(--type-scale));
  margin: 0.25rem 0;
}
.family-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* securing-family-launch S4 (OPS-005 / P0-3) — an edit can now leave the queue
   by being APPROVED, not only by being undone, and the evidence for that
   decision rides with the row instead of living in the artifact. */
.family-edit-row.family-edit-approved {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.family-edit-approved-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
}
/* Collapsed by default: 43 members' edits expanded at once is a wall, not a
   review pane. */
.family-edit-diff {
  font-size: calc(0.8rem * var(--type-scale));
}
.family-edit-diff > summary {
  cursor: pointer;
  color: #4f46e5;
  font-weight: 600;
  padding: 0.15rem 0;
  user-select: none;
}
.family-edit-diff-pane {
  background: #fff;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  margin-top: 0.35rem;
  color: #374151;
  /* The snapshots are prose the family wrote. Wrap it and cap the height
     rather than letting one long description own the panel. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 14rem;
  overflow-y: auto;
}
.family-edit-diff-before { border-left: 3px solid #fecaca; }
.family-edit-diff-after  { border-left: 3px solid #bbf7d0; }
.family-edit-diff-label {
  display: block;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 0.15rem;
}
.family-edit-no-evidence {
  font-size: calc(0.78rem * var(--type-scale));
  color: #9ca3af;
  font-style: italic;
}

/* Public attribution rendering on family-edited artifacts (e.g., media descriptions) */
.family-edit-attribution {
  display: inline-block;
  font-size: calc(0.75rem * var(--type-scale));
  color: #9ca3af;
  font-style: italic;
  margin-top: 0.25rem;
}
.family-edit-attribution::before {
  content: "✏️ ";
  font-style: normal;
}

/* Provenance line in the unified media modal (streamlining-import-modal S3):
   "Added by {name} · {date} · via {channel}" — importer identity stamped by
   the intake spine, surfaced on both desktop UMI and mobile UMI (shared
   umRenderInfoBody renderer). */
.um-provenance-line {
  font-size: calc(0.8rem * var(--type-scale));
  color: #9ca3af;
  margin: 0.25rem 0 0;
}

/* Verification Log Tab Badge */

.admin-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #f59e0b;
  color: white;
  font-size: calc(0.65rem * var(--type-scale));
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
}

/* Verification Log Entries */

.verification-log-container {
  max-height: 600px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.vlog-entry {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s;
}

.vlog-entry.has-relationship {
  border-left: 3px solid #f59e0b;
}

.vlog-entry-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: #fafafa;
  user-select: none;
  -webkit-user-select: none;
}

.vlog-entry-header:active {
  background: #f3f4f6;
}

.vlog-entry-chevron {
  flex-shrink: 0;
  font-size: calc(0.75rem * var(--type-scale));
  color: #9ca3af;
  transition: transform 0.2s;
}

.vlog-entry.expanded .vlog-entry-chevron {
  transform: rotate(90deg);
}

.vlog-entry-name {
  font-weight: 600;
  font-size: calc(0.875rem * var(--type-scale));
  color: #374151;
  flex-shrink: 0;
}

.vlog-entry-preview {
  flex: 1;
  min-width: 0;
  font-size: calc(0.8rem * var(--type-scale));
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vlog-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.vlog-entry-time {
  font-size: calc(0.7rem * var(--type-scale));
  color: #9ca3af;
  white-space: nowrap;
}

.vlog-flag-relationship {
  font-size: calc(0.65rem * var(--type-scale));
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fef3c7;
  color: #92400e;
  white-space: nowrap;
}

.vlog-entry-detail {
  display: none;
  padding: 0 1rem 1rem;
  border-top: 1px solid #e5e7eb;
}

.vlog-entry.expanded .vlog-entry-detail {
  display: block;
}

.vlog-detail-section {
  margin-top: 0.75rem;
}

.vlog-detail-label {
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}

.vlog-detail-text {
  font-size: calc(0.85rem * var(--type-scale));
  color: #374151;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f9fafb;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.vlog-corrections-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vlog-corrections-list li {
  font-size: calc(0.8rem * var(--type-scale));
  padding: 0.35rem 0;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}

.vlog-corrections-list li:last-child {
  border-bottom: none;
}

.vlog-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #9ca3af;
}

.vlog-empty-icon {
  font-size: calc(2.5rem * var(--type-scale));
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

/* Admin Responsive */

@media (max-width: 768px) {
  .admin-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .admin-quick-stats {
    gap: 1rem;
  }

  .admin-tabs {
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }

  .admin-tab {
    white-space: nowrap;
    padding: 0.75rem 1rem;
    font-size: calc(0.85rem * var(--type-scale));
  }

  .admin-section-grid {
    grid-template-columns: 1fr;
  }

  .admin-card-wide {
    grid-column: span 1;
  }

  .oracle-quick-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .watcher-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   OVERNIGHT ACTIVITY PANEL
   Admin tab: nightly process monitoring + narrative progress
   ============================================================================ */

.overnight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ffvr-rule, #e5e7eb);
}

.overnight-header h3 {
  margin: 0;
  font-size: calc(1.1rem * var(--type-scale));
  font-weight: 600;
  color: var(--ffvr-ink, #1f2937);
}

.overnight-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.overnight-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.overnight-header-right select {
  color: var(--ffvr-ink, buttontext);
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--ffvr-rule, #d1d5db);
  border-radius: 6px;
  font-size: calc(0.8rem * var(--type-scale));
  background: var(--ffvr-surface-raised, white);
}

.overnight-status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 600;
}

.overnight-status-badge.status-success {
  background: #dcfce7;
  color: #166534;
}

.overnight-status-badge.status-failed {
  background: #fee2e2;
  color: #991b1b;
}

.overnight-status-badge.status-running {
  background: #dbeafe;
  color: #1e40af;
}

.overnight-status-badge.status-no-data {
  background: #f3f4f6;
  color: #6b7280;
}

/* Enhancement Pipeline sub-tabs */

.ep-subnav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--ffvr-rule, var(--color-border, #e5e7eb));
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.ep-subtab {
  background: none;
  border: none;
  padding: 0.6rem 1rem;
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 500;
  color: var(--ffvr-ink-muted, var(--color-text-light, #6b7280));
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s;
}
.ep-subtab:hover { color: var(--ffvr-accent, #3b82f6); }
.ep-subtab.active {
  color: var(--ffvr-accent, #3b82f6);
  border-bottom-color: var(--ffvr-accent, #3b82f6);
}
.ep-subpanel { display: none; }
.ep-subpanel.active { display: block; }

/* Admin top-level launcher row (S7 IA: persistent above tab nav) */
.admin-top-launcher {
  margin-bottom: 0.75rem;
}

/* Review tab subnav (S7 IA: 4 subtabs — Activity Logs / AI Dialogue / Problem Reports / Welcome Verification) */
.admin-review-subnav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--ffvr-rule, var(--color-border, #e5e7eb));
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.admin-review-subtab {
  background: none;
  border: none;
  padding: 0.6rem 1rem;
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 500;
  color: var(--ffvr-ink-muted, var(--color-text-light, #6b7280));
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s;
}
.admin-review-subtab:hover { color: var(--ffvr-accent, #3b82f6); }
.admin-review-subtab.active {
  color: var(--ffvr-accent, #3b82f6);
  border-bottom-color: var(--ffvr-accent, #3b82f6);
}
.admin-review-subpanel { display: none; }
.admin-review-subpanel.active { display: block; }

/* Cluster Lab (Lane 7-alt) */
.cluster-lab-throttle { margin: 12px 0; padding: 12px 14px; background: var(--ffvr-surface-raised, #f8fafc); border: 1px solid var(--ffvr-rule, #e2e8f0); border-radius: 8px; }
.cluster-lab-throttle-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: calc(13px * var(--type-scale)); }
.cluster-lab-throttle-row .cl-throttle-state { font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.cluster-lab-throttle-row .cl-throttle-state.on { background: #fee2e2; color: #b91c1c; }
.cluster-lab-throttle-row .cl-throttle-state.off { background: #dcfce7; color: #166534; }
.cluster-lab-throttle-row button { color: var(--ffvr-ink, buttontext); padding: 4px 12px; border: 1px solid var(--ffvr-rule, #cbd5e1); background: var(--ffvr-surface-raised, white); border-radius: 6px; cursor: pointer; font-size: calc(12px * var(--type-scale)); }
.cluster-lab-throttle-row button:hover { background: var(--ffvr-surface, #f1f5f9); }
.cluster-lab-actions { margin: 12px 0; padding: 12px 14px; background: var(--ffvr-surface-raised, #faf5ff); border: 1px solid var(--ffvr-rule, #e9d5ff); border-radius: 8px; }
.cluster-lab-cmd { display: block; margin-top: 6px; padding: 10px; background: #1e293b; color: #e2e8f0; border-radius: 6px; font: 11px/1.5 ui-monospace, monospace; white-space: pre-wrap; word-break: break-all; }
.cluster-lab-comparison, .cluster-lab-runs { margin-top: 16px; }
.cluster-lab-table { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--type-scale)); }
.cluster-lab-table th, .cluster-lab-table td { padding: 6px 8px; border-bottom: 1px solid var(--ffvr-rule, #e5e7eb); text-align: left; vertical-align: top; }
.cluster-lab-table th { background: var(--ffvr-surface, #f8fafc); font-weight: 600; color: var(--ffvr-ink-muted, #475569); }
.cl-empty { color: var(--ffvr-ink-faint, #94a3b8); font-style: italic; padding: 12px; text-align: center; }
.cl-model { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: calc(10px * var(--type-scale)); font-weight: 600; text-transform: uppercase; }
.cl-opus { background: #fef3c7; color: #92400e; }
.cl-sonnet { background: #dbeafe; color: #1e40af; }
.cl-haiku { background: #f3e8ff; color: #6b21a8; }

.ep-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ep-section-header h3 { margin: 0 0 0.25rem 0; }
.ep-subtitle {
  margin: 0;
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--ffvr-ink-muted, var(--color-text-light, #6b7280));
}

/* Roadmap */
.ep-next-up {
  background: var(--ffvr-surface, linear-gradient(135deg, #ede9fe, #ddd6fe));
  border-left: 4px solid #8b5cf6;
  border-radius: 8px;
  padding: 0.875rem 1.125rem;
  margin-bottom: 1rem;
}
.ep-next-up:empty { display: none; }
.ep-next-label {
  font-size: calc(0.7rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6d28d9;
  font-weight: 700;
}
.ep-next-name {
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  color: #1f2937;
  margin: 0.15rem 0;
}
.ep-next-meta {
  font-size: calc(0.8rem * var(--type-scale));
  color: #6b7280;
}
.ep-phase-header {
  margin: 1.25rem 0 0.5rem 0;
  font-size: calc(0.85rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.ep-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.75rem;
}
.ep-roadmap-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #d1d5db;
  border-radius: 8px;
  padding: 0.875rem 1rem;
}
.ep-roadmap-card.ep-status-active { border-left-color: #3b82f6; }
.ep-roadmap-card.ep-status-complete { border-left-color: #10b981; opacity: 0.7; }
.ep-roadmap-card.ep-status-blocked { border-left-color: #ef4444; }
.ep-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.ep-card-id {
  font-family: ui-monospace, monospace;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 700;
  color: #4b5563;
}
.ep-tag {
  font-size: calc(0.65rem * var(--type-scale));
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  letter-spacing: 0.04em;
}
.ep-priority-high { background: #fee2e2; color: #b91c1c; }
.ep-priority-medium { background: #fef3c7; color: #b45309; }
.ep-priority-low { background: #e5e7eb; color: #4b5563; }
.ep-tag-status { background: #dbeafe; color: #1e40af; }
.ep-tag-human { background: #fce7f3; color: #be185d; }
.ep-card-name {
  font-weight: 600;
  font-size: calc(0.95rem * var(--type-scale));
  color: #1f2937;
  margin-bottom: 0.2rem;
}
.ep-card-desc {
  font-size: calc(0.8rem * var(--type-scale));
  color: #6b7280;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.ep-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: calc(0.75rem * var(--type-scale));
  color: #6b7280;
}
.ep-tasks-done { color: #059669; font-weight: 600; }
.ep-deps {
  font-size: calc(0.7rem * var(--type-scale));
  color: #9ca3af;
  margin-top: 0.4rem;
  font-family: ui-monospace, monospace;
}

/* AI Utilization CFO */
.ep-cfo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.ep-cfo-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.875rem 1rem;
}
.ep-cfo-label {
  font-size: calc(0.7rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 600;
}
.ep-cfo-value {
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
  color: #1f2937;
  margin: 0.2rem 0;
}
.ep-cfo-sub {
  font-size: calc(0.75rem * var(--type-scale));
  color: #6b7280;
}
.ep-pool-section {
  margin-top: 1.25rem;
}
.ep-pool-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: calc(0.85rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}
.ep-pool {
  margin-bottom: 0.75rem;
}
.ep-pool-row {
  display: flex;
  justify-content: space-between;
  font-size: calc(0.85rem * var(--type-scale));
  margin-bottom: 0.25rem;
}
.ep-pool-label { font-weight: 500; color: #374151; }
.ep-pool-pct { color: #6b7280; font-variant-numeric: tabular-nums; }
.ep-pool-bar {
  height: 10px;
  background: #f3f4f6;
  border-radius: 5px;
  overflow: hidden;
}
.ep-pool-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s;
}
.ep-pool-fill.over { background: #ef4444 !important; }
.ep-pool-note {
  font-size: calc(0.75rem * var(--type-scale));
  color: #9ca3af;
  margin-top: 0.4rem;
  font-style: italic;
}

/* Documentation panel */
.docs-library-toggle-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.25rem;
  background: var(--ffvr-surface-raised, #f5f3ff);
  border: 1px solid var(--ffvr-rule, #ddd6fe);
  border-radius: 8px;
  width: fit-content;
}
.docs-library-toggle {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0.4rem 0.95rem;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  color: var(--ffvr-ink-muted, #6d28d9);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.docs-library-toggle:hover { background: var(--ffvr-surface, #ede9fe); }
.docs-library-toggle.active {
  background: var(--ffvr-accent, #4c1d95);
  color: var(--ffvr-on-accent, #ffffff);
  box-shadow: 0 1px 2px rgba(76, 29, 149, 0.25);
}
.docs-library-toggle.active:hover { background: var(--ffvr-accent, #4c1d95); }
.docs-library-toggle:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 1px;
}
.docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1rem;
  height: calc(100vh - 280px);
  min-height: 400px;
}
.docs-sidebar {
  background: var(--ffvr-surface, #f9fafb);
  border: 1px solid var(--ffvr-rule, #e5e7eb);
  border-radius: 8px;
  overflow-y: auto;
  padding: 0.5rem;
}
.docs-cat-list { display: flex; flex-direction: column; gap: 0.25rem; }
.docs-cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-size: calc(0.85rem * var(--type-scale));
  color: #374151;
  transition: all 0.15s;
}
.docs-cat-item:hover { background: #eef2ff; }
.docs-cat-item.active { background: #e0e7ff; color: #1e40af; font-weight: 600; }
.docs-cat-name { text-transform: capitalize; }
.docs-cat-count {
  font-size: calc(0.7rem * var(--type-scale));
  background: #e5e7eb;
  color: #4b5563;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  font-weight: 600;
}
.docs-content {
  background: var(--ffvr-surface-raised, white);
  border: 1px solid var(--ffvr-rule, #e5e7eb);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.docs-cat-header {
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ffvr-rule, #e5e7eb);
  text-transform: capitalize;
  color: var(--ffvr-ink, #1f2937);
}
.docs-section {
  padding: 1rem 0;
  border-bottom: 1px solid var(--ffvr-rule, #f3f4f6);
}
.docs-section.docs-section-child { padding-left: 1.5rem; border-left: 2px solid var(--ffvr-rule, #f3f4f6); }
.docs-section-title { margin: 0 0 0.4rem 0; color: var(--ffvr-ink, #1f2937); font-size: calc(1.05rem * var(--type-scale)); }
.docs-section-cat {
  font-size: calc(0.7rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ffvr-ink-muted, #6b7280);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.docs-section-version {
  font-size: calc(0.7rem * var(--type-scale));
  color: var(--ffvr-ink-faint, #9ca3af);
  margin-bottom: 0.4rem;
}
.docs-section-body { font-size: calc(0.875rem * var(--type-scale)); line-height: 1.55; color: var(--ffvr-ink, #374151); }
.docs-section-body p { margin: 0.5rem 0; }

/* PDF Library — sidebar items grouped by category */
.docs-cat-group { margin-bottom: 0.75rem; }
.docs-cat-group .docs-cat-header {
  font-size: calc(0.7rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ffvr-accent, #6d28d9);
  font-weight: 700;
  padding: 0.5rem 0.75rem 0.25rem;
  border: none;
  margin: 0;
}
.docs-doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0.45rem 0.75rem;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-size: calc(0.82rem * var(--type-scale));
  color: var(--ffvr-ink, #374151);
  transition: all 0.15s;
  gap: 0.5rem;
}
.docs-doc-item:hover { background: var(--ffvr-accent, #ede9fe); color: var(--ffvr-on-accent, #4c1d95); }
.docs-doc-item.active { background: var(--ffvr-accent, #ddd6fe); color: var(--ffvr-on-accent, #4c1d95); font-weight: 600; }
.docs-doc-title { flex: 1; line-height: 1.3; }
.docs-doc-size {
  font-size: calc(0.65rem * var(--type-scale));
  color: var(--ffvr-ink-faint, #9ca3af);
  font-variant-numeric: tabular-nums;
}
.docs-welcome h2 {
  margin: 0 0 0.5rem;
  color: var(--ffvr-ink, #4c1d95);
  font-size: calc(1.4rem * var(--type-scale));
}
.docs-welcome-hint {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--ffvr-surface, #f5f3ff);
  border-left: 3px solid var(--ffvr-accent, #8b5cf6);
  border-radius: 4px;
  font-size: calc(0.85rem * var(--type-scale));
}

/* Bundle Download Banner — harvesting-meta-archive S4, Cluster 1 */
.docs-bundle-banner {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.docs-bundle-banner-text { flex: 1; min-width: 0; }
.docs-bundle-banner-title {
  font-size: calc(0.95rem * var(--type-scale));
  font-weight: 700;
  color: #4c1d95;
  margin-bottom: 0.25rem;
}
.docs-bundle-banner-desc {
  font-size: calc(0.85rem * var(--type-scale));
  color: #4b5563;
  line-height: 1.4;
}
.docs-bundle-download-btn {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #6d28d9;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.docs-bundle-download-btn:hover { background: #4c1d95; }

/* Inline PDF Viewer (right panel) */
.docs-welcome { padding: 1.5rem 2rem; color: var(--ffvr-ink-muted, #4b5563); }
.docs-viewer-inline {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.docs-viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  gap: 0.75rem;
  flex-shrink: 0;
}
.docs-viewer-toolbar-left { flex: 1; min-width: 0; }
.docs-viewer-toolbar-cat {
  font-size: calc(0.65rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
}
.docs-viewer-toolbar-title {
  margin: 0;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docs-viewer-toolbar-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.docs-toolbar-btn {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 0.35rem 0.7rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: calc(0.78rem * var(--type-scale));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.15s;
}
.docs-toolbar-btn:hover { background: rgba(255,255,255,0.3); }
.docs-toolbar-audio-btn.playing { background: rgba(255,255,255,0.35); }
.docs-viewer-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #525659;
}
.docs-audio-indicator {
  font-size: calc(1rem * var(--type-scale));
  line-height: 1;
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.docs-audio-indicator.has-audio {
  cursor: pointer;
  background: #ede9fe;
  box-shadow: inset 0 0 0 1px #c4b5fd;
}
.docs-audio-indicator.has-audio:hover {
  background: #6d28d9;
  box-shadow: inset 0 0 0 1px #4c1d95, 0 1px 4px rgba(76, 29, 149, 0.35);
  transform: scale(1.1);
}
.docs-audio-indicator.no-audio {
  opacity: 0.2;
  cursor: default;
}
@media (max-width: 768px) {
  .docs-layout { grid-template-columns: 1fr; height: auto; }
  .docs-viewer-toolbar { flex-direction: column; align-items: flex-start; }
  .docs-viewer-toolbar-title { font-size: calc(0.9rem * var(--type-scale)); }
  .docs-toolbar-btn { padding: 0.3rem 0.5rem; font-size: calc(0.72rem * var(--type-scale)); }
}
.docs-section-body code {
  background: #f3f4f6;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: ui-monospace, monospace;
}
.docs-code {
  background: #1f2937;
  color: #f9fafb;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: calc(0.8rem * var(--type-scale));
  font-family: ui-monospace, monospace;
  margin: 0.5rem 0;
}
.docs-section-body ul { margin: 0.5rem 0 0.5rem 1.25rem; }
.docs-section-body h3, .docs-section-body h4 { margin: 0.75rem 0 0.4rem 0; }

/* Process cards grid */

.overnight-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.overnight-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: white;
  transition: box-shadow 0.2s;
}

.overnight-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.overnight-card.overnight-status-ok {
  border-left: 4px solid #10b981;
}

.overnight-card.overnight-status-warn {
  border-left: 4px solid #f59e0b;
}

.overnight-card.overnight-status-fail {
  border-left: 4px solid #ef4444;
}

.overnight-card.overnight-status-running {
  border-left: 4px solid #3b82f6;
}

.overnight-card.overnight-status-nodata {
  border-left: 4px solid #d1d5db;
  opacity: 0.6;
}

.overnight-card-icon {
  font-size: calc(1.5rem * var(--type-scale));
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}

.overnight-card-body {
  flex: 1;
  min-width: 0;
}

.overnight-card-title {
  font-weight: 600;
  font-size: calc(0.9rem * var(--type-scale));
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.overnight-card-status {
  font-size: calc(0.85rem * var(--type-scale));
}

.overnight-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: calc(0.78rem * var(--type-scale));
  color: #6b7280;
}

.overnight-card-meta span {
  display: inline-flex;
  align-items: center;
}

.overnight-sched {
  background: #f3f4f6;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: calc(0.72rem * var(--type-scale));
}

.overnight-failures {
  color: #dc2626;
  font-weight: 600;
}

.overnight-card-detail {
  margin-top: 0.35rem;
  font-size: calc(0.78rem * var(--type-scale));
  color: #4b5563;
}

.overnight-card-error {
  margin-top: 0.35rem;
  font-size: calc(0.75rem * var(--type-scale));
  color: #dc2626;
  background: #fef2f2;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  word-break: break-word;
}

/* Narrative progress bar */

.overnight-progress-section {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--ffvr-surface-raised, white);
  border: 1px solid var(--ffvr-rule, #e5e7eb);
  border-radius: 10px;
}

.overnight-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.overnight-progress-header h4 {
  margin: 0;
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 600;
  color: var(--ffvr-ink, #374151);
}

.overnight-pct {
  font-size: calc(0.9rem * var(--type-scale));
  font-weight: 700;
  color: var(--ffvr-accent, #667eea);
}

.overnight-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--ffvr-surface-sunken, #e5e7eb);
  border-radius: 4px;
  overflow: hidden;
}

.overnight-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.overnight-progress-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: calc(0.78rem * var(--type-scale));
  color: var(--ffvr-ink-muted, #6b7280);
}

/* TTS Audio coverage bar (purple/violet theme) */

.overnight-tts-section .overnight-pct {
  color: var(--ffvr-accent, #7c3aed);
}

.overnight-progress-bar.tts-bar {
  background: var(--ffvr-surface-sunken, #ede9fe);
}

.overnight-progress-fill.tts-fill {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

/* 7-Day Rolling Summary */

.overnight-rolling-summary {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--ffvr-surface, linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%));
  border: 1px solid var(--ffvr-rule, #bae6fd);
  border-radius: 10px;
}

.rolling-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.rolling-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rolling-stat-value {
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 700;
  color: #0369a1;
}

.rolling-stat-label {
  font-size: calc(0.72rem * var(--type-scale));
  color: #6b7280;
  margin-top: 0.15rem;
}

.rolling-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-top: 0.75rem;
  padding: 0 0.25rem;
}

.rolling-spark-bar {
  flex: 1;
  background: #0ea5e9;
  border-radius: 2px 2px 0 0;
  min-width: 4px;
  opacity: 0.7;
}

.rolling-pipelines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: calc(0.72rem * var(--type-scale));
  color: #6b7280;
}

.rolling-pipe {
  background: #f0f9ff;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #bae6fd;
}

@media (max-width: 768px) {
  .rolling-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Thu-Sat Plan complete banner */

.ep-plan-complete-banner {
  margin-bottom: 1rem;
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #86efac;
  border-radius: 10px;
  text-align: center;
  font-size: calc(0.85rem * var(--type-scale));
  color: #166534;
}

.ep-plan-complete-banner strong {
  display: block;
  font-size: calc(0.95rem * var(--type-scale));
  margin-bottom: 0.35rem;
}

.ep-plan-complete-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: calc(0.78rem * var(--type-scale));
  color: #4b5563;
}

/* Worker status */

.overnight-worker-section {
  margin-bottom: 1.25rem;
}

.overnight-schedule-section {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--ffvr-surface, linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%));
  border: 1px solid var(--ffvr-rule, #ddd6fe);
  border-radius: 12px;
}

.overnight-schedule-section .ep-section-header {
  margin-bottom: 1rem;
}

.overnight-schedule-section h4 {
  margin: 0 0 0.2rem;
  color: var(--ffvr-ink, #4c1d95);
  font-size: calc(1rem * var(--type-scale));
}

.overnight-upcoming-header {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.overnight-upcoming-when,
.overnight-upcoming-next {
  flex: 1;
  min-width: 200px;
}

.overnight-upcoming-label {
  display: block;
  font-size: calc(0.7rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7c3aed;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.overnight-upcoming-date {
  font-size: calc(1.05rem * var(--type-scale));
  font-weight: 600;
  color: #1f2937;
}

.overnight-schedule-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.schedule-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  background: white;
  border: 1px solid #e9e3fd;
  border-radius: 8px;
}

.schedule-step-time {
  font-family: "SF Mono", Menlo, monospace;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  color: #6d28d9;
  min-width: 3.5rem;
}

.schedule-step-body {
  flex: 1;
}

.schedule-step-label {
  font-size: calc(0.88rem * var(--type-scale));
  color: #1f2937;
  font-weight: 500;
}

.schedule-step-agent {
  font-size: calc(0.72rem * var(--type-scale));
  color: #9ca3af;
  font-family: "SF Mono", Menlo, monospace;
  margin-top: 0.1rem;
}

/* Live schedule state — disabled LaunchAgent step (v14.0.255) */
.schedule-step.disabled {
  background: #f9fafb;
  border-color: #e5e7eb;
  opacity: 0.65;
}

.schedule-step.disabled .schedule-step-label {
  color: #6b7280;
  text-decoration: line-through;
  text-decoration-color: #cbd5e1;
}

.schedule-step.disabled .schedule-step-time {
  color: #9ca3af;
}

.schedule-step-disabled {
  font-size: calc(0.68rem * var(--type-scale));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b45309;
  margin-top: 0.15rem;
}

/* Frozen-state overlay banner — entire timeline is dimmed when governance frozen */
.overnight-schedule-timeline.frozen {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.3);
}

.schedule-frozen-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08);
}

.schedule-frozen-icon {
  font-size: calc(1.6rem * var(--type-scale));
  flex-shrink: 0;
  line-height: 1;
}

.schedule-frozen-body {
  flex: 1;
  min-width: 0;
}

.schedule-frozen-label {
  font-size: calc(0.95rem * var(--type-scale));
  font-weight: 700;
  color: #991b1b;
  letter-spacing: 0.02em;
}

.schedule-frozen-reason {
  font-size: calc(0.85rem * var(--type-scale));
  color: #7f1d1d;
  margin-top: 0.25rem;
  font-style: italic;
}

.schedule-frozen-meta {
  font-size: calc(0.72rem * var(--type-scale));
  color: #9f1239;
  margin-top: 0.2rem;
}

.overnight-schedule-mode {
  margin-top: 0.75rem;
  padding: 0.5rem 0.85rem;
  background: #f5f3ff;
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  font-size: calc(0.78rem * var(--type-scale));
  color: #5b21b6;
}

.overnight-schedule-mode strong {
  color: #4c1d95;
  font-family: "SF Mono", Menlo, monospace;
}

.overnight-worker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: white;
  font-size: calc(0.82rem * var(--type-scale));
}

.worker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.worker-active .worker-dot {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  animation: worker-pulse 2s ease-in-out infinite;
}

.worker-idle .worker-dot {
  background: #f59e0b;
}

.worker-offline .worker-dot {
  background: #d1d5db;
}

@keyframes worker-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.worker-label {
  font-weight: 600;
  color: #1f2937;
}

.worker-detail {
  color: #6b7280;
}

.worker-seen, .worker-queue {
  color: #9ca3af;
  font-size: calc(0.75rem * var(--type-scale));
}

/* Empty / error states */

.overnight-empty, .overnight-error {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
  font-style: italic;
}

.overnight-error {
  color: #dc2626;
}

/* Mobile responsive */

@media (max-width: 768px) {
  .overnight-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .overnight-process-grid {
    grid-template-columns: 1fr;
  }

  .overnight-worker {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================================
   KNOWLEDGE DASHBOARD MODAL
   Oracle Knowledge Base tracking and analysis (v13.2.0)
   ============================================================================ */

.knowledge-dashboard-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10002;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}

.knowledge-dashboard-modal.active {
  display: flex;
}

.kd-modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 1200px;
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* KD Header */

.kd-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.kd-modal-header h2 {
  margin: 0;
  font-size: calc(1.25rem * var(--type-scale));
  font-weight: 600;
}

.kd-header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.kd-last-snapshot {
  font-size: calc(0.8rem * var(--type-scale));
  opacity: 0.9;
}

.btn-close-kd {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: calc(1.25rem * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.btn-close-kd:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* KD Tab Navigation */

.knowledge-tabs {
  display: flex;
  gap: 0;
  padding: 0 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.knowledge-tab {
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: calc(0.875rem * var(--type-scale));
  font-weight: 500;
  color: #6b7280;
  transition: all 0.2s;
}

.knowledge-tab:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.02);
}

.knowledge-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

/* KD Tab Content */

.kd-tab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.knowledge-panel {
  display: none;
  height: 100%;
  flex-direction: column;
  overflow-y: auto;
  padding: 1.5rem;
}

.knowledge-panel.active {
  display: flex;
}

/* KD Health Banner */

.kd-health-banner {
  margin-bottom: 1.5rem;
}

.kd-health-indicator {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
  border: 1px solid #86efac;
}

.kd-health-indicator.degraded {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #fbbf24;
}

.kd-health-indicator.unhealthy {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-color: #f87171;
}

.kd-health-emoji {
  font-size: calc(2rem * var(--type-scale));
}

.kd-health-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.kd-health-status {
  font-weight: 700;
  font-size: calc(1.1rem * var(--type-scale));
  color: #166534;
}

.kd-health-indicator.degraded .kd-health-status {
  color: #92400e;
}

.kd-health-indicator.unhealthy .kd-health-status {
  color: #991b1b;
}

.kd-health-score {
  font-size: calc(0.875rem * var(--type-scale));
  color: #166534;
  opacity: 0.8;
}

.kd-health-indicator.degraded .kd-health-score {
  color: #92400e;
}

.kd-health-indicator.unhealthy .kd-health-score {
  color: #991b1b;
}

.kd-alert-badge {
  margin-left: auto;
  padding: 0.25rem 0.75rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 600;
}

/* KD Metrics Grid */

.kd-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kd-metric-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  transition: box-shadow 0.2s;
}

.kd-metric-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kd-metric-icon {
  font-size: calc(1.5rem * var(--type-scale));
  margin-bottom: 0.5rem;
}

.kd-metric-value {
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
  color: #374151;
}

.kd-metric-label {
  font-size: calc(0.75rem * var(--type-scale));
  color: #6b7280;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.kd-metric-delta {
  display: block;
  font-size: calc(0.75rem * var(--type-scale));
  margin-top: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: #f3f4f6;
}

.kd-metric-delta.positive {
  color: #059669;
  background: #dcfce7;
}

.kd-metric-delta.negative {
  color: #dc2626;
  background: #fee2e2;
}

.kd-metric-rate {
  display: block;
  font-size: calc(0.75rem * var(--type-scale));
  margin-top: 0.5rem;
  color: #667eea;
}

/* KD Section */

.kd-section {
  margin-bottom: 1.5rem;
}

.kd-section h4 {
  margin: 0 0 1rem 0;
  font-size: calc(1rem * var(--type-scale));
  font-weight: 600;
  color: #374151;
}

.kd-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* KD Alerts */

.kd-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kd-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.kd-alert.critical {
  background: #fee2e2;
  border-color: #fca5a5;
}

.kd-alert-icon {
  font-size: calc(1.1rem * var(--type-scale));
}

.kd-alert-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.kd-alert-type {
  font-weight: 600;
  font-size: calc(0.875rem * var(--type-scale));
  color: #374151;
  text-transform: capitalize;
}

.kd-alert-message {
  font-size: calc(0.8rem * var(--type-scale));
  color: #6b7280;
}

.kd-no-alerts {
  color: #10b981;
  font-style: italic;
  padding: 1rem;
  text-align: center;
}

/* KD Actions */

.kd-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

/* KD Filters */

.kd-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.kd-filters label {
  font-size: calc(0.875rem * var(--type-scale));
  color: #6b7280;
}

.kd-filters select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: calc(0.875rem * var(--type-scale));
  background: white;
}

/* KD Charts */

.kd-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.kd-chart-container {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem;
  min-height: 300px;
}

.kd-chart-container.kd-chart-small {
  min-height: 250px;
}

/* KD Growth Summary */

.kd-growth-summary {
  display: flex;
  gap: 2rem;
  padding: 1rem;
  background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.kd-growth-stat strong {
  font-size: calc(1.25rem * var(--type-scale));
  color: #667eea;
}

.kd-growth-pct {
  color: #6b7280;
  font-size: calc(0.875rem * var(--type-scale));
}

.kd-growth-trend {
  color: #6b7280;
}

/* KD Quality Stats */

.kd-quality-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kd-quality-stat {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}

.kd-quality-label {
  display: block;
  font-size: calc(0.75rem * var(--type-scale));
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.kd-quality-value {
  display: block;
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 700;
  color: #374151;
}

/* KD Batch List */

.kd-batch-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kd-batch-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.15s;
}

.kd-batch-card:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.kd-batch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.kd-batch-name {
  font-weight: 600;
  color: #374151;
}

.kd-batch-status {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
}

.kd-batch-status.completed {
  background: #dcfce7;
  color: #166534;
}

.kd-batch-status.in_progress {
  background: #dbeafe;
  color: #1e40af;
}

.kd-batch-meta {
  display: flex;
  gap: 1.5rem;
  font-size: calc(0.8rem * var(--type-scale));
  color: #6b7280;
}

.kd-batch-health {
  font-weight: 600;
}

.kd-batch-health.green { color: #059669; }

.kd-batch-health.yellow { color: #d97706; }

.kd-batch-health.red { color: #dc2626; }

.kd-batch-anomalies {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #fef3c7;
  border-radius: 4px;
  font-size: calc(0.8rem * var(--type-scale));
  color: #92400e;
}

/* KD History */

.kd-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.kd-history-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* KD Snapshot Table */

.kd-snapshot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.875rem * var(--type-scale));
}

.kd-snapshot-table th {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 2px solid #e5e7eb;
  color: #374151;
  font-weight: 600;
}

.kd-snapshot-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.kd-snapshot-table tbody tr:hover {
  background: #f9fafb;
}

.kd-snapshot-table .positive {
  color: #059669;
}

.kd-snapshot-table .negative {
  color: #dc2626;
}

.kd-type-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: calc(0.7rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  background: #e5e7eb;
  color: #374151;
}

.kd-type-badge.daily { background: #dbeafe; color: #1e40af; }

.kd-type-badge.manual { background: #dcfce7; color: #166534; }

.kd-type-badge.pre_batch { background: #fef3c7; color: #92400e; }

.kd-type-badge.post_batch { background: #ede9fe; color: #5b21b6; }

.kd-compare-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* KD Compare Result */

.kd-compare-panel {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.kd-compare-panel h4 {
  margin: 0 0 1rem 0;
  color: #374151;
}

.kd-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1rem;
}

.kd-compare-col h5 {
  margin: 0 0 0.75rem 0;
  color: #667eea;
  font-size: calc(0.9rem * var(--type-scale));
}

.kd-compare-col p {
  margin: 0.25rem 0;
  font-size: calc(0.875rem * var(--type-scale));
  color: #6b7280;
}

.kd-compare-deltas h5 {
  margin: 0 0 0.75rem 0;
  color: #374151;
}

.kd-compare-deltas p {
  margin: 0.25rem 0;
  font-size: calc(0.875rem * var(--type-scale));
}

/* KD Loading/Empty/Error States */

.kd-loading,

.kd-empty,

.kd-error {
  padding: 2rem;
  text-align: center;
  color: #6b7280;
}

.kd-error {
  color: #dc2626;
}

/* KD Responsive */

@media (max-width: 768px) {
  .knowledge-dashboard-modal {
    padding: 1rem;
  }

  .kd-modal-content {
    max-height: calc(100vh - 2rem);
  }

  .knowledge-tabs {
    overflow-x: auto;
    padding: 0 1rem;
  }

  .knowledge-tab {
    white-space: nowrap;
    padding: 0.75rem 1rem;
    font-size: calc(0.8rem * var(--type-scale));
  }

  .kd-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kd-charts-row {
    grid-template-columns: 1fr;
  }

  .kd-quality-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .kd-compare-grid {
    grid-template-columns: 1fr;
  }

  .kd-history-header {
    flex-direction: column;
    align-items: stretch;
  }

  .kd-history-actions {
    justify-content: space-between;
  }
}

/* ═══════════════════════════════════════════════════════════
   Video Cue Player — shows source video during archive clips
   ═══════════════════════════════════════════════════════════ */

.video-cue-player {
  position: relative;
  max-width: 90%;
  margin: 12px auto;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: opacity 0.4s ease, all 0.3s ease;
}

.video-cue-player video {
  width: 100%;
  display: block;
}

.vcp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
}

.vcp-voice-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(12px * var(--type-scale));
  font-weight: 500;
  letter-spacing: 0.02em;
}

.vcp-controls {
  display: flex;
  gap: 6px;
}

.vcp-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: calc(14px * var(--type-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.vcp-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* App Panel expanded state — fills the main content area */

.video-cue-player.vcp-app-panel {
  position: fixed;
  top: var(--nav-height, 60px);
  left: var(--side-nav-width, 60px);
  right: 0;
  bottom: 0;
  max-width: none;
  margin: 0;
  border-radius: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.video-cue-player.vcp-app-panel .vcp-header {
  padding: 8px 16px;
}

.video-cue-player.vcp-app-panel video {
  flex: 1;
  object-fit: contain;
  max-height: calc(100vh - var(--nav-height, 60px) - 44px);
}

/* Mobile: App Panel expand takes full viewport */

@media (max-width: 768px) {
  .video-cue-player.vcp-app-panel {
    left: 0;
    top: 0;
    z-index: 10001;
  }
  .video-cue-player.vcp-app-panel video {
    max-height: calc(100vh - 44px);
  }
}

/* =============================================================================
   GUEST MODE
   ============================================================================= */

/* ============================================================================
   Guest Banner & Guest Expired Screen — Redesigned February 2026
   ============================================================================ */

.guest-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    font-family: var(--font-body);
    font-size: calc(13px * var(--type-scale));
    color: rgba(255, 255, 255, 0.85);
}

.guest-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--ffa-purple-start), var(--ffa-purple-end));
    color: #fff;
    font-family: var(--font-body);
    font-size: calc(10px * var(--type-scale));
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.guest-info {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guest-expired-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.85);
    animation: cardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.guest-expired-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    color: #f59e0b;
    opacity: 0.8;
}

.guest-expired-screen h2 {
    font-family: var(--font-heading);
    font-size: calc(1.5rem * var(--type-scale));
    font-weight: 600;
    margin-bottom: 12px;
    color: #f59e0b;
}

.guest-expired-screen p {
    font-family: var(--font-body);
    font-size: calc(0.95rem * var(--type-scale));
    max-width: 420px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    .guest-banner {
        padding: 5px 12px;
        font-size: calc(12px * var(--type-scale));
    }
}

/* ============================================================================
   Guest Welcome Greeting Banner
   Non-blocking overlay shown after guest pass activation
   ============================================================================ */

.guest-welcome-banner {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 1500;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(99, 102, 241, 0.15);
    max-width: 480px;
    width: calc(100% - 32px);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.guest-welcome-banner.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.guest-welcome-content {
    padding: 28px 32px;
    text-align: center;
}

.guest-welcome-title {
    font-family: 'Playfair Display', serif;
    font-size: calc(1.5rem * var(--type-scale));
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
}

.guest-welcome-text {
    font-size: calc(0.9rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.guest-welcome-audio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
}

.guest-welcome-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.guest-welcome-play:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: #818cf8;
    transform: scale(1.05);
}

.guest-welcome-play.playing {
    background: rgba(99, 102, 241, 0.25);
    border-color: #818cf8;
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); }
}

.guest-welcome-audio-label {
    font-size: calc(0.85rem * var(--type-scale));
    color: rgba(255, 255, 255, 0.6);
}

.guest-welcome-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.guest-welcome-btn {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    font-size: calc(0.85rem * var(--type-scale));
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.guest-welcome-tour {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.guest-welcome-tour:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.guest-welcome-ai {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.guest-welcome-ai:hover {
    background: rgba(99, 102, 241, 0.25);
}

.guest-welcome-dismiss {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.guest-welcome-dismiss:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
    .guest-welcome-banner {
        top: 70px;
        max-width: 100%;
        width: calc(100% - 16px);
        border-radius: 12px;
    }

    .guest-welcome-content {
        padding: 20px;
    }

    .guest-welcome-title {
        font-size: calc(1.25rem * var(--type-scale));
    }

    .guest-welcome-actions {
        flex-direction: column;
    }

    .guest-welcome-btn {
        width: 100%;
    }
}

/* ============================================================================
   Unified AI Modal — Setup Mode (account setup / guest pass onboarding)
   Only applies when .setup-mode class is on the modal
   ============================================================================ */

.unified-ai-modal.setup-mode .unified-ai-header {
    background: linear-gradient(135deg, var(--ffa-purple-start) 0%, var(--ffa-purple-end) 100%);
    border-bottom-color: rgba(118, 75, 162, 0.3);
}

.unified-ai-modal.setup-mode .unified-ai-header .ai-modal-title {
    color: #fff;
}

.unified-ai-modal.setup-mode .unified-ai-header .ai-modal-close,

.unified-ai-modal.setup-mode .unified-ai-header .ai-modal-home {
    color: rgba(255, 255, 255, 0.8);
}

.unified-ai-modal.setup-mode .unified-ai-header .ai-modal-close:hover,

.unified-ai-modal.setup-mode .unified-ai-header .ai-modal-home:hover {
    color: #fff;
}

/* Hide chat-specific buttons during setup */

.unified-ai-modal.setup-mode .unified-ai-new-convo-btn,

.unified-ai-modal.setup-mode .unified-ai-exit-studio-btn {
    display: none;
}

/* Setup subtitle indicator */

.setup-mode-subtitle {
    font-family: var(--font-body);
    font-size: calc(11px * var(--type-scale));
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

/* SVG avatar for Fergi in setup mode */

.message-avatar-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ffa-purple-start), var(--ffa-purple-end));
    color: #fff;
    flex-shrink: 0;
}

.message-avatar-svg svg {
    width: 20px;
    height: 20px;
}

/* ============================================================================
   ADMIN AI DIALOGUE REVIEW
   ============================================================================ */

.ai-admin-conv-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-admin-conv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: var(--bg-secondary, #f8f9fa);
    transition: background 0.15s;
}

.ai-admin-conv-row:hover {
    background: var(--bg-hover, #e9ecef);
}

.ai-admin-conv-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-admin-conv-user {
    font-weight: 600;
    font-size: calc(0.9rem * var(--type-scale));
}

.ai-admin-conv-ctx {
    font-size: calc(0.75rem * var(--type-scale));
    padding: 2px 8px;
    border-radius: 10px;
    background: #e0e7ff;
    color: #3730a3;
}

.ai-admin-conv-ctx.badge-story_creation { background: #fef3c7; color: #92400e; }

.ai-admin-conv-ctx.badge-story_studio { background: #ede9fe; color: #5b21b6; }

.ai-admin-conv-ctx.badge-person { background: #d1fae5; color: #065f46; }

.ai-admin-conv-ctx.badge-media { background: #ede9fe; color: #5b21b6; }

.ai-admin-conv-meta {
    display: flex;
    gap: 0.75rem;
    font-size: calc(0.8rem * var(--type-scale));
    color: var(--text-muted, #6c757d);
}

.ai-admin-conv-date {
    white-space: nowrap;
}

/* Message history */

.ai-admin-message-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}

.ai-admin-msg {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.ai-admin-msg-user {
    background: #eff6ff;
    border-left-color: #3b82f6;
}

.ai-admin-msg-assistant {
    background: #f0fdf4;
    border-left-color: #22c55e;
}

.ai-admin-msg-tool {
    background: #fefce8;
    border-left-color: #eab308;
    font-size: calc(0.85rem * var(--type-scale));
}

.ai-admin-msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ai-admin-msg-role {
    font-weight: 600;
    font-size: calc(0.8rem * var(--type-scale));
}

.ai-admin-msg-time {
    font-size: calc(0.75rem * var(--type-scale));
    color: var(--text-muted, #6c757d);
}

.ai-admin-tokens {
    font-size: calc(0.7rem * var(--type-scale));
    padding: 1px 6px;
    background: #e5e7eb;
    border-radius: 8px;
    margin-left: 4px;
}

.ai-admin-msg-body {
    font-size: calc(0.85rem * var(--type-scale));
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-admin-tool-detail code {
    font-size: calc(0.78rem * var(--type-scale));
    background: rgba(0,0,0,0.06);
    padding: 1px 4px;
    border-radius: 3px;
    word-break: break-all;
}

/* Problem reports */

.ai-admin-reports-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-admin-report-row {
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--bg-secondary, #f8f9fa);
    border-left: 3px solid #ef4444;
}

.ai-admin-report-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.ai-admin-report-category {
    font-weight: 600;
    font-size: calc(0.85rem * var(--type-scale));
}

.ai-admin-report-status {
    font-size: calc(0.75rem * var(--type-scale));
    padding: 2px 8px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
}

.ai-admin-report-meta {
    font-size: calc(0.75rem * var(--type-scale));
    color: var(--text-muted, #6c757d);
    margin-left: auto;
}

.ai-admin-report-desc {
    font-size: calc(0.85rem * var(--type-scale));
    line-height: 1.5;
}

.ai-admin-report-ctx {
    font-size: calc(0.75rem * var(--type-scale));
    color: var(--text-muted, #6c757d);
    margin-top: 0.3rem;
}

/* =============================================================================
   HELP MODAL
   ============================================================================= */

.help-modal-overlay {
    z-index: 1100;
}

/* NAV-001 (securing-family-launch S2). Help is reachable from the sign-in
   screen now, and .login-overlay is z-index 10000 — Help at 1100 would open
   perfectly and be invisible underneath it. The lift is applied per open by
   help-modal.js (applyHelpModalLoginLift) ONLY while the login overlay is on
   screen, so Help does not float above the modals it is meant to sit beneath
   for the rest of the session. position:fixed because the base .modal-overlay
   is absolute, which would anchor it to the scrolled document rather than the
   viewport the login panel occupies. */
.help-modal-overlay.help-modal-overlay--over-login {
    position: fixed;
    z-index: 10050;
}

/* Help ABOVE the PWA Add-to-Home-Screen gate (securing-family-launch S3).
   The gate is the one surface with no browser escape, so Help is the only
   lifeline on it — and two separate rules would otherwise kill it:

     - `.pwa-overlay` is z-index 2147483600, above every modal in the product.
     - `html.pwa-locked body > :not(.pwa-overlay) { visibility: hidden }` HIDES
       every other direct child of body, help overlay included. Raising the
       z-index alone leaves a correctly-stacked invisible element.

   Both are answered here, and only while the gate is actually up — the class is
   applied per open by help-modal.js and never sticks. The visibility rule needs
   the `html.pwa-locked` ancestor to out-specify the hiding rule (3 classes to
   its 2) since both are !important. */
.help-modal-overlay.help-modal-overlay--over-pwa-gate {
    position: fixed;
    z-index: 2147483610;
}

/* ⛔ `.is-open` IS LOAD-BEARING HERE, not decoration. The lift class is applied
   per open but is not removed on close, and `.ffa-modal` closes by setting
   opacity:0 + visibility:hidden. An unqualified visibility:visible!important
   would therefore leave a CLOSED, fully transparent, inset-0, z-2147483610
   overlay sitting on top of the gate — invisible, and swallowing every tap on
   the one screen with no way out. Qualified, the closed overlay falls back to
   hidden (and html.pwa-locked's own rule hides it besides). */
html.pwa-locked .help-modal-overlay.help-modal-overlay--over-pwa-gate:is(.is-open, .active) {
    visibility: visible !important;
}

/* ⛔ HELP WAS AN EMPTY SCRIM. EVERYWHERE. (securing-family-launch S3.)
   Found by the gate-overlay harness, which probed the CONTENT PANEL rather
   than the overlay — and then reproduced identically on the desktop dropdown,
   so this was never a gate defect. `.help-modal` also carries the generic
   `.modal` class, and `.modal` is `display: none` unless it also carries
   `.active` (styles.css §3713). This panel is opened by ModalManager, which
   writes `.is-open`, never `.active`. Nothing anywhere set display on it. So
   for every door in the product — the desktop dropdown, and the mobile drawer,
   mobile Settings and login-screen doors S2 added — openHelpModal() faded in a
   dark scrim over a 640px box of nothing. Six help sections built into the DOM
   every time, measured at 0×0.

   S2's verification passed because it asked whether the OVERLAY was open and
   topmost, which it was. "A verifier that verified nothing exits 0."

   Keyed on the open state, and on BOTH class names: ModalManager writes
   `.is-open` and the no-manager fallback in help-modal.js writes it too, but
   `.active` is the older convention still live elsewhere and a door that works
   only under one of them is the same trap again. `position: relative; inset:
   auto` undoes `.modal`'s fixed inset-0 so the panel is an ordinary flex child
   of `.ffa-modal`'s centring context, rather than a fixed box pinned to the
   top-left corner. */
.help-modal-overlay:is(.is-open, .active) .help-modal {
    display: flex;
    flex-direction: column;
    position: relative;
    inset: auto;
}

.help-modal {
    max-width: 640px;
    width: 92%;
    max-height: 85vh;
    /* Greg G-160 (FergiPhone Safari, 2026-10-24): iOS resolves `vh` against the LARGE viewport (874 px with the
       toolbars hidden), so this panel grew to 743 px inside a 604 px overlay (the overlay starts under the 56 px
       band), was centred, and its own header — title and ✕ — sat at y −13, under the band: Help with no way out.
       The panel is now capped by the space it actually has. */
    max-height: min(85dvh, calc(100% - 24px));
    border-radius: 16px;
    overflow: hidden;
}

.help-modal-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.help-modal-header h2 {
    margin: 0;
    font-size: calc(1.25rem * var(--type-scale));
    font-weight: 600;
}

.help-modal-header .modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: calc(1rem * var(--type-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.help-modal-header .modal-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.help-modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: calc(85vh - 70px);
}

.help-welcome {
    background: #f0f4ff;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    border-left: 4px solid #667eea;
}

.help-welcome p {
    margin: 0;
    color: #374151;
    font-size: calc(0.925rem * var(--type-scale));
    line-height: 1.5;
}

.help-section {
    margin-bottom: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.help-section-title {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: calc(0.95rem * var(--type-scale));
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f9fafb;
    transition: background 0.15s;
    user-select: none;
}

.help-section-title:hover {
    background: #f3f4f6;
}

.help-section-icon {
    font-size: calc(1.1rem * var(--type-scale));
}

.help-section-chevron {
    margin-left: auto;
    font-size: calc(0.7rem * var(--type-scale));
    color: #9ca3af;
    transition: transform 0.2s;
}

.help-section-content {
    padding: 0 1rem 0.75rem;
}

.help-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.help-item:last-child {
    border-bottom: none;
}

.help-question {
    font-weight: 600;
    font-size: calc(0.875rem * var(--type-scale));
    color: #374151;
    margin-bottom: 0.375rem;
}

.help-answer {
    font-size: calc(0.85rem * var(--type-scale));
    color: #6b7280;
    line-height: 1.55;
}

.help-footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.help-footer p {
    margin: 0 0 0.75rem;
    font-size: calc(0.875rem * var(--type-scale));
    color: #6b7280;
}

.help-footer .btn {
    /* F-S4-5 (fix-loop 2026-09-17): "Ask Fergi AI" measured 128×34 on FergiPhone. */
    min-height: 44px;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-size: calc(0.875rem * var(--type-scale));
}

/* =============================================================================
   NAV SUBTITLES (Browse Media vs Media Curator clarification)
   ============================================================================= */

.menu-subtitle {
    display: block;
    font-size: calc(0.65rem * var(--type-scale));
    color: #9ca3af;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 1px;
}

/* =============================================================================
   "NEW" BADGE ON STORIES
   ============================================================================= */

.new-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: calc(0.6rem * var(--type-scale));
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    vertical-align: middle;
    animation: newBadgePulse 2s ease-in-out 3;
}

@keyframes newBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Story card "new" indicator dot */

/* Nav menu item badge */

.menu-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    background: #ef4444;
    color: white;
    font-size: calc(0.6rem * var(--type-scale));
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.menu-item {
    position: relative;
}

/* ============================================================================
   Clip Extractor — Admin tool for video/audio clip extraction
   ============================================================================ */

.clip-extractor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.clip-extractor-overlay.active {
    opacity: 1;
}

.clip-extractor-modal {
    background: #1a1a2e;
    color: #e0e0e0;
    border-radius: 16px;
    width: 90vw;
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.clip-ext-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.clip-ext-header h2 {
    margin: 0;
    font-size: calc(1.25rem * var(--type-scale));
    flex: 1;
}

.clip-ext-badge {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: calc(0.7rem * var(--type-scale));
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.clip-ext-close {
    background: none;
    border: none;
    color: #999;
    font-size: calc(1.5rem * var(--type-scale));
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.clip-ext-close:hover { color: white; }

.clip-ext-body {
    padding: 20px 24px;
}

.clip-ext-preset-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.clip-ext-preset-row label {
    font-weight: 600;
    font-size: calc(0.85rem * var(--type-scale));
    white-space: nowrap;
}

.clip-ext-preset-row select {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #16213e;
    color: #e0e0e0;
    font-size: calc(0.9rem * var(--type-scale));
}

.clip-ext-desc {
    font-size: calc(0.85rem * var(--type-scale));
    color: #aaa;
    margin-bottom: 16px;
    min-height: 1.2em;
}

.clip-ext-player-wrap {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.clip-ext-player-wrap video {
    width: 100%;
    max-height: 400px;
    display: block;
}

/* Range slider */

.clip-ext-controls {
    margin-bottom: 16px;
}

.clip-ext-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: calc(0.8rem * var(--type-scale));
    margin-bottom: 8px;
    color: #bbb;
}

.clip-ext-range-labels strong {
    color: #e0e0e0;
    font-variant-numeric: tabular-nums;
}

.clip-ext-range-track {
    position: relative;
    height: 32px;
    background: #16213e;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 16px;
}

.clip-ext-range-fill {
    position: absolute;
    top: 8px;
    height: 16px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px;
    pointer-events: none;
}

.clip-ext-thumb {
    position: absolute;
    top: 2px;
    width: 14px;
    height: 28px;
    background: white;
    border-radius: 4px;
    cursor: ew-resize;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 2;
    transition: box-shadow 0.15s;
}

.clip-ext-thumb:hover, .clip-ext-thumb:focus {
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.6);
    outline: none;
}

.clip-ext-thumb-start { background: #4ade80; }

.clip-ext-thumb-end { background: #f87171; }

.clip-ext-playhead {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 1;
}

/* Audio offset */

.clip-ext-offset-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clip-ext-offset-section label {
    font-size: calc(0.85rem * var(--type-scale));
    font-weight: 600;
    white-space: nowrap;
}

.clip-ext-offset-track {
    position: relative;
    flex: 1;
    height: 24px;
    background: #16213e;
    border-radius: 6px;
    cursor: pointer;
}

.clip-ext-offset-center {
    position: absolute;
    left: 50%;
    top: 4px;
    width: 2px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
}

.clip-ext-offset-thumb {
    position: absolute;
    top: 2px;
    width: 12px;
    height: 20px;
    background: #fbbf24;
    border-radius: 4px;
    cursor: ew-resize;
    transform: translateX(-50%);
    z-index: 2;
}

#clipOffsetLabel {
    font-size: calc(0.85rem * var(--type-scale));
    font-variant-numeric: tabular-nums;
    min-width: 55px;
    text-align: right;
}

/* Actions */

.clip-ext-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.clip-ext-actions .btn {
    padding: 8px 16px;
    font-size: calc(0.85rem * var(--type-scale));
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.clip-ext-actions .btn-secondary {
    background: #2a2a4a;
    color: #ccc;
}

.clip-ext-actions .btn-secondary:hover {
    background: #3a3a5a;
}

.clip-ext-actions .btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.clip-ext-actions .btn-primary:hover {
    filter: brightness(1.1);
}

.clip-ext-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.clip-ext-audio-toggle {
    font-size: calc(0.8rem * var(--type-scale));
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaa;
    margin-left: auto;
}

/* Output */

.clip-ext-output {
    font-size: calc(0.85rem * var(--type-scale));
    min-height: 20px;
}

.clip-ext-progress {
    color: #fbbf24;
    padding: 8px 12px;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 8px;
}

.clip-ext-success {
    color: #4ade80;
    padding: 8px 12px;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 8px;
    line-height: 1.6;
}

.clip-ext-error {
    color: #f87171;
    padding: 8px 12px;
    background: rgba(248, 113, 113, 0.1);
    border-radius: 8px;
}

/* ── Timestamp Editor ── */

.ts-editor-overlay {
    position: fixed;
    top: var(--nav-height, 60px);
    left: var(--side-nav-width, 60px);
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.ts-editor-overlay.active { opacity: 1; }

.ts-editor-modal {
    background: #1a1a2e;
    color: #e0e0e0;
    border-radius: 16px;
    width: 96%;
    max-width: 1100px;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ts-editor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ts-editor-header h2 { margin: 0; font-size: calc(1.25rem * var(--type-scale)); flex: 1; }

.ts-editor-body { padding: 16px 24px; }

.ts-editor-clip-select {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.ts-editor-clip-select label {
    font-weight: 600;
    font-size: calc(0.85rem * var(--type-scale));
    white-space: nowrap;
}

.ts-editor-clip-select select {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #16213e;
    color: #e0e0e0;
    font-size: calc(0.85rem * var(--type-scale));
}

.ts-editor-clip-select .btn-sm {
    padding: 6px 14px;
    font-size: calc(0.8rem * var(--type-scale));
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    background: #2a2a4a;
    color: #ccc;
    display: none; /* Hidden — simplified editor removed text source buttons */
}

/* Two-column layout: player + sentences */
.ts-editor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ts-editor-player-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#tsVideo {
    width: 100%;
    max-height: 340px;
    background: #000;
    border-radius: 8px;
    display: block;
}

.ts-editor-transport {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ts-editor-transport .btn-sm {
    padding: 5px 12px;
    font-size: calc(0.8rem * var(--type-scale));
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    background: #2a2a4a;
    color: #ccc;
}

.ts-editor-transport .btn-sm:hover { background: #3a3a5a; }

.ts-editor-time {
    font-variant-numeric: tabular-nums;
    font-size: calc(0.85rem * var(--type-scale));
    color: #bbb;
    margin-left: auto;
}

/* Scrub bar */
.ts-scrub-bar {
    width: 100%;
    height: 6px;
    margin: 8px 0 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #16213e;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.ts-scrub-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(102, 126, 234, 0.5);
}

.ts-scrub-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    border: none;
}

/* Sentences column */
.ts-editor-sentences-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ts-editor-mode-toggle { display: none; /* Removed in simplified editor */ }

.ts-editor-sentences {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: #111827;
}

.ts-sentence {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.15s;
}

.ts-sentence:hover { background: rgba(102, 126, 234, 0.08); }

.ts-sentence.active {
    background: rgba(102, 126, 234, 0.15);
    border-left: 3px solid #667eea;
}

.ts-sentence-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ts-sentence-num {
    font-size: calc(0.7rem * var(--type-scale));
    font-weight: 700;
    color: #667eea;
    background: rgba(102, 126, 234, 0.15);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-sentence-time {
    font-size: calc(0.75rem * var(--type-scale));
    font-variant-numeric: tabular-nums;
    color: #666;
    flex: 1;
}

.ts-sentence-time.set { color: #4ade80; }

.ts-sentence-delete { display: none; /* Removed in simplified editor */ }

.ts-sentence-text {
    font-size: calc(0.9rem * var(--type-scale));
    line-height: 1.5;
    color: #ccc;
}

.ts-stamp-btn {
    padding: 3px 12px;
    font-size: calc(0.75rem * var(--type-scale));
    border-radius: 4px;
    border: 1px solid rgba(102, 126, 234, 0.4);
    background: rgba(102, 126, 234, 0.15);
    color: #99aaee;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.15s;
}

.ts-stamp-btn:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: #667eea;
    color: #fff;
}

.ts-stamp-btn.pulse {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-color: transparent;
    animation: ts-stamp-pulse 1.5s ease-in-out infinite;
}

@keyframes ts-stamp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(102, 126, 234, 0); }
}

.ts-word {
    display: inline;
    padding: 1px 2px;
    border-radius: 2px;
    transition: background 0.1s;
}

.ts-word.active {
    background: rgba(102, 126, 234, 0.4);
    outline: 1px solid #667eea;
}

.ts-word.set { color: #4ade80; }

.ts-editor-hint {
    font-size: calc(0.75rem * var(--type-scale));
    color: #666;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.ts-editor-hint strong { color: #bbb; }

/* Actions bar */
.ts-editor-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ts-editor-actions .btn {
    padding: 8px 18px;
    font-size: calc(0.85rem * var(--type-scale));
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.ts-editor-actions .btn-secondary {
    background: #2a2a4a;
    color: #ccc;
}

.ts-editor-actions .btn-secondary:hover { background: #3a3a5a; }

.ts-editor-actions .btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.ts-editor-actions .btn-primary:hover { filter: brightness(1.1); }

.ts-editor-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ts-editor-status {
    font-size: calc(0.85rem * var(--type-scale));
    color: #aaa;
    margin-left: auto;
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
    .ts-editor-layout {
        grid-template-columns: 1fr;
    }
    .ts-editor-sentences {
        max-height: 250px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TWW — Triptych with Wings Layout System
   All-stories presentation layout. Class-driven grid adapts
   to populated slots. No empty containers ever rendered.
   ═══════════════════════════════════════════════════════════════ */

/* ── Root grid: adapts columns based on wing presence ── */
.tww-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 12px;
    padding: 12px;
    flex: 1;
    width: 100%;
    align-items: stretch;
    max-width: 100%;
    position: relative;
}

.tww-stage.has-left-wing {
    grid-template-columns: minmax(120px, 20%) 1fr;
}
.tww-stage.has-right-wing {
    grid-template-columns: 1fr minmax(120px, 20%);
}
.tww-stage.has-left-wing.has-right-wing {
    grid-template-columns: minmax(120px, 20%) 1fr minmax(120px, 20%);
}

/* ── Center column: flex column distributes primary vs subordinate ── */
.tww-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 0;
    min-width: 0;
}

/* ── Primary wrapper ── */
.tww-primary {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}

/* center-1: primary proportional to TWW layout (never full-pane) */
.tww-stage.center-1 .tww-primary {
    flex: 3;
    min-height: 0;
}
/* Reserve space for future subordinate row in center-1 */
.tww-stage.center-1::after {
    content: '';
    flex: 2;
    min-height: 0;
}

/* Remove spacer when real subordinate row appears */
.tww-stage.center-2::after,
.tww-stage.center-3::after {
    display: none;
}

/* center-2/center-3: primary gets 3 parts, subordinate gets 2 */
.tww-stage.center-2 .tww-primary,
.tww-stage.center-3 .tww-primary {
    flex: 3;
    min-height: 0;
}

/* ── Subordinate row ── */
.tww-subordinate {
    flex: 2;
    min-height: 0;
    width: 100%;
}

/* center-2: single secondary centered at ~45% width */
.tww-stage.center-2 .tww-subordinate {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tww-stage.center-2 .tww-subordinate > .media-item {
    max-width: 45%;
    flex: 0 1 45%;
}

/* center-3: two items split evenly */
.tww-stage.center-3 .tww-subordinate {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.tww-stage.center-3 .tww-subordinate > .media-item {
    flex: 1;
    min-width: 0;
}

/* ── Wing panels: stacked vertically ── */
.tww-left-wing, .tww-right-wing {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    align-self: center;
    justify-content: center;
}

/* ── Gallery mode (Read mode) ── */
.tww-stage.scene-gallery {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    min-height: auto;
}

/* ── Data-slot visibility ── */
.media-item[data-slot="offstage"] {
    display: none;
}

/* All TWW media containers: black background for clean letterboxing */
.tww-stage .media-item {
    background: #000;
}

/* ── TWW image fit strategy ──
   All media: contain (preserve aspect ratio, no cropping)
   Black background on .media-item provides clean letterboxing */
.tww-stage .media-item img,
.tww-stage .media-item video {
    width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
    object-fit: contain;
}
/* Documents: never crop — always show full content */
.tww-stage .media-item[data-media-type="document"] img,
.tww-stage .media-item[data-media-type="document"] .media-doc-cover,
.tww-stage .media-item .media-doc-cover {
    object-fit: contain;
}

/* Wing images: auto-size from intrinsic ratio, constrained by parent.
   flex:1 on parent gives it an explicit height from flex allocation,
   so max-height:100% on the image CAN resolve (unlike with flex:0 1 auto). */
.tww-stage .media-item[data-slot="left"] img,
.tww-stage .media-item[data-slot="left"] .media-doc-cover,
.tww-stage .media-item[data-slot="right"] img,
.tww-stage .media-item[data-slot="right"] .media-doc-cover {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* ── Smooth TWW layout transitions ── */
.tww-primary,
.tww-subordinate,
.tww-left-wing,
.tww-right-wing {
    transition: flex 0.4s ease, opacity 0.3s ease;
}
.media-item {
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* ── Primary media sizing ── */
.media-item[data-slot="primary"] {
    width: 100%;
    max-width: 100%;
    z-index: 3;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
/* Primary media: constrain within flex-allocated space */
.tww-primary .media-item[data-slot="primary"] {
    overflow: hidden;
    max-height: 100%;
    background: #000;
}
/* Primary slot: image drives height (no letterboxing) */
.tww-primary .media-item[data-slot="primary"] video,
.tww-primary .media-item[data-slot="primary"] img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}
/* Documents/photos in primary: scale down so they don't overwhelm the scene */
.tww-primary .media-item[data-slot="primary"][data-media-type="document"],
.tww-primary .media-item[data-slot="primary"][data-media-type="photo"] {
    max-height: 70%;
    width: auto;
    max-width: 100%;
    align-self: center;
}

/* ── Secondary + tertiary media sizing ── */
.media-item[data-slot="secondary"],
.media-item[data-slot="tertiary"] {
    z-index: 2;
    opacity: 0.9;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ── Wing media sizing ── */
/* height:25vh gives an EXPLICIT height for child max-height:100% to
   resolve against. flex:0 1 auto defers to height for flex-basis,
   and flex-shrink:1 allows items to shrink when stacked (3 in a wing).
   min-height:0 permits shrinking below 25vh. */
.media-item[data-slot="left"],
.media-item[data-slot="right"] {
    flex: 0 1 auto;
    height: 25vh;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}
.media-item[data-slot="left"]:hover,
.media-item[data-slot="right"]:hover {
    opacity: 1;
    transform: scale(1.03);
}

/* ── Gallery slot ── */
.media-item[data-slot="gallery"] {
    width: calc(50% - 8px);
    max-height: 300px;
    display: block;
}

/* ── Compact doc thumbs in wings ── */
.tww-left-wing .media-doc-thumb,
.tww-right-wing .media-doc-thumb {
    min-height: 60px;
}
.tww-left-wing .media-doc-thumb::before,
.tww-right-wing .media-doc-thumb::before {
    width: 14px;
    height: 14px;
}
.tww-left-wing .media-doc-label,
.tww-right-wing .media-doc-label {
    font-size: calc(0.65rem * var(--type-scale));
    padding: 16px 6px 8px;
    -webkit-line-clamp: 3;
}

/* ── TWW Mobile responsive ── */
@media (max-width: 768px) {
    .tww-stage {
        padding: 8px;
        gap: 6px;
    }
    .media-item[data-slot="gallery"] {
        width: calc(50% - 8px);
        max-height: 200px;
    }
}

@media (max-width: 480px) {
    .tww-stage {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
        grid-auto-rows: auto;
    }
    .tww-left-wing, .tww-right-wing {
        flex-direction: row;
    }
    .tww-center {
        grid-column: 1;
    }
    .media-item[data-slot="gallery"] { width: 100%; }
    .tww-subordinate { flex-direction: column; }
}

/* ============================================================
   Watcher Console (April 2026 Revival)
   ============================================================ */
.watcher-pills-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.watcher-severity-pill {
  flex: 1 1 140px;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
  color: #4c1d95;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
  border-left: 4px solid #8b5cf6;
}
.watcher-severity-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.25);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
.watcher-pill-count {
  font-size: calc(2rem * var(--type-scale));
  font-weight: 700;
  line-height: 1;
}
.watcher-pill-label {
  font-size: calc(0.85rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
  opacity: 0.85;
}
.watcher-pill-critical { border-left-color: #dc2626; }
.watcher-pill-attention { border-left-color: #ea580c; }
.watcher-pill-warning { border-left-color: #f59e0b; }
.watcher-pill-info { border-left-color: #3b82f6; }

.watcher-pattern-card {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  margin-bottom: 0.75rem;
}
.watcher-pattern-title {
  font-weight: 600;
  color: #4c1d95;
  margin-bottom: 0.25rem;
}
.watcher-pattern-desc {
  font-size: calc(0.9rem * var(--type-scale));
  color: #6b7280;
}
.watcher-pattern-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
  font-size: calc(0.85rem * var(--type-scale));
}
.watcher-pattern-count {
  color: #6b7280;
}

.watcher-observation-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
}
.watcher-obs-body { flex: 1; min-width: 0; }
.watcher-obs-desc { color: #1f2937; font-size: calc(0.95rem * var(--type-scale)); }
.watcher-obs-meta { color: #6b7280; font-size: calc(0.8rem * var(--type-scale)); margin-top: 0.15rem; }
.watcher-obs-actions { display: flex; gap: 0.5rem; }

.watcher-sev-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #3b82f6;
}
.watcher-sev-dot.sev-critical { background: #dc2626; }
.watcher-sev-dot.sev-attention { background: #ea580c; }
.watcher-sev-dot.sev-warning { background: #f59e0b; }
.watcher-sev-dot.sev-info { background: #3b82f6; }

.watcher-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: calc(0.75rem * var(--type-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.watcher-badge.sev-critical { background: #fee2e2; color: #991b1b; }
.watcher-badge.sev-attention { background: #ffedd5; color: #9a3412; }
.watcher-badge.sev-warning { background: #fef3c7; color: #92400e; }
.watcher-badge.sev-info { background: #dbeafe; color: #1e40af; }

/* ── Office of FFA Enrichment — Benchmark & Resource panels ── */
.bench-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--type-scale)); margin: 0.75rem 0; }
.bench-table th, .bench-table td { padding: 6px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: middle; }
.bench-table th { background: #f8fafc; font-weight: 600; color: #475569; font-size: calc(12px * var(--type-scale)); text-transform: uppercase; letter-spacing: 0.03em; }
.bench-table.bench-pareto td:nth-child(2), .bench-table.bench-pareto td:nth-child(3) { font-variant-numeric: tabular-nums; }

.bench-model-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: calc(11px * var(--type-scale)); font-weight: 600; background: #f1f5f9; color: #334155; }
.bench-model-badge.bench-driven { background: #fef3c7; color: #92400e; }

.bench-verdict { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: calc(11px * var(--type-scale)); font-weight: 600; text-transform: capitalize; }
.bench-verdict.bench-verdict-free-tier { background: #dcfce7; color: #166534; }
.bench-verdict.bench-verdict-quality-ceiling { background: #dbeafe; color: #1e40af; }
.bench-verdict.bench-verdict-strong-value { background: #fef3c7; color: #92400e; }
.bench-verdict.bench-verdict-acceptable { background: #f1f5f9; color: #475569; }
.bench-verdict.bench-verdict-below-floor { background: #fee2e2; color: #991b1b; }

.bench-task-panel { margin: 1.25rem 0; padding: 1rem 1.25rem; background: #fafbfc; border: 1px solid #e5e7eb; border-radius: 8px; }
.bench-task-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.bench-task-header h4 { margin: 0; font-size: calc(0.95rem * var(--type-scale)); }
.bench-run-meta { font-size: calc(0.78rem * var(--type-scale)); color: #94a3b8; }
.bench-winner { font-size: calc(0.85rem * var(--type-scale)); margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: #f0fdf4; border-radius: 6px; color: #166534; }

.bench-routing-summary { margin-bottom: 1.5rem; }
.bench-routing-summary h4 { margin: 0 0 0.5rem 0; font-size: calc(0.9rem * var(--type-scale)); }

.bench-dim { color: #94a3b8; font-size: 0.85em; }
.bench-ok { color: #166534; font-weight: 600; }

.bench-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.bench-resource-card { padding: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.bench-resource-card h4 { margin: 0 0 0.75rem 0; font-size: calc(0.9rem * var(--type-scale)); color: #334155; }
.bench-resource-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: calc(0.85rem * var(--type-scale)); border-bottom: 1px solid #f1f5f9; }
.bench-resource-row:last-child { border-bottom: none; }

.bench-cost-summary { margin-top: 1rem; padding: 1rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; }
.bench-cost-row { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: calc(0.9rem * var(--type-scale)); }
.bench-cost-row.bench-highlight { font-weight: 700; color: #166534; border-top: 1px solid #bbf7d0; margin-top: 0.25rem; padding-top: 0.5rem; }

.bench-next-project { margin-top: 1.25rem; padding: 1rem; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 8px; }
.bench-next-project h4 { margin: 0 0 0.5rem 0; font-size: calc(0.9rem * var(--type-scale)); color: #6b21a8; }

.ep-empty-state { padding: 2rem; text-align: center; color: #64748b; background: #f8fafc; border-radius: 8px; }

/* ============================================================================
   FAMILY DASHBOARD (non-admin family members)
   ============================================================================ */

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.dashboard-stat {
    text-align: center;
    padding: 0.75rem;
    background: var(--ffvr-surface, var(--bg-secondary, #f8fafc));
    border-radius: 8px;
}

.dashboard-stat-value {
    display: block;
    font-size: calc(1.5rem * var(--type-scale));
    font-weight: 700;
    color: var(--ffvr-ink, var(--text-primary, #1e293b));
}

.dashboard-stat-label {
    display: block;
    font-size: calc(0.75rem * var(--type-scale));
    color: var(--ffvr-ink-muted, var(--text-secondary, #64748b));
    margin-top: 0.25rem;
}

.dashboard-session-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ffvr-rule, var(--border-color, #e2e8f0));
    font-size: calc(0.85rem * var(--type-scale));
}

.dashboard-session-row:last-child { border-bottom: none; }

.dashboard-enrichment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.dashboard-enrichment-stat {
    padding: 0.75rem;
    background: var(--ffvr-surface, var(--bg-secondary, #f8fafc));
    border-radius: 8px;
}

.dashboard-progress-label {
    font-size: calc(0.8rem * var(--type-scale));
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.dashboard-progress-bar {
    height: 8px;
    background: var(--ffvr-surface-sunken, var(--border-color, #e2e8f0));
    border-radius: 4px;
    overflow: hidden;
}

.dashboard-progress-fill {
    height: 100%;
    background: var(--ffvr-accent, var(--accent-primary, #3b82f6));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.dashboard-progress-pct {
    font-size: calc(0.75rem * var(--type-scale));
    color: var(--ffvr-ink-muted, var(--text-secondary, #64748b));
    margin-top: 0.25rem;
    text-align: right;
}

.dashboard-activity-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--ffvr-rule, var(--border-color, #e2e8f0));
    font-size: calc(0.8rem * var(--type-scale));
}

.dashboard-activity-row:last-child { border-bottom: none; }

.dashboard-activity-action {
    font-weight: 600;
    text-transform: capitalize;
    min-width: 60px;
}

.dashboard-activity-target {
    flex: 1;
    color: var(--ffvr-ink-muted, var(--text-secondary, #64748b));
}

.dashboard-activity-user {
    color: var(--ffvr-ink-muted, var(--text-secondary, #64748b));
    font-size: calc(0.75rem * var(--type-scale));
}

.dashboard-activity-time {
    font-size: calc(0.75rem * var(--type-scale));
    white-space: nowrap;
}

@media (max-width: 768px) {
    .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-enrichment-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   BIOS FILTER CATEGORY (deliberate-pruning-ockham S3 / D5 + D6 + D3 + D15)
   Stories tab → Bios tab, attribution affordance, admin reorder.
   ============================================================================ */

.stories-bios {
    padding: 0;
}

.bios-view-header {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
    color: white;
}

.bios-view-header h3 {
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(1.15rem * var(--type-scale));
    font-weight: 600;
}

.bios-view-subtitle {
    margin: 0;
    opacity: 0.85;
    font-size: calc(0.85rem * var(--type-scale));
}

.bios-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ffvr-ink-muted, #64748b);
}

.bios-empty-icon {
    font-size: calc(48px * var(--type-scale));
    margin-bottom: 12px;
}

.bios-empty code {
    background: var(--ffvr-surface-sunken, #eef2ff);
    color: var(--ffvr-accent, #4338ca);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}

.bios-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bio-card {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 16px;
    padding: 16px;
    background: var(--ffvr-surface-raised, white);
    border: 1px solid var(--ffvr-rule, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    align-items: start;
}

.bio-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    border-color: var(--ffvr-accent, #c7d2fe);
}

.bio-card-portrait {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--ffvr-surface-sunken, #f1f5f9);
    display: block;
}

.bio-card-portrait-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(2.4rem * var(--type-scale));
    color: var(--ffvr-ink-muted, #64748b);
}

.bio-card-body {
    min-width: 0;
}

.bio-card-header-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.bio-card-title {
    margin: 0;
    font-size: calc(1.05rem * var(--type-scale));
    font-weight: 600;
    color: var(--ffvr-ink, #1e293b);
}

.bio-card-version {
    background: var(--ffvr-accent, #eef2ff);
    color: var(--ffvr-on-accent, #4338ca);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: calc(0.7rem * var(--type-scale));
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bio-card-unauthorized {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: calc(0.7rem * var(--type-scale));
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bios-view-admin-note {
    color: var(--ffvr-accent, #92400e);
    font-style: italic;
    font-size: 0.8em;
}

.bio-card-subtitle {
    margin: 0 0 4px;
    color: var(--ffvr-ink-muted, #475569);
    font-size: calc(0.85rem * var(--type-scale));
    font-style: italic;
}

.bio-card-summary {
    margin: 4px 0 8px;
    color: var(--ffvr-ink-muted, #475569);
    font-size: calc(0.875rem * var(--type-scale));
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bio-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--ffvr-ink-faint, #64748b);
    font-size: calc(0.78rem * var(--type-scale));
    margin-bottom: 10px;
}

.bio-card-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bio-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bio-watch-btn,
.bio-play-btn,
.bio-attribution-btn,
.bio-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: calc(0.8rem * var(--type-scale));
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* PRIMARY action for a produced bio-Story (vaulting-paired-storycraft S6, Joe
   directive 2026-06-06 U132): Watch the immersive Story. The solid brand-indigo
   fill makes it the headline control; Listen is demoted to a light secondary so
   "watch or play" reads as the thing to do, not "listen". */
.bio-watch-btn {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: white;
    padding: 7px 16px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(67, 56, 202, 0.28);
}

.bio-watch-btn:hover {
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
}

/* Listen — demoted to a secondary affordance (it WAS the solid-fill headline;
   Watch now carries that weight). Light indigo, peer of View. */
.bio-play-btn {
    background: var(--ffvr-surface-raised, #eef2ff);
    color: var(--ffvr-ink, #312e81);
    border-color: var(--ffvr-rule, #c7d2fe);
}

.bio-play-btn:hover {
    background: var(--ffvr-surface, #e0e7ff);
    border-color: var(--ffvr-accent, #818cf8);
}

.bio-attribution-btn {
    background: var(--ffvr-surface-raised, white);
    color: var(--ffvr-ink, #4338ca);
    border-color: var(--ffvr-rule, #c7d2fe);
}

.bio-attribution-btn:hover {
    background: var(--ffvr-surface, #eef2ff);
    border-color: var(--ffvr-accent, #818cf8);
}

/* View button (steady-mending-anchor S2 / Stream B 4a). Sits between Listen
   and Sources. Visual key: indigo-tinted neutral, distinct from the solid-fill
   Listen and the white-on-indigo Sources. */
.bio-view-btn {
    background: var(--ffvr-surface-raised, #eef2ff);
    color: var(--ffvr-ink, #312e81);
    border-color: var(--ffvr-rule, #c7d2fe);
}

.bio-view-btn:hover:not(:disabled) {
    background: var(--ffvr-surface, #e0e7ff);
    border-color: var(--ffvr-accent, #818cf8);
}

.bio-view-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--ffvr-surface-sunken, #f1f5f9);
    color: var(--ffvr-ink-faint, #94a3b8);
    border-color: var(--ffvr-rule, #e2e8f0);
}

.bio-attribution-icon {
    font-size: calc(1rem * var(--type-scale));
    line-height: 1;
}

.bio-reorder-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: center;
}

.bio-reorder-btn {
    width: 28px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--ffvr-rule, #e2e8f0);
    background: var(--ffvr-surface-raised, white);
    color: var(--ffvr-ink, #475569);
    cursor: pointer;
    font-size: calc(0.7rem * var(--type-scale));
    transition: background 0.15s ease, border-color 0.15s ease;
    padding: 0;
    line-height: 1;
}

.bio-reorder-btn:hover:not(:disabled) {
    background: var(--ffvr-surface, #eef2ff);
    border-color: var(--ffvr-accent, #c7d2fe);
    color: var(--ffvr-ink, #4338ca);
}

.bio-reorder-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Mobile: stack portrait above body, hide reorder unless admin */
@media (max-width: 640px) {
    .bio-card {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "portrait body"
            "actions  actions"
            "reorder  reorder";
    }
    .bio-card-portrait { grid-area: portrait; width: 64px; height: 64px; }
    .bio-card-body { grid-area: body; }
    .bio-card-actions { grid-area: actions; }
    .bio-reorder-controls {
        grid-area: reorder;
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* ============================================================================
   ATTRIBUTION MODAL (deliberate-pruning-ockham S3 / D3)
   Audible narration drops attribution; modal carries the proofs.
   ============================================================================ */

.bio-attribution-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    /* 25000 dialog tier — must clear the fleet-room windows band (10300–10999),
       or the dialog opens INVISIBLE beneath the room that raised it while its
       scrim eats every click below 10001 (release-rehearsal LS-2, 2026-08-17:
       the app "froze" until the buried dialog was dismissed). */
    z-index: 25000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bio-attribution-modal-overlay.active {
    display: flex;
}

.bio-attribution-modal {
    background: white;
    border-radius: 14px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.bio-attribution-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
    color: white;
    flex-shrink: 0;
}

.bio-attribution-modal-header h3 {
    margin: 0;
    font-size: calc(1.1rem * var(--type-scale));
    font-weight: 600;
}

.bio-attribution-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: calc(0.9rem * var(--type-scale));
    line-height: 1;
}

.bio-attribution-close:hover {
    background: rgba(255,255,255,0.25);
}

.bio-attribution-context {
    margin: 16px 20px 4px;
    color: #1e293b;
    font-size: calc(1rem * var(--type-scale));
}

.bio-attribution-rule {
    margin: 0 20px 12px;
    color: #64748b;
    font-size: calc(0.8rem * var(--type-scale));
    font-style: italic;
}

.bio-attribution-body {
    overflow-y: auto;
    padding: 0 20px 20px;
    flex: 1;
}

.bio-attribution-loading,
.bio-attribution-error,
.bio-attribution-note {
    color: #64748b;
    font-size: calc(0.875rem * var(--type-scale));
    padding: 12px 0;
}

.bio-attribution-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 14px;
}

.bio-attribution-stat {
    text-align: center;
}

.bio-attribution-stat-value {
    display: block;
    font-size: calc(1.5rem * var(--type-scale));
    font-weight: 700;
    color: #312e81;
}

.bio-attribution-stat-label {
    display: block;
    font-size: calc(0.7rem * var(--type-scale));
    color: #64748b;
    margin-top: 2px;
}

.bio-attribution-asserter {
    margin: 0 0 12px;
    color: #475569;
    font-size: calc(0.8rem * var(--type-scale));
}

.bio-attribution-asserter code {
    background: #eef2ff;
    padding: 2px 6px;
    border-radius: 4px;
    color: #4338ca;
    font-size: calc(0.75rem * var(--type-scale));
}

.bio-attribution-section-title {
    margin: 16px 0 4px;
    color: #1e293b;
    font-size: calc(0.95rem * var(--type-scale));
    font-weight: 600;
}

.bio-attribution-help {
    margin: 0 0 10px;
    color: #64748b;
    font-size: calc(0.8rem * var(--type-scale));
    line-height: 1.5;
}

.bio-attribution-list {
    margin: 0;
    padding-left: 1.5em;
    list-style: decimal;
}

.bio-attribution-item {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fafbfc;
    border-left: 3px solid #c7d2fe;
    border-radius: 0 6px 6px 0;
}

.bio-attribution-excerpt {
    color: #1e293b;
    font-size: calc(0.85rem * var(--type-scale));
    line-height: 1.45;
    margin-bottom: 6px;
}

.bio-attribution-claim-row {
    color: #64748b;
    font-size: calc(0.75rem * var(--type-scale));
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.bio-attribution-claim-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: calc(0.65rem * var(--type-scale));
    font-weight: 600;
}

.bio-claim-id {
    background: #eef2ff;
    color: #4338ca;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: calc(0.7rem * var(--type-scale));
    font-family: ui-monospace, "SF Mono", monospace;
}

/* ============================================================================
   VIEW (PDF) MODAL — steady-mending-anchor S2 / Stream B 4a
   Bios row View button → modal carrying Download / Listen / Done.
   ============================================================================ */

.bio-view-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    /* 25000 dialog tier — same burial class as .bio-attribution-modal-overlay
       above (release-rehearsal LS-2): 10001 sits under the windows band. */
    z-index: 25000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bio-view-modal-overlay.active {
    display: flex;
}

.bio-view-modal {
    background: white;
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.bio-view-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
    color: white;
    flex-shrink: 0;
}

.bio-view-modal-header h3 {
    margin: 0;
    font-size: calc(1.05rem * var(--type-scale));
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
    margin-right: 12px;
}

.bio-view-modal-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: calc(0.9rem * var(--type-scale));
    line-height: 1;
    flex-shrink: 0;
}

.bio-view-modal-close:hover {
    background: rgba(255,255,255,0.25);
}

.bio-view-modal-body {
    padding: 18px 20px 20px;
}

.bio-view-modal-blurb {
    margin: 0 0 16px;
    color: #475569;
    font-size: calc(0.9rem * var(--type-scale));
    line-height: 1.5;
}

.bio-view-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bio-view-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: calc(0.85rem * var(--type-scale));
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.bio-view-modal-download {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: white;
}

.bio-view-modal-download:hover {
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
    color: white;
}

.bio-view-modal-listen {
    background: white;
    color: #4338ca;
    border-color: #c7d2fe;
}

.bio-view-modal-listen:hover {
    background: #eef2ff;
    border-color: #818cf8;
}

.bio-view-modal-done {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
    margin-left: auto;
}

.bio-view-modal-done:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

@media (max-width: 480px) {
    .bio-view-modal-actions {
        flex-direction: column;
    }
    .bio-view-modal-btn {
        justify-content: center;
        width: 100%;
    }
    .bio-view-modal-done {
        margin-left: 0;
    }
}

/* ── 🎧 Fergi AI Voice Coach card (coaching-fergi-voice S3) ──────────────────
   An unhealthy coach must LOOK unhealthy. `ffa-kg-hygiene` ran green for months
   while its output was silently discarded, so the warning states here are
   deliberately loud rather than a subtle tint. */
.voice-coach-container {
    font-size: calc(0.9rem * var(--type-scale));
}
.vc-headline {
    font-weight: 600;
    margin: 0 0 0.6rem 0;
    line-height: 1.45;
}
.vc-ok    { color: var(--text-primary, #222); }
.vc-warn  { color: #a15c00; }
.vc-error { color: #b3261e; }
.admin-card-badge.vc-warn  { background: #ffe8c2; color: #7a4500; }
.admin-card-badge.vc-error { background: #fbdad7; color: #8c1d18; }
.vc-hint {
    font-size: calc(0.82rem * var(--type-scale));
    color: var(--text-secondary, #5a6470);
    line-height: 1.5;
    margin: 0.4rem 0 0.8rem 0;
}
.voice-coach-container h4 {
    font-size: calc(0.85rem * var(--type-scale));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #5a6470);
    margin: 1rem 0 0.5rem 0;
}
.vc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(0.85rem * var(--type-scale));
}
.vc-table th,
.vc-table td {
    text-align: left;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border-color, #e3e5e8);
}
.vc-table th {
    color: var(--text-secondary, #5a6470);
    font-weight: 600;
}
.vc-proposals {
    margin: 0.2rem 0 0.6rem 1.1rem;
    padding: 0;
    line-height: 1.7;
}
.vc-pill {
    background: #ffe8c2;
    color: #7a4500;
    border-radius: 10px;
    padding: 0.05rem 0.5rem;
    font-size: calc(0.75rem * var(--type-scale));
    font-weight: 600;
}
.vc-report {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e3e5e8);
    border-radius: 8px;
    padding: 0.85rem;
    max-height: 26rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: calc(0.78rem * var(--type-scale));
    line-height: 1.5;
}

/* ── 🌊 Ripple Metrics tile (sweeping-parked-priorities S3) ──────────────── */
.ripple-metrics-container {
    font-size: calc(0.9rem * var(--type-scale));
}
.ripple-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.ripple-metric-block {
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #e3e5e8);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
}
.ripple-metric-block-wide {
    grid-column: 1 / -1;
}
.ripple-metric-label {
    font-size: calc(0.78rem * var(--type-scale));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #5a6470);
    margin-bottom: 0.45rem;
    font-weight: 600;
}
.ripple-metric-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.ripple-metric-row-single {
    color: var(--text-primary, #222);
}
.ripple-metric-cell {
    display: flex;
    flex-direction: column;
    min-width: 60px;
}
.ripple-metric-cell b {
    font-size: calc(1.25rem * var(--type-scale));
    font-weight: 700;
    color: var(--text-primary, #1f2933);
    line-height: 1.15;
}
.ripple-metric-cell span {
    font-size: calc(0.72rem * var(--type-scale));
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
}
.ripple-metric-cell-wide {
    font-size: calc(0.92rem * var(--type-scale));
}
.ripple-top-producers {
    list-style: decimal inside;
    padding-left: 0;
    margin: 0;
    columns: 2;
    column-gap: 1.25rem;
    font-size: calc(0.85rem * var(--type-scale));
}
.ripple-top-producers li {
    padding: 0.18rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    break-inside: avoid;
}
.ripple-top-producers li::marker {
    color: var(--text-secondary, #8a96a3);
}
.ripple-producer {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: calc(0.78rem * var(--type-scale));
    color: var(--text-primary, #1f2933);
    overflow-wrap: anywhere;
    flex: 1;
}
.ripple-producer-writes {
    font-weight: 600;
    color: var(--accent, #2965cc);
}
.ripple-top-empty {
    list-style: none;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}
.ripple-metric-footer {
    margin-top: 0.75rem;
    font-size: calc(0.72rem * var(--type-scale));
    color: var(--text-secondary, #8a96a3);
    border-top: 1px dashed var(--border-color, #e3e5e8);
    padding-top: 0.5rem;
}
@media (max-width: 720px) {
    .ripple-metrics-grid {
        grid-template-columns: 1fr;
    }
    .ripple-top-producers {
        columns: 1;
    }
}

/* ── Portraits master control (refining-portrait-surfaces S2) ──────────────
   The biographied-members gallery. Reuses the produced bio-Story registry;
   surface-only (no bio lock). Responsive card grid, desktop + mobile. */
#view-portraits { padding-bottom: 40px; }
.portraits-loading,
.portraits-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--ffvr-ink-muted, var(--color-text-light, #6b7280));
    font-size: calc(1.02rem * var(--type-scale));
}
.portraits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    padding: 8px 4px 24px;
}
.portrait-tile {
    display: flex;
    flex-direction: column;
    background: var(--ffvr-surface-raised, white);
    border: 1px solid var(--ffvr-rule, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.portrait-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.09);
    border-color: var(--ffvr-accent, #c7d2fe);
}
.portrait-tile-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--ffvr-surface-sunken, #eef2ff) 0%, var(--ffvr-surface, #e0e7ff) 100%);
    overflow: hidden;
}
.portrait-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}
.portrait-tile-initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(3.4rem * var(--type-scale));
    font-weight: 700;
    color: var(--ffvr-ink-faint, #a5b4fc);
    z-index: 0;
}
.portrait-tile-photo-empty .portrait-tile-initial { z-index: 2; }
.portrait-tile-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 15px 16px;
    min-width: 0;
}
.portrait-tile-namerow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.portrait-tile-name {
    margin: 0;
    font-size: calc(1.08rem * var(--type-scale));
    font-weight: 650;
    color: var(--ffvr-ink, var(--color-text, #1f2937));
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}
.portrait-tile-years {
    flex: 0 0 auto;
    font-size: calc(0.82rem * var(--type-scale));
    color: var(--ffvr-ink-faint, var(--color-text-lighter, #9ca3af));
    font-variant-numeric: tabular-nums;
}
.portrait-tile-sub {
    margin: 0;
    font-size: calc(0.88rem * var(--type-scale));
    color: var(--ffvr-ink-muted, var(--color-text-light, #6b7280));
    line-height: 1.35;
}
/* THE CONTROL ROW IS A GRID, NOT A GREEDY WRAP (fitting-rail-and-cards S2 /
   D10, Joe's walk 2026-08-12).

   It was `flex-wrap: wrap`, which packs by LABEL WIDTH: 'Living Portrait' is
   nearly three times the width of 'Watch', so each card broke at a different
   place and one card could show 'Biography' alone on a line with two controls
   beneath it. The wrap point was a property of the words, which is why no two
   cards agreed.

   auto-fit columns make it a property of the CARD instead. Every control gets
   an identical cell, the column count is whatever the card can hold, and two
   cards of the same width now break identically — including after S4 removes
   `Read`, which changes the count on every card at once. 112px is the widest
   label ('Living Portrait') at this type size plus its glyph and padding, so
   no cell truncates at the default scale. */
.portrait-tile-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 6px;
    margin-top: 2px;
    align-items: stretch;
}
.portrait-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;   /* D10: the cell is now wider than the label */
    min-width: 0;              /* D10: never push its grid column wide */
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid var(--ffvr-rule, #e2e8f0);
    border-radius: 8px;
    background: var(--ffvr-surface, #f8fafc);
    color: var(--ffvr-ink, #334155);
    font-size: calc(0.82rem * var(--type-scale));
    font-weight: 550;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    line-height: 1;
}
.portrait-act svg { flex: 0 0 auto; }
/* D10: in a grid cell the button no longer sizes itself from its label, so it
   must be told not to overflow its column. A label that cannot fit ellipses
   rather than pushing the cell wide (the `title` attribute keeps the full
   words reachable), and every control keeps the same height whatever it says. */
.portrait-act > span:not(.portrait-src-icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Curation, not reading — the mirror sits with Sources, one step quieter than
   the ways into the record (S2 / D8). */
.portrait-act-dress {
    background: var(--ffvr-surface-raised, #fff);
    border-style: dashed;
}
.portrait-act:hover { background: var(--ffvr-surface-sunken, #eef2ff); border-color: var(--ffvr-accent, #c7d2fe); color: var(--ffvr-ink, #1e293b); }
.portrait-act-watch {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}
.portrait-act-watch:hover { background: #4338ca; border-color: #4338ca; color: #fff; }
.portrait-src-icon { font-size: calc(0.95rem * var(--type-scale)); line-height: 1; }
.portrait-tile-assoc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--ffvr-rule, #e5e7eb);
}
.portrait-assoc-label {
    width: 100%;
    font-size: calc(0.72rem * var(--type-scale));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ffvr-ink-faint, var(--color-text-lighter, #9ca3af));
}
.portrait-assoc-chip {
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid var(--ffvr-rule, #e2e8f0);
    border-radius: 999px;
    background: var(--ffvr-surface-raised, #fff);
    color: var(--ffvr-ink-muted, #475569);
    font-size: calc(0.78rem * var(--type-scale));
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.portrait-assoc-chip:hover { background: var(--ffvr-surface, #f1f5f9); border-color: var(--ffvr-accent, #cbd5e1); }
@media (max-width: 640px) {
    .portraits-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
        /* 12px gutter (Greg G-146): at 2px the cards' rims touched the glass on FergiPhone. */
        padding: 8px 12px 24px;
    }
    .portrait-tile-body { padding: 11px 12px 13px; }
    .portrait-tile-name { font-size: calc(1rem * var(--type-scale)); }
    /* The name keeps the whole tile width and the dates wrap BELOW it (Greg, 2026-10-02). On a 187px phone tile
       the space-between row gave the dates the room: "Glenn Lamberton" wrapped over three lines and a long name
       beside "b. September 19, 1943" collapsed to one letter per line (measured, webkit-iphone 390). */
    .portrait-tile-namerow { flex-wrap: wrap; row-gap: 2px; }
    .portrait-tile-name { flex: 1 1 100%; min-width: 0; }
    /* F-S4-5 (proving-mobile-promises, 2026-09-17): measured 167×29 on FergiPhone —
       four actions per portrait under the 44 px effective-target floor. */
    .portrait-act { padding: 6px 9px; min-height: 44px; font-size: calc(0.8rem * var(--type-scale)); }
    /* D10 on a phone: a 150px-minimum tile cannot hold a 112px cell plus its
       padding twice over, so the desktop column would give one control per
       line and a very tall card. 92px lets two share a line on the wider
       tiles; the longest labels ellipsis there, and their `title` carries the
       full words. ⚠️ This value is the one part of D10 chosen from geometry
       rather than an eye — S4 judges it. */
    .portrait-tile-actions { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}

/* ═══ LS-embed (atelier-listen 2026-07-19) — in-surface Fergi overlay mode ═══
   body.fergi-embed-mode = this app is booted inside FFAFergiSurface's iframe on a
   produced story page (?fergi_open=1&fergi_embed=1). The LS-11 contract: the app
   shell never shows (solid stage-teal backdrop instead of the stories view), and
   the unified AI modal full-bleeds with its own chrome minimized — the ffs-bar
   outside the iframe is the ONE header. Companion JS: auth.js (sets the class),
   unified-ai-modal.js closeUnifiedAIModal (posts ffa:fergi_embed_close). */
body.fergi-embed-mode {
    background: #0d2a30;
}
/* ══ THE SHELL HIDE — truing-pocket-stagecraft S1 (#9), 2026-08-27 ══════════
   Joe's pocket walk found the contract above being violated on the path a
   family member is most likely to take into Fergi AI: reached from inside a
   produced story, the surface showed the story's own "Ask Fergi AI" return
   band, then the app's ENTIRE top-nav painted over the modal, and the
   assistant's opening message clipped mid-sentence — entering at "history.
   What would you like to do?".

   ── WHY THE OLD LIST MISSED ────────────────────────────────────────────────
   The list named six classes. Measured against the live app on 2026-08-27,
   FIVE OF THE SIX MATCH NOTHING AT ALL:

       .header         ABSENT      .control-panel  ABSENT
       .top-bar        ABSENT      .app-area       ABSENT
       .sidebar        ABSENT      .main-content   present (main#mainContent)

   Meanwhile the two nodes that actually paint the shell — `nav.top-nav` and
   the mobile tab bar — are in neither this list nor anything else keyed to
   `fergi-embed-mode`. The contract was not wrong; its IMPLEMENTATION had
   quietly decayed into a list of names for things that no longer exist, and
   the decay showed up as a composition defect rather than as an error.

   ⛔ SO THE FIX IS NOT TO ADD `.top-nav` TO THE LIST. That repairs today's
   render and rots again at the next rename — which is precisely the failure
   this file just demonstrated over roughly a year.

   ── WHAT REPLACES IT: LANDMARKS, WHICH DO NOT GET RENAMED ─────────────────
   The app shell is, structurally, the document's body-level landmark regions.
   Those are HTML element names, not project vocabulary: a future train may
   rename `.top-nav` to anything it likes and it will still be a <nav>. Today
   body's landmark children are exactly nav.top-nav / aside.side-nav /
   main.main-content — all three shell, all three hidden by the rule below,
   and any NEW shell region added later is hidden by default rather than
   discovered by a walkthrough.

   The modal layer is not a landmark, so it is untouched by construction —
   #unifiedAIModal, toasts, dictation overlays and Fergi's delegated child
   modals all keep painting. That is why this is a landmark rule and not a
   blanket `body > *:not(#unifiedAIModal)`: default-deny over EVERY body child
   would take the child-modal registry down with the shell.

   A structural rule still cannot prove it caught everything, so it does not
   have to: script.js's embed block carries a runtime guard that walks body's
   painting children in embed mode and reports anything that is neither the
   modal layer nor already hidden. The CSS makes the common case right; the
   guard makes a miss LOUD instead of silent. Neither is a list of names.

   The class list is retained beneath the landmark rule — it costs nothing,
   `.main-content` is still live, and deleting the record of what the contract
   once meant would lose the history that explains this comment. */
body.fergi-embed-mode > nav,
body.fergi-embed-mode > header,
body.fergi-embed-mode > main,
body.fergi-embed-mode > aside,
body.fergi-embed-mode > footer,
body.fergi-embed-mode .header,
body.fergi-embed-mode .top-bar,
body.fergi-embed-mode .sidebar,
body.fergi-embed-mode .control-panel,
body.fergi-embed-mode .main-content,
body.fergi-embed-mode .app-area {
    display: none !important;
}

/* ── The composer, at the other end of the same screen ─────────────────────
   truing-pocket-stagecraft S1 (#9). Joe: "the composer strip … on a white
   background against the dark modal." Same root as the header — mobile chrome
   the embed rules never covered.

   Measured cause: `.unified-ai-input-area` falls back to `background: white`
   (styles.css §.unified-ai-input-area). The two rules that would darken it are
   `body.fv-active …` (the DESKTOP vessel, never active on a phone) and
   `body.fv-mobile .mobile-ai-sheet .unified-ai-input-area` (fergi-ai-vessel.css)
   — and the embed opens the modal through openUnifiedAIModal() directly, so it
   never carries `.mobile-ai-sheet` and every mobile-only Fergi paint rule
   misses it. The messages well was measured at rgb(11,9,36) with the composer
   at rgb(255,255,255) directly beneath.

   Deliberately NOT media-gated, matching script.js's embed block: the iframe
   viewport IS the full-bleed overlay on every surface, including pocket
   landscape and a desktop story page. Values are the dark-glass treatment from
   fergi-ai-vessel.css § "the bottom chrome joins the vessel" — the one place
   to change if that palette moves. */
body.fergi-embed-mode .unified-ai-input-area {
    background: linear-gradient(180deg, rgba(14, 22, 52, .92), rgba(10, 16, 44, .98)) !important;
    border-top: 1px solid rgba(214, 120, 190, .35) !important;
    box-shadow: 0 -6px 22px rgba(157, 95, 224, .25);
}
body.fergi-embed-mode #unifiedAIInput {
    background: linear-gradient(180deg, rgba(11, 33, 62, .88), rgba(10, 28, 54, .78)) !important;
    border: 1px solid rgba(214, 120, 190, .33) !important;
    border-radius: 999px;
    color: #f5f7ff !important;
}
body.fergi-embed-mode #unifiedAIInput::placeholder {
    color: rgba(226, 208, 255, .62);
}
body.fergi-embed-mode #unifiedAIModal {
    /* full-bleed: the modal IS the page inside the iframe */
    position: fixed;
    inset: 0;
    padding: 0;
}
body.fergi-embed-mode #unifiedAIModal .unified-ai-container {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
/* the ffs-bar outside the iframe is the single header; hide the modal's own
   minimize control (minimize has no meaning inside the overlay) */
body.fergi-embed-mode #unifiedAIModal .unified-ai-minimize,
body.fergi-embed-mode #unifiedAIModal .unified-ai-maximize {
    display: none !important;
}

/* ==========================================================================
   COMMUNITY SERVICE — DOCUMENT LANE (widening-tagging-coverage S2, 2026-07-27)
   Joe directive 2026-07-26: documents show up in Community Service alongside
   photos. A document has no face box, so this is a READING surface, not a
   looking one: the type scale, measure, and quote treatment do the work the
   face crop does in the other lane.
   Mobile-first — the single-column stack IS the base rule; the desktop
   two-up suggestion row is the enhancement above 700px.
   ========================================================================== */

/* --- lane switch (lives in the modal header, beside the CS toggle) --- */
.ft-lane-switch {
  display: flex;
  gap: 2px;
  padding: 0 0.75rem;
  flex-shrink: 0;
}

.ft-lane-btn {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.35rem 0.7rem;
  font-size: calc(0.8rem * var(--type-scale));
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  min-height: 34px;
}
.ft-lane-btn:first-child { border-radius: 6px 0 0 6px; }
.ft-lane-btn:last-child  { border-radius: 0 6px 6px 0; }
.ft-lane-btn:hover { background: rgba(255, 255, 255, 0.22); }
.ft-lane-btn.active {
  background: #fff;
  color: var(--color-primary, #2c3e50);
  font-weight: 700;
}

/* --- the lane body --- */
.dtq-lane {
  padding: 1rem;
  max-width: 46rem;      /* a reading measure, not a gallery width */
  margin: 0 auto;
}

.dtq-stale {
  background: rgba(240, 147, 43, 0.12);
  border-left: 3px solid #f0932b;
  color: var(--color-text, #2c3e50);
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  font-size: calc(0.85rem * var(--type-scale));
  margin-bottom: 0.9rem;
}

.dtq-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-muted, #7f8c8d);
  margin-bottom: 0.9rem;
}
.dtq-progress-total { margin-left: auto; }
.dtq-progress-stats { font-variant-numeric: tabular-nums; }

.dtq-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e1e4e8);
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dtq-title {
  margin: 0 0 0.25rem;
  font-size: calc(1.25rem * var(--type-scale));
  line-height: 1.3;
  color: var(--color-text, #2c3e50);
}

.dtq-date {
  font-size: calc(0.8rem * var(--type-scale));
  color: var(--color-text-muted, #7f8c8d);
  margin-bottom: 0.75rem;
}

/* The question is the loudest thing on the card — it is what the family
   member is here to answer. */
.dtq-prompt {
  font-size: calc(1rem * var(--type-scale));
  line-height: 1.5;
  color: var(--color-text, #2c3e50);
  margin: 0.75rem 0 1rem;
  font-weight: 500;
}

.dtq-already {
  font-size: calc(0.85rem * var(--type-scale));
  color: var(--color-text-muted, #7f8c8d);
  margin-bottom: 0.9rem;
}
.dtq-chip {
  display: inline-block;
  background: rgba(102, 126, 234, 0.12);
  color: #4a5cb8;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin: 0 0.25rem;
  font-size: calc(0.8rem * var(--type-scale));
}

.dtq-evidence-label,
.dtq-desc-label,
.dtq-suggestions-label {
  font-size: calc(0.75rem * var(--type-scale));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #7f8c8d);
  margin-bottom: 0.35rem;
}

.dtq-quote {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--color-primary, #667eea);
  border-radius: 0 4px 4px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: calc(0.95rem * var(--type-scale));
  line-height: 1.6;
  color: var(--color-text, #2c3e50);
}

.dtq-desc p {
  margin: 0 0 1rem;
  font-size: calc(0.9rem * var(--type-scale));
  line-height: 1.6;
  color: var(--color-text-muted, #566573);
}

.dtq-open {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: calc(0.9rem * var(--type-scale));
  color: var(--color-primary, #667eea);
  text-decoration: none;
  font-weight: 500;
  min-height: 44px;          /* touch target */
  line-height: 44px;
}
.dtq-open:hover { text-decoration: underline; }

/* --- suggestions: the tagger's own shortlist, one tap each --- */
.dtq-suggestions { margin: 0.5rem 0 1.25rem; }

.dtq-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  background: rgba(102, 126, 234, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.35);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dtq-suggestion:hover {
  background: rgba(102, 126, 234, 0.16);
  border-color: rgba(102, 126, 234, 0.6);
}
.dtq-suggestion-name {
  font-weight: 600;
  font-size: calc(1rem * var(--type-scale));
  color: var(--color-text, #2c3e50);
}
.dtq-suggestion-disambig {
  font-weight: 400;
  color: var(--color-text-muted, #7f8c8d);
  font-size: calc(0.85rem * var(--type-scale));
}

.dtq-suggestion-surface {
  font-size: calc(0.8rem * var(--type-scale));
  color: var(--color-text-muted, #7f8c8d);
}

.dtq-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dtq-action { min-height: 48px; width: 100%; }

.dtq-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.7rem 0.9rem;
  background: rgba(46, 204, 113, 0.12);
  border-radius: 8px;
  font-size: calc(0.9rem * var(--type-scale));
}
.dtq-undo-btn {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  min-height: 40px;
  font-weight: 600;
}

.dtq-done {
  padding: 3rem 1.5rem;
  text-align: center;
  max-width: 34rem;
  margin: 0 auto;
}
.dtq-done-icon { font-size: 3rem; margin-bottom: 1rem; }
.dtq-done h3 { margin: 0 0 0.5rem; }
.dtq-done p { color: var(--color-text-muted, #7f8c8d); }
.dtq-done-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* --- desktop enhancement: side-by-side actions once there is room --- */
@media (min-width: 700px) {
  .dtq-lane { padding: 1.5rem; }
  .dtq-actions { flex-direction: row; }
  .dtq-action { width: auto; flex: 1; }
}

/* --- narrow phones: the header lane switch drops its glyph labels --- */
@media (max-width: 480px) {
  .ft-lane-switch { padding: 0 0.4rem; }
  .ft-lane-btn { padding: 0.35rem 0.5rem; font-size: calc(0.75rem * var(--type-scale)); }
  .dtq-lane { padding: 0.75rem; }
  .dtq-card { padding: 1rem; border-radius: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLUSTER SWEEP — bulk cluster confirmation grid
   (sweeping-cluster-confirmations S3, 2026-07-28)

   Mobile-first — the single-column overlay IS the base rule (43 Fergusons on
   phones); the wider grid + roomier shell above 700px is the enhancement.
   Color is information: green ring = will be confirmed, red = not them,
   gray = skipped (stays in the queue). One tap cycles a cell through the
   three states; the footer confirms the whole screen.
   ═══════════════════════════════════════════════════════════════════════════ */

.csweep-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15, 18, 30, 0.96);
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.csweep-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    height: 100%;
}

.csweep-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.csweep-title {
    flex: 1;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csweep-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    color: #e8eaf2;
}

.csweep-intro {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #c3c8d8;
}

.csweep-muted { color: #8b90a5; }
.csweep-error { color: #ff8a8a; }

/* ── Queue view ── */
.csweep-queue {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.csweep-person-card {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: #1e2233;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.csweep-person-card:active { background: #262b40; }
.csweep-person-name { font-size: 15px; font-weight: 600; }
.csweep-person-meta { font-size: 12px; color: #9aa0b5; white-space: nowrap; }

.csweep-done { text-align: center; padding: 48px 20px; color: #c3c8d8; }
.csweep-done-mark { font-size: 42px; margin-bottom: 10px; }

/* ── Grid view — tri-state cells ── */
.csweep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
    padding-bottom: 90px; /* room above the sticky footer */
}

.csweep-cell {
    position: relative;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #14172a;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

.csweep-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csweep-cell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: #fff;
}

.csweep-cell-prov {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 4px;
    font-size: 10px;
    color: #d7dbe8;
    background: rgba(10, 12, 22, 0.72);
    text-align: left;
    pointer-events: none;
}

.csweep-state-confirm { border-color: #2e9e6b; }
.csweep-state-confirm .csweep-cell-badge { background: #2e9e6b; }
.csweep-state-confirm .csweep-cell-badge::before { content: '✓'; }

.csweep-state-reject { border-color: #d64545; }
.csweep-state-reject img { filter: grayscale(0.6) brightness(0.8); }
.csweep-state-reject .csweep-cell-badge { background: #d64545; }
.csweep-state-reject .csweep-cell-badge::before { content: '✕'; }

.csweep-state-skip { border-color: #5a6076; }
.csweep-state-skip img { filter: grayscale(1) brightness(0.55); }
.csweep-state-skip .csweep-cell-badge { background: #5a6076; }
.csweep-state-skip .csweep-cell-badge::before { content: '–'; }

/* ── Footer (sticky confirm bar) ── */
.csweep-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 18, 30, 0.98);
}

.csweep-footer-note { font-size: 12px; color: #9aa0b5; }

.csweep-btn {
    border: none;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
    padding: 10px 16px;
    /* Measured on FergiPhone, deployed v1.1.255: `✓ Confirm 14 as Joe` drew
       359x42 — the control that writes fourteen face identities, two px under
       the iOS HIG floor the census asserts as C6. The ghost buttons were fixed
       by their own min-width/min-height; this is the shared base, so the floor
       belongs HERE rather than on each button that happens to get measured.
       (surfacing-desktop-rooms-mobile S3) */
    min-height: 44px;
}

.csweep-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    /* 44, not 42. Measured on FergiPhone 2026-09-21: `✕` drew 42x44 — two pixels
       under the iOS HIG floor the census asserts as C6, on the control that
       LEAVES the Room. `←` was already 46 wide only because its glyph is wider.
       (surfacing-desktop-rooms-mobile S3) */
    min-width: 44px;
    min-height: 44px;
}

.csweep-btn-confirm {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    color: #06251c;
    font-weight: 700;
    font-size: 15px;
    flex: 1;
    max-width: 420px;
}

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

/* ── THE MOBILE SHELL: the Face Tagging Room sits BETWEEN the vault's bands ──
   (surfacing-desktop-rooms-mobile S3, 2026-09-21)

   Measured on FergiPhone (iPhone 17 Pro, 402x660) before this block: the overlay
   at `inset: 0; z-index: 100000` covered the Window Frame's always-visible
   Header — `document.elementFromPoint()` at the header band's centre returned
   `csweepTitle` — and the tab bar (11000) with it. Two invariants broken by one
   rule.

   ⛔ SCOPED TO THE MOBILE SHELL, DELIBERATELY. On the desktop this overlay is
   opened from a button INSIDE the Face Training modal (ffa-curator.js:3019) and
   100000 is what keeps it above its own opener; lowering it globally would bury
   the Room behind the door it was opened from. The breakpoint is mobile.css's
   own 767px, the same one `.ffa-mobile-modal-chrome` is declared inside — the
   two must agree or the overlay takes the anchors without the band.

   10300 is the established mobile-full-screen-room band (Z_INDEX_HIERARCHY.md
   Tier 5 neighbourhood): Mobile Face Training, mobile photo face tagging and the
   phone Dressing Room are already there. Below Fergi AI's universal child z-cap
   (10350) by design, and below `.top-nav` (11500) + `.mobile-tab-bar` (11000),
   which is the whole point. */
@media (max-width: 767px) {
    .csweep-overlay {
        z-index: 10300;
    }
    /* The chrome contract already starts this overlay BELOW the notch — the
       header band owns the safe-area inset. Keeping the topbar's own
       `env(safe-area-inset-top)` here would inset it a second time and push the
       Room's title a Dynamic Island further down the glass. */
    .csweep-overlay.ffa-mobile-modal-chrome .csweep-topbar {
        padding-top: 10px;
    }
}

/* ── ≥700px enhancement — roomier shell, denser grid ── */
@media (min-width: 700px) {
    .csweep-shell { padding: 0 24px; }
    .csweep-body { padding: 20px 8px; }
    .csweep-queue { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .csweep-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .csweep-title { font-size: 19px; }
    .csweep-footer { justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEED PICKER — point once at a face the Vault has never seen
   (enrolling-companion-likenesses S5, 2026-07-30)

   Cluster Sweep's sibling, and deliberately NOT its twin. The sweep shows
   crops because the Vault already has an opinion about each one; this surface
   shows the WHOLE photograph because it has none — a cropped face of a person
   nobody has ever named carries no information a human can act on. So the
   photograph is the cell, the faces are boxes over it, and the boxes carry the
   only distinction that matters here: already-named (muted, inert) versus
   unaccounted-for (live, tappable). One tap is one confirmation.

   Mobile-first, same as the sweep: the single-column stage IS the base rule.
   ═══════════════════════════════════════════════════════════════════════════ */

.seedpick-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15, 18, 30, 0.96);
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.seedpick-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    height: 100%;
}

.seedpick-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.seedpick-title {
    flex: 1;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seedpick-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    color: #e8eaf2;
}

.seedpick-intro {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #c3c8d8;
}

.seedpick-muted { color: #8b90a5; }
.seedpick-error { color: #ff8a8a; }

/* ── Queue view — one card per unreachable person ── */
.seedpick-queue {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.seedpick-person-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 14px 16px;
    background: #1e2233;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.seedpick-person-card:active { background: #262b40; }
.seedpick-person-name { font-size: 15px; font-weight: 600; }
.seedpick-person-meta { font-size: 12px; color: #9aa0b5; text-align: right; }
.seedpick-person-need {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #d9a4f0;
}

.seedpick-done { text-align: center; padding: 48px 20px; color: #c3c8d8; }
.seedpick-done-mark { font-size: 42px; margin-bottom: 10px; }

/* ── Photo view — the stage and its face boxes ── */
/* The stage SHRINK-WRAPS the rendered image (width:fit-content + an img that
   is never letterboxed), because the face boxes are positioned in percentages
   of the stage. Any gap between the stage box and the pixels — an object-fit
   letterbox, a fixed aspect — puts every box in the wrong place. */
.seedpick-stage {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    line-height: 0;
    background: #0c0e1a;
    border-radius: 10px;
    overflow: hidden;
}

.seedpick-photo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 62vh;
}

.seedpick-box {
    position: absolute;
    padding: 0;
    margin: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
}

/* already named — inert context, never competes for the tap */
.seedpick-box-known {
    border: 2px solid rgba(150, 158, 185, 0.55);
    pointer-events: none;
}

/* Inside the box, not below it: a face at the bottom edge of the photograph
   would have its label clipped by the stage's overflow. */
.seedpick-box-known .seedpick-box-label {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 1px 4px;
    font-size: 10px;
    line-height: 1.3;
    color: #cdd2e2;
    background: rgba(10, 12, 22, 0.78);
    border-radius: 0 0 4px 4px;
    white-space: nowrap;
}

/* unaccounted for — the live target */
.seedpick-box-open {
    border: 3px solid #ffd166;
    box-shadow: 0 0 0 2px rgba(12, 14, 26, 0.6);
    cursor: pointer;
}

.seedpick-box-open:hover,
.seedpick-box-open:active {
    border-color: #38ef7d;
    background: rgba(56, 239, 125, 0.16);
}

.seedpick-box-open .seedpick-box-label {
    position: absolute;
    top: -2px;
    left: -2px;
    min-width: 18px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    color: #241a00;
    background: #ffd166;
    border-radius: 5px 0 5px 0;
}

.seedpick-context {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #c3c8d8;
}

/* The namesake caution — loud enough to stop a tap, not loud enough to read
   as an error. It appears exactly where the wrong tap would happen. */
.seedpick-warn {
    margin: 10px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #ffe6b0;
    background: rgba(255, 209, 102, 0.12);
    border-left: 3px solid #ffd166;
    border-radius: 0 8px 8px 0;
}

/* ── Footer ── */
.seedpick-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 18, 30, 0.98);
}

.seedpick-footer-note { font-size: 12px; color: #9aa0b5; }

.seedpick-btn {
    border: none;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
    padding: 10px 16px;
}

.seedpick-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    min-width: 42px;
}

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

/* ── ≥700px enhancement ── */
@media (min-width: 700px) {
    .seedpick-shell { padding: 0 24px; }
    .seedpick-body { padding: 20px 8px; }
    .seedpick-queue { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .seedpick-title { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT FOCUS — the ranked attribution walk
   (ordering-document-attribution S2, 2026-07-28)

   The FFA Window Frame in miniature: the rail on the LEFT occupies the slot
   the target-faces panel occupies in the face lane, and the document occupies
   the App-Panel slot on the right. Same geometry, different question — the
   rail lists PEOPLE THE DOCUMENT IS ABOUT, never face detections, and the
   styling deliberately avoids every face-lane cue (no crop tiles, no
   confidence rings) so the two are never mistaken for each other.

   z-index 10250: above the Face Tagging modal (10003), below the shared
   person selector (10300) — the picker opens on top of this, which is the
   whole "supplement the list" gesture.

   Mobile-first: the rail stacks ABOVE the document below 820px (43 Fergusons
   on phones), and becomes a true left column at desktop width.
   ═══════════════════════════════════════════════════════════════════════════ */

.dfocus-overlay {
    position: fixed;
    inset: 0;
    /* 100000 — the SIBLING-MODE convention, matched deliberately (Cluster Sweep
       .csweep-overlay and Ship-First both sit here). S2 shipped 10250, reasoning
       from `.face-training-modal`'s STATIC z-index of 10003 — but that modal is a
       MANAGED WINDOW (scene-manager.js registers `faceTrainingModal` as the
       primary), so FFVWindowManager assigns it inline focus-order z in the
       10300–10999 band, which beat 10250 and left Document Focus opening BEHIND
       Face Tagging mid-walk (Joe, live 2026-07-28: "it looks like you are trying
       to do two things at once"). Entry stays a NON-destructive cover, exactly as
       the siblings do it: Face Tagging keeps its position and its write queue
       underneath, and closing returns to it. Do not reason from a static z-index
       for any surface inside the managed-window band. */
    z-index: 100000;
    /* OPAQUE, not translucent. At 0.97 the page behind bled through the
       document title badly enough to hurt reading — and reading is the whole
       act this surface exists for. */
    background: #0f121e;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.dfocus-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    color: #e8eaf2;
}

.dfocus-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dfocus-title {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.dfocus-filter {
    background: #1e2233;
    color: #e8eaf2;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
}

.dfocus-position {
    flex: 1;
    text-align: right;
    font-size: 13px;
    color: #9aa0b5;
    font-variant-numeric: tabular-nums;
}

.dfocus-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── The left rail — attributed PEOPLE (never faces) ── */

.dfocus-rail {
    flex: 0 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

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

.dfocus-rail-title { font-size: 14px; font-weight: 600; color: #fff; }
.dfocus-rail-count { font-size: 12px; color: #9aa0b5; white-space: nowrap; }

.dfocus-rail-note {
    margin: 6px 0 12px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #8b90a5;
}

.dfocus-rail-empty {
    margin: 0 0 12px;
    font-size: 13px;
    color: #8b90a5;
    font-style: italic;
}

.dfocus-rail-list { display: flex; flex-direction: column; gap: 8px; }

.dfocus-person {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: #1e2233;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.dfocus-person-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #2b3048;
}

.dfocus-person-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #c3c8d8;
}

.dfocus-person-body { flex: 1; min-width: 0; }
.dfocus-person-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dfocus-person-hows { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

/* Machine-derived attributions read differently from human ones on purpose —
   they are the ones most worth a second look in this pass. */
.dfocus-how {
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(56, 239, 125, 0.14);
    color: #8ee6b4;
}

.dfocus-how.is-machine {
    background: rgba(255, 255, 255, 0.08);
    color: #9aa0b5;
}

.dfocus-person-remove {
    flex: 0 0 auto;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: #c3c8d8;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    font-size: 14px;
    cursor: pointer;
}

.dfocus-person-remove:hover { background: rgba(214, 69, 69, 0.85); color: #fff; }

.dfocus-add {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #e8eaf2;
    border-radius: 10px;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.dfocus-add:hover { background: rgba(255, 255, 255, 0.06); }

.dfocus-undo {
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: rgba(240, 147, 43, 0.18);
    color: #f0932b;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
}

/* ── The stage — the document itself ── */

.dfocus-stage {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px 24px;
}

.dfocus-muted { color: #8b90a5; }
.dfocus-error { color: #ff8a8a; padding: 24px 0; }

.dfocus-doc { display: flex; flex-direction: column; gap: 16px; }

.dfocus-preview {
    display: block;
    align-self: flex-start;
    max-width: 260px;
    border-radius: 10px;
    overflow: hidden;
    background: #14172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dfocus-preview img { display: block; width: 100%; height: auto; }
.dfocus-preview.is-blank { min-height: 120px; min-width: 100px; }

.dfocus-doc-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    color: #fff;
}

.dfocus-doc-file { margin-top: 4px; font-size: 12px; color: #8b90a5; }

.dfocus-doc-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.dfocus-fact {
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: #c3c8d8;
}

.dfocus-doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.dfocus-open {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}

.dfocus-why {
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: #c3c8d8;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.dfocus-tail-warn {
    margin-top: 14px;
    padding: 10px 12px;
    border-left: 3px solid #f0932b;
    background: rgba(240, 147, 43, 0.10);
    color: #f6c58a;
    font-size: 12.5px;
    line-height: 1.45;
    border-radius: 0 8px 8px 0;
}

.dfocus-why-panel {
    margin-top: 14px;
    padding: 12px;
    background: #1a1e2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.dfocus-why-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dfocus-why-table th {
    text-align: left;
    color: #8b90a5;
    font-weight: 600;
    padding: 4px 8px 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dfocus-why-table td {
    padding: 5px 8px 5px 0;
    color: #d7dbe8;
    font-variant-numeric: tabular-nums;
}

.dfocus-why-sum { margin: 10px 0 0; font-size: 13px; color: #e8eaf2; }
.dfocus-why-note { margin: 8px 0 0; font-size: 11.5px; color: #8b90a5; line-height: 1.45; }
.dfocus-why-note code { font-size: 11px; color: #a8b0c8; }

/* ── Footer — the stepping bar ── */

.dfocus-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* The mobile tab bar (z 11000) sits ABOVE this overlay, so the stepping
       bar reserves its height per the mobile chrome contract
       (css/mobile-tab-bar.css § reservation) rather than fighting it for a
       z-index it should not win — the picker at 10300 has to stay above us. */
    padding: 12px 14px calc(12px + var(--mobile-modal-bottom-reservation, env(safe-area-inset-bottom)));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #0f121e;
}

.dfocus-footer-note { font-size: 11.5px; color: #8b90a5; text-align: center; }
.dfocus-footer-note kbd {
    display: inline-block;
    padding: 1px 5px;
    margin: 0 1px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.10);
    font-family: inherit;
    font-size: 10.5px;
    color: #c3c8d8;
}

.dfocus-add kbd {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.10);
    font-family: inherit;
    font-size: 10.5px;
}

.dfocus-btn {
    border: none;
    border-radius: 8px;
    font: inherit;
    cursor: pointer;
    padding: 10px 16px;
}

.dfocus-btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; min-width: 42px; }

.dfocus-btn-step {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.dfocus-btn-step:disabled { opacity: 0.35; cursor: default; }

.dfocus-done { text-align: center; padding: 48px 20px; color: #c3c8d8; }
.dfocus-done-mark { font-size: 42px; margin-bottom: 10px; }

/* Below 820px the title leads and the preview is capped: on a phone the
   full-width first page pushed the document's NAME below the fold, which is
   the one thing the walker is reading. */
@media (max-width: 819px) {
    .dfocus-doc-body { order: -1; }
    /* Keyboard hints are noise on a phone — the buttons are the affordance,
       and the corpus count is the thing worth the space. */
    .dfocus-keyhints,
    .dfocus-add kbd { display: none; }
    .dfocus-footer-note { font-size: 11px; }
    .dfocus-preview { max-height: 38vh; max-width: 60%; }
    .dfocus-preview img { max-height: 38vh; width: auto; }
}

/* ── ≥820px — the rail becomes a true left column (the Window Frame shape) ── */
@media (min-width: 820px) {
    .dfocus-main { flex-direction: row; }
    .dfocus-rail {
        flex: 0 0 300px;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        padding: 18px 16px;
    }
    .dfocus-stage { padding: 22px 26px 30px; }
    .dfocus-doc { flex-direction: row; align-items: flex-start; }
    .dfocus-preview { flex: 0 0 240px; max-width: 240px; }
    .dfocus-doc-body { flex: 1; min-width: 0; }
    .dfocus-doc-title { font-size: 23px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tier-gated controls — BR-25 · BR-28 · BR-108 (unifying-vault-spine S7)
   ═══════════════════════════════════════════════════════════════════════════

   The declarative per-control tier gate specified at
   docs/rooms-blueprint/rooms/13-family-navigator.md:216-217 — "three Rooms now,
   which is S5's argument for a declarative `data-min-tier` attribute rather than
   three bespoke checks."

   Mark a control with data-min-tier="family_member" (or "administrator") and it
   disappears for tiers below it. `AccessTierManager.applyNavGating()` stamps
   <body data-access-tier="..."> at the single chokepoint every effective-tier
   transition already funnels through (guest-mode.js).

   WHY CSS AND NOT A JS SWEEP. These controls are rendered LAZILY — Browse Media's
   seven writing controls do not exist until its modal opens, which happens long
   after any tier transition fires. A JS pass would need re-running at every render
   site, and the site someone forgot would quietly offer a guest a Delete button.
   A CSS rule applies to markup that has not been created yet.

   FAIL-OPEN TO NON-GUEST, by construction and by BR-25's explicit instruction:
   if the tier cannot be resolved, <body> carries no data-access-tier, no rule
   below matches, and NOTHING is hidden. The backend GuestMutationGuard is the
   authoritative gate either way. This is manners — declining to offer a guest a
   button that would 403 — not access control, and it must never hide a control
   from a family member because tier resolution hiccuped.

   Reversal (Joe, per BR-25/BR-28/BR-108's stated alternatives): "let guests see
   what they can't do" → swap `display: none` for a disabled+tooltip treatment
   here, in this one block. The backend gate is unchanged either way. */

body[data-access-tier="guest"] [data-min-tier="family_member"],
body[data-access-tier="guest"] [data-min-tier="administrator"],
body[data-access-tier="family_member"] [data-min-tier="administrator"] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLUSTER REVIEW — the hand of faces (dealing-face-clusters S2, 2026-08-04)

   Mobile-first: the single-column overlay IS the base rule (43 Fergusons on
   phones, and couch-review at cluster granularity is a design target); the
   wider grid above 700px is the enhancement. Cluster Sweep's chassis, on
   purpose — the two surfaces are the same act at different grain, and a
   reviewer moving between them should not have to re-learn the room.

   COLOR IS INFORMATION, never decoration:
     green ring  = kept, will be named
     red ring    = cut out of the hypothesis (nothing is written about it)
     cohesion band (green/amber/red text chip) = how tight the weakest pair is
   The three ways of DISAGREEING (cut a face, reject the grouping, retire the
   hand) are laid out beside the confirm button at the same weight, because a
   grid that makes yes the cheap gesture manufactures wrong identities at
   cluster speed — the standing rail of this train, expressed in layout.
   ═══════════════════════════════════════════════════════════════════════════ */

.cdeal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;   /* same tier as .csweep-overlay / Ship-First */
    /* OPAQUE, not translucent. Shipped at 0.96 and the page behind bled through
       the grid — the S2 render proof caught the login screen's "Password" /
       "Sign In" showing between the crops. Document Focus already learned this
       exact lesson at 0.97 ("reading is the whole act this surface exists for");
       here the act is COMPARING FACES, which is even less forgiving of a second
       image ghosting under the one you are judging. `.csweep-overlay` still
       carries the translucent value — its own debt, deliberately not swept from
       this train. */
    background: #0f121e;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.cdeal-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    height: 100%;
}

.cdeal-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cdeal-titles { flex: 1; min-width: 0; text-align: center; }

.cdeal-title {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cdeal-subtitle {
    font-size: 12px;
    color: #9aa0b5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cdeal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    color: #e8eaf2;
}

.cdeal-intro { margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: #c3c8d8; }
.cdeal-muted { color: #8b90a5; }
.cdeal-error { color: #ff8a8a; }
.cdeal-note { font-size: 12px; color: #8b90a5; margin: 10px 0 0; }
.cdeal-h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
            color: #8b90a5; margin: 18px 0 8px; font-weight: 600; }

/* ── Tray view ── */
.cdeal-trays { display: grid; grid-template-columns: 1fr; gap: 8px; }

.cdeal-tray {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 15px;
    background: #1e2233;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.cdeal-tray:active { background: #262b40; }
.cdeal-tray-name { font-size: 15px; font-weight: 600; }
.cdeal-tray-meta { font-size: 12px; color: #9aa0b5; }

.cdeal-done { text-align: center; padding: 48px 20px; color: #c3c8d8; }
.cdeal-done-mark { font-size: 42px; margin-bottom: 10px; }

/* ── Provenance chips ── */
.cdeal-prov { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.cdeal-chip {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: #c3c8d8;
    white-space: nowrap;
}

.cdeal-chip-sit { background: rgba(109, 40, 217, 0.28); color: #ddd6fe; }
.cdeal-band-strong { background: rgba(46, 158, 107, 0.22); color: #7fe3b4; }
.cdeal-band-fair   { background: rgba(214, 158, 69, 0.22); color: #f3ce8e; }
.cdeal-band-loose  { background: rgba(214, 69, 69, 0.22);  color: #ffa8a8; }
.cdeal-band-none   { background: rgba(255, 255, 255, 0.07); color: #9aa0b5; }

/* ── The hand ── */
.cdeal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.cdeal-cell {
    position: relative;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #14172a;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

.cdeal-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cdeal-cell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: #fff;
}

.cdeal-cell-key {
    position: absolute;
    bottom: 3px;
    left: 4px;
    font-size: 10px;
    color: #cfd4e4;
    background: rgba(10, 12, 22, 0.7);
    border-radius: 4px;
    padding: 0 4px;
    pointer-events: none;
}

.cdeal-cell-peek {
    position: absolute;
    bottom: 3px;
    right: 4px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    background: rgba(10, 12, 22, 0.72);
    border-radius: 4px;
    padding: 3px 5px;
    cursor: zoom-in;
}

.cdeal-keep { border-color: #2e9e6b; }
.cdeal-keep .cdeal-cell-badge { background: #2e9e6b; }
.cdeal-keep .cdeal-cell-badge::before { content: '✓'; }

.cdeal-cut { border-color: #d64545; }
.cdeal-cut img { filter: grayscale(0.75) brightness(0.72); }
.cdeal-cut .cdeal-cell-badge { background: #d64545; }
.cdeal-cut .cdeal-cell-badge::before { content: '✕'; }

.cdeal-focus { box-shadow: 0 0 0 2px #ddd6fe; }

.cdeal-cut-note { font-size: 12px; color: #9aa0b5; margin: 10px 0 4px; line-height: 1.4; }

/* ── Person picker ── */
.cdeal-picker { margin-top: 6px; }

.cdeal-cast { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.cdeal-cast-label { font-size: 11px; color: #8b90a5; }

.cdeal-cast-chip {
    font: inherit;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #e8eaf2;
    cursor: pointer;
}

.cdeal-cast-chip:active,
.cdeal-cast-on { background: #6d28d9; border-color: #ddd6fe; color: #fff; }

.cdeal-search { position: relative; }

.cdeal-input {
    width: 100%;
    font: inherit;
    font-size: 15px;
    padding: 11px 13px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #14172a;
    color: #fff;
}

.cdeal-input::placeholder { color: #6f748a; }

.cdeal-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 2;
    background: #1e2233;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}

.cdeal-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 15px;
    padding: 11px 13px;
    background: transparent;
    border: none;
    color: #e8eaf2;
    cursor: pointer;
}

.cdeal-suggest-item:hover { background: #2a3049; }
.cdeal-suggest-empty { padding: 11px 13px; font-size: 13px; color: #8b90a5; }

.cdeal-chosen { min-height: 0; margin-top: 8px; }

.cdeal-chosen-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border-radius: 999px;
    background: #6d28d9;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.cdeal-chosen-chip button {
    border: none;
    background: rgba(0, 0, 0, 0.22);
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.cdeal-keys { display: none; }

/* ── Footer — the four verdicts ── */
.cdeal-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 18, 30, 0.98);
}

.cdeal-footer-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cdeal-footer-meta {
    justify-content: space-between;
    font-size: 11px;
    color: #8b90a5;
}

.cdeal-tally { flex: 1; min-width: 0; }

.cdeal-btn { border: none; border-radius: 8px; font: inherit; cursor: pointer; padding: 10px 14px; }
.cdeal-btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; min-width: 42px; }

.cdeal-btn-confirm {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    color: #06251c;
    font-weight: 700;
    font-size: 15px;
    flex: 1 1 100%;
}

.cdeal-btn-confirm:disabled {
    background: rgba(255, 255, 255, 0.09);
    color: #8b90a5;
    cursor: default;
}

/* Disagreement is a peer of agreement, not a menu item behind it. */
.cdeal-btn-split,
.cdeal-btn-ignore,
.cdeal-btn-skip {
    flex: 1 1 0;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    color: #e8eaf2;
    border: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
}

.cdeal-btn-split:active  { background: rgba(214, 69, 69, 0.3); }
.cdeal-btn-ignore:active { background: rgba(255, 255, 255, 0.18); }

/* ── Photo peek — the whole photograph behind a crop ── */
.cdeal-peek {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(8, 10, 18, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    cursor: zoom-out;
}

.cdeal-peek img { max-width: 100%; max-height: 78vh; border-radius: 8px; }
.cdeal-peek p { color: #c3c8d8; font-size: 13px; text-align: center; margin: 0; }

/* ── ≥700px enhancement — denser grid, one-row footer, keyboard legend ── */
@media (min-width: 700px) {
    .cdeal-shell { padding: 0 24px; }
    .cdeal-body { padding: 20px 8px; }
    .cdeal-trays { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .cdeal-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .cdeal-title { font-size: 19px; }
    .cdeal-btn-confirm { flex: 2 1 320px; }
    .cdeal-btn-split, .cdeal-btn-ignore, .cdeal-btn-skip { flex: 0 1 auto; }
    .cdeal-keys { display: block; font-size: 11px; color: #6f748a; margin: 14px 0 0; }
    .cdeal-keys kbd {
        font-family: inherit;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        padding: 1px 5px;
        color: #c3c8d8;
    }
}

/* ── Cluster Sheet — many clusters at once (bulk face surface) ───────────── */
.csheet-overlay{position:fixed;inset:0;z-index:12000;background:rgba(6,10,20,.97);display:flex;align-items:stretch;justify-content:center}
.csheet-shell{display:flex;flex-direction:column;width:100%;max-width:1500px;padding:14px 18px;gap:10px}
.csheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.csheet-title{font-size:1.25rem;font-weight:700;color:#e8edf7}
.csheet-sub{font-size:.85rem;color:#8b95ab}
.csheet-x{background:#1b2334;color:#cbd5e5;border:none;border-radius:10px;width:40px;height:40px;font-size:1rem;cursor:pointer}
.csheet-brushbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#111827;border:1px solid #24304a;border-radius:12px;padding:10px 12px;position:relative}
.csheet-brush-label{color:#aab4c8;font-size:.9rem;margin-right:4px}
.csheet-chips{display:flex;flex-wrap:wrap;gap:6px}
.csheet-chip{background:#1c2740;color:#dbe3f2;border:1px solid #2c3a58;border-radius:999px;padding:6px 13px;font-size:.9rem;cursor:pointer}
.csheet-chip.on{background:linear-gradient(135deg,#6d28d9,#a855f7);color:#fff;border-color:transparent;font-weight:600}
.csheet-search{flex:1;min-width:220px;background:#0d1421;border:1px solid #2c3a58;border-radius:10px;padding:9px 12px;color:#e8edf7;font-size:.95rem}
.csheet-sug{position:absolute;left:12px;right:12px;top:100%;z-index:5;background:#111827;border:1px solid #2c3a58;border-radius:10px;max-height:240px;overflow:auto}
.csheet-sug-item{display:block;width:100%;text-align:left;background:none;border:none;color:#dbe3f2;padding:9px 12px;cursor:pointer;font-size:.92rem}
.csheet-sug-item:hover{background:#1c2740}
.csheet-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-content:start;padding:2px}
.csheet-card{position:relative;background:#111827;border:2px solid #24304a;border-radius:12px;padding:8px;cursor:pointer;transition:border-color .12s,transform .08s}
.csheet-card:hover{border-color:#4b5b80;transform:translateY(-1px)}
.csheet-card.assigned{border-color:#22c55e;background:#0f2418}
.csheet-card.selected{border-color:#f59e0b}
.csheet-thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.csheet-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:#0b1220}
.csheet-meta{margin-top:6px;font-size:.78rem;color:#8b95ab}
.csheet-tag{margin-top:4px;font-size:.85rem;font-weight:700;color:#4ade80}
.csheet-sel{position:absolute;top:6px;right:6px;background:rgba(10,16,28,.85);border:none;color:#e8edf7;border-radius:7px;width:28px;height:28px;font-size:.95rem;cursor:pointer}
.csheet-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-top:1px solid #24304a;padding-top:10px}
.csheet-btn{background:#1b2334;color:#dbe3f2;border:1px solid #2c3a58;border-radius:10px;padding:11px 16px;font-size:.95rem;cursor:pointer}
.csheet-btn.primary{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;border-color:transparent;font-weight:700}
.csheet-btn[disabled]{opacity:.45;cursor:default}
.csheet-tally{margin-left:auto;color:#8b95ab;font-size:.85rem}
.csheet-muted{color:#8b95ab}

/* ============================================================================
   "Did this help?" — the member's own answer (surfacing-ledger-answers S3)
   ============================================================================
   Shared by the full Fergi modal and the ambient rail; the markup is built once
   in js/core/utils.js (ffaHelpfulnessControl). Deliberately QUIET: it sits below
   the answer at small type and low contrast, because a member who ignores it
   must experience nothing at all. It is an offer, not a prompt. */
.ffa-helpful{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.78rem;opacity:.72;flex-wrap:wrap}
.ffa-helpful:hover{opacity:1}
.ffa-helpful-q{color:var(--text-secondary,#6b7280)}
.ffa-helpful-btn{background:transparent;border:1px solid var(--border-color,#d1d5db);color:var(--text-secondary,#6b7280);border-radius:999px;padding:.12rem .6rem;font-size:.76rem;line-height:1.5;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.ffa-helpful-btn:hover{background:#0f766e;border-color:#0f766e;color:#fff}
/* 👍/👎 under a Fergi answer were 41 x 24 / 37 x 24 on FergiPhone (Greg G-164): on touch they take the floor. */
@media (pointer: coarse){.ffa-helpful-btn{min-height:44px;min-width:44px;padding:.3rem .8rem}}
.ffa-helpful-thanks{color:var(--text-secondary,#6b7280);font-style:italic}

/* ── ⭐ Reach oracle (deepening-family-reach S3) ────────────────────────────
   Canon: docs/kg-strategy/ORACLE_SURFACES.md · app/js/features/reach-oracle.js
   Shared by the BiographyModal claim cards and the Fergi AI ripple lines, so
   the same tap looks the same in both places.
   ⚠️ ADMIN-ONLY BY CONSTRUCTION, not by CSS: the server omits the `reach` block
   for every non-administrator, so these rules never have a node to match on a
   family member's screen. Do not add a `display:none` "guard" here — it would
   look like the protection while the real one is the absent markup. */
.reach-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.reach-star{display:inline-flex;align-items:center;gap:.3rem;background:transparent;border:1px solid var(--border-color,#d1d5db);border-radius:999px;padding:.1rem .55rem;font-size:.74rem;line-height:1.5;color:var(--text-secondary,#6b7280);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.reach-star:hover{border-color:#c8871a;color:#8a5d0f}
.reach-star[disabled]{opacity:.5;cursor:progress}
.reach-star-glyph{font-size:.95rem;line-height:1}
.reach-star-on{border-color:#c8871a;color:#8a5d0f;background:rgba(200,135,26,.10)}
.reach-audit{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;color:var(--text-secondary,#6b7280)}
.reach-audit-q{font-style:italic}
.reach-audit-btn{background:transparent;border:1px solid var(--border-color,#d1d5db);border-radius:999px;padding:.08rem .5rem;font-size:.72rem;line-height:1.5;color:var(--text-secondary,#6b7280);cursor:pointer}
.reach-audit-btn:hover{background:#0f766e;border-color:#0f766e;color:#fff}
.reach-audit-btn[disabled]{opacity:.5;cursor:progress}
.reach-audit-done{color:#256d45;font-size:.74rem}
.reach-status{font-size:.72rem;color:var(--text-secondary,#6b7280)}
.reach-status-error{color:#b3261e}

/* =============================================================================
   TOUCH TARGETS ON THE DESKTOP SHELL (proving-mobile-promises fix-loop, 2026-09-17)
   The iPad runs the desktop layout even as a Home Screen app (mobile-detect:
   tablets read 'desktop'), and its header controls were sized for a pointer:
   measured on FergiPAD standalone — 🏠 27×36, Open Fergi AI 38×38, Start a
   fresh conversation 32×32, Say it 38×38. A finger is the pointer there. On any
   coarse-pointer device the desktop shell's tappable chrome meets the same
   44 px floor the phone does; the visual size is unchanged (the box grows
   around the glyph), so the desktop keeps its look with a mouse.
   ========================================================================== */
@media (pointer: coarse) {
  .header-fergi-btn,
  .unified-ai-new-convo-btn,
  .unified-ai-sayit-btn,
  .nav-logo {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* ONE FERGI AI MARK IN THE PHONE'S HEADER (interpreting-family-channels S3, 2026-10-02).
   The block above re-displays `.header-fergi-btn` on every coarse pointer, and it comes
   later than the 768px `display: none`, so it beat it: on an iPhone the header carried
   TWO "Open Fergi AI" brain marks side by side (`.mobile-fergi-ai-launcher` x=294 and
   `#headerFergiBtn` x=346, 44×44 each; S1 survey, iPhone 17 Pro standalone). The phone
   shell owns its own launcher, so the desktop summon stands down there. Gated on the
   SHELL, never on pointer or width (SAYIT_STANDARD §8): the iPad runs the desktop shell,
   where this button is its only header Fergi. ⚠️ The shell marker is `has-mobile-tab-bar`
   (tab-bar.js, set when the phone shell mounts). NOT `fv-mobile`: fergi-ai-vessel.js sets
   that only while the Fergi AI modal is open, so on a room it is absent (measured). */
body.has-mobile-tab-bar .header-fergi-btn { display: none; }

/* THE HEADER BAND STAYS LIVE OVER THE DESKTOP'S FULL-VIEWPORT OVERLAYS
   (interpreting-family-channels S3, R-C: "Fergi AI is always visible and available";
   the Window Frame rule: "Header + Control Panel always visible").
   Three desktop surfaces laid a backdrop over the whole viewport, header included, so
   `#headerFergiBtn` was painted but dead: `elementFromPoint` at its centre returned the
   backdrop and a press timed out (measured 2026-10-02, WebKit 1440×900, live origin):
     bio folio      #biographyModalOverlay (.ffa-modal, inset 0, z 10300)
     Dressing Room  .fergi-bespoke-modal (inset 0, z 10300–10330 — its SCRIM was already
                    inset to the App Panel; the click-catcher was not)
     Studio         #createStoryModal.active → .contribution-modal-overlay (inset 0)
   ⛔ NOT fixed by moving the overlays down. FFASpatial seats a window with
   `position: fixed` in VIEWPORT coordinates, and the overlay is that window's containing
   block, so an overlay that starts at the nav height offsets every seated window by the
   same amount — tried and measured: the folio's shell ran 136→944 px in a 900 px
   viewport, its action row and rim cut off. The overlays stay at the viewport origin;
   the HEADER is lifted above them while one is open. The Fergi AI modal opens below the
   header band (top ≈146 px) and above the three overlays, so it never meets the lifted
   header. Gated on the desktop SHELL (no `has-mobile-tab-bar`): the phone's `.top-nav`
   already sits at 11500 and its rooms own the screen between its bars. */
body:not(.has-mobile-tab-bar):has(#biographyModalOverlay.is-open) .top-nav,
body:not(.has-mobile-tab-bar):has(.fergi-bespoke-modal.is-open) .top-nav,
body:not(.has-mobile-tab-bar):has(#createStoryModal.active) .top-nav {
  z-index: 10335;
}

/* ── DESKTOP RAIL: ONE PAINT, NOT FOUR (Joe 2026-09-28) ──────────────────────
   Joe: "An earlier set of fallback controls appear briefly before the current
   controls overlay them." Measured (headless desktop, family session): the rail
   painted FOUR different ways in ~2.3 s — undressed icon tiles incl. two retired
   launchers, then a 6-item guest set, then dressed-but-guest, then the final 12.
   Two causes stacked: the dressed overlay waits on flags + manifest + its own
   stylesheet, and the access tier resolves after the first paint.

   So the desktop rail is held invisible (space reserved, no layout shift) until
   launcher-visual-overlay.js adds `ffv-rail-settled` to <html>: overlay finished
   (or declined), AND the access tier has landed, AND a signed-in session is no
   longer showing the provisional guest tier.

   ⛔ FAILSAFE IS CSS, NOT JS: if the overlay script never runs, the animation
   reveals the rail at 4 s anyway. Never replace this with a JS-only reveal —
   a script error would then leave a family member with no navigation at all.
   Desktop only: the mobile drawer is opened by the user, long after settling. */
@media (min-width: 769px) {
    html:not(.ffv-rail-settled) .side-nav {
        visibility: hidden;
        animation: ffvRailFailsafeReveal 0s linear 4s forwards;
    }
}
@keyframes ffvRailFailsafeReveal {
    to { visibility: visible; }
}

/* ============================================================================
   STUDIO HOME — founding-story-studio S4 (Joe R2/R3, amendment s4.md)
   The desktop Studio launcher's room: both origins, the member's projects, and
   the honest status of each (read from the server's reopen, never guessed).
   Scoped to .story-studio-home*; nothing here reaches another surface.
   Colour carries meaning: the header wears the launcher plate's teal and brass;
   each status pill's hue is its state (green finished, amber being made, red
   needs attention, violet being checked, slate not started, teal saved).
   ⛔ No z-index here: window-manager.js assigns the desktop modal band.
   ============================================================================ */
.story-studio-home {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(8, 32, 31, 0.55);
}
.story-studio-home.is-open { display: flex; }
.story-studio-home__frame {
    width: min(760px, calc(100vw - 48px));
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #c9992f;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.story-studio-home__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 14px;
    background: radial-gradient(circle at 30% 20%, #1d4442 0%, #123230 58%, #08201f 100%);
    border-bottom: 2px solid #d9ad4c;
    color: #f6ecd7;
}
.story-studio-home__title { margin: 0; font-size: 22px; color: #f2d489; letter-spacing: 0.3px; }
.story-studio-home__lede { margin: 4px 0 0; font-size: 14px; color: #d8e6e3; }
.story-studio-home__close {
    background: transparent; border: 1px solid rgba(242, 212, 137, 0.5); color: #f2d489;
    width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer;
}
.story-studio-home__close:hover { background: rgba(242, 212, 137, 0.15); }
.story-studio-home__body { padding: 18px 22px 22px; overflow-y: auto; color: #1f2937; }
.story-studio-home__origins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.story-studio-home__origin {
    display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
    padding: 16px 18px; border-radius: 12px; border: 1px solid #b7d3cf;
    background: linear-gradient(180deg, #f3faf9 0%, #e4f1ef 100%);
}
.story-studio-home__origin:hover, .story-studio-home__origin:focus-visible {
    border-color: #c9992f; box-shadow: 0 0 0 3px rgba(217, 173, 76, 0.28); outline: none;
}
.story-studio-home__origin-title { font-size: 16px; font-weight: 700; color: #123230; }
.story-studio-home__origin-sub { font-size: 13px; color: #4b5563; }
.story-studio-home__section { margin: 22px 0 10px; font-size: 15px; color: #123230; text-transform: none; }
.story-studio-home__note { margin: 6px 0; font-size: 13px; color: #6b7280; }
.story-studio-home__unsaved {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 10px 14px; border-radius: 10px;
    background: #fff7e6; border: 1px solid #f5c26b; color: #7a4a00; font-size: 14px;
}
.story-studio-home__projects { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.story-studio-home__project {
    width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas:
        "title pill" "origin pill" "detail detail" "when when";
    gap: 2px 12px; text-align: left; cursor: pointer; padding: 12px 14px;
    border-radius: 10px; border: 1px solid #e5e7eb; background: #ffffff;
}
.story-studio-home__project:hover, .story-studio-home__project:focus-visible {
    border-color: #2f6a66; box-shadow: 0 0 0 3px rgba(47, 106, 102, 0.18); outline: none;
}
.story-studio-home__project-title { grid-area: title; font-weight: 700; color: #123230; }
.story-studio-home__project-origin { grid-area: origin; font-size: 12px; color: #6b7280; }
.story-studio-home__project-detail { grid-area: detail; font-size: 13px; color: #374151; margin-top: 4px; }
.story-studio-home__project-when { grid-area: when; font-size: 12px; color: #9ca3af; }
.story-studio-home__project .story-studio-home__pill { grid-area: pill; align-self: start; }
.story-studio-home__pill {
    display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
    white-space: nowrap; border: 1px solid transparent;
}
.story-studio-home__pill--finished    { background: #dcfce7; color: #14532d; border-color: #86efac; }
.story-studio-home__pill--being_made  { background: #fef3c7; color: #78350f; border-color: #fcd34d; }
.story-studio-home__pill--failed      { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }
.story-studio-home__pill--unresolved  { background: #ede9fe; color: #4c1d95; border-color: #c4b5fd; }
.story-studio-home__pill--not_started { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.story-studio-home__pill--saved,
.story-studio-home__pill--understood  { background: #ccfbf1; color: #134e4a; border-color: #5eead4; }
.story-studio-home__pill--unknown     { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; }
.story-studio-home__words {
    width: 100%; box-sizing: border-box; padding: 12px; font-size: 15px; line-height: 1.5;
    border: 1px solid #b7d3cf; border-radius: 10px; resize: vertical; font-family: inherit;
}
.story-studio-home__title-input {
    width: 100%; box-sizing: border-box; margin-top: 10px; padding: 9px 12px; font-size: 14px;
    border: 1px solid #d1d5db; border-radius: 8px;
}
.story-studio-home__intent { margin: 14px 0 0; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 10px; }
.story-studio-home__intent legend { font-size: 13px; font-weight: 700; color: #123230; padding: 0 4px; }
.story-studio-home__intent label { display: inline-flex; align-items: center; gap: 6px; margin: 6px 16px 2px 0; font-size: 14px; cursor: pointer; }
.story-studio-home__save-state { min-height: 20px; margin: 12px 0 0; font-size: 13px; font-weight: 600; }
.story-studio-home__save-state--unsaved { color: #b45309; }
.story-studio-home__save-state--error { color: #b91c1c; }
.story-studio-home__actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.story-studio-home__primary {
    padding: 10px 18px; border-radius: 10px; border: 1px solid #6d4a16; cursor: pointer; font-weight: 700;
    background: linear-gradient(180deg, #f2d489 0%, #d9ad4c 55%, #a87b2a 100%); color: #2a1a0d;
}
.story-studio-home__secondary {
    padding: 10px 18px; border-radius: 10px; border: 1px solid #2f6a66; cursor: pointer; font-weight: 700;
    background: #ffffff; color: #123230;
}
.story-studio-home__link { background: none; border: none; padding: 0; color: #2f6a66; font-weight: 700; cursor: pointer; }
.story-studio-home__link:hover { text-decoration: underline; }
.story-studio-home__promise { margin-top: 14px; padding: 12px 14px; border-left: 4px solid #d9ad4c; background: #fbfaf6; border-radius: 0 10px 10px 0; }
.story-studio-home__promise h4 { margin: 0 0 6px; font-size: 14px; color: #123230; }
.story-studio-home__promise p { margin: 4px 0; font-size: 14px; }
.story-studio-home__saved-words {
    margin: 8px 0 0; padding: 10px 12px; white-space: pre-wrap; font-size: 14px; line-height: 1.5;
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; color: #1f2937; max-height: 220px; overflow-y: auto;
}
.story-studio-home__deliverables { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.story-studio-home__deliverable { display: grid; grid-template-columns: 160px auto 1fr; align-items: center; gap: 10px; font-size: 13px; }
.story-studio-home__deliverable-name { font-weight: 700; color: #374151; }
.story-studio-home__deliverable-detail { color: #4b5563; }

/* R3: no Studio on a phone. The rail doorway is absent below the app's mobile
   breakpoint (the same 767px mobile-detect.js uses), whatever the tier gate decided,
   and a deep link shows the plain note below instead of the room. */
@media (max-width: 767px) {
    .side-nav .story-studio-home-launcher { display: none !important; }
    .story-studio-home { display: none !important; }
}
.story-studio-home-note {
    position: fixed; left: 16px; right: 16px; bottom: 24px; padding: 14px 16px; border-radius: 12px;
    background: #123230; color: #f6ecd7; border: 1px solid #d9ad4c; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex; align-items: center; gap: 12px; font-size: 14px;
}
.story-studio-home-note p { margin: 0; flex: 1; }
.story-studio-home-note button {
    padding: 6px 14px; border-radius: 8px; border: 1px solid #d9ad4c; background: #d9ad4c; color: #2a1a0d; font-weight: 700;
}

/* clearing-lane-closure S1 (J1): the curator's inline life-span question — "is this a picture of
   them, is the date wrong, or is it someone else?" — shown in the curator's own panel (never a
   body-level dialog). Amber = a question the family's records raise, not an error. */
.ft-presence-choice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid #d9a441;
    border-left: 4px solid #d9a441;
    border-radius: 8px;
    background: #fff8e8;
    color: #3d2f12;
    font-size: 15px;
    line-height: 1.4;
}
.ft-presence-choice .ft-presence-question { margin: 0 0 4px; font-weight: 600; }
.ft-presence-choice .ft-presence-option,
.ft-presence-choice .ft-presence-cancel {
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #c9b58a;
    background: #ffffff;
    color: #3d2f12;
    text-align: left;
    font-size: 15px;
    cursor: pointer;
}
.ft-presence-choice .ft-presence-option[data-choice="depicted"] { border-color: #7a5cc4; }
.ft-presence-choice .ft-presence-option[data-choice="date_wrong"] { border-color: #2f7fbf; }
.ft-presence-choice .ft-presence-option[data-choice="wrong_person"] { border-color: #b5533c; }
/* clearing-lane-closure S2: "Move {name} here" resolves the clash (green); "Both are {name}" is the unusual case (amber) */
.ft-presence-choice .ft-presence-option[data-choice="replace_other"] { border-color: #2f8f5b; }
.ft-presence-choice .ft-presence-option[data-choice="allow_same_person"] { border-color: #b58a2f; }
.ft-presence-choice .ft-presence-cancel { background: transparent; border-style: dashed; }

/* ── J6 review card (piloting-prepared-import S3): held proposals on the Sandbox import card, both lanes ──
   Colour carries meaning: the lane badge says where the item came from (teal = uploaded here, amber =
   prepared archive); the two texts are tinted current (slate) vs fresh (green); dry-run effects are tinted
   by what they do (blue = a change, slate = left as it is, violet = after the import, red = would stop). */
.review-lane-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem;
    font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.review-lane-badge--1 { background: #d7f3ef; color: #0b5e55; border: 1px solid #7fcfc4; }
.review-lane-badge--2 { background: #fdebc8; color: #7a4a00; border: 1px solid #e9b65a; }
.review-door { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.review-door:empty { display: none; }
.review-open-btn, .review-action-btn, .review-dryrun-btn { min-height: 44px; padding: 8px 14px; border-radius: 10px;
    border: 1px solid #9aa7b5; background: #fff; color: #1f2d3d; font-size: 0.95rem; cursor: pointer; }
.review-open-btn[data-review-open]:not([data-review-open="0"]) { border-color: #d98a00; background: #fff6e3; font-weight: 600; }
.review-slot:empty { display: none; }
.review-card { margin-top: 10px; padding: 12px; border-radius: 12px; background: #f8fafc; border: 1px solid #dbe3ea;
    cursor: default; text-align: left; }
.review-card[data-lane="2"] { border-color: #e9b65a; background: #fffaf0; }
.review-card-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-card-title { margin: 0; font-size: 1rem; }
.review-card-say { margin: 6px 0 10px; color: #3c4a59; }
.review-item { padding: 12px 0; border-top: 1px solid #e3e9ef; }
.review-item[data-state="applied"] { border-left: 4px solid #2f9e5b; padding-left: 10px; }
.review-item[data-state="kept"], .review-item[data-state="undone"] { border-left: 4px solid #8a99a8; padding-left: 10px; }
.review-question { font-weight: 600; margin: 0 0 8px; }
.review-notice { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: #fff1d6; color: #6b4300; }
.review-source-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none;
    border: none; padding: 0; color: #1a5fb4; cursor: pointer; text-align: left; }
.review-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.review-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.review-side { padding: 10px; border-radius: 10px; }
.review-side h5 { margin: 0 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.review-side--current { background: #eef2f6; border: 1px solid #cfd8e1; }
.review-side--current h5 { color: #4a5a6a; }
.review-side--fresh { background: #e9f7ee; border: 1px solid #a9dbbb; }
.review-side--fresh h5 { color: #1f7a45; }
.review-text { margin: 0; white-space: pre-wrap; }
.review-text--absent { color: #6b7785; font-style: italic; }
.review-origin { display: block; margin-top: 6px; font-size: 0.8rem; color: #5b6876; }
.review-why { margin: 4px 0 8px 18px; padding: 0; color: #4a5562; font-size: 0.9rem; }
.review-state { margin: 0 0 8px; font-size: 0.85rem; color: #4a5562; }
.review-reason-label { display: block; font-size: 0.85rem; color: #3c4a59; margin-bottom: 8px; }
.review-reason { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; min-height: 64px;
    font-size: 16px; border-radius: 8px; border: 1px solid #9aa7b5; padding: 8px; }
.review-actions { display: flex; flex-direction: column; gap: 8px; }
.review-action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-consequence { font-size: 0.82rem; color: #5b6876; flex: 1 1 220px; }
.review-action-btn--accept_proposed { border-color: #2f9e5b; background: #e9f7ee; color: #145c33; font-weight: 600; }
.review-action-btn--keep_current { border-color: #607080; }
.review-action-btn--undo { border-color: #b3261e; color: #8c1d18; }
.review-dryrun-bar { margin-bottom: 8px; }
.review-dryrun-say { margin: 8px 0 4px; font-weight: 600; }
.review-dryrun-items { margin: 0 0 0 18px; padding: 0; }
.review-dryrun-item ul { margin: 2px 0 6px 0; padding-left: 16px; }
.review-dryrun-n { font-size: 0.8rem; color: #5b6876; }
.review-effect { padding: 2px 6px; margin: 2px 0; border-radius: 6px; list-style: none; }
.review-effect--write { background: #e5efff; color: #123f80; }
.review-effect--kept { background: #eef2f6; color: #4a5a6a; }
.review-effect--after { background: #f1e9ff; color: #4c2a85; }
.review-effect--blocked { background: #fde7e5; color: #8c1d18; }
.review-dryrun-proof { font-size: 0.8rem; color: #1f7a45; margin: 4px 0 0; }
@media (max-width: 640px) {
    .review-compare { grid-template-columns: 1fr; }
    .review-action { flex-direction: column; align-items: stretch; }
    .review-action-btn, .review-open-btn, .review-dryrun-btn { width: 100%; }
}

/* Face Tagging on a tablet (Greg G-158, FergiPAD — the desktop shell by touch). Measured 2026-10-24 at 820 x 1180:
   header buttons 29-31 px tall, size toggles 25, rotate / zoom 32 x 32, the action row (Confirm · Different person ·
   Unknown · Add context · Next …) 35. On a coarse pointer every one meets the 44 px floor; mouse layout unchanged.
   (The face boxes on the photo are sized by the faces themselves and are not controls to enlarge.) */
@media (pointer: coarse) {
    .ft-header-btn,
    .curator-ai-help-btn,
    .size-toggle-btn,
    .action-btn { min-height: 44px; }
    .size-toggle-btn { min-width: 44px; }
    .rotation-btn,
    .ft-zoom-btn { min-width: 44px; min-height: 44px; }
}

/* The desktop shell by touch — a tablet (Greg G-161, FergiPAD Safari glass sweep, 2026-10-25). Every room's ✕
   measured 30 x 30; the Navigator's Add Family Member / Add Relationship 20 x 15 and Family / Friend 30 tall; the
   filter and library chips of Explore, Training, Documentation and Import Media 32-37; Desktop Import's ✕ 30 x 32
   and its buttons 37. On a coarse pointer at tablet width each meets the 44 px floor; a mouse and the phone shell
   are untouched. */
@media (pointer: coarse) and (min-width: 768px) {
    .ffrw-close,
    .di-close,
    .btn-icon-modern { min-width: 44px; min-height: 44px; }
    .fnav-fergi-send,
    .fnav-fergi-mic { min-width: 44px !important; }
    .nav-mode-btn,
    .explore-tab,
    .training-filter-btn,
    .docs-library-toggle,
    .docs-doc-item,
    .docs-bundle-download-btn,
    .sandbox-tab-btn,
    .btn,
    .btn-sm,
    .di-btn { min-height: 44px !important; }   /* a floor, so it outranks the rooms' own (more specific) sizing */
}