/* Stanzai dev styles 13/14 — wide-desktop tweaks, mobile fallbacks, Nocturne atmospheric home + doors + continue bar, onboarding, BETA badge, voice/feedback popovers, mini bar — extracted VERBATIM from index.html <style> block lines 8861-9882 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* ══════════════════════════════════════════════════════════
   STANDARD DESKTOP: 1280-1439px — narrower panel defaults
   V246: tokenized — hardcoded 240/320 moved to CSS variables so
   resize persistence works at both desktop breakpoints. The
   overrides below only run when JS hasn't set an inline value.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1439px) {
  :root { --dt-left-w: 240px; --dt-right-w: 320px; }
  .tabbar { width: var(--dt-left-w); }
  body.session-active #s-session { left: var(--dt-left-w); right: var(--dt-right-w); }
  body.session-active #v9SongBrain { width: var(--dt-right-w); }
  body.session-active .v9-input-area { left: var(--dt-left-w); right: var(--dt-right-w); }

  /* Chat content — constrain for readability */
  body.session-active .v9-thread { max-width: var(--dt-chat-max); margin: 0 auto; }
  body.session-active .v9-nav { max-width: var(--dt-chat-max); margin: 0 auto; }
}

/* ══════════════════════════════════════════════════════════
   WIDE DESKTOP: 1440px+ — full three-panel workspace
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  /* Full-width three-panel layout */
  .tabbar { width: var(--dt-left-w); }
  body.session-active #s-session { left: var(--dt-left-w); right: var(--dt-right-w); }
  body.session-active #v9SongBrain { width: var(--dt-right-w); }
  body.session-active .v9-input-area { left: var(--dt-left-w); right: var(--dt-right-w); }

  /* Chat content — center in the well with max-width for readability */
  body.session-active .v9-thread { max-width: var(--dt-chat-max); margin: 0 auto; }
  body.session-active .v9-nav { max-width: var(--dt-chat-max); margin: 0 auto; }

  /* Screens offset for wider rail */
  .screen { left: var(--dt-left-w); }
  .v9-input-area { left: var(--dt-left-w); }
  .hist-drawer { left: var(--dt-left-w); }
  #selectActionBar { left: var(--dt-left-w); }
  #newSongSheet { left: var(--dt-left-w) !important; }
  #genSheetOverlay { left: var(--dt-left-w) !important; }
  #sfConfirmModal { left: var(--dt-left-w) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile home menu — candlelit room photo background.
   Phone-only (<=640px). Tablet and desktop untouched.
   Gradient mask sits between photo and UI for legibility.
   ═══════════════════════════════════════════════════════════════ */
#s-home .home-bg { display: none; }
@media (max-width: 1023px) {
  #s-home .home-bg-desktop, #s-home .nh-photo-mask { display: none; }
  /* The desktop SD pill duplicate stays hidden on mobile/tablet — the mobile pill
     inside .nh-doors handles those breakpoints. */
  #s-home .nh-sd-pill--desktop { display: none; }
}
@media (max-width: 640px) {
  #s-home .home-bg {
    display: block;
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
  }
  #s-home .nocturne-home::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg,
      rgba(5,5,5,0.85) 0%,
      rgba(5,5,5,0.45) 30%,
      rgba(5,5,5,0.45) 70%,
      rgba(5,5,5,0.85) 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   V146 — NOCTURNE HOME
   Pixel-faithful port of stanzai-nocturne-subtext-v10 mockup.
   Scoped under .nocturne-home so nothing leaks into other screens.
   No deviation from spec — values copied verbatim from v10.
   ═══════════════════════════════════════════════════════════════ */
/* s-home is full-bleed for Nocturne atmosphere — kill .screen padding */
#s-home{padding:0 !important}
.nocturne-home{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%,rgba(200,160,80,0.025),transparent 70%),
    var(--dt-void);
  display:flex;
  flex-direction:column;
}

