/* ═══ Shortcuts Overlay ═══ */
.shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: overlayFadeIn 0.15s ease-out;
}

.shortcuts-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 320px;
    animation: pickerSlideIn 0.2s ease-out;
}

.shortcuts-title {
    font-size: 15px;
    color: var(--green);
    margin-bottom: 16px;
    text-align: center;
}

.shortcut-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text);
}

kbd {
    display: inline-block;
    min-width: 60px;
    text-align: center;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: inherit;
    font-size: 11px;
    color: var(--green);
    flex-shrink: 0;
}

.btn-shortcuts {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}

.btn-shortcuts:hover {
    color: var(--green);
}

/* ═══ Theme Toggle Button ═══ */
.sidebar-theme-toggle {
    background: none;
    border: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
}

.sidebar-theme-toggle:hover {
    color: var(--green);
    background: rgba(var(--green-rgb), 0.05);
}

/* ═══ Load More Sentinel ═══ */
.load-more-sentinel {
    height: 1px;
    width: 100%;
    flex-shrink: 0;
}

/* ═══ Light Theme ═══ */
[data-theme="light"] {
    --bg: #f5f5f0;
    --panel: #ffffff;
    --panel-2: #fafaf5;
    --line: rgba(0, 0, 0, 0.08);
    --green: #2d8a4e;
    --green-rgb: 45, 138, 78;
    --green-dim: rgba(45, 138, 78, 0.6);
    --amber: #c27800;
    --amber-rgb: 194, 120, 0;
    --red: #d44638;
    --red-rgb: 212, 70, 56;
    --text: #1a1a1a;
    --muted: #888888;
}

/* Universal light/sepia/corporate theme component overrides —
   all driven by CSS variables so they work for any world (Fallout, ЛУКОЙЛ, …).
   Applies to ANY theme where :root has light bg (panel and bg are the variables). */
[data-theme="light"] .msg.assistant .bubble,
[data-theme="sepia"] .msg.assistant .bubble,
[data-theme="corporate"] .msg.assistant .bubble {
    background: var(--panel);
    border-color: var(--line);
}

[data-theme="light"] .msg.user .bubble,
[data-theme="sepia"] .msg.user .bubble,
[data-theme="corporate"] .msg.user .bubble {
    background: var(--panel-2);
    border-color: var(--line);
}

[data-theme="light"] .bubble pre,
[data-theme="sepia"] .bubble pre,
[data-theme="corporate"] .bubble pre {
    background: var(--panel-2);
    color: var(--text);
}

[data-theme="light"] .sidebar,
[data-theme="sepia"] .sidebar,
[data-theme="corporate"] .sidebar {
    background: var(--panel);
    border-right-color: var(--line);
}

[data-theme="light"] .chat-header,
[data-theme="sepia"] .chat-header,
[data-theme="corporate"] .chat-header,
[data-theme="light"] .chat-input-area,
[data-theme="sepia"] .chat-input-area,
[data-theme="corporate"] .chat-input-area {
    background: var(--panel);
    border-color: var(--line);
}

[data-theme="light"] .login-panel,
[data-theme="sepia"] .login-panel,
[data-theme="corporate"] .login-panel {
    background: var(--panel);
    border-color: var(--line);
}

[data-theme="light"] kbd,
[data-theme="sepia"] kbd,
[data-theme="corporate"] kbd {
    background: var(--panel-2);
    border-color: var(--line);
    color: var(--text);
}

[data-theme="light"] .bottom-nav,
[data-theme="sepia"] .bottom-nav,
[data-theme="corporate"] .bottom-nav {
    background: var(--panel);
    border-top-color: var(--line);
}

[data-theme="light"] .settings-page,
[data-theme="sepia"] .settings-page,
[data-theme="corporate"] .settings-page,
[data-theme="light"] .pipboy-page,
[data-theme="sepia"] .pipboy-page,
[data-theme="corporate"] .pipboy-page {
    background: var(--bg);
}

[data-theme="light"] .settings-section,
[data-theme="sepia"] .settings-section,
[data-theme="corporate"] .settings-section,
[data-theme="light"] .pipboy-card,
[data-theme="sepia"] .pipboy-card,
[data-theme="corporate"] .pipboy-card {
    background: var(--panel);
    border-color: var(--line);
}

