/* Stanzai dev styles 09/14 — chat DNA bar, AI messages, AI-recommended glow, concept rail + concept card lifecycle — extracted VERBATIM from index.html <style> block lines 3544-4455 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* DNA bar (top of chat) */
.v9-dna-bar{display:flex;gap:6px;padding:10px 16px;background:rgba(200,160,80,0.02);border-bottom:1px solid rgba(200,160,80,0.06);overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.v9-dna-bar::-webkit-scrollbar{display:none}
.v9-ctx-bar{display:none;align-items:center;gap:6px;padding:6px 16px;background:rgba(200,160,80,0.04);border-bottom:1px solid rgba(200,160,80,0.06);font-family:'Outfit',sans-serif;flex-shrink:0;overflow:hidden}
/* Founder declutter (2026-06-10): the context bar duplicates the topnav title +
   DNA chips on the stacked mobile layout — display-only element (no tap wiring),
   so it simply never shows under 1024px. Desktop keeps it until the desktop overhaul. */
@media (min-width:1024px){.v9-ctx-bar.show{display:flex}}
.v9-ctx-title{font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.v9-ctx-sep{color:var(--t4);font-size:11px;flex-shrink:0}
.v9-ctx-phase{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);opacity:0.7;white-space:nowrap;flex-shrink:0}
.v9-ctx-genre{font-size:13px;color:var(--t3);white-space:nowrap;flex-shrink:0}
/* V179: .v9-dna-chip token-ized. Chat header DNA bar pill — preserves
   .done sage state and .pending gold pulse animation. */
.v9-dna-chip{
  padding:5px 11px;
  border-radius:14px;
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:400;
  color:rgba(var(--gold-rgb), 0.85);
  border:1px solid rgba(var(--gold-rgb), 0.12);
  white-space:nowrap;
  flex-shrink:0;
  transition:
    background-color var(--state-dur) var(--easing-standard),
    border-color var(--state-dur) var(--easing-standard),
    color var(--state-dur) var(--easing-standard);
}
.v9-dna-chip.done{color:rgba(110,158,120,0.70);border-color:rgba(110,158,120,0.18);background:rgba(110,158,120,0.03)}
.v9-dna-chip.pending{color:var(--gold);border-color:rgba(var(--gold-rgb), 0.25);animation:dnaPulse 2s ease-in-out infinite}
.dna-pending{color:var(--gold);animation:dnaPulse 2s ease-in-out infinite;display:inline-block}
@keyframes dnaPulse{0%,100%{opacity:0.4}50%{opacity:1}}

/* Chat thread */
/* V312-debug BUG 35: bottom padding driven by --v9-input-area-h CSS variable
   set dynamically by a ResizeObserver on .v9-input-area (see init below).
   Was hardcoded 160px — multi-line input or PWA keyboard pushed input area
   taller than 160px, last lines of thread vanished behind the bar.
   24px adds a comfortable buffer above the input. */
.v9-thread{padding:16px var(--sp-page) calc(var(--v9-input-area-h, 160px) + 24px);display:flex;flex-direction:column;gap:16px;min-height:50vh}
.v9-thread::-webkit-scrollbar{display:none}

/* AI messages */
.v9-ai{max-width:96%;font-family:'Outfit',sans-serif;font-size:17px;font-weight:300;color:#e8e2d6;line-height:1.7;animation:v9msgIn 0.4s ease both}
.v9-ai-bubble{padding:4px 0 4px 0}
.v9-ai-bubble span[id^="v9str_"]{white-space:pre-wrap;word-break:break-word}
.v9-ai-label{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.12em;color:rgba(200,160,80,0.45);margin-bottom:8px;text-transform:uppercase}
.v9-ai-bubble strong{color:var(--t1)}
.v9-ai-bubble p{margin:0 0 14px 0}
.v9-ai-bubble p:last-of-type{margin-bottom:0}

/* User messages */
.v9-user{max-width:82%;padding:16px 20px;border-radius:16px 16px 4px 16px;background:rgba(78,158,144,0.05);font-family:'Outfit',sans-serif;font-size:17px;font-weight:300;color:#e8e2d6;line-height:1.65;align-self:flex-end;animation:v9msgIn 0.25s ease both}

/* V312-debug BUG 41: defensive sibling-margin fallback. Parent .v9-thread uses
   flex gap:16px which works on all modern browsers, but pre-Safari-14.1 / older
   mobile contexts can drop flex gap silently — bubbles render flush against each
   other. Adjacent-sibling margin guarantees visible separation regardless of gap
   support. The 4px lighter top-margin keeps the visual rhythm tight. */
.v9-user + .v9-user, .v9-ai + .v9-user, .v9-user + .v9-ai, .v9-ai + .v9-ai{margin-top:4px}

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

/* Contextual chips */
.v9-chips{display:flex;gap:6px;flex-wrap:wrap;padding:6px 0}
.v9-chip{padding:12px 18px;border-radius:var(--radius-xl);background:var(--s2);border:1px solid var(--b2);font-family:'Outfit',sans-serif;font-size:16px;font-weight:400;color:var(--t2);cursor:pointer;white-space:nowrap;transition:background-color var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),color var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard),box-shadow var(--state-dur) var(--easing-standard);user-select:none;-webkit-tap-highlight-color:transparent}
.v9-chip:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:var(--t1)}
.v9-chip.v9-slide-in{animation:v9SlideIn 0.4s ease forwards}
@keyframes v9SlideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.v9-chip:active{transform:scale(var(--press-scale));opacity:0.8}
/* AI-recommended (glow) — gold creative direction; chip is what Stanzai is suggesting */
.v9-chip.glow{border-color:rgba(var(--gold-rgb),0.30);color:var(--gold);background:rgba(var(--gold-rgb),0.05);box-shadow:0 0 12px rgba(var(--gold-rgb),0.06)}
.v9-chip.glow:hover{border-color:rgba(var(--gold-rgb),0.45);background:rgba(var(--gold-rgb),0.09);box-shadow:0 0 16px rgba(var(--gold-rgb),0.10)}
@keyframes v9PulseReady{0%,100%{box-shadow:0 0 12px rgba(var(--gold-rgb),0.06)}50%{box-shadow:0 0 18px rgba(var(--gold-rgb),0.25),0 0 0 4px rgba(var(--gold-rgb),0.08)}}
.v9-chip.glow.ready-pulse{animation:v9PulseReady 2s ease-in-out 3}
.v9-chip:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}
.v9-chip.glow:focus-visible{box-shadow:0 0 12px rgba(var(--gold-rgb),0.12),var(--focus-ring),var(--focus-soft),var(--focus-halo)}