/* Drifting gold particles */
.nocturne-home .nh-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.nocturne-home .nh-particles span{
  position:absolute;
  bottom:0;
  width:1px;height:1px;
  background:var(--gold);
  border-radius:50%;
  opacity:0;
  box-shadow:
    0 0 2px rgba(200,160,80,0.5),
    0 0 5px rgba(200,160,80,0.18);
  animation:nhDrift 22s linear infinite;
}
.nocturne-home .nh-particles span:nth-child(1){left:14%;animation-delay:0s;animation-duration:24s}
.nocturne-home .nh-particles span:nth-child(2){left:23%;animation-delay:5s;animation-duration:20s;width:2px;height:2px}
.nocturne-home .nh-particles span:nth-child(3){left:38%;animation-delay:9s;animation-duration:26s}
.nocturne-home .nh-particles span:nth-child(4){left:52%;animation-delay:3s;animation-duration:22s}
.nocturne-home .nh-particles span:nth-child(5){left:64%;animation-delay:13s;animation-duration:28s;width:2px;height:2px}
.nocturne-home .nh-particles span:nth-child(6){left:78%;animation-delay:7s;animation-duration:21s}
.nocturne-home .nh-particles span:nth-child(7){left:88%;animation-delay:16s;animation-duration:25s}
.nocturne-home .nh-particles span:nth-child(8){left:31%;animation-delay:11s;animation-duration:23s}
.nocturne-home .nh-particles span:nth-child(9){left:71%;animation-delay:4s;animation-duration:27s}
@keyframes nhDrift{
  0%{transform:translateY(20px) translateX(0);opacity:0}
  10%{opacity:0.7}
  50%{opacity:0.55}
  90%{opacity:0.4}
  100%{transform:translateY(-820px) translateX(12px);opacity:0}
}

/* Vertical gold thread */
.nocturne-home .nh-thread{
  position:absolute;
  left:50%;top:46%;
  width:1px;
  height:24%;
  background:linear-gradient(180deg,
    transparent,
    rgba(200,160,80,0.4) 30%,
    rgba(200,160,80,0.4) 70%,
    transparent);
  transform:translate(-50%,-50%);
  z-index:1;
}

/* Top block: wordmark + eyebrow + invitation line */
.nocturne-home .nh-top{
  padding:90px 28px 0;
  text-align:center;
  position:relative;
  z-index:2;
}
.nocturne-home .nh-wordmark{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:300;
  font-size:42px;
  color:var(--gold);
  opacity:0.92;
  line-height:1;
}
.nocturne-home .nh-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0.55;
  margin-top:14px;
}
.nocturne-home .nh-line{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:300;
  font-size:18px;
  color:var(--t2);
  margin-top:28px;
  line-height:1.4;
}

/* V198: Mobile handling for restructured DOM.
   - .nh-layout is a passive wrapper on mobile (no layout effect)
   - .nh-top-editorial (Vol + date + inline history) is desktop-only
   - .nh-history-mobile is the floating V176 history button (visible <1024px)
   - .nh-history-inline is the editorial-row history (hidden <1024px)
   - .nh-masthead replaces the old mobile .nh-top block visually
   - .nh-rule / .nh-tagline are desktop-only (hidden <1024px)
   - .nh-aurora / .nh-embers are desktop-only (hidden <1024px)
   - .nh-bottom is a passive wrapper on mobile */
.nocturne-home .nh-layout{
  display:contents; /* on mobile, .nh-layout is invisible to layout — children act as direct .nocturne-home children */
}
.nocturne-home .nh-top-editorial{display:none}
.nocturne-home .nh-history-inline{display:none}
.nocturne-home .nh-aurora,
.nocturne-home .nh-embers{display:none}
.nocturne-home .nh-rule,
.nocturne-home .nh-tagline{display:none}
/* V199: Route cards are desktop-only — mobile uses .nh-doors */
.nocturne-home .nh-routes{display:none}
.nocturne-home .nh-masthead{
  padding:90px 28px 0;
  text-align:center;
  position:relative;
  z-index:2;
}
.nocturne-home .nh-bottom{
  /* passive wrapper on mobile; .nh-continue inside retains its own positioning */
}

/* V176: subtle history button — top-right corner of atmospheric home.
   Floating ghost circle, gold-ish clock icon at low opacity. Earns attention
   only on hover/focus; doesn't compete with wordmark+eyebrow stack. */
.nocturne-home .nh-history{
  position:absolute;
  top:max(env(safe-area-inset-top, 0px), 16px);
  right:16px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(var(--gold-rgb), 0.10);
  color:rgba(var(--gold-rgb), 0.55);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  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);
  -webkit-tap-highlight-color:transparent;
}
.nocturne-home .nh-history:hover{
  background:rgba(var(--gold-rgb), 0.06);
  border-color:rgba(var(--gold-rgb), 0.25);
  color:rgba(var(--gold-rgb), 0.90);
}
.nocturne-home .nh-history:active{
  transform:scale(var(--press-scale));
}
.nocturne-home .nh-history:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring), var(--focus-soft), var(--focus-halo);
}
.nocturne-home .nh-history svg{
  width:16px;
  height:16px;
}

/* Doors — card-shaped, title + plain subtext */
.nocturne-home .nh-doors{
  position:absolute;
  bottom:180px;left:0;right:0;
  padding:0 68px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:3;
}
/* Mobile home cards — begin-btn aesthetic (italic Cormorant accent + plain
   Outfit phrase + arrow on a warm gold-tinted glass card). Primary = gold,
   secondary = cream. The ::before noise overlay matches .begin-btn — that's
   what gives the surface its "polished glass catching light" feel. */
.nocturne-home .nh-door{
  position:relative;
  display:block;
  width:100%;
  border:0;
  border-radius:16px;
  padding:21px 23px 19px;  /* +1px each side to compensate for removed border */
  cursor:pointer;
  text-align:center;
  overflow:hidden;
  /* Transparent interior — let the room photo show through. The card's
     presence comes from the gradient border ::before + soft halo. */
  background:transparent;
  box-shadow:
    inset 0 1px 0 rgba(var(--gold-rgb),0.08),
    0 1px 2px rgba(0,0,0,0.5),
    0 6px 20px -10px rgba(var(--gold-rgb),0.22);
  transition:
    transform 220ms cubic-bezier(0.2,0.8,0.2,1),
    box-shadow 220ms cubic-bezier(0.2,0.8,0.2,1);
  -webkit-tap-highlight-color:transparent;
}
/* Gradient gold border — same multi-stop recipe as .btn-commit on the
   "Begin the concept phase" button. 250%-wide gradient at the border ring
   slides left→right on hover for the shimmer. Mask-composite keeps the
   gradient on the 1px border only (transparent interior preserved). */
.nocturne-home .nh-door::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(to right,
    #77530a, #C8A050, #77530a,
    #77530a, #C8A050, #77530a);
  background-size:250% 100%;
  background-position:left center;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:background-position 1s ease;
}
.nocturne-home .nh-door:hover::before{ background-position:right center; }
.nocturne-home .nh-door-title{
  display:inline-flex; align-items:baseline; justify-content:center; gap:8px;
  margin-bottom:6px;
  line-height:1.1;
}
.nocturne-home .nh-door-accent{
  font-family:'Cormorant Garamond',serif;
  font-style:italic; font-weight:500;
  font-size:21px; letter-spacing:0.01em;
  color:var(--gold);
}
.nocturne-home .nh-door-phrase{
  font-family:'Outfit',sans-serif;
  font-weight:500;
  font-size:17px; letter-spacing:0.005em;
  color:var(--t1);
}
.nocturne-home .nh-door-arrow{
  display:inline-flex; align-items:center;
  margin-left:2px;
  color:var(--gold);
  transition:transform 220ms cubic-bezier(0.2,0.8,0.2,1);
}
.nocturne-home .nh-door-arrow svg{width:14px; height:14px;}
.nocturne-home .nh-door-sub{
  display:block;
  font-family:'Outfit',sans-serif;
  font-weight:300;
  font-size:12.5px;
  color:rgba(224,220,208,0.55);
  line-height:1.4;
}
.nocturne-home .nh-door:hover{
  box-shadow:
    inset 0 1px 0 rgba(var(--gold-rgb),0.14),
    0 1px 2px rgba(0,0,0,0.5),
    0 10px 28px -10px rgba(var(--gold-rgb),0.38);
}
.nocturne-home .nh-door:hover .nh-door-arrow{transform:translateX(3px)}
.nocturne-home .nh-door:active{transform:scale(0.98);transition:50ms}

/* Secondary (Freeflow) — cream variant: cream border, cream accent + arrow,
   neutral dark background (drops the gold radial). */
.nocturne-home .nh-door.secondary{
  background:transparent;
  box-shadow:
    inset 0 1px 0 rgba(241,238,231,0.08),
    0 1px 2px rgba(0,0,0,0.5),
    0 6px 20px -10px rgba(241,238,231,0.14);
}
/* Cream gradient stops for the Freeflow card border (mirrors the gold
   stops on primary; values calibrated so the cream shimmer reads
   secondary to the gold lead, not competing). */
