/* ════════════════════════════════════════════════════════════════════════════
   VAULT V2 — Design System
   The world's first privacy-sovereign social platform.
   Deep obsidian + bioluminescent accents. Breathing, living UI.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Core Palette — Warm Den */
  --vault-obsidian: #0f0c08;
  --vault-deep: #12100b;
  --vault-surface: #1a1610;
  --vault-elevated: #231f18;
  --vault-card: rgba(26, 22, 16, 0.85);
  --vault-card-border: rgba(212, 165, 116, 0.08);

  /* Accent System — Gold/Amber Primary, Teal Secondary */
  --glow-warm: #d4a574;
  --glow-cool: #109eb7;
  --glow-primary: var(--glow-warm);
  --glow-secondary: var(--glow-cool);
  --glow-accent: #e8c9a8;
  --glow-rose: #e8b4b8;
  --glow-emerald: #22c55e;
  --glow-gold: #fbbf24;

  /* Warmth System — Relationship Indicators */
  --warmth-hot: #ff6b6b;
  --warmth-warm: #ffa06b;
  --warmth-neutral: #64748b;
  --warmth-cool: #4fc3f7;

  /* Text Hierarchy */
  --text-pure: #ffffff;
  --text-primary: #f1f5f9;
  --text-secondary: #c4b69c;
  --text-muted: #6b5d4d;
  --text-ghost: #3d3529;

  /* Glass & Depth — Warm Tinted */
  --glass-bg: rgba(26, 22, 16, 0.75);
  --glass-border: rgba(212, 165, 116, 0.06);
  --glass-blur: 24px;
  --glass-highlight: rgba(212, 165, 116, 0.03);

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  /* Typography */
  --font-display: 'Clash Display', 'General Sans', 'Space Grotesk', sans-serif;
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;

  /* Shadows */
  --shadow-glow: 0 0 40px rgba(212, 165, 116, 0.1);
  --shadow-depth: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 var(--glass-highlight);

  /* Transitions */
  /* Real-Object Motion language. One dialect: brass on marble, weight, light.
     The three curves below are the ONLY easings allowed for capsule motion.
     No overshoot springs (no cubic-bezier(*, 1.5+, *, *)) — overshoot is the
     hallmark of "cheesy app". See docs/emtrace-movement-design.md. */
  --ease-real-out:   cubic-bezier(0.22, 1, 0.36, 1);     /* object settling under its own weight (default) */
  --ease-real-inout: cubic-bezier(0.4, 0, 0.2, 1);       /* symmetric force (drawer slide both ways) */
  --ease-real-in:    cubic-bezier(0.5, 0, 1, 1);         /* object accelerating away (gravity) */
  --dur-touch:  240ms;   /* immediate response to user pointer */
  --dur-cross:  480ms;   /* one card replacing another */
  --dur-arrive: 720ms;   /* something travelling across the screen */

  /* Backward-compat aliases for non-vault stylesheets that still
     reference the old token names. The vault root tree itself has been
     fully migrated to --ease-real-* in Phase 6. */
  --ease-smooth: var(--ease-real-inout);
  --ease-out:    var(--ease-real-out);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-breath: 4000ms;
}

/* Time-of-day adaptive glow — always warm */
[data-time="dawn"] { --glow-primary: #e8c9a8; --glow-secondary: #ffa06b; }
[data-time="morning"] { --glow-primary: #fbbf24; --glow-secondary: #d4a574; }
[data-time="day"] { --glow-primary: #d4a574; --glow-secondary: #e8c9a8; }
[data-time="dusk"] { --glow-primary: #c9956c; --glow-secondary: #e8b4b8; }
[data-time="night"] { --glow-primary: #d4a574; --glow-secondary: #a67c52; }

/* ════════════════════════════════════════════════════════════════
   BASE RESET & BODY
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Vault marble interior — light Calacatta-style marble painted directly on
   body using the Index/Pulse pattern. Cream base aligns with Index's warm
   palette so the brand stays continuous. Both html and body use the same
   cream fallback so the canvas/scrollbar gutter blends seamlessly. */
html {
  background-color: #ede5d4;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
html::-webkit-scrollbar-track,
html::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-corner {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}

body.vault-v2 {
  font-family: var(--font-body);
  background-color: #ede5d4;
  background-image: url('../images/vault-marble-light.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #2a2018;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.vault-v2::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* ════════════════════════════════════════════════════════════════
   PHASE 1 — TIME VEIL
   A very subtle, slow left-to-right warm light gradient drifting across
   the marble. Suggests time flowing across the screen. Pinned to the
   viewport via fixed positioning so it doesn't scroll with content.
   Almost imperceptible (3-7% opacity) — meant to be felt, not seen.
   ════════════════════════════════════════════════════════════════ */
body.vault-v2::before {
  content: "";
  position: fixed;
  top: 0;
  left: -50vw;
  width: 200vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 240, 210, 0.05) 45%,
    rgba(255, 235, 195, 0.08) 50%,
    rgba(255, 240, 210, 0.05) 55%,
    transparent 65%,
    transparent 100%);
  animation: vaultTimeVeil 75s linear infinite;
}

@keyframes vaultTimeVeil {
  0%   { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}

@media (prefers-reduced-motion: reduce) {
  body.vault-v2::before { animation: none; opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════ */
/* Wave C: hero gains confidence — wider band, brass top + bottom
   hairlines that frame it as a museum room title plate. The compact
   logo is intentional but no longer adrift on a sea of marble; the
   hairlines and tighter horizontal max-width give it a stage. */
.vault-hero {
  /* v29.22 — two-row placard layout.
     Row 1: .vault-hero__brand  (crest LEFT + stacked tagline RIGHT)
     Row 2: .vault-sub          (greeting + brass voice-waiting pill)
     Reads as a museum placard: the carved crest is the artifact, the
     tagline is engraved beside it like a brass legend, and the
     personal greeting sits centred beneath. */
  text-align: center;
  /* More top breathing room so the crest + tagline sit down off the sticky
     top nav instead of crowding it. */
  padding: 30px 1rem 6px;
  position: relative;
  z-index: 2;
  max-width: min(960px, 96vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.vault-hero__brand {
  /* The placard row — crest on the left, stacked tagline on the right.
     Top-aligned so the E top bar + the crest's measured margin land on the
     cap-top of line 1. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
}

@media (max-width: 640px) {
  /* Collapse to a centred column so mobile doesn't go cramped. The row-only
     top-alignment + crest nudge don't apply when stacked. */
  .vault-hero__brand {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .vault-hero__crest { margin-top: 0; }
  .vault-hero .vault-tagline {
    align-items: center !important;
    text-align: center;
  }
}

.vault-hero::before,
.vault-hero::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(180, 130, 30, 0.42) 22%,
    rgba(255, 230, 170, 0.6) 50%,
    rgba(180, 130, 30, 0.42) 78%,
    transparent);
  pointer-events: none;
}

.vault-hero::before { top: 0; }
.vault-hero::after  { bottom: 0; }

/* v29.22 — arrival cascade: the placard (crest + tagline) lands first
   as one composed moment, then the personal sub-line settles below. */
.vault-hero__brand     { animation: vaultHeroArrive 700ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both; }
.vault-hero .vault-sub { animation: vaultHeroArrive 700ms cubic-bezier(0.22, 1, 0.36, 1) 280ms both; }

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

@media (prefers-reduced-motion: reduce) {
  .vault-hero__brand,
  .vault-hero .vault-sub { animation: none; }
}

/* v29.21 — DYNAMIC SHIMMER on the etched crest. The crest sits inside
   a positioned <span class="vault-hero__crest"> wrapper so we can layer
   a slow diagonal light pass over it. The light is scoped to the crest
   bounds, painted in 'overlay' blend mode (adds highlight without
   washing out the etching), and translates from off-left to off-right
   over 7 seconds — a calm, infrequent moment that suggests light
   moving across stone. */
.vault-hero__crest {
  position: relative;
  display: inline-block;
  line-height: 0;
  isolation: isolate;
  /* Push the crest down by line 1's leading-above-cap (~0.28 x fontSize) so
     the E's top bar lands on the visible cap-top of "Real", not the taller
     line-box top. Pairs with .vault-hero__brand { align-items: flex-start }. */
  margin-top: clamp(9px, 1.29vw, 13.9px);
}

.vault-hero__crest::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Much fainter so it reads as a passing sheen, never a box. */
  background: linear-gradient(
    115deg,
    transparent 34%,
    rgba(255, 245, 215, 0.18) 48%,
    rgba(255, 250, 230, 0.24) 50%,
    rgba(255, 245, 215, 0.18) 52%,
    transparent 66%);
  mix-blend-mode: overlay;
  transform: translateX(-120%);
  animation: vaultCrestShimmer 7s ease-in-out infinite;
  border-radius: inherit;
}

@keyframes vaultCrestShimmer {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .vault-hero__crest::after { animation: none; opacity: 0; }
}

.vault-hero img {
  /* v29.23 — ETCHED INTO THE STONE.
     Sized to match the tile width below it (clamp(180,22vw,240px)) and
     treated with three layered effects so the crest reads as carved
     INTO the marble:
       1. mix-blend-mode: darken    - dark glyph parts darken stone,
                                       cream PNG background disappears
       2. opacity 0.65              - marble veining shows through but
                                       the etching carries presence
       3. sepia + contrast filter   - colour pulled into stone palette

     v29.23 NOTE: the previous dual bevel drop-shadows were removed.
     CSS `filter` runs BEFORE `mix-blend-mode`, so the drop-shadows
     were tracing the PNG's rectangular bounding box (specifically the
     cream background) and producing a faint dark line across the top
     edge of the crest — a sticker outline, not the carved-glyph bevel
     we wanted. With darken + opacity + sepia/contrast the etched
     intent already reads cleanly without the rectangular ghost. */
  /* Aligned to the tagline by two measured anchors (no guessing):
     - the E's top bar (top of the trimmed art) meets the cap-top of line 1
     - "Vault"'s vertical centre (0.805 down the art) meets the centre of
       line 3 ("Real legacy").
     Crest height S = span(capTop_line1 -> centre_line3) / 0.7883, where
     span = 3.17*fontSize + 2*gap => clamp(139px, 20.78vw, 225px). The crest
     is then nudged down by the line-1 leading (see .vault-hero__crest) so
     the E top hits the visible cap, not the line-box top. */
  height: clamp(139px, 20.78vw, 225px);
  width: auto;
  object-fit: contain;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* v29.25 — WARM-HARMONIZED. Transparent-background asset (no box). The
     brand teal is muted and given a faint warm veil so the mark sits in the
     warm gold/marble palette instead of popping cool against it. */
  opacity: 0.96;
  filter:
    saturate(0.8)
    sepia(0.14)
    drop-shadow(0 4px 10px rgba(60, 40, 15, 0.3));
}

.vault-hero .vault-tagline {
  /* Live INCISED tagline: the letters are carved straight into the real
     page marble (no image, no seam). A heavier serif weight holds the
     groove. */
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 600;
  color: #2a2018;
  margin-top: 0;
  line-height: 1.38;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 0.9vw, 10px);
}

/* Stone words ("Real"): the letter BODY is transparent so the real marble
   shows through the cut; layered shadows form the incised groove — a dark
   recessed upper edge + a light lower bevel (single light from upper-left).
   text-shadow paints even though the fill is transparent, which is exactly
   what reads as "carved into this stone". */
.vault-hero .vault-tagline__line {
  display: block;
  font-style: normal;
  white-space: nowrap;
  color: transparent;
  text-shadow:
    0 -1px 1px rgba(36, 22, 8, 0.55),
    0 1px 0 rgba(255, 252, 244, 0.92),
    0 2px 4px rgba(255, 250, 238, 0.4);
}

/* Keyword (em only — NOT the whole line): gold poured into the cut. Gold
   gradient fill + a chiselled bevel via drop-shadow (text-shadow can't
   paint over a transparent text-fill, so we use filter). */
.vault-hero .vault-tagline em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(165deg, #d6a345 0%, #a06a22 44%, #5c380f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter:
    drop-shadow(0 1px 0 rgba(255, 250, 238, 0.7))
    drop-shadow(0 -1px 1px rgba(40, 24, 8, 0.42));
}

/* Dynamic: a slow light-sweep passing across the carved tagline + greeting,
   like light moving over polished stone (same idea as the crest shimmer).
   Reduced-motion users get a static, sweep-free carve. */
.vault-hero .vault-tagline { position: relative; }

.vault-hero .vault-tagline::after,
.vault-hero .vault-sub::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Much fainter so it reads as a passing sheen, never a box. */
  background: linear-gradient(115deg,
    transparent 32%,
    rgba(255, 247, 220, 0.28) 46%,
    rgba(255, 252, 240, 0.4) 50%,
    rgba(255, 247, 220, 0.28) 54%,
    transparent 68%);
  mix-blend-mode: overlay;
  transform: translateX(-130%);
  animation: vaultTaglineSweep 4.8s ease-in-out 0.6s infinite;
}

@keyframes vaultTaglineSweep {
  0%        { transform: translateX(-130%); }
  45%, 100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .vault-hero .vault-tagline::after,
  .vault-hero .vault-sub::after { animation: none; opacity: 0; }
}

.vault-hero .vault-sub {
  /* v29.24 — real presence pass.
     v29.23 bumped to clamp(1.1,1.9vw,1.4rem) but it still read quiet
     against the bigger placard (200px crest + 3-line tagline). Now:
       - font-size clamp(1.5,2.6vw,2rem)  - +40-45% so it anchors
                                            the third row
       - color #2a2018                    - same deep stone tone the
                                            tagline body uses, so it
                                            reads with the same
                                            authority against marble
       - text-shadow                      - matches the tagline's
                                            white shadow lift for
                                            crisp legibility
       - margin-top bumped                - more breathing room from
                                            the placard above */
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-style: italic;
  /* Clearly INCISED: the letter body is transparent so the real marble
     shows through the cut, with a deep recessed upper edge + a strong lit
     lower bevel — same chisel as the tagline, dialed up to read at a glance. */
  color: transparent;
  margin-top: clamp(14px, 2vw, 24px);
  text-shadow:
    0 -1.5px 1px rgba(32, 19, 6, 0.62),
    0 1.5px 0 rgba(255, 253, 246, 0.96),
    0 3px 5px rgba(255, 250, 238, 0.5);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  flex-wrap: wrap;
  flex-basis: 100%;
}

/* Phase 1: the unread count inside the greeting gets accent color +
   a small pulsing brass orb beside it so the eye is gently drawn.
   v29.20 — the chip is a real <button> that opens the first unread
   voice on tap (wired in vault-core renderPersonalAnchor). */
.vault-hero .vault-sub__count {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  color: #8a5b1f;
  text-shadow: none; /* the brass pill is a button, not carved stone */
  background:
    linear-gradient(180deg, rgba(255, 245, 215, 0.85), rgba(245, 220, 165, 0.72));
  border: 1px solid rgba(180, 130, 30, 0.45);
  border-radius: 999px;
  padding: 5px 16px 5px 14px;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.5) inset,
    0 1px 4px rgba(120, 80, 20, 0.14),
    0 0 12px rgba(212, 175, 55, 0.22);
  cursor: pointer;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.vault-hero .vault-sub__count:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.7) inset,
    0 2px 8px rgba(120, 80, 20, 0.22),
    0 0 18px rgba(212, 175, 55, 0.45);
}

.vault-hero .vault-sub__orb {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd56b, #b8893a 60%, #6c4516);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  animation: heroSubOrb 2.2s ease-in-out infinite;
  flex: 0 0 auto;
}

@keyframes heroSubOrb {
  0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(212, 175, 55, 0.45); }
  50%      { transform: scale(1.18); box-shadow: 0 0 14px rgba(212, 175, 55, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .vault-hero .vault-sub__orb { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vault-hero .vault-sub__orb { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT SHELL
   ════════════════════════════════════════════════════════════════ */
.vault-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}


.privacy-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  font-size: 0.72rem;
  color: var(--glow-emerald);
  font-weight: 500;
}

.earnings-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.1), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(212, 165, 116, 0.25);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--glow-gold);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-smooth);
}

.earnings-pill:hover {
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.18), rgba(251, 191, 36, 0.14));
  transform: scale(1.03);
}



/* Main content area — full-bleed for the wall */
.vault-main {
  /* v29.13 — tighter top padding so the wall sits high. Removed the
     3D perspective that was creating subtle z-fighting with vault-motion's
     parallax tilt; the wall is a flat surface now. */
  flex: 1;
  padding: 6px clamp(10px, 2vw, 28px) clamp(12px, 2.4vw, 32px);
  max-width: min(1320px, 96vw);
  margin: 0 auto;
  width: 100%;
  overflow-x: clip;
}

/* ════════════════════════════════════════════════════════════════
   ZONE NAVIGATION (Atrium / Exchange / Glow Room)
   ════════════════════════════════════════════════════════════════ */
/* Zone selector as exhibit signage — cream-glass plaque with brass border,
   sits naturally on the marble like a museum's room directory. */
.zone-nav {
  /* Primary nav = a recessed brass TRACK that the active section rises out
     of. The inset shadow makes the track read as carved, and the raised
     gold active segment sits proud of it — a deliberate, premium control
     rather than a flat cream bar. */
  display: flex;
  gap: 4px;
  padding: 5px;
  /* Centered at a contained width so the three sections don't float in a
     stretched, half-empty bar. */
  max-width: 680px;
  margin: 0 auto 10px;
  background: linear-gradient(180deg, rgba(235, 222, 195, 0.94), rgba(245, 235, 214, 0.9));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(150, 110, 40, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 2px 5px rgba(90, 60, 20, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5),
    0 4px 16px rgba(80, 50, 20, 0.12);
}

.zone-nav-item {
  flex: 1;
  padding: 9px 16px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #6a5436;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-smooth);
  text-align: center;
  position: relative;
}

.zone-nav-item:hover {
  color: #3a2c16;
  background: rgba(212, 175, 55, 0.14);
}

/* Active section = the boldest control on the page: a solid brass segment
   with deep text, so "you are here" is unmistakable. (Filter chips below
   are deliberately quieter so the two rows don't read as twins.) */
.zone-nav-item.active {
  background: linear-gradient(180deg, #d8b441 0%, #b8893a 100%);
  color: #2a1c08;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 190, 0.7),
    inset 0 -1px 0 rgba(110, 74, 24, 0.4),
    0 3px 12px rgba(150, 105, 30, 0.35);
}

/* The per-zone coloured dots carried no meaning (just decoration), so
   they're removed for clarity. */
.zone-nav-item .zone-dot { display: none; }

.zone-nav-item { position: relative; }
.zone-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--glow-rose);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Zone containers */
.vault-zone {
  display: none;
  animation: zoneEnter var(--duration-slow) var(--ease-out) both;
}

.vault-zone.active {
  display: block;
}

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

/* ════════════════════════════════════════════════════════════════
   THE ATRIUM — Presence & Connection Home
   ════════════════════════════════════════════════════════════════ */
.atrium-greeting {
  text-align: center;
  margin-bottom: var(--space-lg);
  padding-top: var(--space-md);
}

.atrium-greeting h1 {
  /* Carved into the marble (tonal). Also fixes a dark-theme leftover:
     this was white text with a dark glow, near-invisible on light marble. */
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #34271a;
  margin-bottom: var(--space-sm);
  text-shadow:
    0 -1px 1px rgba(36, 22, 8, 0.4),
    0 1px 0 rgba(255, 252, 244, 0.92),
    0 2px 3px rgba(255, 250, 238, 0.35);
}

.atrium-greeting p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Presence Orbs Grid */
.presence-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-md);
}

