/**
 * MAISON DALÍ RED THEME - AI CONCIERGE DESIGN SYSTEM
 * Mission 804: World-Class Chatbot Architecture
 * Classification: S-TIER Bleeding Edge Design
 * Version: 1.0.0 - Dalí Red Signature Edition
 */

/* ═══════════════════════════════════════════════════════════
   DALÍ RED COLOR PALETTE - Signature Surrealist Luxury
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Primary Dalí Red Signature Colors */
  --dali-red-primary: #C41E3A;        /* Signature Dalí red */
  --dali-red-secondary: #8B0000;      /* Deep burgundy */
  --dali-red-accent: #DC143C;         /* Crimson highlights */
  --dali-red-soft: #F08080;           /* Light coral */
  --dali-red-dark: #5C0A0A;           /* Almost black red */
  
  /* Red Gradients */
  --dali-red-gradient: linear-gradient(135deg, #C41E3A 0%, #8B0000 100%);
  --dali-red-gradient-reverse: linear-gradient(135deg, #8B0000 0%, #C41E3A 100%);
  --dali-red-gradient-radial: radial-gradient(circle, #DC143C 0%, #8B0000 100%);
  
  /* Glass Morphism Effects */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-light: rgba(255, 255, 255, 0.1);
  --glass-bg-dark: rgba(0, 0, 0, 0.3);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  --glass-backdrop: blur(10px);
  
  /* Red Glow & Shadow Effects */
  --dali-red-glow: rgba(196, 30, 58, 0.3);
  --dali-red-glow-strong: rgba(196, 30, 58, 0.6);
  --dali-red-shadow: 0 0 20px rgba(196, 30, 58, 0.4);
  --dali-red-shadow-strong: 0 0 30px rgba(196, 30, 58, 0.7);
  
  /* Animation Timings */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-instant: all 0.15s ease-in-out;
  
  /* Z-Index Layers */
  --z-chatbot-fab: 9999;
  --z-chatbot-window: 9998;
  --z-chatbot-backdrop: 9997;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', serif;
  
  /* Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1440px;
}

/* ═══════════════════════════════════════════════════════════
   DALÍ RED KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

/* Pulse Animation - Dalí Red Heartbeat */
@keyframes dali-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--dali-red-glow);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 15px transparent;
    transform: scale(1.05);
  }
}

/* Glow Animation - Red Aura */
@keyframes dali-glow {
  0%, 100% {
    box-shadow: 0 0 10px var(--dali-red-glow);
  }
  50% {
    box-shadow: var(--dali-red-shadow-strong);
  }
}

/* Melting Dots - Surrealist Typing Indicator */
@keyframes melting-dots {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  25% {
    transform: translateY(-8px) scaleY(1.2);
  }
  50% {
    transform: translateY(0) scaleY(0.8);
  }
  75% {
    transform: translateY(4px) scaleY(1.1);
  }
}

/* Slide In from Bottom Right */
@keyframes slide-in-bottom-right {
  from {
    opacity: 0;
    transform: translateX(100px) translateY(100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

/* Slide Out to Bottom Right */
@keyframes slide-out-bottom-right {
  from {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(100px) translateY(100px) scale(0.8);
  }
}

/* Message Slide In from Right */
@keyframes message-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Message Slide In from Left */
@keyframes message-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Shimmer Effect for Loading */
@keyframes dali-shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Rotate Clockwise */
@keyframes rotate-clockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Scale Pop */
@keyframes scale-pop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES - Dalí Red Themed
   ═══════════════════════════════════════════════════════════ */

/* Background Utilities */
.dali-bg-red-primary { background: var(--dali-red-primary); }
.dali-bg-red-gradient { background: var(--dali-red-gradient); }
.dali-bg-glass { background: var(--glass-bg); }
.dali-bg-glass-light { background: var(--glass-bg-light); }

/* Border Utilities */
.dali-border-red { border: 1px solid var(--dali-red-primary); }
.dali-border-red-accent { border: 2px solid var(--dali-red-accent); }
.dali-border-glass { border: 1px solid var(--glass-border); }

/* Shadow Utilities */
.dali-shadow-red { box-shadow: var(--dali-red-shadow); }
.dali-shadow-red-strong { box-shadow: var(--dali-red-shadow-strong); }
.dali-shadow-glass { box-shadow: var(--glass-shadow); }

/* Text Utilities */
.dali-text-red { color: var(--dali-red-primary); }
.dali-text-red-accent { color: var(--dali-red-accent); }
.dali-text-red-soft { color: var(--dali-red-soft); }

/* Animation Utilities */
.dali-animate-pulse { animation: dali-pulse 2s infinite; }
.dali-animate-glow { animation: dali-glow 2s infinite; }
.dali-transition-smooth { transition: var(--transition-smooth); }
.dali-transition-bounce { transition: var(--transition-bounce); }

/* ═══════════════════════════════════════════════════════════
   GLASS MORPHISM COMPONENTS
   ═══════════════════════════════════════════════════════════ */

.dali-glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
}

.dali-glass-panel-red {
  background: rgba(196, 30, 58, 0.08);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--dali-red-primary);
  box-shadow: var(--dali-red-shadow);
  border-radius: 16px;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* Mobile Overrides (< 768px) */
@media (max-width: 767px) {
  :root {
    --dali-red-glow: rgba(196, 30, 58, 0.2); /* Softer on mobile */
  }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --dali-red-glow: rgba(196, 30, 58, 0.25);
  }
}

/* Desktop (> 1024px) */
@media (min-width: 1024px) {
  :root {
    --dali-red-glow: rgba(196, 30, 58, 0.3); /* Full intensity */
  }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY & REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --dali-red-primary: #FF0000;
    --dali-red-secondary: #990000;
    --dali-red-accent: #FF3333;
  }
}

/* ═══════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════ */

@media print {
  .dali-chatbot-fab,
  .dali-chatbot-window {
    display: none !important;
  }
}