/* Jio Srijan — studio-layout v2.
 *
 * Three zones in the main area (sidebar + conversation + gallery), with a
 * header that hosts the brand logo, gallery-type toggle, and login pill.
 *
 * Design language:
 *   - Generous corner radii on cards (10-14px) for that "studio" feel
 *   - Conversation is utility (45% of remaining width)
 *   - Gallery is the hero (55%), with a featured render up top + grid below
 *   - Final prompt is an inline card in the chat, NOT a separate column
 *   - Adaptations are pill buttons — click and the crop downloads
 */

:root {
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", "Monaco", "Cascadia Code", "Roboto Mono", monospace;
}

/* Studio Noir — dark (default) */
:root,
[data-theme="dark"] {
    --bg: #0b0d12;
    --bg-elevated: #14171f;
    --bg-elevated-2: #1c1f29;
    --bg-card: #1a1d24;
    --bg-card-accent: rgba(139, 124, 246, 0.06);

    --bg-assistant-bubble: #1a1d24;

    --border: #232733;
    --border-strong: #3a4150;
    --border-soft: rgba(255, 255, 255, 0.04);
    --hover-subtle: rgba(255, 255, 255, 0.03);

    --text: #e8eaf0;
    --text-muted: #8d94a3;
    --text-dim: #5f6573;

    --accent: #6c5ce7;
    --accent-hover: #8a7afa;
    --accent-fg: #ffffff;

    --jio-blue: #000093;
    --bg-user-bubble: #2d2950;
    --text-user-bubble: #f0f2f6;

    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;

    --color-text-primary: var(--text);
    --color-text-secondary: var(--text-muted);
    --color-text-tertiary: var(--text-dim);
    --color-border-primary: var(--border-strong);
    --color-border-secondary: var(--border);
    --color-border-tertiary: var(--border-soft);
    --color-background-secondary: var(--bg-elevated-2);
}

/* Studio Paper — light */
[data-theme="light"] {
    --bg: #f4f5f7;
    --bg-elevated: #ffffff;
    --bg-elevated-2: #f0f2f5;
    --bg-card: #ffffff;
    --bg-card-accent: rgba(0, 0, 147, 0.06);

    --bg-assistant-bubble: #f4f5f7;
    --bg-user-bubble: var(--jio-blue);
    --text-user-bubble: #ffffff;

    --border: #e2e5eb;
    --border-strong: #c8cdd6;
    --border-soft: rgba(0, 0, 0, 0.04);
    --hover-subtle: rgba(0, 0, 0, 0.04);

    --text: #1a1d26;
    --text-muted: #6b7280;
    --text-dim: #9ca3af;

    --accent: #000093;
    --accent-hover: #1a1aad;
    --accent-fg: #ffffff;

    --jio-blue: #000093;

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;

    --color-text-primary: var(--text);
    --color-text-secondary: var(--text-muted);
    --color-text-tertiary: var(--text-dim);
    --color-border-primary: var(--border-strong);
    --color-border-secondary: var(--border);
    --color-border-tertiary: var(--border-soft);
    --color-background-secondary: var(--bg-elevated-2);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    height: 100vh;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
}

/* ─── Header ────────────────────────────────────────────────────────── */

.app-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 18px;
    min-height: 38px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding-right: 14px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.brand-studio {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    flex-shrink: 0;
}

.brand-logo {
    height: 28px;
    width: auto;
    display: block;
}

/* Light mode: Jio icon + Srijan wordmark PNG (full SVG wordmark is white) */
.brand-logo--light {
    display: none;
    align-items: center;
    gap: 8px;
}

.brand-jio-icon {
    height: 28px;
    width: 28px;
    display: block;
    flex-shrink: 0;
}

.brand-srijan-wordmark {
    height: 22px;
    width: auto;
    display: block;
}

[data-theme="light"] .brand-logo--full {
    display: none;
}

[data-theme="light"] .brand-logo--light {
    display: flex;
}

/* Gallery tabs — D5 dot-indicator, left-aligned beside brand */
.gallery-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.gallery-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    transition: color 0.15s ease;
}

.gallery-tab:hover:not(.disabled) {
    color: var(--text);
}

.gallery-tab.active {
    color: var(--text);
}

.gallery-tab.active::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent);
    flex-shrink: 0;
}

.gallery-tab.disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* Header right (T6b theme + status + login) */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.workspace-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    border: 1px solid rgba(129, 140, 248, 0.35);
    white-space: nowrap;
}

[data-theme="light"] .workspace-badge {
    background: rgba(79, 70, 229, 0.1);
    color: #4338ca;
    border-color: rgba(79, 70, 229, 0.25);
}

.workspace-badge.hidden {
    display: none;
}

/* T6b — moon/sun flanking colored knob */
.theme-t6 {
    display: flex;
    align-items: center;
    gap: 7px;
}

.theme-t6-flank {
    font-size: 13px;
    line-height: 1;
    opacity: 0.28;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
    user-select: none;
}

.theme-t6-flank.on {
    opacity: 1;
}

.theme-t6-flank.moon.on {
    color: #a8b4ff;
    transform: scale(1.08);
}

.theme-t6-flank.sun.on {
    color: #fbbf24;
    transform: scale(1.08);
}

[data-theme="light"] .theme-t6-flank.moon.on {
    color: #5b6af0;
}

.theme-t6-track {
    position: relative;
    width: 50px;
    height: 28px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated-2) 85%, #1e2340);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.theme-t6-track::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(91, 106, 240, 0.14), transparent 55%);
    pointer-events: none;
}

.theme-t6-track.is-light {
    background: rgba(255, 248, 235, 0.85);
    border-color: rgba(245, 158, 11, 0.2);
}

.theme-t6-track.is-light::before {
    background: linear-gradient(90deg, transparent 42%, rgba(245, 158, 11, 0.16));
}