.presence-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-real-out);
}

.presence-orb:hover {
  transform: scale(1.08);
}

.presence-orb:active {
  transform: scale(0.95);
}

.orb-container {
  position: relative;
  width: 72px;
  height: 72px;
}

.orb-warmth-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  opacity: 0.7;
  animation: orbBreathe var(--duration-breath) ease-in-out infinite;
}

.orb-warmth-ring.warmth-hot {
  background: conic-gradient(from 0deg, var(--warmth-hot), var(--glow-warm), var(--warmth-hot));
}

.orb-warmth-ring.warmth-warm {
  background: conic-gradient(from 0deg, var(--warmth-warm), var(--glow-gold), var(--warmth-warm));
}

.orb-warmth-ring.warmth-neutral {
  background: conic-gradient(from 0deg, var(--warmth-neutral), var(--text-ghost), var(--warmth-neutral));
}

.orb-warmth-ring.warmth-cool {
  background: conic-gradient(from 0deg, var(--warmth-cool), var(--glow-cool), var(--warmth-cool));
}

@keyframes orbBreathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.06); opacity: 0.85; }
}

.orb-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--vault-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--text-primary);
  overflow: hidden;
  border: 2px solid var(--vault-surface);
  z-index: 1;
}

.orb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.orb-status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--vault-obsidian);
  z-index: 2;
}

.orb-status.online { background: var(--glow-emerald); }
.orb-status.offline { background: var(--text-ghost); }

.orb-name {
  font-size: 0.72rem;
  color: var(--text-secondary);
  max-width: 80px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Add person orb */
.presence-orb.add-orb .orb-avatar {
  background: transparent;
  border: 2px dashed rgba(212, 165, 116, 0.3);
  color: var(--glow-primary);
  font-size: 1.5rem;
}

.presence-orb.add-orb:hover .orb-avatar {
  border-color: var(--glow-primary);
  background: rgba(212, 165, 116, 0.06);
}

/* Capsules Counter */
.atrium-capsules-counter {
  text-align: center;
  padding: var(--space-xl) 0;
  margin-top: var(--space-lg);
}

.capsules-remaining {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.capsules-remaining .capsule-dots {
  display: flex;
  gap: 4px;
}

.capsules-remaining .capsule-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glow-primary);
  transition: all var(--duration-normal) var(--ease-smooth);
}

.capsules-remaining .capsule-dot.used {
  background: var(--text-ghost);
  opacity: 0.4;
}

/* ════════════════════════════════════════════════════════════════
   THE EXCHANGE — Capsules Feed
   ════════════════════════════════════════════════════════════════ */
.exchange-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
}

.exchange-empty .empty-orb {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg);
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  animation: orbBreathe var(--duration-breath) ease-in-out infinite;
}

.exchange-empty h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.exchange-empty p {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Capsule Card */
.capsule-card {
  position: relative;
  background: var(--vault-card);
  border: 1px solid var(--vault-card-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all var(--duration-normal) var(--ease-smooth);
  animation: capsuleFloat var(--duration-slow) var(--ease-out) both;
  overflow: hidden;
}

.capsule-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.15), transparent 40%, transparent 60%, rgba(212, 165, 116, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.capsule-card:hover {
  box-shadow: var(--shadow-glow);
}

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

.capsule-card .capsule-sender {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.capsule-card .capsule-sender-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--glow-primary), var(--glow-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--vault-obsidian);
}

.capsule-card .capsule-sender-name {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.capsule-card .capsule-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Sealed Capsule (unopened) */
.capsule-card.sealed {
  cursor: pointer;
  border-color: rgba(212, 165, 116, 0.15);
}

.capsule-card.sealed .seal-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 13, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-xl);
  z-index: 5;
  transition: all var(--duration-slow) var(--ease-smooth);
}

.capsule-card.sealed .seal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--glow-warm), var(--glow-rose));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  box-shadow: 0 0 30px rgba(212, 165, 116, 0.3);
  animation: sealPulse 2.5s ease-in-out infinite;
}

@keyframes sealPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(212, 165, 116, 0.2); transform: scale(1); }
  50% { box-shadow: 0 0 40px rgba(212, 165, 116, 0.4); transform: scale(1.05); }
}

.capsule-card.sealed .seal-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Capsule voice UI — see EDITORIAL CAPSULE CARDS section (.capsule-voice) */

.capsule-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-md);
}

.capsule-media img,
.capsule-media video {
  width: 100%;
  display: block;
  border-radius: var(--radius-md);
}

/* Warmth acknowledgment */
.capsule-warmth {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-md);
  gap: var(--space-sm);
}

.warmth-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all var(--duration-fast) var(--ease-real-out);
}

.warmth-btn:hover {
  background: rgba(212, 165, 116, 0.1);
  border-color: rgba(212, 165, 116, 0.2);
  transform: scale(1.1);
}

.warmth-btn.warmed {
  background: rgba(212, 165, 116, 0.15);
  border-color: rgba(212, 165, 116, 0.3);
  box-shadow: 0 0 12px rgba(212, 165, 116, 0.15);
}

/* ════════════════════════════════════════════════════════════════
   THE GLOW ROOM — Raw, Honest Space
   ════════════════════════════════════════════════════════════════ */
.glow-room-header {
  text-align: center;
  padding: var(--space-xl) 0;
  position: relative;
}

.glow-room-header::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.06) 0%, transparent 70%);
  animation: glowPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.glow-room-header h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--glow-gold);
  margin-bottom: var(--space-sm);
}

.glow-room-header p {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.glow-score-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  margin-top: var(--space-md);
  font-size: 0.8rem;
  color: var(--glow-gold);
}

.glow-feed {
  padding-top: var(--space-lg);
}

.glow-capsule {
  position: relative;
  background: var(--vault-card);
  border: 1px solid rgba(251, 191, 36, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glow-capsule::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), transparent 40%, transparent 60%, rgba(251, 191, 36, 0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glow-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(251, 191, 36, 0.1);
  font-size: 0.68rem;
  color: var(--glow-gold);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}


/* ════════════════════════════════════════════════════════════════
   TOP NAVIGATION
   ════════════════════════════════════════════════════════════════ */
/* Top nav as a museum directory plate — warm dark wood with brass edging,
   sits above the marble like a brass-mounted info bar at a gallery entrance. */
.vault-top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.5rem;
  background: linear-gradient(180deg, rgba(58, 46, 30, 0.94), rgba(48, 36, 22, 0.92));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow:
    inset 0 -1px 0 rgba(244, 234, 214, 0.08),
    0 4px 14px rgba(40, 28, 12, 0.18);
}

.vault-top-nav .nav-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.vault-top-nav .back-btn {
  background: rgba(212, 175, 55, 0.12);
  color: #f4ead6;
  border: 1px solid rgba(212, 175, 55, 0.25);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-family: var(--font-body);
  text-decoration: none;
  transition: all var(--duration-normal) var(--ease-smooth);
  cursor: pointer;
}

.vault-top-nav .back-btn:hover {
  background: rgba(212, 175, 55, 0.22);
  color: #fbbf24;
  border-color: rgba(212, 175, 55, 0.45);
}

.vault-top-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vault-top-nav .nav-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(244, 234, 214, 0.06);
  color: #f4ead6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-smooth);
}

.vault-top-nav .nav-icon-btn:hover {
  background: rgba(212, 175, 55, 0.18);
  color: #fbbf24;
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
}

/* ════════════════════════════════════════════════════════════════
   CHROME ICONS — circular icon-only buttons matching Pulse / Bond /
   Spark / Thread for cross-trace brand consistency.
   ════════════════════════════════════════════════════════════════ */
.vault-top-nav .nav-icon-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(244, 234, 214, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.22);
  color: #f4ead6;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth),
              box-shadow var(--duration-fast) var(--ease-smooth);
  -webkit-tap-highlight-color: transparent;
}

.vault-top-nav .nav-icon-cell img,
.vault-top-nav .nav-icon-cell svg {
  display: block;
  height: 22px;
  width: auto;
  flex: 0 0 auto;
}

.vault-top-nav .nav-icon-cell:hover,
.vault-top-nav .nav-icon-cell:focus-visible {
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.5);
  color: #fbbf24;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
  outline: none;
}

.vault-top-nav .trace-brand-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth);
  -webkit-tap-highlight-color: transparent;
}
.vault-top-nav .trace-brand-home-btn:hover {
  transform: translateY(-2px);
  opacity: 0.94;
}
.vault-top-nav .trace-brand-home-btn:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.45);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .vault-top-nav .nav-icon-cell { width: 40px; height: 40px; }
  .vault-top-nav .nav-icon-cell img,
  .vault-top-nav .nav-icon-cell svg { height: 20px; }
}

/* ════════════════════════════════════════════════════════════════
   STATUS SEAL (Phase 3 of Cohesion Pass)
   Personal anchor in the chrome: "Hi {name} - {N} new - {N}-day streak"
   Sits centered between the back-link and the right-side icons.
   ════════════════════════════════════════════════════════════════ */
.nav-status-seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(247, 240, 224, 0.18), rgba(238, 225, 200, 0.10));
  border: 1px solid rgba(212, 175, 55, 0.32);
  color: #f4ead6;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.18);
  /* Centered absolutely so it's visually anchored, doesn't shift with the
     back-button's text length on smaller screens. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none; /* purely decorative status; not a button (yet) */
}

.nav-status-seal[hidden] { display: none; }

.nav-status-seal__greet {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.92rem;
  color: #fbbf24;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav-status-seal__divider {
  color: rgba(212, 175, 55, 0.55);
  font-weight: 700;
}

.nav-status-seal__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.nav-status-seal__num {
  font-weight: 600;
  color: #fbbf24;
  font-size: 0.86rem;
}

/* Wave E: gentle gold pulse on the unread count when N > 0 so the eye
   catches "you have voices waiting" without a noisy red badge.
   Triggered by data-has-unread="1" set in renderPersonalAnchor. */
#sealNewCount[data-unread="1"] {
  animation: sealUnreadPulse 2.4s ease-in-out infinite;
}

@keyframes sealUnreadPulse {
  0%, 100% {
    color: #fbbf24;
    text-shadow: 0 0 0 rgba(251, 191, 36, 0);
  }
  50% {
    color: #ffd56b;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  #sealNewCount[data-unread="1"] { animation: none; }
}

.nav-status-seal__label {
  font-size: 0.7rem;
  color: rgba(244, 234, 214, 0.78);
  letter-spacing: 0.06em;
}

/* On narrow screens, drop the seal into a slim form (numbers only) so it
   doesn't collide with the icons on the right or wrap the back link. */
@media (max-width: 760px) {
  .nav-status-seal {
    padding: 4px 10px;
    gap: 6px;
    font-size: 0.72rem;
  }
  .nav-status-seal__greet,
  .nav-status-seal__label { display: none; }
  .nav-status-seal__metric::after {
    content: attr(data-short);
    font-size: 0.62rem;
    color: rgba(244, 234, 214, 0.65);
    margin-left: 2px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 480px) {
  .nav-status-seal { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   MODALS & OVERLAYS
   ════════════════════════════════════════════════════════════════ */
.vault-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 13, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-smooth);
}

.vault-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.vault-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  z-index: 201;
  background: var(--vault-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-xl);
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-real-out);
  overflow-y: auto;
}

.vault-modal.open {
  transform: translateY(0);
}

.vault-modal .modal-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--text-ghost);
  margin: 0 auto var(--space-lg);
}

.vault-modal h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-pure);
  margin-bottom: var(--space-sm);
}

.vault-modal p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: var(--space-lg);
}

/* ════════════════════════════════════════════════════════════════
   RECORDER UI (Phase 2 of Cohesion Pass)
   The composer modal lives inside the brass-on-marble world. Recorder
   orb is brass (matches the Compose FAB), recipient chips have avatars,
   Send button is persistent with a disabled state.
   ════════════════════════════════════════════════════════════════ */
.composer-header { margin-bottom: 12px; }
.composer-sub {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
}

.recorder-container {
  text-align: center;
  padding: 18px 0 14px;
}

