/* Stanzai dev styles 04/14 — AI response system, song-view texture, V254 Suno hero card + paste overlay + sectioned lyrics — extracted VERBATIM from index.html <style> block lines 947-1481 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* ── PRO: AI RESPONSE SYSTEM ── */
/* V179: .send-btn token-ized. Sound Designer send button — preserves linear-gradient gold identity. */
.send-btn{
  width:100%;
  padding:11px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(var(--gold-rgb), 0.12),rgba(var(--gold-rgb), 0.06));
  border:1px solid rgba(var(--gold-rgb), 0.28);
  color:var(--gold);
  font-family:'DM Mono',monospace;
  font-size:var(--fs-label);
  letter-spacing:0.14em;
  text-transform:uppercase;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
  -webkit-tap-highlight-color:transparent;
  transition:
    background var(--state-dur) var(--easing-standard),
    border-color var(--state-dur) var(--easing-standard),
    transform var(--press-dur) var(--easing-standard);
}
.send-btn:hover{background:linear-gradient(135deg,rgba(var(--gold-rgb), 0.18),rgba(var(--gold-rgb), 0.10));border-color:rgba(var(--gold-rgb), 0.42)}
.send-btn:active{background:rgba(var(--gold-rgb), 0.20);transform:scale(var(--press-scale))}
.send-btn:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
.send-btn.loading{opacity:0.5;pointer-events:none}
.ai-response{margin-top:10px;border-radius:12px;overflow:hidden;animation:proResponseIn 0.32s cubic-bezier(0.4,0,0.2,1)}
@keyframes proResponseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ai-resp-header{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;background:rgba(200,160,80,0.07);border:1px solid rgba(200,160,80,0.14);border-bottom:none;border-radius:12px 12px 0 0}
.ai-badge{display:flex;align-items:center;gap:6px;font-family:'DM Mono',monospace;font-size:var(--fs-label);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold)}
.ai-live-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:aiBlink 1.8s infinite}
.ai-live-dot.done{animation:none;opacity:0.4}
@keyframes aiBlink{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes breathe{0%,100%{opacity:0.35}50%{opacity:0.7}}
@keyframes barBreathe{0%,100%{opacity:0.4;box-shadow:0 0 4px rgba(200,160,80,0)}50%{opacity:0.8;box-shadow:0 0 8px rgba(200,160,80,0.15)}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatDrift1{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,4px)}50%{transform:translate(2px,8px)}75%{transform:translate(5px,-3px)}}
@keyframes floatDrift2{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-5px)}50%{transform:translate(-3px,6px)}75%{transform:translate(-6px,-2px)}}
.ai-resp-body{background:rgba(200,160,80,0.025);border:1px solid rgba(200,160,80,0.12);border-top:none;border-radius:0 0 12px 12px;padding:14px}
.ai-resp-text{font-size:15px;color:var(--t1);line-height:1.7;white-space:pre-wrap}
.stream-cursor::after{content:'';display:inline-block;width:2px;height:14px;background:var(--gold);margin-left:2px;vertical-align:text-bottom;animation:cursorBlink 0.8s step-end infinite}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.ai-resp-text strong{color:var(--gold);font-weight:500}
.ai-resp-text em{color:var(--t2);font-style:italic}
.ai-concept-block{background:var(--s1);border:1px solid var(--b2);border-radius:10px;padding:13px;margin-top:10px}
.ai-concept-title{font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:400;color:var(--t1);margin-bottom:5px}
.ai-concept-body{font-size:13px;color:var(--t2);line-height:1.6}
.ai-concept-firstline{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold);font-style:italic;line-height:1.6;margin-top:8px}
.ai-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
/* V177: .ai-act token-ized. DM Mono uppercase action chip identity preserved.
   Six-rule shape: base + hover + active + variant + variant:hover + focus-visible.
   Variants: .approve (gold), .done (sage, locked terminal state). */
