/**
 * ChatAnd Theme System
 * Modern color palettes with grayscale base + accent colors
 * 5 theme variants: Default, Ocean, Sunset, Forest, Violet
 */

/* ========================================
   ROOT DESIGN TOKENS (Default Theme)
   ======================================== */
:root {
    /* Theme: Default - Professional Blue */
    --theme-name: 'default';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F3F4F6;

    /* Text Colors */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-inverse: #FFFFFF;

    /* Accent Color (Blue) */
    --accent-primary: #3B82F6;
    --accent-secondary: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-light: #DBEAFE;

    /* Message Bubbles */
    --bubble-user-from: #3B82F6;
    --bubble-user-to: #2563EB;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F3F4F6;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-color: #E5E7EB;
    --border-light: #F3F4F6;
    --border-focus: #3B82F6;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Spacing System */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* Typography */
    --font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;

    --line-height-tight: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* Z-index Scale */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-tooltip: 50;
}

/* ========================================
   THEME: DEFAULT (Explicit selector)
   ======================================== */
[data-theme="default"] {
    /* Same as :root - Professional Blue */
    --theme-name: 'default';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F3F4F6;

    /* Text Colors */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-inverse: #FFFFFF;

    /* Accent Color (Blue) */
    --accent-primary: #3B82F6;
    --accent-secondary: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-light: #DBEAFE;

    /* Message Bubbles */
    --bubble-user-from: #3B82F6;
    --bubble-user-to: #2563EB;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F3F4F6;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-color: #E5E7EB;
    --border-light: #F3F4F6;
    --border-focus: #3B82F6;
}

/* ========================================
   THEME: OCEAN (Teal/Cyan)
   ======================================== */
[data-theme="ocean"] {
    --theme-name: 'ocean';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0FDFA;
    --bg-tertiary: #CCFBF1;

    /* Accent Color (Teal) */
    --accent-primary: #14B8A6;
    --accent-secondary: #0D9488;
    --accent-hover: #0F766E;
    --accent-light: #CCFBF1;

    /* Message Bubbles */
    --bubble-user-from: #14B8A6;
    --bubble-user-to: #0D9488;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #ECFEFF;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #14B8A6;
}

/* ========================================
   THEME: SUNSET (Coral/Orange)
   ======================================== */
[data-theme="sunset"] {
    --theme-name: 'sunset';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FFF7ED;
    --bg-tertiary: #FFEDD5;

    /* Accent Color (Coral) */
    --accent-primary: #FB923C;
    --accent-secondary: #F97316;
    --accent-hover: #EA580C;
    --accent-light: #FFEDD5;

    /* Message Bubbles */
    --bubble-user-from: #FB923C;
    --bubble-user-to: #F97316;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #FEF3C7;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #FB923C;
}

/* ========================================
   THEME: FOREST (Green)
   ======================================== */
[data-theme="forest"] {
    --theme-name: 'forest';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0FDF4;
    --bg-tertiary: #DCFCE7;

    /* Accent Color (Emerald) */
    --accent-primary: #10B981;
    --accent-secondary: #059669;
    --accent-hover: #047857;
    --accent-light: #D1FAE5;

    /* Message Bubbles */
    --bubble-user-from: #10B981;
    --bubble-user-to: #059669;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #DCFCE7;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #10B981;
}

/* ========================================
   THEME: VIOLET (Purple)
   ======================================== */
[data-theme="violet"] {
    --theme-name: 'violet';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FAF5FF;
    --bg-tertiary: #F3E8FF;

    /* Accent Color (Purple) */
    --accent-primary: #A855F7;
    --accent-secondary: #9333EA;
    --accent-hover: #7E22CE;
    --accent-light: #F3E8FF;

    /* Message Bubbles */
    --bubble-user-from: #A855F7;
    --bubble-user-to: #9333EA;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F3E8FF;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #A855F7;
}

/* ========================================
   THEME: CRIMSON (Red - Seregno)
   ======================================== */
[data-theme="crimson"] {
    --theme-name: 'crimson';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FEF2F2;
    --bg-tertiary: #FEE2E2;

    /* Accent Color (Red) */
    --accent-primary: #DC2626;
    --accent-secondary: #B91C1C;
    --accent-hover: #991B1B;
    --accent-light: #FEE2E2;

    /* Message Bubbles */
    --bubble-user-from: #DC2626;
    --bubble-user-to: #B91C1C;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #FEF2F2;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #DC2626;
}

/* ========================================
   THEME: OLIVE (Olive Green)
   ======================================== */
[data-theme="olive"] {
    --theme-name: 'olive';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F7F8F3;
    --bg-tertiary: #ECEFE5;

    /* Accent Color (Olive Green) */
    --accent-primary: #556B2F;
    --accent-secondary: #4A5D29;
    --accent-hover: #3D4D22;
    --accent-light: #E8EBD9;

    /* Message Bubbles */
    --bubble-user-from: #556B2F;
    --bubble-user-to: #4A5D29;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F7F8F3;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #556B2F;
}

/* ========================================
   THEME: MUNICIPAL (Blue - Villa Faraldi)
   ======================================== */
[data-theme="municipal"] {
    --theme-name: 'municipal';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F3F7FA;
    --bg-tertiary: #E5EDF3;

    /* Accent Color (Blue) */
    --accent-primary: #104467;
    --accent-secondary: #005493;
    --accent-hover: #0D3751;
    --accent-light: #D9E8F3;

    /* Message Bubbles */
    --bubble-user-from: #104467;
    --bubble-user-to: #005493;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F3F7FA;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #104467;
}

/* ========================================
   THEME: TROPICAL (Magenta/Gold - Eden Village)
   ======================================== */
[data-theme="tropical"] {
    --theme-name: 'tropical';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FFF8F0;
    --bg-tertiary: #FFE8E0;

    /* Accent Color (Magenta) */
    --accent-primary: #C2185B;
    --accent-secondary: #AD1457;
    --accent-hover: #880E4F;
    --accent-light: #FCE4EC;

    /* Message Bubbles */
    --bubble-user-from: #C2185B;
    --bubble-user-to: #AD1457;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #FFF8F0;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #C2185B;
}

/* ========================================
   THEME: EDENVILLAGE-GREY (Blue-Grey - Eden Village)
   ======================================== */
[data-theme="edenvillage-grey"] {
    --theme-name: 'edenvillage-grey';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F4F6F8;
    --bg-tertiary: #E8EDF3;

    /* Accent Color (Blue-Grey) */
    --accent-primary: #9eacbe;
    --accent-secondary: #6e7f93;
    --accent-hover: #566679;
    --accent-light: #e8edf3;

    /* Message Bubbles */
    --bubble-user-from: #9eacbe;
    --bubble-user-to: #566679;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F4F6F8;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #9eacbe;
}

/* ========================================
   THEME: CORPORATE (Dark Blue - Reale Mutua)
   ======================================== */
[data-theme="corporate"] {
    --theme-name: 'corporate';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F7FA;
    --bg-tertiary: #E8ECF1;

    /* Accent Color (Dark Blue) */
    --accent-primary: #003882;
    --accent-secondary: #002B66;
    --accent-hover: #001F4D;
    --accent-light: #E0EAFF;

    /* Message Bubbles */
    --bubble-user-from: #003882;
    --bubble-user-to: #002B66;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F5F7FA;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #003882;
}

/* ========================================
   THEME: VERIFY (Green - Verify Selftest)
   ======================================== */
[data-theme="verify"] {
    --theme-name: 'verify';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0FAF4;
    --bg-tertiary: #D9F2E3;

    /* Accent Color (Verify Green) */
    --accent-primary: #00823e;
    --accent-secondary: #006b32;
    --accent-hover: #0b611f;
    --accent-light: #D9F2E3;

    /* Message Bubbles */
    --bubble-user-from: #00823e;
    --bubble-user-to: #0b611f;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F0FAF4;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #00823e;
}

[data-theme="verify"] .chat-topbar-logo {
    filter: brightness(0) invert(1);
}

/* ========================================
   THEME: ZABA (Steel Blue - Zaba)
   ======================================== */
[data-theme="zaba"] {
    --theme-name: 'zaba';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F8FB;
    --bg-tertiary: #E8F1F8;

    /* Accent Color (Steel Blue) */
    --accent-primary: #5B8DB8;
    --accent-secondary: #4A7AA3;
    --accent-hover: #3A6A93;
    --accent-light: #E8F1F8;

    /* Message Bubbles */
    --bubble-user-from: #5B8DB8;
    --bubble-user-to: #4A7AA3;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F5F8FB;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #5B8DB8;
}

[data-theme="zaba"] .chat-topbar-logo {
    filter: brightness(0) invert(1);
}

/* ========================================
   THEME: GIRASOLI (Golf Green - Girasoli Golf)
   ======================================== */
[data-theme="girasoli"] {
    --theme-name: 'girasoli';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F2F8F3;
    --bg-tertiary: #DFF0E3;

    /* Accent Color (Golf Green) */
    --accent-primary: #2d8a3e;
    --accent-secondary: #236e31;
    --accent-hover: #1a5c28;
    --accent-light: #DFF0E3;

    /* Message Bubbles */
    --bubble-user-from: #2d8a3e;
    --bubble-user-to: #1a5c28;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F2F8F3;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #2d8a3e;
}