.theme-t6-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(145deg, #4f5fd4, #6b7aff);
    box-shadow: 0 2px 8px rgba(91, 106, 240, 0.45);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.25s ease,
                box-shadow 0.25s ease;
    pointer-events: none;
}

.theme-t6-track.is-light .theme-t6-knob {
    transform: translateX(22px);
    background: linear-gradient(145deg, #d97706, #fbbf24);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.api-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-dim);
}

.api-status[data-state="ok"] {
    color: var(--success);
}

.api-status[data-state="ok"]::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.api-status[data-state="missing"] {
    color: var(--danger);
}

.api-status[data-state="missing"]::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.error-banner {
    color: var(--danger);
    font-size: 11.5px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-banner.hidden {
    display: none;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    opacity: 0.55;
}

.user-pill:disabled {
    cursor: not-allowed;
}

.user-pill--signed-in {
    opacity: 1;
    cursor: default;
}

.user-pill--signed-in .user-pill-label {
    color: var(--text);
}

.user-pill-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--text-dim);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.user-pill-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* ─── Three-column grid ──────────────────────────────────────────── */

.srijan-grid {
    flex: 1;
    display: grid;
    grid-template-columns:
        240px                  /* sidebar */
        minmax(0, 1fr)         /* chat ~ 40% */
        minmax(0, 1.4fr);      /* gallery ~ 60% */
    overflow: hidden;
    min-height: 0;
}

.col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--border);
}

.col:last-child { border-right: none; }

.col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.col-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Stack on narrow screens */
@media (max-width: 1100px) {
    .srijan-grid {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1fr);
        overflow-y: auto;
    }
    .col {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .col:last-child { border-bottom: none; }
}

/* ─── Sidebar ─────────────────────────────────────────────────────── */

.col-sessions {
    background: var(--bg-elevated);
}

.sidebar-top {
    padding: 12px;
    flex-shrink: 0;
}

.new-creative-btn {
    width: 100%;
    background: var(--accent);
    color: var(--accent-fg);
    border: none;
    border-radius: var(--radius);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.new-creative-btn:hover {
    background: var(--accent-hover);
}

.new-creative-plus {
    font-size: 16px;
    line-height: 1;
}

.sidebar-section-label {
    padding: 4px 16px;
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.sessions-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
}

.session-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    border-radius: var(--radius);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    position: relative;
}

.session-item:hover {
    background: var(--bg-elevated-2);
}

.session-item.active {
    background: rgba(108, 92, 231, 0.14);
    border-color: rgba(108, 92, 231, 0.6);
}

.session-item-title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 18px;
}

.session-item-meta {
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    display: flex;
    gap: 8px;
}

.session-item-delete {
    position: absolute;
    top: 7px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 5px;
    font-size: 13px;
    line-height: 1;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s ease;
}

.session-item:hover .session-item-delete { opacity: 1; }
.session-item-delete:hover {
    color: var(--danger);
    background: rgba(248, 113, 113, 0.1);
}

.sessions-empty {
    display: none;
    padding: 24px 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 11.5px;
    font-style: italic;
}
.sessions-empty.show { display: block; }

/* ─── Conversation pane ──────────────────────────────────────────── */

.active-session-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-session-title:hover {
    background: var(--bg-elevated-2);
}

/* Chat */
.chat-stream {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.chat-welcome {
    text-align: center;
    color: var(--text-muted);
    margin: auto 0;
    padding: 0 12px;
}

.chat-welcome h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
}

.chat-welcome p {
    margin: 0 auto 8px auto;
    font-size: 13px;
    max-width: 340px;
}

.chat-welcome .subtle {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 16px;
}

.starter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 10px auto 0 auto;
}

.starter-chip {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    transition: all 0.15s ease;
}

.starter-chip:hover {
    background: var(--bg-elevated-2);
    color: var(--text);
    border-color: var(--accent);
}

.message {
    display: flex;
    max-width: 100%;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.message-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    max-width: 90%;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 13px;
    line-height: 1.55;
}

.message.user .message-bubble {
    background: var(--bg-user-bubble);
    color: var(--text-user-bubble);
    border-bottom-right-radius: 4px;
}

.message.assistant .message-bubble {
    background: var(--bg-assistant-bubble);
    color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

/* Typing indicator */
.typing-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
}

.typing-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.4;
    animation: typing-pulse 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-pulse {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.typing-indicator {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    font-family: var(--font-mono);
}

.typing-indicator.hidden { display: none; }

/* ─── Studio dock — flat editor ───────────────────────────────────── */

.studio-dock {
    flex-shrink: 0;
    margin: 0 12px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
}

.prompt-card.hidden { display: none; }

/* Top bar */
.dock-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.dock-bar-title {
    font-weight: 600;
    color: var(--text);
}

.dock-bar-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
}

.dock-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dock-bar .dock-word-count {
    flex-shrink: 0;
}

.prompt-version-stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
}

.prompt-version-stepper.hidden { display: none; }

.prompt-version-btn {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.prompt-version-btn:hover:not(:disabled) {
    background: var(--bg-elevated-2);
    color: var(--text);
}

.prompt-version-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.prompt-version-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    min-width: 42px;
    text-align: center;
    user-select: none;
}

.dock-word-count[data-state="good"] { color: var(--success); }
.dock-word-count[data-state="long"],
.dock-word-count[data-state="too-long"] { color: var(--warning); }
.dock-word-count[data-state="too-long"] { color: var(--danger); }

/* Prompt body — borderless on surface */
.final-prompt-text {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 112px;
    max-height: 260px;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.65;
    resize: vertical;
    overflow-y: auto;
}

.final-prompt-text:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.15);
}

.final-prompt-text::placeholder { color: var(--text-dim); }