.ai-act{
  padding:7px 13px;
  border-radius:var(--radius-sm);
  font-family:'DM Mono',monospace;
  font-size:var(--fs-label);
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  border:1px solid var(--b3);
  background:var(--s2);
  color:var(--t2);
  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);
}
.ai-act:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.14);
  color:var(--t1);
}
.ai-act:active{transform:scale(var(--press-scale))}
.ai-act:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo);
}
.ai-act.approve{
  background:rgba(var(--gold-rgb), 0.10);
  border-color:rgba(var(--gold-rgb), 0.30);
  color:var(--gold);
}
.ai-act.approve:hover{
  background:rgba(var(--gold-rgb), 0.14);
  border-color:rgba(var(--gold-rgb), 0.45);
}
.ai-act.done{
  background:rgba(110,158,120,0.10);
  border-color:rgba(110,158,120,0.30);
  color:var(--sage);
  pointer-events:none;
}
.suno-block{border-radius:14px;background:var(--s2);border:1px solid var(--b2);overflow:hidden;transition:border-color var(--state-dur) var(--easing-standard),background var(--state-dur) var(--easing-standard)}
.suno-block:hover{border-color:var(--b3);background:rgba(255,255,255,0.01)}
.suno-block:focus-within{box-shadow:var(--focus-ring)}
.suno-block-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;user-select:none}
.suno-block-body{padding:0 16px 16px;border-top:1px solid var(--b1)}
/* V178: .suno-copy-btn token-ized. Gold utility action chip in Suno block headers.
   Variants: default gold, .copied (sage success terminal). */
.suno-copy-btn{
  font-family:'DM Mono',monospace;
  font-size:var(--fs-label);
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:8px 14px;
  min-height:44px;
  border-radius:8px;
  background:rgba(var(--gold-rgb), 0.08);
  border:1px solid rgba(var(--gold-rgb), 0.18);
  color:var(--gold);
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  -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);
}
.suno-copy-btn:hover{
  background:rgba(var(--gold-rgb), 0.14);
  border-color:rgba(var(--gold-rgb), 0.32);
}
.suno-copy-btn:active{background:rgba(var(--gold-rgb), 0.20);transform:scale(var(--press-scale))}
.suno-copy-btn:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
.suno-copy-btn.copied{background:rgba(110,158,120,0.10);border-color:rgba(110,158,120,0.30);color:var(--sage)}
.suno-chev{color:var(--t4);font-size:13px;transition:transform 0.15s;flex-shrink:0}
.suno-chev.open{transform:rotate(90deg)}
.suno-lyrics-view{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:300;line-height:1.9;color:var(--t1);white-space:pre-wrap;padding-top:12px}
.suno-style-view{font-family:'DM Mono',monospace;font-size:13px;line-height:1.8;color:var(--t2);padding-top:12px}
.suno-section-label{font-family:'DM Mono',monospace;font-size:var(--fs-label);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);display:block;margin:10px 0 4px}
.suno-section-label:first-child{margin-top:0}
/* Song View — premium texture and depth */
#s-song-view .sv-bg-glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
  radial-gradient(ellipse at 20% 0%,rgba(200,160,80,0.04) 0%,transparent 50%),
  radial-gradient(ellipse at 80% 100%,rgba(78,158,144,0.03) 0%,transparent 50%);
}
.sv-lyrics-peek{position:relative;max-height:220px;overflow:hidden}
.sv-lyrics-peek::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.sv-lyrics-peek.expanded{max-height:none}
.sv-lyrics-peek.expanded::after{display:none}

/* ═══════════════════════════════════════════════════════════════
   SONG VIEW ARTIFACT CARD — V140
   In-place replacement for the old hero+lyrics block.
   Lives inside #s-song-view, sits above the existing style prompt
   section and details drawer. One screen, one function.
   ═══════════════════════════════════════════════════════════════ */
.sva-card{
  position:relative;
  background:var(--dt-surface);
  border:1px solid var(--dt-edge);
  border-radius:18px;
  padding:36px 30px 32px;
  margin:8px var(--sp-page) 22px;
  overflow:hidden;
  transition:border-color 0.7s ease;
}
/* V249: decorative gold ::before top gradient removed — was structure, not state.
   The ::after splash animation below still fires on sva-splash class (state signal). */

