/* Stanzai dev styles 02/14 — Phase A+B layout foundation (V135/V137) — shell, screens, base scaffolding — extracted VERBATIM from index.html <style> block lines 337-828 (CSS split PR, 2026-06-10). Files load via <link> in numeric order; cascade position matters — do not reorder rules across files. */

/* ── PHASE A FOUNDATION (V135) ── 
   Invisible-but-felt baseline rules. Apply globally before any component CSS.
   A3: 50ms press response — instant tactile feedback (premium signal).
   A4: Gold caret — ambient brand presence during text entry.
   A5: Standardized placeholder — 0.42 opacity on dark, weight 300, WCAG AA. */

/* A3: Universal 50ms press response */
button:active, .tab:active, .sf-chip:active, .gchip:active,
.moodpill:active, .soundchip:active, .optcard:active,
.v9-act:active, .ai-act:active, .v9-chip:active,
.stchip:active, .copybtn:active, .suno-copy-btn:active,
.dt-home-btn:active, .sf-btn-primary:active,
[onclick]:active {
  transform: scale(0.97);
  transition: transform 50ms ease !important;
}

/* A4: Gold caret on all text inputs and editable areas */
input, textarea, [contenteditable] {
  caret-color: rgba(200,160,80,1);
}

/* A5: Standardized placeholder text */
::placeholder {
  color: rgba(255,255,255,0.42);
  font-weight: 300;
}
::-webkit-input-placeholder {
  color: rgba(255,255,255,0.42);
  font-weight: 300;
}

/* ── V167 TIER SCAFFOLDING — DELETED V250 ──
   The .tier0–.tier5 classes and their --surface / --surface-up / --surface-up2
   custom properties were V167 scaffolding for a Phase B migration that was
   solved differently (token-ize-the-rules, leave-class-identity-intact — see
   V177). Zero markup references across the codebase; zero component references
   to --surface / --surface-up / --surface-up2. Dead architecture, removed per
   V250 audit cleanup. The --dt-void/well/surface/raised/float/overlay tokens
   themselves stay — they're consumed by actual surface rules throughout. */

/* ════════════════════════════════════════════════════════
   V168 TOAST SYSTEM — PHASE C4
   Replaces the V125-era inline-styled showToast() with a token-driven
   class system. Three semantic types (success / info / error) using the
   3px left accent pattern from research (Sonner/Vercel/Linear convention).
   
   API stays backward-compatible — showToast(msg) auto-detects type from
   message content. Optional showToast(msg, type) for explicit override.
   All 177 existing call sites continue working unchanged.
   ════════════════════════════════════════════════════════ */

.sz-toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none; /* let toasts opt back in individually */
  max-width: calc(100vw - 32px);
}

.sz-toast {
  pointer-events: auto;
  position: relative;
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-struct-strong);
  border-radius: 10px;
  padding: 12px 16px 12px 20px; /* extra left padding for accent bar */
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  /* Entrance animation — spring-eased rise */
  animation: szToastEnter 350ms cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
  /* Allow text/icon to flow */
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* The 3px accent bar — colored per type via custom property */
.sz-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--sz-toast-accent, rgba(var(--gold-rgb), 0.80));
}

/* Type variants — set the accent + body color */
.sz-toast--success {
  --sz-toast-accent: rgba(var(--gold-rgb), 0.80);
  color: rgb(220, 185, 120); /* lightened gold for AAA contrast */
}
.sz-toast--info {
  --sz-toast-accent: rgba(var(--teal-rgb), 0.80);
  color: rgb(110, 185, 172); /* lightened teal */
}
.sz-toast--error {
  --sz-toast-accent: rgba(var(--rose-rgb), 0.80);
  color: rgb(220, 140, 155); /* lightened rose */
}

/* Optional subtitle line (used by first-save easter egg) */
.sz-toast-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sz-toast-subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  letter-spacing: normal;
  color: var(--gold);
  opacity: 0.8;
}