/* Concept cards (inline in chat) — gold semantic: concept work is the most creative emotional act */
.v9-concept{padding:16px 18px;border-radius:14px;border:1px solid rgba(var(--gold-rgb),0.10);background:rgba(var(--gold-rgb),0.02);margin:8px 0;cursor:pointer;transition:transform var(--press-dur) var(--easing-standard),background var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),box-shadow var(--state-dur) var(--easing-standard)}
.v9-concept:hover{border-color:rgba(var(--gold-rgb),0.20);background:rgba(var(--gold-rgb),0.035)}
.v9-concept:active{transform:scale(0.99)}
.v9-concept.rec{border-color:rgba(var(--gold-rgb),0.22);background:rgba(var(--gold-rgb),0.04);box-shadow:0 0 20px rgba(var(--gold-rgb),0.03)}
.v9-concept.rec:hover{border-color:rgba(var(--gold-rgb),0.32);background:rgba(var(--gold-rgb),0.06);box-shadow:0 0 24px rgba(var(--gold-rgb),0.05)}
.v9-concept:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}
.v9-concept-num{font-family:'DM Mono',monospace;font-size:var(--fs-label);color:rgba(var(--gold-rgb),0.5);letter-spacing:0.08em;margin-bottom:5px;text-transform:uppercase}
.v9-concept-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:400;color:#e8e2d6;margin-bottom:5px;font-style:italic}
.v9-concept-title::after{content:"";display:block;width:34px;height:1px;background:rgba(var(--gold-rgb),0.35);margin-top:7px}
.v9-concept-body{font-size:16px;color:#d8d2c6;line-height:1.65;font-family:'Outfit',sans-serif;font-weight:300}
.v9-concept-lock{display:inline-block;padding:10px 20px;border-radius:var(--radius-xl);background:rgba(var(--gold-rgb),0.06);border:1px solid rgba(var(--gold-rgb),0.15);font-family:'Outfit',sans-serif;font-size:16px;font-weight:400;color:var(--gold);margin-top:10px;cursor:pointer;transition:transform var(--press-dur) var(--easing-standard),background var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard)}
.v9-concept-lock:hover{background:rgba(var(--gold-rgb),0.10);border-color:rgba(var(--gold-rgb),0.30)}
.v9-concept-lock:active{transform:scale(var(--press-scale))}
.v9-concept-lock:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}

/* ── CONCEPT RAIL + CARD LIFECYCLE (Concept Streaming Batch 2) ──────────
   Reference: docs/design/stanzai-concept-reveal-full 2.html.
   Rail = fixed-height container above concept cards. Three semantic
   states: .is-thinking (pre-stream; reserved for Batch 4), .is-pick
   (resolved Stanzai pick after payload completes), .is-locked (after
   user selects a card). Cards carry their own lifecycle classes —
   is-pending / is-streaming / is-complete / is-selectable / is-selected
   — so producer-side streaming (later batches) can mount placeholder
   slots and progressively fill them without changing the DOM shape.
   Selection state uses stronger restrained gold per the Concept
   Experience Direction spec; non-selected cards soften to 0.55 opacity. */
.v9-concept-rail{
  position:relative;
  margin:4px 0 14px;
  padding:0;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(var(--gold-rgb),0.06),rgba(var(--gold-rgb),0.025));
  border:1px solid rgba(var(--gold-rgb),0.22);
  box-shadow:inset 0 1px 0 rgba(var(--gold-rgb),0.10);
  overflow:hidden;
  animation:sfRecIn 220ms cubic-bezier(0.34,1.25,0.64,1) both;
}
.v9-concept-rail-head{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;
  min-height:56px;
  cursor:pointer;
  user-select:none;
}
.v9-concept-rail-icon{
  flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(var(--gold-rgb),0.32),rgba(var(--gold-rgb),0.06) 65%);
  border:1px solid rgba(var(--gold-rgb),0.42);
  display:flex;align-items:center;justify-content:center;
}
.v9-concept-rail-icon .v9-concept-rail-pip{
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 5px rgba(var(--gold-rgb),0.65);
}
.v9-concept-rail.is-thinking .v9-concept-rail-icon .v9-concept-rail-pip{
  animation:v9ConceptRailPip 1.6s ease-in-out infinite;
}
@keyframes v9ConceptRailPip{
  0%,100%{opacity:0.35;transform:scale(0.85)}
  50%{opacity:1;transform:scale(1.05)}
}
.v9-concept-rail-text{flex:1;min-width:0}
.v9-concept-rail-label{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:3px;opacity:0.95;
}
.v9-concept-rail-msg{
  font-family:'Outfit',sans-serif;font-weight:300;font-size:15px;
  color:rgba(224,220,208,0.88);line-height:1.4;
}
.v9-concept-rail-msg em{color:var(--t1);font-style:italic}
.v9-concept-rail-cue{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;
  font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--gold);opacity:0.78;
  line-height:1;
}
.v9-concept-rail-cue-chev{
  display:inline-block;
  font-family:'DM Mono',monospace;font-size:10px;
  transition:transform var(--state-dur) var(--easing-standard);
}
.v9-concept-rail.is-expanded .v9-concept-rail-cue-chev{transform:rotate(180deg)}
.v9-concept-rail-chev{
  flex:0 0 auto;
  color:rgba(var(--gold-rgb),0.55);
  font-family:'DM Mono',monospace;font-size:11px;
  transition:transform var(--state-dur) var(--easing-standard);
  margin-left:4px;
}
.v9-concept-rail.is-expanded .v9-concept-rail-chev{transform:rotate(180deg)}
.v9-concept-rail-why{
  display:none;
  padding:11px 16px 14px;
  font-family:'Outfit',sans-serif;font-weight:300;font-size:15px;
  color:#d8d2c6;line-height:1.55;letter-spacing:0.002em;
  border-top:1px solid rgba(var(--gold-rgb),0.10);
}
.v9-concept-rail.is-expanded .v9-concept-rail-why{display:block}
.v9-concept-rail-why-label{display:none}
.v9-concept-rail-why-body{display:block}
/* Concept Streaming Batch 2.8 (2026-05-13). Rail is a SUMMARY STRIP for
   Stanzai's recommendation only. No selection state inside the rail —
   selection lives on the cards. Reference: docs/design/
   stanzai-rec-rail-simplified.md. The earlier mini-pill /
   .v9-concept-rail-selected styles were removed. */

/* Card lifecycle — applies to .v9-concept inside the artifact bubble.
   The base card class lives at .v9-concept above; these add lifecycle
   semantics without rewriting the existing visual rules. */
.v9-concept.is-pending{opacity:0.4;pointer-events:none}
.v9-concept.is-streaming{opacity:0.85}
.v9-concept.is-complete,.v9-concept.is-selectable{opacity:1}
.v9-concept.is-selectable{cursor:pointer}

/* Phase 01 Concept preview lane retired (2026-05-14). ConceptArtifactRuntime
   now owns the AI bubble for present_concept_options turns — streams chars
   into live card title/body text nodes, reconciles the final payload into
   the same DOM. See class definition below v9RenderConceptOptionsFromPayload
   for the runtime; static restore/replay still goes through the static
   renderer. */