/* Edge splash overlay — invisible at rest, blooms from card perimeter on expand */
.sva-card::after{
  content:'';position:absolute;inset:0;
  border-radius:18px;
  pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(200,160,80,0);
  opacity:0;
  transition:none;
}
.sva-card.sva-splash{
  animation:svaSplashBorder 2200ms cubic-bezier(0.4,0,0.4,1) forwards;
}
.sva-card.sva-splash::after{
  animation:svaSplashGlow 2200ms cubic-bezier(0.4,0,0.4,1) forwards;
}
@keyframes svaSplashBorder{
  0%   { border-color:rgba(200,160,80,0.12); }
  35%  { border-color:rgba(200,160,80,0.55); }
  50%  { border-color:rgba(200,160,80,0.55); }
  100% { border-color:rgba(200,160,80,0.12); }
}
@keyframes svaSplashGlow{
  0%   { box-shadow:inset 0 0 0 0 rgba(200,160,80,0); opacity:0; }
  35%  { box-shadow:inset 0 0 40px 2px rgba(200,160,80,0.22); opacity:1; }
  50%  { box-shadow:inset 0 0 40px 2px rgba(200,160,80,0.22); opacity:1; }
  100% { box-shadow:inset 0 0 0 0 rgba(200,160,80,0); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .sva-card.sva-splash,
  .sva-card.sva-splash::after{animation:none}
}

/* Top-right copy button — discrete, paired with future Edit/Share affordances */
.sva-card-actions{
  position:absolute;top:18px;right:18px;
  display:flex;gap:6px;z-index:2;
}
.sva-icon-btn{
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform 0.05s ease,background 0.15s,border-color 0.15s,color 0.15s;
  -webkit-tap-highlight-color:transparent;
  padding:0;
}
.sva-icon-btn:active{transform:scale(0.92);background:rgba(200,160,80,0.06);border-color:rgba(200,160,80,0.22);color:var(--gold)}
.sva-icon-btn.copied{background:rgba(110,158,120,0.08);border-color:rgba(110,158,120,0.3);color:var(--sage)}
.sva-icon-btn svg{width:15px;height:15px}

/* ═══ V254 SUNO PHASE 1 — hero-card element + paste overlay ═══ */

/* Empty state: dashed-outline "+ Suno link" pill that draws the eye.
   Sits inside .sva-card-actions next to the copy button.
   V254 polish: 42px to match the bumped play/thumb size. */
.sva-suno-empty{
  display:none;align-items:center;gap:7px;
  height:42px;padding:0 14px;
  border-radius:999px;
  background:transparent;
  border:1px dashed rgba(200,160,80,0.42);
  color:var(--gold);
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:0.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.2s,border-color 0.2s,transform 0.05s ease;
  -webkit-tap-highlight-color:transparent;
  animation:svaSunoEmptyPulse 2.8s ease-in-out infinite;
}
.sva-suno-empty:hover{
  background:rgba(200,160,80,0.06);
  border-color:rgba(200,160,80,0.62);
  animation:none;
}
.sva-suno-empty:active{transform:scale(0.95)}
.sva-suno-empty svg{width:14px;height:14px;stroke:var(--gold);stroke-width:2;fill:none}
.sva-suno-empty .sva-suno-empty-plus{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(200,160,80,0.48);
  font-size:12px;line-height:1;letter-spacing:0;
  padding-bottom:1px;
}
@keyframes svaSunoEmptyPulse{
  0%,100%{border-color:rgba(200,160,80,0.42);box-shadow:0 0 0 0 rgba(200,160,80,0)}
  50%{border-color:rgba(200,160,80,0.68);box-shadow:0 0 12px rgba(200,160,80,0.12)}
}
@media (prefers-reduced-motion: reduce){
  .sva-suno-empty{animation:none}
}

/* Filled state: play/pause button — 42px for hero presence, gold
   treatment to mark it as the "song is alive" affordance. */
.sva-suno-play{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:rgba(200,160,80,0.08);
  border:1px solid rgba(200,160,80,0.48);
  color:var(--gold);
  cursor:pointer;
  transition:background 0.2s,border-color 0.2s,transform 0.05s ease,box-shadow 0.3s;
  -webkit-tap-highlight-color:transparent;
  padding:0;
  position:relative;
}
.sva-suno-play:hover{
  background:rgba(200,160,80,0.14);
  border-color:rgba(200,160,80,0.7);
}
.sva-suno-play:active{transform:scale(0.92)}
.sva-suno-play svg{width:16px;height:16px;fill:var(--gold);stroke:none}
.sva-suno-play.playing{
  background:rgba(200,160,80,0.18);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,160,80,0.06);
  animation:svaSunoPlayPulse 2.4s ease-in-out infinite;
}
@keyframes svaSunoPlayPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(200,160,80,0.06)}
  50%{box-shadow:0 0 0 5px rgba(200,160,80,0.14)}
}
@media (prefers-reduced-motion: reduce){
  .sva-suno-play.playing{animation:none}
}