.nocturne-home .nh-door.secondary::before{
  background:linear-gradient(to right,
    rgba(241,238,231,0.18), rgba(241,238,231,0.55), rgba(241,238,231,0.18),
    rgba(241,238,231,0.18), rgba(241,238,231,0.55), rgba(241,238,231,0.18));
  background-size:250% 100%;
}
.nocturne-home .nh-door.secondary .nh-door-accent{ color:#F1EEE7; }
.nocturne-home .nh-door.secondary .nh-door-arrow{ color:#F1EEE7; }
.nocturne-home .nh-door.secondary:hover{
  box-shadow:
    inset 0 1px 0 rgba(241,238,231,0.14),
    0 1px 2px rgba(0,0,0,0.5),
    0 10px 28px -10px rgba(241,238,231,0.22);
}

/* Continue bar — V306: inside nh-doors flex, sits just above first door */
.nocturne-home .nh-continue{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0;
  margin:0 0 8px;
  font-family:'Outfit',sans-serif;
  font-weight:300;
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
  color:var(--t3);
  opacity:0.85;
  z-index:3;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nocturne-home .nh-continue:empty{display:none}
.nocturne-home .nh-continue .nh-ember{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 6px rgba(200,160,80,0.6);
  animation:nhEmberPulse 3s ease-in-out infinite;
  flex-shrink:0;
}
.nocturne-home .nh-continue .nh-title{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:13px;
  letter-spacing:0;
  color:var(--t2);
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:55%;
}
.nocturne-home .nh-continue .nh-sep{color:var(--t4);opacity:0.6}
.nocturne-home .nh-continue .nh-chev{
  color:var(--gold);
  opacity:0.7;
  font-family:'Outfit',sans-serif;
  font-size:14px;
  font-weight:300;
  margin-left:2px;
  line-height:1;
}
.nocturne-home .nh-continue:active{transform:scale(0.98);transition:50ms}
@keyframes nhEmberPulse{
  0%,100%{opacity:0.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.15)}
}

/* V306: Sound Designer pill — tertiary utility route on home */
.nh-sd-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:12px 20px;
  margin:4px 0 0;
  border-radius:999px;
  background:rgba(255,255,255,0.015);
  border:1px solid rgba(200,160,80,0.08);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard);
}
.nh-sd-pill:active{transform:scale(var(--press-scale))}
.nh-sd-pill:hover{border-color:rgba(200,160,80,0.15)}
.nh-sd-ico{
  width:16px;height:16px;
  color:rgba(200,160,80,0.55);
  flex-shrink:0;
}
.nh-sd-ico svg{width:100%;height:100%;display:block}
.nh-sd-lbl{
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}
.nh-sd-ar{
  font-family:'DM Mono',monospace;
  font-size:12px;
  color:rgba(200,160,80,0.55);
  margin-left:2px;
}

/* ═══════════════════════════════════════════════════════════════
   V160 ONBOARDING OVERLAY — Nocturne atmosphere, v13.2 spec
   Sits above nocturne-home. Dismissed on first visit.
   ═══════════════════════════════════════════════════════════════ */
.ob-overlay{
  position:absolute;
  inset:0;
  z-index:50;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%,rgba(200,160,80,0.025),transparent 70%),
    var(--dt-void);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:opacity 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.ob-overlay[hidden]{display:none}
/* Reuse nhDrift keyframes from Nocturne home */
.ob-overlay .nh-particles{
  position:absolute;inset:0;
  pointer-events:none;overflow:hidden;
}
.ob-overlay .nh-particles span{
  position:absolute;bottom:0;
  width:1px;height:1px;
  background:var(--gold);
  border-radius:50%;opacity:0;
  box-shadow:0 0 2px rgba(200,160,80,0.5),0 0 5px rgba(200,160,80,0.18);
  animation:nhDrift 22s linear infinite;
}
.ob-overlay .nh-particles span:nth-child(1){left:14%;animation-delay:0s;animation-duration:24s}
.ob-overlay .nh-particles span:nth-child(2){left:23%;animation-delay:5s;animation-duration:20s;width:2px;height:2px}
.ob-overlay .nh-particles span:nth-child(3){left:38%;animation-delay:9s;animation-duration:26s}
.ob-overlay .nh-particles span:nth-child(4){left:52%;animation-delay:3s;animation-duration:22s}
.ob-overlay .nh-particles span:nth-child(5){left:64%;animation-delay:13s;animation-duration:28s;width:2px;height:2px}
.ob-overlay .nh-particles span:nth-child(6){left:78%;animation-delay:7s;animation-duration:21s}
.ob-overlay .nh-particles span:nth-child(7){left:88%;animation-delay:16s;animation-duration:25s}
.ob-overlay .nh-particles span:nth-child(8){left:31%;animation-delay:11s;animation-duration:23s}
.ob-overlay .nh-particles span:nth-child(9){left:71%;animation-delay:4s;animation-duration:27s}

