/* 2026-04-08 — extracted from ai.ejs inline <style> blocks */

/* ═══════════════════════════════════════════
   MAIN CHAT CORE — from primary <style> block
═══════════════════════════════════════════ */

            /* Core improvements */
            :root {
                --primary-color: var(--primary);
                --primary-hover: var(--accent);
                --background-primary: var(--background);
                --background-secondary: var(--secondary);
                --text-color: var(--foreground);
                --navbar-height: 60px;
                --chat-sidebar-width: clamp(220px, 22vw, 280px);
                --chat-shell-gutter: clamp(16px, 2.2vw, 32px);
                --chat-content-max: clamp(540px, 64vw, 860px);
            }


            /* Improved code highlighting */
            .hljs {
                color: #e9e9f4;
                background: var(--muted);
                border-radius: var(--border-radius);
                border: 1px solid var(--border);
                font-size: 15px;
            }

            /* Improved textarea */
            #message-input {
                margin-right: 50px;
                min-height: 38px;
                max-height: 160px;
                padding: 10px 14px;
                background: linear-gradient(180deg, rgba(9, 16, 32, 0.98), rgba(12, 22, 42, 0.94));
                border: 1px solid rgba(251, 146, 60, 0.2);
                border-radius: 18px;
                color: var(--foreground);
                font-size: 15px;
                outline: none;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
                resize: none;
                line-height: 1.55;
                overflow-y: hidden;
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
            }

            #message-input:focus {
                border-color: rgba(251, 146, 60, 0.55);
                box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1), 0 4px 20px rgba(0, 0, 0, 0.3);
            }

            #message-input::-webkit-scrollbar {
                width: 5px;
            }

            #message-input::-webkit-scrollbar-track {
                background: var(--input);
            }
            
            #message-input::-webkit-scrollbar-thumb {
                background: var(--primary);
                border-radius: 5px;
            }

            #message-input::-webkit-scrollbar-thumb:hover {
                background: var(--accent);
            }

            /* Sidebar box branding — warm ember dark */
            .box.conversations {
                border-right: 1px solid rgba(251, 146, 60, 0.12) !important;
                background: linear-gradient(175deg, rgba(22, 11, 4, 0.99) 0%, rgba(14, 7, 2, 0.99) 100%) !important;
            }

            /* Conversation title accent */
            .conversations .title {
                color: var(--muted-foreground);
                text-transform: uppercase;
                font-size: 11px;
                letter-spacing: 0.08em;
            }

            /* Improved theme toggle */
            .theme-toggle {
                position: relative;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: transparent;
                border: none;
                border-radius: 50%;
                color: var(--text-color);
                cursor: pointer;
                transition: background-color 0.2s ease;
                margin-left: auto;
            }

            .theme-toggle:hover {
                background-color: var(--secondary);
            }

            /* Improved mobile sidebar */
            .mobile-sidebar {
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--primary);
                color: white;
                border-radius: 50%;
                cursor: pointer;
                z-index: 1000;
                box-shadow: var(--shadow-md);
                transition: background-color 0.2s ease, transform 0.2s ease;
            }

            .mobile-sidebar:hover {
                background-color: var(--accent);
            }

            .mobile-sidebar:active {
                transform: scale(0.95);
            }

            /* Improved layout */
            body {
                overflow: hidden;
                height: 100vh;
                padding: 0;
                margin: 0;
                --chat-sidebar-offset: 0px;
                --chat-content-width: min(
                    var(--chat-content-max),
                    calc(100vw - var(--chat-sidebar-offset) - (var(--chat-shell-gutter) * 2) - 24px)
                );
                --welcome-content-width: min(
                    780px,
                    calc(100vw - var(--chat-sidebar-offset) - (var(--chat-shell-gutter) * 2) - 24px)
                );
            }

            .row {
                height: calc(100vh - var(--navbar-height));
                margin-top: var(--navbar-height) !important;
                padding: 0;
                gap: 0;
                overflow-x: hidden;
            }

            /* IMPROVED NAVBAR - SINGLE NAVBAR FOR BOTH MOBILE AND DESKTOP */
            .navbar {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: var(--navbar-height);
                padding: 0 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: rgba(8, 13, 26, 0.95);
                border-bottom: 1px solid rgba(251, 146, 60, 0.15);
                z-index: 1000;
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                box-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
            }

            /* Left side with action buttons and logo */
            .navbar-left {
                display: flex;
                align-items: center;
                gap: 15px;
            }

            /* Action buttons styling */
            .navbar-actions {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .navbar-action-btn {
                background: none;
                border: none;
                padding: 8px;
                cursor: pointer;
                color: var(--text-color);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                transition: background-color 0.2s ease;
            }

            .navbar-action-btn:hover {
                background-color: var(--secondary);
            }

            .navbar-action-btn svg {
                width: 20px;
                height: 20px;
            }

            .navbar-action-btn.action-press,
            .new_convo.action-press,
            .composer-icon-btn.action-press {
                animation: actionPress 0.46s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .navbar-action-btn.trash-press,
            .trash-icon.trash-press {
                animation: trashPress 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            }

            @keyframes actionPress {
                0% { transform: scale(1); box-shadow: 0 0 0 rgba(251, 146, 60, 0); }
                35% { transform: scale(0.92); box-shadow: 0 0 0 rgba(251, 146, 60, 0); }
                70% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(251, 146, 60, 0.08); }
                100% { transform: scale(1); box-shadow: 0 0 0 rgba(251, 146, 60, 0); }
            }

            @keyframes trashPress {
                0% { transform: rotate(0deg) scale(1); }
                25% { transform: rotate(-12deg) scale(0.92); }
                55% { transform: rotate(10deg) scale(1.04); }
                100% { transform: rotate(0deg) scale(1); }
            }

            /* Logo styling */
            .logo {
                display: flex;
                align-items: center;
            }

            .logo a {
                text-decoration: none;
                color: var(--text-color);
                transition: color 0.2s ease;
            }

            .logo a:hover {
                color: var(--primary);
            }

            .logo h1 {
                margin: 0;
                font-size: 1.25rem;
                font-weight: 700;
                background: linear-gradient(135deg, #f9fafb 30%, #fb923c 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                letter-spacing: -0.02em;
            }

            .logo-img {
                width: 28px;
                height: 28px;
                border-radius: 6px;
                object-fit: cover;
                border: 1px solid rgba(251, 146, 60, 0.3);
                margin-right: 8px;
                flex-shrink: 0;
            }

            /* Right side with hamburger menu */
            .navbar-right {
                display: flex;
                align-items: center;
            }

            .hamburger-menu {
                background: none;
                border: none;
                cursor: pointer;
                padding: 8px;
                display: flex;
                flex-direction: column;
                gap: 3px;
                z-index: 1001;
            }

            .hamburger-menu span {
                display: block;
                width: 25px;
                height: 3px;
                background-color: var(--text-color);
                transition: transform 0.3s ease, opacity 0.3s ease;
            }

            /* Hamburger animation - MOBILE ONLY */
            @media (max-width: 768px) {
                body.mobile-nav-open .hamburger-menu span:nth-child(1) {
                    transform: translateY(6px) rotate(45deg);
                }

                body.mobile-nav-open .hamburger-menu span:nth-child(2) {
                    opacity: 0;
                }

                body.mobile-nav-open .hamburger-menu span:nth-child(3) {
                    transform: translateY(-6px) rotate(-45deg);
                }
            }

            /* Improved conversation sidebar + hide scrollbar globally */
            .conversations-list {
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .conversations-list::-webkit-scrollbar { display: none; }

            .box.conversations {
                position: fixed;
                top: var(--navbar-height);
                left: calc(-1 * var(--chat-sidebar-width));
                width: var(--chat-sidebar-width);
                height: calc(100vh - var(--navbar-height));
                z-index: 999999;
                background-color: var(--background);
                transition: left 0.3s ease;
            }

            /* Improved conversation area */
            .conversation {
                flex: 1;
                height: 100%;
                min-height: 0;
                min-width: 0;
                overflow-x: clip;
                border-radius: 0;
                box-shadow: none;
            }

            .conversation #messages {
                padding: 20px;
                flex: 1 1 auto;
                min-height: 0;
                height: auto;
            }

            /* 2026-04-07 — Chat input bar: base padding overridden per-breakpoint */
            .user-input {
                padding: 6px 16px 8px;
                border-top: 1px solid rgba(251, 146, 60, 0.1);
                background: linear-gradient(to top, rgba(8, 13, 26, 0.99) 70%, rgba(8, 13, 26, 0.90));
                backdrop-filter: blur(24px);
                -webkit-backdrop-filter: blur(24px);
                opacity: 1;
                visibility: visible;
                transform: translateY(0) scale(1);
                will-change: opacity, transform;
                transition:
                    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0.48s step-end;
            }

            .user-input.user-input-hidden {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(22px) scale(0.985);
            }

            .user-input.user-input-visible {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                transform: translateY(0) scale(1);
            }

            .user-input .input-box {
                transform-origin: center bottom;
                transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.48s ease, opacity 0.48s ease;
            }

            .user-input.user-input-hidden .input-box {
                opacity: 0.88;
                transform: translateY(12px) scale(0.99);
            }

            .box.input-box {
                position: relative;
                border-radius: var(--border-radius);
                background-color: transparent;
                border: none;
                box-shadow: none;
            }

            .composer-shell {
                display: flex;
                flex-direction: column;
                gap: 3px;
            }

            /* 2026-04-07 — Redesigned oval pill composer */
            .composer-surface {
                position: relative;
                display: flex;
                flex-direction: column;
                gap: 6px;
                padding: clamp(8px, 1vw, 14px) clamp(12px, 1.5vw, 20px) clamp(6px, 0.8vw, 10px);
                border-radius: 28px;
                border: 1px solid rgba(251, 146, 60, 0.14);
                background: linear-gradient(160deg,
                    rgba(13, 20, 38, 0.97) 0%,
                    rgba(9, 15, 30, 0.95) 100%);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.06),
                    0 8px 40px rgba(0,0,0,0.32),
                    0 2px 8px rgba(0,0,0,0.18);
                transition: box-shadow 0.25s ease, border-color 0.25s ease;
            }

            .composer-surface:focus-within {
                border-color: rgba(251, 146, 60, 0.38);
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.07),
                    0 0 0 2px rgba(251, 146, 60, 0.12),
                    0 10px 44px rgba(0,0,0,0.36);
            }

            .user-input.composer-has-text .composer-surface {
                border-color: rgba(251, 146, 60, 0.22);
            }

            /* 2026-04-07 — Polished spring entrance for the chatbox */
            .user-input.user-input-entering .composer-surface {
                animation: composerReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
            }
            .user-input.user-input-entering {
                animation: composerWrapReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
            }

            @keyframes composerWrapReveal {
                0% { opacity: 0; transform: translateY(28px); }
                100% { opacity: 1; transform: translateY(0); }
            }

            @keyframes composerReveal {
                0% {
                    opacity: 0;
                    transform: translateY(18px) scale(0.97);
                    border-color: rgba(251, 146, 60, 0.0);
                    box-shadow:
                        inset 0 1px 0 rgba(255,255,255,0.02),
                        0 4px 12px rgba(0,0,0,0.1);
                }
                55% {
                    opacity: 1;
                    transform: translateY(-2px) scale(1);
                    border-color: rgba(251, 146, 60, 0.22);
                    box-shadow:
                        inset 0 1px 0 rgba(255,255,255,0.07),
                        0 0 0 3px rgba(251, 146, 60, 0.08),
                        0 18px 44px rgba(0,0,0,0.3);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                    border-color: rgba(251, 146, 60, 0.14);
                    box-shadow:
                        inset 0 1px 0 rgba(255,255,255,0.06),
                        0 8px 40px rgba(0,0,0,0.32),
                        0 2px 8px rgba(0,0,0,0.18);
                }
            }

            .composer-shell #message-input {
                margin-right: 0;
                min-height: 24px;
                max-height: 160px;
                padding: 2px 0;
                background: transparent;
                border: none;
                border-radius: 0;
                box-shadow: none;
                outline: none;
                resize: none;
                line-height: 1.6;
                font-size: clamp(0.9rem, calc(0.82rem + 0.22vw), 1.05rem);
                color: #f1f5f9;
                letter-spacing: 0.01em;
            }

            .composer-shell #message-input:focus {
                border: none;
                box-shadow: none;
                outline: none;
            }

            .composer-controls {
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .composer-left {
                position: relative;
                display: flex;
                align-items: center;
                flex: 1;
            }

            .composer-icon-btn,
            .composer-controls #send-button {
                width: clamp(26px, 2vw, 32px);
                height: clamp(26px, 2vw, 32px);
                border-radius: 999px;
                border: 1px solid rgba(255,255,255,0.08);
                background: rgba(255,255,255,0.04);
                color: #d6d3d1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                flex-shrink: 0;
                transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
            }

            .composer-icon-btn:hover,
            .composer-controls #send-button:hover {
                transform: translateY(-1px) scale(1.04);
                background: rgba(255,255,255,0.08);
                border-color: rgba(255,255,255,0.14);
            }

            .composer-controls #send-button {
                position: static;
                right: auto;
                bottom: auto;
                flex-shrink: 0;
                background: linear-gradient(135deg, #fb923c, #f97316);
                color: white;
                box-shadow: 0 8px 22px rgba(249, 115, 22, 0.28);
                border-color: rgba(255,255,255,0.16);
            }

            .composer-controls #send-button:hover {
                box-shadow: 0 12px 26px rgba(249, 115, 22, 0.34);
            }

            #think-toggle-btn {
                display: none !important;
            }

            .composer-model-wrap {
                flex: 1;
                min-width: 0;
                display: flex;
                justify-content: center;
            }

            .composer-model-wrap #model {
                max-width: 100%;
                min-width: 0;
                padding: 0 20px 0 8px;
                height: 28px;
                border-radius: 999px;
                border: 1px solid rgba(255,255,255,0.08);
                background: rgba(255,255,255,0.04);
                color: #d6d3d1;
                font-size: 0.78rem;
                box-shadow: none;
                outline: none;
                appearance: none;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .composer-model-wrap::after {
                content: '';
                position: relative;
                right: 22px;
                align-self: center;
                width: 8px;
                height: 8px;
                border-right: 1.5px solid rgba(214, 211, 209, 0.9);
                border-bottom: 1.5px solid rgba(214, 211, 209, 0.9);
                transform: rotate(45deg);
                pointer-events: none;
                margin-left: -12px;
            }

            .voice-button.is-listening {
                background: rgba(251, 146, 60, 0.14);
                border-color: rgba(251, 146, 60, 0.34);
                color: #fb923c;
                box-shadow: 0 0 0 6px rgba(251, 146, 60, 0.08);
            }

            /* 2026-04-07 — Allow the menu to escape the box's overflow:hidden clip */
            .input-box,
            .composer-surface,
            .composer-left {
                overflow: visible !important;
            }

            .composer-actions-menu {
                position: absolute;
                left: 0;
                bottom: calc(100% + 12px);
                display: flex;
                flex-direction: column;
                gap: 6px;
                min-width: 152px;
                padding: 8px;
                border-radius: 16px;
                border: 1px solid rgba(255,255,255,0.08);
                background: rgba(20, 18, 16, 0.98);
                box-shadow: 0 18px 40px rgba(0,0,0,0.34);
                opacity: 0;
                transform: translateY(10px) scale(0.96);
                pointer-events: none;
                transition: opacity 0.22s ease, transform 0.22s ease;
                z-index: 99999;
            }

            .composer-actions-menu.menu-open {
                opacity: 1;
                transform: translateY(0) scale(1);
                pointer-events: auto;
            }

            .composer-actions-menu button {
                width: 100%;
                padding: 10px 12px;
                border: none;
                border-radius: 12px;
                background: transparent;
                color: #e7e5e4;
                text-align: left;
                cursor: pointer;
                transition: background 0.18s ease, color 0.18s ease;
            }

            .composer-actions-menu button:hover {
                background: rgba(255,255,255,0.06);
                color: #fb923c;
            }

            .composer-disclaimer {
                margin: 0;
                text-align: center;
                font-size: 0.68rem;
                color: rgba(214, 211, 209, 0.6);
            }

            /* 2026-04-07 — Compact floating followup pill */
            .composer-followup {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin: 0 0 4px;
                padding: 0 2px;
            }

            .composer-followup[hidden] {
                display: none !important;
            }

            /* Hide the label text entirely */
            .composer-followup-label {
                display: none;
            }

            .composer-followup-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 4px 10px 4px 8px;
                border-radius: 999px;
                border: 1px solid rgba(251, 146, 60, 0.2);
                background: rgba(251, 146, 60, 0.06);
                color: rgba(251, 146, 60, 0.75);
                font-size: 0.68rem;
                font-family: 'Inter', sans-serif;
                font-weight: 500;
                cursor: pointer;
                white-space: nowrap;
                transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
                animation: followupIn 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) both;
            }

            .composer-followup-chip::before {
                content: "↑";
                font-size: 0.7rem;
                opacity: 0.7;
            }

            .composer-followup-chip:hover {
                background: rgba(251, 146, 60, 0.14);
                border-color: rgba(251, 146, 60, 0.4);
                color: #fb923c;
                transform: translateY(-1px);
            }

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

            .buttons {
                display: none !important;
            }

            /* 2026-04-07 — send-button lives inside composer-controls (static position) */
            #send-button {
                position: static !important;
                right: auto !important;
                bottom: auto !important;
                width: clamp(28px, 2vw, 34px);
                height: clamp(28px, 2vw, 34px);
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, #fb923c, #f97316);
                color: white;
                border-radius: 999px;
                cursor: pointer;
                flex-shrink: 0;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
                box-shadow: 0 2px 12px rgba(251, 146, 60, 0.35);
            }

            #send-button:hover {
                transform: scale(1.07);
                box-shadow: 0 4px 20px rgba(251, 146, 60, 0.52);
            }

            #send-button svg {
                width: 16px;
                height: 16px;
            }

            /* Improved stop generating button */
            .stop_generating {
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1000;
            }

            .stop_generating button {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                padding: 10px 20px;
                background-color: var(--background);
                border: 1px solid var(--border);
                border-radius: var(--border-radius);
                color: var(--text-color);
                font-weight: 500;
                cursor: pointer;
                box-shadow: var(--shadow-md);
                transition: background-color 0.2s ease;
            }

            .stop_generating button:hover {
                background-color: var(--secondary);
            }

            /* Improved conversation items */
            .conversations-list .conversation-item {
                padding: 12px;
                border-radius: 8px;
                margin-bottom: 8px;
                transition: background-color 0.2s ease;
                cursor: pointer;
            }

            .conversations-list .conversation-item:hover {
                background-color: var(--secondary);
            }

            .conversations .convo.active {
                background: rgba(251, 146, 60, 0.08);
                border-color: rgba(251, 146, 60, 0.18);
                box-shadow: 0 10px 24px rgba(2, 6, 23, 0.2);
            }

            .conversations .convo.active .convo-title {
                color: #f8fafc;
            }

            /* Fix the mobile close button visibility on desktop */
            .mobile-close-button {
                display: none; /* Hidden by default */
                position: absolute;
                top: 10px;
                right: 10px;
                width: 40px;
                height: 40px;
                align-items: center;
                justify-content: center;
                background-color: var(--secondary);
                border-radius: 50%;
                cursor: pointer;
                z-index: 1002;
            }

            /* Responsive styles */
            @media (max-width: 768px) {
                /* Mobile navbar layout: [actions] [logo] [hamburger] */
                .navbar-left {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    position: absolute;
                    left: 10px;
                    width: auto;
                    z-index: 1001;
                }
                
                .navbar-actions {
                    display: flex !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    position: static !important;
                    gap: 8px;
                }
                
                .navbar-action-btn {
                    display: flex !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                    background: none;
                    border: none;
                    padding: 8px;
                    cursor: pointer;
                    color: var(--text-color);
                    border-radius: 4px;
                    transition: background-color 0.2s ease;
                }
                
                .navbar-action-btn:hover {
                    background-color: var(--secondary);
                }
                
                .logo {
                    margin-left: 80px; /* Space for the action buttons */
                    position: relative;
                    left: auto;
                    transform: none;
                }
                
                .navbar-right {
                    position: absolute;
                    right: 10px;
                    z-index: 1001;
                }
                
                /* Ensure hamburger menu is visible and clickable */
                .hamburger-menu {
                    display: flex !important;
                    background: none;
                    border: none;
                    cursor: pointer;
                    padding: 8px;
                    flex-direction: column;
                    gap: 3px;
                    z-index: 1002;
                }
                
                .hamburger-menu span {
                    display: block;
                    width: 25px;
                    height: 3px;
                    background-color: var(--text-color);
                    transition: transform 0.3s ease, opacity 0.3s ease;
                }
                
                /* Remove any overlapping elements */
                .mobile-sidebar {
                    display: none !important;
                }

                /* Tap-outside backdrop */
                #sidebar-backdrop {
                    display: none;
                    position: fixed;
                    inset: 0;
                    z-index: 1000;
                    background: rgba(0, 0, 0, 0.45);
                    backdrop-filter: blur(2px);
                    -webkit-backdrop-filter: blur(2px);
                }
                body.mobile-nav-open #sidebar-backdrop {
                    display: block;
                }

                /* Mobile sidebar behavior — warm ember dark to match desktop */
                .box.conversations {
                    display: flex !important;
                    flex-direction: column;
                    position: fixed;
                    top: 0;
                    left: calc(-1 * var(--chat-sidebar-width));
                    width: var(--chat-sidebar-width);
                    height: 100vh;
                    z-index: 1001;
                    background: linear-gradient(175deg, rgba(22, 11, 4, 0.99) 0%, rgba(14, 7, 2, 0.99) 100%);
                    border-right: 1px solid rgba(251, 146, 60, 0.12);
                    transition: left 0.3s ease;
                    padding-top: 60px;
                }

                body.mobile-nav-open .box.conversations {
                    left: 0 !important;
                    box-shadow: var(--shadow-lg);
                }
                
                /* Hamburger animation when open */
                body.mobile-nav-open .hamburger-menu span:nth-child(1) {
                    transform: translateY(6px) rotate(45deg);
                }

                body.mobile-nav-open .hamburger-menu span:nth-child(2) {
                    opacity: 0;
                }

                body.mobile-nav-open .hamburger-menu span:nth-child(3) {
                    transform: translateY(-6px) rotate(-45deg);
                }
            }

            @media (min-width: 769px) {
                body {
                    --chat-sidebar-offset: var(--chat-sidebar-width);
                }

                body.desktop-nav-closed {
                    --chat-sidebar-offset: 0px;
                }

                /* Desktop sidebar toggle — open by default, closed when body has desktop-nav-closed */
                body.desktop-nav-closed .box.conversations {
                    left: calc(-1 * var(--chat-sidebar-width)) !important;
                    box-shadow: none !important;
                }
                
                /* Show hamburger on desktop */
                .hamburger-menu {
                    display: flex !important;
                }

                /* Desktop: Show action buttons in navbar */
                .navbar-actions {
                    display: flex;
                    margin-left: auto;
                    margin-right: 20px;
                }

                /* Desktop: Position logo */
                .logo {
                    margin-left: 20px;
                }

                /* Desktop: Show hamburger menu on right */
                .hamburger-menu {
                    display: flex !important;
                    position: absolute;
                    right: 20px;
                }

                /* Desktop: Sidebar open by default — warm ember dark background */
                .box.conversations {
                    display: flex !important;
                    flex-direction: column;
                    position: fixed;
                    top: var(--navbar-height);
                    left: 0;
                    width: var(--chat-sidebar-width);
                    height: calc(100vh - var(--navbar-height));
                    z-index: 999999;
                    background: linear-gradient(175deg, rgba(22, 11, 4, 0.99) 0%, rgba(14, 7, 2, 0.99) 100%);
                    border-right: 1px solid rgba(251, 146, 60, 0.12);
                    transition: left 0.3s ease;
                }

                /* Desktop: Conversation area offset for open sidebar */
                .conversation {
                    width: calc(100% - var(--chat-sidebar-offset));
                    max-width: 100%;
                    margin-left: var(--chat-sidebar-offset);
                    padding-left: 0;
                    transition: width 0.3s ease, margin-left 0.3s ease;
                }
                body.desktop-nav-closed .conversation {
                    width: 100%;
                    margin-left: 0;
                }

                /* 2026-04-07 — Center messages and chatbox, fluid responsive width */
                .conversation #messages {
                    padding:
                        clamp(16px, 2vw, 32px)
                        max(var(--chat-shell-gutter), calc((100% - var(--chat-content-width)) / 2));
                    height: auto;
                }

                /* Center and oval-shape the chatbox */
                .conversation .user-input {
                    padding:
                        clamp(6px, 0.8vh, 12px)
                        max(var(--chat-shell-gutter), calc((100% - var(--chat-content-width)) / 2))
                        clamp(8px, 1vh, 14px);
                }

                /* Fluid message text scaling */
                .message .content p,
                .message .content li {
                    font-size: clamp(0.9rem, calc(0.78rem + 0.25vw), 1.25rem);
                    line-height: 1.7;
                }

                /* Fluid heading in messages */
                .message .content h1,
                .message .content h2,
                .message .content h3 {
                    font-size: clamp(1rem, calc(0.9rem + 0.3vw), 1.45rem);
                }

                .mobile-sidebar {
                    display: none;
                }

                .buttons {
                    display: none !important;
                }

                .theme-toggle-container {
                    display: flex;
                    align-items: center;
                }
                
                .bottom_buttons {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    padding: 15px;
                    border-top: 1px solid rgba(255, 255, 255, 0.06);
                    background: linear-gradient(180deg, rgba(8, 13, 26, 0), rgba(8, 13, 26, 0.94));
                }

                /* Hide the desktop theme toggle completely */
                #theme-toggle {
                    display: none;
                }
            }

            /* 2026-04-07 — Profile strip + sidebar clear button: global (mobile + desktop) */
            .chat-profile-strip {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 9px 12px;
                border-radius: 12px;
                border: 1px solid rgba(251, 146, 60, 0.12);
                background: rgba(251, 146, 60, 0.05);
                text-decoration: none;
                color: inherit;
                min-width: 0;
                transition: background 0.18s ease, border-color 0.18s ease;
            }

            .chat-profile-strip:hover {
                background: rgba(251, 146, 60, 0.1);
                border-color: rgba(251, 146, 60, 0.28);
            }

            .chat-profile-avatar-wrap {
                position: relative;
                width: 34px;
                height: 34px;
                flex-shrink: 0;
                border-radius: 50%;
                overflow: hidden;
                background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(37, 99, 235, 0.25));
                border: 1.5px solid rgba(251, 146, 60, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .chat-profile-avatar-img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
            }

            .chat-profile-avatar-initial {
                font-size: 0.85rem;
                font-weight: 700;
                color: #f8fafc;
                text-transform: uppercase;
                line-height: 1;
            }

            .chat-profile-status-dot {
                position: absolute;
                right: 1px;
                bottom: 1px;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #fb923c;
                border: 2px solid rgba(18, 10, 4, 0.95);
                box-shadow: 0 0 6px rgba(251, 146, 60, 0.5);
            }

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

            .chat-profile-name {
                font-size: 0.82rem;
                font-weight: 600;
                color: #f1f5f9;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.3;
            }

            .chat-profile-sub {
                font-size: 0.68rem;
                color: rgba(148, 163, 184, 0.7);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.2;
            }

            .chat-profile-verified {
                color: #fb923c;
                font-style: normal;
            }

            .chat-profile-chevron {
                flex-shrink: 0;
                color: rgba(148, 163, 184, 0.4);
                transition: color 0.18s ease;
                position: static !important;
            }

            .chat-profile-strip:hover .chat-profile-chevron {
                color: rgba(251, 146, 60, 0.7);
            }

            .bottom_buttons .chat-sidebar-clear-btn {
                width: 100%;
                margin: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 11px 14px;
                border-radius: 999px;
                border: 1px solid rgba(255, 255, 255, 0.12);
                background: rgba(8, 13, 26, 0.52);
                color: #f8fafc;
                font-size: 0.82rem;
                font-weight: 600;
                cursor: pointer;
                transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
            }

            .bottom_buttons .chat-sidebar-clear-btn:hover {
                color: #fb923c;
                background: rgba(251, 146, 60, 0.08);
                border-color: rgba(251, 146, 60, 0.32);
                box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22);
            }

            /* 2026-04-07 — Extra-wide screens: expand content column further */
            @media (min-width: 1800px) {
                :root { --chat-content-max: min(900px, 52vw); }
            }

            /* Update the mobile theme toggle styling */
            #mobile-theme-toggle {
                position: absolute;
                top: 10px;
                right: 10px;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: var(--secondary);
                border-radius: 50%;
                margin: 0;
                z-index: 1002;
                border: 1px solid var(--border);
            }

            /* Create a hamburger to X animation */
            .mobile-sidebar span {
                display: block;
                width: 24px;
                height: 3px;
                background-color: white;
                margin: 4px 0;
                transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
                transform-origin: center;
            }

            body.mobile-nav-open .mobile-sidebar span:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
            }

            body.mobile-nav-open .mobile-sidebar span:nth-child(2) {
                opacity: 0;
                transform: scale(0);
            }

            body.mobile-nav-open .mobile-sidebar span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
            }

            /* 2026-04-07 — Mobile sidebar layout: compact top+bottom, chat list fills remaining space */
            @media (max-width: 768px) {
                /* Make the sidebar content use flexbox for proper ordering */
                .box.conversations {
                    display: flex;
                    flex-direction: column;
                }

                /* Adjust the top section with New Conversation button — compact */
                .top {
                    order: 0;
                    padding-top: 8px;
                    padding-bottom: 6px;
                    flex-shrink: 0;
                }

                /* Chat list fills all remaining vertical space */
                .conversations-list {
                    order: 1;
                    flex: 1;
                    min-height: 0;
                    overflow-y: auto;
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                }
                .conversations-list::-webkit-scrollbar { display: none; }

                /* Clear button + profile strip at bottom — compact */
                .bottom_buttons {
                    order: 2;
                    flex-shrink: 0;
                    position: relative;
                    top: 0;
                    padding: 8px 12px max(10px, env(safe-area-inset-bottom));
                    border-bottom: none;
                    border-top: 1px solid rgba(255, 255, 255, 0.06);
                    gap: 8px;
                }

                #welcome-screen {
                    padding: 12px 14px 20px;
                    justify-content: flex-start;
                }
            }

            /* Fix mobile scrolling issues when keyboard appears */
            @media (max-width: 768px) {
                body {
                    overflow-x: hidden;
                    overflow-y: hidden;
                    height: 100vh;
                    height: 100dvh;
                    min-height: 100vh;
                    min-height: 100dvh;
                }
                
                .row {
                    min-height: calc(100vh - var(--navbar-height));
                    min-height: calc(100dvh - var(--navbar-height));
                    height: calc(100vh - var(--navbar-height));
                    height: calc(100dvh - var(--navbar-height));
                }
                
                .conversation #messages {
                    padding-bottom: 24px;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                }
                
                .conversation {
                    height: 100%;
                    min-height: 0;
                }
                
                @supports (-webkit-touch-callout: none) {
                    .conversation #messages {
                        padding-bottom: 24px;
                    }
                }
            }

            /* Remove the blue icon overlapping text on mobile */
            @media (max-width: 768px) {
                .mobile-sidebar {
                    display: none !important;
                }
                
                /* Ensure logo text is fully visible */
                .logo {
                    z-index: 10;
                }
                
                /* Fix navbar layout on mobile */
                .navbar-left {
                    width: auto;
                    display: flex;
                    align-items: center;
                }
            }

