frontend/src/index.css

/* Tailwind CSS v4 */
@import "tailwindcss";
@plugin "daisyui";

/* ── Custom theme tokens ──────────────────────────────────────── */
@theme {
    --color-primary: #059669;
    --color-primary-light: #10b981;
    --color-secondary: #e11d48;
    --color-accent: #0284c7;
    --color-success: #059669;
    --color-warning: #d97706;
    --color-danger: #e11d48;

    --color-bg-primary: #f8fafc;
    --color-bg-secondary: #ffffff;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-tertiary: #94a3b8;
    --color-border-color: rgba(15, 23, 42, 0.06);
    --color-glass-bg: rgba(255, 255, 255, 0.75);
    --color-glass-border: rgba(255, 255, 255, 0.5);
    --color-bubble-bot: #ffffff;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --shadow-glass: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    --shadow-glass-sm: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
    --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.1);

    /* Animations */
    --animate-slide-up: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    --animate-fade-in: fadeIn 0.4s ease forwards;
}

/* ── Dark mode overrides via data-theme ──────────────────────── */
[data-theme="dark"] {
    --color-primary: #10b981;
    --color-primary-light: #34d399;
    --color-secondary: #f43f5e;
    --color-accent: #38bdf8;
    --color-bg-primary: #020617;
    --color-bg-secondary: #0f172a;
    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #64748b;
    --color-border-color: rgba(248, 250, 252, 0.08);
    --color-glass-bg: rgba(15, 23, 42, 0.6);
    --color-glass-border: rgba(248, 250, 252, 0.05);
    --color-bubble-bot: #1e293b;
    --shadow-glass: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* ── Base resets ──────────────────────────────────────────────── */
html, body, #root {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: var(--font-sans);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* ── Utility classes ──────────────────────────────────────────── */
.glass-effect {
    background: var(--color-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-glass-border);
    box-shadow: var(--shadow-glass);
}

.glass-header {
    background: var(--color-glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--color-border-color);
}

.animated-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 50%, rgba(16, 185, 129, 0.03), transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.03), transparent 50%);
}

[data-theme="dark"] .animated-bg {
    background:
        radial-gradient(circle at 15% 50%, rgba(16, 185, 129, 0.06), transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.06), transparent 50%);
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

/* ── Textarea ─────────────────────────────────────────────────── */
textarea {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* ── Markdown body ────────────────────────────────────────────── */
.markdown-body p { margin-bottom: 0.75rem; line-height: 1.7; font-size: 15px; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-weight: 600; margin-top: 1rem; margin-bottom: 0.75rem; color: var(--color-text-primary); letter-spacing: -0.01em; }
.markdown-body h1 { font-size: 1.25rem; }
.markdown-body h2 { font-size: 1.125rem; }
.markdown-body ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; font-size: 15px; }
.markdown-body ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: 0.75rem; font-size: 15px; }
.markdown-body li { margin-bottom: 0.25rem; }
.markdown-body blockquote { border-left: 4px solid var(--color-primary); padding: 0.5rem 0.5rem 0.5rem 1rem; color: var(--color-text-secondary); font-style: italic; margin-bottom: 0.75rem; background: color-mix(in srgb, var(--color-bg-primary) 50%, transparent); border-radius: 0 0.375rem 0.375rem 0; }
.markdown-body code { font-family: monospace; font-size: 13.5px; background: var(--color-bg-primary); padding: 0.125rem 0.375rem; border-radius: 0.25rem; color: var(--color-accent); }
.markdown-body pre { background: var(--color-bg-secondary); padding: 0.875rem; border-radius: 0.5rem; overflow-x: auto; border: 1px solid var(--color-border-color); margin-bottom: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.markdown-body pre code { background: transparent; color: var(--color-text-primary); padding: 0; font-size: 13.5px; }
.markdown-body table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; font-size: 0.875rem; border-radius: 0.5rem; overflow: hidden; }
.markdown-body th, .markdown-body td { border: 1px solid var(--color-border-color); padding: 0.625rem 1rem; text-align: left; }
.markdown-body th { background: var(--color-bg-primary); font-weight: 600; }
.markdown-body tr:nth-child(even) { background: color-mix(in srgb, var(--color-bg-primary) 30%, transparent); }
.markdown-body strong { font-weight: 600; color: var(--color-primary); }

/* ── Typing animation ─────────────────────────────────────────── */
.typing-dots { display: flex; align-items: center; height: 100%; gap: 0.25rem; }
.typing-dots .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--color-text-tertiary);
    opacity: 0.6;
    animation: typing 1.4s infinite ease-in-out both;
}
.typing-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dots .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ── Slide / Fade animations ──────────────────────────────────── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.animate-slide-up { animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.animate-fade-in  { animation: fadeIn 0.4s ease forwards; }