.ob-top{
  position:absolute;
  top:clamp(90px,15vh,130px);left:0;right:0;
  text-align:center;z-index:2;
}
.ob-wordmark{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:300;
  font-size:46px;color:var(--gold);opacity:0.92;
}
.ob-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:9px;letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);opacity:0.55;
  margin-top:14px;
}
.ob-explain{
  position:absolute;
  top:clamp(250px,38vh,310px);left:0;right:0;
  padding:0 36px;text-align:center;z-index:2;
}
.ob-headline{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;font-size:30px;
  color:var(--t1);line-height:1.15;
  letter-spacing:-0.01em;margin-bottom:20px;
}
.ob-headline em{
  color:var(--gold);font-style:italic;opacity:0.95;
}
.ob-body{
  font-family:'Outfit',sans-serif;
  font-weight:300;font-size:14px;
  color:var(--t3);line-height:1.65;
  max-width:300px;margin:0 auto;
}
.ob-learnmore{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:20px;background:none;border:none;cursor:pointer;
  font-family:'DM Mono',monospace;font-size:9px;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--t3);padding:6px 10px;
  transition:color 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.ob-learnmore svg{
  width:11px;height:11px;stroke-width:1.8;
  color:var(--gold);opacity:0.7;
  transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.ob-learnmore:hover{color:var(--t1)}
.ob-learnmore:hover svg{transform:translateX(3px);opacity:1}

.ob-suno{
  position:absolute;
  bottom:clamp(180px,28vh,220px);left:0;right:0;
  text-align:center;z-index:3;
}
.ob-suno-text{
  font-family:'DM Mono',monospace;
  font-size:9px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--t3);
}
.ob-suno-text em{
  color:var(--gold);font-style:normal;opacity:0.85;
}
.ob-actions{
  position:absolute;
  bottom:clamp(70px,12vh,100px);left:24px;right:24px;
  display:flex;flex-direction:column;
  gap:10px;align-items:center;z-index:3;
}
.ob-primary{
  width:100%;
  background:linear-gradient(180deg,rgba(200,160,80,0.16),rgba(200,160,80,0.06));
  border:1px solid var(--gold);
  border-radius:999px;padding:20px 24px;
  font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--gold);cursor:pointer;
  transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.ob-primary:hover{
  background:linear-gradient(180deg,rgba(200,160,80,0.22),rgba(200,160,80,0.1));
  transform:translateY(-1px);
}
.ob-primary:active{transform:scale(0.98);transition:transform 50ms}
.ob-link{
  background:none;border:none;cursor:pointer;
  font-family:'Outfit',sans-serif;font-weight:300;
  font-size:12px;color:var(--t4);padding:8px;
  transition:color 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.ob-link:hover{color:var(--t2)}

/* V254 hotfix v2: beta disclaimer lives INSIDE .ob-suno as a second line.
   Earlier approach (separate absolute-positioned banner) collided with
   .ob-suno because both were fighting for the same bottom vertical slot.
   One container, two-line stack = no positioning fight. */
.ob-suno-beta{
  display:block;
  margin-top:8px;
  font-family:'Outfit',sans-serif;font-weight:300;
  font-size:10.5px;line-height:1.5;color:var(--t4);
  text-transform:none;letter-spacing:0.02em;
  max-width:320px;margin-left:auto;margin-right:auto;
  padding:0 12px;
}
.ob-suno-beta .ob-beta-word{
  font-family:'DM Mono',monospace;
  font-size:9px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--gold);
  opacity:0.82;
  margin-right:5px;
}
.ob-suno-beta em{
  color:var(--t3);font-style:italic;
}

