@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

@layer base {
  :root {
    /* ============================================
       MARGETTE DESIGN SYSTEM — PALETTE OFFICIELLE
       ============================================
       
       SOURCE: Palette étendue Margette (11 couleurs)
       
       COULEURS FONCTIONNELLES CLÉS (lecture des données):
         🔵 Bleu logo (--total)    = Totaux, valeurs absolues
         🟠 Orange    (--orange)    = Moyennes, indicateurs MOYENNE
         🟢 Vert      (--success)   = Hausse, progression positive
         🟡 Ambre     (--warning)   = Stagnation, attention
         🔴 Rouge     (--destructive) = Baisse, alerte, régression
       
       COULEURS SECONDAIRES (UX étendue):
         🟣 Violet / Lilas = Journal, hypothèses, catégorisation
         🔵 Cyan / Bleu    = États neutres, fonds secondaires
         🟢 Turquoise      = Actions en cours, états positifs
         🟠 Ambre doux     = Mise en évidence, focus ponctuel
       
       RÈGLES NON NÉGOCIABLES:
         1. Même signification = même couleur PARTOUT
         2. Performance (vert/jaune/rouge) = indicateurs uniquement
         3. Jamais de mélange couleur arbitraire
    */
    
    /* ========== COULEUR DE RESPIRATION ========== */
    --background: 210 40% 98%;
    --foreground: 220 25% 15%;

    --card: 0 0% 100%;
    --card-foreground: 220 25% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 25% 15%;

    /* ========== PRIMARY: Jaune logo #FCD00E (CTA uniquement) ========== */
    --primary: 49 97% 52%;
    --primary-foreground: 232 50% 15%;

    /* ========== SECONDARY: Gris bleuté (Structures) ========== */
    --secondary: 210 20% 93%;
    --secondary-foreground: 232 50% 25%;

    /* ========== ACCENT: Violet #512E98 (Leadership) ========== */
    --accent: 260 54% 39%;
    --accent-foreground: 0 0% 100%;

    /* ========== MUTED: Bleu poudre très pâle ========== */
    --muted: 210 30% 95%;
    --muted-foreground: 232 20% 45%;

    /* ========== INDICATEURS DE PERFORMANCE ========== */
    /* Ces couleurs sont STRICTEMENT réservées aux indicateurs */
    
    /* 🔴 Rouge #E45759 = baisse, alerte */
    --destructive: 359 73% 62%;
    --destructive-foreground: 0 0% 100%;

    /* 🟢 Vert #5EA85E = hausse, progression positive */
    /* SOURCE PALETTE: variante foncée du vert Margette */
    --success: 120 28% 51%;
    --success-foreground: 0 0% 100%;

    /* 🟡 Ambre #FFB43B = stagnation, attention */
    --warning: 37 100% 62%;
    --warning-foreground: 232 50% 15%;

    /* ========== BLEU LOGO: Totaux et références #1F275E ========== */
    --total: 232 50% 25%;
    --total-foreground: 0 0% 100%;

    /* ========== ORANGES: Moyennes et évolutions ========== */
    /* Ambre #FFB43B = contexte, mise en évidence */
    --ambre: 37 100% 62%;
    --ambre-foreground: 232 50% 15%;
    
    /* Orange clair = contextualisation douce */
    --orange-light: 37 100% 65%;
    --orange-light-foreground: 232 50% 15%;
    
    /* Orange #F4743B = évolution, moyennes */
    --orange: 18 90% 59%;
    --orange-foreground: 0 0% 100%;

    /* ========== CHAT: Neutres pâles uniquement ========== */
    --chat-bg: 210 35% 97%;
    --chat-bubble-user: 210 25% 92%;
    --chat-bubble-assistant: 0 0% 100%;
    --chat-foreground: 232 50% 20%;

    /* ========== JOURNAL: Système catégoriel ========== */
    /* Ces couleurs ne portent AUCUN jugement de performance */
    --journal-equipe: 293 61% 65%;        /* Lilas */
    --journal-leadership: 260 54% 39%;     /* Violet */
    --journal-finance: 227 64% 53%;        /* Bleu */
    --journal-marketing: 293 55% 70%;      /* Lilas clair */
    --journal-ventes: 168 81% 37%;         /* Turquoise */
    --journal-operations: 227 60% 53%;     /* Bleu doux */
     --journal-produit: 260 50% 45%;        /* Violet doux */
    --journal-technologie: 200 65% 50%;    /* Bleu tech */
    --journal-client: 193 82% 60%;         /* Cyan */
    --journal-foreground: 0 0% 100%;

    /* ========== PALETTE ÉTENDUE ========== */
    /* Turquoise #12AD8E */
    --turquoise: 168 81% 37%;
    --turquoise-foreground: 0 0% 100%;

    /* Lilas #DC9AE5 */
    --lilas: 293 61% 75%;
    --lilas-foreground: 290 40% 25%;

    /* Cyan #A1E3F5 */
    --cyan: 193 82% 80%;
    --cyan-foreground: 232 50% 15%;

    /* Bleu #3B5BD1 */
    --electric: 227 64% 53%;
    --electric-foreground: 0 0% 100%;

    /* Bleu logo #1F275E (same as --total) */
    --bleu-logo: 232 50% 25%;
    --bleu-logo-foreground: 0 0% 100%;

    /* ========== VARIANTES PÂLES / FONCÉES ========== */
    /* Chaque couleur palette a un ton clair et un ton foncé (charte Margette) */
    --jaune-light: 49 97% 65%;
    --jaune-dark: 44 100% 49%;

    --ambre-light: 37 100% 68%;
    --ambre-dark: 36 100% 52%;

    --orange-pale: 18 85% 68%;
    --orange-deep: 14 80% 52%;

    --rouge-light: 359 70% 72%;
    --rouge-dark: 352 55% 49%;

    --lilas-light: 293 55% 82%;
    --lilas-dark: 290 39% 60%;

    --violet-light: 260 54% 45%;
    --violet-dark: 253 57% 26%;

    --cyan-pale: 193 75% 85%;
    --cyan-deep: 183 44% 67%;

    --bleu-light: 227 60% 60%;
    --bleu-dark: 232 64% 36%;

    --bleu-logo-light: 232 45% 35%;
    --bleu-logo-dark: 237 51% 17%;

    --turquoise-light: 168 75% 50%;
    --turquoise-dark: 170 100% 27%;

    --vert-light: 111 78% 73%;
    --vert-dark: 120 28% 40%;

    /* ========== GRAPHIQUES: Couleurs sémantiques ========== */
    --chart-revenue: 227 64% 53%;     /* Bleu #3B5BD1 */
    --chart-profit: 168 81% 37%;      /* Turquoise #12AD8E */
    --chart-productivity: 18 90% 59%; /* Orange #F4743B */
    --chart-equity: 260 54% 39%;      /* Violet #512E98 */
    --chart-vitality: 49 97% 52%;     /* Jaune #FCD00E */

    /* ========== BORDERS & INPUTS ========== */
    --border: 210 25% 88%;
    --input: 210 25% 88%;
    --ring: 49 97% 52%;

    --radius: 0.75rem;

    /* ========== SHADOWS ========== */
    --shadow-xs: 0 1px 2px 0 hsl(232 50% 15% / 0.04);
    --shadow-sm: 0 1px 3px 0 hsl(232 50% 15% / 0.06), 0 1px 2px -1px hsl(232 50% 15% / 0.04);
    --shadow-md: 0 4px 6px -1px hsl(232 50% 15% / 0.08), 0 2px 4px -2px hsl(232 50% 15% / 0.04);
    --shadow-lg: 0 10px 15px -3px hsl(232 50% 15% / 0.08), 0 4px 6px -4px hsl(232 50% 15% / 0.04);

    /* ========== SIDEBAR ========== */
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 232 50% 15%;
    --sidebar-primary: 49 97% 52%;
    --sidebar-primary-foreground: 232 50% 15%;
    --sidebar-accent: 210 30% 95%;
    --sidebar-accent-foreground: 232 50% 15%;
    --sidebar-border: 210 25% 88%;
    --sidebar-ring: 49 97% 52%;
  }

  .dark {
    /* ============================================
       DARK MODE — PALETTE OFFICIELLE MARGETTE / Margette
       ============================================ */
    
    --background: 237 51% 10%;
    --foreground: 210 20% 95%;

    --card: 237 45% 14%;
    --card-foreground: 210 20% 95%;

    --popover: 237 45% 14%;
    --popover-foreground: 210 20% 95%;

    --primary: 49 97% 55%;
    --primary-foreground: 237 51% 10%;

    --secondary: 237 30% 20%;
    --secondary-foreground: 210 20% 90%;

    --accent: 260 50% 55%;
    --accent-foreground: 0 0% 100%;

    --muted: 237 25% 18%;
    --muted-foreground: 210 15% 60%;

    /* Indicateurs de performance - Dark */
    --destructive: 359 70% 65%;
    --destructive-foreground: 0 0% 100%;

    /* Vert - Dark (plus lumineux pour contraste sur fond sombre) */
    --success: 120 35% 55%;
    --success-foreground: 0 0% 100%;

    --warning: 37 100% 62%;
    --warning-foreground: 237 51% 10%;

    /* Bleu logo pour totaux - Dark (légèrement éclairci) */
    --total: 232 50% 35%;
    --total-foreground: 0 0% 100%;

    /* Oranges - Dark */
    --ambre: 37 95% 62%;
    --ambre-foreground: 237 51% 10%;

    --orange-light: 37 95% 65%;
    --orange-light-foreground: 237 51% 10%;
    
    --orange: 18 85% 62%;
    --orange-foreground: 0 0% 100%;

    /* Chat - Dark */
    --chat-bg: 237 40% 12%;
    --chat-bubble-user: 237 30% 22%;
    --chat-bubble-assistant: 237 35% 16%;
    --chat-foreground: 210 20% 92%;

    /* Journal catégoriel - Dark */
    --journal-equipe: 293 55% 68%;
    --journal-leadership: 260 50% 55%;
    --journal-finance: 227 60% 58%;
    --journal-marketing: 293 50% 72%;
    --journal-ventes: 168 75% 45%;
    --journal-operations: 227 55% 58%;
    --journal-produit: 260 45% 55%;
    --journal-technologie: 200 60% 58%;
    --journal-client: 193 70% 60%;
    --journal-foreground: 0 0% 100%;

    /* Palette étendue - Dark (légèrement éclaircies) */
    --turquoise: 168 75% 45%;
    --turquoise-foreground: 0 0% 100%;

    --lilas: 293 55% 72%;
    --lilas-foreground: 293 50% 95%;

    --cyan: 193 70% 65%;
    --cyan-foreground: 237 51% 10%;

    --electric: 227 60% 58%;
    --electric-foreground: 0 0% 100%;

    --bleu-logo: 232 50% 32%;
    --bleu-logo-foreground: 0 0% 100%;

    /* Graphiques - Dark */
    --chart-revenue: 227 60% 58%;
    --chart-profit: 168 75% 45%;
    --chart-productivity: 18 85% 62%;
    --chart-equity: 260 50% 55%;
    --chart-vitality: 49 97% 55%;

    --border: 237 25% 22%;
    --input: 237 25% 22%;
    --ring: 49 97% 55%;

    /* Shadows - Dark */
    --shadow-xs: 0 1px 2px 0 hsl(237 40% 3% / 0.4);
    --shadow-sm: 0 2px 4px 0 hsl(237 40% 3% / 0.5), 0 1px 2px -1px hsl(237 40% 3% / 0.3);
    --shadow-md: 0 4px 8px -1px hsl(237 40% 3% / 0.6), 0 2px 4px -2px hsl(237 40% 3% / 0.4);
    --shadow-lg: 0 10px 20px -3px hsl(237 40% 3% / 0.7), 0 4px 8px -4px hsl(237 40% 3% / 0.5);

    /* Sidebar - Dark */
    --sidebar-background: 237 45% 12%;
    --sidebar-foreground: 210 20% 95%;
    --sidebar-primary: 49 97% 55%;
    --sidebar-primary-foreground: 237 51% 10%;
    --sidebar-accent: 237 30% 18%;
    --sidebar-accent-foreground: 210 20% 95%;
    --sidebar-border: 237 25% 20%;
    --sidebar-ring: 49 97% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Montserrat', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', system-ui, sans-serif;
    @apply font-semibold tracking-tight;
  }
}

