/* ═════════════════════════════════════════════════
   KONRADSAGUIDE — YOUTUBE GROWTH OS
   Production Studio Theme
   ═════════════════════════════════════════════════ */

/* ── CUSTOM PROPERTIES — Konrad's Palette ──
   2026-08-18: rebuilt to Konrad's own stated colors (tree green, ground
   brown, black, white, navy) and mood ("a clean professional production
   studio") rather than the generic "Fynbos Palette" picked in an earlier
   session — the green accent below was already close (kept, barely
   adjusted); ground-brown and navy are new, replacing the old amber
   --accent-2 and adding a sparingly-used navy for structural depth,
   consistent with Konrad's "focused, one clear thing at a time" density
   preference — this is a second accent pair, not a rainbow of new colors. */
:root {
    /* Backgrounds: true near-black, not warm-tinted — "black" was named
       explicitly, kept clean rather than earth-toned. */
    --bg: #0A0A0A;
    --bg-radial: #0C0D0C;
    --glass-bg: rgba(12,14,12,0.90);
    --glass-card: rgba(16,18,16,0.93);
    --glass-border: rgba(45,107,74,0.12);
    --glass-border-strong: rgba(45,107,74,0.20);
    --glass-hover: rgba(45,107,74,0.08);
    --glass-active: rgba(45,107,74,0.13);
    /* Text: true white / neutral grey, matching "white" as a named color
       rather than a warm cream tint. */
    --text: #F5F5F3;
    --text-secondary: #96A099;
    --text-muted: #5C665F;
    /* Accent: tree green — Konrad's own stated favorite, close to the
       prior Fynbos green so approved patterns (e.g. status colors) don't
       need to relearn what "success/active" looks like. */
    --accent: #2D6B4A;
    --accent-hover: #3A8760;
    /* Ground brown — replaces the old amber/gold --accent-2. Used the
       same way amber was (secondary/warning-adjacent accents), now
       actually one of Konrad's named colors instead of an arbitrary gold. */
    --accent-2: #8B5E34;
    /* Navy — new, used sparingly (structural depth: active sidebar item,
       secondary card backgrounds) rather than as a competing accent, to
       respect the "one clear thing at a time" density preference. */
    --navy: #1B2A4A;
    --navy-glow: rgba(27,42,74,0.25);
    --accent-glow: rgba(45,107,74,0.22);
    --accent-glow-strong: rgba(45,107,74,0.38);
    /* Semantic */
    --success: #3A8760;
    --danger: #f87171;
    --warning: #B8874A;
    /* Rust/terracotta — added 2026-08-18 for the Scorecard's Subscriber
       Progress gauge specifically: with green x2 (SEO/CTR), navy (DNA
       Confidence) and ground-brown (DNA Coverage) already used, a 5th
       gauge needed a genuinely distinct hue. NOT a revival of the old
       gold/amber --accent-2 rejected earlier this session (see the note
       above --accent-2) — this sits in the red-orange family (African
       red-earth/sunset), clearly separate from ground-brown's family. */
    --rust: #B2542B;

    --radius: 14px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --header-h: 56px;
    --sidebar-w: 250px;
    /* 2026-08-18, Konrad: "I want the fonts to relate to me and my channel"
       — Work Sans for body (warm, humanist, legible at small sizes) +
       Oswald for headings/nav (condensed, upright — reads like overland
       route signage / expedition crate lettering), picked from a 4-way
       preview. Real fallback stacks so nothing silently reverts to
       system-ui if the Google Fonts request is ever blocked. */
    --font: 'Work Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-heading: 'Oswald', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-serif: var(--font-heading);
    --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Legacy aliases — keeps older CSS selectors working without a find+replace */
    --yt-bg: var(--bg);
    --yt-border: var(--glass-border);
    --yt-text: var(--text);
    --yt-muted: var(--text-secondary);
    --yt-card: var(--glass-card);
    --yt-hover: var(--glass-hover);
    --yt-surface: var(--glass-bg);
    /* 2026-08-14: this block previously defined --ksa-green TWICE (the
       second silently won, pointing at --success not --accent) and kept
       a --ksa-orange alias despite it pointing at the green accent for a
       long time — actively misleading names in a codebase where "no
       orange" is a standing requirement. Cleaned to one real name each. */
    --ksa-green: var(--accent);
    --ksa-amber: var(--accent-2);
    --ksa-red: var(--danger);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── ACCESSIBLE FOCUS ── */
:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
:focus:not(:focus-visible) { outline: none; }
::-moz-focus-inner { border: 0; }

/* ── SKIP LINK ── */
.skip-link { position: absolute; top: -100px; left: 8px; background: var(--accent); color: #fff;
    padding: 8px 16px; border-radius: 4px; z-index: 9999; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(26,143,90,0.07) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(196,152,23,0.04) 0%, transparent 50%);
    pointer-events: none; z-index: 0;
}
/* Gravel texture (Konrad, 2026-08-18: "a bit like the Namibian gravel, but
   very slightly, not to disturb the readability" — picked "Option B,
   visible gravel" from the 3-way preview). Layered on its own pseudo so
   it never competes with the glow gradient above; tiled at native size
   (256px) so it reads as fine grain rather than a repeating pattern. */
body::after {
    content: '';
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../img/gravel-texture.png');
    background-repeat: repeat;
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none; z-index: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

/* ── HEADER ── */
header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
    background: var(--glass-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; padding: 0 16px;
    z-index: 100;
}
.hamburger {
    width: 40px; height: 40px; display: none; align-items: center; justify-content: center;
    cursor: pointer; border-radius: var(--radius-xs); fill: var(--text-secondary);
    transition: var(--transition); margin-right: 4px;
}
.hamburger:hover { background: var(--glass-hover); fill: var(--text); }
.logo-area { display: flex; align-items: center; gap: 10px; }
.logo-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; color: #fff;
}
.logo-text { font-size: 15px; font-weight: 600; color: var(--text); }
.logo-text span { color: var(--accent); }
.header-spacer { flex: 1; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-status { font-size: 11px; color: var(--text-muted); }
.channel-badge {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500;
    color: var(--text-secondary); transition: var(--transition);
}
.channel-badge:hover { border-color: var(--accent); color: var(--text); }

/* ── SIDEBAR ── */
.sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.sidebar-overlay.visible { opacity: 1; pointer-events: auto; }

.sidebar {
    position: fixed; top: var(--header-h); left: 0;
    width: var(--sidebar-w); bottom: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border);
    overflow-y: auto; z-index: 95;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.sidebar-heading {
    font-family: var(--font-heading);
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--text-muted);
    padding: 18px 18px 6px;
}
.sidebar-section { padding: 0 8px 8px; }

.sidebar-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: var(--transition);
    text-decoration: none;
}
.sidebar-item:hover { background: var(--glass-hover); color: var(--text); }
.sidebar-item.active { background: var(--glass-active); color: var(--accent); }
.sidebar-item svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* 2026-08-18: DNA/Titles/Metadata direct-jump shortcuts under Video
   Optimizer — visually a sub-item (indented, smaller, no icon) rather
   than a peer nav entry, so the hierarchy (one workflow, jumpable stages)
   reads at a glance. */