.v9-concept.is-dimmed{opacity:0.55;transition:opacity 0.25s ease}
.v9-concept.is-selected{
  border-color:rgba(var(--gold-rgb),0.55);
  background:rgba(var(--gold-rgb),0.06);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),0.32) inset, 0 0 24px rgba(var(--gold-rgb),0.10);
  opacity:1;
}
.v9-concept.is-selected:hover{
  border-color:rgba(var(--gold-rgb),0.65);
  background:rgba(var(--gold-rgb),0.075);
}
.v9-concept-pick-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  background:rgba(var(--gold-rgb),0.08);
  border:1px solid rgba(var(--gold-rgb),0.42);
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:0.28em;
  color:var(--gold);text-transform:uppercase;
  margin-left:8px;vertical-align:middle;
}
.v9-concept-pick-tag::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 3px rgba(var(--gold-rgb),0.65);
}

/* Concept Streaming Batch 2.5 (2026-05-13): inline-chip CSS removed.
   Develop / Show-more chips now live in the global #v9ChipStrip via the
   v9ChipAction route (cases: concept-develop, concept-more) so the
   action surface matches the rest of the conversation UI instead of
   feeling like local-to-the-bubble UI. */

/* Structure cards (inline in chat) — teal semantic: structure is architectural/categorical */
.v9-struct{padding:16px 18px;border-radius:14px;border:1px solid rgba(var(--teal-rgb),0.10);background:rgba(var(--teal-rgb),0.02);margin:8px 0;transition:background var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),box-shadow var(--state-dur) var(--easing-standard)}
.v9-struct.rec{border-color:rgba(var(--teal-rgb),0.22);background:rgba(var(--teal-rgb),0.04);box-shadow:0 0 20px rgba(var(--teal-rgb),0.03)}
.v9-struct.rec:hover{border-color:rgba(var(--teal-rgb),0.32);background:rgba(var(--teal-rgb),0.06);box-shadow:0 0 24px rgba(var(--teal-rgb),0.05)}
.v9-struct-num{font-family:'DM Mono',monospace;font-size:var(--fs-label);color:rgba(var(--teal-rgb),0.5);letter-spacing:0.08em;margin-bottom:5px;text-transform:uppercase}
.v9-struct-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:#e8e2d6;margin-bottom:5px;font-style:italic}
.v9-struct-title::after{content:"";display:block;width:34px;height:1px;background:rgba(var(--teal-rgb),0.35);margin-top:7px}
.v9-struct-body{font-size:16px;color:#d8d2c6;line-height:1.6;font-family:'Outfit',sans-serif;font-weight:300}
.v9-struct-lock{display:inline-block;padding:10px 20px;border-radius:var(--radius-xl);background:rgba(var(--teal-rgb),0.06);border:1px solid rgba(var(--teal-rgb),0.15);font-family:'Outfit',sans-serif;font-size:16px;font-weight:400;color:var(--teal);margin-top:10px;cursor:pointer;transition:transform var(--press-dur) var(--easing-standard),background var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard)}
.v9-struct-lock:hover{background:rgba(var(--teal-rgb),0.10);border-color:rgba(var(--teal-rgb),0.30)}
.v9-struct-lock:active{transform:scale(var(--press-scale))}
.v9-struct-lock:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}

/* Style control chip selected state */
.v9-sc-chip.sel{background:rgba(200,160,80,0.12)!important;border-color:rgba(200,160,80,0.35)!important;color:var(--gold)!important}

/* Quick chat prompt cards — exact v8 match */
.v9-prompt-card{padding:12px 16px;border-radius:var(--radius-md);background:var(--s2);border:1px solid var(--b1);font-size:16px;color:var(--t1);line-height:1.55;cursor:pointer;transition:all 0.15s;-webkit-tap-highlight-color:transparent}
.v9-prompt-card:active{background:var(--s3);transform:scale(0.98)}

/* Lyrics block (inline in chat) */
.v9-lyrics{padding:22px 24px;border-radius:16px;background:rgba(14,12,10,0.9);font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400;line-height:2;color:#e0d8c8;margin:10px 0;box-shadow:inset 0 0 0 1px rgba(200,160,80,0.06),0 4px 16px rgba(0,0,0,0.3)}
.v9-lyrics .section-label{font-family:'DM Mono',monospace;font-size:11px;color:rgba(200,160,80,0.35);letter-spacing:0.1em;margin:12px 0 4px;display:block}
.v9-lyrics .section-label:first-child{margin-top:0}

/* Style prompt cards */
.v9-sp{padding:14px 16px;border-radius:12px;border:1px solid rgba(168,142,104,0.1);background:rgba(168,142,104,0.02);margin:8px 0}
.v9-sp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.v9-sp-ver{font-family:'DM Mono',monospace;font-size:11px;color:rgba(168,142,104,0.6);letter-spacing:0.08em}
.v9-sp-chars{font-family:'DM Mono',monospace;font-size:11px}
.v9-sp-text{font-family:'Outfit',sans-serif;font-size:15px;color:#d8d2c6;line-height:1.7}

/* Phase 09 Sound recommendation drawer renderer (StylePromptArtifactRuntime).
   Mirrors the Concept rail visual language — dark luxury surface, gold accent
   on the persistent recommendation rail and on the recommended (Stanzai Pick)
   card. The recommendation_reason text and the collapsible Suno-details
   drawer (Suno settings · if-it-misses · exclude) live ON the rail above the
   card stack, not inside the prompt card. For Sound the visible "why" IS the
   rail; the dropdown is for the Suno specifics. Alternates B/C are quieter
   cards with no drawer. */
.v9-sp-runtime{margin:4px 0 4px}
.v9-sp-runtime-stack{display:flex;flex-direction:column;gap:10px}
.v9-sp-rail-placeholder{
  position:relative;margin:4px 0 14px;padding:0;border-radius:14px;
  background:linear-gradient(180deg,rgba(var(--gold-rgb),0.06),rgba(var(--gold-rgb),0.025));
  border:1px solid rgba(var(--gold-rgb),0.22);
  box-shadow:inset 0 1px 0 rgba(var(--gold-rgb),0.10);
  overflow:hidden;
  animation:sfRecIn 220ms cubic-bezier(0.34,1.25,0.64,1) both;
}
.v9-sp-rail-placeholder-head{display:flex;align-items:center;gap:12px;padding:13px 16px;min-height:56px;user-select:none}
.v9-sp-rail-placeholder-icon{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(var(--gold-rgb),0.32),rgba(var(--gold-rgb),0.06) 65%);
  border:1px solid rgba(var(--gold-rgb),0.42);
  display:flex;align-items:center;justify-content:center;
}
.v9-sp-rail-placeholder-pip{
  width:5px;height:5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 5px rgba(var(--gold-rgb),0.65);
  animation:v9ConceptRailPip 1.6s ease-in-out infinite;
}
.v9-sp-rail-placeholder-text{flex:1;min-width:0}
.v9-sp-rail-placeholder-label{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--gold);margin-bottom:3px;opacity:0.95;
}
.v9-sp-rail-placeholder-msg{
  font-family:'Outfit',sans-serif;font-weight:300;font-size:15px;
  color:rgba(224,220,208,0.88);line-height:1.4;
}
/* Persistent recommendation rail (Phase 09 — finalize state). Same gold
   surface as the streaming placeholder; replaces it after finalize.
   Visible always: STANZAI PICK · VERSION X label + recommendation_reason
   body. The Suno settings / if-it-misses / exclude content lives inside
   a collapsible drawer attached BELOW the rail head — not inside the
   prompt card — so the prompt card stays clean and "the why" is the
   visible recommendation surface. */
