/* Theme: dark is default in :root */
html[data-theme="dark"] {
    --bg: #09090b;
    --surface: #18181b;
    --surface-hover: #27272a;
    --border: rgba(255, 255, 255, 0.06);
    --text: #fafafa;
    --text-dim: #a1a1aa;
    --accent: #4b5563;
    --accent-glow: rgba(75, 85, 99, 0.24);
}

/* Light theme */
html[data-theme="light"] {
    --bg: #f4f4f5;
    --surface: #ffffff;
    --surface-hover: #e4e4e7;
    --border: rgba(0, 0, 0, 0.08);
    --text: #18181b;
    --text-dim: #52525b;
    --accent: #475569;
    --accent-glow: rgba(71, 85, 105, 0.2);
}

html[data-theme="light"] .app::before {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(124, 58, 237, 0.06) 0%, transparent 50%), var(--bg);
}


html[data-theme="light"] .chat {
    background: rgba(255, 255, 255, 0.98);
}

html[data-theme="light"] .header {
    background: var(--bg);
}

html[data-theme="light"] .pulse::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='22' viewBox='0 0 72 22'%3E%3Cpath d='M0 11 C6 3 12 3 18 11 C24 19 30 19 36 11 C42 3 48 3 54 11 C60 19 66 19 72 11' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    opacity: 0.52;
}