/* Exit state — applied via JS by adding .sz-toast--leaving */
.sz-toast--leaving {
  animation: szToastExit 280ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes szToastEnter {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes szToastExit {
  from { opacity: 1; transform: translateY(0); max-height: 200px; margin-bottom: 8px; }
  to { opacity: 0; transform: translateY(8px); max-height: 0; margin-bottom: 0; }
}

/* Reduced motion — collapse animations to instant fades */
@media (prefers-reduced-motion: reduce) {
  .sz-toast { animation: none; opacity: 1; transform: none; }
  .sz-toast--leaving { animation: none; opacity: 0; }
}

/* Desktop positioning — toasts sit bottom-right of the workspace, not center-mobile-style */
@media (min-width: 1024px) {
  .sz-toast-stack {
    left: auto;
    right: 24px;
    bottom: 24px;
    transform: none;
    align-items: flex-end;
  }
}

/* ════════════════════════════════════════════════════════
   V171 SCROLLBAR SYSTEM — PHASE C3
   Utility classes for scrollable content surfaces.
   
   .sz-scroll          → Thin overlay scrollbar (6px, 15% white thumb).
                          Becomes more visible on hover. Native auto-hide on
                          touch devices preserved via scrollbar-width: thin.
                          Webkit:  shows on container hover via opacity transition.
   
   .sz-scroll-gold     → Gold accent variant (for content surfaces in creative
                          contexts like song lyrics — replaces .sb-lyrics-full's
                          inline scrollbar styling with the token-driven version).
   
   .sz-scroll-fade     → Adds top/bottom gradient indicators that signal
                          hidden content. Combine with .sz-scroll OR use alone
                          on hidden-scrollbar surfaces to indicate overflow
                          without a visible scrollbar.
   ════════════════════════════════════════════════════════ */

/* Base thin scrollbar — applied to scrollable content containers */
.sz-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
  transition: scrollbar-color var(--state-dur) var(--easing-standard);
}
.sz-scroll:hover {
  scrollbar-color: rgba(255, 255, 255, 0.20) transparent;
}
.sz-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.sz-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sz-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  transition: background var(--state-dur) var(--easing-standard);
}
.sz-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.20);
}
.sz-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}
.sz-scroll::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.45);
}

/* Gold variant — for creative content surfaces (lyrics, sound prompts) */
.sz-scroll-gold {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gold-rgb), 0.18) transparent;
  transition: scrollbar-color var(--state-dur) var(--easing-standard);
}
.sz-scroll-gold:hover {
  scrollbar-color: rgba(var(--gold-rgb), 0.32) transparent;
}
.sz-scroll-gold::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.sz-scroll-gold::-webkit-scrollbar-track {
  background: transparent;
}
.sz-scroll-gold::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), 0.18);
  border-radius: 3px;
  transition: background var(--state-dur) var(--easing-standard);
}
.sz-scroll-gold:hover::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), 0.32);
}
.sz-scroll-gold::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gold-rgb), 0.45);
}
.sz-scroll-gold::-webkit-scrollbar-thumb:active {
  background: rgba(var(--gold-rgb), 0.60);
}

/* Overflow gradient indicators — combine with .sz-scroll or apply alone.
   Container needs position:relative or position:absolute for the pseudos to anchor.
   The gradient color is set by --sz-fade-color (defaults to var(--bg) = #050505).
   Override per-context by setting --sz-fade-color on the container. */
.sz-scroll-fade {
  position: relative;
}
.sz-scroll-fade::before,
.sz-scroll-fade::after {
  content: '';
  position: sticky;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 2;
  display: block;
  flex-shrink: 0;
}
.sz-scroll-fade::before {
  top: 0;
  margin-bottom: -24px;
  background: linear-gradient(to bottom, var(--sz-fade-color, var(--bg)) 0%, transparent 100%);
}
.sz-scroll-fade::after {
  bottom: 0;
  margin-top: -24px;
  background: linear-gradient(to top, var(--sz-fade-color, var(--bg)) 0%, transparent 100%);
}

/* ── PHASE B FOUNDATION (V137) ──
   DORMANT component systems. Defined now, applied later via dedicated migration sessions.
   Nothing in the app currently uses these class names — defining them changes nothing visually.
   Future Phase B migration sessions will add `.sf-btn`/`.sf-field` to existing elements via
   class augmentation (e.g. `class="v9-input sf-field"`) so the new rules attach via the proper
   class. Until that happens these systems are storage, not active styling.
   
   Naming: Existing classes are `.sf-btn-primary` (single hyphen). The new system uses BEM
   `.sf-btn--primary` (double hyphen) so the two systems coexist without conflict. Same for the
   secondary/ghost/danger/icon variants.
   
   Only B3 (chat composer elevation) is ACTIVE — it augments existing `body.session-active
   .v9-input-area` rules with background/border/blur properties that those rules don't set,
   gated to desktop breakpoints so mobile is untouched. */

/* B1 — Unified button system. V137 dormant foundation, V173 token-ized.
   Now uses V167 tokens (--state-dur, --easing-standard, --press-dur, --press-scale,
   --gold-rgb, --teal-rgb, --rose-rgb, --focus-ring/soft/halo). When components
   migrate onto these classes via class augmentation, they self-tune by parent tier
   and inherit the consistent press/focus/state behavior shared with chips, cards,
   toasts, scrollbars, toggles. */