.v9-sp-rec-rail{
  position:relative;margin:4px 0 14px;padding:0;border-radius:14px;
  background:linear-gradient(180deg,rgba(var(--gold-rgb),0.06),rgba(var(--gold-rgb),0.025));
  border:1px solid rgba(var(--gold-rgb),0.22);
  box-shadow:inset 0 1px 0 rgba(var(--gold-rgb),0.10);
  overflow:hidden;
  animation:sfRecIn 220ms cubic-bezier(0.34,1.25,0.64,1) both;
}
/* Reserve the rail's full shell from mount so the recommendation
   surface doesn't jump from a small thinking strip to a larger
   finalized card. The head + divider + toggle row are present from
   the start; only the body content (label / reason / drawer text)
   hydrates at finalize. */
.v9-sp-rec-rail-head{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;min-height:78px;
}
.v9-sp-rec-rail-icon{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(var(--gold-rgb),0.32),rgba(var(--gold-rgb),0.06) 65%);
  border:1px solid rgba(var(--gold-rgb),0.42);
  display:flex;align-items:center;justify-content:center;
}
.v9-sp-rec-rail-pip{
  width:5px;height:5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 5px rgba(var(--gold-rgb),0.65);
}
.v9-sp-rec-rail.is-thinking .v9-sp-rec-rail-pip{
  animation:v9ConceptRailPip 1.6s ease-in-out infinite;
}
.v9-sp-rec-rail-text{flex:1;min-width:0}
.v9-sp-rec-rail-label{
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px;opacity:0.95;
  display:block;
}
.v9-sp-rec-rail-reason{
  font-family:'Outfit',sans-serif;font-weight:300;font-size:15px;
  color:#d8d2c6;line-height:1.55;
}
.v9-sp-rec-rail.is-thinking .v9-sp-rec-rail-reason{
  color:rgba(224,220,208,0.72);font-style:italic;
}
.v9-sp-rec-rail-toggle{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;min-height:44px;
  cursor:pointer;user-select:none;
  border-top:1px solid rgba(var(--gold-rgb),0.10);
  outline:none;
  transition:opacity var(--state-dur) var(--easing-standard);
}
.v9-sp-rec-rail-toggle:focus-visible{box-shadow:var(--focus-ring),var(--focus-soft)}
.v9-sp-rec-rail-toggle.is-loading{opacity:0.45;cursor:default;pointer-events:none}
.v9-sp-rec-rail-toggle-label{
  flex:1;font-family:'Outfit',sans-serif;font-weight:400;
  font-size:13.5px;color:var(--t2);letter-spacing:0.005em;
}
.v9-sp-rec-rail-toggle-chev{
  flex:0 0 auto;color:rgba(var(--gold-rgb),0.7);
  font-family:'DM Mono',monospace;font-size:11px;
  transition:transform var(--state-dur) var(--easing-standard);
}
.v9-sp-rec-rail.is-expanded .v9-sp-rec-rail-toggle-chev{transform:rotate(180deg)}
.v9-sp-rec-rail-body{
  display:none;padding:4px 16px 14px;
  border-top:1px solid rgba(var(--gold-rgb),0.10);
}
.v9-sp-rec-rail.is-expanded .v9-sp-rec-rail-body{display:block}
/* Passive "N sound directions saved with this song" — sits between the
   recommendation rail and the version cards. Outfit family to match
   the rest of the runtime; subtle gold tint reads as reassurance, not
   a CTA. No border, no icon, no button styling. */
.v9-sp-saved-status{
  font-family:'Outfit',sans-serif;font-weight:300;font-size:12.5px;
  letter-spacing:0.02em;color:rgba(var(--gold-rgb),0.62);
  text-align:center;margin:2px 0 10px;
  opacity:0.95;
}
/* Selectable Phase 09 cards. Tap the card body to set primary; small
   utility icons (Copy / Vault) live in the top-right and stop event
   propagation so they don't trigger selection. */
