@import url("non.geist");
@import url("non.geist/mono");

@import "react-grid-layout/css/styles.css" layer(base);
@import "react-resizable/css/styles.css" layer(base);

@import "tailwindcss";
@import "tw-animate-css";
@import "tailwind-scrollbar-hide/v4";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "tailwind-scrollbar";

/* Streamdown ships prebuilt Tailwind classes - scan it for used utilities */
@source "../node_modules/streamdown/dist";

/* Raw palettes and static tokens - theme-independent, never override per theme */
@theme {
  --font-sans: "Geist Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono Variable", monaco, Consolas, "Lucida Console", monospace;

  --text-xxs: 0.65rem;
  --text-xxs--line-height: 0.75rem;
  --text-xxs--letter-spacing: -0.01em;
  --text-xxs--font-weight: 500;
  --text-2sm: 0.8125rem;
  --text-2sm--line-height: 0.875rem;
  --text-2sm--letter-spacing: -0.01em;
  --text-2sm--font-weight: 500;

  --color-charcoal-100: #e8e9ec;
  --color-charcoal-200: #d7d9dd;
  --color-charcoal-300: #b5b8c0;
  --color-charcoal-400: #878c99;
  --color-charcoal-500: #5f6570;
  --color-charcoal-550: #4d525b;
  --color-charcoal-600: #3b3e45;
  --color-charcoal-650: #2c3034;
  --color-charcoal-700: #272a2e;
  --color-charcoal-750: #212327;
  --color-charcoal-775: #1c1e21;
  --color-charcoal-800: #1a1b1f;
  --color-charcoal-850: #15171a;
  --color-charcoal-900: #121317;
  --color-charcoal-950: #0d0e12;
  --color-charcoal-1000: #0b0c0f;

  --color-apple-100: #e4ffc9;
  --color-apple-200: #cfffa0;
  --color-apple-300: #bfff81;
  --color-apple-400: #afff62;
  --color-apple-500: #a8ff53;
  --color-apple-600: #82d134;
  --color-apple-700: #6fb12f;
  --color-apple-750: #5e932a;
  --color-apple-800: #45711a;
  --color-apple-850: #2e4e10;
  --color-apple-900: #20370a;
  --color-apple-950: #152506;

  --color-mint-50: #f0fdf4;
  --color-mint-100: #ddfbe6;
  --color-mint-200: #bdf5d0;
  --color-mint-300: #87eba9;
  --color-mint-400: #4fd97e;
  --color-mint-500: #28bf5c;
  --color-mint-600: #1b9e48;
  --color-mint-700: #197c3c;
  --color-mint-800: #196233;
  --color-mint-900: #16512c;
  --color-mint-950: #062d15;

  --color-sun-50: #fdfee8;
  --color-sun-100: #fdffc2;
  --color-sun-200: #ffff89;
  --color-sun-300: #fff852;
  --color-sun-400: #fdea12;
  --color-sun-500: #eccf06;
  --color-sun-600: #cca302;
  --color-sun-700: #a37505;
  --color-sun-800: #865b0d;
  --color-sun-900: #724b11;
  --color-sun-950: #432705;

  --color-lavender-50: #f4f2ff;
  --color-lavender-100: #eae8ff;
  --color-lavender-200: #d7d4ff;
  --color-lavender-300: #bab2ff;
  --color-lavender-400: #826dff;
  --color-lavender-500: #7655fd;
  --color-lavender-600: #6532f5;
  --color-lavender-700: #5620e1;
  --color-lavender-800: #481abd;
  --color-lavender-900: #3d189a;
  --color-lavender-950: #230c69;

  --text-shadow-custom: 1px 1px 1px rgba(0, 0, 0, 0.5);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-tile-scroll: tile-move 0.5s infinite linear;
  --animate-tile-scroll-offset: tile-move-offset 0.5s infinite linear;

  @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 tile-move {
    0% {
      background-position: 0px;
    }
    100% {
      background-position: 8px;
    }
  }
  @keyframes tile-move-offset {
    0% {
      background-position: -1px;
    }
    100% {
      background-position: 7px;
    }
  }
}

