/* Stanzai dev styles 05/14 — V226 mobile song-view tabs (lyrics pane, dock, more sheet, DNA chips), library rows/filters, song card, context bar, history — extracted VERBATIM from index.html <style> block lines 1482-2088 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* V226: Mobile Song View Tabs v2 — pill tabs, glass lyrics card,
   dual-action dock (Copy · Revise), secondary actions in a More sheet.
   Strict <1024px. Desktop song view track is untouched.
   Layout on mobile: topnav (back · title · ⋯ · ↶) → hero artifact
   card (title/credit/summary) → pill tabs → active tab pane
   (Lyrics is wrapped in its own glass card) → archival strip
   (Suno Link + Song File) → dock (Copy + Revise, fixed above tabbar). */
.svt-tabstrip,
.svt-pane,
.svt-archival,
.svt-dock,
.svt-bottom-spacer,
.svt-more-btn,
.svt-more-sheet,
.svt-more-overlay,
.svt-dna-toggle{display:none}
@media (max-width: 1023px){
  /* Hide artifact-card lyrics machinery on mobile — lyrics live in the Lyrics tab now */
  #s-song-view .sva-lyrics-area,
  #s-song-view .sva-toggle,
  #s-song-view .sva-collapse-pill,
  #s-song-view .sva-divider-top,
  #s-song-view #svaCopyBtn{display:none !important}
  /* V254 Suno Phase 1 fix: .sva-card-actions container stays visible on mobile
     so the Suno pill/play button can render. The original V225–V229 rule hid
     the whole container because the only child at that time was #svaCopyBtn
     (which moved into the dock). Now the container hosts the Suno pill,
     thumb, and play button — siblings of the copy button — so we scope the
     hide to just the copy button. */

  /* Mobile: hide hero-level buttons that moved into the dock / More sheet.
     #svPrimaryAction → Revise in dock. Secondary row + Details → More sheet. */
  #s-song-view #svPrimaryAction,
  #s-song-view #buildStyleBtn,
  #s-song-view .sv-hero-secondary,
  #s-song-view #similarStyleResult,
  #s-song-view .sv-hero-details-wrap,
  #s-song-view .sv-hero-separator{display:none !important}

  /* ── Topnav ⋯ button (opens the More sheet) ── */
  .svt-more-btn{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:50%;
    background:var(--s2);border:1px solid var(--b2);color:var(--t3);
    cursor:pointer;
    margin-left:4px;
    -webkit-tap-highlight-color:transparent;
  }
  .svt-more-btn:active{transform:scale(0.94)}
  .svt-more-btn.share-accent{
    background:rgba(var(--gold-rgb),0.08);
    border-color:rgba(var(--gold-rgb),0.35);
    color:var(--gold2);
  }
  .svt-more-btn.share-accent:hover{
    border-color:rgba(var(--gold-rgb),0.55);
    background:rgba(var(--gold-rgb),0.12);
  }

  /* ── Pill tabs ── sticky under the topnav once the hero scrolls off ── */
  .svt-tabstrip{
    display:flex;gap:8px;justify-content:center;
    position:sticky;top:48px;z-index:50;
    margin:22px var(--sp-page) 0;
    padding:6px 0 14px;
    background:linear-gradient(180deg, var(--bg) 65%, rgba(10,10,9,0) 100%);
  }
  .svt-tab{
    padding:9px 22px;
    border-radius:20px;
    background:transparent;
    border:1px solid rgba(200,160,80,0.25);
    color:var(--t3);
    font-family:'DM Mono',monospace;
    font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
    cursor:pointer;
    -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);
  }
  .svt-tab.active{background:var(--gold);border-color:var(--gold);color:#0a0a09}
  .svt-tab:active{transform:scale(0.96)}

  /* Panes */
  .svt-pane{display:block;margin:6px 0 0}
  .svt-pane[hidden]{display:none !important}

  /* ── Lyrics pane: content inside a glass card, matching hero artifact ── */
  .svt-lyrics-card{
    margin:0 var(--sp-page);
    padding:22px 22px 24px;
    background:rgba(255,255,255,0.015);
    border:1px solid var(--b1);
    border-radius:16px;
    box-shadow:0 1px 0 rgba(255,255,255,0.02) inset;
  }
  #songTabLyrics{
    font-family:'Cormorant Garamond',serif;
    font-size:17px;line-height:1.75;color:var(--t1);
    white-space:pre-wrap;
  }
  #songTabLyrics .sva-section{margin-bottom:20px}
  #songTabLyrics .sva-section:last-child{margin-bottom:4px}
  #songTabLyrics .sva-section-label{
    display:flex;align-items:center;gap:8px;
    font-family:'DM Mono',monospace;font-size:10px;
    letter-spacing:0.22em;text-transform:uppercase;
    color:var(--gold);margin-bottom:10px;opacity:0.85;
  }
  #songTabLyrics .sva-section-label::before{
    content:"";display:inline-block;
    width:5px;height:5px;border-radius:50%;background:var(--gold);
    flex-shrink:0;
  }
  #songTabLyrics .sva-section-lines{
    font-family:'Cormorant Garamond',serif;
    font-size:17px;line-height:1.75;color:var(--t1);
    white-space:pre-wrap;
  }
  #songTabLyrics .sva-empty{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:16px;color:var(--t4);text-align:center;padding:14px 0 6px;
  }

  /* Sound + Notes panes — unwrapped; their child sections already carry styling */
  .svt-pane#svtSoundPane,
  .svt-pane#svtNotesPane{padding-top:4px}

  /* Pane empty-state */
  .svt-empty{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:16px;color:var(--t4);text-align:center;
    padding:22px var(--sp-page);
  }

  /* ── Archival strip — below tabs, always visible ── */
  .svt-archival{
    display:block;
    margin:26px var(--sp-page) 0;
    padding:20px 0 0;
    border-top:1px solid var(--b1);
  }
  .svt-arch-row{margin-bottom:14px}
  .svt-arch-row:last-child{margin-bottom:0}

  /* ── Dock — pinned above tabbar ── */
  .svt-dock{
    display:flex;gap:8px;
    position:fixed;left:0;right:0;
    bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    padding:10px var(--sp-page) 12px;
    background:linear-gradient(180deg, rgba(10,10,9,0) 0%, rgba(10,10,9,0.94) 40%, var(--bg) 100%);
    z-index:45;pointer-events:none;
  }
  .svt-dock-btn{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .svt-dock-primary{
    flex:2;
    padding:13px 14px;border-radius:12px;
    background:rgba(78,158,144,0.08);
    border:1px solid rgba(78,158,144,0.2);
    color:var(--teal);
    font-family:'Outfit',sans-serif;
    font-size:14px;font-weight:400;
    /* V254 fix: backdrop blur so verse text behind doesn't bleed through
       and compete with the button label. Preserves teal tint on top. */
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    transition:transform var(--press-dur) var(--easing-standard),
               background-color var(--state-dur) var(--easing-standard);
  }
  .svt-dock-primary:active{transform:scale(0.98);background:rgba(78,158,144,0.14)}
  .svt-dock-secondary{
    flex:1;
    padding:13px 10px;border-radius:12px;
    /* V254 fix: subtle opaque backing + backdrop blur so verse text behind
       is softened instead of competing with chip label at full brightness.
       Was fully transparent (background:transparent). */
    background:rgba(10,10,9,0.55);
    backdrop-filter:blur(12px) saturate(140%);
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    border:1px solid var(--b2);
    color:var(--t3);
    font-family:'DM Mono',monospace;
    font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
    transition:transform var(--press-dur) var(--easing-standard),
               background-color var(--state-dur) var(--easing-standard);
  }
  .svt-dock-secondary:active{transform:scale(0.97);background:rgba(10,10,9,0.75)}
  .svt-dock-secondary[hidden]{display:none !important}

  /* Bottom spacer keeps archival clear of the dock */
  .svt-bottom-spacer{display:block;height:94px}

  /* ── More sheet (Export · Similar · Project · Details & Settings) ── */
  .svt-more-overlay{
    display:none;position:fixed;inset:0;z-index:800;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .svt-more-overlay.open{display:block}
  .svt-more-sheet{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:810;
    background:var(--s1);
    border-radius:20px 20px 0 0;
    border-top:1px solid var(--b2);
    padding-bottom:env(safe-area-inset-bottom, 20px);
    transform:translateY(100%);
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
    max-height:85vh;overflow-y:auto;
  }
  .svt-more-sheet.open{transform:translateY(0)}
  .svt-more-sheet .svt-more-handle{
    width:36px;height:4px;border-radius:2px;
    background:var(--b3);margin:12px auto 14px;
  }
  .svt-more-sheet .svt-more-head{
    padding:0 20px 14px;
    font-family:'DM Mono',monospace;font-size:11px;
    letter-spacing:0.18em;text-transform:uppercase;
    color:var(--t4);
  }
  .svt-more-sheet .svt-more-body{padding:0 20px 20px}
  .svt-more-sheet .svt-more-body > *{margin-bottom:10px}
  .svt-more-sheet .svt-more-body > *:last-child{margin-bottom:0}
  /* Neutralize the existing row-level margin-left/right inside the sheet */
  .svt-more-sheet [style*="margin:10px var(--sp-page)"],
  .svt-more-sheet [style*="margin:16px var(--sp-page)"]{margin:0 0 10px 0 !important}
  /* Make sure the similar-style result (if reparented) doesn't carry its own margin */
  .svt-more-sheet #similarStyleResult{margin:0 !important}
  /* Details & Settings header inside the sheet reads as a sub-section, not a big card */
  .svt-more-sheet #songViewMore{margin-top:4px}

  /* ── V227: Sound pane Copy button removed (dock handles copy) ── */
  #svSoundCopyBtn{display:none !important}

  /* ── V227: Lyrics pane header — label + Edit button ── */
  .svt-lyrics-header{
    margin:0 var(--sp-page) 8px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .svt-lyrics-header-label{
    font-family:'DM Mono',monospace;font-size:10px;
    letter-spacing:0.18em;text-transform:uppercase;
    color:var(--t4);
  }

  /* ── V227/V229: DNA chips live at the bottom of the hero card, inside it.
     V229: default-collapsed. Shown only when .sva-card carries .dna-expanded,
     which the chip-styled toggle below flips. ── */
  #s-song-view .sva-card #songViewDnaBar{
    display:none !important;
    padding:0 !important;
    margin:14px 0 0 !important;
    flex-wrap:wrap;gap:6px;
  }
  #s-song-view .sva-card.dna-expanded #songViewDnaBar{
    display:flex !important;
  }

  /* ── V229: DNA collapse toggle — chip-matched pill, "DNA ▾" → "DNA ▴" ── */
  .svt-dna-toggle{display:none}
  .svt-dna-toggle.has-chips{
    display:inline-flex;align-items:center;gap:8px;
    margin:22px 0 0;
    padding:7px 14px;
    border-radius:20px;
    background:var(--s2);
    border:1px solid var(--b2);
    color:var(--t2);
    font-family:'DM Mono',monospace;
    font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform var(--press-dur) var(--easing-standard),
               background-color var(--state-dur) var(--easing-standard),
               border-color var(--state-dur) var(--easing-standard);
  }
  .svt-dna-toggle.has-chips:active{transform:scale(0.97);background:rgba(200,160,80,0.04);border-color:rgba(200,160,80,0.28)}
  .svt-dna-chev{
    width:11px;height:11px;opacity:0.7;
    transition:transform 0.2s cubic-bezier(0.4,0,0.2,1);
  }
  .sva-card.dna-expanded .svt-dna-chev{transform:rotate(180deg)}

  /* ── V228: Style Prompt content — out of monospace/terminal vibe.
     Scoped to the reparented Sound pane so desktop layout is untouched. ── */
  #svtSoundPane #styleContent{
    font-family:'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-size:14.5px !important;
    line-height:1.72 !important;
    font-weight:300 !important;
    color:var(--t2) !important;
    letter-spacing:0 !important;
    padding:22px 22px !important;
    background:rgba(200,160,80,0.02) !important;
    border:1px solid rgba(200,160,80,0.10) !important;
    border-radius:14px !important;
  }
}
/* End V226 mobile tabs */
/* ═══════════════════════════════════════════════════════════════ */
/* V230/V231: Trademark superscript for the "stanzai" wordmark.
   V231 fix: size ~0.3em, inherit the wordmark's own typeface so serif/italic
   parents render their native ™ glyph (no chunky DM Mono override), and
   force non-italic so it reads as a symbol, not a slanted letter.
   Swap ™ → ® in the HTML when the application is approved. */