.v9-sp{position:relative;cursor:pointer;transition:border-color var(--state-dur) var(--easing-standard),background var(--state-dur) var(--easing-standard),box-shadow var(--state-dur) var(--easing-standard),opacity var(--state-dur) var(--easing-standard)}
.v9-sp[data-runtime-card="1"]:hover:not(.is-pending):not(.is-streaming),
.v9-sp[data-static-card="1"]:hover:not(.is-pending):not(.is-streaming){background:rgba(168,142,104,0.04)}
.v9-sp.is-selected{
  border-color:rgba(var(--gold-rgb),0.55);
  background:rgba(var(--gold-rgb),0.06);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),0.32) inset, 0 0 24px rgba(var(--gold-rgb),0.10);
}
.v9-sp.is-selected:hover{
  border-color:rgba(var(--gold-rgb),0.65);
  background:rgba(var(--gold-rgb),0.075);
}
.v9-sp-utils{
  position:absolute;top:4px;right:4px;
  display:flex;gap:2px;align-items:center;
  z-index:2;
}
.v9-sp-util-btn{
  position:relative;
  width:40px;height:40px;border-radius:50%;
  background:transparent;
  border:none;
  color:rgba(224,220,208,0.78);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;
  font-family:'DM Mono',monospace;line-height:1;
  padding:0;
  transition:color var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard);
  user-select:none;-webkit-tap-highlight-color:transparent;outline:none;
}
.v9-sp-util-btn::before{
  content:"";
  position:absolute;inset:6px;
  border-radius:50%;
  background:rgba(168,142,104,0.06);
  border:1px solid rgba(168,142,104,0.18);
  transition:background var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard);
  pointer-events:none;
}
.v9-sp-util-btn>*{position:relative;z-index:1}
.v9-sp-util-btn:hover{color:var(--t1)}
.v9-sp-util-btn:hover::before{
  background:rgba(var(--gold-rgb),0.10);
  border-color:rgba(var(--gold-rgb),0.42);
}
.v9-sp-util-btn:active{transform:scale(0.92)}
.v9-sp-util-btn:focus-visible{box-shadow:var(--focus-ring),var(--focus-soft)}
.v9-sp-util-btn[data-util="vault"].is-saved{color:var(--gold)}
.v9-sp-util-btn[data-util="vault"].is-saved::before{
  background:rgba(var(--gold-rgb),0.14);
  border-color:rgba(var(--gold-rgb),0.55);
}
.v9-sp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:8px;
  border-top:1px solid rgba(168,142,104,0.08);
}
.v9-sp-primary-badge{
  display:none;
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--gold);
  padding:4px 10px;border-radius:99px;
  background:rgba(var(--gold-rgb),0.10);
  border:1px solid rgba(var(--gold-rgb),0.42);
}
.v9-sp.is-selected .v9-sp-primary-badge{display:inline-flex;align-items:center;gap:5px}
.v9-sp.is-selected .v9-sp-primary-badge::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 3px rgba(var(--gold-rgb),0.65);
}
.v9-sp-head{margin-right:90px}
/* Card lifecycle (mirrors .v9-concept lifecycle) */
.v9-sp.is-pending{opacity:0.4;pointer-events:none}
.v9-sp.is-streaming{opacity:0.85}
.v9-sp.is-complete{opacity:1}
/* Recommended card — Stanzai Pick, gold accent */
.v9-sp.is-rec{
  border-color:rgba(var(--gold-rgb),0.32);
  background:rgba(var(--gold-rgb),0.04);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),0.10) inset;
}
.v9-sp-pick-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  background:rgba(var(--gold-rgb),0.10);
  border:1px solid rgba(var(--gold-rgb),0.42);
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:0.28em;
  color:var(--gold);text-transform:uppercase;
  margin-left:8px;vertical-align:middle;
}
.v9-sp-pick-tag::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 3px rgba(var(--gold-rgb),0.65);
}
/* Drawer primitives reused by the persistent recommendation rail's
   collapsible Suno-details body (sections, list, exclude). Originally
   styled for an inside-card drawer; the .v9-sp-drawer wrapper itself
   is no longer attached to cards (rail uses .v9-sp-rec-rail-* above)
   but the section / list / exclude sub-classes remain in use. */
.v9-sp-drawer{
  margin-top:12px;border-radius:10px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(var(--gold-rgb),0.14);
  overflow:hidden;
  opacity:0;transition:opacity 180ms ease;
}
.v9-sp-drawer.is-ready{opacity:1}
.v9-sp-drawer-head{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;min-height:44px;
  cursor:pointer;user-select:none;
  outline:none;
}
.v9-sp-drawer-head:focus-visible{box-shadow:var(--focus-ring),var(--focus-soft)}
.v9-sp-drawer-label{
  flex:1;font-family:'Outfit',sans-serif;font-weight:400;
  font-size:13.5px;color:var(--t2);letter-spacing:0.005em;
}
.v9-sp-drawer-chev{
  flex:0 0 auto;color:rgba(var(--gold-rgb),0.7);
  font-family:'DM Mono',monospace;font-size:11px;
  transition:transform var(--state-dur) var(--easing-standard);
}
.v9-sp-drawer.is-expanded .v9-sp-drawer-chev{transform:rotate(180deg)}
.v9-sp-drawer-body{
  display:none;padding:4px 14px 14px;
  border-top:1px solid rgba(var(--gold-rgb),0.10);
}
.v9-sp-drawer.is-expanded .v9-sp-drawer-body{display:block}
.v9-sp-drawer-section{margin-top:12px}
.v9-sp-drawer-section:first-child{margin-top:6px}
.v9-sp-drawer-section-label{
  display:block;font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);
  opacity:0.85;margin-bottom:6px;
}
.v9-sp-drawer-reason{
  font-family:'Outfit',sans-serif;font-size:14px;color:var(--t2);
  line-height:1.6;
}
.v9-sp-drawer-suno-line{
  font-family:'DM Mono',monospace;font-size:13px;color:var(--t2);
  line-height:1.6;margin-bottom:6px;
}
.v9-sp-drawer-suno-rationale{
  font-family:'Outfit',sans-serif;font-size:13.5px;color:var(--t3);
  line-height:1.55;
}
.v9-sp-drawer-miss-list{
  margin:0;padding-left:18px;
  font-family:'Outfit',sans-serif;font-size:13.5px;color:var(--t2);
  line-height:1.55;
}
.v9-sp-drawer-miss-list li{margin-bottom:5px}
.v9-sp-drawer-miss-list li:last-child{margin-bottom:0}
.v9-sp-drawer-exclude-body{
  font-family:'DM Mono',monospace;font-size:12.5px;color:var(--t2);
  line-height:1.55;padding:8px 10px;border-radius:6px;
  background:rgba(196,104,120,0.06);
  border:1px solid rgba(196,104,120,0.18);
  margin-bottom:6px;
}
.v9-sp-drawer-exclude-copy{
  display:inline-block;padding:5px 10px;border-radius:99px;
  background:rgba(196,104,120,0.08);
  border:1px solid rgba(196,104,120,0.22);
  font-family:'Outfit',sans-serif;font-size:12px;color:var(--t2);
  cursor:pointer;user-select:none;
}
.v9-sp-runtime-failure{
  padding:10px 0;font-family:'Outfit',sans-serif;font-size:13px;
  color:var(--t3);font-style:italic;
}

/* Status cards */
.v9-status{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:rgba(110,158,120,0.04);margin:8px 0}
.v9-status-icon{color:var(--sage);font-size:14px}
.v9-status-text{font-size:13px;color:var(--sage);flex:1;font-family:'Outfit',sans-serif;font-weight:300}

/* Collapsed phase cards */
.v9-collapsed{padding:14px 16px;border-radius:14px;background:rgba(200,160,80,0.03);border:1px solid rgba(200,160,80,0.08);margin:4px 0;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all var(--anim-fast);user-select:none}
.v9-collapsed:active{background:rgba(200,160,80,0.06)}
.v9-collapsed-check{color:var(--sage);font-size:15px;flex-shrink:0}
.v9-collapsed-text{flex:1;font-size:15px;color:var(--t2);font-family:'Outfit',sans-serif;font-weight:300}
.v9-collapsed-expand{font-size:11px;color:var(--t4);transition:transform var(--anim-fast);flex-shrink:0}
.v9-collapsed.open .v9-collapsed-expand{transform:rotate(180deg)}
.v9-collapsed-body{display:none;padding:8px 14px 12px;font-size:13px;color:var(--t3);line-height:1.6;font-family:'Outfit',sans-serif;font-weight:300}
.v9-collapsed.open + .v9-collapsed-body{display:block}

/* Action buttons (inside chat) */
/* V177: .v9-act token-ized. Outfit pill chat CTA identity preserved.
   Six-rule shape per variant. Variants:
   - default neutral
   - .primary (teal — CTA action like "Show me options" / "Different options")
   - .gold (gold — creative CTA, e.g. "Save this lyric")
   - .done (terminal completed state) */
.v9-act{
  display:inline-block;
  padding:11px 18px;
  border-radius:var(--radius-xl);
  background:var(--s2);
  border:1px solid var(--b1);
  font-family:'Outfit',sans-serif;
  font-size:15px;
  font-weight:400;
  color:var(--t2);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color var(--state-dur) var(--easing-standard),
    border-color var(--state-dur) var(--easing-standard),
    color var(--state-dur) var(--easing-standard),
    transform var(--press-dur) var(--easing-standard);
}
.v9-act:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.12);
  color:var(--t1);
}
.v9-act:active{transform:scale(var(--press-scale));opacity:0.85}
.v9-act:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo);
}
.v9-act.primary{
  background:rgba(var(--teal-rgb), 0.06);
  border-color:rgba(var(--teal-rgb), 0.22);
  color:var(--teal);
}
.v9-act.primary:hover{
  background:rgba(var(--teal-rgb), 0.10);
  border-color:rgba(var(--teal-rgb), 0.40);
}
.v9-act.gold{
  background:rgba(var(--gold-rgb), 0.06);
  border-color:rgba(var(--gold-rgb), 0.22);
  color:var(--gold);
}
.v9-act.gold:hover{
  background:rgba(var(--gold-rgb), 0.10);
  border-color:rgba(var(--gold-rgb), 0.40);
}
.v9-act.done{opacity:0.5;pointer-events:none}
button.cta{display:block;width:100%;padding:14px 20px;border-radius:14px;background:rgba(var(--gold-rgb), 0.08);border:1px solid rgba(var(--gold-rgb), 0.22);font-family:'Outfit',sans-serif;font-size:15px;font-weight:500;color:var(--gold);cursor:pointer;transition:background-color var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard);-webkit-tap-highlight-color:transparent;margin-top:8px}
button.cta:hover{background:rgba(var(--gold-rgb), 0.12);border-color:rgba(var(--gold-rgb), 0.35)}
button.cta:active{background:rgba(var(--gold-rgb), 0.15);transform:scale(var(--press-scale))}
button.cta:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
button.cta:disabled{opacity:0.5;pointer-events:none}

/* Input bar (bottom of chat) */
.v9-input-area{position:fixed;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:450;background:var(--bg);padding:10px var(--sp-page) 12px}
/* V148 seamless: composer, tabbar, and chat-bg all resolve to var(--bg) at the bottom
   of the screen. One uniform color means no visible boundaries between any of them.
   The chat-bg radial still has its warm center at the top but fades to var(--bg) at 70%,
   matching the composer and tabbar below. */
.v9-chip-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 0 10px;flex-shrink:0;animation:fadeSlideIn 0.3s ease-out both}
.v9-chip-strip::-webkit-scrollbar{display:none}
.v9-input-row{display:flex;gap:8px;align-items:flex-end}
.v9-input{flex:1;min-width:0;width:100%;max-width:100%;padding:14px 20px;border-radius:var(--radius-xl);background:rgba(255,255,255,0.03);border:1px solid var(--b2);color:var(--t1);font-family:'Outfit',sans-serif;font-size:16px;font-weight:300;outline:none;resize:none;max-height:100px;line-height:1.6;-webkit-appearance:none;overflow-x:hidden;overflow-y:auto;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;transition:border-color 0.2s ease,background 0.2s ease}
.v9-input:focus{border-color:rgba(200,160,80,0.3)}
.v9-input::placeholder{color:var(--t3)}
/* V174: .v9-send proper visual upgrade per PDF research spec.
   - Outlined teal (uses sf-btn--utility from foundation, no solid fill)
   - State-driven: empty (muted) → has-content (active teal) → streaming (rose stop)
   - JS sets .v9-send-empty / .v9-send-streaming via class swap (no inline styles)
   - Foundation handles shape, dimensions, padding, press scale, focus glow, hover overlay.
   Legacy rule slimmed to only the chat-specific overrides: arrow font-size, flex-shrink,
   subtle inset shadow for depth in the composer rather than floating shadow above it. */
.v9-send {
  font-size: 18px;
  font-weight: 400;
  flex-shrink: 0;
  /* Subtle inner depth — sits IN the composer, not floating above */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.20);
}

/* Empty state — input has no content. Button reads as available but muted.
   PDF spec: "Empty (disabled feel) — gold at 12% bg, gold at 40% color".
   Adapted to teal since send is utility, not creative commitment. */
.v9-send.v9-send-empty {
  background: rgba(var(--teal-rgb), 0.04);
  border-color: rgba(var(--teal-rgb), 0.18);
  color: rgba(var(--teal-rgb), 0.45);
  cursor: default;
}
.v9-send.v9-send-empty:hover {
  background: rgba(var(--teal-rgb), 0.04);
  border-color: rgba(var(--teal-rgb), 0.18);
  color: rgba(var(--teal-rgb), 0.45);
}
.v9-send.v9-send-empty::after { opacity: 0 !important; }
.v9-send.v9-send-empty:active { transform: none; }

/* Streaming state — AI is mid-response. Button morphs to rose stop affordance.
   Replaces the V125-era inline style.background swap with a clean class state. */
.v9-send.v9-send-streaming {
  background: rgba(var(--rose-rgb), 0.10);
  border-color: rgba(var(--rose-rgb), 0.45);
  color: rgb(var(--rose-rgb));
  /* Subtle pulse to signal "active operation" */
  animation: v9SendStreamPulse 1.4s ease-in-out infinite;
}
.v9-send.v9-send-streaming:hover {
  background: rgba(var(--rose-rgb), 0.16);
  border-color: rgba(var(--rose-rgb), 0.65);
  color: rgb(var(--rose-rgb));
}
.v9-send.v9-send-streaming::after { background: rgb(var(--rose-rgb)); }