/* Cover art thumbnail — appears alongside the play button only if
   the Suno image CDN returns a valid image. Fails silent otherwise.
   V254 polish: 42px matches the play button for a clean action row. */
.sva-suno-thumb{
  display:none;
  width:42px;height:42px;border-radius:9px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(200,160,80,0.22);
  object-fit:cover;
  flex-shrink:0;
}
.sva-suno-thumb.loaded{display:inline-block}

/* Progress bar — thin gold strip along the top edge of .sva-card
   when a Suno link is attached. Scrubable. Hidden when no link. */
.sva-suno-progress{
  display:none;
  position:absolute;top:0;left:0;right:0;height:3px;
  background:rgba(200,160,80,0.08);
  border-top-left-radius:inherit;border-top-right-radius:inherit;
  overflow:hidden;
  cursor:pointer;
  z-index:3;
}
.sva-suno-progress-fill{
  position:absolute;top:0;left:0;bottom:0;
  width:0%;
  background:linear-gradient(90deg,var(--gold),rgba(200,160,80,0.75));
  transition:width 0.1s linear;
}
.sva-card.sva-suno-attached .sva-suno-progress{display:block}

/* Paste overlay card — slides down from the action corner, contains
   the input + single "Done" button. Absolute-positioned inside
   .sva-card so it scrolls with the hero. */
.sva-suno-paste{
  display:none;
  position:absolute;top:60px;right:18px;
  width:min(320px,calc(100% - 36px));
  background:var(--s1);
  border:1px solid rgba(200,160,80,0.35);
  border-radius:var(--radius-md);
  padding:14px 14px 12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.45),0 0 0 1px rgba(200,160,80,0.05);
  z-index:5;
  animation:svaSunoPasteDrop 0.24s cubic-bezier(0.2,0.8,0.2,1);
}
.sva-suno-paste.open{display:block}
@keyframes svaSunoPasteDrop{
  0%{opacity:0;transform:translateY(-6px)}
  100%{opacity:1;transform:translateY(0)}
}
.sva-suno-paste-label{
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);opacity:0.82;
  margin-bottom:8px;
}
.sva-suno-paste-input{
  width:100%;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--b2);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  color:var(--t1);
  font-family:'Outfit',sans-serif;font-size:13px;
  outline:none;-webkit-appearance:none;
  margin-bottom:10px;
  transition:border-color 0.2s;
}
.sva-suno-paste-input:focus{border-color:rgba(200,160,80,0.5)}
.sva-suno-paste-input.invalid{border-color:rgba(196,104,120,0.55);animation:svaSunoPasteShake 0.4s}
@keyframes svaSunoPasteShake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-3px)}
  40%,80%{transform:translateX(3px)}
}
.sva-suno-paste-hint{
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:300;
  color:var(--t4);line-height:1.45;
  margin-bottom:10px;
}
.sva-suno-paste-hint.err{color:rgba(196,104,120,0.88)}
.sva-suno-paste-actions{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.sva-suno-paste-cancel{
  background:none;border:none;cursor:pointer;
  font-family:'Outfit',sans-serif;font-size:12px;color:var(--t4);
  padding:6px 4px;
  transition:color 0.15s;
}
.sva-suno-paste-cancel:hover{color:var(--t2)}
.sva-suno-paste-done{
  background:rgba(200,160,80,0.1);
  border:1px solid rgba(200,160,80,0.45);
  border-radius:999px;
  padding:7px 18px;
  font-family:'DM Mono',monospace;font-size:10px;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--gold);cursor:pointer;
  transition:background 0.2s,border-color 0.2s,transform 0.05s;
  -webkit-tap-highlight-color:transparent;
}
.sva-suno-paste-done:hover{background:rgba(200,160,80,0.16);border-color:var(--gold)}
.sva-suno-paste-done:active{transform:scale(0.96)}

