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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 350 80% 25%; /* Burgundy primary color */
    --primary-foreground: 45 80% 52%; /* Gold text on primary */

    --secondary: 45 80% 52%; /* Gold secondary color */
    --secondary-foreground: 350 80% 25%; /* Burgundy text on secondary */

    --muted: 39 100% 97%;
    --muted-foreground: 350 40% 25%;

    --accent: 45 70% 85%;
    --accent-foreground: 350 80% 25%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 39 30% 90%;
    --input: 39 30% 90%;
    --ring: 350 80% 25%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-family: 'Lato', sans-serif;
  }
  
  h1, h2, h3, .font-serif {
    font-family: 'Playfair Display', serif;
  }
}

@layer components {
  .chat-container {
    @apply max-w-3xl mx-auto h-[80vh] bg-restaurant-light rounded-xl shadow-lg flex flex-col overflow-hidden border border-restaurant-gold/20;
  }
  
  .chat-header {
    @apply bg-restaurant-burgundy text-white py-4 px-6 flex items-center justify-between border-b border-restaurant-gold/30;
  }
  
  .chat-messages {
    @apply flex-1 overflow-y-auto p-4 space-y-4 bg-gradient-to-b from-restaurant-cream to-white;
  }
  
  .message {
    @apply max-w-[80%] p-3 rounded-xl animate-fade-in;
  }
  
  .bot-message {
    @apply bg-white border border-restaurant-burgundy/20 text-restaurant-dark rounded-tr-xl rounded-br-xl rounded-bl-xl shadow-sm;
  }
  
  .user-message {
    @apply bg-restaurant-burgundy text-white ml-auto rounded-tl-xl rounded-tr-xl rounded-bl-xl shadow-sm;
  }
  
  .chat-input-container {
    @apply p-4 bg-white border-t border-restaurant-gold/30;
  }
  
  .quick-replies {
    @apply flex flex-wrap gap-2 mb-4;
  }
  
  .quick-reply-btn {
    @apply px-4 py-2 bg-restaurant-cream text-restaurant-burgundy rounded-full border border-restaurant-gold/40 hover:bg-restaurant-gold hover:text-white transition-colors duration-200 text-sm whitespace-nowrap animate-fade-in;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes typing {
  0% { width: 0 }
  100% { width: 100% }
}

.typing-indicator {
  @apply inline-flex space-x-1 mt-1;
}

.typing-indicator span {
  @apply w-2 h-2 bg-restaurant-burgundy/60 rounded-full;
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 
  40% { 
    transform: scale(1.0);
  }
}