/* LoRA drawer — hidden until Adjust */
.dock-style-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 4px;
    border-top: 0.5px solid var(--color-border-tertiary);
    flex-wrap: wrap;
}

.dock-style-label {
    font-size: 11px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.dock-preset-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
}

.lora-preset-pill {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    border: 0.5px solid var(--color-border-secondary);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}

.lora-preset-pill.active {
    background: rgba(108,71,255,0.12);
    border-color: #6C47FF;
    color: #6C47FF;
    font-weight: 500;
}

.dock-lora-toggle {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0.5px solid var(--color-border-secondary);
    border-radius: 6px;
    padding: 0 12px;
    height: 36px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.dock-lora-toggle::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    transition: background 0.12s;
}

.dock-lora-toggle::after {
    content: '▾';
    font-size: 9px;
    opacity: 0.7;
    transition: transform 0.15s;
}

.dock-lora-toggle:hover {
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
}

.dock-lora-toggle.active {
    background: rgba(108, 71, 255, 0.1);
    border-color: #6C47FF;
    color: #6C47FF;
}

.dock-lora-toggle.active::before { background: #6C47FF; }
.dock-lora-toggle.active::after { content: '▴'; }

.lora-sliders {
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ratio-panel {
    padding: 10px 14px 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dock-ratio-toggle::before {
    background: var(--accent);
}

.lora-slider-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 10px;
}

.lora-slider-row.lora-active .lora-slider-name { color: var(--text); }
.lora-slider-row.lora-active .lora-slider-value { color: var(--accent-hover); }

.lora-slider-row-header {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.lora-slider-name {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.lora-slider-value {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.lora-slider-input {
    grid-column: 1 / -1;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) var(--lora-pct, 0%),
        var(--bg-elevated-2) var(--lora-pct, 0%),
        var(--bg-elevated-2) 100%
    );
    outline: none;
    cursor: pointer;
}

.lora-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text);
    cursor: grab;
    border: 2px solid var(--accent);
}

.lora-slider-input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text);
    cursor: grab;
    border: 2px solid var(--accent);
}

.lora-slider-reset {
    grid-column: 3;
    grid-row: 1;
    font-size: 10px;
    color: var(--text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-family: inherit;
}

.lora-slider-reset:hover { color: var(--text); }

/* Footer: style + ratio + layout + render */
.dock-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    flex-wrap: nowrap;
}

.dock-foot-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.dock-foot .dock-ratio-picker {
    padding: 7px 26px 7px 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238d94a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.dock-foot .dock-ratio-picker:hover:not(:disabled) {
    border-color: var(--border-strong);
}

.dock-foot .dock-ratio-picker:focus {
    outline: none;
    border-color: var(--accent);
}

.dock-foot .dock-ratio-picker:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ratio-picker.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Midjourney-style ratio — portrait → landscape slider (expanded panel) */
.ratio-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

.ratio-preview-box {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ratio-preview-frame {
    border: 1.5px solid var(--accent);
    border-radius: 2px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    transition: width 0.12s ease, height 0.12s ease;
}

.ratio-widget-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ratio-cats {
    display: flex;
    gap: 2px;
}

.ratio-cat {
    flex: 1;
    padding: 2px 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.ratio-cat:hover {
    color: var(--text-muted);
}

.ratio-cat.on {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-weight: 600;
}

.ratio-slider-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ratio-slider {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    outline: none;
    cursor: pointer;
}

.ratio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text);
    border: 2px solid var(--accent);
    cursor: grab;
}

.ratio-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text);
    border: 2px solid var(--accent);
    cursor: grab;
}

.ratio-display {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    min-width: 2.5em;
    text-align: right;
}

/* Layout picker — same base styles as the ratio picker. We give it a
 * subtle accent so users can visually distinguish "which dimensions"
 * (ratio) from "where the copy goes" (layout) at a glance. */
.dock-foot .dock-layout-picker {
    max-width: 240px;
    color: var(--text-soft, var(--text));
}

.dock-foot .dock-layout-picker:hover:not(:disabled) {
    color: var(--text);
}

.dock-weights-line {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dock-weights-text:empty::before { content: "Style weights off"; }

.dock-adjust-btn {
    margin-left: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-hover);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}

.dock-adjust-btn:hover { text-decoration: underline; }

.lora-drawer[open] ~ .dock-foot .dock-adjust-btn {
    color: var(--text);
    font-weight: 600;
}

.dock-btn-copy {
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
}

.dock-btn-copy:hover:not(:disabled) { color: var(--text); }
.dock-btn-copy:disabled { opacity: 0.4; cursor: not-allowed; }

.dock-btn-render,
.send-btn {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dock-btn-render:hover:not(:disabled),
.send-btn:hover:not(:disabled) { background: var(--accent-hover); }

.dock-btn-render:disabled,
.send-btn:disabled {
    background: var(--bg-elevated-2);
    color: var(--text-dim);
    cursor: not-allowed;
}

/* Refine zone — sits above render prompt when both are visible */
.dock-refine-zone {
    flex-shrink: 0;
}

.dock-refine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px 6px;
    border-bottom: 1px solid var(--border);
}

.dock-refine-header.hidden { display: none; }

.dock-refine-head-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.dock-btn-surprise {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--bg));
    color: var(--accent-hover);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.dock-btn-surprise:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg));
    border-color: var(--accent);
    transform: scale(1.02);
}

.dock-btn-surprise:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dock-btn-surprise.hidden { display: none; }

.dock-refine-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-hover);
}

.dock-refine-hint {
    font-size: 10.5px;
    color: var(--text-dim);
    text-align: right;
}

.dock-compose {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-elevated);
}

.studio-dock:has(.prompt-card:not(.hidden)) .dock-compose {
    padding-top: 8px;
    padding-bottom: 8px;
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-elevated));
}

