Update styles.css

styles.css

@@ -1,64 +1,191 @@
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f4f4f9;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
+@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%;
+  }
 }
 
-.chat-container {
-    width: 400px;
-    height: 500px;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
+@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;
 }
 
-.chat-box {
-    flex: 1;
-    padding: 20px;
-    overflow-y: auto;
-    border-bottom: 2px solid #eee;
+@keyframes typing {
+  0% { width: 0 }
+  100% { width: 100% }
 }
 
-.user-input {
-    width: calc(100% - 80px);
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    margin: 10px;
-    font-size: 14px;
+.typing-indicator {
+  @apply inline-flex space-x-1 mt-1;
 }
 
-.send-button {
-    padding: 10px 20px;
-    background-color: #5cb85c;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
+.typing-indicator span {
+  @apply w-2 h-2 bg-restaurant-burgundy/60 rounded-full;
+  animation: bounce 1.4s infinite ease-in-out both;
 }
 
-.send-button:hover {
-    background-color: #4cae4c;
+.typing-indicator span:nth-child(1) {
+  animation-delay: -0.32s;
 }
 
-.bot-message {
-    background-color: #e2e2e2;
-    padding: 10px;
-    border-radius: 10px;
-    margin-bottom: 10px;
+.typing-indicator span:nth-child(2) {
+  animation-delay: -0.16s;
 }
 
-.user-message {
-    background-color: #5cb85c;
-    color: white;
-    padding: 10px;
-    border-radius: 10px;
-    margin-bottom: 10px;
-    text-align: right;
+@keyframes bounce {
+  0%, 80%, 100% { 
+    transform: scale(0);
+  } 
+  40% { 
+    transform: scale(1.0);
+  }
 }
+