.recorder-orb {
  width: clamp(96px, 11vw, 116px);
  height: clamp(96px, 11vw, 116px);
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 235, 190, 0.55) 0%, transparent 50%),
    linear-gradient(140deg, var(--glow-gold, #d4af37) 0%, var(--glow-warm, #b8893a) 100%);
  color: var(--vault-obsidian, #1a1410);
  box-shadow:
    inset 0 -4px 10px rgba(0, 0, 0, 0.32),
    inset 0 2px 4px rgba(255, 235, 190, 0.5),
    0 12px 32px rgba(70, 45, 18, 0.36),
    0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.4),
              box-shadow 0.32s ease,
              border-color 0.3s ease,
              background 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.recorder-orb__icon {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.recorder-orb__rim {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.32);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.recorder-orb:hover,
.recorder-orb:focus-visible {
  transform: translateY(-2px) scale(1.03);
  outline: none;
  box-shadow:
    inset 0 -4px 10px rgba(0, 0, 0, 0.32),
    inset 0 2px 4px rgba(255, 235, 190, 0.55),
    0 16px 40px rgba(70, 45, 18, 0.45),
    0 0 0 6px rgba(212, 175, 55, 0.18);
}

/* While recording, the orb inverts: cream center, brass rim breathing */
.recorder-orb.recording {
  background:
    radial-gradient(circle at 32% 28%, #fff7e3 0%, #f0d895 65%);
  border-color: rgba(180, 130, 30, 0.85);
  color: #6b3a1c;
  animation: recorderBreath 1.6s ease-in-out infinite;
}

.recorder-orb.recording .recorder-orb__rim {
  opacity: 1;
  animation: recorderRimPulse 1.6s ease-in-out infinite;
}

@keyframes recorderBreath {
  0%, 100% {
    box-shadow:
      inset 0 -4px 10px rgba(0, 0, 0, 0.18),
      0 12px 32px rgba(180, 130, 30, 0.4),
      0 0 0 0 rgba(212, 175, 55, 0.45);
  }
  50% {
    box-shadow:
      inset 0 -4px 10px rgba(0, 0, 0, 0.2),
      0 16px 44px rgba(180, 130, 30, 0.55),
      0 0 0 12px rgba(212, 175, 55, 0.0);
  }
}

@keyframes recorderRimPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .recorder-orb,
  .recorder-orb.recording,
  .recorder-orb.recording .recorder-orb__rim {
    animation: none;
    transition: none;
  }
}

.recorder-timer {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.recorder-label {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

/* Recipient section (labeled wrapper around chips) */
.recipient-section {
  margin: 8px 0 4px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
}

.recipient-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.recipient-section__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}

.recipient-section__count {
  font-size: 0.74rem;
  color: var(--glow-warm, #b8893a);
  font-weight: 500;
}

.recipient-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}

.recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-smooth);
  font-family: var(--font-body);
}

.recipient-chip:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.35);
  color: var(--text-primary);
}

.recipient-chip.selected {
  background: linear-gradient(140deg, rgba(212, 175, 55, 0.25), rgba(184, 137, 58, 0.18));
  border-color: rgba(212, 175, 55, 0.7);
  color: #2a2018;
}

.recipient-chip .chip-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--glow-gold, #d4af37), var(--glow-warm, #b8893a));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  color: var(--vault-obsidian, #1a1410);
  font-weight: 700;
  border: 1px solid rgba(180, 130, 30, 0.4);
}

.recipient-chip .chip-name {
  white-space: nowrap;
}

.no-recipients {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 4px;
}

/* Glow Mode description text */
.glow-mode-desc {
  margin-top: 6px;
  margin-left: 2px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
}

/* Composer action row + persistent disabled-state Send button */
.composer-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.composer-actions .btn-primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS & CONTROLS
   ════════════════════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, var(--glow-primary), var(--glow-accent));
  color: var(--vault-obsidian);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-real-out);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-smooth);
}

.btn-secondary:hover {
  background: var(--vault-elevated);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════════ */
.vault-toast-container {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.vault-toast {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(247, 240, 224, 0.98), rgba(238, 225, 200, 0.96));
  border: 1px solid rgba(180, 130, 30, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 0.82rem;
  color: #2a2018;
  pointer-events: auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 6px 22px rgba(60, 40, 15, 0.28);
  animation: toastIn var(--duration-normal) var(--ease-real-out) both;
  box-shadow: var(--shadow-depth);
}

.vault-toast.leaving {
  animation: toastOut var(--duration-normal) var(--ease-smooth) both;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

/* ════════════════════════════════════════════════════════════════
   VOICE ROOMS
   ════════════════════════════════════════════════════════════════ */
.voice-room-card {
  background: var(--vault-card);
  border: 1px solid rgba(212, 165, 116, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.voice-room-card.campfire {
  border-color: rgba(251, 191, 36, 0.15);
  background: linear-gradient(145deg, rgba(30, 20, 10, 0.8), var(--vault-card));
}

.voice-room-card .room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.voice-room-card .room-header h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-primary);
}

.voice-room-card .campfire-glow {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.4), rgba(249, 115, 22, 0.2), transparent);
  animation: campfireFlicker 2s ease-in-out infinite alternate;
}

@keyframes campfireFlicker {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1) translateY(-2px); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

.voice-room-card .room-participants {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md) 0;
}

.voice-room-card .room-participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.voice-room-card .participant-orb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--glow-primary), var(--glow-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--vault-obsidian);
}

.voice-room-card .participant-name {
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.voice-room-card .room-controls {
  display: flex;
  justify-content: center;
  padding-top: var(--space-md);
}

/* ════════════════════════════════════════════════════════════════
   DAILY RITUAL CARD
   ════════════════════════════════════════════════════════════════ */
.ritual-card {
  background: rgba(30, 58, 58, 0.5);
  border: 1px solid rgba(212, 165, 116, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: var(--space-lg);
}

.ritual-card .ritual-question {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  margin: var(--space-md) 0 var(--space-lg);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ritual-card .ritual-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}

/* ════════════════════════════════════════════════════════════════
   CONNECTION DIVIDENDS NUDGE
   ════════════════════════════════════════════════════════════════ */
.earnings-nudge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-md) 0;
  margin-top: var(--space-sm);
}

.earnings-nudge .nudge-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.earnings-nudge .nudge-amount {
  font-size: 1rem;
  font-weight: 600;
  color: var(--glow-gold);
}

.earnings-nudge .nudge-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   SEND A CAPSULE CTA
   ════════════════════════════════════════════════════════════════ */
.send-capsule-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 24px auto 0;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, var(--glow-primary), var(--glow-accent));
  color: var(--vault-obsidian);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-real-out);
  box-shadow: 0 4px 20px rgba(212, 165, 116, 0.25);
}

.send-capsule-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 28px rgba(212, 165, 116, 0.35);
}

.send-capsule-cta:active {
  transform: scale(0.97);
}

/* ════════════════════════════════════════════════════════════════
   RECIPIENT CHIPS
   ════════════════════════════════════════════════════════════════ */
.recipient-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: var(--space-sm) 0;
}

.recipient-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(212, 165, 116, 0.3);
  background: rgba(212, 165, 116, 0.08);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.recipient-chip.selected {
  background: rgba(212, 165, 116, 0.25);
  border-color: var(--glow-primary);
  color: var(--text-primary);
}

.no-recipients {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .vault-main {
    padding: var(--space-md);
    padding-bottom: var(--space-2xl);
  }

  .vault-header {
    padding: var(--space-sm) var(--space-md);
  }

  .presence-field {
    gap: var(--space-lg);
  }

  .orb-container {
    width: 60px;
    height: 60px;
  }

}

@media (min-width: 768px) {
  .vault-main {
    padding: var(--space-xl) var(--space-2xl);
  }

  .presence-field {
    gap: var(--space-2xl);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   VAULT V2 — Infrastructure Overhaul Styles
   Subscription, Earnings, Legacy Seals, Professional Vetting
   ════════════════════════════════════════════════════════════════════════════ */

/* Sub-quiet tagline */
.vault-sub-quiet {
  font-size: 0.72rem;
  color: rgba(90, 74, 58, 0.72);
  margin-top: 6px;
  letter-spacing: 0.03em;
  font-style: italic;
}

/* Subscription Badge in nav */
.subscription-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--text-ghost);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subscription-badge.premium {
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.2), rgba(251, 191, 36, 0.15));
  color: var(--glow-gold);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

/* Upgrade Banner */
.upgrade-banner {
  position: relative;
  margin: 0 16px 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.08), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(212, 165, 116, 0.12);
}

.upgrade-banner-glow {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(212, 165, 116, 0.06) 0%, transparent 70%);
  animation: bannerGlow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bannerGlow {
  0%, 100% { opacity: 0.5; transform: translateX(-10%); }
  50% { opacity: 1; transform: translateX(10%); }
}

.upgrade-banner-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 16px;
}

.upgrade-banner-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--glow-warm);
}

.upgrade-banner-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.upgrade-banner-btn {
  flex-shrink: 0;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, var(--glow-warm), #c49660);
  color: var(--vault-obsidian);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.upgrade-banner-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3);
}

/* Earnings dot (gold pulse) */
.earnings-dot {
  background: var(--glow-gold) !important;
  animation: earningsPulse 2s ease-in-out infinite;
}

@keyframes earningsPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
}

/* ═══════════════════════════════════════════════════════
   EARNINGS ZONE
   ═══════════════════════════════════════════════════════ */

.earnings-hero {
  text-align: center;
  padding: 40px 0 32px;
}

.earnings-hero-amount {
  font-size: 3.2rem;
  font-weight: 300;
  color: var(--glow-gold);
  letter-spacing: -0.02em;
  line-height: 1;
}

.earnings-hero-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.earnings-stats-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 24px;
}

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

.earnings-stat-value {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
}

.earnings-stat-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.earnings-optin-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  background: var(--vault-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  margin-bottom: 20px;
}

.earnings-optin-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.earnings-optin-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 280px;
}

.earnings-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.earnings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.earnings-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--text-ghost);
  border-radius: 12px;
  transition: background 0.3s;
}

.earnings-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform 0.3s;
}

.earnings-toggle input:checked + .earnings-toggle-track {
  background: var(--glow-gold);
}

.earnings-toggle input:checked + .earnings-toggle-track::after {
  transform: translateX(20px);
}

.earnings-explainer {
  padding: 16px;
  background: var(--vault-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  margin-bottom: 24px;
}

.earnings-explainer p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.earnings-explainer p:last-child {
  margin-bottom: 0;
}

.earnings-history {
  margin-top: 24px;
}

.earnings-history-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.earnings-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--glass-border);
}

.earnings-history-month {
  font-size: 0.88rem;
  color: var(--text-primary);
}

.earnings-history-amount {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--glow-gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

.earnings-history-amount.paid {
  color: var(--glow-emerald);
}

.earnings-history-status {
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--vault-elevated);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.earnings-empty {
  text-align: center;
  padding: 40px 20px;
}

.earnings-empty p {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════
   EARNINGS — Actions, Partners, Reviews, Withdrawals
   ═══════════════════════════════════════════════════════ */

.earnings-actions-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 0 24px;
}

.earnings-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--vault-elevated);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.earnings-action-btn:hover:not(:disabled) {
  border-color: rgba(212, 165, 116, 0.3);
  transform: translateY(-1px);
}

.earnings-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.earnings-action-btn.withdraw {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(16, 185, 129, 0.08));
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.earnings-action-btn.link-bank {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(99, 102, 241, 0.08));
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.earnings-action-btn.earn-more {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(212, 165, 116, 0.08));
  border-color: rgba(251, 191, 36, 0.3);
  color: var(--glow-gold);
}

.earnings-pending-notice {
  text-align: center;
  padding: 8px 16px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  color: var(--glow-gold);
  margin-bottom: 16px;
}

.earnings-breakdown {
  padding: 16px;
  background: var(--vault-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  margin-bottom: 24px;
}

.earnings-section-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.earnings-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.84rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--glass-border);
}

.earnings-breakdown-row:last-child { border-bottom: none; }

.earnings-partners-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid var(--glass-border);
}

.earnings-partners-header {
  text-align: center;
  margin-bottom: 24px;
}

.earnings-partners-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.earnings-subsection-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.earnings-subsection-desc {
  font-size: 0.74rem;
  color: var(--text-ghost);
  margin-bottom: 12px;
}

.earnings-partner-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.earnings-partner-card {
  background: var(--vault-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: border-color 0.2s, transform 0.2s;
}

.earnings-partner-card:hover {
  border-color: rgba(212, 165, 116, 0.2);
  transform: translateY(-1px);
}

.earnings-partner-card.reviewed {
  opacity: 0.7;
  border-color: rgba(34, 197, 94, 0.2);
}

.partner-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.partner-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}

.partner-logo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--vault-elevated), var(--vault-surface));
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--glow-gold);
}

.partner-card-info { flex: 1; }

.partner-card-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.partner-card-category {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.partner-card-prompt {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--vault-elevated);
  border-radius: var(--radius-sm);
}

.partner-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.partner-card-earn {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--glow-gold);
}

.partner-card-reviews {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.partner-card-review-btn {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(212, 165, 116, 0.3);
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.08), transparent);
  color: var(--glow-gold);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.partner-card-review-btn:hover {
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(251, 191, 36, 0.08));
  transform: translateY(-1px);
}

.partner-card-reviewed-badge {
  text-align: center;
  padding: 8px;
  font-size: 0.78rem;
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, 0.05);
}

.earnings-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.earnings-category-pill {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--vault-elevated);
  color: var(--text-secondary);
  font-size: 0.74rem;
  cursor: pointer;
  transition: all 0.2s;
}

.earnings-category-pill:hover {
  border-color: rgba(212, 165, 116, 0.3);
  color: var(--text-primary);
}

.earnings-coming-soon {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 16px;
  text-align: center;
}

.earnings-apply-partner {
  text-align: center;
  padding: 24px;
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  margin-top: 24px;
}

.earnings-apply-partner p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.earnings-apply-btn {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(212, 165, 116, 0.3);
  background: transparent;
  color: var(--glow-gold);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.earnings-apply-btn:hover {
  background: rgba(212, 165, 116, 0.08);
}

.earnings-partners-empty {
  text-align: center;
  padding: 32px 16px;
}

.earnings-partners-empty p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Review Flow */
.review-flow {
  text-align: center;
  padding: 8px 0;
}

.review-flow-header { margin-bottom: 24px; }

.review-partner-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  margin-bottom: 12px;
}

.review-partner-logo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--vault-elevated);
  border: 1px solid var(--glass-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--glow-gold);
  margin-bottom: 12px;
}

.review-flow-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.review-flow-prompt {
  font-size: 0.84rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 8px;
}

.review-flow-earn {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--glow-gold);
}

.review-flow-recorder { padding: 24px 0; }

.review-glow-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.review-glow-ring.active {
  border-color: var(--glow-gold);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
  animation: reviewGlow 1.5s ease-in-out infinite;
}

@keyframes reviewGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.2); }
  50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.5); }
}

.review-record-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--glow-gold), #d4a574);
  color: #0f0c08;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: transform 0.2s;
}

.review-record-btn:active, .review-record-btn.recording {
  transform: scale(1.1);
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.review-record-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 12px;
}

.review-record-note {
  font-size: 0.72rem;
  color: var(--text-ghost);
  margin-top: 4px;
}

.review-processing {
  padding: 40px 0;
  text-align: center;
}

.review-processing p {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-top: 16px;
}

.review-glow-pulse {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--glow-gold);
  margin: 0 auto;
  animation: reviewGlowPulse 1s ease-in-out infinite;
}

@keyframes reviewGlowPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}

.review-success, .review-failed { padding: 24px 0; }

.review-success h3 {
  font-size: 1.1rem;
  color: #22c55e;
  margin: 12px 0 8px;
}

.review-earnings-credit {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--glow-gold);
  margin-bottom: 8px;
}

.review-failed h3 {
  font-size: 1.1rem;
  color: #ef4444;
  margin: 12px 0 8px;
}

.review-error {
  color: #ef4444;
  font-size: 0.84rem;
  padding: 24px 0;
}

/* Partner Application Form */
.partner-application h2 {
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.partner-app-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.partner-app-input {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--vault-elevated);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.84rem;
  outline: none;
  transition: border-color 0.2s;
}

.partner-app-input:focus {
  border-color: rgba(212, 165, 116, 0.4);
}

.partner-app-submit {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  border-radius: var(--radius-full);
  border: none;
  background: linear-gradient(135deg, var(--glow-gold), #d4a574);
  color: #0f0c08;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.partner-app-submit:hover { transform: translateY(-1px); }

.earnings-history-amount.processing {
  color: var(--glow-gold);
}

.earnings-history-amount.completed {
  color: var(--glow-emerald);
}

/* Verification Flow */
.verify-phrase-box {
  margin: 16px 0;
  padding: 16px;
  background: var(--vault-elevated);
  border: 1px solid rgba(212, 165, 116, 0.15);
  border-radius: var(--radius-md);
}

.verify-phrase-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.verify-phrase-text {
  font-size: 1rem;
  color: var(--text-primary);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   SUBSCRIPTION MODAL — Plan Cards
   ═══════════════════════════════════════════════════════ */

.plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 500px) {
  .plan-cards {
    grid-template-columns: 1fr;
  }
}

.plan-card {
  position: relative;
  background: var(--vault-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px 18px;
  text-align: center;
  transition: border-color 0.3s, transform 0.2s;
}

.plan-card:hover {
  border-color: rgba(212, 165, 116, 0.2);
  transform: translateY(-2px);
}

.plan-card.featured {
  border-color: rgba(251, 191, 36, 0.3);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.04) 0%, var(--vault-surface) 100%);
}

.plan-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  background: var(--glow-gold);
  color: var(--vault-obsidian);
}

.plan-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.plan-card-price {
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--glow-warm);
  margin-bottom: 16px;
}

.plan-card-price span {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.plan-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
}

.plan-card-features li {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 6px 0;
  padding-left: 18px;
  position: relative;
}

.plan-card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow-warm);
}

.plan-card-btn {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--vault-elevated);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.plan-card-btn:hover {
  background: var(--vault-surface);
  border-color: var(--glow-warm);
}

.plan-card-btn.featured {
  background: linear-gradient(135deg, var(--glow-warm), #c49660);
  color: var(--vault-obsidian);
  border-color: transparent;
  font-weight: 600;
}

.plan-card-btn.featured:hover {
  box-shadow: 0 4px 20px rgba(212, 165, 116, 0.3);
}

/* ═══════════════════════════════════════════════════════
   LEGACY SEAL CERTIFICATE OVERLAY
   ═══════════════════════════════════════════════════════ */

.seal-certificate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.seal-certificate-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.seal-certificate {
  background: var(--vault-surface);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 60px rgba(212, 175, 55, 0.1);
}

.seal-certificate-icon {
  margin-bottom: 16px;
}

.seal-certificate h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #d4af37;
  font-weight: 400;
  margin-bottom: 20px;
}

.seal-certificate-text {
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-align: left;
  background: var(--vault-obsidian);
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  white-space: pre-wrap;
  margin-bottom: 16px;
  line-height: 1.6;
}

.seal-certificate-hash {
  font-family: 'Courier New', monospace;
  font-size: 0.6rem;
  color: var(--text-muted);
  word-break: break-all;
  padding: 8px;
  background: var(--vault-elevated);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}

/* ════════════════════════════════════════════════════════════════
   CENTERED VOICE TRIGGER BUTTON
   ════════════════════════════════════════════════════════════════ */
.vault-voice-trigger {
  display: flex;
  justify-content: center;
  padding: var(--space-xl) 0 var(--space-lg);
}

.voice-trigger-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(212, 165, 116, 0.3);
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(251, 191, 36, 0.1));
  color: var(--glow-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-real-out);
  box-shadow: 0 4px 24px rgba(212, 165, 116, 0.15), 0 0 0 0 rgba(212, 165, 116, 0.1);
  animation: voicePulse 3s ease-in-out infinite;
}

.voice-trigger-btn:hover {
  transform: scale(1.1);
  border-color: rgba(212, 165, 116, 0.5);
  box-shadow: 0 6px 32px rgba(212, 165, 116, 0.25);
}

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

@keyframes voicePulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(212, 165, 116, 0.15), 0 0 0 0 rgba(212, 165, 116, 0.1); }
  50% { box-shadow: 0 4px 24px rgba(212, 165, 116, 0.2), 0 0 0 8px rgba(212, 165, 116, 0.04); }
}

/* ════════════════════════════════════════════════════════════════
   CIRCLE PRESENCE STRIP (compact, within Messages zone)
   ════════════════════════════════════════════════════════════════ */
.circle-presence-strip {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) 0;
}

.presence-field.compact {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space-xs) 0;
}

.presence-field.compact::-webkit-scrollbar {
  display: none;
}

.presence-field.compact .circle-orb {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--vault-elevated);
  border: 2px solid var(--glass-border);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-smooth);
  position: relative;
}

.presence-field.compact .circle-orb.online {
  border-color: rgba(212, 165, 116, 0.4);
  box-shadow: 0 0 12px rgba(212, 165, 116, 0.15);
}

.presence-field.compact .circle-orb:hover {
  transform: scale(1.1);
  border-color: var(--glow-primary);
}

/* ════════════════════════════════════════════════════════════════
   GLOW MODE TOGGLE (inside composer)
   ════════════════════════════════════════════════════════════════ */
.witness-mode-section {
  padding: var(--space-md) 0 0;
  border-top: 1px solid rgba(212, 175, 55, 0.22);
  margin-top: var(--space-sm);
}
.witness-mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}
.witness-mode-desc {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.82;
}
.witness-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.witness-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  font-size: 0.82rem;
  cursor: pointer;
}
.witness-chip.selected {
  border-color: rgba(255, 230, 170, 0.9);
  background: rgba(212, 175, 55, 0.28);
}
.witness-record-btn {
  margin-top: 10px;
  width: 100%;
}
.witness-record-status {
  margin-top: 6px;
  font-size: 0.76rem;
  color: rgba(255, 220, 140, 0.85);
}

.glow-mode-toggle {
  padding: var(--space-md) 0 0;
}

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

.glow-toggle-label input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.glow-toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--text-ghost);
  border-radius: 11px;
  transition: background var(--duration-normal) var(--ease-smooth);
  flex-shrink: 0;
}

.glow-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: all var(--duration-normal) var(--ease-real-out);
}

.glow-toggle-label input:checked + .glow-toggle-track {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(212, 165, 116, 0.5));
}

.glow-toggle-label input:checked + .glow-toggle-track .glow-toggle-thumb {
  left: 20px;
  background: var(--glow-gold);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.glow-toggle-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: color var(--duration-normal);
}

.glow-toggle-label input:checked ~ .glow-toggle-text {
  color: var(--glow-gold);
}

/* ════════════════════════════════════════════════════════════════
   EDITORIAL CAPSULE CARDS
   ════════════════════════════════════════════════════════════════ */
.capsule-card {
  background: var(--vault-card);
  border: 1px solid var(--vault-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-card);
  transition: all var(--duration-normal) var(--ease-smooth);
  animation: cardEnter var(--duration-slow) var(--ease-real-out) both;
}

.capsule-card:hover {
  border-color: rgba(212, 165, 116, 0.12);
  box-shadow: var(--shadow-card), 0 0 20px rgba(212, 165, 116, 0.04);
}

.capsule-card.sealed {
  border-color: rgba(212, 165, 116, 0.15);
  box-shadow: var(--shadow-card), 0 0 30px rgba(212, 165, 116, 0.06);
}

.capsule-card.sealed .capsule-sender-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
}

.capsule-sender {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.capsule-sender-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.2), rgba(251, 191, 36, 0.1));
  border: 1px solid rgba(212, 165, 116, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--glow-primary);
}

.capsule-sender-name {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.capsule-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.glow-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(251, 191, 36, 0.12);
  color: var(--glow-gold);
  font-size: 0.65rem;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}

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

/* Capsule voice player — flat chrome, no decorative waveform */
.capsule-voice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(212, 165, 116, 0.04);
  border: 1px solid rgba(212, 165, 116, 0.06);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.capsule-voice:hover {
  background: rgba(212, 165, 116, 0.07);
}

.capsule-voice.playing {
  border-color: rgba(212, 165, 116, 0.2);
  box-shadow: 0 0 16px rgba(212, 165, 116, 0.08);
}

.capsule-voice-spacer {
  flex: 1;
  min-width: 8px;
}

.capsule-voice-duration {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.play-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--glow-primary), var(--glow-accent));
  color: var(--vault-obsidian);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast);
}

.play-btn:hover {
  transform: scale(1.08);
}

.duration {
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
}

/* Capsule media */
.capsule-media {
  margin-top: var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.capsule-media img,
.capsule-media video {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
}

/* Warmth (heart reaction) */
.capsule-warmth {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-sm);
}

.warmth-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all var(--duration-fast);
  position: relative;
}

.warmth-btn:hover {
  color: var(--warmth-hot);
  transform: scale(1.15);
}

.warmth-btn.warmed {
  color: var(--warmth-hot);
}

/* Seal overlay */
.seal-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl) 0;
}

.seal-icon {
  color: var(--glow-primary);
  opacity: 0.6;
}

.seal-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Empty state */
.exchange-empty {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
}

.exchange-empty .empty-orb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(212, 165, 116, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  color: var(--text-muted);
}

.exchange-empty h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.exchange-empty p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Daily ritual card (gallery placard style) */
.ritual-card {
  text-align: center;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--vault-card);
  border: 1px solid var(--vault-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-normal) var(--ease-smooth);
}

.ritual-card--shift-l {
  transform: translateX(-clamp(4px, 2vw, 14px));
}

.ritual-card--shift-r {
  transform: translateX(clamp(4px, 2vw, 14px));
}

.ritual-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--glow-primary);
  margin-bottom: var(--space-sm);
}

.ritual-question {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

/* Glow capsule cards */
.glow-capsule {
  background: var(--vault-card);
  border: 1px solid rgba(251, 191, 36, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-card);
  animation: cardEnter var(--duration-slow) var(--ease-real-out) both;
}

.glow-capsule:hover {
  border-color: rgba(251, 191, 36, 0.15);
}

.glow-feed {
  display: flex;
  flex-direction: column;
}

/* Glow header styling */
.glow-room-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.glow-room-header h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  /* "Truth Glow" carved with GOLD inlay (gold = the verified/earnings
     concept) — matches the tagline keywords' chisel + light. */
  background: linear-gradient(165deg, #d6a345 0%, #a06a22 44%, #5c380f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 1px 0 rgba(255, 250, 238, 0.7))
    drop-shadow(0 -1px 1px rgba(40, 24, 8, 0.42));
}

.glow-room-header p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.glow-score-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-md);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.15);
  font-size: 0.78rem;
  color: var(--glow-gold);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   SEND A CAPSULE — Messages zone CTA strip (glass bar)
   ════════════════════════════════════════════════════════════════ */
.vault-send-capsule-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-bottom: var(--space-md);
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 165, 116, 0.12);
  background: rgba(22, 56, 56, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--duration-normal) var(--ease-smooth),
    background var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.vault-send-capsule-strip:hover {
  border-color: rgba(212, 165, 116, 0.22);
  background: rgba(22, 56, 56, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 36px rgba(0, 0, 0, 0.32);
}

.vault-send-capsule-strip:active {
  transform: scale(0.992);
}

.vault-send-capsule-strip svg {
  flex-shrink: 0;
  color: var(--glow-primary);
  opacity: 0.95;
}

.vault-send-capsule-strip .vault-send-capsule-strip-label {
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════════
   THE LISTENING VAULT — Wall + Listening Room
   ════════════════════════════════════════════════════════════════════ */

/* Capsule Reset — paper rolls: see css/vault-capsule-paper.css */

/* Reinforce Living Archive collection layout after .vault-wall grid rules above */
.vault-wall.vault-wall--rolls {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  justify-items: center !important;
  gap: 30px 24px !important;
  height: auto !important;
  padding-top: 18px !important;
  padding-bottom: 44px !important;
  max-width: min(1120px, 96vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.vault-wall.vault-wall--rolls .vault-paper-roll,
.vault-wall.vault-wall--rolls .vault-capsule-roll,
.vault-wall.vault-wall--rolls .vault-artifact {
  grid-area: unset !important;
  width: 100%;
  /* ~15% smaller discs: cap the gem so it reads as a refined token, not a
     large coin. Font sizes stay fixed (set on __name/__meta) so legibility
     holds at the smaller size. */
  max-width: 128px;
  margin-inline: auto;
}

.vault-wall--rolls .vault-artifact.is-entered {
  opacity: 1;
}

.vault-wall--rolls .vault-artifact.is-entering {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .vault-wall--rolls .vault-artifact.is-entering,
  .vault-wall--rolls .vault-artifact.is-entered {
    opacity: 1 !important;
    transition: none !important;
  }
}

.vault-horizon-cta-row[hidden] {
  display: none !important;
}

/* Vault Wall: a single-screen Mondrian grid of capsule tiles. */
.vault-wall {
  /* v29.13 — BULLETPROOF GRID
     Replaced the named-area Mondrian system (9 fragile grid-area slots,
     pattern roulette, clamp height) with a simple auto-fill minmax grid.
     - Every tile is the same predictable size (180–240px wide, fixed
       180px tall) so the layout is stable across viewports.
     - No pattern selection, no slot system, no two-tier grouping —
       all of those were adding failure surfaces that left tiles
       stranded off-screen.
     - Height is AUTO: the wall grows with content, never collapses,
       and never pushes the page below the fold via a fixed clamp(). */
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 22vw, 220px), 1fr));
  grid-auto-rows: clamp(170px, 22vw, 220px);
  gap: clamp(8px, 1.4vw, 16px);
  padding: clamp(10px, 1.4vw, 16px) 0;
  position: relative;
  overflow: visible;
}


.vault-wall::before,
.vault-wall::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(180, 130, 30, 0.42) 18%,
    rgba(255, 230, 170, 0.55) 50%,
    rgba(180, 130, 30, 0.42) 82%,
    transparent);
  pointer-events: none;
  z-index: 1;
}

.vault-wall::before { top: 0; }
.vault-wall::after  { bottom: 0; }

/* Grouped wall containers don't need their own hairlines — the inner
   walls render their own. Hide the outer pseudo-elements there. */
.vault-wall[data-grouped="true"]::before,
.vault-wall[data-grouped="true"]::after { display: none; }

/* When the wall is grouped (New on top, Already heard below), the outer
   #vaultWall is just a container — its inner .vault-wall children carry
   their own grid + heights. */
.vault-wall[data-grouped="true"] {
  display: block;
  height: auto;
  grid-template-areas: none;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 0;
}

.vault-wall--new {
  height: clamp(360px, calc(100dvh - 360px), 600px);
}

.vault-wall--heard {
  height: clamp(200px, 32dvh, 340px);
  transform: scale(0.94);
  transform-origin: top center;
  opacity: 0.82;
  margin-top: var(--space-md);
}

.vault-wall--heard .vault-tile {
  /* Quieter archive — no brass-breath pulse competing with New tiles */
  animation: none !important;
}

.vault-wall--heard .vault-tile.has-unplayed .vault-tile__pulse {
  /* Heard tiles can't be unplayed — defensive */
  animation: none;
}

.vault-wall-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-md) 0 var(--space-xs);
  height: 28px;
}

.vault-wall-divider::before,
.vault-wall-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(180, 130, 30, 0.45) 25%,
    rgba(180, 130, 30, 0.45) 75%,
    transparent);
}

.vault-wall-divider__label {
  flex: 0 0 auto;
  margin: 0 14px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(247, 240, 224, 0.94), rgba(238, 225, 200, 0.92));
  border: 1px solid rgba(180, 130, 30, 0.45);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a4a3a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 8px rgba(60, 40, 15, 0.18);
}

/* ════════════════════════════════════════════════════════════════════
   BOTTOM ANCHOR STRIP (Phase 1 of Cohesion Pass)
   Slim brass-stroke status row that lives below the wall and fills the
   marble dead-space with intentional, useful content. Each cell is a
   real button that opens the relevant view. Reads as continuous with
   the cream filter chips and wall divider — same brass language.
   ════════════════════════════════════════════════════════════════════ */
