/* --- DESIGN SYSTEM (Neo-Glass Studio / EZ0 v4) --- */
/* === THEME: Lipstick (Default) === */
:root {
    /* Core backgrounds */
    --bg-void: #080808;
    --bg-surface: rgba(255, 255, 255, 0.03);
    --bg-elevated: rgba(255, 255, 255, 0.06);
    --md-sys-color-background: #080808;

    /* Glass system */
    --glass-base: rgba(255, 255, 255, 0.03);
    --glass-strong: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.07);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --glass-blur: blur(20px) saturate(1.4);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-active: rgba(220, 38, 38, 0.5);

    /* Accent: Red → Deep Red */
    --accent-primary: #dc2626;
    --accent-secondary: #ef4444;
    --accent-glow: rgba(220, 38, 38, 0.3);
    --accent-gradient: linear-gradient(135deg, #ef4444, #991b1b);

    /* Legacy compat */
    --accent-gold: var(--accent-primary);
    --accent-gold-glow: var(--accent-glow);

    /* Text */
    --text-main: #f5f5f5;
    --text-muted: #9a9a9a;
    --text-dim: #555555;

    /* Status */
    --status-green: #34d399;
    --status-red: #f87171;
    --status-yellow: #fbbf24;

    /* Typography */
    --font-display: 'IBM Plex Mono', monospace;
    --font-sans: 'Outfit', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --font-brand: 'Bodoni Moda', serif;

    /* Spacing */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 28px;
}

/* === THEME: Neo-Glass === */
[data-theme="neo-glass"] {
    --bg-void: #0a0a12;
    --bg-elevated: rgba(255, 255, 255, 0.07);
    --md-sys-color-background: #0a0a12;
    --glass-base: rgba(255, 255, 255, 0.04);
    --glass-strong: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-active: rgba(139, 92, 246, 0.4);
    --accent-primary: #8b5cf6;
    --accent-secondary: #06b6d4;
    --accent-glow: rgba(139, 92, 246, 0.25);
    --accent-gradient: linear-gradient(135deg, #8b5cf6, #06b6d4);
    --text-main: #f0f0f5;
    --text-muted: #9898a8;
    --text-dim: #55556a;
}

/* --- RESET & ANIMATIONS --- */
* {
    box-sizing: border-box;
}

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    background-color: var(--bg-void);
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
    color: var(--text-main);
    font-family: var(--font-sans);
    margin: 0;
    height: 100vh;
    display: flex;
    overflow: hidden;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* Subtle noise overlay for glass texture */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.015;
    z-index: 9999;
}

/* --- LAYOUT --- */
.app-layout {
    display: flex;
    width: 100%;
    height: 100%;
}

/* --- SIDEBAR --- */
.sidebar {
    width: 240px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    padding: 24px 16px 20px;
    flex-shrink: 0;
    z-index: 10;
    overflow: hidden;
    transition: width 0.2s ease;
}

.brand-section {
    margin-bottom: 28px;
    padding: 0 8px;
}

/* Notes View Styles */
.notes-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* 92px top = original 32px + 60px to clear the now-absolute header
       (preserves the previous content position exactly). */
    padding: 92px 40px 40px;
    width: 100%;
    margin: 0;
    display: none;
    /* Hidden by default */
}

.notes-container.active {
    display: flex;
    min-height: 0;   /* allows flex children with overflow-y:auto to scroll */
    overflow: hidden;
}

/* ── World hub-view (Phase U-1; single-scroll + 2-col form in U-5.1) ─────────
   Brief + World Rules on one scrolling page with a single Save. A 2-column field grid
   keeps short fields (Format/Duration) on one row and uses the width efficiently. */
.world-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* No outer box/border: each section is now its own glass card, so framing the
       whole scroll too would double-box it. Padding just gives the cards room. */
    padding: 8px 28px 32px;
}

/* Centered content column. The old layout set max-width but no auto margin, so on
   wide screens the column stuck to the left with a dead gap on the right. */
.world-intro,
.world-card,
.world-save-row {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.world-intro {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    margin-top: 4px;
    margin-bottom: 20px;
}

/* Each section is a glass card so Brief / World Rules / Decisions read as three
   distinct groups instead of one flat scroll. Theme tokens (not hardcoded rgba) so
   both the Lipstick and Neo-Glass themes stay legible. */
.world-card {
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    margin-bottom: 18px;
}

.world-card-title {
    margin: 0 0 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Decisions (saves per-row) and Brand License (own Save button) save themselves — set
   them apart from the manually Saved Brief/Rules with an accent edge so the save
   boundary is visible. */
.world-card--decisions,
.world-card--self-save {
    background: var(--bg-surface);
    border-left: 2px solid var(--accent-primary);
}

/* 2-column field grid: short fields share a row; `--full` spans both columns. */
.world-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    align-items: start;
}

.world-form .form-group {
    margin-bottom: 0;   /* grid gap handles vertical spacing */
}

.form-group--full {
    grid-column: 1 / -1;
}

/* Save applies to Brief + World Rules only (Brand License and Decisions save
   themselves). Right-aligned, sitting between the Rules card and the self-saving cards. */
.world-save-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
    margin-bottom: 24px;
}

/* Brand License card — same .world-form grid as Brief/Rules; a footer row carries the
   status line (left) and its own Save button (right). */
.brand-license-attest {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-main);
    cursor: pointer;
}
.brand-license-attest input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--accent-primary);
    cursor: inherit;
}
.brand-license-attest:has(input:disabled) {
    color: var(--text-muted);
    cursor: default;
}
.brand-license-card input[type="date"].form-input {
    color-scheme: dark;   /* light native calendar glyph on the dark field */
}
.brand-license-card .form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.brand-license-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 16px;
}
.brand-license-state {
    flex: 1 1 240px;
    min-width: 0;
}
.brand-license-status {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.brand-license-status.is-active { color: var(--status-green); }
.brand-license-status.is-expired { color: var(--status-yellow); }
.brand-license-owner-note {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--text-dim);
}
.brand-license-footer .btn-primary {
    margin-left: auto;   /* stays right-aligned when the row wraps */
}
/* "Remove license" — a quiet text button left of Save; red only on hover. */
.brand-license-remove {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.brand-license-remove:hover,
.brand-license-remove:focus-visible {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}
.brand-license-remove:disabled { opacity: 0.6; cursor: default; }
.brand-license-remove:not(.hidden) + .btn-primary { margin-left: 0; }
.brand-license-footer .brand-license-remove { margin-left: auto; }
/* Arrived from the header badge: a short accent glow on the card. */
.brand-license-card.is-spotlit { animation: brand-license-spotlight 1.6s ease-out; }
@keyframes brand-license-spotlight {
    0%, 30% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55), 0 0 18px rgba(251, 191, 36, 0.18); }
    100% { box-shadow: 0 0 0 1px transparent, 0 0 0 transparent; }
}
.brand-license-footer .btn-primary:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

/* Phase WD — "Suggest from sources" + suggested-field marker. */
/* "Suggest from sources" lives in the view header (moved out of the body). Outlined
   pill using accent tokens so it tracks the active theme — the old hardcoded purple
   background didn't match the default Lipstick/red theme. */
.world-suggest-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, opacity 0.15s;
}
.world-suggest-btn:hover {
    background: var(--accent-glow);
}
.world-suggest-btn:disabled,
.world-suggest-btn.is-busy {
    opacity: 0.6;
    cursor: default;
}
/* Spinner shown inside the Suggest button while the LLM call is in flight. */
.world-suggest-spin {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -1px;
    animation: world-suggest-spin 0.7s linear infinite;
}
@keyframes world-suggest-spin {
    to { transform: rotate(360deg); }
}
/* A field just filled by a suggestion (cleared on first manual edit). */
.form-input.field-suggested {
    border-color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.05);
}

@media (max-width: 640px) {
    .world-scroll {
        padding: 18px 16px;
    }
    .world-form {
        grid-template-columns: 1fr;   /* stack on narrow screens */
    }
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-shrink: 0;
}

.notes-title {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-main);
    line-height: 1;
}

.notes-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 0.92rem;
    line-height: 1.6;
    padding: 12px 16px;
    resize: none;
    outline: none;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.15);
}

.notes-textarea:focus {
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--accent-glow);
}

.notes-status {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: color 0.3s;
    margin-top: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.notes-status.saved {
    color: var(--status-green);
}

/* Notes Input Row */
.notes-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.notes-input-row .notes-textarea {
    flex: 1;
}

.notes-add-btn {
    background: var(--accent-gradient);
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    transition: opacity 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.notes-add-btn:hover {
    opacity: 0.9;
    box-shadow: 0 0 16px var(--accent-glow);
}

/* Note List */
.notes-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--text-dim) transparent;
}

.note-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s, background 0.2s;
}

.note-item:hover {
    border-color: rgba(139, 92, 246, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.note-text {
    flex: 1;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
}

.note-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 1rem;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}

.note-delete-btn:hover {
    color: var(--status-red);
    background: rgba(248, 113, 113, 0.1);
}

.notes-empty {
    color: var(--text-dim);
    font-size: 0.85rem;
    text-align: center;
    padding: 40px 0;
    letter-spacing: 0.02em;
}

.empty-state {
    grid-column: 1 / -1;
    align-items: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 220px;
    padding: 28px 20px;
    text-align: center;
}

.empty-state-title {
    color: var(--text-main);
    font-size: 0.98rem;
    font-weight: 600;
}

.empty-state-body {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 360px;
}

.empty-state-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-main);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    padding: 8px 12px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.empty-state-action:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.notes-count {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-align: center;
    margin-top: 12px;
    letter-spacing: 0.03em;
}

/* Notes: Attach button (paperclip) */
.notes-attach-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    padding: 0 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notes-attach-btn:hover {
    color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-primary);
}

/* Notes: File attachment item */
.note-item--file {
    cursor: pointer;
}
.note-item--file:hover {
    border-color: rgba(220, 38, 38, 0.25);
}

.note-file-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.note-file-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.note-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.note-file-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-file-essence {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-file-meta {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
}

/* Processing status badges */
.note-file-status {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
}

.note-file-status--processing {
    color: var(--status-yellow);
    animation: pulse-status 1.5s ease-in-out infinite;
}

.note-file-status--failed {
    color: var(--status-red);
}

@keyframes pulse-status {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Drag-and-drop overlay */
.notes-drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 100;
    background: rgba(8, 8, 8, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-lg);
    align-items: center;
    justify-content: center;
}

.notes-drop-overlay.active {
    display: flex;
    animation: fadeIn 0.15s ease-out;
}

/* Make notes-container position relative so overlay can cover it */
#notes-view {
    position: relative;
}

.notes-drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--accent-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
}

.notes-drop-content svg {
    opacity: 0.8;
}

.notes-drop-hint {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.brand-logo {
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-main);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    font-feature-settings: 'lnum' 1;
    display: flex;
    align-items: baseline;
    gap: 0;
    line-height: 1;
}

.brand-beta {
    font-size: 0.5rem;
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--accent-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-left: 5px;
    opacity: 0.8;
    align-self: flex-start;
    margin-top: 4px;
}

.brand-logo span {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Nav Items */
.nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Scroll container: brand stays pinned above, footer pinned below, the nav
       middle scrolls when scenes/locations expand past the viewport. min-height:0
       is required so this flex child can shrink below its content height. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* leave room so the scrollbar doesn't crowd the nav labels */
    padding-right: 4px;
    margin-right: -4px;
    /* Reserve the active item's 3px left accent (border-left:3px + margin-left:-3px
       on .nav-item) inside the clip box — otherwise overflow-x:hidden shaves it off.
       Net content position is unchanged (negative margin + equal padding cancel). */
    padding-left: 3px;
    margin-left: -3px;
    /* thin themed scrollbar, matching .scroll-container convention */
    scrollbar-width: thin;
    scrollbar-color: var(--text-dim) transparent;
    /* Edge-fade hints: applied only when overflowing (data-scroll set by JS), so
       a cut-off item reads as "scroll for more" without fading a non-overflowing list. */
    --nav-fade: 14px;
    transition: -webkit-mask-image 0.15s ease, mask-image 0.15s ease;
}
.nav-list::-webkit-scrollbar {
    width: 4px;
}
.nav-list::-webkit-scrollbar-track {
    background: transparent;
}
.nav-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}
.nav-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.22);
}
/* Fade only the edge that has hidden content beyond it. */
.nav-list[data-scroll="top"] {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nav-fade)), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nav-fade)), transparent 100%);
}
.nav-list[data-scroll="mid"] {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--nav-fade), #000 calc(100% - var(--nav-fade)), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--nav-fade), #000 calc(100% - var(--nav-fade)), transparent 100%);
}
.nav-list[data-scroll="bottom"] {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--nav-fade));
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--nav-fade));
}

.nav-section-label {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    margin: 14px 12px 5px;
    text-transform: uppercase;
}

.nav-section-label:first-child {
    margin-top: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    border: none;
    border-left: 3px solid transparent;
    margin-left: -3px;
}

.nav-item svg {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.nav-item:hover {
    color: var(--text-main);
    background: #16161f;
}

.nav-item:hover svg { opacity: 1; }

.nav-item.active {
    color: var(--text-main);
    background: #1e1e2a;
    border-left-color: var(--accent-primary);
    font-weight: 500;
}

.nav-item.active svg { opacity: 1; }

/* Mockup nav items (World disciplines not built yet). Dimmed a step below a live
   item — with the tooltip and the placeholder page, that's enough signal without a
   badge, which would wrap the two long labels at the 240px sidebar width. */
.nav-item.is-soon { color: var(--text-dim); }
.nav-item.is-soon svg { opacity: 0.45; }
.nav-item.is-soon:hover { color: var(--text-muted); }
.nav-item.is-soon:hover svg { opacity: 0.75; }

/* Sidebar Footer (Status) */
.sidebar-footer {
    margin-top: auto;
    padding-top: 8px;
}

/* Phase U-3: user identity, moved from the header into the sidebar footer. */
.sidebar-user-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    margin: 0 8px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-size: 0.76rem;
    color: var(--text-muted);
}
.sidebar-user-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.sidebar-signout {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.72rem;
    padding: 0 2px;
}
.sidebar-signout:hover {
    color: var(--text-main);
}


.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--text-dim);
    transition: all 0.3s ease;
}

.status-dot.green {
    background-color: var(--status-green);
    box-shadow: 0 0 6px rgba(90, 158, 111, 0.5);
}

.status-dot.red {
    background-color: var(--status-red);
}

.status-dot.yellow {
    background-color: var(--status-yellow);
}

/* --- MAIN CONTENT & HEADER --- */
.main-content {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* Flex-row item: without this, any wide intrinsic content (e.g. the asset
       tray's tile strip) propagates min-content width up here and pushes the
       whole app wider than the viewport — the centered storyboard then renders
       off-screen ("blank" body) and scrollIntoView pans the header/sidebar away. */
    min-width: 0;
}

.app-header {
    /* Frosted glass overlay: chat content scrolls UNDER it (blurred), matching
       the command bar. Panes below reserve 60px of top clearance so nothing is
       hidden at rest. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Phase U-3: search on the left, project/assets/settings on the right */
    gap: 12px;
    padding: 0 24px;
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    pointer-events: none;   /* empty area passes clicks through; controls re-enable below */
    z-index: 5;
}

/* Re-enable interaction on the header's actual controls */
.app-header > * {
    pointer-events: auto;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Phase U-3 — header layout: search (left) | assets · project · settings (right) */
.header-left {
    display: flex;
    align-items: center;
    min-width: 0;
}
.header-project {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 12px;
    max-width: 300px;
    min-width: 0;
    overflow: hidden;   /* name truncates first; never overflow the cluster */
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
}
.header-project-name {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}
.header-project-name:hover {
    color: var(--accent-primary);
}
/* Caret rotates while the switcher overlay is open (class set in JS on every toggle). */
.project-switcher-toggle.switcher-open {
    color: var(--accent-primary);
    transform: rotate(180deg);
}
/* Header view-switch buttons (Assets): active highlight, mirroring the sidebar nav active. */

/* Phase U-3 gate: keep the desktop header from breaking on narrow widths (768–980px;
   below 768px the mobile header takes over). Tighten gaps and truncate the project name. */
@media (max-width: 980px) and (min-width: 769px) {
    .app-header { padding: 0 14px; gap: 8px; }
    .header-actions { gap: 8px; }
    .header-project { max-width: 210px; padding-left: 10px; }
    .header-project-name { max-width: 110px; }
}

/* workspace-header removed — sidebar active state is sufficient navigation context */

/* Cloud Sync Icon */


/* --- CHAT AREA (Scrollbar on Right Edge) --- */
.scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    /* Clear the absolute frosted header (content still scrolls under it). */
    padding-top: 60px;
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--text-dim) transparent;
}

.main-content[data-view="notes"] #chat-window-container,
.main-content[data-view="sources"] #chat-window-container,
.main-content[data-view="team"] #chat-window-container,
.main-content[data-view="skills"] #chat-window-container,
.main-content[data-view="settings"] #chat-window-container {
    display: none !important;
}

.scroll-container::-webkit-scrollbar {
    width: 4px;
}

.scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(139, 92, 246, 0.2);
    border-radius: 2px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(139, 92, 246, 0.4);
}

/* Inner container for max-width content */
.chat-stream {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    /* Bottom padding clears the floating command bar so the last message scrolls
       fully above it WITH breathing room. The composer height varies (skill
       pills, multi-line input, reply preview), so --composer-clearance is kept
       in sync with the real height by initComposerClearance() in ui.js; the
       180px fallback covers the moment before that first runs. */
    padding: 32px 24px var(--composer-clearance, 180px) 24px;
    display: flex;
    flex-direction: column;
}