@keyframes v9SendStreamPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.20), 0 0 0 0 rgba(var(--rose-rgb), 0.30); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.20), 0 0 0 6px rgba(var(--rose-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .v9-send.v9-send-streaming { animation: none; }
}

/* Chat nav */
.v9-nav{display:flex;align-items:center;padding:10px var(--sp-page) 8px;gap:8px;z-index:100;background:rgba(17,17,16,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-shrink:0}
.v9-nav-title{flex:1;text-align:center;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:400;color:#e0d8c8;cursor:pointer}
/* V179: .v9-nav-btn token-ized. Chat header utility nav (back, options, history).
   Transparent at rest — earns presence on hover. */
.v9-nav-btn{
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  background:transparent;
  border:none;
  color:var(--t3);
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color var(--state-dur) var(--easing-standard),
    color var(--state-dur) var(--easing-standard),
    transform var(--press-dur) var(--easing-standard);
}
.v9-nav-btn:hover{background:rgba(255,255,255,0.04);color:var(--t1)}
.v9-nav-btn:active{transform:scale(var(--press-scale));opacity:0.7}
.v9-nav-btn:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
/* V179: .v9-suno-toggle token-ized. */
.v9-suno-toggle{
  width:auto;
  padding:0 10px;
  font-size:var(--fs-label);
  font-family:'DM Mono',monospace;
  font-weight:400;
  letter-spacing:0.06em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color var(--state-dur) var(--easing-standard),
    color var(--state-dur) var(--easing-standard),
    transform var(--press-dur) var(--easing-standard);
}

/* Streaming */
@keyframes v9pulse{0%,100%{opacity:0.4}50%{opacity:0.8}}
/* V183 P3: Gold thinking dots. Creative output semantic — the AI is about to make a
   creative contribution (concept, lyric, structure). Was neutral gray; now gold at
   35%→85% with subtle 1.0→1.25 scale. 5% gold rule preserved (3 small dots). */
.v9-thinking-dots{display:inline-flex;gap:4px;font-size:22px;color:rgba(var(--gold-rgb),0.60);line-height:1}
.v9-thinking-dots span{animation:v9dotFade 1.2s var(--easing-standard) infinite;display:inline-block;transform-origin:center}
.v9-thinking-dots span:nth-child(2){animation-delay:0.15s}
.v9-thinking-dots span:nth-child(3){animation-delay:0.3s}
@keyframes v9dotFade{0%,80%,100%{opacity:0.35;transform:scale(1)}40%{opacity:0.85;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){
  .v9-thinking-dots span{animation:v9dotFadeReduced 1.6s ease-in-out infinite}
  @keyframes v9dotFadeReduced{0%,100%{opacity:0.30}50%{opacity:0.75}}
}

/* V183 P2: Jump-to-bottom pill. Teal = navigation semantic (not creative).
   Appears when user has scrolled up and new content arrives. Tap to smooth-scroll
   to bottom. Auto-hides when user returns to bottom manually. */
.v9-jump-bottom{
  position:fixed;
  left:50%;
  bottom:calc(var(--composer-h,96px) + env(safe-area-inset-bottom,0px) + 12px);
  transform:translateX(-50%) translateY(8px);
  z-index:460;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  font-family:'DM Mono',monospace;
  font-size:11px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:rgba(var(--teal-rgb),0.90);
  background:rgba(var(--teal-rgb),0.12);
  border:1px solid rgba(var(--teal-rgb),0.30);
  border-radius:999px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  cursor:pointer;
  transition:opacity var(--state-dur,160ms) var(--easing-standard,cubic-bezier(0.2,0.8,0.2,1)), transform var(--state-dur,160ms) var(--easing-standard,cubic-bezier(0.2,0.8,0.2,1));
}
.v9-jump-bottom.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.v9-jump-bottom:active{transform:translateX(-50%) translateY(0) scale(0.97);transition-duration:50ms}
.v9-jump-bottom .v9-jump-arrow{display:inline-block;font-size:13px;line-height:1}

/* Phase transition overlay */
@keyframes v9fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sfModalIn{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1)}}
@keyframes sfModalOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.94)}}
.sf-modal-animate{animation:sfModalIn 0.2s ease both}
.sf-modal-animate-out{animation:sfModalOut 0.15s ease both}

/* Phase transition card (inline in thread) */
.v9-phase-card{text-align:center;padding:28px var(--sp-page);margin:12px 0;animation:v9fadeIn 0.4s ease both;border-top:1px solid rgba(200,160,80,0.06);border-bottom:1px solid rgba(200,160,80,0.06);background:rgba(200,160,80,0.015)}
.v9-phase-card-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;font-style:italic;color:var(--t1);margin-bottom:4px}
.v9-phase-card-sub{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:0.12em;color:var(--gold);opacity:0.5;text-transform:uppercase;font-weight:400}

/* Final Lyrics Artifact — editorial manuscript treatment.
   Visual replacement per docs/design/design_handoff_final_lyrics.
   The classes `.v9-final-lyrics` and `.fl-lyrics` are observed externally
   (recorder, snapshot); inner DOM may change but those wrappers stay.
   Wider on mobile (2026-05-14): the artifact rides the thread's own 20px
   gutter rather than nesting a second 16px gutter inside it, and outer
   padding eases from 26px → 18px so the manuscript reads close to
   edge-to-edge without colliding with the screen. The .v9-ai wrapper is
   widened to 100% so .v9-ai's default 96% cap doesn't squeeze the card. */
