* {
    font-family: "Inter", sans-serif;
            }
            body {
                background: #191a1a;
            }

            /* Scrollbar */
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            ::-webkit-scrollbar-track {
                background: transparent;
            }
            ::-webkit-scrollbar-thumb {
                background: #313333;
                border-radius: 3px;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: #444;
            }
            * {
                scrollbar-width: thin;
                scrollbar-color: #313333 transparent;
            }

            /* Thread item in sidebar */
            .thread-item {
                transition: all 0.15s;
                border-radius: 8px;
            }
            .thread-item:hover {
                background: #2a2c2c;
            }
            .thread-item.active {
                background: rgba(34, 211, 238, 0.08);
            }

            /* Input area – Perplexity style */
            .pp-input {
                background: #202222;
                border: 1px solid #313333;
                border-radius: 10px;
                transition:
                    border-color 0.2s,
                    box-shadow 0.2s;
            }
            .pp-input:focus-within {
                border-color: rgba(34, 211, 238, 0.35);
                box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.06);
            }

            /* Inline citation badge */
            .cite {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 18px;
                height: 18px;
                padding: 0 4px;
                border-radius: 4px;
                background: rgba(34, 211, 238, 0.12);
                color: #22d3ee;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                vertical-align: super;
                margin: 0 1px;
                transition: background 0.2s;
                text-decoration: none;
            }
            .cite:hover {
                background: rgba(34, 211, 238, 0.25);
            }

            /* Source list item (right sidebar) */
            .src-item {
                display: block;
                border-radius: 10px;
                border: 1px solid #313333;
                background: #242626;
                padding: 12px;
                transition: all 0.15s;
                text-decoration: none;
                color: inherit;
            }
            .src-item:hover {
                background: #2a2c2c;
                border-color: rgba(34, 211, 238, 0.3);
            }

            /* Source sidebar (right panel) */
            #sourceSidebar {
                width: 0;
                min-width: 0;
                overflow: hidden;
                transition:
                    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    min-width 0.3s;
            }
            #sourceSidebar.open {
                width: 320px;
                min-width: 320px;
            }

            /* Mobile overlay */
            #sidebarOverlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.6);
                z-index: 40;
            }
            #sidebarOverlay.visible {
                display: block;
            }

            @media (max-width: 767px) {
                #sidebar {
                    position: fixed;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    z-index: 50;
                    transform: translateX(-100%);
                    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                    width: 280px !important;
                }
                #sidebar.mobile-open {
                    transform: translateX(0);
                }
                #sourceSidebar.open {
                    position: fixed;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    z-index: 50;
                    width: 300px !important;
                    min-width: 0 !important;
                }
                #sourceSidebar {
                    position: fixed;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    z-index: 50;
                }

                /* Fix mobile: use dvh so viewport excludes browser chrome/nav bar */
                body {
                    height: 100dvh;
                    min-height: 100dvh;
                    max-height: 100dvh;
                    overflow: hidden;
                }
                main {
                    height: 100dvh;
                    max-height: 100dvh;
                }
                #chatArea,
                #emptyStateWrap {
                    height: 100%;
                }

                /* Input bar: pad bottom by safe-area (Android nav bar / iOS home indicator) */
                .border-t.border-pp-border.bg-pp-bg\/90 {
                    padding-bottom: calc(
                        1rem + env(safe-area-inset-bottom, 0px)
                    );
                }
                /* Prevent page zoom on input focus (font-size must be >= 16px) */
                textarea {
                    font-size: 16px !important;
                }
            }

            /* Prose – answer content */
            .prose-ans {
                line-height: 1.8;
                color: #e8e8e8;
            }
            .prose-ans h1,
            .prose-ans h2,
            .prose-ans h3 {
                color: #f5f5f5;
                font-weight: 600;
                margin: 1.1em 0 0.4em;
            }
            .prose-ans h1 {
                font-size: 1.25rem;
            }
            .prose-ans h2 {
                font-size: 1.1rem;
            }
            .prose-ans h3 {
                font-size: 1rem;
            }
            .prose-ans p {
                margin: 0.6em 0;
            }
            .prose-ans strong {
                color: #f5f5f5;
                font-weight: 600;
            }
            .prose-ans ul,
            .prose-ans ol {
                margin: 0.5em 0;
                padding-left: 1.5em;
            }
            .prose-ans li {
                margin: 0.3em 0;
            }
            .prose-ans li::marker {
                color: #6b6b6b;
            }
            .prose-ans blockquote {
                border-left: 3px solid #313333;
                padding-left: 1em;
                color: #a1a1a1;
                margin: 0.5em 0;
            }
            .prose-ans code {
                font-family: "JetBrains Mono", monospace;
                background: #242626;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 0.85em;
                color: #22d3ee;
            }
            .prose-ans pre {
                background: #1c1e1e;
                border: 1px solid #313333;
                border-radius: 10px;
                padding: 1rem;
                overflow-x: auto;
                margin: 0.75em 0;
            }
            .prose-ans pre code {
                background: transparent;
                padding: 0;
                color: inherit;
                font-size: 0.875em;
            }
            .prose-ans table {
                border-collapse: collapse;
                width: 100%;
                margin: 0.75em 0;
            }
            .prose-ans th,
            .prose-ans td {
                border: 1px solid #313333;
                padding: 0.5em 0.75em;
                text-align: left;
            }
            .prose-ans th {
                background: #202222;
                color: #f5f5f5;
                font-weight: 600;
            }
            /* Scrollable table wrapper for wide tables */
            .prose-ans .table-wrapper {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                margin: 0.75em 0;
                border-radius: 6px;
                border: 1px solid #313333;
            }
            .prose-ans .table-wrapper table {
                margin: 0;
                min-width: 600px;
                width: auto;
            }
            .prose-ans .table-wrapper::-webkit-scrollbar {
                height: 6px;
            }
            .prose-ans .table-wrapper::-webkit-scrollbar-track {
                background: #202222;
            }
            .prose-ans .table-wrapper::-webkit-scrollbar-thumb {
                background: #4a4a4a;
                border-radius: 3px;
            }
            .prose-ans a:not(.cite) {
                color: #22d3ee;
                text-decoration: underline;
                text-underline-offset: 2px;
            }

            /* Thinking steps */
            .think-step {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 5px 0;
                color: #6b6b6b;
                font-size: 13px;
                transition: color 0.3s;
            }
            .think-step.active {
                color: #22d3ee;
            }
            .think-step.done {
                color: #a1a1a1;
            }
            .think-spinner {
                width: 16px;
                height: 16px;
                border: 2px solid #313333;
                border-top-color: #22d3ee;
                border-radius: 50%;
                animation: spin 0.7s linear infinite;
                flex-shrink: 0;
            }
            .think-check {
                width: 16px;
                height: 16px;
                flex-shrink: 0;
            }
            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }

            /* Copy button — always slightly visible so users know it exists */
            .copy-btn {
                opacity: 0.5;
                transition: opacity 0.2s;
            }
            .message-block:hover .copy-btn {
                opacity: 1;
            }
            /* Latest message in active session — always show copy button fully */
            .message-block.is-latest .copy-btn {
                opacity: 1;
            }
            /* Always show copy button fully on touch devices */
            @media (hover: none) and (pointer: coarse) {
                .copy-btn {
                    opacity: 1;
                }
            }

            /* Suggestion chip */
            .sug-chip {
                transition: all 0.2s;
            }
            .sug-chip:hover {
                border-color: rgba(34, 211, 238, 0.4);
                color: #e8e8e8;
            }

            /* Real thinking block — model's reasoning output (Zed-style) */
            .think-block-wrap {
                margin-bottom: 10px;
            }
            .think-block-header {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 3px 10px 3px 7px;
                cursor: pointer;
                user-select: none;
                color: #7a7a7a;
                font-size: 11px;
                font-weight: 500;
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 999px;
                transition: all 0.2s;
            }
            .think-block-header:hover {
                color: #a1a1a1;
                background: rgba(255, 255, 255, 0.07);
                border-color: rgba(255, 255, 255, 0.1);
            }
            .think-block-header .think-bulb {
                width: 13px;
                height: 13px;
                flex-shrink: 0;
                color: #f59e0b;
                opacity: 0.8;
                transition: opacity 0.2s;
            }
            .think-block-header:hover .think-bulb {
                opacity: 1;
            }
            .think-block-header.done .think-bulb {
                color: #22d3ee;
            }
            .think-block-body {
                font-size: 12px;
                line-height: 1.65;
                color: #5c5c5c;
                font-style: italic;
                padding: 6px 8px 8px;
                overflow: hidden;
                border-left: 2px solid rgba(245, 158, 11, 0.2);
                margin-left: 6px;
                margin-top: 4px;
            }
            .think-block-body.collapsed {
                display: none;
            }

            /* Search toggle button */
            #searchToggle,
            #searchToggleFollowup {
                background: rgba(34, 211, 238, 0.08);
                border-color: rgba(34, 211, 238, 0.25);
                color: #22d3ee;
            }
            #searchToggle.off,
            #searchToggleFollowup.off {
                background: transparent;
                border-color: transparent;
                color: #4b5563;
            }
            #searchToggle:hover,
            #searchToggleFollowup:hover {
                background: rgba(34, 211, 238, 0.14);
            }
            #searchToggle.off:hover,
            #searchToggleFollowup.off:hover {
                background: #2a2c2c;
                color: #9ca3af;
            }

            /* Compact tool button */
            .tool-btn {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 5px 8px;
                border-radius: 5px;
                color: #6b6b6b;
                transition:
                    background 0.15s,
                    color 0.15s;
                font-size: 12px;
                border: 1px solid transparent;
            }
            .tool-btn:hover {
                background: #2a2c2c;
                color: #a1a1a1;
            }

            /* Light theme styles - Perplexity-like */
            :root {
                --light-bg: #ffffff;
                --light-surface: #f8fafc;
                --light-card: #ffffff;
                --light-border: #e2e8f0;
                --light-hover: #f1f5f9;
                --light-accent: #0ea5e9;
                --light-text: #1e293b;
                --light-text-secondary: #64748b;
                --light-text-muted: #94a3b8;
                --light-shadow:
                    0 1px 3px 0 rgb(0 0 0 / 0.1),
                    0 1px 2px -1px rgb(0 0 0 / 0.1);
                --light-shadow-lg:
                    0 10px 15px -3px rgb(0 0 0 / 0.1),
                    0 4px 6px -4px rgb(0 0 0 / 0.1);
            }

            /* Override dark theme colors for light theme */
            html:not(.dark) {
                --pp-bg: var(--light-bg);
                --pp-surface: var(--light-surface);
                --pp-card: var(--light-card);
                --pp-border: var(--light-border);
                --pp-hover: var(--light-hover);
                --pp-accent: var(--light-accent);
                --pp-text: var(--light-text);
                --pp-muted: var(--light-text-secondary);
                --pp-dim: var(--light-text-muted);
            }

            /* Light theme specific styles */
            html:not(.dark) body {
                background: var(--light-bg);
                color: var(--light-text);
            }

            html:not(.dark) .pp-bg {
                background-color: var(--light-bg);
            }
            html:not(.dark) .pp-surface {
                background-color: var(--light-surface);
            }
            html:not(.dark) .pp-card {
                background-color: var(--light-card);
            }
            html:not(.dark) .pp-border {
                border-color: var(--light-border);
            }
            html:not(.dark) .pp-hover:hover {
                background-color: var(--light-hover);
            }
            html:not(.dark) .pp-accent {
                color: var(--light-accent);
            }
            html:not(.dark) .pp-text {
                color: var(--light-text);
            }
            html:not(.dark) .pp-muted {
                color: var(--light-text-secondary);
            }
            html:not(.dark) .pp-dim {
                color: var(--light-text-muted);
            }

            /* Light theme scrollbar */
            html:not(.dark) ::-webkit-scrollbar-thumb {
                background: #cbd5e1;
            }
            html:not(.dark) ::-webkit-scrollbar-thumb:hover {
                background: #94a3b8;
            }
            html:not(.dark) * {
                scrollbar-color: #cbd5e1 transparent;
            }

            /* Light theme input areas */
            html:not(.dark) .pp-input {
                background: var(--light-surface);
                border: 1px solid var(--light-border);
                color: var(--light-text);
            }

            html:not(.dark) .pp-input:focus-within {
                border-color: rgba(14, 165, 233, 0.35);
                box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.06);
            }

            /* Light theme citations and chips */
            html:not(.dark) .cite {
                background: rgba(14, 165, 233, 0.12);
                color: var(--light-accent);
            }

            html:not(.dark) .cite:hover {
                background: rgba(14, 165, 233, 0.25);
            }

            /* Light theme cards and surfaces */
            html:not(.dark) .src-item {
                background: var(--light-card);
                border: 1px solid var(--light-border);
                color: var(--light-text);
            }

            html:not(.dark) .src-item:hover {
                border-color: rgba(14, 165, 233, 0.4);
                background: var(--light-hover);
            }

            /* Light theme thread items */
            html:not(.dark) .thread-item:hover {
                background: var(--light-hover);
            }
            html:not(.dark) .thread-item.active {
                background: rgba(14, 165, 233, 0.08);
            }

            /* Light theme user bubble */
            html:not(.dark) .user-bubble {
                background: linear-gradient(
                    135deg,
                    var(--light-surface) 0%,
                    var(--light-hover) 100%
                );
                border: 1px solid var(--light-border);
                color: var(--light-text);
            }

            /* Light theme thinking block */
            html:not(.dark) .thinking-block {
                background: linear-gradient(
                    135deg,
                    rgba(14, 165, 233, 0.04) 0%,
                    rgba(99, 102, 241, 0.04) 100%
                );
                border: 1px solid rgba(14, 165, 233, 0.15);
                border-left: 3px solid rgba(14, 165, 233, 0.5);
                color: var(--light-text);
            }

            /* Light theme thinking dots */
            html:not(.dark) .thinking-dot {
                background: var(--light-accent);
            }

            /* Light theme shadows */
            html:not(.dark) .shadow-lg {
                box-shadow: var(--light-shadow-lg);
            }
            html:not(.dark) .shadow {
                box-shadow: var(--light-shadow);
            }

            /* Light theme tool buttons */
            html:not(.dark) .tool-btn {
                color: #64748b;
            }
            html:not(.dark) .tool-btn:hover {
                background: var(--light-hover);
                color: var(--light-text-secondary);
            }

            /* Light theme chat area and input bar */
            html:not(.dark) .border-t.border-pp-border.bg-pp-bg\/90 {
                background-color: rgba(255, 255, 255, 0.9) !important;
                border-color: var(--light-border) !important;
            }

            html:not(.dark) #chatArea {
                background-color: var(--light-bg);
            }

            html:not(.dark) #chatThread {
                background-color: var(--light-bg);
            }

            /* Light theme text in chat */
            html:not(.dark) .text-white {
                color: var(--light-text) !important;
            }

            html:not(.dark) .text-pp-text {
                color: var(--light-text) !important;
            }

            html:not(.dark) .text-pp-muted {
                color: var(--light-text-secondary) !important;
            }

            html:not(.dark) .text-pp-dim {
                color: var(--light-text-muted) !important;
            }

            /* Light theme placeholder text */
            html:not(.dark) .placeholder-pp-dim::placeholder {
                color: var(--light-text-muted) !important;
            }

            /* Light theme prose content */
            html:not(.dark) .prose-ans {
                color: var(--light-text);
            }

            html:not(.dark) .prose-ans h1,
            html:not(.dark) .prose-ans h2,
            html:not(.dark) .prose-ans h3,
            html:not(.dark) .prose-ans strong {
                color: var(--light-text);
            }

            html:not(.dark) .prose-ans blockquote {
                border-left-color: var(--light-border);
                color: var(--light-text-secondary);
            }

            html:not(.dark) .prose-ans code {
                background-color: var(--light-surface);
                color: var(--light-accent);
            }

            html:not(.dark) .prose-ans pre {
                background-color: var(--light-surface);
                border-color: var(--light-border);
            }

            html:not(.dark) .prose-ans th {
                background-color: var(--light-surface);
                color: var(--light-text);
            }
            html:not(.dark) .prose-ans td {
                color: var(--light-text);
            }
            html:not(.dark) .prose-ans td,
            html:not(.dark) .prose-ans th {
                border-color: var(--light-border);
            }
            html:not(.dark) .prose-ans .table-wrapper {
                border-color: var(--light-border);
            }
            html:not(.dark) .prose-ans tr:nth-child(even) td {
                background: var(--light-surface-hover);
            }
            html:not(.dark) .prose-ans .table-wrapper::-webkit-scrollbar-track {
                background: var(--light-surface);
            }
            html:not(.dark) .prose-ans .table-wrapper::-webkit-scrollbar-thumb {
                background: #c0c0c0;
            }

            /* Light theme search toggles */
            html:not(.dark) #searchToggle,
            html:not(.dark) #searchToggleFollowup {
                background: rgba(14, 165, 233, 0.12);
                color: var(--light-accent);
            }
            html:not(.dark) #searchToggle:hover,
            html:not(.dark) #searchToggleFollowup:hover {
                background: rgba(14, 165, 233, 0.14);
            }
            html:not(.dark) #searchToggle.off,
            html:not(.dark) #searchToggleFollowup.off {
                background: var(--light-surface);
                color: var(--light-text-muted);
                border: 1px solid var(--light-border);
            }
            html:not(.dark) #searchToggle.off:hover,
            html:not(.dark) #searchToggleFollowup.off:hover {
                background: var(--light-hover);
                color: var(--light-text-secondary);
            }

            /* Light theme chat specific components */
            html:not(.dark) .bg-pp-bg {
                background-color: var(--light-bg);
            }
            html:not(.dark) .bg-pp-surface {
                background-color: var(--light-surface);
            }
            html:not(.dark) .bg-pp-card {
                background-color: var(--light-card);
            }
            html:not(.dark) .border-pp-border {
                border-color: var(--light-border);
            }
            html:not(.dark) .text-pp-text {
                color: var(--light-text);
            }
            html:not(.dark) .text-pp-muted {
                color: var(--light-text-secondary);
            }
            html:not(.dark) .text-pp-dim {
                color: var(--light-text-muted);
            }
            html:not(.dark) .hover\:bg-pp-hover:hover {
                background-color: var(--light-hover);
            }
            html:not(.dark) .hover\:text-pp-muted:hover {
                color: var(--light-text-secondary);
            }
            html:not(.dark) .hover\:text-white:hover {
                color: #ffffff;
            }

            /* Light theme gradient backgrounds */
            html:not(.dark) .bg-gradient-to-br {
                background-image: linear-gradient(
                    to bottom right,
                    var(--tw-gradient-stops)
                );
            }
            html:not(.dark) .from-cyan-400 {
                --tw-gradient-from: #22d3ee;
                --tw-gradient-stops:
                    var(--tw-gradient-from),
                    var(--tw-gradient-to, rgba(34, 211, 238, 0));
            }
            html:not(.dark) .to-blue-500 {
                --tw-gradient-to: #3b82f6;
            }

            /* Light theme text colors */
            html:not(.dark) .text-white {
                color: #1e293b;
            }
            html:not(.dark) .text-pp-dim {
                color: #64748b;
            }
            html:not(.dark) .placeholder-pp-dim::placeholder {
                color: #94a3b8;
            }

            /* Light theme cyan text - darker and bolder */
            html:not(.dark) .text-cyan-300 {
                color: #0f766e;
                font-weight: 600;
            }
            html:not(.dark) .text-cyan-400 {
                color: #0d9488;
            }
            html:not(.dark) .text-cyan-500 {
                color: #0891b2;
            }
            html:not(.dark) .text-cyan-700 {
                color: #0f4c5c;
                font-weight: 600;
            }

            /* Light theme button text */
            html:not(.dark) .text-cyan-700 {
                color: #0f4c5c;
            }

            /* Light theme input areas */
            html:not(.dark) .bg-transparent {
                background-color: transparent;
            }
            html:not(.dark) .text-white {
                color: #1e293b;
            }
            html:not(.dark) .placeholder-pp-dim::placeholder {
                color: #94a3b8;
            }

            /* Light theme buttons and interactive elements */
            html:not(.dark) .bg-cyan-500 {
                background-color: #0ea5e9;
            }
            html:not(.dark) .hover\:bg-cyan-400:hover {
                background-color: #38bdf8;
            }
            html:not(.dark) .text-white {
                color: #ffffff;
            }
            html:not(.dark) .shadow-cyan-500\/20 {
                box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
            }

            /* Light theme sidebar */
            html:not(.dark) .bg-pp-surface {
                background-color: var(--light-surface);
            }
            html:not(.dark) .border-r {
                border-right-width: 1px;
            }
            html:not(.dark) .border-pp-border {
                border-color: var(--light-border);
            }

            /* Light theme mobile overlay */
            html:not(.dark) #sidebarOverlay {
                background-color: rgba(0, 0, 0, 0.5);
            }

            /* Light theme dropdowns and modals */
            html:not(.dark) .bg-white {
                background-color: #ffffff;
            }
            html:not(.dark) .text-gray-900 {
                color: #1e293b;
            }
            html:not(.dark) .text-gray-700 {
                color: #334155;
            }
            html:not(.dark) .text-gray-600 {
                color: #64748b;
            }
            html:not(.dark) .text-gray-500 {
                color: #64748b;
            }
            html:not(.dark) .border-gray-200 {
                border-color: #e2e8f0;
            }
            html:not(.dark) .hover\:bg-gray-50:hover {
                background-color: #f8fafc;
            }
            html:not(.dark) .hover\:bg-gray-100:hover {
                background-color: #f1f5f9;
            }

            /* Light theme buttons */
            html:not(.dark) .text-gray-400 {
                color: #94a3b8;
            }
            html:not(.dark) .hover\:text-gray-600:hover {
                color: #64748b;
            }
            html:not(.dark) .hover\:text-gray-700:hover {
                color: #334155;
            }
            html:not(.dark) .hover\:bg-gray-100:hover {
                background-color: #f1f5f9;
            }
            html:not(.dark) .hover\:bg-gray-200:hover {
                background-color: #e2e8f0;
            }

            /* Light theme shadows */
            html:not(.dark) .shadow-lg {
                box-shadow:
                    0 10px 15px -3px rgba(0, 0, 0, 0.1),
                    0 4px 6px -4px rgba(0, 0, 0, 0.1);
            }
            html:not(.dark) .shadow-xl {
                box-shadow:
                    0 20px 25px -5px rgba(0, 0, 0, 0.1),
                    0 8px 10px -6px rgba(0, 0, 0, 0.1);
            }
            html:not(.dark) .shadow-cyan-500\/20 {
                box-shadow: 0 0 20px rgba(14, 165, 233, 0.2);
            }

            /* Light theme input text areas */
            html:not(.dark) textarea {
                color: var(--light-text) !important;
            }

            html:not(.dark) textarea::placeholder {
                color: var(--light-text-muted) !important;
            }

            /* Light theme empty state */
            html:not(.dark) #emptyState {
                background-color: var(--light-bg);
            }

            /* Light theme thinking steps */
            html:not(.dark) .think-step {
                color: var(--light-text-muted);
            }

            html:not(.dark) .think-step.active {
                color: var(--light-accent);
            }

            html:not(.dark) .think-step.done {
                color: var(--light-text-secondary);
            }

            html:not(.dark) .think-spinner {
                border-color: var(--light-border);
                border-top-color: var(--light-accent);
            }

            /* Light theme user messages */
            html:not(.dark) .message-block h2 {
                color: var(--light-text) !important;
            }

            /* Light theme error messages */
            html:not(.dark) .error-block .bg-red-500\/8 {
                background-color: rgba(239, 68, 68, 0.08);
                border-color: rgba(239, 68, 68, 0.2);
            }

            html:not(.dark) .error-block .text-red-400 {
                color: #dc2626;
            }

            html:not(.dark) .retry-btn {
                background-color: rgba(239, 68, 68, 0.1);
                border-color: rgba(239, 68, 68, 0.2);
                color: #dc2626;
            }

            html:not(.dark) .retry-btn:hover {
                background-color: rgba(239, 68, 68, 0.15);
                color: #b91c1c;
            }

            /* Light theme images and media */
            html:not(.dark) img {
                opacity: 1;
                filter: none;
            }

            /* Ensure images are visible in light theme */
            html:not(.dark) .rounded-full {
                border-color: var(--light-border);
            }

            /* Light theme for uploaded images and files */
            html:not(.dark) .bg-gray-100 {
                background-color: var(--light-surface);
            }

            html:not(.dark) .border-gray-200 {
                border-color: var(--light-border);
            }

            /* Light theme follow-up chips */
            html:not(.dark) .followup-chip {
                border-color: var(--light-border);
                color: var(--light-text-secondary);
            }

            html:not(.dark) .followup-chip:hover {
                border-color: rgba(14, 165, 233, 0.4);
                color: var(--light-text);
            }

            html:not(.dark) .followup-block .text-pp-dim {
                color: var(--light-text-muted) !important;
            }

            /* Light theme attachment chips */
            html:not(.dark) .attach-chip {
                background-color: var(--light-card);
                border-color: var(--light-border);
            }

            html:not(.dark) .attach-chip.bg-cyan-500\/10 {
                background-color: rgba(14, 165, 233, 0.1);
                border-color: rgba(14, 165, 233, 0.2);
            }

            html:not(.dark) .attach-chip .text-cyan-400 {
                color: var(--light-accent) !important;
            }

            /* Light theme source sidebar */
            html:not(.dark) #sourceSidebar {
                background-color: var(--light-surface);
                border-color: var(--light-border);
            }

            html:not(.dark) #sourceSidebar .text-pp-text {
                color: var(--light-text) !important;
            }

            html:not(.dark) #sourceSidebar .text-pp-dim {
                color: var(--light-text-muted) !important;
            }

            html:not(.dark) .src-item {
                background-color: var(--light-card);
                border-color: var(--light-border);
                color: var(--light-text);
            }

            html:not(.dark) .src-item:hover {
                background-color: var(--light-hover);
                border-color: rgba(14, 165, 233, 0.4);
            }

            /* Light theme upload spinner */
            html:not(.dark) .upload-spinner {
                background-color: var(--light-surface);
                border-color: var(--light-border);
            }

            html:not(.dark) .upload-spinner .text-pp-muted {
                color: var(--light-text-secondary) !important;
            }

            html:not(.dark) .upload-spinner .border-pp-accent {
                border-color: var(--light-accent) !important;
            }

            /* Mermaid chart styling */
            .mermaid-chart {
                background: #1a1a1a;
                border-radius: 8px;
                padding: 12px;
                border: 1px solid #2a2a2a;
            }
            .mermaid-chart svg {
                max-width: 100%;
                height: auto;
            }

            /* Zed-style Todo Panel */
            .todo-panel {
                margin: 8px 0;
                border: 1px solid #313333;
                border-radius: 10px;
                background: #1c1e1e;
                overflow: hidden;
            }
            .todo-header {
                display: flex;
                align-items: center;
                gap: 6px;
                padding: 8px 12px;
                cursor: pointer;
                user-select: none;
                background: rgba(255, 255, 255, 0.02);
                border-bottom: 1px solid #313333;
                transition: background 0.15s;
            }
            .todo-header:hover {
                background: rgba(255, 255, 255, 0.04);
            }
            .todo-header-title {
                font-size: 11px;
                font-weight: 600;
                color: #a1a1a1;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            .todo-header-count {
                font-size: 10px;
                color: #6b6b6b;
                background: #2a2c2c;
                padding: 1px 6px;
                border-radius: 999px;
            }
            .todo-list {
                padding: 4px 0;
            }
            .todo-item {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 6px 12px;
                font-size: 13px;
                color: #e8e8e8;
                transition: all 0.2s;
                position: relative;
            }
            .todo-item:hover {
                background: rgba(255, 255, 255, 0.03);
            }
            .todo-item .todo-checkbox {
                width: 16px;
                height: 16px;
                border-radius: 4px;
                border: 2px solid #4a4a4a;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                transition: all 0.2s;
            }
            .todo-item .todo-checkbox svg {
                width: 12px;
                height: 12px;
                opacity: 0;
                transition: opacity 0.2s;
            }
            .todo-item[data-status="pending"] .todo-checkbox {
                border-color: #4a4a4a;
            }
            .todo-item[data-status="in_progress"] .todo-checkbox {
                border-color: #22d3ee;
                background: rgba(34, 211, 238, 0.1);
            }
            .todo-item[data-status="in_progress"] .todo-spinner {
                display: block;
                width: 10px;
                height: 10px;
                border: 2px solid transparent;
                border-top-color: #22d3ee;
                border-radius: 50%;
                animation: spin 0.7s linear infinite;
            }
            .todo-item[data-status="done"] .todo-checkbox {
                border-color: #22c55e;
                background: #22c55e;
            }
            .todo-item[data-status="done"] .todo-checkbox svg {
                opacity: 1;
                color: white;
            }
            .todo-item[data-status="done"] .todo-text {
                text-decoration: line-through;
                color: #6b6b6b;
            }
            .todo-text {
                flex: 1;
                line-height: 1.4;
            }
            .todo-spinner {
                display: none;
            }
            .todo-panel.collapsed .todo-list {
                display: none;
            }
            .todo-panel.collapsed .todo-chevron {
                transform: rotate(-90deg);
            }
            .todo-chevron {
                width: 14px;
                height: 14px;
                color: #6b6b6b;
                transition: transform 0.2s;
                flex-shrink: 0;
            }

            /* Todo summary (shown at end of turn when all done) */
            .todo-summary {
                margin: 8px 0;
                padding: 8px 12px;
                border: 1px solid rgba(34, 197, 94, 0.3);
                border-radius: 10px;
                background: rgba(34, 197, 94, 0.05);
            }
            .todo-summary-item {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 4px 0;
                font-size: 12px;
                color: #a1a1a1;
            }
            .todo-summary-item .summary-check {
                width: 14px;
                height: 14px;
                border-radius: 4px;
                background: #22c55e;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            .todo-summary-item .summary-check svg {
                width: 10px;
                height: 10px;
                color: white;
            }
            .todo-summary-item .summary-text {
                text-decoration: line-through;
                color: #6b6b6b;
            }

            /* Light theme todo styles */
            html:not(.dark) .todo-panel {
                border-color: #e2e8f0;
                background: #f8fafc;
            }
            html:not(.dark) .todo-header {
                border-bottom-color: #e2e8f0;
                background: rgba(0, 0, 0, 0.01);
            }
            html:not(.dark) .todo-header:hover {
                background: rgba(0, 0, 0, 0.03);
            }
            html:not(.dark) .todo-header-title {
                color: #64748b;
            }
            html:not(.dark) .todo-header-count {
                background: #e2e8f0;
                color: #94a3b8;
            }
            html:not(.dark) .todo-item {
                color: #1e293b;
            }
            html:not(.dark) .todo-item:hover {
                background: rgba(0, 0, 0, 0.02);
            }
            html:not(.dark) .todo-item[data-status="pending"] .todo-checkbox {
                border-color: #cbd5e1;
            }
            html:not(.dark)
                .todo-item[data-status="in_progress"]
                .todo-checkbox {
                border-color: #0ea5e9;
                background: rgba(14, 165, 233, 0.1);
            }
            html:not(.dark)
                .todo-item[data-status="in_progress"]
                .todo-spinner {
                border-top-color: #0ea5e9;
            }
            html:not(.dark) .todo-item[data-status="done"] .todo-checkbox {
                border-color: #22c55e;
                background: #22c55e;
            }
            html:not(.dark) .todo-item[data-status="done"] .todo-text {
                color: #94a3b8;
            }
            html:not(.dark) .todo-summary {
                border-color: rgba(34, 197, 94, 0.3);
                background: rgba(34, 197, 94, 0.05);
            }