/*
 * Complete companion stylesheet for `@timbal-ai/timbal-react`.
 *
 * Import this once from your app entry to get a fully working theme:
 *
 *   import "@timbal-ai/timbal-react/styles.css";
 *
 * The package's components are written exclusively against semantic Tailwind
 * tokens (bg-card, text-foreground, border-border, bg-elevated-from/to,
 * from-modal-from/to, shadow-card, …). Every token has a complete light + dark definition here
 * so a consumer's host CSS only needs:
 *
 *   @import "tailwindcss";
 *   @source "../node_modules/@timbal-ai/timbal-react/dist";
 *
 * Apps that want their own palette can override any --foo / --color-foo
 * variable from their own :root / .dark rules — these rules cascade
 * normally over the ones declared here.
 */

/* =============================================================== *
 * Base tokens — shadcn-style :root / .dark pairs                  *
 * =============================================================== */

:root {
  --radius: 0.75rem;

  /* Studio light — matches the Timbal Platform HeroUI light theme */
  --background: oklch(0.995 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(0.995 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(0.995 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.975 0.002 260);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.975 0.002 260);
  --muted-foreground: oklch(0.52 0.014 260);
  --accent: oklch(0.965 0.002 260);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.91 0.004 260);
  --input: oklch(0.91 0.004 260);
  --ring: oklch(0.55 0.014 260);

  /* Sidebar scope — used by StudioSidebar */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.955 0.004 260);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.91 0.004 260);
  --sidebar-ring: oklch(0.55 0.014 260);

  /* Timbal extension tokens — keep light + dark in sync below */

  /* Elevated surface gradient (cards, sidebar panel, secondary chrome).
     Opaque stops — keeps the signature vertical gradient with no alpha
     bleed-through, so whatever sits behind the surface never shows through. */
  --elevated-from: oklch(1 0 0);
  --elevated-to: oklch(0.985 0.002 260);

  /* Opaque modal/dialog gradient — same hue as elevated, no alpha bleed-through. */
  --modal-from: oklch(1 0 0);
  --modal-to: oklch(0.975 0.002 260);

  /* Soft playground gradient behind the message column. */
  --playground-from: oklch(0.91 0.004 260 / 0.6);
  --playground-via: oklch(0.965 0.002 260 / 0.3);
  --playground-to: var(--background);

  /* Composer shell — opaque card with stronger focus border. */
  --composer-bg: oklch(1 0 0);
  --composer-border: oklch(0.91 0.004 260);
  --composer-border-focus: oklch(0.62 0.005 260);

  /* User message bubble — neutral-200 on light, neutral-700 on dark. */
  --bubble-user: oklch(0.922 0 0);
  --bubble-user-foreground: oklch(0.145 0 0);

  /* Primary button gradient endpoints — inverts in dark mode. */
  --primary-fill-from: oklch(0.27 0 0);
  --primary-fill-to: oklch(0 0 0);
  --primary-fill-hover-from: oklch(0.32 0 0);
  --primary-fill-hover-to: oklch(0.17 0 0);
  --primary-fill-active-from: oklch(0 0 0);
  --primary-fill-active-to: oklch(0 0 0);

  /* Secondary button gradient endpoints. */
  --secondary-fill-hover-from: oklch(0.985 0.002 260 / 0.5);
  --secondary-fill-hover-to: oklch(0.965 0.002 260 / 0.65);
  --secondary-fill-active-from: oklch(0.965 0.002 260 / 0.7);
  --secondary-fill-active-to: oklch(0.91 0.004 260 / 0.65);

  /* Destructive button gradient endpoints. */
  --destructive-fill-hover-from: oklch(0.97 0.06 27 / 0.9);
  --destructive-fill-hover-to: oklch(0.93 0.09 27 / 0.7);
  --destructive-fill-active-from: oklch(0.93 0.09 27 / 0.9);
  --destructive-fill-active-to: oklch(0.86 0.13 27 / 0.65);

  /* Solid destructive button (primary-destructive) — filled red CTA. */
  --destructive-solid-from: oklch(0.62 0.23 27);
  --destructive-solid-to: oklch(0.555 0.245 27.325);
  --destructive-solid-hover-from: oklch(0.585 0.24 27);
  --destructive-solid-hover-to: oklch(0.52 0.25 27.325);
  --destructive-solid-active-from: oklch(0.535 0.25 27.325);
  --destructive-solid-active-to: oklch(0.49 0.25 27.325);

  /* Ghost button hover/active fills. */
  --ghost-fill-hover: oklch(0.965 0.002 260 / 0.7);
  --ghost-fill-active: oklch(0.91 0.004 260 / 0.7);

  /* Chart series palette — cohesive blue / indigo / cyan family.
     Override any of these in your host app's :root to rebrand every chart. */
  --chart-1: oklch(0.50 0.19 264);
  --chart-2: oklch(0.58 0.14 230);
  --chart-3: oklch(0.62 0.12 215);
  --chart-4: oklch(0.54 0.17 278);
  --chart-5: oklch(0.66 0.11 248);
  --chart-6: oklch(0.44 0.11 252);

  /* Code block surface (markdown). */
  --code-block-bg: oklch(0.98 0 0);
  --code-header-bg: oklch(0.965 0 0);

  /* Math (KaTeX) display surface. */
  --katex-bg: oklch(0.97 0 0 / 0.6);
  --katex-border: oklch(0.922 0 0);

  /* Markdown table zebra. */
  --md-table-zebra: oklch(0.97 0 0 / 0.4);

  /* Scrollbar thumb (light & dark share oklch base, only alpha changes). */
  --scrollbar-thumb: oklch(0.708 0 0 / 0.3);
  --scrollbar-thumb-hover: oklch(0.708 0 0 / 0.5);

  /* Card shadows. */
  --shadow-card-value: 0 1px 2px -0.5px rgba(0, 0, 0, 0.05);
  --shadow-card-elevated-value: 0 4px 24px rgba(0, 0, 0, 0.06);

  /* Studio layout (used by StudioSidebar / TimbalStudioShell). */
  --studio-topbar-gap: 0.5rem;
  --studio-topbar-height: 3rem;
  --studio-chrome-pill-height: 2.5rem;
  --studio-inset-top: calc(var(--studio-topbar-gap) + var(--studio-topbar-height));
  --studio-sidebar-gap: 0.75rem;
  --studio-sidebar-width: 14rem;
  --studio-sidebar-width-collapsed: 3.25rem;
  --studio-sidebar-content-gap: 0.5rem;
  --studio-inset-left: calc(
    var(--studio-sidebar-gap) + var(--studio-sidebar-width) +
      var(--studio-sidebar-content-gap)
  );
  --studio-inset-left-collapsed: calc(
    var(--studio-sidebar-gap) + var(--studio-sidebar-width-collapsed) +
      var(--studio-sidebar-content-gap)
  );

  /* Pill segmented control (WorkshopPillSegmentedTabs / Build–Manage). */
  --pill-segmented-track: var(--muted);
  --pill-segmented-track-border: transparent;
  --pill-segmented-track-shadow: none;
  --pill-segmented-indicator-from: oklch(1 0 0);
  --pill-segmented-indicator-to: oklch(0.985 0.002 260 / 0.7);
  --pill-segmented-indicator-border: oklch(0.9 0.004 260 / 0.8);
  --pill-segmented-indicator-shadow: 0 1px 2px -0.5px rgba(0, 0, 0, 0.05);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.19 0.005 260);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.19 0.005 260);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.22 0.005 260);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.22 0.005 260);
  --muted-foreground: oklch(0.72 0.01 260);
  --accent: oklch(0.25 0.008 260);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 0.10);
  --input: oklch(1 0 0 / 0.12);
  --ring: oklch(0.55 0.01 260);

  --sidebar: oklch(0.19 0.005 260);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.985 0 0);
  --sidebar-primary-foreground: oklch(0.205 0 0);
  --sidebar-accent: oklch(0.25 0.008 260);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 0.10);
  --sidebar-ring: oklch(0.55 0.01 260);

  /* Opaque equivalents of the translucent white wash — preserves the elevated
     gradient look while keeping the surface fully opaque (no bleed-through). */
  --elevated-from: oklch(0.205 0.004 260);
  --elevated-to: oklch(0.185 0.004 260);

  --modal-from: oklch(0.22 0.005 260);
  --modal-to: oklch(0.19 0.005 260);

  --pill-segmented-track: linear-gradient(
    to bottom,
    oklch(1 0 0 / 0.05),
    oklch(1 0 0 / 0.025)
  );
  --pill-segmented-track-border: oklch(1 0 0 / 0.08);
  --pill-segmented-track-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  --pill-segmented-indicator-from: oklch(1 0 0 / 0.05);
  --pill-segmented-indicator-to: oklch(1 0 0 / 0.025);
  --pill-segmented-indicator-border: oklch(1 0 0 / 0.08);
  --pill-segmented-indicator-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);

  --playground-from: oklch(0.27 0.005 285);
  --playground-via: oklch(0.19 0.005 260);
  --playground-to: oklch(0.13 0.005 285);

  --composer-bg: oklch(0.19 0.005 260);
  --composer-border: oklch(1 0 0 / 0.12);
  --composer-border-focus: oklch(1 0 0 / 0.22);

  --bubble-user: oklch(0.371 0 0);
  --bubble-user-foreground: oklch(0.985 0 0);

  /* Primary inverts on dark — light gradient on a dark background. */
  --primary-fill-from: oklch(1 0 0);
  --primary-fill-to: oklch(0.92 0 0);
  --primary-fill-hover-from: oklch(1 0 0);
  --primary-fill-hover-to: oklch(0.97 0 0);
  --primary-fill-active-from: oklch(0.92 0 0);
  --primary-fill-active-to: oklch(0.78 0 0);

  --secondary-fill-hover-from: oklch(1 0 0 / 0.07);
  --secondary-fill-hover-to: oklch(1 0 0 / 0.045);
  --secondary-fill-active-from: oklch(1 0 0 / 0.10);
  --secondary-fill-active-to: oklch(1 0 0 / 0.07);

  --destructive-fill-hover-from: oklch(0.6 0.2 27 / 0.12);
  --destructive-fill-hover-to: oklch(0.6 0.2 27 / 0.08);
  --destructive-fill-active-from: oklch(0.6 0.2 27 / 0.20);
  --destructive-fill-active-to: oklch(0.6 0.2 27 / 0.12);

  /* Solid destructive button (primary-destructive) — vivid red on dark. */
  --destructive-solid-from: oklch(0.66 0.205 25);
  --destructive-solid-to: oklch(0.6 0.205 25);
  --destructive-solid-hover-from: oklch(0.7 0.205 25);
  --destructive-solid-hover-to: oklch(0.64 0.205 25);
  --destructive-solid-active-from: oklch(0.58 0.205 25);
  --destructive-solid-active-to: oklch(0.52 0.205 25);

  --ghost-fill-hover: oklch(1 0 0 / 0.10);
  --ghost-fill-active: oklch(1 0 0 / 0.15);

  /* Chart series palette (dark) — brighter blues for contrast on dark surfaces. */
  --chart-1: oklch(0.68 0.17 264);
  --chart-2: oklch(0.72 0.13 230);
  --chart-3: oklch(0.76 0.11 215);
  --chart-4: oklch(0.70 0.15 278);
  --chart-5: oklch(0.78 0.10 248);
  --chart-6: oklch(0.62 0.10 252);

  --code-block-bg: oklch(0.19 0 0);
  --code-header-bg: oklch(0.22 0 0 / 0.8);

  --katex-bg: oklch(0.2 0 0 / 0.5);
  --katex-border: oklch(1 0 0 / 0.08);

  --md-table-zebra: oklch(0.2 0 0 / 0.3);

  --scrollbar-thumb: oklch(0.708 0 0 / 0.4);
  --scrollbar-thumb-hover: oklch(0.708 0 0 / 0.6);

  --shadow-card-value: 0 1px 3px rgba(0, 0, 0, 0.22);
  --shadow-card-elevated-value: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* =============================================================== *
 * Tailwind v4 @theme inline — re-aliases the base tokens above so *
 * `bg-background`, `text-foreground`, `border-border`, etc. all   *
 * resolve via var() and flip with .dark.                          *
 * =============================================================== */

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Timbal extensions — exposed as colour tokens so they work with
     bg-*, border-*, text-*, from-*, via-*, to-* utilities alike. */
  --color-elevated-from: var(--elevated-from);
  --color-elevated-to: var(--elevated-to);
  --color-modal-from: var(--modal-from);
  --color-modal-to: var(--modal-to);
  --color-playground-from: var(--playground-from);
  --color-playground-via: var(--playground-via);
  --color-playground-to: var(--playground-to);
  --color-composer-bg: var(--composer-bg);
  --color-composer-border: var(--composer-border);
  --color-composer-border-focus: var(--composer-border-focus);
  --color-bubble-user: var(--bubble-user);
  --color-bubble-user-foreground: var(--bubble-user-foreground);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-6: var(--chart-6);

  --color-primary-fill-from: var(--primary-fill-from);
  --color-primary-fill-to: var(--primary-fill-to);
  --color-primary-fill-hover-from: var(--primary-fill-hover-from);
  --color-primary-fill-hover-to: var(--primary-fill-hover-to);
  --color-primary-fill-active-from: var(--primary-fill-active-from);
  --color-primary-fill-active-to: var(--primary-fill-active-to);

  --color-secondary-fill-hover-from: var(--secondary-fill-hover-from);
  --color-secondary-fill-hover-to: var(--secondary-fill-hover-to);
  --color-secondary-fill-active-from: var(--secondary-fill-active-from);
  --color-secondary-fill-active-to: var(--secondary-fill-active-to);

  --color-destructive-fill-hover-from: var(--destructive-fill-hover-from);
  --color-destructive-fill-hover-to: var(--destructive-fill-hover-to);
  --color-destructive-fill-active-from: var(--destructive-fill-active-from);
  --color-destructive-fill-active-to: var(--destructive-fill-active-to);

  --color-destructive-solid-from: var(--destructive-solid-from);
  --color-destructive-solid-to: var(--destructive-solid-to);
  --color-destructive-solid-hover-from: var(--destructive-solid-hover-from);
  --color-destructive-solid-hover-to: var(--destructive-solid-hover-to);
  --color-destructive-solid-active-from: var(--destructive-solid-active-from);
  --color-destructive-solid-active-to: var(--destructive-solid-active-to);

  --color-ghost-fill-hover: var(--ghost-fill-hover);
  --color-ghost-fill-active: var(--ghost-fill-active);

  --color-code-block-bg: var(--code-block-bg);
  --color-code-header-bg: var(--code-header-bg);

  --shadow-card: var(--shadow-card-value);
  --shadow-card-elevated: var(--shadow-card-elevated-value);
}

/* Allow the `dark` Tailwind variant to be triggered by an ancestor `.dark`
   class. Apps using next-themes / a manual toggle just add/remove `.dark`
   from `<html>` and every utility flips together with the base tokens. */
@custom-variant dark (&:is(.dark *));

/* =============================================================== *
 * Motion engine — enter/exit, fade, zoom, slide, accordion        *
 * --------------------------------------------------------------- *
 * Every overlay in the package (Dialog, Sheet, DropdownMenu,      *
 * Popover, Select, Tooltip, Toast, NavigationMenu) is authored    *
 * against these `animate-in` / `animate-out` + modifier classes.  *
 * They are inlined here so the shipped stylesheet animates with    *
 * zero extra dependencies and zero consumer config. Duration flows *
 * from any `duration-*` utility on the element (var --tw-duration).*
 * =============================================================== */

@keyframes tw-enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(
        var(--tw-enter-translate-x, 0),
        var(--tw-enter-translate-y, 0),
        0
      )
      scale3d(
        var(--tw-enter-scale, 1),
        var(--tw-enter-scale, 1),
        var(--tw-enter-scale, 1)
      )
      rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes tw-exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(
        var(--tw-exit-translate-x, 0),
        var(--tw-exit-translate-y, 0),
        0
      )
      scale3d(
        var(--tw-exit-scale, 1),
        var(--tw-exit-scale, 1),
        var(--tw-exit-scale, 1)
      )
      rotate(var(--tw-exit-rotate, 0));
  }
}