/* V254 hotfix v2: compress hero section on short viewports so the
   two-line .ob-suno + .ob-suno-beta doesn't collide with .ob-explain.
   iPhone SE / 8 have viewport heights under 700px where every vertical
   pixel matters. */
@media (max-height: 700px){
  .ob-explain{
    top:clamp(180px,28vh,240px);
    padding:0 24px;
  }
  .ob-headline{font-size:26px;margin-bottom:14px}
  .ob-body{font-size:13px;line-height:1.5}
  .ob-learnmore{margin-top:14px}
  .ob-suno-beta{font-size:10px;margin-top:6px}
}

/* V254: Global BETA badge — tiny persistent marker at bottom-right of
   every screen. Anchored above the tabbar via the same --tab-h var the
   rest of the layout uses, so it moves in sync when the tabbar collapses
   or hides entirely. Z-index 350 = above content (default ~1), below
   tabbar (400), below overlays (800+). Hidden during onboarding via
   body.onboarding-visible. Hidden on all overlays naturally because
   auth-overlay/hist-drawer/vault-scrim all sit at z-index 600+. */
#betaBadge{
  position:fixed;
  right:10px;
  bottom:calc(var(--tab-h, 58px) + env(safe-area-inset-bottom, 0px) + 10px);
  z-index:350;
  pointer-events:none;
  font-family:'DM Mono',monospace;
  font-size:8.5px;letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  padding:4px 9px;
  border:1px solid rgba(200,160,80,0.22);
  border-radius:999px;
  background:rgba(10,10,9,0.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0.62;
  transition:opacity 0.3s cubic-bezier(0.2,0.8,0.2,1),bottom 0.32s cubic-bezier(0.4,0,0.2,1);
}
body.onboarding-visible #betaBadge,
body.auth-recovery-active #betaBadge,
body.on-song-view #betaBadge{
  display:none;
}
/* Desktop: tabbar is hidden on non-session routes and present in session
   routes; the --tab-h calc still resolves correctly. Keep badge visible
   at the same conceptual position. */
@media (min-width: 1024px){
  #betaBadge{
    right:16px;
    opacity:0.85;
    border-color:rgba(200,160,80,0.45);
    background:rgba(10,10,9,0.82);
    box-shadow:0 0 18px rgba(200,160,80,0.18);
  }
}
@media (prefers-reduced-motion: reduce){
  #betaBadge{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   V303 — FLOATING FEEDBACK BUTTON (AssistiveTouch pattern)
   Always-on draggable dot. Snaps to nearest edge on release.
   Position persisted in localStorage. Auto-fades when idle.
   ═══════════════════════════════════════════════════════════════ */
#fbDot{
  position:fixed;
  bottom:140px;right:12px;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(26,26,26,0.75);
  border:1px solid rgba(200,160,80,0.15);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:550;
  display:flex;align-items:center;justify-content:center;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  opacity:0.45;
  transition:opacity 0.4s var(--easing-standard), transform var(--press-dur) var(--easing-standard);
}
#fbDot:active{cursor:grabbing}
#fbDot.fb-wake{opacity:0.85}
#fbDot.fb-dragging{opacity:0.95;transform:scale(1.08)}
#fbDot svg{width:16px;height:16px;fill:rgba(200,160,80,0.7)}
body.onboarding-visible #fbDot,
body.auth-recovery-active #fbDot{display:none}

/* Desktop visibility boost (>=1024px). Mobile keeps the AssistiveTouch
   restraint (opacity:0.45 base). Desktop brightens the dot so it is
   easy to find without becoming attention-grabbing — full opacity,
   warmer gold accent on the surface, and a soft gold glow. The
   floating dot is also a primary entry to the admin dev/flight menu;
   weak contrast on desktop monitors made it nearly invisible. */
@media (min-width: 1024px) {
  #fbDot{
    opacity:1;
    background:rgba(40,32,16,0.85);
    border-color:rgba(200,160,80,0.55);
    box-shadow:0 0 12px rgba(200,160,80,0.25),
               0 1px 0 rgba(255,255,255,0.04) inset;
  }
  #fbDot:hover{
    background:rgba(60,46,18,0.92);
    border-color:rgba(200,160,80,0.85);
    box-shadow:0 0 18px rgba(200,160,80,0.45),
               0 1px 0 rgba(255,255,255,0.06) inset;
  }
  #fbDot svg{fill:rgba(220,180,100,1)}
  #fbDot.fb-wake{opacity:1}
}