.vault-anchor-strip {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: clamp(14px, 2vw, 24px) auto 0;
  padding: 6px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(247, 240, 224, 0.92), rgba(238, 225, 200, 0.88));
  border: 1px solid rgba(180, 130, 30, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 18px rgba(60, 40, 15, 0.14);
  max-width: min(820px, 92vw);
  position: relative;
  z-index: 2;
}

.vault-anchor-cell {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 4px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* These are real buttons (they filter the wall / open earnings), so give
     them a resting button look — a faint pill with a soft brass edge — so
     it's obvious they're tappable, not just a static stat readout. */
  background: rgba(255, 250, 238, 0.55);
  border: 1px solid rgba(180, 130, 30, 0.3);
  cursor: pointer;
  border-radius: 16px;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}

.vault-anchor-cell:hover,
.vault-anchor-cell:focus-visible {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(150, 105, 30, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(150, 105, 30, 0.2);
  outline: none;
}

.vault-anchor-cell:active { transform: translateY(0); }

.vault-anchor-cell__value {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: #2a2018;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.vault-anchor-cell__label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5a4a3a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════════════
   REPORT A CAPSULE — a real Trust & Safety action. The shared component's
   `.is-dark` variant is light-on-dark, which was invisible on the Vault's
   LIGHT marble. This light-surface override makes it legible + clearly
   tappable, but quiet (it's secondary, not a headline). Two-class selector
   so it wins over the base `.cr-report-trigger` regardless of load order.
   ════════════════════════════════════════════════════════════════════ */
.cr-report-trigger.vault-report-trigger {
  color: #5a4a3a;
  border-color: rgba(90, 60, 20, 0.32);
  background: rgba(255, 250, 238, 0.55);
}
.cr-report-trigger.vault-report-trigger:hover,
.cr-report-trigger.vault-report-trigger:focus-visible {
  color: #2a2018;
  border-color: rgba(90, 60, 20, 0.55);
  background: rgba(255, 250, 238, 0.9);
}

.vault-anchor-divider {
  /* Dividers implied a static readout; with the cells now styled as real
     buttons (separated by gaps), the dividers are removed. */
  display: none;
  flex: 0 0 1px;
  align-self: center;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(180, 130, 30, 0.35), transparent);
}

@media (max-width: 480px) {
  .vault-anchor-cell__label { font-size: 0.6rem; letter-spacing: 0.06em; }
  .vault-anchor-cell { padding: 6px 8px; }
}

/* Pattern presets — picked by JS based on capsule count + day */
.vault-wall[data-pattern="single"] {
  --wall-pattern: "hero hero hero" "hero hero hero" "hero hero hero";
  --wall-cols: 1fr 1fr 1fr;
  --wall-rows: 1fr 1fr 1fr;
}

.vault-wall[data-pattern="duet-a"] {
  --wall-pattern: "hero hero m1" "hero hero m1" "hero hero m1";
  --wall-cols: 1.4fr 1.4fr 1fr;
  --wall-rows: 1fr 1fr 1fr;
}

.vault-wall[data-pattern="duet-b"] {
  --wall-pattern: "m1 hero hero" "m1 hero hero" "m1 hero hero";
  --wall-cols: 1fr 1.4fr 1.4fr;
  --wall-rows: 1fr 1fr 1fr;
}

.vault-wall[data-pattern="trio-a"] {
  --wall-pattern: "hero hero m1" "hero hero m1" "hero hero m2";
  --wall-cols: 1.5fr 1.5fr 1fr;
  --wall-rows: 1fr 1fr 1fr;
}

.vault-wall[data-pattern="trio-b"] {
  --wall-pattern: "hero hero hero" "hero hero hero" "m1   m1   m2";
  --wall-cols: 1fr 1fr 1fr;
  --wall-rows: 1.6fr 1.6fr 1fr;
}

.vault-wall[data-pattern="quartet-a"] {
  --wall-pattern:
    "hero hero m1"
    "hero hero m2"
    "w1   w2   m3";
  --wall-cols: 1.4fr 1.4fr 1fr;
  --wall-rows: 1fr 1fr 0.7fr;
}

.vault-wall[data-pattern="quartet-b"] {
  --wall-pattern:
    "m1   hero hero"
    "m2   hero hero"
    "m3   w1   w2";
  --wall-cols: 1fr 1.4fr 1.4fr;
  --wall-rows: 1fr 1fr 0.7fr;
}

.vault-wall[data-pattern="quint-a"] {
  --wall-pattern:
    "hero hero hero m1   m1"
    "hero hero hero m1   m1"
    "hero hero hero m2   m3"
    "w1   w2   w3   m2   m3";
  --wall-cols: 1.1fr 1.1fr 1.1fr 1fr 1fr;
  --wall-rows: 1fr 1fr 1fr 0.7fr;
}

.vault-wall[data-pattern="quint-b"] {
  --wall-pattern:
    "m1   m1   hero hero hero"
    "m1   m1   hero hero hero"
    "m2   m3   hero hero hero"
    "m2   m3   w1   w2   w3";
  --wall-cols: 1fr 1fr 1.1fr 1.1fr 1.1fr;
  --wall-rows: 1fr 1fr 1fr 0.7fr;
}

.vault-wall[data-pattern="octet"] {
  --wall-pattern:
    "hero hero hero m1   m1"
    "hero hero hero m1   m1"
    "hero hero hero m2   m2"
    "w1   w2   w3   m2   m2"
    "w1   w2   w3   w4   w5";
  --wall-cols: 1.1fr 1.1fr 1.1fr 1fr 1fr;
  --wall-rows: 1fr 1fr 1fr 0.7fr 0.6fr;
}

/* Gallery — for many capsules with the hero anchored on the right */
.vault-wall[data-pattern="gallery"] {
  --wall-pattern:
    "m1   m2   hero hero hero"
    "m3   w1   hero hero hero"
    "m3   w1   hero hero hero"
    "w2   w3   m1   m2   w4"
    "w2   w3   w5   w5   w4";
  --wall-cols: 1fr 1fr 1.1fr 1.1fr 1fr;
  --wall-rows: 1fr 1fr 1fr 0.7fr 0.6fr;
}

/* Museum — wide, evenly-distributed exhibits, no single dominant focal */
.vault-wall[data-pattern="museum"] {
  --wall-pattern:
    "hero hero m1   m1   m2"
    "hero hero m1   m1   m2"
    "w1   w2   m3   m3   m2"
    "w1   w2   m3   m3   w3"
    "w4   w5   m3   m3   w3";
  --wall-cols: 1fr 1fr 1.2fr 1.2fr 1fr;
  --wall-rows: 1fr 1fr 1fr 0.7fr 0.6fr;
}

/* ════════════════════════════════════════════════════════════════════
   TILE ENTRANCE CHOREOGRAPHY — staggered "place each artifact" motion
   triggered by IntersectionObserver as the user lands on the wall.
   Honors prefers-reduced-motion (no transform, instant opacity).
   ════════════════════════════════════════════════════════════════════ */
/* SAFETY: a .vault-tile MUST never become invisible.
   We hard-floor visibility properties so no future stylesheet, JS class,
   or inline style can leave a tile at opacity 0 / visibility hidden /
   display:none / off-screen translation. The entrance animation can
   still ramp opacity from 0.7 → 1.0 via the .is-entering class. */
.vault-tile {
  visibility: visible !important;
  /* min-height/width prevent grid collapse when a row is unexpectedly 0 */
  min-height: 60px;
  min-width: 60px;
}

.vault-tile.is-entering {
  /* Real-Object: tiles fade in like portraits being unveiled. NO scale,
     NO Y offset — the tile doesn't "land" or "drop". It simply becomes
     visible on the wall. opacity floor is 0.7 (visible) — never 0. */
  opacity: 0.7;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}

.vault-tile.is-entered {
  /* Real-Object: opacity-only fade with --ease-real-out at --dur-cross
     (480ms). Tiles fade in like portraits being unveiled — no scale,
     no Y offset. The same 480ms is used for both initial wall load
     (staggered by 40ms per tile) and live snapshot inserts. */
  opacity: 1;
  transition:
    opacity var(--dur-cross) var(--ease-real-out),
    box-shadow 500ms var(--ease-real-out);
}

@media (prefers-reduced-motion: reduce) {
  .vault-tile.is-entering,
  .vault-tile.is-entered {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   AMBIENT MARBLE BREATH — slow warm light traversing the marble veins.
   One pseudo-element on body, very low opacity, no JS, GPU-friendly.
   ════════════════════════════════════════════════════════════════════ */
body.vault-v2::after {
  content: "";
  position: fixed;
  inset: -10vh -10vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at var(--breath-x, 30%) var(--breath-y, 35%),
      rgba(255, 220, 160, 0.10),
      rgba(255, 220, 160, 0.04) 40%,
      transparent 70%);
  mix-blend-mode: screen;
  animation: marbleBreath 14s ease-in-out infinite;
  will-change: background;
}

@keyframes marbleBreath {
  0%   { --breath-x: 28%; --breath-y: 32%; opacity: 0.65; }
  25%  { --breath-x: 62%; --breath-y: 26%; opacity: 0.85; }
  50%  { --breath-x: 74%; --breath-y: 58%; opacity: 0.7; }
  75%  { --breath-x: 38%; --breath-y: 64%; opacity: 0.9; }
  100% { --breath-x: 28%; --breath-y: 32%; opacity: 0.65; }
}

/* CSS variable interpolation for older engines: animate background-position
   as a fallback. The keyframes above already produce the breath via the
   custom-property animation in modern Chromium / Safari / Firefox. */

@media (prefers-reduced-motion: reduce) {
  body.vault-v2::after {
    animation: none;
    opacity: 0.7;
  }
}

/* ════════════════════════════════════════════════════════════════════
   AMBIENT GOLD DUST — canvas layer drifts behind the chrome,
   above the marble. Pointer-transparent. JS in vault-dust.js.
   ════════════════════════════════════════════════════════════════════ */
.vault-dust {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .vault-dust { display: none; }
}

/* Make sure the in-flow chrome sits above marble + dust.
   IMPORTANT: do NOT include `.vault-modal`, `.vault-modal-backdrop`, or
   `.listening-room` in this `position: relative` block — they are designed
   as `position: fixed` overlays elsewhere in this file, and applying
   `position: relative` here would crush them into the page flow (which
   surfaced visibly: every modal stacked inline below the wall, with
   broken backdrop dim and a useless "open" transform). They keep their
   own positioning + z-index lower in the file. */
.vault-top-nav,
.vault-shell,
.vault-hero,
.privacy-shield,
.vault-toast-container {
  position: relative;
  z-index: 2;
}

.vault-top-nav { z-index: 100; }
.vault-modal-backdrop { z-index: 200; }
.vault-modal { z-index: 201; }
.vault-toast-container { z-index: 300; }
.privacy-shield { z-index: 400; }

/* ════════════════════════════════════════════════════════════════════
   SHARED-ELEMENT TRANSITION — listening room scales up FROM the
   originating tile rect, rather than fading down-the-middle. The FLIP
   origin is the brass picture frame opening from the contact point
   (genuinely realistic — the frame on the wall IS the listening room,
   it just unfolds from where you touched). Symmetric in/out at
   --dur-cross with --ease-real-inout (drawer-slide both ways).
   ════════════════════════════════════════════════════════════════════ */
.listening-room.is-flying {
  transform-origin: var(--flip-origin-x, 50%) var(--flip-origin-y, 50%);
  animation: lrFlyIn var(--dur-cross) var(--ease-real-inout) both;
}

.listening-room.is-folding {
  transform-origin: var(--flip-origin-x, 50%) var(--flip-origin-y, 50%);
  animation: lrFoldOut var(--dur-cross) var(--ease-real-inout) both;
}

@keyframes lrFlyIn {
  0%   {
    opacity: 0;
    transform: translate3d(var(--flip-x, 0), var(--flip-y, 0), 0)
               scale(var(--flip-sx, 0.2), var(--flip-sy, 0.2));
    border-radius: 18px;
  }
  60%  {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1, 1);
    border-radius: 0;
  }
}

@keyframes lrFoldOut {
  0%   {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1, 1);
    border-radius: 0;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--flip-x, 0), var(--flip-y, 0), 0)
               scale(var(--flip-sx, 0.2), var(--flip-sy, 0.2));
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .listening-room.is-flying,
  .listening-room.is-folding {
    animation: none !important;
    transform: none !important;
  }
}

/* v29.13 — slot classes are intentionally inert. The wall now uses
   auto-fill minmax columns, so we no longer need (or want) per-tile
   grid-area assignments. The classes remain on tiles only for
   backward-compat with any seal/badge selectors. */
.tile-hero, .tile-m1, .tile-m2, .tile-m3,
.tile-w1, .tile-w2, .tile-w3, .tile-w4, .tile-w5 {
  /* no grid-area — let the wall's auto-fill grid place tiles in flow */
}

/* ── Tile base — brass-framed museum exhibit on the marble wall ──────
   Each tile reads as a polished brass-edged display case. The dark stage
   inside holds the artifact (the audio "moment"); the cream plaque at the
   bottom is the engraved label with sender and date. */
.vault-tile {
  position: relative;
  border: 2px solid transparent;
  border-radius: clamp(14px, 1.4vw, 22px);
  overflow: hidden;
  /* Wave B: warm "exhibit chamber" stage instead of the dingy charcoal
     gradient. Reads as a softly-lit shadowbox rather than a corrupt
     thumbnail. Cream plaque base of every tile stays at the bottom. */
  background:
    radial-gradient(ellipse 110% 70% at 50% 22%, rgba(112, 78, 38, 0.78) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(64, 45, 22, 0.95) 0%,
      rgba(48, 32, 14, 0.95) 72%,
      rgba(247, 240, 224, 0.96) 72%,
      rgba(241, 230, 208, 0.96) 100%);
  background-clip: padding-box;
  cursor: pointer;
  /* No transform — the tile sits still on the wall. Hover/active
     respond via box-shadow + border-color only. */
  transition:
    box-shadow var(--dur-touch) var(--ease-real-out),
    border-color var(--dur-touch) var(--ease-real-out),
    filter var(--dur-touch) var(--ease-real-out);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.55),
    inset 0 1px 0 rgba(255, 235, 180, 0.35),
    inset 0 -1px 0 rgba(120, 80, 30, 0.4),
    0 10px 28px rgba(60, 40, 15, 0.32),
    0 2px 8px rgba(40, 25, 5, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}

/* Hover: the tile DOES NOT MOVE. Its brass frame catches more light —
   like a polished display case under a museum spotlight. No lift, no
   scale, no breath loop. Real objects don't shimmer when you look at
   them. The 240ms shadow + border deepen reads as the eye's own focus
   adjusting, not as the tile demanding attention. */
.vault-tile:hover,
.vault-tile:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 170, 0.95),
    inset 0 0 0 2px rgba(212, 175, 55, 0.7),
    inset 0 1px 0 rgba(255, 235, 180, 0.6),
    inset 0 -1px 0 rgba(120, 80, 30, 0.55),
    0 14px 32px rgba(40, 25, 5, 0.42),
    0 4px 10px rgba(40, 25, 5, 0.30);
  outline: none;
  z-index: 3;
  transition:
    box-shadow var(--dur-touch) var(--ease-real-out),
    border-color var(--dur-touch) var(--ease-real-out);
}

/* Press feedback: shadow tightens slightly to read as the tile
   accepting weight. No transform — the tile stays put. */
.vault-tile:active {
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 170, 0.95),
    inset 0 0 0 2px rgba(212, 175, 55, 0.7),
    inset 0 1px 0 rgba(255, 235, 180, 0.55),
    inset 0 -1px 0 rgba(120, 80, 30, 0.55),
    0 8px 18px rgba(40, 25, 5, 0.45),
    0 2px 6px rgba(40, 25, 5, 0.30);
  transition: box-shadow 120ms var(--ease-real-out);
}