/* --- MESSAGES (Glass) --- */
.message-row {
    display: flex;
    margin-bottom: 24px;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-row.user {
    justify-content: flex-end;
}

.message-row.ai {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 80%;
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    line-height: 1.6;
    font-size: 1rem;
    position: relative;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* User Bubble — glass surface, speech-bubble corner */
.message-row.user .message-bubble {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    border-radius: 16px 16px 4px 16px;
}

/* User identity avatar — minimal: a small initial chip in the gutter beside
   the bubble. Zero extra vertical space; full name shows on hover (title).
   Tint is a muted per-user hue (set inline) — quiet, not a competing accent. */
.message-row.user {
    align-items: flex-start;
    gap: 8px;
}

.msg-avatar {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    user-select: none;
}

/* AI Bubble — gradient left accent line via pseudo-element */
.message-row.ai .message-bubble {
    background: transparent;
    border: none;
    padding-left: 20px;
    position: relative;
    color: var(--text-main);
    border-bottom-left-radius: 0;
    box-shadow: none;
}

.message-row.ai .message-bubble::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-primary), transparent);
    border-radius: 1px;
}

/* Streaming cursor — blinks while tokens are being received */
.stream-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--accent-primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: stream-blink 0.7s step-end infinite;
}

@keyframes stream-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Markdown Styling */
.message-bubble h1,
.message-bubble h2 {
    font-family: var(--font-display);
    color: var(--text-main);
    margin-top: 16px;
    font-weight: 600;
}

.message-bubble h1 {
    font-size: 1.4rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.message-bubble code {
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--text-muted);
}

.message-bubble pre {
    background: #0d0d0d;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    overflow-x: auto;
    margin: 12px 0;
}

/* --- FEEDBACK ACTIONS --- */

.feedback-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 0.72rem;
    font-family: var(--font-sans);
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.2s;
}

.feedback-btn:hover {
    border-color: var(--border-subtle);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
}

.feedback-btn.active {
    color: #fff;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    font-weight: 600;
}

/* --- FEEDBACK COMMENT INPUT --- */
.feedback-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    opacity: 1;
    flex-wrap: wrap;
}

.feedback-comment-row {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    animation: fadeIn 0.2s ease-out;
}

.feedback-comment-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    padding: 6px 10px;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}

.feedback-comment-input:focus {
    border-color: var(--accent-primary);
}

.feedback-comment-input::placeholder {
    color: var(--text-dim);
}

.feedback-comment-send {
    background: var(--accent-primary);
    border: none;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.feedback-comment-send:hover {
    opacity: 0.85;
}

/* --- REPLY BUBBLE DIFFERENTIATION --- */
.message-bubble.is-reply {
    border-left: 2px solid var(--accent-secondary) !important;
    background: rgba(6, 182, 212, 0.04) !important;
}

.reply-quote {
    display: block;
    font-size: 0.75rem;
    color: var(--accent-secondary);
    opacity: 0.8;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- SYNC STATUS PANEL --- */
#sync-status-panel {
    position: fixed;
    bottom: 12px;
    right: 20px;
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-size: 0.72rem;
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
    z-index: 500;
    max-width: 320px;
}

#sync-message {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sync-spinner {
    width: 11px;
    height: 11px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-top: 1.5px solid var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- GENERATION PROGRESS INDICATOR --- */
.gen-progress {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

/* The in-flight indicator pins to the bottom of the scrollport (just above the
   floating composer) so generation status stays visible while the user scrolls
   back through the conversation. */
.message-row.ai-temp {
    margin-bottom: 12px;
    position: sticky;
    bottom: calc(var(--composer-clearance, 180px) - 24px);
    z-index: 5;
}

/* Concurrent jobs: only the newest indicator pins — older ones stay in flow
   beside their own prompt (each is replaced in place when its result lands). */
.message-row.ai-temp:has(~ .message-row.ai-temp) {
    position: static;
}

/* Pinned over message text the bubble must stay legible, so it keeps a quiet
   always-on glass pill instead of the transparent inline treatment. */
.message-row.ai-temp .thinking-status-bubble {
    width: min(540px, 92%);
    max-width: 92%;
    min-height: 26px;
    padding: 5px 14px;
    opacity: 0.94;
    background: rgba(16, 16, 16, 0.82);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.message-row.ai .thinking-status-bubble::before {
    display: none;
}

.message-row.ai-temp .thinking-status-bubble.has-stop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    align-items: center;
    column-gap: 12px;
}

.gen-progress--inline {
    display: block;
    padding: 0;
    min-width: 0;
}

.gen-progress-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.thinking-status-line {
    min-height: 24px;
    min-width: 0;
    gap: 8px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 0;
}

.thinking-status-bubble.has-stop .thinking-status-line {
    padding-right: 0;
}

.thinking-brain-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--status-green);
    animation: thinkingIconBreathe 2.4s ease-in-out infinite;
}

.thinking-brain-icon svg {
    width: 18px;
    height: 18px;
}

.thinking-status-copy {
    flex: 0 0 auto;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

.thinking-status-verb {
    color: var(--status-green);
}

.thinking-status-soft,
.thinking-status-copy .gen-progress-timer {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: inherit;
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 0;
}

.thinking-status-dot {
    width: 3px;
    height: 3px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.36);
}

.thinking-status-spark {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1;
    animation: thinkingSpark 1.8s ease-in-out infinite;
}

.thinking-status-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 72px;
    min-height: 24px;
}

.gen-progress-stage {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-main);
    letter-spacing: 0.02em;
    transition: opacity 0.3s ease;
}

.gen-progress--inline .gen-progress-stage {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.35;
    letter-spacing: 0;
    will-change: clip-path, opacity, transform;
}

.gen-progress--inline .gen-progress-stage::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-left: 3px;
    background: currentColor;
    opacity: 0.55;
    vertical-align: -0.08em;
    animation: thinkingCaret 1.05s steps(2, end) infinite;
}

.gen-progress-pulse {
    animation: textPulse 1.8s ease-in-out infinite;
}

.gen-progress--inline .gen-progress-stage.gen-progress-pulse {
    animation: thinkingStatusIdle 2.4s ease-in-out infinite;
}

.gen-progress--inline .gen-progress-stage.is-typing {
    animation:
        thinkingStageType 0.62s steps(18, end),
        thinkingStatusIdle 2.4s ease-in-out 0.62s infinite;
}

@keyframes textPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes thinkingIconBreathe {
    0%, 100% { transform: translateY(0); color: var(--status-green); }
    50% { transform: translateY(-1px); color: #22d3ee; }
}

@keyframes thinkingSpark {
    0%, 100% { opacity: 0.38; transform: scale(0.9) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.08) rotate(12deg); }
}

@keyframes thinkingStatusIdle {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}

@keyframes thinkingStageType {
    0% {
        opacity: 0;
        transform: translateY(2px);
        clip-path: inset(0 100% 0 0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes thinkingCaret {
    0%, 45% { opacity: 0.65; }
    46%, 100% { opacity: 0; }
}

.gen-progress-timer {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    margin-left: auto;
    letter-spacing: 0.04em;
}

.gen-progress-bar-track {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.gen-progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--accent-gradient);
    width: 0%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.gen-progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.8s ease-in-out infinite;
}

.gen-stop-btn {
    margin-top: 10px;
    padding: 5px 14px;
    background: transparent;
    border: 1px solid rgba(255, 80, 80, 0.5);
    border-radius: 6px;
    color: rgba(255, 100, 100, 0.85);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.thinking-status-actions .gen-stop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 0;
    width: 64px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.045);
    border-color: rgba(248, 113, 113, 0.26);
    color: rgba(248, 113, 113, 0.78);
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

.thinking-status-actions .gen-stop-btn::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.82;
}

.thinking-status-actions .gen-stop-btn.is-stopping {
    width: 72px;
    color: var(--text-muted);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

.thinking-status-actions .gen-stop-btn.is-stopping::before {
    opacity: 0.45;
}

@media (max-width: 520px) {
    .thinking-status-spark,
    .thinking-status-dot {
        display: none;
    }

    .message-row.ai-temp .thinking-status-bubble {
        width: 92%;
    }

    .message-row.ai-temp .thinking-status-bubble.has-stop {
        grid-template-columns: minmax(0, 1fr) 62px;
        column-gap: 8px;
    }

    .thinking-status-actions {
        flex-basis: 62px;
    }

    .thinking-status-actions .gen-stop-btn {
        width: 58px;
    }

    .thinking-status-actions .gen-stop-btn.is-stopping {
        width: 62px;
        font-size: 0.66rem;
    }
}
.gen-stop-btn:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.5);
    color: rgba(255, 145, 145, 0.95);
}
.gen-stop-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* --- GENERATION OPTIONS (Aspect Ratio / Resolution) --- */


.gen-option-select {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    min-width: 48px;
    text-align: center;
}

.gen-option-select:hover,
.gen-option-select:focus {
    border-color: var(--accent-primary);
    color: var(--text-main);
}

.gen-option-select option {
    background: #1a1a2e;
    color: var(--text-main);
}


/* --- COMMAND BAR (mode + image options) --- */
.input-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.035);
    overflow-x: auto;
    scrollbar-width: thin;
}

.command-mode-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2px;
    flex-shrink: 0;
}

.command-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 4px 9px;
    background: transparent;
    border: 0;
    border-radius: 13px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.command-mode-btn:hover {
    color: var(--text-main);
}

.command-mode-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent-primary);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}


.mode-suggest-btn {
    align-items: center;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.32);
    border-radius: 14px;
    color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    min-height: 26px;
    padding: 4px 9px;
}

/* The <select>s are headless source-of-truth — never shown; the .gen-trigger
   popovers drive them. */
.gen-option-hidden {
    display: none !important;
}

/* The model/settings triggers are image-only; web search is chat-only. The
   separator stays visible in both modes — each side fills the zone after it
   (chat: web search; image: model + settings). */
.input-toolbar:not(.image-active) #gen-model-trigger,
.input-toolbar:not(.image-active) #gen-settings-trigger,
.input-toolbar:not(.image-active) #gear-pill,
.input-toolbar:not(.image-active) #composition-pill {
    display: none;
}

.input-toolbar.image-active #chat-options-group {
    display: none;
}

#chat-options-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.input-toolbar-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    margin: 0 2px;
}

/* --- IMAGE-GEN OPTION TRIGGERS (model + settings popovers) --- */
.gen-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 4px 9px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.gen-trigger:hover,
.gen-trigger[aria-expanded="true"] {
    border-color: var(--accent-primary);
    color: var(--text-main);
}

.gen-trigger--model {
    color: var(--text-main);
}

/* Icon-only trigger (web search) — square-ish, toggles to an accent "on" state. */
.gen-trigger--icon {
    padding: 5px 7px;
}

.gen-trigger.active {
    border-color: var(--accent-primary);
    background: var(--accent-glow);
    color: var(--accent-primary);
}

.gen-trigger-caret {
    opacity: 0.6;
    flex-shrink: 0;
}

.gen-trigger-gear {
    opacity: 0.85;
    flex-shrink: 0;
}

/* --- IMAGE-GEN OPTION POPOVERS --- */
.gen-pop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.gen-pop {
    position: fixed;
    width: 248px;
    max-width: calc(100vw - 24px);
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    background: rgba(20, 20, 26, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.gen-pop-title {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
    padding: 4px 6px 8px;
}

.gen-pop-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gen-pop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 8px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
}

.gen-pop-row:hover {
    background: var(--bg-elevated);
}

.gen-pop-row.is-active {
    background: var(--accent-glow);
}

.gen-pop-row-name {
    flex: 1;
    min-width: 0;
}

.gen-pop-row-check {
    color: var(--accent-primary);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.gen-pop-grouplabel {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 10px 6px 5px;
}

.gen-seg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.gen-seg {
    flex: 0 0 auto;
    min-width: 38px;
    padding: 5px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.gen-seg:hover {
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.18);
}

.gen-seg.is-active {
    background: var(--accent-glow);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* --- BATCH IMAGE GRID --- */
.image-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.image-grid-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.image-grid-item .image-wrapper {
    margin: 0;
}

.image-grid-item.approved .image-wrapper {
    box-shadow: 0 0 0 2px var(--status-green), 0 0 16px rgba(52, 211, 153, 0.15);
    border-radius: 8px;
}

.grid-image-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.grid-action-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 0.8rem;
    padding: 2px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.grid-action-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.06);
}

.grid-action-btn.feedback-btn.active {
    color: var(--accent-primary);
}

.grid-approve-btn.is-approved {
    color: var(--status-green);
}

/* --- IMAGE RESULT NOTICES (WP5b B6) ---
 * An image the page cannot show (lost derivative, unpresentable bytes, a file
 * deleted since) keeps its place as a quiet glass card instead of a broken
 * <img>; in a batch it keeps its grid cell. Below a partial batch, the D-2
 * line "Generated M of N images." (or "Showing M of N images." when an image
 * not shown was generated) and its one reason line, in label type. */
.image-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    margin-top: 12px;
    padding: 16px;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

.image-grid-item .image-unavailable {
    margin: 0;
    padding: 8px;
}

.image-outcome {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.image-outcome-summary {
    color: var(--text-main);
}

/* A result's own action row with nothing in it (a recovered note, a result
 * whose prompt this page does not know) takes no space. */
.feedback-actions:empty {
    display: none;
}

/* Phones: four cells in one row left each image ~60px wide with its actions
 * spilling into the next cell. Two per row, and the actions wrap. */
@media (max-width: 520px) {
    .image-grid-item {
        flex: 0 1 calc(50% - 4px);
    }

    .grid-image-actions {
        flex-wrap: wrap;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- IMAGE WRAPPER & DOWNLOAD --- */
.image-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    /* Hard cap against the chat column so a child (e.g. a long take-strip)
     * can never push the wrapper past the message bubble / viewport. */
    max-width: 100%;
}

/* Hover-only secondary actions — shifted left to make room for the always-visible
 * Refine chip at right:8px (Phase R-2.1 staging tweak). */
.download-btn {
    position: absolute;
    top: 8px;
    right: 110px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8rem;
    transition: background 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    z-index: 10;
}

.regen-btn {
    position: absolute;
    top: 8px;
    right: 218px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    z-index: 10;
    transition: background 0.2s;
}

.image-wrapper:hover .download-btn,
.image-wrapper:hover .regen-btn {
    opacity: 1;
}

.regen-btn:hover {
    background: var(--accent-primary);
}

.download-btn:hover {
    background: var(--accent-primary);
}

/* --- ON-IMAGE ACTION ROW (Refine / Download) ──────────────────────────────
 * Always-visible icon row in the top-right corner. Refine + Download only.
 * Scene/Good/Bad/Approve moved to the footer feedback-actions bar.
 */
.image-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    align-items: center;
    z-index: 12;
    opacity: 0.55;
    transition: opacity 0.18s ease;
}
.image-wrapper:hover .image-actions,
.image-actions:focus-within { opacity: 1; }
.image-actions > button,
.image-actions > a {
    position: static;
    inset: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 6px;
    background: none;
    backdrop-filter: none;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
    transition: transform 0.12s ease, filter 0.12s ease;
    user-select: none;
}
.image-actions > button:hover,
.image-actions > a:hover,
.image-actions > button:focus-visible,
.image-actions > a:focus-visible {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.95));
    outline: none;
}

/* Highlight flash when navigated to via lineage chip click. */
@keyframes lineage-flash {
    0%   { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
    25%  { box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.55); }
    100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}
.gallery-item.lineage-target-flash {
    animation: lineage-flash 1.2s ease-out;
}

/* ───────────────────────────────────────────────────────────────────────────
 * REFINE CANVAS (Phase R-2.3, redesigned)
 * Slide-in-from-right modal triggered by the on-image ✏️ Refine chip.
 * Themed against Lipstick (red) / Neo-Glass (violet/cyan) tokens; composer
 * mirrors the main chat input pill so the surface feels continuous.
 * ────────────────────────────────────────────────────────────────────────── */
.refine-canvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 12, 0.72);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    z-index: 9500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s;
}
.refine-canvas-overlay.active {
    opacity: 1;
    visibility: visible;
}