.brand-tm{
  font-size:0.3em;
  vertical-align:super;
  margin-left:0.06em;
  letter-spacing:0;
  line-height:0;
  opacity:0.55;
  font-style:normal;
  font-weight:400;
}
/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */
/* V179: .dna-chip token-ized. DNA bar pill with .sel gold default
   and .dna-chip-ai.sel slate variant (AI-suggested, intentionally distinct). */
.dna-chip{
  padding:7px 14px;
  border-radius:20px;
  background:var(--s2);
  border:1px solid var(--b2);
  font-size:13px;
  color:var(--t2);
  cursor:pointer;
  user-select:none;
  display:inline-block;
  -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);
}
.dna-chip:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:var(--t1)}
.dna-chip:active{transform:scale(var(--press-scale))}
.dna-chip:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
.dna-chip.sel{background:rgba(var(--gold-rgb), 0.12);border-color:rgba(var(--gold-rgb), 0.40);color:var(--gold)}
.dna-chip.sel:hover{background:rgba(var(--gold-rgb), 0.16);border-color:rgba(var(--gold-rgb), 0.55)}
.dna-chip-ai.sel{background:rgba(94,136,170,0.10);border-color:rgba(94,136,170,0.30);color:var(--slate);font-style:normal}
.dna-chip-ai.sel:hover{background:rgba(94,136,170,0.14);border-color:rgba(94,136,170,0.42)}