@utility animate-in {
  animation: tw-enter var(--tw-duration, 150ms) ease-out;
}
@utility animate-out {
  animation: tw-exit var(--tw-duration, 150ms) ease-in;
}

/* Fade modifiers (number = target opacity ÷ 100). */
@utility fade-in {
  --tw-enter-opacity: 0;
}
@utility fade-in-0 {
  --tw-enter-opacity: 0;
}
@utility fade-out {
  --tw-exit-opacity: 0;
}
@utility fade-out-0 {
  --tw-exit-opacity: 0;
}
@utility fade-out-80 {
  --tw-exit-opacity: 0.8;
}

/* Zoom modifiers (number = scale × 100). */
@utility zoom-in-95 {
  --tw-enter-scale: 0.95;
}
@utility zoom-out-95 {
  --tw-exit-scale: 0.95;
}

/* Slide-in (starting offset). Unitless + `-full` = 100%; `-2` = 0.5rem; `-52` = 13rem. */
@utility slide-in-from-top {
  --tw-enter-translate-y: -100%;
}
@utility slide-in-from-top-full {
  --tw-enter-translate-y: -100%;
}
@utility slide-in-from-bottom {
  --tw-enter-translate-y: 100%;
}
@utility slide-in-from-bottom-full {
  --tw-enter-translate-y: 100%;
}
@utility slide-in-from-left {
  --tw-enter-translate-x: -100%;
}
@utility slide-in-from-right {
  --tw-enter-translate-x: 100%;
}
@utility slide-in-from-top-2 {
  --tw-enter-translate-y: -0.5rem;
}
@utility slide-in-from-bottom-2 {
  --tw-enter-translate-y: 0.5rem;
}
@utility slide-in-from-left-2 {
  --tw-enter-translate-x: -0.5rem;
}
@utility slide-in-from-right-2 {
  --tw-enter-translate-x: 0.5rem;
}
@utility slide-in-from-bottom-1 {
  --tw-enter-translate-y: 0.25rem;
}
@utility slide-in-from-left-52 {
  --tw-enter-translate-x: -13rem;
}
@utility slide-in-from-right-52 {
  --tw-enter-translate-x: 13rem;
}

/* Slide-out (ending offset). */
@utility slide-out-to-top {
  --tw-exit-translate-y: -100%;
}
@utility slide-out-to-bottom {
  --tw-exit-translate-y: 100%;
}
@utility slide-out-to-left {
  --tw-exit-translate-x: -100%;
}
@utility slide-out-to-right {
  --tw-exit-translate-x: 100%;
}
@utility slide-out-to-right-full {
  --tw-exit-translate-x: 100%;
}
@utility slide-out-to-left-52 {
  --tw-exit-translate-x: -13rem;
}
@utility slide-out-to-right-52 {
  --tw-exit-translate-x: 13rem;
}

/* Disclosure height transitions — read Radix's measured content height. */
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
@keyframes collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}
@keyframes collapsible-up {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}
@keyframes caret-blink {
  0%,
  70%,
  100% {
    opacity: 1;
  }
  20%,
  50% {
    opacity: 0;
  }
}

@theme {
  --animate-accordion-down: accordion-down 200ms ease-out;
  --animate-accordion-up: accordion-up 200ms ease-out;
  --animate-collapsible-down: collapsible-down 200ms ease-out;
  --animate-collapsible-up: collapsible-up 200ms ease-out;
  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
}

/** Pill segmented track — supports solid or gradient via `--pill-segmented-track`. */
@utility bg-pill-segmented-track {
  background: var(--pill-segmented-track);
}

@utility shadow-skeuomorphic-solid {
  box-shadow: 
    0px 1px 2px 0px rgba(16, 24, 40, 0.1),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.35) !important;
}

@utility shadow-skeuomorphic-bordered {
  box-shadow: 
    0px 1px 2px 0px rgba(16, 24, 40, 0.05),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4) !important;
}

/* =============================================================== *
 * Polish — markdown, shiki, katex, scrollbars                     *
 * =============================================================== */

/* ── Markdown inline code ── */
.dark code:not(pre code) {
  background-color: oklch(0.269 0 0 / 0.8);
}

/* ── Shiki dual-theme support ── */
.shiki-wrapper pre {
  background: var(--shiki-light-bg, var(--code-block-bg)) !important;
}
.shiki-wrapper code,
.shiki-wrapper code span {
  color: var(--shiki-light, inherit);
}
.dark .shiki-wrapper pre {
  background: var(--shiki-dark-bg, var(--code-block-bg)) !important;
}
.dark .shiki-wrapper code,
.dark .shiki-wrapper code span {
  color: var(--shiki-dark, inherit);
}

/* Code-block line numbers */
.shiki-wrapper code {
  counter-reset: line;
}
.shiki-wrapper code > .line::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 1.5rem;
  margin-right: 1rem;
  text-align: right;
  color: oklch(0.556 0 0 / 0.3);
  font-size: 0.7em;
  user-select: none;
}
.dark .shiki-wrapper code > .line::before {
  color: oklch(0.556 0 0 / 0.25);
}

/* ── KaTeX math rendering ── */
.katex-display {
  margin: 1.25rem 0 !important;
  padding: 1rem 1.25rem;
  background: var(--katex-bg);
  border: 1px solid var(--katex-border);
  border-radius: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
}
.katex-display > .katex {
  text-align: center;
}
.katex {
  font-size: 1.05em !important;
}
.katex-display .katex {
  font-size: 1.15em !important;
}
.katex:not(.katex-display .katex) {
  padding: 0 0.15em;
}

/* ── Markdown table zebra striping ── */
.aui-md-table tbody tr:nth-child(even) {
  background: var(--md-table-zebra);
}

/* ── Code header polish ── */
.aui-code-header {
  backdrop-filter: blur(8px);
}

/* ── Smooth link transitions ── */
.aui-md-a {
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

/* Blockquote glass styling + morph-in animation are component-owned
   (see `GlassBlockquote` in `chat/markdown-text.tsx`). */

/* ── GFM task list checkboxes ── */
.aui-md-li input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid oklch(0.556 0 0 / 0.4);
  border-radius: 4px;
  margin-right: 0.4em;
  vertical-align: middle;
  position: relative;
  top: -1px;
  cursor: default;
  transition: all 0.15s ease;
}
.aui-md-li input[type="checkbox"]:checked {
  background: oklch(0.488 0.243 264.376);
  border-color: oklch(0.488 0.243 264.376);
}
.aui-md-li input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 3px;
  height: 6px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ── Custom scrollbars ── */
.aui-thread-root,
.aui-thread-root * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.aui-thread-root *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.aui-thread-root *::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.aui-thread-root *::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: all 0.2s ease;
}

.aui-thread-root *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
}

/* =============================================================== *
 * App kit — layout shells use .aui-app-* class hooks in components *
 * =============================================================== */

/* =============================================================== *
 * Component fixes — baked in so consumers don't need overrides    *
 * =============================================================== */

/* Sticky footer stacks above scrolling messages. Its band matches the
   surface the chat sits on: white/card by default (chat embedded in app
   pages), overridden to --background by the studio shells whose playground
   gradient bottoms out there. */
.aui-thread-viewport-footer {
  isolation: isolate;
  z-index: 10;
  background-color: var(--thread-canvas, var(--card));
}

.aui-thread-root[data-thread-variant="panel"] .aui-thread-viewport-footer {
  background-color: var(--card);
}

/* Clip inner textarea/toolbar fills to the rounded shell (also in Tailwind class). */
.aui-composer-shell {
  border-radius: var(--radius-2xl, 1rem);
  overflow: hidden;
}

/* Scrolled assistant action bars must not show through the composer shell. */
.aui-composer-shell,
.aui-composer-input,
.aui-composer-action-wrapper {
  background-color: var(--composer-bg);
}

/* Custom checkbox pop animation */
@keyframes checkbox-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  75% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@utility animate-checkbox-pop {
  animation: checkbox-pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}