/* ============================================================
   Fluorite — design tokens
   ============================================================ */
:root {
  --bg:           #09090B;
  --bg-elev-1:    #111114;
  --bg-elev-2:    #16161B;
  --bg-elev-3:    #1C1C22;
  --border:       rgba(255,255,255,0.06);
  --border-2:     rgba(255,255,255,0.10);
  --border-3:     rgba(255,255,255,0.16);

  --text-1:       #ECECEE;
  --text-2:       #A1A1AA;
  --text-3:       #71717A;
  --text-4:       #52525B;

  --accent-fg:    #16121F;

  /* fluorite violet — used SPARINGLY */
  --accent:       #B5A6FF;
  --accent-2:     #9D8AFF;
  --accent-soft:  rgba(181, 166, 255, 0.12);
  --accent-line:  rgba(181, 166, 255, 0.28);

  --ok:           #5BCAA7;
  --warn:         #E5B567;
  --err:          #E5757A;
  --info:         #7EB6F0;

  --ok-soft:      rgba(91,202,167,0.12);
  --warn-soft:    rgba(229,181,103,0.12);
  --err-soft:     rgba(229,117,122,0.12);
  --info-soft:    rgba(126,182,240,0.12);

  --font-ui:      'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: 'Instrument Serif', "Times New Roman", serif;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

/* subtle grain texture across app for premium feel */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

::selection { background: var(--accent-soft); color: var(--text-1); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.10); }

/* ============================================================
   primitives
   ============================================================ */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.card-elev-2 { background: var(--bg-elev-2); }
.muted { color: var(--text-2); }
.dim   { color: var(--text-3); }
.faint { color: var(--text-4); }
.mono  { font-family: var(--font-mono); font-feature-settings: "ss02"; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  border-radius: 8px;
  font: 500 13px/1 var(--font-ui);
  color: var(--text-1);
  background: transparent;
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
  white-space: nowrap;
  user-select: none;
}
.btn:hover { background: rgba(255,255,255,0.04); border-color: var(--border-3); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost { border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: rgba(255,255,255,0.04); color: var(--text-1); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
  font-weight: 600;
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); color: var(--accent-fg); }
.btn-accent-outline {
  border-color: var(--accent-line);
  color: var(--accent);
  background: var(--accent-soft);
}
.btn-accent-outline:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.btn-icon {
  width: 28px; height: 28px; padding: 0;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-icon:hover { background: rgba(255,255,255,0.05); color: var(--text-1); border-color: var(--border-2); }
.btn-icon.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  font: 500 12px/1 var(--font-ui);
  color: var(--text-2);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
}
.chip:hover { color: var(--text-1); border-color: var(--border-2); }
.chip.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* status pill */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font: 500 11px/1 var(--font-ui);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex: none;
}
.status-idle      { background: rgba(255,255,255,0.04); color: var(--text-3); border: 1px solid var(--border); }
.status-idle .status-dot { background: var(--text-4); }
.status-queued    { background: var(--info-soft); color: var(--info); border: 1px solid rgba(126,182,240,0.18); }
.status-queued .status-dot { background: var(--info); }
.status-generating{ background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.status-generating .status-dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.status-done      { background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(91,202,167,0.18); }
.status-done .status-dot { background: var(--ok); }
.status-error     { background: var(--err-soft); color: var(--err); border: 1px solid rgba(229,117,122,0.20); }
.status-error .status-dot { background: var(--err); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* prompt field */
.prompt {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--text-1);
  font: 400 12.5px/1.55 var(--font-mono);
  resize: vertical;
  min-height: 56px;
  transition: border-color 140ms ease, background 140ms ease;
  outline: none;
}
.prompt:hover { border-color: var(--border-2); }
.prompt:focus { border-color: var(--accent-line); background: #0B0B0E; }
.prompt::placeholder { color: var(--text-4); }

.prompt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: border-color 140ms ease;
}
.prompt-row:hover { border-color: var(--border-2); }
.prompt-row:focus-within { border-color: var(--accent-line); }
.prompt-row input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font: 400 12.5px/1.4 var(--font-mono);
  color: var(--text-1);
}

/* shimmer for loading thumbs */
.shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #15151A, #0E0E12);
}
.shimmer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 20%,
    color-mix(in srgb, var(--accent) 6%, transparent) 38%,
    color-mix(in srgb, var(--accent) 14%, transparent) 50%,
    color-mix(in srgb, var(--accent) 6%, transparent) 62%,
    transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* waveform */