/* ════════════════════════════════════════════════════════════════════
   IN-FLIGHT / UNREAD TILE — museum "new acquisition" pin
   Real-Object: tiles representing voices waiting (unread received) or
   your recent sent capsules (in flight) get a STATIC 6px brass dot in
   the upper-right corner. No infinite scale loop, no brightness pulse,
   no breath. Real exhibits don't pulsate to demand your attention; the
   gallery puts a small brass pin on a card to mark "new acquisition."
   ════════════════════════════════════════════════════════════════════ */
.vault-tile.has-unplayed::after,
.vault-tile.is-inflight::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 235, 180, 1) 0%,
    rgba(212, 175, 55, 0.95) 60%,
    rgba(120, 80, 30, 0.85) 100%);
  box-shadow:
    0 0 0 1px rgba(120, 80, 30, 0.45),
    0 1px 2px rgba(40, 25, 5, 0.45);
  z-index: 5;
  pointer-events: none;
}

.vault-tile:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.65);
  outline-offset: 3px;
}

.vault-tile.is-dim {
  filter: brightness(0.7) saturate(0.85);
}

/* Tile background image (always blurred until listened) */
.vault-tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Wave B: lighter blur so the photo reads as a warm hint (oil-painting
     half-revealed) instead of a smudge in the dark. Brightness raised,
     saturation kept low so it doesn't compete with the eventual reveal. */
  filter: blur(22px) saturate(0.85) brightness(0.95);
  transform: scale(1.15);
  transition: filter 0.6s ease, opacity 0.6s ease;
  opacity: 0.7;
  z-index: 0;
}

.vault-tile.has-revealed .vault-tile__bg {
  filter: blur(0) saturate(1) brightness(1);
  transform: scale(1.04);
  opacity: 1;
}

/* Sealed (Wave B redesign): cream-and-brass marbled paper instead of the
   dingy dark stage. The previous design read as a corrupt thumbnail
   because the dark velvet had no content and ate 72% of the tile. Now
   the tile body is warm cream paper with subtle veining, a confident
   wax-seal medallion centered, and a SEALED micro-text caption. The
   cream plaque base of every tile sits below, separated by a brass
   hairline. The reveal (after play) is what unveils the actual image. */
.vault-tile.is-sealed {
  background:
    /* tonal warm-paper veining */
    radial-gradient(ellipse 120% 70% at 30% 20%, rgba(255, 248, 230, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 80% 75%, rgba(218, 192, 148, 0.45) 0%, transparent 55%),
    /* base paper */
    linear-gradient(165deg, #f6ecd2 0%, #efe0c0 55%, #e7d3a6 100%);
  background-clip: padding-box;
}

.vault-tile.is-sealed .vault-tile__bg { display: none; }

/* ════════════════════════════════════════════════════════════════════
   v29.19 — UNREAD TILE PRESENCE (halo + breath + brightness, no size)
   The sealed-and-unread tile is the WHOLE POINT of the visit.  Make
   the eye land on it within a second on any wall, without ever
   changing the grid sizing (we just escaped a Mondrian disaster).
   • Brass halo rings the tile with a soft outer glow.
   • The cream paper beneath reads brighter than every other tile.
   • A slow 3.4s gold breath gently animates the halo intensity.
   • Honors prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */
.vault-tile.is-sealed {
  /* brighter, more saturated cream paper than the standard sealed look */
  background:
    radial-gradient(ellipse 130% 80% at 30% 18%, rgba(255, 250, 232, 0.85) 0%, transparent 55%),
    radial-gradient(ellipse 95% 65% at 78% 78%, rgba(232, 206, 158, 0.55) 0%, transparent 55%),
    linear-gradient(165deg, #fdf3d8 0%, #f6e6c2 55%, #ecd6a8 100%);
  /* Brass halo + outer glow. Two-layer ring so it reads as a hand-
     pressed brass frame, not a CSS box-shadow. STATIC — no breath
     loop. The halo + the new-acquisition pin already mark this tile
     as the one to look at; pulsing would be redundant noise. */
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.85),
    0 0 0 2px rgba(120, 80, 30, 0.32),
    0 18px 36px rgba(60, 40, 15, 0.34),
    0 0 0 6px rgba(212, 175, 55, 0.18),
    0 0 32px rgba(212, 175, 55, 0.45);
  z-index: 2; /* lift above neighbours so the halo isn't clipped */
}

.vault-tile.is-sealed:hover {
  /* Sealed tiles share the standard hover treatment: no movement,
     just a slightly brighter brass halo. */
  box-shadow:
    0 0 0 1px rgba(255, 215, 130, 1),
    0 0 0 2px rgba(120, 80, 30, 0.4),
    0 18px 36px rgba(60, 40, 15, 0.42),
    0 0 0 6px rgba(212, 175, 55, 0.28),
    0 0 36px rgba(212, 175, 55, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .vault-tile.is-sealed { animation: none; }
}

/* Subtle wax-press grain overlay so the paper doesn't read as flat plastic */
.vault-tile.is-sealed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 8px, rgba(120, 80, 30, 0.045) 8px 9px),
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(120, 80, 30, 0.18) 100%);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

.vault-tile__seal {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: clamp(60px, 7.4vw, 92px);
  height: clamp(60px, 7.4vw, 92px);
  border-radius: 50%;
  z-index: 2;
  /* Layered wax disc: brass outer ring → wax red interior → glossy highlight */
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 220, 180, 0.55) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, #8b2a1e 0%, #6c1e14 55%, #4a140c 100%);
  border: 1px solid rgba(120, 60, 25, 0.65);
  box-shadow:
    /* brass rim */
    0 0 0 2px rgba(180, 130, 40, 0.55),
    0 0 0 3px rgba(60, 35, 12, 0.4),
    /* depth */
    inset 0 -3px 8px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 220, 180, 0.35),
    /* drop shadow on paper */
    0 8px 22px rgba(60, 30, 12, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.18);
  animation: sealBreathe 4s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 230, 200, 0.94);
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
}

/* Replace the lock SVG with a serif monogram "E" — feels like a real
   sealing-wax press, not a security icon. The svg child is hidden in
   favor of the ::before-injected glyph. */
.vault-tile__seal svg { display: none; }

.vault-tile__seal::before {
  content: "E";
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1;
  color: rgba(255, 235, 200, 0.96);
  text-shadow:
    0 1px 0 rgba(80, 30, 12, 0.7),
    0 0 8px rgba(255, 220, 180, 0.35);
}

/* "SEALED" micro-text caption under the wax disc */
.vault-tile__seal::after {
  content: "SEALED";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: rgba(110, 70, 25, 0.7);
  white-space: nowrap;
}

@keyframes sealBreathe {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(180, 130, 40, 0.55),
      0 0 0 3px rgba(60, 35, 12, 0.4),
      inset 0 -3px 8px rgba(0, 0, 0, 0.4),
      inset 0 2px 4px rgba(255, 220, 180, 0.35),
      0 8px 22px rgba(60, 30, 12, 0.3),
      0 2px 6px rgba(0, 0, 0, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(180, 130, 40, 0.7),
      0 0 0 3px rgba(60, 35, 12, 0.5),
      inset 0 -3px 8px rgba(0, 0, 0, 0.4),
      inset 0 2px 4px rgba(255, 220, 180, 0.45),
      0 12px 32px rgba(60, 30, 12, 0.42),
      0 0 28px rgba(212, 175, 55, 0.3);
  }
}

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

/* Voice-only capsule glyph (Wave B): centered audio waveform in the
   warm chamber when there's no photo. Brass-toned, low-contrast so it
   reads as a hint, not a foreground element. */
.vault-tile__voice-glyph {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: clamp(80px, 11vw, 140px);
  height: auto;
  z-index: 1;
  color: rgba(212, 175, 55, 0.45);
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
  animation: voiceGlyphBreath 3.6s ease-in-out infinite;
}

.vault-tile__voice-glyph svg {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes voiceGlyphBreath {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .vault-tile__voice-glyph { animation: none; }
}

/* Smaller voice glyph on the smaller tile slots */
.tile-w1 .vault-tile__voice-glyph,
.tile-w2 .vault-tile__voice-glyph,
.tile-w3 .vault-tile__voice-glyph,
.tile-w4 .vault-tile__voice-glyph,
.tile-w5 .vault-tile__voice-glyph {
  width: clamp(56px, 7vw, 96px);
}

/* Subtle vignette where the dark stage meets the cream plaque (engraved feel) */
.vault-tile::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 28%;
  height: 16px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.32));
  z-index: 1;
  pointer-events: none;
}

.vault-tile.is-sealed::before { display: none; }

/* Brass divider between the dark stage and the cream plaque — like the
   beveled brass strip under a museum nameplate. */
.vault-tile__meta::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212, 175, 55, 0.7) 18%,
    rgba(255, 230, 170, 0.85) 50%,
    rgba(212, 175, 55, 0.7) 82%,
    transparent);
  z-index: 3;
  pointer-events: none;
}


/* Tile metadata — engraved cream plaque at the bottom of every tile */
.vault-tile__meta {
  position: relative;
  z-index: 2;
  padding: clamp(10px, 1.4vw, 14px) clamp(12px, 1.6vw, 18px);
  color: #2a2018;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg,
    rgba(247, 240, 224, 0.94) 0%,
    rgba(238, 225, 200, 0.94) 100%);
}

.vault-tile__sender {
  font-family: var(--font-serif);
  font-size: clamp(0.88rem, 1.1vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2a2018;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.vault-tile__time {
  font-size: 0.66rem;
  color: rgba(90, 74, 58, 0.85);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 500;
}

.vault-tile__pulse {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(180, 130, 30, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(180, 130, 30, 0.08));
  color: #6e4216;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(120, 80, 30, 0.25);
}

.vault-tile.has-unplayed .vault-tile__pulse {
  /* Static brass — no expanding ring. The brass dot pin in the
     upper-right corner is the only "new acquisition" indicator. */
  background: linear-gradient(135deg, #fbbf24, #d4af37);
  color: #2a1f17;
  border-color: rgba(180, 130, 30, 0.85);
}

/* Whisper tiles (small, secondary capsules) */
.tile-w1, .tile-w2, .tile-w3, .tile-w4, .tile-w5 {
  font-size: 0.72rem;
}

.tile-w1 .vault-tile__meta,
.tile-w2 .vault-tile__meta,
.tile-w3 .vault-tile__meta,
.tile-w4 .vault-tile__meta,
.tile-w5 .vault-tile__meta {
  padding: 8px 10px;
}

.tile-w1 .vault-tile__sender,
.tile-w2 .vault-tile__sender,
.tile-w3 .vault-tile__sender,
.tile-w4 .vault-tile__sender,
.tile-w5 .vault-tile__sender {
  font-size: 0.78rem;
}

.tile-w1 .vault-tile__time,
.tile-w2 .vault-tile__time,
.tile-w3 .vault-tile__time,
.tile-w4 .vault-tile__time,
.tile-w5 .vault-tile__time { display: none; }

.tile-w1 .vault-tile__seal,
.tile-w2 .vault-tile__seal,
.tile-w3 .vault-tile__seal,
.tile-w4 .vault-tile__seal,
.tile-w5 .vault-tile__seal {
  width: 32px;
  height: 32px;
}

/* "+N more" overflow tile — empty brass frame inviting more exhibits */
.vault-tile--more {
  background: linear-gradient(155deg, rgba(48, 36, 22, 0.55), rgba(30, 22, 12, 0.4));
  border-color: rgba(180, 130, 30, 0.5);
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.45),
    inset 0 1px 0 rgba(255, 235, 180, 0.25),
    0 8px 22px rgba(60, 40, 15, 0.22);
}

.vault-tile--more .vault-tile__count {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--glow-warm);
  text-align: center;
  padding: 10px;
}

/* Empty state inside the wall */
.vault-wall--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(212, 165, 116, 0.18);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
  color: var(--text-secondary);
  background: rgba(15, 12, 8, 0.35);
}

.vault-wall--empty h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.vault-wall--empty p {
  font-size: 0.84rem;
  color: var(--text-muted);
  max-width: 360px;
  margin: 0 auto 18px;
  line-height: 1.5;
}

.vault-wall--empty button {
  margin-top: 4px;
}

/* Skeleton tiles on initial load */
.vault-wall-skeleton {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: "h h m1" "h h m1" "h h m2";
  grid-template-columns: 1.5fr 1.5fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: clamp(8px, 1.4vw, 16px);
}

.wall-skel { border-radius: clamp(14px, 1.4vw, 22px); }
.wall-skel--hero { grid-area: h; }
.wall-skel--m1   { grid-area: m1; }
.wall-skel--m2   { grid-area: m2; }

/* ════════════════════════════════════════════════════════════════════
   Composer modal — inline daily prompt (replaces the floating Today)
   A soft cream plaque inside the recorder with the day's question,
   so the daily ritual lives where it belongs (the recording flow).
   ════════════════════════════════════════════════════════════════════ */
.composer-daily-prompt {
  margin: 14px 0 4px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(252, 246, 230, 0.96), rgba(244, 234, 210, 0.92));
  border: 1px solid rgba(160, 120, 60, 0.22);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 18px rgba(40, 25, 8, 0.08);
}

.composer-daily-prompt[hidden] { display: none; }

.composer-daily-prompt__label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(120, 80, 30, 0.85);
  margin-bottom: 4px;
  font-weight: 600;
}

.composer-daily-prompt__text {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  line-height: 1.4;
  color: var(--vault-obsidian, #1a1410);
}

/* Daily Question modal styling tweaks */
.daily-modal__label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--glow-warm);
  margin-bottom: 10px;
}

.daily-modal__question {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0 0 6px;
}

/* ════════════════════════════════════════════════════════════════════
   THE LISTENING ROOM
   Full-viewport, blurred image, audio-driven reveal
   ════════════════════════════════════════════════════════════════════ */
.listening-room {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.listening-room.is-open {
  pointer-events: auto;
  opacity: 1;
}

.listening-room__veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 13, 0.86);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.listening-room__stage {
  position: relative;
  width: min(94vw, 1200px);
  height: min(86dvh, 820px);
  border-radius: clamp(20px, 2vw, 32px);
  overflow: hidden;
  background: #0a1214;
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(212, 175, 55, 0.18),
    0 0 80px rgba(212, 175, 55, 0.18);
  transform: scale(0.92);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.listening-room.is-open .listening-room__stage {
  transform: scale(1);
}

.listening-room__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.listening-room__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* --reveal goes 0 → 1 driven by audio.currentTime
     Real-Object: cap blur at 12px max (was ramping to 40px). Even an
     out-of-focus image on a phone display doesn't go past ~12px before
     it just reads as "something is broken." 12px → 0 over the audio
     duration paints a slow, deliberate focus pull. */
  --reveal: 0;
  filter:
    blur(calc((1 - var(--reveal)) * 12px))
    saturate(calc(0.6 + var(--reveal) * 0.4))
    brightness(calc(0.78 + var(--reveal) * 0.22));
  transform: scale(calc(1.08 - var(--reveal) * 0.06));
  transition: filter 80ms linear, transform 200ms var(--ease-real-out);
  background: linear-gradient(135deg, #1c1812, #0f0c08);
}

.listening-room__media:not(.has-image) .listening-room__image {
  display: none;
}

.listening-room__media:not(.has-image) {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(212, 165, 116, 0.12) 0%, transparent 60%),
    linear-gradient(155deg, #1c1812, #0a0907);
}

/* Audio-only orb (when there is no photo) */
.listening-room__audio-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(calc(1 + var(--reveal, 0) * 0.18));
  width: clamp(140px, 18vw, 220px);
  height: clamp(140px, 18vw, 220px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 220, 170, 0.5) 0%, transparent 45%),
    linear-gradient(135deg, var(--glow-warm), #8a5b2a);
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(15, 12, 8, 0.85);
  box-shadow:
    inset 0 -3px 8px rgba(0, 0, 0, 0.35),
    0 0 60px rgba(212, 175, 55, calc(0.25 + var(--audio-glow, 0) * 0.5));
  transition: box-shadow 0.1s ease-out, transform 0.3s ease-out;
}