.studio-dock:has(.prompt-card:not(.hidden)) .prompt-card {
    border-top: 2px solid var(--border);
}

#chat-input {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    max-height: 120px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
    resize: none;
}

#chat-input.chat-input--refine {
    min-height: 32px;
    max-height: 72px;
    font-size: 13px;
    border-radius: 20px;
    padding: 7px 14px;
    background: var(--bg);
}

#chat-input:focus {
    outline: none;
    border-color: var(--accent);
}

#chat-input::placeholder { color: var(--text-dim); }

.dock-btn-send {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.dock-btn-send:hover {
    border-color: var(--border-strong);
    background: var(--bg-elevated-2);
}

.dock-btn-generate {
    flex-shrink: 0;
    padding: 8px 6px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-dim);
    background: transparent;
    border: none;
    cursor: pointer;
}

.dock-btn-generate:hover { color: var(--text-muted); }

.dock-compose .composer-settings {
    flex-shrink: 0;
    position: relative;
    margin-left: 0;
}

.dock-compose .composer-settings > summary {
    list-style: none;
    cursor: pointer;
}

.dock-compose .composer-settings > summary::-webkit-details-marker { display: none; }

.composer-settings-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
}

.composer-settings-trigger:hover {
    color: var(--text);
    border-color: var(--border-strong);
}

.composer-settings[open] .composer-settings-trigger {
    color: var(--accent-hover);
    border-color: rgba(108, 92, 231, 0.4);
}

.composer-settings-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: min(300px, calc(100vw - 48px));
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    z-index: 20;
}

.composer-settings-panel label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.comfy-url-input {
    width: 100%;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    outline: none;
}

.comfy-url-input:focus { border-color: var(--accent); }
.comfy-url-input::placeholder { color: var(--text-dim); }

/* Buttons (shared) */
.primary-btn, .secondary-btn {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.primary-btn {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}

.primary-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.primary-btn:disabled {
    background: var(--bg-elevated-2);
    color: var(--text-dim);
    border-color: var(--border);
    cursor: not-allowed;
}

.secondary-btn {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}

.secondary-btn:hover:not(:disabled) {
    background: var(--bg-elevated-2);
    color: var(--text);
    border-color: var(--border-strong);
}

.secondary-btn:disabled {
    color: var(--text-dim);
    cursor: not-allowed;
}

/* ─── Gallery pane ────────────────────────────────────────────────── */

.col-gallery {
    background: var(--bg);
}

.render-count {
    color: var(--text-dim);
    font-family: var(--font-mono);
    margin-left: 4px;
}

.render-status-badge {
    font-size: 10.5px;
    font-family: var(--font-mono);
    padding: 3px 9px;
    border-radius: 10px;
    background: var(--bg-elevated-2);
    color: var(--text-muted);
}

.render-status-badge[data-state="running"]  { background: rgba(96, 165, 250, 0.14); color: var(--info); }
.render-status-badge[data-state="complete"] { background: rgba(74, 222, 128, 0.15); color: var(--success); }
.render-status-badge[data-state="error"]    { background: rgba(248, 113, 113, 0.18); color: var(--danger); }

.gallery-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
}

/* Empty state */
.gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.6;
    height: 60%;
    gap: 4px;
}

.gallery-empty .subtle {
    font-size: 11.5px;
}

.gallery-empty strong {
    color: var(--accent-hover);
    font-weight: 500;
}

/* Featured render */
.featured-wrap.hidden { display: none; }

/* ── Rendering overlay on featured image ─────────────────────────── */
.render-generating-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 5;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.render-generating-overlay.hidden { display: none; }

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

.render-generating-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 20%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 80%
    );
    animation: rg-shimmer 2s ease-in-out infinite;
}

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

.render-generating-badge {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 20, 0.85);
    border: 1px solid rgba(108, 71, 255, 0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 7px 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.render-generating-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6C47FF;
    flex-shrink: 0;
    animation: rg-pulse 1s ease-in-out infinite;
}

.render-generating-pct {
    font-size: 11px;
    font-weight: 600;
    color: rgba(196, 181, 253, 0.95);
    font-variant-numeric: tabular-nums;
}

.featured-wrap + #render-empty-state.empty-state { display: none; }

.featured-frame {
    position: relative;
    width: 100%;
    min-height: min(32vh, 280px);
    aspect-ratio: 3 / 2;
    max-height: min(52vh, 520px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}

.featured-frame.is-image-missing {
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-frame.is-image-missing::after {
    content: "Image unavailable";
    color: var(--text-dim);
    font-size: 13px;
}

/* First render — featured-wrap is shown before an image exists */
.featured-frame.is-rendering-pending {
    min-height: min(52vh, 480px);
    aspect-ratio: 3 / 2;
}

.gallery-empty-error {
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
    max-width: 28rem;
}

.featured-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: min(52vh, 520px);
    object-fit: contain;
}

.featured-image.is-missing {
    display: none;
}

.featured-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    pointer-events: none;
}

.featured-chip {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 4px 10px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
}

#expand-status-badge.hidden {
    display: none;
}

.expand-status[data-state="expanding"] {
    color: #fbbf24;
}

.expand-status[data-state="ready"] {
    color: #86efac;
}

.expand-status[data-state="error"] {
    color: #fca5a5;
}

.production-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    padding: 0 2px;
}

.expand-2x-btn {
    width: 100%;
    max-width: 100%;
    font-size: 12px;
    padding: 10px 14px;
}

.expand-2x-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.expand-2x-hint {
    font-size: 10.5px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* ── Canvas action row (extend + adapt) ────────────────────────────── */
.canvas-action-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 0 2px;
}