/* ═══════════════════════════════════════════
   THINK TOGGLE — from tiny inline <style> block
═══════════════════════════════════════════ */

            #think-toggle-btn { display: none !important; }

/* ═══════════════════════════════════════════
   WELCOME SCREEN + ANIMATIONS — from inline <style> block
═══════════════════════════════════════════ */

            /* ═══════════════════════════════════════════
               WELCOME SCREEN
            ═══════════════════════════════════════════ */
            #welcome-screen {
                position: absolute;
                inset: 0;
                z-index: 20;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding:
                    14px
                    max(var(--chat-shell-gutter), calc((100% - var(--welcome-content-width)) / 2))
                    16px;
                background: #080d1a;
                transition: opacity 0.5s ease, transform 0.5s ease;
                overflow-y: auto;
                overflow-x: clip;
                max-width: 100%;
                overscroll-behavior-x: none;
                -webkit-overflow-scrolling: touch;
            }

            .theme-toggle,
            #mobile-theme-toggle,
            .theme-toggle-container {
                display: none !important;
            }

            .welcome-grid-lines {
                position: absolute;
                inset: 0;
                background-image:
                    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
                background-size: 64px 64px;
                mask-image: radial-gradient(circle at center, black 30%, transparent 85%);
                opacity: 0.35;
                pointer-events: none;
            }

            .welcome-kicker {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin-bottom: 8px;
                padding: 5px 12px;
                border-radius: 999px;
                border: 1px solid rgba(251, 146, 60, 0.22);
                background: rgba(15, 23, 42, 0.72);
                color: #cbd5e1;
                font-size: 0.76rem;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                max-width: min(100%, var(--welcome-content-width));
                text-align: center;
                white-space: normal;
                line-height: 1.35;
                box-shadow: 0 18px 40px rgba(2, 6, 23, 0.25);
                animation: welcomeFadeUp 0.9s ease forwards;
            }

            .welcome-proof-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 8px;
                width: 100%;
                max-width: min(760px, var(--welcome-content-width));
                margin: 0 auto 10px;
                animation: welcomeFadeUp 0.8s ease 0.2s forwards;
                opacity: 0;
                transform: translateY(16px);
            }

            .welcome-proof-card {
                padding: 8px 12px;
                border-radius: 16px;
                border: 1px solid rgba(251, 146, 60, 0.16);
                background:
                    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(13, 24, 48, 0.88)),
                    linear-gradient(135deg, rgba(251, 146, 60, 0.08), rgba(37, 99, 235, 0.06));
                box-shadow: 0 12px 30px rgba(2, 6, 23, 0.22);
                color: #e2e8f0;
                line-height: 1.4;
                text-align: left;
            }

            .welcome-proof-card strong {
                display: block;
                font-size: 0.82rem;
                font-weight: 600;
                color: #cbd5e1;
            }

            .welcome-proof-label {
                display: inline-block;
                margin-bottom: 3px;
                color: #fb923c;
                font-size: 0.64rem;
                letter-spacing: 0.12em;
                text-transform: uppercase;
            }

            #welcome-screen.welcome-hiding {
                opacity: 0;
                transform: translateY(-24px);
                pointer-events: none;
            }

            #welcome-screen.welcome-hidden {
                display: none;
            }

            /* Ambient background glow */
            .welcome-bg-glow {
                position: absolute;
                top: 35%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 480px;
                height: 480px;
                background: radial-gradient(circle, rgba(251, 146, 60, 0.08) 0%, rgba(37, 99, 235, 0.05) 50%, transparent 75%);
                border-radius: 50%;
                filter: blur(40px);
                animation: welcomeGlowPulse 16s ease-in-out infinite;
                pointer-events: none;
            }

            @keyframes welcomeGlowPulse {
                0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
                50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
            }

            /* Logo container */
            .welcome-logo-wrap {
                position: relative;
                width: 96px;
                height: 96px;
                margin-bottom: 10px;
                flex-shrink: 0;
            }

            .welcome-logo-img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 48px;
                height: 48px;
                border-radius: 50%;
                object-fit: cover;
                border: 2.5px solid rgba(251, 146, 60, 0.45);
                box-shadow:
                    0 0 0 3px rgba(251, 146, 60, 0.1),
                    0 0 30px rgba(251, 146, 60, 0.25),
                    0 0 60px rgba(251, 146, 60, 0.08);
                z-index: 3;
                animation: welcomeLogoFloat 14s ease-in-out infinite;
            }

            @keyframes welcomeLogoFloat {
                0%, 100% { transform: translate(-50%, -50%) translateY(0); }
                50% { transform: translate(-50%, -50%) translateY(-8px); }
            }

            /* Pulsing rings */
            .welcome-ring {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                border: 1px solid rgba(251, 146, 60, 0.3);
            }

            .welcome-ring.ring1 {
                width: 60px;
                height: 60px;
                border-color: rgba(251, 146, 60, 0.35);
                animation: welcomeRingPulse 11s ease-in-out infinite 0s;
            }

            .welcome-ring.ring2 {
                width: 80px;
                height: 80px;
                border-color: rgba(251, 146, 60, 0.2);
                animation: welcomeRingPulse 13s ease-in-out infinite 0.9s;
            }

            .welcome-ring.ring3 {
                width: 98px;
                height: 98px;
                border-color: rgba(37, 99, 235, 0.15);
                animation: welcomeRingPulse 15s ease-in-out infinite 1.8s;
            }

            @keyframes welcomeRingPulse {
                0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
                50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
            }

            /* Heading */
            .welcome-heading {
                font-size: 1.85rem;
                font-weight: 700;
                text-align: center;
                width: min(100%, var(--welcome-content-width));
                max-width: min(780px, var(--welcome-content-width));
                margin-bottom: 5px;
                letter-spacing: -0.03em;
                line-height: 1.2;
                background: linear-gradient(135deg, #f9fafb 40%, #fb923c 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                animation: welcomeFadeUp 0.7s ease forwards;
                opacity: 0;
                transform: translateY(16px);
            }

            .welcome-sub {
                font-size: 0.9rem;
                color: #64748b;
                text-align: center;
                width: min(100%, var(--welcome-content-width));
                max-width: min(780px, var(--welcome-content-width));
                margin-bottom: 12px;
                animation: welcomeFadeUp 0.7s ease 0.15s forwards;
                opacity: 0;
                transform: translateY(16px);
            }

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

            /* Input wrap */
            .welcome-input-wrap {
                width: 100%;
                max-width: min(580px, var(--welcome-content-width));
                position: relative;
                margin-bottom: 8px;
                animation: welcomeFadeUp 0.7s ease 0.25s forwards;
                opacity: 0;
                transform: translateY(16px);
            }

            .welcome-placeholder-fade {
                position: absolute;
                left: 16px;
                right: 54px;
                top: 12px;
                color: rgba(100, 116, 139, 0.96);
                font-size: 15px;
                line-height: 1.5;
                pointer-events: none;
                opacity: 1;
                transform: translateY(0);
                transition: opacity 0.48s ease, transform 0.48s ease, filter 0.48s ease;
                filter: blur(0);
                z-index: 3;
            }

            .welcome-placeholder-fade.is-switching {
                opacity: 0;
                transform: translateY(8px);
                filter: blur(4px);
            }

            .welcome-input-wrap.has-value .welcome-placeholder-fade,
            .welcome-input-wrap.is-focused .welcome-placeholder-fade {
                opacity: 0;
                transform: translateY(-6px);
                filter: blur(4px);
            }

            .welcome-input-wrap textarea {
                width: 100%;
                padding: 11px 52px 11px 16px;
                background: linear-gradient(180deg, rgba(9, 16, 32, 0.96), rgba(12, 22, 42, 0.94));
                border: 1px solid rgba(251, 146, 60, 0.22);
                border-radius: 14px;
                color: #f9fafb;
                font-size: 15px;
                font-family: 'Inter', sans-serif;
                outline: none;
                resize: none;
                min-height: 44px;
                max-height: 120px;
                overflow-y: auto;
                transition: border-color 0.2s, box-shadow 0.2s;
                line-height: 1.5;
                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
                overflow-y: hidden;
                position: relative;
                z-index: 2;
            }

            .welcome-input-wrap textarea:focus {
                border-color: rgba(251, 146, 60, 0.6);
                box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.1), 0 6px 30px rgba(0, 0, 0, 0.4);
            }

            .welcome-send-btn {
                position: absolute;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
                width: 34px;
                height: 34px;
                background: linear-gradient(135deg, #fb923c, #f97316);
                border: none;
                border-radius: 10px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                transition: transform 0.2s, box-shadow 0.2s;
                box-shadow: 0 2px 14px rgba(251, 146, 60, 0.45);
            }

            .welcome-send-btn:hover {
                transform: translateY(-50%) scale(1.06);
                box-shadow: 0 4px 20px rgba(251, 146, 60, 0.55);
            }

            /* Quick chips */
            .welcome-chips {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                justify-content: center;
                width: min(100%, var(--welcome-content-width));
                max-width: min(580px, var(--welcome-content-width));
                animation: welcomeFadeUp 0.7s ease 0.4s forwards;
                opacity: 0;
                transform: translateY(16px);
            }

            .welcome-chip {
                padding: 6px 13px;
                background: rgba(251, 146, 60, 0.07);
                border: 1px solid rgba(251, 146, 60, 0.18);
                border-radius: 24px;
                color: #94a3b8;
                font-size: 13px;
                font-family: 'Inter', sans-serif;
                cursor: pointer;
                transition: all 0.2s ease;
                white-space: nowrap;
            }

            .welcome-chip:hover {
                background: rgba(251, 146, 60, 0.15);
                border-color: rgba(251, 146, 60, 0.45);
                color: #fb923c;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(251, 146, 60, 0.12);
            }

            .welcome-trust-strip {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 8px;
                width: min(100%, var(--welcome-content-width));
                max-width: min(760px, var(--welcome-content-width));
                margin-top: 8px;
                animation: welcomeFadeUp 0.9s ease 0.5s forwards;
                opacity: 0;
                transform: translateY(16px);
            }

            .welcome-trust-strip span {
                padding: 5px 10px;
                border-radius: 999px;
                background: rgba(15, 23, 42, 0.78);
                border: 1px solid rgba(148, 163, 184, 0.12);
                color: #cbd5e1;
                font-size: 0.75rem;
            }

            /* ── Mobile compact mode (≤ 640px) ── */
            @media (max-width: 640px) {
                /* Navbar: tighten so logo doesn't overflow */
                .navbar {
                    padding: 0 10px;
                    height: 52px;
                    gap: 6px;
                }
                .navbar-left {
                    gap: 4px;
                    left: 8px;
                }
                .navbar-actions {
                    gap: 4px;
                }
                .navbar-action-btn {
                    padding: 6px;
                    width: 34px;
                    height: 34px;
                }
                .navbar-action-btn svg {
                    width: 17px;
                    height: 17px;
                }
                /* On very small screens, hide the logo text and show only the image */
                .logo h1 {
                    display: none;
                }
                .logo-img {
                    width: 26px;
                    height: 26px;
                }
                .logo {
                    margin-left: 0;
                }
                .hamburger-menu span {
                    width: 22px;
                    height: 2.5px;
                }

                /* Welcome screen: center content vertically, scroll on short screens */
                #welcome-screen {
                    justify-content: flex-start;
                    padding: max(16px, 5dvh) 14px max(110px, 18dvh);
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                }

                /* Smaller kicker badge */
                .welcome-kicker {
                    font-size: 0.60rem;
                    padding: 6px 12px;
                    margin-bottom: 10px;
                    letter-spacing: 0.08em;
                    max-width: 100%;
                }

                /* Much smaller logo orbit */
                .welcome-logo-wrap {
                    width: 88px;
                    height: 88px;
                    margin-bottom: 14px;
                }
                .welcome-logo-img {
                    width: 44px;
                    height: 44px;
                }
                .welcome-ring.ring1 { width: 62px; height: 62px; }
                .welcome-ring.ring2 { width: 76px; height: 76px; }
                .welcome-ring.ring3 { width: 90px; height: 90px; }

                /* Compact heading */
                .welcome-heading {
                    font-size: 1.45rem;
                    margin-bottom: 6px;
                    letter-spacing: -0.02em;
                }
                .welcome-sub {
                    font-size: 0.85rem;
                    margin-bottom: 14px;
                    line-height: 1.5;
                }

                /* Proof grid: collapse to a single rotating card */
                .welcome-proof-grid {
                    display: block;
                    position: relative;
                    max-width: 100%;
                    min-height: 80px;
                    margin-bottom: 12px;
                }
                .welcome-proof-card {
                    padding: 9px 12px;
                    position: absolute;
                    inset: 0;
                    opacity: 0;
                    pointer-events: none;
                    transform: translateY(8px) scale(0.98);
                    transition: opacity 0.5s ease, transform 0.5s ease;
                }
                .welcome-proof-card strong { font-size: 0.84rem; }
                .welcome-proof-card.is-active {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translateY(0) scale(1);
                }

                /* Input - adequately sized for mobile tap targets */
                .welcome-input-wrap {
                    margin-bottom: 10px;
                }
                .welcome-input-wrap textarea {
                    padding: 15px 52px 15px 16px;
                    font-size: 16px; /* prevent iOS zoom */
                    min-height: 64px;
                    border-radius: 14px;
                }
                .welcome-send-btn {
                    width: 36px;
                    height: 36px;
                    right: 9px;
                    top: 50%;
                    transform: translateY(-50%);
                    border-radius: 9px;
                }

                /* Chips: tighter & smaller text */
                .welcome-chips {
                    gap: 7px;
                    max-width: 100%;
                }
                .welcome-chip {
                    font-size: 11.5px;
                    padding: 6px 11px;
                }

                /* Trust strip: hide on very small screens to save vertical space */
                .welcome-trust-strip {
                    display: none;
                }

                /* Composer adjustments */
                .composer-shell { gap: 4px; }
                .composer-surface { padding: 9px 11px 7px; border-radius: 16px; gap: 7px; }
                .composer-shell #message-input { min-height: 34px; font-size: 16px; } /* 16px prevents iOS zoom */
                .composer-controls { gap: 5px; }
                .composer-icon-btn,
                #send-button { width: 32px; height: 32px; }
                .composer-followup {
                    margin-bottom: 3px;
                }
                .composer-followup-chip {
                    font-size: 0.65rem;
                    padding: 3px 9px 3px 7px;
                }
                .composer-disclaimer { font-size: 0.70rem; line-height: 1.25; }

                /* User input bar: always sticky at bottom (layout only; visibility controlled by JS) */
                .conversation .user-input {
                    position: relative !important;
                    bottom: auto !important;
                    left: auto !important;
                    right: auto !important;
                    width: auto !important;
                    padding: 10px 12px !important;
                    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
                    z-index: 50 !important;
                    background: linear-gradient(to top, rgba(8, 13, 26, 0.99) 80%, rgba(8, 13, 26, 0.92)) !important;
                    backdrop-filter: blur(20px) !important;
                    -webkit-backdrop-filter: blur(20px) !important;
                    margin-top: auto;
                }
                /* Keep the scrollable message area fully visible above the in-flow composer */
                .conversation #messages {
                    padding-bottom: 24px !important;
                }

                /* Row height accounting for compact navbar */
                .row {
                    margin-top: 52px !important;
                    height: calc(100vh - 52px) !important;
                    height: calc(100dvh - 52px) !important;
                    min-height: calc(100vh - 52px) !important;
                    min-height: calc(100dvh - 52px) !important;
                }
            }

            /* Extra small screens below 400px */
            @media (max-width: 400px) {
                .welcome-heading { font-size: 1.25rem; }
                .welcome-logo-wrap { width: 72px; height: 72px; margin-bottom: 10px; }
                .welcome-logo-img { width: 36px; height: 36px; }
                .welcome-ring.ring1 { width: 50px; height: 50px; }
                .welcome-ring.ring2 { width: 62px; height: 62px; }
                .welcome-ring.ring3 { display: none; }
                .welcome-kicker { display: none; }
                #welcome-screen { padding: max(8px, 3dvh) 12px max(110px, 18dvh); }
                /* Very small: only first 3 chips visible to prevent overflow */
                .welcome-chip:nth-child(n+4) { display: none; }
            }


            /* Ensure .conversation is relative for absolute welcome screen */
            .conversation {
                position: relative !important;
            }

            /* ═══════════════════════════════════════════
               LOGO RESPONDING ANIMATION
            ═══════════════════════════════════════════ */
            #messages .message .user.logo-responding {
                overflow: visible !important;
                border-radius: 10px;
                animation: logoOutlinePulse 1.8s ease-in-out infinite;
            }

            @keyframes logoOutlinePulse {
                0%, 100% {
                    box-shadow:
                        0 0 0 2px rgba(251, 146, 60, 0.35),
                        0 0 12px rgba(251, 146, 60, 0.15);
                }
                50% {
                    box-shadow:
                        0 0 0 3px rgba(251, 146, 60, 0.65),
                        0 0 28px rgba(251, 146, 60, 0.35),
                        0 0 56px rgba(251, 146, 60, 0.1);
                }
            }

            /* Spinning arc around responding logo */
            #messages .message .user.logo-responding::before {
                content: '';
                position: absolute;
                inset: -5px;
                border-radius: 13px;
                border: 2px solid transparent;
                border-top-color: #fb923c;
                border-right-color: rgba(249, 115, 22, 0.5);
                animation: logoSpinArc 1.4s linear infinite;
                z-index: 5;
            }

            @keyframes logoSpinArc {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }

            /* Logo image breathes */
            #messages .message .user.logo-responding img {
                animation: logoImgBreath 1.8s ease-in-out infinite;
            }

            @keyframes logoImgBreath {
                0%, 100% {
                    filter: brightness(1) drop-shadow(0 0 5px rgba(251, 146, 60, 0.35));
                    transform: scale(1);
                }
                50% {
                    filter: brightness(1.12) drop-shadow(0 0 14px rgba(251, 146, 60, 0.7));
                    transform: scale(1.05);
                }
            }

            /* Message area background */
            #messages {
                background: transparent !important;
            }

            .box#messages {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                backdrop-filter: none !important;
            }

            /* ── Hide main input bar when welcome screen is active ── */
            #welcome-screen:not(.welcome-hidden) ~ .user-input {
                opacity: 0 !important;
                visibility: hidden !important;
                pointer-events: none !important;
                transform: translateY(18px) scale(0.985) !important;
            }

            /* ══════════════════════════════════════════
               EPIC ANIMATIONS
            ══════════════════════════════════════════ */

            /* Message bubble entrance */
            @keyframes msgSlideIn {
                from { opacity: 0; transform: translateY(20px) scale(0.97); }
                to   { opacity: 1; transform: translateY(0)    scale(1); }
            }
            .message {
                animation: msgSlideIn 0.38s cubic-bezier(0.34, 1.3, 0.64, 1) both;
            }

            /* Conversation sidebar item — enter */
            @keyframes convoEnter {
                from { opacity: 0; transform: translateX(-18px); }
                to   { opacity: 1; transform: translateX(0); }
            }
            .convo.convo-entering {
                animation: convoEnter 0.32s cubic-bezier(0.34, 1.2, 0.64, 1) both;
                opacity: 0;
            }

            /* Conversation sidebar item — exit */
            @keyframes convoExit {
                from { opacity: 1; transform: translateX(0) scaleY(1);   max-height: 60px; margin-bottom: 4px; padding: 8px 12px; }
                to   { opacity: 0; transform: translateX(-20px) scaleY(0.6); max-height: 0;   margin-bottom: 0;  padding: 0; }
            }
            .convo.convo-exiting {
                animation: convoExit 0.3s cubic-bezier(0.4, 0, 0.6, 1) forwards;
                overflow: hidden;
                pointer-events: none;
            }

            /* Send button click pulse */
            @keyframes sendPulse {
                0%   { transform: scale(1);    box-shadow: 0 2px 12px rgba(251,146,60,0.3); }
                40%  { transform: scale(0.88); box-shadow: 0 1px 6px  rgba(251,146,60,0.15); }
                100% { transform: scale(1);    box-shadow: 0 2px 12px rgba(251,146,60,0.3); }
            }
            #send-button.sending {
                animation: sendPulse 0.35s ease forwards;
            }

            /* Welcome chips staggered entrance */
            .welcome-chips .welcome-chip:nth-child(1) { animation-delay: 0.45s; }
            .welcome-chips .welcome-chip:nth-child(2) { animation-delay: 0.52s; }
            .welcome-chips .welcome-chip:nth-child(3) { animation-delay: 0.59s; }
            .welcome-chips .welcome-chip:nth-child(4) { animation-delay: 0.66s; }
            .welcome-chips .welcome-chip:nth-child(5) { animation-delay: 0.73s; }
            .welcome-chips .welcome-chip:nth-child(6) { animation-delay: 0.80s; }

            /* Floating particles in welcome screen */
            .welcome-particle {
                position: absolute;
                border-radius: 50%;
                background: rgba(251, 146, 60, 0.35);
                animation: particleFloat linear infinite;
                pointer-events: none;
                z-index: 1;
            }
            @keyframes particleFloat {
                0%   { transform: translateY(0)    translateX(0);              opacity: 0; }
                10%  { opacity: 0.7; }
                90%  { opacity: 0.3; }
                100% { transform: translateY(-110vh) translateX(var(--drift)); opacity: 0; }
            }

            /* Disclaimer / login modal entrance */
            @keyframes modalPop {
                from { opacity: 0; transform: scale(0.9) translateY(20px); }
                to   { opacity: 1; transform: scale(1)   translateY(0); }
            }
            #disclaimer-modal > div,
            #login-modal > div {
                animation: modalPop 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both;
            }

            /* Logo shimmer — only while AI is responding */
            .logo h1 {
                background-size: 200% auto;
            }
            body.ai-responding .logo h1 {
                animation: logoShimmer 7.2s linear infinite;
            }
            @keyframes logoShimmer {
                0%   { background-position: -200% center; }
                100% { background-position:  200% center; }
            }

            /* Input focus glow pulse */
            @keyframes inputGlowPulse {
                0%, 100% { box-shadow: 0 0 0 3px rgba(251,146,60,0.10), 0 4px 20px rgba(0,0,0,0.3); }
                50%       { box-shadow: 0 0 0 3px rgba(251,146,60,0.22), 0 4px 28px rgba(251,146,60,0.08); }
            }
            #message-input:focus,
            #welcome-input:focus {
                animation: inputGlowPulse 7s ease infinite;
            }

            /* Mobile — lighter message animation */
            @media (max-width: 768px) {
                .message {
                    animation-duration: 0.28s;
                }
                .convo.convo-entering {
                    animation-duration: 0.22s;
                }
            }