.listening-room__media:not(.has-image) .listening-room__audio-orb {
  display: flex;
}

/* Overlay UI (sender, progress, hint) */
.listening-room__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 3vw, 40px);
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

.listening-room__sender {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--text-primary);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.listening-room__progress {
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 14px;
}

.listening-room__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--glow-warm), var(--glow-gold));
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
  transition: width 0.1s linear;
}

.listening-room__hint {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  text-align: center;
}

.listening-room.is-listening .listening-room__hint {
  opacity: 0.55;
}

.listening-room__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 12, 8, 0.7);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.listening-room__close:hover {
  background: rgba(15, 12, 8, 0.92);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Audio-driven settle: subtle warm rim when reveal is complete */
.listening-room.is-settled .listening-room__stage {
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(251, 191, 36, 0.4),
    0 0 120px rgba(251, 191, 36, 0.35);
}

/* ── Play / Pause toggle ─────────────────────────────────────────── */
/* Idle / paused state: large breathing button, dead-center on the stage. */
.listening-room__playstate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(72px, 8vw, 96px);
  height: clamp(72px, 8vw, 96px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 12, 8, 0.55);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 40px rgba(0, 0, 0, 0.55),
    0 0 0 0 rgba(212, 175, 55, 0.0);
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform var(--dur-cross) var(--ease-real-inout),
    width var(--dur-cross) var(--ease-real-inout),
    height var(--dur-cross) var(--ease-real-inout),
    left var(--dur-cross) var(--ease-real-inout),
    top var(--dur-cross) var(--ease-real-inout),
    background var(--dur-touch) var(--ease-real-out),
    box-shadow var(--dur-touch) var(--ease-real-out);
  /* Real-Object: static brass disc — no infinite ring breath. */
}

.listening-room__playstate svg {
  width: 38%;
  height: 38%;
  margin-left: 4%; /* optical-center the play triangle */
}

.listening-room__playstate:hover {
  background: rgba(15, 12, 8, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 50px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(212, 175, 55, 0.35);
}

/* Listening state: shrink to a small bottom-right pip so the photo owns the stage. */
.listening-room.is-listening .listening-room__playstate {
  left: auto;
  right: 18px;
  top: auto;
  bottom: 18px;
  transform: translate(0, 0) scale(1);
  width: 44px;
  height: 44px;
  background: rgba(15, 12, 8, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.55);
}

.listening-room.is-listening .listening-room__playstate svg {
  width: 42%;
  height: 42%;
  margin-left: 0;
}

/* Paused mid-listen: bring the toggle back to the center to make
   resuming obvious. The size + position change is the affordance —
   no ring breath needed. */

/* Subtle vignette on pause to reinforce "frozen" state */
.listening-room.is-paused .listening-room__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
  z-index: 1;
}

/* Hide the toggle entirely when there is no audio (photo-only capsule) */
.listening-room.no-audio .listening-room__playstate {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════
   FILTER CHIPS — sits above the wall, cream/brass to match zone strip
   so the eye reads them as the same "directory" surface, just deeper.
   ════════════════════════════════════════════════════════════════════ */
.vault-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 0 var(--space-lg);
  /* Secondary surface: deliberately lighter + flatter than the section
     tabs above, so the two rows read as different jobs (switch view vs.
     narrow it down) rather than twin bars. */
  background: rgba(250, 244, 230, 0.42);
  border: 1px solid rgba(180, 130, 30, 0.18);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  /* SPEC Phase 1: a matching faint glow on the marble background
     behind the pill row whenever a chip is active. The pseudo-element
     sits BEHIND the row (z-index: -1) so it only paints onto the
     marble — never on top of the chips. */
  position: relative;
  isolation: isolate;
}

.vault-filter-chips::before {
  content: "";
  position: absolute;
  inset: -18px -28px;
  border-radius: calc(var(--radius-lg) + 18px);
  background: radial-gradient(ellipse 80% 100% at 50% 50%,
    rgba(255, 215, 130, 0.22) 0%,
    rgba(255, 215, 130, 0.10) 35%,
    transparent 70%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.vault-filter-chips.has-active::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .vault-filter-chips::before { transition: none; }
}

.vault-filter-chip {
  display: inline-flex;
  align-items: center;
  /* Wave D: tighter gap so the label and count read as one element */
  gap: 8px;
  padding: 7px 12px 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(180, 130, 30, 0.35);
  background: rgba(255, 250, 238, 0.7);
  color: #5a4a3a;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-smooth);
  white-space: nowrap;
}

.vault-filter-chip:hover {
  color: #2a2018;
  background: rgba(255, 250, 238, 0.95);
  border-color: rgba(180, 130, 30, 0.55);
}

/* Active chip is a QUIET pale-brass highlight (not the solid gold fill of
   the active section tab) so the primary nav stays the boldest element and
   the chips read as a secondary refinement. */
.vault-filter-chip.active {
  background: rgba(216, 180, 72, 0.24);
  border-color: rgba(150, 105, 30, 0.6);
  color: #3a2a12;
  box-shadow:
    inset 0 0 0 1px rgba(180, 130, 30, 0.4),
    0 1px 6px rgba(180, 130, 30, 0.2);
  position: relative;
}

/* Empty buckets recede so the eye lands on filters that actually have
   capsules. Still clickable — just visually de-emphasised. */
.vault-filter-chip.is-empty {
  opacity: 0.42;
}
.vault-filter-chip.is-empty:hover {
  opacity: 0.7;
}

.vault-filter-chip.active::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 215, 130, 0.22), transparent 70%);
  z-index: -1;
  pointer-events: none;
  animation: filterChipHalo 3.2s ease-in-out infinite;
}

@keyframes filterChipHalo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .vault-filter-chip.active::after { animation: none; }
}

/* Wave D: explicit label class so the noun gets the visual weight,
   while the count slips into a softer monospace pill behind it. */
.vault-filter-chip__label {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
}

.vault-filter-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(60, 40, 15, 0.08);
  color: rgba(90, 74, 58, 0.78);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.vault-filter-chip.active .vault-filter-chip__count {
  background: rgba(40, 25, 5, 0.22);
  color: rgba(40, 25, 5, 0.85);
}

/* ════════════════════════════════════════════════════════════════════
   SEND CAPSULE — the primary action, living ON the active Vault menu bar
   (the All / Unread / Sent / ... filter row). Right-anchored so it sits
   apart from the quiet filter chips and purposefully fills the right end
   of the row. Raised gold (gold = action) so it's the distinctive, most
   important control in the row — never a faint chip.
   ════════════════════════════════════════════════════════════════════ */
.vault-filter-chips .vault-send-capsule-btn {
  margin-left: auto;            /* push to the right end of the row */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(120, 80, 30, 0.65);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 244, 206, 0.7) 0%, transparent 55%),
    linear-gradient(140deg, #e9c869 0%, #c2962f 100%);
  color: #2a1c08;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 214, 0.85),
    inset 0 -2px 6px rgba(90, 60, 20, 0.4),
    0 5px 16px rgba(70, 45, 18, 0.42);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.vault-filter-chips .vault-send-capsule-btn:hover,
.vault-filter-chips .vault-send-capsule-btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 214, 0.95),
    0 9px 24px rgba(70, 45, 18, 0.52),
    0 0 0 4px rgba(212, 175, 55, 0.22);
  outline: none;
}

.vault-filter-chips .vault-send-capsule-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Hairline divider in the gap to its left, so the right-anchored action
   reads as a deliberate "filter | act" boundary rather than a button
   floating in empty space. */
.vault-filter-chips .vault-send-capsule-btn::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(150, 110, 40, 0.5), transparent);
}

/* On narrow screens the row wraps; let the button take the full width of
   its own line so it stays prominent and tappable rather than cramped. */
@media (max-width: 560px) {
  .vault-filter-chips .vault-send-capsule-btn {
    margin-left: 0;
    flex: 1 1 100%;
    height: 40px;
  }
  .vault-filter-chips .vault-send-capsule-btn::before { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   TILE DIRECTION BADGE — small brass arrow (top-left) so a wall of
   100+ exhibits is scannable: who reached out vs who you reached for.
   ════════════════════════════════════════════════════════════════════ */
.vault-tile__direction {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(247, 240, 224, 0.92), rgba(232, 218, 188, 0.82));
  border: 1px solid rgba(180, 130, 30, 0.6);
  color: #6e4216;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(40, 25, 5, 0.28);
  pointer-events: none;
}

.vault-tile__direction svg {
  width: 14px;
  height: 14px;
  display: block;
}

.vault-tile__direction.is-received {
  /* Inbound feels welcoming — slight gold lift */
  color: #6e4216;
}

.vault-tile__direction.is-sent {
  /* Outbound is your voice traveling out — deeper bronze */
  color: #4a2f0e;
}

/* ════════════════════════════════════════════════════════════════════
   TILE DELETE — always-visible trash icon, top-right. The legacy-seal
   disc lives at right: 44px (see css/legacy.css) so the two never
   collide. Deliberately understated until hover so it doesn't compete
   with the artifact, but never invisible the way the old hover-only
   3-dot menu was on touch devices.
   ════════════════════════════════════════════════════════════════════ */
.vault-tile__delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(244, 234, 214, 0.32);
  background: rgba(20, 14, 6, 0.5);
  color: rgba(244, 234, 214, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.78;
  transition: opacity 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vault-tile__delete svg { width: 14px; height: 14px; }

.vault-tile:hover .vault-tile__delete,
.vault-tile:focus-within .vault-tile__delete {
  opacity: 1;
}

.vault-tile__delete:hover,
.vault-tile__delete:focus-visible {
  opacity: 1;
  outline: none;
  background: rgba(58, 14, 10, 0.78);
  border-color: rgba(214, 90, 78, 0.7);
  color: #ffd6cf;
  transform: scale(1.06);
}

/* ════════════════════════════════════════════════════════════════════
   TILE STATUS PILL — small brass chip in the meta strip. We render this
   ONLY when there is a verifiable, positive signal so we never show a
   claim we can't substantiate.
     Received + unplayed                       -> "New"   (gold, pulse)
     Received + played                         -> "Heard" (soft brass)
     Sent + recipient acknowledged opening it  -> "Heard" (soft brass)
     Sent + no ack yet                         -> no pill (direction
       arrow already conveys "sent"; we refuse to show "Pending" because
       we can't actually verify the recipient's state).
   ════════════════════════════════════════════════════════════════════ */
.vault-tile__status {
  display: inline-flex;
  align-items: center;
  margin-top: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

.vault-tile__status.is-new {
  /* Static brass pill — no expanding ring. The brass dot pin and the
     pill's own warm color are sufficient to flag "new" without a
     pulse loop. */
  color: #2a1a06;
  background: linear-gradient(180deg, #ffe9a8, #f1c560);
  border-color: rgba(180, 130, 30, 0.55);
}

.vault-tile__status.is-heard {
  color: #6e4216;
  background: rgba(244, 234, 214, 0.78);
  border-color: rgba(180, 130, 30, 0.32);
}

/* ════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ritual-card--shift-l,
  .ritual-card--shift-r {
    transform: none;
  }

  .vault-tile,
  .vault-tile:hover,
  .vault-tile:focus-visible {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .listening-room,
  .listening-room__stage {
    transition: none !important;
    transform: none !important;
  }

  .listening-room__image {
    /* keep blur driven by audio, just no scale animation */
    transition: filter 80ms linear !important;
    transform: none !important;
  }

  .vault-tile__delete {
    transition: none !important;
  }
}


/* ============================================================
   v29.26 — Truth Glow
   Per-capsule on-device honesty verification + real cash earnings.
   - .vault-tile__verified  : small rose-gold pill on capsule tiles
     showing "VERIFIED · 87%" for verified capsules.
   - .truth-analysis-overlay: full-screen overlay shown right after
     a verified send while the on-device score animates 0 -> N%.
   - .truth-glow-reveal     : recipient's Play-to-Reveal modal.
   - .truth-glow-dashboard  : personal earnings dashboard zone.
   ============================================================ */

/* ---- Verified badge on capsule tiles ---- */
.vault-tile__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 7px 1px 5px;
  background: linear-gradient(180deg, rgba(255, 245, 215, 0.95), rgba(232, 200, 130, 0.85));
  border: 1px solid rgba(180, 130, 30, 0.5);
  border-radius: 999px;
  color: #5a370e;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.6) inset,
    0 1px 3px rgba(120, 80, 20, 0.18);
}

.vault-tile__verified svg {
  color: #6e4216;
  flex-shrink: 0;
}

.vault-tile.is-verified {
  /* faint rose-gold halo on verified tiles */
  box-shadow:
    0 6px 22px rgba(120, 80, 20, 0.10),
    0 0 0 1px rgba(212, 165, 116, 0.20) inset,
    0 0 24px rgba(232, 180, 130, 0.10);
}

/* ---- Analysis overlay ---- */
.truth-analysis-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 14, 8, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.truth-analysis-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 280ms ease, visibility 0s linear 0s;
}

.truth-analysis-card {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, #fbf2dc 0%, #efe1ba 100%);
  border: 1px solid rgba(180, 130, 30, 0.45);
  border-radius: 22px;
  padding: 26px 28px 22px;
  text-align: center;
  color: #2a2018;
  box-shadow:
    0 1px 0 rgba(255, 250, 230, 0.7) inset,
    0 24px 60px rgba(0, 0, 0, 0.35);
}

.truth-analysis-title {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: #2a2018;
  letter-spacing: 0.01em;
}

.truth-analysis-sub {
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.78rem;
  margin: 0 0 18px;
  color: #6e5a3a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.truth-analysis-ring {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0 auto 18px;
}

.truth-analysis-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.truth-analysis-ring__track {
  fill: none;
  stroke: rgba(120, 80, 20, 0.18);
  stroke-width: 8;
}

.truth-analysis-ring__progress {
  fill: none;
  stroke: #b07a1e;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 100ms linear, stroke 300ms ease;
}

.truth-analysis-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.truth-analysis-percent {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 2.6rem;
  font-weight: 600;
  color: #2a2018;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.truth-analysis-label {
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6e5a3a;
  margin-top: 6px;
}

.truth-analysis-status {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 0.95rem;
  font-style: italic;
  color: #463726;
  min-height: 1.4em;
}