/* Popover */
#fbPop{
  position:fixed;
  z-index:551;
  background:var(--dt-float);
  border:1px solid rgba(200,160,80,0.12);
  border-radius:12px;
  padding:4px;
  min-width:160px;
  opacity:0;pointer-events:none;
  transform:scale(0.92);
  transition:opacity 0.18s var(--easing-standard),transform 0.18s var(--easing-standard);
}
#fbPop.open{opacity:1;pointer-events:auto;transform:scale(1)}
.fb-pop-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border-radius:8px;
  font-family:'Outfit',sans-serif;
  font-size:14px;font-weight:400;
  color:var(--t1);
  background:transparent;border:none;width:100%;
  cursor:pointer;
  transition:background var(--state-dur) var(--easing-standard);
}
.fb-pop-item:active{background:rgba(200,160,80,0.08)}
.fb-pop-item svg{width:16px;height:16px;flex-shrink:0;stroke:var(--t2);fill:none;stroke-width:1.5}

/* Feedback bottom sheet */
#fbScrim{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:700;
  opacity:0;pointer-events:none;
  transition:opacity 0.25s var(--easing-standard);
}
#fbScrim.open{opacity:1;pointer-events:auto}
#fbSheet{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:710;
  background:var(--dt-surface);
  border-top:1px solid rgba(200,160,80,0.1);
  border-radius:16px 16px 0 0;
  padding:20px var(--sp-page) calc(20px + env(safe-area-inset-bottom,0px));
  max-height:80vh;
  transform:translateY(100%);
  transition:transform 0.32s cubic-bezier(0.2,0.8,0.2,1);
}
#fbScrim.open + #fbSheet,
#fbSheet.open{transform:translateY(0)}
.fb-sheet-title{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:300;
  font-size:22px;
  color:var(--t1);
  margin:0 0 4px;
}
.fb-sheet-sub{
  font-family:'DM Mono',monospace;
  font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--t3);
  margin:0 0 16px;
}
#fbText{
  width:100%;
  min-height:100px;
  max-height:200px;
  resize:vertical;
  background:var(--dt-well);
  border:1px solid rgba(200,160,80,0.08);
  border-radius:10px;
  padding:12px 14px;
  font-family:'Outfit',sans-serif;
  font-size:15px;font-weight:300;
  color:var(--t1);
  line-height:1.5;
}
#fbText::placeholder{color:var(--t4)}
#fbText:focus{outline:none;border-color:rgba(200,160,80,0.2)}
.fb-sheet-actions{
  display:flex;gap:10px;
  margin-top:14px;
}
#fbSubmit{
  flex:1;
  padding:13px 0;
  border-radius:10px;
  background:var(--gold);
  color:#0a0a09;
  font-family:'Outfit',sans-serif;
  font-size:14px;font-weight:500;
  border:none;cursor:pointer;
  transition:opacity var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard);
}
#fbSubmit:active{transform:scale(var(--press-scale))}
#fbSubmit:disabled{opacity:0.4;cursor:default}
#fbCancel{
  padding:13px 20px;
  border-radius:10px;
  background:var(--dt-raised);
  color:var(--t2);
  font-family:'Outfit',sans-serif;
  font-size:14px;font-weight:400;
  border:none;cursor:pointer;
  transition:opacity var(--state-dur) var(--easing-standard),transform var(--press-dur) var(--easing-standard);
}
#fbCancel:active{transform:scale(var(--press-scale))}

/* ═══════════════════════════════════════════════════════════════
   V255 PHASE 2 — NOW-PLAYING MINI BAR
   Fixed-bottom, above tabbar. Slides up when audio is playing AND
   user isn't on Song View of the currently-playing song. Spotify
   pattern: appears on play, slides away on pause/stop. Mirror of
   .tabbar vertical rhythm via --tab-h var.
   ═══════════════════════════════════════════════════════════════ */
