/**
 * AnyConversation Theme System - Bold & Distinct Themes
 * Each theme has its own personality and visual identity
 */

/* ============================================
   CLASSIC LIGHT THEME (DEFAULT)
   Clean, professional, classic
   ============================================ */
:root,
html[data-theme="light"],
html.theme-light {
    /* Background colors */
    --bg-primary: #f8fafc;           /* slate-50 */
    --bg-secondary: #ffffff;         /* white */
    --bg-tertiary: #f1f5f9;          /* slate-100 */
    --bg-hover: #e2e8f0;             /* slate-200 */

    /* Text colors */
    --text-primary: #0f172a;         /* slate-900 */
    --text-secondary: #475569;       /* slate-600 */
    --text-muted: #94a3b8;           /* slate-400 */
    --text-inverse: #ffffff;         /* white */

    /* Accent colors */
    --accent-primary: #0ea5e9;       /* sky-500 */
    --accent-hover: #0284c7;         /* sky-600 */
    --accent-light: #7dd3fc;         /* sky-300 */

    /* Borders */
    --border-primary: #e2e8f0;       /* slate-200 */
    --border-secondary: #cbd5e1;     /* slate-300 */

    /* Message bubbles */
    --bubble-user: #0ea5e9;
    --bubble-bot: #ffffff;
    --bubble-bot-border: #e2e8f0;

    /* Theme identifier */
    --theme-color: #0ea5e9;
}

/* ============================================
   CLASSIC DARK THEME
   Sleek, modern, midnight
   ============================================ */
html[data-theme="dark"],
html.theme-dark {
    --bg-primary: #0f172a;           /* slate-900 */
    --bg-secondary: #1e293b;         /* slate-800 */
    --bg-tertiary: #334155;          /* slate-700 */
    --bg-hover: #475569;             /* slate-600 */

    --text-primary: #f1f5f9;         /* slate-100 */
    --text-secondary: #cbd5e1;       /* slate-300 */
    --text-muted: #94a3b8;           /* slate-400 */
    --text-inverse: #ffffff;         /* white - for text ON dark backgrounds */

    --accent-primary: #38bdf8;       /* sky-400 */
    --accent-hover: #0ea5e9;         /* sky-500 */
    --accent-light: #7dd3fc;         /* sky-300 */

    --border-primary: #334155;       /* slate-700 */
    --border-secondary: #475569;     /* slate-600 */

    --bubble-user: #0284c7;
    --bubble-bot: #1e293b;
    --bubble-bot-border: #475569;

    --theme-color: #38bdf8;
}

/* ============================================
   OCEAN BLUE THEME
   Deep sea vibes, calm and immersive
   ============================================ */
html[data-theme="ocean"],
html.theme-ocean {
    --bg-primary: #cffafe;           /* cyan-100 - much more blue */
    --bg-secondary: #e0f2fe;         /* sky-100 */
    --bg-tertiary: #bae6fd;          /* sky-200 */
    --bg-hover: #a5f3fc;             /* cyan-200 */

    --text-primary: #164e63;         /* cyan-900 */
    --text-secondary: #0e7490;       /* cyan-700 */
    --text-muted: #06b6d4;           /* cyan-500 */
    --text-inverse: #ffffff;

    --accent-primary: #0891b2;       /* cyan-600 */
    --accent-hover: #0e7490;         /* cyan-700 */
    --accent-light: #22d3ee;         /* cyan-400 */

    --border-primary: #67e8f9;       /* cyan-300 */
    --border-secondary: #22d3ee;     /* cyan-400 */

    --bubble-user: #0891b2;
    --bubble-bot: #f0f9ff;           /* sky-50 - very light blue */
    --bubble-bot-border: #7dd3fc;    /* sky-300 */

    --theme-color: #06b6d4;
}

/* ============================================
   SUNSET ORANGE THEME
   Warm, energetic, cozy evening
   ============================================ */
html[data-theme="sunset"],
html.theme-sunset {
    --bg-primary: #fed7aa;           /* orange-200 - much warmer */
    --bg-secondary: #ffedd5;         /* orange-100 */
    --bg-tertiary: #fdba74;          /* orange-300 */
    --bg-hover: #fef3c7;             /* amber-100 */

    --text-primary: #7c2d12;         /* orange-900 */
    --text-secondary: #c2410c;       /* orange-700 */
    --text-muted: #ea580c;           /* orange-600 */
    --text-inverse: #ffffff;

    --accent-primary: #f97316;       /* orange-500 */
    --accent-hover: #ea580c;         /* orange-600 */
    --accent-light: #fb923c;         /* orange-400 */

    --border-primary: #fdba74;       /* orange-300 */
    --border-secondary: #fb923c;     /* orange-400 */

    --bubble-user: #ea580c;
    --bubble-bot: #fff7ed;           /* orange-50 */
    --bubble-bot-border: #fed7aa;    /* orange-200 */

    --theme-color: #f97316;
}