/* Replace link — small affordance under the play button (tap to re-paste).
   Only visible in filled state. */
.sva-suno-replace{
  display:none;
  font-family:'DM Mono',monospace;font-size:8.5px;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--t4);
  background:none;border:none;cursor:pointer;padding:4px 0 0;
  transition:color 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.sva-suno-replace:hover{color:var(--gold)}
.sva-card.sva-suno-attached .sva-suno-replace{display:block}

/* Hide the legacy #sunoUrlInput wrapper in Details & Settings — the
   new hero-card UI is the single source of truth. Keep the input in
   the DOM as a hidden compat shim for any legacy code that reads it.
   Tags the wrapper via JS on init (see _svaSunoHideLegacy()) for
   broader browser support than :has(). */
#s-song-view #sunoUrlInput,
#s-song-view .svt-legacy-suno{display:none}
.sva-stamp{
  font-family:'DM Mono',monospace;font-size:9px;font-weight:400;
  letter-spacing:0.32em;text-transform:uppercase;
  color:rgba(200,160,80,0.5);
  margin-bottom:16px;
}
.sva-title{
  font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:300;
  line-height:1;letter-spacing:-0.01em;color:var(--t1);
  margin:0 0 12px 0;cursor:pointer;
  word-wrap:break-word;
}
@media (max-width:480px){.sva-title{font-size:34px}}
.sva-credit{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:400;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--t3);
  margin-bottom:24px;
}
.sva-summary{
  font-family:'DM Mono',monospace;font-size:11px;font-weight:300;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--t4);line-height:1.85;
  margin-bottom:30px;white-space:pre-line;
}
.sva-summary:empty{display:none;margin-bottom:0}

/* Sectioned lyrics area — collapsible. Default state: collapsed (teaser). */
.sva-lyrics-area{position:relative;margin-top:8px}
.sva-divider-top{
  height:1px;margin:0 0 26px;
  background:linear-gradient(90deg,transparent,rgba(200,160,80,0.18),transparent);
}
.sva-section{margin-bottom:26px}
.sva-section:last-child{margin-bottom:0}
.sva-section-label{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:400;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;display:block;
}
.sva-section-lines{
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:300;
  line-height:1.85;color:var(--t1);
  white-space:pre-line;
}

/* Collapsed state — clip the lyrics area, fade the bottom, show "Show full" toggle */
.sva-lyrics-area.collapsed{max-height:200px;overflow:hidden}
.sva-lyrics-area.collapsed::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(transparent,var(--dt-surface));
  pointer-events:none;
}

/* Toggle row — appears below the lyrics, switches label based on state */
.sva-toggle{
  margin-top:18px;text-align:center;cursor:pointer;
  padding:14px 0;border-radius:10px;
  transition:background 0.15s,transform 0.05s ease;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.sva-toggle:active{background:rgba(200,160,80,0.04);transform:scale(0.985)}
.sva-toggle-text{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:400;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(200,160,80,0.65);
}

/* Floating collapse pill — sticks at top of viewport while reading expanded lyrics.
   Only visible when the card has .sva-is-expanded. One tap collapses from anywhere. */
.sva-collapse-pill{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 60px);
  left:50%;transform:translateX(-50%) translateY(-12px);
  z-index:850;
  display:none;
  align-items:center;gap:8px;
  padding:10px 18px;border-radius:999px;
  background:rgba(17,17,17,0.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(200,160,80,0.22);
  box-shadow:0 6px 24px rgba(0,0,0,0.5);
  cursor:pointer;
  opacity:0;
  transition:opacity 0.2s ease,transform 0.25s cubic-bezier(0.16,1,0.3,1);
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.sva-collapse-pill.visible{
  display:flex;
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.sva-collapse-pill:active{transform:translateX(-50%) translateY(0) scale(0.95)}
.sva-collapse-pill-text{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:400;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);
}
.sva-collapse-pill svg{width:12px;height:12px;color:var(--gold)}

/* Empty state — for songs with no lyrics yet */
.sva-empty{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:16px;color:var(--t4);text-align:center;
  padding:30px 0 10px;
}
/* ═══════════════════════════════════════════════════════════════ */