.suno-minibar{
  position:fixed;
  left:0;right:0;
  bottom:calc(var(--tab-h, 58px) + env(safe-area-inset-bottom, 0px));
  z-index:410; /* above tabbar (400) so it sits just above it visually */
  display:flex;flex-direction:column;
  background:rgba(10,10,9,0.92);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid rgba(200,160,80,0.18);
  transform:translateY(calc(100% + 20px));
  opacity:0;
  pointer-events:none;
  transition:transform 0.36s cubic-bezier(0.2,0.8,0.2,1),opacity 0.28s cubic-bezier(0.2,0.8,0.2,1);
  touch-action:pan-y; /* allow swipe-down gesture */
}
.suno-minibar.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.suno-minibar-progress{
  position:absolute;top:0;left:0;right:0;
  height:2px;
  background:rgba(200,160,80,0.08);
  pointer-events:none;
}
.suno-minibar-progress-fill{
  position:absolute;top:0;left:0;bottom:0;
  width:0%;
  background:linear-gradient(90deg,var(--gold),rgba(200,160,80,0.7));
  transition:width 0.12s linear;
}
.suno-minibar-inner{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px 14px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  min-height:68px; /* V260: 56→68 to hold the bigger thumb + give the bar more presence above the tabbar */
}
.suno-minibar-thumb{
  /* V260: 38→48. The mini bar is now the persistent "now playing" anchor
     across screens — the artwork needs to read as album cover, not garnish. */
  width:48px;height:48px;border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(200,160,80,0.2);
  object-fit:cover;
  flex-shrink:0;
}
.suno-minibar-title{
  flex:1;min-width:0;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:16px;font-weight:400;
  color:var(--t1);letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.suno-minibar-play{
  flex-shrink:0;
  /* V260: 36→44 to keep visual balance with the bigger thumb and give a fatter tap target. */
  width:44px;height:44px;border-radius:50%;
  background:rgba(200,160,80,0.1);
  border:1px solid rgba(200,160,80,0.48);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background 0.2s,border-color 0.2s,transform 0.05s ease;
  -webkit-tap-highlight-color:transparent;
}
.suno-minibar-play:hover{
  background:rgba(200,160,80,0.16);
  border-color:rgba(200,160,80,0.7);
}
.suno-minibar-play:active{transform:scale(0.92)}
.suno-minibar-play svg{width:16px;height:16px;fill:var(--gold);stroke:none}

/* Swipe-down drag state: transform follows finger, no transition */
.suno-minibar.dragging{
  transition:none;
}

@media (prefers-reduced-motion: reduce){
  .suno-minibar,.suno-minibar-progress-fill{transition:none}
}

/* Don't show mini bar during onboarding */
body.onboarding-visible .suno-minibar{display:none}

/* V255 hotfix: hide mini-bar during active writing session. The composer
   (.v9-input-area) owns the bottom real estate and grows with input
   content — any fixed offset would break when user types multi-line.
   Audio keeps playing; the mini-bar returns when user navigates out of
   the session to any other screen (home, library, vault, profile). */
body.in-session .suno-minibar{
  display:none;
}

/* ═══════════════════════════════════════════════════════════════
   V160 SHARED "WHAT IS STANZAI" MODAL
   Full-screen overlay. Entry: onboarding "learn more" + profile row.
   ═══════════════════════════════════════════════════════════════ */
.whatis-modal{
  position:fixed;inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity 0.35s cubic-bezier(0.2,0.8,0.2,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.whatis-modal.open{opacity:1;pointer-events:auto}
.whatis-modal-inner{
  max-width:380px;width:100%;
  margin:0 auto;
  padding:clamp(60px,12vh,90px) 28px 60px;
}
.whatis-close{
  position:fixed;top:16px;right:16px;
  width:36px;height:36px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);font-size:18px;
  transition:all 0.2s;z-index:10000;
}
.whatis-close:hover{background:rgba(255,255,255,0.1);color:var(--t1)}
.whatis-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;font-size:24px;
  color:var(--t1);margin-bottom:24px;
  line-height:1.2;
}
.whatis-title em{color:var(--gold);font-style:italic}
.whatis-body p{
  font-family:'Outfit',sans-serif;
  font-weight:300;font-size:14px;
  color:var(--t2);line-height:1.7;
  margin-bottom:14px;
}
.whatis-body p strong{color:var(--t1);font-weight:400}
.whatis-body p:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  .nocturne-home .nh-particles span,
  .nocturne-home .nh-continue .nh-ember,
  .ob-overlay .nh-particles span{
    animation-duration:0.01ms !important;
  }
  .ob-overlay,.whatis-modal{transition-duration:0.01ms !important}
}