.truth-analysis-result {
  margin-top: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.truth-analysis-result.show {
  opacity: 1;
  transform: translateY(0);
}

.truth-analysis-result__text {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.truth-analysis-result.is-pass .truth-analysis-result__text  { color: #1f7a3d; }
.truth-analysis-result.is-pass .truth-analysis-ring__progress { stroke: #1f7a3d; }
.truth-analysis-result.is-fail .truth-analysis-result__text  { color: #b06a14; }
.truth-analysis-result.is-fail .truth-analysis-ring__progress { stroke: #b06a14; }
.truth-analysis-result.is-empty .truth-analysis-result__text { color: #a23a2c; }
.truth-analysis-result.is-empty .truth-analysis-ring__progress { stroke: #a23a2c; }

.truth-analysis-result__earnings {
  margin-top: 6px;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 1.05rem;
  color: #1f7a3d;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .truth-analysis-overlay,
  .truth-analysis-result,
  .truth-analysis-ring__progress {
    transition: none !important;
  }
}


/* ---- Recipient Play-to-Reveal modal ---- */
.truth-glow-reveal {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}

.truth-glow-reveal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.truth-glow-reveal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.truth-glow-reveal__card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 26px 28px 22px;
  background: linear-gradient(180deg, #fbf2dc 0%, #efe1ba 100%);
  border: 1px solid rgba(180, 130, 30, 0.45);
  border-radius: 22px;
  text-align: center;
  color: #2a2018;
  box-shadow:
    0 1px 0 rgba(255, 250, 230, 0.7) inset,
    0 24px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(8px) scale(0.985);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.truth-glow-reveal.is-open .truth-glow-reveal__card {
  transform: translateY(0) scale(1);
}

.truth-glow-reveal__eyebrow {
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6e4216;
  margin-bottom: 6px;
}

.truth-glow-reveal__sender {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.95rem;
  color: #463726;
  margin-bottom: 14px;
}

.truth-glow-reveal__score {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  color: #2a2018;
  margin: 4px 0 12px;
  font-variant-numeric: tabular-nums;
}

.truth-glow-reveal__card--pass    .truth-glow-reveal__score { color: #1f7a3d; }
.truth-glow-reveal__card--fail    .truth-glow-reveal__score { color: #b06a14; }
.truth-glow-reveal__card--unknown .truth-glow-reveal__score { color: #6e5a3a; }

.truth-glow-reveal__caption {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.95rem;
  color: #463726;
  margin-bottom: 18px;
  line-height: 1.4;
}

.truth-glow-reveal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.truth-glow-reveal__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 200ms ease;
}

.truth-glow-reveal__btn--accept {
  background: linear-gradient(180deg, rgba(255, 245, 215, 0.95), rgba(232, 200, 130, 0.85));
  border: 1px solid rgba(180, 130, 30, 0.55);
  color: #2a2018;
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.6) inset,
    0 2px 8px rgba(120, 80, 20, 0.25);
}

.truth-glow-reveal__btn--accept:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.8) inset,
    0 4px 14px rgba(120, 80, 20, 0.32);
}

.truth-glow-reveal__btn--decline {
  background: rgba(255, 250, 235, 0.7);
  border: 1px dashed rgba(180, 130, 30, 0.5);
  color: #6e4216;
}

.truth-glow-reveal__btn--decline:hover {
  background: rgba(245, 220, 220, 0.85);
  border-color: rgba(160, 60, 90, 0.45);
  color: #6b2a40;
}

.truth-glow-reveal__close {
  margin-top: 4px;
  background: none;
  border: none;
  color: #6e5a3a;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
}

.truth-glow-reveal__close:hover {
  color: #2a2018;
}

@media (prefers-reduced-motion: reduce) {
  .truth-glow-reveal,
  .truth-glow-reveal__card,
  .truth-glow-reveal__btn {
    transition: none !important;
  }
}


/* ---- Truth Glow personal dashboard ---- */
.truth-glow-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 235, 0.55) 0%,
    rgba(245, 235, 215, 0.32) 100%);
  border: 1px solid rgba(180, 130, 30, 0.18);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255, 250, 230, 0.6) inset,
    0 8px 28px rgba(120, 80, 20, 0.06);
  color: #463726;
}

.truth-glow-empty h3 {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 0 0 6px;
  color: #2a2018;
}

.truth-glow-empty p {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0 0 14px;
  color: #463726;
  max-width: 36ch;
}

.truth-glow-balance {
  position: relative;
  padding: 24px 24px 20px;
  margin-bottom: 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 235, 0.95) 0%,
    rgba(245, 230, 200, 0.88) 100%);
  border: 1px solid rgba(180, 130, 30, 0.4);
  border-radius: 22px;
  text-align: center;
  color: #2a2018;
  box-shadow:
    0 1px 0 rgba(255, 250, 230, 0.7) inset,
    0 8px 28px rgba(120, 80, 20, 0.10);
}

.truth-glow-balance__eyebrow {
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6e4216;
  margin-bottom: 4px;
}

.truth-glow-balance__lifetime {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  color: #1f7a3d;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

.truth-glow-balance__caption {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.88rem;
  color: #6e5a3a;
  margin-bottom: 16px;
}

.truth-glow-balance__stats {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.truth-glow-balance__stat {
  text-align: center;
}

.truth-glow-balance__stat-value {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #2a2018;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.truth-glow-balance__stat-label {
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6e5a3a;
  margin-top: 4px;
}

.truth-glow-balance__withdraw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 245, 215, 0.95), rgba(232, 200, 130, 0.85));
  border: 1px solid rgba(180, 130, 30, 0.55);
  color: #2a2018;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 200ms ease;
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.6) inset,
    0 2px 8px rgba(120, 80, 20, 0.18);
}

.truth-glow-balance__withdraw:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.8) inset,
    0 4px 14px rgba(120, 80, 20, 0.28);
}

.truth-glow-balance__withdraw.is-locked,
.truth-glow-balance__withdraw:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ---- Send-another action row, shown above the populated feed ---- */
.truth-glow-actions {
  display: flex;
  gap: 8px;
  padding: 4px 0 12px;
  flex-wrap: wrap;
}

.truth-glow-actions .btn-secondary {
  flex: 1 1 0;
  min-width: 140px;
}

/* ---- Verified capsule cards (dashboard feed) ---- */
.truth-glow-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 24px;
}

.truth-glow-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 250, 235, 0.88), rgba(245, 235, 215, 0.78));
  border: 1px solid rgba(180, 130, 30, 0.25);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 250, 230, 0.7) inset,
    0 4px 18px rgba(120, 80, 20, 0.07);
}

.truth-glow-card__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.truth-glow-card__seal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 1px 8px 1px 6px;
  background: linear-gradient(180deg, rgba(255, 245, 215, 0.95), rgba(232, 200, 130, 0.85));
  border: 1px solid rgba(180, 130, 30, 0.5);
  border-radius: 999px;
  color: #5a370e;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.6) inset,
    0 1px 3px rgba(120, 80, 20, 0.18);
}

.truth-glow-card__witnessed {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(42, 26, 6, 0.92);
  background: linear-gradient(135deg, rgba(255, 220, 140, 0.95), rgba(212, 175, 55, 0.88));
  border: 1px solid rgba(120, 80, 30, 0.45);
}

.truth-glow-card__seal svg {
  color: #6e4216;
}

.truth-glow-card__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  color: #463726;
  font-size: 0.92rem;
  min-width: 0;
}

.truth-glow-card__recipients {
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.truth-glow-card__time {
  font-size: 0.78rem;
  color: #6e5a3a;
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}

.truth-glow-card__play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: linear-gradient(180deg, rgba(255, 245, 215, 0.95), rgba(232, 200, 130, 0.85));
  border: 1px solid rgba(180, 130, 30, 0.5);
  border-radius: 999px;
  color: #5a370e;
  cursor: pointer;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: transform 140ms ease, box-shadow 200ms ease;
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.6) inset,
    0 2px 6px rgba(120, 80, 20, 0.15);
}

.truth-glow-card__play:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.8) inset,
    0 4px 12px rgba(120, 80, 20, 0.25);
}

.truth-glow-card__duration {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .truth-glow-balance__withdraw,
  .truth-glow-card__play {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   WRITTEN TRUTH — composer, reader, and feed-card affordances.
   The text modality of Truth Glow. Same brass/cream palette as the
   voice surfaces; the textarea uses the serif body font so writing
   reads as letter-like rather than form-like.
   ════════════════════════════════════════════════════════════════════ */
.text-composer-shell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 8px;
}

.text-composer-input {
  width: 100%;
  min-height: 180px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(180, 130, 30, 0.35);
  background: linear-gradient(
    180deg,
    rgba(255, 252, 244, 0.96) 0%,
    rgba(250, 244, 226, 0.90) 100%);
  color: #2a2018;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.06rem;
  line-height: 1.55;
  resize: vertical;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 230, 0.7),
    inset 0 0 0 1px rgba(180, 130, 30, 0.08);
  transition: border-color 160ms ease, box-shadow 200ms ease;
}

.text-composer-input:focus {
  outline: none;
  border-color: rgba(180, 130, 30, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 230, 0.8),
    0 0 0 3px rgba(212, 175, 55, 0.18);
}

.text-composer-input::placeholder {
  color: rgba(70, 55, 38, 0.5);
  font-style: italic;
}

.text-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.72rem;
  color: #6e5a3a;
  padding: 0 4px;
}

.text-composer-hint {
  font-style: italic;
  letter-spacing: 0.02em;
}

.text-composer-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* "Truth Glow on" lock-card variant — for text mode the toggle is
   always on (you can't write a text capsule without verification). */
.glow-mode-toggle.is-locked-on {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 248, 220, 0.7), rgba(245, 232, 200, 0.55));
  border: 1px solid rgba(180, 130, 30, 0.35);
  color: #2a2018;
  margin-top: 14px;
}

.glow-mode-toggle.is-locked-on .glow-toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5a370e;
}

/* ---- Text reader ---- */
.text-reader-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(180, 130, 30, 0.18);
}

.text-reader-seal {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(180, 130, 30, 0.12);
  border: 1px solid rgba(180, 130, 30, 0.35);
  color: #5a370e;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-reader-seal.is-verified {
  background: linear-gradient(180deg, rgba(255, 245, 215, 0.95), rgba(232, 200, 130, 0.85));
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.6) inset,
    0 1px 3px rgba(120, 80, 20, 0.18);
}

.text-reader-meta {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.88rem;
  color: #6e5a3a;
}

.text-reader-body {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: #2a2018;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px 4px 16px;
}

/* ---- Feed card: "Read" button mirrors __play button shape ---- */
.truth-glow-card__read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: linear-gradient(180deg, rgba(255, 245, 215, 0.95), rgba(232, 200, 130, 0.85));
  border: 1px solid rgba(180, 130, 30, 0.5);
  border-radius: 999px;
  color: #5a370e;
  cursor: pointer;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: transform 140ms ease, box-shadow 200ms ease;
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.6) inset,
    0 2px 6px rgba(120, 80, 20, 0.15);
}

.truth-glow-card__read:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 240, 200, 0.8) inset,
    0 4px 12px rgba(120, 80, 20, 0.25);
}

/* Modality icon inside the verified seal — voice vs text. */
.truth-glow-card__modality {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  color: #6e4216;
}

/* Empty-state secondary action — "Write your truth" complements
   "Send a Truth Glow capsule". */
.truth-glow-empty .btn-secondary + .btn-secondary {
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .truth-glow-card__read,
  .text-composer-input {
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 1 — MARBLE LIGHT VEIL
   A single fixed overlay that drifts a wide soft-light gradient across
   the existing marble background on a 75s loop at 8-12% opacity. Sits
   above the marble image and below all interactive content. Never
   modifies the underlying marble texture.
   ════════════════════════════════════════════════════════════════════ */
.vault-marble-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 65% 50% at 0% 50%,
      rgba(255, 245, 215, 0.10) 0%,
      rgba(255, 245, 215, 0.04) 35%,
      rgba(255, 245, 215, 0.00) 65%);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: vaultMarbleVeilDrift 75s linear infinite;
  will-change: transform;
}

@keyframes vaultMarbleVeilDrift {
  0%   { transform: translate3d(-30%, 0, 0); }
  100% { transform: translate3d(130%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .vault-marble-veil { animation: none; opacity: 0.55; transform: translate3d(50%, 0, 0); }
}

/* ════════════════════════════════════════════════════════════════════
   MOVEMENT MODE — HIDE EVERYTHING ELSE WHILE OPEN
   Movement Mode is a full-viewport experience. Use display:none on
   every wall + chrome surface so the underlying interface cannot bleed
   through. We MUST use display (not visibility), because .vault-tile
   has a defensive `visibility: visible !important` that would otherwise
   defeat any visibility-based hide. display:none cannot be overridden
   by descendants.
   ════════════════════════════════════════════════════════════════════ */
body.vmm-active .vault-shell,
body.vmm-active .vault-top-nav,
body.vmm-active .vault-hero,
body.vmm-active .vault-anchor-strip,
body.vmm-active .vault-horizon-cta-row,
body.vmm-active .listening-room,
body.vmm-active .truth-analysis-overlay,
body.vmm-active .vault-modal-backdrop,
body.vmm-active .vault-modal,
body.vmm-active .vault-toast-container,
body.vmm-active .vault-marble-veil,
body.vmm-active .privacy-shield,
body.vmm-active .nav-status-seal {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   MOVEMENT MODE — TILE AFTERGLOW
   When the user exits Movement Mode, the tile they were on retains a
   brief warm halo so the wall remembers where they just were.
   ════════════════════════════════════════════════════════════════════ */
.vault-tile.vault-tile--afterglow {
  animation: vaultTileAfterglow 600ms var(--ease-real-out);
}

/* Real-Object: a brief 600ms shadow fade — the eye's afterimage of the
   tile we just returned to. No multi-stop bright-warm decay, no
   double-glow halo. Just a single brass-tinted shadow that recedes. */
@keyframes vaultTileAfterglow {
  0%   {
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.7),
      0 8px 24px rgba(120, 80, 30, 0.35);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-tile.vault-tile--afterglow { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   SEND FLIGHT — composer → brass disc → wall
   When the user presses Send, the composer closes immediately and a
   24px brass disc appears at the screen center, contracts into
   existence (240ms) and then travels diagonally to the wall area
   (720ms with --ease-real-in: object accelerating away under release
   force). On arrival, the wall slot the new capsule will occupy does
   a single 280ms brass-border luminance pulse — no scale, no glow
   bleeding outside the tile. Total flight: 1240ms.

   The flight is a SINGLE physical object travelling under one force.
   No spark trail, no curve, no rotation, no multi-color particles.
   ════════════════════════════════════════════════════════════════════ */
.vault-send-disc {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 250, 230, 1) 0%,
    rgba(255, 215, 130, 0.95) 30%,
    rgba(212, 175, 55, 0.95) 60%,
    rgba(120, 80, 30, 0.9) 100%);
  box-shadow:
    0 0 0 1px rgba(120, 80, 30, 0.5),
    0 6px 16px rgba(60, 40, 10, 0.45);
  z-index: 9500;
  pointer-events: none;
  /* Positioned at composer center via CSS vars --send-from-x /
     --send-from-y. The disc opacity-fades into existence (no scale
     overshoot) then translates to the wall under accelerating force. */
  transform:
    translate3d(var(--send-from-x, 50vw), var(--send-from-y, 50vh), 0)
    translate(-50%, -50%);
  opacity: 0;
  will-change: transform, opacity;
}

.vault-send-disc.is-contracting {
  animation: sendDiscContract var(--dur-touch) var(--ease-real-out) forwards;
}

.vault-send-disc.is-flying {
  animation: sendDiscFly var(--dur-arrive) var(--ease-real-in) forwards;
}

@keyframes sendDiscContract {
  from {
    transform:
      translate3d(var(--send-from-x, 50vw), var(--send-from-y, 50vh), 0)
      translate(-50%, -50%);
    opacity: 0;
  }
  to {
    transform:
      translate3d(var(--send-from-x, 50vw), var(--send-from-y, 50vh), 0)
      translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes sendDiscFly {
  from {
    transform:
      translate3d(var(--send-from-x, 50vw), var(--send-from-y, 50vh), 0)
      translate(-50%, -50%);
    opacity: 1;
  }
  to {
    transform:
      translate3d(var(--send-to-x, 10vw), var(--send-to-y, 10vh), 0)
      translate(-50%, -50%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-send-disc { display: none !important; }
}

/* Wall arrival pulse — single 280ms brass-border luminance flash on
   the destination tile slot. Used by both send (Phase 5A) and the
   horizon arrival (Phase 3D). Stays inside the tile boundary. */
.vault-tile.is-arriving-from-send {
  animation: vaultTileArrival 280ms var(--ease-real-out);
}

@keyframes vaultTileArrival {
  0%   { box-shadow:
           inset 0 0 0 1px rgba(212, 175, 55, 0.55),
           0 10px 28px rgba(60, 40, 15, 0.32); }
  50%  { box-shadow:
           inset 0 0 0 1px rgba(255, 215, 130, 1),
           inset 0 0 0 2px rgba(212, 175, 55, 0.55),
           0 12px 32px rgba(60, 40, 15, 0.4); }
  100% { box-shadow:
           inset 0 0 0 1px rgba(212, 175, 55, 0.55),
           0 10px 28px rgba(60, 40, 15, 0.32); }
}

@media (prefers-reduced-motion: reduce) {
  .vault-tile.is-arriving-from-send { animation: none; }
}