.lib-topnav{background:rgba(10,10,9,0.96)}
.lib-song-card.selected{border-color:rgba(200,160,80,0.5);background:rgba(200,160,80,0.06)}
.lib-select-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--b3);background:var(--s1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;font-size:13px}
.lib-song-card.selected .lib-select-check{background:var(--gold);border-color:var(--gold);color:#000}

.project-row{margin-bottom:6px}
.project-header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:var(--radius-md);background:var(--s2);border:1px solid var(--b2);cursor:pointer;transition:all 0.15s;user-select:none}
.project-header:active{transform:scale(0.99)}
.project-header.expanded{border-radius:var(--radius-md) 13px 0 0;border-bottom-color:var(--b1)}
.project-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(200,160,80,0.1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.project-chev{color:var(--t4);font-size:13px;transition:transform 0.15s;flex-shrink:0}
.project-chev.open{transform:rotate(90deg)}
.proj-action-btn{font-size:13px;color:var(--t4);cursor:pointer;padding:4px 7px;border-radius:8px;background:var(--s1);border:1px solid var(--b1);transition:color 0.15s;user-select:none;-webkit-tap-highlight-color:transparent}
.proj-action-btn:active{color:var(--t2)}
.project-songs{background:var(--s1);border:1px solid var(--b2);border-top:none;border-radius:0 0 13px 13px;overflow:hidden;padding:4px 0}
.new-project-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);background:var(--s2);border:1px solid var(--b1);margin-top:4px;margin-bottom:4px;cursor:pointer;transition:all 0.15s;user-select:none}
.new-project-card:active{border-color:rgba(200,160,80,0.3);background:rgba(200,160,80,0.04)}

