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

/* Custom scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-slate-800/50;
}

::-webkit-scrollbar-thumb {
  @apply bg-slate-600/50 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-500/50;
}

/* Enhanced prose styles for better markdown rendering */
.prose-invert {
  --tw-prose-body: theme(colors.slate.300);
  --tw-prose-headings: theme(colors.white);
  --tw-prose-lead: theme(colors.slate.400);
  --tw-prose-links: theme(colors.blue.400);
  --tw-prose-bold: theme(colors.white);
  --tw-prose-counters: theme(colors.slate.400);
  --tw-prose-bullets: theme(colors.slate.500);
  --tw-prose-hr: theme(colors.slate.700);
  --tw-prose-quotes: theme(colors.slate.300);
  --tw-prose-quote-borders: theme(colors.slate.600);
  --tw-prose-captions: theme(colors.slate.400);
  --tw-prose-code: theme(colors.pink.400);
  --tw-prose-pre-code: theme(colors.slate.200);
  --tw-prose-pre-bg: theme(colors.slate.900);
  --tw-prose-th-borders: theme(colors.slate.600);
  --tw-prose-td-borders: theme(colors.slate.700);
}

.prose code {
  @apply bg-slate-700/50 text-pink-400 px-1.5 py-0.5 rounded text-sm font-medium;
}

.prose pre {
  @apply bg-slate-900/80 border border-slate-700/50 rounded-lg;
}

.prose blockquote {
  @apply border-l-4 border-blue-500/50 bg-slate-800/30 rounded-r-lg;
}

.prose img {
  @apply rounded-lg shadow-lg;
}

.prose table {
  @apply bg-slate-800/30 rounded-lg overflow-hidden;
}

.prose th {
  @apply bg-slate-700/50;
}

.prose tr:nth-child(even) {
  @apply bg-slate-800/20;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  @apply font-bold;
}

.prose h1 {
  @apply text-3xl text-blue-400 border-b border-slate-700/50 pb-2;
}

.prose h2 {
  @apply text-2xl text-green-400;
}

.prose h3 {
  @apply text-xl text-yellow-400;
}

.prose a {
  @apply text-blue-400 hover:text-blue-300 transition-colors underline decoration-blue-400/50 hover:decoration-blue-300/50;
}

.prose strong {
  @apply text-white font-bold;
}

.prose em {
  @apply text-slate-200 italic;
}

.prose del {
  @apply text-slate-500 line-through;
}

.prose ul, .prose ol {
  @apply space-y-1;
}

.prose li {
  @apply text-slate-300;
}