/* ═══════════════════════════════════════════
   TOOL RESULT CARDS + TPS BADGE — from inline <style> block
═══════════════════════════════════════════ */

            .tool-result-card {
                margin-top: 10px;
                padding: 10px 14px;
                border-radius: 8px;
                font-size: 0.9rem;
                line-height: 1.5;
            }
            .tool-result-card.tool-success {
                background: rgba(34,197,94,0.12);
                border: 1px solid rgba(34,197,94,0.3);
                color: #86efac;
            }
            .tool-result-card.tool-error {
                background: rgba(239,68,68,0.1);
                border: 1px solid rgba(239,68,68,0.3);
                color: #fca5a5;
            }
            /* ── Thinking display ── */
            .thinking-display {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 6px 14px 6px 10px;
                background: rgba(99, 102, 241, 0.08);
                border: 1px solid rgba(99, 102, 241, 0.2);
                border-radius: 20px;
            }
            .thinking-word {
                font-size: 0.88rem;
                font-weight: 600;
                color: #a5b4fc;
                letter-spacing: 0.01em;
                animation: thinkWordFade 0.14s ease;
            }
            @keyframes thinkWordFade {
                0%   { opacity: 0.4; transform: translateY(3px); }
                100% { opacity: 1;   transform: translateY(0); }
            }
            .thinking-elapsed {
                font-size: 0.75rem;
                color: #4b5563;
                font-family: ui-monospace, monospace;
                min-width: 22px;
            }

            /* Tool pending animation */
            .tool-pending-anim {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                margin-top: 10px;
                padding: 8px 14px;
                background: rgba(99,102,241,0.12);
                border: 1px solid rgba(99,102,241,0.3);
                border-radius: 8px;
                font-size: 0.88rem;
                color: #a5b4fc;
                animation: toolPendingFade 0.4s ease;
            }
            @keyframes toolPendingFade {
                from { opacity: 0; transform: translateY(4px); }
                to   { opacity: 1; transform: translateY(0); }
            }
            .tool-pending-dots span {
                display: inline-block;
                animation: toolDot 1.2s infinite ease-in-out both;
                font-size: 1.1em;
                color: #818cf8;
            }
            .tool-pending-dots span:nth-child(2) { animation-delay: 0.2s; }
            .tool-pending-dots span:nth-child(3) { animation-delay: 0.4s; }
            @keyframes toolDot {
                0%, 80%, 100% { opacity: 0.2; }
                40% { opacity: 1; }
            }

            /* Removed chat flag button */
            .legacy-chat-flag-btn {
                display: inline-block;
                margin-top: 6px;
                padding: 3px 10px;
                font-size: 0.78rem;
                color: var(--muted-foreground, #6b7280);
                background: none;
                border: 1px solid transparent;
                border-radius: 6px;
                cursor: pointer;
                opacity: 0;
                transition: opacity 0.2s, border-color 0.2s, color 0.2s;
            }
            .message:hover .legacy-chat-flag-btn { opacity: 1; }
            .legacy-chat-flag-btn:hover {
                border-color: rgba(239,68,68,0.4);
                color: #fca5a5;
            }
            .legacy-chat-flag-btn:disabled { cursor: default; color: #6b7280; border-color: transparent; }

            /* ── Live response cursor dot ── */
            .response-cursor {
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.9);
                margin-left: 5px;
                vertical-align: middle;
                position: relative;
                top: -1px;
                animation: responseCursorPulse 0.7s ease-in-out infinite;
                box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
            }
            @keyframes responseCursorPulse {
                0%, 100% { opacity: 1;   transform: scale(1); }
                50%       { opacity: 0.2; transform: scale(0.6); }
            }

            /* ── Tokens/s badge ── */
            .tps-badge {
                display: inline-flex;
                align-items: center;
                font-size: 0.62rem;
                color: rgba(251, 146, 60, 0.8);
                background: rgba(251, 146, 60, 0.08);
                border: 1px solid rgba(251, 146, 60, 0.14);
                border-radius: 999px;
                padding: 1px 7px;
                margin-left: 8px;
                font-family: ui-monospace, 'Cascadia Code', monospace;
                letter-spacing: 0.02em;
                vertical-align: middle;
                opacity: 0;
                white-space: nowrap;
                animation: tpsFadeIn 0.4s ease 0.15s forwards;
            }
            @keyframes tpsFadeIn {
                to { opacity: 1; }
            }