.refine-canvas-modal {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    background: var(--bg-void, #080808);
    background-image:
        radial-gradient(60vw 50vh at 75% -10%, var(--accent-glow, rgba(220, 38, 38, 0.18)), transparent 60%),
        radial-gradient(50vw 40vh at 10% 110%, rgba(6, 182, 212, 0.04), transparent 60%);
    border-left: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.refine-canvas-overlay.active .refine-canvas-modal {
    transform: translateX(0);
}

/* Header --------------------------------------------------------------- */
.refine-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}
.refine-canvas-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.refine-canvas-title-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-gradient, linear-gradient(135deg, #ef4444, #991b1b));
    box-shadow: 0 0 12px var(--accent-glow, rgba(220, 38, 38, 0.45));
}
.refine-canvas-title {
    font-family: var(--font-mono, "IBM Plex Mono", monospace);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main, #f5f5f5);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.refine-canvas-close {
    background: transparent;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    color: var(--text-muted, #9a9a9a);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.refine-canvas-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main, #f5f5f5);
    border-color: var(--accent-primary, #dc2626);
}

/* Stage --------------------------------------------------------------- */
.refine-canvas-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 28px 28px 20px;
}
.refine-source-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md, 12px);
    user-select: none;
    pointer-events: none;
    display: block;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.refine-stroke-canvas {
    position: absolute;
    /* JS sizes the bitmap to native image resolution; CSS keeps it pinned to
     * the displayed image bounding box via the stage flex container. */
    max-width: calc(100% - 56px);
    max-height: calc(100% - 48px);
    border-radius: var(--radius-md, 12px);
    cursor: crosshair;
    touch-action: none; /* prevent scroll on touch-drag */
}
.refine-stroke-canvas.eraser-mode {
    /* Soft circular cursor cue for the eraser; falls back to 'cell' on browsers
     * that ignore the SVG data URI. */
    cursor: cell;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><circle cx='10' cy='10' r='8' fill='none' stroke='%23f5f5f5' stroke-width='1.5'/><circle cx='10' cy='10' r='8' fill='none' stroke='%23dc2626' stroke-width='1' stroke-dasharray='2 2'/></svg>") 10 10, cell;
}

/* Floating tool palette (top of stage) -------------------------------- */
.refine-canvas-tools {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: rgba(20, 20, 30, 0.72);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: var(--radius-pill, 28px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    z-index: 4;
}
.refine-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: transparent;
    border: none;
    color: var(--text-muted, #9a9a9a);
    border-radius: var(--radius-pill, 28px);
    cursor: pointer;
    font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.refine-tool svg {
    flex-shrink: 0;
}
.refine-tool:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main, #f5f5f5);
}
.refine-tool.active {
    background: var(--accent-gradient, linear-gradient(135deg, #ef4444, #991b1b));
    color: #fff;
    box-shadow: 0 0 14px var(--accent-glow, rgba(220, 38, 38, 0.45));
}
.refine-tool-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

/* Hint line ----------------------------------------------------------- */
.refine-canvas-hint {
    padding: 10px 22px 0;
    font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted, #9a9a9a);
    text-align: center;
    flex-shrink: 0;
}

/* Composer (chat-style pill) ------------------------------------------ */
.refine-canvas-composer-row {
    padding: 14px 22px 18px;
    flex-shrink: 0;
}
.refine-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 8px 8px 20px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(32px) saturate(1.5);
    -webkit-backdrop-filter: blur(32px) saturate(1.5);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.07));
    border-radius: var(--radius-pill, 28px);
    box-shadow:
        0 -4px 32px rgba(0, 0, 0, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px var(--glass-border, rgba(255, 255, 255, 0.07));
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.refine-composer:focus-within {
    border-color: var(--border-active, rgba(220, 38, 38, 0.5));
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px var(--accent-glow, rgba(220, 38, 38, 0.3)),
        0 0 24px var(--accent-glow, rgba(220, 38, 38, 0.2));
}
.refine-canvas-prompt {
    flex: 1 1 auto;
    min-height: 24px;
    max-height: 140px;
    background: transparent;
    border: none;
    color: var(--text-main, #f5f5f5);
    font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.45;
    padding: 8px 0;
    outline: none;
    resize: none;
    box-sizing: border-box;
}
.refine-canvas-prompt::placeholder {
    color: var(--text-dim, #555555);
}
.refine-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-gradient, linear-gradient(135deg, #ef4444, #991b1b));
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.refine-send-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--accent-glow, rgba(220, 38, 38, 0.5));
}
.refine-send-btn:disabled,
.refine-send-btn.sending {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}
.refine-send-btn.sending svg {
    animation: refine-send-spin 0.9s linear infinite;
}
@keyframes refine-send-spin {
    to { transform: rotate(360deg); }
}
.refine-attach-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim, #888);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s ease, background 0.2s ease;
}
.refine-attach-btn:hover {
    color: var(--text-main, #f5f5f5);
    background: rgba(255, 255, 255, 0.06);
}
/* Edit-model trigger under the pill — the canvas's twin of the composer's
   model trigger (same .gen-trigger look), right-aligned under the send button. */
.refine-composer-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 8px 0;
    min-width: 0;
}
/* Two classes so it outranks the phone-width `.gen-trigger--model { max-width:
   160px }` meant for the crowded composer bar — this row has room for the name. */
.gen-trigger.refine-model-trigger {
    max-width: 100%;
    min-width: 0;
}
.refine-model-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Its popover reuses the composer's .gen-pop, which sits at z-index 1400 —
   under the canvas overlay (9500). Lift this one above it. */
.gen-pop-overlay.refine-model-pop-overlay {
    z-index: 9600;
}
.refine-reference-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 10px 6px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    max-width: 100%;
}
/* The display above would otherwise override the `hidden` attribute and show an
   empty "Reference attached" chip (broken thumbnail) when nothing is attached. */
.refine-reference-chip[hidden] {
    display: none;
}
.refine-reference-thumb {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.refine-reference-label {
    font-size: 0.8rem;
    color: var(--text-soft, #bbb);
    white-space: nowrap;
}
.refine-reference-remove {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main, #f5f5f5);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.refine-reference-remove:hover {
    background: var(--accent-glow, rgba(220, 38, 38, 0.4));
}

.refine-canvas-status {
    padding: 0 22px 14px;
    font-family: var(--font-sans, "Outfit", system-ui, sans-serif);
    font-size: 0.78rem;
    color: var(--status-red, #f87171);
    min-height: 1em;
    text-align: center;
    flex-shrink: 0;
}

/* Responsive: phones / narrow viewports -------------------------------- */
@media (max-width: 720px) {
    .refine-canvas-header {
        padding: 12px 14px;
    }
    .refine-canvas-title {
        font-size: 0.82rem;
        letter-spacing: 0.03em;
    }
    .refine-canvas-close {
        width: 32px;
        height: 32px;
    }
    .refine-canvas-stage {
        padding: 64px 12px 12px; /* room below the floating tool palette */
    }
    .refine-stroke-canvas {
        max-width: calc(100% - 24px);
        max-height: calc(100% - 76px);
    }
    .refine-canvas-tools {
        top: 10px;
        gap: 2px;
        padding: 4px;
    }
    .refine-tool {
        padding: 8px 10px;
        font-size: 0.74rem;
    }
    .refine-tool-label {
        display: none; /* icons only on phones */
    }
    .refine-tool.refine-tool--clear .refine-tool-label {
        /* Keep the destructive action label readable */
        display: inline;
    }
    .refine-tool-sep {
        height: 16px;
        margin: 0 2px;
    }
    .refine-canvas-hint {
        padding: 8px 14px 0;
        font-size: 0.72rem;
    }
    .refine-canvas-composer-row {
        padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    }
    .refine-composer {
        padding: 6px 6px 6px 16px;
        gap: 6px;
    }
    .refine-canvas-prompt {
        font-size: 0.9rem;
    }
    .refine-send-btn {
        width: 38px;
        height: 38px;
    }
    .refine-canvas-status {
        padding: 0 14px 10px;
    }
}

/* Very narrow phones — drop the "Clear all" label too to save room */
@media (max-width: 380px) {
    .refine-tool.refine-tool--clear .refine-tool-label {
        display: none;
    }
}

/* Scroll wrapper: grows to fill the flex column, clips + scrolls the grid.
   Keeping scroll here (not on the grid) means the grid has no fixed height,
   so aspect-ratio:1 on .gallery-item resolves correctly at every viewport size. */
.gallery-scroll-wrapper {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Grid has no flex or overflow — it expands to natural height inside the wrapper. */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 24px;
}

/* --- GALLERY FILTER TABS --- */
.gallery-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 16px 24px 8px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-void);
}

.gallery-item {
    position: relative;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    aspect-ratio: 1;
    transition: border-color 0.2s;
}

.gallery-item:hover {
    border-color: var(--accent-primary);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.04);
}

.gallery-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.gallery-item:hover .overlay {
    opacity: 1;
}


/* --- SKELETON LOADING --- */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}


.skeleton-dot {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
    animation: shimmer 1.8s ease-in-out infinite;
    background-size: 200% 100%;
}

.gallery-skeleton {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.03) 25%,
            rgba(255, 255, 255, 0.07) 50%,
            rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border: 1px solid var(--border-subtle);
}

/* Windowed gallery: an empty full-row marker after the last rendered card.
   gallery.js watches it with an IntersectionObserver (root = the scroll
   wrapper, 600px margin) and appends the next page of cards before it is seen. */
.gallery-window-sentinel {
    grid-column: 1 / -1;
    height: 1px;
}

/* --- LOADING ANIMATION — pulsing dot --- */


@keyframes violetPulse {

    0%,
    80%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    40% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* --- INPUT AREA (Command Bar — in-flow, no absolute positioning) --- */
.input-region {
    /* Float over the chat so messages scroll UNDER the glass bar (blurred by
       .input-wrapper's backdrop-filter), instead of sitting in a separate
       non-overlapping row where there is nothing behind it to show through. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 0 24px 20px;
    z-index: 20;
    box-sizing: border-box;
    /* Transparent margins let clicks fall through to content; .input-container
       re-enables pointer events for the actual input box. */
    pointer-events: none;
    background: transparent;
}

.input-container {
    width: 100%;
    max-width: 800px;
    pointer-events: auto;
    /* Re-enable for input */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-wrapper {
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(32px) saturate(1.5);
    -webkit-backdrop-filter: blur(32px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--glass-border);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22), 0 0 24px rgba(139, 92, 246, 0.06);
}

.input-row {
    display: flex;
    align-items: center;
    padding: 8px 8px 8px 20px;
}

textarea {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 1rem;
    font-family: var(--font-sans);
    padding: 10px 0;
    outline: none;
    resize: none;
    min-height: 24px;
    max-height: 200px;
    line-height: 1.5;
}

textarea::placeholder {
    color: var(--text-dim);
}

#user-input:focus,
#user-input:focus-visible {
    outline: none;
    box-shadow: none;
}

.send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1e1e2a;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-left: 8px;
    flex-shrink: 0;
    box-shadow: none;
}

.send-btn--active {
    background: var(--accent-gradient) !important;
    box-shadow: 0 0 16px var(--accent-glow);
}

.send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--accent-glow);
}

.send-btn--active:hover {
    box-shadow: 0 0 24px var(--accent-glow);
}

/* Tools */
.tool-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.2s;
}

.tool-btn:hover {
    color: var(--text-main);
    background: var(--glass-highlight);
}

/* ============================================================================
   COMPOSER (Phase 3) — mode tabs · input line · attachment chips · Gear pill+dial
   ============================================================================ */

/* --- Mode tabs (Chat | Image), pinned to the top of the composer --- */
.composer-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 14px 0;
}
.composer-tab {
    position: relative;
    padding: 6px 10px 9px;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: color 0.15s ease;
}
.composer-tab:hover { color: var(--text-muted); }

/* Brand License badge — in the header, beside the project name (it is a property of
   the project), only while the project's license is Active. Status-yellow (a relaxed
   safety default). The brand list truncates first; a click opens the Intent card. */
.brand-license-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 220px;
    padding: 4px 10px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 14px;
    background: rgba(251, 191, 36, 0.06);
    color: var(--status-yellow);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.brand-license-badge.hidden { display: none; }
.brand-license-badge:hover,
.brand-license-badge:focus-visible {
    border-color: rgba(251, 191, 36, 0.6);
    background: rgba(251, 191, 36, 0.12);
}
.brand-license-badge-icon { flex-shrink: 0; }
.brand-license-badge-prefix { flex-shrink: 0; color: var(--text-muted); }
.brand-license-badge-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-license-marker {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--status-yellow);
}
.brand-license-marker.hidden { display: none; }
.composer-tab.active { color: var(--accent-primary); }
.composer-tab.active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-glow);
}

/* --- Input line: attach (+) / textarea+chips / send --- */
.input-main {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 8px 8px 12px;
}
.input-main #attach-btn {
    align-self: flex-start;
    margin-top: 4px;
}
.input-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.input-col textarea {
    padding: 8px 6px 2px;
}

/* --- Composer text layer: the mirror that styles @cast / #location tokens ---
   #composer-highlight carries the VISIBLE glyphs and sits ON TOP; the textarea
   underneath keeps the caret, the selection band and IME. That inversion is
   what buys real text styling (colour, underline, weight) on a token — a layer
   painted *behind* an opaque textarea can only tint the background.

   Two rules follow from it and must not be broken:
     1. The mirror MUST match the textarea glyph-for-glyph — font, size,
        line-height, padding and wrapping are declared as a pair below. Metrics
        that differ desync the (textarea's) caret from the (mirror's) text.
     2. Everything is gated on .is-mirrored, added by mention_highlight.js at
        init. If that module never runs, the textarea stays plainly visible
        rather than the composer going blank. --- */
.composer-input-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.composer-input-wrap textarea {
    position: relative;
    z-index: 1;
    background: transparent;
}
.composer-input-wrap.is-mirrored textarea {
    color: transparent;
    caret-color: var(--text-main);
}
.composer-input-wrap:not(.is-mirrored) .composer-highlight { display: none; }
.composer-highlight {
    /* The textarea's own box (it fills the wrap): the same, often fractional,
       width — never a measured pixel width, which rounds and mis-wraps. */
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;   /* overflow-y becomes scroll while the textarea scrolls (JS) */
    /* That scrollbar only reserves the textarea's gutter; the textarea's own
       scrollbar, underneath, is the one that shows and takes the pointer. */
    scrollbar-color: transparent transparent;
    color: var(--text-main);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    /* — paired with .input-col textarea / the global textarea rule — */
    font-size: 1rem;
    font-family: var(--font-sans);
    line-height: 1.5;
    padding: 8px 6px 2px;
}

/* While an IME is composing, the browser draws the preedit text inside the
   textarea itself — hand the glyphs back to it so Japanese/Chinese input stays
   visible mid-word, and repaint the mirror the moment composition commits. */
.composer-input-wrap.is-composing.is-mirrored textarea { color: var(--text-main); }
.composer-input-wrap.is-composing .composer-highlight { visibility: hidden; }

/* The token: a link. font-weight and letter-spacing are BANNED here — they
   would reflow the mirror away from the textarea's caret (rule 1 above), so
   the extra weight is a metric-free text-shadow thickening instead. */
.composer-mention {
    color: var(--accent-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-shadow: 0 0 0.4px currentColor, 0 0 0.4px currentColor;
}

/* --- Attachment chips (files + skills), inside the input --- */
.composer-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 6px 6px;
}
/* The two buckets flow their chips directly into the wrap row. */
.composer-chips .file-chips { display: contents; }
.composer-chips .skill-pills-row { display: contents !important; padding: 0 !important; }
/* Collapse the row entirely when nothing is attached. */
.composer-chips:not(:has(.skill-pill)):not(:has(.file-chip)) { display: none; }

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 230px;
    padding: 4px 6px 4px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: var(--text-main);
    font-size: 0.76rem;
}
.file-chip > svg { opacity: 0.6; flex-shrink: 0; }
/* Attached-image preview: small rounded thumbnail replacing the paperclip icon.
   The pill's 8px left padding is tuned for the flat svg; the solid thumbnail
   sits better nearly flush with the pill's rounded end. */
.file-chip:has(.file-chip-thumb) { padding-left: 4px; }
.file-chip-thumb {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.file-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-chip-x {
    background: none;
    border: 0;
    padding: 0 2px;
    color: var(--text-dim);
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease;
}
.file-chip-x:hover { color: var(--status-red); }

/* --- Toolbar spacer: pushes model/dimensions to the right of the Gear pill --- */
.input-toolbar-spacer { flex: 1 1 auto; }

/* --- Gear pill (bottom-left of the toolbar; image mode only) --- */
.gear-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 4px 10px 4px 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.gear-pill:hover,
.gear-pill[aria-expanded="true"] {
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.02);
}
.gear-pill-swatch {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.gear-pill.is-neutral .gear-pill-swatch {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    border: 1px dashed rgba(255, 255, 255, 0.28);
}
.gear-pill.is-neutral .gear-pill-name { color: var(--text-muted); }

/* --- Gear dial popover --- */
.gear-dial-pop {
    position: fixed;
    z-index: 1401;
    width: 344px;
    max-width: calc(100vw - 24px);
    padding: 18px;
    background: var(--bg-elevated);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.18s ease-out;
}
/* Single track: 5 equal stops (N + 4 gears) → dot centres land at 10/30/50/70/90%,
   so the track spans exactly N → Iconic with no overhang. */
.gear-dial { position: relative; }
.gear-dial-track {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 8px;
    height: 3px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: linear-gradient(90deg,
        hsl(30, 6%, 46%) 0%, hsl(30, 8%, 52%) 25%, hsl(32, 80%, 53%) 50%,
        hsl(175, 45%, 47%) 75%, hsl(145, 52%, 45%) 100%);
    opacity: 0.8;
}
.gear-dial-stops {
    position: relative;
    display: flex;
}
.gear-dial-stop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    flex: 1 1 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.gear-dial-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--stop-c, #888);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    font-family: var(--font-mono);
    font-size: 0.52rem;
    color: rgba(255, 255, 255, 0.82);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Neutral node — opaque fill so the track never shows through it. */
.gear-dial-stop.is-n .gear-dial-dot {
    background: #2c2c34;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    color: var(--text-muted);
}
.gear-dial-stop:hover .gear-dial-dot { transform: scale(1.18); }
.gear-dial-stop.is-active .gear-dial-dot {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px var(--accent-primary), 0 0 10px var(--accent-glow);
}
.gear-dial-stop.is-n.is-active .gear-dial-dot {
    box-shadow: inset 0 0 0 1px var(--accent-primary), 0 0 0 2px var(--accent-primary), 0 0 10px var(--accent-glow);
    color: var(--accent-primary);
}
.gear-dial-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.15s ease;
}
.gear-dial-stop:hover .gear-dial-label { color: var(--text-main); }
.gear-dial-stop.is-active .gear-dial-label {
    color: var(--accent-primary);
    font-weight: 500;
}

/* --- Unified "+" attach menu --- */
.attach-menu {
    position: fixed;
    z-index: 1401;
    width: 196px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    background: var(--bg-elevated);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.18s ease-out;
}
.attach-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.attach-menu-row:hover { background: var(--glass-highlight); }
.attach-menu-row svg { opacity: 0.65; flex-shrink: 0; }

/* --- Composition pill + picker --- */
.comp-pill-icon { flex-shrink: 0; opacity: 0.75; }
.comp-pill.is-neutral .comp-pill-icon { opacity: 0.5; }