.sidebar-subitem { padding-left: 30px; font-size: 12px; font-weight: 400; }

/* Sidebar badge — critical counts and route tags */
.sidebar-badge {
    margin-left: auto; font-size: 9px; font-weight: 700;
    padding: 1px 7px; border-radius: 10px; letter-spacing: 0.3px;
    background: rgba(192,74,58,0.2); color: #D07060; white-space: nowrap;
    font-family: var(--font-mono);
}
.sidebar-badge.badge-gold {
    background: rgba(196,152,23,0.2); color: var(--accent-2);
}
.sidebar-badge.badge-green {
    background: rgba(52,211,153,0.15); color: var(--success);
}

/* Inline Fix button on priority queue rows */
.pq-fix-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--radius-xs); font-size: 10px;
    font-weight: 700; border: 1px solid var(--glass-border-strong);
    background: var(--glass-card); color: var(--accent); cursor: pointer;
    transition: var(--transition); white-space: nowrap; letter-spacing: 0.2px;
    flex-shrink: 0;
}
.pq-fix-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Job indicator in header — ambient background task pulse */
.job-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted);
}
.job-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
}
.job-dot.active { animation: jobPulse 1.4s ease-in-out infinite; }
@keyframes jobPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%       { opacity: 1;   transform: scale(1.1); }
}

/* ── MAIN CONTENT ── */
.main-content {
    margin-top: var(--header-h);
    margin-left: var(--sidebar-w);
    padding: 28px 32px;
    min-height: calc(100vh - var(--header-h));
    position: relative; z-index: 1;
}

/* ── PANELS ── */
.panel { display: none; animation: fadeSlide 0.3s ease; }
.panel.active { display: block; }
@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-title {
    font-family: var(--font-heading); font-size: 28px; font-weight: 600;
    text-transform: uppercase; margin-bottom: 4px; color: var(--text);
    letter-spacing: 0.01em;
}
.page-subtitle { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }

/* ── CARDS ── */
.card {
    /* Gravel texture layered under the glass tint (2026-08-18, Option B) —
       background-blend-mode instead of a pseudo-element so it clips to
       the card's own border-radius for free. Fainter than the page
       background (0.035 vs 0.05) since cards already carry a border +
       tint of their own and shouldn't compete with body text sitting
       directly on top of them. */
    background-image: url('../img/gravel-texture-faint.png'), linear-gradient(var(--glass-card), var(--glass-card));
    background-blend-mode: overlay;
    background-color: var(--glass-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 20px;
    transition: var(--transition);
}
.card:hover { border-color: var(--glass-border-strong); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

/* 2026-08-14: three classes used across the app (job-error banners,
   data tables, form inputs outside the search-input pattern) had no CSS
   definition at all — found via a used-vs-defined sweep. Every caller
   supplied only inline positioning (margin/border-left/width), so these
   rendered as unstyled default-browser elements, clashing with the rest
   of the dark-glass theme. */
.callout {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 12px 16px; color: var(--text-secondary);
}
.data-table { border-collapse: collapse; }
.data-table th, .data-table td {
    text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--glass-border);
    font-size: 13px;
}
.data-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
.data-table tbody tr:hover { background: var(--glass-hover); }
.form-input {
    width: 100%; padding: 10px 14px; background: rgba(15,15,25,0.6);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text); font-family: var(--font); transition: var(--transition);
}
.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.form-input::placeholder { color: var(--text-muted); }