/* ========================================
   THEME: CESIN (Navy Blue - Cesin Group)
   ======================================== */
[data-theme="cesin"] {
    --theme-name: 'cesin';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0F4FA;
    --bg-tertiary: #E0EAF7;

    /* Accent Color (Dark Navy) */
    --accent-primary: #1e3d73;
    --accent-secondary: #2177c1;
    --accent-hover: #163060;
    --accent-light: #e0eaf7;

    /* Message Bubbles */
    --bubble-user-from: #1e3d73;
    --bubble-user-to: #2177c1;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F0F4FA;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #1e3d73;
}

/* ========================================
   THEME: PALAZZODELLALUCE (Gold - Palazzo della Luce)
   ======================================== */
[data-theme="palazzodellaluce"] {
    --theme-name: 'palazzodellaluce';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FDF8E8;
    --bg-tertiary: #FAF0D0;

    /* Accent Color (Dark Gold) */
    --accent-primary: #B8860B;
    --accent-secondary: #DAA520;
    --accent-hover: #8B6508;
    --accent-light: #FDF8E8;

    /* Message Bubbles */
    --bubble-user-from: #B8860B;
    --bubble-user-to: #DAA520;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #FDF8E8;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #B8860B;
}

[data-theme="palazzodellaluce"] .chat-topbar-logo {
    filter: brightness(0) invert(1);
    height: 65px !important;
}

/* ========================================
   THEME: ASL_SIRACUSA (Blue - ASP Siracusa)
   ======================================== */
[data-theme="asl_siracusa"] {
    --theme-name: 'asl_siracusa';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #EBF2FF;
    --bg-tertiary: #D6E6FF;

    /* Accent Color (Healthcare Blue) */
    --accent-primary: #003F87;
    --accent-secondary: #0057B7;
    --accent-hover: #002D6B;
    --accent-light: #EBF2FF;

    /* Message Bubbles */
    --bubble-user-from: #003F87;
    --bubble-user-to: #0057B7;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #EBF2FF;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #003F87;
}

[data-theme="asl_siracusa"] .chat-topbar-logo {
    mix-blend-mode: screen;
    height: 50px !important;
}

/* ========================================
   THEME: IDEA_GRIP (Purple - Idea Grip)
   ======================================== */
[data-theme="idea_grip"] {
    --theme-name: 'idea_grip';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #E8F6FC;
    --bg-tertiary: #D0EDF8;

    /* Accent Color (Light Blue) */
    --accent-primary: #0097D2;
    --accent-secondary: #00AEEF;
    --accent-hover: #006FA0;
    --accent-light: #E8F6FC;

    /* Message Bubbles */
    --bubble-user-from: #0097D2;
    --bubble-user-to: #00AEEF;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #E8F6FC;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #0097D2;
}

[data-theme="idea_grip"] .chat-topbar-logo {
    height: 34px !important;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
}

/* ========================================
   THEME: VOIHOTELS (Blue-Grey - VOIhotels)
   ======================================== */
[data-theme="voihotels"] {
    --theme-name: 'voihotels';

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0F3F7;
    --bg-tertiary: #E1E7EF;

    /* Accent Color (Blue-Grey) */
    --accent-primary: #5c6f93;
    --accent-secondary: #4a5a7a;
    --accent-hover: #3d4c68;
    --accent-light: #E1E7EF;

    /* Message Bubbles */
    --bubble-user-from: #5c6f93;
    --bubble-user-to: #4a5a7a;
    --bubble-user-text: #FFFFFF;
    --bubble-ai-bg: #F0F3F7;
    --bubble-ai-text: #1F2937;

    /* Borders */
    --border-focus: #5c6f93;
}

[data-theme="voihotels"] .chat-topbar-logo {
    mix-blend-mode: screen;
    height: 50px !important;
}

/* ========================================
   SMOOTH THEME TRANSITIONS
   ======================================== */
body {
    transition: background-color var(--transition-base),
                color var(--transition-base);
}

/* Specific selectors for theme transitions - NO WILDCARD */
.boxChat,
.boxChatContainer,
.UserMessage,
.UserMessageContent,
.BotUser,
.BotUserContent,
.composer-btn,
.chat-input,
.message-composer,
.popup-content,
.selected-file-item {
    transition: border-color var(--transition-fast),
                background-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* Prevent transition on page load */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background Colors */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--accent-primary); }

/* Accent Background */
.bg-accent { background-color: var(--accent-primary); }
.bg-accent-light { background-color: var(--accent-light); }

/* Border */
.border { border: 1px solid var(--border-color); }
.border-accent { border-color: var(--accent-primary); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }