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

@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 142 71% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 214 32% 91%;
    --secondary-foreground: 222 47% 11%;
    --muted: 214 32% 91%;
    --muted-foreground: 215 16% 47%;
    --accent: 214 32% 91%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 88%;
    --input: 214 32% 88%;
    --ring: 142 71% 45%;
    --radius: 0.5rem;
    --surface-elevated: 0 0% 100%;
    --glow: 142 71% 45%;
    --nav-height: 2.75rem;
  }

  .dark {
    --background: 222 47% 6%;
    --foreground: 210 40% 98%;
    --card: 222 47% 9%;
    --card-foreground: 210 40% 98%;
    --popover: 222 47% 10%;
    --popover-foreground: 210 40% 98%;
    --primary: 142 76% 50%;
    --primary-foreground: 222 47% 6%;
    --secondary: 217 33% 14%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217 33% 14%;
    --muted-foreground: 215 20% 65%;
    --accent: 217 33% 16%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 63% 50%;
    --destructive-foreground: 210 40% 98%;
    --border: 217 33% 18%;
    --input: 217 33% 18%;
    --ring: 142 76% 50%;
    --surface-elevated: 222 47% 11%;
    --glow: 142 76% 50%;
    --nav-height: 2.75rem;
  }
}

html,
body,
#root {
  height: 100%;
  overflow: hidden;
}

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

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
    font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer utilities {
  .glass-panel {
    background-color: hsl(var(--card) / 0.8);
    border: 1px solid hsl(var(--border) / 0.6);
    @apply backdrop-blur-xl shadow-lg shadow-black/5 dark:shadow-black/20;
  }

  /* Native scroll inside panels (dropdowns, overflow fallbacks) */
  .panel-scroll {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.28) transparent;
  }

  .panel-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .panel-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 6px;
  }

  .panel-scroll::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / 0.22);
    border-radius: 9999px;
    border: 1px solid transparent;
    background-clip: padding-box;
  }

  .panel-scroll::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground) / 0.38);
  }

  .dropdown-panel {
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
  }

  .category-dropdown {
    background-color: hsl(var(--popover));
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.04),
      0 6px 16px -4px rgb(0 0 0 / 0.1);
  }

  .dark .category-dropdown {
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.2),
      0 8px 20px -4px rgb(0 0 0 / 0.35);
  }

  .category-select-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
  }

  .preview-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: hsl(var(--card) / 0.95);
    backdrop-filter: blur(8px);
  }

  @supports (backdrop-filter: blur(8px)) {
    .preview-header {
      background-color: hsl(var(--card) / 0.9);
    }
  }

  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(
      to right,
      hsl(var(--foreground)),
      hsl(var(--foreground) / 0.7)
    );
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

code,
pre,
kbd {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

html {
  scroll-behavior: smooth;
}

/* Global fallback — panels use ScrollArea or .panel-scroll */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

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

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

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

::selection {
  background: hsl(var(--primary) / 0.25);
}

:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.prose {
  @apply text-[15px] leading-[1.75] text-foreground max-w-none;
}

/* Compact markdown inside skill preview panel */
.prose-preview {
  @apply text-[13px] leading-[1.6] text-foreground/90 max-w-none;
}

.prose-preview > :first-child {
  @apply mt-0;
}

.prose-preview > :last-child {
  @apply mb-0;
}

.prose-preview h1 {
  @apply text-lg font-bold mb-3 mt-0 pb-2 border-b border-border scroll-mt-20;
}

.prose-preview h2 {
  @apply text-base font-semibold mb-2 mt-5 scroll-mt-20;
}

.prose-preview h3 {
  @apply text-sm font-semibold mb-1.5 mt-4 scroll-mt-20;
}

.prose-preview h4 {
  @apply text-sm font-medium mb-1 mt-3 scroll-mt-20;
}

.prose-preview p {
  @apply mb-2.5;
}

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

.prose-preview ul > li {
  @apply pl-5;
}

.prose-preview ul > li::before {
  @apply left-1 top-[0.6em] w-1 h-1;
}

.prose-preview ol {
  @apply pl-5;
}

.prose-preview li {
  @apply text-foreground/85;
}

.prose-preview code {
  @apply text-[0.8em] px-1 py-px;
}

.prose-preview pre {
  @apply my-3 rounded-lg;
}

.prose-preview pre code {
  @apply p-3 text-[12px];
}

.prose-preview blockquote {
  @apply my-3 py-2 px-3;
}

.prose-preview table {
  @apply my-3 text-[13px];
}

.prose-preview table th {
  @apply p-2 text-[10px];
}

.prose-preview table td {
  @apply p-2 text-[13px];
}

.prose-preview hr {
  @apply my-4;
}

.prose h1 {
  @apply text-2xl font-bold mb-6 pb-3 border-b border-border text-foreground scroll-mt-24;
}

.prose h2 {
  @apply text-xl font-semibold mb-4 mt-10 text-foreground scroll-mt-24;
}

.prose h3 {
  @apply text-lg font-semibold mb-3 mt-8 text-foreground scroll-mt-24;
}

.prose h4 {
  @apply text-base font-medium mb-2 mt-6 text-foreground scroll-mt-24;
}

.prose p {
  @apply mb-5 text-foreground/85;
}

.prose a {
  @apply text-primary font-medium no-underline hover:underline underline-offset-4 cursor-pointer;
}

.prose strong {
  @apply font-semibold text-foreground;
}

.prose ul {
  @apply my-4 space-y-2 list-none;
}

.prose ul > li {
  @apply relative pl-6;
}

.prose ul > li::before {
  content: "";
  @apply absolute left-1.5 top-[0.65em] w-1.5 h-1.5 rounded-full bg-primary;
}

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

.prose li {
  @apply text-foreground/85;
}

.prose code {
  @apply font-mono text-[0.85em] bg-muted px-1.5 py-0.5 rounded-md text-foreground border border-border/60;
}

.prose pre {
  @apply relative my-6 rounded-xl bg-[#0a0f1a] overflow-hidden border border-border/40;
}

.prose pre code {
  @apply block p-4 lg:p-5 bg-transparent border-0 text-[0.8125rem] leading-relaxed text-slate-200;
}

.prose blockquote {
  @apply my-6 pl-4 pr-4 py-3 border-l-[3px] border-primary bg-primary/5 rounded-r-lg;
}

.prose blockquote p {
  @apply text-muted-foreground mb-0 not-italic;
}

.prose table {
  @apply w-full my-6 text-sm border-collapse;
}

.prose table th {
  @apply font-semibold text-left p-3 bg-muted/50 border-b border-border text-xs uppercase tracking-wider text-muted-foreground;
}

.prose table td {
  @apply p-3 border-b border-border/40;
}

.prose table tr:last-child td {
  @apply border-b-0;
}

.prose hr {
  @apply my-10 border-border/50;
}

.prose .table-wrapper {
  @apply overflow-x-auto my-6 rounded-xl border border-border;
}

.code-block-wrapper .copy-button {
  @apply absolute top-3 right-3 opacity-0 transition-opacity duration-200 p-2 rounded-lg bg-white/10 hover:bg-white/20 text-white/70 hover:text-white cursor-pointer;
}

.code-block-wrapper:hover .copy-button {
  @apply opacity-100;
}

:not(pre) > code {
  @apply font-mono text-[0.85em] bg-muted px-1.5 py-0.5 rounded-md text-foreground border border-border/60;
}

.hljs {
  @apply bg-transparent;
}