.comp-menu {
    position: fixed;
    z-index: 1401;
    width: 248px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    background: var(--bg-elevated);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.18s ease-out;
}
.comp-menu-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.comp-menu-row:hover { background: var(--glass-highlight); }
.comp-menu-row.is-active { background: rgba(255, 255, 255, 0.04); }
.comp-menu-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.comp-menu-main { font-family: var(--font-sans); font-size: 0.82rem; }
.comp-menu-row.is-active .comp-menu-main { color: var(--accent-primary); }
.comp-menu-hint {
    font-size: 0.68rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comp-menu-check { color: var(--accent-primary); font-size: 0.8rem; flex-shrink: 0; }

/* (The .casting-pill rules were removed 2026-08-18 with the toggle itself —
   the casting surface is now derived server-side, see composer.js.) */

/* --- CHAT SEARCH --- */
.chat-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
/* The header search targets CHAT history — it only shows in the Chat view
   (Assets/Scenes have their own library search). Ctrl+K from any view jumps
   to Chat first (chat_search.js), so the capability stays one keystroke away. */
.main-content:not([data-view="chat"]) .chat-search-wrap { display: none; }

.chat-search-input {
    width: 0;
    padding: 6px 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-main);
    font-size: 0.85rem;
    border-radius: 16px;
    transition: width 0.2s ease, padding 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    outline: none;
    margin-right: 4px;
}

.chat-search-wrap.open .chat-search-input {
    width: 220px;
    padding: 6px 12px;
    border-color: var(--glass-border);
    background: rgba(255, 255, 255, 0.04);
}

.chat-search-close {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
}

.chat-search-wrap.open .chat-search-close {
    display: inline-block;
}

.chat-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 360px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--glass-bg, rgba(20, 20, 30, 0.95));
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    padding: 4px;
}

.chat-search-result {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.chat-search-result:hover,
.chat-search-result:focus {
    background: var(--glass-highlight, rgba(255, 255, 255, 0.06));
    outline: none;
}

.chat-search-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-bottom: 3px;
}

.chat-search-role {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-search-snippet {
    font-size: 0.82rem;
    color: var(--text-main);
    line-height: 1.4;
}

.chat-search-snippet mark {
    background: rgba(255, 220, 100, 0.25);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.chat-search-empty,
.chat-search-loading {
    padding: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.chat-search-flash {
    animation: chatSearchFlash 1.6s ease-out;
}

@keyframes chatSearchFlash {
    0%   { background-color: rgba(255, 220, 100, 0.18); }
    100% { background-color: transparent; }
}

/* --- RESPONSIVE & MOBILE --- */
.mobile-header {
    display: none;
}

/* Phase U-4.1: mobile header left group — brand (→Chat) + project name (→switcher).
   Only renders when the mobile header is shown (≤768px); harmless otherwise. */
.mobile-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.mobile-brand {
    font-size: 0.95rem;
    letter-spacing: 0.18em;   /* base 0.4em is too wide/oversized on mobile */
    flex-shrink: 0;
}
.mobile-brand .brand-beta {
    display: none;
}
.mobile-project-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 170px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
}
.mobile-project-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
    min-width: 0;
}
.mobile-project-btn svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Default hidden on desktop */

@media (max-width: 768px) {
    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
        z-index: 50;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(24px) saturate(1.3);
        -webkit-backdrop-filter: blur(24px) saturate(1.3);
        border-bottom: 1px solid var(--glass-border);
        z-index: 40;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
    }

    .main-content {
        margin-top: 0;
        padding-top: 60px;
        /* Use padding for fixed header space */
        height: 100dvh;
        /* Ensure it fits viewport exactly */
    }

    .app-header {
        display: none;
        /* Hide desktop header */
    }

    /* Desktop header is hidden on mobile (mobile-header + main-content
       padding-top handle clearance), so drop the desktop header offsets. */
    .scroll-container {
        padding-top: 0;
    }

    .notes-container {
        padding-top: 32px;
    }

    .input-region {
        padding: 0 14px max(16px, env(safe-area-inset-bottom));
    }

    .input-wrapper {
        border-radius: 24px;
    }

    .input-row {
        padding: 6px 6px 6px 12px;
    }

    .skill-pills-row {
        padding: 10px 12px 4px 12px;
    }

    .input-toolbar {
        padding: 6px 8px 8px;
    }

    .gen-trigger--model {
        max-width: 200px;   /* the model name + its credit chip */
    }

    .gen-trigger--model #gen-model-label {
        min-width: 0;   /* truncate inside the inline-flex button, before the credit chip */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Base is now flex+wrap (cards stack naturally below ~340px); force a clean
       single column on mobile so a card never sits half-width on a narrow screen. */
    .kb-source-grid > .kb-data-source {
        flex-basis: 100%;
    }

    .tool-btn {
        padding: 6px;
    }

    /* Add backdrop */
    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 45;
        display: none;
    }

    .sidebar-backdrop.active {
        display: block;
    }

    /* Gallery: 2-column grid. aspect-ratio:1 works because the grid
       is inside .gallery-scroll-wrapper (no fixed height on the grid). */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 12px;
        gap: 8px;
    }
}

/* Helpers */
.hidden {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}

.modal {
    background: rgba(20, 20, 30, 0.85);
    backdrop-filter: blur(32px) saturate(1.5);
    -webkit-backdrop-filter: blur(32px) saturate(1.5);
    border: 1px solid var(--glass-border);
    width: 600px;
    max-height: 85vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-sidebar {
    width: 170px;
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid var(--glass-border);
    padding: 16px;
}

.modal-content {
    flex: 1;
    padding: 22px;
    overflow-y: auto;
}

.modal-layout {
    display: flex;
    height: 400px;
}

.settings-tab {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    border-left: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    font-size: 0.88rem;
    font-family: var(--font-sans);
    margin-bottom: 2px;
    transition: color 0.2s, background 0.2s;
}

.settings-tab:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.03);
}

.settings-tab.active {
    color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.08);
    border-left-color: var(--accent-primary);
    font-weight: 500;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.form-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.2s;
}

.form-input:focus {
    border-color: var(--border-active);
}

.btn-primary {
    background: var(--accent-gradient);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    transition: opacity 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    opacity: 0.9;
    box-shadow: 0 0 16px var(--accent-glow);
}

/* Helpers */
.hidden {
    display: none !important;
}

/* --- TOAST NOTIFICATIONS --- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    /* Above every interactive overlay (modal overlays sit at 9300/9500) — a
       toast fired from inside a modal must not hide behind it (2026-08-24:
       upload errors in the Cast picker were invisible). Only the decorative
       pointer-events:none grain (9999) stays higher. */
    z-index: 9800;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 420px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    background: rgba(20, 20, 30, 0.92);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(120%);
    opacity: 0;
    animation: toastIn 0.35s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.toast.toast-out {
    animation: toastOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.toast.toast-success {
    border-left: 3px solid var(--status-green);
}

.toast.toast-error {
    border-left: 3px solid var(--status-red);
}

.toast.toast-warning {
    border-left: 3px solid var(--status-yellow);
}

.toast.toast-info {
    border-left: 3px solid var(--accent-primary);
}

@keyframes toastIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* --- IMAGE LIGHTBOX --- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 8000;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fadeIn 0.2s;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: var(--radius-md);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    cursor: grab;
    transition: transform 0.2s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-img.zoomed {
    cursor: grabbing;
    max-width: none;
    max-height: none;
}

.lightbox-toolbar {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 8010;
}

.lightbox-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}

.lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.08);
}

.lightbox-btn.is-disabled,
.lightbox-btn:disabled {
    cursor: not-allowed;
    opacity: 0.38;
    transform: none;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8005;
    transition: background 0.2s, transform 0.15s;
}

.lightbox-nav--prev { left: 20px; }
.lightbox-nav--next { right: 20px; }

.lightbox-nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) scale(1.08);
}

.lightbox-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.lightbox-nav[hidden] { display: none !important; }

@media (max-width: 640px) {
    .lightbox-nav {
        width: 36px;
        height: 36px;
    }
    .lightbox-nav--prev { left: 8px; }
    .lightbox-nav--next { right: 8px; }
}

/* --- PIPELINE TRACE ACCORDION --- */
.pipeline-trace {
    margin-top: 10px;
    border: 1px solid rgba(0, 200, 255, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.78rem;
    overflow: hidden;
}

.pipeline-trace > summary {
    padding: 7px 12px;
    cursor: pointer;
    color: rgba(0, 200, 255, 0.75);
    font-size: 0.78rem;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pipeline-trace > summary::-webkit-details-marker { display: none; }

.pipeline-trace > summary::before {
    content: '▶';
    font-size: 0.65rem;
    transition: transform 0.2s;
}

.pipeline-trace[open] > summary::before { transform: rotate(90deg); }

.trace-stages {
    padding: 4px 0 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.trace-stage {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.trace-stage > summary,
.trace-chip {
    padding: 4px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-size: 0.77rem;
    color: var(--text-muted);
}

.trace-stage > summary::-webkit-details-marker { display: none; }

.trace-chip {
    cursor: default;
}

.trace-ok { color: rgba(80, 220, 160, 0.85); }
.trace-skipped { color: rgba(160, 160, 180, 0.6); }
.trace-failed { color: rgba(255, 90, 90, 0.9); }

.trace-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.trace-ok .trace-dot { background: rgba(80, 220, 160, 0.8); }
.trace-skipped .trace-dot { background: rgba(160, 160, 180, 0.45); }
.trace-failed .trace-dot { background: rgba(255, 90, 90, 0.85); }

.trace-elapsed {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.55;
}

/* Skill summary badge in Generation Payload summary line */
.trace-skill-summary {
    font-size: 0.72rem;
    color: rgba(0, 212, 255, 0.75);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 10px;
    padding: 1px 8px;
    white-space: nowrap;
}

/* Skill tags inside expanded detail section */
.trace-skill-tag {
    display: inline-block;
    font-size: 0.72rem;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 10px;
    padding: 1px 8px;
    margin: 1px 2px;
    color: rgba(0, 212, 255, 0.85);
}

.trace-skill-tag.trace-skill-skipped {
    background: rgba(160, 160, 180, 0.06);
    border-color: rgba(160, 160, 180, 0.2);
    color: rgba(160, 160, 180, 0.55);
    text-decoration: line-through;
}

.trace-body {
    padding: 6px 14px 8px 28px;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

.trace-section {
    margin-bottom: 5px;
}


.trace-kv {
    display: flex;
    gap: 6px;
    margin-bottom: 1px;
}


.trace-brief {
    white-space: pre-wrap;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 6px 8px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.65);
    max-height: 200px;
    overflow-y: auto;
}

.trace-ref {
    display: inline-block;
    background: rgba(120, 80, 220, 0.18);
    border: 1px solid rgba(120, 80, 220, 0.3);
    border-radius: 4px;
    padding: 1px 7px;
    margin: 2px 3px 2px 0;
    font-size: 0.72rem;
    color: rgba(180, 150, 255, 0.85);
}

.trace-reason {
    font-style: italic;
    opacity: 0.6;
    font-size: 0.72rem;
}

/* --- TAKE STRIP --- */
.take-strip {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    /* Resolve width from the (image-sized) wrapper rather than from the thumbs.
     * A percentage width contributes 0 to the inline-block wrapper's intrinsic
     * size, so a long take list no longer inflates the wrapper past the image —
     * instead the strip clamps to the media width and overflow-x scrolls it.
     * Without this the thumbs push the wrapper off-screen on narrow viewports. */
    width: 100%;
    background: var(--glass-base);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    scrollbar-width: thin;
    animation: fadeIn 0.3s ease-out;
}

.take-strip::-webkit-scrollbar { height: 3px; }
.take-strip::-webkit-scrollbar-track { background: transparent; }
.take-strip::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 2px;
}

.take-thumb {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.take-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.take-thumb:hover { border-color: rgba(220, 38, 38, 0.5); }

.take-thumb.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 8px var(--accent-glow);
}

.take-thumb:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.take-index {
    position: absolute;
    bottom: 3px;
    left: 4px;
    font-size: 0.62rem;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.65);
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.4;
    pointer-events: none;
}

.take-approved-dot {
    color: var(--status-green);
    margin-left: 2px;
}

.image-wrapper.approved {
    border-radius: 8px;
    box-shadow: 0 0 0 2px var(--status-green), 0 0 16px rgba(52, 211, 153, 0.15);
}

.approve-btn.is-approved {
    color: var(--status-green);
}

/* --- GALLERY COMPARE SELECTION --- */
/* --- GALLERY ASSET PANEL STATES --- */
.gallery-item.is-approved {
    outline: 2px solid var(--status-green);
    outline-offset: -2px;
}

.gallery-item.is-approved::after {
    display: none;
}

.gallery-item.is-liked {
    outline: 2px solid #F59E0B;
    outline-offset: -2px;
}

.gallery-item.is-liked.is-approved {
    outline-color: var(--status-green);
}

.take-count-badge {
    position: absolute;
    top: 7px;
    left: 32px;
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.65rem;
    font-family: var(--font-mono);
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 2;
    pointer-events: none;
}

/* --- LIGHTBOX CONTENT WRAPPER --- */
.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-height: 92vh;
}

.lightbox-content .lightbox-img {
    max-height: 82vh;
}

#lightbox-take-strip {
    display: flex;
    gap: 6px;
    padding: 0 4px;
    max-width: 90vw;
    overflow-x: auto;
    justify-content: center;
    scrollbar-width: thin;
    empty-cells: hide;
}

#lightbox-take-strip:empty { display: none; }

/* --- GALLERY SELECT CHECKBOX (always visible) --- */
.gallery-select-checkbox {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 7px;
    left: 7px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.55);
    z-index: 3;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: white;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.gallery-select-checkbox:hover,
.gallery-select-checkbox:focus-visible {
    border-color: var(--accent-secondary);
    outline: none;
}

.gallery-select-checkbox.checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.gallery-item.is-selected {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}


/* --- TEXT ASSET CARD --- */
.text-asset-card {
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 14px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
}

.text-asset-card:hover {
    background: var(--glass-strong);
    border-color: rgba(255, 255, 255, 0.12);
}

.text-asset-card.is-approved {
    outline: 2px solid var(--status-green);
    outline-offset: -2px;
}

.text-asset-card.is-selected {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

/* Header: compare checkbox + type chip + date, on one line. The checkbox is
   shared with image cards (absolutely positioned there); inside a text card it
   flows inline so it never overlaps the body text. */
.text-asset-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.text-asset-card .gallery-select-checkbox {
    position: static;
    flex-shrink: 0;
}

.text-asset-excerpt {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.55;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.text-asset-category {
    font-size: 0.68rem;
    font-family: var(--font-mono);
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

.text-asset-date {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-left: auto;
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* Action row pinned to the card bottom, right-aligned. */
.text-asset-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* Text tab uses a single-column list layout. The element carries the
   `gallery-grid` class (not `asset-gallery`), matching the `.locations-layout`
   pattern — keying off `gallery-grid` is what actually overrides the default
   180px auto-fill grid. */
.gallery-grid.text-layout {
    grid-template-columns: 1fr;
    max-width: 680px;
}


/* ============================================================
   COCKPIT REDESIGN - v0.9.9
   Phase 1: Project Card, Mode Chip, Progress, Streaming
   Phase 2: Sources, KB Status, Sidebar Collapse
   Phase 3: Quick Actions
   ============================================================ */

/* --- PROJECT IDENTITY CARD --- */
.project-card {
    background: var(--glass-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin: 0 4px 20px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.project-card:hover { border-color: var(--accent-primary); }
.project-card.empty {
    border-color: var(--accent-primary);
    animation: pulse-border 2s ease-in-out infinite;
}


.project-card .project-name {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


@keyframes pulse-border {
    0%, 100% { border-color: var(--accent-primary); box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { border-color: var(--accent-secondary); box-shadow: 0 0 8px 2px var(--accent-glow); }
}

/* --- SIDEBAR COLLAPSE BUTTON --- */


.brand-section { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

/* --- COLLAPSED SIDEBAR --- */


/* nowrap: the longest World labels ("Production Design", "Visual Hierarchy") sit
   close to the 240px sidebar's inner width — without this they wrap to two lines. */
.nav-item-label { flex: 1; white-space: nowrap; }

/* --- MODE CHIP --- */


/* --- SEND BUTTON DISABLED --- */
.send-btn:disabled, .send-btn.disabled { opacity: 0.3; pointer-events: none; }

/* --- GENERATION PROGRESS DOTS --- */


@keyframes stage-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* --- STREAMING PULSE --- */
.message-row.ai .message-bubble.streaming {
    border-left-color: var(--accent-primary);
    animation: border-pulse 1.5s ease-in-out infinite;
}
@keyframes border-pulse {
    0%, 100% { border-left-color: var(--accent-primary); }
    50% { border-left-color: var(--accent-secondary); }
}

/* --- PRE-STREAM STATUS --- */
.pre-stream-status {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-dim);
    letter-spacing: 0.03em;
    animation: fadeIn 0.3s ease-out;
    padding: 4px 0;
}

/* --- KNOWLEDGE BASE SECTIONS --- */
/* Sources panel — inline project title */


.kb-title-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--accent-primary);
    color: var(--text-main);
    font-size: 1.5rem;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    width: 100%;
    padding-bottom: 2px;
    line-height: 1.3;
}

/* Nested project list inside Drive card */


/* (kb-card--row styles moved below .kb-card definition for proper override) */

.kb-section { margin-bottom: 24px; }
.kb-section:last-child { margin-bottom: 0; }
.kb-section-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-left: 2px;
}
.kb-source-grid {
    /* Flex row that wraps. flex-grow on each card guarantees a single source
       fills the full width (no dead column); a 2nd card splits the row 2-up,
       wrapping to stacked below ~340px each. More robust than grid auto-fit,
       which can leave empty tracks at wide viewports. */
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.kb-source-grid > .kb-data-source {
    flex: 1 1 340px;
}

/* --- KB PROJECT CARD --- */

.kb-project-display-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* --- KB NEW PROJECT BUTTON --- */


/* --- KB FIRST-RUN FORM --- */

.kb-create-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.kb-create-input:focus { border-color: var(--accent-primary); }
.kb-create-btn {
    margin-top: 0;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.15s;
}
.kb-create-btn:hover { opacity: 0.9; transform: translateY(-1px); }


/* --- KB PROJECTS LIST --- */


/* --- KNOWLEDGE BASE CARDS --- */
.kb-card {
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 12px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}


/* ── Data source group (Google Drive with nested folders) ─────────────────── */
.kb-data-source {
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    min-height: 118px;
}
.kb-data-source-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    gap: 12px;
}


.kb-data-source-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-main);
    letter-spacing: 0.01em;
}

.kb-data-source-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.kb-data-source-action {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    flex-shrink: 0;
}
.kb-data-source-action:hover {
    border-color: var(--accent-primary);
    color: var(--text-main);
    background: rgba(220, 38, 38, 0.06);
}
.kb-data-source-action.syncing {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    opacity: 0.85;
}
.kb-data-source-action.syncing::after {
    content: '…';
    display: inline-block;
    margin-left: 4px;
    animation: kb-sync-pulse 0.9s ease-in-out infinite;
}
@keyframes kb-sync-pulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}
.kb-data-source-action:disabled {
    color: var(--text-dim);
    cursor: not-allowed;
    opacity: 0.48;
}
.kb-data-source-action:disabled:hover {
    background: transparent;
    border-color: var(--glass-border);
}


/* Override project row styling when nested inside data source */


/* Horizontal glass card variant — used in Sources panel rows */
.kb-card.kb-card--row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 8px;
}
.kb-card-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.kb-card-body {
    flex: 1;
    min-width: 0;
}
.kb-card-title {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 2px;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.kb-card-meta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-dim);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kb-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}
.kb-card-chevron {
    color: var(--text-dim);
    font-size: 1.4rem;
    line-height: 1;
}
.kb-card.kb-card--row.kb-card--link {
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.kb-card.kb-card--row.kb-card--link:hover {
    border-color: var(--accent-primary);
    background: var(--glass-strong);
}
.kb-card.kb-card--row.kb-card--link:hover .kb-card-chevron { color: var(--accent-primary); }


/* --- KB STATUS CARD (sidebar footer) --- */


/* --- QUICK ACTIONS --- */
.quick-action {
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    padding: 7px 16px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}
.quick-action:hover {
    border-color: var(--accent-primary);
    color: var(--text-main);
    background: rgba(220,38,38,0.06);
    transform: translateY(-1px);
}

/* Onboarding / project picker in greeting */
.onboarding-project-pill {
    border-color: rgba(139, 92, 246, 0.35);
    color: var(--text-main);
}
.onboarding-project-pill:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--accent-primary);
}
.onboarding-step {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--glass-border);
}
.onboarding-step-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.onboarding-name-input {
    flex: 1;
    min-width: 0;
}

/* Tablet auto-collapse is handled via JS resize listener in ui.js
   using the same .sidebar--collapsed class as the manual toggle */

/* ============================================================
   Chat Area & Nav refinements
   ============================================================ */

/* --- GREETING --- */
.greeting-headline {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.2;
    margin-bottom: 10px;
    border-left: 3px solid var(--accent-primary);
    padding-left: 16px;
}

.greeting-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    padding-left: 19px;
}

/* --- REACTION BAR - COLOR CODED --- */
.feedback-btn--good:hover  { border-color: #F59E0B; color: #F59E0B; background: rgba(245,158,11,0.08); }
.feedback-btn--good.active { background: rgba(245,158,11,0.15); border-color: #F59E0B; color: #F59E0B; }

.feedback-btn--bad:hover   { border-color: #EF4444; color: #EF4444; background: rgba(239,68,68,0.08); }
.feedback-btn--bad.active  { background: rgba(239,68,68,0.15); border-color: #EF4444; color: #EF4444; }


.feedback-btn--approve:hover { border-color: #10B981; color: #10B981; background: rgba(16,185,129,0.08); }
.feedback-btn--approve.is-approved { background: rgba(16,185,129,0.15); border-color: #10B981; color: #10B981; font-weight: 600; }

/* ============================================================
   SYSTEM STATUS + ACTIVITY LOG PANEL + FOOTER REDESIGN
   ============================================================ */

/* --- SIDEBAR FOOTER REDESIGN --- */
.sidebar-brand-footer {
    margin-top: 10px;
    padding-top: 6px;
}

.sidebar-brand-by {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

.by-text {
    font-size: 0.68rem;
    color: var(--text-dim);
    opacity: 0.7;
    letter-spacing: 0.02em;
}


.sidebar-version {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-dim);
    opacity: 0.6;
    letter-spacing: 0.05em;
}

/* --- SYSTEM STATUS ROW --- */
/* Sidebar — Project Info Bar */


.project-switcher-toggle {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s, background 0.15s, transform 0.2s;
}
.project-switcher-toggle:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.06);
}


/* Phase U-3: top-level fixed overlay (was a sidebar-anchored absolute popover). Opens
   downward, anchored to the top-right under the header. Toggled via `.open` in JS so any
   trigger (desktop header caret, mobile header button) can open it. */
.project-switcher-dropdown {
    display: none;
    position: fixed;
    top: 62px;
    right: 16px;
    width: 264px;
    max-width: calc(100vw - 32px);
    max-height: 360px;
    overflow-y: auto;
    background: rgba(20, 22, 30, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 200;
    padding: 4px;
}
.project-switcher-dropdown.open {
    display: block;
}

.project-switcher-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text-main);
    transition: background 0.1s;
    font-family: var(--font-sans);
}
.project-switcher-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.project-switcher-item.active {
    color: var(--accent-primary);
    cursor: default;
}
.project-switcher-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-switcher-item.active .project-switcher-item-name::before {
    content: '✓ ';
}
.project-switcher-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    color: transparent;
    cursor: pointer;
    font-size: 0.72rem;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1;
    transition: color 0.1s, background 0.1s;
}
.project-switcher-item:hover .project-switcher-delete {
    color: var(--text-dim);
}
.project-switcher-delete:hover {
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.12);
}

.project-switcher-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 4px 0;
}

.project-switcher-new {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 8px 10px;
    border-radius: 4px;
    transition: color 0.1s, background 0.1s;
    font-family: var(--font-sans);
}
.project-switcher-new:hover {
    color: var(--accent-primary);
    background: rgba(125, 211, 252, 0.06);
}

.project-switcher-create {
    display: flex;
    gap: 4px;
    padding: 4px;
}
.project-switcher-input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    padding: 6px 8px;
    outline: none;
    transition: border-color 0.15s;
}
.project-switcher-input:focus {
    border-color: var(--accent-primary);
}
.project-switcher-create-btn {
    background: var(--accent-gradient);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 0.82rem;
    flex-shrink: 0;
}

/* Hide switcher when sidebar is collapsed (icon-only mode) */


/* Project settings gear (next to the project name) */


/* Footer row: version + system status dot pushed to the right */
.sidebar-footer-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar-rename-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--accent-primary);
    color: var(--text-main);
    font-size: 1.15rem;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    width: 100%;
    padding-bottom: 1px;
    line-height: 1.3;
}


/* Phase C: project Concept/Format brief chip (sidebar, always visible) */


.status-dot.pulse {
    animation: dot-pulse 2.5s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}


/* --- ACTIVITY LOG PANEL --- */
.log-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 300px;
    max-height: 420px;
    background: #101018;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    display: flex;
    flex-direction: column;
    z-index: 500;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}

.log-panel.open {
    transform: translateY(0);
}

.log-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    flex-shrink: 0;
}

.log-panel-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 4px;
    transition: color 0.15s;
}
.log-panel-close:hover { color: var(--text-main); }

.log-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--text-dim) transparent;
}

.log-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 16px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    line-height: 1.5;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.log-entry:last-child { border-bottom: none; }

.log-ts {
    color: var(--text-dim);
    flex-shrink: 0;
    width: 52px;
}

.log-msg {
    color: var(--text-muted);
    flex: 1;
    word-break: break-word;
}

.log-entry.level-WARNING .log-msg { color: #fbbf24; }
.log-entry.level-ERROR   .log-msg { color: #f87171; }
.log-entry.level-INFO    .log-dot { background: var(--status-green); }
.log-entry.level-WARNING .log-dot { background: var(--status-yellow); }
.log-entry.level-ERROR   .log-dot { background: var(--status-red); }

.log-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-dim);
    flex-shrink: 0;
    margin-top: 5px;
}

.log-empty {
    padding: 16px;
    font-size: 0.78rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    text-align: center;
}

.log-panel-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.log-copy-btn {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-family: var(--font-sans);
    padding: 7px 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    text-align: left;
}
.log-copy-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-main);
}

/* Backdrop */
.log-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 499;
}
.log-backdrop.active { display: block; }

/* ============================================================
   SUPERSEDED TAKE - compact folded state
   ============================================================ */

/* Compact mode */
.take-superseded > .message-bubble {
    opacity: 0.45;
    padding: 6px 6px 6px 12px;
    transition: opacity 0.2s;
}
.take-superseded:hover > .message-bubble { opacity: 0.65; }

.take-superseded .image-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.take-superseded .image-wrapper > img {
    max-height: 48px;
    width: auto;
    border-radius: 6px;
    cursor: zoom-in;
    flex-shrink: 0;
}

/* Hide non-essential elements in compact mode. .image-actions is the
 * absolutely-positioned on-image overlay (Refine ✏️ / Regen / Download); hide
 * the whole row so the ✏️ pencil doesn't float over the shrunken thumbnail and
 * collide with the "refined →" label + expand chevron. */
.take-superseded .image-actions,
.take-superseded .take-strip,
.take-superseded .regen-btn,
.take-superseded .download-btn,
.take-superseded .pipeline-trace,
.take-superseded .feedback-actions { display: none; }

/* "Refined ->" label injected via CSS */
.take-superseded .image-wrapper::after {
    content: 'refined →';
    font-size: 0.68rem;
    font-family: var(--font-mono);
    color: var(--text-dim);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Expand / collapse toggle button */
.take-expand-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.take-expand-btn:hover { color: var(--text-muted); border-color: var(--text-dim); }

/* Expanded - restore full view */
.take-superseded.take-expanded > .message-bubble {
    opacity: 1;
    padding: 16px 24px;
}
.take-superseded.take-expanded .image-wrapper {
    display: block;
}
.take-superseded.take-expanded .image-wrapper > img {
    max-height: none;
    max-width: 100%;
}
.take-superseded.take-expanded .image-wrapper::after { display: none; }
.take-superseded.take-expanded .image-actions { display: flex; }
.take-superseded.take-expanded .take-strip { display: flex; }
.take-superseded.take-expanded .regen-btn,
.take-superseded.take-expanded .download-btn { display: inline-flex; }
.take-superseded.take-expanded .feedback-actions { display: flex; }
.take-superseded.take-expanded .pipeline-trace { display: block; }
.take-superseded.take-expanded .take-expand-btn {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* ── KB Drive folder display ─────────────────────────────────────────────── */
.kb-drive-folder-display {
    padding: 10px 14px 12px;
}
.kb-drive-folder-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-main);
}
.kb-drive-folder-icon { font-size: 1rem; flex-shrink: 0; }
.kb-drive-folder-name {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.kb-drive-sync-badge {
    font-size: 0.68rem;
    font-family: var(--font-mono);
    padding: 2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.kb-drive-sync-badge.synced {
    color: var(--status-green, #34d399);
    background: rgba(52, 211, 153, 0.1);
}
.kb-drive-sync-badge.syncing {
    color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.12);
}
.kb-drive-empty-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0;
}

/* ── Folder picker items ─────────────────────────────────────────────────── */
.folder-pick-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    margin-bottom: 6px;
    cursor: pointer;
    color: var(--text-main);
    font-size: 0.875rem;
    transition: background 0.12s, border-color 0.12s;
    user-select: none;
}
.folder-pick-item:hover {
    background: rgba(255,255,255,0.07);
    border-color: var(--accent-primary);
}
.folder-pick-main {
    display: flex;
    align-items: center;
}
.folder-pick-icon {
    margin-right: 8px;
    opacity: 0.7;
}
/* Parent path under the folder name — disambiguates same-named folders. */
.folder-pick-path {
    padding-left: 24px;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ══════════════════════════════════════════════════════════════════
   Phase A-3 — Gallery redesign + Scenes UI
   ══════════════════════════════════════════════════════════════════ */

/* ── Gallery scope tabs (replaces filter tabs) ─────────────────── */
.gallery-scope-tab {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    min-height: 34px;
    padding: 6px 14px;
    transition: all 0.15s;
    white-space: nowrap;
}
.gallery-scope-tab:hover { color: var(--text-primary); border-color: var(--glass-border); }
.gallery-scope-tab.active {
    background: rgba(var(--accent-primary-rgb, 0,212,255), 0.12);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}


/* ── Image upload control (Phase UP) — right-aligned in the scope tabs row ── */
.gallery-upload-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gallery-upload-hint {
    font-size: 0.72rem;
    color: var(--text-dim);
    white-space: nowrap;
}
.gallery-upload-btn {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    min-height: 34px;
    padding: 6px 14px;
    transition: all 0.15s;
    white-space: nowrap;
}
.gallery-upload-btn:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: var(--glass-highlight);
}
.gallery-upload-btn:disabled { opacity: 0.6; cursor: default; }
/* The constraint hint is helpful but optional — drop it well before the upload
   button would wrap onto its own line (X4: was 680px, which still wrapped). */
@media (max-width: 1024px) {
    .gallery-upload-hint { display: none; }
}

/* ── X4: lens-aware sub-header ────────────────────────────────────
   The storyboard lens hides the library-only controls (search / sort /
   upload / Text / Locations tabs) and shows its own compact toolbar.
   board.js selectSceneView toggles .storyboard-lens on the tabs row. */
.sb-toolbar { display: none; }
.gallery-filter-tabs.storyboard-lens .sb-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.sb-scene-jump { max-width: 240px; }
/* !important: #gallery-toolbar-controls also gets inline display from the
   Locations-tab toggle (_setToolbarControlsVisible); the lens must win.
   X4 polish: ALL scope tabs hide too — the storyboard shows cuts (approved by
   construction), so the All/Approved filter carried no meaning there. */
.gallery-filter-tabs.storyboard-lens .gallery-toolbar-controls { display: none !important; }
.gallery-filter-tabs.storyboard-lens .gallery-upload-group,
.gallery-filter-tabs.storyboard-lens .gallery-scope-tab { display: none; }

/* ── X2: library search + sort (scope-tabs row) ─────────────────── */
.gallery-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
    min-width: 0;
}
.gallery-search {
    flex: 0 1 220px;
    min-width: 110px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.8rem;
    min-height: 34px;
    padding: 6px 12px;
    outline: none;
    transition: border-color 0.15s;
}
.gallery-search:focus { border-color: var(--accent-primary); }
.gallery-search::placeholder { color: var(--text-dim); }
.gallery-sort {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    min-height: 34px;
    padding: 6px 10px;
    outline: none;
    transition: all 0.15s;
}
.gallery-sort:hover,
.gallery-sort:focus { color: var(--text-main); border-color: var(--accent-primary); }
.gallery-sort option { background: var(--bg-panel); color: var(--text-main); }
@media (max-width: 680px) {
    /* Keep search usable on narrow widths: own full-width row under the tabs. */
    .gallery-toolbar-controls { flex-basis: 100%; order: 10; }
}

/* ── X2: selection action bar (replaces the compare-only toolbar) ── */
.gallery-select-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid rgba(var(--accent-primary-rgb, 220, 38, 38), 0.2);
    font-size: 0.8rem;
}
.gsb-count {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    white-space: nowrap;
}
.gsb-spacer { margin-left: auto; }
.gsb-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 5px 12px;
    transition: all 0.15s;
    white-space: nowrap;
}
.gsb-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.gsb-btn--danger:hover { border-color: var(--status-red); color: var(--status-red); }

.gallery-scene-chips {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    padding: 8px 24px 12px;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.16) transparent;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.008);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}


.gallery-scene-chip-group {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    max-width: 220px;
}


/* ── Gallery card hover overlay ────────────────────────────────── */
.gallery-item { position: relative; overflow: hidden; }

/* The card's clapperboard button moved to the lightbox toolbar, so the badge
   reclaims the top-right corner (it sat at right:48px to clear that button). */
.asset-scene-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 5;
    max-width: calc(100% - 48px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0,0,0,0.68);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    padding: 5px 7px;
    backdrop-filter: blur(4px);
}
.asset-scene-badge:hover,
.asset-scene-badge:focus-visible {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.asset-scene-badge.multi {
    padding-right: 8px;
}

.scene-tag-menu {
    position: fixed;
    z-index: 9300;
    width: 280px;
    max-width: calc(100vw - 24px);
    background: rgba(18, 18, 24, 0.96);
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    box-shadow: 0 18px 54px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,255,255,0.035);
    padding: 10px;
}
.scene-tag-menu__title {
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.scene-tag-menu__form {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.scene-tag-menu__input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.78rem;
    padding: 7px 8px;
}
.scene-tag-menu__input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.scene-tag-menu__submit {
    background: rgba(var(--accent-primary-rgb, 0,212,255), 0.16);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0 10px;
}
.scene-tag-menu__section {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 180px;
    overflow-y: auto;
}
.scene-tag-menu__section--remove {
    border-top: 1px solid var(--glass-border);
    margin-top: 8px;
    padding-top: 8px;
}
.scene-tag-menu__label,
.scene-tag-menu__empty {
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 4px 2px;
}
.scene-tag-menu__row {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    min-height: 30px;
    padding: 7px 8px;
    text-align: left;
}
.scene-tag-menu__row:hover,
.scene-tag-menu__row:focus-visible {
    background: rgba(255,255,255,0.07);
    outline: none;
}
.scene-tag-menu__row--danger {
    color: #ff8a8a;
}

.scene-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    font-size: 0.8rem;
}
.scene-suggestion span {
    color: var(--text-primary);
    margin-right: auto;
}


.gallery-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px 8px 52px;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}
.gallery-item:hover .gallery-hover-overlay {
    opacity: 1;
    pointer-events: auto;
}
.gallery-hover-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}
.gallery-prompt-mini {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.gallery-date-mini { font-size: 0.68rem; color: rgba(255,255,255,0.5); }

/* ── Gallery hover action buttons ──────────────────────────────── */
.gallery-hover-actions {
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.gha-btn {
    background: rgba(0,0,0,0.56);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
    text-decoration: none;
}
.gha-btn:hover { background: rgba(0,0,0,0.8); border-color: rgba(255,255,255,0.4); }
.gha-approve.is-approved { color: var(--accent-primary); border-color: var(--accent-primary); }
.gha-like.liked { color: #F59E0B; border-color: rgba(245,158,11,0.55); }

.gha-delete:hover { color: #EF4444; border-color: rgba(239,68,68,0.65); }

.gallery-asset-info-panel {
    background: var(--bg-panel);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    max-width: 760px;
    width: 92vw;
    max-height: 84vh;
    overflow-y: auto;
    padding: 18px 20px;
}
.gallery-asset-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
#gallery-asset-info-title {
    color: var(--text-muted);
    font-size: 0.85rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gallery-asset-info-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.gallery-asset-info-actions a,
.gallery-asset-info-actions button {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 6px 10px;
    text-decoration: none;
}
.gallery-asset-info-actions a:hover,
.gallery-asset-info-actions button:hover {
    color: var(--text-main);
    border-color: rgba(255,255,255,0.22);
}
.gallery-asset-info-section {
    margin-top: 14px;
}
.gallery-asset-info-label {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.gallery-asset-info-prompt {
    background: rgba(0,0,0,0.28);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.6;
    padding: 12px;
    white-space: pre-wrap;
}

/* ── Active Scene chip (header + scenes view) ──────────────────── */


/* ── Scenes view ───────────────────────────────────────────────── */


/* Scene assets panel */


/* ── Chat promote/save buttons ──────────────────────────────────── */
.feedback-btn--save-script:hover { color: #f0a500; border-color: #f0a500; }
.feedback-btn--snapshot:hover { color: #b482ff; border-color: #b482ff; }

/* Scene Board */


.scene-board-order-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    cursor: pointer;
    font: 700 0.72rem var(--font-mono);
}
.scene-board-order-btn:hover {
    border-color: rgba(220,38,38,0.45);
    color: var(--text-main);
}

.scene-board-strip {
    min-width: 0;
    min-height: 116px;
    display: flex;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: visible;
    transition: background 0.15s ease, outline-color 0.15s ease;
}
.scene-board-strip.is-drop-target {
    background: rgba(220,38,38,0.08);
    outline: 1px solid rgba(220,38,38,0.5);
    outline-offset: -2px;
}
.scene-board-card {
    width: 116px;
    height: 88px;
    flex: 0 0 116px;
    position: relative;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    background: #111;
    cursor: grab;
}
.scene-board-card:active {
    cursor: grabbing;
}
.scene-board-card.is-dragging {
    opacity: 0.45;
}
.scene-board-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scene-board-card-badge {
    position: absolute;
    right: 6px;
    top: 6px;
    min-width: 22px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0,0,0,0.72);
    color: white;
    font: 700 0.68rem var(--font-mono);
}
/* Remove-from-scene control (hover, top-left so it clears the +N badge at top-right).
   Neutral — NOT a delete affordance: only the scene link is removed, the asset stays
   in the Assets library. Hence ↩ + accent-on-hover, never a red ✕. */
.scene-board-card-remove {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    background: rgba(0,0,0,0.66);
    color: #fff;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1;
    opacity: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.12s, background 0.12s, border-color 0.12s, color 0.12s;
}
.scene-board-card:hover .scene-board-card-remove {
    opacity: 1;
}
.scene-board-card-remove:hover,
.scene-board-card-remove:focus-visible {
    background: rgba(0,0,0,0.85);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    opacity: 1;
    outline: none;
}
.scene-board-drop-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 18px;
    min-width: 160px;
    text-align: center;
}

/* ── Shot sub-lanes (Phase V-1) ──────────────────────────────────────────── */


.scene-board-shots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 0;
}
.scene-board-shot {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    /* glass-base stacked over the section's bg-surface ≈ one visual step up. */
    background: var(--glass-base);
    overflow: hidden;
}
.scene-board-shot-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.scene-board-shot-index {
    flex-shrink: 0;
    font: 700 0.7rem var(--font-mono);
    color: var(--accent-primary);
    letter-spacing: 0.04em;
}
.scene-board-cut-dur {
    flex-shrink: 0;
    font: 600 0.7rem var(--font-mono);
    color: var(--text-main);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 1px 6px;
    cursor: pointer;
    line-height: 1.4;
}
.scene-board-cut-dur:hover { background: rgba(255,255,255,0.12); }
.scene-board-cut-dur-empty { color: var(--text-muted); }
.scene-board-shot-intent {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dim);
    font-size: 0.82rem;
    cursor: text;
}
.scene-board-shot-intent:hover { color: var(--text-main); }
.scene-board-shot-intent-empty { color: var(--text-muted); }
.scene-board-shot-actions {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.scene-board-shot-del {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}
.scene-board-shot-del:hover {
    color: #f87171;
    border-color: rgba(239,68,68,0.5);
}
.scene-board-strip--shot { min-height: 104px; }

/* SB-2: a Cut holds ONE decided image (canonical). Show it larger than a take
   thumbnail; an empty Cut shows a full-width drop slot. */
.scene-board-strip--cut {
    min-height: 132px;
    align-items: stretch;
}
.scene-board-card--cut {
    width: 184px;
    height: 124px;
    flex: 0 0 184px;
}
.scene-board-cut-empty {
    flex: 1;
    min-height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 8px;
    color: var(--text-muted);
}


/* ── Master-detail: Scene rail + Grid (2026-06-02) ───────────────────────── */
.gallery-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scene navigator — nested under "Assets" in the global sidebar (single sidebar). */
.assets-scene-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 4px 16px;          /* indent under the Assets row */
    padding-left: 8px;
    border-left: 1px solid var(--glass-border);
}
/* Scene nav is visible only while the Assets view is active (adjacent sibling). */
.nav-item[data-view="assets"]:not(.active) + .assets-scene-nav { display: none; }
/* Locations list — collapsible sub-nav under the "Locations" header (indented
   like the Assets→scenes list). Hidden via the [hidden] attribute when collapsed. */


/* Chevron on a collapsible nav header (Locations): right when collapsed, down when open. */


/* Phase U-2: nav item nested under a section head (e.g. World > Locations). */

/* Count badge on an accordion header (e.g. World > Locations 3). Sits left of the chevron;
   the flex:1 label pushes it right. Empty when the count is 0. */


/* Keep the collapsed (icon-only) sidebar centered — don't let the sub-item indent leak in. */


/* Location pin — dim until the location has a reference image. */


/* Drop feedback when dragging a gallery tile onto a Location row (mirrors scene rows). */

/* Anchored "set as reference" picker opened from a tile's ◎ (replaces native prompt). */


.scene-subnav-empty {
    color: var(--text-dim);
    font-size: 0.74rem;
    padding: 6px 8px;
}


/* Scene detail action bar */
.scene-detail-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 24px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}


.scene-detail-act {
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    font: 600 0.78rem var(--font-sans);
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.scene-detail-act:hover {
    color: var(--text-main);
    border-color: var(--accent-primary);
    background: rgba(255,255,255,0.07);
}
.scene-detail-location {
    min-width: 132px;
    max-width: 190px;
    height: 32px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    font: 600 0.78rem var(--font-sans);
    padding: 0 8px;
}
.scene-detail-location:focus {
    outline: none;
    border-color: var(--accent-primary);
    color: var(--text-main);
}
/* The open dropdown list is OS-rendered; force a dark, readable palette so the
   options aren't light-on-white until highlighted. */
.scene-detail-location option {
    background: var(--bg-panel, #16161e);
    color: var(--text-main, #f0f0f0);
}

/* Scene detail body (full-width take/shot view inside the scroll wrapper) */
.scene-detail { padding: 18px 24px 32px; }
.scene-detail-body { max-width: 100%; }


/* ── Storyboard: all scenes stacked vertically (Phase SB-1) ─────────────────── */
.sb-storyboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* X4: full width — the storyboard sits above a full-width tray strip, so a
       clamped, centered column read as a narrow panel floating off-grid. */
    max-width: none;
    margin: 0;
}
.sb-section {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    /* Theme tokens, not hardcoded overlays: the old rgba(255,255,255,0.015)
       was half a gallery card's surface and vanished into --bg-void on both
       themes. --bg-surface keeps the section subtle but clearly a panel. */
    background: var(--bg-surface);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    scroll-margin-top: 16px;
}
/* X4: the whole section is a drop target (drop = new Cut at the end). */
.sb-section.is-drop-target {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 220, 38, 38), 0.25);
}
.sb-section-drop-hint {
    margin: 12px;
    padding: 26px 18px;
}
.sb-spares-link {
    display: block;
    background: none;
    border: none;
    padding: 6px 14px 12px;
    color: var(--text-dim);
    font-size: 0.74rem;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
}
.sb-spares-link:hover { color: var(--accent-primary); }
/* X4 polish: "+ New scene" is the storyboard's trailing ghost section (it
   moved out of the sidebar with the scene list). */
.sb-new-scene {
    width: 100%;
    min-height: 52px;
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
    background: rgba(255,255,255,0.015);
    color: var(--text-muted);
    font: 600 0.82rem var(--font-sans);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.sb-new-scene:hover { color: var(--text-main); border-color: rgba(220,38,38,0.45); }
/* Secondary reorder controls (scene + cut) stay quiet until their row is hovered. */
.scene-detail-act--quiet { opacity: 0.3; transition: opacity 0.15s; }
.sb-section-header:hover .scene-detail-act--quiet,
.scene-board-shot-header:hover .scene-detail-act--quiet,
.scene-detail-act--quiet:focus-visible { opacity: 1; }
.sb-section--flash {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.25);
}
.sb-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-elevated);   /* panel chrome — one step above the body */
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(6px);
}
.sb-section-title {
    display: flex; align-items: baseline; gap: 10px; min-width: 0;
    flex: 1; cursor: pointer;
}
.sb-section-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sb-section-meta { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.sb-section-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* SB-4: per-scene collapse */
.sb-collapse-btn {
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.18s ease, color 0.15s ease, background 0.15s ease;
}
.sb-collapse-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.06); }
.sb-section--collapsed .sb-collapse-btn { transform: rotate(-90deg); }
.sb-section--collapsed .sb-section-body { display: none; }
.sb-section--collapsed .sb-section-header { border-bottom: none; }

.sb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 24px;
    color: var(--text-muted);
    text-align: center;
}
@media (max-width: 700px) {
    .sb-storyboard { gap: 18px; }
    .sb-section-header {
        flex-wrap: wrap;
        position: static;   /* sticky headers stack awkwardly on narrow screens */
    }
    .sb-section-actions { width: 100%; justify-content: flex-end; }
    .scene-board-card--cut { width: 100%; height: auto; aspect-ratio: 3 / 2; flex-basis: 100%; }
    .scene-board-strip--cut { flex-direction: column; }
}

@media (max-width: 700px) {
    /* Scene nav lives in the sidebar drawer; the menu affordance is always shown. */

    .scene-detail-bar { padding: 8px 14px; }
    .scene-detail { padding: 12px 14px 24px; }
    .scene-board-strip {
        gap: 8px;
        padding: 10px;
    }
    .scene-board-card {
        width: calc(50% - 4px);
        height: auto;
        aspect-ratio: 4 / 3;
        flex: 1 1 calc(50% - 4px);
        max-width: calc(50% - 4px);
    }
}

@media (max-width: 420px) {
    .scene-board-card {
        width: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* === Login Z-axis Starfield (pure CSS warp-forward) ===
   Each layer is a field of star dots painted via radial-gradients.
   It scales up from the center and fades, so dots appear to rush
   past the viewer along the Z axis (flying forward through space). */
.starfield {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    /* faint cool glow at the warp focal point (theme-independent) */
    background: radial-gradient(ellipse at center,
        rgba(120, 160, 255, 0.08) 0%,
        rgba(0, 0, 0, 0) 60%);
}

.star-layer {
    position: absolute;
    /* a large square centered on the screen; we scale it up from the middle
       so its painted star dots rush outward past the viewer (Z axis). */
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 1200px;
    margin: -600px 0 0 -600px;
    background-color: transparent;
    background-repeat: no-repeat;
    /* star dots scattered across the layer (coords are within 0..1200px box).
       larger blur radius + bright colors = clearly visible on the void. */
    background-image:
        radial-gradient(2px 2px at 240px 180px, #ffffff, transparent),
        radial-gradient(2px 2px at 510px 90px,  #cfe8ff, transparent),
        radial-gradient(1.5px 1.5px at 760px 230px, #ffffff, transparent),
        radial-gradient(2px 2px at 980px 130px, #e6d8ff, transparent),
        radial-gradient(2px 2px at 140px 470px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 420px 560px, #cfe8ff, transparent),
        radial-gradient(2px 2px at 690px 430px, #ffffff, transparent),
        radial-gradient(2px 2px at 1040px 520px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 300px 760px, #e6d8ff, transparent),
        radial-gradient(2px 2px at 600px 690px, #ffffff, transparent),
        radial-gradient(2px 2px at 880px 820px, #cfe8ff, transparent),
        radial-gradient(1.5px 1.5px at 180px 980px, #ffffff, transparent),
        radial-gradient(2px 2px at 520px 1010px, #ffffff, transparent),
        radial-gradient(2px 2px at 800px 960px, #e6d8ff, transparent),
        radial-gradient(2px 2px at 1080px 760px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 60px 320px, #cfe8ff, transparent);
    transform: scale(0.1);
    opacity: 0;
    will-change: transform, opacity;
    animation: warp-forward 5s linear infinite;
}

/* Three staggered layers keep the stream continuous */
.star-layer-1 { animation-delay: 0s; }
.star-layer-2 { animation-delay: 1.66s; }
.star-layer-3 { animation-delay: 3.33s; }

@keyframes warp-forward {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        /* grow outward from center = rushing toward the viewer (Z axis) */
        transform: scale(2.6);
        opacity: 0;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .star-layer {
        animation: none;
        transform: scale(1);
        opacity: 0.6;
    }
}

/* ── Locations view (master / detail / picker) — World › Locations ──────────── */

/* The Locations container is NOT a uniform image grid; it lays its master/detail
   markup out in normal block flow. (Generalized from the old #asset-gallery rule
   now that Locations renders into its own #locations-gallery container.) */
.locations-layout {
    display: block;
}

/* The Locations/Cast views scroll inside their .notes-container flex column.
   (2026-08-24: the rule was Locations-ID-scoped, so the cloned Cast view had
   NO scroll — unnoticed until the tall DNA edit form pushed Save/Cancel off
   screen with no way to reach them.) */
#locations-view #locations-gallery,
#cast-view #cast-gallery {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.locations-master-intro,
.location-detail-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}

.locations-master-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.location-card {
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    text-align: left;
    color: var(--text-main);
}

.location-card:hover,
.location-card:focus-visible {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    outline: none;
}

.location-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--glass-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-card-empty {
    font-size: 0.75rem;
    color: var(--text-dim, #888);
}

.location-card-count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.72rem;
    line-height: 20px;
    text-align: center;
}

.location-card-name {
    padding: 8px 10px 2px;
    font-size: 0.85rem;
    font-weight: 600;
}

.location-card-desc {
    padding: 0 10px 10px;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.location-card--new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    border-style: dashed;
    color: var(--text-muted);
    font-size: 0.82rem;
    background: transparent;
}

.location-card--new:hover {
    color: var(--accent-primary);
}

.location-card-new-plus,
.location-add-plus {
    font-size: 1.6rem;
    line-height: 1;
}

/* Detail */
.location-detail-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.location-detail-back {
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-muted);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.location-detail-back:hover {
    color: var(--text-main);
    border-color: var(--accent-primary);
}

.location-detail-titles {
    flex: 1;
    min-width: 0;
}

.location-detail-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
}

.location-detail-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.location-detail-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.location-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.location-asset {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: #111;
}

.location-asset.is-cover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.location-asset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-asset-cover-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    color: var(--accent-primary);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 0.8rem;
}

.location-asset-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.location-asset:hover .location-asset-actions,
.location-asset:focus-within .location-asset-actions {
    opacity: 1;
}

.location-asset-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}

.location-asset-btn:hover {
    background: var(--accent-primary);
}

.location-asset-remove:hover {
    background: var(--status-red, #dc2626);
}

.location-add-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 16 / 10;
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78rem;
}

.location-add-tile:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Modals (edit + picker) */
.location-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9300;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.location-modal,
.location-picker {
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg, 14px);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
}

.location-modal {
    max-width: 460px;
}

.location-picker {
    max-width: 820px;
    max-height: 82vh;
}

.location-modal-head {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-modal-x {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

.location-modal-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.location-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

/* A danger action (e.g. delete) pinned to the far side, primary/secondary
   actions grouped on the other — used by the Cast edit modal (§ demoted
   delete). Falls back to a plain flex-end row when the left slot is empty. */
.location-modal-actions--split {
    justify-content: space-between;
}

.location-modal-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.location-picker-count {
    margin-right: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Scroll lives on the WRAPPER, not the grid — same rule as
   .gallery-scroll-wrapper: a grid with a constrained height (flex:1 in a
   max-height modal) collapses its auto rows once they exceed the container,
   and the aspect-ratio tiles then stack/overlap (hundreds of images = paper
   slivers). With the wrapper scrolling, the grid keeps auto height and
   aspect-ratio rows resolve at every width. */
.location-picker-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 120px;
}

.location-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.location-picker-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: #111;
}

.location-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-picker-item.selected {
    border-color: var(--accent-primary);
}

.location-picker-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.72rem;
    line-height: 20px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.12s;
}

.location-picker-item.selected .location-picker-check {
    opacity: 1;
}

/* ── Cast view (master / detail / picker / DNA) — World › Cast ──────────────── */
/* cast.js clones the Locations markup wholesale (.locations-layout, .location-card,
   .location-detail*, .location-asset*, .location-modal*, .location-picker*) — same
   1:many reference-set shape, same Neo-Glass tokens. Only the Cast-specific bits
   (alias chips, the visual-DNA panel) get their own rules here, right after the
   Locations block they extend. */

.cast-import-btn {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.cast-alias-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 6px;
}

.cast-alias-chip {
    background: var(--glass-strong, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill, 28px);
    padding: 2px 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.cast-alias-empty {
    font-size: 0.72rem;
    color: var(--text-dim, #555);
}

.cast-dna-section {
    margin: 16px 0;
    padding: 14px 16px;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md, 12px);
}

.cast-dna-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 10px;
}

.cast-dna-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.cast-dna-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cast-dna-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    font-size: 0.8rem;
    line-height: 1.5;
}

.cast-dna-label {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 2px;
}

.cast-dna-value {
    color: var(--text-main);
}

.cast-dna-rules {
    margin: 0;
    padding-left: 18px;
}

.cast-dna-rules li {
    margin-bottom: 2px;
}

.cast-dna-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}

.cast-dna-header .cast-dna-title {
    margin: 0;
}

.cast-dna-header-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.cast-dna-authored-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent-secondary);
    background: var(--glass-base);
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius-sm, 8px);
    vertical-align: middle;
}

.cast-dna-edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cast-dna-edit-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    align-items: center;
}

.cast-dna-edit-row--block {
    align-items: start;
}

.cast-dna-edit-row .cast-dna-label {
    padding-top: 0;
}

.cast-dna-edit-hint {
    margin-top: 2px;
    font-size: 0.68rem;
    color: var(--text-dim, #555);
}

.cast-dna-edit-actions {
    margin-top: 4px;
}

@media (max-width: 640px) {
    .cast-dna-row,
    .cast-dna-edit-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .cast-dna-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Sheet generation modal (P6) ────────────────────────────────────────────── */
/* Extends .location-modal: same glass panel, same label/input/actions rhythm.
   Only the mode chooser, the progress state and the result preview are new. */

.cast-sheet-modal {
    max-width: 560px;
}

.cast-sheet-hint,
.cast-sheet-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.cast-sheet-hint {
    margin-bottom: 12px;
}

.cast-sheet-note {
    margin-top: 8px;
}

.cast-sheet-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.cast-sheet-mode {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 10px 12px;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cast-sheet-mode:hover {
    background: var(--glass-strong, rgba(255, 255, 255, 0.06));
}

.cast-sheet-mode.active {
    border-color: var(--accent-primary);
    background: var(--glass-strong, rgba(255, 255, 255, 0.06));
}

.cast-sheet-mode-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
}

.cast-sheet-mode-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.cast-sheet-fields {
    margin-bottom: 4px;
}

.cast-sheet-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 26px 4px;
}

.cast-sheet-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 2px solid var(--glass-border);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.cast-sheet-progress-text {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cast-sheet-error {
    padding: 14px 16px;
    margin-bottom: 4px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-main);
    background: var(--glass-base);
    border: 1px solid var(--status-red, #f87171);
    border-radius: var(--radius-md, 12px);
}

.cast-sheet-preview {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--glass-border);
    background: var(--glass-base);
}

@media (max-width: 640px) {
    .cast-sheet-modes {
        grid-template-columns: 1fr;
    }
}

/* ── Detail header: demoted edit icon (P6 create-flow rework) ───────────────── */
/* Replaces the old 3-button action row: a single small icon sits inline after
   the name, opening the same edit modal Delete now lives inside of. */
.cast-edit-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    vertical-align: middle;
}

.cast-edit-icon-btn:hover {
    color: var(--text-main);
    border-color: var(--accent-primary);
}

/* Delete, demoted from the header into the edit modal's action row. */
.cast-delete-danger-btn {
    color: var(--status-red, #f87171);
    border-color: var(--status-red, #f87171);
}

.cast-delete-danger-btn:hover {
    background: rgba(248, 113, 113, 0.1);
}

/* ── "New cast member" create modal (P6 create-flow) ─────────────────────────── */
/* Extends .location-modal like the sheet-gen modal. This modal is taller than
   the plain edit modal (3 image slots added), so it caps its own height and
   scrolls its body — same pattern as .location-picker — to never grow past
   the viewport. */
.cast-create-modal {
    max-width: 520px;
    max-height: 88vh;
}

.cast-create-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
}

.cast-create-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 4px 0 6px;
}

.cast-create-image-slot {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cast-create-thumb {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--glass-base);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-sm, 8px);
}

.cast-create-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cast-create-thumb-empty {
    padding: 4px;
    font-size: 0.65rem;
    text-align: center;
    color: var(--text-dim, #555);
}

.cast-create-hint {
    font-size: 0.65rem;
    line-height: 1.4;
    color: var(--text-dim, #555);
}

@media (max-width: 640px) {
    .cast-create-images {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Source chips (Phase I2) — KB documents a text reply drew from ──────────── */
.source-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.source-chip-label {
    color: var(--text-secondary);
    font-weight: 650;
    white-space: nowrap;
}

.source-chip-label--secondary {
    margin-left: 4px;
    opacity: 0.72;
}

.source-chip {
    display: inline-flex;
    align-items: center;
    max-width: min(240px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: inherit;
    line-height: inherit;
    padding: 1px 2px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.source-chip--secondary {
    opacity: 0.72;
}

.source-chip:hover {
    background: var(--glass-base);
    color: var(--text-main);
}

/* ── Asset Tray (Phase X1) — the bin of Bin+Board, docked under the storyboard ── */
.asset-tray {
    flex-shrink: 0;
    border-top: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    /* Clamp intrinsic width so a long tile row scrolls inside the strip
       instead of inflating the tray/main-content (see .main-content note). */
    min-width: 0;
    max-width: 100%;
}

#gallery-view-wrapper { min-width: 0; }

.asset-tray[hidden] { display: none; }

.asset-tray-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
}

.asset-tray-collapse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 4px 6px;
    border-radius: var(--radius-sm, 8px);
}
.asset-tray-collapse:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.05); }
.asset-tray-collapse svg { transition: transform 0.18s ease; }
.asset-tray--collapsed .asset-tray-collapse svg { transform: rotate(-90deg); }
.asset-tray-title { font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }

.asset-tray-filters { display: inline-flex; gap: 4px; }
.asset-tray-filter {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: var(--radius-pill, 28px);
    font-size: 0.72rem;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.asset-tray-filter:hover { color: var(--text-main); }
.asset-tray-filter.active {
    color: var(--accent-primary);
    border-color: var(--border-active, rgba(220, 38, 38, 0.5));
    background: rgba(220, 38, 38, 0.08);
}

.asset-tray-search {
    flex: 1;
    min-width: 80px;
    max-width: 260px;
    margin-left: auto;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-main);
    font-size: 0.75rem;
    padding: 4px 10px;
    outline: none;
}
.asset-tray-search:focus { border-color: var(--accent-primary); }

.asset-tray-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    min-width: 24px;
    text-align: right;
}

.asset-tray-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 14px 12px;
    min-height: 0;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--text-dim) transparent;
}
.asset-tray-strip::-webkit-scrollbar { height: 8px; }
.asset-tray-strip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 4px;
}
.asset-tray--collapsed .asset-tray-strip-wrap { display: none; }

/* X4: positioning context for the ◀ ▶ scroll-discovery overlays. */
.asset-tray-strip-wrap {
    position: relative;
    min-width: 0;
}
.asset-tray-scroll {
    position: absolute;
    top: 0;
    bottom: 10px;
    width: 34px;
    z-index: 4;
    border: none;
    color: var(--text-main);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.asset-tray-scroll:hover { opacity: 1; }
.asset-tray-scroll--left {
    left: 0;
    background: linear-gradient(to right, rgba(10, 10, 14, 0.92), transparent);
    justify-content: flex-start;
    padding-left: 8px;
}
.asset-tray-scroll--right {
    right: 0;
    background: linear-gradient(to left, rgba(10, 10, 14, 0.92), transparent);
    justify-content: flex-end;
    padding-right: 8px;
}

.asset-tray-tile {
    position: relative;
    flex: 0 0 auto;
    width: 124px;
    height: 92px;
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: #111;
    cursor: grab;
    transition: border-color 0.15s, transform 0.15s;
}
.asset-tray-tile:hover { border-color: var(--accent-primary); transform: translateY(-2px); }
.asset-tray-tile.is-dragging { opacity: 0.45; cursor: grabbing; }
.asset-tray-tile.is-approved { border-color: var(--status-green, #34d399); }
.asset-tray-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.asset-tray-badge {
    position: absolute;
    bottom: 4px;
    font-size: 0.62rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
}
.asset-tray-badge--approved { left: 4px; color: var(--status-green, #34d399); }
.asset-tray-badge--liked { left: 4px; bottom: 22px; }
.asset-tray-badge--tagged { right: 4px; }
/* X4: 👍-marked tiles get the same warm outline as gallery cards (is-liked).
   :not(.is-approved) — the approved green stays the stronger signal. */
.asset-tray-tile.is-liked:not(.is-approved) { border-color: rgba(251, 146, 60, 0.65); }

.asset-tray-empty {
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 18px 6px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .asset-tray-bar { flex-wrap: wrap; row-gap: 6px; }
    .asset-tray-search { max-width: 100%; flex-basis: 100%; order: 10; margin-left: 0; }
    .asset-tray-tile { width: 104px; height: 78px; }
}

/* ── Decision Memory (Phase I1) ─────────────────────────────────────────────── */

/* Chat confirm chip — appears under a text reply when the exchange contained
   a durable decision. Transient: never persisted into chat history. */
.decision-chip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 12px;
    max-width: 640px;
    background: var(--glass-base);
    border: 1px solid var(--border-active, rgba(220, 38, 38, 0.5));
    border-radius: var(--radius-md, 12px);
    animation: fadeIn 0.3s ease-out;
}
.decision-chip--saved { border-color: var(--status-green, #34d399); }
.decision-chip-icon { font-size: 0.95rem; line-height: 1.4; }
.decision-chip-body { flex: 1; min-width: 0; }
.decision-chip-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}
.decision-chip-scope {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-dim);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
}
.decision-chip-text {
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.5;
    word-break: break-word;
}
.decision-chip-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-main);
    font-size: 0.85rem;
    padding: 5px 9px;
    outline: none;
}
.decision-chip-actions { display: flex; gap: 6px; flex-shrink: 0; }
.decision-chip-btn {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.74rem;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.decision-chip-btn:hover { color: var(--text-main); border-color: var(--accent-primary); }
.decision-chip-btn--save {
    color: var(--accent-primary);
    border-color: var(--border-active, rgba(220, 38, 38, 0.5));
}
.decision-chip-btn--dismiss:hover { border-color: var(--glass-border); color: var(--text-dim); }

/* World hub — Decisions panel (the hint style is shared by the Brand License card) */
.world-decisions-hint,
.world-card-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 12px;
}
.decision-list-empty {
    color: var(--text-dim);
    font-size: 0.8rem;
    padding: 14px 4px;
    line-height: 1.6;
}
.decision-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm, 8px);
    background: var(--glass-base);
    margin-bottom: 8px;
}
.decision-row.is-pinned { border-color: var(--border-active, rgba(220, 38, 38, 0.5)); }
.decision-row-pin {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0.35;
    transition: opacity 0.15s, transform 0.15s;
}
.decision-row-pin:hover { opacity: 0.8; }
.decision-row.is-pinned .decision-row-pin { opacity: 1; }
.decision-row-body { flex: 1; min-width: 0; }
.decision-row-text {
    font-size: 0.84rem;
    color: var(--text-main);
    line-height: 1.5;
    word-break: break-word;
}
.decision-row-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-main);
    font-size: 0.84rem;
    padding: 4px 8px;
    outline: none;
}
.decision-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}
.decision-row-scope {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--text-dim);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    padding: 1px 5px;
}
.decision-row-date {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-dim);
}
.decision-row-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.decision-row:hover .decision-row-actions,
.decision-row:focus-within .decision-row-actions { opacity: 1; }
.decision-row-btn {
    background: none;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: 6px;
    width: 24px;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    font-size: 0.78rem;
}
.decision-row-btn:hover { color: var(--text-main); border-color: var(--accent-primary); }
.decision-row-btn--danger:hover { color: var(--status-red, #f87171); border-color: var(--status-red, #f87171); }

/* ── Chat action bar (Phase X3 / CAB) ───────────────────────────────────────── */

/* Thin divider between the 評価 group (👍👎 = teach the AI) and the primary
   action (Save / Use in scene) — two roles, visibly separated. */
.fa-group-sep {
    width: 1px;
    height: 14px;
    background: var(--glass-border);
    align-self: center;
    margin: 0 4px;
    flex-shrink: 0;
}

/* One-click follow-up inside a toast (e.g. Approve right after Save). */
.toast-action {
    margin-left: 10px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-active, rgba(220, 38, 38, 0.5));
    color: var(--accent-primary);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.74rem;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.toast-action:hover {
    background: rgba(220, 38, 38, 0.12);
    color: var(--text-main);
}

/* Scene menu footer link — the spare-take escape hatch under adopt mode. */
.scene-tag-menu__alt {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid var(--glass-border);
    color: var(--text-dim);
    font-size: 0.72rem;
    padding: 7px 10px 5px;
    cursor: pointer;
}
.scene-tag-menu__alt:hover { color: var(--text-main); }

/* ════════════════════════════════════════════════════════════════════════════
   Skill Cards — composer pills, picker, library cards, New Skill modal
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Composer pill bar (inside .input-wrapper, above the textarea) ── */
.skill-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    /* Align with the textarea content column (.input-row has padding-left:20px)
       and give the rounded top edge breathing room so pills don't jam the corner. */
    padding: 12px 20px 4px 20px;
}
.skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 9px;
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--text-main);
    max-width: 230px;
}
.skill-pill-chip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.skill-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-pill-x {
    background: none; border: none; color: var(--text-dim); cursor: pointer;
    font-size: 0.68rem; padding: 0 2px; line-height: 1;
}
.skill-pill-x:hover { color: var(--accent-secondary); }
.skill-pill-budget {
    font-size: 0.72rem; color: #f5a623; padding: 3px 9px;
    border: 1px solid rgba(245, 166, 35, 0.3); border-radius: 999px;
    background: rgba(245, 166, 35, 0.08);
}
.skill-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.skill-trigger-btn svg { flex-shrink: 0; }
.skill-trigger-btn[aria-expanded="true"] {
    background: var(--accent-glow);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* ── Applied-skill chips (image result confirmation) ── */
.skill-applied-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.skill-applied-label { font-size: 0.72rem; color: var(--text-muted); }
.skill-applied-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--accent-primary);
    background: var(--accent-glow);
    border: 1px solid var(--accent-primary);
    cursor: help;
}
.skill-applied-chip--skipped {
    color: #f5a623;
    background: rgba(245, 166, 35, 0.08);
    border-color: rgba(245, 166, 35, 0.35);
}

/* ── Skill picker popover (anchored above the ✨ Skill button) ── */
.skill-picker-overlay { position: fixed; inset: 0; z-index: 1400; }
.skill-picker {
    position: fixed;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: 440px;
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 26, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.skill-picker-search {
    margin: 10px; padding: 8px 12px;
    background: var(--bg-elevated); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-main);
    font-family: var(--font-sans); font-size: 0.85rem; outline: none;
}
.skill-picker-search:focus { border-color: var(--accent-primary); }
.skill-picker-body { overflow-y: auto; padding: 0 6px 6px; }
.skill-picker-grouplabel {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-dim); padding: 8px 8px 4px;
}
.skill-picker-empty {
    color: var(--text-muted); font-size: 0.82rem; padding: 18px 12px; text-align: center; line-height: 1.5;
}
.skill-pick-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer;
}
.skill-pick-row:hover { background: var(--bg-elevated); }
.skill-pick-row.is-pinned { background: var(--accent-glow); }
.skill-cat-chip {
    width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; color: #fff;
}
.skill-pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.skill-pick-name {
    font-size: 0.84rem; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skill-pick-src {
    font-size: 0.6rem; color: var(--text-dim); border: 1px solid var(--glass-border);
    border-radius: 4px; padding: 0 4px; margin-left: 4px; text-transform: uppercase;
}
.skill-pick-sum {
    font-size: 0.74rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skill-pick-toggle { color: var(--text-dim); font-size: 0.95rem; flex-shrink: 0; width: 16px; text-align: center; }
.skill-pick-row.is-pinned .skill-pick-toggle { color: var(--accent-primary); }
.skill-picker-foot { border-top: 1px solid var(--glass-border); padding: 8px; }
.skill-picker-new {
    width: 100%; padding: 7px; background: var(--bg-elevated);
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    color: var(--text-main); cursor: pointer; font-size: 0.8rem;
}
.skill-picker-new:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

/* ── Skills page: My Skills card grid ── */
.skills-subhead {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-dim); margin: 6px 0 12px; font-weight: 600;
}
.skills-card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.skill-card {
    background: var(--bg-surface); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 14px 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.skill-card-head { display: flex; align-items: center; gap: 10px; }
.skill-card-titles { min-width: 0; }
.skill-card-name {
    font-weight: 600; font-size: 0.92rem; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.skill-card-cat { font-size: 0.74rem; color: var(--text-muted); margin-top: 1px; }
.skill-card-sum {
    font-size: 0.8rem; color: var(--text-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.skill-card-actions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.skill-card-btn {
    font-size: 0.74rem; padding: 5px 10px; border-radius: var(--radius-sm);
    background: var(--bg-elevated); border: 1px solid var(--glass-border);
    color: var(--text-muted); cursor: pointer;
}
.skill-card-btn:hover { color: var(--text-main); }
.skill-card-btn.primary { color: var(--accent-primary); border-color: var(--accent-glow); }
.skill-card-btn.is-pinned { color: var(--accent-secondary); border-color: var(--accent-secondary); }
.skill-card-btn.danger:hover { color: #f87171; border-color: rgba(248, 113, 113, 0.4); }

/* ── New / Edit Skill modal ── */
.skill-modal { width: 460px; max-width: calc(100vw - 32px); height: auto; }
.skill-modal-form { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.skill-modal-title { font-size: 1.05rem; font-weight: 600; color: var(--text-main); }
.skill-modal-row { display: flex; flex-direction: column; gap: 5px; }
.skill-modal-row label { font-size: 0.78rem; color: var(--text-muted); }
.skill-modal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skill-modal-cols > div { display: flex; flex-direction: column; gap: 5px; }
.skill-modal-hint { color: var(--text-dim); font-weight: 400; font-size: 0.7rem; }
.skill-modal-body {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.8rem; resize: vertical; min-height: 120px; line-height: 1.5;
}
.skill-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.skill-modal-cancel {
    padding: 8px 16px; border-radius: 6px; background: var(--bg-elevated);
    border: 1px solid var(--glass-border); color: var(--text-muted); cursor: pointer; font-size: 0.82rem;
}
.skill-modal-save { padding: 8px 18px; font-size: 0.82rem; }

/* ════════════════════════════════════════════════════════════════════════════
   Cast @mentions — picker popover (Phase P4)
   Visual language deliberately matches .skill-pick-row above. Resolved refs
   render inline in the composer text (.composer-mention), not as chips.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Mention picker popover (fixed anchor above the textarea, left-aligned;
     NOT a modal overlay — the textarea must stay focused/interactive) ── */
.mention-picker {
    position: fixed;
    width: 260px;
    max-width: calc(100vw - 24px);
    max-height: 280px;
    overflow-y: auto;
    background: rgba(20, 20, 26, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    padding: 6px;
    z-index: 1400;
}
.mention-picker-empty {
    color: var(--text-muted); font-size: 0.82rem; padding: 14px 10px; text-align: center; line-height: 1.5;
}
.mention-pick-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer;
}
.mention-pick-row.is-active { background: var(--accent-glow); }
.mention-pick-thumb {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover;
}
.mention-pick-thumb--empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-glow); color: var(--accent-primary);
    font-size: 0.7rem; font-weight: 700;
}
.mention-pick-name {
    font-size: 0.84rem; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- ICON SYSTEM (icons.js) --- */
/* Inline SVG icons replacing emoji in buttons/chips — one visual language with
   the sidebar nav. Icons inherit the control's `color`, so hover/active tints
   come for free; `pointer-events:none` keeps event.target on the button. */
.ico {
    display: inline-block;
    vertical-align: -0.18em;
    flex: none;
    pointer-events: none;
}
.ico-fill { fill: currentColor; }
/* Icon+label spacing rides the literal space in the template string
   (`${icon('x')} Label`) — no CSS margin, so icon-only buttons stay centered. */


/* --- FILE DROP ZONES (dropzone.js) --- */
/* Every "add image" surface accepts drag-and-drop through bindFileDropZone().
   The overlay is absolutely positioned inside the zone's host (which gets
   .drop-zone-host only when it had no positioning of its own) and ignores
   pointer events so the drop still lands on the zone underneath. */
.drop-zone-host { position: relative; }
.drop-zone-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 60;
    background: rgba(8, 8, 8, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-lg);
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.drop-zone-overlay.active {
    display: flex;
    animation: fadeIn 0.15s ease-out;
}
.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}
.drop-zone-content .ico { color: var(--accent-primary); }
/* Compact zones (thumb slots, single file fields): outline only, no overlay. */
.drop-zone--compact.is-drop-hover {
    outline: 2px dashed var(--accent-primary);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}


/* --- VIDEO (V1-E, video.js) --- */
/* The three "Animate" entrances follow ONE body class that setVideoAvailable()
   toggles from /api/status (plan §3a). With video off the chat action bar is
   exactly as before (Use in scene); with it on, Animate takes the same slot. */
.feedback-btn--animate { display: none; }
body.video-available .feedback-btn--snapshot { display: none; }
body.video-available .feedback-btn--animate { display: inline-block; }
.feedback-btn--animate:hover { color: var(--accent-secondary); border-color: var(--border-active); }
#lightbox-animate { display: none; }
body.video-available #lightbox-animate { display: flex; }
/* Video V3b (§9.9): the Assets selection bar's "Animate with references"
   follows its own body class (video on AND the reference mode enabled). */
.gsb-btn--animate-refs { display: none; }
body.video-references-available .gsb-btn--animate-refs { display: inline-block; }

/* The Video panel: the glass modal (.modal-overlay + .modal) with a modifier.
   Above the app chrome like the cast-sheet modal; toasts (9800) stay above it. */
.modal-overlay.video-panel-overlay {
    display: flex;
    z-index: 9300;
    padding: 16px;
}
.modal.video-panel {
    width: min(720px, 92vw);
    max-height: 86vh;
}
.video-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.video-panel-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}
.video-panel-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.video-panel-close:hover { color: var(--text-main); border-color: var(--border-active); }
.video-panel-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 24px 24px;
    overflow-y: auto;
    min-height: 0;
}

/* Form: 96px first frame + the motion prompt; the Draft button is the only
   accent in it. */
.video-form {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.video-form[hidden] { display: none; }
.video-form-thumb {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-strong);
}
.video-form-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.video-form-prompt {
    min-height: 72px;
    resize: vertical;
    font-family: var(--font-sans);
}
.video-form-hint {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
}
/* Video V2: the Draft's length — the shared `.form-input` field at its content
   width, labelled like `.form-label` — and its budget line under it (mono,
   muted, like the card's cost line). */
.video-form-length {
    display: flex;
    align-items: center;
    gap: 8px;
}
.video-form-length-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.video-form-duration,
.video-form-ratio {
    width: auto;
    min-width: 88px;
    padding: 6px 10px;
    cursor: pointer;
}
/* The open list is OS-rendered: keep it dark and readable (as the scene
   location select does). */
.video-form-duration option,
.video-form-ratio option {
    background: var(--bg-panel, #16161e);
    color: var(--text-main);
}
.video-form-cost {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.video-form-cost[hidden] { display: none; }
/* Video V3a: the length and the Audio checkbox share one row; on a narrow
   form the checkbox wraps under the length (no horizontal scroll). */
.video-form-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    min-width: 0;
}
/* The Audio checkbox, labelled like the length (`.video-form-length-label`);
   the whole label is the target, and the label brightens while it is on. The
   native box takes the theme's accent and a dark scheme (no white square on
   the glass) in both themes. */
.video-form-audio-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.video-form-audio-label:has(.video-form-audio:checked) { color: var(--text-main); }
.video-form-audio {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent-primary);
    color-scheme: dark;
    cursor: inherit;
}
.video-form-audio-hint[hidden] { display: none; }
.video-form-message {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.video-form-row {
    display: flex;
    justify-content: flex-end;
}
.video-form-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}
/* Video V3b (§9.9): a Draft from references. The strip takes the place of
   the 96px first-frame column and spans the form's grid, the fields under it
   take the full width (a start-frame form has neither, so its grid is
   unchanged). The `.asset-tray-strip` form: a horizontal scroll of 64px
   tiles, the position top-left, × removes, ◀ ▶ reorder. */
.video-ref-strip-wrap {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.video-ref-strip-wrap ~ .video-form-fields { grid-column: 1 / -1; }
.video-ref-strip {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--text-dim) transparent;
}
.video-ref-tile {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 64px;
}
.video-ref-frame,
.video-card-ref {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--glass-strong);
}
/* The one accent: the frame of the tile whose controls have the keyboard
   (the tile being moved). A refused tile is framed in the error colour. */
.video-ref-tile:focus-within .video-ref-frame { border-color: var(--accent-primary); }
.video-ref-tile.is-refused .video-ref-frame { border-color: var(--status-red); }
.video-ref-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-ref-thumb[hidden] { display: none; }
.video-ref-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 4px;
    border-radius: var(--radius-sm);
    background: var(--bg-void);
    border: 1px solid var(--glass-border);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1;
    text-align: center;
    color: var(--text-main);
    pointer-events: none;
}
.video-ref-move {
    display: flex;
    gap: 8px;
}
.video-ref-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    padding: 0;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.video-ref-btn:hover:not(:disabled) { color: var(--text-main); border-color: var(--text-dim); }
.video-ref-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.video-ref-btn.video-ref-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-void);
}
/* The card of a Draft from references: its references, small and quiet. */
.video-card-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.video-card-ref {
    width: 48px;
    height: 48px;
}

/* "Your videos": newest first; ONE box per Draft (`.video-group`). Its Final
   is a section of the same box, on the same left edge, under a rule — not a
   second, offset box (owner feedback 2026-10-05: the 24px offset read as a
   misalignment). */
.video-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.video-list-head {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.video-list-state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.video-list-state:empty { display: none; }
.video-empty { margin: 0; line-height: 1.4; }
.video-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-main);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.video-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.video-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.video-card-slot { min-width: 0; }
.video-card-slot--final { border-top: 1px solid var(--glass-border); }
.video-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    min-width: 0;
}
.video-card--not-used { opacity: 0.6; }
.video-card-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-main);
    overflow-wrap: anywhere;
}
.video-card-timer {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
/* A server sentence in the status slot (B4, B22, a failure) is body text,
   not a stage label: Outfit, like every other sentence. */
.video-card-status.video-tone-warning,
.video-card-status.video-tone-error { font-family: var(--font-sans); }
.video-card-flag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.video-card-prompt {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.video-card-notice,
.video-card-note {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.video-card-cost {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.video-card-player {
    display: block;
    width: 100%;
    max-height: 360px;
    border-radius: var(--radius-sm);
    background: var(--bg-void);
}
.video-card .image-unavailable {
    margin-top: 0;
    min-height: 0;
}
.video-tone-muted { color: var(--text-muted); }
.video-tone-warning { color: var(--status-yellow); }
.video-tone-error { color: var(--status-red); }
.video-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.video-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.video-action-btn:hover:not(:disabled) { color: var(--text-main); border-color: var(--border-active); }
.video-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.video-card .gen-stop-btn { margin-top: 0; }
.video-card-actions .btn-primary {
    padding: 8px 16px;
    font-size: 0.78rem;
    line-height: 1;
}
/* The download of a video the panel cannot play (the HEVC Final in a browser
   without HEVC): the one way to see the result, so it is the primary action. */
.video-card-actions a.btn-primary {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}
.video-confirm {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--glass-strong);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-sm);
}
.video-confirm-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
}
.video-confirm-body {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
}
@media (prefers-reduced-motion: no-preference) {
    .video-card-slot.is-new { animation: fadeIn 0.3s ease-out; }
}
@media (max-width: 520px) {
    .modal-overlay.video-panel-overlay { padding: 8px; }
    .modal.video-panel { width: 100%; max-height: 92vh; }
    .video-panel-head { padding: 16px; }
    .video-panel-body { padding: 16px; gap: 16px; }
    .video-form { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ CREDITS (M1-E) ═══════════════════════════════════════════════════════
   The header balance, the wallet panel, the Composer estimate, the refusal
   dialog and the charge line under a result (wallet.js / credits.js,
   docs/M1_Credits_Design_2026-10-04.md §7.2, D-12). Glass surfaces and the
   monochrome + one-accent rule: amounts in IBM Plex Mono, labels in Outfit,
   the accent only on hover / focus and on the dialog's primary button. Every
   element stays hidden (the `hidden` attribute) until a charging period is
   open or the wallet has a history. */

/* Header balance — a quiet pill beside the project cluster. */
.credits-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.credits-chip[hidden] { display: none; }
.credits-chip:hover,
.credits-chip:focus-visible {
    border-color: var(--border-active);
    box-shadow: 0 0 12px var(--accent-glow);
    outline: none;
}
.credits-chip-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.credits-chip-value {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
.credits-chip.is-neutral .credits-chip-value { color: var(--text-muted); }
.credits-chip.is-frozen { border-color: rgba(251, 191, 36, 0.35); }
.credits-chip.is-frozen .credits-chip-value { color: var(--status-yellow); }
.credits-chip--compact { padding: 4px 8px; }
.credits-chip--compact .credits-chip-value { font-size: 0.72rem; }

.mobile-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Composer estimate — a small chip inside the model button, after the model
   name ("20 cr"), image mode only; the full sentence is its tooltip. It never
   shrinks — the model name truncates first. */
.credit-estimate {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 2px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.02em;
    color: var(--text-dim);
    white-space: nowrap;
}
.credit-estimate[hidden] { display: none; }
.credit-estimate.is-warn { color: var(--status-yellow); }

/* The wallet panel and the refusal dialog: the glass modal with a modifier,
   above the app chrome like the video panel (toasts stay above both). */
.modal-overlay.credits-overlay {
    display: flex;
    z-index: 9300;
    padding: 16px;
}
.modal-overlay.credits-dialog-overlay { z-index: 9350; }
.modal.credits-panel {
    width: min(520px, 100%);
    max-height: 86vh;
}
.modal.credits-panel:focus { outline: none; }
.credits-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.credits-panel-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}
.credits-panel-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.credits-panel-close:hover { color: var(--text-main); border-color: var(--border-active); }
.credits-panel-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 24px 24px;
    overflow-y: auto;
    min-height: 0;
}

/* The summary card: the one big number, then on hold / balance, then the limit. */
.credits-summary {
    padding: 16px 20px;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.credits-summary-label,
.credits-section-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.credits-summary-value {
    margin: 4px 0 12px;
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.credits-summary-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
}
.credits-summary-facts > div { display: flex; align-items: baseline; gap: 8px; }
.credits-summary-facts dt {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--text-muted);
}
.credits-summary-facts dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}
.credits-summary-limit {
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-dim);
}
.credits-note {
    margin: -12px 0 0;
    padding: 8px 12px;
    border-left: 2px solid var(--border-subtle);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.credits-note--warn { border-left-color: var(--status-yellow); color: var(--status-yellow); }

.credits-section-title { margin-bottom: 4px; }
.credits-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.credits-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.credits-row:last-child { border-bottom: 0; }
.credits-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.credits-row-title {
    font-size: 0.88rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.credits-row-detail {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
    overflow-wrap: anywhere;   /* wraps: the age at its end must stay readable */
}
.credits-row.is-stale .credits-row-detail { color: var(--status-yellow); }
.credits-age { white-space: nowrap; }
.credits-row-amount {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-main);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.credits-row--credit .credits-row-amount { color: var(--status-green); }
.credits-row-amount--text { font-size: 0.8rem; color: var(--text-muted); }
.credits-empty,
.credits-footnote {
    margin: 4px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-dim);
}
.credits-more-btn,
.credits-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.credits-more-btn { align-self: flex-start; margin-top: 8px; }
.credits-more-btn:hover,
.credits-btn:hover { color: var(--text-main); border-color: var(--border-active); }

/* The refusal dialog: one sentence, two actions. */
.modal.credits-dialog {
    width: min(400px, 100%);
    padding: 24px;
    gap: 12px;
}
.credits-dialog-title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}
.credits-dialog-message {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.credits-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* The video Final confirm's estimate and hold (§7.2): the figure the user is
   agreeing to, so it reads in the main text color. */
.video-confirm-cost {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

/* The charge line under a result (§7.2 "Charged 14.64 credits"). */
.credits-charge[hidden] { display: none; }
.credits-charge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--text-dim);
}
.credits-link-btn {
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.credits-link-btn:hover { color: var(--text-main); }

/* M2-D — "Buy credits": the packs, the continue/back actions and the status line. */
.credits-purchase { display: flex; flex-direction: column; gap: 12px; }
.credits-buy-btn { align-self: flex-start; }
.credits-buy-btn:disabled,
.credits-purchase .btn-primary:disabled,
.credits-purchase .credits-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.credits-packs { display: flex; flex-direction: column; gap: 8px; }
.credits-pack {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: 44px;
    background: var(--glass-base);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.15s;
}
.credits-pack:hover,
.credits-pack:has(input:checked) { border-color: var(--border-active); }
.credits-pack:has(input:focus-visible) { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.credits-pack input { accent-color: var(--accent-primary); margin: 0; flex: none; }
.credits-pack-label {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.credits-pack-name { margin-left: auto; font-size: 0.78rem; color: var(--text-muted); text-align: right; }
.credits-purchase-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.credits-purchase-msg {
    margin: 0;
    padding: 8px 12px;
    border-left: 2px solid var(--border-subtle);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.credits-purchase-msg.is-warn { border-left-color: var(--status-yellow); color: var(--status-yellow); }

@media (max-width: 520px) {
    .credits-panel-head { padding: 12px 16px; }
    .credits-panel-body { padding: 16px; gap: 20px; }
    .credits-summary { padding: 16px; }
    .credits-summary-value { font-size: 1.6rem; }
    .modal.credits-dialog { padding: 20px; }
}