.wf-bar {
  width: 2px;
  background: var(--text-4);
  border-radius: 2px;
  transition: background 80ms linear;
}
.wf-bar.played { background: var(--accent); }
.wf-bar.head   { background: #ECECEE; }

/* hover card lift */
.lift {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.lift:hover {
  border-color: var(--border-2);
  background: var(--bg-elev-2);
}

/* progress line for stage rail */
.rail-line { background: var(--border); }
.rail-line.is-done    { background: var(--ok); }
.rail-line.is-active  { background: var(--accent); }

/* fade-in on mount */
.fade-in { animation: fadein 350ms ease-out both; }
@keyframes fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "now playing" generating pulse for stage card border */
.is-generating-border {
  position: relative;
}
.is-generating-border::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ang, 0deg),
    transparent 0deg,
    var(--accent) 60deg,
    transparent 120deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: rot 2.6s linear infinite;
  opacity: 0.7;
}
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rot {
  to { --ang: 360deg; }
}

/* toast */
.toast {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.6);
  animation: toastIn 240ms ease-out both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* checkered placeholder for missing imagery (used carefully) */
.checker {
  background-image:
    linear-gradient(45deg, #15151A 25%, transparent 25%),
    linear-gradient(-45deg, #15151A 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #15151A 75%),
    linear-gradient(-45deg, transparent 75%, #15151A 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, 8px 0;
  background-color: #0E0E12;
}

/* keyboard hint */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font: 500 10.5px/1 var(--font-mono);
  color: var(--text-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* generic divider */
.hr { height: 1px; background: var(--border); border: none; margin: 0; }

/* timeline */
.tl-clip {
  position: relative;
  flex: 1;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background-size: cover; background-position: center;
  border: 1px solid var(--border);
}
.tl-clip + .tl-clip { margin-left: -8px; }
.tl-clip::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, transparent 16%, transparent 84%, rgba(0,0,0,0.45) 100%);
}

/* sidebar history thumbnail */
.thumb {
  width: 36px; height: 36px;
  border-radius: 8px;
  flex: none;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
}

/* segmented */
.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.seg > button {
  height: 24px; padding: 0 10px;
  font: 500 12px/1 var(--font-ui);
  background: transparent;
  border: none;
  color: var(--text-3);
  border-radius: 6px;
  cursor: pointer;
}
.seg > button.is-on {
  background: var(--bg-elev-3);
  color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--border-2);
}

/* progress bar tiny */
.pg-track {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.pg-fill {
  height: 100%; background: var(--accent);
  transition: width 280ms ease;
}

/* generating shimmer overlay on video thumbs */
.gen-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--accent) 0%, transparent) 30%,
      color-mix(in srgb, var(--accent) 22%, transparent) 50%,
      color-mix(in srgb, var(--accent) 0%, transparent) 70%),
    radial-gradient(120% 60% at 50% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
  background-size: 240% 100%, 100% 100%;
  animation: genSheen 2.1s linear infinite;
  pointer-events: none;
}
@keyframes genSheen {
  0%   { background-position: 200% 0, 0 0; }
  100% { background-position: -100% 0, 0 0; }
}

/* subtle inner top highlight on big cards */
.card.with-highlight {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%),
    var(--bg-elev-1);
}

/* link */
.link {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: var(--border-3);
  text-underline-offset: 3px;
  transition: text-decoration-color 140ms ease;
}
.link:hover { text-decoration-color: var(--accent); }

/* avatar */
.avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6FE3C2, #B5A6FF);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 10.5px/1 var(--font-ui);
  color: #0B0B10;
  flex: none;
}

/* slider */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%; height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  outline: none;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--accent-line);
}
.range::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}

/* tag list scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ============================================================
   THEMES — controlled via [data-theme] on :root
   ============================================================ */

/* Graphite — slightly warm-tinted dark */
:root[data-theme="graphite"] {
  --bg:           #0E0B0A;
  --bg-elev-1:    #161210;
  --bg-elev-2:    #1B1714;
  --bg-elev-3:    #221C18;
  --border:       rgba(255, 232, 200, 0.06);
  --border-2:     rgba(255, 232, 200, 0.10);
  --border-3:     rgba(255, 232, 200, 0.16);
  --text-1:       #F1ECE3;
  --text-2:       #B0A89B;
  --text-3:       #7F786C;
  --text-4:       #5C564C;
}

