/* ============================
   CSS VARIABLES — DARK (default)
============================ */
:root {
    --accent: #10a37f;
    --accent-hover: #0d8c6d;
    --accent-dim: rgba(16,163,127,0.12);
    --accent-border: rgba(16,163,127,0.3);

    /* Backgrounds */
    --bg-base: #0d0d0d;
    --bg-surface: #111111;
    --bg-surface2: #161616;
    --bg-surface3: #1a1a1a;
    --bg-surface4: #1e1e1e;
    --bg-surface5: #222222;
    --bg-elevated: #242424;
    --bg-input: #1a1a1a;
    --bg-sidebar: #111111;
    --bg-rail: #111111;
    --bg-card: #161616;
    --bg-modal: #1a1a1a;
    --bg-toast: #1a1a1a;
    --bg-dropdown: #1e1e1e;
    --bg-hover: #252525;
    --bg-hover2: #2a2a2a;
    --bg-code: #0d0d0d;
    --bg-code-header: #161616;

    /* Text */
    --text-primary: #e5e5e5;
    --text-secondary: #ccc;
    --text-muted: #888;
    --text-faint: #666;
    --text-very-faint: #555;
    --text-placeholder: #666;
    --text-heading: #f0f0f0;
    --text-bot: #d4d4d4;
    --text-code: #cdd6f4;

    /* Borders */
    --border: #222222;
    --border-subtle: #1e1e1e;
    --border-strong: #333333;
    --border-input: #333333;
    --border-card: #2a2a2a;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
    --shadow-input: 0 2px 12px rgba(0,0,0,0.4);

    /* Scrollbar */
    --scrollbar-thumb: #2a2a2a;

    /* Sidebar */
    --sidebar-bg: #111111;
    --sidebar-border: #222222;
    --sidebar-item-hover-bg: rgba(16,163,127,0.07);
    --sidebar-bottom-bg: rgba(15,15,15,0.5);

    /* Modal */
    --modal-bg: #1a1a1a;
    --modal-border: #2a2a2a;
    --modal-overlay: rgba(0,0,0,0.65);

    /* Mobile input area */
    --mobile-input-bg: rgba(18,18,18,0.98);
    --mobile-input-border: rgba(255,255,255,0.08);
    --mobile-input-shadow: 0 -12px 40px rgba(0,0,0,0.5);
    --mobile-pill-bg: rgba(255,255,255,0.15);
    --mobile-plus-bg: rgba(255,255,255,0.07);
    --mobile-plus-border: rgba(255,255,255,0.1);
    --mobile-sidebar-bg: linear-gradient(160deg, #0e0e0e 0%, #111 100%);
    --mobile-sidebar-header-bg: rgba(12,12,12,0.6);
    --mobile-sidebar-header-border: rgba(255,255,255,0.07);
    --mobile-model-sheet-bg: #111111;
    --mobile-model-handle: rgba(255,255,255,0.18);
    --mobile-toast-bg: rgba(28,28,28,0.95);
    --mobile-toast-border: rgba(255,255,255,0.1);
    --mobile-toast-color: #e5e5e5;
    --mobile-hamburger-color: #bbb;
    --mobile-brand-color: #e5e5e5;
    --mobile-ghost-color: #666;
    --mobile-card-bg: rgba(255,255,255,0.04);
    --mobile-card-border: rgba(255,255,255,0.08);
    --mobile-card-active-bg: rgba(16,163,127,0.08);
    --mobile-card-active-border: rgba(16,163,127,0.3);

    /* Settings */
    --settings-overlay-bg: rgba(15,15,15,0.97);
    --settings-nav-item-hover: #1a1a1a;
    --settings-nav-item-active: #1e1e1e;
    --settings-section-title: #555;
    --settings-row-bg: linear-gradient(90deg, #161616 0%, #1a1a1a 100%);
    --settings-row-hover-bg: linear-gradient(90deg, #1a1a1a 0%, #1e1e1e 100%);
    --settings-profile-card-bg: linear-gradient(135deg, #161616 0%, #1a1a1a 100%);
    --settings-close-btn-border: #2a2a2a;
    --settings-close-btn-color: #666;

    /* Message wrapper */
    --msg-border: #191919;

    /* Welcome cards */
    --card-bg: linear-gradient(135deg, #161616 0%, #1a1a1a 100%);
    --card-hover-bg: linear-gradient(135deg, #1a1a1a 0%, #1e1e1e 100%);
    --card-color: #bbb;
    --card-hover-color: #e5e5e5;
    --welcome-p-color: #888;
}

/* ============================
   CSS VARIABLES — LIGHT
============================ */
[data-theme="light"] {
    --accent: #10a37f;
    --accent-hover: #0d8c6d;
    --accent-dim: rgba(16,163,127,0.10);
    --accent-border: rgba(16,163,127,0.28);

    /* Backgrounds */
    --bg-base: #f7f8fa;
    --bg-surface: #ffffff;
    --bg-surface2: #fafbfc;
    --bg-surface3: #f4f6fb;
    --bg-surface4: #f0f2f7;
    --bg-surface5: #eaecf0;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-rail: #f0f2f7;
    --bg-card: #ffffff;
    --bg-modal: #ffffff;
    --bg-toast: #ffffff;
    --bg-dropdown: #ffffff;
    --bg-hover: #f4f6fb;
    --bg-hover2: #eef0f5;
    --bg-code: #f3f5f9;
    --bg-code-header: #f0f2f7;

    /* Text */
    --text-primary: #0f1117;
    --text-secondary: #3d4455;
    --text-muted: #7a8399;
    --text-faint: #9aa0b5;
    --text-very-faint: #aab0c0;
    --text-placeholder: #aab0c0;
    --text-heading: #0f1117;
    --text-bot: #2a3040;
    --text-code: #1e2a3a;

    /* Borders */
    --border: #e8eaed;
    --border-subtle: #eaecf0;
    --border-strong: #dde1eb;
    --border-input: #dde1eb;
    --border-card: #e4e7ef;

    /* Shadows */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(15,17,23,0.08);
    --shadow-lg: 0 8px 28px rgba(15,17,23,0.12);
    --shadow-input: 0 2px 16px rgba(15,17,23,0.07), 0 0 0 1px rgba(0,0,0,0.02);

    /* Scrollbar */
    --scrollbar-thumb: #c8cdd9;

    /* Sidebar */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e8eaed;
    --sidebar-item-hover-bg: rgba(16,163,127,0.07);
    --sidebar-bottom-bg: rgba(248,249,252,0.8);

    /* Modal */
    --modal-bg: #ffffff;
    --modal-border: #e4e7ef;
    --modal-overlay: rgba(15,17,23,0.35);

    /* Mobile input area */
    --mobile-input-bg: rgba(255,255,255,0.99);
    --mobile-input-border: rgba(0,0,0,0.08);
    --mobile-input-shadow: 0 -12px 40px rgba(0,0,0,0.06), 0 -1px 0 rgba(0,0,0,0.04);
    --mobile-pill-bg: rgba(0,0,0,0.12);
    --mobile-plus-bg: rgba(0,0,0,0.05);
    --mobile-plus-border: rgba(0,0,0,0.1);
    --mobile-sidebar-bg: linear-gradient(160deg, #ffffff 0%, #fafbfc 100%);
    --mobile-sidebar-header-bg: rgba(255,255,255,0.9);
    --mobile-sidebar-header-border: rgba(0,0,0,0.06);
    --mobile-model-sheet-bg: #ffffff;
    --mobile-model-handle: rgba(0,0,0,0.15);
    --mobile-toast-bg: rgba(255,255,255,0.98);
    --mobile-toast-border: rgba(0,0,0,0.1);
    --mobile-toast-color: #0f1117;
    --mobile-hamburger-color: #555;
    --mobile-brand-color: #0f1117;
    --mobile-ghost-color: #888;
    --mobile-card-bg: rgba(0,0,0,0.03);
    --mobile-card-border: rgba(0,0,0,0.07);
    --mobile-card-active-bg: rgba(16,163,127,0.07);
    --mobile-card-active-border: rgba(16,163,127,0.25);

    /* Settings */
    --settings-overlay-bg: rgba(247,248,250,0.97);
    --settings-nav-item-hover: #f0f2f7;
    --settings-nav-item-active: rgba(16,163,127,0.1);
    --settings-section-title: #9aa0b5;
    --settings-row-bg: linear-gradient(90deg, #ffffff 0%, #fafbfc 100%);
    --settings-row-hover-bg: linear-gradient(90deg, #f4f6fb 0%, #f0f7f4 100%);
    --settings-profile-card-bg: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    --settings-close-btn-border: #dde1eb;
    --settings-close-btn-color: #7a8399;

    /* Message wrapper */
    --msg-border: #eaecf0;

    /* Welcome cards */
    --card-bg: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    --card-hover-bg: linear-gradient(135deg, #f0f7f4 0%, #edf9f5 100%);
    --card-color: #3d4455;
    --card-hover-color: #0f1117;
    --welcome-p-color: #7a8399;
}

/* ============================
   BASE
============================ */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    overflow: hidden;
    display: flex;
    height: 100dvh;
    transition: background 0.25s ease, color 0.25s ease;
}

html { scroll-behavior: smooth; }

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

/* ============================
   ICON RAIL
============================ */
.icon-rail {
    width: 52px;
    min-width: 52px;
    height: 100dvh;
    background: #111;
    border-right: 1px solid #1e1e1e;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 4px;
    flex-shrink: 0;
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    width: 0;
    min-width: 0;
    transition: opacity 0.22s ease, width 0.28s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-rail.visible {
    opacity: 1;
    pointer-events: auto;
    width: 52px;
    min-width: 52px;
}

.rail-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    position: relative;
}

.rail-btn:hover {
    background: #1e1e1e;
    color: #e5e5e5;
    transform: scale(1.08);
}

.rail-btn:active { transform: scale(0.94); }

.rail-divider {
    width: 24px;
    height: 1px;
    background: #222;
    margin: 4px 0;
    flex-shrink: 0;
}

.rail-spacer { flex: 1; }

.rail-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10a37f, #0d8c6d);
    color: white;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.rail-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px #10a37f66;
}

.rail-logout { color: #666; }
.rail-logout:hover { background: #1f1515; color: #e06c6c; }

/* ============================
   SIDEBAR - FIXED FOR DROPDOWN VISIBILITY
============================ */
.sidebar {
    width: 260px;
    min-width: 260px;
    height: 100dvh;
    background: linear-gradient(180deg, #111111 0%, #0f0f0f 100%);
    border-right: 1px solid #222;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    /* Slide in/out via transform + margin — one smooth motion as a unit */
    transform: translateX(-260px);
    margin-left: -260px;
    box-shadow: none;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.32s ease;
    will-change: transform, margin-left;
}

.sidebar.open {
    transform: translateX(0);
    margin-left: 0;
    box-shadow: 2px 0 16px rgba(0,0,0,0.45);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px 12px 8px;
    border-bottom: 1px solid #1e1e1e;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    background: rgba(20,20,20,0.5);
    flex-shrink: 0;
}

.sidebar-inner-toggle {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.sidebar-inner-toggle:hover {
    background: #1e1e1e;
    color: #e5e5e5;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.close-btn {
    display: none;
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.close-btn:hover { background: #10a37f22; color: #10a37f; }

.sidebar-menu {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overflow-x: visible;
    min-height: 0;
}

/* ── History Accordion ─────────────────────────────────────── */
.history-accordion-trigger {
    justify-content: flex-start;
}
.history-accordion-trigger .history-accordion-arrow {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: #666;
}
.history-accordion-trigger.open .history-accordion-arrow {
    transform: rotate(90deg);
}

.history-accordion-list {
    display: none;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0 0 4px 0;
}
.history-accordion-list.open {
    display: flex;
}

/* ── History Search Bar ─────────────────────────────────────── */
.history-search-wrap {
    display: none;
    padding: 4px 8px 6px;
}
.history-search-wrap.open {
    display: block;
}
.history-search-inner {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #1a1a1a;
    border: 1px solid #2d2d2d;
    border-radius: 8px;
    padding: 6px 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.history-search-inner:focus-within {
    border-color: #10a37f55;
    box-shadow: 0 0 0 2px #10a37f18;
}
.history-search-icon {
    flex-shrink: 0;
    color: #555;
    pointer-events: none;
}
.history-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #ccc;
    font-size: 12.5px;
    font-family: inherit;
    min-width: 0;
}
.history-search-input::placeholder { color: #484848; }
.history-search-clear {
    background: none;
    border: none;
    color: #555;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: none;
    flex-shrink: 0;
    transition: color 0.15s;
}
.history-search-clear:hover { color: #aaa; }
.history-search-clear.visible { display: block; }

/* no-results message */
.history-no-results {
    padding: 10px 14px;
    font-size: 12px;
    color: #555;
    text-align: center;
}

/* light theme adjustments */
[data-theme="light"] .history-search-inner {
    background: #f4f5f7;
    border-color: #dde0e8;
}
[data-theme="light"] .history-search-inner:focus-within {
    border-color: #10a37f88;
    box-shadow: 0 0 0 2px #10a37f14;
}
[data-theme="light"] .history-search-input { color: #333; }
[data-theme="light"] .history-search-input::placeholder { color: #aab0c0; }
[data-theme="light"] .history-search-icon { color: #aab0c0; }
[data-theme="light"] .history-search-clear { color: #aab0c0; }
[data-theme="light"] .history-search-clear:hover { color: #555; }

/* Settings pinned in sidebar-bottom */
.settings-in-bottom {
    border-radius: 10px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #ccc;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
    position: relative;
    overflow: visible;
}

.sidebar-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: #10a37f;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    transition: height 0.3s ease;
}

.sidebar-item:hover {
    background: linear-gradient(90deg, #10a37f11 0%, transparent 100%);
    color: #fff;
    padding-left: 16px;
}

.sidebar-item:hover::before { height: 20px; }

.sidebar-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.sidebar-item:hover .sidebar-icon { transform: scale(1.1); }

.sidebar-bottom {
    padding: 10px 8px;
    border-top: 1px solid #222;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(15,15,15,0.5);
}

.sidebar-item.logout { color: #e06c6c; }
.sidebar-item.logout:hover { background: #e06c6c22; color: #ff8080; }

.desktop-toggle { display: none !important; }
.mobile-toggle { display: none; }

.sidebar-overlay { display: none; }

/* ============================
   APP - SHIFTS WITH SIDEBAR
============================ */
.app {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: linear-gradient(135deg, #0f0f0f 0%, #0d0d0d 100%);
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.app.greeting-mode {
    justify-content: flex-start;
    align-items: center;
    padding-top: 10%;
}

.app.greeting-mode #chatbox {
    flex: 0 0 auto;
    overflow: visible;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
}

.app.greeting-mode .input-area.center {
    width: 95%;
    max-width: 720px;
    margin: 24px auto 0 auto;
}

/* ============================
   HEADER - HIDDEN FOR CLEAN LOOK
============================ */
.header {
    display: none;
}

/* ============================
   CHATBOX - FIXED FOR NATURAL FLOW WITH TOP SPACING
============================ */
#chatbox {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 20px;
    padding-left: max(20px, calc(50% - 380px));
    padding-right: max(34px, calc(50% - 380px + 14px));
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 80px;
    padding-bottom: 12px;
}

#chatbox::-webkit-scrollbar { width: 4px; }
#chatbox::-webkit-scrollbar-track { background: transparent; }
#chatbox::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
#chatbox::-webkit-scrollbar-thumb:hover { background: #10a37f; }

/* ============================
   MESSAGE NAV TRACKER (right-edge minimap, ChatGPT-style)
   ============================ */
.msg-nav-tracker {
    /* No box of its own — children position themselves with `fixed`,
       so there's no invisible hoverable gap between the bars and the list. */
    display: contents;
}

/* Thin bars column — always visible, pinned right at the very edge */
.msg-nav-tracker .msg-nav-bars {
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.msg-nav-tracker.visible .msg-nav-bars {
    opacity: 1;
    pointer-events: auto;
}
.msg-nav-tracker .msg-nav-bar {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--border-strong, #333);
    cursor: pointer;
    transition: background 0.15s ease, width 0.15s ease;
}
.msg-nav-tracker .msg-nav-bars:hover .msg-nav-bar,
.msg-nav-tracker .msg-nav-bar:hover {
    background: var(--accent, #10a37f);
    width: 20px;
}
.msg-nav-tracker .msg-nav-bar.active {
    background: var(--accent, #10a37f);
    width: 18px;
}

/* Hover list panel — its own fixed element, positioned just left of the bars.
   Shown only via JS (.show class) when the pointer is actually over the bars
   or the panel itself — never from hovering the empty space around them. */
.msg-nav-tracker .msg-nav-list {
    position: fixed;
    top: 50%;
    right: 36px;
    transform: translateY(-50%) translateX(6px);
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-elevated, #242424);
    border: 1px solid var(--border-strong, #333);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.msg-nav-tracker .msg-nav-list.show {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    visibility: visible;
    pointer-events: auto;
}
.msg-nav-tracker .msg-nav-list::-webkit-scrollbar { width: 4px; }
.msg-nav-tracker .msg-nav-list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

.msg-nav-tracker .msg-nav-item {
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--text-secondary, #ccc);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.msg-nav-tracker .msg-nav-item:hover,
.msg-nav-tracker .msg-nav-item:focus-visible {
    background: var(--bg-hover, #2a2a2a);
    color: var(--text-primary, #e5e5e5);
}
.msg-nav-tracker .msg-nav-item.active {
    background: var(--accent-dim, rgba(16,163,127,0.12));
    color: var(--accent, #10a37f);
}
@media (max-width: 768px) {
    .msg-nav-tracker .msg-nav-bars,
    .msg-nav-tracker .msg-nav-list { display: none !important; }
}
.user-msg-wrapper.msg-nav-flash .message.user {
    animation: msgNavFlash 0.9s ease;
}
@keyframes msgNavFlash {
    0%   { box-shadow: 0 0 0 2px var(--accent, #10a37f); }
    100% { box-shadow: 0 0 0 0 rgba(16,163,127,0); }
}

/* ============================
   SCROLL TO BOTTOM BUTTON
   ============================ */
#inputAreaWrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

#scrollToBottomBtn {
    position: absolute;
    top: -48px;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    z-index: 200;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary, #1e1e1e);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s, color 0.15s;
}
#scrollToBottomBtn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}
#scrollToBottomBtn:hover {
    background: var(--accent, #10a37f);
    color: #fff;
    border-color: var(--accent, #10a37f);
}

/* ============================
   MESSAGES
============================ */
.message.user {
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    color: white;
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
    margin-top: 12px;
    margin-bottom: 0;
    padding: 12px 18px;
    border-radius: 20px 20px 5px 20px;
    font-size: 14px;
    line-height: 1.55;
    max-width: 72%;
    width: fit-content;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    animation: msgIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(16,163,127,0.2);
}

.message.user:hover { box-shadow: 0 6px 16px rgba(16,163,127,0.3); }

.message.bot {
    background: transparent;
    color: #d4d4d4;
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0;
    padding: 16px 0;
    margin: 0;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    border-bottom: 1px solid #191919;
    animation: fadeUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.message.bot.typing { padding: 12px 0; border-bottom: none; }

@keyframes msgIn {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

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

/* ============================
   MARKDOWN RENDERING — v3
   Professional Claude/ChatGPT-quality typography
============================ */

.message.bot h1,
.message.bot h2,
.message.bot h3,
.message.bot h4,
.message.bot h5,
.message.bot h6 {
    color: #f0f0f0;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.message.bot h1 {
    font-size: 21px;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #10a37f44;
}
.message.bot h2 {
    font-size: 17px;
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #272727;
}
.message.bot h3 {
    font-size: 15px;
    margin: 18px 0 8px;
    color: #e8e8e8;
}
.message.bot h4 {
    font-size: 14px;
    margin: 14px 0 6px;
    color: #d8d8d8;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.message.bot h5 {
    font-size: 13px;
    margin: 12px 0 4px;
    color: #c8c8c8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.message.bot h6 {
    font-size: 12px;
    margin: 10px 0 4px;
    color: #aaa;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.message.bot > h1:first-child,
.message.bot > h2:first-child,
.message.bot > h3:first-child,
.message.bot > h4:first-child { margin-top: 4px; }

/* ── Paragraphs ── */
.message.bot p {
    margin: 0 0 13px;
    line-height: 1.82;
    color: #d4d4d4;
}
.message.bot p:last-child { margin-bottom: 0; }

/* ── Inline text ── */
.message.bot strong { color: #f2f2f2; font-weight: 650; }
.message.bot em     { color: #c4c4c4; font-style: italic; }
.message.bot u      { text-decoration: underline; text-underline-offset: 3px; }
.message.bot s      { color: #888; }

/* ── Links ── */
.message.bot a {
    color: #10a37f;
    text-decoration: none;
    border-bottom: 1px solid #10a37f55;
    transition: border-color 0.15s;
}
.message.bot a:hover { border-bottom-color: #10a37f; }

/* ── Lists — polished, spacious, readable ── */
.message.bot ul,
.message.bot ol {
    margin: 4px 0 16px;
    padding-left: 28px;
}
/* Remove top margin when list immediately follows a heading */
.message.bot h1 + ul, .message.bot h2 + ul, .message.bot h3 + ul,
.message.bot h4 + ul, .message.bot h1 + ol, .message.bot h2 + ol,
.message.bot h3 + ol, .message.bot h4 + ol { margin-top: 2px; }

.message.bot li {
    margin: 7px 0;
    line-height: 1.78;
    color: #d0d0d0;
    padding-left: 2px;
}
.message.bot li:first-child { margin-top: 0; }
.message.bot li:last-child  { margin-bottom: 0; }

/* Bullet colour and size */
.message.bot ul { list-style-type: disc; }
.message.bot ul li::marker  { color: #10a37f; font-size: 1.0em; }

/* Numbered list */
.message.bot ol { list-style-type: decimal; }
.message.bot ol li::marker  { color: #10a37f; font-weight: 700; font-size: 0.95em; }

/* Roman numeral lists */
.message.bot ol.list-roman       { list-style-type: lower-roman; }
.message.bot ol.list-roman-upper { list-style-type: upper-roman; }
.message.bot ol.list-roman li::marker,
.message.bot ol.list-roman-upper li::marker { color: #10a37f; font-weight: 700; }

/* Alpha lists */
.message.bot ol.list-alpha       { list-style-type: lower-alpha; }
.message.bot ol.list-alpha-upper { list-style-type: upper-alpha; }
.message.bot ol.list-alpha li::marker,
.message.bot ol.list-alpha-upper li::marker { color: #10a37f; font-weight: 700; }

/* Nested lists */
.message.bot li > ul,
.message.bot li > ol {
    margin: 5px 0 3px 4px;
    padding-left: 20px;
}
.message.bot li > ul li::marker { color: #10a37f99; }

/* ── Blockquote ── */
.message.bot blockquote {
    border-left: 3px solid #10a37f;
    margin: 16px 0;
    padding: 10px 18px;
    background: linear-gradient(90deg, #10a37f0d 0%, transparent 80%);
    border-radius: 0 8px 8px 0;
    color: #b4b4b4;
    font-style: italic;
}
.message.bot blockquote p { color: #b4b4b4; margin: 0; }

/* ── HR ── */
.message.bot hr {
    border: none;
    border-top: 1px solid #272727;
    margin: 22px 0;
}

/* ── Inline code ── */
.message.bot .inline-code {
    background: #141414;
    border: 1px solid #2c2c2c;
    color: #10a37f;
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.87em;
    letter-spacing: 0;
    word-break: break-all;
}

/* ── Definition-style: bold + colon ── */
.message.bot p strong:first-child {
    display: inline;
}

/* ── Table ── */
.message.bot .table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 18px 0;
    border-radius: 10px;
    border: 1px solid #222;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.message.bot table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 300px;
}
.message.bot thead { background: #161616; }
.message.bot th {
    padding: 11px 16px;
    text-align: left;
    font-weight: 600;
    color: #f0f0f0;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 2px solid #10a37f44;
    white-space: nowrap;
}
.message.bot td {
    padding: 10px 16px;
    border-bottom: 1px solid #1e1e1e;
    color: #ccc;
    vertical-align: top;
    line-height: 1.65;
}

.message.bot tbody tr:nth-child(even) td { background: #111; }
.message.bot tbody tr:hover td { background: #181818; transition: background 0.15s; }
.message.bot tbody tr:last-child td { border-bottom: none; }

@keyframes cursorPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

/* While streaming, show a glowing ball after the last character */
.message.bot.streaming::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #10a37f;
    border-radius: 50%;
    margin-left: 3px;
    vertical-align: middle;
    animation: cursorPulse 0.9s ease-in-out infinite;
    box-shadow: 0 0 6px #10a37f88;
}

/* ============================
   CODE BLOCKS
============================ */
.code-block {
    background: #0d0d0d; border-radius: 12px; margin: 14px 0;
    overflow: hidden; border: 1px solid #222;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.code-block:hover { border-color: #10a37f44; box-shadow: 0 6px 16px rgba(16,163,127,0.1); }

.code-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    background: linear-gradient(90deg, #161616 0%, #1a1a1a 100%);
    border-bottom: 1px solid #222; font-size: 12px; color: #777; font-family: monospace;
}

.code-header .lang-label {
    color: #10a37f; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.5px;
    background: #10a37f11; padding: 2px 8px; border-radius: 4px;
}

.code-header button {
    background: transparent; border: 1px solid #2a2a2a; color: #888;
    padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 11px;
    transition: all 0.2s ease; width: auto; height: auto;
}
.code-header button:hover { background: #10a37f11; color: #10a37f; border-color: #10a37f44; }
.code-header button.copied { color: #10a37f; border-color: #10a37f; background: #10a37f11; }

.code-block pre {
    margin: 0; padding: 16px; overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 13px; line-height: 1.6; max-height: 400px; overflow-y: auto;
}
.code-block code { white-space: pre; color: #cdd6f4; }

/* ============================
   THINKING / TYPING
============================ */
.thinking-wrap { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }

.thinking-label {
    font-size: 12px; color: #555; letter-spacing: 0.3px;
    display: flex; align-items: center; gap: 8px;
    animation: pulse 2s ease-in-out infinite;
}

.thinking-label .think-icon {
    width: 8px; height: 8px; background: #10a37f; border-radius: 50%;
    display: inline-block; animation: thinkPulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(16,163,127,0.5);
}

@keyframes thinkPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%       { opacity: 1;   transform: scale(1.2); }
}
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.typing-dots { display: flex; gap: 6px; padding: 4px 0; }

.typing-dots span {
    width: 8px; height: 8px; background: #444; border-radius: 50%;
    display: inline-block; animation: dotBounce 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.typing-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.6) translateY(0); background: #444; }
    40%           { transform: scale(1) translateY(-6px); background: #10a37f; }
}

.skeleton-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.skeleton-line {
    height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.skeleton-line:nth-child(1) { width: 85%; }
.skeleton-line:nth-child(2) { width: 70%; }
.skeleton-line:nth-child(3) { width: 55%; }

/* Width classes for search skeleton (not nth-child so they survive insertion order) */
.sk-w90 { width: 90%; }
.sk-w85 { width: 85%; }
.sk-w75 { width: 75%; }
.sk-w60 { width: 60%; }

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Search skeleton — chat body placeholder while web search runs ─────── */
.search-skeleton-outer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    margin: 4px 0 8px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 520px;
}
.search-skeleton-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
    font-weight: 500;
}
.search-skeleton {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.search-skeleton .skeleton-line {
    height: 11px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.10) 40%,
        rgba(255,255,255,0.05) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}

/* Light theme adjustments */
[data-theme="light"] .search-skeleton-outer {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .search-skeleton-label {
    color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .search-skeleton .skeleton-line {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.06) 0%,
        rgba(0,0,0,0.12) 40%,
        rgba(0,0,0,0.06) 80%
    );
    background-size: 200% 100%;
}

.cursor-blink::after {
    content: '▍'; color: #10a37f; animation: cursorBlink 0.8s step-end infinite;
    font-size: 14px; margin-left: 1px;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ============================
   INPUT AREA - CLAUDE-STYLE TWO-ROW LAYOUT
============================ */

.input-area {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px 16px 12px 16px;
    background: linear-gradient(135deg, #1a1a1a 0%, #161616 100%);
    border: 1px solid #333;
    border-radius: 16px;
    max-width: 720px;
    width: calc(100% - 40px);
    margin: 0 auto 20px auto;
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    position: relative;
}

.input-area:hover {
    border-color: #444;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.input-area:focus-within {
    border-color: #10a37f66;
    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1), 0 4px 20px rgba(16, 163, 127, 0.2);
    background: linear-gradient(135deg, #1c1c1c 0%, #181818 100%);
}

.input-row-top {
    width: 100%;
    min-height: 24px;
    margin-bottom: 10px;
}

.input-row-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-bottom-spacer { flex: 1; }

.input-area.center {
    position: static;
    transform: none;
    width: calc(100% - 40px);
    max-width: 720px;
    margin: 24px auto 0 auto;
}

.input-area.bottom {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: calc(100% - 40px);
    max-width: 720px;
    background: #1a1a1a;
    border-color: #333;
    margin: 0 auto 20px auto;
    z-index: 50;
}

#input {
    flex: 1;
    width: 100%;
    padding: 4px 4px;
    border-radius: 8px;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: transparent;
    color: #e5e5e5;
    resize: none;
    overflow-y: auto;
    min-height: 24px;
    max-height: 200px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
    display: block;
}

#input::placeholder {
    color: #666;
    font-weight: 400;
}

#input::-webkit-scrollbar {
    width: 6px;
}

#input::-webkit-scrollbar-track {
    background: transparent;
}

#input::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

#input::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================
   PLUS BUTTON & DROPDOWN
============================ */
.plus-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.plus-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #242424;
    border: 1px solid #333;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.plus-btn:hover {
    background: #2e2e2e;
    border-color: #444;
    color: #ccc;
    transform: scale(1.07);
}

.plus-btn:active { transform: scale(0.95); }

.plus-dropdown {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: #1e1e1e;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    padding: 6px;
    min-width: 190px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.plus-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.plus-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: #ccc;
    transition: background 0.15s, color 0.15s;
    user-select: none;
    white-space: nowrap;
}

.plus-dropdown-item:hover {
    background: #2a2a2a;
    color: #fff;
}

.plus-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #10a37f;
    transition: background 0.15s;
}

.plus-dropdown-item:hover .plus-item-icon {
    background: #10a37f22;
}

.plus-dropdown-divider {
    height: 1px;
    background: #282828;
    margin: 5px 4px;
}

/* ============================
   SEND BUTTON
============================ */
.send-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(16, 163, 127, 0.3);
}

.send-btn:hover {
    transform: scale(1.07);
    box-shadow: 0 4px 14px rgba(16, 163, 127, 0.45);
    background: linear-gradient(135deg, #0d8c6d 0%, #0a7a5e 100%);
}

.send-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 6px rgba(16, 163, 127, 0.2);
}

.send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: scale(1) !important;
    box-shadow: none !important;
    pointer-events: auto; /* keep it in the DOM flow but show not-allowed cursor */
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%) !important;
    filter: saturate(0.4) brightness(0.85);
}

.send-btn:disabled:hover {
    transform: scale(1) !important;
    box-shadow: none !important;
}

.send-btn .stop-icon,
.send-btn .stop-ring {
    display: none;
    position: absolute;
}

.send-btn {
    position: relative;
    overflow: visible;
}

.send-btn.is-stopping {
    background: transparent !important;
    box-shadow: none !important;
    border: none;
}

.send-btn.is-stopping:hover {
    transform: scale(1.07);
    box-shadow: none !important;
    background: transparent !important;
}

.send-btn.is-stopping .send-icon {
    display: none;
}

.send-btn.is-stopping .stop-icon {
    display: block;
    color: #10a37f;
    position: relative;
    z-index: 2;
}

.send-btn.is-stopping .stop-ring {
    display: block;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin-ring 1s linear infinite;
    z-index: 1;
}

@keyframes spin-ring {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.plus-dropdown-item .search-active-tick {
    display: none;
    margin-left: auto;
    flex-shrink: 0;
}

.plus-dropdown-item.search-active {
    background: rgba(16, 163, 127, 0.12);
    border-radius: 8px;
}

.plus-dropdown-item.search-active .search-active-tick {
    display: block;
}

.plus-dropdown-item.search-active span:first-of-type {
    color: #10a37f;
}

.plus-dropdown-item.search-active .plus-item-icon svg {
    stroke: #10a37f;
}

.input-area button.legacy-send {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 2px;
    box-shadow: 0 2px 8px rgba(16, 163, 127, 0.25);
    font-size: 16px;
    font-weight: 600;
}

/* ============================
   WELCOME SCREEN - OPTIMIZED FOR CLAUDE STYLE
============================ */
.welcome {
    position: absolute; 
    top: 28%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; 
    max-width: 580px; 
    text-align: center; 
    z-index: 1;
    animation: fadeUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.welcome h1 {
    font-size: 28px; 
    margin: 0 0 12px 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text;
}

.welcome p { 
    color: #888; 
    margin: 0 0 28px 0;
    font-size: 15px; 
    line-height: 1.6; 
}

.suggestions {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; 
    margin-bottom: 80px; 
    text-align: left;
}

.card {
    background: linear-gradient(135deg, #161616 0%, #1a1a1a 100%);
    padding: 14px 16px; 
    border-radius: 12px; 
    cursor: pointer;
    border: 1px solid #2a2a2a; 
    font-size: 13px; 
    color: #bbb; 
    line-height: 1.5;
    position: relative; 
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #1e1e1e 100%);
    border-color: #10a37f44; 
    color: #e5e5e5;
    transform: translateY(-4px); 
    box-shadow: 0 8px 24px rgba(16,163,127,0.15);
}

/* ============================
   CHAT HISTORY STYLES
============================ */
.history-header {
    display: flex; 
    align-items: center; 
    gap: 10px;
    padding: 10px 6px 14px 6px; 
    font-size: 14px; 
    font-weight: 600;
    color: #777; 
    border-bottom: 1px solid #222; 
    margin-bottom: 10px;
}

.back-btn {
    background: transparent; 
    border: none; 
    color: #10a37f; 
    cursor: pointer;
    font-size: 13px; 
    padding: 6px 10px; 
    border-radius: 6px; 
    white-space: nowrap;
    transition: all 0.2s ease;
}
.back-btn:hover { background: #10a37f11; transform: translateX(-2px); }

.history-item {
    align-items: center !important; 
    padding: 10px 10px !important;
    gap: 4px !important; 
    position: relative;
}

.history-info {
    display: flex; 
    flex-direction: column; 
    gap: 2px;
    overflow: hidden; 
    flex: 1; 
    min-width: 0;
}

.history-title {
    font-size: 13px; 
    color: #ddd; 
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 160px;
}

.history-item:hover .history-title { color: #fff; }
.history-date { font-size: 11px; color: #555; }

/* Selected/active chat in history list — mirrors .settings-nav-item.active */
.history-item.active {
    background: #1e1e1e;
}
.history-item.active::before { height: 20px; }
.history-item.active .history-title { color: #fff; font-weight: 600; }

.no-history {
    padding: 24px; 
    text-align: center; 
    color: #555;
    font-size: 13px; 
    line-height: 1.6;
}

/* ============================
   SIDEBAR LOGO
============================ */
.sidebar-logo {
    width: 22px; 
    height: 22px; 
    object-fit: contain;
    border-radius: 4px; 
    vertical-align: middle; 
    flex-shrink: 0;
}

/* ============================
   USER PROFILE
============================ */
/* ── User profile wrap + upward dropdown ──────────────────── */
.user-profile-wrap {
    position: relative;
}

/* Upward dropdown */
.user-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 200;
}
.user-dropdown.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}
.user-dropdown-item:hover {
    background: #252525;
    color: #fff;
}
.user-dropdown-item.danger { color: #e06c6c; }
.user-dropdown-item.danger:hover { background: #e06c6c18; color: #ff8080; }

.user-dropdown-divider {
    height: 1px;
    background: #2a2a2a;
    margin: 4px 0;
}

/* Clickable user row */
.user-profile {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #161616 0%, #1a1a1a 100%);
    border: 1px solid #2a2a2a; 
    overflow: hidden; 
    cursor: pointer;
    user-select: none; 
    transition: border-color 0.2s, background 0.2s;
}
.user-profile:hover { border-color: #10a37f55; background: linear-gradient(135deg, #181818 0%, #1e1e1e 100%); }
.user-profile.active { border-color: #10a37f88; }

.user-profile-chevron {
    flex-shrink: 0;
    color: #555;
    margin-left: auto;
    transition: transform 0.2s ease, color 0.2s;
}
.user-profile.active .user-profile-chevron {
    transform: rotate(180deg);
    color: #10a37f;
}

.user-avatar {
    width: 32px; 
    height: 32px; 
    border-radius: 50%;
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    color: white; 
    font-size: 12px; 
    font-weight: 700;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0; 
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(16,163,127,0.2);
}

.user-fullname {
    font-size: 13px; 
    color: #ccc; 
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
    flex: 1;
}

/* ============================
   HISTORY 3-DOT MENU - FIXED WITH VISIBILITY
============================ */
.history-menu-wrap { 
    position: relative; 
    flex-shrink: 0;
    z-index: 1001;
}

.history-menu-btn {
    background: transparent; 
    border: none; 
    color: #555;
    width: 28px; 
    height: 28px; 
    border-radius: 6px; 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 0; 
    opacity: 0; 
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.history-item:hover .history-menu-btn { opacity: 1; }
.history-menu-btn:hover { background: #2a2a2a; color: #fff; }

.history-dropdown {
    display: none; 
    position: absolute; 
    right: 0; 
    top: calc(100% + 4px);
    background: #1a1a1a; 
    border: 1px solid #2a2a2a; 
    border-radius: 10px;
    padding: 4px; 
    min-width: 148px; 
    z-index: 10001;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); 
    animation: dropIn 0.12s ease;
}

.history-dropdown.open { 
    display: flex; 
    flex-direction: column; 
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.history-dropdown-item {
    display: flex; 
    align-items: center; 
    gap: 9px; 
    padding: 8px 10px;
    border-radius: 7px; 
    background: transparent; 
    border: none; 
    color: #ccc;
    font-size: 13px; 
    font-family: inherit; 
    cursor: pointer;
    text-align: left; 
    width: 100%; 
    transition: background 0.12s, color 0.12s;
}

.history-dropdown-item:hover { 
    background: #252525; 
    color: #fff; 
}

.history-dropdown-item.danger { 
    color: #e06c6c; 
}

.history-dropdown-item.danger:hover { 
    background: #1f1515; 
    color: #ff8080; 
}

/* ============================
   TOAST
============================ */
#toastNotif {
    position: fixed; 
    bottom: 28px; 
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: linear-gradient(135deg, #1a1a1a 0%, #161616 100%);
    border: 1px solid #2a2a2a; 
    color: #ddd; 
    padding: 12px 20px;
    border-radius: 12px; 
    font-size: 13px; 
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999; 
    pointer-events: none; 
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
#toastNotif.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================
   USER MESSAGE WRAPPER
============================ */
.user-msg-wrapper {
    display: flex; 
    flex-direction: row; 
    align-items: flex-end;
    justify-content: flex-end; 
    gap: 6px; 
    margin-bottom: 4px;
    width: 100%;
}
.user-msg-wrapper .message.user { margin-top: 0; margin-bottom: 0; }

.user-copy-btn {
    background: transparent; 
    border: 1px solid #2a2a2a; 
    color: #666;
    width: 28px; 
    height: 28px; 
    border-radius: 8px; 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0; 
    opacity: 0; 
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    padding: 0; 
    margin-bottom: 2px;
}
.user-msg-wrapper:hover .user-copy-btn { opacity: 1; }
.user-copy-btn:hover { background: #1e1e1e; color: #fff; border-color: #333; }
.user-copy-btn.copied { color: #10a37f; border-color: #10a37f44; }

/* ── User message action button group (edit + copy) ── */
.user-btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.user-edit-btn {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #666;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    padding: 0;
}
.user-msg-wrapper:hover .user-edit-btn { opacity: 1; }
.user-edit-btn:hover { background: #1e1e1e; color: #fff; border-color: #333; }

/* ============================
   VERSION NAVIGATOR (‹ 1/2 ›)
============================ */
.msg-version-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    width: 100%;
    padding: 2px 0 6px 0;
    user-select: none;
}
.version-nav-label {
    font-size: 11px;
    font-weight: 500;
    color: #666;
    min-width: 28px;
    text-align: center;
    letter-spacing: 0.2px;
}
.version-nav-btn {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #666;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.version-nav-btn:hover:not(:disabled) {
    background: #1e1e1e;
    color: #fff;
    border-color: #333;
}
.version-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Light theme */
[data-theme="light"] .version-nav-label { color: #8a90a5; }
[data-theme="light"] .version-nav-btn {
    border-color: #dde1eb;
    color: #9aa0b5;
}
[data-theme="light"] .version-nav-btn:hover:not(:disabled) {
    background: #f4f6fb;
    color: #3d4455;
    border-color: #c8cdd9;
}

/* ============================
   BOT MESSAGE WRAPPER
============================ */
.bot-msg-wrapper {
    display: flex; 
    flex-direction: column; 
    width: 100%;
    border-bottom: 1px solid #191919; 
    padding-bottom: 4px;
    margin-bottom: 0;
}
.bot-msg-wrapper .message.bot { border-bottom: none; padding-bottom: 8px; }

.bot-actions { display: flex; align-items: center; gap: 8px; padding: 6px 0 12px 0; }

.bot-copy-btn {
    display: flex; 
    align-items: center; 
    gap: 6px;
    background: transparent; 
    border: 1px solid #2a2a2a; 
    color: #666;
    padding: 5px 12px; 
    border-radius: 8px; 
    cursor: pointer;
    font-size: 12px; 
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    width: auto; 
    height: auto;
}
.bot-copy-btn:hover { background: #1e1e1e; color: #ccc; border-color: #333; }
.bot-copy-btn.copied { color: #10a37f; border-color: #10a37f44; }

/* ============================
   SETTINGS OVERLAY
============================ */
.settings-overlay {
    position: absolute; 
    inset: 0;
    background: rgba(15,15,15,0.97);
    backdrop-filter: blur(4px);
    z-index: 200; 
    overflow: hidden;
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.settings-overlay.active {
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto;
}

.settings-panel-wrap {
    display: flex; 
    height: 100%; 
    overflow: hidden;
    max-width: 900px; 
    width: 100%; 
    margin: 0 auto;
    padding: 52px 32px 32px; 
    gap: 40px; 
    box-sizing: border-box;
}

.settings-nav {
    width: 200px; 
    flex-shrink: 0; 
    display: flex;
    flex-direction: column; 
    gap: 2px; 
    padding-top: 4px;
}

.settings-nav-title {
    font-size: 20px; 
    font-weight: 700; 
    color: #f0f0f0;
    margin: 0 0 24px 10px; 
    letter-spacing: -0.01em;
}

.settings-nav-item {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 10px 12px;
    border-radius: 10px; 
    font-size: 14px; 
    color: #888;
    cursor: pointer; 
    transition: all 0.2s ease; 
    user-select: none; 
    position: relative;
}
.settings-nav-item::before {
    content: ''; 
    position: absolute; 
    left: 0; 
    width: 3px; 
    height: 0;
    background: #10a37f; 
    border-radius: 0 3px 3px 0; 
    transition: height 0.3s ease;
}
.settings-nav-item:hover  { background: #1a1a1a; color: #ddd; }
.settings-nav-item.active { background: #1e1e1e; color: #fff; }
.settings-nav-item.active::before { height: 24px; }

.sn-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; transition: transform 0.3s; }
.settings-nav-item:hover .sn-icon { transform: scale(1.15); }

.settings-content {
    flex: 1; 
    overflow-y: auto; 
    padding-right: 4px; 
    padding-top: 4px;
}
.settings-content::-webkit-scrollbar { width: 4px; }
.settings-content::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }

.settings-close-btn {
    position: absolute; 
    top: 14px; 
    right: 18px;
    background: transparent; 
    border: 1px solid #2a2a2a; 
    color: #666;
    width: 36px; 
    height: 36px; 
    border-radius: 10px; 
    cursor: pointer;
    font-size: 16px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.2s ease; 
    z-index: 10;
}
.settings-close-btn:hover {
    background: #10a37f11; 
    color: #10a37f; 
    border-color: #10a37f44;
    transform: scale(1.1) rotate(90deg);
}

.sc-section { margin-bottom: 36px; }

.sc-section-title {
    font-size: 11px; 
    font-weight: 600; 
    color: #555;
    text-transform: uppercase; 
    letter-spacing: 1px;
    margin-bottom: 12px; 
    padding-left: 2px;
}

.sc-profile-card {
    display: flex; 
    align-items: center; 
    gap: 14px; 
    padding: 16px 18px;
    background: linear-gradient(135deg, #161616 0%, #1a1a1a 100%);
    border: 1px solid #2a2a2a; 
    border-radius: 12px; 
    transition: border-color 0.2s;
}
.sc-profile-card:hover { border-color: #10a37f44; }

.sc-avatar {
    width: 48px; 
    height: 48px; 
    border-radius: 50%;
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    color: white; 
    font-size: 16px; 
    font-weight: 700;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0; 
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(16,163,127,0.2);
}

.sc-profile-name  { font-size: 15px; font-weight: 600; color: #f0f0f0; margin: 0 0 4px; }
.sc-profile-email { font-size: 12px; color: #666; margin: 0; }

.sc-row {
    display: flex; 
    align-items: center; 
    gap: 14px; 
    padding: 13px 16px;
    background: linear-gradient(90deg, #161616 0%, #1a1a1a 100%);
    border: 1px solid #2a2a2a; 
    border-radius: 10px; 
    margin-bottom: 8px;
    cursor: pointer; 
    transition: all 0.2s ease;
}
.sc-row:hover:not(.disabled) {
    background: linear-gradient(90deg, #1a1a1a 0%, #1e1e1e 100%);
    border-color: #10a37f44; 
    transform: translateX(2px);
}
.sc-row.disabled { cursor: default; opacity: 0.4; }
.sc-row.danger .sc-row-label { color: #e06c6c; }
.sc-row.danger:hover { background: #1f151511 !important; }

.sc-row-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; transition: transform 0.3s; }
.sc-row:hover .sc-row-icon { transform: scale(1.2); }
.sc-row-body  { flex: 1; }
.sc-row-label { font-size: 14px; color: #ddd; margin: 0 0 2px; font-weight: 500; }
.sc-row-sub   { font-size: 12px; color: #666; margin: 0; }
.sc-row-sub.soon { color: #10a37f; font-style: italic; }
.sc-divider   { border: none; border-top: 1px solid #1a1a1a; margin: 28px 0; }

/* ============================
   MOBILE HEADER (hamburger bar)
   Only visible on mobile
============================ */
.mobile-header {
    display: none;
}

/* ============================
   🚀 ANDROID MOBILE OPTIMIZATION SECTION
   ============================ */

@media (max-width: 768px) {
    /* === CRITICAL: ANDROID VIEWPORT FIX === */
    html, body {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;
        -webkit-user-select: none;
        user-select: none;
        -webkit-user-zoom: fixed;
    }

    /* === ANDROID TOUCH & TAP === */
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* === MOBILE HEADER — Claude-style floating minimal === */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: transparent;
        border-bottom: none;
        z-index: 998;
        padding: 0 6px 0 8px;
        padding-top: max(0px, env(safe-area-inset-top));
        box-sizing: border-box;
        will-change: transform;
        pointer-events: none;
    }

    /* Give pointer-events back to individual buttons */
    .mobile-header > * { pointer-events: auto; }

    .mobile-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        border-radius: 14px;
        transition: background 0.18s ease;
        flex-shrink: 0;
        -webkit-appearance: none;
        appearance: none;
        color: #bbb;
    }

    .mobile-hamburger:active { background: rgba(255,255,255,0.08); }

    .mobile-hamburger {
        position: relative;
    }

    .mobile-hamburger .hamburger-icon-panel,
    .mobile-hamburger .hamburger-icon-close {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
        transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mobile-hamburger .hamburger-icon-close {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(-45deg);
    }

    .mobile-hamburger.is-open .hamburger-icon-panel {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(45deg);
    }

    .mobile-hamburger.is-open .hamburger-icon-close {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }

    /* Centre brand — absolutely positioned so it's always centred */
    .mobile-header-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 15px;
        font-weight: 650;
        color: #e5e5e5;
        letter-spacing: -0.02em;
        pointer-events: none;
        white-space: nowrap;
    }

    .mobile-header-logo {
        width: 22px;
        height: 22px;
        object-fit: contain;
        border-radius: 6px;
    }

    /* Ghost button — right side, matches hamburger style */
    .mobile-header-ghost {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        background: transparent;
        border: none;
        color: #666;
        cursor: pointer;
        border-radius: 14px;
        transition: background 0.18s ease, color 0.2s ease;
        flex-shrink: 0;
        padding: 0;
        -webkit-appearance: none;
        appearance: none;
    }

    .mobile-header-ghost:active { background: rgba(255,255,255,0.08); }

    /* Ghost active state synced with main ghost button */
    .mobile-header-ghost.ghost-active {
        color: #a8c4ff;
    }
    .mobile-header-ghost.ghost-active .mobile-ghost-svg {
        filter: drop-shadow(0 0 6px rgba(120,160,255,0.7));
        animation: ghostFloat 3s ease-in-out infinite;
    }

    /* 👻 Same rule as the desktop ghost button: only visible on a fresh,
       empty "New Chat" screen — hides once a message is sent, reappears
       when a new chat starts. */
    .mobile-header-ghost {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.2s ease, transform 0.2s ease, background 0.18s ease, color 0.2s ease;
        pointer-events: auto;
    }
    .app:not(.greeting-mode) .mobile-header-ghost {
        opacity: 0;
        transform: scale(0.9);
        pointer-events: none;
    }

    /* === MAIN APP === */
    .icon-rail { display: none !important; }
    .close-btn { display: block; }

    .app {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100dvh;
        padding-top: 56px;
        padding-bottom: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        -webkit-user-select: none;
        user-select: none;
    }

    .app.greeting-mode {
        justify-content: center;
        align-items: center;
        padding-top: 56px;
    }

    .app.greeting-mode #chatbox {
        padding-top: 0;
    }

    /* === CHATBOX === */
    #chatbox {
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 120px;
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 12px 14px 12px 14px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-sizing: border-box;
    }

    #chatbox::-webkit-scrollbar {
        display: none;
    }

    .message.user {
        max-width: 82%;
        font-size: 13px;
    }

    .message.bot {
        font-size: 14px;
        padding: 12px 0;
    }

    /* === INPUT AREA (CRITICAL FOR ANDROID) === */
    .input-area {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 12px 14px 10px 14px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        border-radius: 12px 12px 0 0;
        border: 1px solid #252525;
        border-left: none;
        border-right: none;
        border-bottom: none;
        background: rgba(22, 22, 22, 0.98);
        box-sizing: border-box;
        gap: 0;
        z-index: 100;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
        transition: none;
    }

    .input-area:hover {
        border-color: #444;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
    }

    .input-area:focus-within {
        border-color: #10a37f66;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
    }

    .input-area.center {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        transform: none;
        border-radius: 12px 12px 0 0;
    }

    .input-area.bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        transform: none;
        border-radius: 12px 12px 0 0;
    }

    #input {
        font-size: 16px;
        -webkit-appearance: none;
        appearance: none;
        -webkit-user-zoom: fixed;
        min-height: 42px;
        max-height: 120px;
    }

    #input::placeholder {
        font-size: 15px;
    }

    /* === SEND & PLUS BUTTONS === */
    .send-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .send-btn svg {
        width: 15px;
        height: 15px;
    }

    .plus-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .plus-btn svg {
        width: 14px;
        height: 14px;
    }

    /* === SIDEBAR === */
    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 260px;
        min-width: 260px;
        height: 100dvh;
        /* Override desktop transform/margin approach — mobile slides via left */
        transform: none !important;
        margin-left: 0 !important;
        transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.32s ease;
        z-index: 1000;
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        will-change: left;
    }

    .sidebar.open {
        left: 0;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        z-index: 999;
        backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    .sidebar-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* === WELCOME SCREEN === */
    .welcome {
        width: 92%;
        top: 25%;
    }

    .welcome h1 {
        font-size: 22px;
    }

    .welcome p {
        font-size: 14px;
    }

    .suggestions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .card {
        font-size: 13px;
        padding: 12px 14px;
    }

    /* === SETTINGS === */
    .settings-panel-wrap {
        flex-direction: column;
        padding: 52px 16px 20px;
        gap: 0;
        overflow-y: auto;
    }

    .settings-nav {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 16px;
        padding-top: 0;
        border-bottom: 1px solid #1a1a1a;
        margin-bottom: 20px;
        scrollbar-width: none;
    }

    .settings-nav::-webkit-scrollbar {
        display: none;
    }

    .settings-nav-title {
        display: none;
    }

    .settings-nav-item {
        white-space: nowrap;
        font-size: 13px;
        padding: 7px 14px;
        flex-shrink: 0;
    }

    .settings-content {
        overflow-y: auto;
        padding-right: 0;
        -webkit-overflow-scrolling: touch;
    }

    /* === MODALS === */
    .feedback-modal-overlay,
    .settings-overlay,
    .priv-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
    }

    .feedback-modal-content,
    .priv-modal-box,
    .del-modal-box {
        max-height: 90vh;
        max-width: 90%;
    }

    /* === FORM INPUTS === */
    input[type="text"],
    input[type="email"],
    textarea,
    .del-confirm-input {
        font-size: 16px;
        -webkit-appearance: none;
        appearance: none;
        -webkit-touch-callout: none;
    }

    /* === SCROLLING & PERFORMANCE === */
    .priv-modal-body,
    .settings-content {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* === TOAST === */
    #toastNotif {
        bottom: 120px;
    }

    /* === MODEL DROPDOWN === */
    .model-dropdown {
        min-width: 200px;
        right: -30px;
    }

    .plus-dropdown {
        bottom: 42px;
        top: auto;
    }

    /* === TOUCH TARGETS === */
    .sidebar-item,
    .model-selector-btn,
    button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================
   🎨 THEME SYSTEM
   ============================ */

[data-theme="light"] {
    --bg: #f7f8fa;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e8eaed;
    --input-bg: #ffffff;
    --input-border: #d9dde6;
    --text-primary: #0f1117;
    --text-secondary: #3d4455;
    --text-muted: #7a8399;
    --bubble-user: #10a37f;
    --bubble-bot: transparent;
    --rail-bg: #f0f1f5;
}

/* ============================
   ☀️ LIGHT THEME — PROFESSIONAL REDESIGN
   Warm white system — every surface connected
============================ */

/* ── Base ── */
[data-theme="light"] body { background: #f7f8fa; color: #0f1117; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c8cdd9; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #10a37f; }

/* ── App shell ── */
[data-theme="light"] .app { background: #f7f8fa; }
[data-theme="light"] #chatbox::-webkit-scrollbar-thumb { background: #c8cdd9; }

/* ── Sidebar ── */
[data-theme="light"] .sidebar { background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%); }
[data-theme="light"] .sidebar.open { border-color: #e8eaed; box-shadow: 2px 0 12px rgba(0,0,0,0.06); }
[data-theme="light"] .sidebar-header { background: rgba(255,255,255,0.8); border-bottom-color: #eaecf0; }
[data-theme="light"] .sidebar-brand { color: #0f1117; }
[data-theme="light"] .sidebar-inner-toggle { color: #7a8399; }
[data-theme="light"] .sidebar-inner-toggle:hover { background: #f0f2f7; color: #0f1117; }
[data-theme="light"] .sidebar-menu { }
[data-theme="light"] .sidebar-bottom { background: rgba(248,249,252,0.8); border-top-color: #eaecf0; }
[data-theme="light"] .sidebar-item { color: #3d4455; }
[data-theme="light"] .sidebar-item:hover { background: linear-gradient(90deg, #10a37f0f 0%, transparent 100%); color: #0f1117; }
[data-theme="light"] .sidebar-item.logout { color: #c0392b; }
[data-theme="light"] .sidebar-item.logout:hover { background: rgba(192,57,43,0.07); color: #e74c3c; }
[data-theme="light"] .history-title { color: #0f1117; }
[data-theme="light"] .history-date { color: #7a8399; }
[data-theme="light"] .history-item.active { background: rgba(16,163,127,0.1); }
[data-theme="light"] .history-item.active .history-title { color: #10a37f; }
[data-theme="light"] .history-header { color: #7a8399; border-bottom-color: #eaecf0; }
[data-theme="light"] .no-history { color: #7a8399; }
[data-theme="light"] .history-accordion-trigger .history-accordion-arrow { color: #aab0c0; }

/* ── History item 3-dot menu ── */
[data-theme="light"] .history-menu-btn { color: #7a8399; }
[data-theme="light"] .history-menu-btn:hover { background: #eef0f5; color: #0f1117; }
[data-theme="light"] .history-dropdown { background: #ffffff; border-color: #e4e7ef; box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
[data-theme="light"] .history-dropdown-item { color: #3d4455; }
[data-theme="light"] .history-dropdown-item:hover { background: #f4f6fb; color: #0f1117; }
[data-theme="light"] .history-dropdown-item.danger { color: #c0392b; }
[data-theme="light"] .history-dropdown-item.danger:hover { background: rgba(192,57,43,0.06); color: #e74c3c; }

/* ── Icon rail ── */
[data-theme="light"] .icon-rail { background: #f0f2f7; border-color: #e2e5ed; }
[data-theme="light"] .rail-btn { color: #7a8399; }
[data-theme="light"] .rail-btn:hover { background: #e4e7f0; color: #0f1117; }
[data-theme="light"] .rail-divider { background: #e2e5ed; }
[data-theme="light"] .rail-logout:hover { background: rgba(192,57,43,0.08); color: #c0392b; }

/* ── User profile area ── */
[data-theme="light"] .user-profile { background: linear-gradient(135deg, #f4f6fb 0%, #f0f2f7 100%); border-color: #e4e7ef; }
[data-theme="light"] .user-profile:hover { border-color: #10a37f55; background: linear-gradient(135deg, #f0f7f4 0%, #edf7f3 100%); }
[data-theme="light"] .user-profile.active { border-color: #10a37f88; }
[data-theme="light"] .user-fullname { color: #3d4455; }
[data-theme="light"] .user-profile-chevron { color: #aab0c0; }
[data-theme="light"] .user-avatar { background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%); color: #fff; }

/* ── User dropdown ── */
[data-theme="light"] .user-dropdown { background: #ffffff; border-color: #e4e7ef; box-shadow: 0 -8px 32px rgba(0,0,0,0.1); }
[data-theme="light"] .user-dropdown-item { color: #3d4455; }
[data-theme="light"] .user-dropdown-item:hover { background: #f4f6fb; color: #0f1117; }
[data-theme="light"] .user-dropdown-item.danger { color: #c0392b; }
[data-theme="light"] .user-dropdown-item.danger:hover { background: rgba(192,57,43,0.06); color: #e74c3c; }
[data-theme="light"] .user-dropdown-divider { background: #eaecf0; }

/* ── Input area ── */
[data-theme="light"] .input-area {
    background: #ffffff;
    border-color: #dde1eb;
    box-shadow: 0 2px 16px rgba(15,17,23,0.07), 0 0 0 1px rgba(0,0,0,0.02);
}
[data-theme="light"] .input-area:hover {
    border-color: #bcc3d6;
    box-shadow: 0 4px 20px rgba(15,17,23,0.09);
}
[data-theme="light"] .input-area:focus-within {
    border-color: #10a37f88;
    box-shadow: 0 0 0 3px rgba(16,163,127,0.1), 0 4px 20px rgba(16,163,127,0.12);
    background: #ffffff;
}
[data-theme="light"] #input { background: transparent; color: #0f1117; }
[data-theme="light"] #input::placeholder { color: #aab0c0; }
[data-theme="light"] #input::-webkit-scrollbar-thumb { background: #c8cdd9; }

/* ── Plus button ── */
[data-theme="light"] .plus-btn { background: #f0f2f7; border-color: #dde1eb; color: #7a8399; }
[data-theme="light"] .plus-btn:hover { background: #e4e7f0; border-color: #bcc3d6; color: #3d4455; }
[data-theme="light"] .plus-dropdown { background: #ffffff; border-color: #e4e7ef; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
[data-theme="light"] .plus-dropdown-item { color: #3d4455; }
[data-theme="light"] .plus-dropdown-item:hover { background: #f4f6fb; color: #0f1117; }
[data-theme="light"] .plus-item-icon { background: #f0f2f7; }
[data-theme="light"] .plus-dropdown-item:hover .plus-item-icon { background: rgba(16,163,127,0.1); }
[data-theme="light"] .plus-dropdown-divider { background: #eaecf0; }

/* ── Messages ── */
[data-theme="light"] .message.user {
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(16,163,127,0.25);
}
[data-theme="light"] .message.user:hover { box-shadow: 0 6px 18px rgba(16,163,127,0.35); }
[data-theme="light"] .message.bot { color: #1a1f2e; border-bottom-color: #eaecf0; }
[data-theme="light"] .message.bot p { color: #2a3040; }
[data-theme="light"] .message.bot li { color: #2a3040; }
[data-theme="light"] .message.bot td { color: #2a3040; }
[data-theme="light"] .message.bot h1,
[data-theme="light"] .message.bot h2,
[data-theme="light"] .message.bot h3,
[data-theme="light"] .message.bot h4,
[data-theme="light"] .message.bot h5,
[data-theme="light"] .message.bot h6 { color: #0f1117; }
[data-theme="light"] .message.bot h1 { border-bottom-color: #10a37f33; }
[data-theme="light"] .message.bot h2 { border-bottom-color: #e8eaed; }
[data-theme="light"] .message.bot strong { color: #0f1117; }
[data-theme="light"] .message.bot em { color: #3d4455; }
[data-theme="light"] .message.bot s { color: #9aa0b5; }
[data-theme="light"] .message.bot a { color: #10a37f; border-bottom-color: #10a37f55; }
[data-theme="light"] .message.bot ul li::marker { color: #10a37f; }
[data-theme="light"] .message.bot ol li::marker { color: #10a37f; }
[data-theme="light"] .message.bot ol.list-roman li::marker,
[data-theme="light"] .message.bot ol.list-roman-upper li::marker,
[data-theme="light"] .message.bot ol.list-alpha li::marker,
[data-theme="light"] .message.bot ol.list-alpha-upper li::marker { color: #10a37f; }
[data-theme="light"] .message.bot blockquote { color: #5a6070; }
[data-theme="light"] .message.bot hr { border-top-color: #e8eaed; }


/* ── Tables ── */
[data-theme="light"] .message.bot .table-wrap { border-color: #e4e7ef; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="light"] .message.bot thead { background: #f4f6fb; }
[data-theme="light"] .message.bot th { color: #0f1117; border-bottom-color: #10a37f44; }
[data-theme="light"] .message.bot td { border-bottom-color: #eaecf0; }
[data-theme="light"] .message.bot tbody tr:nth-child(even) td { background: #f9fafb; }
[data-theme="light"] .message.bot tbody tr:hover td { background: #f0f7f4; transition: background 0.15s; }

/* ── Code blocks ── */
[data-theme="light"] .code-block {
    background: #f8f9fb;
    border-color: #e2e5ed;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .code-block:hover { border-color: #10a37f44; box-shadow: 0 4px 14px rgba(16,163,127,0.08); }
[data-theme="light"] .code-header {
    background: linear-gradient(90deg, #f0f2f7 0%, #eef0f5 100%);
    border-bottom-color: #e2e5ed;
    color: #7a8399;
}
[data-theme="light"] .code-header .lang-label { color: #10a37f; background: rgba(16,163,127,0.08); }
[data-theme="light"] .code-header button { border-color: #dde1eb; color: #7a8399; background: #ffffff; }
[data-theme="light"] .code-header button:hover { background: rgba(16,163,127,0.07); color: #10a37f; border-color: #10a37f44; }
[data-theme="light"] .code-block pre { background: #f3f5f9; }
[data-theme="light"] .code-block code { color: #1e2a3a; }
[data-theme="light"] .message.bot .inline-code { background: #eef0f8; border-color: #dde1eb; color: #0a8a64; }

/* ── Thinking / skeleton ── */
[data-theme="light"] .thinking-label { color: #9aa0b5; }
[data-theme="light"] .typing-dots span { background: #c8cdd9; }
[data-theme="light"] .skeleton-line {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
}

/* ── Bot message wrapper ── */
[data-theme="light"] .bot-msg-wrapper { border-bottom-color: #eaecf0; }
[data-theme="light"] .bot-copy-btn { border-color: #dde1eb; color: #9aa0b5; background: transparent; }
[data-theme="light"] .bot-copy-btn:hover { background: #f4f6fb; color: #3d4455; border-color: #c8cdd9; }
[data-theme="light"] .bot-copy-btn.copied { color: #10a37f; border-color: #10a37f55; }

/* ── User copy button ── */
[data-theme="light"] .user-copy-btn, [data-theme="light"] .user-edit-btn { border-color: #dde1eb; color: #9aa0b5; background: transparent; }
[data-theme="light"] .user-copy-btn:hover, [data-theme="light"] .user-edit-btn:hover { background: #f4f6fb; color: #3d4455; border-color: #c8cdd9; }
[data-theme="light"] .user-copy-btn.copied { color: #10a37f; border-color: #10a37f55; }

/* ── Welcome / greeting ── */
[data-theme="light"] .welcome p { color: #7a8399; }
[data-theme="light"] .card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-color: #e4e7ef;
    color: #3d4455;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .card:hover {
    background: linear-gradient(135deg, #f0f7f4 0%, #edf9f5 100%);
    border-color: #10a37f55;
    color: #0f1117;
    box-shadow: 0 8px 24px rgba(16,163,127,0.1);
}

/* ── Settings overlay ── */
[data-theme="light"] .settings-overlay { background: rgba(247,248,250,0.97); backdrop-filter: blur(6px); }
[data-theme="light"] .settings-nav-title { color: #0f1117; }
[data-theme="light"] .settings-nav-item { color: #7a8399; }
[data-theme="light"] .settings-nav-item:hover { background: #f0f2f7; color: #0f1117; }
[data-theme="light"] .settings-nav-item.active { background: rgba(16,163,127,0.1); color: #10a37f; }
[data-theme="light"] .settings-close-btn { border-color: #dde1eb; color: #7a8399; }
[data-theme="light"] .settings-close-btn:hover { background: rgba(16,163,127,0.07); color: #10a37f; border-color: #10a37f44; }
[data-theme="light"] .sc-section-title { color: #9aa0b5; }
[data-theme="light"] .sc-profile-card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-color: #e4e7ef;
}
[data-theme="light"] .sc-profile-card:hover { border-color: #10a37f44; }
[data-theme="light"] .sc-profile-name { color: #0f1117; }
[data-theme="light"] .sc-profile-email { color: #7a8399; }
[data-theme="light"] .sc-avatar { background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%); color: #fff; }
[data-theme="light"] .sc-row {
    background: linear-gradient(90deg, #ffffff 0%, #fafbfc 100%);
    border-color: #e4e7ef;
}
[data-theme="light"] .sc-row:hover:not(.disabled) {
    background: linear-gradient(90deg, #f4f6fb 0%, #f0f7f4 100%);
    border-color: #10a37f44;
}
[data-theme="light"] .sc-row-label { color: #0f1117; }
[data-theme="light"] .sc-row-sub { color: #7a8399; }
[data-theme="light"] .sc-row-icon-wrap { color: #9aa0b5; }
[data-theme="light"] .sc-divider { border-top-color: #eaecf0; }

/* ── Toast ── */
[data-theme="light"] #toastNotif {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    color: #0f1117;
    border-color: #e4e7ef;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ── Mobile header ── */
[data-theme="light"] .mobile-header { background: transparent !important; border-bottom: none !important; }
[data-theme="light"] .mobile-header-brand { color: #0f1117; }
[data-theme="light"] .mobile-hamburger .hamburger-icon-panel,
[data-theme="light"] .mobile-hamburger .hamburger-icon-close { color: #555; }
[data-theme="light"] .mobile-hamburger:active { background: rgba(0,0,0,0.06); }
[data-theme="light"] .mobile-header-ghost { color: #888; }
[data-theme="light"] .mobile-header-ghost.ghost-active { color: #4a6fd8; }

/* ── Input area mobile ── */
[data-theme="light"] .input-area.bottom {
    background: rgba(255,255,255,0.99);
    border-color: #dde1eb;
}

/* ============================
   🎨 THEME PICKER UI
   ============================ */
.sc-row-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    cursor: default;
}
.sc-row-block:hover { background: transparent !important; }

/* ── Memory submenu ───────────────────────────── */
.sc-row-chevron { flex-shrink: 0; color: #555; transition: transform 0.25s; }
.sc-memory-submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    margin-left: 12px;
    border-left: 2px solid #1e2333;
    padding-left: 4px;
}
.sc-memory-submenu.open {
    max-height: 600px;
    opacity: 1;
}
.sc-memory-item {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    margin-bottom: 2px;
}
.sc-memory-danger .sc-row-label { color: #e06c6c !important; }
.sc-memory-danger .sc-row-icon  { color: #e06c6c; }
.sc-toggle-pill {
    width: 36px; height: 20px;
    border-radius: 999px;
    background: #333;
    border: 1px solid #444;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s;
}
.sc-toggle-pill::after {
    content: '';
    position: absolute;
    left: 3px; top: 3px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #666;
    transition: left 0.2s, background 0.2s;
}
.sc-toggle-pill.disabled { opacity: 0.35; cursor: default; }
[data-theme="light"] .sc-memory-submenu { border-left-color: #dde1ea; }
[data-theme="light"] .sc-toggle-pill { background: #e0e3eb; border-color: #ccc; }
[data-theme="light"] .sc-toggle-pill::after { background: #aaa; }

.sc-row-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-picker {
    display: flex;
    gap: 12px;
    width: 100%;
}

.theme-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 2px solid #2a2a2a;
    border-radius: 12px;
    padding: 10px 8px;
    cursor: pointer;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.theme-option:hover { border-color: #555; color: #ccc; }
.theme-option.active { border-color: #10a37f; color: #10a37f; background: #10a37f0f; }

.theme-preview {
    width: 100%;
    height: 52px;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 5px 6px;
    gap: 4px;
}
.light-preview { background: #f0f0f0; }
.dark-preview  { background: #1a1a1a; }
.auto-preview  { background: linear-gradient(105deg, #f0f0f0 50%, #1a1a1a 50%); }

.tp-bar {
    height: 7px;
    border-radius: 3px;
    width: 55%;
    align-self: flex-end;
    margin-bottom: 2px;
}
.light-preview .tp-bar { background: #ccc; }
.dark-preview  .tp-bar { background: #333; }
.auto-preview  .tp-bar { background: linear-gradient(90deg, #ccc 50%, #333 50%); }

.tp-line {
    height: 4px;
    border-radius: 2px;
    width: 85%;
}
.tp-line.short { width: 60%; }
.light-preview .tp-line { background: #ddd; }
.dark-preview  .tp-line { background: #2a2a2a; }
.auto-preview  .tp-line { background: linear-gradient(90deg, #ddd 50%, #2a2a2a 50%); }

.tp-bubble {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e07040;
    position: absolute;
    bottom: 5px;
    right: 6px;
}

/* ============================
   🔠 FONT SIZE PICKER UI
   ============================ */
.font-picker {
    display: flex;
    gap: 10px;
    width: 100%;
}
.font-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 2px solid #2a2a2a;
    border-radius: 12px;
    padding: 12px 6px 10px;
    cursor: pointer;
    color: #888;
    font-size: 11px;
    font-weight: 500;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.font-option:hover { border-color: #555; color: #ccc; }
.font-option.active { border-color: #10a37f; color: #10a37f; background: #10a37f0f; }

.font-sample       { font-size: 20px; font-weight: 600; color: #ccc; line-height: 1; font-family: Georgia, serif; }
.small-sample      { font-size: 15px; }
.large-sample      { font-size: 26px; }
.xlarge-sample     { font-size: 32px; }
.font-option.active .font-sample { color: #10a37f; }

[data-fontsize="small"] .message.bot,
[data-fontsize="small"] .message.user { font-size: 13px !important; }
[data-fontsize="small"] .message.bot p,
[data-fontsize="small"] .message.bot li { font-size: 13px !important; line-height: 1.7; }

[data-fontsize="large"] .message.bot,
[data-fontsize="large"] .message.user { font-size: 17px !important; }
[data-fontsize="large"] .message.bot p,
[data-fontsize="large"] .message.bot li { font-size: 17px !important; line-height: 1.8; }

[data-fontsize="xlarge"] .message.bot,
[data-fontsize="xlarge"] .message.user { font-size: 20px !important; }
[data-fontsize="xlarge"] .message.bot p,
[data-fontsize="xlarge"] .message.bot li { font-size: 20px !important; line-height: 1.9; }

[data-theme="light"] .theme-option { border-color: #dde1eb; color: #7a8399; background: #ffffff; }
[data-theme="light"] .theme-option:hover { border-color: #9aa0b5; color: #3d4455; }
[data-theme="light"] .theme-option.active { border-color: #10a37f; color: #10a37f; background: rgba(16,163,127,0.07); }
[data-theme="light"] .font-option { border-color: #dde1eb; color: #7a8399; background: #ffffff; }
[data-theme="light"] .font-option:hover { border-color: #9aa0b5; color: #3d4455; }
[data-theme="light"] .font-option.active { border-color: #10a37f; color: #10a37f; background: rgba(16,163,127,0.07); }
[data-theme="light"] .font-sample { color: #3d4455; }
[data-theme="light"] .font-option.active .font-sample { color: #10a37f; }

/* ============================
   MODEL SELECTOR - MINIMAL
   ============================ */
.model-selector-wrap {
    position: relative;
    flex-shrink: 0;
}

.model-selector-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
}

.model-selector-btn:hover {
    color: #10a37f;
    transform: scale(1.05);
}

.model-selector-btn:active {
    transform: scale(0.95);
}

.model-selector-btn svg {
    transition: transform 0.2s;
}

.model-selector-btn.open svg {
    transform: rotate(180deg);
    color: #10a37f;
}

.model-name {
    font-weight: 600;
    letter-spacing: 0.3px;
}

.model-dropdown {
    position: fixed;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    min-width: 220px;
    padding: 6px 0 8px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    overflow: visible;
}

.model-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.model-dropdown-header {
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #242424;
    background: #0f0f0f;
}

.model-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
    -webkit-appearance: none;
    appearance: none;
}

.model-option:hover {
    background: #1e1e1e;
    color: #e5e5e5;
}

.model-option.active {
    background: #10a37f11;
    border-left-color: #10a37f;
    color: #10a37f;
}

.model-option-info {
    flex: 1;
    min-width: 0;
}

.model-option-name {
    font-weight: 600;
    color: inherit;
    font-size: 13px;
}

.model-option-desc {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.model-option.active .model-option-desc {
    color: #10a37f;
}

.model-option-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #10a37f;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.model-option.active .model-option-check {
    opacity: 1;
}

.model-dropdown-divider {
    height: 1px;
    background: #242424;
    margin: 0;
}

.model-more-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    cursor: pointer;
    color: #999;
    font-size: 13px;
    font-weight: 500;
    border-top: 1px solid #242424;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.model-more-row:hover {
    background: #1e1e1e;
    color: #e5e5e5;
}

.model-more-label {
    flex: 1;
}

.model-more-arrow {
    transition: transform 0.2s ease;
    color: #666;
    flex-shrink: 0;
}

.model-more-row.open .model-more-arrow {
    transform: rotate(90deg);
    color: #10a37f;
}

.model-more-row.open {
    color: #e5e5e5;
    border-bottom: 1px solid #242424;
}

.model-more-panel {
    position: fixed;
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    width: 230px;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.75), 0 2px 8px rgba(0,0,0,0.4);
    z-index: 99999;
    padding: 4px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px) scale(0.97);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.model-more-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    pointer-events: all;
}

.model-more-panel::-webkit-scrollbar {
    width: 4px;
}
.model-more-panel::-webkit-scrollbar-track {
    background: transparent;
}
.model-more-panel::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
.model-more-panel::-webkit-scrollbar-thumb:hover {
    background: #444;
}

.model-more-panel-title {
    padding: 8px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #242424;
    margin-bottom: 2px;
}

/* ── EFFORT LEVEL hover row + flyout panel ── */
.effort-level-row {
    position: relative;
}

.effort-level-panel {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px) scale(0.97);
    background: #1a1a1a;
    border: 1px solid #2e2e2e;
    border-radius: 12px;
    width: 168px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.75), 0 2px 8px rgba(0,0,0,0.4);
    z-index: 99999;
    padding: 4px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

/* Invisible bridge filling the gap between the row and the panel so the
   pointer never "leaves" the hoverable area while crossing over to it. */
.effort-level-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
}

.effort-level-row:hover .effort-level-panel,
.effort-level-panel:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
    pointer-events: all;
}

.effort-level-panel-title {
    padding: 7px 12px 5px;
    font-size: 10px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #242424;
    margin-bottom: 2px;
}

.effort-level-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    cursor: not-allowed;
    user-select: none;
    opacity: 0.6;
}

.effort-level-name {
    flex: 1;
}

.effort-soon-badge {
    font-size: 9px;
    font-weight: 600;
    color: #888;
    background: #262626;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 2px 5px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* On touch devices without hover, tapping the row toggles the panel via .open class (JS-assisted fallback) */
.effort-level-row.open .effort-level-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
    pointer-events: all;
}

[data-theme="light"] .effort-level-panel {
    background: #ffffff;
    border-color: #e2e2e2;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
}

[data-theme="light"] .effort-level-panel-title {
    color: #999;
    border-bottom-color: #eee;
}

[data-theme="light"] .effort-level-option {
    color: #999;
}

[data-theme="light"] .effort-soon-badge {
    color: #888;
    background: #f0f0f0;
    border-color: #e0e0e0;
}

@media (max-width: 768px) {
    .effort-level-panel {
        left: 0;
        top: 100%;
        width: 100%;
        position: static;
        display: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: all;
    }
    .effort-level-panel::before {
        display: none;
    }
    .effort-level-row.open .effort-level-panel {
        display: block;
        border-top: 1px solid #242424;
    }
}

/* Back button — shown only in more-models panel on mobile */
.model-more-back-btn {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #242424;
    padding: 14px 16px;
    color: #10a37f;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.model-more-back-btn:hover {
    background: #1e1e1e;
}

.model-more-back-btn svg {
    flex-shrink: 0;
}

[data-theme="light"] .model-more-back-btn {
    color: #10a37f;
    border-bottom-color: #e5e5e5;
}

[data-theme="light"] .model-more-back-btn:hover {
    background: #f0f0f0;
}

@media (max-width: 768px) {
    .model-more-back-btn {
        display: flex;
    }
}

.model-more-panel .model-option {
    padding-left: 14px;
    border-left: 3px solid transparent;
}

.model-more-panel .model-option:hover {
    background: #222;
}

.model-more-panel .model-option.active {
    background: #10a37f11;
    border-left: 3px solid #10a37f;
}

[data-theme="light"] .model-more-row {
    color: #777;
    border-top-color: #e5e5e5;
}
[data-theme="light"] .model-more-row:hover {
    background: #f5f5f5;
    color: #111;
}
[data-theme="light"] .model-more-panel {
    background: #fff;
    border-color: #d5d5d5;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
[data-theme="light"] .model-more-panel-title {
    color: #aaa;
    border-bottom-color: #e8e8e8;
}
[data-theme="light"] .model-more-panel .model-option:hover {
    background: #f0f0f0;
}

[data-theme="light"] .model-selector-btn {
    color: #aaa;
}

[data-theme="light"] .model-selector-btn:hover {
    color: #10a37f;
}

[data-theme="light"] .model-selector-btn.open svg {
    color: #10a37f;
}

[data-theme="light"] .model-dropdown {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

[data-theme="light"] .model-dropdown-header {
    background: #e8e8e8;
    color: #aaa;
    border-color: #d0d0d0;
}

[data-theme="light"] .model-option {
    color: #555;
}

[data-theme="light"] .model-option:hover {
    background: #e8e8e8;
    color: #111;
}

[data-theme="light"] .model-option.active {
    background: #10a37f11;
    color: #10a37f;
}

[data-theme="light"] .model-option-desc {
    color: #999;
}

[data-theme="light"] .model-dropdown-divider {
    background: #e8e8e8;
}

@media (max-width: 768px) {
    .model-selector-btn {
        font-size: 11px;
        padding: 5px 8px;
    }

    /* ── Mobile: Bottom-sheet model picker ── */
    .model-dropdown {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 18px 18px 0 0 !important;
        border-bottom: none !important;
        padding: 0 0 env(safe-area-inset-bottom, 12px) 0;
        transform: translateY(100%) !important;
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.2s ease,
                    visibility 0.2s ease !important;
        opacity: 1 !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.7) !important;
        z-index: 10000 !important;
    }

    .model-dropdown.open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Drag handle pill */
    .model-dropdown::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #404040;
        border-radius: 2px;
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    .model-dropdown-header {
        padding: 10px 16px 10px;
        font-size: 10px;
        background: transparent;
        border-bottom: 1px solid #242424;
        text-align: center;
        letter-spacing: 1.2px;
    }

    .model-option {
        padding: 14px 16px;
        font-size: 14px;
        min-height: 60px;
    }

    .model-option-name {
        font-size: 14px;
    }

    .model-option-desc {
        font-size: 12px;
        margin-top: 3px;
    }

    .model-option-check {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    .model-more-row {
        padding: 14px 16px;
        font-size: 14px;
    }

    /* Sub-panel: also bottom-sheet on mobile */
    .model-more-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        max-height: 60vh;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 18px 18px 0 0 !important;
        border-bottom: none !important;
        transform: translateY(100%) !important;
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.2s ease,
                    visibility 0.2s ease !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.8) !important;
        z-index: 10001 !important;
        padding-bottom: env(safe-area-inset-bottom, 12px);
        scrollbar-width: thin;
        scrollbar-color: #333 transparent;
    }

    .model-more-panel::-webkit-scrollbar {
        width: 3px;
    }
    .model-more-panel::-webkit-scrollbar-track {
        background: transparent;
    }
    .model-more-panel::-webkit-scrollbar-thumb {
        background: #404040;
        border-radius: 3px;
    }

    .model-more-panel::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #404040;
        border-radius: 2px;
        margin: 10px auto 6px;
    }

    .model-more-panel.open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
    }

    .model-more-panel .model-option {
        padding: 14px 16px;
        font-size: 14px;
        min-height: 60px;
    }

    .model-more-panel-title {
        padding: 10px 16px 8px;
        font-size: 10px;
        text-align: center;
        letter-spacing: 1.2px;
        display: none; /* Hidden on mobile — back button replaces it */
    }

    /* Dim backdrop when model dropdown is open — handled via JS */
}

/* ============================
   FEEDBACK MODAL
============================ */
.feedback-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.feedback-modal.active {
    opacity: 1;
    visibility: visible;
}

.feedback-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.feedback-modal-content {
    position: relative;
    background: linear-gradient(135deg, #1a1a1a 0%, #161616 100%);
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 28px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10000;
}

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

.feedback-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.feedback-close-btn:hover {
    background: #2a2a2a;
    color: #e5e5e5;
}

.feedback-modal-header {
    margin-bottom: 20px;
}

.feedback-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #e5e5e5;
    letter-spacing: -0.02em;
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-group input,
.form-group textarea {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px 12px;
    color: #e5e5e5;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.2s ease;
    resize: vertical;
    -webkit-appearance: none;
    appearance: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #555;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #10a37f;
    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1);
    background: #111;
}

.form-group textarea {
    min-height: 120px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.feedback-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    border: none;
    color: white;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(16, 163, 127, 0.3);
    margin-top: 8px;
}

.feedback-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #0d8c6d 0%, #0a7a5e 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(16, 163, 127, 0.45);
}

.feedback-submit-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(16, 163, 127, 0.2);
}

.feedback-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.feedback-message {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.feedback-message-success {
    background: #10a37f22;
    border: 1px solid #10a37f44;
    color: #10a37f;
}

.feedback-message-error {
    background: #e06c6c22;
    border: 1px solid #e06c6c44;
    color: #ff8080;
}

@media (max-width: 600px) {
    .feedback-modal-content {
        max-width: 95%;
        padding: 20px;
        border-radius: 12px;
    }

    .feedback-modal-header h2 {
        font-size: 16px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px;
    }
}

/* ============================
   FILE UPLOAD UI
   ============================ */

.attached-files-preview {
    display: none;
    padding: 10px 14px 8px;
    border-bottom: 1px solid #252525;
    flex-wrap: wrap;
}
/* When JS sets display:flex via style, this is the shown state */
.attached-files-preview[style*="flex"] {
    display: flex !important;
    flex-wrap: wrap;
}
.attached-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── New Claude-style file cards ── */
.af-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    transition: border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.af-card:hover { border-color: rgba(255,255,255,0.25); }

/* Image cards */
.af-card--image {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 6px;
}
.af-card-img-wrap {
    position: relative;
    width: 80px;
    height: 64px;
    background: rgba(255,255,255,0.04);
    flex-shrink: 0;
}
.af-card-img {
    width: 80px;
    height: 64px;
    object-fit: cover;
    display: block;
}
.af-card-img-placeholder {
    width: 80px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
}
.af-card-spinner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}
.af-card-fail-overlay { background: rgba(220,30,30,0.35); }
.af-card-label {
    font-size: 10px;
    color: #aaa;
    padding: 4px 5px 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 74px;
}

/* File/code cards */
.af-card--file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 34px 8px 10px;
    min-width: 160px;
    max-width: 220px;
}
.af-card-file-icon {
    position: relative;
    width: 36px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.af-ext-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #10a37f;
    color: #fff;
    padding: 1px 3px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.4;
}
.af-card-file-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.af-card-name {
    font-size: 12px;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.af-card-size {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}
.af-card-size--fail { color: #ff5555; }

/* Remove button */
.af-card-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    color: #aaa;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.af-card-remove:hover { background: rgba(220,50,50,0.7); color: #fff; border-color: transparent; }

/* Spinner */
.af-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: #10a37f;
    border-radius: 50%;
    animation: af-spin 0.75s linear infinite;
    flex-shrink: 0;
}
.af-spinner--sm { width: 12px; height: 12px; position: absolute; bottom: 0; right: -4px; }
@keyframes af-spin { to { transform: rotate(360deg); } }

/* Fail icon */
.af-fail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.af-fail-icon--sm { width: 13px; height: 13px; font-size: 9px; position: absolute; bottom: 0; right: -4px; }

/* Failed card tint */
.af-card--failed { border-color: rgba(255,80,80,0.35); background: rgba(255,50,50,0.06); }

/* File icon colours */
.file-icon { color: #888; flex-shrink: 0; }
.file-icon--pdf { color: #e5533c; }
.file-icon--doc { color: #4a8cf7; }
.file-icon--code { color: #10a37f; }

/* ── Drag & Drop Overlay ────────────────────────────────────────────────────── */
#catura-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#catura-drop-overlay.drop-overlay--visible {
    opacity: 1;
    pointer-events: all;
}
.drop-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    border: 2.5px dashed rgba(16,163,127,0.7);
    border-radius: 20px;
    padding: 48px 72px;
    background: rgba(16,163,127,0.05);
    box-shadow: 0 0 0 8px rgba(16,163,127,0.04);
    animation: drop-pulse 1.8s ease-in-out infinite;
}
@keyframes drop-pulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(16,163,127,0.04); }
    50% { box-shadow: 0 0 0 16px rgba(16,163,127,0.10); }
}
.drop-overlay-icon {
    color: #10a37f;
    opacity: 0.85;
    animation: drop-bounce 1.2s ease-in-out infinite;
}
@keyframes drop-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.drop-overlay-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}
.drop-overlay-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
}

/* Light theme adjustments */
[data-theme="light"] .af-card {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .af-card-name { color: #222; }
[data-theme="light"] .af-card-label { color: #555; }
[data-theme="light"] .af-card-size { color: #888; }
[data-theme="light"] .af-card-remove { background: rgba(255,255,255,0.8); color: #666; border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .af-card-remove:hover { background: rgba(220,50,50,0.85); color: #fff; }
[data-theme="light"] #catura-drop-overlay { background: rgba(255,255,255,0.82); }
[data-theme="light"] .drop-overlay-title { color: #111; }
[data-theme="light"] .drop-overlay-sub { color: rgba(0,0,0,0.4); }
[data-theme="light"] .attached-files-preview { border-color: #ddd; }
[data-theme="light"] .file-icon { color: #999; }

/* Mobile adjustments */
@media (max-width: 768px) {
    .af-card--image { width: 68px; }
    .af-card-img-wrap, .af-card-img { width: 68px; height: 54px; }
    .af-card-label { max-width: 62px; }
    .af-card--file { min-width: 140px; max-width: 180px; }
    .drop-overlay-inner { padding: 36px 40px; }
    .drop-overlay-title { font-size: 18px; }
}

/* ── Message file chips (shown inside chat bubbles after send) ─────────────── */
.msg-files-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    justify-content: flex-end;
}
.msg-file { border-radius: 10px; overflow: hidden; }
.msg-file--img {
    display: flex; flex-direction: column; align-items: flex-end;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: 4px;
    max-width: 240px;
}
.msg-file-img {
    width: 220px; max-width: 100%; max-height: 200px;
    object-fit: cover; border-radius: 7px; cursor: pointer;
    display: block; transition: opacity 0.2s;
}
.msg-file-img:hover { opacity: 0.88; }
.msg-file-name {
    font-size: 11px; color: rgba(255,255,255,0.7);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 210px; margin-top: 4px; text-align: right; padding: 0 2px;
}
.msg-file--doc {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 7px 10px; max-width: 250px;
}
.msg-file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-file-size { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.msg-file-dl {
    color: #10a37f; text-decoration: none; font-size: 15px;
    flex-shrink: 0; padding: 2px 4px; border-radius: 4px; transition: background 0.15s;
}
.msg-file-dl:hover { background: rgba(16,163,127,0.15); }
[data-theme="light"] .msg-file--img,
[data-theme="light"] .msg-file--doc { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .msg-file-name { color: #333; }
@media (max-width: 768px) {
    .msg-file--img { max-width: 180px; }
    .msg-file-img  { width: 170px; }
    .msg-file--doc { max-width: 200px; }
}

/* ============================
   WEB SEARCH
   ============================ */
.search-sources {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
}
.sources-label {
    opacity: 0.55;
    font-size: 0.75rem;
    margin-right: 2px;
}
.source-chip {
    display: inline-block;
    padding: 3px 10px;
    background: var(--surface2, #2a2a2a);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    color: #10a37f;
    text-decoration: none;
    font-size: 0.73rem;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s;
}
.source-chip:hover { opacity: 0.75; }

/* ============================
   TOOL BADGE — shown above bot messages when a live tool was used
============================ */
.tool-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 7px;
    background: rgba(16, 163, 127, 0.10);
    border: 1px solid rgba(16, 163, 127, 0.22);
    border-radius: 20px;
    font-size: 0.72rem;
    color: #10a37f;
    margin-bottom: 6px;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
.tool-badge-icon { font-size: 0.85em; flex-shrink: 0; }
.tool-badge-label { opacity: 0.85; font-weight: 500; }

[data-theme="light"] .tool-badge {
    background: rgba(16, 163, 127, 0.08);
    border-color: rgba(16, 163, 127, 0.30);
    color: #0a8a64;
}

/* ── Sources section (ChatGPT-style mini source chips) ── */
.sources-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.sources-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #888;
    font-weight: 500;
    margin-bottom: 7px;
    letter-spacing: 0.01em;
}
.sources-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.source-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    font-size: 0.71rem;
    color: #aaa;
    text-decoration: none;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.source-chip:hover {
    background: rgba(16, 163, 127, 0.12);
    border-color: rgba(16, 163, 127, 0.35);
    color: #10a37f;
}
.source-favicon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    display: block;
}
.source-domain {
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="light"] .sources-section {
    border-top-color: rgba(0,0,0,0.09);
}
[data-theme="light"] .sources-label {
    color: #666;
}
[data-theme="light"] .source-chip {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.10);
    color: #555;
}
[data-theme="light"] .source-chip:hover {
    background: rgba(16, 163, 127, 0.09);
    border-color: rgba(16, 163, 127, 0.30);
    color: #0a8a64;
}

#webSearchToggleBtn.active {
    color: #10a37f;
}

.web-search-chip {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(16, 163, 127, 0.12);
    border: 1px solid rgba(16, 163, 127, 0.4);
    border-radius: 20px;
    color: #10a37f;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.web-search-chip:hover {
    background: rgba(16, 163, 127, 0.22);
    border-color: rgba(16, 163, 127, 0.7);
}
.web-search-chip svg {
    flex-shrink: 0;
}

/* ============================
   PRIVACY & DELETE MODAL
   ============================ */

.priv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.priv-modal-overlay.priv-modal-open { opacity: 1; }

.priv-modal-box {
    background: #141414;
    border: 1px solid #222;
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    transform: translateY(16px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.priv-modal-overlay.priv-modal-open .priv-modal-box {
    transform: translateY(0);
}

.priv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #1e1e1e;
    flex-shrink: 0;
}
.priv-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.priv-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0;
}
.priv-modal-close {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}
.priv-modal-close:hover { background: #222; color: #ccc; }

.priv-modal-body {
    overflow-y: auto;
    padding: 20px 24px;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}
.priv-modal-body::-webkit-scrollbar { width: 4px; }
.priv-modal-body::-webkit-scrollbar-track { background: transparent; }
.priv-modal-body::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.priv-intro {
    font-size: 13.5px;
    color: #aaa;
    margin: 0 0 20px;
    line-height: 1.6;
    font-style: italic;
}

.priv-item {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    align-items: flex-start;
}
.priv-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: #10a37f22;
    border: 1px solid #10a37f44;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #10a37f;
    margin-top: 1px;
}
.priv-item-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0 0 4px;
}
.priv-item-text {
    font-size: 12.5px;
    color: #888;
    margin: 0;
    line-height: 1.6;
}

.priv-contact {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #1e1e1e;
}
.priv-contact-title {
    font-size: 13px;
    font-weight: 700;
    color: #ccc;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.priv-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.priv-link {
    font-size: 12.5px;
    color: #10a37f;
    text-decoration: none;
    border-bottom: 1px solid #10a37f44;
    transition: border-color 0.15s;
}
.priv-link:hover { border-bottom-color: #10a37f; }

.priv-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid #1e1e1e;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}
.priv-close-btn {
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    color: #ccc;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.priv-close-btn:hover { background: #252525; border-color: #333; }

/* ── Privacy toggle detail rows ──────────────────────────────── */
.priv-toggle-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #111;
    border: 1px solid #222;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}
.priv-detail-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
}
.priv-detail-badge {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 1px;
}
.priv-badge-collect  { background: #10a37f1a; color: #10a37f; border: 1px solid #10a37f33; }
.priv-badge-filtered { background: #f59e0b1a; color: #f59e0b; border: 1px solid #f59e0b33; }
.priv-badge-never    { background: #e055551a; color: #e06c6c; border: 1px solid #e0555533; }
.priv-detail-text { color: #666; line-height: 1.5; }

/* ── Privacy assurance strip ─────────────────────────────────── */
.priv-assurance-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 16px;
    background: #10a37f08;
    border: 1px solid #10a37f1a;
    border-radius: 10px;
    margin: 4px 0 8px;
}
.priv-assurance-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #888;
}

/* light theme */
[data-theme="light"] .priv-toggle-detail { background: #f8f9fc; border-color: #eaecf0; }
[data-theme="light"] .priv-detail-text { color: #9aa0b5; }
[data-theme="light"] .priv-assurance-strip { background: #10a37f06; border-color: #10a37f22; }
[data-theme="light"] .priv-assurance-item { color: #9aa0b5; }

.del-modal-box {
    max-width: 420px;
    text-align: center;
    padding: 36px 32px 28px;
}
.del-modal-icon-wrap {
    width: 72px;
    height: 72px;
    background: rgba(224, 108, 108, 0.08);
    border: 1px solid rgba(224, 108, 108, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.del-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 12px;
}
.del-modal-desc {
    font-size: 13.5px;
    color: #888;
    line-height: 1.65;
    margin: 0 0 20px;
}
.del-modal-desc strong { color: #e06c6c; }
.del-modal-confirm-label {
    font-size: 13px;
    color: #aaa;
    margin: 0 0 10px;
    text-align: left;
}
.del-confirm-word {
    font-family: monospace;
    font-weight: 700;
    color: #e06c6c;
    background: rgba(224,108,108,0.1);
    padding: 1px 6px;
    border-radius: 4px;
}
.del-confirm-input {
    width: 100%;
    background: #0e0e0e;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #f0f0f0;
    margin-bottom: 20px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
    text-align: center;
    letter-spacing: 0.08em;
    -webkit-appearance: none;
    appearance: none;
}
.del-confirm-input:focus { border-color: #e06c6c55; }
.del-confirm-input::placeholder { color: #444; letter-spacing: 0; }
.del-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.del-cancel-btn {
    flex: 1;
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    color: #ccc;
    padding: 10px 0;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.del-cancel-btn:hover { background: #252525; }
.del-confirm-btn {
    flex: 1;
    background: #e06c6c;
    border: none;
    color: #fff;
    padding: 10px 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s, opacity 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.del-confirm-btn:hover:not(:disabled) { background: #c85c5c; }
.del-confirm-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: #2a2a2a;
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid #333;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: #555;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: #10a37f; border-color: #10a37f; }
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px) translateY(-50%);
    background: #fff;
}
.toggle-switch.disabled-toggle { opacity: 0.4; cursor: not-allowed; }
.toggle-switch.disabled-toggle .toggle-slider { cursor: not-allowed; }

.badge-soon {
    display: inline-block;
    background: rgba(16, 163, 127, 0.12);
    border: 1px solid rgba(16, 163, 127, 0.3);
    color: #10a37f;
    font-size: 10px;
    font-style: italic;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 500;
}

/* ⌨️ Shortcut key pills */
kbd.shortcut-key {
    display: inline-block;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-bottom-width: 2px;
    color: #c8cdd9;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    margin: 0 1px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}
[data-theme="light"] kbd.shortcut-key {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.15);
    border-bottom-color: rgba(0,0,0,0.25);
    color: #555;
}

.sc-section-desc {
    font-size: 12.5px;
    color: #666;
    margin: -4px 0 12px;
    padding: 0 2px;
    line-height: 1.5;
}
[data-theme="light"] .sc-section-desc { color: #888; }


.sc-row-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
    color: #666;
}

[data-theme="light"] .priv-modal-box,
[data-theme="light"] .del-modal-box { background: #ffffff; border-color: #e4e7ef; box-shadow: 0 24px 60px rgba(0,0,0,0.12); }
[data-theme="light"] .priv-modal-header,
[data-theme="light"] .priv-modal-footer,
[data-theme="light"] .priv-contact { border-color: #eaecf0; }
[data-theme="light"] .priv-modal-title,
[data-theme="light"] .priv-item-title,
[data-theme="light"] .del-modal-title { color: #0f1117; }
[data-theme="light"] .priv-intro,
[data-theme="light"] .priv-item-text,
[data-theme="light"] .del-modal-desc { color: #7a8399; }
[data-theme="light"] .priv-modal-close { color: #9aa0b5; }
[data-theme="light"] .priv-modal-close:hover { background: #f0f2f7; color: #3d4455; }
[data-theme="light"] .priv-close-btn,
[data-theme="light"] .del-cancel-btn { background: #f4f6fb; border-color: #dde1eb; color: #3d4455; }
[data-theme="light"] .priv-close-btn:hover,
[data-theme="light"] .del-cancel-btn:hover { background: #eaecf5; border-color: #c8cdd9; }
[data-theme="light"] .del-confirm-input { background: #f9fafb; border-color: #dde1eb; color: #0f1117; }
[data-theme="light"] .del-confirm-input::placeholder { color: #c8cdd9; }
[data-theme="light"] .toggle-slider { background: #dde1eb; border-color: #c8cdd9; }
[data-theme="light"] .toggle-slider::before { background: #9aa0b5; }
[data-theme="light"] .del-modal-icon-wrap { background: rgba(192,57,43,0.06); border-color: rgba(192,57,43,0.15); }
[data-theme="light"] .priv-contact-title { color: #3d4455; }
[data-theme="light"] .priv-modal-body::-webkit-scrollbar-thumb { background: #c8cdd9; }

/* ============================
   CHAT DISCLAIMER
   ============================ */
.chat-disclaimer {
    display: none;
    text-align: center;
    font-size: 12px;
    color: #555;
    padding: 6px 20px 10px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
    line-height: 1.4;
    flex-shrink: 0;
}

.app:not(.greeting-mode) .chat-disclaimer {
    display: block;
}

[data-theme="light"] .chat-disclaimer {
    color: #aab0c0;
}

/* ── Feedback modal light theme ── */
[data-theme="light"] .feedback-modal-overlay { background: rgba(15,17,23,0.35); }
[data-theme="light"] .feedback-modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-color: #e4e7ef;
    box-shadow: 0 20px 60px rgba(0,0,0,0.14);
}
[data-theme="light"] .feedback-modal-header h2 { color: #0f1117; }
[data-theme="light"] .feedback-close-btn { color: #9aa0b5; }
[data-theme="light"] .feedback-close-btn:hover { background: #f0f2f7; color: #3d4455; }
[data-theme="light"] .form-group label { color: #7a8399; }
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
    background: #f9fafb;
    border-color: #dde1eb;
    color: #0f1117;
}
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder { color: #aab0c0; }
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus {
    border-color: #10a37f;
    box-shadow: 0 0 0 3px rgba(16,163,127,0.1);
    background: #ffffff;
}
/* ============================
   MODEL DROPDOWN BACKDROP (mobile)
   ============================ */
/* model-backdrop removed */

/* ══════════════════════════════════════════════════════════════════
   PRODUCTION SEARCH ENGINE — Citation & Trust Score Styles
   ══════════════════════════════════════════════════════════════════ */

/* Citation number badge on source chips */
.source-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    background: rgba(16, 163, 127, 0.18);
    color: #10a37f;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    flex-shrink: 0;
    margin-right: 2px;
}

/* Trust tier colouring on source chips */
.source-chip.trust-high {
    border-color: rgba(16, 163, 127, 0.25) !important;
}
.source-chip.trust-high .source-domain {
    color: #10a37f;
}
.source-chip.trust-med {
    border-color: rgba(250, 189, 47, 0.20) !important;
}
.source-chip.trust-low {
    border-color: rgba(255, 80, 80, 0.18) !important;
    opacity: 0.75;
}

/* Sources count in label */
.sources-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

[data-theme="light"] .source-num {
    background: rgba(16, 163, 127, 0.12);
    color: #0d7a64;
}
[data-theme="light"] .source-chip.trust-high .source-domain {
    color: #0d7a64;
}

/* ============================================================
   📱 MOBILE PREMIUM OVERHAUL v2
   Full polish: typography, spacing, header, input, messages
   ============================================================ */

/* ── Google Fonts import for premium mobile typography ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@media (max-width: 768px) {

  /* ── Global font upgrade ── */
  body, #input, .message.bot, .message.user,
  .sidebar-item, .model-option, .plus-dropdown-item {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  }

  /* ── MOBILE HEADER — Claude-style transparent minimal ── */
  .mobile-header {
    height: 56px !important;
    background: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 6px 0 8px !important;
    box-shadow: none !important;
  }

  .mobile-header-brand {
    font-size: 15px !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em !important;
    color: #e5e5e5 !important;
    gap: 7px !important;
  }

  .mobile-header-logo {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  .mobile-hamburger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    gap: 5px !important;
  }

  .mobile-hamburger .hamburger-icon-panel,
  .mobile-hamburger .hamburger-icon-close {
    width: 20px !important;
    height: 20px !important;
    color: #bbb !important;
  }

  .mobile-header-ghost {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;
    color: #666 !important;
  }

  /* ── CHATBOX ── */
  #chatbox {
    top: 56px !important;
    bottom: 116px !important;
    padding: 16px 16px 8px 16px !important;
  }

  /* ── USER MESSAGES ── */
  .message.user {
    max-width: 78% !important;
    font-size: 14px !important;
    font-weight: 450 !important;
    line-height: 1.6 !important;
    padding: 11px 16px !important;
    border-radius: 18px 18px 4px 18px !important;
    background: linear-gradient(145deg, #12b58c 0%, #0e9476 100%) !important;
    box-shadow: 0 2px 16px rgba(16,163,127,0.28) !important;
    letter-spacing: -0.01em !important;
  }

  /* ── BOT MESSAGES ── */
  .message.bot {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    padding: 14px 0 !important;
    color: #e0e0e0 !important;
    letter-spacing: -0.008em !important;
  }

  .message.bot p {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    margin-bottom: 12px !important;
  }

  /* ── APP OFFSET for new header height ── */
  .app {
    padding-top: 56px !important;
  }

  /* ── INPUT AREA — flagship design ── */
  .input-area,
  .input-area.center,
  .input-area.bottom {
    bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    padding: 10px 14px 12px 14px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(24, 24, 24, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.05) !important;
    gap: 0 !important;
    position: fixed !important;
    z-index: 200 !important;
  }

  /* Pill handle removed — floating box no longer needs a drag hint */
  .input-area::before {
    content: none;
    display: none;
  }

  .input-area:focus-within {
    border-color: rgba(16,163,127,0.35) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 1px 0 rgba(16,163,127,0.2) !important;
  }

  .input-row-top {
    margin-bottom: 8px !important;
  }

  #input {
    font-size: 15px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    line-height: 1.55 !important;
    min-height: 22px !important;
    max-height: 130px !important;
    letter-spacing: -0.01em !important;
    color: #efefef !important;
    caret-color: #10a37f !important;
  }

  #input::placeholder {
    color: #555 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
  }

  /* ── BOTTOM ROW of input ── */
  .input-row-bottom {
    gap: 6px !important;
    align-items: center !important;
  }

  /* ── PLUS BUTTON ── */
  .plus-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #888 !important;
  }

  .plus-btn:active {
    background: rgba(255,255,255,0.12) !important;
    transform: scale(0.92) !important;
  }

  /* ── SEND BUTTON ── */
  .send-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #12b58c, #0d8f6e) !important;
    box-shadow: 0 2px 12px rgba(16,163,127,0.45) !important;
  }

  .send-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: scale(1) !important;
    box-shadow: none !important;
    filter: saturate(0.4) brightness(0.85) !important;
    background: linear-gradient(145deg, #12b58c, #0d8f6e) !important;
  }

  .send-btn:disabled:hover,
  .send-btn:disabled:active {
    transform: scale(1) !important;
    box-shadow: none !important;
  }

  .send-btn:active {
    transform: scale(0.9) !important;
    box-shadow: 0 1px 6px rgba(16,163,127,0.3) !important;
  }

  /* ── MODEL SELECTOR BUTTON ── */
  .model-selector-btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #777 !important;
    padding: 6px 8px !important;
    min-height: 34px !important;
    min-width: unset !important;
    border-radius: 10px !important;
    transition: color 0.2s, background 0.2s !important;
  }

  .model-selector-btn:active {
    background: rgba(255,255,255,0.06) !important;
  }

  .model-name {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  /* ── MODEL BOTTOM SHEET ── */
  .model-dropdown {
    background: #111111 !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: 24px 24px 0 0 !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .model-dropdown::before {
    background: rgba(255,255,255,0.18) !important;
    margin: 12px auto 8px !important;
  }

  .model-option {
    padding: 14px 18px !important;
    min-height: 62px !important;
    border-left: 3px solid transparent !important;
  }

  .model-option-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  .model-option-desc {
    font-size: 12px !important;
    color: #555 !important;
    margin-top: 3px !important;
  }

  .model-option.active .model-option-desc {
    color: #0d9c79 !important;
  }

  .model-more-row {
    padding: 15px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  /* ── MORE MODELS PANEL (also bottom sheet) ── */
  .model-more-panel {
    background: #111111 !important;
    border-radius: 24px 24px 0 0 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }

  .model-more-panel::before {
    background: rgba(255,255,255,0.18) !important;
    margin: 12px auto 8px !important;
  }

  .model-more-panel .model-option {
    padding: 14px 18px !important;
    min-height: 62px !important;
  }

  .model-more-back-btn {
    font-size: 14px !important;
    padding: 15px 18px !important;
    letter-spacing: -0.01em !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }

  /* ── PLUS DROPDOWN ── */
  .plus-dropdown {
    background: #161616 !important;
    border-color: rgba(255,255,255,0.09) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    min-width: 210px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7) !important;
    bottom: 46px !important;
  }

  .plus-dropdown-item {
    padding: 11px 12px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    letter-spacing: -0.01em !important;
    min-height: unset !important;
  }

  .plus-item-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,0.07) !important;
  }

  /* ── SIDEBAR MOBILE ── */
  .sidebar {
    left: -290px !important;
    width: 280px !important;
    background: linear-gradient(160deg, #0e0e0e 0%, #111 100%) !important;
  }

  .sidebar.open {
    left: 0 !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.7) !important;
  }

  .sidebar-header {
    padding: 14px 12px 14px 10px !important;
    background: rgba(12,12,12,0.6) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }

  .sidebar-brand {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }

  .sidebar-item {
    padding: 12px 14px !important;
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
    border-radius: 12px !important;
    min-height: unset !important;
    min-width: unset !important;
  }

  .sidebar-overlay {
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  /* ── HISTORY ITEMS ── */
  .history-title {
    font-size: 13.5px !important;
    letter-spacing: -0.01em !important;
  }

  .history-date {
    font-size: 11px !important;
  }

  /* ── TOAST ── */
  #toastNotif {
    bottom: 130px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    padding: 11px 18px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    background: rgba(28,28,28,0.95) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  }

  /* ── COPY BUTTON ── */
  .bot-copy-btn {
    font-size: 11.5px !important;
    padding: 5px 12px !important;
    border-radius: 9px !important;
    letter-spacing: -0.01em !important;
    font-weight: 500 !important;
    min-width: unset !important;
    min-height: unset !important;
    height: auto !important;
  }

  /* ── CODE BLOCKS ── */
  .code-block {
    border-radius: 14px !important;
    margin: 12px 0 !important;
  }

  .code-header {
    padding: 9px 14px !important;
  }

  .code-block pre {
    padding: 14px !important;
    font-size: 12.5px !important;
  }

  /* ── SETTINGS PANEL MOBILE ── */
  .settings-panel-wrap {
    padding: 56px 16px 24px !important;
  }

  .settings-nav-item {
    font-size: 13px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    letter-spacing: -0.01em !important;
    min-height: unset !important;
    min-width: unset !important;
  }

  /* ── DISCLAIMER ── */
  .chat-disclaimer {
    font-size: 11px !important;
    padding: 4px 16px 8px !important;
    letter-spacing: -0.005em !important;
  }

  /* ── CHAT BOTTOM SAFE AREA ── */
  #chatbox {
    bottom: 118px !important;
  }

  /* ── WELCOME SCREEN ── */
  .welcome {
    width: 88% !important;
    top: 26% !important;
  }

  .welcome h1 {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
  }

  .welcome p {
    font-size: 14px !important;
    color: #666 !important;
    letter-spacing: -0.01em !important;
  }

  .suggestions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .card {
    font-size: 12.5px !important;
    padding: 12px 13px !important;
    border-radius: 14px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.45 !important;
    border-color: rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.04) !important;
    min-height: unset !important;
    min-width: unset !important;
  }

  .card:active {
    transform: scale(0.97) !important;
    background: rgba(16,163,127,0.08) !important;
    border-color: rgba(16,163,127,0.3) !important;
  }

  /* ── USER MESSAGE WRAPPER ── */
  .user-msg-wrapper {
    margin-bottom: 6px !important;
  }

  /* ── SOURCE CHIPS ── */
  .source-chip {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  /* ── TOOL BADGE ── */
  .tool-badge {
    font-size: 11px !important;
    padding: 3px 9px 3px 6px !important;
  }

  /* ── BOT ACTIONS ── */
  .bot-actions {
    padding: 4px 0 10px 0 !important;
    gap: 6px !important;
  }

  /* ── FILE UPLOAD CARDS ── */
  .af-card--image {
    width: 72px !important;
  }
  .af-card-img-wrap, .af-card-img {
    width: 72px !important;
    height: 56px !important;
  }

  /* ── TOUCH TARGETS — only for actual buttons ── */
  .send-btn,
  .plus-btn,
  .mobile-hamburger,
  .mobile-header-new,
  .model-selector-btn {
    min-width: 34px;
    min-height: 34px;
  }
}

/* ── Light theme mobile tweaks ── */
@media (max-width: 768px) {
  [data-theme="light"] .mobile-header {
    background: transparent !important;
    border-bottom: none !important;
  }

  [data-theme="light"] .input-area,
  [data-theme="light"] .input-area.center,
  [data-theme="light"] .input-area.bottom {
    background: rgba(255,255,255,0.98) !important;
    border-top-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 -12px 40px rgba(0,0,0,0.08), 0 -1px 0 rgba(0,0,0,0.06) !important;
  }

  [data-theme="light"] .input-area::before {
    background: rgba(0,0,0,0.12);
  }

  [data-theme="light"] .input-area:focus-within {
    border-top-color: rgba(16,163,127,0.4) !important;
  }

  [data-theme="light"] .plus-btn {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #888 !important;
  }

  [data-theme="light"] .card {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.08) !important;
  }

  [data-theme="light"] .model-dropdown {
    background: #fafafa !important;
  }

  [data-theme="light"] .model-more-panel {
    background: #fafafa !important;
  }

  [data-theme="light"] #toastNotif {
    background: rgba(255,255,255,0.97) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #111 !important;
  }
}


/* ============================================================
   📱 MOBILE FIX PATCH v3 — 4 targeted issues
   ============================================================ */

/* ── FIX 1: Input box height — slightly taller, less cramped ── */
@media (max-width: 768px) {
  #input {
    min-height: 28px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .input-row-top {
    min-height: 28px !important;
  }

  /* Slightly more padding so the input area feels roomier */
  .input-area,
  .input-area.center,
  .input-area.bottom {
    padding: 12px 14px 14px 14px !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
  }
}

/* ── FIX 2: Disclaimer — Claude-style inline at bottom of each response ── */

/* Hide the static bottom disclaimer bar entirely */
.chat-disclaimer {
  display: none !important;
}

/* ── Static input disclaimer — desktop only ── */
.input-static-disclaimer {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 0 4px 0;
  font-size: 11.5px;
  color: #555;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

/* Only show after first message — when input-area has .bottom class */
.input-area.bottom ~ .input-static-disclaimer {
  display: flex;
}

.input-static-disclaimer span {
  color: #555;
}

[data-theme="light"] .input-static-disclaimer,
[data-theme="light"] .input-static-disclaimer span {
  color: #aab0c0;
}

/* The per-response disclaimer lives inside each bot-msg-wrapper */
.bot-response-disclaimer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 10px 0;
  font-size: 11.5px;
  color: #444;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.bot-response-disclaimer svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.bot-response-disclaimer span {
  color: #484848;
}

[data-theme="light"] .bot-response-disclaimer {
  color: #aab0c0;
}

[data-theme="light"] .bot-response-disclaimer span {
  color: #aab0c0;
}

/* ── FIX 3: Remove border/ring from header logo ── */
.mobile-header-logo {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.sidebar-logo {
  box-shadow: none !important;
  border: none !important;
}

/* ── FIX 4: Copy button — small icon-only, user messages flush right ── */

/* Make the Copy button icon-only and compact */
.bot-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  border-radius: 8px;
  background: transparent;
  border: 1px solid #252525;
  color: #555;
  cursor: pointer;
  font-size: 0 !important;      /* hide "Copy" text */
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

/* Show tooltip-style text on hover for desktop */
.bot-copy-btn:hover {
  background: #1e1e1e;
  color: #ccc;
  border-color: #333;
}

.bot-copy-btn.copied {
  color: #10a37f;
  border-color: #10a37f44;
}

/* Keep icon visible */
.bot-copy-btn svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

/* Light theme */
[data-theme="light"] .bot-copy-btn {
  border-color: #dde1eb;
  color: #9aa0b5;
}
[data-theme="light"] .bot-copy-btn:hover {
  background: #f4f6fb;
  color: #3d4455;
  border-color: #c8cdd9;
}

/* User messages — always flush right, no left margin waste */
.user-msg-wrapper {
  justify-content: flex-end !important;
  width: 100% !important;
  padding-left: 0 !important;
}

.message.user {
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: flex-end !important;
}

@media (max-width: 768px) {
  .message.user {
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .bot-copy-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }

  .bot-actions {
    padding: 4px 0 8px 0 !important;
    gap: 6px !important;
  }

  /* Disclaimer inside each response on mobile */
  .bot-response-disclaimer {
    font-size: 11px !important;
    padding: 4px 0 8px 0 !important;
    gap: 5px !important;
  }

  /* ── User message action buttons — mobile redesign ── */
  /* Wrapper becomes column so buttons sit BELOW the bubble, not beside it */
  .user-msg-wrapper {
    flex-direction: column !important;
    align-items: flex-end !important;
  }

  .user-btn-group {
    align-self: flex-end !important;
    margin-top: 2px !important;
    gap: 3px !important;
  }

  /* Both action buttons: small, below-right, always slightly visible on mobile */
  .user-copy-btn,
  .user-edit-btn {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    opacity: 0.45 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* Tap to make fully visible */
  .user-copy-btn:active,
  .user-copy-btn.copied,
  .user-edit-btn:active {
    opacity: 1 !important;
  }

  /* SVG icon slightly smaller */
  .user-copy-btn svg,
  .user-edit-btn svg {
    width: 11px !important;
    height: 11px !important;
  }
}

/* ── Disclaimer visibility: desktop vs mobile ── */
/* On desktop: hide per-response disclaimers, show static input one */
@media (min-width: 769px) {
  .bot-response-disclaimer {
    display: none !important;
  }
}

/* On mobile: hide static input disclaimer, show per-response one */
@media (max-width: 768px) {
  .input-static-disclaimer {
    display: none !important;
  }
}

/* ── CHANGE PASSWORD MODAL ─────────────────────────────────────────────────── */
.chpw-modal-box {
    max-width: 420px;
    width: 100%;
    padding: 32px 28px 28px;
}
.chpw-modal-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(16,163,127,0.08);
    border: 1px solid rgba(16,163,127,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.chpw-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #e8eaf0;
    text-align: center;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.chpw-modal-desc {
    font-size: 13px;
    color: #7a8399;
    text-align: center;
    margin: 0 0 22px;
    line-height: 1.5;
}
.chpw-field-wrap {
    margin-bottom: 14px;
}
.chpw-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #9aa0b5;
    margin-bottom: 6px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.chpw-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.chpw-input {
    width: 100%;
    padding: 10px 40px 10px 12px;
    background: #181818;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #e8eaf0;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}
.chpw-input:focus {
    border-color: rgba(16,163,127,0.5);
}
.chpw-input::placeholder { color: #444; }
.chpw-eye-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 2px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.chpw-eye-btn:hover { color: #aaa; }
.chpw-error {
    font-size: 12px;
    color: #e06c6c;
    margin: -6px 0 10px;
    padding: 0;
}
.chpw-save-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    background: #10a37f;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    font-family: inherit;
}
.chpw-save-btn:hover:not(:disabled) { background: #0d8f6f; }
.chpw-save-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Light theme */
[data-theme="light"] .chpw-modal-box { background: #ffffff; border-color: #e4e7ef; }
[data-theme="light"] .chpw-modal-title { color: #0f1117; }
[data-theme="light"] .chpw-modal-desc { color: #7a8399; }
[data-theme="light"] .chpw-input { background: #f9fafb; border-color: #dde1eb; color: #0f1117; }
[data-theme="light"] .chpw-input::placeholder { color: #c8cdd9; }
[data-theme="light"] .chpw-label { color: #7a8399; }

/* Mobile */
@media (max-width: 480px) {
    .chpw-modal-box { padding: 24px 18px 20px; }
}

/* ── CHANGE PASSWORD — OTP step additions ──────────────────────────────────── */
.chpw-otp-input {
    letter-spacing: 8px;
    font-size: 22px !important;
    font-weight: 700;
    text-align: center;
    padding: 14px 12px !important;
}
.chpw-resend-row {
    margin: 12px 0 0;
    font-size: 13px;
    color: #666;
    text-align: center;
}
.chpw-resend-btn {
    background: none;
    border: none;
    color: #10a37f;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.chpw-resend-btn:hover { color: #0d8f6f; }
.chpw-resend-btn:disabled { color: #555; cursor: default; text-decoration: none; }

/* ============================
   👻 GHOST CHAT BUTTON & MODE
   ============================ */

/* Ghost button — top right of chat area */
.ghost-chat-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    letter-spacing: 0.01em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 👻 Only show the Ghost button on a fresh, empty "New Chat" screen —
   once a message has been sent (app leaves greeting-mode) it fades out,
   and it reappears the instant a brand-new chat is started. */
.app:not(.greeting-mode) .ghost-chat-btn {
    opacity: 0;
    transform: translateY(-6px) scale(0.92);
    pointer-events: none;
}
.ghost-chat-btn:hover {
    background: rgba(160,190,255,0.08);
    border-color: rgba(160,190,255,0.2);
    color: #aac4ff;
}
.ghost-chat-btn.ghost-active {
    background: rgba(100,140,255,0.14);
    border-color: rgba(120,160,255,0.4);
    color: #a8c4ff;
    box-shadow: 0 0 12px rgba(100,140,255,0.2), inset 0 0 8px rgba(100,140,255,0.06);
}
.ghost-chat-btn.ghost-active .ghost-icon-svg {
    filter: drop-shadow(0 0 5px rgba(120,160,255,0.6));
    animation: ghostFloat 3s ease-in-out infinite;
}
.ghost-label {
    font-size: 12px;
    font-weight: 500;
}

/* Floating ghost icon animation */
@keyframes ghostFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-2px); }
}

/* Ghost mode banner — below the button */
.ghost-banner {
    position: absolute;
    top: 52px;
    right: 16px;
    z-index: 119;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background: rgba(80,110,220,0.12);
    border: 1px solid rgba(120,160,255,0.22);
    border-radius: 20px;
    font-size: 11px;
    color: #8aaeff;
    font-weight: 500;
    letter-spacing: 0.01em;
    animation: ghostBannerIn 0.3s cubic-bezier(0.34,1.2,0.64,1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
@keyframes ghostBannerIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ghost mode — tint the chat area slightly */
.app.ghost-mode #chatbox {
    background: transparent;
}
/* Subtle ghostly overlay on input area when ghost mode is ON */
.app.ghost-mode .input-area {
    border-color: rgba(100,140,255,0.18) !important;
}
.app.ghost-mode .input-area textarea::placeholder {
    color: #5a6aaa;
}

/* Light theme adjustments */
[data-theme="light"] .ghost-chat-btn {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: #888;
}
[data-theme="light"] .ghost-chat-btn:hover {
    background: rgba(80,120,240,0.07);
    border-color: rgba(80,120,240,0.2);
    color: #4a6fd8;
}
[data-theme="light"] .ghost-chat-btn.ghost-active {
    background: rgba(80,120,240,0.1);
    border-color: rgba(80,120,240,0.35);
    color: #4a6fd8;
}
[data-theme="light"] .ghost-banner {
    background: rgba(80,120,240,0.07);
    border-color: rgba(80,120,240,0.2);
    color: #4a6fd8;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Hide the in-app floating ghost button on mobile — it's in the header now */
    .ghost-chat-btn {
        display: none !important;
    }
    .ghost-banner {
        top: 58px;
        right: 10px;
        font-size: 10px;
        padding: 4px 10px;
    }
}

/* ============================
   👻 GHOST MODE — RED ACCENTS
   Overrides green → red for
   greeting box + input area
   ============================ */

/* Input area border — idle */
.app.ghost-mode .input-area {
    border-color: #e0555533 !important;
}

/* Input area border — hover */
.app.ghost-mode .input-area:hover {
    border-color: #e0555555 !important;
    box-shadow: 0 4px 16px rgba(224, 85, 85, 0.15) !important;
}

/* Input area border — focused/typing */
.app.ghost-mode .input-area:focus-within {
    border-color: #e0555566 !important;
    box-shadow: 0 0 0 2px rgba(224, 85, 85, 0.12), 0 4px 20px rgba(224, 85, 85, 0.2) !important;
    background: linear-gradient(135deg, #1c1a1a 0%, #181616 100%) !important;
}

/* Send button — green → red */
.app.ghost-mode .send-btn {
    background: linear-gradient(135deg, #e05555 0%, #c03030 100%) !important;
    box-shadow: 0 2px 8px rgba(224, 85, 85, 0.35) !important;
}
.app.ghost-mode .send-btn:hover {
    background: linear-gradient(135deg, #e86060 0%, #cc3535 100%) !important;
    box-shadow: 0 4px 14px rgba(224, 85, 85, 0.5) !important;
}
.app.ghost-mode .send-btn:disabled {
    background: linear-gradient(135deg, #e05555 0%, #c03030 100%) !important;
    box-shadow: none !important;
    opacity: 0.35 !important;
    filter: saturate(0.4) brightness(0.85) !important;
    transform: scale(1) !important;
}
.app.ghost-mode .send-btn:disabled:hover {
    transform: scale(1) !important;
    box-shadow: none !important;
}

/* Stop ring spinner color */
.app.ghost-mode .stop-ring circle {
    stroke: #e05555 !important;
}

/* ============================
   📷 PROFILE PICTURE FEATURE
============================ */

/* Wrap around the sc-avatar in settings profile card */
.sc-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
}

.sc-avatar-wrap .sc-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.sc-avatar-wrap .sc-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
}

.sc-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
    color: #fff;
}

.sc-avatar-wrap:hover .sc-avatar-overlay { opacity: 1; }

/* Rail avatar with profile pic */
.rail-avatar {
    background-size: cover !important;
    background-position: center !important;
}

/* User avatar in sidebar bottom */
.user-avatar {
    background-size: cover !important;
    background-position: center !important;
}

/* ============================
   📷 CROP MODAL
============================ */

#profileCropModal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#profileCropModal.pcm-visible { opacity: 1; }

.pcm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pcm-dialog {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, #161616 0%, #1a1a1a 100%);
    border: 1px solid #2a2a2a;
    border-radius: 20px;
    padding: 28px 24px 24px;
    width: min(380px, calc(100vw - 32px));
    box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(16,163,127,0.08);
    transform: translateY(18px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#profileCropModal.pcm-visible .pcm-dialog {
    transform: translateY(0) scale(1);
}

.pcm-header { text-align: center; margin-bottom: 20px; }
.pcm-title {
    font-size: 16px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 5px;
    letter-spacing: -0.3px;
}
.pcm-subtitle {
    font-size: 12px;
    color: #555;
    margin: 0;
}

.pcm-canvas-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.pcm-viewport {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #0d0d0d;
    cursor: grab;
    border: 2.5px solid #10a37f;
    box-shadow: 0 0 0 6px rgba(16,163,127,0.1), 0 0 40px rgba(16,163,127,0.15);
    flex-shrink: 0;
}

.pcm-viewport:active { cursor: grabbing; }

.pcm-img-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.pcm-img-stage img {
    max-width: none;
    max-height: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    transform-origin: center center;
}

.pcm-circle-mask {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid #10a37f;
    pointer-events: none;
    z-index: 4;
}

.pcm-crosshair {
    position: absolute;
    background: rgba(16,163,127,0.2);
    pointer-events: none;
    z-index: 3;
}
.pcm-ch-h { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.pcm-ch-v { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }

.pcm-zoom-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    color: #555;
}

.pcm-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #2a2a2a;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.pcm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #10a37f;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(16,163,127,0.2);
    transition: box-shadow 0.2s;
}

.pcm-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(16,163,127,0.3);
}

.pcm-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.pcm-btn {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: inherit;
    letter-spacing: 0.2px;
}

.pcm-cancel {
    background: #1e1e1e;
    color: #888;
    border: 1px solid #2a2a2a;
}
.pcm-cancel:hover {
    background: #252525;
    color: #bbb;
    border-color: #3a3a3a;
}
.pcm-cancel:active { transform: scale(0.97); }

.pcm-keep {
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(16,163,127,0.35);
}
.pcm-keep:hover {
    background: linear-gradient(135deg, #12b48e 0%, #0f9b7a 100%);
    box-shadow: 0 6px 20px rgba(16,163,127,0.45);
    transform: translateY(-1px);
}
.pcm-keep:active { transform: scale(0.97) translateY(0); }

/* Light theme */
[data-theme="light"] .pcm-dialog {
    background: linear-gradient(160deg, #fafbfc 0%, #f4f6fb 100%);
    border-color: #dde1eb;
    box-shadow: 0 32px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(16,163,127,0.08);
}
[data-theme="light"] .pcm-title { color: #0f1117; }
[data-theme="light"] .pcm-subtitle { color: #9aa0b3; }
[data-theme="light"] .pcm-viewport { background: #e8eaf0; }
[data-theme="light"] .pcm-cancel { background: #f0f2f7; color: #6b7280; border-color: #dde1eb; }
[data-theme="light"] .pcm-cancel:hover { background: #e8eaf0; color: #374151; }
[data-theme="light"] .pcm-slider { background: #dde1eb; }


/* ============================
   🎨 UNIVERSAL MODAL SYSTEM
   Replaces all browser confirm/prompt/alert
============================ */

#catura-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

#catura-modal-overlay.cm-visible { opacity: 1; }

.cm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cm-dialog {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, #181818 0%, #1c1c1c 100%);
    border: 1px solid #2a2a2a;
    border-radius: 18px;
    padding: 24px 22px 20px;
    width: min(420px, calc(100vw - 32px));
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 24px 72px rgba(0,0,0,0.65),
        0 4px 16px rgba(0,0,0,0.35);
    transform: translateY(14px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 0;
}

#catura-modal-overlay.cm-visible .cm-dialog {
    transform: translateY(0) scale(1);
}

.cm-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 14px;
}

.cm-body { margin-bottom: 20px; }

.cm-title {
    font-size: 15px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 4px;
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.cm-subtitle {
    font-size: 13px;
    color: #666;
    margin: 0 0 2px;
    line-height: 1.4;
}

.cm-message {
    font-size: 12px;
    color: #555;
    margin: 8px 0 0;
    line-height: 1.5;
}

.cm-input-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cm-input {
    width: 100%;
    box-sizing: border-box;
    background: #111;
    border: 1.5px solid #2e2e2e;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    color: #eee;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 2px;
}

.cm-input:focus {
    border-color: #10a37f;
    box-shadow: 0 0 0 3px rgba(16,163,127,0.12);
}

.cm-input::placeholder { color: #3a3a3a; }

.cm-input-note {
    font-size: 11px;
    color: #444;
    margin: 8px 0 0;
    line-height: 1.5;
}

/* Divider line */
.cm-body + .cm-actions,
.cm-body .cm-input ~ .cm-actions {
    margin-top: 4px;
}

.cm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid #1e1e1e;
    margin-top: 4px;
}

.cm-btn {
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.cm-btn-cancel {
    background: #1e1e1e;
    color: #888;
    border: 1px solid #2a2a2a;
}
.cm-btn-cancel:hover { background: #262626; color: #bbb; border-color: #333; }
.cm-btn-cancel:active { transform: scale(0.97); }

.cm-btn-confirm {
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    color: #fff;
    box-shadow: 0 3px 12px rgba(16,163,127,0.3);
}
.cm-btn-confirm:hover {
    background: linear-gradient(135deg, #12b48e 0%, #0f9b7a 100%);
    box-shadow: 0 5px 16px rgba(16,163,127,0.4);
    transform: translateY(-1px);
}
.cm-btn-confirm:active { transform: scale(0.97) translateY(0); }

.cm-btn-danger {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    color: #fff;
    box-shadow: 0 3px 12px rgba(192,57,43,0.3);
}
.cm-btn-danger:hover {
    background: linear-gradient(135deg, #d44333 0%, #c0392b 100%);
    box-shadow: 0 5px 16px rgba(192,57,43,0.4);
    transform: translateY(-1px);
}
.cm-btn-danger:active { transform: scale(0.97) translateY(0); }

/* Light theme */
[data-theme="light"] .cm-dialog {
    background: linear-gradient(160deg, #fafbfc 0%, #f4f6fb 100%);
    border-color: #dde1eb;
    box-shadow: 0 24px 72px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .cm-backdrop { background: rgba(0,0,0,0.45); }
[data-theme="light"] .cm-title { color: #0f1117; }
[data-theme="light"] .cm-subtitle { color: #9aa0b3; }
[data-theme="light"] .cm-message { color: #b0b7c8; }
[data-theme="light"] .cm-actions { border-top-color: #e8eaf0; }
[data-theme="light"] .cm-btn-cancel { background: #f0f2f7; color: #6b7280; border-color: #dde1eb; }
[data-theme="light"] .cm-btn-cancel:hover { background: #e8eaf0; color: #374151; }
[data-theme="light"] .cm-input { background: #fff; border-color: #dde1eb; color: #0f1117; }
[data-theme="light"] .cm-input:focus { border-color: #10a37f; }
[data-theme="light"] .cm-input::placeholder { color: #c4c9d8; }
[data-theme="light"] .cm-input-note { color: #9aa0b3; }
[data-theme="light"] .cm-input-label { color: #9aa0b3; }

/* Mobile */
@media (max-width: 480px) {
    .cm-actions { flex-direction: column-reverse; }
    .cm-btn { width: 100%; justify-content: center; height: 44px; }
}


/* ============================================================
   🗄️ ARCHIVE CHATS MODAL
   Reuses the universal modal (.cm-) visual language
   ============================================================ */

#archive-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#archive-modal-overlay.cm-visible { opacity: 1; }

.archive-dialog {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, #181818 0%, #1c1c1c 100%);
    border: 1px solid #2a2a2a;
    border-radius: 18px;
    padding: 22px 22px 16px;
    width: min(460px, calc(100vw - 32px));
    max-height: min(600px, calc(100vh - 64px));
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 24px 72px rgba(0,0,0,0.65),
        0 4px 16px rgba(0,0,0,0.35);
    transform: translateY(14px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 0;
}
#archive-modal-overlay.cm-visible .archive-dialog {
    transform: translateY(0) scale(1);
}

.archive-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.archive-modal-title-wrap { min-width: 0; }
.archive-modal-title-wrap .cm-title { margin: 0 0 4px; }
.archive-modal-title-wrap .cm-subtitle { margin: 0; }

.archive-modal-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #2a2a2a;
    background: #1e1e1e;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
}
.archive-modal-close:hover { background: #262626; color: #ddd; border-color: #333; }
.archive-modal-close:active { transform: scale(0.94); }

/* Top-right action pair: Restore selected (left) / Delete selected (right) */
.archive-modal-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #1e1e1e;
}
.archive-tool-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid #2a2a2a;
    background: #1e1e1e;
    color: #aaa;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.18s ease;
}
.archive-tool-btn.restore:not(:disabled):hover {
    background: rgba(16,163,127,0.12);
    border-color: rgba(16,163,127,0.35);
    color: #2ecda7;
}
.archive-tool-btn.delete:not(:disabled):hover {
    background: rgba(224,108,108,0.12);
    border-color: rgba(224,108,108,0.35);
    color: #e06c6c;
}
.archive-tool-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.archive-tool-btn:active:not(:disabled) { transform: scale(0.96); }

.archive-list {
    overflow-y: auto;
    flex: 1;
    min-height: 60px;
    margin: 0 -6px;
    padding: 0 6px;
}

.archive-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 10px;
    transition: background 0.15s ease;
}
.archive-item:hover { background: #202020; }
.archive-item.checked { background: rgba(16,163,127,0.08); }

.archive-checkbox-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}
.archive-checkbox {
    width: 17px;
    height: 17px;
    accent-color: #10a37f;
    cursor: pointer;
}

.archive-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.archive-item-title {
    font-size: 13.5px;
    color: #ddd;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.archive-item-date {
    font-size: 11.5px;
    color: #666;
}

@media (max-width: 480px) {
    .archive-modal-toolbar { flex-wrap: wrap; }
    .archive-tool-btn { flex: 1; justify-content: center; }
}

/* Light theme */
[data-theme="light"] .archive-dialog {
    background: linear-gradient(160deg, #fafbfc 0%, #f4f6fb 100%);
    border-color: #dde1eb;
    box-shadow: 0 24px 72px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .archive-modal-close { background: #f0f2f7; color: #6b7280; border-color: #dde1eb; }
[data-theme="light"] .archive-modal-close:hover { background: #e8eaf0; color: #374151; }
[data-theme="light"] .archive-modal-toolbar { border-bottom-color: #e8eaf0; }
[data-theme="light"] .archive-tool-btn { background: #f0f2f7; color: #6b7280; border-color: #dde1eb; }
[data-theme="light"] .archive-tool-btn.restore:not(:disabled):hover { background: rgba(16,163,127,0.1); border-color: rgba(16,163,127,0.3); color: #0d8c6d; }
[data-theme="light"] .archive-tool-btn.delete:not(:disabled):hover { background: rgba(192,57,43,0.08); border-color: rgba(192,57,43,0.3); color: #c0392b; }
[data-theme="light"] .archive-item:hover { background: #f4f6fb; }
[data-theme="light"] .archive-item.checked { background: rgba(16,163,127,0.08); }
[data-theme="light"] .archive-item-title { color: #0f1117; }
[data-theme="light"] .archive-item-date { color: #7a8399; }


/* ============================================================
   🔐 MFA MODAL STYLES
   ============================================================ */

.mfa-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mfa-modal-overlay.mfa-visible { opacity: 1; }

.mfa-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.mfa-dialog {
    position: relative;
    z-index: 1;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px;
    width: min(460px, calc(100vw - 32px));
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    transform: translateY(8px);
    transition: transform 0.25s ease;
}
.mfa-modal-overlay.mfa-visible .mfa-dialog { transform: translateY(0); }

.mfa-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #aaa;
    transition: background 0.2s, color 0.2s;
}
.mfa-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

.mfa-header { text-align: center; margin-bottom: 22px; }

.mfa-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(16,163,127,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.mfa-title {
    font-size: 18px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 6px;
}

.mfa-subtitle {
    font-size: 13px;
    color: #888;
    margin: 0;
    line-height: 1.5;
}

.mfa-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
    font-weight: 500;
}
.mfa-status-on {
    background: rgba(16,163,127,0.1);
    color: #10a37f;
    border: 1px solid rgba(16,163,127,0.2);
}
.mfa-status-off {
    background: rgba(255,200,80,0.08);
    color: #c8a84b;
    border: 1px solid rgba(255,200,80,0.15);
}

.mfa-info-text {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin: 0 0 18px;
}

.mfa-step-label {
    font-size: 13px;
    color: #aaa;
    font-weight: 500;
    margin: 0 0 10px;
}

.mfa-qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px;
}
.mfa-qr-wrap svg { width: 180px; height: 180px; display: block; }

.mfa-secret-details {
    margin-bottom: 10px;
    font-size: 13px;
    color: #888;
}
.mfa-secret-details summary {
    cursor: pointer;
    color: #10a37f;
    user-select: none;
    margin-bottom: 8px;
}
.mfa-secret-code {
    display: block;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #ccc;
    word-break: break-all;
    margin-bottom: 8px;
}
.mfa-copy-secret {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #888;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.mfa-copy-secret:hover { color: #ccc; border-color: rgba(255,255,255,0.25); }

.mfa-otp-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.mfa-otp-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 20px;
    letter-spacing: 0.3em;
    color: #f0f0f0;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
    font-family: monospace;
}
.mfa-otp-input:focus { border-color: #10a37f; }
.mfa-otp-input::placeholder { color: #444; letter-spacing: normal; }

.mfa-btn {
    padding: 11px 20px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.mfa-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.mfa-btn-primary {
    background: #10a37f;
    color: #fff;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}
.mfa-btn-primary:hover:not(:disabled) { background: #0d8f6f; }

.mfa-btn-danger {
    background: rgba(224,108,108,0.15);
    color: #e06c6c;
    border: 1px solid rgba(224,108,108,0.25);
    width: 100%;
    justify-content: center;
}
.mfa-btn-danger:hover:not(:disabled) { background: rgba(224,108,108,0.25); }

.mfa-error {
    color: #e06c6c;
    font-size: 13px;
    margin-top: 10px;
    background: rgba(224,108,108,0.08);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(224,108,108,0.15);
}

.mfa-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 0;
    color: #888;
    font-size: 14px;
}
.mfa-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: #10a37f;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.mfa-success-wrap {
    text-align: center;
    padding: 12px 0 4px;
}
.mfa-success-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(16,163,127,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.mfa-success-title {
    font-size: 18px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 8px;
}
.mfa-success-desc {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin: 0 0 20px;
}

/* Light theme overrides */
[data-theme="light"] .mfa-dialog {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .mfa-title { color: #0f1117; }
[data-theme="light"] .mfa-subtitle { color: #7a8399; }
[data-theme="light"] .mfa-info-text { color: #555; }
[data-theme="light"] .mfa-step-label { color: #555; }
[data-theme="light"] .mfa-otp-input {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
    color: #0f1117;
}
[data-theme="light"] .mfa-otp-input:focus { border-color: #10a37f; }
[data-theme="light"] .mfa-secret-code { background: rgba(0,0,0,0.05); color: #333; }
[data-theme="light"] .mfa-close-btn { color: #555; background: rgba(0,0,0,0.05); }
[data-theme="light"] .mfa-close-btn:hover { background: rgba(0,0,0,0.1); color: #0f1117; }
[data-theme="light"] .mfa-success-title { color: #0f1117; }

/* ================================================================
   ☀️ COMPREHENSIVE LIGHT THEME FIX — v2 COMPLETE REWRITE
   Fixes ALL components including mobile, modals, dropdowns
   Uses specificity + !important where mobile rules override
================================================================ */

/* ── Transition for smooth theme switching ── */
body,
.app,
.icon-rail,
.input-area,
.message.bot,
.message.user,
.sidebar-item,
.settings-overlay,
.modal,
.card,
.code-block,
#toastNotif {
    transition:
        background 0.22s ease,
        background-color 0.22s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

/* Sidebar gets its own transition so the slide animation isn't overridden */
/* Slight spring/bounce on open — subtle overshoot via cubic-bezier */
.sidebar {
    transition:
        transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
        left 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
        margin-left 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.32s ease,
        background 0.22s ease,
        border-color 0.2s ease !important;
}

/* ── BASE ── */
[data-theme="light"] body {
    background: #f7f8fa;
    color: #0f1117;
}
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c8cdd9; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #10a37f; }

/* ── APP SHELL ── */
[data-theme="light"] .app {
    background: #f7f8fa;
}
[data-theme="light"] #chatbox::-webkit-scrollbar-thumb { background: #c8cdd9; }

/* ── ICON RAIL ── */
[data-theme="light"] .icon-rail {
    background: #f0f2f7;
    border-color: #e2e5ed;
}
[data-theme="light"] .rail-btn {
    color: #7a8399;
}
[data-theme="light"] .rail-btn:hover {
    background: #e4e7f0;
    color: #0f1117;
}
[data-theme="light"] .rail-divider { background: #e2e5ed; }
[data-theme="light"] .rail-logout:hover { background: rgba(192,57,43,0.08); color: #c0392b; }

/* ── SIDEBAR ── */
[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}
[data-theme="light"] .sidebar.open {
    border-color: #e8eaed;
    box-shadow: 2px 0 12px rgba(0,0,0,0.06);
}
[data-theme="light"] .sidebar-header {
    background: rgba(255,255,255,0.9);
    border-bottom-color: #eaecf0;
}
[data-theme="light"] .sidebar-brand { color: #0f1117; }
[data-theme="light"] .sidebar-inner-toggle { color: #7a8399; }
[data-theme="light"] .sidebar-inner-toggle:hover {
    background: #f0f2f7;
    color: #0f1117;
}
[data-theme="light"] .sidebar-menu { background: transparent; }
[data-theme="light"] .sidebar-bottom {
    background: rgba(248,249,252,0.9);
    border-top-color: #eaecf0;
}
[data-theme="light"] .sidebar-item {
    color: #3d4455;
}
[data-theme="light"] .sidebar-item:hover {
    background: linear-gradient(90deg, rgba(16,163,127,0.08) 0%, transparent 100%);
    color: #0f1117;
}
[data-theme="light"] .sidebar-item.logout { color: #c0392b; }
[data-theme="light"] .sidebar-item.logout:hover {
    background: rgba(192,57,43,0.07);
    color: #e74c3c;
}

/* ── HISTORY ── */
[data-theme="light"] .history-title { color: #0f1117; }
[data-theme="light"] .history-date { color: #7a8399; }
[data-theme="light"] .history-header {
    color: #7a8399;
    border-bottom-color: #eaecf0;
}
[data-theme="light"] .no-history { color: #7a8399; }
[data-theme="light"] .history-accordion-trigger .history-accordion-arrow { color: #aab0c0; }
[data-theme="light"] .history-menu-btn { color: #7a8399; }
[data-theme="light"] .history-menu-btn:hover { background: #eef0f5; color: #0f1117; }
[data-theme="light"] .history-dropdown {
    background: #ffffff;
    border-color: #e4e7ef;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
[data-theme="light"] .history-dropdown-item { color: #3d4455; }
[data-theme="light"] .history-dropdown-item:hover { background: #f4f6fb; color: #0f1117; }
[data-theme="light"] .history-dropdown-item.danger { color: #c0392b; }
[data-theme="light"] .history-dropdown-item.danger:hover {
    background: rgba(192,57,43,0.06);
    color: #e74c3c;
}

/* ── HISTORY SEARCH ── */
[data-theme="light"] .history-search-inner {
    background: #f4f5f7;
    border-color: #dde0e8;
}
[data-theme="light"] .history-search-inner:focus-within {
    border-color: rgba(16,163,127,0.5);
    box-shadow: 0 0 0 2px rgba(16,163,127,0.1);
}
[data-theme="light"] .history-search-input { color: #333; }
[data-theme="light"] .history-search-input::placeholder { color: #aab0c0; }
[data-theme="light"] .history-search-icon { color: #aab0c0; }
[data-theme="light"] .history-search-clear { color: #aab0c0; }
[data-theme="light"] .history-search-clear:hover { color: #555; }
[data-theme="light"] .history-no-results { color: #aab0c0; }

/* ── USER PROFILE AREA ── */
[data-theme="light"] .user-profile {
    background: linear-gradient(135deg, #f4f6fb 0%, #f0f2f7 100%);
    border-color: #e4e7ef;
}
[data-theme="light"] .user-profile:hover {
    border-color: rgba(16,163,127,0.4);
    background: linear-gradient(135deg, #f0f7f4 0%, #edf7f3 100%);
}
[data-theme="light"] .user-profile.active { border-color: rgba(16,163,127,0.6); }
[data-theme="light"] .user-fullname { color: #3d4455; }
[data-theme="light"] .user-profile-chevron { color: #aab0c0; }
[data-theme="light"] .user-dropdown {
    background: #ffffff;
    border-color: #e4e7ef;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.1);
}
[data-theme="light"] .user-dropdown-item { color: #3d4455; }
[data-theme="light"] .user-dropdown-item:hover { background: #f4f6fb; color: #0f1117; }
[data-theme="light"] .user-dropdown-item.danger { color: #c0392b; }
[data-theme="light"] .user-dropdown-item.danger:hover {
    background: rgba(192,57,43,0.06);
    color: #e74c3c;
}
[data-theme="light"] .user-dropdown-divider { background: #eaecf0; }

/* ── INPUT AREA ── */
[data-theme="light"] .input-area {
    background: #ffffff;
    border-color: #dde1eb;
    box-shadow: 0 2px 16px rgba(15,17,23,0.07), 0 0 0 1px rgba(0,0,0,0.02);
}
[data-theme="light"] .input-area:hover {
    border-color: #bcc3d6;
    box-shadow: 0 4px 20px rgba(15,17,23,0.09);
}
[data-theme="light"] .input-area:focus-within {
    border-color: rgba(16,163,127,0.55);
    box-shadow: 0 0 0 3px rgba(16,163,127,0.10), 0 4px 20px rgba(16,163,127,0.12);
    background: #ffffff;
}
[data-theme="light"] #input {
    background: transparent;
    color: #0f1117;
}
[data-theme="light"] #input::placeholder { color: #aab0c0; }

/* ── PLUS BUTTON & DROPDOWN ── */
[data-theme="light"] .plus-btn {
    background: #f0f2f7;
    border-color: #dde1eb;
    color: #7a8399;
}
[data-theme="light"] .plus-btn:hover {
    background: #e4e7f0;
    border-color: #bcc3d6;
    color: #3d4455;
}
[data-theme="light"] .plus-dropdown {
    background: #ffffff;
    border-color: #e4e7ef;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .plus-dropdown-item { color: #3d4455; }
[data-theme="light"] .plus-dropdown-item:hover { background: #f4f6fb; color: #0f1117; }
[data-theme="light"] .plus-item-icon { background: #f0f2f7; }
[data-theme="light"] .plus-dropdown-item:hover .plus-item-icon { background: rgba(16,163,127,0.1); }
[data-theme="light"] .plus-dropdown-divider { background: #eaecf0; }

/* ── MESSAGES ── */
[data-theme="light"] .message.user {
    background: linear-gradient(135deg, #10a37f 0%, #0d8c6d 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(16,163,127,0.25);
}
[data-theme="light"] .message.user:hover { box-shadow: 0 6px 18px rgba(16,163,127,0.35); }
[data-theme="light"] .message.bot {
    color: #1a1f2e;
    border-bottom-color: #eaecf0;
}
[data-theme="light"] .message.bot p { color: #2a3040; }
[data-theme="light"] .message.bot li { color: #2a3040; }
[data-theme="light"] .message.bot td { color: #2a3040; border-bottom-color: #eaecf0; }
[data-theme="light"] .message.bot h1,
[data-theme="light"] .message.bot h2,
[data-theme="light"] .message.bot h3,
[data-theme="light"] .message.bot h4,
[data-theme="light"] .message.bot h5,
[data-theme="light"] .message.bot h6 { color: #0f1117; }
[data-theme="light"] .message.bot h1 { border-bottom-color: rgba(16,163,127,0.25); }
[data-theme="light"] .message.bot h2 { border-bottom-color: #e8eaed; }
[data-theme="light"] .message.bot strong { color: #0f1117; }
[data-theme="light"] .message.bot em { color: #3d4455; }
[data-theme="light"] .message.bot s { color: #9aa0b5; }
[data-theme="light"] .message.bot a { color: #10a37f; border-bottom-color: rgba(16,163,127,0.4); }
[data-theme="light"] .message.bot ul li::marker { color: #10a37f; }
[data-theme="light"] .message.bot ol li::marker { color: #10a37f; }
[data-theme="light"] .message.bot blockquote {
    color: #5a6070;
    background: linear-gradient(90deg, rgba(16,163,127,0.06) 0%, transparent 80%);
}
[data-theme="light"] .message.bot blockquote p { color: #5a6070; }
[data-theme="light"] .message.bot hr { border-top-color: #e8eaed; }
[data-theme="light"] .message.bot .inline-code {
    background: #eef0f8;
    border-color: #dde1eb;
    color: #0a8a64;
}

/* ── TABLES ── */
[data-theme="light"] .message.bot .table-wrap {
    border-color: #e4e7ef;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .message.bot thead { background: #f4f6fb; }
[data-theme="light"] .message.bot th {
    color: #0f1117;
    border-bottom-color: rgba(16,163,127,0.3);
}
[data-theme="light"] .message.bot tbody tr:nth-child(even) td { background: #f9fafb; }
[data-theme="light"] .message.bot tbody tr:hover td { background: #f0f7f4; }

/* ── CODE BLOCKS ── */
[data-theme="light"] .code-block {
    background: #f8f9fb;
    border-color: #e2e5ed;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .code-block:hover {
    border-color: rgba(16,163,127,0.3);
    box-shadow: 0 4px 14px rgba(16,163,127,0.08);
}
[data-theme="light"] .code-header {
    background: linear-gradient(90deg, #f0f2f7 0%, #eef0f5 100%);
    border-bottom-color: #e2e5ed;
    color: #7a8399;
}
[data-theme="light"] .code-header .lang-label {
    color: #10a37f;
    background: rgba(16,163,127,0.08);
}
[data-theme="light"] .code-header button {
    border-color: #dde1eb;
    color: #7a8399;
    background: #ffffff;
}
[data-theme="light"] .code-header button:hover {
    background: rgba(16,163,127,0.07);
    color: #10a37f;
    border-color: rgba(16,163,127,0.3);
}
[data-theme="light"] .code-block pre { background: #f3f5f9; }
[data-theme="light"] .code-block code { color: #1e2a3a; }

/* ── THINKING / TYPING / SKELETON ── */
[data-theme="light"] .thinking-label { color: #9aa0b5; }
[data-theme="light"] .thinking-label .think-icon { background: #10a37f; }
[data-theme="light"] .typing-dots span { background: #c8cdd9; }
[data-theme="light"] .skeleton-line {
    background: linear-gradient(90deg,
        rgba(0,0,0,0.06) 25%,
        rgba(0,0,0,0.12) 50%,
        rgba(0,0,0,0.06) 75%
    );
    background-size: 200% 100%;
}

/* ── BOT & USER MESSAGE WRAPPERS ── */
[data-theme="light"] .bot-msg-wrapper { border-bottom-color: #eaecf0; }
[data-theme="light"] .bot-copy-btn {
    border-color: #dde1eb;
    color: #9aa0b5;
    background: transparent;
}
[data-theme="light"] .bot-copy-btn:hover {
    background: #f4f6fb;
    color: #3d4455;
    border-color: #c8cdd9;
}
[data-theme="light"] .bot-copy-btn.copied { color: #10a37f; border-color: rgba(16,163,127,0.4); }
[data-theme="light"] .user-copy-btn,
[data-theme="light"] .user-edit-btn {
    border-color: #dde1eb;
    color: #9aa0b5;
    background: transparent;
}
[data-theme="light"] .user-copy-btn:hover,
[data-theme="light"] .user-edit-btn:hover {
    background: #f4f6fb;
    color: #3d4455;
    border-color: #c8cdd9;
}
[data-theme="light"] .user-copy-btn.copied { color: #10a37f; border-color: rgba(16,163,127,0.4); }

/* ── WELCOME SCREEN ── */
[data-theme="light"] .welcome p { color: #7a8399; }
[data-theme="light"] .card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-color: #e4e7ef;
    color: #3d4455;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .card:hover {
    background: linear-gradient(135deg, #f0f7f4 0%, #edf9f5 100%);
    border-color: rgba(16,163,127,0.4);
    color: #0f1117;
    box-shadow: 0 8px 24px rgba(16,163,127,0.10);
}

/* ── TOAST ── */
[data-theme="light"] #toastNotif {
    background: #ffffff;
    color: #0f1117;
    border-color: #e4e7ef;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* ── SETTINGS OVERLAY ── */
[data-theme="light"] .settings-overlay {
    background: rgba(247,248,250,0.97);
    backdrop-filter: blur(6px);
}
[data-theme="light"] .settings-nav-title { color: #0f1117; }
[data-theme="light"] .settings-nav-item { color: #7a8399; }
[data-theme="light"] .settings-nav-item:hover { background: #f0f2f7; color: #0f1117; }
[data-theme="light"] .settings-nav-item.active {
    background: rgba(16,163,127,0.10);
    color: #10a37f;
}
[data-theme="light"] .settings-close-btn {
    border-color: #dde1eb;
    color: #7a8399;
}
[data-theme="light"] .settings-close-btn:hover {
    background: rgba(16,163,127,0.07);
    color: #10a37f;
    border-color: rgba(16,163,127,0.3);
}
[data-theme="light"] .sc-section-title { color: #9aa0b5; }
[data-theme="light"] .sc-section-desc { color: #9aa0b5; }
[data-theme="light"] .sc-profile-card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-color: #e4e7ef;
}
[data-theme="light"] .sc-profile-card:hover { border-color: rgba(16,163,127,0.3); }
[data-theme="light"] .sc-profile-name { color: #0f1117; }
[data-theme="light"] .sc-profile-email { color: #7a8399; }
[data-theme="light"] .sc-row {
    background: linear-gradient(90deg, #ffffff 0%, #fafbfc 100%);
    border-color: #e4e7ef;
}
[data-theme="light"] .sc-row:hover:not(.disabled) {
    background: linear-gradient(90deg, #f4f6fb 0%, #f0f7f4 100%);
    border-color: rgba(16,163,127,0.3);
}
[data-theme="light"] .sc-row-label { color: #0f1117; }
[data-theme="light"] .sc-row-sub { color: #7a8399; }
[data-theme="light"] .sc-row-icon-wrap { color: #9aa0b5; }
[data-theme="light"] .sc-divider { border-top-color: #eaecf0; }

/* ── THEME & FONT PICKERS ── */
[data-theme="light"] .theme-option {
    border-color: #dde1eb;
    color: #7a8399;
    background: #ffffff;
}
[data-theme="light"] .theme-option:hover { border-color: #9aa0b5; color: #3d4455; }
[data-theme="light"] .theme-option.active {
    border-color: #10a37f;
    color: #10a37f;
    background: rgba(16,163,127,0.07);
}
[data-theme="light"] .font-option {
    border-color: #dde1eb;
    color: #7a8399;
    background: #ffffff;
}
[data-theme="light"] .font-option:hover { border-color: #9aa0b5; color: #3d4455; }
[data-theme="light"] .font-option.active {
    border-color: #10a37f;
    color: #10a37f;
    background: rgba(16,163,127,0.07);
}
[data-theme="light"] .font-sample { color: #3d4455; }
[data-theme="light"] .font-option.active .font-sample { color: #10a37f; }

/* ── MODEL SELECTOR ── */
[data-theme="light"] .model-selector-btn { color: #9aa0b5; }
[data-theme="light"] .model-selector-btn:hover { color: #10a37f; }
[data-theme="light"] .model-selector-btn.open svg { color: #10a37f; }
[data-theme="light"] .model-dropdown {
    background: #ffffff;
    border-color: #dde1eb;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}
[data-theme="light"] .model-dropdown-header {
    background: #f4f5f8;
    color: #9aa0b5;
    border-bottom-color: #e5e8ef;
}
[data-theme="light"] .model-option { color: #3d4455; }
[data-theme="light"] .model-option:hover { background: #f0f2f7; color: #0f1117; }
[data-theme="light"] .model-option.active {
    background: rgba(16,163,127,0.08);
    color: #10a37f;
}
[data-theme="light"] .model-option-desc { color: #9aa0b5; }
[data-theme="light"] .model-option.active .model-option-desc { color: #10a37f; }
[data-theme="light"] .model-dropdown-divider { background: #e8eaed; }
[data-theme="light"] .model-more-row {
    color: #7a8399;
    border-top-color: #e5e8ef;
}
[data-theme="light"] .model-more-row:hover { background: #f0f2f7; color: #0f1117; }
[data-theme="light"] .model-more-panel {
    background: #ffffff;
    border-color: #dde1eb;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}
[data-theme="light"] .model-more-panel-title {
    color: #9aa0b5;
    border-bottom-color: #e8eaed;
}
[data-theme="light"] .model-more-panel .model-option:hover { background: #f0f2f7; }

/* ── CHAT DISCLAIMER ── */
[data-theme="light"] .chat-disclaimer { color: #aab0c0; }
[data-theme="light"] .input-static-disclaimer { color: #aab0c0; }
[data-theme="light"] .bot-response-disclaimer { color: #aab0c0; }
[data-theme="light"] .bot-response-disclaimer span { color: #aab0c0; }

/* ── SOURCE CHIPS & TOOL BADGE ── */
[data-theme="light"] .sources-section { border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sources-label { color: #7a8399; }
[data-theme="light"] .source-chip {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.10);
    color: #4a5568;
}
[data-theme="light"] .source-chip:hover {
    background: rgba(16,163,127,0.09);
    border-color: rgba(16,163,127,0.28);
    color: #0a8a64;
}
[data-theme="light"] .tool-badge {
    background: rgba(16,163,127,0.08);
    border-color: rgba(16,163,127,0.28);
    color: #0a8a64;
}
[data-theme="light"] .web-search-chip { color: #10a37f; }

/* ── SEARCH SKELETON ── */
[data-theme="light"] .search-skeleton-outer {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .search-skeleton-label { color: rgba(0,0,0,0.45); }
[data-theme="light"] .search-skeleton .skeleton-line {
    background: linear-gradient(90deg,
        rgba(0,0,0,0.06) 0%,
        rgba(0,0,0,0.12) 40%,
        rgba(0,0,0,0.06) 80%
    );
    background-size: 200% 100%;
}

/* ── FEEDBACK MODAL ── */
[data-theme="light"] .feedback-modal-overlay { background: rgba(15,17,23,0.35); }
[data-theme="light"] .feedback-modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-color: #e4e7ef;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
[data-theme="light"] .feedback-modal-header h2 { color: #0f1117; }
[data-theme="light"] .feedback-close-btn { color: #9aa0b5; }
[data-theme="light"] .feedback-close-btn:hover { background: #f0f2f7; color: #3d4455; }
[data-theme="light"] .form-group label { color: #7a8399; }
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea {
    background: #f9fafb;
    border-color: #dde1eb;
    color: #0f1117;
}
[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder { color: #aab0c0; }
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus {
    border-color: #10a37f;
    box-shadow: 0 0 0 3px rgba(16,163,127,0.10);
    background: #ffffff;
}

/* ── PRIVACY MODAL ── */
[data-theme="light"] .priv-modal-box,
[data-theme="light"] .del-modal-box {
    background: #ffffff;
    border-color: #e4e7ef;
    box-shadow: 0 24px 60px rgba(0,0,0,0.10);
}
[data-theme="light"] .priv-modal-header,
[data-theme="light"] .priv-modal-footer,
[data-theme="light"] .priv-contact { border-color: #eaecf0; }
[data-theme="light"] .priv-modal-title,
[data-theme="light"] .priv-item-title,
[data-theme="light"] .del-modal-title { color: #0f1117; }
[data-theme="light"] .priv-intro,
[data-theme="light"] .priv-item-text,
[data-theme="light"] .del-modal-desc { color: #7a8399; }
[data-theme="light"] .priv-modal-close { color: #9aa0b5; }
[data-theme="light"] .priv-modal-close:hover { background: #f0f2f7; color: #3d4455; }
[data-theme="light"] .priv-close-btn,
[data-theme="light"] .del-cancel-btn {
    background: #f4f6fb;
    border-color: #dde1eb;
    color: #3d4455;
}
[data-theme="light"] .priv-close-btn:hover,
[data-theme="light"] .del-cancel-btn:hover {
    background: #eaecf5;
    border-color: #c8cdd9;
}
[data-theme="light"] .del-confirm-input {
    background: #f9fafb;
    border-color: #dde1eb;
    color: #0f1117;
}
[data-theme="light"] .del-confirm-input::placeholder { color: #c8cdd9; }
[data-theme="light"] .priv-toggle-detail {
    background: #f8f9fc;
    border-color: #eaecf0;
}
[data-theme="light"] .priv-detail-text { color: #9aa0b5; }
[data-theme="light"] .priv-assurance-strip {
    background: rgba(16,163,127,0.05);
    border-color: rgba(16,163,127,0.18);
}
[data-theme="light"] .priv-assurance-item { color: #9aa0b5; }
[data-theme="light"] .priv-contact-title { color: #7a8399; }
[data-theme="light"] .priv-modal-body::-webkit-scrollbar-thumb { background: #c8cdd9; }

/* ── TOGGLE SWITCH ── */
[data-theme="light"] .toggle-slider {
    background: #dde1eb;
    border-color: #c8cdd9;
}
[data-theme="light"] .toggle-slider::before { background: #9aa0b5; }
[data-theme="light"] .toggle-switch input:checked + .toggle-slider {
    background: #10a37f;
    border-color: #10a37f;
}
[data-theme="light"] .toggle-switch input:checked + .toggle-slider::before { background: #fff; }

/* ── KBD / SHORTCUTS ── */
[data-theme="light"] kbd.shortcut-key {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.15);
    border-bottom-color: rgba(0,0,0,0.25);
    color: #555;
}

/* ── UNIVERSAL MODAL SYSTEM (cm-*) ── */
[data-theme="light"] .cm-dialog {
    background: linear-gradient(160deg, #fafbfc 0%, #f4f6fb 100%);
    border-color: #dde1eb;
    box-shadow: 0 24px 72px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
}
[data-theme="light"] .cm-backdrop { background: rgba(0,0,0,0.35); }
[data-theme="light"] .cm-title { color: #0f1117; }
[data-theme="light"] .cm-subtitle { color: #9aa0b3; }
[data-theme="light"] .cm-message { color: #7a8399; }
[data-theme="light"] .cm-actions { border-top-color: #e8eaf0; }
[data-theme="light"] .cm-btn-cancel {
    background: #f0f2f7;
    color: #6b7280;
    border-color: #dde1eb;
}
[data-theme="light"] .cm-btn-cancel:hover { background: #e8eaf0; color: #374151; }
[data-theme="light"] .cm-input {
    background: #fff;
    border-color: #dde1eb;
    color: #0f1117;
}
[data-theme="light"] .cm-input:focus { border-color: #10a37f; }
[data-theme="light"] .cm-input::placeholder { color: #c4c9d8; }
[data-theme="light"] .cm-input-note { color: #9aa0b3; }
[data-theme="light"] .cm-input-label { color: #9aa0b3; }

/* ── MFA MODAL ── */
[data-theme="light"] .mfa-dialog {
    background: #ffffff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 24px 64px rgba(0,0,0,0.10);
}
[data-theme="light"] .mfa-backdrop { background: rgba(0,0,0,0.35); }
[data-theme="light"] .mfa-title { color: #0f1117; }
[data-theme="light"] .mfa-subtitle { color: #7a8399; }
[data-theme="light"] .mfa-info-text { color: #4a5568; }
[data-theme="light"] .mfa-step-label { color: #4a5568; }
[data-theme="light"] .mfa-otp-input {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
    color: #0f1117;
}
[data-theme="light"] .mfa-otp-input:focus { border-color: #10a37f; }
[data-theme="light"] .mfa-otp-input::placeholder { color: #c8cdd9; }
[data-theme="light"] .mfa-secret-code {
    background: rgba(0,0,0,0.05);
    color: #3d4455;
}
[data-theme="light"] .mfa-copy-secret {
    border-color: rgba(0,0,0,0.12);
    color: #7a8399;
}
[data-theme="light"] .mfa-copy-secret:hover { color: #3d4455; border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .mfa-close-btn {
    color: #7a8399;
    background: rgba(0,0,0,0.05);
}
[data-theme="light"] .mfa-close-btn:hover {
    background: rgba(0,0,0,0.10);
    color: #0f1117;
}
[data-theme="light"] .mfa-success-title { color: #0f1117; }
[data-theme="light"] .mfa-success-desc { color: #7a8399; }
[data-theme="light"] .mfa-spinner {
    border-color: rgba(0,0,0,0.10);
    border-top-color: #10a37f;
}
[data-theme="light"] .mfa-loading { color: #7a8399; }

/* ── CHANGE PASSWORD MODAL ── */
[data-theme="light"] .chpw-modal-box {
    background: #ffffff;
    border-color: #e4e7ef;
}
[data-theme="light"] .chpw-modal-title { color: #0f1117; }
[data-theme="light"] .chpw-modal-desc { color: #7a8399; }
[data-theme="light"] .chpw-input {
    background: #f9fafb;
    border-color: #dde1eb;
    color: #0f1117;
}
[data-theme="light"] .chpw-input:focus { border-color: rgba(16,163,127,0.5); }
[data-theme="light"] .chpw-input::placeholder { color: #c8cdd9; }
[data-theme="light"] .chpw-label { color: #7a8399; }
[data-theme="light"] .chpw-eye-btn { color: #9aa0b5; }
[data-theme="light"] .chpw-eye-btn:hover { color: #3d4455; }
[data-theme="light"] .chpw-resend-row { color: #7a8399; }

/* ── PROFILE CROP MODAL ── */
[data-theme="light"] .pcm-backdrop { background: rgba(0,0,0,0.55); }
[data-theme="light"] .pcm-dialog {
    background: linear-gradient(160deg, #fafbfc 0%, #f4f6fb 100%);
    border-color: #dde1eb;
    box-shadow: 0 32px 80px rgba(0,0,0,0.14);
}
[data-theme="light"] .pcm-title { color: #0f1117; }
[data-theme="light"] .pcm-subtitle { color: #9aa0b3; }
[data-theme="light"] .pcm-viewport { background: #e8eaf0; }
[data-theme="light"] .pcm-cancel {
    background: #f0f2f7;
    color: #6b7280;
    border-color: #dde1eb;
}
[data-theme="light"] .pcm-cancel:hover { background: #e8eaf0; color: #374151; }
[data-theme="light"] .pcm-slider { background: #dde1eb; }
[data-theme="light"] .pcm-zoom-bar { color: #9aa0b5; }

/* ── GHOST CHAT BUTTON ── */
[data-theme="light"] .ghost-chat-btn {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.09);
    color: #888;
}
[data-theme="light"] .ghost-chat-btn:hover {
    background: rgba(80,120,240,0.07);
    border-color: rgba(80,120,240,0.2);
    color: #4a6fd8;
}
[data-theme="light"] .ghost-chat-btn.ghost-active {
    background: rgba(80,120,240,0.10);
    border-color: rgba(80,120,240,0.35);
    color: #4a6fd8;
}
[data-theme="light"] .ghost-banner {
    background: rgba(80,120,240,0.07);
    border-color: rgba(80,120,240,0.2);
    color: #4a6fd8;
}

/* ── ATTACHED FILES PREVIEW ── */
[data-theme="light"] .af-card {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .af-card-name { color: #222; }
[data-theme="light"] .af-card-label { color: #555; }
[data-theme="light"] .af-card-size { color: #888; }
[data-theme="light"] .af-card-remove {
    background: rgba(255,255,255,0.85);
    color: #666;
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .af-card-remove:hover {
    background: rgba(220,50,50,0.85);
    color: #fff;
}
[data-theme="light"] .attached-files-preview { border-color: #e0e3eb; }
[data-theme="light"] .file-icon { color: #999; }
[data-theme="light"] #catura-drop-overlay { background: rgba(255,255,255,0.85); }
[data-theme="light"] .drop-overlay-title { color: #111; }
[data-theme="light"] .drop-overlay-sub { color: rgba(0,0,0,0.4); }

/* ── MSG FILE CHIPS ── */
[data-theme="light"] .msg-file--img,
[data-theme="light"] .msg-file--doc {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.09);
}
[data-theme="light"] .msg-file-name { color: #333; }
[data-theme="light"] .msg-file-size { color: rgba(0,0,0,0.35); }

/* ── MOBILE HEADER ── */
[data-theme="light"] .mobile-header {
    background: transparent !important;
    border-bottom: none !important;
}
[data-theme="light"] .mobile-header-brand { color: #0f1117 !important; }
[data-theme="light"] .mobile-hamburger .hamburger-icon-panel,
[data-theme="light"] .mobile-hamburger .hamburger-icon-close { color: #555 !important; }
[data-theme="light"] .mobile-hamburger:active { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .mobile-header-ghost { color: #888 !important; }
[data-theme="light"] .mobile-header-ghost.ghost-active { color: #4a6fd8 !important; }

/* ── MOBILE INPUT AREA (overrides !important mobile rules) ── */
@media (max-width: 768px) {
    [data-theme="light"] .input-area,
    [data-theme="light"] .input-area.center,
    [data-theme="light"] .input-area.bottom {
        background: rgba(255,255,255,0.99) !important;
        border-top-color: rgba(0,0,0,0.08) !important;
        border-color: rgba(0,0,0,0.08) !important;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.07), 0 -1px 0 rgba(0,0,0,0.05) !important;
    }
    [data-theme="light"] .input-area::before {
        background: rgba(0,0,0,0.13) !important;
    }
    [data-theme="light"] .input-area:focus-within {
        border-top-color: rgba(16,163,127,0.4) !important;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.07), 0 -1px 0 rgba(16,163,127,0.25) !important;
    }
    [data-theme="light"] #input {
        color: #0f1117 !important;
        caret-color: #10a37f !important;
    }
    [data-theme="light"] #input::placeholder {
        color: #aab0c0 !important;
    }
    [data-theme="light"] .plus-btn {
        background: rgba(0,0,0,0.05) !important;
        border-color: rgba(0,0,0,0.10) !important;
        color: #7a8399 !important;
    }
    [data-theme="light"] .plus-btn:active {
        background: rgba(0,0,0,0.10) !important;
    }
    [data-theme="light"] .plus-dropdown {
        background: #ffffff !important;
        border-color: #e4e7ef !important;
        box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
    }
    [data-theme="light"] .plus-dropdown-item {
        color: #3d4455 !important;
    }
    [data-theme="light"] .plus-dropdown-item:hover {
        background: #f4f6fb !important;
        color: #0f1117 !important;
    }
    [data-theme="light"] .plus-item-icon {
        background: rgba(0,0,0,0.05) !important;
    }

    /* ── MOBILE SIDEBAR ── */
    [data-theme="light"] .sidebar {
        background: linear-gradient(160deg, #ffffff 0%, #fafbfc 100%) !important;
    }
    [data-theme="light"] .sidebar.open {
        box-shadow: 4px 0 24px rgba(0,0,0,0.10) !important;
    }
    [data-theme="light"] .sidebar-header {
        background: rgba(255,255,255,0.95) !important;
        border-bottom-color: rgba(0,0,0,0.07) !important;
    }
    [data-theme="light"] .sidebar-overlay {
        background: rgba(0,0,0,0.25) !important;
        backdrop-filter: blur(4px) !important;
    }
    [data-theme="light"] .sidebar-item {
        color: #3d4455 !important;
    }

    /* ── MOBILE MODEL BOTTOM SHEET ── */
    [data-theme="light"] .model-dropdown {
        background: #ffffff !important;
        border-color: rgba(0,0,0,0.08) !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.10) !important;
    }
    [data-theme="light"] .model-dropdown::before {
        background: rgba(0,0,0,0.15) !important;
    }
    [data-theme="light"] .model-option {
        color: #3d4455 !important;
    }
    [data-theme="light"] .model-option:hover {
        background: #f0f2f7 !important;
        color: #0f1117 !important;
    }
    [data-theme="light"] .model-option.active {
        background: rgba(16,163,127,0.08) !important;
        color: #10a37f !important;
        border-left-color: #10a37f !important;
    }
    [data-theme="light"] .model-option-desc { color: #9aa0b5 !important; }
    [data-theme="light"] .model-option.active .model-option-desc { color: #10a37f !important; }
    [data-theme="light"] .model-dropdown-header {
        background: transparent !important;
        color: #9aa0b5 !important;
        border-bottom-color: rgba(0,0,0,0.07) !important;
    }
    [data-theme="light"] .model-more-row {
        color: #7a8399 !important;
        border-top-color: rgba(0,0,0,0.07) !important;
    }
    [data-theme="light"] .model-more-row:hover {
        background: #f0f2f7 !important;
        color: #0f1117 !important;
    }
    [data-theme="light"] .model-more-panel {
        background: #ffffff !important;
        border-color: rgba(0,0,0,0.08) !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.10) !important;
    }
    [data-theme="light"] .model-more-panel::before {
        background: rgba(0,0,0,0.15) !important;
    }
    [data-theme="light"] .model-more-back-btn {
        color: #10a37f !important;
        border-bottom-color: rgba(0,0,0,0.07) !important;
    }
    [data-theme="light"] .model-more-back-btn:hover {
        background: #f0f2f7 !important;
    }

    /* ── MOBILE MESSAGES ── */
    [data-theme="light"] .message.bot {
        color: #1a1f2e !important;
    }
    [data-theme="light"] .message.bot p,
    [data-theme="light"] .message.bot li {
        color: #2a3040 !important;
    }

    /* ── MOBILE TOAST ── */
    [data-theme="light"] #toastNotif {
        background: rgba(255,255,255,0.98) !important;
        border-color: rgba(0,0,0,0.10) !important;
        color: #0f1117 !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
    }

    /* ── MOBILE WELCOME / CARDS ── */
    [data-theme="light"] .card {
        background: rgba(255,255,255,0.90) !important;
        border-color: rgba(0,0,0,0.08) !important;
        color: #3d4455 !important;
    }
    [data-theme="light"] .card:active {
        background: rgba(16,163,127,0.07) !important;
        border-color: rgba(16,163,127,0.25) !important;
    }
    [data-theme="light"] .welcome p { color: #7a8399 !important; }

    /* ── MOBILE HISTORY ── */
    [data-theme="light"] .history-title { color: #0f1117 !important; }
    [data-theme="light"] .history-date { color: #7a8399 !important; }

    /* ── MOBILE SETTINGS ── */
    [data-theme="light"] .settings-overlay {
        background: rgba(247,248,250,0.98) !important;
    }
    [data-theme="light"] .sc-row {
        background: #ffffff !important;
        border-color: #e4e7ef !important;
    }
    [data-theme="light"] .sc-row-label { color: #0f1117 !important; }
    [data-theme="light"] .sc-row-sub { color: #7a8399 !important; }

    /* ── MOBILE COPY BUTTONS ── */
    [data-theme="light"] .bot-copy-btn {
        background: transparent !important;
        border-color: #dde1eb !important;
        color: #9aa0b5 !important;
    }
    [data-theme="light"] .bot-copy-btn:hover {
        background: #f4f6fb !important;
        color: #3d4455 !important;
    }
    [data-theme="light"] .user-copy-btn,
    [data-theme="light"] .user-edit-btn {
        border-color: #dde1eb !important;
        color: #9aa0b5 !important;
    }

    /* ── MOBILE BOT-WRAPPER ── */
    [data-theme="light"] .bot-msg-wrapper { border-bottom-color: #eaecf0 !important; }
    [data-theme="light"] .bot-response-disclaimer { color: #aab0c0 !important; }
    [data-theme="light"] .bot-response-disclaimer span { color: #aab0c0 !important; }

    /* ── MOBILE CODE BLOCKS ── */
    [data-theme="light"] .code-block {
        background: #f8f9fb !important;
        border-color: #e2e5ed !important;
    }
    [data-theme="light"] .code-header {
        background: linear-gradient(90deg, #f0f2f7 0%, #eef0f5 100%) !important;
        color: #7a8399 !important;
    }
    [data-theme="light"] .code-block pre { background: #f3f5f9 !important; }
    [data-theme="light"] .code-block code { color: #1e2a3a !important; }

    /* ── MOBILE USER MSG MODEL SELECTOR ── */
    [data-theme="light"] .model-selector-btn {
        color: #9aa0b5 !important;
    }
    [data-theme="light"] .model-name { color: #7a8399 !important; }

    /* ── GHOST BUTTON MOBILE (in header) ── */
    [data-theme="light"] .mobile-header-ghost { color: #888 !important; }
    [data-theme="light"] .mobile-header-ghost.ghost-active { color: #4a6fd8 !important; }
}

/* ── PLAN / UPGRADE MODAL ── */
[data-theme="light"] .plan-modal-box,
[data-theme="light"] .upgrade-modal,
[data-theme="light"] [class*="plan-modal"],
[data-theme="light"] [class*="upgrade-modal"] {
    background: #ffffff;
    border-color: #e4e7ef;
    color: #0f1117;
}

/* ── GENERIC MODAL OVERLAY ── */
[data-theme="light"] .priv-modal-overlay,
[data-theme="light"] .mfa-backdrop,
[data-theme="light"] .feedback-modal-overlay {
    background: rgba(15,17,23,0.35);
    backdrop-filter: blur(4px);
}

/* ── BACK BUTTON ── */
[data-theme="light"] .back-btn { color: #10a37f; }
[data-theme="light"] .back-btn:hover { background: rgba(16,163,127,0.08); }

/* ── CLOSE BUTTON (global overlay) ── */
[data-theme="light"] .close-btn { color: #7a8399; }
[data-theme="light"] .close-btn:hover { background: rgba(16,163,127,0.08); color: #10a37f; }

/* ── BADGE SOON ── */
[data-theme="light"] .badge-soon {
    background: rgba(16,163,127,0.08);
    border-color: rgba(16,163,127,0.22);
    color: #10a37f;
}

/* ── SC ROW BLOCK ── */
[data-theme="light"] .sc-row-block {
    background: transparent !important;
}

/* ============================================================
   🧠 THINKING DROPDOWN — Gemma reasoning collapsible block
   ============================================================ */
.thinking-live-wrap { display: block; }

.thinking-block {
    margin: 0 0 10px 0;
    max-width: 100%;
}

.thinking-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.thinking-toggle:hover {
    background: transparent;
    color: var(--text-secondary);
}

.thinking-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.thinking-label {
    font-weight: 700;
    order: 1;
}

.thinking-brain-icon {
    flex-shrink: 0;
    order: 0;
    color: currentColor;
}

.thinking-arrow {
    flex-shrink: 0;
    order: 2;
    transform: rotate(0deg);
    transition: transform 0.25s ease;
}

.thinking-toggle[aria-expanded="true"] .thinking-arrow {
    transform: rotate(90deg);
}

.thinking-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}

.thinking-content.open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.thinking-inner {
    overflow: hidden;
    min-height: 0;
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--bg-surface2);
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.55;
}

.thinking-inner > *:first-child { margin-top: 0; }
.thinking-inner > *:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .thinking-toggle { font-size: 12.5px; padding: 4px 2px; }
    .thinking-inner { font-size: 13px; padding: 10px 12px; }
}

[data-theme="light"] .thinking-toggle {
    background: transparent;
    border: none;
    color: var(--text-muted);
}

[data-theme="light"] .thinking-inner {
    background: var(--bg-surface2);
    border-color: var(--border-subtle);
}

/* ── THINKING — active state while reasoning is in progress: plain text shimmer ── */
.thinking-toggle.active {
    background: transparent;
    border: none;
    position: relative;
}

.thinking-toggle.active .thinking-arrow {
    color: var(--text-secondary);
}

.thinking-toggle.active .thinking-label {
    font-weight: 700;
    background: linear-gradient(90deg,
        var(--text-muted) 0%,
        var(--text-muted) 35%,
        #ffffff 50%,
        var(--text-muted) 65%,
        var(--text-muted) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: thinking-gradient-shift 2.2s linear infinite;
}

@keyframes thinking-gradient-shift {
    0%   { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .thinking-toggle.active .thinking-label {
        animation: none;
    }
}