.canvas-action-label {
    font-size: 12px;
    color: var(--color-text-secondary, #888);
    white-space: nowrap;
    margin-right: 4px;
}

.canvas-action-spacer {
    flex: 1;
}

.outpaint-dir-btn {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 0.5px solid var(--color-border-secondary);
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.outpaint-dir-btn:hover:not(:disabled) {
    background: #6C47FF;
    border-color: #6C47FF;
    color: #fff;
}

.outpaint-dir-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.featured-regen-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    user-select: none;
}

.featured-regen-btn:hover:not(:disabled) {
    background: rgba(20, 20, 30, 0.85);
    transform: scale(1.03);
}

.featured-regen-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.featured-regen-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.featured-regen-btn.hidden {
    display: none;
}

.canvas-action-sep {
    width: 0.5px;
    height: 18px;
    background: var(--color-border-tertiary);
    margin: 0 3px;
    flex-shrink: 0;
}

.canvas-adapt-btn {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    background: transparent;
    border: 1.5px solid var(--color-border-primary);
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    padding: 5px 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}

.canvas-adapt-btn:hover:not(:disabled) {
    background: var(--color-background-secondary);
}

.canvas-adapt-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.outpaint-status {
    margin-top: 6px;
    font-size: 11px;
    color: var(--color-text-secondary);
    text-align: center;
}
.outpaint-status.running { color: #6C47FF; }
.outpaint-status.done    { color: #22c55e; }
.outpaint-status.error   { color: #ef4444; }

/* ── Reframe panel — camera angle presets ─────────────────────────── */
.reframe-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

.reframe-preset-btn {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-primary);
    background: transparent;
    border: 1.5px solid var(--color-border-primary);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1.3;
}

.reframe-preset-btn:hover:not(:disabled) {
    background: var(--color-background-secondary);
    border-color: #6C47FF;
    color: #a78bfa;
}

.reframe-preset-btn.active {
    background: rgba(108, 71, 255, 0.18);
    border-color: #6C47FF;
    color: #a78bfa;
}

.reframe-preset-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.reframe-preset-btn.reframe-loading {
    opacity: 0.6;
    cursor: wait;
}

/* ── Outpaint loading overlay (Option D) ──────────────────────────── */
.outpaint-loading {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

.outpaint-loading.hidden { display: none; }

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

.outpaint-shimmer {
    position: absolute;
    inset: 0;
}
.outpaint-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    animation: op-shimmer 2s ease-in-out infinite;
}

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

.outpaint-loading-badge {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 20, 0.82);
    border: 1px solid rgba(108, 71, 255, 0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.outpaint-loading-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6C47FF;
    flex-shrink: 0;
    animation: op-pulse 1s ease-in-out infinite;
}

.adaptations-row.ratios-locked .ratio-pill {
    opacity: 0.4;
    pointer-events: none;
}

/* Top-right action overlay on the featured render — info / download /
   focused view. Three icon-only buttons grouped horizontally. Same
   blurred-dark visual family as featured-chip and the nav arrows so
   the trio reads as part of one UI surface, not stuck-on chrome. */
.featured-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 6;
}

.featured-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    user-select: none;
}

.featured-action-btn:hover:not(:disabled) {
    background: rgba(20, 20, 30, 0.85);
    transform: scale(1.06);
}

.featured-action-btn:active:not(:disabled) {
    transform: scale(0.96);
}

.featured-action-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

/* PiD test upscale — distinct from Real-ESRGAN download */
.pid-test-btn {
    border-color: rgba(167, 139, 250, 0.45);
    color: #e9d5ff;
}

.pid-test-btn:hover:not(:disabled) {
    background: rgba(76, 29, 149, 0.75);
}

/* Single "Adapt to frames" button replacing the old production-ratio
   row. Sits below Expand 2× as a secondary action — outlined so it
   doesn't compete with the primary purple Expand button above. */
.adapt-to-frames-btn {
    /* Legacy overrides — now styled by .canvas-adapt-btn */
}

/* Prompt info modal — small focused dialog that opens from the ⓘ
   button. Keeps the same dark theme as other modals; only the inner
   prompt text area scrolls (full prompts are 200–250 words and may
   not fit at once). */
/* z-index override: prompt info modal must stack above the focused
   view (z-index 1000) since users can open the modal from inside the
   lightbox. Apply to the overlay (the backdrop), not the modal box. */
#prompt-info-modal {
    z-index: 1100;
}

.modal-prompt-info {
    position: relative;
    max-width: 520px;
    width: calc(100% - 32px);
}

.prompt-info-body {
    padding: 12px 16px 0;
}

.prompt-info-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

.prompt-info-text {
    background: #14161c;
    border: 1px solid #2a2d36;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #d0d3dc;
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.prompt-info-actions {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.prompt-info-use {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 13px;
}

.prompt-info-copy {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
}

.prompt-info-copied {
    flex: 0 0 auto;
    font-size: 11px;
    color: #7ee07e;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.prompt-info-copied.visible {
    opacity: 1;
}

/* Focused view (lightbox) — image goes full-viewport with a dark
   backdrop. Click backdrop or close button to dismiss; Esc also
   closes via the keydown handler. Image uses object-fit:contain so
   it scales to fit without crop. */
.focused-view-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 40px;
    cursor: zoom-out;
}

.focused-view-overlay.hidden {
    display: none;
}

.focused-view-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    cursor: default;
}

/* Top-right action cluster inside the focused view (lightbox). Three
   buttons grouped: info, download, close. Same blurred-dark visual
   family as the featured-render overlay icons, sized slightly larger
   to match the bigger viewport. */
.focused-view-actions {
    position: absolute;
    top: 16px;
    right: 18px;
    display: flex;
    gap: 8px;
    z-index: 1010;
}

.focused-view-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(20, 20, 30, 0.78);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.focused-view-action-btn:hover {
    background: rgba(40, 40, 55, 0.95);
    transform: scale(1.06);
}