/*
  Semantic tokens - the themable layer. Utilities compile to var(--color-*),
  so a theme overrides these vars in a scoped selector, e.g.
  [data-theme="light"] { --color-text-bright: #1a1b1f; }
  Defaults below are the original dark theme.
*/
@theme {
  /* Text colors */
  --color-primary: var(--color-apple-500);
  --color-secondary: var(--color-charcoal-650);
  --color-tertiary: var(--color-charcoal-700);
  --color-text-link: var(--color-lavender-400);
  --color-text-faint: var(--color-charcoal-500);
  --color-text-dimmed: var(--color-charcoal-400);
  --color-text-bright: var(--color-charcoal-200);

  /* Surfaces, from deepest to most raised */
  --color-background-deep: var(--color-charcoal-900);
  --color-background-dimmed: var(--color-charcoal-850);
  --color-background-bright: var(--color-charcoal-800);
  --color-background-hover: var(--color-charcoal-750);
  --color-background-raised: var(--color-charcoal-700);
  --color-surface-control: var(--color-charcoal-600);
  --color-surface-control-hover: var(--color-charcoal-550);
  --color-surface-control-active: var(--color-charcoal-500);

  /* Borders, from subtlest to most visible */
  --color-grid-dimmed: var(--color-charcoal-750);
  --color-grid-bright: var(--color-charcoal-700);
  --color-border-bright: var(--color-charcoal-600);
  --color-border-brighter: var(--color-charcoal-550);
  --color-border-brightest: var(--color-charcoal-500);
  --color-success: var(--color-mint-500);
  --color-pending: var(--color-blue-500);
  --color-warning: var(--color-amber-500);
  --color-error: var(--color-rose-600);

  /* Environment colors */
  --color-dev: var(--color-pink-500);
  --color-staging: var(--color-orange-400);
  --color-prod: var(--color-mint-500);
  --color-preview: var(--color-yellow-400);

  /* Icon colors */
  --color-tasks: var(--color-blue-500);
  --color-runs: var(--color-indigo-500);
  --color-batches: var(--color-pink-500);
  --color-schedules: var(--color-yellow-500);
  --color-queues: var(--color-purple-500);
  --color-query: var(--color-blue-500);
  --color-metrics: var(--color-green-500);
  --color-customDashboards: var(--color-charcoal-400);
  --color-deployments: var(--color-blue-500);
  --color-concurrency: var(--color-amber-500);
  --color-limits: var(--color-purple-500);
  --color-regions: var(--color-green-500);
  --color-logs: var(--color-pink-500);
  --color-tests: var(--color-pink-500);
  --color-apiKeys: var(--color-amber-500);
  --color-environmentVariables: var(--color-pink-500);
  --color-alerts: var(--color-red-500);
  --color-projectSettings: var(--color-blue-500);
  --color-orgSettings: var(--color-blue-500);
  --color-docs: var(--color-blue-500);
  --color-bulkActions: var(--color-emerald-500);
  --color-aiPrompts: var(--color-blue-500);
  --color-aiMetrics: var(--color-green-500);
  --color-errors: var(--color-amber-500);
  --color-agents: var(--color-purple-500);
  --color-sessions: var(--color-pink-500);
  --color-playgrounds: var(--color-fuchsia-500);
  --color-models: var(--color-violet-500);
  --color-previewBranches: var(--color-yellow-500);
}

/* Callout variant accents (see components/primitives/Callout.tsx) */
@theme {
  --color-callout-warning-text: var(--color-yellow-200);
  --color-callout-error-text: var(--color-rose-200);
  --color-callout-success-text: var(--color-green-200);
  --color-callout-docs: var(--color-blue-400);
  --color-callout-docs-text: var(--color-blue-200);
  --color-callout-pending: var(--color-blue-400);
  --color-callout-pending-bg: var(--color-blue-800);
  --color-callout-pending-text: var(--color-blue-300);
  --color-callout-pricing: var(--color-indigo-400);
  --color-callout-pricing-bg: var(--color-indigo-800);
  --color-callout-pricing-text: var(--color-indigo-300);
}

/*
  Code syntax palette - the trigger-dark highlight theme, shared by the shiki
  theme (streamdown) and the prism theme (CodeBlock). Consumed from JS via
  var(), so declared static to always be emitted.
*/
@theme static {
  --color-code-background: #212327;
  --color-code-foreground: #878c99;
  --color-code-line-number: #484c54;
  --color-code-plain: #d4d4d4;
  --color-code-muted: #5f6570;
  --color-code-comment: #6f736d;
  --color-code-keyword: #e888f8;
  --color-code-storage: #8271ed;
  --color-code-type: #f770c6;
  --color-code-function: #d9f07c;
  --color-code-variable: #cccbff;
  --color-code-constant: #9c9af2;
  --color-code-language: #9b99ff;
  --color-code-object-key: #8b89ff;
  --color-code-string: #afec73;
  --color-code-template-punctuation: #7a78ea;
  --color-code-number: #b5cea8;
  --color-code-builtin: #e5c07b;
  --color-code-attribute: #c39eff;
  --color-code-escape: #d7ba7d;
  --color-code-regexp: #d16969;
  --color-code-regexp-constant: #646695;
  --color-code-invalid: #f44747;
  --color-code-deleted: #f85149;
  --color-code-jsx-text: #d7d9dd;
}

/*
  CodeMirror editor palette (see components/code/codeMirrorTheme.ts).
  Consumed from JS via var(), so declared static to always be emitted.
*/
@theme static {
  --color-editor-background: var(--color-background-deep);
  --color-editor-foreground: #abb2bf;
  --color-editor-keyword: #c678dd;
  --color-editor-name: #9b99ff;
  --color-editor-function: #61afef;
  --color-editor-constant: #d19a66;
  --color-editor-type: #e5c07b;
  --color-editor-operator: #56b6c2;
  --color-editor-comment: #7d8799;
  --color-editor-heading: #e06c75;
  --color-editor-string: #afec73;
  --color-editor-invalid: #ffffff;
  --color-editor-panel-background: #21252b;
  --color-editor-highlight-background: rgba(71, 85, 105, 0.2);
  --color-editor-tooltip-background: #353a42;
  --color-editor-selection: rgb(71 85 105);
  --color-editor-cursor: #528bff;
  --color-editor-search-match: #72a1ff59;
  --color-editor-search-match-outline: #457dff;
  --color-editor-search-match-selected: #6199ff2f;
  --color-editor-selection-match: #aafe661a;
  --color-editor-matching-bracket: rgba(18, 19, 23, 0.9);
  --color-editor-matching-bracket-outline: rgba(81, 90, 107, 0.5);
  --color-editor-fold-placeholder: #dddddd;
  --color-editor-scrollbar-track-active: #131b2b;
  --color-editor-scrollbar-thumb: #293649;
  --color-editor-scrollbar-thumb-active: #3c4b62;
}

/*
  Run-status chart colors. In-between shades are intentional - statuses within
  a family (blues, roses, charcoals) are evenly spaced so chart series stay
  distinguishable. Referenced from JS via var(--color-run-*), so declared
  static to always be emitted.
*/
@theme static {
  --color-run-pending: var(--color-charcoal-500);
  --color-run-delayed: #6b7580;
  --color-run-pending-version: var(--color-warning);
  --color-run-waiting-for-deploy: #d97706;
  --color-run-executing: var(--color-pending);
  --color-run-retrying-after-failure: #2f6fec;
  --color-run-dequeued: #4d8ef5;
  --color-run-waiting-to-resume: #555d67;
  --color-run-paused: #fbbf24;
  --color-run-canceled: #78828c;
  --color-run-expired: #848d96;
  --color-run-interrupted: #d52c4d;
  --color-run-completed-successfully: var(--color-success);
  --color-run-completed-with-errors: #de405c;
  --color-run-system-failure: #e7536c;
  --color-run-crashed: #cc193d;
  --color-run-timed-out: #f0667b;
}

