src/index.css

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

/* Chatbot UI Design System - Modern, clean, and professional */

@layer base {
  :root {
    /* Main backgrounds and surfaces */
    --background: 248 250 252; /* slate-50 - main app background */
    --foreground: 215 28% 17%; /* slate-800 - primary text */
    
    /* Chat specific backgrounds */
    --chat-background: 241 245 249; /* slate-100 - chat area background */
    --message-background: 0 0% 100%; /* white - bot message cards */
    
    /* User message gradient - blue to purple */
    --user-gradient-start: 217 91% 60%; /* blue-500 */
    --user-gradient-end: 251 91% 68%; /* purple-500 */
    --user-message-foreground: 0 0% 100%; /* white text */
    
    /* Bot message styling */
    --bot-message-background: 0 0% 100%; /* white */
    --bot-message-foreground: 215 25% 27%; /* slate-700 */
    --bot-message-border: 220 13% 91%; /* slate-200 */
    
    /* Input and interactive elements */
    --input-background: 0 0% 100%; /* white */
    --input-border: 220 13% 91%; /* slate-200 */
    --input-focus-border: 217 91% 60%; /* blue-500 */
    
    /* Send button gradient */
    --send-button-start: 217 91% 60%; /* blue-500 */
    --send-button-end: 251 91% 68%; /* purple-500 */
    --send-button-foreground: 0 0% 100%; /* white */
    
    /* Header styling */
    --header-background: 0 0% 100%; /* white */
    --header-foreground: 215 28% 17%; /* slate-800 */
    --header-border: 220 13% 91%; /* slate-200 */
    
    /* Quick actions */
    --quick-action-background: 248 250 252; /* slate-50 */
    --quick-action-foreground: 215 25% 27%; /* slate-700 */
    --quick-action-hover: 241 245 249; /* slate-100 */
    --quick-action-border: 220 13% 91%; /* slate-200 */
    
    /* Avatars and accents */
    --avatar-background: 217 91% 60%; /* blue-500 */
    --avatar-foreground: 0 0% 100%; /* white */
    
    /* Shadows and effects */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Animations and transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --animation-bounce-in: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Legacy compatibility */
    --card: var(--message-background);
    --card-foreground: var(--bot-message-foreground);
    --primary: var(--user-gradient-start);
    --primary-foreground: var(--user-message-foreground);
    --secondary: var(--quick-action-background);
    --secondary-foreground: var(--quick-action-foreground);
    --muted: var(--chat-background);
    --muted-foreground: 215 16% 47%; /* slate-500 */
    --accent: var(--quick-action-hover);
    --accent-foreground: var(--quick-action-foreground);
    --border: var(--input-border);
    --input: var(--input-background);
    --ring: var(--input-focus-border);
    --radius: 0.75rem; /* More rounded for modern look */
    
    /* Sidebar (keeping existing) */
    --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 {
    /* Dark mode - keeping light theme for now, focusing on the chatbot experience */
    --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%;
    --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-sans;
  }
}

@layer components {
  /* Chat message animations */
  .message-fade-in {
    animation: messageSlideIn 0.3s ease-out;
  }
  
  .user-message-gradient {
    background: linear-gradient(135deg, hsl(var(--user-gradient-start)), hsl(var(--user-gradient-end)));
  }
  
  .send-button-gradient {
    background: linear-gradient(135deg, hsl(var(--send-button-start)), hsl(var(--send-button-end)));
  }
  
  .chat-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }
  
  .chat-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  
  .chat-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .chat-scrollbar::-webkit-scrollbar-thumb {
    background-color: hsl(var(--border));
    border-radius: 3px;
  }
}

@layer utilities {
  .message-shadow {
    box-shadow: var(--shadow-sm);
  }
  
  .input-shadow {
    box-shadow: var(--shadow-md);
  }
  
  .header-shadow {
    box-shadow: var(--shadow-sm);
  }
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}