* {
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
        }
        .hidden {
            display: none !important;
        }
        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #09090b;
            color: #fafafa;
            overflow-x: hidden;
        }

        /* User message bubble */
        .user-bubble-gradient {
            background: #18181b;
            border: 1px solid #27272a;
        }

        /* Bot avatar */
        .sparkle-avatar-gradient {
            background: #27272a;
            border: 1px solid #3f3f46;
        }

        /* Hide scrollbars but keep scrolling */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* ================================================================ */
        /* === MARKDOWN RENDERING (DARK MODE) === */
        /* ================================================================ */
        .markdown-body {
            color: #d4d4d8;
            font-size: 0.84rem;
            line-height: 1.65;
        }
        .markdown-body p { margin-bottom: 0.65rem; }
        .markdown-body p:last-child { margin-bottom: 0; }
        .markdown-body ul { list-style-type: disc; margin-left: 1.15rem; margin-bottom: 0.65rem; }
        .markdown-body ol { list-style-type: decimal; margin-left: 1.15rem; margin-bottom: 0.65rem; }
        .markdown-body li { margin-bottom: 0.25rem; }
        .markdown-body h1, .markdown-body h2, .markdown-body h3 { font-weight: 700; color: #fafafa; margin-top: 0.85rem; margin-bottom: 0.4rem; }
        .markdown-body h1 { font-size: 1.05rem; }
        .markdown-body h2 { font-size: 0.95rem; }
        .markdown-body h3 { font-size: 0.875rem; }
        .markdown-body strong { color: #fafafa; font-weight: 700; }
        .markdown-body code {
            font-family: 'JetBrains Mono', monospace;
            background: rgba(255, 255, 255, 0.07);
            color: #a1a1aa;
            padding: 0.15rem 0.35rem;
            border-radius: 0.3rem;
            font-size: 0.76rem;
        }
        .markdown-body hr { border: 0; border-top: 1px solid #27272a; margin: 0.85rem 0; }

        .markdown-body a {
            color: #60a5fa;
            text-decoration: underline;
        }
        .markdown-body a[href^="/downloads/"] {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.75rem;
            border-radius: 0.5rem;
            background: rgba(16, 185, 129, 0.12);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #34d399;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.8rem;
            margin: 0.25rem 0;
            transition: background 0.15s ease;
        }
        .markdown-body a[href^="/downloads/"]:active {
            background: rgba(16, 185, 129, 0.25);
            transform: scale(0.97);
        }
        .markdown-body a[href$=".pdf"] {
            background: rgba(244, 63, 94, 0.1);
            border-color: rgba(244, 63, 94, 0.3);
            color: #fb7185;
        }
        .markdown-body a[href$=".pdf"]:active {
            background: rgba(244, 63, 94, 0.2);
            transform: scale(0.97);
        }
        .markdown-body a[href*=".html"] {
            background: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.3);
            color: #60a5fa;
        }
        .markdown-body a[href*=".html"]:active {
            background: rgba(59, 130, 246, 0.2);
            transform: scale(0.97);
        }

        /* ================================================================ */
        /* === TABLE (SWIPEABLE DARK) === */
        /* ================================================================ */
        .table-wrapper {
            overflow-x: auto;
            margin: 0.75rem 0;
            border: 1px solid #27272a;
            border-radius: 0.75rem;
            background: #0c0c10;
            -webkit-overflow-scrolling: touch;
        }
        .markdown-body table { 
            width: 100%; 
            border-collapse: collapse; 
            font-size: 0.75rem; 
            text-align: left;
        }
        .markdown-body th { 
            background-color: #18181b; 
            color: #a1a1aa; 
            font-weight: 600; 
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 0.6rem 0.85rem; 
            border-bottom: 1px solid #27272a; 
            white-space: nowrap;
        }
        .markdown-body td { 
            padding: 0.55rem 0.85rem; 
            border-bottom: 1px solid #18181b; 
            color: #d4d4d8;
            white-space: nowrap;
        }
        .markdown-body tr:last-child td { border-bottom: none; }
        .markdown-body tbody tr:hover { background-color: rgba(63,63,70,0.15); }

        .typing-pulse::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 13px;
            background-color: #a1a1aa;
            margin-left: 4px;
            vertical-align: -1px;
            animation: pulseCursor 0.8s infinite;
        }
        @keyframes pulseCursor {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* ================================================================ */
        /* === QUICK ACTION CARDS (CLEAN SOLID) === */
        /* ================================================================ */
        .glass-card-3d {
            background: #18181b;
            border: 1px solid #27272a;
            transition: transform 0.15s ease, border-color 0.15s ease;
            position: relative;
            overflow: hidden;
        }
        .glass-card-3d:active {
            transform: scale(0.97);
            border-color: #3f3f46;
        }

        /* Card icon container */
        .card-icon-wrap {
            width: 32px; height: 32px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
        }
        .card-icon-wrap.icon-fuchsia { background: rgba(161,161,170,0.12); border: 1px solid #3f3f46; }
        .card-icon-wrap.icon-pink    { background: rgba(161,161,170,0.12); border: 1px solid #3f3f46; }
        .card-icon-wrap.icon-purple  { background: rgba(161,161,170,0.12); border: 1px solid #3f3f46; }
        .card-icon-wrap.icon-amber   { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); }

        /* Card entrance */
        .m-stagger-in {
            animation: cardEntrance 0.35s ease both;
        }
        .m-stagger-in:nth-child(1) { animation-delay: 0.03s; }
        .m-stagger-in:nth-child(2) { animation-delay: 0.08s; }
        .m-stagger-in:nth-child(3) { animation-delay: 0.13s; }
        .m-stagger-in:nth-child(4) { animation-delay: 0.18s; }
        @keyframes cardEntrance {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Welcome view entrance */
        .m-welcome-entrance {
            animation: mWelcomeSlide 0.4s ease both;
        }
        @keyframes mWelcomeSlide {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ================================================================ */
        /* === INPUT DOCK === */
        /* ================================================================ */
        .input-dock-3d {
            position: relative;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .input-dock-3d:focus-within {
            border-color: #3f3f46 !important;
            box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
        }

        /* Search bar */
        .search-glow { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
        .search-glow:focus {
            box-shadow: 0 0 0 1px rgba(63,63,70,0.5);
        }

        /* ================================================================ */
        /* === HISTORY CARD === */
        /* ================================================================ */
        .history-card-modern {
            transition: background 0.15s ease, transform 0.15s ease;
            border: 1px solid transparent;
        }
        .history-card-modern:active {
            transform: scale(0.98);
            background: rgba(63,63,70,0.15);
            border-color: #27272a;
        }

        /* Send button */
        .btn-gradient-border {
            transition: transform 0.15s ease;
        }
        .btn-gradient-border:active {
            transform: scale(0.9);
        }

        /* Header */
        .header-float {
            backdrop-filter: blur(16px) saturate(150%);
            -webkit-backdrop-filter: blur(16px) saturate(150%);
            background: rgba(9,9,11,0.8);
            border-bottom: 1px solid #1a1a1e;
        }

        /* Model selector pill */
        .model-pill-3d {
            background: #18181b;
            border: 1px solid #27272a;
            transition: transform 0.15s ease;
        }
        .model-pill-3d:active {
            transform: scale(0.95);
        }

        /* Glass card (backward compat) */
        .glass-card {
            background: #18181b;
            border: 1px solid #27272a;
            transition: transform 0.15s ease;
        }
        .glass-card:active { transform: scale(0.97); }

        /* Ambient glow, aurora orbs, particles — intentionally removed (anti-slop) */
        .ambient-glow,
        .aurora-orb,
        .particle-field {
            display: none !important;
        }

        /* Shimmer text — render as plain white bold instead */
        .mobile-text-shimmer {
            color: #fafafa;
            -webkit-text-fill-color: #fafafa;
        }

        /* Accent dot — clean underline, no glow */
        .accent-dot-glow { position: relative; }
        .accent-dot-glow::after {
            content: '';
            position: absolute;
            bottom: -2px; left: 0;
            width: 20px; height: 2px;
            border-radius: 1px;
            background: #3f3f46;
        }

        /* ================================================================ */
        /* === MOBILE ERGONOMICS & SMOOTH PERFORMANCE OPTIMIZATIONS === */
        /* ================================================================ */
        html, body {
            overscroll-behavior-y: none;
            -webkit-text-size-adjust: 100%;
            touch-action: pan-y;
        }

        #mainScrollArea {
            overscroll-behavior-y: contain;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }

        /* Prevent unwanted iOS Safari page zoom bouncing on focus */
        @media screen and (max-width: 768px) {
            input:not([type="checkbox"]):not([type="radio"]), 
            select {
                font-size: 16px !important;
            }
            #mobileChatInput {
                font-size: 15px !important;
            }
        }

        /* Smooth momentum scroll on horizontal swipe containers */
        #mQuickPromptCardsContainer,
        .table-wrapper {
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }

        /* Elegant slim scrollbar for tables on mobile */
        .table-wrapper::-webkit-scrollbar {
            height: 4px;
        }
        .table-wrapper::-webkit-scrollbar-track {
            background: #18181b;
        }
        .table-wrapper::-webkit-scrollbar-thumb {
            background: #3f3f46;
            border-radius: 2px;
        }

        /* Layout containment for chat bubbles to prevent re-layout lag */
        .msg-bubble-wrap {
            contain: layout style;
            content-visibility: auto;
        }

        /* Safe area drawer padding */
        #mobileDrawer {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }

        /* Bottom sheet slide-up animation */
        @keyframes slideUpSheet {
            from {
                transform: translateY(100%);
                opacity: 0.8;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        .animate-slide-up {
            animation: slideUpSheet 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }