/* =====================================================================
   STITCH OVERLAY  —  Applies AdCreative.ai-style left rail, glass cards,
   step badges, terracotta accents, and sticky bottom action bar on top
   of the existing E4E Studio app. Loaded AFTER style.css so it wins.
   ===================================================================== */

:root {
  --st-surface:        #fdfaf8;
  --st-card:           #ffffff;
  --st-soft:           #faf5f2;
  --st-warm:           #fff1ed;
  --st-terra:          #C4522A;
  --st-terra-dark:     #A8451F;
  --st-terra-50:       #ffdbd0;
  --st-teal:           #274758;
  --st-version:        #0F7A6E; /* Compare-Images version-picker selection/vote accent — registered token (was a raw hex scattered inline) */
  --st-olive:          #7A823A;
  --st-red:            #D93020;
  --st-recover:        #274758;
  --st-text:           #1A1A1A;
  --st-text-sub:       #3A3A3A;
  --st-text-muted:     #767676;
  --st-text-dim:       #A8A8A8;
  --st-border:         #ebd5cf;
  --st-border-light:   #f4ded8;
  --st-shadow-card:    0 1px 3px 0 rgba(0,0,0,0.05);
  --st-shadow-active:  0 4px 20px rgba(196,82,42,0.15);
  --st-rail-w:         260px;
  --st-bottombar-h:    72px;
  /* Semantic status tokens (dashboard state machine, audit verbs, QA tiers).
     Light theme reuses the brand hexes; dark theme brightens them for contrast
     without touching brand-identity usage (chips, bar fills keep exact hexes). */
  --st-ok:             #7A823A;
  --st-danger:         #D93020;
  --st-info:           #274758;
  --st-warn:           #E07B2A;
  --st-neutral:        #8C8C8C;
  --st-rated:          #7B3FA0;
  --st-mono:           ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --st-surface:        #0F1115;
  --st-card:           #15171C;
  --st-version:        #2FBFAE; /* brightened for dark ground */
  --st-soft:           #1A1D24;
  --st-warm:           #2A1F1A;
  --st-text:           #F5F5F5;
  --st-text-sub:       #C0C0C0;
  --st-text-muted:     #8C8C8C;
  --st-text-dim:       #5A5A5A;
  --st-border:         #2A2D34;
  --st-border-light:   #1F2228;
  --st-shadow-card:    0 1px 3px 0 rgba(0,0,0,0.3);
  --st-ok:             #9DA65A;
  --st-danger:         #F0604F;
  --st-info:           #7FA6BC;
  --st-warn:           #F0964F;
  --st-neutral:        #9A9A9A;
  --st-rated:          #B586D6;
}

/* ── Dark theme guard for JS-built overlays ──────────────────────────────────
   Dozens of JS-rendered popovers/modals hardcode `background:#fff` and dark
   text colors inline. In dark mode the CSS variables flip but those inline
   styles don't — producing light text on white cards (invisible) or dark text
   on dark cards. These attribute selectors flip both at the source. */
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] section[style*="background:#fff"] {
  background: var(--st-card) !important;
}
[data-theme="dark"] button[style*="background:#fff"],
[data-theme="dark"] a[style*="background:#fff"] {
  background: var(--st-soft) !important;
  color: var(--st-text) !important;
}
[data-theme="dark"] [style*="color:#1a1a1a"],
[data-theme="dark"] [style*="color: #1a1a1a"],
[data-theme="dark"] [style*="color:#3a3a3a"],
[data-theme="dark"] [style*="color:#1A1A1A"],
[data-theme="dark"] [style*="color:#3A3A3A"] {
  color: var(--st-text) !important;
}

/* Global font override — Plus Jakarta Sans across the whole app */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--st-surface);
  -webkit-font-smoothing: antialiased;
}
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 20px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------
   HIDE the original top nav, push content to make room for the rail
   --------------------------------------------------------------------- */
body.stitch-shell .dash-nav { display: none !important; }
body.stitch-shell { padding-left: var(--st-rail-w); padding-bottom: var(--st-bottombar-h); }

/* ---------------------------------------------------------------------
   SCROLLING FIX — original app locked body to 100vh and Studio view to
   overflow: hidden. With my new entry-buckets section, the page now grows
   taller than the viewport, so we need to unlock scrolling at every level.

   Strategy:
   - The .view container becomes the scroll surface (it already has
     overflow-y: auto via the .view base rule).
   - #view-meta-ads must NOT override that with overflow: hidden.
   - .layout inside Studio drops its fixed height — content flows.
   - Sidebar becomes sticky (stays in view as user scrolls).
   --------------------------------------------------------------------- */

/* The Studio view itself: let .view's natural auto-scroll handle it */
body.stitch-shell #view-meta-ads {
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Standalone modes (Education / Brand / Problem) — hide regular Studio chrome.
   The mode's own panel (entry-config) becomes the entire workspace. */
body.stitch-shell.stitch-standalone #view-meta-ads .layout { display: none !important; }
body.stitch-shell.stitch-standalone .st-bottombar { display: none !important; }
body.stitch-shell.stitch-standalone #st-quickstart { display: none !important; }
body.stitch-shell.stitch-standalone #view-meta-ads {
  padding-bottom: 60px !important;
}

/* The horizontal split (sidebar + main) — auto-grows with content */
body.stitch-shell #view-meta-ads .layout {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  align-items: flex-start;
  flex: 0 0 auto;  /* don't stretch to fill — let content size it */
}

/* Sticky sidebar — visible while user scrolls main content */

/* Main content area — flows naturally, no height cap */
body.stitch-shell #view-meta-ads .main {
  overflow: visible !important;
  height: auto !important;
  min-height: auto;
  flex: 1;
}

/* Inner studio split layout — flow naturally */
body.stitch-shell .studio-split {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* On mobile, the rail becomes a real drawer: full dynamic-viewport height,
   independently scrollable, safe-area aware, with backdrop + scroll lock. */
@media (max-width: 900px) {
  body.stitch-shell { padding-left: 0; }
  .st-rail {
    transform: translateX(-100%);
    transition: transform 0.25s;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;                       /* whole drawer scrolls — Settings/Theme always reachable */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(env(safe-area-inset-bottom), 18px);
    width: min(86vw, 300px);
  }
  .st-rail.st-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.18); }
  /* Nav no longer fights the drawer for scroll — single scroll context */
  .st-rail .st-rail-nav { overflow-y: visible; flex: none; min-height: 0; }
  .st-bottombar { left: 0 !important; }
  /* Body scroll lock while the drawer is open */
  body.st-drawer-open { overflow: hidden; }
}

/* Shared drawer backdrop — created lazily by stToggleRail */
.st-drawer-backdrop {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(10, 10, 12, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.st-drawer-backdrop.show { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------------
   LEFT RAIL
   --------------------------------------------------------------------- */
.st-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--st-rail-w);
  background: var(--st-card); border-right: 1px solid var(--st-border-light);
  padding: 18px; display: flex; flex-direction: column; z-index: 90;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.st-rail-brand {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 22px;
}
.st-rail-logo {
  width: 32px; height: 32px; border-radius: 6px; background: var(--st-terra);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.st-rail-logo .material-symbols-outlined { font-variation-settings: "FILL" 1; font-size: 18px; }
.st-rail-title { font-size: 15px; font-weight: 900; letter-spacing: -0.01em; line-height: 1; color: var(--st-text); }
.st-rail-sub { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--st-text-muted); margin-top: 3px; }

.st-rail-nav { flex: 1; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow-y: auto; }
.st-rail-nav a, .st-rail-nav button {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  color: var(--st-text-muted); text-decoration: none; border-radius: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  transition: color 0.15s, background 0.15s;
  position: relative;
  border: none; background: none; cursor: pointer; width: 100%; text-align: left;
  font-family: inherit;
}
.st-rail-nav a:hover, .st-rail-nav button:hover { color: var(--st-text); background: var(--st-soft); }
.st-rail-nav a.active, .st-rail-nav button.active {
  color: var(--st-terra); background: rgba(196,82,42,0.07);
}
.st-rail-nav a.active::before, .st-rail-nav button.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: var(--st-terra); border-radius: 0 2px 2px 0;
}
.st-rail-nav a .material-symbols-outlined,
.st-rail-nav button .material-symbols-outlined { font-size: 18px; }

/* Rail section labels — group nav items into Core / Assets / Tools / Settings */
.st-rail-section-label {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--st-text-dim);
  padding: 14px 14px 6px;
  border-top: 1px solid var(--st-border-light);
  margin-top: 4px;
}
.st-rail-section-label:first-of-type {
  border-top: none; margin-top: 0; padding-top: 4px;
}

/* Shared style for rail-foot tools/settings links (replaces repeated inline styles) */
.st-rail-foot-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  color: var(--st-text-muted);
  background: none; border: none; cursor: pointer;
  text-decoration: none;
  font-family: inherit; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  width: 100%; text-align: left; border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.st-rail-foot-link:hover { color: var(--st-text); background: var(--st-soft); }