/* ============================================
   FOREST GREEN THEME
   Natural, earthy, peaceful
   ============================================ */
html[data-theme="forest"],
html.theme-forest {
    --bg-primary: #d1fae5;           /* emerald-100 - much greener */
    --bg-secondary: #ecfdf5;         /* emerald-50 */
    --bg-tertiary: #a7f3d0;          /* emerald-200 */
    --bg-hover: #d9f99d;             /* lime-200 */

    --text-primary: #14532d;         /* green-900 */
    --text-secondary: #15803d;       /* green-700 */
    --text-muted: #16a34a;           /* green-600 */
    --text-inverse: #ffffff;

    --accent-primary: #10b981;       /* emerald-500 */
    --accent-hover: #059669;         /* emerald-600 */
    --accent-light: #34d399;         /* emerald-400 */

    --border-primary: #86efac;       /* green-300 */
    --border-secondary: #4ade80;     /* green-400 */

    --bubble-user: #059669;
    --bubble-bot: #f0fdf4;           /* green-50 */
    --bubble-bot-border: #bbf7d0;    /* green-200 */

    --theme-color: #10b981;
}

/* ============================================
   PINK DREAM THEME
   Soft, girly, dreamy aesthetic
   ============================================ */
html[data-theme="pink"],
html.theme-pink {
    --bg-primary: #fce7f3;           /* pink-100 - much pinker */
    --bg-secondary: #fdf2f8;         /* pink-50 */
    --bg-tertiary: #fbcfe8;          /* pink-200 */
    --bg-hover: #f5d0fe;             /* fuchsia-200 */

    --text-primary: #831843;         /* pink-900 */
    --text-secondary: #be185d;       /* pink-700 */
    --text-muted: #db2777;           /* pink-600 */
    --text-inverse: #ffffff;

    --accent-primary: #ec4899;       /* pink-500 */
    --accent-hover: #db2777;         /* pink-600 */
    --accent-light: #f472b6;         /* pink-400 */

    --border-primary: #f9a8d4;       /* pink-300 */
    --border-secondary: #f472b6;     /* pink-400 */

    --bubble-user: #db2777;
    --bubble-bot: #fef1f7;           /* custom light pink */
    --bubble-bot-border: #fbcfe8;    /* pink-200 */

    --theme-color: #ec4899;
}

/* ============================================
   APPLY THEME COLORS TO ALL ELEMENTS
   ============================================ */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* Backgrounds */
.bg-white { background-color: var(--bg-secondary) !important; }
.bg-slate-50 { background-color: var(--bg-primary) !important; }
.bg-slate-100 { background-color: var(--bg-tertiary) !important; }
.bg-slate-200 { background-color: var(--bg-hover) !important; }

/* Text */
.text-slate-800,
.text-slate-900 { color: var(--text-primary) !important; }
.text-slate-600,
.text-slate-700 { color: var(--text-secondary) !important; }
.text-slate-400,
.text-slate-500 { color: var(--text-muted) !important; }

/* Accents */
.bg-sky-500,
.bg-sky-600,
.bg-blue-600 { background-color: var(--accent-primary) !important; }
.bg-sky-600:hover,
.bg-blue-600:hover { background-color: var(--accent-hover) !important; }
.text-sky-500,
.text-sky-600,
.text-blue-600 { color: var(--accent-primary) !important; }

/* Borders */
.border-slate-200,
.border-slate-300 { border-color: var(--border-primary) !important; }
.border-slate-400 { border-color: var(--border-secondary) !important; }

/* Message bubbles */
.user-bubble {
    background-color: var(--bubble-user) !important;
    color: var(--text-inverse) !important;
}
.bot-bubble {
    background-color: var(--bubble-bot) !important;
    border-color: var(--bubble-bot-border) !important;
    color: var(--text-primary) !important;
}

/* Hovers */
.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover { background-color: var(--bg-hover) !important; }
.hover\:bg-slate-200:hover { background-color: var(--bg-tertiary) !important; }

/* Inputs */
input, textarea, select {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent-primary);
}

/* Dropdowns */
.dropdown-menu, #user-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Smooth transitions */
* {
    transition-property: background-color, border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* No transition for certain elements */
.no-theme-transition, .user-bubble, .bot-bubble, img, video {
    transition: none;
}

/* Mobile theme picker - make it compact */
@media (max-width: 640px) {
    #theme-palette-menu {
        padding: 0.75rem !important;
    }

    #theme-palette-menu .grid {
        width: auto !important;
        gap: 0.5rem !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Smaller theme swatches on mobile */
    #theme-palette-menu button {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    #theme-palette-menu button span {
        font-size: 0.65rem !important;
    }
}