html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}

html.dark .bg-white { background-color: #1e293b; }
html.dark .bg-\[\#f7f5f0\] { background-color: #0f172a; }
html.dark .bg-\[\#f1f0eb\] { background-color: #334155; }
html.dark .bg-\[\#eff6ff\] { background-color: #172554; }
html.dark .bg-\[\#f1f5f9\] { background-color: #1e293b; }
html.dark .bg-\[\#fee2e2\] { background-color: #450a0a; }
html.dark .bg-\[\#fecaca\] { background-color: #7f1d1d; }
html.dark .bg-\[\#fef3c7\] { background-color: #451a03; }
html.dark .bg-\[\#fff7ed\] { background-color: #431407; }
html.dark .bg-\[\#ffe8cc\] { background-color: #3f2d0f; }
html.dark .bg-\[\#f0fdf4\] { background-color: #052e16; }
html.dark .bg-\[\#dcfce7\] { background-color: #14532d; }
html.dark .bg-\[\#dbeafe\] { background-color: #1e3a8a; }
html.dark .bg-\[\#fbbf24\] { background-color: #b45309; }
html.dark .bg-\[\#fffbeb\] { background-color: #3d2f0f; }
html.dark .bg-\[\#d3d1c7\] { background-color: #4b5563; }
html.dark .bg-\[\#fbfaf8\] { background-color: #111827; }
html.dark .bg-gray-50 { background-color: #111827; }
html.dark .bg-gray-100 { background-color: #1f2937; }
html.dark .bg-gray-200 { background-color: #1f2937; }
html.dark .bg-slate-100 { background-color: #1f2937; }
html.dark .bg-blue-100 { background-color: #1e3a8a; }

html.dark .text-\[\#2c2c2a\] { color: #e2e8f0; }
html.dark .text-\[\#5f5e5a\] { color: #cbd5e1; }
html.dark .text-\[\#888780\] { color: #94a3b8; }
html.dark .text-\[\#9ca3af\] { color: #64748b; }
html.dark .text-\[\#6b7280\] { color: #94a3b8; }
html.dark .text-\[\#475569\] { color: #94a3b8; }
html.dark .text-\[\#c4c9d0\] { color: #475569; }
html.dark .text-\[\#172554\] { color: #f1f5f9; }
html.dark .text-\[\#1e3a8a\] { color: #93c5fd; }
html.dark .text-\[\#1d4ed8\] { color: #60a5fa; }
html.dark .text-\[\#059669\] { color: #34d399; }
html.dark .text-\[\#16a34a\] { color: #4ade80; }
html.dark .text-\[\#15803d\] { color: #4ade80; }
html.dark .text-\[\#14532d\] { color: #86efac; }
html.dark .text-\[\#dc2626\] { color: #f87171; }
html.dark .text-\[\#92400e\] { color: #fbbf24; }
html.dark .text-\[\#b45309\] { color: #f59e0b; }
html.dark .text-\[\#d97706\] { color: #f59e0b; }
html.dark .text-gray-400 { color: #94a3b8; }
html.dark .text-gray-500 { color: #94a3b8; }
html.dark .text-gray-600 { color: #cbd5e1; }
html.dark .text-gray-700 { color: #cbd5e1; }
html.dark .text-blue-600 { color: #60a5fa; }
html.dark .text-blue-800 { color: #93c5fd; }
html.dark .text-green-600 { color: #4ade80; }
html.dark .text-red-600 { color: #f87171; }
html.dark .text-indigo-700 { color: #a5b4fc; }

html.dark .border-\[\#e2dfd5\] { border-color: #334155; }
html.dark .border-\[\#f0efe9\] { border-color: #334155; }
html.dark .border-\[\#e5e3db\] { border-color: #334155; }
html.dark .border-\[\#e2e8f0\] { border-color: #334155; }
html.dark .border-\[\#d3d1c7\] { border-color: #3f4a5a; }
html.dark .border-\[\#dbeafe\] { border-color: #1e3a8a; }
html.dark .border-\[\#bbf7d0\] { border-color: #14532d; }
html.dark .border-\[\#fde68a\] { border-color: #78350f; }
html.dark .border-gray-200 { border-color: #334155; }
html.dark .border-gray-300 { border-color: #475569; }

html.dark .hover\:bg-\[\#f7f5f0\]:hover { background-color: #223047; }
html.dark .hover\:bg-\[\#f1f0eb\]:hover { background-color: #3b4a5f; }
html.dark .hover\:bg-\[\#e5e3db\]:hover { background-color: #3b4a5f; }
html.dark .hover\:bg-\[\#e2e8f0\]:hover { background-color: #3b4a5f; }
html.dark .hover\:bg-\[\#eff6ff\]:hover { background-color: #1e3a8a; }
html.dark .hover\:bg-\[\#dbeafe\]:hover { background-color: #1e3a8a; }
html.dark .hover\:bg-\[\#f59e0b\]:hover { background-color: #92400e; }
html.dark .hover\:bg-\[\#fecaca\]:hover { background-color: #7f1d1d; }
html.dark .hover\:bg-\[\#fee2e2\]:hover { background-color: #450a0a; }
html.dark .hover\:bg-\[\#bbf7d0\]:hover { background-color: #14532d; }
html.dark .hover\:bg-\[\#fde68a\]:hover { background-color: #451a03; }
html.dark .hover\:bg-\[\#fef3c7\]:hover { background-color: #451a03; }
html.dark .hover\:bg-gray-100:hover { background-color: #334155; }
html.dark .hover\:text-\[\#1d4ed8\]:hover { color: #60a5fa; }
html.dark .hover\:text-blue-600:hover { color: #60a5fa; }
html.dark .hover\:border-\[\#93c5fd\]:hover { border-color: #3b82f6; }
html.dark .group:hover .group-hover\:text-\[\#1d4ed8\] { color: #60a5fa; }

html.dark .peer:checked~.peer-checked\:bg-\[\#eff6ff\] { background-color: #172554; }
html.dark .peer:checked~.peer-checked\:border-\[\#1d4ed8\] { border-color: #60a5fa; }
html.dark .peer:checked~.peer-checked\:text-\[\#1d4ed8\] { color: #60a5fa; }

html.dark .disabled\:bg-\[\#f7f5f0\]:disabled { background-color: #1f2937; }
html.dark .disabled\:bg-gray-100:disabled { background-color: #1f2937; }
html.dark .disabled\:bg-slate-100:disabled { background-color: #1f2937; }
html.dark .disabled\:text-\[\#5f5e5a\]:disabled { color: #64748b; }
html.dark .disabled\:text-gray-400:disabled { color: #64748b; }

html.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4); }
html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .4); }
html.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .4); }
html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -4px rgba(0, 0, 0, .4); }

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b;
}

html.dark .chat-wallpaper {
    background-color: #0f172a;
    background-image:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .05) 0 1.5px, transparent 2px),
        radial-gradient(circle at 72% 58%, rgba(255, 255, 255, .03) 0 1.5px, transparent 2px),
        radial-gradient(circle at 42% 82%, rgba(255, 255, 255, .04) 0 1.5px, transparent 2px),
        linear-gradient(135deg, rgba(255, 255, 255, .03) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .03) 75%, transparent 75%);
    background-size: 64px 64px, 96px 96px, 80px 80px, 32px 32px;
}

html.dark .chat-in { background-color: #1e293b; }
html.dark .chat-out { background-color: #1c3a2b; }
html.dark .chat-time { color: #94a3b8; }

.theme-knob {
    transition: transform .25s ease, background-color .25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

html.dark #themeToggle { background-color: #334155; }
html.dark .theme-knob { transform: translateX(-24px); background-color: #1e3a8a; }
html.dark .theme-icon-moon { display: none; }
html.dark .theme-icon-sun { display: inline-block; }