/*
  shadcn/ui tokens used by streamdown's internals. Inline so the vars resolve
  where the utility is used - .streamdown-container redefines them locally.
*/
@theme inline {
  --color-background: var(--background, #121317);
  --color-foreground: var(--foreground, #d7d9dd);
  --color-muted: var(--muted, #1c1e21);
  --color-muted-foreground: var(--muted-foreground, #878c99);
  --color-border: var(--border, #2c3034);
  --color-sidebar: var(--sidebar, #15171a);
  --color-primary-foreground: var(--primary-foreground, #121317);
}

@custom-variant lg-height (@media (max-height: 750px));
@custom-variant md-height (@media (max-height: 600px));

/* dark: follows the app theme (data-theme on <html>), not the OS preference */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

@utility focus-custom {
  &:focus-visible {
    outline: 1px solid var(--color-text-link);
    outline-offset: 0px;
    border-radius: 3px;
  }
}

@utility scrollbar-gutter-stable {
  scrollbar-gutter: stable;
}

/* Shared stop list for the animated glow utilities below. The gradient itself
   is assembled per-element so the animated --gradient-angle resolves there. */
:root {
  --glow-gradient-stops: rgb(99 102 241), rgb(245 158 11), rgb(236 72 153), rgb(245 158 11),
    rgb(99 102 241);
}

@utility animated-gradient-glow {
  position: relative;
  overflow: visible;

  &::before {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
    background: conic-gradient(from var(--gradient-angle), var(--glow-gradient-stops));
    border-radius: inherit;
    animation: gradient-rotation 3s linear infinite;
    pointer-events: none;
    filter: blur(0.5rem);
    opacity: 0.1;
  }
}

@utility animated-gradient-glow-small {
  position: relative;
  overflow: visible;

  &::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: conic-gradient(from var(--gradient-angle), var(--glow-gradient-stops));
    border-radius: inherit;
    animation: gradient-rotation 3s linear infinite;
    pointer-events: none;
    filter: blur(0.2rem);
    opacity: 0.3;
  }
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes gradient-rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}

@layer base {
  /* v4 defaults border color to currentcolor - keep the app-wide default from v3 */
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-grid-bright);
  }

  body {
    @apply bg-background-dimmed text-text-dimmed;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Text selection styles */
  ::selection {
    @apply bg-text-bright/30 text-text-bright;
  }
  /* Kept separate from ::selection on purpose: grouping them makes older
     Firefox drop the whole rule. */
  /* stylelint-disable-next-line selector-no-vendor-prefix */
  ::-moz-selection {
    @apply bg-text-bright/30 text-text-bright;
  }

  /* Native form controls, scrollbars etc. follow the app theme */
  :root {
    color-scheme: dark;
  }
  [data-theme="light"] {
    color-scheme: light;
  }

  /* shadcn charts: https://ui.shadcn.com/docs/components/chart#add-a-grid */
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  [data-theme="dark"] {
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }

  /* Override react-grid-layout placeholder color (default is red) */
  .react-grid-item.react-grid-placeholder {
    background: rgb(99 102 241) !important; /* indigo-500 */
    border-radius: 0.375rem !important; /* rounded-md */
  }

  /* Sidebar reorder grid: subtle placeholder */
  .sidebar-reorder-grid .react-grid-item.react-grid-placeholder {
    background: var(--color-background-raised) !important;
    border-radius: 0.25rem;
    opacity: 1 !important;
  }

  /* Sidebar reorder grid: only animate transform (vertical position), not width/height */
  .sidebar-reorder-grid .react-grid-item {
    transition: transform 200ms ease !important;
  }

  /* Override resize handle icon to white */
  .react-resizable-handle {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiNmZmZmZmYiLz48L2c+PC9zdmc+') !important;
  }
  .react-resizable-handle::after {
    border-bottom-color: rgba(255, 255, 255, 0.4) !important;
    border-right-color: rgba(255, 255, 255, 0.4) !important;
    border-top-color: rgba(255, 255, 255, 0.4) !important;
    border-left-color: rgba(255, 255, 255, 0.4) !important;
  }
}

@layer components {
  @supports (-webkit-hyphens: none) {
    .safari-only {
      @apply border-b border-grid-dimmed;
    }
  }
}

/* Streamdown markdown styling */
.streamdown-container {
  /* Streamdown uses shadcn/ui CSS variables - derive them from our semantic
     tokens so they follow the theme. They map Tailwind utility classes like
     bg-background, bg-primary, etc. that streamdown uses internally for its
     link safety modal, code blocks, and other interactive elements. */
  --background: var(--color-background-deep);
  --foreground: var(--color-text-bright);
  --muted: var(--color-charcoal-775);
  --muted-foreground: var(--color-text-dimmed);
  --border: var(--color-border-bright);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-background-deep);
  --sidebar: var(--color-background-dimmed);

  /* Code block styling */
  & [data-code-block-container] {
    @apply rounded-sm my-2 border-charcoal-700;
  }
  & [data-code-block] {
    border-top: none;
  }

  & p {
    @apply my-1;
  }
  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    @apply font-semibold text-text-bright mt-2 mb-1;
  }
  & h1 {
    @apply text-base;
  }
  & h2 {
    @apply text-sm;
  }
  & h3,
  & h4,
  & h5,
  & h6 {
    @apply text-xs;
  }
  & ul,
  & ol {
    @apply ml-4 my-1;
  }
  & ul {
    @apply list-disc;
  }
  & ol {
    @apply list-decimal;
  }
  & li {
    @apply my-0.5;
  }
  /* Inline code (not in pre blocks) */
  & code:not(pre code) {
    @apply bg-charcoal-700 px-1 py-0.5 rounded-sm text-text-bright font-mono;
  }
  & blockquote {
    @apply border-l-2 border-charcoal-600 pl-3 my-2 italic;
  }
  & a {
    @apply text-text-link hover:underline;
  }
  & strong {
    @apply font-semibold text-text-bright;
  }
  & em {
    @apply italic;
  }
  & hr {
    @apply my-2 border-charcoal-600;
  }
  & table {
    @apply w-full my-2 border-collapse;
  }
  & th,
  & td {
    @apply border border-charcoal-600 px-2 py-1 text-left;
  }
  & th {
    @apply bg-charcoal-700 font-semibold;
  }

  & [data-code-block-header] {
    @apply bg-charcoal-800 text-text-dimmed border-b border-charcoal-700;
  }
  /* Override the bg-muted/40 class to let inline styles work */
  & [data-code-block] pre {
    background-color: inherit !important;
    @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600;
  }
  & [data-code-block] pre code {
    @apply bg-transparent;
  }
  & [data-code-block] .line {
    @apply leading-relaxed;
  }
}