/* Paper — warm light theme */
:root[data-theme="paper"] {
  --bg:           #F1ECE0;
  --bg-elev-1:    #FBF7EC;
  --bg-elev-2:    #EFE9D9;
  --bg-elev-3:    #E5DECA;
  --border:       rgba(28, 22, 12, 0.10);
  --border-2:     rgba(28, 22, 12, 0.18);
  --border-3:     rgba(28, 22, 12, 0.30);
  --text-1:       #1E1B14;
  --text-2:       #4F4A3C;
  --text-3:       #7D7765;
  --text-4:       #A8A290;
  --accent-fg:    #14110A;
}
:root[data-theme="paper"] body::before { opacity: 0.04; mix-blend-mode: multiply; }
:root[data-theme="paper"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); border: 2px solid var(--bg); }
:root[data-theme="paper"] .seg > button.is-on { background: var(--bg-elev-1); }
:root[data-theme="paper"] .kbd { background: rgba(0,0,0,0.04); }
:root[data-theme="paper"] .chip { background: rgba(0,0,0,0.025); }
:root[data-theme="paper"] .prompt { background: var(--bg-elev-1); }
:root[data-theme="paper"] .prompt:focus { background: #FFFFFF; }
:root[data-theme="paper"] .prompt-row { background: var(--bg-elev-1); }
:root[data-theme="paper"] .toast { background: var(--bg-elev-1); box-shadow: 0 20px 40px -16px rgba(0,0,0,0.18); }
:root[data-theme="paper"] .wf-bar.head { background: #1E1B14; }
:root[data-theme="paper"] .shimmer { background: linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev-3)); }
:root[data-theme="paper"] .checker { background-color: var(--bg-elev-2); }

/* ============================================================
   HEADLINE PERSONALITY — controlled via [data-headline] on :root
   ============================================================ */

/* default editorial: var(--font-display) already = Instrument Serif */

:root[data-headline="sans"] {
  --font-display: var(--font-ui);
}
:root[data-headline="sans"] .hero-title {
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  font-size: 30px !important;
}
:root[data-headline="sans"] .brand-mark {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-size: 15px !important;
}

:root[data-headline="mono"] {
  --font-display: var(--font-mono);
}
:root[data-headline="mono"] .hero-title {
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  font-size: 26px !important;
  text-transform: lowercase !important;
}
:root[data-headline="mono"] .brand-mark {
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
}

/* paper-theme tweaks that can't be a single var swap */
:root[data-theme="paper"] .btn:hover { background: rgba(20,17,12,0.05); border-color: var(--border-3); }
:root[data-theme="paper"] .btn-ghost:hover { background: rgba(20,17,12,0.05); color: var(--text-1); }
:root[data-theme="paper"] .btn-icon:hover { background: rgba(20,17,12,0.05); color: var(--text-1); border-color: var(--border); }
:root[data-theme="paper"] .status-idle { background: rgba(20,17,12,0.04); border-color: rgba(20,17,12,0.10); }
:root[data-theme="paper"] .chip { background: rgba(20,17,12,0.025); }
:root[data-theme="paper"] .chip:hover { color: var(--text-1); border-color: var(--border-2); background: rgba(20,17,12,0.05); }
:root[data-theme="paper"] .lift:hover { background: var(--bg-elev-2); border-color: var(--border-2); }
:root[data-theme="paper"] .pg-track { background: rgba(20,17,12,0.08); }
:root[data-theme="paper"] .range { background: rgba(20,17,12,0.10); }
:root[data-theme="paper"] .range::-webkit-slider-thumb { border-color: var(--bg-elev-1); }
:root[data-theme="paper"] .seg > button { color: var(--text-3); }
:root[data-theme="paper"] .seg > button.is-on { color: var(--text-1); background: var(--bg-elev-1); }

/* grain texture too strong on paper */
:root[data-theme="paper"] body::before { display: none; }

/* status-generating border still uses accent — OK */

/* ============================================================
   RESPONSIVE — narrow viewports (tablet portrait / mobile)
   ============================================================ */
@media (max-width: 900px) {
  /* Hide sidebar — layout shifts to full-width single column */
  aside { display: none !important; }

  /* Topbar: collapse breadcrumb label + show only project name + stepper */
  .topbar-breadcrumb-label { display: none; }

  /* Stepper: allow horizontal scroll instead of overflow off-screen */
  .pipeline-stepper-wrap {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pipeline-stepper-wrap::-webkit-scrollbar { display: none; }
}

@media (max-width: 640px) {
  /* Very narrow: hide the stage-rail too so content gets full width */
  .stage-rail-wrap { display: none !important; }
  /* Reduce padding on main content column */
  .main-content-col { padding-left: 16px !important; padding-right: 16px !important; }
  /* 5-column frame grid → 3 columns */
  .frame-grid { grid-template-columns: repeat(3, 1fr) !important; }
  /* 2-column publish → single column */
  .publish-grid { grid-template-columns: 1fr !important; }
  /* HeroStrip: stack thumbnail + content vertically, hide wide action column */
  .hero-flex { flex-wrap: wrap !important; }
  .hero-actions { display: none !important; }
  /* Brief grid: single column */
  .brief-grid { grid-template-columns: 1fr !important; }
  .brief-aside { border-left: none !important; border-top: 1px solid var(--border) !important; padding-left: 0 !important; padding-top: 16px !important; margin-top: 8px !important; }
}