/* Board view CSS removed — library is unified list only */
/* V179: .stage-btn token-ized. Song stage button — DM Mono uppercase pill.
   Variants: .active-stage (gold = current), .active-complete (sage = done),
   .active-shelved (muted = paused). */
.stage-btn{
  padding:8px 14px;
  border-radius:10px;
  background:var(--s1);
  border:1px solid var(--b2);
  font-family:'DM Mono',monospace;
  font-size:var(--fs-label);
  letter-spacing:0.1em;
  text-transform:uppercase;
  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);
}
.stage-btn:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:var(--t1)}
.stage-btn:active{transform:scale(var(--press-scale))}
.stage-btn:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
.stage-btn.active-stage{border-color:rgba(var(--gold-rgb), 0.50);color:var(--gold);background:rgba(var(--gold-rgb), 0.08)}
.stage-btn.active-stage:hover{border-color:rgba(var(--gold-rgb), 0.65);background:rgba(var(--gold-rgb), 0.12)}
.stage-btn.active-complete{border-color:rgba(110,158,120,0.50);color:var(--sage);background:rgba(110,158,120,0.10)}
.stage-btn.active-complete:hover{border-color:rgba(110,158,120,0.65);background:rgba(110,158,120,0.14)}
.stage-btn.active-shelved{border-color:var(--b3);color:var(--t4);background:var(--s1)}
.stage-btn.active-shelved:hover{border-color:rgba(255,255,255,0.10);color:var(--t3)}
.rating-btn-active-love{border-color:rgba(196,104,120,0.5)!important;background:rgba(196,104,120,0.1)!important;color:var(--rose)!important}
.rating-btn-active-flag{border-color:rgba(200,160,80,0.4)!important;background:rgba(200,160,80,0.08)!important;color:var(--gold)!important}