@layer components {
  /* ========================================
     SYSTÈME DE BLOCS HARMONISÉ
     ========================================
     
     RÈGLES FONDAMENTALES:
     1. Tous les blocs partagent le même rayon, bordure et profondeur
     2. Dégradés subtils (5-10% max), tons désaturés
     3. Vert/Jaune/Rouge = UNIQUEMENT indicateurs de performance
     4. Fluidité verticale entre les blocs
     5. Chat = neutres pâles, Journal = couleurs catégorielles
  */

  /* ========== FONDATIONS DES BLOCS ========== */
  :root {
    --block-radius: 1rem; /* 16px - rayon uniforme */
    --block-border: hsl(var(--border) / 0.6);
    --block-shadow: var(--shadow-sm);
  }

  .dark {
    --block-border: hsl(260 35% 25% / 0.5);
  }

  /* ========== BLOC STANDARD ========== */
  /* Bloc de base neutre - utilisé partout */
  .block-base {
    @apply border;
    border-radius: var(--block-radius);
    border-color: var(--block-border);
    box-shadow: var(--block-shadow);
  }

  /* ========== DÉGRADÉS DE SECTION ========== */
  /* Dégradés subtils (5-8% max) pour les sections de contenu */
  
  /* Section 1: Bleu poudre très léger (pour Coach/Chat) */
  .section-gradient-coach {
    @apply block-base;
    background: linear-gradient(
      165deg,
      hsl(210 35% 97%) 0%,
      hsl(210 30% 98%) 50%,
      hsl(210 25% 99%) 100%
    );
  }
  .dark .section-gradient-coach {
    background: linear-gradient(
      165deg,
      hsl(237 35% 12%) 0%,
      hsl(237 35% 11%) 50%,
      hsl(237 35% 10%) 100%
    );
  }

  /* Section 2: Lilas/Lavande très léger (pour Journal) */
  .section-gradient-journal {
    @apply block-base;
    background: linear-gradient(
      165deg,
      hsl(250 30% 97%) 0%,
      hsl(260 25% 98%) 50%,
      hsl(240 20% 99%) 100%
    );
  }
  .dark .section-gradient-journal {
    background: linear-gradient(
      165deg,
      hsl(260 30% 13%) 0%,
      hsl(260 30% 11%) 50%,
      hsl(260 30% 10%) 100%
    );
  }

  /* Section 3: Bleu électrique très léger (pour Plan de Match) */
  .section-gradient-plan {
    @apply block-base;
    background: linear-gradient(
      165deg,
      hsl(222 35% 97%) 0%,
      hsl(220 30% 98%) 50%,
      hsl(225 25% 99%) 100%
    );
  }
  .dark .section-gradient-plan {
    background: linear-gradient(
      165deg,
      hsl(227 30% 13%) 0%,
      hsl(227 30% 11%) 50%,
      hsl(227 30% 10%) 100%
    );
  }

  /* Section 4: Turquoise très léger (pour Rapports) */
  .section-gradient-reports {
    @apply block-base;
    background: linear-gradient(
      165deg,
      hsl(175 25% 97%) 0%,
      hsl(180 20% 98%) 50%,
      hsl(190 20% 99%) 100%
    );
  }
  .dark .section-gradient-reports {
    background: linear-gradient(
      165deg,
      hsl(168 20% 12%) 0%,
      hsl(168 20% 11%) 50%,
      hsl(168 20% 10%) 100%
    );
  }

  /* Section 5: Gris bleuté (pour Vitalité/Santé) */
  .section-gradient-vitality {
    @apply block-base;
    background: linear-gradient(
      165deg,
      hsl(210 20% 97%) 0%,
      hsl(215 18% 98%) 50%,
      hsl(210 15% 99%) 100%
    );
  }
  .dark .section-gradient-vitality {
    background: linear-gradient(
      165deg,
      hsl(237 25% 12%) 0%,
      hsl(237 25% 11%) 50%,
      hsl(237 25% 10%) 100%
    );
  }

  /* Section 6: Neutre pur (pour Métriques/Indicateurs) */
  .section-gradient-metrics {
    @apply block-base;
    background: linear-gradient(
      165deg,
      hsl(0 0% 99%) 0%,
      hsl(210 10% 98%) 50%,
      hsl(0 0% 99%) 100%
    );
  }
  .dark .section-gradient-metrics {
    background: linear-gradient(
      165deg,
      hsl(237 25% 13%) 0%,
      hsl(237 25% 12%) 50%,
      hsl(237 25% 11%) 100%
    );
  }

  /* ========== STYLES DE CARTE LEGACY ========== */
  .card-clean {
    @apply bg-card border border-border;
    border-radius: var(--block-radius);
    box-shadow: var(--shadow-sm);
  }

  .card-elevated {
    @apply bg-card border border-border;
    border-radius: var(--block-radius);
    box-shadow: var(--shadow-md);
  }

  /* Dark mode card enhancements */
  .dark .card-clean,
  .dark .card-elevated {
    background: linear-gradient(
      165deg,
      hsl(237 35% 14%) 0%,
      hsl(237 35% 12%) 100%
    );
    border-color: hsl(237 30% 22% / 0.7);
  }

  /* ========== HOVER EFFECTS ========== */
  .hover-lift {
    @apply transition-all duration-200 ease-out;
  }

  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .dark .hover-lift:hover {
    box-shadow: 0 10px 30px -5px hsl(49 97% 55% / 0.12),
                0 4px 10px -4px hsl(237 40% 5% / 0.6);
  }

  /* ========== INDICATEURS DE PERFORMANCE UNIQUEMENT ========== */
  /* Ces classes utilisent vert/jaune/rouge */
  .metric-up {
    @apply text-success;
  }

  .metric-down {
    @apply text-destructive;
  }

  .metric-stable {
    @apply text-muted-foreground;
  }

  /* ========== BADGES DE PERFORMANCE ========== */
  .badge-success {
    @apply bg-success/15 text-success border-success/25;
  }

  .badge-warning {
    @apply bg-warning/15 text-warning border-warning/25;
  }

  .badge-destructive {
    @apply bg-destructive/15 text-destructive border-destructive/25;
  }

  /* ========== BADGES CATÉGORIELS (Journal) ========== */
  /* Ces badges n'utilisent JAMAIS vert/jaune/rouge */
  .badge-turquoise {
    @apply bg-turquoise/15 text-turquoise border-turquoise/25;
  }

  .badge-lilas {
    @apply bg-lilas/40 text-lilas-foreground border-lilas/50;
  }

  .badge-orange {
    @apply bg-orange/15 text-orange border-orange/25;
  }

  .badge-violet {
    @apply bg-accent/15 text-accent border-accent/25;
  }

  .badge-electric {
    @apply bg-electric/15 text-electric border-electric/25;
  }

  /* ========== GLOW EFFECTS (Dark mode) ========== */
  .dark .glow-primary {
    box-shadow: 0 0 25px -5px hsl(49 97% 55% / 0.35);
  }

  .dark .glow-success {
    box-shadow: 0 0 25px -5px hsl(120 35% 55% / 0.35);
  }

  .dark .glow-accent {
    box-shadow: 0 0 25px -5px hsl(260 54% 55% / 0.35);
  }

  .dark .glow-turquoise {
    box-shadow: 0 0 25px -5px hsl(168 75% 45% / 0.35);
  }

  .dark .glow-electric {
    box-shadow: 0 0 25px -5px hsl(227 64% 53% / 0.35);
  }

  /* ========== SUPPRESSION DES ANCIENS DÉGRADÉS FORTS ========== */
  /* Ces classes surchargeaient avec des dégradés trop marqués */
  /* Remplacées par des versions subtiles (5-8% max) */

  .dark [class*="from-primary/5"] {
    background: linear-gradient(
      165deg,
      hsl(49 97% 55% / 0.04) 0%,
      hsl(237 35% 11%) 50%,
      hsl(227 64% 53% / 0.03) 100%
    ) !important;
    border-color: hsl(49 97% 55% / 0.1) !important;
  }

  .dark [class*="from-accent/5"] {
    background: linear-gradient(
      165deg,
      hsl(260 54% 55% / 0.06) 0%,
      hsl(237 35% 11%) 50%,
      hsl(293 61% 65% / 0.04) 100%
    ) !important;
    border-color: hsl(260 54% 55% / 0.12) !important;
  }

  .dark [class*="from-secondary/5"] {
    background: linear-gradient(
      165deg,
      hsl(168 75% 45% / 0.05) 0%,
      hsl(237 35% 11%) 50%,
      hsl(49 97% 55% / 0.03) 100%
    ) !important;
    border-color: hsl(168 75% 45% / 0.1) !important;
  }

  .dark [class*="from-electric/5"] {
    background: linear-gradient(
      165deg,
      hsl(227 64% 53% / 0.06) 0%,
      hsl(237 35% 11%) 50%,
      hsl(260 54% 55% / 0.04) 100%
    ) !important;
    border-color: hsl(227 64% 53% / 0.12) !important;
  }

  .dark [class*="from-turquoise/5"] {
    background: linear-gradient(
      165deg,
      hsl(168 75% 45% / 0.06) 0%,
      hsl(237 35% 11%) 50%,
      hsl(120 35% 55% / 0.04) 100%
    ) !important;
    border-color: hsl(168 75% 45% / 0.1) !important;
  }

  /* Dark mode specific card styles */
  .dark .rounded-2xl[class*="border"] {
    border-color: hsl(237 30% 22% / 0.7);
  }

  .dark .shadow-sm {
    box-shadow: 
      0 1px 3px 0 hsl(237 40% 5% / 0.5),
      inset 0 1px 0 0 hsl(237 30% 25% / 0.2);
  }

  /* Dark mode metric cards */
  .dark [data-slot="card"] {
    background: linear-gradient(
      165deg,
      hsl(237 35% 14%) 0%,
      hsl(237 35% 12%) 100%
    );
    border-color: hsl(237 30% 22% / 0.6);
  }
}