.focused-view-action-btn:active {
    transform: scale(0.96);
}

.focused-view-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(20, 20, 30, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px 0;
    transition: background 0.15s ease, transform 0.15s ease;
}

.focused-view-close:hover {
    background: rgba(40, 40, 55, 0.95);
    transform: scale(1.06);
}

/* Side navigation buttons — prev/next between renders within the
   lightbox. Larger than the in-canvas nav arrows since they sit on a
   bigger surface and need bigger click targets. */
.focused-view-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 72px;
    border-radius: 8px;
    background: rgba(20, 20, 30, 0.65);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 1010;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.focused-view-nav:hover:not(:disabled) {
    background: rgba(40, 40, 55, 0.9);
}

.focused-view-nav:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.focused-view-nav-prev { left: 18px; }
.focused-view-nav-next { right: 18px; }

/* Bottom-center metadata chips inside the focused view. Same dark
   blurred chip look as featured-overlay so the UI families match. */
.focused-view-meta {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1010;
}

.focused-view-chip {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* Prev / Next nav overlay on the featured render.
   Click handlers in app.js (navigateRender). Buttons are sized for easy
   click targets, vertically centered, and use the same blurred-dark
   chip look as featured-overlay so they read as part of the same UI
   family. They start hidden via the disabled state and fade in once
   there's more than one render to navigate through. */
.render-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 64px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px 0;  /* nudge the chevron glyph to vertical center */
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
    user-select: none;
}

.render-nav-btn:hover:not(:disabled) {
    background: rgba(20, 20, 30, 0.85);
    transform: translateY(-50%) scale(1.06);
}

.render-nav-btn:active:not(:disabled) {
    transform: translateY(-50%) scale(0.96);
}

.render-nav-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.render-nav-prev { left: 12px; }
.render-nav-next { right: 12px; }

/* Adaptations row */
.adaptations-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 0 2px;
    flex-wrap: wrap;
}

.adaptations-row-label {
    font-size: 10.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.adaptations-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Adapt-to ratio pills are proportional rectangles sized inline via
   width/height attributes on each button. The longest side is 56px;
   the other side scales to the true ratio so the shape is recognisable
   at a glance. */
.ratio-pill {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.ratio-pill:hover:not(:disabled) {
    background: var(--bg-elevated-2);
    color: var(--text);
    border-color: var(--accent);
}

.ratio-pill:active {
    transform: scale(0.97);
}

.ratio-pill.downloading {
    background: rgba(108, 92, 231, 0.18);
    color: var(--accent-hover);
    border-color: var(--accent);
}

.ratio-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Tiny dimensions need a smaller label so they don't overflow. */
.ratio-pill[data-ratio="21:9"],
.ratio-pill[data-ratio="9:16"] {
    font-size: 9.5px;
}

/* Past renders grid */
.render-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.render-grid-item {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    contain: layout paint;
}

.render-grid-item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.render-grid-item.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.render-grid-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.render-grid-item img.is-missing {
    display: none;
}

.render-grid-item.is-missing::after {
    content: "Unavailable";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 10px;
    text-align: center;
    padding: 8px;
}

.render-grid-item-meta {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    padding: 2px 7px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 9.5px;
}

/* Progress bar at bottom of gallery during render */
.render-progress {
    flex-shrink: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

.render-progress.hidden { display: none; }

.render-pct {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-hover);
    font-variant-numeric: tabular-nums;
}

/* ─── Empty state (general) ──────────────────────────────────────── */

.empty-state {
    color: var(--text-dim);
    font-size: 12.5px;
    font-style: italic;
    line-height: 1.6;
}

/* ─── New Creative Session modal ─────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: fadeIn 0.15s ease;
}

.modal-overlay.hidden { display: none; }

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    width: 480px;
    max-width: 92vw;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.01em;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    border-radius: 4px;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text);
    background: var(--bg-elevated-2);
}

.modal-sub {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 18px 0;
}

.modal-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-option {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--text);
    transition: all 0.15s ease;
}

.modal-option:hover:not(.disabled) {
    border-color: var(--accent);
    background: rgba(108, 92, 231, 0.08);
}

.modal-option.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.modal-option-icon {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: center;
    font-size: 20px;
    color: var(--text-muted);
}

.modal-option-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-option-sub {
    grid-column: 2;
    grid-row: 2;
    font-size: 11.5px;
    color: var(--text-muted);
}

.badge-soon {
    font-size: 9px;
    font-weight: 500;
    background: var(--bg-elevated-2);
    color: var(--text-dim);
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modal-start {
    width: 500px;
}

.modal-footnote {
    color: var(--text-dim);
    font-size: 12px;
    margin: 14px 0 0 0;
    line-height: 1.5;
}

.hidden-file-input {
    display: none;
}

/* ─── Reference focus mode (upload → auto-craft → review) ─────────── */

.col-chat.reference-focus .studio-dock {
    display: none;
}

.col-chat.reference-focus .chat-stream {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.reference-session--focus {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    gap: 0;
}

.reference-step-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.reference-step-num {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}

.reference-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.reference-step-trail {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-dim);
}

.reference-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.reference-phase {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.reference-phase.hidden {
    display: none;
}

.reference-hero-dropzone {
    flex: 1;
    margin: 16px;
    min-height: 220px;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.reference-hero-dropzone:hover,
.reference-hero-dropzone.is-dragover {
    border-color: var(--accent);
    background: var(--bg-card-accent);
}

.reference-hero-dropzone-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.reference-hero-dropzone-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
    max-width: 320px;
    line-height: 1.5;
}

.reference-hero-browse {
    margin-top: 4px;
    padding: 9px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

.reference-hero-browse:hover {
    border-color: var(--accent);
    color: var(--accent-hover);
}

.reference-phase--preview {
    padding: 16px;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.reference-hero-preview-wrap {
    flex: 1;
    width: 100%;
    max-height: min(52vh, 420px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border);
}

.reference-hero-preview-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.reference-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.reference-craft-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background: rgba(11, 13, 18, 0.82);
    backdrop-filter: blur(6px);
}

[data-theme="light"] .reference-craft-overlay {
    background: rgba(244, 245, 247, 0.92);
}

.reference-craft-overlay.hidden {
    display: none;
}

.reference-craft-overlay-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.reference-craft-overlay-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    max-width: 300px;
    line-height: 1.5;
}

.reference-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-elevated);
}

.reference-footer.hidden {
    display: none;
}

.reference-replace-btn,
.reference-retry-btn {
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
}

.reference-replace-btn:hover,
.reference-retry-btn:hover {
    border-color: var(--accent);
}

.reference-retry-btn {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.reference-retry-btn.hidden,
.reference-replace-btn.hidden {
    display: none;
}

.reference-crafting-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: reference-pulse 1.2s ease-in-out infinite;
}

@keyframes reference-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1); }
}