[data-theme="light"] .persona-card:hover,
[data-theme="sepia"] .persona-card:hover,
[data-theme="corporate"] .persona-card:hover,
[data-theme="light"] .length-btn:hover,
[data-theme="sepia"] .length-btn:hover,
[data-theme="corporate"] .length-btn:hover {
    background: rgba(var(--green-rgb), 0.06);
}

[data-theme="light"] .persona-card.active,
[data-theme="sepia"] .persona-card.active,
[data-theme="corporate"] .persona-card.active {
    background: rgba(var(--green-rgb), 0.08);
    border-color: rgba(var(--green-rgb), 0.4);
}

[data-theme="light"] .length-btn.active,
[data-theme="sepia"] .length-btn.active,
[data-theme="corporate"] .length-btn.active {
    background: rgba(var(--green-rgb), 0.1);
    border-color: rgba(var(--green-rgb), 0.4);
    color: var(--green);
}

/* Sidebar items (conversation list) must be readable on light panel */
[data-theme="light"] .sidebar-item,
[data-theme="sepia"] .sidebar-item,
[data-theme="corporate"] .sidebar-item {
    color: var(--text);
}
[data-theme="light"] .sidebar-item-title,
[data-theme="sepia"] .sidebar-item-title,
[data-theme="corporate"] .sidebar-item-title {
    color: var(--text);
}
[data-theme="light"] .sidebar-item-preview,
[data-theme="sepia"] .sidebar-item-preview,
[data-theme="corporate"] .sidebar-item-preview,
[data-theme="light"] .sidebar-item-meta,
[data-theme="sepia"] .sidebar-item-meta,
[data-theme="corporate"] .sidebar-item-meta {
    color: var(--muted);
}
[data-theme="light"] .sidebar-item.active,
[data-theme="sepia"] .sidebar-item.active,
[data-theme="corporate"] .sidebar-item.active {
    background: rgba(var(--green-rgb), 0.08);
    border-color: rgba(var(--green-rgb), 0.3);
}
[data-theme="light"] .sidebar-item:hover,
[data-theme="sepia"] .sidebar-item:hover,
[data-theme="corporate"] .sidebar-item:hover {
    background: var(--panel-2);
}

/* Chat empty state cards ("Попробуйте", "Или изучите...") */
[data-theme="light"] .chat-empty,
[data-theme="sepia"] .chat-empty,
[data-theme="corporate"] .chat-empty {
    color: var(--text);
}
[data-theme="light"] .chat-empty .empty-prompt,
[data-theme="sepia"] .chat-empty .empty-prompt,
[data-theme="corporate"] .chat-empty .empty-prompt,
[data-theme="light"] .chat-empty .empty-capability,
[data-theme="sepia"] .chat-empty .empty-capability,
[data-theme="corporate"] .chat-empty .empty-capability {
    background: var(--panel);
    border-color: var(--line);
    color: var(--text);
}

/* Chat main area */
[data-theme="light"] .chat-layout,
[data-theme="sepia"] .chat-layout,
[data-theme="corporate"] .chat-layout,
[data-theme="light"] .chat-messages,
[data-theme="sepia"] .chat-messages,
[data-theme="corporate"] .chat-messages,
[data-theme="light"] .chat-main,
[data-theme="sepia"] .chat-main,
[data-theme="corporate"] .chat-main {
    background: var(--bg);
    color: var(--text);
}

/* Textarea + input */
[data-theme="light"] textarea,
[data-theme="sepia"] textarea,
[data-theme="corporate"] textarea,
[data-theme="light"] input[type="text"],
[data-theme="sepia"] input[type="text"],
[data-theme="corporate"] input[type="text"] {
    background: var(--panel);
    color: var(--text);
    border-color: var(--line);
}

/* ═══════════════════════════════════════════════════════════
 * Additional themes — purely variable overrides.
 *
 * Every theme reuses `.--green` / `.--bg` / `.--panel` etc. as the
 * accent + surface tokens. The UI never hardcodes hex colors
 * (with rare exceptions for tier hero cards), so flipping these
 * vars re-skins the whole app.
 * ═══════════════════════════════════════════════════════════ */

/* ─── Amber CRT ─── classic 80s monochrome terminal */
[data-theme="amber"] {
    --bg: #0b0704;
    --panel: #150d05;
    --panel-2: #1d1308;
    --line: rgba(255, 176, 0, 0.14);
    --green: #ffb000;
    --green-rgb: 255, 176, 0;
    --green-dim: rgba(255, 176, 0, 0.6);
    --amber: #ffcc33;
    --amber-rgb: 255, 204, 51;
    --red: #ff5040;
    --red-rgb: 255, 80, 64;
    --text: #f2c878;
    --muted: #8a6838;
}
[data-theme="amber"] body::after {
    /* Scanline overlay — tint to amber so CRT feel stays */
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(255, 176, 0, 0.04) 2px,
        rgba(255, 176, 0, 0.04) 3px
    );
}

