frontend/src/app/globals.css

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

@layer base {
  body {
    @apply antialiased text-text-primary bg-slate-50;
  }
}

@layer components {
  .chat-bubble {
    @apply relative rounded-2xl p-6 transition-all duration-300 ease-in-out;
  }
  
  .chat-bubble-user {
    @apply bg-white shadow-sm;
  }
  
  .chat-bubble-assistant {
    @apply bg-secondary/30;
  }

  .button-primary {
    @apply flex items-center justify-center px-6 py-3 rounded-full 
           bg-primary hover:bg-primary-dark text-white font-semibold
           transition-all duration-200 ease-in-out
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .button-secondary {
    @apply flex items-center justify-center px-6 py-3 rounded-full 
           bg-secondary hover:bg-secondary/80 text-text-primary font-semibold
           transition-all duration-200 ease-in-out;
  }

  .input-primary {
    @apply w-full px-6 py-4 rounded-2xl bg-secondary
           text-text-primary placeholder:text-text-secondary
           focus:outline-none focus:ring-2 focus:ring-primary/20
           transition-all duration-200 ease-in-out;
  }
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Markdown content styling */
.prose pre {
  @apply bg-slate-800 text-white rounded-xl p-4 my-4 overflow-x-auto;
}

.prose code {
  @apply bg-slate-100 text-slate-800 rounded px-1.5 py-0.5 text-sm font-mono;
}

.prose ul {
  @apply list-disc pl-6 my-4;
}

.prose ol {
  @apply list-decimal pl-6 my-4;
}

.prose a {
  @apply text-primary hover:text-primary-dark underline;
}

.prose blockquote {
  @apply border-l-4 border-secondary pl-4 italic my-4;
}