/* ── SHORTS LIBRARY ── */
.library-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.library-toolbar .search-input { flex: 1; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.library-card {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column;
    gap: 8px; transition: var(--transition); position: relative;
}
.library-card .lib-thumb {
    width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 8px;
    background: var(--glass-hover); cursor: pointer; border: 1px solid var(--glass-border-strong);
}
.library-card .lib-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--accent); cursor: pointer;
}
.library-card .lib-file { font-size: 11px; color: var(--text-muted); word-break: break-all; }
.library-card:hover { border-color: var(--glass-border-strong); transform: translateY(-2px); }
.library-card .lib-name { font-weight: 600; font-size: 13px; word-break: break-all; line-height: 1.3; }
.library-card .lib-meta { font-size: 12px; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.library-card .lib-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-badge {
    font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 600;
    background: var(--glass-hover); color: var(--text-secondary);
}
.lib-badge.ready { background: rgba(52,211,153,0.15); color: var(--success); }
.lib-badge.warn { background: rgba(196,152,23,0.15); color: var(--accent-2); }
.lib-badge.bad { background: rgba(248,113,113,0.15); color: var(--danger); }
.library-summary {
    display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 16px;
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary);
}
.library-summary b { color: var(--text); }
.lib-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.lib-actions .btn { flex: 1; }
.lib-video-preview { width: 100%; border-radius: var(--radius-sm); background: #000; aspect-ratio: 9/16; object-fit: contain; }
.lib-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; font-size: 13px; }
.lib-options label { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.lib-log { font-size: 12px; color: var(--text-secondary); background: rgba(0,0,0,0.35); padding: 10px; border-radius: var(--radius-sm); max-height: 160px; overflow: auto; margin-top: 8px; }
.lib-log li { margin: 2px 0; }
.lib-log .ok { color: var(--success); }
.lib-log .warn { color: var(--accent-2); }
@media (max-width: 768px) {
    .library-grid { grid-template-columns: 1fr; }
}

/* ── STATUS BAR ── */
.status-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; background: var(--glass-card);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    margin-bottom: 16px; font-size: 13px; color: var(--text-secondary);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.green { background: var(--success); box-shadow: 0 0 8px var(--success); }
.status-dot.orange { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.status-dot.red { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

/* ── BUTTONS ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
    border: 1px solid var(--glass-border); background: var(--glass-card);
    color: var(--text); cursor: pointer; transition: var(--transition);
    white-space: nowrap;
}
.btn:hover { border-color: var(--glass-border-strong); background: var(--glass-hover); }
/* Gravel texture on the primary CTA only (2026-08-18, Option B) — gives
   the main action a tactile, physical-material feel per Konrad's own
   "perhaps buttons" ask, without texturing every small/secondary button
   on the page and risking it reading as busy. */
.btn-accent {
    background-image: url('../img/gravel-texture-faint.png'), linear-gradient(var(--accent), var(--accent));
    background-blend-mode: overlay; background-size: 128px, auto;
    color: #fff; border-color: var(--accent); font-weight: 600;
}
.btn-accent:hover {
    background-image: url('../img/gravel-texture-faint.png'), linear-gradient(var(--accent-hover), var(--accent-hover));
    box-shadow: 0 0 16px var(--accent-glow);
}
/* 2026-08-18, Konrad, live: "Make the titles and metadata and other
   buttons to go to the next section bigger and put it underneath the
   panel where it is clearly visible." The stage-to-stage progression
   buttons (DNA -> Titles, Metadata -> Thumbnails/Shorts) were either
   small inline buttons squeezed inside a card, or plain <a> text links
   with no button styling at all — genuinely easy to miss. This is the
   one visual language for "the next real step in this video's
   workflow": full-width, large text, its own block below the panel
   content, never crammed inline with other controls. */
.btn-next-stage {
    display: block; width: 100%; text-align: center;
    font-size: 16px; font-weight: 700; padding: 16px 20px;
    margin-top: 16px; border-radius: var(--radius);
    text-decoration: none;
}
.btn-next-stage:hover { text-decoration: none; }

.btn-success { background: var(--success); color: #000; border-color: var(--success); }
.btn-success:hover { box-shadow: 0 0 16px rgba(52,211,153,0.3); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { box-shadow: 0 0 16px rgba(248,113,113,0.3); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-mic {
    background: var(--accent); color: #fff; border: none;
    padding: 8px 14px; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 16px; transition: var(--transition);
}
.btn-mic:hover { background: var(--accent-hover); }
.btn-mic.recording { background: var(--danger); animation: pulse 1s infinite; }

/* ── INPUTS ── */
.search-input {
    width: 100%; padding: 10px 14px; background: rgba(15,15,25,0.6);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text); font-size: 13px; font-family: var(--font);
    transition: var(--transition);
}
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.search-input::placeholder { color: var(--text-muted); }

/* ── DASHBOARD — Operations Center ── */
.mission-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; margin-bottom: 16px;
}
.mission-card {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 20px 16px; text-align: center;
    transition: var(--transition);
}
.mission-card:hover { border-color: var(--accent); }
.mission-value {
    font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--text);
    line-height: 1.2; margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
.mission-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.mission-action-card {
    background: var(--glass-card); border: 1px solid rgba(26,143,90,0.20);
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 13px;
}

/* ── Priority Queue Table ── */
.priority-queue {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
}
.pq-header {
    display: flex; padding: 10px 14px; background: rgba(0,0,0,0.2);
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--glass-border);
}
.pq-row {
    display: flex; padding: 12px 14px; align-items: center;
    border-bottom: 1px solid var(--glass-border);
    transition: var(--transition); cursor: pointer;
    font-size: 13px;
}
.pq-row:hover { background: var(--glass-hover); }
.pq-row:last-child { border-bottom: none; }
.pq-col { display: flex; align-items: center; }
.pq-rank { width: 55px; flex-shrink: 0; font-weight: 700; }
.pq-rank-very_high { color: var(--danger); }
.pq-rank-high { color: var(--warning); }
.pq-rank-medium { color: var(--accent-2); }
.pq-rank-low { color: var(--text-muted); }
.pq-video { flex: 1; min-width: 0; padding-right: 10px; display: flex; align-items: center; gap: 8px; }
.pq-title {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 600; color: var(--text); display: block; min-width: 0;
}
.pq-problem { width: 90px; flex-shrink: 0; }
.pq-problem-tag {
    font-size: 10px; font-weight: 700; padding: 3px 8px;
    border-radius: 8px; text-transform: uppercase; letter-spacing: 0.3px;
}
.pq-score { width: 55px; flex-shrink: 0; justify-content: center; }
.pq-score-badge { font-size: 13px; font-weight: 700; }
.pq-impact { width: 90px; flex-shrink: 0; font-size: 11px; }
.pq-gain { width: 85px; flex-shrink: 0; }
.pq-action { width: 65px; flex-shrink: 0; justify-content: flex-end; }

/* ── Expandable detail panel ── */
.pq-detail {
    background: var(--glass-card); border-top: 1px solid var(--glass-border-strong);
    animation: pqSlideDown 0.2s ease;
}
@keyframes pqSlideDown {
    from { max-height: 0; opacity: 0; }
    to { max-height: 800px; opacity: 1; }
}
.pq-title-chip { transition: all 0.15s; }
.pq-title-chip:hover { background: var(--accent) !important; color: #fff !important; }
.pq-title-chip.selected { background: var(--accent) !important; color: #fff !important; font-weight: 600; }

/* Toggle chips under the Video Workforce research fields — click to add/remove
   a suggested value from the field's comma-separated text. */
.suggest-chip {
    display: inline-block; padding: 3px 9px; margin: 2px 4px 2px 0;
    border-radius: 999px; font-size: 11px; cursor: pointer; user-select: none;
    background: var(--glass-hover); color: var(--text-secondary);
    border: 1px solid var(--glass-border); transition: all 0.15s;
}
.suggest-chip:hover { border-color: var(--accent); color: var(--text); }
.suggest-chip.selected { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

.btn-xs {
    padding: 5px 12px; font-size: 11px; border-radius: 6px;
    font-weight: 600; border: none; cursor: pointer;
}

/* ── Original dashboard (kept for fallback) ── */
.priority-banner {
    padding: 14px 20px; border-radius: var(--radius);
    margin-bottom: 20px; font-size: 14px; font-weight: 500;
    display: flex; align-items: center; gap: 12px;
}
.priority-banner.critical { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.25); color: var(--danger); }
.priority-banner.high { background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25); color: var(--warning); }
.priority-banner.normal { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25); color: var(--success); }

.stat-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px; margin-bottom: 24px;
}
.stat-card {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 16px; text-align: center;
    transition: var(--transition);
}
.stat-card:hover { border-color: var(--glass-border-strong); transform: translateY(-1px); }
.stat-value { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.stat-change { font-size: 12px; margin-top: 4px; }
.stat-change.up { color: var(--success); }
.stat-change.down { color: var(--danger); }

.section-header {
    font-family: var(--font-heading);
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-muted);
    margin: 24px 0 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; gap: 8px;
}
/* 2026-08-18, Konrad: themed section-header icons — a small accent-
   coloured route-pin marks each new stage/section, matching the
   "one clear thing at a time" studio feel rather than a large graphic. */
.section-header::before {
    content: '';
    flex-shrink: 0; width: 13px; height: 13px;
    background-color: var(--accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 4a3 3 0 110 6 3 3 0 010-6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 4a3 3 0 110 6 3 3 0 010-6z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
h1, h2, h3, h4 { font-family: var(--font-heading); }

.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.quick-btn {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 14px; cursor: pointer;
    text-align: center; color: var(--text); font-size: 13px; font-weight: 500;
    transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.quick-btn:hover { border-color: var(--accent); background: var(--glass-active); }
.quick-icon { font-size: 24px; }

/* ── STUDIO LAYOUT ── */
.studio-layout {
    display: grid; grid-template-columns: 280px 1fr; gap: 20px;
    margin-top: 16px;
}
.studio-sidebar {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 16px;
}
.studio-main { min-height: 400px; }

/* 2026-08-18, Konrad: themed icons for empty-states, per his original
   icon-priority ranking. A small, low-opacity compass — appropriate for
   both "nothing here yet, go find something" and mid-load states alike,
   subtle enough (per his own "not too overwhelming" texture guidance
   this same session) not to clash with either. */
.empty-state {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 300px; color: var(--text-muted); font-size: 14px;
    text-align: center; padding: 40px;
}
.empty-state::before {
    content: '';
    flex-shrink: 0; width: 20px; height: 20px;
    background-color: currentColor; opacity: 0.35;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M15 9l-2 5-5 2 2-5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M15 9l-2 5-5 2 2-5z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ── VIDEO LIST COMPACT ── */
.video-list-compact { margin-top: 12px; max-height: calc(100vh - 250px); overflow-y: auto; }
.video-list-compact::-webkit-scrollbar { width: 4px; }
.video-list-compact::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.video-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    cursor: pointer; transition: var(--transition);
    border: 1px solid transparent;
    margin-bottom: 4px;
    /* Reserves the thumbnail's own height so hovering it (which takes the
       image out of flow via position:fixed to enlarge it) never shrinks
       the row underneath the cursor — that shrink was pulling the cursor
       out from under the hover target and causing a rapid pop/shrink
       flicker ("shakes"). */
    min-height: 52px;
}
.video-item:hover { background: var(--glass-hover); }
.video-item.active { border-color: var(--accent); background: var(--glass-active); }
.video-item-thumb {
    width: 56px; height: 32px; border-radius: 4px;
    background: var(--glass-hover); flex-shrink: 0;
    object-fit: cover;
    transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94),
                width 0.25s cubic-bezier(0.25,0.46,0.45,0.94),
                height 0.25s cubic-bezier(0.25,0.46,0.45,0.94),
                border-radius 0.2s ease;
    cursor: pointer; position: relative; z-index: 1;
}
.video-item:hover .video-item-thumb,
.video-item-thumb:hover {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 45vw; height: auto;
    max-height: 70vh;
    aspect-ratio: 16/9;
    border-radius: 8px; z-index: 5000;
    box-shadow: 0 12px 60px rgba(0,0,0,0.8);
    object-fit: contain;
    background: rgba(0,0,0,0.9);
}
.video-item { overflow: visible; }
.video-item:hover { overflow: visible; z-index: 10; position: relative; }
.video-item-info { flex: 1; min-width: 0; }
/* Two lines, not one: many titles differ only in their trailing suffix
   ("... : Director's Cut" vs "... - Featurette 6"), which a single clipped
   line hides entirely — making distinct videos look like duplicates. */
.video-item-title {
    font-size: 12px; font-weight: 500; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere; line-height: 1.35;
}
.video-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.video-item-score { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.score-high { color: var(--success); }
.score-mid { color: var(--warning); }
.score-low { color: var(--danger); }

/* ── WORKSPACE TABS ── */
.workspace-tabs { margin-top: 20px; }
.tab-bar { display: flex; gap: 0; margin-bottom: -1px; }
.tab-btn {
    padding: 10px 20px; border: 1px solid var(--glass-border);
    border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: var(--transition);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { background: var(--glass-card); color: var(--accent); border-color: var(--glass-border-strong); }
.tab-content { display: none; padding: 20px; background: var(--glass-card); border: 1px solid var(--glass-border); border-radius: 0 var(--radius) var(--radius) var(--radius); }
.tab-content.active { display: block; }

/* ── VIDEO WORKFORCE TEAMS ── */
.workforce-teams { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.workforce-teams .wf-team-btn {
    border: 1px solid var(--glass-border);
    border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: transparent; color: var(--text-secondary);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.workforce-teams .wf-team-btn:hover { color: var(--text); }
.workforce-teams .wf-team-btn.active {
    background: var(--glass-card); color: var(--accent); border-color: var(--glass-border-strong);
}
.wf-team { display: block; }
.wf-team[hidden], .wf-team[style*="display: none"] { display: none; }

/* ── THUMBNAIL GALLERY ── */
.thumbnail-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
/* 2026-08-18, Konrad, live: "I want to see the original thumbnails, they
   should pop out. There has to be clear presentation of the frames for
   me to approve or reject." Larger cards + a real hover pop (scale +
   glow) for the frame-approval stage specifically — a dedicated modifier
   rather than changing .thumbnail-gallery everywhere it's already used
   (Shortlist, ranked-frames, etc.), which could shrink other layouts
   that were sized deliberately. */
.thumbnail-gallery-large { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
.thumbnail-gallery-large .thumbnail-card img { cursor: zoom-in; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.thumbnail-gallery-large .thumbnail-card:hover img { transform: scale(1.02); box-shadow: 0 0 0 2px var(--accent), 0 8px 24px rgba(0,0,0,0.4); }
.thumbnail-card {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); overflow: hidden; transition: var(--transition);
    position: relative;
}
.thumbnail-card:hover { border-color: var(--glass-border-strong); transform: translateY(-2px); }
.thumbnail-card img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }

/* ── THUMBNAIL HOVER-ZOOM — reusable component (Phase 3) ── */
/* Wraps any <img> or <video> thumbnail — add the class to the container. */
.thumb-hover-zoom {
    position: relative;
    overflow: visible;
    cursor: zoom-in;
}
.thumb-hover-zoom img,
.thumb-hover-zoom video {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease,
                z-index 0s;
    transform-origin: center bottom;
    position: relative;
    z-index: 1;
}
.thumb-hover-zoom:hover img,
.thumb-hover-zoom:hover video {
    transform: scale(1.85);
    box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 0 2px var(--accent-glow-strong);
    z-index: 100;
    border-radius: 4px;
}
/* Zoom hint badge — appears bottom-right on hover */
.thumb-hover-zoom::after {
    content: '🔍 hover to preview';
    position: absolute;
    bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.75);
    color: rgba(255,255,255,0.75);
    font-size: 10px; padding: 3px 7px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.thumb-hover-zoom:hover::after { opacity: 1; }
.thumbnail-badge {
    position: absolute; top: 6px; left: 6px; z-index: 2;
    background: rgba(10, 14, 22, 0.78); border: 1px solid var(--glass-border-strong);
    color: var(--text-secondary); font-size: 10px; font-weight: 600;
    padding: 3px 8px; border-radius: 999px; letter-spacing: 0.02em;
    max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thumbnail-badge.intel-rec { color: #ffd166; border-color: rgba(255, 209, 102, 0.55); background: rgba(40, 32, 8, 0.85); }
.thumbnail-detail {
    font-size: 11px; line-height: 1.35; color: var(--text-secondary);
    background: rgba(10, 14, 22, 0.72); border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 7px 10px;
}
.thumbnail-card .manager-approval.ok { margin-top: -6px; }
.thumbnail-card-body { padding: 12px; }
.thumbnail-score {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600;
}
.score-badge {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
}
.score-badge.excellent { background: rgba(52,211,153,0.15); color: var(--success); }
.score-badge.good { background: rgba(196,152,23,0.15); color: var(--warning); }
.score-badge.poor { background: rgba(248,113,113,0.15); color: var(--danger); }
.thumbnail-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ── SOCIAL CAMPAIGN ── */
.platform-card {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.platform-header {
    display: flex; align-items: center; gap: 10px;
    font-size: 16px; font-weight: 600; margin-bottom: 10px;
}
.platform-icon { font-size: 24px; }
.campaign-text {
    background: rgba(15,15,25,0.6); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); padding: 14px; font-size: 13px;
    color: var(--text-secondary); line-height: 1.7;
    margin-bottom: 12px; white-space: pre-wrap; max-height: 200px; overflow-y: auto;
}

/* ── AVA CHAT ── */
.ava-chat {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); overflow: hidden;
}
.ava-messages {
    padding: 16px; min-height: 350px; max-height: 500px;
    overflow-y: auto; font-size: 13px; line-height: 1.7;
}
.ava-messages::-webkit-scrollbar { width: 4px; }
.ava-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.ava-msg { margin-bottom: 14px; }
.ava-msg-user { text-align: right; }
.ava-msg-user span {
    background: var(--accent); color: #fff; display: inline-block;
    padding: 8px 14px; border-radius: 16px 16px 4px 16px; max-width: 80%;
    text-align: left; font-size: 13px;
}
.ava-msg-ava span {
    background: var(--glass-hover); color: var(--text); display: inline-block;
    padding: 8px 14px; border-radius: 16px 16px 16px 4px; max-width: 80%;
    font-size: 13px;
}
.ava-input-row {
    display: flex; gap: 8px; padding: 12px;
    border-top: 1px solid var(--glass-border);
}
.ava-text-input {
    flex: 1; padding: 10px 14px; background: rgba(15,15,25,0.6);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text); font-size: 13px; font-family: var(--font);
}
.ava-text-input:focus { outline: none; border-color: var(--accent); }
.ava-text-input::placeholder { color: var(--text-muted); }

/* ── ANALYTICS ── */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }

/* ── MODAL ── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200;
    display: none; align-items: center; justify-content: center;
}
.modal-overlay.visible { display: flex; }
.modal-content {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 24px; max-width: 720px; width: 90%;
    max-height: 90vh; overflow-y: auto; position: relative;
    backdrop-filter: blur(20px);
}
.modal-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; color: var(--text-secondary);
    font-size: 24px; cursor: pointer;
}
.modal-close:hover { color: var(--text); }
.modal-content video { width: 100%; border-radius: var(--radius-sm); }

/* ── LIGHTBOX ── */
.lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 300;
    display: none; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox.visible { display: flex; }
.lightbox img { max-width: 90%; max-height: 85vh; border-radius: var(--radius-sm); }
/* True browser Fullscreen API mode (2026-08-19, app-wide standard #1):
   the UA's default fullscreen sizing already stretches the element to the
   monitor, but explicit width/height here removes any risk of a fixed
   99vw/98vh-style ancestor clipping it, and drops the corner radius since
   there's no longer a visible viewport edge for it to round against. */
.lightbox:fullscreen, .lightbox:-webkit-full-screen {
    width: 100vw; height: 100vh;
}
.lightbox:fullscreen img, .lightbox:-webkit-full-screen img { max-height: 92vh; border-radius: 0; }
.lightbox-close {
    position: absolute; top: 20px; right: 24px;
    background: none; border: none; color: #fff; font-size: 36px; cursor: pointer;
}
.lightbox-info {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: var(--text-secondary); font-size: 13px;
}

/* ── FIELD PREVIEW (thumbnail at real YouTube pixel sizes) ── */
.field-preview-toggle { position: absolute; top: 20px; left: 24px; z-index: 2; }
#fieldPreviewPanel {
    position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
    max-width: 720px; width: 92%; max-height: 75vh; overflow-y: auto;
    background: var(--surface, #181510); border: 1px solid var(--glass-border, rgba(200,120,40,0.18));
    border-radius: var(--radius-sm); padding: 16px; cursor: default;
}
.field-preview-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.field-preview-box { flex: 1; min-width: 220px; }
.fp-label { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.fp-note { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }

.fp-mock-feed { background: #0a0907; border-radius: 8px; padding: 10px; width: 100%; max-width: 235px; }
.fp-mock-feed-item { margin-bottom: 10px; }
.fp-mock-feed-item img, .fp-mock-thumb-placeholder { width: 210px; height: 118px; object-fit: cover; border-radius: 6px; background: #201c14; display: block; }
.fp-mock-title-line { height: 8px; width: 80%; background: rgba(200,120,40,0.15); border-radius: 3px; margin-top: 6px; }
.fp-mock-feed-item.fp-target img { outline: 2px solid var(--accent); }

.fp-mock-serp { background: #0a0907; border-radius: 8px; padding: 10px; width: 100%; max-width: 235px; }
.fp-mock-serp-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fp-mock-serp-item img, .fp-mock-thumb-placeholder-sm { width: 168px; height: 94px; object-fit: cover; border-radius: 4px; background: #201c14; flex-shrink: 0; }
.fp-mock-serp-item .fp-mock-title-line { width: 100%; margin-top: 0; }
.fp-mock-serp-item.fp-target img { outline: 2px solid var(--accent); }

.fp-blur-test { width: 100%; max-width: 400px; border-radius: 8px; cursor: pointer; filter: blur(14px); transition: filter 300ms ease; }
.fp-blur-test.fp-sharp { filter: blur(0); }

/* ── TOASTS ── */
#toasts { position: fixed; top: 70px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13px;
    color: var(--text); box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: toastIn 0.3s ease; min-width: 240px; max-width: 360px;
}
.toast.info { border-left: 3px solid var(--accent); }
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }

/* Post-publish YouTube-live banner (2026-08-19, app-wide standard #2) —
   a .toast that additionally carries two live-link buttons plus its own
   dismiss control; not auto-removed like a plain toast, see the comment
   on showYouTubeLiveBanner() in dashboard.js for why. */
.yt-live-banner { min-width: 280px; max-width: 400px; animation: toastIn 0.3s ease; }
.yt-live-banner-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.yt-live-banner-dismiss { margin-left: auto; }

/* ── PULSE ── */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ── SKELETON ── */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-xs);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── SPINNER ── */
.spinner {
    width: 24px; height: 24px; border: 2px solid var(--glass-border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE — MOBILE-FIRST ── */

/* Small phones: 320px-374px */
@media (max-width: 374px) {
    .mission-row { grid-template-columns: 1fr; }
    .mission-value { font-size: 22px; }
    .pq-header, .pq-row { padding: 8px 10px; font-size: 11px; }
    .pq-rank { width: 35px; }
    .pq-problem, .pq-gain { display: none; }
    .pq-video { font-size: 11px; }
    .sidebar { width: 220px; }
    .batch-requirements { grid-template-columns: 1fr; }
    .quick-actions { grid-template-columns: 1fr 1fr; }
}

/* Medium phones: 375px-413px (iPhone 6/7/8/X/11/12) */
@media (min-width: 375px) and (max-width: 413px) {
    .mission-row { grid-template-columns: 1fr 1fr; }
    .mission-card { padding: 12px 10px; }
    .mission-value { font-size: 24px; }
}

/* Large phones: 414px+ (iPhone 11 Pro Max, etc) */
@media (min-width: 414px) and (max-width: 767px) {
    .mission-row { grid-template-columns: 1fr 1fr; }
}

/* Tablets: 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .mission-row { grid-template-columns: repeat(3, 1fr); }
    .sidebar { width: 220px; }
    .main-content { margin-left: 220px; }
}

/* Small desktop: 1024px-1365px */
@media (min-width: 1024px) and (max-width: 1365px) {
    .mission-row { grid-template-columns: repeat(4, 1fr); }
}

/* Large desktop: 1366px+ */
@media (min-width: 1366px) {
    .mission-row { grid-template-columns: repeat(5, 1fr); }
}

/* Ultrawide: 1920px+ */
@media (min-width: 1920px) {
    .main-content { max-width: 1600px; margin-left: var(--sidebar-w); margin-right: auto; }
    .mission-row { grid-template-columns: repeat(5, 1fr); }
}

/* Mobile/tablet sidebar: slide-out drawer */
@media (max-width: 1023px) {
    .hamburger { display: flex; }
    .main-content { margin-left: 0 !important; padding: 20px 16px; }
    .sidebar { transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); z-index: 1000; }
    .sidebar.open { transform: translateX(0); }
    .header { left: 0; }
    .stat-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .studio-layout { grid-template-columns: 1fr; }
    .card-grid { grid-template-columns: 1fr; }
    .tab-bar { overflow-x: auto; }
    .tab-btn { padding: 8px 14px; font-size: 12px; white-space: nowrap; }
}

@media (max-width: 767px) {
    .page-title { font-size: 20px; }
    .quick-actions { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .thumbnail-gallery { grid-template-columns: 1fr; }
    .header-actions { gap: 8px; }
    .channel-badge { display: none; }
    .header-status { display: none; }
    .logo-text { font-size: 13px; }
    .batch-requirements { grid-template-columns: 1fr; }
    .batch-video-header { flex-direction: column; align-items: flex-start; }
}

/* ── TOUCH OPTIMIZATION ── */
@media (pointer: coarse) {
    .btn, .quick-btn, .batch-tab-btn, .sidebar-item {
        min-height: 44px; min-width: 44px;
    }
    .pq-row { min-height: 48px; }
    .tag-chip { min-height: 36px; padding: 6px 12px; }
    .tag-remove { font-size: 18px; padding: 2px 6px; }
    input[type="text"], .search-input, .ava-text-input {
        min-height: 44px; font-size: 16px; /* Prevents iOS zoom */
    }
}

/* ── NO HOVER-ONLY ON TOUCH ── */
@media (hover: none) {
    .pq-row:hover { background: inherit; }
    .pq-row:active { background: var(--glass-hover); }
    .batch-video-card:hover { border-color: var(--glass-border); }
    .suggestion-video-card:hover { border-color: var(--glass-border); }
    .mission-card:hover { border-color: var(--glass-border); }
}

/* ── STUDIO TABS ── */
.studio-tabs { display: flex; gap: 0; margin-bottom: 16px; }
.studio-tabs .tab-btn { font-size: 13px; }
.ms-tab-content { display: none; }
.ms-tab-content.active { display: block; }

/* ── BATCH OPTIMIZER ── */
.batch-requirements { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.batch-field label {
    display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 4px;
}
.batch-field input { width: 100%; }
.batch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.batch-video-card {
    background: var(--glass-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
    transition: var(--transition);
}
.batch-video-card:hover { border-color: var(--glass-border-strong); }
.batch-video-header {
    display: flex; align-items: center; gap: 12px; padding: 14px;
    border-bottom: 1px solid var(--glass-border);
}
.batch-video-header img {
    width: 100px; aspect-ratio: 16/9; object-fit: cover;
    border-radius: 4px; flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.25,0.46,0.45,0.94),
                border-radius 0.2s ease;
    cursor: pointer; position: relative; z-index: 1;
}
.batch-video-header img:hover {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 45vw; height: auto;
    max-height: 70vh;
    aspect-ratio: 16/9;
    border-radius: 8px; z-index: 5000;
    box-shadow: 0 12px 60px rgba(0,0,0,0.8);
    object-fit: contain;
    background: rgba(0,0,0,0.9);
}

/* ── Thumbnail Hover Zoom (global — applies to all video thumbnails) ── */
.suggestion-thumb {
    width: 160px; height: 90px; object-fit: cover; border-radius: 4px;
    transition: width 0.3s cubic-bezier(0.25,0.46,0.45,0.94), border-radius 0.2s ease;
    cursor: pointer;
}
.suggestion-thumb-wrap:hover .suggestion-thumb,
.suggestion-thumb:hover {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 45vw; height: auto;
    max-height: 70vh;
    aspect-ratio: 16/9;
    z-index: 5000;
    box-shadow: 0 12px 60px rgba(0,0,0,0.8);
    border-radius: 8px;
    object-fit: contain;
    background: rgba(0,0,0,0.9);
}
.batch-video-header img:hover,
.pq-row img:hover {
    max-width: 50vw; max-height: 50vh;
    z-index: 1000;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    border-radius: 6px;
    object-fit: contain;
}
.batch-video-info { flex: 1; min-width: 0; }
.batch-video-old { font-size: 11px; color: var(--text-muted); text-decoration: line-through; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-video-new { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.batch-video-scores { display: flex; gap: 8px; margin-top: 4px; font-size: 12px; }
.batch-compare {
    padding: 12px 14px; font-size: 12px; border-bottom: 1px solid var(--glass-border);
}
.batch-compare-section { margin-bottom: 8px; }
.batch-compare-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.batch-compare-label.desc { color: #2196F3; }
.batch-compare-label.tags { color: #9C27B0; }
.batch-compare-before { font-size: 11px; color: var(--text-muted); }
.batch-compare-after { font-size: 11px; color: var(--text); margin-top: 2px; }
.batch-video-actions { padding: 10px 14px; display: flex; gap: 8px; }

/* ── BADGES ── */
.priority-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #0d0d12; box-shadow: 0 2px 8px rgba(255, 100, 40, 0.35);
}

/* ── VIDEO SELECTOR (compact dropdown list) ── */
.video-selector { display: flex; flex-direction: column; gap: 6px; }
.video-selector .search-input { width: 100%; }
/* No fixed cap here — inherit .video-list-compact's viewport-relative
   max-height (calc(100vh - 250px)) so the Video Workforce list fills the
   available screen instead of being stuck at a ~4-row scroll box. */

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── HIGH CONTRAST MODE ── */
@media (forced-colors: active) {
    .btn, .quick-btn, .tag-chip { border: 2px solid ButtonText; }
    .mission-card, .pq-row, .batch-video-card { border: 1px solid ButtonText; }
    .priority-badge { border: 1px solid ButtonText; }
}

/* ── COMMAND PALETTE ── */
.cmd-palette-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 500;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 15vh;
}
.cmd-palette {
    background: var(--glass-bg); border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius); width: 480px; max-width: 90vw;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.cmd-input {
    width: 100%; padding: 14px 18px; background: transparent; border: none;
    border-bottom: 1px solid var(--glass-border); color: var(--text);
    font-size: 15px; font-family: var(--font);
}
.cmd-input:focus { outline: none; }
.cmd-input::placeholder { color: var(--text-muted); }
.cmd-results { max-height: 320px; overflow-y: auto; padding: 8px 0; }
.cmd-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px; cursor: pointer; transition: var(--transition);
    font-size: 13px; color: var(--text);
}
.cmd-item:hover { background: var(--glass-hover); }
.cmd-label { flex: 1; }
.cmd-key {
    font-size: 11px; color: var(--text-muted); background: var(--glass-hover);
    padding: 2px 8px; border-radius: 4px; font-weight: 600;
}

/* ── CROSS-BROWSER FIXES ── */
input { -webkit-appearance: none; }
.ava-messages, .video-list-compact, .sidebar, .modal-content, .campaign-text { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── RIDE LOADER — a turning chain + sprocket with the live timer beside it ── */
#rideLoader {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#rideLoader.active { opacity: 1; }

/* Anchored next to the Research & Create AI Thumbnail button: chain on the
   left, label + live countdown on the right, side by side. */
#rideLoader.inline {
    position: static;
    transform: none;
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-strong);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: 520px;
}

.ride-engine {
    width: 150px;
    flex: 0 0 auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
}
.ride-svg { display: block; width: 100%; height: auto; }

/* Text column beside the chain: caption, stage, then the big countdown */
.ride-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 0;
}

/* Chain: dark rail + bright links that march around both sprockets */
.ride-chain { stroke-linecap: round; }
.ride-chain-high {
    stroke-dasharray: 6 4;
    animation: ride-chain-move 0.4s linear infinite;
}
@keyframes ride-chain-move {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -40; }
}

/* Sprockets: teeth rotate around their hubs */
.ride-sprocket { transform-box: view-box; }
.ride-sprocket-front { transform-origin: 45px 55px; animation: ride-spin 2.3s linear infinite; }
.ride-sprocket-rear  { transform-origin: 155px 55px; animation: ride-spin 0.98s linear infinite; }
@keyframes ride-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Caption for what's generating */
.ride-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

/* Live stage + countdown column */
.ride-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}
.ride-status .ride-stage {
    background: rgba(120, 130, 255, 0.12);
    border: 1px solid rgba(120, 130, 255, 0.35);
    color: #b8c0ff;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ride-status .ride-eta {
    color: var(--accent, #1A8F5A);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ride-status .ride-eta::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 rgba(255, 107, 61, 0.6);
    animation: ride-pulse 1.4s ease-out infinite;
}
@keyframes ride-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 107, 61, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 107, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 61, 0); }
}
.ride-status .ride-time {
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.ride-status .ride-time::before {
    content: '⏱ ';
}

/* Per-team panel: which team/agent is busy right now, each with its own
   status (done/active/queued) and a realistic countdown/elapsed time. */
.ride-teams {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
    width: 100%;
    max-width: 260px;
}
.ride-team-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.4;
    padding: 2px 0;
}
.ride-team-icon { flex: 0 0 auto; font-size: 11px; }
.ride-team-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
}
.ride-team-time {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.ride-team-row.ride-team-active .ride-team-name {
    color: var(--text);
    font-weight: 600;
}
.ride-team-row.ride-team-active .ride-team-time {
    color: var(--accent, #1A8F5A);
    font-weight: 700;
}
.ride-team-row.ride-team-done .ride-team-name { color: var(--success, #3ddc84); }
.ride-team-row.ride-team-queued { opacity: 0.55; }

/* ── SEARCH HISTORY — remembered previous searches under each search bar ── */
.search-history-box {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 2px;
    z-index: 300;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-strong);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.search-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
    overflow: hidden;
}
.search-history-item:last-child { border-bottom: none; }
.search-history-item:hover, .search-history-item.highlighted { background: var(--glass-hover); }
.sh-clock { opacity: 0.5; font-size: 11px; flex-shrink: 0; }
.sh-text { flex: 1; text-overflow: ellipsis; overflow: hidden; }
.sh-del { opacity: 0.4; font-size: 12px; padding: 2px 6px; flex-shrink: 0; }
.sh-del:hover { opacity: 1; color: var(--danger); }

/* ── TAG PREDICTION — autocomplete dropdown under the Describe This Video box ── */
.pq-tag-predict {
    position: relative;
    z-index: 20;
    margin-top: 2px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-strong);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-height: 200px;
    overflow-y: auto;
}
.pq-tag-sugg {
    padding: 7px 12px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s ease;
}
.pq-tag-sugg:hover, .pq-tag-sugg.active {
    background: var(--accent);
    color: #fff;
}

/* ── MANAGER — CHIEF OF STAFF PANEL ───────────────────────────────────────── */
.manager-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 900px) {
    .manager-grid { grid-template-columns: 1fr; }
}
.manager-column { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.manager-badge {
    background: rgba(255, 107, 61, 0.14);
    border: 1px solid rgba(255, 107, 61, 0.4);
    color: var(--accent);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
}
.manager-status {
    white-space: pre-wrap;
    font-family: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px;
    max-height: 420px;
    overflow: auto;
}
.req-row {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 4px;
    background: var(--glass-hover);
}
.req-pass { border-left: 3px solid var(--success, #2ecc71); }
.req-warn { border-left: 3px solid #d9a441; }
.req-fail { border-left: 3px solid var(--danger, #e74c3c); }

/* ── MANAGER QA APPROVAL BADGES ──────────────────────────────────────────── */
.manager-approval {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 10px;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.manager-approval.ok {
    background: rgba(46, 204, 113, 0.14);
    border: 1px solid rgba(46, 204, 113, 0.45);
    color: #2ecc71;
}
.manager-approval.bad {
    background: rgba(231, 76, 60, 0.14);
    border: 1px solid rgba(231, 76, 60, 0.5);
    color: #e74c3c;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST ENHANCEMENTS — v2 (2026-08-07)
   Covers: safe-area insets, bottom nav, PQ card mode,
   tab-bar scroll, modal, toast position, touch helpers.
   ═══════════════════════════════════════════════════════════ */

/* ── SAFE-AREA INSETS (notch / Dynamic Island / home indicator) ── */
:root {
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);
}
header {
    padding-top: var(--safe-top);
    height: calc(var(--header-h) + var(--safe-top));
}
.main-content {
    padding-top: calc(var(--header-h) + var(--safe-top) + 24px);
}

/* ── MOBILE BOTTOM NAVIGATION BAR ── */
/*
   Appears on touch devices narrower than 768px.
   5 tabs: Dashboard · Videos · Content · Ava · Settings
   Each tab highlights when its panel is active (JS sets data-panel on body).
*/
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 110;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}
.mobile-nav-inner {
    display: flex;
    height: 56px;
    align-items: stretch;
}
.mobile-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 6px 4px 4px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
}
.mobile-nav-btn svg {
    width: 20px; height: 20px; fill: currentColor; flex-shrink: 0;
}
.mobile-nav-btn.active {
    color: var(--accent);
}
.mobile-nav-btn:active {
    background: var(--glass-hover);
    border-radius: var(--radius-xs);
}

@media (max-width: 767px) {
    .mobile-bottom-nav { display: block; }
    /* Push main content up so it's not hidden behind bottom nav */
    .main-content {
        padding-bottom: calc(56px + var(--safe-bottom) + 8px);
    }
    /* Toast stack: move to bottom-left on mobile to avoid nav overlap */
    #toasts {
        top: auto;
        bottom: calc(66px + var(--safe-bottom));
        right: 12px;
        left: 12px;
        max-width: 100%;
    }
    .toast { max-width: 100%; min-width: 0; font-size: 12px; }
}

/* ── PRIORITY QUEUE — MOBILE CARD MODE ── */
/*
   On narrow phones the PQ is a horizontal flex row with 6 fixed-width
   columns that add up to ~440px+. On ≤767px we collapse to three visible
   columns: [rank] [title] [score+action], hide the 4 data columns.
*/
@media (max-width: 767px) {
    .pq-header { display: none; } /* Remove column headers on mobile */
    .pq-row {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 4px;
        align-items: center;
    }
    /* Hide low-priority detail columns */
    .pq-problem, .pq-gain, .pq-impact { display: none !important; }

    .pq-rank { width: 32px; font-size: 12px; }
    .pq-video { width: calc(100% - 32px - 110px); flex: none; }
    .pq-title { font-size: 12px; }
    .pq-score { width: 50px; }
    .pq-action { width: 60px; }

    /* Two-line layout for the video column */
    .pq-video-inner {
        display: flex; flex-direction: column; gap: 2px;
    }
    .pq-video .pq-thumb { display: none; } /* save space, show only title */
}

/* ── TAB BARS — HORIZONTAL SCROLL WITH SNAP ── */
.tab-bar, .studio-tabs, .batch-tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
}
.tab-bar::-webkit-scrollbar,
.studio-tabs::-webkit-scrollbar,
.batch-tab-bar::-webkit-scrollbar { display: none; }

.tab-bar .tab-btn,
.studio-tabs .tab-btn,
.batch-tab-bar .batch-tab-btn {
    scroll-snap-align: start;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .tab-bar .tab-btn,
    .studio-tabs .tab-btn { font-size: 11px; padding: 7px 12px; }
    .batch-tab-bar .batch-tab-btn { font-size: 11px; padding: 6px 10px; }
}

/* ── MODALS — FULL-SCREEN SHEET ON MOBILE ── */
@media (max-width: 767px) {
    .modal-overlay {
        align-items: flex-end; /* slide up from bottom on mobile */
    }
    .modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius) var(--radius) 0 0;
        max-height: 90dvh; /* dynamic viewport height — avoids address bar gap */
        padding: 20px 16px;
        padding-bottom: calc(16px + var(--safe-bottom));
    }
    .modal-close {
        top: 10px; right: 14px; font-size: 28px; /* bigger tap target */
    }
}

/* ── BUTTON GROUPS — WRAP GRACEFULLY ON MOBILE ── */
@media (max-width: 767px) {
    /* Inline flex button groups inside cards */
    .card > div[style*="display:flex"],
    .card > div[style*="display: flex"] {
        flex-wrap: wrap;
    }
    /* Quick-action grids: 2 columns on small phones */
    .quick-actions { grid-template-columns: 1fr 1fr; }
}

/* ── CARD GRIDS — ENSURE SINGLE COLUMN ON PHONES ── */
@media (max-width: 767px) {
    .card-grid { grid-template-columns: 1fr !important; }
    .stat-row  { grid-template-columns: 1fr 1fr !important; }
}

/* ── STUDIO PANELS — FULL-WIDTH ON MOBILE ── */
@media (max-width: 767px) {
    .studio-layout, .ms-tab-content .studio-layout {
        grid-template-columns: 1fr !important;
    }
    /* Content pipeline 6-tab studio */
    #cp-studio .tab-content { padding: 12px 0; }
}

/* ── TEXTAREA / INPUT ERGONOMICS ── */
@media (max-width: 767px) {
    textarea, .search-input {
        font-size: 16px; /* prevent iOS auto-zoom */
        line-height: 1.5;
    }
    textarea { min-height: 80px; }
}

/* ── HEADER — NOTCH-AWARE PADDING ── */
@media (max-width: 767px) {
    header { padding-left: calc(12px + var(--safe-left)); padding-right: calc(12px + var(--safe-right)); }
    .logo-text { font-size: 12px; letter-spacing: 0.2px; }
}

/* ── LIGHTBOX — SAFE INSETS ── */
@media (max-width: 767px) {
    .lightbox img { max-height: calc(85dvh - var(--safe-bottom)); }
    .lightbox-close { top: calc(16px + var(--safe-top)); right: calc(16px + var(--safe-right)); font-size: 30px; }
}

/* ── THUMBNAIL CHECKLIST PANEL ── */
.thumbnail-checklist-panel {
    background: rgba(0,0,0,0.35);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 0 0 8px 8px;
    max-height: 420px;
    overflow-y: auto;
}
.thumbnail-checklist-panel::-webkit-scrollbar { width: 4px; }
.thumbnail-checklist-panel::-webkit-scrollbar-track { background: transparent; }
.thumbnail-checklist-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ── CONTENT PIPELINE — 10-Stage Track (Phase 3) ── */
.pipeline-track { padding: 14px 18px; }
.pipeline-stage {
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; flex: 1; min-width: 52px; position: relative;
}
/* Connector line between stages */
.pipeline-stage + .pipeline-stage::before {
    content: '';
    position: absolute; left: -50%; top: 14px;
    width: 100%; height: 2px;
    background: var(--glass-border-strong);
    z-index: 0;
}
.pipeline-stage.done + .pipeline-stage::before { background: var(--accent); }
.pipeline-stage-dot {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--glass-border-strong);
    background: var(--glass-card);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; position: relative; z-index: 1;
    transition: var(--transition);
}
.pipeline-stage.done .pipeline-stage-dot {
    background: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}
.pipeline-stage.active .pipeline-stage-dot {
    border-color: var(--accent-2); background: rgba(196,152,23,0.15);
    box-shadow: 0 0 8px rgba(196,152,23,0.3);
    animation: pulse-stage 2s ease-in-out infinite;
}
.pipeline-stage.error .pipeline-stage-dot {
    background: rgba(248,113,113,0.15); border-color: var(--danger);
}
@keyframes pulse-stage {
    0%,100% { box-shadow: 0 0 8px rgba(196,152,23,0.3); }
    50% { box-shadow: 0 0 18px rgba(196,152,23,0.6); }
}
.pipeline-stage-label {
    font-size: 9px; color: var(--text-muted);
    text-align: center; line-height: 1.2; max-width: 52px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.pipeline-stage.done .pipeline-stage-label { color: var(--accent); }
.pipeline-stage.active .pipeline-stage-label { color: var(--accent-2); font-weight: 600; }