.v9-ai.v9-ai-flw{max-width:100%}
.v9-final-lyrics{position:relative;margin:6px 0 18px;border-radius:22px;padding:30px 18px 22px;background:linear-gradient(180deg,#0c0a07 0%,#08060a 50%,#060507 100%);isolation:isolate;animation:v9fadeIn 0.4s ease both}
/* Gold metallic edge — real gradient border via mask-composite, not a flat outline. */
.v9-final-lyrics::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(155deg,rgba(232,200,136,0.55) 0%,rgba(200,160,80,0.30) 18%,rgba(200,160,80,0.08) 45%,rgba(140,106,46,0.18) 70%,rgba(232,200,136,0.40) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* Faint top-edge gold highlight. */
.v9-final-lyrics::after{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,200,136,0.55),transparent);pointer-events:none}
/* Masthead */
.v9-final-lyrics .fl-masthead{text-align:center;padding:0}
.v9-final-lyrics .fl-title{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:30px;line-height:1.15;letter-spacing:0.005em;color:var(--t1);margin:0 0 22px;text-wrap:balance}
.v9-final-lyrics .fl-meta{font-family:'DM Mono',ui-monospace,monospace;font-size:8.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--t3);display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;row-gap:4px;margin:0}
.v9-final-lyrics .fl-meta-dot{width:3px;height:3px;border-radius:999px;background:var(--t4);display:inline-block}
/* Top hairline — quiet gold gradient after the masthead. */
.v9-final-lyrics .fl-gold-rule{height:1px;margin:18px auto 22px;background:linear-gradient(90deg,transparent,rgba(200,160,80,0.40),transparent)}
/* Body — NO internal scroll. The chat scrolls; the card just renders long. */
.v9-final-lyrics .fl-lyrics{max-height:none;overflow:visible;padding:0;background:transparent;border:0;border-radius:0;margin:0;color:var(--t1);font-family:inherit;font-size:inherit;line-height:inherit}
.v9-final-lyrics .fl-stanza{margin:0 0 18px;text-wrap:pretty}
.v9-final-lyrics .fl-stanza:last-child{margin-bottom:0}
.v9-final-lyrics .fl-sec-label{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;font-size:15px;letter-spacing:0.02em;color:var(--t1);margin:0 0 8px}
.v9-final-lyrics .fl-sec-label .fl-sec-name{flex:0 0 auto}
.v9-final-lyrics .fl-sec-label .fl-sec-rule{flex:1 1 auto;height:1px;background:rgba(200,160,80,0.25);min-width:20px}
.v9-final-lyrics .fl-lyric-line{font-family:'Fraunces','Cormorant Garamond',Georgia,serif;font-weight:300;font-style:normal;font-size:14.5px;line-height:1.7;letter-spacing:0.01em;color:var(--t1);margin:0;font-variation-settings:"wght" 300,"opsz" 9}
.v9-final-lyrics .fl-lyric-line + .fl-lyric-line{margin-top:0}
/* Foot rule + actions — matches gold-rule but quieter; replaces legacy fl-actions row. */
.v9-final-lyrics .fl-foot-rule{height:1px;margin:14px 0 12px;background:linear-gradient(90deg,transparent,rgba(200,160,80,0.22),transparent)}
.v9-final-lyrics .fl-actions{display:flex;align-items:center;justify-content:center;gap:0;padding-top:4px;margin:0;color:var(--t3);font-family:'DM Mono',ui-monospace,monospace}
.v9-final-lyrics .fl-actions span[data-fl-action]{cursor:pointer;padding:6px 14px;font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--t3);transition:color 0.18s ease;display:inline-flex;align-items:center}
.v9-final-lyrics .fl-actions span[data-fl-action]:hover{color:var(--t1)}
.v9-final-lyrics .fl-actions .fl-action-sep{width:1px;height:12px;background:rgba(255,255,255,0.08);padding:0;cursor:default}
.v9-final-lyrics .fl-actions svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-right:6px;flex:0 0 auto}
/* Primary CTA — outline-gold pill with the v9PulseReady breathing halo.
   Mixed editorial typography: "Create" in Cormorant Garamond italic gold
   (the manuscript's hero typeface), "sound" in Outfit sans for contrast,
   gold arrow. Matches the artifact's editorial register rather than a
   utilitarian uppercase chip. */
.v9-final-lyrics .fl-cta-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:18px 0 0;padding:18px 28px;border-radius:18px;background:rgba(var(--gold-rgb),0.04);border:1px solid rgba(var(--gold-rgb),0.55);color:var(--gold);cursor:pointer;transition:background var(--state-dur) var(--easing-standard),border-color var(--state-dur) var(--easing-standard),box-shadow var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard);box-shadow:0 0 12px rgba(var(--gold-rgb),0.10);-webkit-tap-highlight-color:transparent;user-select:none;animation:v9PulseReady 2.6s ease-in-out infinite}
.v9-final-lyrics .fl-cta-primary:hover{background:rgba(var(--gold-rgb),0.08);border-color:rgba(var(--gold-rgb),0.78);box-shadow:0 0 22px rgba(var(--gold-rgb),0.22)}
.v9-final-lyrics .fl-cta-primary:active{transform:scale(0.985);background:rgba(var(--gold-rgb),0.10)}
.v9-final-lyrics .fl-cta-primary:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}
.v9-final-lyrics .fl-cta-primary .fl-cta-word-1{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;font-size:22px;line-height:1;color:var(--gold);letter-spacing:0.005em}
.v9-final-lyrics .fl-cta-primary .fl-cta-word-2{font-family:'Outfit',sans-serif;font-weight:500;font-size:17px;line-height:1;color:var(--t1);letter-spacing:0.005em}
.v9-final-lyrics .fl-cta-primary svg{width:16px;height:16px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-left:4px}
/* Quiet secondary — Go to Library text link beneath the CTA. */
.v9-final-lyrics .fl-cta-secondary{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:12px 0 0;padding:8px 12px;background:none;border:none;font-family:'DM Mono',ui-monospace,monospace;font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--t3);cursor:pointer;transition:color 0.18s ease;-webkit-tap-highlight-color:transparent}
.v9-final-lyrics .fl-cta-secondary:hover{color:var(--t1)}
.v9-final-lyrics .fl-cta-secondary:active{opacity:0.7}
.v9-final-lyrics .fl-cta-secondary:focus-visible{outline:none;color:var(--t1)}

/* Chat session rows in sidebar */
.v9-sess-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background 0.12s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.v9-sess-row *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.v9-sess-row:active{background:rgba(255,255,255,0.03)}
.v9-sess-row:last-child{border-bottom:none}
.v9-sess-row.active{background:rgba(200,160,80,0.04)}
.v9-sess-info{flex:1;min-width:0}
.v9-sess-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:400;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v9-sess-meta{font-family:'Outfit',sans-serif;font-size:11px;color:var(--t4);letter-spacing:0.02em;margin-top:2px;font-weight:300}
.sess-tag{display:inline-block;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;padding:2px 7px;border-radius:8px;line-height:1.6;flex-shrink:0}
.sess-tag.lyrics{background:rgba(78,158,144,0.1);border:1px solid rgba(78,158,144,0.25);color:var(--teal)}
.sess-tag.style{background:rgba(200,160,80,0.1);border:1px solid rgba(200,160,80,0.25);color:var(--gold)}

/* Phase card enhanced styling */
.v9-phase-card{border-top:1px solid rgba(200,160,80,0.08);border-bottom:1px solid rgba(200,160,80,0.08);background:rgba(200,160,80,0.015)}

/* Progress dots */
.v9-prog-wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px var(--sp-page) 6px;flex-shrink:0;position:sticky;top:0;z-index:10;background:rgba(10,9,8,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none;-webkit-user-select:none;user-select:none}
.v9-prog-dot{display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
.v9-prog-circle{width:8px;height:8px;border-radius:50%;background:var(--b3);transition:all 0.3s}
.v9-prog-circle.active{background:var(--gold);box-shadow:0 0 8px rgba(200,160,80,0.3)}
.v9-prog-circle.seeded{background:transparent;border:2px solid var(--gold);box-sizing:border-box}
.v9-prog-circle.done{background:var(--sage)}
.v9-prog-label{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:0.06em;color:var(--t4);text-transform:uppercase;font-weight:400}
.v9-prog-label.active{color:var(--gold)}
.v9-prog-label.done{color:var(--sage)}
.v9-prog-line{width:20px;height:1px;background:var(--b3);flex-shrink:0;margin-top:-8px}
.v9-prog-line.done{background:var(--sage)}

/* Chip strip scroll fade */
.v9-chip-strip{position:relative;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}

/* Lyrics diff styling */
.v9-diff-changed{border-left:2px solid var(--gold);padding-left:8px;margin-left:-10px}
.v9-diff-removed{text-decoration:line-through;opacity:0.35;font-style:italic}

/* Light mode — v9 chat overrides */