/* @ai-matrx/agents/catalog — REQUIRED stylesheet. Import once at your app root:

     import "@ai-matrx/agents/catalog/styles.css";

   WHAT LIVES HERE (C26): every rule the picker's components REQUIRE that a
   host's Tailwind build cannot be trusted to generate, plus the DEFAULT VALUES
   of this package's own semantic tokens. Color enters ONLY through tokens —
   nothing below hardcodes a brand color in a component rule.

   🚨 THE GENERATION HAZARD (typescript-package-standard, 2026-09-08). A package
   never invents a Tailwind class name and expects the consumer to generate it:
   the consumer's Tailwind only emits what its own `@source` scan sees. The
   picker used three classes matrx-frontend happened to define in its own
   globals (`scrollbar-none`) or get from a plugin (`animate-in fade-in-0`,
   `animate-spin`), so those ship HERE as package-owned rules with package-owned
   names — `matrx-agent-scrollbar-none`, `matrx-agent-fade-in`,
   `matrx-agent-spin`.

   The picker's LAYOUT still uses ordinary Tailwind utilities, exactly as the
   originals did, so a consuming app must register this package's build with
   its Tailwind source scan (the same line every @ai-matrx package needs):

     @import "tailwindcss";
     @source "../node_modules/@ai-matrx/agents/dist";

   🚨 THE PREFLIGHT RULE: rules that must beat Tailwind's preflight reset
   (margin/padding/border/box-sizing) ship UNLAYERED. Everything here is
   unlayered on purpose — these are structural contracts, not utilities a host
   should have to out-specify. */

/* ── Default token VALUES (host-overridable; C26) ─────────────────────────
   Declared on :root so a host's own unlayered token block wins simply by
   being declared later, exactly as it does for @ai-matrx/design-system. */
:root {
  /* The favorite star. Amber by default because that is the color the
     picker shipped with; a host re-brands it by redefining this one value. */
  --matrx-agent-favorite: #f59e0b;
  /* The drift banner (design D3). Warning surface + text + border. */
  --matrx-agent-drift-bg: #fef3c7;
  --matrx-agent-drift-fg: #92400e;
  --matrx-agent-drift-border: #fcd34d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --matrx-agent-favorite: #fbbf24;
    --matrx-agent-drift-bg: #451a03;
    --matrx-agent-drift-fg: #fcd34d;
    --matrx-agent-drift-border: #78350f;
  }
}

:root[data-theme="dark"] {
  --matrx-agent-favorite: #fbbf24;
  --matrx-agent-drift-bg: #451a03;
  --matrx-agent-drift-fg: #fcd34d;
  --matrx-agent-drift-border: #78350f;
}

/* ── Structural rules ─────────────────────────────────────────────────── */

/* The favorite star, on. `currentColor` drives both stroke and the filled
   path, so ONE token colors the whole glyph. */
.matrx-agent-star-on {
  color: var(--matrx-agent-favorite);
}

/* The tab strip and filter bar scroll horizontally without a visible bar. */
.matrx-agent-scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.matrx-agent-scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* The hover-preview panel's entrance. Deliberately slow (500ms) — the panel
   appears beside the cursor and a fast fade reads as a flicker. */
@keyframes matrx-agent-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.matrx-agent-fade-in {
  animation: matrx-agent-fade-in 500ms ease-out;
}

/* The list spinner. */
@keyframes matrx-agent-spin {
  to {
    transform: rotate(360deg);
  }
}
.matrx-agent-spin {
  animation: matrx-agent-spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .matrx-agent-fade-in {
    animation: none;
  }
  .matrx-agent-spin {
    animation-duration: 2s;
  }
}

/* 🚨 THE DRIFT SCREAM's surface. It is a persistent banner, not a toast:
   no auto-dismiss, no fade, and it holds its space in the picker until a
   person dismisses it. */
.matrx-agent-drift-banner {
  background-color: var(--matrx-agent-drift-bg);
  color: var(--matrx-agent-drift-fg);
  border: 1px solid var(--matrx-agent-drift-border);
}