.dna-from-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-md);background:var(--s2);border:1px solid var(--b2);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);user-select:none;margin-bottom:8px}
.dna-from-card:hover{background:rgba(255,255,255,0.04);border-color:rgba(var(--gold-rgb),0.30)}
.dna-from-card:active{transform:scale(var(--press-scale))}
.dna-from-card:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--focus-soft),var(--focus-halo)}
.dna-from-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.dna-from-panel.open{display:block}
.dna-photo-preview{width:100%;border-radius:10px;max-height:200px;object-fit:cover;display:none;margin-bottom:12px}
.dna-photo-preview.loaded{display:block}

/* V178: .lib-filter token-ized. Library filter chips, gold .active state. */
.lib-filter{
  font-family:'DM Mono',monospace;
  font-size:var(--fs-label);
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:10px 14px;
  min-height:44px;
  border-radius:18px;
  background:var(--s2);
  border:1px solid var(--b2);
  color:var(--t3);
  cursor:pointer;
  white-space:nowrap;
  user-select:none;
  flex-shrink:0;
  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);
}
.lib-filter:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);color:var(--t1)}
.lib-filter:active{transform:scale(var(--press-scale))}
.lib-filter:focus-visible{outline:none;box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo)}
.lib-filter.active{background:rgba(var(--gold-rgb), 0.10);border-color:rgba(var(--gold-rgb), 0.30);color:var(--gold)}
.lib-filter.active:hover{background:rgba(var(--gold-rgb), 0.14);border-color:rgba(var(--gold-rgb), 0.45)}
.lib-stat-card{background:var(--s2);border:1px solid var(--b1);border-top:2px solid color-mix(in srgb, var(--accent) 25%, transparent);border-radius:var(--radius-md);padding:14px 16px;cursor:pointer;transition:all 0.2s;user-select:none;position:relative;overflow:hidden;touch-action:manipulation}
.lib-stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.3;transition:opacity 0.2s}
.lib-stat-card:active{transform:scale(0.97)}
.lib-stat-card.active{border-color:color-mix(in srgb, var(--accent) 40%, transparent);border-top-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, var(--s2))}
.lib-stat-card.active::after{opacity:0.7}
.lib-stat-card.active .lib-stat-num{color:var(--accent)}
.lib-stat-card.active .lib-stat-label{color:var(--t2)}
.lib-stat-num{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:var(--t3);line-height:1;margin-bottom:2px;transition:color 0.2s}
.lib-stat-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--t4);transition:color 0.2s}
.lib-song-card{background:transparent;border:none;border-bottom:1px solid var(--b1);padding:14px 0 14px 12px;cursor:pointer;transition:background 0.15s;margin-bottom:0;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;position:relative}
.lib-song-card:active{background:var(--s2)}