.reference-switch-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12.5px;
    cursor: pointer;
    padding: 8px 0;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: auto;
}

.reference-switch-link:hover {
    color: var(--text);
}

.reference-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-fg);
    background: var(--accent);
    padding: 3px 8px;
    border-radius: 999px;
}

.reference-badge.hidden,
.reference-filename.hidden {
    display: none;
}

.reference-filename {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.dock-bar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* ─── Crop preview modal ─────────────────────────────────────────── */

.modal-crop {
    width: auto;
    max-width: min(90vw, 1100px);
    padding: 18px 20px 20px;
}

.modal-crop .modal-header h3 {
    font-size: 15px;
    color: var(--text-muted);
    font-weight: 500;
}

.modal-crop .modal-header h3 #crop-preview-ratio {
    color: var(--text);
    font-family: var(--font-mono);
    margin-left: 4px;
}

.crop-preview-body {
    /* No background of its own — the modal IS the visual surface. The
       previous `--bg` (#0b0d12) inner container made the image area look
       like a sunken pit and detached the buttons/slider visually. */
    background: transparent;
    border: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: 280px;
    justify-content: center;
}

/* The stage — the master image with an interactive overlay rectangle.
 * The stage has the same dimensions as the displayed image so coordinates
 * line up cleanly. */
.crop-stage {
    position: relative;
    display: inline-block;
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
}

.crop-source-image {
    display: block;
    max-width: 100%;
    max-height: 65vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-sm);
    pointer-events: none;     /* image itself doesn't capture mouse */
}

/* Dashed outline showing where the original render sits inside expanded canvas */
.crop-orig-bounds {
    position: absolute;
    border: 1.5px dashed rgba(139, 92, 246, 0.85);
    border-radius: 2px;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}

/* Shaded region inside crop rect reserved for headline / copy */
.crop-text-zone {
    position: absolute;
    background: rgba(96, 165, 250, 0.22);
    border: 1px dashed rgba(96, 165, 250, 0.65);
    pointer-events: none;
    z-index: 1;
    box-sizing: border-box;
}

.crop-text-zone::after {
    content: "COPY";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.crop-text-zone[data-zone="left"]   { left: 0; top: 0; width: 38%; height: 100%; }
.crop-text-zone[data-zone="right"]  { right: 0; top: 0; width: 38%; height: 100%; }
.crop-text-zone[data-zone="top"]    { left: 0; top: 0; width: 100%; height: 32%; }
.crop-text-zone[data-zone="bottom"] { left: 0; bottom: 0; width: 100%; height: 32%; }

.text-zone-row {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.text-zone-label {
    font-size: 10.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.text-zone-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.text-zone-pill {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.text-zone-pill:hover {
    border-color: var(--accent);
    color: var(--text);
}

.text-zone-pill.active {
    border-color: var(--accent);
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-hover);
}

/* The crop rectangle is positioned in stage-relative pixel coords by JS.
 * Its outset box-shadow creates the dim "spotlight" effect on the area
 * outside the crop — clever trick, no extra DOM elements required. */
.crop-rect {
    position: absolute;
    border: 1.5px solid #fff;
    border-radius: 3px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.68);
    cursor: move;
    box-sizing: border-box;
}

/* Internal rule-of-thirds guides — subtle hint for compositional framing */
.crop-rect::before,
.crop-rect::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.crop-rect::before {
    /* horizontal thirds: two lines */
    left: 0; right: 0; top: 33.33%;
    height: 1px;
    box-shadow: 0 33.33% 0 rgba(255, 255, 255, 0.22);
}

.crop-rect::after {
    /* vertical thirds: two lines */
    top: 0; bottom: 0; left: 33.33%;
    width: 1px;
    box-shadow: 33.33% 0 0 rgba(255, 255, 255, 0.22);
}

/* Corner resize handles */
.crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.crop-handle.handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.crop-handle.handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.crop-handle.handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.crop-handle.handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }

.crop-handle:hover { background: var(--accent-hover); }

/* While actively dragging — hide the rule-of-thirds and slightly grow rect
 * outline for visual feedback */
.crop-stage.dragging .crop-rect::before,
.crop-stage.dragging .crop-rect::after {
    opacity: 0;
}

.crop-stage.dragging .crop-rect {
    border-color: var(--accent-hover);
}

.crop-preview-meta {
    margin-top: 10px;
    align-self: flex-end;
}

/* Ratio slider — visible only in framing mode (Stage 1). Drag the slider
   to switch the crop rectangle through the standard aspect ratios. The
   live preview rectangle on the right shows the resulting shape. */
.crop-ratio-slider-row {
    margin-top: 14px;
    padding: 16px 18px;
    background: #1f222b;
    border: 1px solid #3a3f4d;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 2px 6px rgba(0, 0, 0, 0.3);
}

.crop-ratio-slider-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #c8ccd6;
    flex-shrink: 0;
}

