src/index.css

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

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

@layer base {
  :root {
    /* Glassmorphic Apple-inspired palette */
    --background: 220 20% 10%;
    --foreground: 210 40% 98%;

    --card: 220 15% 15%;
    --card-foreground: 210 40% 98%;

    --popover: 220 15% 12%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 100% 60%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 220 15% 20%;
    --secondary-foreground: 210 40% 98%;

    --muted: 220 15% 18%;
    --muted-foreground: 215 20% 55%;

    --accent: 220 15% 22%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 15% 20%;
    --input: 220 15% 15%;
    --ring: 210 100% 60%;

    --radius: 1rem;

    /* Glass effects */
    --glass: 220 15% 12% / 0.6;
    --glass-border: 220 15% 25% / 0.5;
    --glass-highlight: 210 100% 98% / 0.05;
    --glow: 210 100% 60%;
    --glow-soft: 210 100% 60% / 0.15;

    /* Sidebar */
    --sidebar-background: 220 20% 8%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 210 100% 60%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 220 15% 15%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 220 15% 15%;
    --sidebar-ring: 210 100% 60%;

    /* Provider colors */
    --ollama: 148 60% 45%;
    --openai: 0 0% 100%;
  }

  .light {
    --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: 210 100% 50%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 210 100% 50%;
    --glass: 0 0% 100% / 0.7;
    --glass-border: 0 0% 0% / 0.1;
    --glass-highlight: 0 0% 100% / 0.5;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 222.2 84% 4.9%;
    --sidebar-primary: 210 100% 50%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 210 40% 96.1%;
    --sidebar-accent-foreground: 222.2 47.4% 11.2%;
    --sidebar-border: 214.3 31.8% 91.4%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

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

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

@layer utilities {
  /* Glassmorphism */
  .glass {
    background: hsl(var(--glass));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid hsl(var(--glass-border));
  }

  .glass-subtle {
    background: hsl(var(--glass));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .glass-card {
    background: linear-gradient(
      135deg,
      hsl(var(--glass)) 0%,
      hsl(var(--card) / 0.8) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid hsl(var(--glass-border));
    box-shadow: 
      0 4px 24px -4px hsl(0 0% 0% / 0.3),
      inset 0 1px 0 0 hsl(var(--glass-highlight));
  }

  .glass-sidebar {
    background: linear-gradient(
      180deg,
      hsl(var(--sidebar-background) / 0.95) 0%,
      hsl(var(--sidebar-background) / 0.85) 100%
    );
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }

  /* Glow effects */
  .glow {
    box-shadow: 
      0 0 20px hsl(var(--glow) / 0.3),
      0 0 40px hsl(var(--glow) / 0.2);
  }

  .glow-sm {
    box-shadow: 0 0 10px hsl(var(--glow) / 0.2);
  }

  .text-glow {
    text-shadow: 0 0 20px hsl(var(--glow) / 0.5);
  }

  /* Animations */
  @keyframes voice-wave {
    0%, 100% {
      transform: scaleY(0.5);
    }
    50% {
      transform: scaleY(1);
    }
  }

  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 5px hsl(var(--destructive) / 0.5);
    }
    50% {
      box-shadow: 0 0 20px hsl(var(--destructive) / 0.8);
    }
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  .animate-voice-wave {
    animation: voice-wave 0.5s ease-in-out infinite;
  }

  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }

  .animate-shimmer {
    animation: shimmer 2s linear infinite;
    background: linear-gradient(
      90deg,
      transparent 0%,
      hsl(var(--glass-highlight)) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
  }

  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  /* Provider badges */
  .provider-ollama {
    background: hsl(var(--ollama) / 0.15);
    border-color: hsl(var(--ollama) / 0.3);
    color: hsl(var(--ollama));
  }

  .provider-openai {
    background: hsl(var(--openai) / 0.1);
    border-color: hsl(var(--openai) / 0.2);
    color: hsl(var(--openai));
  }

  /* Hover transitions */
  .hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px -8px hsl(0 0% 0% / 0.4);
  }
}