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

@layer base {
  :root {
    /* Light Theme */
    --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: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;

    --muted: 210 30% 95%;
    --muted-foreground: 215.4 25% 40%;

    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;

    --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: 221.2 83.2% 53.3%;

    /* Extended Colors */

    --gradient-from: 252 100% 67%;
    --gradient-to: 320 85% 60%;

    --sidebar-active-bg-from: 270 95% 95%;
    --sidebar-active-bg-to: 270 50% 98%;

    --sidebar-active-text: 270 95% 45%;
    --sidebar-active-border: 270 95% 60%;

    /* Radius */

    --radius: 0.5rem;
  }

  .dark {
    /* Dark Theme */

    --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: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;

    --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%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;

    --ring: 224.3 76.3% 94.1%;

    /* Extended Colors */

    --gradient-from: 217.2 91.2% 59.8%;
    --gradient-to: 262 83% 58%;

    --sidebar-active-bg-from: 217.2 32.6% 17.5%;
    --sidebar-active-bg-to: 217.2 32.6% 17.5%;

    --sidebar-active-text: 210 40% 98%;
    --sidebar-active-border: 217.2 91.2% 59.8%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-size: 0.875rem;
  }
}
/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.5);
  border-radius: 9999px;
}

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

p {
  margin: 0;
}

@keyframes collapsible-down {
  from {
    height: 0;
    opacity: 0;
    transform: translateY(-4px);
    visibility: hidden;
  }
  to {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height);
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  to {
    height: 0;
    opacity: 0;
    transform: translateY(-4px);
    visibility: hidden;
  }
}

.collapsible-content[data-state='open'] {
  animation: collapsible-down 300ms ease-out;
  visibility: visible;
}

.collapsible-content[data-state='closed'] {
  animation: collapsible-up 300ms ease-out;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-content {
    animation: none !important;
  }
}
.markdown-body p {
  margin-bottom: 0.5em;
}

.markdown-body ol,
.markdown-body ul {
  margin: 1em 0;
  padding-left: 2em;
  list-style-type: decimal;
}

.markdown-body li + li {
  margin-top: 0.35em;
}

.markdown-body hr {
  margin: 10px 0;
}

.markdown-body table {
  width: 100% !important;
  margin-bottom: 10px;
  text-align: left;
  border-collapse: collapse;
}

.markdown-body table thead tr {
  color: #fff;
  font-weight: 600;
  background-color: hsl(var(--primary) / 0.6);
  border-bottom: 1px solid #e5e7eb;
}

.markdown-body table tbody tr:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

.markdown-body table td,
.markdown-body table th {
  padding: 8px;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  border-bottom: none;
}

.markdown-body h1 {
  font-size: 24px;
}

.markdown-body h2 {
  font-size: 20px;
}

.markdown-body h3 {
  font-size: 18px;
}

.markdown-body a {
  color: hsl(var(--primary));
}

.markdown-body a:hover {
  color: hsl(var(--primary) / 0.6);
}

.markdown-body pre {
  padding: 12px;
  border-radius: 8px;
  background: #f5f5f5;
}