@layer utilities {
  .transition-smooth {
    @apply transition-all duration-200 ease-out;
  }

  /* Dark mode text gradients */
  .dark .text-gradient-gold {
    background: linear-gradient(135deg, hsl(49 97% 55%) 0%, hsl(37 100% 60%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .dark .bg-subtle-gradient {
    background: linear-gradient(
      180deg,
      hsl(260 40% 7%) 0%,
      hsl(260 40% 9%) 50%,
      hsl(260 40% 7%) 100%
    );
  }

  /* Brand background utilities */
  .bg-jaune {
    background-color: hsl(var(--primary));
  }

  .bg-turquoise-brand {
    background-color: hsl(var(--turquoise));
  }

  .bg-violet-brand {
    background-color: hsl(var(--accent));
  }

  .bg-lilas-brand {
    background-color: hsl(var(--lilas));
  }

  .bg-rouge-brand {
    background-color: hsl(var(--destructive));
  }

  .bg-vert-brand {
    background-color: hsl(var(--success));
  }
}

/* ========== ANIMATIONS ========== */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.4s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.5s ease-out forwards;
}

/* ========== CHAT STYLES ========== */
.chat-message-margette {
  @apply text-[15px] leading-[1.65] tracking-[-0.01em];
  font-family: 'Montserrat', sans-serif;
}

.chat-message-margette strong,
.chat-message-margette b {
  @apply font-semibold text-foreground;
}

.chat-bubble-margette {
  @apply bg-gradient-to-br from-lilas/30 via-cyan/20 to-accent/10;
  @apply border border-lilas/40;
  @apply shadow-sm;
}

.dark .chat-bubble-margette {
  @apply bg-gradient-to-br from-accent/20 via-muted/50 to-lilas/10;
  @apply border-accent/25;
}

/* New message glow animation */
.chat-bubble-glow {
  animation: bubble-glow 2s ease-out forwards;
}

@keyframes bubble-glow {
  0% {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.4), 0 0 40px hsl(var(--accent) / 0.2);
  }
  100% {
    box-shadow: 0 0 0px hsl(var(--primary) / 0), 0 0 0px hsl(var(--accent) / 0);
  }
}

/* Message slide in animation */
.chat-message-enter {
  animation: message-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes message-slide-in {
  0% {
    opacity: 0;
    transform: translateX(-16px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Staggered message reveal */
.chat-reveal-container .chat-message:nth-child(1) { animation-delay: 0ms; }
.chat-reveal-container .chat-message:nth-child(2) { animation-delay: 50ms; }
.chat-reveal-container .chat-message:nth-child(3) { animation-delay: 100ms; }
.chat-reveal-container .chat-message:nth-child(4) { animation-delay: 150ms; }
.chat-reveal-container .chat-message:nth-child(5) { animation-delay: 200ms; }

@keyframes reveal-message {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-reveal-container .chat-message {
  opacity: 0;
  animation: reveal-message 0.4s ease-out forwards;
}

/* ========== AVATAR ANIMATIONS ========== */
@keyframes avatar-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes avatar-glow-pulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4),
                0 0 20px 0 hsl(var(--accent) / 0.15);
  }
  50% { 
    box-shadow: 0 0 0 8px hsl(var(--primary) / 0),
                0 0 30px 5px hsl(var(--accent) / 0.25);
  }
}

.avatar-thinking {
  animation: avatar-bounce 0.8s ease-in-out infinite,
             avatar-glow-pulse 1.5s ease-in-out infinite;
}

/* ========== CHAT HEADER STYLES ========== */
.chat-header-gradient {
  background: linear-gradient(
    135deg,
    hsl(var(--lilas) / 0.15) 0%,
    hsl(var(--accent) / 0.08) 50%,
    hsl(var(--primary) / 0.1) 100%
  );
}

  .dark .chat-header-gradient {
    background: linear-gradient(
      135deg,
      hsl(260 54% 55% / 0.15) 0%,
      hsl(260 35% 12%) 50%,
      hsl(49 97% 55% / 0.08) 100%
    );
  }

/* Chat options button appear animation */
@keyframes option-appear {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-option-button {
  animation: option-appear 0.3s ease-out forwards;
}

.chat-option-button:nth-child(1) { animation-delay: 0ms; }
.chat-option-button:nth-child(2) { animation-delay: 75ms; }
.chat-option-button:nth-child(3) { animation-delay: 150ms; }

/* ========== SCROLLBAR STYLES ========== */
.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}

  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background: hsl(260 35% 25%);
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: hsl(260 35% 35%);
  }

/* ========== SCROLL REVEAL ========== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}