/* The track uses a JS-set CSS variable --slider-fill (0-100%) to draw a
   solid purple progress bar on the left of the thumb. This is the single
   biggest legibility upgrade: a slider with NO progress fill reads as a
   disabled scrub bar; a filled progress reads as an active control. */
.crop-ratio-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(
        to right,
        #6c5ce7 0%,
        #6c5ce7 var(--slider-fill, 50%),
        #14171f var(--slider-fill, 50%),
        #14171f 100%
    );
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    outline: none;
    cursor: pointer;
}

.crop-ratio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    cursor: grab;
    border: 4px solid #8273ef;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6),
                0 0 18px rgba(130, 115, 239, 0.9);
    transition: transform 0.1s ease;
}

.crop-ratio-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

.crop-ratio-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    cursor: grab;
    border: 4px solid #8273ef;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6),
                0 0 18px rgba(130, 115, 239, 0.9);
}

/* The live preview "screen" — a fixed-size frame; the shape inside resizes
   to the current aspect ratio as you drag the slider. */
.crop-ratio-slider-preview {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crop-ratio-slider-shape {
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.15s ease, height 0.15s ease;
    /* Initial size — JS sets the real dimensions on open. */
    width: 48px;
    height: 32px;
}

/* Stage 2 (preview): clean cropped image, no overlay */
.crop-result-wrap {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.crop-result-image {
    display: block;
    max-width: 100%;
    max-height: 65vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
}

/* Mode switching — data-mode on .modal-crop drives which stage is visible. */
.modal-crop[data-mode="framing"] #crop-stage          { display: inline-block; }
.modal-crop[data-mode="framing"] #crop-result-wrap    { display: none; }
.modal-crop[data-mode="framing"] #crop-ratio-slider-row { display: flex; }
.modal-crop[data-mode="framing"] #text-zone-row { display: flex; }
.modal-crop[data-mode="framing"] #crop-preview-cancel { display: inline-block; }
.modal-crop[data-mode="framing"] #crop-preview-done   { display: inline-block; }
.modal-crop[data-mode="framing"] #crop-preview-back   { display: none; }
.modal-crop[data-mode="framing"] #crop-preview-download { display: none; }

.modal-crop[data-mode="previewing"] #crop-stage          { display: none; }
.modal-crop[data-mode="previewing"] #crop-result-wrap    { display: flex; }
.modal-crop[data-mode="previewing"] #crop-ratio-slider-row { display: none; }
.modal-crop[data-mode="previewing"] #text-zone-row { display: none; }
.modal-crop[data-mode="previewing"] #crop-preview-cancel { display: none; }
.modal-crop[data-mode="previewing"] #crop-preview-done   { display: none; }
.modal-crop[data-mode="previewing"] #crop-preview-back   { display: inline-block; }
.modal-crop[data-mode="previewing"] #crop-preview-download { display: inline-block; }

.crop-preview-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    /* Deliberate footer treatment — a thin top divider plus extra padding
       above the buttons makes them feel anchored to the modal as a footer
       row rather than floating off the bottom edge. */
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid var(--border-strong);
}

.crop-preview-actions .secondary-btn,
.crop-preview-actions .primary-btn {
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
}

/* ─── Cropper-scoped bright button affordances ─────────────────────
   These overrides apply ONLY inside .modal-crop so the global UI keeps
   its subtle button styling. The cropper has explicit user requirement
   that all clickables look clearly active by default, no hover needed. */

.modal-crop .primary-btn {
    background: #8273ef;
    color: #ffffff;
    border-color: #9a8df3;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
                0 6px 18px rgba(108, 92, 231, 0.65);
}

.modal-crop .primary-btn:hover:not(:disabled) {
    background: #9a8df3;
    border-color: #b0a5f6;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset,
                0 8px 22px rgba(108, 92, 231, 0.75);
}

.modal-crop .primary-btn:active:not(:disabled) {
    transform: translateY(0);
    background: #6c5ce7;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18) inset;
}

.modal-crop .secondary-btn {
    background: #e8eaf0;
    color: #1a1d24;
    border-color: #ffffff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
                0 4px 12px rgba(0, 0, 0, 0.45);
}

.modal-crop .secondary-btn:hover:not(:disabled) {
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
                0 6px 16px rgba(0, 0, 0, 0.55);
}

.modal-crop .secondary-btn:active:not(:disabled) {
    transform: translateY(0);
    background: #c8ccd6;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18) inset;
}

.modal-crop .modal-close {
    background: #e8eaf0;
    border: 1px solid #ffffff;
    color: #1a1d24;
    font-size: 22px;
    font-weight: 600;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
                0 3px 8px rgba(0, 0, 0, 0.4);
}

.modal-crop .modal-close:hover {
    background: #ffffff;
    color: #1a1d24;
}

/* ─── Scrollbar polish ──────────────────────────────────────────── */

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ─── Global gallery modal ───────────────────────────────────────── */

.modal-gallery {
    width: min(960px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding: 20px 24px 24px;
}

.global-gallery-count {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
}

.global-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    overflow-y: auto;
    max-height: calc(88vh - 140px);
    padding: 4px 2px 2px;
    margin-top: 12px;
}

.global-gallery-item {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
}

.global-gallery-item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.global-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.global-gallery-item-meta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 8px 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
    color: #fff;
    font-size: 10px;
    line-height: 1.35;
}

.global-gallery-item-title {
    display: block;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.global-gallery-item-sub {
    display: block;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.75);
    font-size: 9.5px;
}

.global-gallery-empty.hidden {
    display: none;
}

.global-gallery-empty:not(.hidden) {
    display: block;
    text-align: center;
    padding: 48px 16px;
}