.st-rail-cta {
  margin: 14px 0 10px; padding: 12px 14px; background: var(--st-terra);
  color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; border-radius: 4px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s;
  font-family: inherit;
}
.st-rail-cta:hover { background: var(--st-terra-dark); }
.st-rail-cta-outline {
  margin: 0 0 10px; padding: 10px 14px; background: transparent;
  color: var(--st-terra); font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; border-radius: 4px; border: 1.5px solid var(--st-terra); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s, color 0.15s; font-family: inherit;
}
.st-rail-cta-outline:hover { background: var(--st-terra); color: #fff; }
.st-rail-chat-btn { border-color: var(--st-indigo, #6366f1); color: var(--st-indigo, #6366f1); margin-top: 0; }
.st-rail-chat-btn:hover { background: var(--st-indigo, #6366f1); color: #fff; }
.st-rail-chat-btn.active { background: var(--st-indigo, #6366f1); color: #fff; }

/* ── AI Chat Panel ──────────────────────────────────────────────────────────── */
.ai-chat-panel {
  position: fixed; bottom: 24px; left: 248px; width: 360px; max-height: 520px;
  background: var(--st-card, #fff); border: 1px solid var(--st-border, #e8e8e8);
  border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.14);
  display: flex; flex-direction: column; z-index: 1200;
  animation: chatSlideIn .2s ease;
}
@keyframes chatSlideIn { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: none; } }
.ai-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--st-border, #e8e8e8);
  flex-shrink: 0;
}
.ai-chat-title { font-size: 13px; font-weight: 700; color: var(--st-text, #222); display: flex; align-items: center; }
.ai-chat-close { background: none; border: none; cursor: pointer; color: var(--st-text-muted,#999); font-size: 16px; padding: 0 2px; line-height: 1; }
.ai-chat-close:hover { color: var(--st-text,#222); }
.ai-chat-messages {
  flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.ai-chat-msg { display: flex; }
.ai-chat-msg--user { justify-content: flex-end; }
.ai-chat-msg--ai { justify-content: flex-start; }
.ai-chat-bubble {
  max-width: 88%; padding: 9px 13px; border-radius: 14px;
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.ai-chat-msg--user .ai-chat-bubble { background: var(--st-terra, #D93020); color: #fff; border-radius: 14px 14px 3px 14px; }
.ai-chat-msg--ai .ai-chat-bubble { background: var(--st-soft, #f4f4f6); color: var(--st-text,#222); border-radius: 14px 14px 14px 3px; }
.ai-chat-msg--ai .ai-chat-bubble.streaming::after { content: '▌'; animation: blink .7s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }
.ai-chat-footer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px 12px; border-top: 1px solid var(--st-border,#e8e8e8); flex-shrink: 0;
}
.ai-chat-input {
  flex: 1; resize: none; border: 1px solid var(--st-border,#e8e8e8); border-radius: 10px;
  padding: 8px 11px; font-size: 13px; font-family: inherit; outline: none;
  background: var(--st-soft,#f4f4f6); color: var(--st-text,#222); line-height: 1.4;
}
.ai-chat-input:focus { border-color: var(--st-indigo,#6366f1); background: #fff; }
.ai-chat-send {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--st-indigo,#6366f1); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .14s;
}
.ai-chat-send:hover { background: #4f52e0; }
.ai-chat-send:disabled { background: var(--st-border,#e8e8e8); cursor: default; }

.ai-chat-tour-btn {
  background: transparent; border: 1px solid rgba(99,102,241,.35); color: var(--st-indigo,#6366f1);
  border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .14s;
}
.ai-chat-tour-btn:hover { background: rgba(99,102,241,.1); }

.ai-chat-chips {
  padding: 8px 12px 6px; display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--st-border,#e8e8e8);
}
.ai-chip {
  padding: 5px 11px; border-radius: 20px; border: 1px solid var(--st-border,#e8e8e8);
  background: var(--st-soft,#f4f4f6); color: var(--st-text,#333); font-size: 11.5px;
  font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.ai-chip:hover { background: var(--st-indigo,#6366f1); color: #fff; border-color: var(--st-indigo,#6366f1); }

/* Element highlight pulse — triggered by AI navigation hints */
@keyframes aiPulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.7), 0 0 0 0 rgba(99,102,241,.4); outline-color: #6366f1; }
  50%  { box-shadow: 0 0 0 8px rgba(99,102,241,0), 0 0 0 16px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); outline-color: transparent; }
}
.ai-nav-highlight {
  outline: 2px solid #6366f1 !important;
  outline-offset: 3px !important;
  animation: aiPulse 1s ease-out 3 !important;
  border-radius: 4px;
  z-index: 9999;
  position: relative;
}

.st-rail-foot { padding-top: 14px; border-top: 1px solid var(--st-border-light); flex-shrink: 0; }
.st-rail-user {
  display: flex; align-items: center; gap: 10px; padding: 12px 6px 0;
  margin-top: 10px; border-top: 1px solid var(--st-border-light);
}
.st-rail-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--st-olive), var(--st-teal));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.st-rail-user-name { font-size: 12px; font-weight: 800; line-height: 1.1; color: var(--st-text); }
.st-rail-user-role { font-size: 9px; color: var(--st-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* Mobile menu toggle */
.st-rail-toggle {
  display: flex; position: fixed; top: 12px; left: 12px; z-index: 100;
  background: var(--st-card); border: 1px solid var(--st-border);
  width: 38px; height: 38px; border-radius: 6px; cursor: pointer;
  align-items: center; justify-content: center; color: var(--st-text);
  box-shadow: var(--st-shadow-card);
  transition: left 0.22s ease, background 0.15s, color 0.15s;
}
.st-rail-toggle:hover { background: var(--st-soft); color: var(--st-terra); }
/* Position toggle inside the rail when expanded, near the rail edge when collapsed */
body:not(.st-rail-collapsed) .st-rail-toggle {
  left: calc(var(--st-rail-w) - 50px);
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.05);
}
body.st-rail-collapsed .st-rail-toggle {
  left: 12px;
  background: var(--st-terra);
  color: #fff; border-color: var(--st-terra);
}
body.st-rail-collapsed .st-rail-toggle:hover { background: var(--st-terra-dark, #A8451F); color: #fff; }

/* ══════════════════ NEW CONTENT-STUDIO DASHBOARD ═══════════════════════════ */

/* ── KPI Tile — insurance-card style (icon top-left, value+label bottom) ── */
.cs-kpi {
  --kpi-accent: #C4522A;
  --kpi-bg: #EEF2F4;
  --kpi-icon-bg: #C4522A;
  --kpi-text: var(--st-text);
  --kpi-muted: var(--st-text-muted);
  background: var(--kpi-bg);
  border: none;
  border-radius: 14px;
  padding: 14px 16px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 110px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: filter .18s ease, transform .18s ease;
}
.cs-kpi:hover { filter: brightness(.95); transform: translateY(-2px); }

/* Per-card colours */
.cs-kpi--terra { --kpi-icon-bg: #C4522A; --kpi-bg: #F2EDEA; }
.cs-kpi--olive { --kpi-icon-bg: #7A823A; --kpi-bg: #EDF0E6; }
.cs-kpi--teal  { --kpi-icon-bg: #274758; --kpi-bg: #E6ECF0; }
.cs-kpi--money { --kpi-icon-bg: #2A8C4A; --kpi-bg: #E6F2EB; }
.cs-kpi--alert { --kpi-icon-bg: #D93020; --kpi-bg: #F5E8E6; }

/* Highlighted / primary card — dark fill like the "Omnia" card */
.cs-kpi--featured {
  --kpi-bg: #274758;
  --kpi-text: #fff;
  --kpi-muted: rgba(255,255,255,.65);
}

/* Icon badge — top-left */
.cs-kpi-icon-wrap {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--kpi-icon-bg);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  align-self: flex-start;
}

/* Bottom area */
.cs-kpi-body { display: flex; flex-direction: column; gap: 2px; }

/* Big value */
.cs-kpi-value {
  font-size: 24px; font-weight: 900; color: var(--kpi-text);
  letter-spacing: -0.03em; line-height: 1;
}

/* Label — card title */
.cs-kpi-label {
  font-size: 11.5px; font-weight: 600; color: var(--kpi-muted);
  letter-spacing: 0; text-transform: none;
}

/* ── Upload & Generate modal ── */
.ugm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 9500; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.ugm-modal {
  background: var(--st-card, #fff); border-radius: 18px;
  padding: 28px 28px 22px; width: 580px; max-width: calc(100vw - 32px);
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  font-family: 'Plus Jakarta Sans', sans-serif;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.ugm-title { font-size: 17px; font-weight: 800; color: var(--st-text); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.ugm-dropzone {
  border: 2px dashed var(--st-border-light, #ddd); border-radius: 12px;
  padding: 28px 16px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; margin-bottom: 16px; position: relative;
}
.ugm-dropzone:hover, .ugm-dropzone.drag-over { border-color: #C4522A; background: rgba(196,82,42,.04); }
.ugm-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ugm-dz-icon { font-size: 28px; margin-bottom: 6px; }
.ugm-dz-text { font-size: 13px; color: var(--st-text-muted); font-weight: 600; }
.ugm-dz-sub { font-size: 11px; color: var(--st-text-muted); margin-top: 3px; }
.ugm-preview-wrap { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; }
.ugm-preview { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--st-border-light); flex-shrink: 0; }
.ugm-preview-name { font-size: 11.5px; font-weight: 600; color: var(--st-text); }
.ugm-preview-size { font-size: 10.5px; color: var(--st-text-muted); margin-top: 2px; }
.ugm-section-label { font-size: 11px; font-weight: 700; color: var(--st-text-muted); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.ugm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.ugm-action-card {
  border: 2px solid var(--st-border-light, #e8e8e8); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: border-color .14s, background .14s;
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
}
.ugm-action-card:hover { border-color: #C4522A; background: rgba(196,82,42,.03); }
.ugm-action-card.selected { border-color: #C4522A; background: rgba(196,82,42,.07); }
.ugm-action-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ccc; flex-shrink: 0; margin-top: 2px; transition: border-color .14s, background .14s; }
.ugm-action-card.selected .ugm-action-radio { border-color: #C4522A; background: #C4522A; box-shadow: inset 0 0 0 3px #fff; }
.ugm-action-body { flex: 1; min-width: 0; }
.ugm-action-name { font-size: 13px; font-weight: 700; color: var(--st-text); }
.ugm-action-desc { font-size: 11px; color: var(--st-text-muted); margin-top: 2px; line-height: 1.4; }
.ugm-row { display: flex; gap: 12px; margin-bottom: 18px; }
.ugm-field { flex: 1; }
.ugm-label { font-size: 11px; font-weight: 700; color: var(--st-text-muted); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.ugm-select {
  width: 100%; padding: 8px 10px; border: 1.5px solid var(--st-border-light); border-radius: 8px;
  background: var(--st-bg, #fff); color: var(--st-text); font-size: 13px; font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif; cursor: pointer;
}
.ugm-footer { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.ugm-generate-btn {
  flex: 1; padding: 11px 20px; border-radius: 10px; background: #C4522A; color: #fff;
  font-size: 13px; font-weight: 800; border: none; cursor: pointer; font-family: inherit;
  transition: opacity .14s; letter-spacing: -.01em;
}
.ugm-generate-btn:disabled { opacity: .45; cursor: not-allowed; }
.ugm-cancel-btn {
  padding: 11px 18px; border-radius: 10px; background: var(--st-soft, #f0f2f4);
  color: var(--st-text-muted); font-size: 13px; font-weight: 600; border: none; cursor: pointer; font-family: inherit;
}
.ugm-progress { margin-top: 16px; padding: 14px; background: var(--st-soft, #f4f4f4); border-radius: 10px; }
.ugm-progress-msg { font-size: 12px; font-weight: 600; color: var(--st-text); margin-bottom: 8px; }
.ugm-progress-bar { height: 5px; background: var(--st-border-light); border-radius: 5px; overflow: hidden; }
.ugm-progress-fill { height: 100%; background: #C4522A; border-radius: 5px; transition: width .4s; }
.ugm-results { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ugm-result-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--st-border-light); cursor: pointer; transition: opacity .15s; }
.ugm-result-img:hover { opacity: .85; }
.ugm-upload-btn {
  padding: 5px 12px; border-radius: 7px; background: transparent;
  border: 1.5px solid #C4522A; color: #C4522A; font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: 'Jost', sans-serif; transition: all .13s;
  white-space: nowrap;
}
.ugm-upload-btn:hover { background: #C4522A; color: #fff; }

/* Sub-text hidden by default — icon cards don't need it */
.cs-kpi-sub { display: none; }
.cs-kpi-top  { display: none; }
.cs-kpi-footer { display: none; }
.cs-kpi-arrow  { display: none; }

/* ── Gallery sort buttons ── */
.sgal-sort-group {
  display: flex; gap: 2px;
  background: var(--st-soft, #f0f2f4); border-radius: 8px; padding: 2px;
}
.sgal-sort-btn {
  padding: 4px 11px; border-radius: 6px; border: none;
  background: transparent; color: var(--st-text-muted, #888);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  font-family: 'Jost', sans-serif; transition: all .14s;
  white-space: nowrap;
}
.sgal-sort-btn:hover { color: var(--st-text, #333); }
.sgal-sort-btn.on {
  background: var(--st-card, #fff); color: var(--st-text, #222);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ── Dashboard shell — toolbar, sections, grids (second pass) ──
   IA: pipeline → action-required proposals → recent output → diagnostics
   (pathway | patterns) → system tier (audit | rules). One content column,
   capped for readability on wide monitors. */
.cs-dash { max-width: 1280px; margin: 0 auto; }
.cs-dash-toolbar { align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-dash-headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.cs-dash-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--st-text); margin: 0; line-height: 1.2; }
.cs-dash-refreshed {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--st-mono); font-size: 10.5px; font-weight: 500;
  color: var(--st-text-muted); font-variant-numeric: tabular-nums;
}
/* Dot inherits currentColor — JS flips the span red on load failure and the dot follows. */
.cs-dash-refreshed::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.cs-dash-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.cs-dash-section { margin-bottom: 16px; }
.cs-dash-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
/* System tier: audit log needs the wider column for its mono columns */
.cs-dash-cols--admin { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 980px) { .cs-dash-cols { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .cs-dash-cols--admin { grid-template-columns: 1fr; } }

/* The one signature: a single dot grammar carries every status/identity color
   on the dashboard — chrome itself stays colorless. The pipeline flow bar
   below extends the same grammar into one proportional band. */
.cs-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.cs-panel {
  background: var(--st-card); border: 1px solid var(--st-border-light);
  border-radius: 10px; padding: 18px 20px;
  box-shadow: var(--st-shadow-card);
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-width: 0;
}
.cs-panel--attention { border-left: 3px solid var(--st-terra); }
.cs-panel-head { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--st-border-light); }
.cs-panel-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cs-panel-title { font-size: 13px; font-weight: 700; color: var(--st-text); letter-spacing: -0.01em; margin: 0; line-height: 1.3; }
.cs-panel-sub { font-size: 11.5px; color: var(--st-text-muted); margin-top: 3px; line-height: 1.45; }
.cs-panel-loading { padding: 24px 8px; text-align: center; color: var(--st-text-muted); font-size: 12.5px; animation: cs-pulse 1.6s ease-in-out infinite; }
@keyframes cs-pulse { 50% { opacity: .45; } }
.cs-panel-empty { padding: 18px 10px; text-align: center; color: var(--st-text-muted); font-size: 12.5px; line-height: 1.5; }
.cs-empty-link { color: var(--st-terra); font-weight: 700; text-decoration: none; }
.cs-empty-link:hover { text-decoration: underline; }
.cs-panel-more-btn { width: 100%; margin-top: 10px; justify-content: center; }

/* Approval pipeline — proportional flow bar + five stage cells.
   The bar is the page's signature read: one glance gives the mix. */
.cs-funnel-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cs-funnel-flow {
  grid-column: 1 / -1; display: flex; gap: 2px;
  height: 10px; border-radius: 6px; overflow: hidden; margin-bottom: 4px;
}
.cs-funnel-flow-seg { flex-basis: 0; min-width: 6px; border-radius: 2px; }
.cs-funnel-cell {
  --cell-c: var(--st-neutral);
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--st-soft); border: 1px solid var(--st-border-light);
  border-radius: 8px; padding: 10px 12px 12px; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.cs-funnel-cell:hover { border-color: var(--cell-c); transform: translateY(-1px); }
.cs-funnel-cell:focus-visible { outline: 2px solid var(--st-terra); outline-offset: 2px; }
.cs-funnel-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cs-funnel-label {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--st-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-funnel-pct { font-family: var(--st-mono); font-size: 10px; color: var(--st-text-muted); font-variant-numeric: tabular-nums; }
.cs-funnel-num { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--st-text); margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1; }
.cs-funnel-meta { margin-top: 12px; font-family: var(--st-mono); font-size: 10.5px; color: var(--st-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .cs-funnel-strip { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } }

/* Agent proposals — action-required cards */
.cs-proposals-list { margin-top: 2px; }
.cs-proposal-card {
  background: var(--st-soft); border: 1px solid var(--st-border-light);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.cs-proposal-card:last-child { margin-bottom: 0; }
.cs-prop-main { flex: 1; min-width: 0; }
.cs-prop-title { font-size: 12.5px; font-weight: 700; color: var(--st-text); }
.cs-prop-body { font-size: 11.5px; color: var(--st-text-sub); margin-top: 4px; line-height: 1.5; }
.cs-prop-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cs-prop-chip {
  font-family: var(--st-mono); font-size: 9.5px; color: var(--st-text-muted);
  background: var(--st-card); border: 1px solid var(--st-border-light);
  border-radius: 4px; padding: 2px 7px; white-space: nowrap;
}
.cs-prop-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .cs-proposal-card { flex-direction: column; }
  .cs-prop-actions { justify-content: flex-start; }
}

/* Pathway bars — count + share of total, mono-aligned */
.cs-pathway-bars { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.cs-bar-row { display: grid; grid-template-columns: 140px 1fr 82px; gap: 12px; align-items: center; }
.cs-bar-label {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 12px; font-weight: 600; color: var(--st-text-sub);
}
.cs-bar-label-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-bar-track { background: var(--st-soft); border-radius: 4px; height: 8px; overflow: hidden; }
.cs-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.cs-bar-count { font-size: 12px; font-weight: 600; color: var(--st-text); text-align: right; font-family: var(--st-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-bar-pct { font-style: normal; font-size: 10px; font-weight: 500; color: var(--st-text-muted); margin-left: 6px; }

/* Patterns — tier chip + hit count on one line, suggestion below */
.cs-patterns-list { display: flex; flex-direction: column; gap: 8px; }
.cs-pattern-row { padding: 10px 12px; background: var(--st-soft); border-radius: 8px; border-left: 2px solid var(--st-neutral); }
.cs-pattern-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cs-pattern-reason { font-size: 12px; font-weight: 700; text-transform: capitalize; color: var(--st-text); }
.cs-pattern-count { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; color: var(--st-text-muted); flex-shrink: 0; font-family: var(--st-mono); font-variant-numeric: tabular-nums; }
.cs-pattern-tier { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; }
.cs-pattern-sug { font-size: 11.5px; color: var(--st-text-sub); line-height: 1.5; margin-top: 3px; }

/* Audit strip — column-aligned mono log with a sticky header, capped height
   so 20 entries never dominate the page (full history stays in "View all"). */
.cs-audit-strip { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
/* Requests & Approvals card — human-readable review/request trail. Rows are
   styled inline in csRenderReviewLog(); this is just the scroll container. */
.cs-review-log { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
.cs-review-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--st-border-light); }
.cs-review-row:last-child { border-bottom: none; }
.cs-audit-row {
  display: grid; grid-template-columns: 68px minmax(0, 1.4fr) minmax(0, .6fr) 80px 92px;
  gap: 10px; align-items: center; padding: 6px 2px;
  border-bottom: 1px solid var(--st-border-light);
  font-family: var(--st-mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.cs-audit-row:last-child { border-bottom: none; }
.cs-audit-head {
  position: sticky; top: 0; z-index: 1; background: var(--st-card);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--st-text-dim);
  padding: 0 2px 6px;
}
.cs-audit-head span:nth-child(4), .cs-audit-head span:nth-child(5) { text-align: right; }
.cs-audit-verb { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
.cs-audit-path { min-width: 0; color: var(--st-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-audit-entity { color: var(--st-text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-audit-who { color: var(--st-text-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-audit-when { color: var(--st-text-muted); text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  /* Phones: keep verb/endpoint/time; entity + user live in "View all" */
  .cs-audit-row { grid-template-columns: 60px minmax(0, 1fr) 88px; }
  .cs-audit-entity, .cs-audit-who { display: none; }
}

/* Recent thumbnails */
.cs-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cs-recent-thumb {
  border: 1px solid var(--st-border-light); border-radius: 8px; overflow: hidden;
  cursor: pointer; padding: 0; background: var(--st-card); display: flex; flex-direction: column;
  text-align: left; font-family: inherit; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cs-recent-thumb:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: var(--st-border); }
.cs-recent-thumb:focus-visible { outline: 2px solid var(--st-terra); outline-offset: 2px; }
.cs-recent-thumb img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; background: var(--st-soft); }
.cs-recent-thumb-meta { padding: 8px 10px; display: flex; align-items: center; gap: 6px; font-size: 10.5px; }
.cs-recent-thumb-brand { color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0.06em; font-size: 9px; }
.cs-recent-thumb-tpl { color: var(--st-text-muted); font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }

/* Active rules preview */
.cs-rules-list { display: flex; flex-direction: column; gap: 8px; }
.cs-rule-row { padding: 10px 14px; background: var(--st-soft); border-radius: 8px; border-left: 2px solid var(--st-neutral); }
.cs-rule-top { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.cs-rule-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; color: #fff; }
.cs-rule-scope { font-size: 10px; font-weight: 500; color: var(--st-text-muted); padding: 2px 7px; background: var(--st-card); border-radius: 4px; border: 1px solid var(--st-border-light); font-family: var(--st-mono); }
.cs-rule-by { font-size: 10px; color: var(--st-text-muted); margin-left: auto; white-space: nowrap; }
.cs-rule-text { font-size: 12.5px; color: var(--st-text-sub); line-height: 1.5; }
.cs-rules-more { text-align: center; margin-top: 8px; font-size: 11px; color: var(--st-text-muted); font-family: var(--st-mono); }

@media (max-width: 900px) {
  .cs-bar-row { grid-template-columns: 96px 1fr 66px; gap: 8px; }
}

/* Reduced motion: dashboard micro-interactions become instant */
@media (prefers-reduced-motion: reduce) {
  .cs-panel-loading { animation: none; }
  .cs-funnel-cell, .cs-recent-thumb, .cs-bar-fill { transition: none; }
  .cs-funnel-cell:hover, .cs-recent-thumb:hover { transform: none; box-shadow: none; }
}

/* When rail is collapsed: hide it + reclaim the space, but keep a slim
   left gutter (60px) so the floating toggle button doesn't overlap content. */
body.st-rail-collapsed { padding-left: 60px !important; transition: padding-left 0.22s ease; }
body.st-rail-collapsed .st-rail { transform: translateX(-100%); transition: transform 0.22s ease; }
body.st-rail-collapsed .st-bottombar { left: 60px !important; transition: left 0.22s ease; }
body.st-rail-collapsed #view-meta-ads .st-quickstart-dock { left: 60px !important; transition: left 0.22s ease; }
body:not(.st-rail-collapsed) { transition: padding-left 0.22s ease; }
body:not(.st-rail-collapsed) .st-bottombar { transition: left 0.22s ease; }
body:not(.st-rail-collapsed) #view-meta-ads .st-quickstart-dock { transition: left 0.22s ease; }
.st-rail { transition: transform 0.22s ease; }

/* ---------------------------------------------------------------------
   STICKY BOTTOM ACTION BAR (shown for Studio view)
   --------------------------------------------------------------------- */
.st-bottombar {
  position: fixed; left: var(--st-rail-w); right: 0; bottom: 0; height: var(--st-bottombar-h);
  background: var(--st-card); border-top: 1px solid var(--st-border-light);
  display: none; align-items: center; gap: 16px; padding: 0 28px; z-index: 80;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
body.stitch-shell.stitch-studio .st-bottombar { display: flex; }
.st-bb-config { display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap; }
.st-bb-config-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--st-text-muted);
}
.st-bb-config-crumb {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--st-soft); border-radius: 6px; font-size: 12px;
  font-weight: 600; color: var(--st-text);
}
.st-bb-crumb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.st-bb-crumb-dot.refuel   { background: var(--st-olive); }
.st-bb-crumb-dot.recharge { background: var(--st-red); }
.st-bb-crumb-dot.recover  { background: var(--st-recover); }
.st-bb-crumb-sep { color: var(--st-text-dim); }
.st-bb-estimate {
  font-size: 11.5px; color: var(--st-text-muted); font-weight: 600; white-space: nowrap;
}
.st-bb-estimate strong { color: var(--st-text); font-weight: 800; margin-left: 4px; }
.st-bb-cta {
  background: var(--st-terra); color: #fff; border: none; cursor: pointer;
  padding: 12px 22px; border-radius: 6px; font-family: inherit;
  font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 8px;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.st-bb-cta:hover { background: var(--st-terra-dark); }
.st-bb-cta:active { transform: scale(0.97); }
.st-bb-cta:disabled { opacity: 0.4; cursor: not-allowed; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Brief Bar preset dropdown (Sprint 1.3) */
#st-brief-presets-menu.open { display: flex !important; }
#st-brief-presets-menu button {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  border-radius: 6px; text-align: left; color: var(--st-text);
  transition: background 0.12s;
}
#st-brief-presets-menu button:hover { background: var(--st-soft); }
#st-brief-presets-menu button .preset-emoji {
  font-size: 16px; line-height: 1.4; flex-shrink: 0;
}
#st-brief-presets-menu button .preset-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
#st-brief-presets-menu button .preset-title {
  font-size: 12.5px; font-weight: 700;
}
#st-brief-presets-menu button .preset-sub {
  font-size: 10.5px; color: var(--st-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#st-brief-input:focus {
  border-color: var(--st-terra) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(196,82,42,0.08);
}

/* ─── STEP PROGRESS BAR (Tier 2.G) ──────────────────────────────────────────── */
.st-step-progress {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; margin: 0 0 18px;
  background: var(--st-card); border: 1px solid var(--st-border-light);
  border-radius: 8px; font-family: 'Plus Jakarta Sans', sans-serif;
}
.st-step-progress-label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--st-text-muted);
  margin-right: 4px; white-space: nowrap;
}
.st-step-progress-dots {
  display: flex; align-items: center; gap: 6px; flex: 1;
}
.st-step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--st-soft); border: 2px solid var(--st-border-light);
  color: var(--st-text-dim); font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  cursor: default; transition: all 0.15s;
}
.st-step-dot.done {
  background: var(--st-terra); border-color: var(--st-terra); color: #fff;
}
.st-step-dot.current {
  background: #fff; border-color: var(--st-terra); color: var(--st-terra);
  box-shadow: 0 0 0 4px rgba(196,82,42,0.12);
}
.st-step-line {
  flex: 1; height: 2px; background: var(--st-border-light); border-radius: 1px;
  min-width: 12px; transition: background 0.15s;
}
.st-step-line.done { background: var(--st-terra); }
.st-step-current-label {
  font-size: 11.5px; font-weight: 700; color: var(--st-text-sub);
  margin-left: auto; white-space: nowrap;
}

/* ─── PERSONA SWAP BUTTON (Sprint 2.3) ──────────────────────────────────────── */
.st-card-swap-btn {
  position: absolute; top: 8px; left: 8px;
  display: flex; align-items: center; gap: 4px;
  padding: 5px 9px; background: rgba(0,0,0,0.55); color: #fff;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 99px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10.5px; font-weight: 700;
  cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s;
  backdrop-filter: blur(4px); z-index: 5;
}
.sgal2-card:hover .st-card-swap-btn { opacity: 1; }
.st-card-swap-btn:hover { background: var(--st-terra); }

/* Resize button (Tier 2.J) — top-right twin to Swap */
.st-card-resize-btn {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 4px;
  padding: 5px 9px; background: rgba(0,0,0,0.55); color: #fff;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 99px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10.5px; font-weight: 700;
  cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s;
  backdrop-filter: blur(4px); z-index: 5;
}
.sgal2-card:hover .st-card-resize-btn { opacity: 1; }
.st-card-resize-btn:hover { background: var(--st-teal); }

/* ─── INLINE TUNE PANEL (Sprint 2.2) ─────────────────────────────────────────
   Right-side dockable panel that opens when user clicks a gallery card.
   Holds editable headline/body/CTA + persona swap + AI re-edit instruction. */
.st-tune-panel {
  position: fixed; top: 64px; right: -440px; bottom: 0; width: 420px;
  background: var(--st-card); border-left: 1px solid var(--st-border-light);
  box-shadow: -8px 0 24px rgba(0,0,0,0.08);
  z-index: 60; transition: right 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto; font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 0;
}
.st-tune-panel.open { right: 0; }
.st-tune-head {
  position: sticky; top: 0; background: var(--st-card); z-index: 2;
  padding: 16px 20px; border-bottom: 1px solid var(--st-border-light);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.st-tune-title {
  font-size: 14px; font-weight: 800; color: var(--st-text); letter-spacing: -0.01em;
}
.st-tune-eyebrow {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--st-terra); margin-bottom: 3px;
}
.st-tune-close {
  background: none; border: none; cursor: pointer; color: var(--st-text-muted);
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.st-tune-close:hover { background: var(--st-soft); color: var(--st-text); }

.st-tune-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

.st-tune-preview {
  width: 100%; aspect-ratio: 4/5; background: var(--st-soft); border-radius: 8px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.st-tune-preview img { width: 100%; height: 100%; object-fit: cover; }

.st-tune-field { display: flex; flex-direction: column; gap: 5px; }
.st-tune-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--st-text-muted);
}
.st-tune-counter {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  font-weight: 500; color: var(--st-text-dim);
}
.st-tune-counter.warn { color: #f0c674; }
.st-tune-counter.over { color: #ff7a6b; font-weight: 700; }
.st-tune-input, .st-tune-textarea, .st-tune-select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--st-border-light);
  border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--st-text);
  background: var(--st-soft); outline: none; transition: border-color 0.15s;
}
.st-tune-textarea { min-height: 60px; resize: vertical; line-height: 1.45; }
.st-tune-input:focus, .st-tune-textarea:focus, .st-tune-select:focus {
  border-color: var(--st-terra); background: #fff;
}
.st-tune-input.over, .st-tune-textarea.over { border-color: #ff7a6b; }
.st-tune-headline-input {
  font-weight: 800; letter-spacing: -0.005em; text-transform: uppercase;
}

.st-tune-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.st-tune-pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.st-tune-pill {
  padding: 6px 10px; border: 1px solid var(--st-border-light); background: var(--st-card);
  border-radius: 99px; font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; color: var(--st-text); transition: all 0.12s;
}
.st-tune-pill:hover { border-color: var(--st-text); }
.st-tune-pill.on {
  background: var(--st-terra); color: #fff; border-color: var(--st-terra);
}

.st-tune-section-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--st-text-muted); margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--st-border-light);
}

.st-tune-ai-quick {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.st-tune-ai-quick button {
  font-family: inherit; font-size: 10.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 99px; cursor: pointer;
  background: var(--st-warm); border: 1px dashed var(--st-terra); color: var(--st-terra);
}
.st-tune-ai-quick button:hover { background: var(--st-terra); color: #fff; }

.st-tune-actions {
  position: sticky; bottom: 0; background: var(--st-card);
  border-top: 1px solid var(--st-border-light);
  padding: 14px 20px; display: flex; gap: 8px;
}
.st-tune-actions button { flex: 1; }
.st-tune-actions .st-tune-approve {
  background: var(--st-terra); color: #fff; border: none;
  padding: 11px 14px; border-radius: 6px; font-family: inherit;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.st-tune-actions .st-tune-approve:hover { background: var(--st-terra-dark); }
.st-tune-actions .st-tune-secondary {
  background: var(--st-card); border: 1px solid var(--st-border-light); color: var(--st-text);
  padding: 11px 12px; border-radius: 6px; font-family: inherit;
  font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.st-tune-actions .st-tune-secondary:hover { border-color: var(--st-text); }

@media (max-width: 700px) {
  .st-tune-panel { width: 100%; right: -100%; }
}

/* ─── IMAGE DETAIL MODAL (Krea/Higgsfield-style) ───────────────────────────── */
.st-detail-bg {
  position: fixed; inset: 0; background: rgba(10,10,12,0.78); backdrop-filter: blur(8px);
  z-index: 200; display: none; align-items: stretch; padding: 20px;
}
.st-detail-bg.open { display: flex; }
.st-detail {
  background: var(--st-card); border-radius: 14px; overflow: hidden;
  width: 100%; max-width: 1280px; max-height: 95vh; margin: auto;
  display: grid; grid-template-columns: 1fr 360px; gap: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
@media (max-width: 900px) {
  .st-detail { grid-template-columns: 1fr; max-height: 100vh; }
}
.st-detail-imgcol {
  background: #0c0c0e; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; min-height: 360px;
  position: relative;
}
.st-detail-img {
  max-width: 100%; max-height: 70vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.st-detail-variants {
  display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; max-width: 100%;
  padding: 4px;
}
.st-detail-variants img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 4px;
  cursor: pointer; opacity: 0.6; transition: all 0.15s;
  border: 2px solid transparent;
}
.st-detail-variants img:hover { opacity: 1; }
.st-detail-variants img.current { opacity: 1; border-color: var(--st-terra); }
.st-detail-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: inherit; backdrop-filter: blur(4px);
}
.st-detail-close:hover { background: rgba(255,255,255,0.16); }

.st-detail-panel {
  background: var(--st-card); display: flex; flex-direction: column;
  border-left: 1px solid var(--st-border-light); overflow-y: auto;
}
.st-detail-section {
  padding: 18px 22px; border-bottom: 1px solid var(--st-border-light);
}
.st-detail-section:last-child { border-bottom: none; }
.st-detail-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--st-text-muted); margin-bottom: 6px;
}
.st-detail-title {
  font-size: 16px; font-weight: 800; color: var(--st-text); letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.st-detail-meta-row {
  display: flex; align-items: center; gap: 10px; font-size: 11.5px;
  color: var(--st-text-sub); margin-top: 4px; flex-wrap: wrap;
}
.st-detail-meta-row .pill {
  background: var(--st-soft); padding: 3px 9px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; color: var(--st-text);
}
.st-detail-prompt {
  background: var(--st-soft); border-radius: 6px; padding: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.5;
  color: var(--st-text-sub); max-height: 220px; overflow-y: auto; white-space: pre-wrap;
  word-break: break-word;
}
.st-detail-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.st-detail-action-btn {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--st-soft); border: 1px solid var(--st-border-light);
  border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12px;
  font-weight: 700; color: var(--st-text); transition: all 0.15s;
  justify-content: center;
}
.st-detail-action-btn:hover { background: var(--st-warm); border-color: var(--st-terra); color: var(--st-terra); }
.st-detail-action-btn .material-symbols-outlined { font-size: 16px; }
.st-detail-action-btn.primary { background: var(--st-terra); color: #fff; border-color: var(--st-terra); }
.st-detail-action-btn.primary:hover { background: var(--st-terra-dark); }
.st-detail-action-btn.danger { color: var(--st-red); border-color: rgba(217,48,32,0.3); }
.st-detail-action-btn.danger:hover { background: rgba(217,48,32,0.08); }

.st-detail-remix-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--st-border-light);
  border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  line-height: 1.5; min-height: 90px; resize: vertical; background: var(--st-soft);
  color: var(--st-text); outline: none;
}
.st-detail-remix-input:focus { border-color: var(--st-terra); }

.st-detail-log {
  background: #1a1a1a; color: #c4c4c4; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; border-radius: 6px; padding: 12px; max-height: 200px;
  overflow-y: auto; display: none;
}
.st-detail-log.show { display: block; }

/* ─── HEALTH BANNER (Phase 5) ───────────────────────────────────────────────── */
/* Compact toast — bottom-right corner. Doesn't block content. */
.st-health-banner {
  position: fixed; bottom: 90px; right: 16px;
  max-width: 380px; min-width: 280px;
  z-index: 70; display: none; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--st-border-light); border-left: 4px solid #f0c674;
  padding: 10px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px;
}
@media (max-width: 900px) {
  .st-health-banner { left: 16px; right: 16px; max-width: none; bottom: 100px; }
}
.st-health-banner.show { display: flex; }
.st-health-banner.error { border-color: #ff7a6b; }
.st-health-banner-icon { color: #f0c674; flex-shrink: 0; }
.st-health-banner.error .st-health-banner-icon { color: #ff7a6b; }
.st-health-banner-msg { flex: 1; color: var(--st-text-sub); }
.st-health-banner-msg strong { color: var(--st-text); }
.st-health-banner-close {
  background: none; border: none; cursor: pointer; color: var(--st-text-muted);
  padding: 4px; border-radius: 4px;
}
.st-health-banner-close:hover { color: var(--st-text); background: var(--st-soft); }

/* ─── BULK OPERATIONS (Phase 4) ─────────────────────────────────────────────── */
.st-bulk-bar {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: var(--st-text); color: #fff; border-radius: 99px;
  padding: 10px 18px 10px 14px; display: none; align-items: center; gap: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  z-index: 75; opacity: 0; transition: all 0.2s;
}
.st-bulk-bar.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.st-bulk-count {
  background: var(--st-terra); padding: 4px 10px; border-radius: 99px;
  font-weight: 800; font-size: 11px;
}
.st-bulk-action {
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.16);
  padding: 6px 12px; border-radius: 99px; font-family: inherit; font-size: 11px;
  font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px;
}
.st-bulk-action:hover { background: rgba(255,255,255,0.16); }
.st-bulk-action.danger { color: #ffaa9b; }
.st-bulk-action.danger:hover { background: rgba(217,48,32,0.2); }
.st-bulk-clear {
  background: none; color: rgba(255,255,255,0.6); border: none; cursor: pointer;
  font-family: inherit; font-size: 11px; padding: 4px 8px;
}
.st-bulk-clear:hover { color: #fff; }

/* Selected card visual */
.sgal2-card.st-bulk-selected {
  outline: 3px solid var(--st-terra); outline-offset: -3px;
}
.sgal2-card.st-bulk-selected::after {
  content: '✓'; position: absolute; top: 8px; right: 8px;
  background: var(--st-terra); color: #fff; width: 26px; height: 26px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; z-index: 10;
}

/* ─── ONBOARDING TOUR (Trevor: non-technical team in minutes) ──────────────── */
.st-tour-bg {
  position: fixed; inset: 0; background: rgba(15,17,22,0.72); backdrop-filter: blur(4px);
  z-index: 300; display: none;
}
.st-tour-bg.open { display: block; }
.st-tour-pop {
  position: fixed; background: var(--st-card); border-radius: 12px;
  padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  max-width: 360px; font-family: 'Plus Jakarta Sans', sans-serif;
  border: 1.5px solid var(--st-terra); z-index: 301;
}
.st-tour-step-num {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--st-terra); margin-bottom: 6px;
}
.st-tour-title {
  font-size: 18px; font-weight: 800; color: var(--st-text); letter-spacing: -0.01em;
  margin-bottom: 8px; line-height: 1.2;
}
.st-tour-body {
  font-size: 13px; color: var(--st-text-sub); line-height: 1.55; margin-bottom: 18px;
}
.st-tour-actions {
  display: flex; align-items: center; gap: 10px;
}
.st-tour-dots {
  display: flex; gap: 5px; flex: 1;
}
.st-tour-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--st-border);
}
.st-tour-dot.on { background: var(--st-terra); }
.st-tour-btn {
  padding: 8px 16px; border-radius: 6px; font-family: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer; border: 1px solid var(--st-border);
  background: #fff; color: var(--st-text);
}
.st-tour-btn:hover { border-color: var(--st-text); }
.st-tour-btn.primary {
  background: var(--st-terra); color: #fff; border-color: var(--st-terra);
}
.st-tour-btn.primary:hover { background: var(--st-terra-dark); }
.st-tour-skip {
  font-size: 11px; color: var(--st-text-muted); background: none; border: none;
  cursor: pointer; font-family: inherit; padding: 4px 8px;
}
/* ─── SIMPLE/ADVANCED SIDEBAR TOGGLE (Phase 2 simplification) ──────────────── */
.st-simple-toggle {
  display: flex; align-items: center; gap: 4px; margin: 0 0 14px 0;
  padding: 4px; background: var(--st-soft); border-radius: 99px;
  border: 1px solid var(--st-border-light);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.st-simple-toggle button {
  flex: 1; padding: 6px 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  border: none; background: none; border-radius: 99px;
  cursor: pointer; color: var(--st-text-muted); font-family: inherit;
  transition: all 0.15s;
}
.st-simple-toggle button.on {
  background: #fff; color: var(--st-terra); box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
/* In simple mode, hide non-essential sidebar sections — leave only Subject (Product picker) */
/* In simple mode, make the brief bar the obvious entry point */
body.stitch-shell.stitch-simple #view-meta-ads #st-brief-bar {
  box-shadow: 0 4px 12px rgba(196,82,42,0.10);
  border-bottom: 2px solid var(--st-terra);
}

/* ══════════════════ QUICK START — bottom-fixed dock (Higgsfield-style) ══════ */
/* Sits ABOVE the .st-bottombar (Active Setup + Generate) so it never collides.
   In standalone mode the bottombar is hidden, so dock drops to bottom:0. */
.st-quickstart-dock {
  position: fixed;
  left: var(--st-rail-w); right: 0;
  bottom: var(--st-bottombar-h);
  z-index: 78;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, var(--st-warm) 60%, var(--st-soft) 100%);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--st-border-light);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: max-height 0.22s ease;
  max-height: 360px;
  overflow: hidden;
}
body.stitch-shell.stitch-standalone .st-quickstart-dock { bottom: 0; }
@media (max-width: 800px) {
  .st-quickstart-dock { left: 0; }
}
.st-quickstart-dock.collapsed { max-height: 48px; }
.st-quickstart-handle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 28px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
  border-bottom: 1px solid var(--st-border-light);
}
.st-quickstart-handle:hover { background: rgba(196,82,42,0.04); }
.st-quickstart-handle-label {
  font-size: 14px; font-weight: 800; color: var(--st-text); letter-spacing: -0.005em;
}
.st-quickstart-handle-sub {
  font-size: 11.5px; color: var(--st-text-muted); font-weight: 600;
}
.st-quickstart-chev {
  margin-left: auto; font-size: 20px !important; color: var(--st-text-muted);
  transition: transform 0.2s;
}
.st-quickstart-dock:not(.collapsed) .st-quickstart-chev { transform: rotate(180deg); }
.st-quickstart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px 28px 20px;
  overflow-y: auto;
  max-height: 308px;
}
.st-quickstart-dock.collapsed .st-quickstart-grid { display: none; }

/* ══════════════════ ENTRY SECTION — collapse to chip row when pathway chosen ═ */
#st-entry-section.collapsed { padding: 10px 28px !important; }
#st-entry-section.collapsed .st-entry-header { margin-bottom: 0 !important; }
#st-entry-section.collapsed .st-entry-header .st-section-title .sub { display: none; }
#st-entry-section.collapsed .st-entry-header .st-section-title {
  font-size: 13px !important; font-weight: 800;
}
#st-entry-section.collapsed .st-entry-header > div:first-child > div:nth-child(2) { display: none; }
#st-entry-section.collapsed .st-entry-grid {
  display: flex !important; gap: 6px !important; margin-top: 8px;
  flex-wrap: wrap;
}
#st-entry-section.collapsed .st-entry-card {
  padding: 6px 12px !important; gap: 6px !important; min-height: auto !important;
  flex-direction: row !important; align-items: center !important;
  border-width: 1px !important;
}
#st-entry-section.collapsed .st-entry-card .st-entry-icon { width: 22px !important; height: 22px !important; }
#st-entry-section.collapsed .st-entry-card .st-entry-icon .material-symbols-outlined { font-size: 14px !important; }
#st-entry-section.collapsed .st-entry-card .st-entry-name { font-size: 12px !important; margin: 0 !important; }
#st-entry-section.collapsed .st-entry-card .st-entry-desc,
#st-entry-section.collapsed .st-entry-card .st-entry-meta { display: none !important; }
#st-entry-section.collapsed .st-step-badge { display: none; }

/* Add bottom padding to gallery so dock + bottombar don't cover the last row */
#view-meta-ads .content,
#view-meta-ads #studio-gallery-wrap {
  padding-bottom: 140px;   /* 72 bottombar + 48 dock handle + 20 breathing */
}

/* ══════════════════ SIDEBAR COLLAPSE TOGGLE ════════════════════════════════ */
/* Improve the existing toggleSidebar() UX — slide the sidebar off-screen
   smoothly, and float a re-open button so the user can bring it back. */
#view-meta-ads .sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding-left: 0;
  padding-right: 0;
  border-right: none;
  overflow: hidden;
}
/* Floating re-open button — visible only when sidebar is collapsed */
#view-meta-ads .sidebar.collapsed + main .sidebar-toggle,
#view-meta-ads .sidebar.collapsed ~ main .sidebar-toggle {
  background: var(--st-terra);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(196,82,42,0.25);
}
/* Persist last collapsed state per view */

/* Hint above hidden content */
.st-simple-hint {
  margin: 10px 14px; padding: 10px 12px;
  background: var(--st-warm); border: 1px dashed var(--st-terra);
  border-radius: 6px; font-size: 11px; color: var(--st-text-sub);
  line-height: 1.5;
}

/* ─── EMPTY STATES + LOADING SKELETONS (Phase 3 simplification) ───────────── */
.st-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 32px; text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 320px;
}
.st-empty-icon {
  width: 56px; height: 56px; border-radius: 12px; background: var(--st-warm);
  display: flex; align-items: center; justify-content: center;
  color: var(--st-terra); margin-bottom: 18px;
}
.st-empty-icon .material-symbols-outlined { font-size: 30px; }
.st-empty-title {
  font-size: 17px; font-weight: 800; color: var(--st-text);
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.st-empty-body {
  font-size: 13px; color: var(--st-text-sub); max-width: 380px; line-height: 1.55;
  margin-bottom: 18px;
}
.st-empty-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  background: var(--st-terra); color: #fff; border: none; border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
}
.st-empty-cta:hover { background: var(--st-terra-dark); }

/* Skeleton loading shimmer */
@keyframes st-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.st-skeleton {
  background: linear-gradient(90deg, var(--st-soft) 0%, #fff 50%, var(--st-soft) 100%);
  background-size: 200% 100%;
  animation: st-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.st-skeleton-card {
  aspect-ratio: 4/5;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--st-soft) 0%, #fff 50%, var(--st-soft) 100%);
  background-size: 200% 100%;
  animation: st-shimmer 1.4s ease-in-out infinite;
  position: relative;
}
.st-skeleton-card::after {
  content: 'Generating…'; position: absolute; bottom: 12px; left: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--st-text-muted); font-weight: 700;
}
.st-skeleton-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; padding: 24px;
}

.st-tour-spotlight {
  position: fixed; pointer-events: none; border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(15,17,22,0.72), 0 0 0 3px var(--st-terra),
    0 0 30px rgba(196,82,42,0.4);
  z-index: 300; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------------------------------------------------------------------
   STITCH UTILITY CLASSES (use inside views to upgrade look)
   --------------------------------------------------------------------- */
.st-glass-card {
  background: var(--st-card); border: 1px solid var(--st-border-light);
  border-radius: 6px; padding: 16px; cursor: pointer; transition: all 0.2s;
  box-shadow: var(--st-shadow-card); position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.st-glass-card:hover { border-color: var(--st-border); transform: translateY(-1px); }
.st-glass-card.st-active, .st-glass-card.active {
  border-color: var(--st-terra); box-shadow: var(--st-shadow-active);
}

.st-step-badge {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--st-terra); background: var(--st-terra-50); padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.st-step-badge.olive { color: var(--st-olive); background: rgba(122,130,58,0.12); }
.st-step-badge.teal  { color: var(--st-teal);  background: rgba(39,71,88,0.12); }
.st-step-badge.red   { color: var(--st-red);   background: rgba(217,48,32,0.12); }

.st-section-title {
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--st-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.st-section-title .sub {
  color: var(--st-text-dim); font-weight: 500; font-size: 14px; margin-left: 6px;
}

/* ---------------------------------------------------------------------
   FLEXIBLE CAMPAIGN ENTRY POINTS  —  Trevor's note:
   Don't hard-lock to Product+Persona. Allow Education / Brand Campaign /
   Problem Statement as first-step alternatives.
   --------------------------------------------------------------------- */
.st-entry-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 8px 0 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
@media (max-width: 1100px) { .st-entry-grid { grid-template-columns: repeat(2, 1fr); } }
.st-entry-card {
  background: var(--st-card); border: 1.5px solid var(--st-border-light);
  border-radius: 8px; padding: 16px; cursor: pointer; transition: all 0.2s;
  box-shadow: var(--st-shadow-card); display: flex; flex-direction: column; gap: 10px;
  text-align: left; font-family: inherit;
}
.st-entry-card:hover { border-color: var(--st-border); transform: translateY(-1px); }
.st-entry-card.active {
  border-color: var(--st-terra); box-shadow: var(--st-shadow-active);
  background: var(--st-warm);
}
.st-entry-icon {
  width: 38px; height: 38px; border-radius: 8px; background: var(--st-soft);
  display: flex; align-items: center; justify-content: center; color: var(--st-text-muted);
  flex-shrink: 0;
}
.st-entry-card.active .st-entry-icon { background: var(--st-terra); color: #fff; }
.st-entry-name {
  font-size: 13.5px; font-weight: 800; color: var(--st-text); letter-spacing: -0.005em;
}
.st-entry-desc {
  font-size: 11.5px; color: var(--st-text-sub); line-height: 1.45;
}
.st-entry-meta {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--st-text-dim); margin-top: auto;
}

/* ---------------------------------------------------------------------
   MULTI-REFERENCE PICKER  —  Trevor's note:
   Allow selecting persona scene + emotion + product image as references.
   --------------------------------------------------------------------- */
.st-ref-chip {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  background: var(--st-soft); border: 1px solid var(--st-border-light); border-radius: 99px;
  font-size: 11px; font-weight: 600; color: var(--st-text);
}
.st-ref-chip-thumb {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  background: linear-gradient(135deg, var(--st-olive), var(--st-recover));
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 10px; font-weight: 800;
}
.st-ref-chip-kind {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--st-text-dim); margin-right: 2px;
}
.st-ref-chip-kind.persona  { color: var(--st-olive); }
.st-ref-chip-kind.scene    { color: var(--st-teal); }
.st-ref-chip-kind.product  { color: var(--st-terra); }
.st-ref-chip-x {
  border: none; background: none; cursor: pointer; padding: 2px; color: var(--st-text-dim);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.st-ref-chip-x:hover { color: var(--st-text); background: rgba(0,0,0,0.06); }
.st-ref-empty {
  font-size: 11.5px; color: var(--st-text-muted); padding: 8px 4px; font-style: italic;
}

/* Modal for picking a reference image */
.st-ref-modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 30px;
}
.st-ref-modal-bg.open { display: flex; }
.st-ref-modal {
  background: var(--st-card); border-radius: 12px; max-width: 920px; width: 100%;
  max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.st-ref-modal-head {
  padding: 18px 22px; border-bottom: 1px solid var(--st-border-light);
  display: flex; align-items: center; justify-content: space-between;
}
.st-ref-modal-title { font-size: 16px; font-weight: 800; color: var(--st-text); }
.st-ref-modal-close {
  border: none; background: none; cursor: pointer; color: var(--st-text-muted);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.st-ref-modal-close:hover { color: var(--st-text); background: var(--st-soft); }
.st-ref-modal-tabs {
  display: flex; gap: 4px; padding: 14px 22px 0; border-bottom: 1px solid var(--st-border-light);
}
.st-ref-modal-tab {
  background: none; border: none; padding: 8px 14px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--st-text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.st-ref-modal-tab.on { color: var(--st-terra); border-bottom-color: var(--st-terra); }
.st-ref-modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.st-ref-modal-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 700px) { .st-ref-modal-grid { grid-template-columns: repeat(2, 1fr); } }
.st-ref-modal-thumb {
  aspect-ratio: 1; background: var(--st-soft); border: 2px solid transparent;
  border-radius: 6px; overflow: hidden; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; color: var(--st-text-dim);
  position: relative;
}
.st-ref-modal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-ref-modal-thumb:hover { border-color: var(--st-terra); transform: scale(1.02); }
.st-ref-modal-thumb.picked { border-color: var(--st-terra); }
.st-ref-modal-thumb.picked::after {
  content: '✓'; position: absolute; top: 4px; right: 4px;
  background: var(--st-terra); color: #fff; width: 22px; height: 22px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.st-ref-modal-foot {
  padding: 14px 22px; border-top: 1px solid var(--st-border-light);
  display: flex; align-items: center; justify-content: space-between;
}
.st-ref-modal-count { font-size: 12px; color: var(--st-text-muted); }
.st-ref-modal-actions { display: flex; gap: 8px; }
.st-ref-modal-btn {
  padding: 8px 16px; border-radius: 5px; font-family: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer; border: 1px solid var(--st-border);
  background: #fff; color: var(--st-text);
}
.st-ref-modal-btn.primary {
  background: var(--st-terra); color: #fff; border-color: var(--st-terra);
}
.st-ref-modal-btn.primary:hover { background: var(--st-terra-dark); }

/* ══════════════════ BETA PROGRAM BANNER (2026-06-01 update) ════════════════ */
.cs-beta-banner {
  background: linear-gradient(135deg, #fff 0%, var(--st-warm) 60%, var(--st-soft) 100%);
  border: 1px solid var(--st-terra); border-radius: 12px;
  padding: 18px 22px; margin-bottom: 22px; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: transform .12s, box-shadow .12s;
}
.cs-beta-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(196,82,42,.14); }
.cs-beta-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.cs-beta-eyebrow {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--st-terra);
}
.cs-beta-status {
  background: rgba(122,130,58,0.18); color: var(--st-olive);
  padding: 4px 12px; border-radius: 99px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em;
}
.cs-beta-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin-bottom: 12px; }
.cs-beta-stat { display: flex; flex-direction: column; gap: 4px; }
.cs-beta-num {
  font-size: 28px; font-weight: 900; color: var(--st-text); letter-spacing: -0.02em; line-height: 1;
}
.cs-beta-stat-hero .cs-beta-num { color: var(--st-terra); }
.cs-beta-lbl {
  font-size: 11px; color: var(--st-text-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.cs-beta-foot {
  font-size: 11px; color: var(--st-text-muted); padding-top: 12px;
  border-top: 1px solid var(--st-border-light); line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE LAYER (added 2026-06-03)
   Three breakpoints: 1024 (tablet), 768 (phone landscape), 480 (phone portrait).
   Goal: Studio fully usable on a phone — touch targets ≥44px, no horizontal
   scroll, modals fit, sticky bars stack instead of overlap.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Universal touch target boost on coarse-pointer devices */
@media (pointer: coarse) {
button,a,input[type="button"],input[type="submit"],.sgal2-hov-btn,.st-glass-card,.st-entry-card,.cp-recent-tab,.rule-row-actions button {
    min-height: 40px;
  }
  /* Small circular icon buttons must STAY circles — the 40px min-height above
     was stretching them into ovals */
  .help-btn {
    width: 22px !important; height: 22px !important;
    min-height: 22px !important; min-width: 22px !important;
    border-radius: 50% !important; flex: 0 0 22px;
  }
  /* Make the gallery hover overlay tap-and-hold friendly */
  .sgal2-hover-ov { opacity: 1 !important; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%) !important; }
  .sgal2-hov-btn { background: rgba(255,255,255,0.92) !important; color: #1a1a1a !important; }
}

/* ─── Tablet breakpoint (≤1024px) ─── */
@media (max-width: 1024px) {
  .cs-panel, .rules-editor, .learning, .cs-beta-banner { padding: 16px 18px !important; }
  .dash-bento { gap: 12px !important; }
  .st-entry-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .st-quickstart-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
.sidebar { max-width: 320px; }
}

/* ─── Phone landscape / large portrait (≤768px) ─── */
@media (max-width: 768px) {
  :root { --st-bottombar-h: 64px; }

  body.stitch-shell { padding-bottom: var(--st-bottombar-h); }

  /* Pathway entry cards stack 1-col */
  .st-entry-grid { grid-template-columns: 1fr !important; }
  .st-entry-card { padding: 12px 14px !important; }
  .st-entry-desc { font-size: 11.5px; }

  /* Dashboard KPI row stacks — keep 4-col down to 600px, then 2-col */
  .cs-kpi-row { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }
  .cs-kpi-value { font-size: 20px !important; }
  .cs-kpi { padding: 12px 14px 14px !important; min-height: 96px !important; }

  /* Dashboard 2-col panels stack */
  #dash-content > div[style*="grid-template-columns:1.2fr 1fr"],
  #dash-content > div[style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Beta banner stats — 3-col instead of 6 */
  .cs-beta-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .cs-beta-num { font-size: 22px !important; }

  /* Sidebar becomes a slide-in overlay.
     CRITICAL: desktop .layout/.main use overflow:hidden + inner scroll panes.
     Once block flow replaces the flex layout, that hidden overflow CLIPS
     content ("lists stop scrolling"). On mobile the page itself scrolls. */
  #view-meta-ads .layout, #view-personas .layout, #view-products .layout {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
  }
#view-personas .sidebar,#view-products .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 86%; max-width: 320px; z-index: 60;
    background: var(--st-card); border-right: 1px solid var(--st-border);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 6px 0 32px rgba(0,0,0,0.18);
    overflow-y: auto;
  }
  #view-meta-ads .sidebar.open,
  #view-personas .sidebar.open,
  #view-products .sidebar.open { transform: translateX(0); }
  #view-meta-ads .sidebar.collapsed,
  #view-personas .sidebar.collapsed,
  #view-products .sidebar.collapsed { transform: translateX(-100%); }

  #view-meta-ads main.main, #view-personas main.main, #view-products main.main {
    width: 100%; margin-left: 0;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
  }
  .sidebar-toggle {
    position: sticky; top: 8px; left: 8px; z-index: 50;
    width: 40px; height: 40px;
  }

  /* Topbar — single line, smaller title */
  .topbar-row1 { padding: 10px 14px !important; gap: 10px; }
  .persona-title, #studio-title { font-size: 16px !important; }
  .persona-meta, #studio-subtitle { font-size: 11px !important; }
  .topbar-row2-wrap { display: none; }

  /* Gallery cards tighter */
  .sgal2-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 8px !important; padding: 10px !important; }
  .sgal2-img-wrap img { aspect-ratio: 4/5; }
  .sgal2-hov-btn { padding: 8px !important; min-width: 36px; min-height: 36px; }

  /* Gallery toolbar */
  .sgal-toolbar { padding: 8px 10px !important; flex-wrap: wrap; gap: 6px !important; }
  .sgal-tab { padding: 6px 12px !important; font-size: 11px !important; }
  .sgal-brand-tabs { flex-wrap: wrap; }

  /* Bottombar — tighter */
  .st-bottombar { padding: 0 12px !important; gap: 8px !important; height: var(--st-bottombar-h); }
  .st-bb-config { gap: 6px !important; overflow: hidden; }
  .st-bb-config-label { display: none; }
  .st-bb-config-crumb { padding: 4px 8px !important; font-size: 11px !important; }
  .st-bb-estimate { display: none !important; }
  .st-bb-crumb-sep { display: none !important; }
  .st-bb-cta { padding: 8px 14px !important; font-size: 12px !important; }

  /* Quick Presets dock */
  .st-quickstart-dock { left: 0 !important; right: 0 !important; max-height: 280px; }
  .st-quickstart-dock.collapsed { max-height: 44px; }
  .st-quickstart-handle { padding: 10px 16px !important; }
  .st-quickstart-handle-label { font-size: 13px !important; }
  .st-quickstart-handle-sub { display: none; }
  .st-quickstart-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 8px !important; padding: 12px 16px 16px !important; }

  /* Modal dialogs — full-width with safe padding */
  .st-detail-bg .st-detail,
  .help-overlay .help-modal,
  .ab-overlay .ab-modal,
  .ann-overlay .ann-modal,
  .rule-modal-card {
    max-width: 96vw !important;
    width: 96vw !important;
    max-height: 92vh !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }
  #st-tune-panel { width: 100% !important; max-width: 100vw !important; }

  /* Brand message / Education / Problem pathway cards stack */
  #st-brand-msg-grid, #st-problem-pain-grid {
    grid-template-columns: 1fr !important;
  }

  .st-step-progress { flex-wrap: wrap; gap: 6px; }
  .dash-team-row { padding: 8px 10px !important; }

  /* Floating rail toggle — clearly tap-targetable */
  .st-rail-toggle { width: 44px !important; height: 44px !important; top: 10px !important; left: 10px !important; }

  /* Rail collapsed: no fake gutter on mobile (rail is overlay anyway) */
  body.st-rail-collapsed { padding-left: 0 !important; }
  body.st-rail-collapsed .st-bottombar { left: 0 !important; }
  body.st-rail-collapsed #view-meta-ads .st-quickstart-dock { left: 0 !important; }
  body:not(.st-rail-collapsed) { padding-left: 0 !important; }

  /* Pathway entry section collapsed — horizontal scroll chips */
  #st-entry-section.collapsed .st-entry-grid {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #st-entry-section.collapsed .st-entry-grid::-webkit-scrollbar { display: none; }

  /* Template Library + content pages */
  .wrap, .doc { padding: 16px !important; max-width: 100% !important; }
  .head { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  .head h1 { font-size: 22px !important; }
  .framework-banner { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .tpl-grid, .cp-recent-grid { grid-template-columns: 1fr !important; }
}

/* ─── Small phone portrait (≤480px) ─── */
@media (max-width: 480px) {
  :root { --st-bottombar-h: 60px; }

  .cs-kpi-row { grid-template-columns: 1fr !important; }
  .cs-beta-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .cs-beta-foot { font-size: 10.5px; }
  .framework-banner { grid-template-columns: 1fr !important; }
  .st-quickstart-handle { padding: 9px 12px !important; }
  .sgal2-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .rule-btn, .meta-rule-save-btn, .meta-rule-cancel-btn { padding: 10px 14px !important; font-size: 11.5px !important; }

  /* iOS auto-zoom prevention — inputs need ≥16px */
  input[type=text], input[type=password], input[type=number], select, textarea {
    font-size: 16px !important;
    min-height: 40px;
  }

  .st-bb-config-crumb { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-bb-cta { white-space: nowrap; }
}

/* ─── iPhone notch / home indicator safe areas ─── */
@supports (padding: max(0px)) {
  .st-bottombar, .st-quickstart-dock {
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }
  .st-rail { padding-top: max(env(safe-area-inset-top), 18px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE REMEDIATION v2 — component-level fixes
   Root causes addressed:
     RC2  right-docked panels parked off-screen with fixed widths
     RC3  JS-built overlays (inline styles) lack viewport clamping
     RC4  non-wrapping toolbars / fixed-column grids overflow horizontally
   Desktop (>768px) is untouched — every rule lives behind a media query.
   ══════════════════════════════════════════════════════════════════════════ */

/* Gallery batching — shared (all viewports) */
.sgal-load-more-wrap { display: flex; justify-content: center; padding: 18px 0 26px; }
.sgal-load-more {
  padding: 12px 26px; border: 1.5px solid var(--st-border, #e5e0d8);
  background: var(--st-card, #fff); border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--st-text, #1a1a1a);
}
.sgal-load-more:hover { background: var(--st-soft, #f7f4ef); }
.sgal-load-more-count {
  font-weight: 600; color: var(--st-text-muted, #8a8a8a);
  text-transform: none; letter-spacing: 0; margin-left: 8px;
}

@media (max-width: 768px) {

  /* ── RC2: Tune panel → fullscreen modal ── */
  .st-tune-panel {
    top: 0 !important;
    height: 100dvh;
    max-height: 100dvh;
    border-left: none;
    padding-bottom: max(env(safe-area-inset-bottom), 16px);
  }
  .st-tune-head { padding: 14px 16px; }
  /* Approval actions: wrap, full-width touch targets, sticky above the fold */
  .st-tune-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    position: sticky;
    bottom: 0;
    background: var(--st-card);
    padding: 12px 16px max(env(safe-area-inset-bottom), 12px) !important;
    border-top: 1px solid var(--st-border-light);
    z-index: 3;
  }
  .st-tune-actions > button {
    flex: 1 1 calc(50% - 8px);
    min-height: 44px;
    white-space: nowrap;
  }
  .st-tune-actions > .st-tune-approve { flex: 1 1 100%; }

  /* ── RC3: JS-built overlays — clamp to viewport ── */
  /* Insights modal */
  #insights-modal-overlay { padding: 10px !important; align-items: flex-end !important; }
  #insights-modal-overlay > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    border-radius: 14px 14px 0 0 !important;
    margin: 0 !important;
  }
  /* Audit log modal */
  #cs-audit-log-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    max-height: 86dvh !important;
  }
  #cs-audit-log-body { font-size: 10.5px !important; word-break: break-word; white-space: normal; }
  #cs-audit-log-body > div { flex-wrap: wrap; }
  /* Notifications bell + panel */
  #cs-notif-bell-wrap { right: 10px !important; }
  #cs-notif-panel {
    position: fixed !important;
    top: 60px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 72dvh !important;
  }

  /* ── RC4: toolbars wrap instead of overflowing ── */
  .camp-header-btns, .ads-camp-header, .cs-panel-hd { flex-wrap: wrap !important; row-gap: 8px; }
  .camp-header-btns > * { min-height: 40px; }
  /* Tab strips become horizontally scrollable, never clipped */
  .social-subnav, .sgal-brand-tabs, .sgal-toolbar, .cw-tabs, .topbar-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .social-subnav::-webkit-scrollbar, .sgal-brand-tabs::-webkit-scrollbar,
  .sgal-toolbar::-webkit-scrollbar, .cw-tabs::-webkit-scrollbar,
  .topbar-tabs::-webkit-scrollbar { display: none; }
  .social-subnav-btn { white-space: nowrap; flex-shrink: 0; }
  /* Approval funnel: 5 fixed columns → 2-col cards */
  #cs-funnel-strip { grid-template-columns: repeat(2, 1fr) !important; }
  /* Dashboard panel action buttons stay reachable */
  .dash-report-btn { min-height: 40px; min-width: 40px; }

  /* ── AUTH banner: headline + dismiss only, details hidden on phones ── */
  #auth-status-banner .auth-banner-detail { display: none; }
  #auth-status-banner { padding: 6px 10px !important; }

  /* ── Dashboard header: title row + actions row, no cramming ──
     Title row clears the fixed rail toggle (left) and notification bell
     (right) so "Content Studio Dashboard" is never clipped or overlapped. */
  .dash-toolbar-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 8px 0 4px !important;
    margin-bottom: 16px !important;
  }
  .dash-toolbar-row > div:first-child {
    margin: 0 52px 0 56px;          /* clear rail toggle + bell */
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .dash-toolbar-row h1 { font-size: 18px !important; line-height: 1.25; }
  #cs-dash-refreshed { display: none; }   /* "Updated 18:22" — noise on a phone */
  .dash-toolbar-row > div:last-child {
    margin-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100%;
  }
  .dash-toolbar-row .dash-report-btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    min-height: 42px;
  }

  /* ── Persona Library: 8 squeezed columns → 2 readable columns ── */
  .dash-persona-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* ── Gallery card actions: stack vertically so every action is visible ── */
  .sgal2-hover-ov {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    overflow-y: auto;
  }
  .sgal2-hov-btn {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    min-height: 40px;
  }

  /* ── Campaigns header: title row, then full-width action row ── */
  #view-campaigns .topbar-row1 { flex-wrap: wrap !important; row-gap: 10px; }
  #view-campaigns .topbar-left { flex: 1 1 auto; min-width: 0; }
  #view-campaigns .topbar-right {
    flex: 1 1 100%;
    display: flex !important;
    gap: 8px;
    flex-wrap: wrap;
  }
  #view-campaigns .topbar-right > button {
    flex: 1 1 calc(33% - 8px);
    min-height: 42px;
    white-space: nowrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  #cs-funnel-strip { grid-template-columns: 1fr !important; }
  .st-tune-actions > button { flex: 1 1 100%; }
}

/* Reduced-motion coverage app-wide (G1, UI/UX audit 2026-07-24): previously
   honored only by the dashboard micro-interactions block above — toasts, chat
   panel, canvas thumbs/chips/buttons all animated unconditionally. Spinners are
   slowed rather than stopped so the busy affordance survives. */
@media (prefers-reduced-motion: reduce) {
  .toast-msg, .toast-msg.toast-out, .ai-chat-panel { animation: none !important; }
  .cnv-img-thumb, .cnv-lh-chip, .cnv-lh-btn, .fb-type-chip, .fb-tab { transition: none !important; }
  .cnv-img-thumb:hover { transform: none !important; }
  .cnv-lh-spinner { animation-duration: 1.6s !important; }
}