/* ─── Blue Vault ─── cool corporate terminal, easy on the eyes */
[data-theme="blue"] {
    --bg: #070c14;
    --panel: #0d1524;
    --panel-2: #111d33;
    --line: rgba(98, 180, 255, 0.14);
    --green: #62b4ff;
    --green-rgb: 98, 180, 255;
    --green-dim: rgba(98, 180, 255, 0.6);
    --amber: #ffcb5c;
    --amber-rgb: 255, 203, 92;
    --red: #ff6b7a;
    --red-rgb: 255, 107, 122;
    --text: #cfe4ff;
    --muted: #5a7290;
}
[data-theme="blue"] body::after {
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(98, 180, 255, 0.03) 2px,
        rgba(98, 180, 255, 0.03) 3px
    );
}

/* ─── Nuka Pink ─── retro diner neon, high contrast */
[data-theme="nuka"] {
    --bg: #0a0610;
    --panel: #160a1c;
    --panel-2: #1e0f26;
    --line: rgba(255, 73, 165, 0.14);
    --green: #ff49a5;
    --green-rgb: 255, 73, 165;
    --green-dim: rgba(255, 73, 165, 0.6);
    --amber: #ffcf5f;
    --amber-rgb: 255, 207, 95;
    --red: #ff7070;
    --red-rgb: 255, 112, 112;
    --text: #f4d0ee;
    --muted: #8a5a78;
}
[data-theme="nuka"] body::after {
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(255, 73, 165, 0.04) 2px,
        rgba(255, 73, 165, 0.04) 3px
    );
}

/* ─── Solarized Dark ─── muted, popular with devs */
[data-theme="solarized"] {
    --bg: #002b36;
    --panel: #073642;
    --panel-2: #0a3f4d;
    --line: rgba(181, 137, 0, 0.18);
    --green: #859900;
    --green-rgb: 133, 153, 0;
    --green-dim: rgba(133, 153, 0, 0.7);
    --amber: #b58900;
    --amber-rgb: 181, 137, 0;
    --red: #dc322f;
    --red-rgb: 220, 50, 47;
    --text: #eee8d5;
    --muted: #586e75;
}
[data-theme="solarized"] body::after {
    display: none;
}

/* ─── High Contrast ─── accessibility / low vision */
[data-theme="contrast"] {
    --bg: #000000;
    --panel: #0a0a0a;
    --panel-2: #141414;
    --line: rgba(255, 255, 255, 0.25);
    --green: #00ff9c;
    --green-rgb: 0, 255, 156;
    --green-dim: rgba(0, 255, 156, 0.85);
    --amber: #ffee00;
    --amber-rgb: 255, 238, 0;
    --red: #ff3344;
    --red-rgb: 255, 51, 68;
    --text: #ffffff;
    --muted: #b0b0b0;
}
[data-theme="contrast"] body::after {
    display: none;
}

/* ─── Sepia / Paper ─── warm light theme for extended reading */
[data-theme="sepia"] {
    --bg: #f4ecd8;
    --panel: #fbf5e3;
    --panel-2: #f0e6cc;
    --line: rgba(107, 72, 23, 0.14);
    --green: #8b4513;
    --green-rgb: 139, 69, 19;
    --green-dim: rgba(139, 69, 19, 0.6);
    --amber: #c2651a;
    --amber-rgb: 194, 101, 26;
    --red: #a03020;
    --red-rgb: 160, 48, 32;
    --text: #3d2817;
    --muted: #8b6f47;
}
/* sepia component overrides are unified with light/corporate at top of file */

/* ─── Corporate / NeuralGate ─── clean professional light theme */
[data-theme="corporate"] {
    --bg: #ffffff;
    --panel: #f8f9fa;
    --panel-2: #f0f2f5;
    --line: rgba(0, 0, 0, 0.08);
    --green: #2563eb;
    --green-rgb: 37, 99, 235;
    --green-dim: rgba(37, 99, 235, 0.6);
    --amber: #d97706;
    --amber-rgb: 217, 119, 6;
    --red: #dc2626;
    --red-rgb: 220, 38, 38;
    --text: #1f2937;
    --muted: #6b7280;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
}
[data-theme="corporate"] body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* corporate component overrides unified with light/sepia at top of file */