.sf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--t1);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: pointer;
  user-select: none;
  -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),
    color var(--state-dur) var(--easing-standard),
    box-shadow var(--state-dur) var(--easing-standard);
}
.sf-btn::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--state-dur) var(--easing-standard);
}
@media (hover:hover) {
  .sf-btn:hover::after { opacity: 0.06; }
}
.sf-btn:active { transform: scale(var(--press-scale)); }
.sf-btn:active::after { opacity: 0.10; }
.sf-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--focus-soft), var(--focus-halo);
}
.sf-btn:disabled, .sf-btn.is-disabled {
  cursor: not-allowed; opacity: 0.35; transform: none;
}
.sf-btn:disabled::after, .sf-btn.is-disabled::after { opacity: 0; }

/* Primary — gold border glow (not filled — luxury restraint per 5% gold rule) */
.sf-btn--primary {
  min-height: 48px;
  background: rgba(var(--gold-rgb), 0.04);
  border-color: rgba(var(--gold-rgb), 0.35);
  color: rgba(var(--gold-rgb), 0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 20px rgba(var(--gold-rgb), 0.06);
}
.sf-btn--primary::after { background: rgb(var(--gold-rgb)); }
@media (hover:hover) {
  .sf-btn--primary:hover {
    border-color: rgba(var(--gold-rgb), 0.50);
    color: rgb(var(--gold-rgb));
  }
}

/* Secondary — quiet neutral */
.sf-btn--secondary {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}
@media (hover:hover) {
  .sf-btn--secondary:hover {
    border-color: rgba(255,255,255,0.14);
  }
}

/* Utility — teal. Per GPT research taxonomy: navigation/system actions
   (search, filter, sort, copy, send, open panel). NOT for creative commitments. */
.sf-btn--utility {
  background: rgba(var(--teal-rgb), 0.06);
  border-color: rgba(var(--teal-rgb), 0.30);
  color: rgba(var(--teal-rgb), 0.95);
}
.sf-btn--utility::after { background: rgb(var(--teal-rgb)); }
@media (hover:hover) {
  .sf-btn--utility:hover {
    border-color: rgba(var(--teal-rgb), 0.50);
    color: rgb(var(--teal-rgb));
  }
}

/* Ghost — invisible until hover */
.sf-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
@media (hover:hover) {
  .sf-btn--ghost:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.06);
  }
}

/* Destructive — rose */
.sf-btn--danger {
  background: rgba(var(--rose-rgb), 0.08);
  border-color: rgba(var(--rose-rgb), 0.25);
  color: var(--rose);
}
.sf-btn--danger::after { background: rgb(var(--rose-rgb)); }
@media (hover:hover) {
  .sf-btn--danger:hover {
    border-color: rgba(var(--rose-rgb), 0.45);
  }
}

/* Icon button — square aspect, smaller default */
.sf-btn--icon {
  min-height: 40px; width: 40px;
  padding: 0; border-radius: 10px;
}

/* Round modifier — circular shape. Combine with --icon for circle icon buttons
   (chat send, FAB, action triggers). Works with any color variant. */
.sf-btn--round {
  border-radius: 50%;
}
.sf-btn--round.sf-btn--icon {
  width: 44px;
  min-height: 44px;
}

/* B2 — Input field system with three-layer gold focus glow (DORMANT until migration) */
.sf-field {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--t1);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  caret-color: rgba(200,160,80,1);
  transition:
    background-color var(--anim-fast) var(--ease-default),
    border-color var(--anim-fast) var(--ease-default),
    box-shadow var(--anim-fast) var(--ease-default);
}
.sf-field::placeholder {
  color: rgba(255,255,255,0.42);
  font-weight: 300;
}
@media (hover:hover) {
  .sf-field:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.09);
  }
}
/* Gold focus glow — three layers: tight ring, soft glow, ambient halo */
.sf-field:focus, .sf-field:focus-visible {
  outline: none;
  border-color: rgba(200,160,80,0.46);
  box-shadow:
    0 0 0 1px rgba(200,160,80,0.15),
    0 0 8px 0 rgba(200,160,80,0.12),
    0 0 20px 0 rgba(200,160,80,0.06);
}
/* Teal variant for search/utility inputs */
.sf-field--teal:focus, .sf-field--teal:focus-visible {
  border-color: rgba(78,158,144,0.40);
  box-shadow:
    0 0 0 1px rgba(78,158,144,0.15),
    0 0 8px 0 rgba(78,158,144,0.12),
    0 0 20px 0 rgba(78,158,144,0.06);
}
textarea.sf-field { min-height: 120px; resize: vertical; }
.sf-field:disabled { opacity: 0.6; cursor: not-allowed; }

/* B3 — Chat composer elevation (ACTIVE on desktop only)
   Augments existing body.session-active .v9-input-area positioning rules with depth treatment.
   Mobile is untouched because the rule is gated behind 768px+. The 35% black background sinks
   the composer into the well; the inset top border catches edge light; the 6px backdrop blur
   creates the "studio mixing console" feel — always present, clearly the place where work happens. */
@media (min-width: 768px) {
  body.session-active .v9-input-area {
    background: rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}