/* Inter loaded via system or Amazon Ember fallback */

        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --primary-light: #818cf8;
            --accent: #8b5cf6;
            --bg: #0f1729;
            --bg-card: rgba(22,32,56,0.82);
            --bg-chat: #0f1729;
            --bg-input: rgba(22,32,56,0.88);
            --text: #e8edf5;
            --text-muted: #8b9dc3;
            --border: rgba(99,102,241,0.10);
            --user-msg: linear-gradient(135deg, #5b5ef0, #7c5ce6);
            --bot-msg: rgba(22,32,56,0.65);
            --success: #34d399;
            --shadow: 0 4px 24px rgba(0,0,0,0.25);
            --glow: 0 0 60px rgba(99,102,241,0.06);
            /* Signature glow — derived from the welcome orb (violet -> coral). Use on premium/hero elements only. */
            --glow-signature: 0 8px 40px rgba(124,58,237,0.28), 0 0 70px rgba(232,99,74,0.12);
            --glow-signature-strong: 0 10px 56px rgba(124,58,237,0.40), 0 0 100px rgba(232,99,74,0.18);
            --gradient-signature: linear-gradient(135deg, #7c3aed 0%, #6366f1 45%, #E8634A 100%);
        }

        [data-theme="light"] {
            --bg: #f4f6fb;
            --bg-card: rgba(255,255,255,0.92);
            --bg-chat: #f4f6fb;
            --bg-input: rgba(255,255,255,0.95);
            --text: #1e293b;
            --text-muted: #556070;
            --primary-light: #4f46e5;
            --border: rgba(15,23,42,0.12);
            --bot-msg: rgba(255,255,255,0.92);
            --user-msg: linear-gradient(135deg, #4f46e5, #7c3aed);
            --shadow: 0 4px 24px rgba(0,0,0,0.08);
            --glow: none;
            /* Signature glow — softer on light bg (blooms more) */
            --glow-signature: 0 6px 28px rgba(124,58,237,0.16), 0 0 48px rgba(232,99,74,0.08);
            --glow-signature-strong: 0 8px 40px rgba(124,58,237,0.22), 0 0 64px rgba(232,99,74,0.12);
            --gradient-signature: linear-gradient(135deg, #7c3aed 0%, #6366f1 45%, #E8634A 100%);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        *, *::before, *::after { transition-timing-function: cubic-bezier(0.4,0,0.2,1); }

        body {
            font-family: 'Inter', -apple-system, sans-serif;
            background: var(--bg);
            color: var(--text);
            height: 100vh;
            display: flex;
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* GLOBAL SCROLLBAR — thin like Claude */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { 
            background: rgba(148,163,184,0.15); 
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.3); }

        /* SMOOTH ANIMATIONS */
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(6px); }
          to   { opacity: 1; transform: translateY(0); }
        }

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

        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50%       { opacity: 0.55; }
        }

        @keyframes spin {
          to { transform: rotate(360deg); }
        }

        @keyframes msgInLeft {
          from { opacity: 0; transform: translateX(-8px); }
          to   { opacity: 1; transform: translateX(0); }
        }

        /* SIDEBAR */
        .sidebar {
            width: 260px;
            background: var(--bg-sidebar, var(--bg-card));
            border-right: 1px solid rgba(148,163,184,0.08);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            transition: margin-left 0.2s, opacity 0.2s;
        }
        .sidebar.collapsed {
            margin-left: -260px;
            opacity: 0;
            pointer-events: none;
        }

        .sidebar-header {
            padding: 14px 16px;
            border-bottom: none;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-icon {
            width: 24px;
            height: 24px;
            background: var(--user-msg);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .logo h1 {
            font-size: 1em;
            font-weight: 500;
            color: var(--text);
        }

        .logo-subtitle {
            display: none;
        }

        .user-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: rgba(99,102,241,0.06);
            border: 1px solid rgba(99,102,241,0.12);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.15s;
            font-size: 0.85em;
            font-weight: 500;
        }

        .user-badge:hover { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.25); }

        .user-dot {
            width: 8px;
            height: 8px;
            background: var(--success);
            border-radius: 50%;
        }

        /* QUICK ACTIONS */
        .sidebar-topics {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }

        .sidebar-topics h3 {
            font-size: 0.62em;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-muted);
            margin-bottom: 10px;
            padding: 0 8px;
            font-weight: 700;
        }

        .topic-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
            margin-bottom: 2px;
            font-size: 0.85em;
            color: var(--text-muted);
            border: 1px solid transparent;
        }

        .topic-item:hover {
            background: rgba(99,102,241,0.06);
            color: var(--text);
        }

        .topic-item.active {
            background: rgba(99,102,241,0.1);
            color: var(--text);
            font-weight: 500;
        }

        .topic-item .icon { font-size: 1.1em; width: 24px; text-align: center; }
        .topic-item .label { flex: 1; }
        .topic-item .arrow { font-size: 0.7em; opacity: 0; transition: opacity 0.2s; }
        .topic-item:hover .arrow { opacity: 0.5; }

        .section-divider {
            height: 1px;
            background: var(--border);
            margin: 12px 8px;
            opacity: 0.5;
        }

        /* CHAT HISTORY */
        .chat-history { padding: 0 16px 16px; }
        .chat-history h3 {
            font-size: 0.7em;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--text-muted);
            margin-bottom: 8px;
            padding: 0 8px;
            font-weight: 700;
        }
        .history-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.82em;
            color: var(--text-muted);
            transition: all 0.15s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 1px 8px;
        }
        .history-item .h-delete { opacity: 0; font-size: 0.8em; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
        .history-item:hover .h-delete { opacity: 0.5; }
        .history-item .h-delete:hover { opacity: 1; background: rgba(239,68,68,0.2); }
        

        .welcome-option {
            display: flex;
            align-items: center;
            padding: 14px 18px;
            border: 1px solid var(--border);
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
            background: var(--bg-card);
        }
        .welcome-option:hover {
            border-color: var(--primary);
            background: rgba(99,102,241,0.06);
            transform: translateX(6px);
            box-shadow: var(--glow-signature);
        }

        /* ADMIN PANEL */
        .admin-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 1000;
            backdrop-filter: blur(4px);
        }
        .admin-overlay.active { display: flex; align-items: center; justify-content: center; }
        .admin-panel {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            width: 90vw; max-width: 1000px; height: 80vh;
            display: flex; flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            overflow: hidden;
        }
        .admin-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 22px; border-bottom: 1px solid var(--border);
            background: var(--bg-card); flex-shrink: 0;
        }
        .admin-header h2 { font-size: 1.05em; display: flex; align-items: center; gap: 8px; }
        .admin-close { background: none; border: none; color: var(--text-muted); font-size: 1.4em; cursor: pointer; }
        .admin-close:hover { color: var(--text); }
        .admin-main {
            flex: 1; display: flex; min-height: 0; overflow: hidden;
        }
        .admin-tabs {
            width: 200px; flex-shrink: 0;
            display: flex; flex-direction: column; gap: 2px;
            padding: 14px 10px; overflow-y: auto;
            background: rgba(0,0,0,0.12);
            border-right: 1px solid var(--border);
        }
        .admin-tab {
            padding: 9px 12px; font-size: 0.82em; cursor: pointer;
            color: var(--text-muted);
            background: none; border: none;
            font-family: inherit; text-align: left;
            display: flex; align-items: center; gap: 10px;
            border-radius: 8px; width: 100%;
            transition: color 0.15s, background 0.15s;
        }
        .admin-tab .lucide { width: 15px; height: 15px; flex-shrink: 0; }
        .admin-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .admin-tab:hover { color: var(--text); background: rgba(99,102,241,0.10); }
        .admin-tab.active {
            color: var(--primary-light); font-weight: 600;
            background: rgba(99,102,241,0.18);
        }
        .admin-body { flex: 1; overflow-y: auto; padding: 20px 24px; min-width: 0; }
        @media (max-width: 680px) {
            .admin-main { flex-direction: column; }
            .admin-tabs {
                width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden;
                padding: 8px 10px; border-right: none; border-bottom: 1px solid var(--border);
            }
            .admin-tab { width: auto; flex-shrink: 0; }
        }
        .chart-zoom-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:2000;backdrop-filter:blur(6px);align-items:center;justify-content:center;flex-direction:column;gap:14px;cursor:pointer }
        .chart-zoom-overlay.active { display:flex }
        .chart-zoom-overlay img { max-width:88vw;max-height:72vh;background:var(--bg-card);border-radius:14px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.6) }
        .chart-zoom-overlay .zoom-title { color:#e2e8f0;font-size:1.1em;font-weight:700 }
        .chart-zoom-overlay .zoom-actions { display:flex;gap:10px }
        .chart-zoom-overlay .zoom-btn { padding:8px 20px;border-radius:8px;border:none;font-size:0.85em;cursor:pointer;font-weight:600 }
        .chart-card .chart-dl { position:absolute;top:10px;right:10px;background:rgba(99,102,241,0.15);border:none;color:var(--primary-light);border-radius:6px;padding:4px 8px;font-size:0.7em;cursor:pointer;opacity:0;transition:opacity 0.2s }
        .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
        .stat-card {
            background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15);
            border-radius: 10px; padding: 14px; text-align: center;
        }
        .stat-card .val { font-size: 1.6em; font-weight: 700; color: var(--primary-light); }
        .stat-card .lbl { font-size: 0.7em; color: var(--text-muted); margin-top: 4px; }
        .conv-row {
            padding: 12px; border-bottom: 1px solid var(--border); font-size: 0.82em;
            cursor: pointer; transition: background 0.2s;
        }
        .conv-row:hover { background: rgba(99,102,241,0.05); }
        .conv-meta { display: flex; gap: 12px; color: var(--text-muted); font-size: 0.85em; margin-top: 4px; }
        .conv-q { font-weight: 500; }
        .conv-a { color: var(--text-muted); margin-top: 4px; font-size: 0.9em; }
        .rating-star { color: #f59e0b; }
        .user-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.85em;
        }
        .user-row .alias { font-weight: 600; }
        .user-row .role { color: var(--text-muted); font-size: 0.85em; }
        .admin-rm-btn {
            background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.3);
            border-radius: 6px; padding: 4px 10px; font-size: 0.8em; cursor: pointer;
        }
        .admin-rm-btn:hover { background: rgba(239,68,68,0.2); }
        .add-user-row { display: flex; gap: 8px; margin-bottom: 16px; }
        .add-user-row input {
            flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
            background: var(--bg-input); color: var(--text); font-size: 0.85em; font-family: inherit;
        }
        .add-user-btn {
            padding: 8px 16px; border-radius: 8px; border: none;
            background: var(--primary); color: white; font-size: 0.85em; cursor: pointer;
        }
        .kb-row { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.85em; }
        .kb-name { font-weight: 500; }
        .kb-meta { color: var(--text-muted); font-size: 0.85em; }
        .admin-loading { text-align: center; padding: 60px; color: var(--text-muted); }
        .admin-loading::after{content:'';display:block;width:32px;height:32px;margin:16px auto 0;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}

        .sidebar-footer {
            padding: 16px;
            border-top: 1px solid var(--border);
        }

        .new-chat-btn {
            width: 100%;
            padding: 9px;
            background: transparent;
            color: var(--text);
            border: 1px dashed rgba(148,163,184,0.25);
            border-radius: 10px;
            font-size: 0.84em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
        }
        .new-chat-btn:hover { 
            background: rgba(99,102,241,0.06);
            border-color: rgba(99,102,241,0.3);
            color: var(--primary-light);
        }

        /* MAIN AREA */
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            background: var(--bg);
        }

        /* TOP BAR — Claude-style minimal */
        .topbar {
            padding: 8px 16px;
            border-bottom: 1px solid rgba(148,163,184,0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: transparent;
            height: 44px;
            flex-shrink: 0;
        }

        .topbar-title {
            font-weight: 500;
            font-size: 0.85em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
            color: var(--text-muted);
            opacity: 0.7;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }

        .topbar-btn {
            opacity: 0.5;
            transition: opacity 0.15s;
        }

        .topbar-status {
            display: none;
        }

        /* CHAT */
        .chat-area {
            flex: 1;
            overflow-y: auto;
            padding: 28px 28px 16px;
            scroll-behavior: smooth;
            max-width: 720px;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }

        /* WELCOME — Claude-style centered */
        .welcome {
            text-align: center;
            padding: 0 20px;
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 65vh;
            gap: 0;
        }

        .welcome-icon {
            font-size: 2.8em;
            margin-bottom: 12px;
            filter: drop-shadow(0 4px 12px rgba(99,102,241,0.3));
        }

        .welcome h2 {
            font-size: 1.35em;
            margin-bottom: 4px;
            color: var(--text);
            -webkit-text-fill-color: var(--text);
            background: none;
            -webkit-background-clip: unset;
            letter-spacing: -0.03em;
            font-weight: 600;
            line-height: 1.3;
        }

        .welcome p {
            color: var(--text-muted);
            line-height: 1.5;
            margin-bottom: 32px;
            font-size: 0.88em;
            letter-spacing: -0.01em;
        }

        .quick-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .quick-card {
            padding: 18px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
            text-align: left;
        }

        .quick-card:hover {
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 8px 28px rgba(99,102,241,0.15);
        }

        .quick-card .qicon { font-size: 1.4em; margin-bottom: 10px; }
        .quick-card .qtitle { font-weight: 600; font-size: 0.88em; margin-bottom: 4px; }
        .quick-card .qdesc { font-size: 0.74em; color: var(--text-muted); line-height: 1.4; }

        /* MESSAGES */
        .msg {
            display: flex;
            gap: 0;
            margin-bottom: 28px;
            max-width: 100%;
            flex-direction: column;
        }


        .msg-avatar {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
            margin-bottom: 6px;
        }


        .msg-body {
            padding: 0;
            max-width: 100%;
            line-height: 1.75;
            font-size: 0.9375rem;
            font-weight: 400;
            letter-spacing: -0.01em;
            color: var(--text);
        }

        .msg.user .msg-body {
            background: var(--user-bubble, rgba(99,102,241,0.08));
            padding: 10px 18px;
            border-radius: 20px 20px 4px 20px;
            font-size: 0.9375rem;
            line-height: 1.6;
            max-width: 80%;
        }
        [data-theme="light"] .msg.user .msg-body { --user-bubble: rgba(99,102,241,0.07); }

        .msg.bot .msg-body {
            color: var(--text);
        }

        /* First paragraph = direct answer, slightly larger */
        .msg.bot .msg-body > p:first-child {
            font-size: 0.96rem;
            line-height: 1.8;
            color: var(--text);
        }

        .msg.bot .msg-body h3 {
            color: var(--text);
            margin: 28px 0 10px;
            font-size: 0.94em;
            font-weight: 600;
            padding: 0 0 6px;
            border-bottom: 1px solid rgba(148,163,184,0.08);
            letter-spacing: -0.01em;
            background: none;
            border: none;
        }

        /* Step headers — compact numbered style */
        .msg.bot .msg-body h3.rz-step {
            background: none;
            border-left: none;
            padding: 0;
            margin: 16px 0 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .msg.bot .msg-body h3.rz-step .rz-step-num {
            background: var(--rz-accent, #6366f1);
            color: #fff;
            font-size: 0.82em;
            min-width: 1.5em; width: 1.5em; height: 1.5em;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* Answer summary callout */
        .rz-summary {
            background: rgba(99,102,241,0.05);
            border: 1px solid rgba(99,102,241,0.12);
            border-radius: 12px;
            padding: 14px 18px;
            margin: 0 0 20px;
            line-height: 1.75;
            font-size: 0.94em;
        }
        .rz-summary strong { color: var(--text); }

        /* Warning/Important headers */
        .msg.bot .msg-body h3.rz-warn {
            background: rgba(251,191,36,0.08);
            border-left-color: #fbbf24;
            color: #fbbf24;
        }

        /* Ticket offer CTA */
        .rz-ticket-offer {
            margin: 16px 0 8px;
            padding: 14px 18px;
            background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
            border: 1px solid rgba(99,102,241,0.2);
            border-radius: 12px;
            animation: msgInLeft 0.3s ease;
        }
        .rz-to-text { font-size: 0.9em; margin-bottom: 4px; }
        .rz-to-q { font-size: 0.82em; color: var(--text-muted); margin-bottom: 10px; }
        .rz-to-btns { display: flex; gap: 8px; }
        .rz-to-yes {
            padding: 7px 16px; border: none; border-radius: 8px; cursor: pointer;
            background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
            font-weight: 600; font-size: 0.82em;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .rz-to-yes:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
        .rz-to-no {
            padding: 7px 16px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
            background: none; color: var(--text-muted); font-size: 0.82em;
            transition: border-color 0.15s;
        }
        .rz-to-no:hover { border-color: var(--text-muted); }

        /* Ticket ready state */
        .rz-to-ready { animation: msgInLeft 0.25s ease; }
        .rz-to-header { font-weight: 700; font-size: 0.95em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
        .rz-to-sev { color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 0.75em; transition: background 0.2s; }
        .rz-to-sev-sel { background: transparent; border: 1px solid rgba(148,163,184,0.15); color: var(--text-muted); font-size: 0.72em; padding: 2px 4px; border-radius: 4px; cursor: pointer; margin-left: auto; }
        .rz-to-field { margin-bottom: 8px; }
        .rz-to-label { font-size: 0.72em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; display: block; margin-bottom: 3px; }
        .rz-to-edit {
            width: 100%; padding: 8px 12px;
            background: rgba(15,23,42,0.5); border-radius: 8px;
            font-size: 0.88em; line-height: 1.5;
            border: 1px solid rgba(148,163,184,0.12);
            color: var(--text); font-family: inherit;
            transition: border-color 0.2s;
            resize: vertical;
        }
        .rz-to-edit:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
        [data-theme="light"] .rz-to-edit { background: rgba(241,245,249,0.8); }
        textarea.rz-to-edit { min-height: 60px; max-height: 200px; }
        .rz-to-actions { display: flex; gap: 8px; margin-top: 12px; }
        .rz-to-open {
            flex: 1; padding: 10px 16px; border: none; border-radius: 10px; cursor: pointer;
            background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
            font-weight: 700; font-size: 0.85em;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .rz-to-open:hover { transform: translateY(-1px); box-shadow: var(--glow-signature); }
        .rz-to-copy, .rz-to-dismiss {
            padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
            background: none; color: var(--text-muted); font-size: 0.85em;
            transition: border-color 0.15s;
        }
        .rz-to-copy:hover { border-color: var(--primary-light); color: var(--text); }
        .rz-to-dismiss { padding: 10px 12px; font-size: 0.8em; }
        .rz-to-dismiss:hover { border-color: #ef4444; color: #ef4444; }
        .rz-to-alts { margin-top: 10px; font-size: 0.78em; }
        .rz-to-alt {
            color: var(--primary-light); text-decoration: none;
            padding: 2px 8px; border-radius: 5px;
            background: rgba(99,102,241,0.08);
            transition: background 0.15s;
        }
        .rz-to-alt:hover { background: rgba(99,102,241,0.18); }

        /* Response meta bar (confidence + time) */
        .rz-meta {
            display: flex; align-items: center; gap: 12px;
            margin-top: 12px; padding-top: 10px;
            border-top: 1px solid rgba(148,163,184,0.1);
            font-size: 0.72em; color: var(--text-muted);
        }
        .rz-conf { font-weight: 600; }
        .rz-conf-high { color: #22c55e; }
        .rz-conf-medium { color: #eab308; }
        .rz-conf-low { color: #ef4444; }

        /* Copyable text blocks */
        .rz-copy {
            position: relative;
            background: rgba(15,23,42,0.6);
            border: 1px solid rgba(148,163,184,0.15);
            border-radius: 10px;
            margin: 12px 0;
            overflow: hidden;
        }
        .rz-copy-btn {
            display: block;
            padding: 6px 12px;
            font-size: 11px;
            color: var(--primary-light);
            cursor: pointer;
            text-align: right;
            border-bottom: 1px solid rgba(148,163,184,0.08);
            user-select: none;
            transition: background 0.15s;
        }
        .rz-copy-btn:hover { background: rgba(99,102,241,0.1); }
        .rz-copy-text {
            padding: 12px 14px;
            font-family: 'SF Mono', 'Fira Code', monospace;
            font-size: 0.88em;
            line-height: 1.5;
            white-space: pre-wrap;
            color: var(--text);
        }

        /* Mini Table of Contents */
        .rz-toc {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            padding: 10px 14px;
            margin-bottom: 12px;
            background: rgba(99,102,241,0.04);
            border: 1px solid rgba(99,102,241,0.1);
            border-radius: 10px;
            font-size: 0.78em;
        }
        .rz-toc-label {
            color: var(--text-muted);
            font-weight: 600;
            margin-right: 4px;
        }
        .rz-toc-item {
            color: var(--primary-light);
            text-decoration: none;
            padding: 3px 10px;
            border-radius: 6px;
            background: rgba(99,102,241,0.08);
            transition: background 0.15s;
            cursor: pointer;
            border: none;
        }
        .rz-toc-item:hover {
            background: rgba(99,102,241,0.18);
        }

        /* Collapsible sections */
        .rz-more-btn {
            display: block; width: 100%;
            padding: 10px; margin: 12px 0;
            background: rgba(99,102,241,0.06);
            border: 1px solid rgba(99,102,241,0.15);
            border-radius: 10px;
            color: var(--primary-light);
            font-size: 0.82em; font-weight: 600;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
            text-align: center;
        }
        .rz-more-btn:hover { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.35); }

        .msg.bot .msg-body ol > li::before {
            content: counter(step);
            position: absolute; left: 0; top: 2px;
            width: 22px; height: 22px;
            background: rgba(99,102,241,0.1);
            color: var(--primary-light);
            font-size: 0.78em; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            border-radius: 6px;
        }
        .msg.bot .msg-body li::marker { color: var(--primary-light); font-weight: 600; }
        .msg.bot .msg-body code {
            background: rgba(99,102,241,0.08);
            padding: 2px 6px;
            border-radius: 5px;
            font-size: 0.85em;
            color: var(--primary-light);
            font-family: 'SF Mono', 'Fira Code', monospace;
        }
        .msg.bot .msg-body a {
            color: var(--primary-light);
            text-decoration: none;
            border-bottom: 1px solid rgba(99,102,241,0.25);
            word-break: break-all;
            transition: border-color 0.15s;
        }

        /* TABLES IN BOT MESSAGES */
        .msg.bot .msg-body table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 16px 0;
            font-size: 0.875em;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid rgba(148,163,184,0.12);
        }
        .msg.bot .msg-body thead th {
            background: rgba(99,102,241,0.08);
            color: var(--primary-light);
            font-weight: 600;
            padding: 10px 14px;
            text-align: left;
            font-size: 0.85em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid rgba(148,163,184,0.12);
        }
        .msg.bot .msg-body tbody td {
            padding: 9px 14px;
            border-bottom: 1px solid rgba(148,163,184,0.08);
            vertical-align: top;
        }
        .msg.bot .msg-body tbody tr:last-child td { border-bottom: none; }

        /* BLOCKQUOTES / CALLOUTS */
        .msg.bot .msg-body blockquote {
            border-left: 3px solid rgba(99,102,241,0.4);
            margin: 14px 0;
            padding: 10px 16px;
            background: rgba(99,102,241,0.04);
            border-radius: 0 10px 10px 0;
            font-size: 0.92em;
            color: var(--text-muted);
        }

        /* SCREENSHOT CARDS */
        .ss-card {
            position: relative;
            margin: 16px 0;
            border-radius: 12px;
            overflow: hidden;
            max-width: 520px;
            border: 1px solid rgba(148,163,184,0.15);
            background: rgba(15,23,42,0.4);
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .ss-card:hover {
            border-color: rgba(99,102,241,0.35);
            box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(99,102,241,0.15);
        }
        .ss-card img {
            display: block;
            max-width: 100%;
            cursor: zoom-in;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .ss-card.ss-loaded img { opacity: 1; }
        .ss-card.ss-loaded .ss-skeleton { display: none; }
        .ss-skeleton {
            height: 180px;
            background: linear-gradient(90deg, rgba(99,102,241,0.06) 25%, rgba(99,102,241,0.12) 50%, rgba(99,102,241,0.06) 75%);
            background-size: 200% 100%;
            animation: ssShimmer 1.5s infinite;
            border-radius: 8px;
        }
        @keyframes ssShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
        .ss-card.ss-error .ss-skeleton {
            animation: none;
            background: rgba(239,68,68,0.08);
            display: flex; align-items: center; justify-content: center;
        }
        .ss-card.ss-error .ss-skeleton::after {
            content: '⚠ Screenshot unavailable';
            color: rgba(239,68,68,0.6); font-size: 13px;
        }
        .ss-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: rgba(15,23,42,0.7);
            backdrop-filter: blur(8px);
            border-top: 1px solid rgba(148,163,184,0.08);
            font-size: 12px;
        }
        .ss-badge {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
            font-weight: 700;
            font-size: 11px;
            min-width: 22px; height: 22px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 6px;
            flex-shrink: 0;
        }
        .ss-caption {
            color: rgba(226,232,240,0.7);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ss-zoom {
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.15s, transform 0.15s;
            font-size: 14px;
        }
        .ss-zoom:hover { opacity: 1; transform: scale(1.2); }

        /* SCREENSHOT IMAGES IN CHAT (legacy bare img) */
        .msg.bot .msg-body > img {
            max-width: 100%;
            border-radius: 10px;
            margin: 16px 0;
            cursor: zoom-in;
            border: 1px solid rgba(148,163,184,0.18);
            box-shadow: 0 2px 16px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.03);
            transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s, border-color 0.2s;
            display: block;
        }
        .msg.bot .msg-body > img:hover {
            transform: scale(1.015);
            box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(99,102,241,0.2);
            border-color: rgba(99,102,241,0.35);
        }

        /* LIGHTBOX */
        .lb-overlay {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.92);
            backdrop-filter: blur(12px);
            display: none; align-items: center; justify-content: center;
            flex-direction: column;
            opacity: 0; transition: opacity 0.2s ease;
            cursor: zoom-out; pointer-events: none;
        }
        .lb-overlay.active { display: flex; opacity: 1; pointer-events: auto; }
        .lb-overlay img {
            max-width: 92vw; max-height: 80vh;
            border-radius: 12px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.5);
            transform: scale(0.92); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.15s;
            user-select: none; -webkit-user-drag: none;
            cursor: default;
        }
        .lb-overlay.active img { transform: scale(1); }
        .lb-close {
            position: absolute; top: 16px; right: 20px;
            color: #fff; font-size: 28px; cursor: pointer;
            width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
            border-radius: 50%; background: rgba(255,255,255,0.1);
            transition: background 0.15s; z-index: 2;
        }
        .lb-close:hover { background: rgba(255,255,255,0.2); }
        .lb-arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,0.1); border: none; color: #fff;
            font-size: 36px; width: 48px; height: 48px;
            border-radius: 50%; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s, transform 0.15s; z-index: 2;
        }
        .lb-arrow:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) scale(1.1); }
        .lb-prev { left: 16px; }
        .lb-next { right: 16px; }
        .lb-bottom {
            display: flex; flex-direction: column; align-items: center;
            gap: 4px; margin-top: 12px; pointer-events: none;
        }
        .lb-caption { color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 500; }
        .lb-counter { color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 600; letter-spacing: 1px; }
        .lb-hint {
            color: rgba(255,255,255,0.3); font-size: 12px;
        }

        /* RATING — fade on hover */
        .msg-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(148,163,184,0.1);
            flex-wrap: wrap;
            opacity: 0;
            transition: opacity 200ms ease-out;
        }
        .msg:hover .msg-actions { opacity: 1; }

        .rate-star {
            background: none; border: none; cursor: pointer;
            opacity: 0.4; transition: all 0.12s; padding: 2px;
        }
        .rate-star:active { transform: scale(1.4); }
        .rate-star.lit { opacity: 1; transform: scale(1.1); }
        .rate-star.lit svg { fill: #fbbf24; }

        .feedback-panel {
            display: none;
            width: 100%;
            margin-top: 10px;
            animation: msgIn 0.2s ease;
        }

        .feedback-panel textarea {
            width: 100%;
            padding: 12px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            font-family: inherit;
            font-size: 0.85em;
            resize: vertical;
            min-height: 70px;
            outline: none;
            box-sizing: border-box;
        }

        .feedback-panel textarea:focus { border-color: var(--primary); }

        .feedback-panel .fb-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
        }

        .feedback-panel .fb-hint {
            font-size: 0.75em;
            color: var(--text-muted);
        }

        .fb-submit {
            padding: 8px 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 0.85em;
            cursor: pointer;
            font-family: inherit;
            font-weight: 500;
            transition: all 0.15s;
        }

        .fb-submit:hover { box-shadow: var(--glow-signature); transform: translateY(-1px); }
        .fb-submit:active { transform: scale(0.96); }

        .feedback-thanks {
            color: var(--success);
            font-size: 0.85em;
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* SUGGESTIONS */
        .suggestions, .rz-next-btns {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .rz-next {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(148,163,184,0.08);
        }
        .rz-next-label {
            display: block;
            font-size: 0.7em;
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .suggest-btn {
            padding: 8px 16px;
            background: rgba(99,102,241,0.06);
            border: 1px solid rgba(99,102,241,0.15);
            border-radius: 20px;
            color: var(--primary-light);
            font-size: 0.8em;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
            white-space: nowrap;
        }

        .suggest-btn:hover {
            background: rgba(99,102,241,0.15);
            border-color: var(--primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99,102,241,0.15);
        }

        /* Command Palette */
        .cmd-palette {
            position: absolute; bottom: 100%; left: 0; right: 0;
            background: var(--bg-card); border: 1px solid var(--border);
            border-radius: 12px; margin-bottom: 6px;
            box-shadow: 0 -8px 30px rgba(0,0,0,0.3);
            overflow: hidden; z-index: 100;
            display: none;
        }
        .cmd-item {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; cursor: pointer;
            transition: background 0.1s;
        }
        .cmd-item:hover, .cmd-item.active { background: rgba(99,102,241,0.1); }
        .cmd-name { color: var(--primary-light); font-weight: 600; font-size: 0.88em; font-family: 'SF Mono', monospace; }
        .cmd-desc { color: var(--text-muted); font-size: 0.82em; }

        /* THEME TOGGLE */
        .theme-toggle {
            background: none;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 6px 10px;
            cursor: pointer;
            font-size: 1.1em;
            color: var(--text);
            transition: all 0.15s;
        }

        .theme-toggle:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.2); }
        .theme-toggle:active { transform: scale(0.92); }

        /* TYPING INDICATOR */
        .typing-dots {
            display: flex;
            gap: 5px;
            padding: 8px 0;
        }

        .typing-dots span {
            width: 8px;
            height: 8px;
            background: var(--primary-light);
            border-radius: 50%;
            animation: typingWave 1.4s ease-in-out infinite;
            box-shadow: 0 0 8px rgba(99,102,241,0.3);
        }

        .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
        .typing-dots span:nth-child(3) { animation-delay: 0.3s; }

        @keyframes typingWave {
            0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
        }

        /* INPUT */
        .input-area {
            padding: 0 24px 20px;
            background: transparent;
            border-top: none;
            flex-shrink: 0;
        }

        .input-wrapper {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 10px 14px 10px 16px;
            transition: border-color 0.2s, box-shadow 0.2s;
            max-width: 740px;
            margin: 0 auto;
            box-shadow: 0 1px 6px rgba(0,0,0,0.04);
        }

        .input-wrapper:focus-within {
            border-color: rgba(99,102,241,0.4);
            box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
        }

        .input-wrapper textarea {
            flex: 1;
            background: none;
            border: none;
            color: var(--text);
            font-size: 0.95em;
            font-family: inherit;
            outline: none;
            padding: 0;
            resize: none;
            max-height: 200px;
            overflow-y: auto;
            line-height: 1.5;
            field-sizing: content;
        }


        .send-btn {
            width: 36px;
            height: 36px;
            background: var(--gradient-signature);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: var(--glow-signature);
        }
        .send-btn:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: var(--glow-signature-strong);
        }
        .send-btn:disabled { opacity: 0.25; cursor: not-allowed; transform: none; box-shadow: none; }

        .input-hint {
            text-align: center;
            font-size: 0.68em;
            color: var(--text-muted);
            margin-top: 8px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.7;
        }

        /* STREAMING TOGGLE */
        .streaming-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75em;
            color: var(--text-muted);
            margin-top: 6px;
            justify-content: center;
        }
        
        .streaming-toggle input[type="checkbox"] {
            width: 14px;
            height: 14px;
            cursor: pointer;
        }
        
        .streaming-toggle label {
            cursor: pointer;
            user-select: none;
        }

        /* COMMAND PALETTE */
        .cmd-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding-top: 15vh;
            animation: fadeIn 0.15s;
        }
        .cmd-overlay.active { display: flex; }
        
        .cmd-modal {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            width: 90%;
            max-width: 600px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            backdrop-filter: blur(20px);
        }
        
        .cmd-search {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }
        
        .cmd-search .lucide {
            width: 18px;
            height: 18px;
            color: var(--text-muted);
        }
        
        .cmd-search input {
            flex: 1;
            background: none;
            border: none;
            color: var(--text);
            font-size: 1em;
            outline: none;
            font-family: inherit;
        }
        
        .cmd-search input::placeholder {
            color: var(--text-muted);
        }
        
        .cmd-search kbd {
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.75em;
            color: var(--text-muted);
            font-family: 'SF Mono', monospace;
        }
        
        .cmd-results {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .cmd-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            border-left: 2px solid transparent;
        }
        
        .cmd-item:hover,
        .cmd-item.active {
            background: rgba(99,102,241,0.08);
            border-left-color: var(--primary);
            transform: translateX(4px);
        }
        
        .cmd-item .lucide {
            width: 18px;
            height: 18px;
            color: var(--text-muted);
        }
        
        .cmd-item.active .lucide {
            color: var(--primary-light);
        }
        
        .cmd-name {
            flex: 1;
            font-size: 0.9em;
            color: var(--text);
        }
        
        .cmd-item kbd {
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.7em;
            color: var(--text-muted);
            font-family: 'SF Mono', monospace;
        }

        /* ARTIFACTS PANEL */
        .artifacts-panel {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 45%;
            max-width: 700px;
            background: var(--bg-card);
            border-left: 1px solid var(--border);
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
            z-index: 1000;
            display: flex;
            flex-direction: column;
        }
        
        .artifacts-panel.active {
            transform: translateX(0);
        }
        
        .main.with-artifacts {
            margin-right: 45%;
        }
        
        .artifacts-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }
        
        .artifacts-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
            font-size: 0.95em;
        }
        
        .artifacts-title .lucide {
            width: 18px;
            height: 18px;
            color: var(--primary-light);
        }
        
        .artifacts-actions {
            display: flex;
            gap: 6px;
        }
        
        .art-btn {
            background: none;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 6px 8px;
            cursor: pointer;
            color: var(--text-muted);
            transition: all 0.15s;
        }
        
        .art-btn:hover {
            background: rgba(99,102,241,0.08);
            color: var(--text);
        }
        
        .art-btn .lucide {
            width: 16px;
            height: 16px;
        }
        
        .artifacts-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        
        .artifacts-body pre {
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px;
            overflow-x: auto;
            font-size: 0.88em;
            line-height: 1.6;
        }
        
        .artifacts-body code {
            font-family: 'SF Mono', 'Fira Code', monospace;
            color: var(--text);
        }
        
        .art-code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .art-lang {
            font-size: 0.8em;
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .art-preview-mode {
            display: flex;
            gap: 4px;
            margin-bottom: 16px;
            background: var(--bg-input);
            padding: 4px;
            border-radius: 8px;
        }
        
        .art-mode-btn {
            flex: 1;
            padding: 6px;
            background: none;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85em;
            color: var(--text-muted);
            transition: all 0.15s;
        }
        
        .art-mode-btn.active {
            background: var(--bg-card);
            color: var(--text);
        }
        
        .art-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.88em;
        }
        
        .art-table th,
        .art-table td {
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        
        .art-table th {
            background: var(--bg-input);
            font-weight: 600;
            color: var(--text-muted);
        }
        
        .art-toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s;
            z-index: 10001;
        }
        
        .art-toast.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        @media (max-width: 1024px) {
            .artifacts-panel {
                width: 100%;
                max-width: none;
            }
            .main.with-artifacts {
                margin-right: 0;
            }
        }

        /* MULTI-MODAL INPUT */
        .attach-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .attach-btn:hover {
            background: rgba(99,102,241,0.08);
            color: var(--text);
        }
        
        .attach-btn .lucide {
            width: 18px;
            height: 18px;
        }
        
        .attachments-preview {
            display: none;
            gap: 8px;
            padding: 12px 0;
            flex-wrap: wrap;
        }
        
        .att-item {
            position: relative;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            background: var(--bg-input);
        }
        
        .att-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            display: block;
        }
        
        .att-item.att-file {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            min-width: 150px;
        }
        
        .att-item.att-file .lucide {
            width: 20px;
            height: 20px;
            color: var(--text-muted);
        }
        
        .att-name {
            font-size: 0.85em;
            color: var(--text);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .att-remove {
            position: absolute;
            top: 4px;
            right: 4px;
            background: rgba(0,0,0,0.7);
            border: none;
            border-radius: 4px;
            padding: 4px;
            cursor: pointer;
            color: white;
            opacity: 0;
            transition: opacity 0.15s;
        }
        
        .att-item:hover .att-remove {
            opacity: 1;
        }
        
        .att-item.att-file .att-remove {
            position: static;
            background: none;
            color: var(--text-muted);
            opacity: 1;
        }
        
        .att-remove .lucide {
            width: 14px;
            height: 14px;
        }
        
        .chat-area.drag-over {
            background: rgba(99,102,241,0.05);
            border: 2px dashed var(--primary);
        }
        
        .mm-toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: var(--bg-card);
            border: 1px solid var(--border);
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            opacity: 0;
            transition: all 0.3s;
            z-index: 10001;
        }
        
        .mm-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* ONCALL WIDGET */
        .oncall-quick-btn {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 56px;
            height: 56px;
            background: var(--primary);
            border: none;
            border-radius: 50%;
            color: white;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(99,102,241,0.4);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.5s ease;
        }
        
        .oncall-quick-btn:hover {
            transform: scale(1.15) rotate(5deg);
            box-shadow: 0 8px 30px rgba(99,102,241,0.6);
        }
        
        .oncall-quick-btn:active {
            transform: scale(0.95);
        }
        
        .oncall-quick-btn .lucide {
            width: 24px;
            height: 24px;
            animation: pulse 2s ease-in-out infinite;
        }
        
        .oncall-popup {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .oncall-popup.active {
            display: flex;
        }
        
        .oncall-popup-content {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            width: 100%;
            max-width: 600px;
            max-height: 80vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }
        
        .oncall-popup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
        }
        
        .oncall-popup-header h3 {
            font-size: 1.1em;
            font-weight: 600;
            margin: 0;
        }
        
        .oncall-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            transition: all 0.15s;
        }
        
        .oncall-close:hover {
            background: rgba(99,102,241,0.08);
            color: var(--text);
        }
        
        .oncall-close .lucide {
            width: 20px;
            height: 20px;
        }
        
        .oncall-popup-body {
            padding: 24px;
            overflow-y: auto;
        }
        
        .oncall-quick-groups {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .oncall-group-btn {
            padding: 12px 16px;
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 0.88em;
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }
        
        .oncall-group-btn:hover {
            background: rgba(99,102,241,0.08);
            border-color: var(--primary);
        }
        
        .oncall-custom {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
        }
        
        .oncall-custom input {
            flex: 1;
            padding: 10px 14px;
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            font-size: 0.9em;
            font-family: inherit;
            outline: none;
        }
        
        .oncall-custom input:focus {
            border-color: var(--primary);
        }
        
        .oncall-custom button {
            padding: 10px 20px;
            background: var(--primary);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: opacity 0.15s;
        }
        
        .oncall-custom button:hover {
            opacity: 0.9;
        }
        
        .oncall-result {
            min-height: 100px;
        }
        
        .oncall-loading {
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
        }
        
        .oncall-loading::after {
            content: '';
            display: block;
            width: 32px;
            height: 32px;
            margin: 16px auto 0;
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        .oncall-error {
            padding: 16px;
            background: rgba(239,68,68,0.1);
            border: 1px solid rgba(239,68,68,0.3);
            border-radius: 8px;
            color: #ef4444;
            font-size: 0.9em;
        }
        
        .oncall-result-content {
            padding: 16px;
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 0.9em;
            line-height: 1.6;
        }
        
        .oncall-result-content strong {
            color: var(--primary-light);
        }
        
        .oncall-result-content code {
            background: rgba(99,102,241,0.1);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'SF Mono', monospace;
        }
        
        .oncall-result-content a {
            color: var(--primary-light);
            text-decoration: none;
        }
        
        .oncall-result-content a:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 768px) {
            .oncall-quick-groups {
                grid-template-columns: 1fr;
            }
            .oncall-quick-btn {
                bottom: 16px;
                right: 16px;
                width: 48px;
                height: 48px;
            }
        }

        /* CONTEXT MEMORY UI */
        .memory-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .memory-panel {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            width: 100%;
            max-width: 700px;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }
        
        .memory-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
        }
        
        .memory-header h3 {
            font-size: 1.1em;
            font-weight: 600;
            margin: 0;
        }
        
        .memory-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            transition: all 0.15s;
        }
        
        .memory-close:hover {
            background: rgba(99,102,241,0.08);
            color: var(--text);
        }
        
        .memory-close .lucide {
            width: 20px;
            height: 20px;
        }
        
        .memory-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px 24px;
        }
        
        .memory-loading,
        .memory-empty,
        .memory-error {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }
        
        .memory-loading::after {
            content: '';
            display: block;
            width: 32px;
            height: 32px;
            margin: 16px auto 0;
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        .memory-error {
            color: #ef4444;
        }
        
        .memory-topic-group {
            margin-bottom: 24px;
        }
        
        .memory-topic-title {
            font-size: 0.85em;
            font-weight: 600;
            color: var(--primary-light);
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .memory-item {
            padding: 14px 16px;
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            animation: slideUp 0.3s ease;
        }
        
        .memory-item:hover {
            background: rgba(99,102,241,0.08);
            border-color: var(--primary);
            transform: translateX(6px) scale(1.02);
            box-shadow: 0 4px 12px rgba(99,102,241,0.15);
        }
        
        .memory-date {
            font-size: 0.75em;
            color: var(--text-muted);
            margin-bottom: 6px;
        }
        
        .memory-question {
            font-size: 0.9em;
            font-weight: 500;
            color: var(--text);
            margin-bottom: 6px;
        }
        
        .memory-preview {
            font-size: 0.8em;
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* TOAST NOTIFICATIONS */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10001;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }
        
        .toast {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            opacity: 0;
            transform: translateX(100px);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: auto;
            min-width: 250px;
            max-width: 400px;
        }
        
        .toast.show {
            opacity: 1;
            transform: translateX(0);
        }
        
        .toast-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            flex-shrink: 0;
        }
        
        .toast-message {
            flex: 1;
            font-size: 0.9em;
            line-height: 1.4;
        }
        
        .toast-success {
            border-left: 3px solid #34d399;
        }
        
        .toast-success .toast-icon {
            background: rgba(52, 211, 153, 0.2);
            color: #34d399;
        }
        
        .toast-error {
            border-left: 3px solid #ef4444;
        }
        
        .toast-error .toast-icon {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }
        
        .toast-warning {
            border-left: 3px solid #f59e0b;
        }
        
        .toast-warning .toast-icon {
            background: rgba(245, 158, 11, 0.2);
            color: #f59e0b;
        }
        
        .toast-info {
            border-left: 3px solid var(--primary);
        }
        
        .toast-info .toast-icon {
            background: rgba(99, 102, 241, 0.2);
            color: var(--primary);
        }

        /* PROACTIVE SUGGESTIONS */
        .proactive-panel {
            position: fixed;
            bottom: 100px;
            right: 24px;
            width: 350px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.3);
            z-index: 998;
            opacity: 0;
            transform: translateY(20px) scale(0.95);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
        }
        
        .proactive-panel.show {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        
        .proactive-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.05));
        }
        
        .proactive-title {
            font-size: 0.85em;
            font-weight: 600;
            color: var(--text);
        }
        
        .proactive-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.15s;
        }
        
        .proactive-close:hover {
            background: rgba(99,102,241,0.1);
            color: var(--text);
        }
        
        .proactive-close .lucide {
            width: 16px;
            height: 16px;
        }
        
        .proactive-body {
            padding: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .proactive-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            background: var(--bg-input);
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 8px;
            transition: all 0.2s;
            animation: slideUp 0.3s ease;
        }
        
        .proactive-item:hover {
            background: rgba(99,102,241,0.08);
            border-color: var(--primary);
            transform: translateX(4px);
        }
        
        .proactive-text {
            flex: 1;
            font-size: 0.85em;
            line-height: 1.4;
            color: var(--text);
        }
        
        .proactive-action {
            background: var(--primary);
            border: none;
            border-radius: 6px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        .proactive-action:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(99,102,241,0.4);
        }
        
        .proactive-action .lucide {
            width: 14px;
            height: 14px;
            color: white;
        }
        
        @media (max-width: 768px) {
            .proactive-panel {
                right: 16px;
                left: 16px;
                width: auto;
                bottom: 80px;
            }
        }

        /* THINKING PANEL */
        .thinking-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 998;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        
        .thinking-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        .thinking-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 450px;
            height: 100vh;
            background: var(--bg-card);
            border-left: 1px solid var(--border);
            box-shadow: -4px 0 20px rgba(0,0,0,0.3);
            z-index: 999;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            flex-direction: column;
        }
        
        .thinking-panel.show {
            transform: translateX(0);
        }
        
        .thinking-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(99,102,241,0.05));
        }
        
        .thinking-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1em;
            font-weight: 600;
            color: var(--text);
        }
        
        .thinking-title .lucide {
            width: 20px;
            height: 20px;
            color: var(--primary);
        }
        
        .thinking-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            transition: all 0.15s;
        }
        
        .thinking-close:hover {
            background: rgba(139,92,246,0.1);
            color: var(--text);
        }
        
        .thinking-close .lucide {
            width: 18px;
            height: 18px;
        }
        
        .thinking-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        
        .thinking-empty {
            text-align: center;
            color: var(--text-muted);
            padding: 40px 20px;
            font-size: 0.9em;
        }
        
        .thinking-content {
            line-height: 1.7;
            color: var(--text);
        }
        
        .thinking-step {
            margin-bottom: 16px;
            padding: 12px;
            background: rgba(139,92,246,0.05);
            border-left: 3px solid var(--primary);
            border-radius: 6px;
            font-size: 0.9em;
        }
        
        .thinking-bullet {
            margin-bottom: 10px;
            padding-left: 20px;
            font-size: 0.9em;
            position: relative;
        }
        
        .thinking-bullet::before {
            content: '•';
            position: absolute;
            left: 8px;
            color: var(--primary);
        }
        
        .thinking-paragraph {
            margin-bottom: 14px;
            font-size: 0.9em;
            color: var(--text-muted);
        }
        
        .thinking-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 12px;
            padding: 6px 12px;
            background: rgba(139,92,246,0.1);
            border: 1px solid rgba(139,92,246,0.3);
            border-radius: 6px;
            color: var(--primary);
            font-size: 0.8em;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .thinking-badge:hover {
            background: rgba(139,92,246,0.2);
            transform: translateY(-1px);
        }
        
        .thinking-badge .lucide {
            width: 14px;
            height: 14px;
        }

        /* LIVE THINKING INDICATOR */
        .thinking-live {
            position: fixed;
            bottom: 100px;
            right: 24px;
            width: 320px;
            max-height: 120px;
            background: var(--bg-card);
            border: 1px solid rgba(139,92,246,0.2);
            border-radius: 12px;
            padding: 10px 14px;
            z-index: 900;
            opacity: 0;
            transform: translateY(10px) scale(0.95);
            pointer-events: none;
            transition: opacity 0.3s, transform 0.3s;
            box-shadow: 0 4px 20px rgba(139,92,246,0.1);
            cursor: pointer;
            overflow: hidden;
        }
        .thinking-live.show {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }
        .thinking-live-header {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75em;
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 6px;
        }
        .thinking-live-header .lucide {
            width: 14px;
            height: 14px;
        }
        .thinking-live-dots {
            display: flex;
            gap: 3px;
            margin-left: auto;
        }
        .thinking-live-dots span {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--accent);
            animation: thinkDot 1.4s infinite;
        }
        .thinking-live-dots span:nth-child(2) { animation-delay: 0.2s; }
        .thinking-live-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes thinkDot { 0%,80%,100%{opacity:0.3;transform:scale(0.8)} 40%{opacity:1;transform:scale(1.2)} }
        .thinking-live-body {
            font-size: 0.72em;
            color: var(--text-muted);
            line-height: 1.5;
            font-family: 'SF Mono', 'Fira Code', monospace;
            overflow: hidden;
            max-height: 60px;
            mask-image: linear-gradient(to bottom, black 60%, transparent);
            -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
        }

        /* THINKING PANEL — improved empty state */
        .thinking-empty {
            text-align: center;
            color: var(--text-muted);
            padding: 40px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .thinking-empty .lucide {
            width: 32px;
            height: 32px;
            opacity: 0.4;
        }
        .thinking-empty p {
            margin: 0;
            font-size: 0.9em;
        }
        .thinking-hint {
            font-size: 0.8em !important;
            opacity: 0.6;
        }

        /* THINKING PANEL — section headers */
        .thinking-section-head {
            font-size: 0.75em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--accent);
            margin: 16px 0 8px;
            padding-bottom: 4px;
            border-bottom: 1px solid rgba(139,92,246,0.1);
        }
        .thinking-step-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(99,102,241,0.1);
            color: var(--primary-light);
            font-size: 0.75em;
            font-weight: 700;
            margin-right: 8px;
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .thinking-panel {
                width: 100%;
            }
            .thinking-live {
                right: 12px;
                left: 12px;
                width: auto;
                bottom: 80px;
            }
        }

        /* LOADING */
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .quick-grid { grid-template-columns: 1fr; }
            .msg-body { max-width: 95%; padding: 16px 18px; }
        }

        /* MOBILE MENU */
        .mobile-menu-btn {
            display: block;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.2em;
            cursor: pointer;
            padding: 4px;
            border-radius: 6px;
            transition: color 0.2s, background 0.2s;
        }
        .mobile-menu-btn:hover { color: var(--text); background: rgba(148,163,184,0.1); }

/* Lucide Icons */
.lucide { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; stroke-width: 2; color: var(--icon-color); }
:root { --icon-color: #e2e8f0; }
[data-theme="light"] { --icon-color: #1e293b; }
.qicon .lucide { width: 1.2em; height: 1.2em; }
.rate-star .lucide { width: 1em; height: 1em; color: #fbbf24; }
.suggest-btn .lucide { width: 0.9em; height: 0.9em; }
.h-icon .lucide { width: 1em; height: 1em; }
.theme-toggle .lucide { width: 1.1em; height: 1.1em; }

/* ===== NEW WELCOME HOME ===== */
#particleCanvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: 0.18;
}
.welcome > *:not(#particleCanvas) { position: relative; z-index: 1; }

/* ORB — minimal elegant */
.orb-container { width: 48px; height: 48px; margin: 0 auto 14px; perspective: 600px; }
.orb {
    width: 100%; height: 100%; position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: orbFloat 5s ease-in-out infinite;
}
.orb-inner {
    width: 44px; height: 44px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #a78bfa, #6366f1 50%, #4338ca);
    box-shadow: 0 0 30px rgba(99,102,241,0.35), 0 0 60px rgba(99,102,241,0.1), inset 0 -6px 12px rgba(0,0,0,0.25);
    animation: orbPulseInner 3s ease-in-out infinite;
}
.orb-ring {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(99,102,241,0.15);
    animation: orbSpin 8s linear infinite;
}
.orb-ring-1 { width: 36px; height: 36px; top: 6px; left: 6px; border-color: rgba(99,102,241,0.2); }
.orb-ring-2 { width: 44px; height: 44px; top: 2px; left: 2px; border-color: rgba(139,92,246,0.12); animation-duration: 12s; animation-direction: reverse; }
.orb-ring-3 { width: 48px; height: 48px; top: 0; left: 0; border-color: rgba(99,102,241,0.06); animation-duration: 16s; border-style: dashed; }
.orb-pulse {
    position: absolute; width: 44px; height: 44px; top: 50%; left: 50%; transform: translate(-50%,-50%);
    border-radius: 50%; background: rgba(99,102,241,0.12);
    animation: orbPulseWave 3s ease-out infinite;
}
@keyframes orbFloat { 0%,100%{transform:translateY(0) rotateX(0)} 50%{transform:translateY(-8px) rotateX(3deg)} }
@keyframes orbPulseInner { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes orbSpin { to{transform:rotate(360deg)} }
@keyframes orbPulseWave { 0%{transform:translate(-50%,-50%) scale(1);opacity:0.4} 100%{transform:translate(-50%,-50%) scale(2.5);opacity:0} }

/* REVEAL TEXT */
.reveal-text {
    opacity: 0; transform: translateY(20px);
    animation: revealUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}
.reveal-delay-1 { animation-delay: 0.15s; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

/* TILT CARDS */
.tilt-card {
    transform-style: preserve-3d; perspective: 800px;
    opacity: 0; animation: cardReveal 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: calc(0.3s + var(--i,0) * 0.08s);
}
@keyframes cardReveal { from{opacity:0;transform:translateY(24px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.wcard-glow { display: none; }
.wcard:hover .wcard-glow { opacity: 0; }

.welcome-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
}
@media (max-width: 520px) { .welcome-grid { max-width: 100%; } }

.wcard {
    position: relative;
    padding: 8px 16px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(148,163,184,0.15);
    border-radius: 100px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.wcard::before { display: none; }
.wcard::after { display: none; }
.wcard:hover {
    border-color: var(--accent, rgba(99,102,241,0.35));
    background: color-mix(in srgb, var(--accent, #6366f1) 6%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
}
.wcard:hover::before { opacity: 0; }

.wcard-icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.wcard:hover .wcard-icon { transform: none; }

.wcard-label { font-weight: 600; font-size: 0.8em; margin-bottom: 0; color: var(--text); white-space: nowrap; letter-spacing: -0.01em; }
.wcard-desc { display: none; }

.wcard-arrow { display: none; }

.welcome-hint {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 24px; padding: 8px 18px;
    background: transparent;
    border: 1px dashed rgba(148,163,184,0.15);
    border-radius: 100px;
    font-size: 0.78em; color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: -0.01em;
}
.welcome-hint:hover {
    border-color: rgba(99,102,241,0.3);
    color: var(--primary-light);
    background: rgba(99,102,241,0.04);
}
.welcome-hint .lucide { width: 14px; height: 14px; color: #818cf8; }

/* Chat history groups & actions */
.ch-group-label { font-size:0.68em;color:var(--text-muted);padding:10px 12px 4px;font-weight:600;display:flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:0.5px }
.h-actions { display:flex;gap:2px;opacity:0;transition:opacity 0.15s;position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--bg-card,rgba(22,32,56,0.95));border-radius:6px;padding:2px 4px;pointer-events:none }
.history-item:hover .h-actions { opacity:1;pointer-events:auto }
.h-act { padding:4px 6px;border-radius:6px;cursor:pointer;color:var(--text-muted);transition:color 0.15s,background 0.15s }
.h-act .lucide { width:14px;height:14px }
.h-act:hover { color:var(--text);background:rgba(148,163,184,0.12) }
.h-act.pinned { color:#f59e0b }
.h-act.h-del:hover { color:#ef4444 }
.history-item .h-delete { display:none }  /* legacy — replaced by h-actions */

/* Topbar action buttons */
.topbar-btn { background:none;border:1px solid transparent;color:var(--text-muted);cursor:pointer;padding:6px 8px;border-radius:8px;transition:all 0.15s ease;flex-shrink:0;position:relative }
.topbar-btn:hover { color:var(--text);background:rgba(99,102,241,0.08);transform:scale(1.05) }
.topbar-btn:active { transform:scale(0.95) }
.topbar-btn .lucide { width:18px;height:18px }

/* Export dropdown */
.topbar-export-wrap { position:relative;display:inline-flex }
.topbar-export-menu { position:absolute;top:100%;right:0;margin-top:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:4px;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,0.2);opacity:0;transform:scale(0.95) translateY(-4px);pointer-events:none;transition:all .15s;z-index:100 }
.topbar-export-menu.show { opacity:1;transform:scale(1) translateY(0);pointer-events:auto }
.topbar-export-opt { display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;color:var(--text);font-size:0.82em;font-family:inherit;cursor:pointer;border-radius:6px;transition:background .1s }
.topbar-export-opt:hover { background:rgba(99,102,241,0.08) }
.topbar-export-opt .lucide { width:14px;height:14px;color:var(--text-muted) }

@media (max-width:768px) { .topbar-btn { display:none } }

/* Share toast */
.share-toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px 20px;box-shadow:0 8px 32px rgba(0,0,0,0.25);z-index:3000;display:flex;align-items:center;gap:10px;font-size:0.85em;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.3s;opacity:0;pointer-events:none }
.share-toast.show { transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto }
.share-toast input { background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text);font-size:0.85em;width:280px }
.share-toast button { padding:6px 12px;border-radius:6px;border:none;background:var(--primary);color:white;font-size:0.8em;cursor:pointer;font-weight:600;white-space:nowrap }
/* === PREMIUM GLASS MORPHISM UPGRADE === */

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

/* Sidebar glass upgrade */
.sidebar {
    background: linear-gradient(180deg, rgba(17,24,45,0.92) 0%, rgba(10,15,30,0.95) 100%) !important;
    border-right: 1px solid rgba(99,102,241,0.08) !important;
}
.sidebar-header {
    background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(139,92,246,0.02));
}

/* Logo breathing glow */
.logo-icon {
    animation: logoBreathe 4s ease-in-out infinite;
}
@keyframes logoBreathe {
}

/* Chat area subtle grid */
.chat-area {
    background-image: 
        linear-gradient(rgba(99,102,241,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}
.chat-area:has(.welcome) { scrollbar-width: none; }
.chat-area:has(.welcome)::-webkit-scrollbar { display: none; }
[data-theme="light"] .chat-area { background-image: none; }
[data-theme="light"] .rz-summary { background: rgba(99,102,241,0.06); border-left-color: var(--primary); }
[data-theme="light"] .rz-summary strong { color: #1e293b; }
[data-theme="light"] .msg.bot .msg-body code { background: rgba(99,102,241,0.08); color: #4338ca; }
[data-theme="light"] .msg.bot .msg-body h3 { color: #312e81; }
[data-theme="light"] .ss-card { border-color: rgba(99,102,241,0.15); background: #fff; }
[data-theme="light"] .ss-bar { background: rgba(240,242,248,0.95); }
[data-theme="light"] .rz-copy { background: rgba(99,102,241,0.04); border-color: rgba(99,102,241,0.12); }
[data-theme="light"] .rz-toc { background: rgba(99,102,241,0.04); border-color: rgba(99,102,241,0.1); }
[data-theme="light"] .rz-warn { background: rgba(245,158,11,0.08); border-left-color: #d97706; }

/* Message hover lift */

.msg.user:hover { transform: translateX(-2px); }

/* Message actions - show on hover like Claude */
.msg-act-btn { background: none; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 0.8em; transition: all 0.15s; line-height: 1; }
.msg-act-btn:hover { background: rgba(99,102,241,0.08); border-color: var(--border); color: var(--text); }

/* Bot message fade-in + slide-up */
.msg.bot { animation: botFadeIn 200ms ease-out; }
@keyframes botFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Input focus ring like Claude */

/* Message timestamps */
.msg.user .msg-time { text-align: right; }

/* Stop generation button */
.tw-stop { display: inline-flex; align-items: center; gap: 4px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; cursor: pointer; padding: 4px 12px; border-radius: 8px; font-size: 0.78em; margin-top: 8px; transition: all 0.15s; }
.tw-stop:hover { background: rgba(239,68,68,0.2); }

/* Edit button on user messages */
.msg-edit-btn { position: absolute; top: 8px; right: 4px; background: none; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 0.75em; opacity: 0; transition: all 0.15s; }
.msg.user:hover .msg-edit-btn { opacity: 0.6; }
.msg-edit-btn:hover { opacity: 1 !important; background: rgba(99,102,241,0.08); border-color: var(--border); }

/* Thinking panel - Claude style */
.rz-thinking summary { padding: 8px 14px; cursor: pointer; color: var(--text-muted); font-size: 0.9em; background: rgba(99,102,241,0.04); user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; }
.rz-thinking summary::before { content: '▶'; font-size: 0.6em; transition: transform 0.2s; }
.rz-thinking[open] summary::before { transform: rotate(90deg); }
.rz-thinking summary::-webkit-details-marker { display: none; }
.rz-thinking-body { padding: 12px 14px; color: var(--text-muted); line-height: 1.6; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.85em; max-height: 300px; overflow-y: auto; border-top: 1px solid rgba(148,163,184,0.08); opacity: 0.7; }

/* Bot avatar subtle indicator */
.msg.bot .msg-avatar {
    position: relative;
}
.msg.bot .msg-avatar::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 10px;
    border: 1px solid rgba(99,102,241,0.15);

}
@keyframes avatarPulse {
}

/* Input area floating effect — Claude style */
.input-area {
    background: linear-gradient(180deg, transparent 0%, var(--bg) 40%) !important;
    padding-top: 20px !important;
    padding-bottom: 16px !important;
}
[data-theme="light"] .input-area {
    background: linear-gradient(180deg, transparent 0%, rgba(240,242,248,0.97) 40%) !important;
}

/* Status badge glow */
.topbar-status {
    animation: statusGlow 3s ease-in-out infinite;
}
@keyframes statusGlow {
}

/* Welcome cards stagger + hover sound-wave effect */
.wcard::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(99,102,241,0.1) 0%, transparent 50%);
    opacity: 0; transition: opacity 0.3s; pointer-events: none; border-radius: 16px;
}
.wcard:hover::after { opacity: 1; }

/* Suggest buttons micro-bounce */
.suggest-btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0; transition: opacity 0.2s;
}
.suggest-btn:hover::after { opacity: 1; }
.suggest-btn:active { transform: scale(0.96) !important; }

/* History item active glow */
.history-item.active {
    box-shadow: inset 3px 0 0 var(--primary), 0 0 20px rgba(99,102,241,0.06);
}

/* Scrollbar glow */
.chat-area::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(99,102,241,0.3), rgba(139,92,246,0.2));
    border-radius: 3px;
}

/* Welcome hint sparkle */
.welcome-hint {
    animation: hintShimmer 3s ease-in-out infinite;
}
@keyframes hintShimmer {
    0%,100% { border-color: rgba(99,102,241,0.15); }
}

/* Orb mouse-reactive glow */
.orb-inner {
    background: radial-gradient(circle at 35% 35%, #c4b5fd, #818cf8 30%, #6366f1 60%, #4338ca) !important;
    box-shadow: 0 0 30px rgba(99,102,241,0.5), 0 0 60px rgba(139,92,246,0.2), 0 0 100px rgba(99,102,241,0.1), inset 0 -8px 16px rgba(0,0,0,0.3) !important;
}

/* User message gradient shimmer */
.msg.user .msg-body {
    background: rgba(99,102,241,0.08) !important;
    border-radius: 18px 18px 4px 18px;
    padding: 12px 16px !important;
}

/* Space Grotesk for headings */
.welcome h2, .logo h1, .wcard-label, .topbar-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}
.welcome h2 {
    font-size: 2em !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
}

/* Orb mouse-follow via CSS custom props */
.orb-container {
    filter: drop-shadow(0 0 30px rgba(99,102,241,0.2));
    transition: transform 0.3s ease;
}

/* Card icon color match accent */
.wcard-icon .lucide { color: var(--accent) !important; }

/* Smooth page load */
@keyframes pageLoad { from { opacity: 0; } to { opacity: 1; } }

/* === LIGHT THEME FIX === */
[data-theme="light"] {
    --bg: #f4f6fb;
    --bg-card: rgba(255,255,255,0.92);
    --bg-input: rgba(255,255,255,0.95);
    --bot-msg: rgba(255,255,255,0.92);
    --border: rgba(99,102,241,0.12);
    --glow: none;
}
[data-theme="light"] body::before { opacity: 0.3; }
[data-theme="light"] body::after { opacity: 0; }
[data-theme="light"] .sidebar {
    background: rgba(255,255,255,0.88) !important;
    border-right-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .topbar {
    background: transparent !important;
    border-bottom-color: rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .msg.bot .msg-body {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
[data-theme="light"] .msg.user .msg-body {
    background: rgba(99,102,241,0.06) !important;
}
[data-theme="light"] .input-wrapper {
    background: #fff !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .input-wrapper:focus-within {
    border-color: rgba(99,102,241,0.4) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.08), 0 1px 8px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .wcard {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.06) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .wcard:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important;
    border-color: rgba(99,102,241,0.2) !important;
}
[data-theme="light"] .orb-inner {
    box-shadow: 0 0 20px rgba(99,102,241,0.25), 0 0 50px rgba(99,102,241,0.1), inset 0 -6px 12px rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .orb-ring { border-color: rgba(99,102,241,0.12) !important; }
[data-theme="light"] .welcome h2 { -webkit-text-fill-color: #1e293b !important; background: none !important; color: #1e293b !important; }
[data-theme="light"] .history-item.active { background: rgba(99,102,241,0.08); }
[data-theme="light"] .history-item .h-actions { background: rgba(255,255,255,0.95) !important; }
[data-theme="light"] .suggest-btn { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.15); }
[data-theme="light"] #particleCanvas { opacity: 0.35 !important; }

/* Typing cursor — thin blinking pipe */
.tw-cursor {
    display: inline-block;
    width: 1.5px; height: 1.1em;
    background: var(--text-muted);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursorBlink 1s step-end infinite;
    border-radius: 1px;
}
@keyframes cursorBlink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* === NEXT LEVEL POLISH === */

/* Sidebar items hover glow trail */
.history-item {
    position: relative;
    overflow: hidden;
}
.history-item::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(90deg, rgba(99,102,241,0.12), transparent);
    transition: width 0.3s ease;
}
.history-item:hover::before { width: 100%; }

/* Bot message entrance - fade + slide-up */
.msg.bot {
    animation: botFadeIn 200ms ease-out;
}
@keyframes botSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.msg.user {
    animation: userSlideIn 150ms ease-out;
}
@keyframes userSlideIn {
    from { opacity: 0; transform: translateX(8px) translateY(4px); }
    to { opacity: 1; transform: translateX(0) translateY(0); }
}

/* Topbar minimal line */

/* Input wrapper — clean, no animation */
.input-wrapper:focus-within { animation: none !important; }

/* Welcome grid stagger entrance */
.welcome-grid .wcard:nth-child(1) { animation-delay: 0.35s; }
.welcome-grid .wcard:nth-child(2) { animation-delay: 0.45s; }
.welcome-grid .wcard:nth-child(3) { animation-delay: 0.55s; }
.welcome-grid .wcard:nth-child(4) { animation-delay: 0.65s; }

/* Suggest buttons wave entrance */
.suggestions { animation: suggestIn 0.4s cubic-bezier(0.16,1,0.3,1); }
@keyframes suggestIn {
}
.suggest-btn {
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
.suggest-btn:hover {
    background: rgba(99,102,241,0.15) !important;
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 6px 20px rgba(99,102,241,0.15) !important;
}

/* Code blocks in bot messages - Claude style */
.msg.bot .msg-body pre,
.msg.bot .msg-body code {
    position: relative;
}
.msg.bot .msg-body pre {
    background: #1e1e2e !important;
    border: 1px solid rgba(148,163,184,0.1);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    margin: 14px 0;
}
.msg.bot .msg-body pre > code {
    display: block;
    padding: 14px 16px;
    overflow-x: auto;
    background: none !important;
    color: #e2e8f0 !important;
    font-size: 0.85em;
    line-height: 1.6;
}
.msg.bot .msg-body pre .code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(148,163,184,0.08);
    font-size: 0.75em;
    color: #94a3b8;
    font-family: 'Inter', sans-serif;
}
.msg.bot .msg-body pre .code-copy {
    background: none;
    border: 1px solid rgba(148,163,184,0.15);
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 1em;
    transition: all 0.15s;
}
.msg.bot .msg-body pre .code-copy:hover { color: #e2e8f0; border-color: rgba(148,163,184,0.3); }
[data-theme="light"] .msg.bot .msg-body pre { background: #f8fafc !important; border-color: #e2e8f0; }
[data-theme="light"] .msg.bot .msg-body pre > code { color: #1e293b !important; }
[data-theme="light"] .msg.bot .msg-body pre .code-header { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .msg.bot .msg-body pre .code-copy { border-color: #cbd5e1; color: #64748b; }

/* Tables — clean, no glow */
.msg.bot .msg-body table {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none !important;
}

/* Blockquote — simple left bar */
.msg.bot .msg-body blockquote {
    border-left: 3px solid rgba(99,102,241,0.3) !important;
    border-image: none !important;
    padding: 8px 16px;
    margin: 12px 0;
    color: var(--text-muted);
    background: rgba(99,102,241,0.03);
    border-radius: 0 8px 8px 0;
}

/* Send button ripple on click */
.send-btn:active {
    transform: scale(0.92) !important;
}

/* Feedback panel slide-in */
.feedback-panel {
    animation: feedbackSlide 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
@keyframes feedbackSlide {
}

/* Rating stars hover cascade */
.rate-star { transition: all 0.15s cubic-bezier(0.16,1,0.3,1) !important; }
.rate-star:hover { transform: scale(1.3) translateY(-2px) !important; }
.rate-star:hover ~ .rate-star { opacity: 0.3; }

/* Typing indicator — clean */
#typingIndicator .msg-body {
    background: transparent !important;
}

/* Mobile sidebar slide */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important; left: 0; top: 0; bottom: 0;
        z-index: 100; margin-left: 0 !important;
        box-shadow: 20px 0 60px rgba(0,0,0,0.5);
    }
}

/* Image preview hover zoom */
#imagePreview img {
    transition: transform 0.2s ease;
}
#imagePreview:hover img {
    transform: scale(1.05);
}

/* Share toast glass */
.share-toast {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* === MODEL SELECTOR === */
.hint-sep { opacity: 0.4; }
.model-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.15);
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
    font-weight: 600;
    color: var(--primary-light);
    user-select: none;
}
.model-badge .lucide { width: 11px; height: 11px; }
.model-badge:hover { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3); }
.model-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    min-width: 220px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    z-index: 100;
    animation: dropIn 0.15s ease;
}
.model-badge.open .model-dropdown { display: block; }
@keyframes dropIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.model-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    color: var(--text-muted);
    transition: all 0.12s;
    white-space: nowrap;
}
.model-opt:hover { background: rgba(99,102,241,0.08); color: var(--text); }
.model-opt.active { color: var(--text); font-weight: 600; }
.model-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.model-opt.active .model-dot { background: var(--success); box-shadow: 0 0 8px rgba(34,197,94,0.4); }
.model-tag { margin-left: auto; font-size: 0.7em; padding: 2px 6px; border-radius: 4px; background: rgba(99,102,241,0.1); color: var(--primary-light); font-weight: 600; }
.model-tag.fast { background: rgba(34,197,94,0.1); color: #22c55e; }

/* === CLEAN BOT MESSAGES (Claude-style) === */
.msg.bot .msg-body {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    border-radius: 0 !important;
}
.msg.bot + .msg.user, .msg.user + .msg.bot {
    padding-top: 8px;
    border-top: 1px solid rgba(148,163,184,0.06);
}

/* === STARRED SECTION === */
.ch-section-starred .ch-group-label { color: #fbbf24; }

/* === HIDE BOTTOM INPUT ON WELCOME — handled via JS === */
.input-area.hidden-for-welcome { opacity: 0; pointer-events: none; height: 0; padding: 0; overflow: hidden; transition: all 0.3s; }
.welcome-input-area .input-wrapper { max-width: 100%; border-color: rgba(148,163,184,0.12); }
/* When welcomeScreen is hidden (display:none set by JS), also force-hide welcome-input-area */
#welcomeScreen[style*="display: none"] .welcome-input-area,
#welcomeScreen[style*="display:none"] .welcome-input-area { display: none !important; }
/* When chat has messages (not just welcome), hide welcome input */
.chat-area .msg ~ .welcome .welcome-input-area { display: none; }
.welcome-input-area .input-wrapper textarea {
    flex: 1; background: none; border: none; color: var(--text); font-size: 0.95em;
    font-family: inherit; outline: none; padding: 10px 0; resize: none; max-height: 200px;
    overflow-y: auto; line-height: 1.5; field-sizing: content;
}
.welcome-input-area .input-wrapper textarea::placeholder { color: var(--text-muted); }

/* === SIDEBAR TABS === */
.sidebar-tabs{display:flex;gap:2px;padding:12px 12px 0;background:var(--bg-sidebar)}
.stab{flex:1;padding:8px 0;border:none;background:transparent;color:var(--text-muted);font-size:0.78em;font-weight:600;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .15s}
.stab:hover{background:rgba(99,102,241,0.08);color:var(--text)}
.stab.active{background:rgba(99,102,241,0.15);color:var(--primary-light)}
.stab .lucide{width:14px;height:14px}

/* === PROJECT LIST === */
.proj-item{display:flex;align-items:center;gap:8px;padding:9px 14px;cursor:pointer;border-radius:8px;margin:2px 8px;transition:background .12s;font-size:0.82em;color:var(--text)}
.proj-item:hover{background:rgba(99,102,241,0.08)}
.proj-item.active{background:rgba(99,102,241,0.15);color:var(--primary-light)}
.proj-item .lucide{width:15px;height:15px;opacity:0.6}
.proj-item .proj-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-item .proj-count{font-size:0.75em;color:var(--text-muted);background:rgba(148,163,184,0.1);padding:2px 7px;border-radius:10px}
.proj-item .proj-actions{display:none;gap:4px;align-items:center}
.proj-item:hover .proj-actions{display:flex}
.proj-item:hover .proj-count{display:none}
.proj-actions button{background:none;border:none;cursor:pointer;padding:2px;color:var(--text-muted);opacity:0.6;transition:opacity .12s}
.proj-actions button:hover{opacity:1}
.proj-actions .lucide{width:13px;height:13px}
.proj-members{display:flex;padding:4px 14px 8px 38px}
.proj-members .member-avatar{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.6em;font-weight:700;margin-left:-6px;border:2px solid var(--bg-sidebar)}
.proj-members .member-avatar:first-child{margin-left:0}
.proj-members .member-add{background:rgba(148,163,184,0.15);color:var(--text-muted);cursor:pointer}
.proj-members .member-add:hover{background:rgba(99,102,241,0.2);color:var(--primary-light)}

@keyframes spin{to{transform:rotate(360deg)}}
.chart-card{transition:transform .15s,box-shadow .15s;cursor:pointer;position:relative}
.chart-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.chart-dl{position:absolute;top:10px;right:10px;background:rgba(99,102,241,0.15);color:var(--primary-light);border:none;padding:4px 8px;border-radius:6px;font-size:0.7em;cursor:pointer;opacity:0;transition:opacity .15s;z-index:2}
.chart-card:hover .chart-dl{opacity:1}
@media(max-width:768px){.chart-card[style*="grid-column:span 2"]{grid-column:span 1!important}}

/* === GLOBAL BUTTON POLISH === */
button, .wcard, .suggest-btn, .bp-pill, .stab { -webkit-tap-highlight-color: transparent; }

/* Touch & click optimization */
button, a, .wcard, .suggest-btn, .bp-pill, .stab, .history-item, .topbar-btn, .send-btn, .mobile-menu-btn, .theme-toggle, [onclick] {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
button, .topbar-btn, .history-item, [onclick] { cursor: pointer; }
.history-item:active, .stab:active, .bp-pill:active { transform: scale(0.97); }
#_b14, #_b14w { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.sidebar-tabs .stab { transition: all 0.15s; }
.sidebar-tabs .stab:active { transform: scale(0.96); }
.wcard:active { transform: translateY(-1px) scale(0.98) !important; }
.mobile-menu-btn { transition: all 0.15s; }
.mobile-menu-btn:active { transform: scale(0.9); }

/* Ticket extracted fields */
.rz-to-fields { display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px; }
.rz-to-tag { background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.2); color:var(--text-muted); padding:3px 10px; border-radius:6px; font-size:0.8em; }
.rz-to-tag strong { color:var(--text-primary,#e2e8f0); }
[data-theme="light"] .rz-to-tag strong { color:#1e293b; }

/* Bug analytics mobile responsive */
@media(max-width:768px) {
}
@media(max-width:480px) {
}

/* === MODULE 4: HANDOVER PACK STYLING === */
.rz-handover {
    margin-top: 16px;
    padding: 16px 20px;
    border-left: 4px solid #f59e0b;
    background: rgba(245,158,11,0.08);
    border-radius: 0 12px 12px 0;
    font-size: 0.92em;
}
[data-theme="light"] .rz-handover {
    background: rgba(245,158,11,0.1);
}
.rz-handover h3 { margin: 0 0 10px 0; color: #f59e0b; font-size: 1em; }
.rz-handover ul { margin: 6px 0; padding-left: 18px; }
.rz-handover li { margin: 3px 0; }

/* Handover banner in chat */
.rz-handover-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; margin: 8px 0;
    background: rgba(245,158,11,0.12);
    border-radius: 8px; font-size: 0.85em; color: #f59e0b;
}
.rz-handover-banner::before { content: '🤝'; font-size: 1.1em; }

/* === FEATURE 1: LOW CONFIDENCE WARNING === */
.rz-low-conf {
    margin-top: 12px; padding: 10px 14px;
    background: rgba(239,68,68,0.08);
    border-left: 3px solid #ef4444;
    border-radius: 0 8px 8px 0;
    font-size: 0.9em; color: #fca5a5;
}
[data-theme="light"] .rz-low-conf { color: #dc2626; background: rgba(239,68,68,0.06); }

/* === FEATURE 2: SMART FOLLOW-UP === */
.rz-followup {
    margin-top: 12px; padding: 10px 14px;
    background: rgba(99,102,241,0.06);
    border-radius: 10px; font-size: 0.9em;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rz-fu-yes, .rz-fu-no {
    padding: 5px 14px; border-radius: 8px; border: 1px solid rgba(99,102,241,0.2);
    background: rgba(99,102,241,0.1); color: var(--primary-light);
    cursor: pointer; font-size: 0.88em; transition: all 0.2s;
}
.rz-fu-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rz-fu-tag, .rz-fu-reason {
    padding: 4px 12px; border-radius: 16px; font-size: 0.84em; cursor: pointer;
    border: 1px solid rgba(99,102,241,0.2); background: rgba(99,102,241,0.08);
    color: var(--primary-light); transition: all 0.2s;
}
.rz-fu-tag:hover { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); }
.rz-fu-reason:hover { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); color: #fbbf24; }
.rz-fu-resolved, .rz-fu-diagnose { animation: rzFadeIn 0.3s ease; }
@keyframes rzFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* === FEATURE 2: SMART FOLLOW-UP v2 === */
.rz-followup {
    margin-top: 12px; padding: 10px 14px;
    background: rgba(99,102,241,0.06);
    border-radius: 10px; font-size: 0.9em;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rz-followup em { flex: 1; min-width: 120px; }
.rz-fu-yes, .rz-fu-no {
    padding: 5px 14px; border-radius: 8px; border: 1px solid rgba(99,102,241,0.2);
    background: rgba(99,102,241,0.1); color: var(--primary-light);
    cursor: pointer; font-size: 0.88em; transition: all 0.2s;
}
.rz-fu-yes:hover { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); }
.rz-fu-no:hover { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.3); }
.rz-fu-done, .rz-fu-diagnose { animation: rzFadeIn 0.3s ease; }
@keyframes rzFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.rz-fu-star-row { display: inline-flex; gap: 2px; margin: 0 6px; }
.rz-fu-star { cursor: pointer; font-size: 1.2em; color: rgba(99,102,241,0.3); transition: color 0.15s, transform 0.15s; }
.rz-fu-star:hover, .rz-fu-star.lit { color: #fbbf24; }
.rz-fu-star:hover { transform: scale(1.2); }

/* ── RESPONSE LAYOUT IMPROVEMENTS ── */

/* Better spacing between sections */
.msg.bot .msg-body h3 {
    margin: 20px 0 10px;
    font-size: 0.92em;
    font-weight: 700;
    color: var(--primary-light);
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Auto-style numbered h3 headers as step cards */
.msg.bot .msg-body h3 + br + strong,
.msg.bot .msg-body h3 + strong {
    color: var(--text);
}

/* First bold line = answer summary */
.msg.bot .msg-body > strong:first-child {
    display: block;
    font-size: 1.02em;
    line-height: 1.55;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.06));
    border-left: 3px solid var(--primary);
    border-radius: 0 10px 10px 0;
    margin: 0 0 16px 0;
}

/* Images: card style with subtle shadow */
.msg.bot .msg-body img:not([width="14"]):not([width="16"]):not(.lucide) {
    max-width: 100%;
    border-radius: 10px;
    margin: 14px 0;
    border: 1px solid rgba(148,163,184,0.15);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: zoom-in;
}
.msg.bot .msg-body img:not([width="14"]):not([width="16"]):hover {
    transform: scale(1.01);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* Inline lists with dash/number: better spacing */
.msg.bot .msg-body br + strong {
    display: inline-block;
    margin-top: 4px;
}

/* Conditional blocks (Se.../If...) as callout cards */
.msg.bot .msg-body strong:has(+ br) {
    display: block;
    margin-top: 12px;
}

/* Prevention/Note sections */
.msg.bot .msg-body h3:last-of-type {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(148,163,184,0.1);
}

/* Suggestions bar at bottom */
.msg.bot .suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(148,163,184,0.08);
}

/* Follow-up prompt */
.rz-followup {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(99,102,241,0.05);
    border-radius: 10px;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rz-followup button {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.15s;
}
.rz-followup button:hover {
    border-color: var(--primary-light);
    color: var(--text);
}

/* Table improvements */
.msg.bot .msg-body table {
    margin: 16px 0;
    border-radius: 10px;
    overflow: hidden;
}
.msg.bot .msg-body table td,
.msg.bot .msg-body table th {
    padding: 10px 14px;
}

/* Light theme adjustments */
[data-theme="light"] .msg.bot .msg-body > strong:first-child {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.04));
}

/* === Bug Report Panel (moved from inline <style> in index.html) === */
.bug-fab{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(239,68,68,.3);z-index:999;transition:all .25s;border:none;cursor:pointer}
.bug-fab:hover::before{opacity:1}
.bug-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 30px rgba(239,68,68,.4)}
.bug-fab.open{border-radius:50%;background:var(--border);box-shadow:none;transform:rotate(45deg)}
.bug-panel{position:fixed;top:0;right:-420px;width:400px;height:100vh;background:var(--bg-card);backdrop-filter:blur(24px);border-left:1px solid var(--border);z-index:998;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(0,0,0,.3)}
.bug-panel.open{right:0}
.bp-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.bp-head h3{font-size:.95em;font-weight:700;flex:1;margin:0}
.bp-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.1em;padding:4px 8px;border-radius:8px}
.bp-close:hover{color:var(--text);background:rgba(148,163,184,.1)}
.bp-body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:16px}
.bp-body::-webkit-scrollbar{width:4px}
.bp-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.bp-section{display:flex;flex-direction:column;gap:6px}
.bp-label{font-size:.7em;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.bp-context{background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:.78em;line-height:1.5;max-height:100px;overflow-y:auto;color:var(--text-muted)}
.bp-context b{color:var(--text);font-weight:600}
.bp-context:empty{display:none}
.bp-pills{display:flex;gap:6px;flex-wrap:wrap}
.bp-pill{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:.78em;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.bp-pill:hover{border-color:var(--primary-light);color:var(--text)}
.bp-pill.on{color:#fff;border-color:transparent}
.bp-pill[data-t="wrong"].on{background:#ef4444}
.bp-pill[data-t="incomplete"].on{background:#f59e0b}
.bp-pill[data-t="confusing"].on{background:#8b5cf6}
.bp-ta{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:10px;padding:12px;color:var(--text);font-family:inherit;font-size:.84em;resize:vertical;outline:none;transition:border .2s;min-height:80px;line-height:1.6;box-sizing:border-box}
.bp-ta:focus{border-color:var(--primary-light)}
.bp-ta::placeholder{color:var(--text-muted)}
.bp-img-row{display:flex;align-items:center;gap:8px}
.bp-img-label{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px dashed var(--border);border-radius:8px;cursor:pointer;font-size:.8em;color:var(--text-muted);transition:border-color .15s;flex:1}
.bp-img-label:hover{border-color:var(--primary-light)}
.bp-thumb{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.bp-submit{width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-family:inherit;font-size:.88em;font-weight:600;cursor:pointer;transition:all .2s;margin-top:auto}
.bp-submit:hover:not(:disabled){box-shadow:0 4px 20px rgba(99,102,241,.3);transform:translateY(-1px)}
.bp-submit:disabled{opacity:.5;cursor:not-allowed}
.bp-success{text-align:center;padding:40px 20px;animation:bpFadeIn .3s ease-out}
.bp-success-icon{font-size:2.5em;margin-bottom:12px}
.bp-success h4{margin:0 0 6px;color:var(--text)}
.bp-success p{color:var(--text-muted);font-size:.82em;margin:0}
.bp-success code{background:var(--bg-input);padding:2px 8px;border-radius:4px;font-size:.85em;color:var(--primary-light)}
@keyframes bpFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.bug-panel{width:100%;right:-100%}.ticket-panel{width:100%;right:-100%}}
.ticket-panel{position:fixed;top:0;right:-420px;width:400px;height:100vh;background:var(--bg-card);backdrop-filter:blur(24px);border-left:1px solid var(--border);z-index:999;display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(0,0,0,.3)}
.ticket-panel.open{right:0}

/* === Guided Tour (moved from inline <style> in index.html) === */
.tour-overlay{position:fixed;inset:0;z-index:10000;pointer-events:none;opacity:0;transition:opacity .3s}
.tour-overlay.on{opacity:1;pointer-events:auto}
.tour-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);transition:opacity .3s}
.tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 4000px rgba(0,0,0,.65),0 0 0 4px var(--primary-light),0 0 30px rgba(99,102,241,.3);transition:all .4s cubic-bezier(.4,0,.2,1);z-index:10001;pointer-events:none}
.tour-card{position:fixed;z-index:10002;background:var(--bg-card);backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--border);border-radius:16px;padding:20px;max-width:320px;box-shadow:0 8px 40px rgba(0,0,0,.4);transition:all .35s cubic-bezier(.4,0,.2,1);opacity:0;transform:translateY(10px)}
.tour-card.show{opacity:1;transform:translateY(0)}
.tour-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.3),transparent)}
.tour-step{font-size:.65em;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--primary-light);margin-bottom:6px}
.tour-title{font-size:1em;font-weight:700;margin-bottom:6px}
.tour-desc{font-size:.84em;color:var(--text-muted);line-height:1.6;margin-bottom:16px}
.tour-btns{display:flex;gap:8px;align-items:center}
.tour-skip{background:none;border:none;color:var(--text-muted);font-size:.78em;cursor:pointer;padding:6px 10px;border-radius:6px;font-family:inherit}
.tour-skip:hover{color:var(--text);background:rgba(148,163,184,.08)}
.tour-dots{flex:1;display:flex;gap:4px;justify-content:center}
.tour-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:all .2s}
.tour-dot.on{background:var(--primary-light);width:18px;border-radius:3px}
.tour-next{padding:8px 18px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-family:inherit;font-size:.82em;font-weight:600;cursor:pointer;transition:all .2s}
.tour-next:hover{box-shadow:0 4px 16px rgba(99,102,241,.3)}

/* === CSP-compliant replacements for inline styles === */
.csp-hidden{display:none}
.csp-sidebar-newchat-wrap{padding:12px 16px 0}
.csp-full-width-no-margin{width:100%;margin:0}
.csp-pt8{padding-top:8px}


.csp-tab-projects-hidden{padding-top:8px;display:none}
.csp-project-input-wrap{padding:0 12px 8px;display:flex;gap:6px}
.csp-project-input{flex:1;padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-size:0.78em;box-sizing:border-box}
.csp-add-project-btn{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--primary);color:#fff;font-size:0.78em;cursor:pointer;white-space:nowrap}
.csp-sidebar-footer{padding:14px 16px;border-top:1px solid var(--border)}
.csp-admin-btn{width:100%;padding:8px;margin-bottom:8px;border-radius:10px;border:1px solid var(--border);background:rgba(99,102,241,0.06);color:var(--primary-light);font-size:0.78em;cursor:pointer;font-family:inherit;transition:all .15s}
.csp-switch-label{margin-left:auto;font-size:0.7em;color:var(--text-muted)}
.csp-tour-btn{font-weight:700;font-size:1em}
.csp-wcard-0{--accent:#6366f1;--i:0}
.csp-wcard-1{--accent:#22c55e;--i:1}
.csp-wcard-2{--accent:#f59e0b;--i:2}
.csp-wcard-3{--accent:#06b6d4;--i:3}
.csp-attach-btn{background:none;border:none;cursor:pointer;font-size:1.2em;padding:4px 8px;opacity:0.6}
.csp-image-preview{display:none;padding:8px 16px;max-width:640px;margin:0 auto}
.csp-hint-keys{opacity:0.5}
.csp-bp-tool{float:right;font-size:0.8em;opacity:0.7}
.csp-required{color:#ef4444}
.csp-bp-img-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9em}
.csp-ticket-icon{font-size:1.1em}
.csp-ticket-loading{text-align:center;padding:30px 0}
.csp-ticket-loading-text{font-size:0.8em;color:var(--text-muted);margin-top:8px}
.csp-tour-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:4px}
.csp-tour-close:hover{color:var(--text)}
.csp-lb-img{transition:opacity 0.15s}
.csp-exit-survey{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center}
.csp-exit-card{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:40px 36px;max-width:380px;width:90%;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,0.4);animation:rzExitIn .25s ease-out}
.csp-exit-icon{font-size:2.8em;margin-bottom:12px}
.csp-exit-title{margin:0 0 6px;color:var(--text);font-size:1.3em;font-weight:600}
.csp-exit-subtitle{color:var(--text-muted);font-size:0.9em;margin:0 0 24px;line-height:1.4}
.csp-exit-stars{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.csp-es-star{font-size:2em;background:none;border:none;cursor:pointer;transition:transform 0.15s,filter 0.15s;color:var(--text-muted);opacity:0.3;padding:4px 6px;border-radius:8px}
.csp-es-star:hover{transform:scale(1.2);opacity:1;color:#fbbf24}
.csp-es-star.lit{opacity:1;color:#fbbf24;filter:none;text-shadow:0 0 12px rgba(251,191,36,0.4)}
.csp-exit-labels{display:flex;justify-content:space-between;font-size:0.7em;color:var(--text-muted);opacity:0.6;margin-bottom:16px;padding:0 12px}
.csp-exit-textarea{width:100%;height:72px;border-radius:12px;border:1px solid var(--border);background:var(--bg-input);color:var(--text);padding:12px 14px;font-size:0.85em;font-family:inherit;resize:none;margin-bottom:16px;box-sizing:border-box;display:none;transition:all .2s}
.csp-exit-textarea.show{display:block}
.csp-exit-btns{display:flex;gap:10px;justify-content:center}
.csp-exit-submit{padding:12px 32px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--primary),var(--accent));color:white;font-weight:600;cursor:pointer;font-size:0.9em;font-family:inherit;opacity:0.4;pointer-events:none;transition:all .2s;flex:1}
.csp-exit-submit.ready{opacity:1;pointer-events:auto}
.csp-exit-submit:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,0.3)}
.csp-exit-skip{padding:12px 20px;border-radius:12px;border:1px solid var(--border);background:none;color:var(--text-muted);cursor:pointer;font-size:0.85em;font-family:inherit;transition:all .15s}
.csp-exit-skip:hover{background:rgba(148,163,184,0.06);color:var(--text)}
.csp-zoom-download{background:#6366f1;color:white}
.csp-zoom-close{background:rgba(255,255,255,0.1);color:#e2e8f0}

/* === UX REDESIGN (safe additions) === */

/* Hide removed elements */
.welcome-pills, .welcome-hint, #particleCanvas, .orb-container,
.topbar-status, .csp-beta-badge { display: none !important; }

/* Welcome examples */
.welcome-examples { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; max-width: 560px; width: 100%; }
.we { padding: 12px 16px; text-align: left; background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--text-muted); font-size: 14px; font-family: inherit; cursor: pointer; transition: all 0.15s; }
.we:hover { border-color: var(--accent, #4f46e5); color: var(--text); background: rgba(79,70,229,0.03); }

/* Hide meta bar by default */

/* Collapsible long messages */
.msg-body.rz-collapsible { max-height: 500px; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%); }
.rz-show-more { display:block;width:100%;padding:10px;margin-top:-4px;background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--primary-light);font-size:0.8em;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;text-align:center }
.rz-show-more:hover { background:rgba(99,102,241,0.06);border-color:rgba(99,102,241,0.2) }

/* Autocomplete hint */
#acHint { display: none; align-items: center; max-width: 740px; margin: 0 auto 6px; padding: 6px 14px; font-size: 13px; color: var(--text-muted); background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; animation: acIn 0.15s ease; }
@keyframes acIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
#acHint:hover { border-color: rgba(79,70,229,0.3); }
.ac-match { font-weight: 600; color: var(--text); }
.ac-tab { margin-left: auto; font-size: 11px; color: var(--text-muted); opacity: 0.5; background: rgba(0,0,0,0.04); padding: 2px 6px; border-radius: 4px; }

/* Live Rewrite Panel */
/* old LR CSS removed */
.lr-btn { padding: 7px 14px; border-radius: 8px; font-size: 0.8em; font-family: inherit; cursor: pointer; transition: all 0.15s; font-weight: 500; }
.lr-apply { background: #4f46e5; color: #fff; border: none; }
.lr-copy { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }

/* Dashboard freshness */
.an-fresh { font-size: 0.7em; color: var(--text-muted); opacity: 0.6; margin-left: auto; }

/* Fix li inline */
.msg.bot .msg-body li { margin: 2px 0 !important; }
.msg.bot .msg-body li br { display: none; }
.msg.bot .msg-body li p { display: inline; margin: 0; }

/* === RENZO 2.0 — PREMIUM REDESIGN === */

/* Welcome: hide orb, particles, pills — just greeting + input */
.orb-container, .welcome-pills, .welcome-hint { display: none !important; }

/* Messages: no bot avatar, clean layout */


/* Topbar: hide status dot */
.topbar-status { display: none !important; }

/* Input: hide disclaimer + hints */

/* User bubble: clean radius */
.msg.user .msg-body { border-radius: 16px 16px 4px 16px !important; }

/* Bot first bold line: no callout card, just bold */
.msg.bot .msg-body > strong:first-child {
    display: inline !important; font-size: inherit !important;
    padding: 0 !important; background: none !important;
    border: none !important; margin: 0 !important;
    border-radius: 0 !important; line-height: inherit !important;
}

/* Typing: just dots, no progress bar */
#typingIndicator .msg-body > div:nth-child(1) > span,
#typingIndicator .msg-body > div:nth-child(2),
#typingIndicator .msg-body > span#typingTime { display: none; }

/* Smooth message entrance */
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* BETA badge gone */

/* Sidebar: cleaner */
.sidebar-footer .csp-admin-btn { font-size: 0.75em; opacity: 0.5; }
.sidebar-footer .csp-admin-btn:hover { opacity: 1; }

/* === SMART BAR (⌘K) — Spotlight for Renzo === */
#smartBar {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 20vh;
}
#smartBar.sb-open { display: flex; }
.sb-search {
    width: 560px; max-width: 90vw;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
    overflow: hidden;
    animation: sbIn 0.15s ease;
}
@keyframes sbIn { from { opacity: 0; transform: scale(0.96) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.sb-search > div:first-child,
.sb-search { position: relative; }
#sbInput {
    width: 100%; border: none; outline: none;
    padding: 16px 20px 16px 44px;
    font-size: 16px; font-family: inherit;
    background: transparent; color: var(--text);
    border-bottom: 1px solid var(--border);
}
#sbInput::placeholder { color: var(--text-muted); }
.sb-icon {
    position: absolute; left: 16px; top: 17px;
    font-size: 14px; color: var(--text-muted);
    background: rgba(0,0,0,0.06); padding: 2px 6px;
    border-radius: 4px; font-family: system-ui;
}
.sb-hint {
    position: absolute; right: 16px; top: 18px;
    font-size: 11px; color: var(--text-muted); opacity: 0.5;
}
#sbResults {
    max-height: 320px; overflow-y: auto;
    padding: 8px;
}
.sb-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    cursor: pointer; transition: background 0.1s;
}
.sb-item:hover, .sb-item.active { background: rgba(79,70,229,0.06); }
.sb-item-icon { font-size: 1.2em; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.04); border-radius: 8px; flex-shrink: 0; }
.sb-item-text { display: flex; flex-direction: column; }
.sb-item-label { font-size: 14px; font-weight: 500; color: var(--text); }
.sb-item-desc { font-size: 12px; color: var(--text-muted); }
.sb-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
[data-theme="light"] .sb-icon { background: rgba(0,0,0,0.06); }

/* === AI INSIGHTS — Generative BI === */
.an-ai-section { margin: 16px 0; }
.an-ai-summary {
    background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(139,92,246,0.03));
    border: 1px solid rgba(79,70,229,0.12);
    border-radius: 12px; padding: 16px 20px; margin-bottom: 10px;
}
.an-ai-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.an-ai-icon { font-size: 1.1em; }
.an-ai-title { font-size: 0.82em; font-weight: 600; color: var(--text); flex: 1; }
.an-ai-refresh {
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    padding: 3px 8px; border-radius: 6px; cursor: pointer; font-size: 0.85em;
    transition: all 0.15s;
}
.an-ai-refresh:hover { border-color: var(--primary-light); color: var(--text); }
.an-ai-body { font-size: 0.85em; line-height: 1.7; color: var(--text); }
.an-ai-ask {
    display: flex; gap: 8px;
}
.an-ai-input {
    flex: 1; padding: 10px 14px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--bg-input); color: var(--text);
    font-size: 0.85em; font-family: inherit; outline: none;
    transition: border-color 0.15s;
}
.an-ai-input:focus { border-color: rgba(79,70,229,0.4); }
.an-ai-input::placeholder { color: var(--text-muted); }
.an-ai-send {
    padding: 10px 16px; background: #4f46e5; color: #fff; border: none;
    border-radius: 10px; font-size: 0.82em; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: background 0.15s;
}
.an-ai-send:hover { background: #4338ca; }

/* === AUTOCOMPLETE DROPDOWN === */
#acDropdown {
    display: none; max-width: 740px; margin: 0 auto 6px;
    background: var(--bg-card, #fff); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    animation: acIn 0.12s ease;
}
@keyframes acIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.ac-item {
    padding: 10px 14px; font-size: 14px; color: var(--text);
    cursor: pointer; transition: background 0.08s;
    border-bottom: 1px solid rgba(148,163,184,0.06);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: rgba(79,70,229,0.06); }
.ac-item strong { color: var(--primary-light, #4f46e5); font-weight: 600; }
.ac-loading { padding: 10px 14px; display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.ac-spinner {
    width: 14px; height: 14px; border: 2px solid var(--border);
    border-top-color: var(--primary-light, #4f46e5);
    border-radius: 50%; animation: acSpin 0.6s linear infinite;
}
@keyframes acSpin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
    #acDropdown { margin: 0 8px 6px; max-width: 100%; }
    .ac-item { padding: 12px 14px; font-size: 15px; }
}

/* === NL CHART BUILDER === */
.an-ai-chart {
    background: var(--bg-card, #1e293b); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px; margin-top: 10px;
    animation: acIn 0.2s ease;
}
.an-ai-chart-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; font-size: 0.85em; font-weight: 600; color: var(--text);
}
.an-ai-chart-close {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 1em; padding: 2px 6px; border-radius: 4px;
}
.an-ai-chart-close:hover { background: rgba(0,0,0,0.1); color: var(--text); }
#anAiCanvas { max-height: 250px; }
.an-ai-send { white-space: nowrap; }

/* === SMART GREETING CARDS === */
.sg-cards {
    display: flex; flex-direction: column; gap: 6px;
    max-width: 520px; width: 100%; margin: 16px auto 0;
    animation: acIn 0.3s ease;
}
.sg-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; text-align: left;
    background: transparent; border: 1px solid var(--border);
    border-radius: 10px; cursor: pointer; font-family: inherit;
    transition: all 0.15s; color: var(--text-muted); font-size: 13px;
}
.sg-card:hover { border-color: rgba(79,70,229,0.3); color: var(--text); background: rgba(79,70,229,0.03); }
.sg-icon { font-size: 1.1em; flex-shrink: 0; }
.sg-text { flex: 1; line-height: 1.4; }

/* === UI POLISH — Premium Feel === */

/* Smoother font rendering */
body { text-rendering: optimizeLegibility; }

/* Chat area: better max-width and centering */
.chat-area > .msg { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Bot messages: tighter, cleaner */
.msg.bot .msg-body p:first-child { margin-top: 0; }

/* User bubble: softer, modern */
.msg.user .msg-body {
    font-size: 15px; line-height: 1.6;
    border-radius: 18px 18px 4px 18px !important;
    max-width: 70% !important;
}

/* Input wrapper: premium feel */
.input-wrapper {
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03) !important;
    transition: box-shadow 0.2s, border-color 0.2s !important;
}
.input-wrapper:focus-within {
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1), 0 1px 3px rgba(0,0,0,0.04) !important;
    border-color: rgba(79,70,229,0.35) !important;
}
.input-wrapper textarea { font-size: 15px !important; }
.input-wrapper textarea::placeholder { opacity: 0.45; }

/* Send button: subtle until ready */
.send-btn { opacity: 0.4; transition: opacity 0.15s, transform 0.15s; }
.input-wrapper:focus-within .send-btn { opacity: 0.7; }
.send-btn:hover { opacity: 1 !important; transform: scale(1.05); }

/* Sidebar: cleaner spacing */
.sidebar { border-right: 1px solid var(--border) !important; }
.history-item { border-radius: 8px; margin: 1px 6px; padding: 9px 10px !important; font-size: 13px; }
.new-chat-btn { border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important; }

/* Topbar: minimal */
.topbar-title { font-size: 14px !important; font-weight: 500 !important; opacity: 0.7; }

/* Welcome: breathing room */

/* Scrollbar: thinner */
::-webkit-scrollbar { width: 4px !important; }
::-webkit-scrollbar-thumb { border-radius: 4px !important; }

/* Transitions: everything smooth */



/* Code blocks: match theme */
[data-theme="light"] .msg.bot .msg-body code {
    background: #f3f4f6; color: #374151;
}
[data-theme="light"] .msg.bot .msg-body pre {
    background: #f9fafb !important; border-color: #e5e7eb !important;
}

/* Tables: clean borders */

/* Suggest buttons: minimal */
.suggest-btn { font-size: 13px !important; padding: 6px 12px !important; border-radius: 8px !important; }

/* Message time: ultra subtle */

/* Focus visible for accessibility */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid rgba(79,70,229,0.5); outline-offset: 2px;
}

/* === LOGO POLISH === */
.csp-logo {
    cursor: pointer !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    transition: background 0.15s, transform 0.1s !important;
}
.csp-logo:hover {
    background: rgba(79,70,229,0.06) !important;
}
.csp-logo:active {
    transform: scale(0.97) !important;
}
.logo-icon {
    width: 28px !important; height: 28px !important;
    background: linear-gradient(135deg, #818cf8, #6366f1) !important;
    border-radius: 8px !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25) !important;
    transition: box-shadow 0.15s !important;
}
.csp-logo:hover .logo-icon {
    box-shadow: 0 2px 12px rgba(99,102,241,0.4) !important;
}
.logo h1 {
    font-size: 0.95em !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}
.csp-beta-badge { display: none !important; }

/* === DASHBOARD CHART TABS === */
.an-chart-tabs {
    display: flex; gap: 2px;
    padding: 3px; margin: 16px 0 12px;
    background: rgba(148,163,184,0.08);
    border-radius: 10px; width: fit-content;
}
.an-ctab {
    padding: 7px 16px; border: none; background: transparent;
    border-radius: 8px; font-size: 12px; font-weight: 500;
    color: var(--text-muted, #94a3b8); cursor: pointer;
    transition: all 0.15s; font-family: inherit;
}
.an-ctab:hover { color: var(--text, #e2e8f0); }
.an-ctab.active {
    background: var(--bg-card, #1e293b);
    color: var(--text, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
[data-theme="light"] .an-chart-tabs { background: rgba(0,0,0,0.04); }
[data-theme="light"] .an-ctab.active { background: #fff; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Chart grid: cleaner spacing */
.an-chart-grid { gap: 14px !important; }
.an-chart {
    border-radius: 12px !important;
    border: 1px solid rgba(148,163,184,0.08) !important;
}
.an-chart-head { padding: 12px 14px 0 !important; }
.an-chart-title { font-size: 12px !important; font-weight: 500 !important; }

/* KPI grid: tighter */
.an-kpi-grid { gap: 10px !important; }
.an-kpi { border-radius: 10px !important; padding: 14px !important; }
.an-kpi-label { font-size: 11px !important; }
.an-kpi-val { font-size: 1.6em !important; }

/* === INTELLIGENCE TAB === */
.an-intel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.an-intel-grid .span2 { grid-column: span 2; }
.an-intel-grid .an-chart {
    background: var(--bg-card, #1e293b);
    border: 1px solid rgba(148,163,184,0.08);
    border-radius: 12px;
    min-height: 260px;
}
.an-intel-grid .an-chart-body { padding: 8px 12px; height: 220px; }
.an-intel-grid .span2 .an-chart-body { height: 250px; }

/* === CLEAN WELCOME SCREEN === */
.welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(70vh, calc(100vh - 120px)); }
.rz-w { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 640px; padding: 0 20px; }
.welcome h2 { font-size: 1.8em !important; font-weight: 600 !important; letter-spacing: -0.03em !important; margin: 0 !important; }
.welcome-sub { font-size: 15px; color: var(--text-muted); margin: 8px 0 0; font-weight: 400; }
.welcome-input-area { width: 100%; max-width: 600px; }
.welcome-input-area .input-wrapper {
    border-radius: 16px !important;
    padding: 4px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
}
.welcome-input-area textarea { font-size: 16px !important; padding: 14px 12px !important; }

/* Suggestion pills */
.welcome-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin-top: 16px;
}
.wpill {
    padding: 7px 14px; border-radius: 20px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-muted); font-size: 13px; font-family: inherit;
    cursor: pointer; transition: all 0.15s;
}
.wpill:hover {
    border-color: rgba(79,70,229,0.3); color: var(--text);
    background: rgba(79,70,229,0.04);
}

/* Hide old welcome noise */
.orb-container, .welcome-grid, .welcome-hint,
.reveal-delay-1, .wcard-glow, .wcard-arrow { display: none !important; }

/* Smart greeting cards: tighter under greeting */
.sg-cards { margin-top: 8px !important; max-width: 600px !important; }

/* Chat messages: cleaner */
.msg .msg-time { opacity: 0; transition: opacity 0.15s; }
.msg.bot .msg-body .rz-followup { opacity: 0.5; transition: opacity 0.15s; }
.msg.bot:last-child .msg-body .rz-followup { opacity: 1; }

/* === WELCOME MAGIC — subtle animated gradient on greeting === */
.welcome h2 {
    background: linear-gradient(135deg, #6366f1, #818cf8, #a78bfa, #818cf8, #6366f1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: greetShimmer 6s ease infinite;
}
@keyframes greetShimmer {
}
[data-theme="light"] .welcome h2 {
    background: linear-gradient(135deg, #4f46e5, #6366f1, #7c3aed, #6366f1, #4f46e5);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: greetShimmer 6s ease infinite;
}

/* Subtle glow behind input on welcome */
.welcome-input-area .input-wrapper {
    position: relative;
}
.welcome-input-area .input-wrapper::before {
    content: '';
    position: absolute; inset: -2px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(167,139,250,0.1), rgba(99,102,241,0.15));
    background-size: 200% 200%;
    animation: inputGlow 4s ease infinite;
    z-index: -1; opacity: 0;
    transition: opacity 0.3s;
}
.welcome-input-area .input-wrapper:focus-within::before { opacity: 1; }
@keyframes inputGlow {
}

/* Pills: subtle entrance */
.welcome-pills { animation: pillsIn 0.5s ease 0.2s both; }
@keyframes pillsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Smart greeting cards: stagger entrance */
.sg-cards .sg-card:nth-child(1) { animation-delay: 0.1s; }
.sg-cards .sg-card:nth-child(2) { animation-delay: 0.2s; }
.sg-cards .sg-card:nth-child(3) { animation-delay: 0.3s; }
.sg-cards .sg-card { animation: pillsIn 0.4s ease both; }

/* === SIDEBAR REDESIGN === */
.sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 12px 8px !important;
}
.sb-new {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px; background: transparent;
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}

/* Hide old elements */
.csp-sidebar-newchat-wrap, .sidebar-tabs, .csp-tab-projects-hidden,
#tabProjects, .csp-switch-label { display: none !important; }

/* Search: tighter */


/* History items: cleaner */

/* Footer: compact */
.sidebar-footer {
    padding: 8px 10px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
.csp-admin-btn {
    font-size: 12px !important; padding: 5px 10px !important;
    border-radius: 6px !important; opacity: 0.6;
    transition: opacity 0.15s !important;
}
.user-badge { font-size: 12px !important; }

/* === SIDEBAR FIX — clean override for both themes === */
.sidebar {
    width: 260px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-sidebar, #0f172a) !important;
    border-right: 1px solid rgba(148,163,184,0.08) !important;
}
[data-theme="light"] .sidebar {
    background: #f8f9fa !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
}
.sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 14px 10px !important;
    background: transparent !important;
    border-bottom: none !important;
}
.sidebar-topics {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 !important;
}


[data-theme="light"] .sidebar-footer {
    padding: 10px 12px !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.csp-admin-btn {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}
.csp-admin-btn:hover {
    background: rgba(79,70,229,0.08) !important;
    color: var(--text) !important;
}
.sb-new {
    width: 32px !important; height: 32px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.sb-new:hover {
    background: rgba(79,70,229,0.08) !important;
    color: var(--text) !important;
}

/* History items fix — see final override below */

/* User badge fix */
.user-badge {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
.user-dot {
    width: 6px !important; height: 6px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
}
.csp-user-badge-hidden.visible { visibility: visible !important; }

/* No history placeholder */


/* Logo in sidebar */
.csp-logo { padding: 4px 6px !important; border-radius: 8px !important; }
.logo-icon {
    width: 28px !important; height: 28px !important;
    border-radius: 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}

/* === NEW CHAT BUTTON FIX === */
.sb-new {
    width: 34px !important; height: 34px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--text) !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.15s !important;
}
.sb-new:hover {
    background: rgba(79,70,229,0.1) !important;
    border-color: rgba(79,70,229,0.3) !important;
}

/* === ADMIN BUTTON — SaaS style === */
.csp-admin-btn {
    width: 34px !important; height: 34px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: all 0.15s !important;
    font-size: 0 !important;
}
.csp-admin-btn:hover {
    background: rgba(79,70,229,0.08) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* === RENZO BRAND IDENTITY === */
/* Logo icon in sidebar */
.logo-icon {
    width: 28px !important; height: 28px !important;
    background: linear-gradient(135deg, #818cf8, #6366f1) !important;
    border-radius: 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25) !important;
    animation: none !important;
    overflow: hidden !important;
    padding: 0 !important;
}
.logo-icon .lucide { display: none !important; }

/* Chat avatars */
.rz-av {
    width: 26px; height: 26px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; font-family: 'Inter', system-ui, sans-serif;
    background: linear-gradient(145deg, #a78bfa, #6366f1 50%, #4338ca);
    color: #fff;
    flex-shrink: 0;
    letter-spacing: -0.5px;
    box-shadow: 0 1px 4px rgba(99,102,241,0.25);
}
.rz-av-u {
    background: linear-gradient(135deg, #64748b, #475569) !important;
}
[data-theme="light"] .rz-av-u {
    background: linear-gradient(135deg, #94a3b8, #64748b) !important;
}
.msg-avatar .lucide { display: none !important; }

/* === ADMIN BUTTON — brand consistent === */
.csp-admin-btn {
    width: 34px !important; height: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: all 0.2s !important;
    font-size: 0 !important;
}
.csp-admin-btn:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.06)) !important;
    color: #818cf8 !important;
    border-color: rgba(99,102,241,0.25) !important;
    transform: scale(1.04);
}
.csp-admin-btn:active { transform: scale(0.96) !important; }

/* === SETTINGS PANEL === */
.sb-footer-btn {
    width: 34px !important; height: 34px !important;
    border: 1px solid var(--border) !important; border-radius: 10px !important;
    background: transparent !important; color: var(--text-muted) !important;
    cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important;
    transition: all 0.15s !important;
}

/* st-panel v1 removed — see "Settings v2" section below */

.st-nav {
    width: 190px; flex-shrink: 0; padding: 16px 8px; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 2px;
}
.st-tab {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; background: transparent;
    border-radius: 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; text-align: left;
    font-family: inherit; transition: all 0.1s; width: 100%;
}

.st-content h3 { font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--text); }

.st-card { background: rgba(148,163,184,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
[data-theme="light"] .st-card { background: #f9fafb; }
.st-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.st-sub { font-size: 13px; color: var(--text-muted); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Profile */
.st-profile-row { display: flex; align-items: center; gap: 12px; }
.st-avatar { width: 40px !important; height: 40px !important; font-size: 18px !important; border-radius: 12px !important; }
.st-name { font-size: 15px; font-weight: 600; color: var(--text); }
.st-email { font-size: 13px; color: var(--text-muted); }
.st-plan { font-size: 15px; font-weight: 500; color: var(--text); }
.st-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(74,222,128,0.15); color: #4ade80; font-weight: 600; }
.st-badge-fast { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* Toggle group */
.st-toggle-group { display: flex; gap: 2px; background: rgba(148,163,184,0.08); border-radius: 8px; padding: 2px; }
.st-tg { padding: 6px 14px; border: none; background: transparent; border-radius: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: all 0.15s; }
.st-tg.active { background: var(--bg-card, #1e293b); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
[data-theme="light"] .st-tg.active { background: #fff; color: #1a1a1a; }

/* Model cards */
.st-models { display: flex; flex-direction: column; gap: 6px; }
.st-model { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.st-model:hover { border-color: rgba(79,70,229,0.2); }
.st-model.active { border-color: #818cf8; background: rgba(99,102,241,0.06); }
.st-model-name { font-size: 14px; font-weight: 500; color: var(--text); }
.st-model-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Usage */
.st-usage-text { font-size: 12px; color: var(--text-muted); }
.st-spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; padding-top: 4px; }
.st-stat { font-size: 20px; font-weight: 700; color: var(--text); margin: 4px 0; }
.st-stat span { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }

/* History */
.st-group-label { font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.st-history-item { padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text-muted); cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-history-item:hover { background: rgba(79,70,229,0.04); }

/* Resources */
.st-link { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; color: #818cf8; text-decoration: none; border-bottom: 1px solid rgba(148,163,184,0.06); }
.st-link:hover { color: #6366f1; }
.st-link .lucide { width: 14px; height: 14px; }
.st-shortcut span { background: rgba(148,163,184,0.1); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-family: monospace; color: var(--text); }

/* Privacy toggle */


.st-saved { position: absolute; bottom: 14px; right: 20px; font-size: 12px; color: #4ade80; opacity: 0; transition: opacity 0.3s; }

/* === ICON ALIGNMENT FIX — global === */
.lucide, [data-lucide] { vertical-align: middle !important; }

/* Sidebar footer: align all buttons */
.sidebar-footer {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 10px !important;
}
.sidebar-footer .csp-admin-btn,
.sidebar-footer .sb-footer-btn {
    width: 32px !important; height: 32px !important;
    flex-shrink: 0 !important;
}

/* Topbar icons: consistent size */
.topbar-btn, .theme-toggle {
    width: 36px !important; height: 36px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; border-radius: 8px !important;
}
.topbar-btn .lucide, .theme-toggle .lucide { width: 17px !important; height: 17px !important; }

/* Input area icons */
.csp-attach-btn {
    width: 32px !important; height: 32px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; flex-shrink: 0 !important;
}
.csp-attach-btn .lucide { width: 17px !important; height: 17px !important; }
.send-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; flex-shrink: 0 !important; border-radius: 10px !important;
}
.send-btn .lucide { width: 17px !important; height: 17px !important; }

/* Welcome pills: align text */
.wpill { display: inline-flex !important; align-items: center !important; }

/* Sidebar header: logo + new chat aligned */
.sidebar-header {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 10px 8px !important;
    gap: 8px !important;
}
.csp-logo {
    display: flex !important; align-items: center !important; gap: 8px !important;
    min-height: 34px !important;
}

/* Mobile menu button */
.mobile-menu-btn {
    width: 32px !important; height: 32px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important;
}

/* Topbar left: align home + title */
.csp-topbar-left {
    display: flex !important; align-items: center !important; gap: 6px !important;
}

/* === SETTINGS v2 — Complete Restyle === */
.st-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); }
.st-panel {
    position:relative; display:flex; width:720px; max-width:95vw; height:540px; max-height:88vh;
    background:var(--bg-card,#1e293b); border:1px solid var(--border); border-radius:16px;
    box-shadow:0 32px 80px rgba(0,0,0,0.35); overflow:hidden;
    transform:translateY(12px); opacity:0; transition:transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.2s;
}
.st-overlay.open .st-panel { transform:translateY(0); opacity:1; }
[data-theme="light"] .st-panel { background:#fff; box-shadow:0 32px 80px rgba(0,0,0,0.12); }

/* Nav */
.st-nav-footer { margin-top:auto; padding:8px 12px; font-size:11px; color:var(--text-muted); opacity:0.4; }

/* Body */
.st-body { flex:1; position:relative; overflow:hidden; }
.st-x { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; z-index:1; width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.st-x:hover { background:rgba(148,163,184,0.1); }

/* Typography */
.st-section-title { font-size:18px; font-weight:600; color:var(--text); margin:0 0 20px; letter-spacing:-0.02em; }

/* Profile hero */
.st-hero-card { display:flex; align-items:center; gap:16px; padding:20px; background:linear-gradient(135deg,rgba(99,102,241,0.06),rgba(139,92,246,0.04)); border:1px solid var(--border); border-radius:14px; margin-bottom:20px; }
.st-hero-info { flex:1; }
.st-hero-name { font-size:18px; font-weight:600; color:var(--text); }
.st-hero-email { font-size:13px; color:var(--text-muted); margin-top:2px; }
.st-hero-plan { font-size:12px; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:6px; }
.st-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
.st-dot.green { background:#4ade80; }

/* Items */
.st-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(148,163,184,0.06); font-size:13px; color:var(--text-muted); }
.st-val { color:var(--text); font-weight:500; }
.st-chip { font-size:10px; padding:2px 8px; border-radius:4px; background:rgba(148,163,184,0.1); color:var(--text-muted); font-weight:600; }

/* Theme picker */
.st-theme-picker { display:flex; gap:10px; }
.st-theme-opt { cursor:pointer; text-align:center; transition:all 0.15s; }
.st-theme-opt span { display:block; font-size:12px; color:var(--text-muted); margin-top:6px; }
.st-theme-opt.active span { color:var(--text); font-weight:500; }
.st-theme-opt.active .st-theme-preview { border-color:#818cf8; }
.st-theme-preview.light { background:linear-gradient(135deg,#f8f9fa,#e9ecef); }
.st-theme-preview.dark { background:linear-gradient(135deg,#1e293b,#0f172a); }
.st-theme-preview.system { background:linear-gradient(135deg,#f8f9fa 50%,#1e293b 50%); }

/* Theme cards (new — large clickable cards with preview) */
.st-theme-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.st-theme-card { cursor:pointer; border-radius:12px; border:2px solid color-mix(in srgb, var(--text) 8%, transparent); padding:0; overflow:hidden; transition:all 0.2s ease; }
.st-theme-card:hover { border-color:color-mix(in srgb, var(--primary) 40%, transparent); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.st-theme-card.active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), 0 4px 16px color-mix(in srgb, var(--primary) 20%, transparent); }
.st-theme-card-preview { height:80px; padding:12px; position:relative; }
.st-tcp-light { background:linear-gradient(135deg,#f8fafc,#e2e8f0); }
.st-tcp-dark { background:linear-gradient(135deg,#1e293b,#0f172a); }
.st-tcp-system { background:linear-gradient(135deg,#f8fafc 50%,#1e293b 50%); }
.st-tcp-bar { height:6px; width:60%; border-radius:3px; margin-bottom:8px; }
.st-tcp-light .st-tcp-bar { background:#6366f1; }
.st-tcp-dark .st-tcp-bar { background:#818cf8; }
.st-tcp-system .st-tcp-bar { background:linear-gradient(90deg,#6366f1 50%,#818cf8 50%); }
.st-tcp-lines span { display:block; height:4px; border-radius:2px; margin-bottom:5px; }
.st-tcp-light .st-tcp-lines span { background:#cbd5e1; }
.st-tcp-light .st-tcp-lines span:first-child { width:90%; }
.st-tcp-light .st-tcp-lines span:nth-child(2) { width:70%; }
.st-tcp-light .st-tcp-lines span:nth-child(3) { width:50%; }
.st-tcp-dark .st-tcp-lines span { background:rgba(148,163,184,0.2); }
.st-tcp-dark .st-tcp-lines span:first-child { width:90%; }
.st-tcp-dark .st-tcp-lines span:nth-child(2) { width:70%; }
.st-tcp-dark .st-tcp-lines span:nth-child(3) { width:50%; }
.st-tcp-system .st-tcp-lines span { background:linear-gradient(90deg,#cbd5e1 50%,rgba(148,163,184,0.2) 50%); }
.st-tcp-system .st-tcp-lines span:first-child { width:90%; }
.st-tcp-system .st-tcp-lines span:nth-child(2) { width:70%; }
.st-tcp-system .st-tcp-lines span:nth-child(3) { width:50%; }
.st-theme-card-label { padding:10px 12px; font-size:12px; font-weight:500; color:var(--text-muted); display:flex; align-items:center; gap:6px; border-top:1px solid color-mix(in srgb, var(--text) 6%, transparent); }
.st-theme-card-label .lucide { width:14px; height:14px; }
.st-theme-card.active .st-theme-card-label { color:var(--primary-light); font-weight:600; }

/* Segmented control with sliding indicator */
.st-seg-wrap { display:flex; position:relative; background:color-mix(in srgb, var(--text) 5%, transparent); border-radius:10px; padding:3px; }
.st-seg-indicator { position:absolute; top:3px; left:3px; width:calc(33.33% - 2px); height:calc(100% - 6px); background:var(--primary); opacity:0.12; border-radius:8px; transition:transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); pointer-events:none; }
[data-theme="light"] .st-seg-indicator { background:var(--primary); opacity:0.1; }

/* Segmented control */
.st-seg { display:flex; gap:2px; background:rgba(148,163,184,0.08); border-radius:8px; padding:2px; }
.st-sg { padding:8px 18px; border:none; background:transparent; border-radius:8px; font-size:13px; color:var(--text-muted); cursor:pointer; font-family:inherit; transition:all 0.15s; flex:1; text-align:center; position:relative; z-index:1; }
.st-sg.active { color:var(--primary-light); font-weight:600; }
.st-sg:hover:not(.active) { color:var(--text); }
[data-theme="light"] .st-sg.active { color:var(--primary); }

/* Toggle switch glow */
.st-switch input:checked + .st-slider { background:var(--primary); box-shadow:0 0 10px color-mix(in srgb, var(--primary) 40%, transparent); }
.st-slider { transition:background 0.2s, box-shadow 0.2s; }

/* Model cards */
.st-model-grid { display:flex; flex-direction:column; gap:10px; }
.st-model-card { padding:14px 16px; border-radius:10px; border:1px solid color-mix(in srgb, var(--text) 8%, transparent); background:color-mix(in srgb, var(--text) 2%, transparent); cursor:pointer; }
.st-mc-name { font-size:14px; font-weight:600; color:var(--text); }
.st-mc-desc { font-size:12px; color:var(--text-muted); margin-top:4px; line-height:1.5; padding-left:24px; }
.st-mc-meta { font-size:11px; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:6px; }

/* Persona grid */
.st-persona-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.st-persona-card { padding:16px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--text) 8%, transparent); background:color-mix(in srgb, var(--text) 2%, transparent); cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.st-pc-name { font-size:12px; font-weight:600; color:var(--text); display:block; }
.st-pc-desc { font-size:10px; color:var(--text-muted); display:block; margin-top:2px; line-height:1.3; }

/* History */
.st-search-wrap { margin-bottom:14px; }
.st-search { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg-input,rgba(255,255,255,0.05)); color:var(--text); font-size:13px; font-family:inherit; outline:none; }
.st-search:focus { border-color:rgba(79,70,229,0.3); }
[data-theme="light"] .st-search { background:#f9fafb; }
.st-hist-item { padding:8px 10px; border-radius:6px; font-size:13px; color:var(--text-muted); cursor:default; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background 0.1s; }
.st-hist-item:hover { background:rgba(79,70,229,0.04); color:var(--text); }

/* Usage */
.st-usage-hero { text-align:center; padding:24px; background:linear-gradient(135deg,rgba(99,102,241,0.06),rgba(139,92,246,0.04)); border:1px solid var(--border); border-radius:14px; margin-bottom:20px; }
.st-uh-number { font-size:36px; font-weight:700; color:var(--text); letter-spacing:-0.03em; }
.st-uh-label { font-size:13px; color:var(--text-muted); margin-bottom:12px; }
.st-usage-bar { height:6px; background:rgba(148,163,184,0.12); border-radius:3px; overflow:hidden; max-width:280px; margin:0 auto 8px; }
.st-usage-fill { height:100%; background:linear-gradient(90deg,#818cf8,#6366f1); border-radius:3px; transition:width 0.6s; }
.st-uh-sub { font-size:11px; color:var(--text-muted); }
.st-chart-mini { display:flex; align-items:flex-end; gap:4px; height:52px; }
.st-bar { width:100%; background:#818cf8; border-radius:2px; min-width:4px; transition:height 0.3s; }
.st-stats-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; }
.st-stat-box { text-align:center; padding:12px 8px; background:rgba(148,163,184,0.04); border:1px solid var(--border); border-radius:10px; }
.st-sb-val { font-size:18px; font-weight:700; color:var(--text); }
.st-sb-label { font-size:10px; color:var(--text-muted); margin-top:2px; }

/* Resources */
.st-resource:hover { background:rgba(79,70,229,0.04); }
.st-res-icon { font-size:20px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:rgba(148,163,184,0.06); border-radius:8px; flex-shrink:0; }
.st-resource strong { font-size:13px; }
.st-res-sub { font-size:11px; color:var(--text-muted); }
.st-shortcut { display:flex; align-items:center; gap:12px; padding:6px 0; font-size:13px; color:var(--text-muted); }
.st-shortcut kbd { background:rgba(148,163,184,0.1); padding:3px 8px; border-radius:4px; font-size:11px; font-family:monospace; color:var(--text); min-width:40px; text-align:center; }

/* Privacy */
.st-item-toggle { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid rgba(148,163,184,0.06); }
.st-item-toggle strong { font-size:13px; color:var(--text); }
.st-item-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }
.st-danger-item { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid rgba(148,163,184,0.06); }
.st-danger-item strong { font-size:13px; color:var(--text); }

/* Shared */
.st-switch { position:relative; width:40px; height:22px; flex-shrink:0; }
.st-switch input { opacity:0; width:0; height:0; }
.st-slider { position:absolute; inset:0; background:rgba(148,163,184,0.2); border-radius:11px; cursor:pointer; transition:0.2s; }
.st-slider::before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:0.2s; }
.st-switch input:checked + .st-slider { background:#818cf8; }
.st-switch input:checked + .st-slider::before { transform:translateX(18px); }
.st-btn-sm { padding:5px 12px; font-size:12px; }
.st-btn-danger:hover { background:rgba(239,68,68,0.06); }
.st-empty { text-align:center; padding:32px; color:var(--text-muted); opacity:0.4; font-size:13px; }
.st-toast { position:absolute; bottom:16px; left:50%; transform:translateX(-50%) translateY(8px); font-size:12px; color:#4ade80; background:rgba(0,0,0,0.7); padding:6px 14px; border-radius:8px; opacity:0; transition:all 0.2s; pointer-events:none; }
.st-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* === NUCLEAR ICON ALIGNMENT FIX === */
/* Every single icon in the app */
svg.lucide, i.lucide, [data-lucide] {
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Every button that contains an icon */
/* global button rule removed — was breaking click targets */

/* Sidebar footer row */
.sidebar-footer { display: flex !important; align-items: center !important; gap: 6px !important; }
.sidebar-footer > * { flex-shrink: 0 !important; }

/* Sidebar header row */
.sidebar-header { display: flex !important; align-items: center !important; justify-content: space-between !important; }

/* Topbar row */
.topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.csp-topbar-left { display: flex !important; align-items: center !important; gap: 6px !important; }
.topbar-actions { display: flex !important; align-items: center !important; gap: 2px !important; }


/* Message avatar row */
.msg-avatar { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 26px !important; height: 26px !important; margin-top: 2px !important; }

/* === WELCOME AVATAR === */
.welcome-avatar {
    margin-bottom: 16px;
    animation: avatarIn 0.6s cubic-bezier(.4,0,.2,1) both;
}
@keyframes avatarIn {
}

/* === RENZO UI FIXES 2026-03-22 === */
.input-hint { display: none !important; }
.sidebar-footer .sb-footer-btn { margin-left: auto !important; }
.welcome-avatar { display: flex !important; justify-content: center !important; }


/* === RESPONSE LAYOUT FIX 2026-03-22 === */

/* Clean paragraph spacing - no double <br> gaps */
/* br+br rule removed - was killing paragraph spacing */
.msg.bot .msg-body > br:first-child { display: none; }

/* H3 sections: clean spacing, no border, subtle weight */
.msg.bot .msg-body h3 {
    margin: 24px 0 8px !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0.92em !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    background: none !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
}

/* Strong labels (Key: value pattern) - proper paragraph spacing */

/* Ordered lists: clean numbered style */
.msg.bot .msg-body ol {
    margin: 10px 0 !important;
    padding-left: 0 !important;
    counter-reset: step !important;
    list-style: none !important;
}
.msg.bot .msg-body ol > li {
    counter-increment: step !important;
    padding: 6px 0 6px 32px !important;
    position: relative !important;
    line-height: 1.65 !important;
}
.msg.bot .msg-body ol > li::before {
    content: counter(step) !important;
    position: absolute !important;
    left: 0 !important;
    top: 7px !important;
    width: 22px !important;
    height: 22px !important;
    background: rgba(99,102,241,0.1) !important;
    color: var(--primary-light) !important;
    font-size: 0.78em !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
}

/* Unordered lists */
.msg.bot .msg-body ul {
    margin: 8px 0 !important;
    padding-left: 18px !important;
}
.msg.bot .msg-body ul > li {
    padding: 3px 0 !important;
    line-height: 1.65 !important;
}
.msg.bot .msg-body ul > li::marker {
    color: var(--primary-light) !important;
}

/* Tables: clean, compact */
.msg.bot .msg-body table {
    width: 100% !important;
    margin: 12px 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-size: 0.88em !important;
}
.msg.bot .msg-body th {
    background: rgba(99,102,241,0.06) !important;
    font-weight: 600 !important;
    font-size: 0.85em !important;
    padding: 8px 12px !important;
    text-align: left !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border) !important;
}
.msg.bot .msg-body td {
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(148,163,184,0.06) !important;
}

/* Code blocks */
.msg.bot .msg-body code {
    background: rgba(99,102,241,0.08) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.88em !important;
}

/* Disable the first-strong callout box */
.msg.bot .msg-body > strong:first-child {
    display: inline !important;
    font-size: inherit !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    line-height: inherit !important;
}

/* TOC: cleaner */
.rz-toc {
    margin: 0 0 16px !important;
    padding: 8px 12px !important;
    background: rgba(99,102,241,0.03) !important;
    border: 1px solid rgba(99,102,241,0.08) !important;
    border-radius: 8px !important;
    font-size: 0.78em !important;
}

/* Meta bar: always subtle */
.rz-meta {
    margin-top: 16px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(148,163,184,0.08) !important;
    font-size: 0.72em !important;
    opacity: 0.5 !important;
}

/* Screenshot cards: tighter */

/* File attachment chips in user messages */
.msg.user .msg-body span[style*="inline-flex"] {
    font-size: 0.82em;
}

/* === RENZO BRAND MARK — Interactive Sticker === */
.rz-brand-mark {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rz-mark-face {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: linear-gradient(145deg, #a78bfa 0%, #6366f1 45%, #4338ca 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow:
        0 4px 16px rgba(99,102,241,0.35),
        0 12px 40px rgba(99,102,241,0.12),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 4px rgba(0,0,0,0.1);
    animation: markFloat 4s ease-in-out infinite;
    transition: transform 0.2s cubic-bezier(0.2,0,0,1);
    perspective: 600px;
    overflow: hidden;
}

/* The "R" letter — visible by default, hides on hover to show face */
.rz-mark-letter {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: opacity 0.25s, transform 0.25s;
    position: absolute;
    z-index: 3;
}

/* Eyes — hidden by default, appear on hover */
.rz-mark-eyes {
    display: flex;
    gap: 10px;
    position: absolute;
    top: 22px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.25s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    z-index: 3;
}

.rz-eye {
    width: 12px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}

.rz-pupil {
    width: 6px;
    height: 6px;
    background: #1e1b4b;
    border-radius: 50%;
    transition: transform 0.1s ease-out;
    position: relative;
}
.rz-pupil::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    top: 1px;
    right: 1px;
}

/* Mouth */
.rz-mark-mouth {
    position: absolute;
    bottom: 20px;
    width: 14px;
    height: 7px;
    border-bottom: 2.5px solid rgba(255,255,255,0.9);
    border-radius: 0 0 8px 8px;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    transform: scaleY(0.5);
    z-index: 3;
}

/* Hover: show face, hide R */
.rz-brand-mark:hover .rz-mark-letter {
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
}
.rz-brand-mark:hover .rz-mark-eyes {
    opacity: 1;
    transform: scale(1);
}
.rz-brand-mark:hover .rz-mark-mouth {
    opacity: 1;
    transform: scaleY(1);
}
.rz-brand-mark:hover .rz-mark-face {
    box-shadow:
        0 6px 24px rgba(99,102,241,0.4),
        0 16px 48px rgba(99,102,241,0.15),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 4px rgba(0,0,0,0.1);
}

/* Bounce on click */
.rz-bounce {
    animation: markBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes markBounce {
    30% { transform: scale(0.85) rotate(-5deg); }
    60% { transform: scale(1.15) rotate(3deg); }
}

/* Particles on click */
.rz-mark-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}
.rz-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    animation: particleBurst 0.6s cubic-bezier(0.2,0,0,1) forwards;
}
@keyframes particleBurst {
}

@keyframes markFloat {
}

/* Light theme */
[data-theme="light"] .rz-mark-face {
    background: linear-gradient(145deg, #818cf8 0%, #6366f1 45%, #4338ca 100%);
    box-shadow:
        0 4px 16px rgba(79,70,229,0.3),
        0 12px 40px rgba(79,70,229,0.1),
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -2px 4px rgba(0,0,0,0.08);
}

/* === WELCOME SCREEN REDESIGN === */

/* Ambient glow behind brand mark */
.rz-ambient {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -65%);
    background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, rgba(99,102,241,0.02) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: ambientPulse 6s ease-in-out infinite;
}
@keyframes ambientPulse {
}
[data-theme="light"] .rz-ambient {
    background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, rgba(99,102,241,0.01) 40%, transparent 70%);
}

/* Brand mark glow layer */
.rz-mark-glow {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(129,140,248,0.3) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(12px);
    z-index: 0;
    animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
}
[data-theme="light"] .rz-mark-glow {
    background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%);
}

/* Tagline */
.rz-tagline {
    font-size: 15px !important;
    color: var(--text-muted) !important;
    margin: 8px 0 0 !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    max-width: 420px;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: fadeUp 0.6s ease 0.2s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Starter prompt buttons */
.rz-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    max-width: 520px;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.4s forwards;
}

.rz-starter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.rz-starter .lucide {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.6;
}

.rz-starter:hover {
    border-color: rgba(99,102,241,0.3);
    color: var(--text);
    background: rgba(99,102,241,0.04);
    transform: translateY(-1px);
}

.rz-starter:active {
    transform: scale(0.97);
}

/* Welcome greeting refinement */
.welcome h2 {
    font-size: 1.6em !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 4px !important;
    background: linear-gradient(135deg, var(--text) 0%, var(--text-muted) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: none !important;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.1s forwards !important;
}

/* Welcome input area spacing */
.welcome .welcome-input-area {
    margin-top: 28px !important;
}

/* Hide old elements */
.welcome-grid, .welcome-hint { display: none !important; }

@media (max-width: 600px) {
    .rz-starter { font-size: 12px; padding: 7px 12px; }
    .rz-ambient { width: 200px; height: 200px; }
}

/* === WELCOME POLISH — Premium Details === */

/* Brand mark 3D perspective on hover */
.rz-mark-svg {
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
    perspective: 600px;
}

/* Tagline crossfade */
.rz-tagline {
    transition: opacity 0.3s ease !important;
}

/* Input placeholder fade */
.welcome-input-area textarea::placeholder {
    transition: opacity 0.3s;
}
.welcome-input-area textarea:focus::placeholder {
    opacity: 0.3;
}

/* Starters: stagger entrance */
.rz-starter:nth-child(1) { animation: fadeUp 0.4s ease 0.3s both; }
.rz-starter:nth-child(2) { animation: fadeUp 0.4s ease 0.4s both; }
.rz-starter:nth-child(3) { animation: fadeUp 0.4s ease 0.5s both; }
.rz-starter:nth-child(4) { animation: fadeUp 0.4s ease 0.6s both; }
.rz-starters { animation: none !important; }

/* Welcome input: glow on focus */
.welcome-input-area .input-wrapper {
    transition: box-shadow 0.3s, border-color 0.3s !important;
}
.welcome-input-area .input-wrapper:focus-within {
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1), 0 4px 20px rgba(99,102,241,0.08) !important;
    border-color: rgba(99,102,241,0.3) !important;
}

/* Welcome background — canvas handles animation */
.welcome {
    background: transparent !important;
    overflow: hidden !important;
    position: relative !important;
}
.welcome::after { display: none !important; }
.welcome > * { position: relative; z-index: 1; }

/* Keyboard hint below input */
.rz-kb-hint {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.35;
    margin-top: 10px;
    letter-spacing: 0.02em;
}
.rz-kb-hint kbd {
    background: rgba(148,163,184,0.1);
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: 'SF Mono', monospace;
    font-size: 10px;
}

/* === LOADING EXPERIENCE === */


.rz-loading-status #typingText {
    transition: opacity 0.15s;
}


@keyframes loadPulse {
}


/* Skeleton lines — shimmer effect */
.rz-skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


@keyframes skelShimmer {
}

[data-theme="light"]
/* === CANVAS BACKGROUND === */
.rz-canvas {
    position: absolute !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0 !important;
    display: block !important;
}

/* === SIDEBAR CLEAN OVERRIDE === */
.sidebar {
    width: 260px !important;
    background: var(--bg-card) !important;
    border-right: 1px solid var(--border) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
}
[data-theme="light"] .sidebar { background: #fafbfc !important; }

.sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 14px 10px !important;
    background: transparent !important;
    border-bottom: none !important;
}
.csp-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
}
.csp-logo:hover { background: rgba(99,102,241,0.05) !important; }
.logo-icon {
    width: 28px !important; height: 28px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
.logo-icon img { width: 28px !important; height: 28px !important; display: block !important; }
.logo h1 { font-size: 15px !important; font-weight: 600 !important; margin: 0 !important; letter-spacing: -0.02em !important; }

.sb-new {
    width: 34px !important; height: 34px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.sb-new:hover { background: rgba(99,102,241,0.06) !important; color: var(--text) !important; }
.sb-new .lucide { width: 16px !important; height: 16px !important; }

.sidebar-topics {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 !important;
}


.csp-chat-search:focus { border-color: rgba(99,102,241,0.3) !important; }

#chatHistoryList { padding: 0 6px !important; overflow-y: auto !important; overflow-x: hidden !important; }

.history-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    margin: 1px 4px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    overflow: visible !important;
    white-space: nowrap !important;
    transition: background 0.1s !important;
    position: relative !important;
}
.history-item:hover { background: rgba(99,102,241,0.05) !important; color: var(--text) !important; }
.history-item.active { background: rgba(99,102,241,0.08) !important; color: var(--text) !important; font-weight: 500 !important; }
.history-item .h-text { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; flex: 1 !important; min-width: 0 !important; font-size: 13px !important; }
.history-item .h-text-wrap { display: flex !important; flex-direction: column !important; flex: 1 !important; min-width: 0 !important; overflow: hidden !important; gap: 2px !important; }
.history-item .h-text-wrap .h-text { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 13px !important; font-weight: 500 !important; color: var(--text) !important; }
.history-item .h-preview { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 11px !important; color: var(--text-muted) !important; font-weight: 400 !important; opacity: 0.7 !important; }
.history-item .h-icon { flex-shrink: 0; }
.history-item .h-icon .lucide { width: 14px !important; height: 14px !important; opacity: 0.5; }
/* h-actions is now position:absolute — this old rule is overridden */


.sidebar-footer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-top: 1px solid var(--border) !important;
}
.csp-admin-btn {
    width: 32px !important; height: 32px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
}
.csp-admin-btn:hover { background: rgba(99,102,241,0.06) !important; color: var(--text) !important; }

.user-badge {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
.user-dot { width: 6px !important; height: 6px !important; background: #4ade80 !important; border-radius: 50% !important; }

.sb-footer-btn {
    width: 32px !important; height: 32px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
.sb-footer-btn .lucide { width: 16px !important; height: 16px !important; }
.sb-footer-btn:hover { background: rgba(99,102,241,0.06) !important; color: var(--text) !important; }

/* Hide legacy elements */
.csp-sidebar-newchat-wrap, .sidebar-tabs, .csp-tab-projects-hidden,
#tabProjects, .csp-switch-label, .csp-beta-badge { display: none !important; }

/* Mobile sidebar */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important; left: 0; top: 0; bottom: 0;
        z-index: 100; box-shadow: 8px 0 30px rgba(0,0,0,0.3);
    }
    .sidebar.collapsed { transform: translateX(-100%); }
}

/* === SETTINGS v3 — Opus Quality === */
.st-title { font-size: 20px; font-weight: 600; color: var(--text); margin: 0 0 24px; letter-spacing: -0.03em; }
.st-nav-head { font-size: 13px !important; font-weight: 600 !important; padding: 8px 12px 16px !important; color: var(--text-muted) !important; letter-spacing: -0.01em; }
.st-tab .lucide { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; opacity: 0.6; }

/* Theme picker with icons */
.st-theme-preview { display: flex !important; align-items: center !important; justify-content: center !important; }
.st-theme-preview .lucide { width: 20px !important; height: 20px !important; color: var(--text-muted); }
.st-theme-opt.active .st-theme-preview .lucide { color: var(--primary-light); }

/* Model cards with icons */
.st-mc-head { display: flex !important; align-items: center !important; gap: 8px !important; }
.st-mc-head > .lucide { width: 16px !important; height: 16px !important; color: var(--primary-light); flex-shrink: 0; }

/* Persona cards with lucide icons */
.st-persona-card.active .st-pc-icon { color: var(--primary-light); }

/* Resource links with arrow */
.st-resource { display: flex !important; align-items: center !important; gap: 12px !important; }
.st-res-arrow { width: 14px !important; height: 14px !important; margin-left: auto !important; opacity: 0.3; flex-shrink: 0; }
.st-resource:hover .st-res-arrow { opacity: 0.7; }

/* Danger buttons with icons */
.st-btn-danger { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.st-btn-danger .lucide { width: 13px !important; height: 13px !important; }

/* Sign out button */
.st-btn-outline .lucide { width: 14px !important; height: 14px !important; }

/* Loading state */
.st-loading { text-align: center; padding: 48px; color: var(--text-muted); font-size: 13px; }
.st-loading::after { content: ''; display: block; width: 24px; height: 24px; margin: 12px auto 0; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; }


/* === SETTINGS NAV — ALIGNMENT FIX === */
.st-nav {
    width: 190px;
    flex-shrink: 0 !important;
    padding: 16px 8px !important;
    border-right: 1px solid rgba(255,255,255,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

.st-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 0 12px !important;
    min-height: 40px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    text-align: left !important;
    font-family: inherit !important;
    transition: background 0.1s, color 0.1s !important;
    position: relative !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.st-tab .lucide {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    opacity: 0.5 !important;
}

.st-tab:hover {
    background: rgba(255,255,255,0.03) !important;
    color: var(--text) !important;
}

.st-tab.active {
    background: rgba(124,58,237,0.08) !important;
    color: var(--text) !important;
    font-weight: 500 !important;
}

.st-tab.active .lucide {
    opacity: 1 !important;
    color: #a78bfa !important;
}

.st-tab.active::before {
    content: '' !important;
    position: absolute !important;
    left: -8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    background: linear-gradient(180deg, #7c3aed, #6366f1) !important;
    border-radius: 2px !important;
    display: block !important;
}

.st-nav-head {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(228,228,231,0.3) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 4px 12px 14px !important;
    display: block !important;
}

.st-nav-footer {
    margin-top: auto !important;
    padding: 12px !important;
    font-size: 11px !important;
    color: rgba(142,142,160,0.25) !important;
    display: block !important;
}


/* === SIDEBAR FOOTER v2 === */

.sf-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(142,142,160,0.5) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s !important;
    position: relative;
    flex-shrink: 0 !important;
}
.sf-btn .lucide {
    width: 16px !important;
    height: 16px !important;
}
.sf-btn:hover {
    background: rgba(124,58,237,0.06) !important;
    color: #a78bfa !important;
}

/* Tooltip */
.sf-btn::after, .sf-avatar::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(0,0,0,0.85);
    color: #e4e4e7;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 100;
}
.sf-btn:hover::after, .sf-avatar:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* User avatar */
.sf-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(228,228,231,0.7) !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    position: relative;
    flex-shrink: 0;
    margin-right: 2px;
}
.sf-avatar:hover {
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(124,58,237,0.25);
}

/* Chat history: hide actions by default */
.history-item .h-actions {
    opacity: 0 !important;
    transition: opacity 0.12s, width 0.12s !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    gap: 2px !important;
    background: var(--bg-card, rgba(22,32,56,0.95)) !important;
    border-radius: 6px !important;
    padding: 2px 4px !important;
}
.history-item:hover .h-actions {
    opacity: 1 !important;
}

/* Date group labels */
.ch-group-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(142,142,160,0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 14px 12px 4px !important;
}

/* === SIDEBAR FOOTER — FINAL === */
.sidebar-footer.csp-sidebar-footer {
    display: flex !important;
    align-items: center !important;
    padding: 10px 10px !important;
    border-top: 1px solid rgba(255,255,255,0.04) !important;
    gap: 10px !important;
}

/* Avatar: left anchor */
.sf-avatar {
    width: 30px !important; height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(228,228,231,0.7) !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    position: relative !important;
    flex-shrink: 0 !important;
}
.sf-avatar:hover {
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
    color: #fff !important;
}
.sf-dot {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    border: 2px solid var(--bg-card, #111);
}

/* Username */
.sf-name {
    font-size: 12px;
    color: rgba(228,228,231,0.45);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Action buttons: right cluster */
.sf-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.sf-btn {
    width: 30px !important; height: 30px !important;
    min-width: 30px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(142,142,160,0.4) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
.sf-btn .lucide { width: 15px !important; height: 15px !important; }
.sf-btn:hover { background: rgba(255,255,255,0.04) !important; color: rgba(228,228,231,0.7) !important; }
.sf-btn:active { transform: scale(0.9); }

/* Tooltips */
.sf-btn[title]::after, .sf-avatar[title]::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    background: rgba(0,0,0,0.9);
    color: #e4e4e7;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s, transform 0.12s;
    z-index: 100;
}
.sf-btn:hover::after, .sf-avatar:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* === RENZO LOGO — FINAL === */
.rz-brand-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.rz-logo {
    filter: drop-shadow(0 4px 20px rgba(109,40,217,0.3));
    animation: logoEnter 0.7s cubic-bezier(0.16,1,0.3,1) both,
               logoGlow 4s ease-in-out 0.8s infinite;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.2s;
}
.rz-logo:hover { transform: scale(1.05); }
.rz-logo:active { transform: scale(0.96); }

@keyframes logoEnter {
}
@keyframes logoGlow {
}

.rz-wordmark {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(228,228,231,0.25);
    animation: logoEnter 0.5s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}

/* conversation layout redesign removed */
/* === BUTTON CLICKABILITY FIX === */
/* Icon buttons: centered content */
.sf-btn, .sb-new, .topbar-btn, .theme-toggle, .send-btn, 
.csp-attach-btn, .msg-act-btn, .bp-close, .st-x, .x,
.btn-icon, .btn-send, .rz-starter, .chip, .suggest-btn,
.rate-star, .tw-stop, .rz-to-yes, .rz-to-no, .rz-fu-yes, .rz-fu-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

/* Ensure all interactive elements have minimum hit area */
.sf-btn, .sb-new, .topbar-btn, .theme-toggle, 
.csp-attach-btn, .msg-act-btn, .bp-close {
    min-width: 32px;
    min-height: 32px;
}

.send-btn {
    min-width: 36px;
    min-height: 36px;
}

.rz-starter, .chip, .suggest-btn {
    min-height: 40px;
}

/* Welcome content above canvas */
.welcome > * {
    position: relative;
    z-index: 1;
}

/* Sidebar tabs: left-aligned, not centered */
.st-tab {
    display: flex !important;
    justify-content: flex-start !important;
}


/* === INPUT BAR FIX === */
/* Hide streaming toggle — belongs in settings */
.streaming-toggle { display: none !important; }

/* Input textarea: no inner border */
.input-wrapper textarea {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Send button: gray when input empty */
.send-btn {
    transition: opacity 0.15s, transform 0.15s, background 0.15s !important;
}
.send-btn:hover {
    filter: brightness(0.9);
}

/* File attachment banner: subtle */
#imagePreview {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
    padding: 4px 16px !important;
}

/* Ensure only ONE input bar visible at a time — use soft hide, never display:none, so layout stays intact */
.input-area.hidden-for-welcome {
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}


/* ============================================================
   DEFINITIVE CHAT UI — Overrides everything above
   ============================================================ */

/* Chat area: centered, max-width like ChatGPT */
.chat-area { max-width: 760px !important; margin: 0 auto !important; padding: 24px 20px !important; }

/* Messages: spacing */
.msg { margin-bottom: 28px !important; display: flex !important; gap: 12px !important; align-items: flex-start !important; flex-direction: row !important; }

/* --- USER --- */
.msg.user { flex-direction: row-reverse !important; }
.msg.user .msg-avatar { display: none !important; }
.msg.user .msg-body {
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(99,102,241,0.08)) !important;
    border: none !important; box-shadow: none !important;
    padding: 10px 16px !important;
    border-radius: 18px 18px 4px 18px !important;
    max-width: 70% !important;
    font-size: 15px !important; line-height: 1.6 !important;
    color: var(--text) !important;
}

/* --- BOT --- */
.msg.bot .msg-avatar {
    display: flex !important;
    width: 28px !important; height: 28px !important;
    min-width: 28px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}
.msg.bot .msg-body {
    background: transparent !important;
    border: none !important; box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--text) !important;
    letter-spacing: -0.01em !important;
}

/* Paragraphs */
.msg.bot .msg-body p:last-child { margin-bottom: 0 !important; }

/* Bold inline — never breaks to new line */

/* Headings: bold text, not huge */
.msg.bot .msg-body h3:first-child { margin-top: 0 !important; }

/* Lists */
.msg.bot .msg-body ul, .msg.bot .msg-body ol { margin: 8px 0 !important; padding-left: 18px !important; }

/* Code inline */
.msg.bot .msg-body code { background: rgba(255,255,255,0.06) !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 0.88em !important; font-family: 'SF Mono','Fira Code',monospace !important; }

/* Code blocks */
.msg.bot .msg-body pre > code { display: block !important; padding: 14px 16px !important; background: none !important; color: #e2e8f0 !important; font-size: 13px !important; line-height: 1.6 !important; overflow-x: auto !important; }
.msg.bot .msg-body pre .code-header { display: flex !important; justify-content: space-between !important; padding: 6px 14px !important; background: rgba(255,255,255,0.03) !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; font-size: 11px !important; color: #8b9dc3 !important; }

/* Tables */

/* Blockquotes */

/* Links */

/* Images / screenshots */
.ss-card { max-width: 440px !important; margin: 12px 0 !important; }

/* Meta bar */
.rz-meta { opacity: 0 !important; font-size: 11px !important; margin-top: 10px !important; padding-top: 8px !important; border-top: 1px solid rgba(255,255,255,0.03) !important; transition: opacity 0.15s !important; }
.rz-meta span { display: inline-flex; align-items: center; gap: 3px; }

/* Action bar: fade in on hover */
.msg-actions { opacity: 0 !important; transition: opacity 0.15s !important; }

/* Typing indicator */
#typingIndicator .msg-body { background: transparent !important; }

/* Timestamp: hidden until hover */
.msg-time { opacity: 0 !important; transition: opacity 0.15s !important; font-size: 11px !important; }
.msg:hover .msg-time { opacity: 0.4 !important; }


/* === LIVE REWRITE — Side Panel (Co-work style) === */
#liveRewritePanel {
    position: fixed; top: 0; right: 0; width: 420px; height: 100vh;
    background: var(--bg); border-left: 1px solid var(--border);
    z-index: 900; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
}


/* When panel is open, shrink main content */
#liveRewritePanel.lr-open ~ main,

.lr-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.lr-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.lr-title svg { opacity: 0.5; }
.lr-close {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: all 0.12s;
}
.lr-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }

/* Mode chips */
.lr-modes { display: flex; gap: 6px; padding: 12px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.lr-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 500;
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    cursor: pointer; transition: all 0.12s; font-family: inherit;
}
.lr-chip svg { width: 13px; height: 13px; opacity: 0.5; }
.lr-chip:hover { border-color: rgba(124,58,237,0.2); color: var(--text); background: rgba(124,58,237,0.03); }
.lr-chip.on {
    background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.25);
    color: #a78bfa; font-weight: 600;
}
.lr-chip.on svg { opacity: 0.9; color: #a78bfa; }

/* Body */
.lr-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 16px 18px; gap: 14px; }
.lr-section { display: flex; flex-direction: column; gap: 6px; }
.lr-output-section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lr-label { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.lr-label-row { display: flex; align-items: center; justify-content: space-between; }

/* Input */
.lr-input {
    width: 100%; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
    background: rgba(255,255,255,0.02); color: var(--text); font-family: inherit;
    font-size: 14px; line-height: 1.6; padding: 14px; resize: none; outline: none;
    transition: border-color 0.12s;
}
.lr-input:focus { border-color: rgba(124,58,237,0.2); }
.lr-input::placeholder { color: var(--text-muted); opacity: 0.4; }

/* Preview */
.lr-preview {
    flex: 1; overflow-y: auto; font-size: 14px; line-height: 1.7; color: var(--text);
    padding: 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.015); min-height: 80px;
}
.lr-preview.lr-loading { opacity: 0.4; }
.lr-empty { color: var(--text-muted); opacity: 0.35; font-size: 13px; }
.lr-preview mark { background: rgba(34,197,94,0.12); color: #4ade80; padding: 1px 3px; border-radius: 3px; }

/* Action buttons */
.lr-out-actions { display: flex; gap: 4px; }
.lr-icon-btn {
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; cursor: pointer; transition: all 0.12s;
}
.lr-icon-btn svg { width: 14px; height: 14px; }
.lr-icon-btn:hover { border-color: rgba(124,58,237,0.2); color: var(--text); background: rgba(124,58,237,0.04); }
.lr-icon-btn.lr-copied { border-color: rgba(34,197,94,0.3); color: #4ade80; }
.lr-apply-btn:hover { border-color: rgba(124,58,237,0.3); color: #a78bfa; }

/* Spinner */
.lr-spinner svg { animation: lr-spin 0.8s linear infinite; }
.lr-status { font-size: 11px; color: var(--text-muted); }
@keyframes lr-spin { to { transform: rotate(360deg); } }

/* Mobile */
@media (max-width: 768px) {
    #liveRewritePanel { width: 100%; }
    body:has(#liveRewritePanel.lr-open) main { margin-right: 0; }
}

/* === WELCOME — Animated Orb + Ambient Background === */

/* Ambient gradient mesh behind welcome */
.welcome::before {
    content: '' !important; display: block !important;
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 50% 40% at 30% 35%, rgba(124,58,237,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 70% 55%, rgba(232,99,74,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 60% 30% at 50% 70%, rgba(99,102,241,0.04) 0%, transparent 70%);
    animation: ambientShift 12s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes ambientShift {
}

/* Welcome layout */
.welcome {
    justify-content: flex-start !important;
    padding-top: 20vh !important;
}
.welcome-hero { position: relative; z-index: 1; }

/* Orb container */
.rz-orb-wrap {
    position: relative; width: 147px; height: 147px; margin: 0 auto 28px;
}

/* Glow */
.rz-orb-glow {
    position: absolute; inset: -52px; border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,0.3) 0%, rgba(232,99,74,0.13) 50%, transparent 72%);
    animation: orbPulse 4s ease-in-out infinite;
    filter: blur(22px);
}

/* Orb */
.rz-orb {
    position: relative; width: 147px; height: 147px; border-radius: 50%;
    background: conic-gradient(from 0deg, #7c3aed, #6366f1, #818cf8, #E8634A, #f97316, #E8634A, #818cf8, #6366f1, #7c3aed);
    animation: orbRotate 6s linear infinite;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 80px rgba(124,58,237,0.4), 0 0 130px rgba(232,99,74,0.18);
}
.rz-orb::before {
    content: ''; position: absolute; inset: 6px; border-radius: 50%;
    background: var(--bg, #0f0f17);
}

.rz-orb-letter {
    position: relative; z-index: 1;
    font-size: 44px; font-weight: 700; color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 16px rgba(124,58,237,0.5);
}

@keyframes orbRotate { to { filter: hue-rotate(360deg); } }
@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.92; }
}
@keyframes orbIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Greeting */
.welcome h2 {
    font-size: 26px !important; font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    -webkit-text-fill-color: var(--text) !important; background: none !important;
    animation: orbIn 0.6s cubic-bezier(0.16,1,0.3,1) both !important;
    margin-bottom: 6px !important;
}

.rz-tagline {
    font-size: 15px !important; color: var(--text-muted) !important;
    margin-bottom: 32px !important;
    animation: orbIn 0.5s cubic-bezier(0.16,1,0.3,1) both !important;
}

/* Light theme adjustments */
[data-theme="light"] .rz-orb::before { background: #fafafa; }
[data-theme="light"] .rz-orb-letter { color: #4338ca; text-shadow: none; }
[data-theme="light"] .welcome::before {
    background:
        radial-gradient(ellipse 50% 40% at 30% 35%, rgba(124,58,237,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 70% 55%, rgba(232,99,74,0.03) 0%, transparent 70%),
        radial-gradient(ellipse 60% 30% at 50% 70%, rgba(99,102,241,0.03) 0%, transparent 70%) !important;
}

/* ═══════════════════════════════════════════════════════
   RENZO RESPONSE — Premium redesign
   ═══════════════════════════════════════════════════════ */

/* Base */
.msg.bot .msg-body {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #e2e8f0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 660px !important;
}
[data-theme="light"] .msg.bot .msg-body { color: #1a1a2e !important; }

/* Paragraphs */
.msg.bot .msg-body > p { margin: 0 0 5px !important; line-height: 1.65 !important; font-size: 15px !important; }
.msg.bot .msg-body > p:last-child { margin-bottom: 0 !important; }

/* Headers */
.msg.bot .msg-body h1 { font-size: 1.3em !important; font-weight: 700 !important; margin: 20px 0 10px !important; color: var(--text) !important; border: none !important; }
.msg.bot .msg-body h2 { font-size: 1.12em !important; font-weight: 700 !important; margin: 24px 0 10px !important; color: var(--text) !important; border-bottom: 1px solid rgba(148,163,184,0.08) !important; padding-bottom: 6px !important; }
.msg.bot .msg-body h3 { font-size: 1.0em !important; font-weight: 650 !important; margin: 20px 0 8px !important; color: var(--text) !important; border: none !important; background: none !important; padding: 0 !important; }
.msg.bot .msg-body h1:first-child, .msg.bot .msg-body h2:first-child, .msg.bot .msg-body h3:first-child { margin-top: 0 !important; }

/* Bold */

/* Ordered lists */
.msg.bot .msg-body ol { counter-reset: rz !important; list-style: none !important; padding-left: 0 !important; margin: 12px 0 !important; }
.msg.bot .msg-body ol > li { counter-increment: rz !important; padding-left: 32px !important; position: relative !important; margin: 6px 0 !important; line-height: 1.7 !important; }
.msg.bot .msg-body ol > li::before { content: counter(rz) !important; position: absolute !important; left: 0 !important; top: 3px !important; width: 20px !important; height: 20px !important; background: rgba(99,102,241,0.12) !important; color: var(--primary-light) !important; font-size: 0.72em !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; }

/* Unordered lists */
.msg.bot .msg-body ul > li { margin: 5px 0 !important; line-height: 1.7 !important; padding-left: 4px !important; }
.msg.bot .msg-body ul > li::marker { color: var(--primary-light) !important; font-size: 0.7em !important; }

/* Nested lists */
.msg.bot .msg-body ol > li > ul, .msg.bot .msg-body ul > li > ul { margin: 4px 0 2px !important; padding-left: 16px !important; }
.msg.bot .msg-body ol > li > ul > li, .msg.bot .msg-body ul > li > ul > li { margin: 3px 0 !important; font-size: 0.95em !important; color: var(--text-muted) !important; }
.msg.bot .msg-body ol > li > ul > li::marker { color: rgba(148,163,184,0.35) !important; }
.msg.bot .msg-body li strong { color: var(--text) !important; font-weight: 600 !important; }

/* Inline code */
.msg.bot .msg-body code {
    background: rgba(99,102,241,0.07) !important;
    padding: 1px 6px !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-family: 'JetBrains Mono','Fira Code','SF Mono',monospace !important;
    color: var(--primary-light) !important;
    white-space: normal !important;
    letter-spacing: -0.02em !important;
}
[data-theme="light"] .msg.bot .msg-body code { background: rgba(99,102,241,0.06) !important; color: #5b21b6 !important; }

/* Code blocks */
.msg.bot .msg-body pre {
    background: #13131f !important;
    border: 1px solid rgba(148,163,184,0.06) !important;
    border-left: 3px solid rgba(99,102,241,0.4) !important;
    border-radius: 10px !important;
    margin: 14px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.msg.bot .msg-body pre > code {
    display: block !important;
    padding: 16px 20px !important;
    background: none !important;
    color: #e2e8f0 !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    overflow-x: auto !important;
    border-radius: 0 !important;
    white-space: pre !important;
    letter-spacing: 0 !important;
}
.msg.bot .msg-body pre .code-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 7px 16px !important; background: rgba(255,255,255,0.02) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    font-size: 11px !important; color: #64748b !important; font-family: 'Inter',system-ui,sans-serif !important;
}
.msg.bot .msg-body pre .code-copy { opacity: 0; transition: opacity .15s; }
.msg.bot .msg-body pre:hover .code-copy { opacity: 1; }
[data-theme="light"] .msg.bot .msg-body pre { background: #f8f9fc !important; border-color: #e5e7eb !important; border-left-color: rgba(99,102,241,0.3) !important; }
[data-theme="light"] .msg.bot .msg-body pre > code { color: #1e293b !important; }

/* Links */

/* Blockquotes */
.msg.bot .msg-body blockquote {
    border-left: 3px solid rgba(99,102,241,0.35) !important;
    margin: 14px 0 !important; padding: 12px 16px !important;
    background: rgba(99,102,241,0.03) !important; border-radius: 0 8px 8px 0 !important;
    color: var(--text-muted) !important; font-style: italic !important;
}

/* Tables */
.msg.bot .msg-body tr:last-child td { border-bottom: none !important; }
.msg.bot .msg-body tbody tr:hover { background: rgba(99,102,241,0.02) !important; }

/* Images */
.msg.bot .msg-body img { max-width: 100% !important; border-radius: 10px !important; margin: 12px 0 !important; }

/* Section headers in responses */
.msg.bot .msg-body strong.rz-section-head { display: block !important; margin-top: 16px !important; margin-bottom: 4px !important; font-weight: 650 !important; color: var(--text) !important; }
.msg.bot .msg-body strong.rz-section-head:first-child { margin-top: 0 !important; }

/* Description/caption text — subtle, not colored */
.msg.bot .msg-body em { color: var(--text-muted) !important; font-style: italic !important; }
/* ═══════════════════════════════════════════════════════
   REPORT ISSUE PANEL — Professional redesign
   ═══════════════════════════════════════════════════════ */

.bug-panel {
    width: 420px !important;
    border-left: none !important;
    border-radius: 16px 0 0 16px !important;
    background: var(--bg-card) !important;
    backdrop-filter: blur(40px) saturate(1.5) !important;
    box-shadow: -4px 0 40px rgba(0,0,0,.2), 0 0 0 1px rgba(148,163,184,0.06) !important;
}

/* Header — minimal, authoritative */
.bug-panel .bp-head {
    padding: 22px 28px 18px !important;
    border-bottom: 1px solid rgba(148,163,184,0.06) !important;
    gap: 10px !important;
}
.bug-panel .bp-head svg { opacity: 0.5; }
.bug-panel .bp-head h3 {
    font-size: 0.88em !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: var(--text) !important;
}
.bug-panel .bp-close {
    width: 28px !important; height: 28px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 8px !important;
    font-size: 0.9em !important;
    color: var(--text-muted) !important;
    transition: all .15s !important;
}
.bug-panel .bp-close:hover {
    background: rgba(148,163,184,0.08) !important;
    color: var(--text) !important;
}

/* Body */
.bug-panel .bp-body {
    padding: 24px 28px 28px !important;
    gap: 28px !important;
}

/* Sections */
.bug-panel .bp-section { gap: 10px !important; }

/* Labels — understated, professional */
.bug-panel .bp-label {
    font-size: 0.7em !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
}

/* Context box */
.bug-panel .bp-context {
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 0.78em !important;
    line-height: 1.55 !important;
    background: rgba(148,163,184,0.03) !important;
    border: 1px solid rgba(148,163,184,0.07) !important;
    color: var(--text-muted) !important;
}

/* Chips — clean, restrained */
.bug-panel .bp-pills { gap: 8px !important; }
.bug-panel .bp-pill {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 0.78em !important;
    font-weight: 500 !important;
    border: 1px solid rgba(148,163,184,0.1) !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    transition: all .15s ease !important;
}
.bug-panel .bp-pill:hover {
    border-color: rgba(148,163,184,0.2) !important;
    background: rgba(148,163,184,0.04) !important;
    color: var(--text) !important;
}
.bug-panel .bp-pill.on {
    color: #fff !important;
    border-color: transparent !important;
}
.bug-panel .bp-pill[data-t="wrong"].on { background: #ef4444 !important; }
.bug-panel .bp-pill[data-t="incomplete"].on { background: #e89234 !important; }
.bug-panel .bp-pill[data-t="outdated"].on { background: #3b82f6 !important; }
.bug-panel .bp-pill[data-t="confusing"].on { background: #8b5cf6 !important; }

/* Textarea */
.bug-panel .bp-ta {
    min-height: 110px !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-size: 0.84em !important;
    line-height: 1.6 !important;
    border: 1px solid rgba(148,163,184,0.1) !important;
    background: var(--bg-input) !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.bug-panel .bp-ta:focus {
    border-color: rgba(99,102,241,0.4) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.06) !important;
}
.bug-panel .bp-ta::placeholder { color: rgba(148,163,184,0.35) !important; }

/* Screenshot — clean dropzone */
.bug-panel .bp-img-row { flex-direction: column !important; gap: 10px !important; }
.bug-panel .bp-img-label {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px !important;
    border: 1.5px dashed rgba(148,163,184,0.12) !important;
    border-radius: 10px !important;
    font-size: 0.78em !important;
    color: var(--text-muted) !important;
    transition: all .15s !important;
    box-sizing: border-box !important;
}
.bug-panel .bp-img-label:hover {
    border-color: rgba(99,102,241,0.3) !important;
    background: rgba(99,102,241,0.02) !important;
    color: var(--primary-light) !important;
}
.bug-panel .bp-thumb {
    width: 100% !important; height: auto !important; max-height: 100px !important;
    object-fit: contain !important; border-radius: 8px !important;
    border: 1px solid rgba(148,163,184,0.08) !important;
}

/* Submit — solid, professional */
.bug-panel .bp-submit {
    width: 100% !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 0.84em !important;
    font-weight: 600 !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    transition: all .2s ease !important;
    margin-top: 4px !important;
}
.bug-panel .bp-submit:hover:not(:disabled) {
    background: var(--primary-light) !important;
    box-shadow: 0 2px 12px rgba(99,102,241,0.25) !important;
}
.bug-panel .bp-submit:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

/* Success state */
.bug-panel .bp-success { padding: 48px 24px !important; }
.bug-panel .bp-success-icon { font-size: 2.2em !important; margin-bottom: 14px !important; }
.bug-panel .bp-success h4 { font-size: 1em !important; font-weight: 600 !important; }
.bug-panel .bp-success p { font-size: 0.82em !important; color: var(--text-muted) !important; }

/* Drag-over visual feedback */
.bug-panel .bp-img-label.bp-drag-over {
    border-color: var(--primary-light) !important;
    background: rgba(99,102,241,0.06) !important;
    color: var(--primary-light) !important;
}

/* Section headers in responses (bold text ending with colon) */
.msg.bot .msg-body strong.rz-section-head {
    display: block !important;
    margin-top: 18px !important;
    margin-bottom: 6px !important;
    font-size: 0.98em !important;
    font-weight: 650 !important;
    color: var(--text) !important;
}
.msg.bot .msg-body strong.rz-section-head:first-child {
    margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   SETTINGS PANEL — Polish
   ═══════════════════════════════════════════════════════ */
.st-overlay { position: fixed !important; inset: 0 !important; display: none; align-items: center !important; justify-content: center !important; z-index: 9999 !important; backdrop-filter: blur(8px) !important; background: rgba(0,0,0,0.4) !important; }
.st-overlay.open { display: flex !important; }
.st-panel { border-radius: 20px !important; }
.st-nav { gap: 4px !important; border-right: 1px solid rgba(148,163,184,0.06) !important; padding: 20px 10px !important; width: 200px !important; }
.st-tab { padding: 10px 14px !important; border-radius: 8px !important; gap: 10px !important; transition: all .15s !important; border-left: 3px solid transparent !important; font-size: 13px !important; }
.st-tab .lucide { width: 18px !important; height: 18px !important; }
.st-tab:hover { background: rgba(99,102,241,0.06) !important; }
.st-tab.active { background: rgba(99,102,241,0.1) !important; border-left-color: var(--primary-light) !important; color: var(--text) !important; font-weight: 600 !important; }
.st-tab.active .lucide { color: var(--primary-light) !important; }
.st-group { margin-bottom: 28px !important; }
.st-group-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.8px !important; color: var(--text-muted) !important; margin-bottom: 14px !important; text-transform: uppercase !important; }
.st-model-card { transition: all .15s ease !important; padding: 14px 16px !important; border-radius: 10px !important; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important; background: color-mix(in srgb, var(--text) 2%, transparent) !important; cursor: pointer !important; }
.st-model-card:hover { border-color: rgba(99,102,241,0.25) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; background: color-mix(in srgb, var(--primary) 3%, transparent) !important; }
.st-model-card.active { border-color: #818cf8 !important; border-width: 2px !important; background: rgba(99,102,241,0.04) !important; }
.st-chip.indigo { background: #6366f1 !important; color: #fff !important; }
.st-chip.amber { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #fff !important; }
.st-persona-card { transition: all .15s ease !important; padding: 16px 14px !important; border-radius: 10px !important; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent) !important; background: color-mix(in srgb, var(--text) 2%, transparent) !important; cursor: pointer !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; }
.st-persona-card:hover { border-color: rgba(99,102,241,0.25) !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; }
.st-persona-card.active { border-color: #818cf8 !important; border-width: 2px !important; background: rgba(99,102,241,0.04) !important; }
.st-pc-icon { width: 24px !important; height: 24px !important; color: var(--text-muted) !important; margin-bottom: 2px !important; }
.st-persona-card.active .st-pc-icon { color: var(--primary-light) !important; }
.st-pc-name { font-size: 12px !important; font-weight: 600 !important; }
.st-pc-desc { font-size: 10px !important; color: var(--text-muted) !important; margin-top: 2px !important; line-height: 1.3 !important; }
.st-persona-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 10px !important; }
.st-model-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.st-mc-head { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 4px !important; }
.st-mc-head > .lucide { width: 16px !important; height: 16px !important; color: var(--primary-light) !important; flex-shrink: 0 !important; }
.st-mc-desc { font-size: 12px !important; color: var(--text-muted) !important; line-height: 1.4 !important; padding-left: 24px !important; }
.st-group { margin-bottom: 32px !important; }
.st-group-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.8px !important; color: var(--primary-light) !important; margin-bottom: 14px !important; text-transform: uppercase !important; opacity: 0.8 !important; }
[data-theme="light"] .st-model-card, [data-theme="light"] .st-persona-card { background: #fff !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .st-model-card:hover, [data-theme="light"] .st-persona-card:hover { border-color: rgba(99,102,241,0.3) !important; box-shadow: 0 2px 12px rgba(99,102,241,0.08) !important; }
[data-theme="light"] .st-group-title { color: #6366f1 !important; }
.st-close { top: 14px !important; right: 16px !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; font-size: 16px !important; }
.st-close:hover { background: rgba(148,163,184,0.1) !important; }
.st-content { position: absolute !important; inset: 0 !important; padding: 28px 32px !important; overflow-y: auto !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; }
.st-title { font-size: 22px !important; font-weight: 700 !important; margin-bottom: 28px !important; letter-spacing: -0.03em !important; }
.st-item { padding: 12px 0 !important; }
.st-nav-head { font-size: 11px !important; font-weight: 700 !important; padding: 4px 14px 14px !important; color: var(--text-muted) !important; letter-spacing: 1px !important; text-transform: uppercase !important; }

/* Stop generation button */
.send-btn.stop-mode {
    background: #ef4444 !important;
    animation: stopPulse 1.5s ease-in-out infinite !important;
}
.send-btn.stop-mode:hover {
    background: #dc2626 !important;
    transform: scale(1.05) !important;
}

/* ═══════════════════════════════════════════════════════
   CLICKABILITY & USABILITY — Global interaction polish
   ═══════════════════════════════════════════════════════ */

/* === GLOBAL: All clickable elements === */
button, [onclick], .topbar-btn, .theme-toggle, .send-btn, .mobile-menu-btn,
.bug-fab, .sf-btn, .sb-new, .history-item, .suggest-btn, .bp-pill,
.msg-act-btn, .rate-star, .rz-pin-btn, .fb-toggle, .rz-retry,
.stab, .admin-tab, .tour-next, .tour-skip, .es-star, .zoom-btn,
.lb-arrow, .bp-close, .bp-submit, .bp-img-label, .wcard, .rz-starter {
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
button:focus-visible, [onclick]:focus-visible, a:focus-visible {
    outline: 2px solid var(--primary-light) !important;
    outline-offset: 2px !important;
}

/* === TOP BAR ICONS === */
.topbar-btn, .theme-toggle {
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    padding: 0 !important;
}
.topbar-btn:hover, .theme-toggle:hover {
    background: rgba(99,102,241,0.08) !important;
}
.topbar-btn:active, .theme-toggle:active {
    background: rgba(99,102,241,0.15) !important;
    transform: scale(0.95) !important;
}
.topbar-btn .lucide, .theme-toggle .lucide {
    width: 18px !important;
    height: 18px !important;
}
.topbar-actions {
    gap: 4px !important;
}
.csp-tour-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1em !important;
}

/* === SIDEBAR === */
.sb-new {
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
}
.sb-new:hover {
    background: rgba(99,102,241,0.1) !important;
}
.sb-new:active {
    transform: scale(0.95) !important;
}
.logo.csp-logo:hover {
    opacity: 0.8 !important;
}
.history-item {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
}
.history-item:hover {
    background: rgba(99,102,241,0.06) !important;
}
.history-item.active {
    background: rgba(99,102,241,0.1) !important;
}
.sf-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}
.sf-btn:hover {
    background: rgba(99,102,241,0.08) !important;
}
.sf-btn:active {
    transform: scale(0.95) !important;
}

/* === INPUT BAR === */
.csp-attach-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
}
.csp-attach-btn:hover {
    background: rgba(99,102,241,0.08) !important;
    opacity: 1 !important;
}
.send-btn {
    min-width: 36px !important;
    min-height: 36px !important;
}
.send-btn:hover:not(:disabled) {
    filter: brightness(1.15) !important;
    transform: scale(1.05) !important;
}
.send-btn:active:not(:disabled) {
    transform: scale(0.95) !important;
}
.send-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}
.input-wrapper:focus-within {
    border-color: rgba(99,102,241,0.4) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.08) !important;
}

/* === MESSAGE ACTION BUTTONS === */
.msg-act-btn, .rate-star, .rz-pin-btn, .fb-toggle {
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.msg-act-btn:hover, .fb-toggle:hover {
    background: rgba(99,102,241,0.08) !important;
    color: var(--primary-light) !important;
}
.msg-act-btn:active, .fb-toggle:active {
    background: rgba(99,102,241,0.15) !important;
    transform: scale(0.93) !important;
}
.rate-star:hover svg {
    fill: #fbbf24 !important;
    transform: scale(1.15) !important;
}
.rate-star:active svg {
    transform: scale(0.9) !important;
}
.msg-actions {
    gap: 4px !important;
}

/* === SUGGESTION CHIPS === */
.suggest-btn, .rz-starter {
    padding: 10px 18px !important;
    border-radius: 10px !important;
    min-height: 40px !important;
}
.suggest-btn:hover, .rz-starter:hover {
    border-color: var(--primary-light) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.suggest-btn:active, .rz-starter:active {
    transform: translateY(0) scale(0.98) !important;
}

/* === FLOATING BUTTONS === */
.bug-fab {
    min-width: 48px !important;
    min-height: 48px !important;
}
.bug-fab:hover {
    transform: translateY(-3px) scale(1.05) !important;
}
.bug-fab:active {
    transform: translateY(0) scale(0.95) !important;
}

/* === LIGHTBOX ARROWS === */
.lb-arrow {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.lb-arrow:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* === MOBILE MENU === */
.mobile-menu-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
}
.mobile-menu-btn:hover {
    background: rgba(99,102,241,0.08) !important;
}

/* ═══════════════════════════════════════════════════════
   CORRECTIONS TAB — Professional redesign
   ═══════════════════════════════════════════════════════ */
.corr-stats { display:flex; gap:16px; margin-bottom:20px; }
.corr-stat { flex:1; background:rgba(148,163,184,0.04); border:1px solid rgba(148,163,184,0.08); border-radius:12px; padding:16px; text-align:center; }
.corr-stat-num { display:block; font-size:1.8em; font-weight:700; }
.corr-stat-label { font-size:0.72em; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.corr-filters { display:flex; gap:6px; margin-bottom:16px; }
.corr-filter { padding:7px 16px; border-radius:8px; border:1px solid rgba(148,163,184,0.1); background:transparent; color:var(--text-muted); font-size:0.78em; font-weight:500; cursor:pointer; font-family:inherit; transition:all .15s; }
.corr-filter:hover { border-color:rgba(99,102,241,0.2); color:var(--text); }
.corr-filter.active { background:rgba(99,102,241,0.08); border-color:rgba(99,102,241,0.2); color:var(--primary-light); font-weight:600; }
.corr-card { background:var(--bg-input); border:1px solid rgba(148,163,184,0.08); border-radius:12px; padding:18px; margin-bottom:12px; transition:all .15s; }
.corr-card:hover { border-color:rgba(148,163,184,0.15); }
.corr-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.corr-user { display:flex; align-items:center; gap:8px; font-size:0.85em; }
.corr-avatar { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.75em; font-weight:700; flex-shrink:0; }
.corr-date { font-size:0.8em; color:var(--text-muted); margin-left:8px; }
.corr-topic { font-size:0.68em; font-weight:600; padding:3px 10px; border-radius:6px; text-transform:uppercase; letter-spacing:0.3px; }
.corr-q { font-size:0.82em; color:var(--text-muted); margin-bottom:10px; display:flex; align-items:flex-start; gap:6px; line-height:1.5; }
.corr-label { font-size:0.68em; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); margin-bottom:4px; }
.corr-orig { padding:10px 12px; background:rgba(239,68,68,0.04); border-radius:8px; margin-bottom:8px; border-left:3px solid rgba(239,68,68,0.3); }
.corr-fix { padding:10px 12px; background:rgba(99,102,241,0.04); border-radius:8px; margin-bottom:12px; border-left:3px solid rgba(99,102,241,0.3); }
.corr-text { font-size:0.84em; line-height:1.6; color:var(--text); }
.corr-actions { display:flex; gap:8px; justify-content:flex-end; }
.corr-btn { padding:8px 18px; border-radius:8px; font-size:0.8em; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; }
.corr-reject { border:1px solid rgba(148,163,184,0.15); background:transparent; color:var(--text-muted); }
.corr-reject:hover { border-color:#ef4444; color:#ef4444; }
.corr-approve { border:none; background:#6366f1; color:#fff; }
.corr-approve:hover { background:#818cf8; transform:translateY(-1px); }
.corr-status-badge { font-size:0.8em; font-weight:600; }

/* Privacy tab */
.st-warn { font-size:0.78em; color:#f59e0b; background:rgba(245,158,11,0.06); padding:8px 12px; border-radius:8px; margin:-4px 0 8px; border-left:3px solid rgba(245,158,11,0.3); transition:all .2s; }
.st-privacy-card { background:rgba(34,197,94,0.03) !important; border:1px solid rgba(34,197,94,0.1) !important; border-radius:12px !important; padding:16px !important; }
.st-btn-outline { padding:7px 14px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text); font-size:0.8em; cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:6px; }
.st-btn-outline:hover { border-color:var(--primary-light); color:var(--primary-light); }

/* ═══════════════════════════════════════════════════════
   TOOL RESPONSE — Section polish
   ═══════════════════════════════════════════════════════ */

/* First strong = response title */
.msg.bot .msg-body > strong:first-child {
    display: block !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    padding-left: 12px !important;
    border-left: 3px solid var(--primary-light) !important;
    line-height: 1.4 !important;
}

/* Step headers (h3 with rz-step class) */
.msg.bot .msg-body h3.rz-step {
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
.msg.bot .msg-body h3.rz-step .rz-step-num {
    background: var(--rz-accent, #6366f1) !important;
    color: #fff !important;
    font-size: 0.82em !important;
    width: 1.5em !important; height: 1.5em !important;
    min-width: 1.5em !important;
    border-radius: 50% !important;
}

/* Section dividers between methods — skip step headers so the left-accent card isn't sliced */
.msg.bot .msg-body h3:not(.rz-step) + h3:not(.rz-step) { border-top: 1px solid rgba(148,163,184,0.06) !important; padding-top: 16px !important; }

/* Links with external icon */
.msg.bot .msg-body a[href^="http"]::after {
    content: ' ↗' !important;
    font-size: 0.75em !important;
    opacity: 0.5 !important;
}
.msg.bot .msg-body a[href^="http"]:hover::after { opacity: 1 !important; }

/* Thinking bar — subtle and collapsible */
.rz-thinking { margin-bottom: 12px !important; }
.rz-thinking summary {
    font-size: 0.78em !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background: rgba(148,163,184,0.04) !important;
    transition: background .15s !important;
}
.rz-thinking summary:hover { background: rgba(148,163,184,0.08) !important; }
.rz-thinking .rz-thinking-body {
    font-size: 0.75em !important;
    color: var(--text-muted) !important;
    padding: 10px 12px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    line-height: 1.5 !important;
}

/* Warning/important headers */
.msg.bot .msg-body h3.rz-warn {
    background: rgba(251,191,36,0.06) !important;
    border-left: 3px solid #f59e0b !important;
    padding: 8px 12px !important;
    border-radius: 0 8px 8px 0 !important;
    margin: 16px 0 8px !important;
}

/* Summary callout */
.rz-summary {
    background: rgba(99,102,241,0.04) !important;
    border: 1px solid rgba(99,102,241,0.1) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
}

/* Fix icon click targets — clicks pass through SVG to parent button */
button .lucide, button svg, .topbar-btn .lucide, .topbar-btn svg,
.send-btn .lucide, .send-btn svg, .sf-btn .lucide, .sf-btn svg,
.sb-new .lucide, .sb-new svg, .msg-act-btn .lucide, .msg-act-btn svg,
.csp-attach-btn .lucide, .csp-attach-btn svg, .theme-toggle .lucide, .theme-toggle svg,
.mobile-menu-btn .lucide, .mobile-menu-btn svg, .bp-close .lucide, .bp-close svg,
.admin-close .lucide, .admin-close svg, .tour-next .lucide, .tour-skip .lucide,
.rate-star svg, .rz-pin-btn .lucide, .fb-toggle .lucide,
.zoom-btn .lucide, .lb-arrow .lucide, .bug-fab svg,
.rz-dash-expand .lucide, .rz-starter .lucide, .suggest-btn .lucide,
.corr-btn .lucide, .st-tab .lucide, .es-star .lucide,
.h-act .lucide, .h-act svg {
    pointer-events: none !important;
}

/* + Action Menu */
.rz-plus-btn { min-width:36px!important;min-height:36px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;border:1.5px solid rgba(148,163,184,0.15)!important;background:transparent!important;color:var(--text-muted)!important;cursor:pointer!important;transition:all .15s!important;padding:0!important; }
.rz-plus-btn:hover { border-color:var(--primary-light)!important;color:var(--primary-light)!important;background:rgba(99,102,241,0.06)!important; }

/* Deep Think toggle button */
.rz-think-btn { min-width:32px!important;min-height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;border:1.5px solid rgba(148,163,184,0.1)!important;background:transparent!important;color:var(--text-muted)!important;cursor:pointer!important;transition:all .2s!important;padding:0!important;opacity:0.5; }
.rz-think-btn .lucide { width:16px!important;height:16px!important; }
.rz-think-btn:hover { border-color:rgba(139,92,246,0.3)!important;color:var(--accent)!important;background:rgba(139,92,246,0.06)!important;opacity:1; }
.rz-think-btn.active { border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(139,92,246,0.12)!important;opacity:1;box-shadow:0 0 12px rgba(139,92,246,0.2); }
.rz-think-btn.active .lucide { animation: thinkPulse 2s ease infinite; }
@keyframes thinkPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* Web Search toggle button */
.rz-web-btn { min-width:32px!important;min-height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;border:1.5px solid rgba(148,163,184,0.1)!important;background:transparent!important;color:var(--text-muted)!important;cursor:pointer!important;transition:all .2s!important;padding:0!important;opacity:0.5; }
.rz-web-btn .lucide { width:16px!important;height:16px!important; }
.rz-web-btn:hover { border-color:rgba(6,182,212,0.3)!important;color:#22d3ee!important;background:rgba(6,182,212,0.06)!important;opacity:1; }
.rz-web-btn.active { border-color:#06b6d4!important;color:#22d3ee!important;background:rgba(6,182,212,0.12)!important;opacity:1;box-shadow:0 0 12px rgba(6,182,212,0.2); }

/* Numbered citations */
.rz-citations { margin-top:14px;padding-top:10px;border-top:1px solid rgba(148,163,184,0.08);font-size:0.78em;color:var(--text-muted);line-height:1.6; }
.rz-citations-title { font-weight:600;font-size:0.72em;text-transform:uppercase;letter-spacing:0.4px;color:var(--text-muted);opacity:0.6;margin-bottom:6px; }
.rz-cite { display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;border-radius:3px;background:rgba(99,102,241,0.1);color:var(--primary-light);font-size:9px;font-weight:700;cursor:default;vertical-align:super;margin:0 1px;padding:0 3px;line-height:1;position:relative;top:-2px; }
.rz-cite:hover { background:rgba(99,102,241,0.18); }
.rz-cite-ref { display:inline-flex;align-items:center;gap:4px;padding:3px 0;opacity:0.8;font-size:0.9em; }
.rz-cite-ref:hover { opacity:1; }
.rz-cite-num { display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;border-radius:3px;background:rgba(99,102,241,0.08);color:var(--primary-light);font-size:9px;font-weight:700;padding:0 3px;flex-shrink:0; }
.rz-pm-item .lucide { width:18px;height:18px;color:var(--text-muted);pointer-events:none; }

/* Dashboard Upload Modal */
.rz-dash-modal { position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s; }
.rz-dash-modal.open { opacity:1; }
.rz-dash-modal-bg { position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(6px); }
.rz-dash-modal-box { position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:28px;max-width:440px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.rz-dash-dropzone { border:2px dashed rgba(148,163,184,0.15);border-radius:14px;padding:40px 20px;text-align:center;transition:all .2s;cursor:pointer; }
.rz-dash-dropzone:hover,.rz-dash-dropzone.dragover { border-color:var(--primary-light);background:rgba(99,102,241,0.04); }

/* Upload progress */
.rz-dash-progress{text-align:center;padding:20px 0}
.rz-dash-prog-title{font-size:1em;font-weight:700;margin-bottom:16px}
.rz-dash-prog-bar{height:4px;background:rgba(148,163,184,0.08);border-radius:2px;overflow:hidden;margin-bottom:20px}
.rz-dash-prog-fill{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:2px;transition:width .4s ease;width:0}
.rz-dash-prog-steps{text-align:left}
.rz-dash-prog-step{padding:6px 0;font-size:0.82em;color:var(--text-muted);display:flex;align-items:center;gap:8px;transition:color .2s}
.rz-dash-prog-step.active{color:var(--primary-light);font-weight:600}
.rz-dash-prog-step.done{color:var(--text-muted)}
.rz-dash-prog-step.done .rz-dash-prog-check{color:#22c55e}
.rz-dash-prog-check{width:18px;text-align:center}
/* Sheet selector */
.rz-dash-sheets{display:flex;gap:4px;flex-wrap:wrap}
.rz-dash-sheet-btn{padding:6px 12px;border-radius:8px;border:1px solid rgba(148,163,184,0.1);background:transparent;color:var(--text-muted);font-size:0.8em;cursor:pointer;font-family:inherit;transition:all .15s}
.rz-dash-sheet-btn:hover{border-color:var(--primary-light);color:var(--primary-light)}
.rz-dash-sheet-btn.active{background:rgba(99,102,241,0.1);border-color:var(--primary-light);color:var(--primary-light);font-weight:600}

/* Mobile bottom sheet for + menu */
@media(max-width:640px){
    .rz-plus-menu.open{transform:translateY(0)!important}
    .rz-plus-menu::before{content:'';display:block;width:36px;height:4px;background:rgba(148,163,184,0.2);border-radius:2px;margin:6px auto 10px}
}

/* Data Insights Overlay */
.rz-insight-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
.rz-insight-overlay.open{opacity:1}
.rz-insight-box{background:var(--bg-card,#1e293b);border:1px solid rgba(148,163,184,0.1);border-radius:22px;padding:32px;max-width:600px;width:92%;max-height:85vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,0.4)}
.rz-insight-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.rz-insight-header h3{margin:0;font-size:1.1em;font-weight:700}
.rz-insight-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff}
.rz-insight-icon .lucide{width:20px;height:20px;pointer-events:none}
.rz-insight-body{font-size:0.85em;line-height:1.8;color:var(--text);margin-bottom:20px}
.rz-insight-body strong{color:var(--primary-light,#818cf8)}
.rz-insight-sugs{margin-bottom:20px}
.rz-insight-sug{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border-radius:10px;border:1px solid rgba(148,163,184,0.08);background:transparent;color:var(--text);font-size:0.82em;cursor:pointer;font-family:inherit;transition:all .15s;margin-bottom:4px;text-align:left}
.rz-insight-sug:hover{border-color:var(--primary-light);background:rgba(99,102,241,0.04);color:var(--primary-light)}
.rz-insight-sug .lucide{width:16px;height:16px;color:var(--text-muted);pointer-events:none;flex-shrink:0}
.rz-insight-actions{display:flex;gap:8px}
.rz-insight-btn{flex:1;padding:12px;border-radius:12px;font-size:0.88em;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;border:none}
.rz-insight-btn.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}
.rz-insight-btn.primary:hover{opacity:0.9}
.rz-insight-btn.secondary{background:transparent;border:1px solid rgba(148,163,184,0.1);color:var(--text-muted)}
.rz-insight-btn.secondary:hover{border-color:var(--primary-light);color:var(--primary-light)}

/* Scan report in insights overlay */
.rz-scan-step{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.85em}
.rz-scan-icon{font-size:1em;width:20px;text-align:center;flex-shrink:0}
.rz-scan-col{display:flex;align-items:center;gap:6px;padding:2px 0 2px 28px;font-size:.82em}
.rz-scan-ico{font-size:.75em;width:16px;text-align:center;color:var(--primary-light)}
.rz-scan-detail{color:var(--text-muted);font-size:.85em;margin-left:auto}
.rz-dash-opt{display:flex!important;align-items:center!important;gap:10px!important;text-align:left!important;width:100%!important}
.rz-dash-opt div{min-width:0}

/* === PROGRESS PANEL === */


.rz-prog-step{display:flex;align-items:center;gap:12px;padding:0;font-size:12.5px;line-height:1.4;color:var(--text,#e2e8f0);position:relative;min-height:36px}
.rz-prog-step.done span:last-child{color:var(--text-muted,#94a3b8)}
.rz-prog-step.active span:last-child{color:var(--text,#e2e8f0);font-weight:600}
.rz-prog-step.pending span:last-child{color:rgba(148,163,184,0.35)}
.rz-prog-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2.5px solid rgba(148,163,184,0.15);color:rgba(148,163,184,0.4);transition:all .3s;position:relative;z-index:1;background:var(--bg-card,#1e293b)}
.rz-prog-num.done{background:#6366f1;border-color:#6366f1;color:white}
.rz-prog-num.active{border-color:#6366f1;color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,0.15);animation:rzPulse 2s ease-in-out infinite}
.rz-prog-num.error{background:#ef4444;border-color:#ef4444;color:white}
.rz-prog-ctx{padding:12px 20px;border-top:1px solid rgba(148,163,184,0.06);font-size:11px;color:var(--text-muted,#94a3b8);line-height:1.6;background:var(--bg-card,#1e293b)}
@keyframes rzPulse{0%,100%{box-shadow:0 0 0 4px rgba(99,102,241,0.15)}50%{box-shadow:0 0 0 8px rgba(99,102,241,0.08)}}
@keyframes rzSlideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes rzSpin{0%{box-shadow:0 0 0 0 rgba(99,102,241,0.4)}50%{box-shadow:0 0 0 4px rgba(99,102,241,0)}100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}}
@media(max-width:768px){}

@keyframes rzExitIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.hover-border:hover{border-color:var(--primary-light) !important}
.hover-red:hover{color:#ef4444 !important}


/* ══════════════════════════════════════════════════════════════
   Response Polish — World-class chat formatting (13 Apr 2026)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY ── */

/* ── 2. HEADINGS ── */
.msg.bot .msg-body div[style*="border-left:3px solid #6366f1"]{margin-top:20px;margin-bottom:10px}

/* ── 3. LISTS ── */
.msg.bot .msg-body ul,.msg.bot .msg-body ol{margin:8px 0 12px;padding-left:24px}
.msg.bot .msg-body li ul,.msg.bot .msg-body li ol{margin-top:4px;padding-left:20px}
.msg.bot .msg-body ul{list-style-type:disc}
.msg.bot .msg-body strong{font-weight:650}

/* ── 4. STEP CARDS ── */
.msg.bot .msg-body .rz-step-card,

/* ── 5. TABLES ── */
.msg.bot .msg-body td{padding:9px 14px;border-bottom:1px solid rgba(148,163,184,0.05)}
.msg.bot .msg-body tr:nth-child(even){background:rgba(148,163,184,0.015)}
.msg.bot .msg-body tr:hover{background:rgba(99,102,241,0.03)}

/* ── 6. CODE ── */
.msg.bot .msg-body .code-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(148,163,184,0.05);font-size:11px;text-transform:uppercase;letter-spacing:0.5px}
.msg.bot .msg-body .code-header .copy-btn:hover{opacity:1}

/* ── 7. SCREENSHOTS ── */
.msg.bot .msg-body .ss-card .ss-caption{padding:8px 14px;background:rgba(0,0,0,0.02);font-size:12px;display:flex;align-items:center;gap:8px}

/* ── 8. METADATA BAR ── */
.msg.bot:hover .rz-meta{opacity:0.8}
.msg.bot .rz-meta .rz-conf{font-weight:600;padding:2px 8px;border-radius:4px;font-size:11px}
.msg.bot .rz-thinking summary{font-size:12px;opacity:0.4;cursor:pointer;margin-bottom:8px}

/* ── 9. MESSAGE ACTIONS ── */
.msg.bot .msg-actions{opacity:0 !important;transition:opacity 0.15s ease !important;padding-top:10px;margin-top:12px;border-top:1px solid rgba(148,163,184,0.06)}
.msg.bot:hover .msg-actions{opacity:1 !important}
.msg.bot .msg-actions:focus-within{opacity:1 !important}
.msg.bot .msg-actions .msg-act-btn,.msg.bot .msg-actions .rate-star{height:28px;padding:0 8px;border-radius:6px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.15s}
.msg.bot .msg-actions .msg-act-btn:hover,.msg.bot .msg-actions .rate-star:hover{background:rgba(99,102,241,0.08);color:var(--primary-light)}

/* ── 10. FOLLOW-UP SUGGESTIONS ── */
.msg.bot .rz-next-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-muted);opacity:0.5;margin-bottom:10px}

/* ── 11. BLOCKQUOTES & CALLOUTS ── */
.msg.bot .msg-body .rz-callout{background:rgba(59,130,246,0.04);border:1px solid rgba(59,130,246,0.1);border-radius:10px;padding:14px 16px;margin:12px 0}

/* ── 12. LINKS ── */

/* ── 13. VERTICAL RHYTHM ── */
.msg.bot .msg-body>p+p,.msg.bot .msg-body>p+ul,.msg.bot .msg-body>p+ol,.msg.bot .msg-body>ul+p,.msg.bot .msg-body>ol+p,.msg.bot .msg-body>pre+p,.msg.bot .msg-body>table+p,.msg.bot .msg-body>blockquote+p{margin-top:14px}
.msg.bot .msg-body>p+pre,.msg.bot .msg-body>p+table,.msg.bot .msg-body>p+blockquote{margin-top:12px}

/* ── 14. LIGHT THEME ── */
[data-theme="light"] .msg.bot .msg-body th{background:rgba(99,102,241,0.04)}
[data-theme="light"] .msg.bot .msg-body pre{background:#f8f9fb;border-color:rgba(148,163,184,0.12)}
[data-theme="light"] .msg.bot .msg-body pre code{color:#1e293b}
[data-theme="light"] .msg.bot .msg-body :not(pre)>code{background:rgba(99,102,241,0.06);color:#4f46e5}
[data-theme="light"] .msg.bot .msg-body div[style*="border-left:3px solid"],[data-theme="light"] .msg.bot .msg-body .rz-step-card{background:rgba(99,102,241,0.03)}
[data-theme="light"] .msg.bot .msg-body blockquote{background:rgba(99,102,241,0.03)}
[data-theme="light"] .msg.bot .msg-body .ss-card .ss-caption{background:rgba(0,0,0,0.01)}

/* ══════════════════════════════════════════════════════════════
   Response Delight — Premium micro-interactions (13 Apr 2026)
   ══════════════════════════════════════════════════════════════ */

/* ── A. MICRO-ANIMATIONS ── */
.msg.bot .msg-body div[style*="border-left"]:hover{border-left-width:5px !important;background:rgba(99,102,241,0.04) !important}
.msg.bot .msg-body tr{transition:background 0.15s}
.msg.bot .suggest-btn{transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}
.msg.bot .suggest-btn:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 1px 3px rgba(99,102,241,0.08)}
.msg.bot .suggest-btn:active{transform:translateY(0) scale(0.98) !important}
.msg.bot .msg-body .ss-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(0,0,0,0.06),0 4px 8px rgba(0,0,0,0.04),0 12px 24px rgba(0,0,0,0.03)}
.msg.bot .msg-body .ss-card:hover img{transform:scale(1.01)}
.msg.bot .msg-body .ss-card img{transition:transform 0.3s}
.msg.bot .msg-body .code-header .copy-btn{opacity:0;transition:opacity 0.15s}
.msg.bot .msg-body pre:hover .code-header .copy-btn{opacity:0.7}
.msg.bot .msg-body pre:hover .code-header .copy-btn:hover{opacity:1}
.msg.bot .msg-body :not(pre)>code{transition:background 0.15s}
.msg.bot .msg-body :not(pre)>code:hover{background:rgba(99,102,241,0.12)}
.msg.bot .msg-body a{background-image:linear-gradient(var(--primary-light),var(--primary-light));background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size 0.25s ease}
.msg.bot .msg-body a:hover{background-size:100% 1px;border-bottom-color:transparent}
.msg.bot .msg-actions .msg-act-btn:nth-child(1){transition-delay:0s}
.msg.bot .msg-actions .msg-act-btn:nth-child(2),.msg.bot .msg-actions .rate-star:nth-child(2){transition-delay:0.03s}
.msg.bot .msg-actions .msg-act-btn:nth-child(3),.msg.bot .msg-actions .rate-star:nth-child(3){transition-delay:0.06s}
.msg.bot .msg-actions .msg-act-btn:nth-child(4),.msg.bot .msg-actions .rate-star:nth-child(4){transition-delay:0.09s}
.msg.bot .msg-actions .msg-act-btn:nth-child(5),.msg.bot .msg-actions .rate-star:nth-child(5){transition-delay:0.12s}
.msg.bot .msg-actions .rate-star:nth-child(6){transition-delay:0.15s}
.msg.bot .msg-actions .rate-star:nth-child(7){transition-delay:0.18s}
@keyframes rzBorderPulse{0%{border-left-color:rgba(99,102,241,0.15)}50%{border-left-color:rgba(99,102,241,0.5)}100%{border-left-color:rgba(99,102,241,0.3)}}
.msg.bot .msg-body blockquote{animation:rzBorderPulse 0.5s ease-out 1}

/* ── B. VISUAL DEPTH ── */
.msg.bot .msg-body div[style*="border-left:3px solid"]{box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
.msg.bot .msg-body .rz-av,.msg.bot .rz-av{box-shadow:0 0 0 2px rgba(99,102,241,0.15)}

/* ── C. TYPOGRAPHY REFINEMENTS ── */
.msg.bot .msg-body>:first-child{font-size:15.5px}
.msg.bot .msg-body li>strong:first-child{color:rgba(129,140,248,0.85)}
.msg.bot .msg-body th{text-shadow:0 0.5px 0 rgba(0,0,0,0.05)}

/* ── D. COLOR ACCENTS ── */
.msg.bot .msg-body ul ::marker{color:rgba(99,102,241,0.4)}
.msg.bot .msg-body ol ::marker{color:rgba(99,102,241,0.5);font-weight:700}
.msg.bot .msg-body .step-num{background:linear-gradient(135deg,#6366f1,#818cf8)}
.msg.bot .rz-meta .rz-conf-high{background:rgba(34,197,94,0.08);color:#22c55e;border:1px solid rgba(34,197,94,0.15);border-radius:4px;padding:2px 8px}
.msg.bot .rz-meta .rz-conf-medium{background:rgba(245,158,11,0.08);color:#f59e0b;border:1px solid rgba(245,158,11,0.15);border-radius:4px;padding:2px 8px}
.msg.bot .rz-meta .rz-conf-low{background:rgba(239,68,68,0.08);color:#ef4444;border:1px solid rgba(239,68,68,0.15);border-radius:4px;padding:2px 8px}
.msg.bot .rz-thinking[open]{border-left:2px solid rgba(99,102,241,0.2);padding-left:12px}

/* ── E. SPACING PERFECTION ── */
.msg.bot .msg-body p{margin-bottom:14px}
.msg.bot .msg-body h3,.msg.bot .msg-body h4,.msg.bot .msg-body .rz-step{margin-top:24px;margin-bottom:8px}
.msg.bot .msg-body li{margin-bottom:5px}
.msg.bot .msg-body li li{margin-bottom:3px}
.msg.bot .msg-body table{margin:16px 0}
.msg.bot .msg-body .ss-card{margin:16px 0}
.msg.bot .rz-meta{margin-top:18px}
.msg.bot .rz-next{margin-top:20px}

/* ── F. CODE SCROLLBAR ── */
.msg.bot .msg-body pre::-webkit-scrollbar{width:6px;height:6px}
.msg.bot .msg-body pre::-webkit-scrollbar-track{background:transparent}
.msg.bot .msg-body pre::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.2);border-radius:3px}
.msg.bot .msg-body pre::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,0.35)}

/* ── G. SELECTION HIGHLIGHT ── */
.msg.bot .msg-body ::selection{background:rgba(99,102,241,0.2);color:inherit}
.msg.bot .msg-body ::-moz-selection{background:rgba(99,102,241,0.2);color:inherit}

/* ── H. PRINT ── */
@media print{
.msg.bot .msg-body{font-size:12px;line-height:1.6;max-width:100%;color:#1e293b}
.msg.bot .msg-body div[style*="border-left"]{border-left:2px solid #6366f1 !important;background:none !important}
.msg.bot .msg-body pre{background:#f5f5f5 !important;color:#1e293b !important;border:1px solid #ddd !important}
.msg.bot .msg-body pre code{color:#1e293b !important}
.msg.bot .msg-body table,.msg.bot .msg-body th,.msg.bot .msg-body td{border:1px solid #ddd !important}
.msg.bot .msg-actions,.msg.bot .rz-meta,.msg.bot .rz-next,.msg.bot .suggest-btn{display:none !important}
}

/* ── I. REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
.msg.bot .msg-body *{transition-duration:0s !important;animation:none !important}
.msg.bot .suggest-btn:hover,.msg.bot .msg-body .ss-card:hover,.msg.bot .msg-body .ss-card:hover img{transform:none !important}
}

/* ── J. FOCUS INDICATORS ── */
.msg.bot .suggest-btn:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}
.msg.bot .msg-body .code-header .copy-btn:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}
.msg.bot .msg-body a:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:2px}
.msg.bot .msg-actions .msg-act-btn:focus-visible,.msg.bot .msg-actions .rate-star:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px}

/* ── LIGHT THEME DEPTH ADJUSTMENTS ── */
[data-theme="light"] .msg.bot .msg-body div[style*="border-left"]:hover{background:rgba(99,102,241,0.05) !important}
[data-theme="light"] .msg.bot .msg-body div[style*="border-left:3px solid"]{box-shadow:inset 0 1px 0 rgba(255,255,255,0.5)}
[data-theme="light"] .msg.bot .msg-body table{box-shadow:0 1px 3px rgba(0,0,0,0.03),0 4px 12px rgba(0,0,0,0.015)}
[data-theme="light"] .msg.bot .msg-body pre{box-shadow:0 1px 2px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.02)}
[data-theme="light"] .msg.bot .msg-body .ss-card{box-shadow:0 1px 2px rgba(0,0,0,0.04),0 4px 8px rgba(0,0,0,0.02),0 8px 16px rgba(0,0,0,0.015)}
[data-theme="light"] .msg.bot .msg-body li>strong:first-child{color:rgba(79,70,229,0.85)}
[data-theme="light"] .msg.bot .msg-body blockquote{animation-name:rzBorderPulseLight}
@keyframes rzBorderPulseLight{0%{border-left-color:rgba(99,102,241,0.1)}50%{border-left-color:rgba(99,102,241,0.4)}100%{border-left-color:rgba(99,102,241,0.3)}}


/* Document analysis: executive summary collapsibles */
.msg-bubble details{margin:8px 0;border:1px solid rgba(99,102,241,0.1);border-radius:8px}
.msg-bubble details>summary{padding:10px 14px;cursor:pointer;font-weight:600;font-size:13px}
.msg-bubble details[open]>summary{border-bottom:1px solid rgba(99,102,241,0.1)}
.msg-bubble details>:not(summary){padding:10px 14px}


/* ============================================================
   BUG FAB POLISH v2.4 (21 Apr 2026)
   Secondary floating action - no longer loudest on screen.
   CSS only, IDs/handlers preserved.
   ============================================================ */
.bug-fab{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    bottom:20px !important;
    right:20px !important;
    border-radius:12px !important;
    background:color-mix(in srgb, var(--text) 8%, transparent) !important;
    color:var(--text-muted) !important;
    border:1px solid color-mix(in srgb, var(--text) 14%, transparent) !important;
    box-shadow:0 2px 8px color-mix(in srgb, var(--text) 12%, transparent) !important;
    z-index:40 !important;
    transition:background .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), transform .15s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1) !important;
}
.bug-fab svg{width:18px !important;height:18px !important}
.bug-fab:hover{
    background:color-mix(in srgb, var(--text) 12%, transparent) !important;
    color:var(--text) !important;
    transform:translateY(-1px) !important;
    box-shadow:0 4px 12px color-mix(in srgb, var(--text) 16%, transparent) !important;
}
.bug-fab:active{transform:translateY(0) !important}
.bug-fab.open{
    background:color-mix(in srgb, var(--primary) 14%, transparent) !important;
    color:var(--primary) !important;
    border-color:var(--primary) !important;
    transform:rotate(45deg) !important;
    box-shadow:none !important;
}
@media (prefers-reduced-motion: reduce){
    .bug-fab,.bug-fab:hover,.bug-fab:active{transform:none !important;transition:none !important}
}

/* ============================================================
   PLUS MENU POLISH Tier 1 (22 Apr 2026)
   Scoped to .rz-plus-menu. No JS logic change.
   ============================================================ */
.rz-plus-menu{min-width:260px !important;border:1px solid color-mix(in srgb, var(--text) 12%, transparent) !important}
.rz-pm-item{border-radius:10px !important;transition:background .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1) !important}
.rz-pm-item:hover{background:color-mix(in srgb, var(--primary) 8%, transparent) !important}
.rz-pm-item:hover .lucide{color:var(--primary) !important;transition:color .15s cubic-bezier(.4,0,.2,1)}
[data-theme="light"] .rz-plus-menu{border-color:color-mix(in srgb, var(--text) 14%, transparent) !important;box-shadow:0 8px 32px color-mix(in srgb, var(--text) 10%, transparent) !important}

/* ============================================================
   Progress panel + Wiki Preview panel — avoid overlap
   ============================================================ */
/* When preview is open, shift progress panel left by preview width */
body.rz-wpv-open 
/* Smooth transition when preview closes */

/* Fullscreen preview hides progress underneath */
#rzWikiPreviewPanel.is-fullscreen ~ #rzProgress,
body:has(#rzWikiPreviewPanel.is-fullscreen) 
/* Mobile: preview takes full width, hide progress */
@media (max-width: 900px) {
  body.rz-wpv-open 
}

/* ============================================================
   PROGRESS PANEL SIZING + RESIZE (22 Apr 2026)
   ============================================================ */


#rzProgress::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background .15s;
}
#rzProgress:hover::before,
#rzProgress.is-resizing::before{
    background: color-mix(in srgb, var(--primary) 30%, transparent);
}
@media (max-width: 768px){
    
}

/* Wiki code collapsible in chat (prevents raw CSS flood) */
.rz-wiki-code-collapse{
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--text) 3%, transparent);
    margin: 8px 0;
    overflow: hidden;
}
.rz-wiki-code-collapse summary{
    cursor: pointer;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    list-style: none;
}
.rz-wiki-code-collapse summary::-webkit-details-marker{ display: none; }
.rz-wiki-code-collapse summary::before{
    content: "▸";
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform .15s;
    display: inline-block;
}
.rz-wiki-code-collapse[open] summary::before{ transform: rotate(90deg); }
.rz-wiki-code-collapse summary:hover{
    background: color-mix(in srgb, var(--text) 4%, transparent);
}
.rz-wiki-code-collapse pre{
    margin: 0;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border-top: 1px solid var(--border);
    overflow-x: auto;
    font-size: 0.75rem;
    line-height: 1.5;
    max-height: 400px;
    overflow-y: auto;
}
.rz-wiki-code-collapse code{
    background: none;
    padding: 0;
    font-family: Menlo, Consolas, monospace;
    color: var(--text);
    white-space: pre;
}

/* ============================================================
   SIDEBAR RESIZE (22 Apr 2026) — sibling flex handle (overflow-safe)
   ============================================================ */
#sidebar, .sidebar {
    min-width: 120px !important;
    max-width: 400px !important;
    flex-shrink: 0;
}
.rz-sidebar-handle {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 50;
    transition: background .15s;
    align-self: stretch;
}
.rz-sidebar-handle:hover,
.rz-sidebar-handle.is-dragging {
    background: color-mix(in srgb, var(--primary) 25%, transparent);
}
.rz-sidebar-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: var(--border);
    pointer-events: none;
}
.rz-sidebar-handle:hover::after,
.rz-sidebar-handle.is-dragging::after {
    background: var(--primary);
    width: 2px;
}
.sidebar-hidden ~ .rz-sidebar-handle,
.sidebar-collapsed ~ .rz-sidebar-handle {
    display: none !important;
}
#chatHistoryList .h-text,
#chatHistoryList .history-item span,
#dashList .history-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .rz-sidebar-handle { display: none !important; }
}

/* === Inline Progress Widget (Claude-style, 2-row layout) === */
.rz-iprog {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--primary, #6366f1) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #6366f1) 12%, transparent);
  border-radius: 10px;
  margin-bottom: 12px;
  max-width: 400px;
}
.rz-iprog-main { display: flex; align-items: center; gap: 8px; }
.rz-iprog-icon { width: 16px; height: 16px; color: var(--primary, #6366f1); flex-shrink: 0; }
.rz-iprog-label {
  font-size: 0.9375rem; font-weight: 600; color: var(--text, #0E0922);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rz-iprog-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.75rem; color: var(--text-muted, #6b7280);
}
.rz-iprog-dots { display: flex; gap: 4px; align-items: center; }
.rz-iprog-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--border, #e5e7eb);
  transition: background 0.2s, transform 0.2s;
}
.rz-iprog-dot.is-done { background: var(--success, #22c55e); }
.rz-iprog-dot.is-active {
  background: var(--primary, #6366f1);
  transform: scale(1.3);
  animation: rz-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes rz-dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.rz-iprog-counter { font-weight: 500; }
.rz-iprog-sep { opacity: 0.4; }
.rz-iprog-time { font-variant-numeric: tabular-nums; }
.rz-iprog-toggle {
  background: none; border: none; padding: 2px; cursor: pointer;
  color: var(--text-muted, #6b7280); display: flex; align-items: center; margin-left: auto;
}
.rz-iprog-toggle:hover { color: var(--text, #0E0922); }
.rz-iprog-toggle i { width: 14px; height: 14px; }
.rz-iprog.is-expanded .rz-iprog-toggle i { transform: rotate(180deg); transition: transform 200ms; }
.rz-iprog.is-collapsed .rz-iprog-meta { display: none; }
.rz-iprog.is-collapsed { padding: 8px 14px; gap: 0; }
.rz-iprog.is-collapsed .rz-iprog-main { gap: 6px; }
.rz-iprog.is-done {
  background: color-mix(in srgb, var(--success, #22c55e) 6%, transparent);
  border-color: color-mix(in srgb, var(--success, #22c55e) 15%, transparent);
}
.rz-iprog.is-done .rz-iprog-icon { color: var(--success, #22c55e); }
.rz-iprog.is-done .rz-iprog-label { font-weight: 500; color: var(--text-muted, #6b7280); }
.rz-iprog-detail {
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--primary, #6366f1) 10%, transparent);
}
.rz-iprog-detail .rz-prog-steps-list { padding: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.rz-iprog-detail .rz-prog-s { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-muted, #6b7280); }
.rz-iprog-detail .rz-prog-s i { width: 14px; height: 14px; flex-shrink: 0; }
.rz-iprog-detail .rz-prog-s.is-done { color: var(--success, #22c55e); }
.rz-iprog-detail .rz-prog-s.is-done i { color: var(--success, #22c55e); }
.rz-iprog-detail .rz-prog-s.is-active { color: var(--text, #0E0922); font-weight: 500; }
.rz-iprog-detail .rz-prog-s.is-active i { color: var(--primary, #6366f1); animation: rz-spin 1s linear infinite; }
@keyframes rz-spin { to { transform: rotate(360deg); } }
.rz-iprog-detail .rz-prog-s.is-pending { color: var(--text-muted, #6b7280); opacity: 0.5; }
.rz-iprog-detail .rz-prog-ctx-line {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-size: 0.75rem; color: var(--text-muted, #6b7280);
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .rz-iprog-dot.is-active { animation: none; }
}


.main { margin-right: 0 !important; }


/* ============================================================
   Thinking Indicator — unified inline status (May 2026)
   Lives inside the bot message bubble while Renzo is working.
   One clean row: orb + live status text + elapsed time.
   Replaces the old floating pill and the skeleton loader bar.
   ============================================================ */
.msg.typing .msg-body { background: transparent !important; padding: 4px 0 !important; box-shadow: none !important; }

.rz-think {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #6366f1) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #6366f1) 12%, transparent);
  font-size: 0.8125rem;
  color: var(--text, #0E0922);
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

/* Soft horizontal shimmer while active */
.rz-think::before {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  height: 100%; width: 30%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--primary, #6366f1) 8%, transparent),
    transparent
  );
  animation: rz-think-shimmer 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}

@keyframes rz-think-shimmer {
}

/* Orb with progress ring */
.rz-think-orb {
  position: relative;
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rz-think-core {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #a5b4fc 0%,
    var(--primary, #6366f1) 50%,
    #4f46e5 100%
  );
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.35);
  animation: rz-think-pulse 1.6s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes rz-think-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.82); }
}

.rz-think-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.rz-think-ring-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--primary, #6366f1) 15%, transparent);
  stroke-width: 2;
}

.rz-think-ring-fg {
  fill: none;
  stroke: var(--primary, #6366f1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 97.39;
  stroke-dashoffset: 97.39;
  transition: stroke-dashoffset 600ms cubic-bezier(.4, 0, .2, 1);
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--primary, #6366f1) 40%, transparent));
}

/* Live status text — crossfades between phases */
.rz-think-text {
  font-weight: 500;
  color: var(--text, #0E0922);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 280px;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 180ms cubic-bezier(.4, 0, .2, 1),
    transform 180ms cubic-bezier(.4, 0, .2, 1);
}

.rz-think-text-out {
  opacity: 0;
  transform: translateY(-4px);
}

/* Elapsed time — discreet */
.rz-think-time {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
  padding-left: 8px;
  margin-left: 2px;
  border-left: 1px solid color-mix(in srgb, var(--text-muted, #6b7280) 20%, transparent);
  flex-shrink: 0;
}

/* Hide time when elapsed is still 0s (less noise on first paint) */
.rz-think-time:empty { display: none; }

/* Leaving animation */
.msg.typing.rz-think-leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rz-think::before { animation: none; }
  .rz-think-core { animation: none; }
  .rz-think-ring-fg { transition: none; }
}

/* Mobile: allow text to wrap under */
@media (max-width: 640px) {
  .rz-think {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .rz-think-text { max-width: calc(100% - 50px); }
}

/* ============================================================
   Kill switch: old floating progress pill is now fully hidden.
   Keeps CSS rules for .rz-iprog-v2 around in case any legacy
   code path instantiates one; never renders visually.
   ============================================================ */


/* ============================================================
   Bug Report Panel — Professional Redesign (May 2026)
   Clean, minimal, focused. Overrides legacy styles.
   ============================================================ */

/* FAB: subtle, not alarming */
.bug-fab {
  background: var(--bg-card, #1e293b) !important;
  border: 1px solid color-mix(in srgb, var(--primary, #6366f1) 20%, transparent) !important;
  box-shadow:
    0 2px 8px rgba(15, 23, 41, 0.12),
    0 0 0 1px color-mix(in srgb, var(--primary, #6366f1) 8%, transparent) !important;
  color: var(--text-muted, #94a3b8) !important;
  border-radius: 12px !important;
  width: 44px !important;
  height: 44px !important;
}
.bug-fab:hover {
  color: var(--primary-light, #818cf8) !important;
  border-color: color-mix(in srgb, var(--primary, #6366f1) 35%, transparent) !important;
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.12),
    0 0 0 1px color-mix(in srgb, var(--primary, #6366f1) 15%, transparent) !important;
  transform: translateY(-1px) !important;
}
.bug-fab::before { display: none !important; }
.bug-fab.open {
  background: var(--bg-card, #1e293b) !important;
  transform: none !important;
  border-radius: 12px !important;
  opacity: 0.5;
}

/* Panel */
.bug-panel {
  width: 400px !important;
  border-radius: 16px 0 0 16px !important;
  border-left: none !important;
  box-shadow: -12px 0 48px rgba(15, 23, 41, 0.2), -2px 0 8px rgba(15, 23, 41, 0.08) !important;
  background: var(--bg, #0f172a) !important;
}

/* Header */
.bug-panel .bp-head {
  padding: 20px 24px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.bp-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bp-head-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary, #6366f1) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bp-head-icon .lucide {
  width: 18px;
  height: 18px;
  color: var(--primary-light, #818cf8);
}

.bp-head-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bp-head-text h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--text, #e2e8f0) !important;
  letter-spacing: -0.01em;
}

.bp-head-sub {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  font-weight: 400;
}

.bp-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.bp-close .lucide { width: 16px; height: 16px; }

/* Body */
.bug-panel .bp-body {
  padding: 20px 24px !important;
  gap: 20px !important;
}

/* Sections */
.bug-panel .bp-section {
  gap: 8px !important;
}

.bp-section-grow {
  flex: 1;
  min-height: 0;
}

/* Labels */
.bug-panel .bp-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #94a3b8) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.bp-optional {
  font-weight: 400;
  opacity: 0.6;
}

/* Context section */
.bp-ctx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bp-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-light, #818cf8);
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
}
.bp-tool-badge .lucide { width: 12px; height: 12px; }

.bug-panel .bp-context {
  background: color-mix(in srgb, var(--text, #e2e8f0) 3%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  max-height: 80px !important;
}

/* Pills — clean, no emoji */
.bug-panel .bp-pills {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.bug-panel .bp-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent) !important;
  background: color-mix(in srgb, var(--text, #e2e8f0) 3%, transparent) !important;
  color: var(--text-muted, #94a3b8) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 180ms cubic-bezier(.4, 0, .2, 1) !important;
  justify-content: center !important;
}
.bug-panel .bp-pill .lucide {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  flex-shrink: 0;
}
.bug-panel .bp-pill:hover {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 30%, transparent) !important;
  color: var(--text, #e2e8f0) !important;
  background: color-mix(in srgb, var(--primary, #6366f1) 6%, transparent) !important;
}
.bug-panel .bp-pill.on {
  background: color-mix(in srgb, var(--primary, #6366f1) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary, #6366f1) 30%, transparent) !important;
  color: var(--primary-light, #818cf8) !important;
}
.bug-panel .bp-pill.on .lucide {
  opacity: 1;
  color: var(--primary-light, #818cf8);
}

/* Textarea */
.bug-panel .bp-ta {
  background: color-mix(in srgb, var(--text, #e2e8f0) 3%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  min-height: 100px !important;
  resize: none !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}
.bug-panel .bp-ta:focus {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 40%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #6366f1) 8%, transparent) !important;
}

/* Drop zone */
.bp-drop-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--text, #e2e8f0) 12%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.bp-drop-zone:hover {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 30%, transparent);
  background: color-mix(in srgb, var(--primary, #6366f1) 3%, transparent);
}
.bp-drop-icon { width: 18px; height: 18px; color: var(--text-muted, #64748b); opacity: 0.6; }
.bp-drop-text { font-size: 12px; color: var(--text-muted, #64748b); }

/* Image preview */
.bp-img-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.bp-img-preview[hidden] { display: none; }
.bp-img-preview .bp-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
}
.bp-img-remove {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 12%, transparent);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.bp-img-remove .lucide { width: 12px; height: 12px; }
.bp-img-remove:hover { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }

/* Submit button */
.bug-panel .bp-submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--primary, #6366f1) !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  margin-top: 4px !important;
}
.bug-panel .bp-submit .lucide { width: 14px; height: 14px; }
.bug-panel .bp-submit:not(:disabled):hover {
  background: var(--primary-dark, #4f46e5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary, #6366f1) 25%, transparent) !important;
}
.bug-panel .bp-submit:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}


/* ============================================================
   Command Bar — Raycast/Linear style (May 2026)
   ⌘K universal search. Glassmorphism, smooth animations.
   ============================================================ */
.rzcmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(20vh, 160px);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 0s 150ms;
}

.rzcmd-overlay.rzcmd-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 150ms ease, visibility 0s;
}

.rzcmd-panel {
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: 480px;
  background: var(--bg-card, rgba(22, 32, 56, 0.98));
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(-8px);
  transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1), opacity 150ms ease;
  opacity: 0;
}

.rzcmd-overlay.rzcmd-open .rzcmd-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

[data-theme="light"] .rzcmd-panel {
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Input area */
.rzcmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent);
}

.rzcmd-search-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted, #64748b);
  flex-shrink: 0;
  opacity: 0.6;
}

.rzcmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: inherit;
  font-weight: 400;
  color: var(--text, #e2e8f0);
  caret-color: var(--primary, #6366f1);
}

.rzcmd-input::placeholder {
  color: var(--text-muted, #64748b);
  opacity: 0.7;
}

.rzcmd-kbd {
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  padding: 3px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent);
  color: var(--text-muted, #64748b);
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  flex-shrink: 0;
}

/* Results */
.rzcmd-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scroll-behavior: smooth;
}

.rzcmd-results::-webkit-scrollbar { width: 4px; }
.rzcmd-results::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text, #e2e8f0) 12%, transparent); border-radius: 2px; }

/* Group headers */
.rzcmd-group {
  padding: 8px 10px 4px;
}

.rzcmd-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted, #64748b);
  opacity: 0.7;
}

/* Items */
.rzcmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 100ms ease;
}

.rzcmd-item:hover,
.rzcmd-item.rzcmd-active {
  background: color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
}

.rzcmd-item.rzcmd-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #6366f1) 15%, transparent);
}

.rzcmd-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rzcmd-icon .lucide {
  width: 16px;
  height: 16px;
  color: var(--primary-light, #818cf8);
}

.rzcmd-active .rzcmd-icon {
  background: color-mix(in srgb, var(--primary, #6366f1) 15%, transparent);
}

.rzcmd-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rzcmd-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rzcmd-desc {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rzcmd-hint {
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  padding: 3px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text, #e2e8f0) 5%, transparent);
  color: var(--text-muted, #64748b);
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Empty state */
.rzcmd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--text-muted, #64748b);
  font-size: 13px;
}
.rzcmd-empty .lucide { width: 24px; height: 24px; opacity: 0.4; }

/* Footer */
.rzcmd-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent);
  font-size: 11px;
  color: var(--text-muted, #64748b);
}

.rzcmd-footer kbd {
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  padding: 2px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  margin-right: 3px;
}

/* Mobile */
@media (max-width: 640px) {
  .rzcmd-overlay { padding-top: 16px; }
  .rzcmd-panel { max-height: 70vh; border-radius: 14px; }
  .rzcmd-footer { display: none; }
}


/* ============================================================
   Live Rewrite Panel — Redesign (May 2026)
   Clean side panel with mode selector, diff highlighting.
   ============================================================ */
.lrw {
  position: fixed;
  top: 0;
  right: -440px;
  width: 420px;
  height: 100vh;
  background: var(--bg, #0f172a);
  border-left: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent);
  z-index: 9800;
  display: flex;
  flex-direction: column;
  transition: right 280ms cubic-bezier(.4, 0, .2, 1);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.15);
}
.lrw.lrw-open { right: 0; }

/* Header */
.lrw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent);
  flex-shrink: 0;
}
.lrw-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lrw-head-icon { width: 18px; height: 18px; color: var(--primary-light, #818cf8); }
.lrw-head-title { font-size: 15px; font-weight: 600; color: var(--text, #e2e8f0); }
.lrw-close {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 150ms ease;
}
.lrw-close .lucide { width: 14px; height: 14px; }
.lrw-close:hover { color: var(--text, #e2e8f0); border-color: color-mix(in srgb, var(--text, #e2e8f0) 20%, transparent); }

/* Mode selector */
.lrw-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent);
  flex-shrink: 0;
}
.lrw-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  transition: all 150ms ease;
}
.lrw-mode .lucide { width: 16px; height: 16px; }
.lrw-mode:hover {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 25%, transparent);
  color: var(--text, #e2e8f0);
  background: color-mix(in srgb, var(--primary, #6366f1) 4%, transparent);
}
.lrw-mode.lrw-mode-active {
  background: color-mix(in srgb, var(--primary, #6366f1) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary, #6366f1) 30%, transparent);
  color: var(--primary-light, #818cf8);
}
.lrw-mode.lrw-mode-active .lucide { color: var(--primary-light, #818cf8); }

/* Body */
.lrw-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 0;
  overflow-y: auto;
  min-height: 0;
}

.lrw-section { display: flex; flex-direction: column; gap: 6px; }
.lrw-input-section { flex-shrink: 0; }
.lrw-output-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.lrw-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lrw-textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  background: color-mix(in srgb, var(--text, #e2e8f0) 3%, transparent);
  color: var(--text, #e2e8f0);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: none;
  outline: none;
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.lrw-textarea:focus {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
}
.lrw-textarea::placeholder { color: var(--text-muted, #64748b); }

.lrw-char-count {
  font-size: 10px;
  color: var(--text-muted, #64748b);
  text-align: right;
  opacity: 0.6;
}

/* Divider */
.lrw-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  color: var(--text-muted, #64748b);
  opacity: 0.4;
}
.lrw-divider .lucide { width: 14px; height: 14px; }

/* Output */
.lrw-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lrw-output-actions {
  display: flex;
  gap: 4px;
}
.lrw-output-actions[hidden] { display: none; }

.lrw-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 12%, transparent);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  transition: all 150ms ease;
}
.lrw-action-btn .lucide { width: 12px; height: 12px; }
.lrw-action-btn:hover {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 30%, transparent);
  color: var(--primary-light, #818cf8);
}
.lrw-apply {
  background: color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary, #6366f1) 20%, transparent);
  color: var(--primary-light, #818cf8);
}
.lrw-apply:hover {
  background: color-mix(in srgb, var(--primary, #6366f1) 15%, transparent);
}

.lrw-output {
  flex: 1;
  min-height: 120px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent);
  background: color-mix(in srgb, var(--text, #e2e8f0) 2%, transparent);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text, #e2e8f0);
  overflow-y: auto;
  word-break: break-word;
  transition: border-color 200ms ease;
}
.lrw-output.lrw-has-result {
  border-color: color-mix(in srgb, var(--success, #22c55e) 20%, transparent);
}

.lrw-placeholder {
  color: var(--text-muted, #64748b);
  font-style: italic;
  opacity: 0.6;
}
.lrw-error {
  color: #ef4444;
  font-size: 12px;
}

/* Diff highlighting */
.lrw-diff {
  background: color-mix(in srgb, var(--primary, #6366f1) 15%, transparent);
  color: var(--primary-light, #818cf8);
  border-radius: 3px;
  padding: 1px 3px;
  font-weight: 500;
}

/* Loading */
.lrw-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.lrw-loading-bar {
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--primary, #6366f1) 15%, transparent);
  position: relative;
  overflow: hidden;
}
.lrw-loading-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--primary, #6366f1);
  border-radius: 2px;
  animation: lrw-slide 1.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes lrw-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* Topbar separator */
.topbar-sep {
  width: 1px;
  height: 20px;
  background: color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  margin: 0 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .lrw { width: 100%; right: -100%; }
  .lrw-modes { grid-template-columns: repeat(2, 1fr); }
}

/* Kill old panel styles */


/* ============================================================
   Plus Menu — Claude-style popover (May 2026)
   Clean, minimal, items with icon badge + title + description.
   ============================================================ */
.rz-plus-menu {
  width: 300px;
  background: var(--bg-card, rgba(22, 32, 56, 0.98));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  border-radius: 14px;
  padding: 6px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 0 0 1px color-mix(in srgb, var(--text, #e2e8f0) 4%, transparent);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 180ms cubic-bezier(.4, 0, .2, 1), transform 180ms cubic-bezier(.34, 1.56, .64, 1);
}

[data-theme="light"] .rz-plus-menu {
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

.rz-plus-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Items */
.rz-pm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 100ms ease;
}

.rz-pm-item:hover,
.rz-pm-item.rz-pm-focus {
  background: color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
}

/* Icon badge */
.rz-pm-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rz-pm-icon .lucide { width: 16px; height: 16px; color: var(--text-muted, #94a3b8); }

/* Color variants */
.rz-pm-icon-purple { background: color-mix(in srgb, #8b5cf6 12%, transparent); }
.rz-pm-icon-purple .lucide { color: #a78bfa; }
.rz-pm-icon-green { background: color-mix(in srgb, #22c55e 12%, transparent); }
.rz-pm-icon-green .lucide { color: #4ade80; }
.rz-pm-icon-amber { background: color-mix(in srgb, #f59e0b 12%, transparent); }
.rz-pm-icon-amber .lucide { color: #fbbf24; }
.rz-pm-icon-cyan { background: color-mix(in srgb, #06b6d4 12%, transparent); }
.rz-pm-icon-cyan .lucide { color: #22d3ee; }
.rz-pm-icon-pink { background: color-mix(in srgb, #ec4899 12%, transparent); }
.rz-pm-icon-pink .lucide { color: #f472b6; }
.rz-pm-icon-red { background: color-mix(in srgb, #ef4444 12%, transparent); }
.rz-pm-icon-red .lucide { color: #f87171; }
.rz-pm-section-label { font-size:0.65em;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);opacity:0.6;padding:4px 12px 2px; }

/* Text */
.rz-pm-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rz-pm-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rz-pm-desc {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Separator */
.rz-pm-sep {
  height: 1px;
  background: color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent);
  margin: 4px 12px;
}

/* Old styles override — kill legacy labels/dividers */
.rz-pm-label { display: none !important; }
.rz-pm-divider { display: none !important; }

/* Mobile */
@media (max-width: 640px) {
  .rz-plus-menu {
    width: calc(100vw - 24px);
    left: 12px !important;
  }
}


/* ============================================================
   File Attachment Chips — Claude-style (May 2026)
   Compact chips inside the input area, integrated look.
   ============================================================ */
#imagePreview {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.rz-attach-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 16px 4px;
  max-width: 700px;
  margin: 0 auto;
}

.rz-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  background: color-mix(in srgb, var(--text, #e2e8f0) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  border-radius: 10px;
  max-width: 280px;
  transition: border-color 150ms ease, background 150ms ease;
  animation: rz-attach-in 200ms cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes rz-attach-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.rz-attach-chip:hover {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 25%, transparent);
  background: color-mix(in srgb, var(--primary, #6366f1) 4%, transparent);
}

.rz-attach-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary, #6366f1) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rz-attach-icon .lucide {
  width: 14px;
  height: 14px;
  color: var(--primary-light, #818cf8);
}

.rz-attach-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 160px;
}

.rz-attach-ext {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted, #64748b);
  padding: 2px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent);
  flex-shrink: 0;
}

.rz-attach-remove {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}
.rz-attach-remove:hover {
  opacity: 1;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* Image thumbnail chip */
.rz-attach-img-chip .rz-attach-thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 640px) {
  .rz-attach-list { padding: 8px 12px 4px; }
  .rz-attach-chip { max-width: 100%; }
}


/* ============================================================
   Attachment Chips — Inside Composer (Claude-style, May 2026)
   File chips live INSIDE .input-wrapper, above the textarea row.
   ============================================================ */

/* input-wrapper becomes a column ONLY in the main chat input area (not welcome) */
.input-area .input-wrapper {
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Welcome input stays horizontal */
.welcome-input-area .input-wrapper {
  flex-direction: row !important;
  align-items: center !important;
}

/* The actual input row (plus btn + textarea + send) */
.input-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

/* imagePreview inside wrapper */
#imagePreview.csp-image-preview {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#imagePreview.csp-image-preview:empty,
#imagePreview.csp-image-preview[style*="display: none"] {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Chip list inside the composer */
.rz-attach-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px 8px 12px;
  max-width: 100%;
  margin: 0;
}

/* Individual chip */
.rz-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 6px;
  background: color-mix(in srgb, var(--primary, #6366f1) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #6366f1) 12%, transparent);
  border-radius: 8px;
  max-width: 260px;
  transition: border-color 120ms ease, background 120ms ease;
  animation: rz-attach-in 200ms cubic-bezier(.34, 1.56, .64, 1);
}

.rz-attach-chip:hover {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 30%, transparent);
  background: color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
}

/* Icon */
.rz-attach-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary, #6366f1) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rz-attach-icon .lucide {
  width: 13px;
  height: 13px;
  color: var(--primary-light, #818cf8);
}

/* Name */
.rz-attach-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 140px;
}

/* Extension badge */
.rz-attach-ext {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--primary-light, #818cf8);
  padding: 1px 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
  flex-shrink: 0;
  opacity: 0.8;
}

/* Remove button */
.rz-attach-remove {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.rz-attach-chip:hover .rz-attach-remove { opacity: 1; }
.rz-attach-remove .lucide { width: 12px; height: 12px; }
.rz-attach-remove:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Image thumbnail */
.rz-attach-img-chip .rz-attach-thumb {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Light theme */
[data-theme="light"] .rz-attach-chip {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.12);
}
[data-theme="light"] .rz-attach-chip:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
}


/* ============================================================
   Sidebar — Ultra-modern redesign (May 2026)
   Claude/Linear inspired. Clean, spacious, animated.
   ============================================================ */

/* Override old sidebar styles */
.sidebar {
  background: color-mix(in srgb, var(--bg, #0f172a) 97%, var(--primary, #6366f1) 3%) !important;
  border-right: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 5%, transparent) !important;
  display: flex !important;
  flex-direction: column !important;
}

[data-theme="light"] .sidebar {
  background: rgba(249, 250, 252, 0.98) !important;
  border-right-color: rgba(0, 0, 0, 0.06) !important;
}

/* Header */
.sidebar-header {
  padding: 16px 16px 12px !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

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

.sb-new-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 150ms ease;
}
.sb-new-btn .lucide { width: 16px; height: 16px; }
.sb-new-btn:hover {
  background: color-mix(in srgb, var(--primary, #6366f1) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary, #6366f1) 25%, transparent);
  color: var(--primary-light, #818cf8);
}

/* Nav tabs */
.sb-nav {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
}

.sb-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 150ms ease;
  flex: 1;
  justify-content: center;
}
.sb-nav-item .lucide { width: 14px; height: 14px; }
.sb-nav-item:hover {
  background: color-mix(in srgb, var(--text, #e2e8f0) 5%, transparent);
  color: var(--text, #e2e8f0);
}
.sb-nav-item.active {
  background: color-mix(in srgb, var(--primary, #6366f1) 10%, transparent);
  color: var(--primary-light, #818cf8);
}

/* Search */
.sb-search-wrap {
  position: relative;
  padding: 0 12px 8px;
}
.sb-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-calc(50% + 4px));
  width: 14px;
  height: 14px;
  color: var(--text-muted, #64748b);
  opacity: 0.5;
  pointer-events: none;
}
.sb-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent);
  background: color-mix(in srgb, var(--text, #e2e8f0) 3%, transparent);
  color: var(--text, #e2e8f0);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms ease, background 150ms ease;
  box-sizing: border-box;
}
.sb-search-input::placeholder { color: var(--text-muted, #64748b); opacity: 0.6; }
.sb-search-input:focus {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 35%, transparent);
  background: color-mix(in srgb, var(--primary, #6366f1) 3%, transparent);
}

/* Chat list */
.sb-chat-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 8px !important;
}

.sb-chat-list::-webkit-scrollbar { width: 3px; }
.sb-chat-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text, #e2e8f0) 10%, transparent);
  border-radius: 2px;
}

/* Empty state */
.sb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--text-muted, #64748b);
  font-size: 12px;
  text-align: center;
  opacity: 0.6;
}
.sb-empty-state .lucide { width: 24px; height: 24px; opacity: 0.4; }

/* Chat history items (override old styles) */
.sidebar .history-item,
.sidebar [class*="h-"] {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin: 1px 0 !important;
  transition: background 100ms ease !important;
}
.sidebar .history-item:hover {
  background: color-mix(in srgb, var(--text, #e2e8f0) 5%, transparent) !important;
}
.sidebar .history-item.active {
  background: color-mix(in srgb, var(--primary, #6366f1) 10%, transparent) !important;
}

/* Group labels (Today, Yesterday, etc.) */
.ch-group-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-muted, #64748b) !important;
  padding: 12px 12px 4px !important;
  opacity: 0.7 !important;
}

/* Footer */
.sidebar-footer.csp-sidebar-footer {
  padding: 12px 14px !important;
  border-top: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sb-user-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success, #22c55e);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success, #22c55e) 20%, transparent);
}

.sb-user-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #e2e8f0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-footer-btn,
.csp-admin-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent) !important;
  background: transparent !important;
  color: var(--text-muted, #94a3b8) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 150ms ease !important;
}
.sb-footer-btn .lucide,
.csp-admin-btn .lucide { width: 14px !important; height: 14px !important; }
.sb-footer-btn:hover,
.csp-admin-btn:hover {
  background: color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent) !important;
  color: var(--text, #e2e8f0) !important;
}

/* Hide old elements */


.csp-user-badge-hidden { display: flex !important; }


/* ============================================================
   Dashboard Copilot — REMOVED (May 2026 cleanup)
   Styles kept as placeholder; copilot.js no longer loaded.
   ============================================================ */

/* Adjust dashboard grid (no-op without copilot) */
#renzoDashboardEditor {
  transition: right 250ms ease;
  right: 0;
}

/* Mobile */
@media (max-width: 768px) {
  #renzoDashboardEditor { padding-right: 0; padding-bottom: 50vh; }
}


/* ============================================================
   Welcome Cards — Quick start suggestions (May 2026 refactor)
   ============================================================ */
.welcome-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  max-width: 460px !important;
  margin: 28px auto 0 !important;
  padding: 0 20px !important;
}

.welcome-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 8%, transparent) !important;
  background: color-mix(in srgb, var(--text, #e2e8f0) 3%, transparent) !important;
  color: var(--text, #e2e8f0) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  text-align: left !important;
}

.wc-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary, #6366f1) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wc-icon .lucide { width: 16px; height: 16px; color: var(--primary-light, #818cf8); }
.wc-icon.wc-green { background: color-mix(in srgb, #22c55e 10%, transparent); }
.wc-icon.wc-green .lucide { color: #4ade80; }
.wc-icon.wc-amber { background: color-mix(in srgb, #f59e0b 10%, transparent); }
.wc-icon.wc-amber .lucide { color: #fbbf24; }
.wc-icon.wc-cyan { background: color-mix(in srgb, #06b6d4 10%, transparent); }
.wc-icon.wc-cyan .lucide { color: #22d3ee; }

.wc-text { font-size: 13px; font-weight: 500; }

.welcome-card:hover {
  border-color: color-mix(in srgb, var(--primary, #6366f1) 25%, transparent) !important;
  background: color-mix(in srgb, var(--primary, #6366f1) 6%, transparent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary, #6366f1) 10%, transparent) !important;
}

[data-theme="light"] .welcome-card {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  color: #1e293b !important;
}

[data-theme="light"] .welcome-card:hover {
  border-color: rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1) !important;
}

@media (max-width: 480px) {
  .welcome-cards { grid-template-columns: 1fr !important; max-width: 100% !important; }
}

/* Input always visible (no more hidden-for-welcome) — proven rule from working 5.x */
.input-area { opacity: 1 !important; pointer-events: auto !important; height: auto !important; padding: 12px 16px 16px !important; overflow: visible !important; flex-shrink: 0 !important; }


/* ============================================================
   Follow-up Suggestions — Modern chips (May 2026 refactor)
   ============================================================ */
.rz-next {
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--text, #e2e8f0) 6%, transparent) !important;
}
.rz-next-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #64748b) !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.rz-next-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.suggest-btn {
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--primary, #6366f1) 15%, transparent) !important;
  background: color-mix(in srgb, var(--primary, #6366f1) 4%, transparent) !important;
  color: var(--primary-light, #818cf8) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: auto !important;
}
.suggest-btn:hover {
  background: color-mix(in srgb, var(--primary, #6366f1) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--primary, #6366f1) 30%, transparent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #6366f1) 10%, transparent) !important;
}
.suggest-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

[data-theme="light"] .suggest-btn {
  background: rgba(99, 102, 241, 0.04) !important;
  border-color: rgba(99, 102, 241, 0.15) !important;
  color: #4f46e5 !important;
}
[data-theme="light"] .suggest-btn:hover {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
}

/* === BOT RESPONSE OPTIMIZATION — Compact Lists & Better Readability === */

/* Tighter list spacing — reduce gap between bullet items */
.msg.bot .msg-body ul,
.msg.bot .msg-body ol {
    padding-left: 18px !important;
    margin: 8px 0 !important;
}

.msg.bot .msg-body li {
    margin: 2px 0 !important;
    padding-left: 4px !important;
    line-height: 1.6 !important;
}

/* Nested content inside li: no extra margin */
.msg.bot .msg-body li p {
    margin: 0 !important;
    display: inline !important;
}

/* Remove excessive br spacing inside list items */
.msg.bot .msg-body li br {
    display: none !important;
}

/* Bold items in lists: keep inline, no block break */
.msg.bot .msg-body li strong {
    color: var(--text) !important;
    font-weight: 600 !important;
}

/* First paragraph: tighter top margin */
.msg.bot .msg-body > p:first-child {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

/* Paragraphs: reduce vertical gap */
.msg.bot .msg-body p {
    margin: 5px 0 !important;
}

/* Sources section: cleaner, more integrated */
.msg.bot .msg-body .rz-kb-hint,
.msg.bot .msg-body [class*="source"] {
    margin-top: 12px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(148,163,184,0.1) !important;
    font-size: 0.75em !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.03em !important;
}

/* Overall message: slightly tighter line-height for density */




/* Light theme: same compactness */
[data-theme="light"] .msg.bot .msg-body li strong {
    color: #1e293b !important;
}

/* ═══ Template Dashboard Styles ═══ */
.rz-tpl-dash { margin: 8px 0; }
.rz-tpl-header { display: flex; align-items: center; gap: 8px; font-size: 0.9em; margin-bottom: 12px; color: var(--text); }
.rz-tpl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.rz-tpl-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; }
.rz-tpl-kpi-val { font-size: 1.3em; font-weight: 700; color: var(--text); }
.rz-tpl-kpi-label { font-size: 0.7em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.rz-tpl-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rz-tpl-chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.rz-tpl-chart-title { font-size: 0.75em; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.rz-tpl-insights { margin-top: 10px; }
.rz-tpl-insights-title { font-size: 0.78em; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.rz-tpl-insight-btn { font-size: 0.8em !important; }

/* ═══ Multi-image badge & table hint ═══ */
.rz-attach-badge { font-size: 0.75em; padding: 4px 10px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); border-radius: 6px; color: var(--primary-light); font-weight: 600; margin-bottom: 6px; }
.rz-attach-hint { font-size: 0.72em; padding: 4px 10px; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); border-radius: 6px; color: #22c55e; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

/* ═══ Dashboard Reproduce Styles ═══ */
.rz-reproduce-banner { background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); border-radius: 10px; padding: 12px 16px; margin: 8px 0; }
.rz-reproduce-banner-inner { display: flex; align-items: center; gap: 10px; font-size: 0.85em; color: var(--text); flex-wrap: wrap; }
.rz-reproduce-btn-yes { padding: 6px 14px; background: var(--primary); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 0.82em; font-weight: 600; }
.rz-reproduce-btn-no { padding: 6px 14px; background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; cursor: pointer; font-size: 0.82em; }
.rz-reproduce-container { margin: 12px 0; }
.rz-reproduce-header { display: flex; align-items: center; gap: 8px; font-size: 0.9em; color: var(--text); margin-bottom: 12px; flex-wrap: wrap; }
.rz-reproduce-summary { font-size: 0.82em; color: var(--text-muted); margin-top: 4px; }
.rz-reproduce-warnings { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.15); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.8em; color: #f59e0b; }
.rz-reproduce-warnings ul { margin: 4px 0 0 16px; padding: 0; }
.rz-reproduce-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.rz-reproduce-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.rz-reproduce-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 0.78em; font-weight: 600; color: var(--text-muted); }
.rz-reproduce-edit { font-size: 0.72em; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border); background: none; color: var(--primary-light); cursor: pointer; display: flex; align-items: center; gap: 4px; }
.rz-reproduce-loading { text-align: center; padding: 24px; }
.rz-reproduce-status { font-size: 0.82em; color: var(--text-muted); margin-top: 8px; }

/* ═══ Welcome Action Zone ═══ */
.rz-welcome-actions{max-width:600px;margin:24px auto 0;padding:0 16px}
.rz-drop-hero{position:relative;border:2px dashed rgba(99,102,241,0.3);border-radius:16px;padding:32px 24px;text-align:center;cursor:pointer;transition:all 0.2s;background:rgba(99,102,241,0.03);margin-bottom:20px}
.rz-drop-hero:hover,.rz-drop-hero.dragover{border-color:#6366f1;background:rgba(99,102,241,0.08);transform:translateY(-2px)}
.rz-drop-icon{width:36px;height:36px;color:var(--primary-light,#818cf8);margin-bottom:8px}
.rz-drop-text{font-size:0.95em;font-weight:700;color:var(--text,#e2e8f0);margin-bottom:4px}
.rz-drop-sub{font-size:0.78em;color:var(--text-muted,#64748b)}
.rz-drop-input{position:absolute;inset:0;opacity:0;cursor:pointer}
.rz-action-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media(max-width:640px){.rz-action-cards{grid-template-columns:repeat(2,1fr)}}
.rz-action-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:12px;border:1px solid var(--border,rgba(148,163,184,0.1));background:rgba(148,163,184,0.02);cursor:pointer;transition:all 0.15s;font-family:inherit;color:var(--text,#e2e8f0);font-size:0.78em;font-weight:600}
.rz-action-card:hover{background:rgba(99,102,241,0.08);border-color:rgba(99,102,241,0.3);transform:translateY(-2px)}
.rz-action-card .lucide{width:20px;height:20px;color:var(--primary-light,#818cf8)}
.rz-topic-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.rz-topic-chip{padding:6px 14px;border-radius:20px;border:1px solid var(--border,rgba(148,163,184,0.1));background:none;color:var(--text-muted,#94a3b8);font-size:0.75em;cursor:pointer;font-family:inherit;transition:all 0.15s}
.rz-topic-chip:hover{background:rgba(99,102,241,0.08);color:var(--primary-light);border-color:rgba(99,102,241,0.2)}


/* ============================================================
   WELCOME INTENT GROUPS — Card layout for homepage suggestions
   ============================================================ */
.rz-welcome-intents {
    width: 100%;
    max-width: 600px;
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rz-intent-group {
    text-align: left;
}

.rz-intent-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
}

.rz-intent-title .lucide {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.rz-intent-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.rz-intent-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.15s ease;
    color: var(--text);
}

.rz-intent-item:hover {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.04);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

.rz-intent-item:active {
    transform: translateY(0) scale(0.98);
}

.rz-intent-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: block;
}

.rz-intent-desc {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    line-height: 1.4;
}

/* Light theme */
[data-theme="light"] .rz-intent-item {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .rz-intent-item:hover {
    background: #fff;
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}

/* Mobile */
@media (max-width: 640px) {
    .rz-intent-items {
        grid-template-columns: 1fr;
    }
}

/* Recent activity section */
.rz-welcome-recent-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.rz-welcome-recent-title .lucide {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* === Premium Sidebar Polish === */
.sidebar { box-shadow: inset 0 8px 6px -6px rgba(0,0,0,0.35); }
.sb-search-input { box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); transition: border-color .2s, box-shadow .2s, background .2s; }
.sb-search-input:focus { box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 0 3px rgba(99,102,241,0.15); }
.sb-search-input:focus ~ .sb-search-icon { color: #818cf8; opacity: 1; }
.history-item { position: relative; border-left: 3px solid transparent; transition: background .18s, border-color .18s, transform .18s; }
.history-item:hover { background: rgba(99,102,241,0.06); border-left-color: #6366f1; }
.history-item.active { background: rgba(99,102,241,0.1); border-left-color: #818cf8; transform: scale(1.015); }
.sb-user { position: relative; }
.sb-user::after { content:''; position:absolute; bottom:2px; right:2px; width:8px; height:8px; background:#22c55e; border-radius:50%; border:2px solid var(--bg-sidebar,#0f172a); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,0.5) } 50%{ box-shadow:0 0 0 4px rgba(34,197,94,0) } }
[data-theme="light"] .sidebar { box-shadow: inset 0 8px 6px -6px rgba(0,0,0,0.08); }
[data-theme="light"] .sb-search-input { box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); }
[data-theme="light"] .sb-search-input:focus { box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 0 0 3px rgba(99,102,241,0.1); }
[data-theme="light"] .history-item:hover { background: rgba(99,102,241,0.05); }
[data-theme="light"] .history-item.active { background: rgba(99,102,241,0.08); }
[data-theme="light"] .sb-user::after { border-color: var(--bg-sidebar,#ffffff); }

/* === MOBILE RESPONSIVE FIX === */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
    .sidebar.collapsed { transform: translateX(-100%); opacity: 1; }
    .sidebar:not(.collapsed) { transform: translateX(0); }
    .input-area { padding: 0 12px 12px; }
    .input-wrapper { max-width: 100%; margin: 0; }
    .msg-body { max-width: 100%; overflow-x: auto; }
    .chat-area > .msg { max-width: 100%; padding-left: 12px; padding-right: 12px; }
    .topbar-actions .topbar-btn:not(:last-child) { display: none; }
    .topbar-actions .topbar-export-wrap { display: none; }
    .topbar { padding: 8px 12px; }
    .mobile-menu-btn { display: flex; }
}
@media (max-width: 400px) {
    .welcome-grid { flex-direction: column; align-items: stretch; }
    .welcome-grid .wcard { width: 100%; justify-content: center; }
}

/* Topbar button premium states – tooltip, active toggle, export dropdown */
.topbar-btn[title]::after { content:attr(title);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(0.9);background:var(--bg-card,#1e1e2e);color:var(--text,#e2e8f0);font-size:0.7em;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .15s ease;border:1px solid var(--border,#333);z-index:200 }
.topbar-btn[title]:hover::after { opacity:1;transform:translateX(-50%) scale(1) }
.topbar-btn.active { color:var(--primary,#6366f1) }
.topbar-btn.active::before { content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#6366f1;box-shadow:0 0 6px rgba(99,102,241,0.5) }
.topbar-export-menu { max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .15s }
.topbar-export-menu.show { max-height:300px }
[data-theme="light"] .topbar-btn:hover { background:rgba(99,102,241,0.1) }
[data-theme="light"] .topbar-btn[title]::after { background:#fff;color:#1e293b;border-color:#e2e8f0 }


/* ============================================================
   DASHBOARD HUB — Redesigned (25 May 2026)
   Clean, horizontal cards, theme-aware, no inline styles.
   ============================================================ */
.dh-hub {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    overflow-y: auto;
    padding: 48px 40px;
}

.dh-inner {
    max-width: 1040px;
    margin: 0 auto;
}

.dh-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.dh-h1 {
    font-size: 28px;
    font-weight: 750;
    color: var(--text);
    letter-spacing: -0.03em;
    margin: 0;
    line-height: 1.1;
}

.dh-sub {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 6px 0 0;
}

.dh-back {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s;
}
.dh-back:hover {
    color: var(--text);
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.04);
}

/* Card Grid — monday.com style: responsive auto-fill, generous gap */
.dh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

/* KPI Tile — Tableau-inspired: flat, data-dense, metric-first */
.dh-card {
    --dh-accent: #4e79a7;
    --dh-surface: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 200px;
    background: var(--dh-surface);
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--dh-accent);
    border-radius: 4px;
    text-decoration: none;
    color: #1f2937;
    overflow: hidden;
    transition: background 0.15s ease, border-color 0.15s ease;
}
[data-theme="dark"] .dh-card { --dh-surface: #1c2333; border-color: #2d3748; color: #e2e8f0; }
[data-theme="light"] .dh-card { --dh-surface: #ffffff; }
/* No top strip — left border accent only */
.dh-card::before { display: none; }
.dh-card:hover {
    background: color-mix(in srgb, var(--dh-accent) 4%, var(--dh-surface));
    border-left-width: 4px;
}
.dh-card:hover::before { display: none; }
[data-theme="light"] .dh-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Per-card accent colors (Tableau palette) */
.dh-card.dh-acc-indigo  { --dh-accent: #4e79a7; }
.dh-card.dh-acc-amber   { --dh-accent: #e15759; }
.dh-card.dh-acc-cyan    { --dh-accent: #59a14f; }
.dh-card.dh-acc-green   { --dh-accent: #76b7b2; }
.dh-card.dh-acc-purple  { --dh-accent: #b07aa1; }
.dh-card.dh-acc-pink    { --dh-accent: #ff9da7; }

/* Card header: badge + title + live dot */
.dh-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px 0;
}
.dh-card-badge {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--dh-accent) 16%, transparent);
    color: var(--dh-accent);
}
.dh-card-badge .lucide { width: 19px; height: 19px; }
.dh-badge-indigo, .dh-badge-amber, .dh-badge-cyan, .dh-badge-purple {
    background: color-mix(in srgb, var(--dh-accent) 16%, transparent);
    color: var(--dh-accent);
}
.dh-card-head h3 {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0;
    letter-spacing: 0;
    flex: 1;
    min-width: 0;
}
[data-theme="dark"] .dh-card-head h3 { color: #e2e8f0; }
.dh-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #00c875;
    flex-shrink: 0;
}
.dh-live::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #00c875;
    box-shadow: 0 0 0 0 rgba(0,200,117,0.5);
    animation: dhPulse 2s infinite;
}
@keyframes dhPulse {
    0% { box-shadow: 0 0 0 0 rgba(0,200,117,0.45); }
    70% { box-shadow: 0 0 0 6px rgba(0,200,117,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,200,117,0); }
}

/* Body / description — fixed min-height keeps stats/sparkline aligned across cards */
.dh-card-body { padding: 12px 22px 0; }
.dh-card-body p {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hero stats — Tableau: big numbers, tiny labels */
.dh-stats {
    display: flex;
    gap: 28px;
    padding: 14px 20px 0;
    margin-top: auto;
}
.dh-stat { display: flex; flex-direction: column; gap: 1px; }
.dh-stat-num {
    font-size: 26px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .dh-stat-num { color: #f1f5f9; }
.dh-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Mini sparkline (pure CSS bars) */
.dh-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 28px;
    padding: 12px 20px 0;
}
.dh-spark i {
    flex: 1;
    border-radius: 1px 1px 0 0;
    background: color-mix(in srgb, var(--dh-accent) 45%, transparent);
    transition: opacity 0.2s ease;
}
.dh-card:hover .dh-spark i {
    opacity: 0.85;
}

/* Footer: Tableau style — clean text link */
.dh-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 14px;
    margin-top: auto;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    font-weight: 500;
    color: var(--dh-accent);
    letter-spacing: 0.01em;
}
[data-theme="dark"] .dh-card-foot { border-top-color: #2d3748; }
.dh-card:hover .dh-card-foot {
    color: #1f2937;
}
[data-theme="dark"] .dh-card:hover .dh-card-foot { color: #fff; }
.dh-card-foot .lucide {
    width: 14px; height: 14px;
    transition: transform 0.15s ease;
}
.dh-card:hover .dh-card-foot .lucide { transform: translateX(3px); }

/* Legacy meta pills (kept for safety, not used in new markup) */
.dh-card-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px; font-size: 11px; font-weight: 600; }
.dh-card-meta span {
    display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px;
    background: color-mix(in srgb, var(--dh-accent) 12%, transparent); color: var(--dh-accent);
}

/* Finder — integrated search bar */
.dh-finder {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-top: 28px;
}

.dh-finder-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dh-finder-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.dh-finder-icon .lucide { width: 16px; height: 16px; }

.dh-finder-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.dh-finder-input:focus { border-color: var(--primary); }
.dh-finder-input::placeholder { color: var(--text-muted); }

.dh-finder-btn {
    padding: 10px 18px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.15s;
}
.dh-finder-btn:hover { background: var(--primary-dark); }

.dh-finder-msgs {
    max-height: 200px;
    overflow-y: auto;
}
.dh-finder-msgs:empty { display: none; }

.dh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.dash-finder-chip {
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.dash-finder-chip:hover {
    border-color: var(--primary);
    color: var(--primary-light);
    background: rgba(99, 102, 241, 0.04);
}

/* Light theme */
[data-theme="light"] .dh-finder {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Mobile */
@media (max-width: 768px) {
    .dh-hub { padding: 24px 16px; }
    .dh-grid { grid-template-columns: 1fr; }
    .dh-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* Feedback/Request bar */
.dh-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    background: rgba(99, 102, 241, 0.02);
    font-size: 13px;
    color: var(--text-muted);
}
.dh-feedback .lucide { width: 16px; height: 16px; opacity: 0.5; flex-shrink: 0; }
.dh-feedback-link {
    margin-left: auto;
    color: var(--primary-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.dh-feedback-link:hover { opacity: 0.8; }


/* Excel Format Animation */
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Fix: Dashboard grid - 4 columns on wide screens, 2 on medium, 1 on mobile */
@media (min-width: 1200px) { .dh-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1199px) { .dh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .dh-grid { grid-template-columns: 1fr; } }

/* Fix: Orb mobile scaling */
@media (max-width: 640px) {
    .rz-orb-wrap, .rz-orb { width: 88px; height: 88px; }
    .rz-orb-letter { font-size: 26px; }
    .rz-orb-glow { inset: -12px; }
}

/* Fix: Stat label dark mode contrast */
[data-theme="dark"] .dh-stat-label { color: #94a3b8; }

/* === Settings panel: match dashboard gradient style === */
.st-nav-head {
    background: linear-gradient(135deg, #4338CA, #7C3AED, #EC4899) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}
.st-content h3 {
    background: linear-gradient(135deg, #4338CA, #7C3AED) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
}
[data-theme="light"] .st-group-title {
    background: linear-gradient(135deg, #6366F1, #7C3AED) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ═══════════════════════════════════════════════════════
   RENZO BRAND PASS — Gradient violet→rosa identity
   Applied to key touchpoints across the entire app
   ═══════════════════════════════════════════════════════ */

/* Send button — gradient instead of flat */
[data-theme="light"] #sendBtn,
[data-theme="light"] .send-btn {
    background: linear-gradient(135deg, #6366F1, #7C3AED, #EC4899) !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(124,58,237,0.25) !important;
}
[data-theme="light"] #sendBtn:hover,
[data-theme="light"] .send-btn:hover {
    box-shadow: 0 4px 20px rgba(124,58,237,0.35) !important;
    transform: scale(1.03);
}

/* Topbar title — subtle gradient on hover */
[data-theme="light"] #topbarTitle:hover {
    background: linear-gradient(135deg, #4338CA, #7C3AED, #EC4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Suggestion chips — gradient border on hover */
[data-theme="light"] .suggest-btn:hover {
    border-color: #C4B5E3 !important;
    color: #5B21B6 !important;
    background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(236,72,153,0.04)) !important;
}

/* Active sidebar button — gradient indicator */
[data-theme="light"] .sb-btn.active::before,
[data-theme="light"] .sb-item.active::before {
    background: linear-gradient(to bottom, #6366F1, #EC4899) !important;
}

/* Welcome greeting name — gradient */
.welcome-name, .rz-greet-name {
    background: linear-gradient(135deg, #6366F1, #7C3AED, #EC4899) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Rating stars hover — gradient fill */
[data-theme="light"] .star-btn:hover svg,
[data-theme="light"] .star-btn.active svg {
    fill: url(#rz-star-grad) !important;
    stroke: #7C3AED !important;
}

/* Scrollbar thumb — gradient */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #C4B5E3, #E9D5F5) !important;
    border-radius: 4px !important;
}

/* Input focus ring — violet glow */
[data-theme="light"] #userInput:focus {
    box-shadow: 0 0 0 2px rgba(124,58,237,0.12), 0 2px 8px rgba(124,58,237,0.06) !important;
    border-color: #C4B5E3 !important;
}

/* File upload chip badge — gradient bg */
[data-theme="light"] .rz-file-chip,
[data-theme="light"] .image-preview-item {
    border-color: #E2E0EC !important;
    background: linear-gradient(135deg, #FAFAFE, #F5F3FF) !important;
}

/* Bot avatar — gradient ring */
[data-theme="light"] .rz-av {
    background: linear-gradient(135deg, #6366F1, #7C3AED, #EC4899) !important;
    color: #fff !important;
}

/* Links in bot responses — violet */
[data-theme="light"] .msg.bot .msg-body a {
    color: #7C3AED !important;
}
[data-theme="light"] .msg.bot .msg-body a:hover {
    color: #5B21B6 !important;
}

/* Command palette active item */
[data-theme="light"] .cp-item.active,
[data-theme="light"] .cp-item:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.04)) !important;
    border-color: #E2E0EC !important;
}

/* Toast notifications — gradient top border */
[data-theme="light"] .toast-item::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #6366F1, #EC4899);
    border-radius: 8px 8px 0 0;
}

/* Thinking orb — keep the existing gradient (it's already good) */

/* Dark mode: same gradient but lighter tints */
.rz-av {
    background: linear-gradient(135deg, #6366F1, #7C3AED, #EC4899) !important;
    color: #fff !important;
}

/* ═══ SIDEBAR BRAND TOUCHES ═══ */

/* "Renzo" text next to logo */
[data-theme="light"] .sb-title,
[data-theme="light"] .sidebar-title {
    background: linear-gradient(135deg, #4338CA, #7C3AED) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
}

/* "TODAY" / date labels */
[data-theme="light"] .ch-group-label,
[data-theme="light"] .sb-date-label {
    color: #8B7FA8 !important;
}

/* New chat "+" button */
[data-theme="light"] .sb-new-btn,
[data-theme="light"] .new-chat-btn {
    border-color: #E2E0EC !important;
}
[data-theme="light"] .sb-new-btn:hover,
[data-theme="light"] .new-chat-btn:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.04)) !important;
    border-color: #C4B5E3 !important;
}

/* Search input */
[data-theme="light"] .sb-search,
[data-theme="light"] .sidebar-search input {
    border-color: #E2E0EC !important;
    background: #F8F7FC !important;
}
[data-theme="light"] .sb-search:focus,
[data-theme="light"] .sidebar-search input:focus {
    border-color: #C4B5E3 !important;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.08) !important;
}

/* Conversation item hover */
[data-theme="light"] .ch-item:hover,
[data-theme="light"] .sb-conv-item:hover {
    background: #F5F3FF !important;
}
[data-theme="light"] .ch-item.active,
[data-theme="light"] .sb-conv-item.active {
    background: #EDE9FE !important;
    border-left: 2px solid #7C3AED !important;
}

/* Footer: user avatar letter */
[data-theme="light"] .sb-footer .sb-user-av,
[data-theme="light"] .sidebar-footer .user-avatar {
    background: linear-gradient(135deg, #6366F1, #EC4899) !important;
    color: #fff !important;
}

/* Settings gear button */
[data-theme="light"] .sb-footer-btn:hover,
[data-theme="light"] #settingsBtn:hover {
    background: #F5F3FF !important;
    color: #7C3AED !important;
}

/* Online status dot */
[data-theme="light"] .sb-status-dot,
[data-theme="light"] .online-dot {
    background: #10B981 !important;
    box-shadow: 0 0 0 2px #ECFDF5 !important;
}


/* === Sidebar history items — compact, Claude-like proportions (final override) === */
/* Consolidates the many conflicting .history-item rules above into one calm, proportionate look. */
#chatHistoryList .history-item {
    padding: 8px 10px !important;
    min-height: 0 !important;
    margin: 2px 6px !important;
    gap: 9px !important;
    align-items: flex-start !important;          /* icon aligns to the title, not floating mid-card */
    border-left: 2px solid transparent !important;
    border-radius: 8px !important;
}
#chatHistoryList .history-item.active {
    transform: none !important;                  /* no zoom pop — keep it stable */
    box-shadow: none !important;                 /* drop the heavy inset glow */
    border-left-color: var(--primary) !important;/* subtle accent only */
    font-weight: 500 !important;
}
#chatHistoryList .history-item .h-icon { margin-top: 2px !important; }
#chatHistoryList .history-item .h-icon .lucide { width: 13px !important; height: 13px !important; opacity: 0.45 !important; }
#chatHistoryList .history-item .h-text-wrap { gap: 2px !important; }
#chatHistoryList .history-item .h-text-wrap .h-text { font-size: 13px !important; font-weight: 500 !important; }
#chatHistoryList .history-item .h-preview { font-size: 11px !important; opacity: 0.6 !important; }


/* ============================================================
   DASHBOARD HUB — Institutional / "JP Morgan" restyle (final override)
   Removes the fake data preview, sober metric-first look, palette kept.
   ============================================================ */

/* 1. Kill the decorative sparkline (markup removed too; this is a fallback) */
#dashHub .dh-spark { display: none !important; }

/* 2. Header: solid, authoritative — no purple/pink gradient on the title */
#dashHub .dh-h1 {
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    font-size: 26px !important;
}
#dashHub .dh-sub {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    opacity: 0.85 !important;
}
#dashHub .dh-head { border-bottom: 1px solid var(--border) !important; }

/* 3. Cards: crisp borders, small radius, restrained accent, minimal shadow */
#dashHub .dh-card {
    border-radius: 6px !important;
    border: 1px solid color-mix(in srgb, var(--dh-accent) 14%, var(--border)) !important;
    border-left: 3px solid var(--dh-accent) !important;
    box-shadow: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
#dashHub .dh-card:hover {
    transform: translateY(-1px) !important;
    border-left-width: 3px !important;
    box-shadow: 0 4px 16px rgba(15,23,42,0.07) !important;
}
[data-theme="dark"] #dashHub .dh-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important;
}

/* 4. Badge: squared, tinted with the card accent (institutional, not playful) */
#dashHub .dh-card-badge {
    border-radius: 6px !important;
    background: color-mix(in srgb, var(--dh-accent) 12%, transparent) !important;
    color: var(--dh-accent) !important;
}

/* 5. Title + LIVE tag: calm, uppercase micro-label */
#dashHub .dh-card-head h3 {
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
}
#dashHub .dh-live {
    text-transform: uppercase !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    color: #4b9e6a !important;
    background: none !important;
}

/* 6. Stats: numbers lead, labels recede — sit above a thin divider */
#dashHub .dh-stats {
    gap: 32px !important;
    padding: 16px 22px 16px !important;
    border-top: 1px solid color-mix(in srgb, var(--dh-accent) 10%, var(--border)) !important;
    margin-top: 16px !important;
}
#dashHub .dh-stat-num {
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    font-variant-numeric: tabular-nums !important;
}
#dashHub .dh-stat-label {
    font-size: 9.5px !important;
    letter-spacing: 0.09em !important;
    opacity: 0.8 !important;
}

/* 7. Footer: quiet link, accent only on the arrow movement */
#dashHub .dh-card-foot {
    border-top: 1px solid var(--border) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-muted) !important;
    padding: 13px 22px 15px !important;
}
#dashHub .dh-card:hover .dh-card-foot { color: var(--dh-accent) !important; }

/* 8. Grid: a touch more breathing room, regular rhythm */
#dashHub .dh-grid { gap: 18px !important; }

/* 9. Finder: align with the institutional tone (sober, bordered) */
#dashHub .dh-finder { border-radius: 8px !important; box-shadow: none !important; }


/* ============================================================
   DCSP CONTROL TOWER — rename + premium polish (2026-06-05)
   Additive, namespaced #dashHub, theme-aware. Sits AFTER the
   institutional override so new elements win on specificity.
   ============================================================ */

/* Eyebrow / kicker above the title — the only spot with accent gradient */
#dashHub .dh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 10px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
#dashHub .dh-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent);
    animation: dh-eyebrow-pulse 2.2s ease-out infinite;
}
@keyframes dh-eyebrow-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    #dashHub .dh-eyebrow-dot { animation: none; }
    #dashHub .dh-status-dot { animation: none; }
}

/* Slightly larger, tighter title for the "control tower" presence */
#dashHub .dh-h1 { font-size: 30px !important; }

/* Status bar — the control-tower signature strip under the header */
#dashHub .dh-statusbar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 26px;
    padding: 13px 18px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
#dashHub .dh-status-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}
#dashHub .dh-status-num {
    font-size: 16px;
    font-weight: 750;
    color: var(--text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
#dashHub .dh-status-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
#dashHub .dh-status-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
}
#dashHub .dh-status-pulse { margin-left: auto; align-items: center; }
#dashHub .dh-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
    animation: dh-status-pulse 2s ease-out infinite;
}
@keyframes dh-status-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Card polish — slightly richer hover without breaking the institutional base */
#dashHub .dh-card { overflow: hidden; }
#dashHub .dh-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0;
    background: var(--dh-accent);
    transition: height 0.18s ease;
}
#dashHub .dh-card:hover::before { height: 3px; }
#dashHub .dh-card:hover .dh-card-badge {
    background: color-mix(in srgb, var(--dh-accent) 20%, transparent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dh-accent) 9%, transparent);
}
#dashHub .dh-card-badge { transition: background 0.18s ease, box-shadow 0.18s ease; }

/* Mobile: status bar wraps cleanly, push the "operational" tag to its own row */
@media (max-width: 768px) {
    #dashHub .dh-statusbar { gap: 12px 14px; }
    #dashHub .dh-status-pulse { margin-left: 0; flex-basis: 100%; }
    #dashHub .dh-h1 { font-size: 24px !important; }
}


/* ============================================================
   DCSP CONTROL TOWER — cards: definitive look + hover-shadow BUG FIX (2026-06-05)
   ------------------------------------------------------------
   ROOT CAUSE of the ugly hover shadow: micro-interactions.css has a greedy
   global rule  [class*="card"]:hover { box-shadow: 0 4px 12px rgba(0,0,0,.4); transform: ... }
   which matches the INNER elements too (.dh-card-head/.dh-card-body/.dh-card-foot/
   .dh-card-badge), so the description rendered as a detached box with a harsh dark
   shadow. We neutralise it for the hub's inner elements (id-specificity beats the
   attribute selector) and keep the soft "shadow-behind" + gradient-text look.
   Namespaced #dashHub → applies to BOTH the in-chat hub and control-tower.html.
   ============================================================ */

/* 1. BUG FIX — inner card pieces must never carry their own shadow/lift.
      Only the whole .dh-card elevates. */
#dashHub .dh-card-head,
#dashHub .dh-card-body,
#dashHub .dh-card-foot,
#dashHub .dh-card-badge,
#dashHub .dh-card-meta {
    box-shadow: none !important;
    transform: none !important;
}
/* description never paints its own surface */
#dashHub .dh-card-body,
#dashHub .dh-card-body p {
    background: transparent !important;
    border-radius: 0 !important;
}

/* 2. Card surface — soft shadow behind (the look you like), rounder, accent kept */
#dashHub .dh-card {
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, var(--dh-accent) 16%, var(--border)) !important;
    border-left: 3px solid var(--dh-accent) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 20px rgba(15,23,42,0.06) !important;
    transition: transform 0.22s cubic-bezier(.4,0,.2,1),
                box-shadow 0.22s cubic-bezier(.4,0,.2,1),
                border-color 0.22s ease !important;
}
[data-theme="dark"] #dashHub .dh-card {
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.32) !important;
}

/* 3. Hover — single smooth lift + deeper SOFT shadow (no harsh dark box) */
#dashHub .dh-card:hover {
    transform: translateY(-4px) !important;
    border-left-width: 4px !important;
    border-color: color-mix(in srgb, var(--dh-accent) 32%, var(--border)) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,0.08), 0 18px 44px rgba(15,23,42,0.12) !important;
}
[data-theme="dark"] #dashHub .dh-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.48), 0 2px 8px rgba(0,0,0,0.30) !important;
}
/* disabled / in-progress card: no lift, no shadow change */
#dashHub .dh-card[aria-disabled="true"] { box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 6px 20px rgba(15,23,42,0.05) !important; }
#dashHub .dh-card[aria-disabled="true"]:hover { transform: none !important; border-left-width: 3px !important; }

/* 4. GRADIENT TEXT (the effect you like) — guaranteed on both pages, accent-matched
      so each card's hero numbers glow in its own colour. */
#dashHub .dh-stat-num {
    background: linear-gradient(135deg, var(--dh-accent), color-mix(in srgb, var(--dh-accent) 60%, #4338ca)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--dh-accent) !important; /* fallback if clip unsupported */
}

/* 5. Footer — KEEP the gradient-text effect (accent-matched), arrow stays solid.
      Applied to the text only; the SVG arrow keeps its stroke so it stays visible. */
#dashHub .dh-card-foot {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text-muted) !important;
}
#dashHub .dh-card-foot span {
    background: linear-gradient(135deg, var(--dh-accent), color-mix(in srgb, var(--dh-accent) 55%, #ec4899)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--dh-accent) !important;
    font-weight: 600 !important;
}
#dashHub .dh-card-foot .lucide { color: var(--dh-accent) !important; opacity: 0.85; }

/* 6. Badge — gentle accent ring on hover instead of a hard shadow */
#dashHub .dh-card-badge {
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}
#dashHub .dh-card:hover .dh-card-badge {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--dh-accent) 10%, transparent) !important;
}

/* 7. Stats removed (2026-06-05) — descriptions only, real numbers live inside each
      dashboard. Let the description breathe and show in full (no 2-line clamp),
      keep the footer anchored at the bottom. */
#dashHub .dh-card { min-height: 184px !important; }
#dashHub .dh-card-body {
    padding: 14px 22px 16px !important;
    margin-bottom: 0 !important;
}
#dashHub .dh-card-body p {
    -webkit-line-clamp: unset !important;
    display: block !important;
    min-height: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
#dashHub .dh-card-foot { margin-top: auto !important; }


/* ============================================================
   DCSP CONTROL TOWER — Share button (2026-06-05)
   Copies a direct shareable link to control-tower.html.
   ============================================================ */
#dashHub .dh-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
/* the back button is absolute in premium CSS; inside our actions row it must be static */
#dashHub .dh-head-actions .dh-back {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
}
#dashHub .dh-share {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
#dashHub .dh-share:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 38%, transparent);
}
#dashHub .dh-share:active { transform: translateY(0); }
#dashHub .dh-share .lucide { width: 14px; height: 14px; }

@media (max-width: 768px) {
    /* On phones the centered title + absolute buttons would overlap.
       Drop the absolute positioning so the actions sit in normal flow above the title. */
    #dashHub .dh-head-actions {
        position: static;
        width: 100%;
        justify-content: center;
        margin-bottom: 14px;
    }
    #dashHub .dh-share, #dashHub .dh-back { flex: 1; justify-content: center; max-width: 200px; }
}


/* ── HELPFULNESS CAPTURE (👍/👎) — always visible, NOT hover-gated (works on mobile) ── */
.rz-helpful{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;
  border-top:1px solid rgba(148,163,184,0.10);flex-wrap:wrap}
.rz-helpful-q{font-size:0.82em;color:var(--text-muted)}
.rz-helpful-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:28px;
  border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-muted);
  cursor:pointer;transition:all .15s}
.rz-helpful-btn:hover{border-color:var(--primary-light);color:var(--primary-light);
  background:rgba(99,102,241,0.08)}
.rz-helpful-yes:hover{color:var(--success);border-color:var(--success);
  background:rgba(52,211,153,0.10)}
.rz-helpful-thanks{font-size:0.82em;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px}
.rz-helpful-btn .lucide{width:16px;height:16px}


/* ════════════════════════════════════════════════════════════════════
   INPUT BAR — POLISH UNIFICATO (2026-06-07)
   Obiettivo: coerenza forme/dimensioni, allineamento perfetto, stati
   toggle leggibili, send invitante. Solo estetica, logica invariata.
   In fondo al file = vince per cascata sugli override precedenti.
   ════════════════════════════════════════════════════════════════════ */

/* Allineamento verticale: icone centrate con la prima riga di testo */
.input-row, .input-wrapper { align-items: center !important; }
.input-wrapper { gap: 6px !important; }

/* Tutti i bottoni-icona a sinistra: stessa dimensione, stesso radius morbido,
   stessa base neutra. Niente più mix tondo/quadrato 32/36px.
   NB: la graffetta è iniettata da multimodal.js come .attach-btn (o .csp-attach-btn). */
.input-wrapper .rz-plus-btn,
.input-wrapper .rz-think-btn,
.input-wrapper .rz-web-btn,
.input-wrapper .csp-attach-btn,
.input-wrapper .attach-btn {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    border-radius: 11px !important;            /* morbido, lega col send */
    border: 1px solid var(--border) !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important;
    opacity: 1 !important;                       /* niente icone semi-spente a riposo */
    transition: background .15s, border-color .15s, color .15s, transform .1s !important;
    flex-shrink: 0 !important;
}
.input-wrapper .rz-plus-btn .lucide,
.input-wrapper .rz-think-btn .lucide,
.input-wrapper .rz-web-btn .lucide,
.input-wrapper .csp-attach-btn .lucide,
.input-wrapper .attach-btn .lucide {
    width: 18px !important; height: 18px !important;
}

/* Hover neutro coerente (il colore brand resta per gli stati attivi) */
.input-wrapper .rz-plus-btn:hover,
.input-wrapper .rz-think-btn:hover,
.input-wrapper .rz-web-btn:hover,
.input-wrapper .csp-attach-btn:hover,
.input-wrapper .attach-btn:hover {
    background: rgba(99,102,241,0.07) !important;
    border-color: var(--primary-light) !important;
    color: var(--primary-light) !important;
}
.input-wrapper .rz-plus-btn:active,
.input-wrapper .rz-think-btn:active,
.input-wrapper .rz-web-btn:active,
.input-wrapper .csp-attach-btn:active,
.input-wrapper .attach-btn:active { transform: scale(0.93) !important; }

/* Stati TOGGLE attivi netti — l'utente capisce che restano "accesi".
   Deep Think = viola/accent · Web Search = ciano. Riempimento pieno + bordo pieno. */
.input-wrapper .rz-think-btn.active {
    background: rgba(139,92,246,0.16) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 0 1px rgba(139,92,246,0.25) inset !important;
}
.input-wrapper .rz-web-btn.active {
    background: rgba(6,182,212,0.16) !important;
    border-color: #06b6d4 !important;
    color: #22d3ee !important;
    box-shadow: 0 0 0 1px rgba(6,182,212,0.25) inset !important;
}

/* Send: stessa altezza dei vicini, invitante a riposo (non smorto), pieno su focus/hover */
.input-wrapper .send-btn {
    width: 36px !important; height: 36px !important;
    min-width: 36px !important; min-height: 36px !important;
    border-radius: 11px !important;
    opacity: 0.6 !important;
    flex-shrink: 0 !important;
}
.input-wrapper:focus-within .send-btn { opacity: 1 !important; }
.input-wrapper .send-btn:hover:not(:disabled) { opacity: 1 !important; transform: scale(1.05) !important; }
.input-wrapper .send-btn:disabled { opacity: 0.3 !important; }

/* Textarea: respiro orizzontale coerente col nuovo gap */
.input-wrapper textarea { padding: 7px 4px !important; }

/* Light theme: bordi un filo più marcati per stacco su sfondo chiaro */
[data-theme="light"] .input-wrapper .rz-plus-btn,
[data-theme="light"] .input-wrapper .rz-think-btn,
[data-theme="light"] .input-wrapper .rz-web-btn,
[data-theme="light"] .input-wrapper .csp-attach-btn {
    border-color: rgba(0,0,0,0.10) !important;
}


/* ============================================================
   SIDEBAR POLISH — 2026-06-08 (history list aesthetic refresh)
   Theme-safe (CSS custom properties). Appended last to win the
   cascade over the layered legacy rules. Reversible: delete block.
   ============================================================ */

/* Conversation icon → rounded "chip" with a subtle primary tint:
   gives every row a clean visual anchor (Linear / Claude style). */
.history-item .h-icon {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(99, 102, 241, 0.10) !important;
    transition: background 0.18s ease, transform 0.18s ease !important;
}
.history-item .h-icon .lucide {
    width: 15px !important;
    height: 15px !important;
    opacity: 1 !important;
    color: var(--primary, #6366f1) !important;
}

/* Row rhythm + smooth hover micro-lift */
.history-item {
    padding: 8px 10px !important;
    margin: 2px 6px !important;
    border-radius: 10px !important;
    transition: background 0.18s ease, transform 0.18s ease !important;
}
.history-item:hover {
    background: rgba(99, 102, 241, 0.07) !important;
    transform: translateX(2px) !important;
}
.history-item:hover .h-icon {
    background: rgba(99, 102, 241, 0.18) !important;
    transform: scale(1.06) !important;
}

/* Active row: left accent bar + gradient chip = clear "you are here" */
.history-item.active {
    background: rgba(99, 102, 241, 0.12) !important;
}
.history-item.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 62% !important;
    border-radius: 0 3px 3px 0 !important;
    background: linear-gradient(180deg, var(--primary, #6366f1), var(--accent, #8b5cf6)) !important;
}
.history-item.active .h-icon {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--accent, #8b5cf6)) !important;
}
.history-item.active .h-icon .lucide { color: #fff !important; }

/* Typography: tighter, cleaner stacking */
.history-item .h-text-wrap { gap: 1px !important; }
.history-item .h-text-wrap .h-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.1px !important;
}
.history-item .h-preview {
    font-size: 11px !important;
    line-height: 1.35 !important;
    opacity: 0.62 !important;
}

/* Date / group labels — refined, quieter, more deliberate spacing */
.ch-group-label {
    font-size: 0.64em !important;
    letter-spacing: 0.8px !important;
    font-weight: 700 !important;
    opacity: 0.5 !important;
    padding: 14px 12px 5px !important;
}

/* Search bar — softer, more inset */
#chatSearch, .csp-chat-search {
    border-radius: 10px !important;
    transition: box-shadow 0.18s ease, border-color 0.18s ease !important;
}
#chatSearch:focus, .csp-chat-search:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Light theme: keep tints subtle on white */
[data-theme="light"] .history-item .h-icon { background: rgba(99, 102, 241, 0.10) !important; }
[data-theme="light"] .history-item:hover { background: rgba(99, 102, 241, 0.06) !important; }
[data-theme="light"] .history-item.active { background: rgba(99, 102, 241, 0.10) !important; }


/* === Ticket draft & approve (editable draft before filing) === */
.rz-tkt-input,
.rz-tkt-textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-input, rgba(22,32,56,0.88));
    border: 1px solid var(--border, rgba(99,102,241,0.12));
    border-radius: 8px;
    color: var(--text, #e8edf5);
    font-size: 0.82em;
    font-family: inherit;
    line-height: 1.45;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rz-tkt-input { font-weight: 600; }
.rz-tkt-textarea { resize: vertical; min-height: 110px; white-space: pre-wrap; }
.rz-tkt-input:focus,
.rz-tkt-textarea:focus {
    outline: none;
    border-color: var(--primary-light, #818cf8);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.rz-tkt-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 7px 14px;
    background: var(--primary, #6366f1);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.8em;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
.rz-tkt-copy:hover { opacity: 0.9; }
.rz-tkt-copy:active { transform: scale(0.97); }
.rz-tkt-copy .lucide { width: 14px; height: 14px; }


/* === Live agentic-loop steps panel (async file jobs) === */
.rz-steps { font-size: 0.86em; }
.rz-steps-head {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--text, #e8edf5);
    margin-bottom: 8px;
    cursor: pointer; user-select: none;
    border-radius: 8px; padding: 2px 4px; margin-left: -4px;
    transition: background 0.15s;
}
.rz-steps-head:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
/* Freccia: a destra (▶) quando collassato, ruotata in giù quando espanso */
.rz-steps-arrow {
    display: inline-block; flex-shrink: 0;
    font-size: 0.7em; color: var(--text-muted, #8b9dc3);
    transform: rotate(90deg); transition: transform 0.2s ease;
}
.rz-steps-collapsed .rz-steps-arrow { transform: rotate(0deg); }
.rz-steps-check { color: var(--success, #34d399); font-weight: 700; flex-shrink: 0; }
.rz-steps-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rz-steps-spin {
    width: 13px; height: 13px; flex-shrink: 0;
    border: 2px solid var(--border, rgba(99,102,241,0.25));
    border-top-color: var(--primary, #6366f1);
    border-radius: 50%;
    display: inline-block;
    animation: rzStepsSpin 0.7s linear infinite;
}
@keyframes rzStepsSpin { to { transform: rotate(360deg); } }
.rz-steps-rows { display: flex; flex-direction: column; gap: 1px; }
.rz-step-row {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 0;
    color: var(--text-muted, #8b9dc3);
    transition: color 0.2s, opacity 0.2s;
    animation: rzStepIn 0.25s ease;
}
@keyframes rzStepIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.rz-step-ic {
    width: 18px; text-align: center; flex-shrink: 0;
    font-weight: 700; font-size: 0.95em; line-height: 1;
}
.rz-step-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Icona comando stile terminale */
.rz-ic-cmd {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: var(--primary-light, #818cf8); font-size: 0.85em;
}
.rz-kind-thinking .rz-step-lbl { font-style: italic; opacity: 0.85; }
.rz-kind-command .rz-step-lbl {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.92em;
}
.rz-step-done { color: var(--text, #e8edf5); }
.rz-step-running { color: var(--text, #e8edf5); }
.rz-step-running .rz-step-ic { color: var(--primary-light, #818cf8); }
.rz-step-pending { opacity: 0.55; }

/* Auto-collapse (Aki-style): al done collassa SOLO le righe; resta il riepilogo "✓ N step · Ns"
   cliccabile per ri-espandere. Traccia ispezionabile ma non invadente. */
.rz-steps-collapsed .rz-steps-rows { display: none; }
.rz-steps-collapsed .rz-steps-head { margin-bottom: 0; }
/* Dettaglio opzionale dello step (output troncato) */
.rz-step-detail {
    margin-left: 27px; font-size: 0.82em;
    color: var(--text-muted, #8b9dc3); opacity: 0.85;
}
.rz-steps-collapsed .rz-step-detail { display: none; }


/* === Download box (structured, rendered via DOM) === */
.rz-dl-box {
    margin-top: 14px;
    padding: 16px 18px;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
        var(--bg-card, #161f38);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border, rgba(99,102,241,0.18)));
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}
.rz-dl-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.82em; font-weight: 600; letter-spacing: .01em;
    color: var(--text-muted, #8b9dc3);
    margin-bottom: 12px;
    text-transform: none;
}
.rz-dl-link {
    display: flex; align-items: center; gap: 12px;
    width: 100%; box-sizing: border-box;
    margin: 8px 0 0 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--accent, #8b5cf6));
    border: none;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-all;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent);
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.15s ease;
}
.rz-dl-link::after {
    content: "↓";
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1.1em; font-weight: 700;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.18);
    border-radius: 8px;
}
.rz-dl-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 42%, transparent);
    filter: brightness(1.04);
}
.rz-dl-link:active { transform: translateY(0) scale(0.99); }


/* Personal-memory indicator: shown when Renzo injected the user's memory into a reply */
.memory-badge {
    display: inline-block;
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
    margin: 0 0 8px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
    vertical-align: middle;
    user-select: none;
}


/* === Real Steps Panel (backend actions; namespaced, NO collision with rz-steps/rz-step) === */
.rz-realsteps {
    margin: 0 0 8px 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card, rgba(255,255,255,0.03));
    overflow: hidden;
}
.rz-realsteps-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.72em;
    color: var(--text-muted);
    list-style: none;
    user-select: none;
}
.rz-realsteps-summary::-webkit-details-marker { display: none; }
.rz-realsteps-summary:hover { color: var(--text); }
.rz-realsteps-count { font-weight: 600; color: var(--primary, #6366f1); }
.rz-realsteps-count::before { content: '▸ '; }
details.rz-realsteps[open] .rz-realsteps-count::before { content: '▾ '; }
.rz-realsteps-time { opacity: 0.65; }
.rz-realsteps-list { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 3px; }
.rz-rstep { display: flex; align-items: center; gap: 6px; font-size: 0.71em; padding: 2px 0; color: var(--text-muted); }
.rz-rstep-icon { font-size: 0.9em; opacity: 0.8; flex-shrink: 0; }
.rz-rstep-label { opacity: 0.9; }

/* Preview panel button — accanto ai download Excel (open in RenzoArtifacts side panel) */
.rz-dl-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border, rgba(99,102,241,0.2));
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75em;
    cursor: pointer;
    transition: all .15s ease;
}
.rz-dl-panel-btn:hover {
    border-color: var(--primary-light, #818cf8);
    color: var(--primary-light, #818cf8);
    background: rgba(99,102,241,0.06);
}