/* Scroll progress + active element contrast boost for all themes */
[data-theme="amber"] ::selection,
[data-theme="blue"] ::selection,
[data-theme="nuka"] ::selection,
[data-theme="solarized"] ::selection,
[data-theme="contrast"] ::selection,
[data-theme="sepia"] ::selection,
[data-theme="corporate"] ::selection {
    background: var(--green);
    color: var(--bg);
}


/* ── Corporate-world (non-Fallout) polish — per-world via body[data-world] ──
   Softer non-CRT aesthetic: subtle shadows, cleaner borders, no glow effects.
   Applies to ANY world where data-world != "fallout". */
body[data-world]:not([data-world="fallout"]) .sidebar {
    box-shadow: 1px 0 0 var(--line), 2px 0 12px rgba(0, 0, 0, 0.12);
}
body[data-world]:not([data-world="fallout"]) .chat-header {
    box-shadow: 0 1px 0 var(--line);
}
body[data-world]:not([data-world="fallout"]) .msg .bubble {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
body[data-world]:not([data-world="fallout"]) .btn-send {
    box-shadow: 0 2px 6px rgba(var(--green-rgb), 0.28);
}
body[data-world]:not([data-world="fallout"]) .sidebar-item.active {
    box-shadow: inset 3px 0 0 var(--green);
    border-left-color: transparent;
}
body[data-world]:not([data-world="fallout"]) .sidebar-item-title {
    font-weight: 500;
}
body[data-world]:not([data-world="fallout"]) .chat-title {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
/* Remove glow on green/accent elements for corp worlds */
body[data-world]:not([data-world="fallout"]) .btn-send,
body[data-world]:not([data-world="fallout"]) .chat-title,
body[data-world]:not([data-world="fallout"]) .settings-header {
    text-shadow: none;
}

/* ── Light-theme specific polish — for any light theme (Fallout light, sepia,
   corporate, ЛУКОЙЛ light), soften decorative accents that assume dark bg ── */
[data-theme="light"] .persona-info-btn,
[data-theme="sepia"] .persona-info-btn,
[data-theme="corporate"] .persona-info-btn {
    background: rgba(0, 0, 0, 0.35);  /* still dark scrim over persona image */
    color: #fff;
}

[data-theme="light"] .sub-badge.premium,
[data-theme="sepia"] .sub-badge.premium,
[data-theme="corporate"] .sub-badge.premium {
    color: #b8860b;  /* darker gold for readability on light bg */
    text-shadow: none;
}

[data-theme="light"] .toast,
[data-theme="sepia"] .toast,
[data-theme="corporate"] .toast {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mp-close,
[data-theme="sepia"] .mp-close,
[data-theme="corporate"] .mp-close,
[data-theme="light"] .model-cap-tip-close,
[data-theme="sepia"] .model-cap-tip-close,
[data-theme="corporate"] .model-cap-tip-close {
    background: rgba(0, 0, 0, 0.06);
}

/* AI-generated theme banner */
.ai-theme-banner {
    margin-top: 10px; padding: 10px 14px;
    background: rgba(var(--green-rgb),0.06); border: 1px solid var(--green);
    border-radius: 10px;
}
.ai-theme-banner-text {
    font-size: 13px; font-weight: 600; color: var(--green); margin-bottom: 8px;
}
.ai-theme-banner-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-theme-btn-keep, .ai-theme-btn-revert, .ai-theme-btn-save {
    padding: 5px 12px; border-radius: 6px; font-family: inherit;
    font-size: 12px; cursor: pointer; border: 1px solid var(--line);
    transition: all 0.15s;
}
.ai-theme-btn-keep { background: rgba(var(--green-rgb),0.1); color: var(--green); border-color: var(--green); }
.ai-theme-btn-keep:hover { background: rgba(var(--green-rgb),0.2); }
.ai-theme-btn-revert { background: none; color: var(--muted); }
.ai-theme-btn-revert:hover { color: var(--text); }
.ai-theme-btn-save { background: rgba(138,43,226,0.1); color: rgba(138,43,226,0.9); border-color: rgba(138,43,226,0.3); }
.ai-theme-btn-save:hover { background: rgba(138,43,226,0.2); }