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

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

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  body {
    @apply bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-300;
  }
  
  * {
    @apply border-gray-200 dark:border-gray-800;
  }
}

@layer components {
  .glass {
    @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl border border-white/20 dark:border-gray-800/20;
  }
  
  .glass-card {
    @apply glass rounded-xl shadow-lg;
  }
  
  .gradient-bg {
    @apply bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-950 dark:via-gray-900 dark:to-blue-950;
  }
  
  .message-user {
    @apply bg-primary-500 text-white;
  }
  
  .message-assistant {
    @apply bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100;
  }
  
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175) transparent;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 4px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(156 163 175);
    border-radius: 2px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(107 114 128);
  }
}

/* Markdown styles */
.prose-chat {
  @apply text-gray-800 dark:text-gray-200 max-w-none;
}

.prose-chat h1 {
  @apply text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100;
}

.prose-chat h2 {
  @apply text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100;
}

.prose-chat h3 {
  @apply text-lg font-medium mb-2 text-gray-900 dark:text-gray-100;
}

.prose-chat p {
  @apply mb-4 leading-relaxed;
}

.prose-chat ul, .prose-chat ol {
  @apply mb-4 pl-6;
}

.prose-chat li {
  @apply mb-1;
}

.prose-chat ul li {
  @apply list-disc;
}

.prose-chat ol li {
  @apply list-decimal;
}

.prose-chat a {
  @apply text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 underline;
}

.prose-chat strong {
  @apply font-semibold text-gray-900 dark:text-gray-100;
}

.prose-chat em {
  @apply italic;
}

.prose-chat table {
  @apply w-full border-collapse border border-gray-300 dark:border-gray-600 my-4;
}

.prose-chat th {
  @apply border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-4 py-2 text-left font-medium;
}

.prose-chat td {
  @apply border border-gray-300 dark:border-gray-600 px-4 py-2;
}

.prose-chat pre {
  @apply bg-gray-100 dark:bg-gray-800 rounded-lg p-4 overflow-x-auto;
}

.prose-chat code {
  @apply bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-sm;
}

.prose-chat blockquote {
  @apply border-l-4 border-primary-500 pl-4 italic;
}

/* Mermaid diagram styles */
.mermaid {
  @apply flex justify-center my-4;
}

/* Loading animation */
.typing-indicator {
  @apply flex space-x-1;
}

.typing-dot {
  @apply w-2 h-2 bg-gray-400 rounded-full animate-pulse;
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}