/* V255 Phase 3 — library row play button. Appears on songs with a
   Suno link; sits to the left of the ⋯ menu. Gold circle mirrors the
   hero-card play button but smaller (30px). */
/* V260: Library row play + thumb sized up — 30/28 read as undersized on mobile.
   Bumped to match Apple Music / Spotify standards (~48px thumb, 36px play). */
.lib-row-play{
  width:36px;height:36px;border-radius:50%;
  background:rgba(200,160,80,0.08);
  border:1px solid rgba(200,160,80,0.42);
  color:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;flex-shrink:0;
  transition:background 0.2s,border-color 0.2s,transform 0.05s ease;
  -webkit-tap-highlight-color:transparent;
}
.lib-row-play:active{transform:scale(0.9)}
.lib-row-play:hover{background:rgba(200,160,80,0.14);border-color:rgba(200,160,80,0.7)}
.lib-row-play svg{width:13px;height:13px;fill:var(--gold);stroke:none}
.lib-row-play.playing{
  background:rgba(200,160,80,0.2);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,160,80,0.08);
  animation:libRowPlayPulse 2.4s ease-in-out infinite;
}
@keyframes libRowPlayPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(200,160,80,0.08)}
  50%{box-shadow:0 0 0 5px rgba(200,160,80,0.16)}
}
@media (prefers-reduced-motion: reduce){
  .lib-row-play.playing{animation:none}
}
/* Active row — subtle gold tint on the whole row when its song is loaded in controller */
.lib-song-card.lib-card-playing{
  background:rgba(200,160,80,0.04);
}

/* V255 Phase 3: library row cover art thumbnail. Replaces the accent bar
   on rows with a Suno link. Same absolute-left anchor as the bar so row
   width stays constant. When present, bumps the meta column's left
   padding so content doesn't overlap the thumbnail.
   V260: 28→48px. Small-tile artwork was reading as a decorative chip
   rather than an album cover. 48px matches Apple Music / Spotify
   standards and makes the thumbnail feel like the row's primary object. */
.lib-row-thumb{
  position:absolute;
  left:8px;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:8px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(200,160,80,0.2);
  object-fit:cover;
  flex-shrink:0;
  display:block;
}
/* When a row has a thumbnail, push meta right so title/subtitle don't
   overlap the thumb. V260: thumb 48 at left:8 → right edge 56 → padding
   56 gives visual breathing room for content. */
.lib-song-card:has(.lib-row-thumb) .lib-song-meta{
  padding-left:56px;
}
/* :has() fallback for older Safari — use .lib-card-has-thumb class if needed */
.lib-song-card.lib-card-has-thumb .lib-song-meta{
  padding-left:56px;
}

.lib-row-swipe-wrap{opacity:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.lib-row-animate{animation:fadeSlideIn 0.25s ease-out both}
.lib-song-meta{flex:1;min-width:0}
.lib-song-name{font-size:14px;font-weight:500;color:var(--t1);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-song-sub{font-size:13px;color:var(--t3);line-height:1.4}
.lyrics-editor-wrap{background:var(--s1);border:1px solid rgba(200,160,80,0.2);border-radius:12px;padding:14px;margin-bottom:10px;animation:proResponseIn 0.25s ease}
.lyrics-editor-textarea{width:100%;background:var(--bg);border:1px solid var(--b2);border-radius:10px;padding:12px 14px;color:var(--t1);font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:300;line-height:1.9;outline:none;resize:none;-webkit-appearance:none;min-height:300px;white-space:pre-wrap}
.lyrics-editor-textarea:focus{border-color:rgba(200,160,80,0.4)}
.edited-badge{font-family:'DM Mono',monospace;font-size:var(--fs-label);letter-spacing:0.12em;text-transform:uppercase;color:var(--sage);padding:3px 8px;background:rgba(110,158,120,0.08);border:1px solid rgba(110,158,120,0.2);border-radius:8px;display:inline-block;margin-bottom:8px}
.lyrics-view,.lyrics-block{background:var(--s1);border:1px solid var(--b2);border-radius:var(--radius-md);padding:16px;margin-top:10px;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:300;line-height:1.9;color:var(--t1);white-space:pre-wrap}
/* Song Card — distinct treatment for generated songs */
.song-card{
  background:linear-gradient(180deg,rgba(200,160,80,0.04),rgba(200,160,80,0.01));
  border:1px solid rgba(200,160,80,0.18);border-radius:var(--radius-lg);
  padding:20px;margin-top:12px;position:relative;
}
.song-card.revision-historical{opacity:0.35;transition:opacity 0.3s}
.song-card.revision-historical:hover{opacity:0.6}
.song-card.revision-historical .restore-version-btn{display:block}
.song-card .lyrics-block{
  background:transparent;border:none;padding:0;margin-top:8px;
  font-size:14px;line-height:2;
}
/* Quick revision chips */
.revision-chip:active{transform:scale(0.96)}
.revision-chip:hover{border-color:rgba(200,160,80,0.3);color:var(--gold)}
.lyrics-lbl{font-family:'DM Mono',monospace;font-size:var(--fs-label);letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);display:block;margin:12px 0 4px}
.lyrics-lbl:first-child{margin-top:0}
.style-prompt-box{background:var(--s1);border:1px solid rgba(168,142,104,0.2);border-radius:10px;padding:13px;margin-top:8px}
.style-prompt-txt{font-family:'DM Mono',monospace;font-size:13px;color:var(--t2);line-height:1.7}
.typing-ind{display:flex;align-items:center;gap:4px;padding:4px 0}
.typing-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:0.3;animation:typingA 1.1s infinite}
.typing-dot:nth-child(2){animation-delay:0.18s}
.typing-dot:nth-child(3){animation-delay:0.36s}
@keyframes typingA{0%,100%{opacity:0.2;transform:scale(0.8)}50%{opacity:0.9;transform:scale(1.1)}}
.phase-complete-pro{margin:16px 0 0;padding:15px;border-radius:var(--radius-md);background:linear-gradient(135deg,rgba(200,160,80,0.08),rgba(200,160,80,0.03));border:1px solid rgba(200,160,80,0.22);text-align:center;display:none;animation:proResponseIn 0.3s ease}
.phase-complete-pro.show{display:block}
.phase-complete-pro-btn{display:inline-block;padding:11px 22px;border-radius:var(--radius-md);background:var(--gold);border:none;color:#000;font-family:'DM Mono',monospace;font-size:var(--fs-label);letter-spacing:0.12em;font-weight:500;cursor:pointer;text-transform:uppercase;margin-top:10px}
/* Context bar in session */
.pro-context-bar{display:flex;gap:6px;padding:var(--sp-md) var(--sp-page);overflow-x:auto;scrollbar-width:none;background:var(--s1);border-bottom:1px solid var(--b1)}
.pro-context-bar::-webkit-scrollbar{display:none}
.ctx-pill{display:flex;align-items:center;gap:var(--sp-xs);padding:4px 10px;border-radius:18px;background:var(--s2);border:1px solid var(--b2);white-space:nowrap;flex-shrink:0}
.ctx-lbl{font-family:'DM Mono',monospace;font-size:var(--fs-label);letter-spacing:0.14em;text-transform:uppercase;color:var(--t4)}
.ctx-val{font-size:var(--fs-meta);color:var(--t3)}
.ctx-pill.has-val .ctx-val{color:var(--t2)}
.ctx-pill.approved .ctx-val{color:var(--gold)}
/* Phase strip */
.phase-strip::-webkit-scrollbar{display:none}
.phase-pip.done{background:rgba(200,160,80,0.5)}
.phase-pip.active{background:var(--gold);width:18px;border-radius:4px}
/* History drawer */
.hist-drawer{position:fixed;inset:0;max-width:430px;margin:0 auto;z-index:600;pointer-events:none}
.hist-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.65);opacity:0;transition:opacity 0.3s;pointer-events:none}
.hist-panel{position:absolute;bottom:0;left:0;right:0;background:var(--s1);border-radius:20px 20px 0 0;border-top:1px solid var(--b2);max-height:72vh;overflow-y:auto;transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);padding-bottom:env(safe-area-inset-bottom,0px)}
.hist-drawer.open .hist-overlay{opacity:1;pointer-events:all}
.hist-drawer.open .hist-panel{transform:translateY(0);pointer-events:all}
.hist-handle{width:34px;height:4px;border-radius:2px;background:var(--b3);margin:12px auto 14px}
.hist-msg:last-child{border-bottom:none}
.hist-role.user{color:var(--slate)}
.hist-role.ai{color:var(--t2)}
/* Recent sessions on home */
.sess-recent:active{background:var(--s3)}

html{height:100%;background:var(--bg);overscroll-behavior-y:none}
body{height:100%;height:100dvh;min-height:-webkit-fill-available;overflow:hidden;background:var(--bg);overscroll-behavior-y:none}
@media (display-mode: standalone) {
  :root { --tab-h: 56px }
}
/* V247 — Light mode CSS lives in a single consolidated block near the end of
   this stylesheet (see "V247 LIGHT MODE — CONSOLIDATED"). The earlier scattered
   body.light-mode rules here, in the v9 block, and in the desktop @media were
   superseded by the V247 patch and removed. */

body{font-family:'Outfit',sans-serif;font-weight:300;color:var(--t1)}
.phone{width:100%;height:100%;background:var(--bg);position:relative;overflow:hidden}
.screens{position:fixed;inset:0;overflow:hidden}
/* 2026-05-10: dropped legacy -webkit-overflow-scrolling:touch — that property
   enables a separate iOS scroll implementation with documented click-suppression
   bugs on long lists (Library at 100+ songs spam-tap symptom). Modern iOS
   Safari uses native momentum scroll without the flag. overscroll-behavior:contain
   prevents scroll-chain glitches on the same surface. */
.screen{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;padding-top:max(env(safe-area-inset-top), 12px);padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 16px);background:var(--bg);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.34s ease}
.screen::-webkit-scrollbar{display:none}
.screen.off{transform:translateX(100%);opacity:0;pointer-events:none}
.screen.back{transform:translateX(-28%);opacity:0;pointer-events:none}
.tabbar{position:fixed;bottom:0;left:0;right:0;height:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));background:var(--bg);border-top:none;display:flex;align-items:flex-start;padding-top:22px;padding-bottom:env(safe-area-inset-bottom, 0px);z-index:400;touch-action:manipulation}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:0 4px;transition:opacity 0.15s;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tab:active{opacity:0.6}
.tabicon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;transition:all 0.15s;pointer-events:none}
.tab.on .tabicon{background:rgba(200,160,80,0.15)}
.tablabel{font-size:11px;color:var(--t3);transition:color 0.15s;pointer-events:none}
.tab.on .tablabel{color:var(--gold)}