@layer theme, base, components;

/* static/tokens-primitive.css */
/* Generated by openagents-ui from src/tokens (OPENAGENTS_UI_BLESS=1 cargo test -p openagents-ui). Do not edit.
   Token values ported from Apps SDK UI (MIT, see crates/openagents-ui/NOTICE). */
@layer theme {
  :root,
  :where([data-theme]) {
    /* Gray */
    --gray-0: light-dark(#ffffff, #0d0d0d);
    --gray-25: light-dark(#fcfcfc, #101010);
    --gray-50: light-dark(#f9f9f9, #131313);
    --gray-75: light-dark(#f3f3f3, #161616);
    --gray-100: light-dark(#ededed, #181818);
    --gray-150: light-dark(#dfdfdf, #1c1c1c);
    --gray-200: light-dark(#cdcdcd, #212121);
    --gray-250: light-dark(#b9b9b9, #282828);
    --gray-300: light-dark(#afafaf, #303030);
    --gray-350: light-dark(#9f9f9f, #393939);
    --gray-400: light-dark(#8f8f8f, #414141);
    --gray-450: light-dark(#767676, #4f4f4f);
    --gray-500: #5d5d5d;
    --gray-550: light-dark(#4f4f4f, #767676);
    --gray-600: light-dark(#414141, #8f8f8f);
    --gray-650: light-dark(#393939, #9f9f9f);
    --gray-700: light-dark(#303030, #afafaf);
    --gray-750: light-dark(#282828, #b9b9b9);
    --gray-800: light-dark(#212121, #cdcdcd);
    --gray-850: light-dark(#1c1c1c, #dcdcdc);
    --gray-900: light-dark(#181818, #ededed);
    --gray-925: light-dark(#161616, #f3f3f3);
    --gray-950: light-dark(#131313, #f3f3f3);
    --gray-975: light-dark(#101010, #f9f9f9);
    --gray-1000: light-dark(#0d0d0d, #ffffff);

    /* Alpha transparency */
    --alpha-base: light-dark(#0d0d0d, #ffffff);
    --alpha-0: color-mix(in oklab, var(--alpha-base) 0%, transparent);
    --alpha-02: color-mix(in oklab, var(--alpha-base) 2%, transparent);
    --alpha-04: color-mix(in oklab, var(--alpha-base) 4%, transparent);
    --alpha-05: color-mix(in oklab, var(--alpha-base) 5%, transparent);
    --alpha-06: color-mix(in oklab, var(--alpha-base) 6%, transparent);
    --alpha-08: color-mix(in oklab, var(--alpha-base) 8%, transparent);
    --alpha-10: color-mix(in oklab, var(--alpha-base) 10%, transparent);
    --alpha-12: color-mix(in oklab, var(--alpha-base) 12%, transparent);
    --alpha-15: color-mix(in oklab, var(--alpha-base) 15%, transparent);
    --alpha-16: color-mix(in oklab, var(--alpha-base) 16%, transparent);
    --alpha-20: color-mix(in oklab, var(--alpha-base) 20%, transparent);
    --alpha-25: color-mix(in oklab, var(--alpha-base) 25%, transparent);
    --alpha-30: color-mix(in oklab, var(--alpha-base) 30%, transparent);
    --alpha-35: color-mix(in oklab, var(--alpha-base) 35%, transparent);
    --alpha-40: color-mix(in oklab, var(--alpha-base) 40%, transparent);
    --alpha-50: color-mix(in oklab, var(--alpha-base) 50%, transparent);
    --alpha-60: color-mix(in oklab, var(--alpha-base) 60%, transparent);
    --alpha-70: color-mix(in oklab, var(--alpha-base) 70%, transparent);

    /* Consistent contrast */
    --white: #ffffff;
    --black: #000000;

    /* Green */
    --green-25: #edfaf2;
    --green-50: #d9f4e4;
    --green-75: #b8ebcc;
    --green-100: #8cdfad;
    --green-200: #66d492;
    --green-300: #40c977;
    --green-400: #04b84c;
    --green-500: #00a240;
    --green-600: #008635;
    --green-700: #00692a;
    --green-800: #004f1f;
    --green-900: #003716;
    --green-950: #011c0b;
    --green-1000: #001207;
    --green-a25: color-mix(in oklab, var(--green-400) 8%, transparent);
    --green-a50: color-mix(in oklab, var(--green-400) 15%, transparent);
    --green-a75: color-mix(in oklab, var(--green-400) 29%, transparent);
    --green-a100: color-mix(in oklab, var(--green-400) 45%, transparent);
    --green-a200: color-mix(in oklab, var(--green-400) 60%, transparent);
    --green-a300: color-mix(in oklab, var(--green-400) 75%, transparent);

    /* Red */
    --red-25: #fff0f0;
    --red-50: #ffd9d9;
    --red-75: #ffc6c5;
    --red-100: #ffa4a2;
    --red-200: #ff8583;
    --red-300: #ff6764;
    --red-400: #fa423e;
    --red-500: #e02e2a;
    --red-600: #ba2623;
    --red-700: #911e1b;
    --red-800: #6e1615;
    --red-900: #4d100e;
    --red-950: #280b0a;
    --red-1000: #1f0909;
    --red-a25: color-mix(in oklab, var(--red-400) 8%, transparent);
    --red-a50: color-mix(in oklab, var(--red-400) 16%, transparent);
    --red-a75: color-mix(in oklab, var(--red-400) 30%, transparent);
    --red-a100: color-mix(in oklab, var(--red-400) 48%, transparent);
    --red-a200: color-mix(in oklab, var(--red-400) 64%, transparent);
    --red-a300: color-mix(in oklab, var(--red-400) 79%, transparent);

    /* Pink */
    --pink-25: #fff4f9;
    --pink-50: #ffe8f3;
    --pink-75: #ffd4e8;
    --pink-100: #ffbada;
    --pink-200: #ffa3ce;
    --pink-300: #ff8cc1;
    --pink-400: #ff66ad;
    --pink-500: #e04c91;
    --pink-600: #ba437a;
    --pink-700: #963c67;
    --pink-800: #6e2c4a;
    --pink-900: #4d1f34;
    --pink-950: #29101c;
    --pink-1000: #1a0a11;
    --pink-a25: color-mix(in oklab, var(--pink-400) 8%, transparent);
    --pink-a50: color-mix(in oklab, var(--pink-400) 16%, transparent);
    --pink-a75: color-mix(in oklab, var(--pink-400) 28%, transparent);
    --pink-a100: color-mix(in oklab, var(--pink-400) 45%, transparent);
    --pink-a200: color-mix(in oklab, var(--pink-400) 60%, transparent);
    --pink-a300: color-mix(in oklab, var(--pink-400) 76%, transparent);

    /* Orange */
    --orange-25: #fff5f0;
    --orange-50: #ffe7d9;
    --orange-75: #ffcfb4;
    --orange-100: #ffb790;
    --orange-200: #ff9e6c;
    --orange-300: #ff8549;
    --orange-400: #fb6a22;
    --orange-500: #e25507;
    --orange-600: #b9480d;
    --orange-700: #923b0f;
    --orange-800: #6d2e0f;
    --orange-900: #4a2206;
    --orange-950: #281105;
    --orange-1000: #211107;
    --orange-a25: color-mix(in oklab, var(--orange-400) 7%, transparent);
    --orange-a50: color-mix(in oklab, var(--orange-400) 16%, transparent);
    --orange-a75: color-mix(in oklab, var(--orange-400) 33%, transparent);
    --orange-a100: color-mix(in oklab, var(--orange-400) 48%, transparent);
    --orange-a200: color-mix(in oklab, var(--orange-400) 65%, transparent);
    --orange-a300: color-mix(in oklab, var(--orange-400) 81%, transparent);

    /* Yellow */
    --yellow-25: #fffbed;
    --yellow-50: #fff6d9;
    --yellow-75: #ffeeb8;
    --yellow-100: #ffe48c;
    --yellow-200: #ffdb66;
    --yellow-300: #ffd240;
    --yellow-400: #ffc300;
    --yellow-500: #e0ac00;
    --yellow-600: #ba8e00;
    --yellow-700: #916f00;
    --yellow-800: #6e5400;
    --yellow-900: #4d3b00;
    --yellow-950: #261d00;
    --yellow-1000: #1a1400;
    --yellow-a25: color-mix(in oklab, var(--yellow-400) 8%, transparent);
    --yellow-a50: color-mix(in oklab, var(--yellow-400) 15%, transparent);
    --yellow-a75: color-mix(in oklab, var(--yellow-400) 27%, transparent);
    --yellow-a100: color-mix(in oklab, var(--yellow-400) 45%, transparent);
    --yellow-a200: color-mix(in oklab, var(--yellow-400) 59%, transparent);
    --yellow-a300: color-mix(in oklab, var(--yellow-400) 74%, transparent);

    /* Purple */
    --purple-25: #f9f5fe;
    --purple-50: #efe5fe;
    --purple-75: #e0cefd;
    --purple-100: #ceb0fb;
    --purple-200: #be95fa;
    --purple-300: #ad7bf9;
    --purple-400: #924ff7;
    --purple-500: #8046d9;
    --purple-600: #6b3ab4;
    --purple-700: #532d8d;
    --purple-800: #3f226a;
    --purple-900: #2c184a;
    --purple-950: #160c25;
    --purple-1000: #100a19;
    --purple-a25: color-mix(in oklab, var(--purple-400) 6%, transparent);
    --purple-a50: color-mix(in oklab, var(--purple-400) 15%, transparent);
    --purple-a75: color-mix(in oklab, var(--purple-400) 28%, transparent);
    --purple-a100: color-mix(in oklab, var(--purple-400) 45%, transparent);
    --purple-a200: color-mix(in oklab, var(--purple-400) 60%, transparent);
    --purple-a300: color-mix(in oklab, var(--purple-400) 75%, transparent);

    /* Blue */
    --blue-25: #f5faff;
    --blue-50: #e5f3ff;
    --blue-75: #cce6ff;
    --blue-100: #99ceff;
    --blue-200: #66b5ff;
    --blue-300: #339cff;
    --blue-400: #0285ff;
    --blue-500: #0169cc;
    --blue-600: #004f99;
    --blue-700: #003f7a;
    --blue-800: #013566;
    --blue-900: #00284d;
    --blue-950: #000e1a;
    --blue-1000: #000d19;
    --blue-a25: color-mix(in oklab, var(--blue-400) 4%, transparent);
    --blue-a50: color-mix(in oklab, var(--blue-400) 13%, transparent);
    --blue-a75: color-mix(in oklab, var(--blue-400) 25%, transparent);
    --blue-a100: color-mix(in oklab, var(--blue-400) 40%, transparent);
    --blue-a200: color-mix(in oklab, var(--blue-400) 60%, transparent);
    --blue-a300: color-mix(in oklab, var(--blue-400) 80%, transparent);

    /* Sizes */
    --hairline: 1px;

    /* Shadows */
    --shadow-color: 0 0 0;
    --elevation-100-geo: 0 1px 2px -1px;
    --elevation-200-geo: 0 2px 4px -1px;
    --elevation-300-geo: 0 4px 8px -2px;
    --elevation-400-geo: 0 8px 16px -4px;
  }

  @media (resolution >= 150dpi), (resolution >= 1.5dppx) {
    :root,
    :where([data-theme]) {
      --hairline: 0.5px;
    }
  }

  :where(:root),
  :where([data-theme="light"]) {
    --shadow-alpha-100: 0.08;
    --shadow-alpha-200: 0.08;
    --shadow-alpha-300: 0.1;
    --shadow-alpha-400: 0.12;
    --shadow-hairline-width: 1px;
    --shadow-hairline-color: rgb(0 0 0 / 8%);
  }

  @media (resolution >= 150dpi), (resolution >= 1.5dppx) {
    :where(:root),
    :where([data-theme="light"]) {
      --shadow-hairline-width: 0.5px;
      --shadow-hairline-color: rgb(0 0 0 / 10%);
    }
  }

  @media (prefers-color-scheme: dark) {
    :where(:root:not([data-theme])) {
      --shadow-alpha-100: 0.2;
      --shadow-alpha-200: 0.2;
      --shadow-alpha-300: 0.36;
      --shadow-alpha-400: 0.3;
      --shadow-hairline-width: 1px;
      --shadow-hairline-color: rgb(255 255 255 / 10%);
    }
  }

  @media (prefers-color-scheme: dark) and ((resolution >= 150dpi) or (resolution >= 1.5dppx)) {
    :where(:root:not([data-theme])) {
      --shadow-hairline-width: 0.5px;
      --shadow-hairline-color: rgb(255 255 255 / 12%);
    }
  }

  :where([data-theme="dark"]) {
    --shadow-alpha-100: 0.2;
    --shadow-alpha-200: 0.2;
    --shadow-alpha-300: 0.36;
    --shadow-alpha-400: 0.3;
    --shadow-hairline-width: 1px;
    --shadow-hairline-color: rgb(255 255 255 / 10%);
  }

  @media (resolution >= 150dpi), (resolution >= 1.5dppx) {
    :where([data-theme="dark"]) {
      --shadow-hairline-width: 0.5px;
      --shadow-hairline-color: rgb(255 255 255 / 12%);
    }
  }

  :where([data-theme="dark"]) [data-surface="elevated"] {
    --shadow-hairline: 0 0 rgb(0 0 0 / 0%);
  }
}

/* static/tokens-semantic.css */
/* Generated by openagents-ui from src/tokens (OPENAGENTS_UI_BLESS=1 cargo test -p openagents-ui). Do not edit.
   Token values ported from Apps SDK UI (MIT, see crates/openagents-ui/NOTICE). */
@layer theme {
  :root,
  :where([data-theme]) {
    /* Breakpoints */
    --breakpoint-xs: 380px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* Font tracking */
    --tracking-wide: var(--font-tracking-wide);
    --tracking-normal: var(--font-tracking-normal);
    --tracking-tight: var(--font-tracking-tight);
    --tracking-none: 0em;

    /* Font families */
    --font-sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Radius */
    --radius-2xs: 0.125rem;
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.25rem;
    --radius-4xl: 1.5rem;
    --radius-full: 9999px;

    /* Spacing */
    --spacing: 0.25rem;

    /* Text colors */
    --color-text: light-dark(var(--gray-1000), #ededed);
    --color-text-secondary: light-dark(var(--gray-500), #818181);
    --color-text-tertiary: light-dark(var(--gray-400), #656565);
    --color-text-inverse: light-dark(var(--gray-0), #0a0a0a);

    /* Ring colors */
    --color-ring: light-dark(var(--blue-500), #ededed);

    /* Primary colors */
    --color-text-primary: var(--color-text);
    --color-background-primary-soft: light-dark(var(--gray-100), var(--gray-300));
    --color-background-primary-soft-hover: light-dark(var(--gray-150), var(--gray-350));
    --color-background-primary-soft-active: light-dark(var(--gray-200), var(--gray-400));
    --color-background-primary-soft-alpha: light-dark(var(--alpha-08), var(--alpha-12));
    --color-background-primary-soft-alpha-hover: light-dark(var(--alpha-12), var(--alpha-16));
    --color-background-primary-soft-alpha-active: light-dark(var(--alpha-16), var(--alpha-20));
    --color-text-primary-soft: var(--color-text);
    --color-background-primary-soft-alt: var(--alpha-02);
    --color-border-primary-soft-alt: var(--alpha-06);
    --color-text-primary-soft-alt: var(--color-text);
    --color-background-primary-surface: light-dark(var(--alpha-05), var(--alpha-08));
    --color-border-primary-surface: light-dark(var(--alpha-05), var(--alpha-08));
    --color-text-primary-surface: var(--color-text);
    --color-background-primary-solid: light-dark(var(--gray-900), #ededed);
    --color-background-primary-solid-hover: light-dark(var(--gray-700), var(--gray-900));
    --color-background-primary-solid-active: light-dark(var(--gray-600), var(--gray-850));
    --color-text-primary-solid: var(--color-text-inverse);
    --color-background-primary-outline-hover: light-dark(var(--alpha-02), var(--alpha-04));
    --color-background-primary-outline-active: light-dark(var(--alpha-04), var(--alpha-06));
    --color-border-primary-outline: light-dark(var(--alpha-16), var(--alpha-25));
    --color-border-primary-outline-hover: light-dark(var(--alpha-20), var(--alpha-30));
    --color-text-primary-outline: var(--color-text);
    --color-text-primary-outline-hover: var(--color-text);
    --color-background-primary-ghost-hover: light-dark(var(--alpha-08), var(--alpha-12));
    --color-background-primary-ghost-active: light-dark(var(--alpha-12), var(--alpha-16));
    --color-text-primary-ghost: var(--color-text);
    --color-text-primary-ghost-hover: var(--color-text);
    --color-ring-primary: var(--color-ring);
    --color-ring-primary-soft: var(--color-ring-primary);
    --color-ring-primary-solid: var(--color-ring-primary);
    --color-ring-primary-outline: var(--color-ring-primary);
    --color-ring-primary-ghost: var(--color-ring-primary);

    /* Secondary colors */
    --color-background-secondary-soft: light-dark(var(--gray-100), var(--gray-300));
    --color-background-secondary-soft-hover: light-dark(var(--gray-150), var(--gray-350));
    --color-background-secondary-soft-active: light-dark(var(--gray-200), var(--gray-400));
    --color-background-secondary-soft-alpha: light-dark(var(--alpha-08), var(--alpha-12));
    --color-background-secondary-soft-alpha-hover: light-dark(var(--alpha-12), var(--alpha-16));
    --color-background-secondary-soft-alpha-active: light-dark(var(--alpha-16), var(--alpha-20));
    --color-text-secondary-soft: var(--color-text);
    --color-background-secondary-soft-alt: var(--alpha-02);
    --color-border-secondary-soft-alt: var(--alpha-06);
    --color-text-secondary-soft-alt: var(--color-text);
    --color-background-secondary-solid: light-dark(var(--gray-500), var(--gray-400));
    --color-background-secondary-solid-hover: light-dark(var(--gray-600), var(--gray-450));
    --color-background-secondary-solid-active: light-dark(var(--gray-700), var(--gray-500));
    --color-text-secondary-solid: var(--white);
    --color-background-secondary-outline-hover: light-dark(var(--alpha-02), var(--alpha-04));
    --color-background-secondary-outline-active: light-dark(var(--alpha-04), var(--alpha-06));
    --color-border-secondary-outline: light-dark(var(--alpha-16), var(--alpha-25));
    --color-border-secondary-outline-hover: light-dark(var(--alpha-20), var(--alpha-30));
    --color-text-secondary-outline: var(--color-text-secondary);
    --color-text-secondary-outline-hover: var(--color-text);
    --color-background-secondary-ghost-hover: light-dark(var(--alpha-08), var(--alpha-12));
    --color-background-secondary-ghost-active: light-dark(var(--alpha-12), var(--alpha-16));
    --color-text-secondary-ghost: var(--color-text-secondary);
    --color-text-secondary-ghost-hover: var(--color-text);
    --color-ring-secondary: var(--color-ring);
    --color-ring-secondary-soft: var(--color-ring-secondary);
    --color-ring-secondary-solid: var(--color-ring-secondary);
    --color-ring-secondary-outline: var(--color-ring-secondary);
    --color-ring-secondary-ghost: var(--color-ring-secondary);

    /* Info colors */
    --color-text-info: light-dark(var(--blue-500), var(--blue-200));
    --color-background-info-soft: var(--blue-50);
    --color-background-info-soft-hover: var(--blue-75);
    --color-background-info-soft-active: var(--blue-75);
    --color-background-info-soft-alpha: var(--blue-a50);
    --color-background-info-soft-alpha-hover: var(--blue-a75);
    --color-background-info-soft-alpha-active: var(--blue-a75);
    --color-text-info-soft: light-dark(var(--blue-600), var(--blue-300));
    --color-background-info-surface: light-dark(var(--blue-a25), var(--blue-a50));
    --color-border-info-surface: light-dark(var(--blue-a25), var(--blue-a50));
    --color-text-info-surface: light-dark(var(--blue-600), var(--blue-300));
    --color-background-info-solid: var(--blue-400);
    --color-background-info-solid-hover: var(--blue-500);
    --color-background-info-solid-active: var(--blue-500);
    --color-text-info-solid: var(--white);
    --color-background-info-outline-hover: var(--blue-a25);
    --color-background-info-outline-active: var(--blue-a25);
    --color-border-info-outline: var(--blue-500);
    --color-border-info-outline-hover: var(--blue-500);
    --color-text-info-outline: var(--blue-500);
    --color-text-info-outline-hover: var(--blue-500);
    --color-background-info-ghost-hover: var(--blue-a50);
    --color-background-info-ghost-active: var(--blue-a50);
    --color-text-info-ghost: light-dark(var(--blue-500), var(--blue-200));
    --color-text-info-ghost-hover: light-dark(var(--blue-500), var(--blue-200));
    --color-ring-info: var(--color-ring);
    --color-ring-info-soft: var(--color-ring-info);
    --color-ring-info-solid: var(--color-ring-info);
    --color-ring-info-outline: var(--color-ring-info);
    --color-ring-info-ghost: var(--color-ring-info);

    /* Warning colors */
    --color-text-warning: light-dark(var(--orange-700), var(--orange-500));
    --color-background-warning-soft: var(--orange-50);
    --color-background-warning-soft-hover: var(--orange-75);
    --color-background-warning-soft-active: var(--orange-75);
    --color-background-warning-soft-alpha: var(--orange-a50);
    --color-background-warning-soft-alpha-hover: var(--orange-a75);
    --color-background-warning-soft-alpha-active: var(--orange-a75);
    --color-text-warning-soft: light-dark(var(--orange-700), var(--orange-400));
    --color-background-warning-surface: light-dark(var(--orange-a25), var(--orange-a50));
    --color-border-warning-surface: light-dark(var(--orange-a25), var(--orange-a50));
    --color-text-warning-surface: light-dark(var(--orange-700), var(--orange-400));
    --color-background-warning-solid: var(--orange-500);
    --color-background-warning-solid-hover: var(--orange-600);
    --color-background-warning-solid-active: var(--orange-600);
    --color-text-warning-solid: var(--white);
    --color-background-warning-outline-hover: var(--orange-a25);
    --color-background-warning-outline-active: var(--orange-a25);
    --color-border-warning-outline: var(--orange-500);
    --color-border-warning-outline-hover: var(--orange-500);
    --color-text-warning-outline: var(--orange-500);
    --color-text-warning-outline-hover: var(--orange-500);
    --color-background-warning-ghost-hover: var(--orange-a50);
    --color-background-warning-ghost-active: var(--orange-a50);
    --color-text-warning-ghost: var(--orange-500);
    --color-text-warning-ghost-hover: var(--orange-500);
    --color-ring-warning: var(--color-ring);
    --color-ring-warning-soft: var(--color-ring-warning);
    --color-ring-warning-solid: var(--color-ring-warning);
    --color-ring-warning-outline: var(--color-ring-warning);
    --color-ring-warning-ghost: var(--color-ring-warning);

    /* Caution colors */
    --color-text-caution: light-dark(var(--yellow-800), var(--yellow-500));
    --color-text-caution-hover: var(--yellow-800);
    --color-background-caution-soft: var(--yellow-50);
    --color-background-caution-soft-hover: var(--yellow-75);
    --color-background-caution-soft-active: var(--yellow-75);
    --color-background-caution-soft-alpha: var(--yellow-a50);
    --color-background-caution-soft-alpha-hover: var(--yellow-a75);
    --color-background-caution-soft-alpha-active: var(--yellow-a75);
    --color-text-caution-soft: light-dark(var(--yellow-800), var(--yellow-400));
    --color-background-caution-surface: light-dark(var(--yellow-a25), var(--yellow-a50));
    --color-border-caution-surface: light-dark(var(--yellow-a25), var(--yellow-a50));
    --color-text-caution-surface: light-dark(var(--yellow-800), var(--yellow-400));
    --color-background-caution-solid: var(--yellow-600);
    --color-background-caution-solid-hover: var(--yellow-700);
    --color-background-caution-solid-active: var(--yellow-700);
    --color-text-caution-solid: var(--white);
    --color-background-caution-outline-hover: var(--yellow-a25);
    --color-background-caution-outline-active: var(--yellow-a25);
    --color-border-caution-outline: var(--yellow-700);
    --color-border-caution-outline-hover: var(--yellow-700);
    --color-text-caution-outline: var(--yellow-700);
    --color-text-caution-outline-hover: var(--yellow-700);
    --color-background-caution-ghost-hover: var(--yellow-a50);
    --color-background-caution-ghost-active: var(--yellow-a50);
    --color-text-caution-ghost: var(--yellow-700);
    --color-text-caution-ghost-hover: var(--yellow-700);
    --color-ring-caution: var(--color-ring);
    --color-ring-caution-soft: var(--color-ring-caution);
    --color-ring-caution-solid: var(--color-ring-caution);
    --color-ring-caution-outline: var(--color-ring-caution);
    --color-ring-caution-ghost: var(--color-ring-caution);

    /* Danger colors */
    --color-text-danger: light-dark(var(--red-700), var(--red-300));
    --color-background-danger-soft: var(--red-50);
    --color-background-danger-soft-hover: var(--red-75);
    --color-background-danger-soft-active: var(--red-75);
    --color-background-danger-soft-alpha: var(--red-a50);
    --color-background-danger-soft-alpha-hover: var(--red-a75);
    --color-background-danger-soft-alpha-active: var(--red-a75);
    --color-text-danger-soft: light-dark(var(--red-600), var(--red-300));
    --color-background-danger-surface: light-dark(var(--red-a25), var(--red-a50));
    --color-border-danger-surface: light-dark(var(--red-a25), var(--red-a50));
    --color-text-danger-surface: light-dark(var(--red-600), var(--red-300));
    --color-background-danger-solid: var(--red-500);
    --color-background-danger-solid-hover: var(--red-600);
    --color-background-danger-solid-active: var(--red-600);
    --color-text-danger-solid: var(--white);
    --color-background-danger-outline-hover: var(--red-a25);
    --color-background-danger-outline-active: var(--red-a25);
    --color-border-danger-outline: var(--red-500);
    --color-border-danger-outline-hover: var(--red-500);
    --color-text-danger-outline: var(--red-500);
    --color-text-danger-outline-hover: var(--red-500);
    --color-background-danger-ghost-hover: var(--red-a50);
    --color-background-danger-ghost-active: var(--red-a50);
    --color-text-danger-ghost: var(--red-500);
    --color-text-danger-ghost-hover: var(--red-500);
    --color-ring-danger: var(--red-200);
    --color-ring-danger-soft: var(--color-ring-danger);
    --color-ring-danger-solid: var(--color-ring-danger);
    --color-ring-danger-outline: var(--color-ring-danger);
    --color-ring-danger-ghost: var(--color-ring-danger);

    /* Success colors */
    --color-text-success: light-dark(var(--green-700), var(--green-400));
    --color-background-success-soft: var(--green-50);
    --color-background-success-soft-hover: var(--green-75);
    --color-background-success-soft-active: var(--green-75);
    --color-background-success-soft-alpha: var(--green-a50);
    --color-background-success-soft-alpha-hover: var(--green-a75);
    --color-background-success-soft-alpha-active: var(--green-a75);
    --color-text-success-soft: light-dark(var(--green-700), var(--green-400));
    --color-background-success-surface: light-dark(var(--green-a25), var(--green-a50));
    --color-border-success-surface: light-dark(var(--green-a25), var(--green-a50));
    --color-text-success-surface: light-dark(var(--green-700), var(--green-400));
    --color-background-success-solid: light-dark(var(--green-500), var(--green-600));
    --color-background-success-solid-hover: light-dark(var(--green-500), var(--green-600));
    --color-background-success-solid-active: light-dark(var(--green-500), var(--green-600));
    --color-text-success-solid: var(--white);
    --color-background-success-outline-hover: var(--green-a25);
    --color-background-success-outline-active: var(--green-a25);
    --color-border-success-outline: light-dark(var(--green-500), var(--green-600));
    --color-border-success-outline-hover: light-dark(var(--green-500), var(--green-600));
    --color-text-success-outline: var(--green-500);
    --color-text-success-outline-hover: var(--green-500);
    --color-background-success-ghost-hover: var(--green-a50);
    --color-background-success-ghost-active: var(--green-a50);
    --color-text-success-ghost: var(--green-500);
    --color-text-success-ghost-hover: var(--green-500);
    --color-ring-success: var(--color-ring);
    --color-ring-success-soft: var(--color-ring-info);
    --color-ring-success-solid: var(--color-ring-info);
    --color-ring-success-outline: var(--color-ring-info);
    --color-ring-success-ghost: var(--color-ring-info);

    /* Discovery colors */
    --color-text-discovery: light-dark(var(--purple-700), var(--purple-300));
    --color-background-discovery-soft: var(--purple-50);
    --color-background-discovery-soft-hover: var(--purple-75);
    --color-background-discovery-soft-active: var(--purple-75);
    --color-background-discovery-soft-alpha: var(--purple-a50);
    --color-background-discovery-soft-alpha-hover: var(--purple-a75);
    --color-background-discovery-soft-alpha-active: var(--purple-a75);
    --color-text-discovery-soft: light-dark(var(--purple-600), var(--purple-200));
    --color-background-discovery-surface: light-dark(var(--purple-a25), var(--purple-a50));
    --color-border-discovery-surface: light-dark(var(--purple-a25), var(--purple-a50));
    --color-text-discovery-surface: light-dark(var(--purple-600), var(--purple-200));
    --color-background-discovery-solid: var(--purple-400);
    --color-background-discovery-solid-hover: var(--purple-500);
    --color-background-discovery-solid-active: var(--purple-500);
    --color-text-discovery-solid: var(--white);
    --color-background-discovery-outline-hover: var(--purple-a25);
    --color-background-discovery-outline-active: var(--purple-a25);
    --color-border-discovery-outline: var(--purple-500);
    --color-border-discovery-outline-hover: var(--purple-500);
    --color-text-discovery-outline: light-dark(var(--purple-500), var(--purple-400));
    --color-text-discovery-outline-hover: light-dark(var(--purple-500), var(--purple-400));
    --color-background-discovery-ghost-hover: var(--purple-a50);
    --color-background-discovery-ghost-active: var(--purple-a50);
    --color-text-discovery-ghost: var(--purple-500);
    --color-text-discovery-ghost-hover: var(--purple-500);
    --color-ring-discovery: var(--color-ring);
    --color-ring-discovery-soft: var(--color-ring);
    --color-ring-discovery-solid: var(--color-ring);
    --color-ring-discovery-outline: var(--color-ring);
    --color-ring-discovery-ghost: var(--color-ring);

    /* Disabled colors */
    --color-background-disabled: var(--alpha-05);
    --color-border-disabled: var(--alpha-06);
    --color-text-disabled: light-dark(var(--gray-400), var(--gray-500));

    /* Border colors */
    --color-border-subtle: light-dark(var(--alpha-05), var(--alpha-06));
    --color-border: light-dark(var(--alpha-10), #2c2c2c);
    --color-border-strong: light-dark(var(--alpha-15), #404040);

    /* Typography */
    --font-tracking-wide: 0em;
    --font-tracking-normal: 0em;
    --font-tracking-tight: 0em;
    --font-heading-5xl-size: 4.5rem;
    --font-heading-5xl-line-height: 4.5rem;
    --font-heading-5xl-weight: var(--font-weight-semibold);
    --font-heading-5xl-tracking: var(--tracking-tight);
    --font-heading-4xl-size: 3.75rem;
    --font-heading-4xl-line-height: 3.75rem;
    --font-heading-4xl-weight: var(--font-weight-semibold);
    --font-heading-4xl-tracking: var(--tracking-tight);
    --font-heading-3xl-size: 3rem;
    --font-heading-3xl-line-height: 3rem;
    --font-heading-3xl-weight: var(--font-weight-semibold);
    --font-heading-3xl-tracking: var(--tracking-tight);
    --font-heading-2xl-size: 2.25rem;
    --font-heading-2xl-line-height: 2.625rem;
    --font-heading-2xl-weight: var(--font-weight-semibold);
    --font-heading-2xl-tracking: var(--tracking-tight);
    --font-heading-xl-size: 2rem;
    --font-heading-xl-line-height: 2.375rem;
    --font-heading-xl-weight: var(--font-weight-semibold);
    --font-heading-xl-tracking: var(--tracking-tight);
    --font-heading-lg-size: 1.5rem;
    --font-heading-lg-line-height: 1.75rem;
    --font-heading-lg-weight: var(--font-weight-semibold);
    --font-heading-lg-tracking: var(--tracking-normal);
    --font-heading-md-size: 1.25rem;
    --font-heading-md-line-height: 1.625rem;
    --font-heading-md-weight: var(--font-weight-semibold);
    --font-heading-md-tracking: var(--tracking-normal);
    --font-heading-sm-size: 1.125rem;
    --font-heading-sm-line-height: 1.625rem;
    --font-heading-sm-weight: var(--font-weight-semibold);
    --font-heading-sm-tracking: var(--tracking-normal);
    --font-heading-xs-size: 1rem;
    --font-heading-xs-line-height: 1.5rem;
    --font-heading-xs-weight: var(--font-weight-semibold);
    --font-heading-xs-tracking: var(--tracking-normal);
    --font-text-lg-size: 1.125rem;
    --font-text-lg-line-height: 1.8125rem;
    --font-text-lg-weight: var(--font-weight-normal);
    --font-text-lg-tracking: var(--tracking-normal);
    --font-text-md-size: 1rem;
    --font-text-md-line-height: 1.5rem;
    --font-text-md-weight: var(--font-weight-normal);
    --font-text-md-tracking: var(--tracking-normal);
    --font-text-sm-size: 0.875rem;
    --font-text-sm-line-height: 1.25rem;
    --font-text-sm-weight: var(--font-weight-normal);
    --font-text-sm-tracking: var(--tracking-normal);
    --font-text-xs-size: 0.75rem;
    --font-text-xs-line-height: 1.125rem;
    --font-text-xs-weight: var(--font-weight-normal);
    --font-text-xs-tracking: var(--tracking-wide);
    --font-text-2xs-size: 0.625rem;
    --font-text-2xs-line-height: 0.875rem;
    --font-text-2xs-weight: var(--font-weight-normal);
    --font-text-2xs-tracking: var(--tracking-wide);
    --font-text-3xs-size: 0.5rem;
    --font-text-3xs-line-height: 0.75rem;
    --font-text-3xs-weight: var(--font-weight-normal);
    --font-text-3xs-tracking: var(--tracking-wide);

    /* Control sizes */
    --control-size-3xs: 1.375rem;
    --control-size-2xs: 1.5rem;
    --control-size-xs: 1.625rem;
    --control-size-sm: 1.75rem;
    --control-size-md: 2rem;
    --control-size-lg: 2.25rem;
    --control-size-xl: 2.5rem;
    --control-size-2xl: 2.75rem;
    --control-size-3xl: 3rem;
    --control-gutter-2xs: 0.375rem;
    --control-gutter-xs: 0.5rem;
    --control-gutter-sm: 0.625rem;
    --control-gutter-md: 0.75rem;
    --control-gutter-lg: 0.875rem;
    --control-gutter-xl: 1rem;
    --control-gutter-pill-scaling: 1.33;
    --control-radius-sm: var(--radius-sm);
    --control-radius-md: var(--radius-md);
    --control-radius-lg: var(--radius-lg);
    --control-radius-xl: var(--radius-xl);
    --control-font-size-sm: var(--font-text-xs-size);
    --control-font-size-md: var(--font-text-sm-size);
    --control-font-size-lg: var(--font-text-md-size);
    --control-icon-size-xs: 0.875rem;
    --control-icon-size-sm: 1rem;
    --control-icon-size-md: 1.125rem;
    --control-icon-size-lg: 1.25rem;
    --control-icon-size-xl: 1.375rem;
    --control-icon-size-2xl: 1.5rem;

    /* Motion */
    --cubic-enter: cubic-bezier(0.19, 1, 0.22, 1);
    --cubic-exit: cubic-bezier(0.8, 0, 0.4, 1);
    --cubic-exit-snappy: cubic-bezier(0.65, 0, 0.4, 1);
    --cubic-move: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-duration-basic: 150ms;
    --transition-ease-basic: ease;

    /* Scrollbar */
    --scrollbar-color: var(--alpha-30);

    /* Shadows */
    --shadow: 0 10px 15px -3px light-dark(rgba(0 0 0 / 10%), rgba(0 0 0 / 20%)), 0 4px 6px -4px light-dark(rgba(0 0 0 / 10%), rgba(0 0 0 / 20%));
    --shadow-hairline: 0 0 0 var(--shadow-hairline-width) var(--shadow-hairline-color);
    --shadow-100: var(--elevation-100-geo) rgb(var(--shadow-color) / var(--shadow-alpha-100));
    --shadow-100-strong: var(--elevation-100-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-100) * 1.25));
    --shadow-100-stronger: var(--elevation-100-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-100) * 1.6));
    --shadow-200: var(--elevation-200-geo) rgb(var(--shadow-color) / var(--shadow-alpha-200));
    --shadow-200-strong: var(--elevation-200-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-200) * 1.25));
    --shadow-200-stronger: var(--elevation-200-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-200) * 1.6));
    --shadow-300: var(--elevation-300-geo) rgb(var(--shadow-color) / var(--shadow-alpha-300));
    --shadow-300-strong: var(--elevation-300-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-300) * 1.25));
    --shadow-300-stronger: var(--elevation-300-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-300) * 1.6));
    --shadow-400: var(--elevation-400-geo) rgb(var(--shadow-color) / var(--shadow-alpha-400));
    --shadow-400-strong: var(--elevation-400-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-400) * 1.25));
    --shadow-400-stronger: var(--elevation-400-geo) rgb(var(--shadow-color) / calc(var(--shadow-alpha-400) * 1.6));

    /* Surfaces */
    --color-surface: light-dark(var(--gray-0), #0a0a0a);
    --color-surface-secondary: light-dark(var(--gray-50), #101010);
    --color-surface-tertiary: light-dark(var(--gray-75), #0e0e0e);
    --color-surface-elevated: light-dark(var(--gray-0), #191919);
    --color-surface-elevated-secondary: light-dark(var(--gray-50), #1e1e1e);
  }
}

/* static/tokens-components.css */
/* Generated by openagents-ui from src/tokens (OPENAGENTS_UI_BLESS=1 cargo test -p openagents-ui). Do not edit.
   Token values ported from Apps SDK UI (MIT, see crates/openagents-ui/NOTICE). */
@layer theme {
  :root,
  :where([data-theme]) {
    /* Alert */
    --alert-border-radius: var(--radius-xl);
    --alert-gap: calc(var(--spacing) * 3);
    --alert-gutter: calc(var(--spacing) * 4);
    --alert-font-size: var(--font-text-sm-size);
    --alert-line-height: var(--font-text-sm-line-height);
    --alert-title-font-weight: var(--font-weight-semibold);

    /* Avatar */
    --avatar-radius: var(--radius-full);
    --avatar-size: 28px;
    --avatar-font-size-scaling: 0.5;
    --avatar-overflow-font-size-scaling-one: 0.45;
    --avatar-overflow-font-size-scaling-two: 0.37;
    --avatar-overflow-font-size-scaling-three: 0.3;
    --avatar-image-border-color: light-dark(var(--alpha-04), var(--alpha-15));

    /* AvatarGroup */
    --avatar-group-cutout-width: 3px;
    --avatar-group-cutout-color: var(--color-surface);
    --avatar-group-spacing: -8px;

    /* Badge */
    --badge-gutter-sm: calc(var(--control-gutter-2xs) - 1px);
    --badge-gutter-md: var(--control-gutter-2xs);
    --badge-gutter-lg: var(--control-gutter-xs);
    --badge-size-sm: calc(var(--control-size-3xs) - 2px);
    --badge-size-md: var(--control-size-3xs);
    --badge-size-lg: var(--control-size-2xs);
    --badge-radius-sm: var(--radius-xs);
    --badge-radius-md: var(--radius-xs);
    --badge-radius-lg: var(--radius-sm);
    --badge-font-size-sm: var(--font-text-xs-size);
    --badge-font-size-md: var(--font-text-sm-size);
    --badge-font-size-lg: var(--font-text-sm-size);
    --badge-tracking-sm: var(--tracking-wide);
    --badge-tracking-md: var(--tracking-normal);
    --badge-tracking-lg: var(--tracking-normal);
    --badge-font-weight-sm: var(--font-weight-semibold);
    --badge-font-weight-md: var(--font-weight-semibold);
    --badge-font-weight-lg: var(--font-weight-semibold);
    --badge-icon-font-size-sm: var(--font-text-xs-size);
    --badge-icon-font-size-md: var(--font-text-md-size);
    --badge-icon-font-size-lg: var(--font-text-md-size);
    --badge-indicator-size-sm: var(--font-text-xs-size);
    --badge-indicator-size-md: var(--font-text-xs-size);
    --badge-indicator-size-lg: var(--font-text-sm-size);

    /* Button */
    --button-gap-sm: 3px;
    --button-gap-md: 4px;
    --button-gap-lg: 6px;
    --button-font-weight: var(--font-weight-medium);

    /* Input */
    --input-gap-xs: 4px;
    --input-gap-sm: 6px;
    --input-gap-md: 8px;
    --input-gap-lg: 10px;
    --input-text-color: var(--color-text);
    --input-placeholder-text-color: var(--color-text-tertiary);
    --input-outline-border-color: var(--color-border-primary-outline);
    --input-outline-border-color-hover: light-dark(var(--alpha-25), var(--alpha-30));
    --input-outline-border-color-focus: var(--alpha-50);
    --input-soft-background-color: var(--color-background-primary-soft-alpha);
    --input-soft-border-color-focus: var(--alpha-20);
    --input-border-color-invalid: light-dark(var(--red-500), var(--red-600));

    /* Link */
    --link-font-weight: inherit;
    --link-gap: calc(var(--spacing) * 0.5);
    --link-radius: var(--radius-sm);
    --link-underline-decoration-offset: 0.1em;
    --link-primary-text-color: light-dark(var(--blue-500), var(--blue-300));
    --link-primary-text-color-hover: light-dark(var(--blue-800), var(--blue-400));

    /* Chat */
    --chat-max-width: 800px;
    --chat-gutter: calc(var(--spacing) * 5);
    --chat-background-color: var(--color-surface);
    --thread-gutter: calc(var(--spacing) * 4);
    --composer-gutter: calc(var(--spacing) * 3);
    --composer-compact-gutter: calc(var(--spacing) * 2);
    --composer-radius: var(--radius-4xl);
    --composer-background-color: var(--color-surface-elevated);
    --smoothing-background-color: var(--color-surface);
    --user-message-background-color: light-dark(var(--alpha-05), var(--alpha-08));
    --user-message-text-color: var(--color-text);
    --source-list-gutter: var(--thread-gutter);

    /* CodeBlock */
    --codeblock-background-color: var(--gray-25);
    --codeblock-syntax-1: light-dark(#c0660d, var(--yellow-100));
    --codeblock-syntax-2: light-dark(var(--blue-500), var(--blue-200));
    --codeblock-syntax-3: light-dark(var(--green-600), var(--green-300));
    --codeblock-syntax-4: var(--pink-500);
    --codeblock-syntax-5: light-dark(var(--purple-500), var(--purple-300));

    /* Dialog */
    --dialog-min-width: 250px;
    --dialog-max-width: 450px;
    --dialog-container-inner-padding: calc(var(--spacing) * 5);
    --dialog-backdrop-dim-background: light-dark(rgb(0 0 0 / 30%), rgb(0 0 0 / 50%));
    --dialog-backdrop-fade-background: color-mix(in oklab, var(--color-surface-elevated) 60%, transparent);

    /* Menu */
    --menu-gutter: calc(var(--spacing) * 1.5);
    --menu-radius: var(--radius-xl);
    --menu-font-size: var(--font-text-sm-size);
    --menu-line-height: var(--font-text-sm-line-height);
    --menu-item-background-color: light-dark(var(--alpha-08), var(--alpha-10));
    --menu-item-padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    --menu-item-gap: calc(var(--spacing) * 1.5);
    --menu-separator-gutter: var(--menu-gutter) calc(-1 * var(--menu-gutter));
    --menu-separator-background-color: var(--color-border);
    --menu-radio-indicator-size: var(--font-text-lg-size);
    --menu-radio-indicator-hole-size: var(--font-text-3xs-size);
    --menu-checkbox-indicator-size: var(--font-text-lg-size);

    /* Modal */
    --modal-backdrop-background: light-dark(rgb(0 0 0 / 30%), rgb(0 0 0 / 50%));
    --modal-container-inner-padding: calc(var(--spacing) * 5);

    /* Popover */
    --popover-radius: var(--radius-xl);

    /* RadioGroup */
    --radio-group-col-gap: calc(var(--spacing) * 2.5);
    --radio-group-row-gap: calc(var(--spacing) * 5);
    --radio-group-item-gap: calc(var(--spacing) * 1.5);
    --radio-group-item-font-size: var(--font-text-sm-size);
    --radio-group-item-line-height: var(--font-text-sm-line-height);
    --radio-group-indicator-size: var(--font-text-md-size);
    --radio-group-indicator-border-color: var(--color-border-primary-outline);
    --radio-group-indicator-border-color-hover: var(--alpha-25);
    --radio-group-indicator-background-color: var(--color-background-primary-solid);
    --radio-group-indicator-hole-size: 0.375rem;
    --radio-group-indicator-hole-background-color: var(--color-text-primary-solid);

    /* Segmented Control */
    --segmented-control-gap: 2px;
    --segmented-control-gutter: 2px;
    --segmented-control-background: light-dark(var(--gray-100), var(--gray-0));
    --segmented-control-font-weight: var(--font-weight-semibold);
    --segmented-control-thumb-background: light-dark(var(--gray-0), var(--gray-300));
    --segmented-control-thumb-shadow: 0 1px 4px -1px rgb(0 0 0 / 20%);
    --segmented-control-option-highlight-gutter: 1px;
    --segmented-control-option-highlight-background-color: light-dark(var(--gray-200), var(--gray-300));

    /* SelectControl */
    --select-control-font-weight: var(--font-weight-medium);

    /* Slider */
    --slider-track-color: light-dark(var(--gray-150), var(--gray-400));
    --slider-range-color: light-dark(var(--gray-450), var(--gray-600));

    /* Switch */
    --switch-track-width: 32px;
    --switch-track-height: 19px;
    --switch-track-color: light-dark(var(--gray-150), var(--gray-400));
    --switch-track-color-hover: light-dark(var(--gray-200), var(--gray-450));
    --switch-track-color-checked: light-dark(var(--gray-900), var(--blue-400));
    --switch-track-color-checked-disabled: light-dark(var(--gray-300), var(--blue-700));
    --switch-track-color-disabled: light-dark(var(--gray-100), var(--gray-300));
    --switch-thumb-offset: 3px;
    --switch-thumb-size: calc(var(--switch-track-height) - 2 * var(--switch-thumb-offset));
    --switch-thumb-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    --switch-thumb-color: light-dark(var(--gray-0), var(--gray-1000));
    --switch-thumb-color-disabled: light-dark(var(--gray-0), var(--gray-800));
    --switch-label-gap: calc(var(--spacing) * 2);

    /* Terminal (always Coder Noir) */
    --terminal-background-color: #0e0e0e;
    --terminal-text-color: #ededed;
    --terminal-cursor-color: #ededed;
    --terminal-selection-background-color: #333333;
    --terminal-selection-text-color: #ffffff;
    --terminal-ansi-0: #1a1a1a;
    --terminal-ansi-1: #ff4d42;
    --terminal-ansi-2: #9fd08a;
    --terminal-ansi-3: #e6c15c;
    --terminal-ansi-4: #7fb2e8;
    --terminal-ansi-5: #d093d0;
    --terminal-ansi-6: #74cfd1;
    --terminal-ansi-7: #c9c9c9;
    --terminal-ansi-8: #666666;
    --terminal-ansi-9: #ff6e64;
    --terminal-ansi-10: #b7e2a3;
    --terminal-ansi-11: #f2d47c;
    --terminal-ansi-12: #9dc7f2;
    --terminal-ansi-13: #e0aede;
    --terminal-ansi-14: #93e1e2;
    --terminal-ansi-15: #ffffff;
  }
}

/* static/base.css */
/* openagents-ui base layer: theme selection and opinionated globals.
   Ported from Apps SDK UI src/styles/globals.css and base.css (MIT, see
   crates/openagents-ui/NOTICE). No global preflight: openagents-web keeps
   its own resets until pages move over. The reset below is scoped to oa-
   elements and sits in @layer base, so every @layer components rule (and
   any unlayered page rule) beats it regardless of specificity. */
@layer base {
  /* No data-theme: follow the system setting. data-theme pins a theme on
     <html> or on any element (themes nest, e.g. a dark terminal panel). */
  :root {
    color-scheme: light dark;
  }

  [data-theme="light"] {
    color-scheme: light;
  }

  [data-theme="dark"] {
    color-scheme: dark;
  }

  html,
  :host {
    /* Apply default color */
    color: var(--color-text);
    /* Disallow browsers from synthesizing bold weights when missing */
    font-synthesis-weight: none;
    /* Smooth font rendering by default */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Apply default letter-spacing */
    letter-spacing: var(--tracking-normal);
  }

  * {
    /* Aesthetic scrollbar defaults */
    scrollbar-color: var(--scrollbar-color) transparent;
    scrollbar-width: thin;
  }

  /* Default placeholder text color */
  ::placeholder {
    color: var(--color-text-tertiary);
  }

  /* Use semibold weight as the defacto bold */
  b,
  strong {
    font-weight: var(--font-weight-semibold);
  }

  /* Scoped component reset: oa- elements size by border box, and native
     form controls carrying an oa- class drop browser borders, backgrounds,
     margins and fonts so component CSS starts from a blank control. */
  :where([class^="oa-"], [class*=" oa-"]),
  :where([class^="oa-"], [class*=" oa-"])::before,
  :where([class^="oa-"], [class*=" oa-"])::after {
    box-sizing: border-box;
  }

  :where(button, input, select, textarea):where([class^="oa-"], [class*=" oa-"]) {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
  }

  /* Checkboxes and radios are invisible hit targets over drawn indicators,
     and the slider styles its own track; they keep native appearance here. */
  :where(button, select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"])):where([class^="oa-"], [class*=" oa-"]) {
    appearance: none;
  }

  :where(button):where([class^="oa-"], [class*=" oa-"]) {
    cursor: pointer;
  }

  :where(button):where([class^="oa-"], [class*=" oa-"]):disabled {
    cursor: not-allowed;
  }
}

/* static/components/activity.css */
@layer components {
/* Agent activity in a conversation: tool calls, groups, progress steps,
   result cards and changed files (src/content/activity.rs). Values come
   from the Apps SDK UI tokens (MIT, see NOTICE). */

.oa-tool-call,
.oa-tool-group {
  margin: calc(var(--spacing) * 1) 0;
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  line-height: var(--font-text-sm-line-height);
}

.oa-tool-call__summary,
.oa-tool-group__summary {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
  min-height: calc(var(--spacing) * 8);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  list-style: none;
}
.oa-tool-call__summary::-webkit-details-marker,
.oa-tool-group__summary::-webkit-details-marker {
  display: none;
}
details.oa-tool-call > .oa-tool-call__summary,
.oa-tool-group__summary {
  cursor: pointer;
}
details.oa-tool-call > .oa-tool-call__summary:hover,
.oa-tool-group__summary:hover {
  background: var(--color-background-primary-ghost-hover);
  color: var(--color-text);
}
.oa-tool-call__summary:focus-visible,
.oa-tool-group__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-ring);
}

.oa-tool-call__icon {
  display: inline-flex;
  flex: none;
  color: var(--color-text-tertiary);
}
.oa-tool-call__title,
.oa-tool-group__title {
  flex: none;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}
.oa-tool-call__detail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--font-text-xs-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-tool-group__meta {
  flex: 1;
  min-width: 0;
  color: var(--color-text-tertiary);
}
.oa-tool-call__status {
  display: inline-flex;
  flex: none;
  margin-inline-start: auto;
}
.oa-tool-call__chevron {
  display: inline-flex;
  flex: none;
  color: var(--color-text-tertiary);
  transition: transform var(--transition-duration-basic) var(--transition-ease-basic);
}
details[open] > summary > .oa-tool-call__chevron {
  transform: rotate(180deg);
}

.oa-tool-call__body {
  padding: calc(var(--spacing) * 1) 0 calc(var(--spacing) * 2) calc(var(--spacing) * 8);
}
.oa-tool-call__body > * {
  margin: 0;
}

.oa-tool-group__calls {
  margin-inline-start: calc(var(--spacing) * 3);
  padding-inline-start: calc(var(--spacing) * 2);
  border-inline-start: 1px solid var(--color-border-subtle);
}
.oa-tool-group__calls .oa-tool-call {
  margin: 0;
}

/* Progress steps */
.oa-steps {
  margin: calc(var(--spacing) * 3) 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
}
.oa-steps__header {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--font-text-sm-size);
}
.oa-steps__title {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}
.oa-steps__count {
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.oa-steps__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.oa-step {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2.5);
  font-size: var(--font-text-sm-size);
  line-height: var(--font-text-sm-line-height);
}
.oa-step__marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 5);
  height: var(--font-text-sm-line-height);
  color: var(--color-text-tertiary);
}
.oa-step[data-status="done"] .oa-step__marker {
  color: var(--color-text-success);
}
.oa-step[data-status="running"] .oa-step__marker {
  color: var(--color-text-info);
}
.oa-step[data-status="failed"] .oa-step__marker {
  color: var(--color-text-danger);
}
.oa-step__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.oa-step__label {
  color: var(--color-text);
}
.oa-step[data-status="waiting"] .oa-step__label {
  color: var(--color-text-tertiary);
}
.oa-step__detail {
  color: var(--color-text-secondary);
  font-size: var(--font-text-xs-size);
}

/* Result card */
.oa-result-card {
  margin: calc(var(--spacing) * 3) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-elevated);
  overflow: hidden;
}
.oa-result-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
}
.oa-result-card__heading {
  min-width: 0;
}
.oa-result-card__title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-text-md-size);
  font-weight: var(--font-weight-semibold);
}
.oa-result-card__subtitle {
  margin: calc(var(--spacing) * 0.5) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
}
.oa-result-card__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  margin: 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-border-subtle);
}
.oa-result-card__facts dt {
  color: var(--color-text-tertiary);
  font-size: var(--font-text-xs-size);
}
.oa-result-card__facts dd {
  margin: calc(var(--spacing) * 0.5) 0 0;
  color: var(--color-text);
  font-size: var(--font-text-sm-size);
  overflow-wrap: anywhere;
}
.oa-result-card__body {
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-border-subtle);
}
.oa-result-card__body > :first-child {
  margin-top: 0;
}
.oa-result-card__body > :last-child {
  margin-bottom: 0;
}
.oa-result-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
}

/* Changed files */
.oa-file-changes {
  margin: calc(var(--spacing) * 3) 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  font-size: var(--font-text-sm-size);
}
.oa-file-changes__total {
  display: flex;
  gap: calc(var(--spacing) * 2);
  margin: 0;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}
.oa-file-changes__list {
  margin: 0;
  padding: calc(var(--spacing) * 1) 0;
  list-style: none;
}
.oa-file-changes__list li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
}
.oa-file-changes__path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--font-text-xs-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-file-changes__added,
.oa-file-changes__removed {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--font-text-xs-size);
  font-variant-numeric: tabular-nums;
}
.oa-file-changes__added {
  color: var(--color-text-success);
}
.oa-file-changes__removed {
  color: var(--color-text-danger);
}

@media (max-width: 40rem) {
  .oa-tool-call__detail {
    display: none;
  }
  .oa-tool-call__body {
    padding-inline-start: 0;
  }
}
}

/* static/components/alert.css */
@layer components {
/* Ported from Apps SDK UI (src/components/Alert/Alert.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-alert {
  display: flex;
  align-items: center;
  gap: var(--alert-gap);
  width: 100%;
  padding: var(--alert-gutter);
  border-radius: var(--alert-border-radius);
  font-size: var(--alert-font-size);
  line-height: var(--alert-line-height);

  &:where([data-actions-placement="bottom"]) {
    align-items: flex-start;
  }

  /* =============================================
    Variants
  ============================================= */
  &[data-variant="soft"] {
    background-color: var(--alert-background-color);
    box-shadow: 0 0 0 1px var(--alert-border-color) inset;
    color: var(--alert-text-color);

    &:where([data-color="primary"]) {
      --alert-background-color: var(--color-background-primary-surface);
      --alert-border-color: var(--color-border-primary-surface);
      --alert-text-color: var(--color-text);
    }

    &:where([data-color="success"]) {
      --alert-background-color: var(--color-background-success-surface);
      --alert-border-color: var(--color-border-success-surface);
      --alert-text-color: var(--color-text-success-surface);
    }

    &:where([data-color="warning"]) {
      --alert-background-color: var(--color-background-warning-surface);
      --alert-border-color: var(--color-border-warning-surface);
      --alert-text-color: var(--color-text-warning-surface);
    }

    &:where([data-color="caution"]) {
      --alert-background-color: var(--color-background-caution-surface);
      --alert-border-color: var(--color-border-caution-surface);
      --alert-text-color: var(--color-text-caution-surface);
    }

    &:where([data-color="danger"]) {
      --alert-background-color: var(--color-background-danger-surface);
      --alert-border-color: var(--color-border-danger-surface);
      --alert-text-color: var(--color-text-danger-surface);
    }

    &:where([data-color="info"]) {
      --alert-background-color: var(--color-background-info-surface);
      --alert-border-color: var(--color-border-info-surface);
      --alert-text-color: var(--color-text-info-surface);
    }

    &:where([data-color="discovery"]) {
      --alert-background-color: var(--color-background-discovery-surface);
      --alert-border-color: var(--color-border-discovery-surface);
      --alert-text-color: var(--color-text-discovery-surface);
    }
  }

  &[data-variant="solid"] {
    background-color: var(--alert-background-color);
    color: var(--alert-text-color);

    &:where([data-color="primary"]) {
      --alert-background-color: var(--color-background-primary-solid);
      --alert-text-color: var(--color-text-primary-solid);
    }

    &:where([data-color="success"]) {
      --alert-background-color: var(--color-background-success-solid);
      --alert-text-color: var(--color-text-success-solid);
    }

    &:where([data-color="warning"]) {
      --alert-background-color: var(--color-background-warning-solid);
      --alert-text-color: var(--color-text-warning-solid);
    }

    &:where([data-color="caution"]) {
      --alert-background-color: var(--color-background-caution-solid);
      --alert-text-color: var(--color-text-caution-solid);
    }

    &:where([data-color="danger"]) {
      --alert-background-color: var(--color-background-danger-solid);
      --alert-text-color: var(--color-text-danger-solid);
    }

    &:where([data-color="info"]) {
      --alert-background-color: var(--color-background-info-solid);
      --alert-text-color: var(--color-text-info-solid);
    }

    &:where([data-color="discovery"]) {
      --alert-background-color: var(--color-background-discovery-solid);
      --alert-text-color: var(--color-text-discovery-solid);
    }
  }

  &[data-variant="outline"] {
    box-shadow: 0 0 0 1px var(--alert-border-color) inset;
    color: var(--alert-text-color);

    &:where([data-color="primary"]) {
      --alert-border-color: var(--color-border);
      --alert-text-color: var(--color-text);
    }

    &:where([data-color="success"]) {
      --alert-border-color: var(--color-border-success-outline);
      --alert-text-color: var(--color-text-success-outline);
    }

    &:where([data-color="warning"]) {
      --alert-border-color: var(--color-border-warning-outline);
      --alert-text-color: var(--color-text-warning-outline);
    }

    &:where([data-color="caution"]) {
      --alert-border-color: var(--color-border-caution-outline);
      --alert-text-color: var(--color-text-caution-outline);
    }

    &:where([data-color="danger"]) {
      --alert-border-color: var(--color-border-danger-outline);
      --alert-text-color: var(--color-text-danger-outline);
    }

    &:where([data-color="info"]) {
      --alert-border-color: var(--color-border-info-outline);
      --alert-text-color: var(--color-text-info-outline);
    }

    &:where([data-color="discovery"]) {
      --alert-border-color: var(--color-border-discovery-outline);
      --alert-text-color: var(--color-text-discovery-outline);
    }
  }
}

.oa-alert-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;

  :where(.oa-alert[data-actions-placement="bottom"]) & {
    display: block;
  }
}

.oa-alert-indicator {
  svg {
    width: var(--alert-indicator-size, 20px);
    height: var(--alert-indicator-size, 20px);
  }
}

.oa-alert-message {
  flex: 1;
  min-width: 0;
}

.oa-alert-title {
  font-weight: var(--alert-title-font-weight);
  text-wrap: pretty;

  /* Slight spacing when paired with a description */
  ~ .oa-alert-description {
    margin-top: 2px;
  }
}

.oa-alert-description {
  opacity: 1;
  text-wrap: pretty;
}

.oa-alert-actions {
  display: flex;
  gap: calc(var(--spacing) * 2);

  :where(.oa-alert[data-actions-placement="end"]) & {
    align-self: center;
    /* Additional padding between right side or actions */
    margin-left: var(--alert-gutter);
  }

  :where(.oa-alert[data-actions-placement="bottom"]) & {
    margin-top: var(--alert-gutter);
  }
}
}

/* static/components/avatar.css */
@layer components {
/* Ported from Apps SDK UI (src/components/Avatar/Avatar.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-avatar {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--avatar-radius);
  transition: background-color 0.3s var(--cubic-enter);
  user-select: none;

  /* Interactive */
  &[type="button"] {
    cursor: pointer;

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

  &[data-variant="soft"] {
    background-color: var(--avatar-background-color);
    color: var(--avatar-text-color);

    &:where([data-color="primary"]) {
      --avatar-background-color: var(--color-background-primary-soft);
      --avatar-text-color: var(--color-text-primary-soft);
      --avatar-ring-color: var(--color-ring-primary-soft);
    }

    &:where([data-color="secondary"]) {
      --avatar-background-color: var(--color-background-secondary-soft);
      --avatar-text-color: var(--color-text-secondary-soft);
      --avatar-ring-color: var(--color-ring-secondary-soft);
    }

    &:where([data-color="discovery"]) {
      --avatar-background-color: var(--color-background-discovery-soft);
      --avatar-text-color: var(--color-text-discovery-soft);
      --avatar-ring-color: var(--color-ring-discovery-soft);
    }

    &:where([data-color="info"]) {
      --avatar-background-color: var(--color-background-info-soft);
      --avatar-text-color: var(--color-text-info-soft);
      --avatar-ring-color: var(--color-ring-info-soft);
    }

    &:where([data-color="success"]) {
      --avatar-background-color: var(--color-background-success-soft);
      --avatar-text-color: var(--color-text-success-soft);
      --avatar-ring-color: var(--color-ring-success-soft);
    }

    &:where([data-color="danger"]) {
      --avatar-background-color: var(--color-background-danger-soft);
      --avatar-text-color: var(--color-text-danger-soft);
      --avatar-ring-color: var(--color-ring-danger-soft);
    }
  }

  &[data-variant="solid"] {
    background-color: var(--avatar-background-color);
    color: var(--avatar-text-color);

    &:where([data-color="primary"]) {
      --avatar-background-color: var(--color-background-primary-solid);
      --avatar-text-color: var(--color-text-primary-solid);
      --avatar-ring-color: var(--color-ring-primary-solid);
    }

    &:where([data-color="secondary"]) {
      --avatar-background-color: var(--color-background-secondary-solid);
      --avatar-text-color: var(--color-text-secondary-solid);
      --avatar-ring-color: var(--color-ring-secondary-solid);
    }

    &:where([data-color="discovery"]) {
      --avatar-background-color: var(--color-background-discovery-solid);
      --avatar-text-color: var(--color-text-discovery-solid);
      --avatar-ring-color: var(--color-ring-discovery-solid);
    }

    &:where([data-color="info"]) {
      --avatar-background-color: var(--color-background-info-solid);
      --avatar-text-color: var(--color-text-info-solid);
      --avatar-ring-color: var(--color-ring-info-solid);
    }

    &:where([data-color="success"]) {
      --avatar-background-color: var(--color-background-success-solid);
      --avatar-text-color: var(--color-text-success-solid);
      --avatar-ring-color: var(--color-ring-success-solid);
    }

    &:where([data-color="danger"]) {
      --avatar-background-color: var(--color-background-danger-solid);
      --avatar-text-color: var(--color-text-danger-solid);
      --avatar-ring-color: var(--color-ring-danger-solid);
    }
  }
}

/*
 * Images with low contrast backgrounds should have clear edges,
 * but this border should not impact the size of the image, or
 * create fringed edges on various background colors. Using a transparency
 * on top of the image ensures crisp edges while also solving the issue of low contrast backgrounds.
 */
.oa-avatar-image-container {
  border-radius: inherit;

  &::after {
    position: absolute;
    inset: 0;
    display: block;
    border: 1px solid var(--avatar-image-border-color);
    border-radius: inherit;
    content: "";
    pointer-events: none;
  }
}

.oa-avatar-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0;
  /* Prevent awkward dragging of the image */
  pointer-events: none;
  transition: 0.15s ease;

  &[data-loaded] {
    opacity: 1;
  }
}

.oa-avatar-initial {
  font-size: calc(var(--avatar-size) * var(--avatar-font-size-scaling));
  font-weight: var(--font-weight-semibold);
}

.oa-avatar-overflow-count {
  font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-three));
  font-weight: var(--font-weight-semibold);

  &[data-letter-count="2"] {
    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-two));
  }

  &[data-letter-count="1"] {
    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-one));
  }
}

/*
 * The "+" sits very low in the baseline - this lifts it up 1px per 24px of size
 */
.oa-avatar-overflow-count-symbol {
  position: relative;
  top: calc(-1 * var(--avatar-size) / 24);
  margin-left: -1px;
}

.oa-avatar-icon {
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: calc(var(--avatar-size) * 0.7);
}

/* Ported from Apps SDK UI (src/components/Avatar/AvatarGroup.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-avatar-group {
  display: flex;

  > * ~ * {
    box-shadow: 0 0 0 var(--avatar-group-cutout-width) var(--avatar-group-cutout-color);

    /*
     * Mask approach avoids the need to apply a specific color, however:
     * -radial masks currently have very harsh anti-aliasing
     * - sizing must be set statically, and cannot use % sizing. You trade one imperative value for another.
     * mask-image: radial-gradient(circle 22px at -15px, transparent 99%, #fff 100%);
     */
  }

  &[data-stack="start"] {
    flex-direction: row-reverse;

    > * ~ * {
      margin-inline-end: var(--avatar-group-spacing);
    }
  }

  &[data-stack="end"] {
    > * ~ * {
      margin-inline-start: var(--avatar-group-spacing);
    }
  }
}

/* OpenAgents addition: preset sizes in place of React's inline --avatar-size
   style (the site CSP is style-src 'self'). A size on the group sizes every
   avatar in it. */
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="16"] { --avatar-size: 16px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="20"] { --avatar-size: 20px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="24"] { --avatar-size: 24px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="28"] { --avatar-size: 28px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="32"] { --avatar-size: 32px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="36"] { --avatar-size: 36px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="40"] { --avatar-size: 40px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="48"] { --avatar-size: 48px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="56"] { --avatar-size: 56px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="64"] { --avatar-size: 64px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="80"] { --avatar-size: 80px; }
:where(.oa-avatar, .oa-avatar-group)[data-avatar-size="96"] { --avatar-size: 96px; }
}

/* static/components/badge.css */
@layer components {
/* Ported from Apps SDK UI (src/components/Badge/Badge.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-badge {
  --indicator-size: var(--badge-indicator-size);

  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  height: var(--badge-size);
  padding: 0 var(--badge-gutter);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: var(--badge-tracking);
  white-space: nowrap;

  svg {
    font-size: var(--badge-icon-font-size);

    :where(&:first-child:not(:only-child)) {
      margin-left: var(--badge-icon-offset, -1px);
    }

    :where(&:last-child:not(:only-child)) {
      margin-right: var(--badge-icon-offset, -1px);
    }
  }

  /* =============================================
    Variants
  ============================================= */
  &[data-variant="soft"] {
    background-color: var(--badge-background-color);
    color: var(--badge-text-color);

    &:where([data-color="secondary"]) {
      --badge-background-color: var(--color-background-secondary-soft-alpha);
      --badge-text-color: var(--color-text-secondary-soft);
    }

    &:where([data-color="success"]) {
      --badge-background-color: var(--color-background-success-soft-alpha);
      --badge-text-color: var(--color-text-success-soft);
    }

    &:where([data-color="warning"]) {
      --badge-background-color: var(--color-background-warning-soft-alpha);
      --badge-text-color: var(--color-text-warning-soft);
    }

    &:where([data-color="danger"]) {
      --badge-background-color: var(--color-background-danger-soft-alpha);
      --badge-text-color: var(--color-text-danger-soft);
    }

    &:where([data-color="info"]) {
      --badge-background-color: var(--color-background-info-soft-alpha);
      --badge-text-color: var(--color-text-info-soft);
    }

    &:where([data-color="discovery"]) {
      --badge-background-color: var(--color-background-discovery-soft-alpha);
      --badge-text-color: var(--color-text-discovery-soft);
    }
  }

  &[data-variant="solid"] {
    background-color: var(--badge-background-color);
    color: var(--badge-text-color);

    &:where([data-color="secondary"]) {
      --badge-background-color: var(--color-background-secondary-solid);
      --badge-text-color: var(--color-text-secondary-solid);
    }

    &:where([data-color="success"]) {
      --badge-background-color: var(--color-background-success-solid);
      --badge-text-color: var(--color-text-success-solid);
    }

    &:where([data-color="warning"]) {
      --badge-background-color: var(--color-background-warning-solid);
      --badge-text-color: var(--color-text-warning-solid);
    }

    &:where([data-color="danger"]) {
      --badge-background-color: var(--color-background-danger-solid);
      --badge-text-color: var(--color-text-danger-solid);
    }

    &:where([data-color="info"]) {
      --badge-background-color: var(--color-background-info-solid);
      --badge-text-color: var(--color-text-info-solid);
    }

    &:where([data-color="discovery"]) {
      --badge-background-color: var(--color-background-discovery-solid);
      --badge-text-color: var(--color-text-discovery-solid);
    }
  }

  &[data-variant="outline"] {
    /* Avoids additive `width` compared to other variants */
    box-shadow: 0 0 0 1px var(--badge-border-color) inset;
    color: var(--badge-text-color);

    &:where([data-color="secondary"]) {
      --badge-border-color: var(--color-border-secondary-outline);
      --badge-text-color: var(--color-text-secondary-outline);
    }

    &:where([data-color="success"]) {
      --badge-border-color: var(--color-border-success-outline);
      --badge-text-color: var(--color-text-success-outline);
    }

    &:where([data-color="warning"]) {
      --badge-border-color: var(--color-border-warning-outline);
      --badge-text-color: var(--color-text-warning-outline);
    }

    &:where([data-color="danger"]) {
      --badge-border-color: var(--color-border-danger-outline);
      --badge-text-color: var(--color-text-danger-outline);
    }

    &:where([data-color="info"]) {
      --badge-border-color: var(--color-border-info-outline);
      --badge-text-color: var(--color-text-info-outline);
    }

    &:where([data-color="discovery"]) {
      --badge-border-color: var(--color-border-discovery-outline);
      --badge-text-color: var(--color-text-discovery-outline);
    }
  }

  /* =============================================
    Sizes
  ============================================= */
  &:where([data-size="sm"]) {
    --badge-size: var(--badge-size-sm);
    --badge-gutter: var(--badge-gutter-sm);
    --badge-font-size: var(--badge-font-size-sm);
    --badge-font-weight: var(--badge-font-weight-sm);
    --badge-tracking: var(--badge-tracking-sm);
    --badge-radius: var(--badge-radius-sm);
    --badge-icon-font-size: var(--badge-icon-font-size-sm);
    --badge-indicator-size: var(--badge-indicator-size-sm);
  }

  &:where([data-size="md"]) {
    --badge-size: var(--badge-size-md);
    --badge-gutter: var(--badge-gutter-md);
    --badge-font-size: var(--badge-font-size-md);
    --badge-font-weight: var(--badge-font-weight-md);
    --badge-tracking: var(--badge-tracking-md);
    --badge-radius: var(--badge-radius-md);
    --badge-icon-font-size: var(--badge-icon-font-size-md);
    --badge-indicator-size: var(--badge-indicator-size-md);
  }

  &:where([data-size="lg"]) {
    --badge-size: var(--badge-size-lg);
    --badge-gutter: var(--badge-gutter-lg);
    --badge-font-size: var(--badge-font-size-lg);
    --badge-font-weight: var(--badge-font-weight-lg);
    --badge-tracking: var(--badge-tracking-lg);
    --badge-radius: var(--badge-radius-lg);
    --badge-icon-font-size: var(--badge-icon-font-size-lg);
    --badge-indicator-size: var(--badge-indicator-size-lg);
  }

  /* =============================================
    Pill
  ============================================= */
  &:where([data-pill]) {
    --badge-radius: var(--radius-full);

    padding: 0 calc(var(--badge-gutter) * var(--control-gutter-pill-scaling));
  }
}
}

/* static/components/button.css */
@layer components {
/* Ported from Apps SDK UI (src/components/Button/Button.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-button {
  position: relative;
  display: inline-block;
  gap: var(--button-gap); /* Propagates down to .oa-button-inner */
  flex-shrink: 0;
  height: var(--button-size);
  padding: 0 var(--button-gutter);
  border-radius: var(--button-radius);
  cursor: pointer;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  transition-duration: var(--transition-duration-basic);
  transition-property: opacity, color;
  transition-timing-function: var(--transition-ease-basic);
  user-select: none;
  white-space: nowrap;

  /* Background / shape of the button */
  &::before {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    content: "";
    transition-duration: var(--transition-duration-basic);
    transition-property: opacity, background-color, transform, box-shadow, border-color;
    transition-timing-function: var(--transition-ease-basic);
    /* Composite layer seems required in some cases to avoid visual artifacts. */
    will-change: transform;
  }

  /* Focus ring */
  &::after {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    content: "";
    pointer-events: none;
    transition-duration: var(--transition-duration-basic);
    transition-property: transform;
    transition-timing-function: var(--transition-ease-basic);
    /* Composite layer seems required in some cases to avoid visual artifacts. */
    will-change: transform;
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    &::after {
      outline: 2px solid var(--button-ring-color, var(--color-ring));
      outline-offset: var(--button-ring-offset, 2px);
    }
  }

  svg:where(:not([data-no-autosize])) {
    width: var(--button-icon-size);
    height: var(--button-icon-size);

    :where(&:first-child:not(:only-child)) {
      margin-left: var(--button-icon-offset, -1px);
    }

    :where(&:last-child:not(:only-child)) {
      margin-right: var(--button-icon-offset, -1px);
    }
  }

  /* =============================================
    Optical alignment
  ============================================= */
  &:where([data-optically-align="start"]) {
    margin-inline-start: calc(var(--button-gutter) * -1);
  }

  &:where([data-optically-align="end"]) {
    margin-inline-end: calc(var(--button-gutter) * -1);
  }

  /* Uniform buttons zero-out button-gutter, requiring custom calcs */
  &:where([data-optically-align="start"][data-uniform]) {
    margin-inline-start: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1);
  }

  &:where([data-optically-align="end"][data-uniform]) {
    margin-inline-end: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1);
  }

  /* =============================================
    Sizes
  ============================================= */
  &:where([data-size="3xs"]) {
    --button-size: var(--control-size-3xs);
    --button-gutter: var(--control-gutter-2xs);
    --button-font-size: var(--control-font-size-sm);
    --button-icon-size: var(--control-icon-size-xs);
    --button-gap: var(--button-gap-sm);
    --button-radius: var(--control-radius-sm);
    --button-icon-offset: -1px;
    --indicator-size: 11px;
    --circular-progress-size: 11px;
  }

  &:where([data-size="2xs"]) {
    --button-size: var(--control-size-2xs);
    --button-gutter: var(--control-gutter-xs);
    --button-font-size: var(--control-font-size-sm);
    --button-icon-size: var(--control-icon-size-sm);
    --button-gap: var(--button-gap-md);
    --button-radius: var(--control-radius-sm);
    --button-icon-offset: -1px;
    --indicator-size: 12px;
    --circular-progress-size: 12px;
  }

  &:where([data-size="xs"]) {
    --button-size: var(--control-size-xs);
    --button-gutter: var(--control-gutter-xs);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-sm);
    --button-gap: var(--button-gap-md);
    --button-radius: var(--control-radius-sm);
    --button-icon-offset: -1px;
    --indicator-size: 13px;
    --circular-progress-size: 14px;
  }

  &:where([data-size="sm"]) {
    --button-size: var(--control-size-sm);
    --button-gutter: var(--control-gutter-sm);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-md);
    --button-gap: var(--button-gap-md);
    --button-radius: var(--control-radius-sm);
    --button-icon-offset: -1px;
    --indicator-size: 15px;
    --circular-progress-size: 15px;
  }

  &:where([data-size="md"]) {
    --button-size: var(--control-size-md);
    --button-gutter: var(--control-gutter-md);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-md);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-md);
    --button-icon-offset: -1px;
    --indicator-size: 16px;
    --circular-progress-size: 16px;
  }

  &:where([data-size="lg"]) {
    --button-size: var(--control-size-lg);
    --button-gutter: var(--control-gutter-md);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-md);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-md);
    --button-icon-offset: -1px;
    --indicator-size: 16px;
    --circular-progress-size: 16px;
  }

  &:where([data-size="xl"]) {
    --button-size: var(--control-size-xl);
    --button-gutter: var(--control-gutter-lg);
    --button-font-size: var(--control-font-size-md);
    --button-icon-size: var(--control-icon-size-md);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-lg);
    --button-icon-offset: -1px;
    --indicator-size: 18px;
    --circular-progress-size: 18px;
  }

  &:where([data-size="2xl"]) {
    --button-size: var(--control-size-2xl);
    --button-gutter: var(--control-gutter-lg);
    --button-font-size: var(--control-font-size-lg);
    --button-icon-size: var(--control-icon-size-lg);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-xl);
    --button-icon-offset: -2px;
    --indicator-size: 18px;
    --circular-progress-size: 18px;
  }

  &:where([data-size="3xl"]) {
    --button-size: var(--control-size-3xl);
    --button-gutter: var(--control-gutter-xl);
    --button-font-size: var(--control-font-size-lg);
    --button-icon-size: var(--control-icon-size-lg);
    --button-gap: var(--button-gap-lg);
    --button-radius: var(--control-radius-xl);
    --button-icon-offset: -2px;
    --indicator-size: 20px;
    --circular-progress-size: 20px;
  }

  /* =============================================
    Gutter sizes
  ============================================= */
  &:where([data-gutter-size="2xs"]) {
    --button-gutter: var(--control-gutter-2xs);
  }

  &:where([data-gutter-size="xs"]) {
    --button-gutter: var(--control-gutter-xs);
  }

  &:where([data-gutter-size="sm"]) {
    --button-gutter: var(--control-gutter-sm);
  }

  &:where([data-gutter-size="md"]) {
    --button-gutter: var(--control-gutter-md);
  }

  &:where([data-gutter-size="lg"]) {
    --button-gutter: var(--control-gutter-lg);
  }

  &:where([data-gutter-size="xl"]) {
    --button-gutter: var(--control-gutter-xl);
  }

  /* =============================================
    Icon sizes
  ============================================= */
  &:where([data-icon-size="sm"]) {
    --button-icon-size: var(--control-icon-size-sm);
  }

  &:where([data-icon-size="md"]) {
    --button-icon-size: var(--control-icon-size-md);
  }

  &:where([data-icon-size="lg"]) {
    --button-icon-size: var(--control-icon-size-lg);
  }

  &:where([data-icon-size="xl"]) {
    --button-icon-size: var(--control-icon-size-xl);
  }

  &:where([data-icon-size="2xl"]) {
    --button-icon-size: var(--control-icon-size-2xl);
  }

  /* =============================================
    Pill
  ============================================= */
  &:where([data-pill]) {
    --button-radius: var(--radius-full);

    padding: 0 calc(var(--button-gutter) * var(--control-gutter-pill-scaling));
  }

  /* =============================================
    Block
  ============================================= */
  &:where([data-block]) {
    width: 100%;
  }

  /* =============================================
    Uniform
  ============================================= */
  &[data-uniform] {
    --button-gutter: 0;

    width: var(--button-size);
  }

  /* =============================================
    Ghost variant
  ============================================= */
  &[data-variant="ghost"] {
    --button-ring-offset: -1px;

    color: var(--button-text-color);

    &::before {
      background-color: var(--button-background-color);
      opacity: 0;
      transform: scale(var(--scale));
    }

    &[aria-expanded="true"],
    &[data-state="open"] {
      color: var(--button-text-color-hover);

      &::before {
        /* Slightly deemphasize */
        opacity: 0.6;
        transform: scale(1);
      }
    }

    &[data-selected] {
      color: var(--button-text-color-hover);

      &::before {
        opacity: 1;
        transform: scale(1);
      }
    }

    &:where(:not([data-disabled])) {
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--button-text-color-hover);

          &::before {
            opacity: 1;
            transform: scale(1);
          }
        }
      }

      &:active {
        &::before {
          background-color: var(--button-background-color-active);
          opacity: 1;
          transform: scale(var(--scale));
        }

        &::after {
          transform: scale(var(--scale));
        }
      }
    }

    &:where([data-color="primary"]) {
      --button-background-color: var(--color-background-primary-ghost-hover);
      --button-background-color-active: var(--color-background-primary-ghost-active);
      --button-text-color: var(--color-text-primary-ghost);
      --button-text-color-hover: var(--color-text-primary-ghost-hover);
      --button-ring-color: var(--color-ring-primary-ghost);
    }

    &:where([data-color="secondary"]) {
      --button-background-color: var(--color-background-secondary-ghost-hover);
      --button-background-color-active: var(--color-background-secondary-ghost-active);
      --button-text-color: var(--color-text-secondary-ghost);
      --button-text-color-hover: var(--color-text-secondary-ghost-hover);
      --button-ring-color: var(--color-ring-secondary-ghost);
    }

    &:where([data-color="danger"]) {
      --button-background-color: var(--color-background-danger-ghost-hover);
      --button-background-color-active: var(--color-background-danger-ghost-active);
      --button-text-color: var(--color-text-danger-ghost);
      --button-text-color-hover: var(--color-text-danger-ghost-hover);
      --button-ring-color: var(--color-ring-danger-ghost);
    }

    &:where([data-color="success"]) {
      --button-background-color: var(--color-background-success-ghost-hover);
      --button-background-color-active: var(--color-background-success-ghost-active);
      --button-text-color: var(--color-text-success-ghost);
      --button-text-color-hover: var(--color-text-success-ghost-hover);
      --button-ring-color: var(--color-ring-success-ghost);
    }

    &:where([data-color="warning"]) {
      --button-background-color: var(--color-background-warning-ghost-hover);
      --button-background-color-active: var(--color-background-warning-ghost-active);
      --button-text-color: var(--color-text-warning-ghost);
      --button-text-color-hover: var(--color-text-warning-ghost-hover);
      --button-ring-color: var(--color-ring-warning-ghost);
    }

    &:where([data-color="caution"]) {
      --button-background-color: var(--color-background-caution-ghost-hover);
      --button-background-color-active: var(--color-background-caution-ghost-active);
      --button-text-color: var(--color-text-caution-ghost);
      --button-text-color-hover: var(--color-text-caution-ghost-hover);
      --button-ring-color: var(--color-ring-caution-ghost);
    }

    &:where([data-color="info"]) {
      --button-background-color: var(--color-background-info-ghost-hover);
      --button-background-color-active: var(--color-background-info-ghost-active);
      --button-text-color: var(--color-text-info-ghost);
      --button-text-color-hover: var(--color-text-info-ghost-hover);
      --button-ring-color: var(--color-ring-info-ghost);
    }

    &:where([data-color="discovery"]) {
      --button-background-color: var(--color-background-discovery-ghost-hover);
      --button-background-color-active: var(--color-background-discovery-ghost-active);
      --button-text-color: var(--color-text-discovery-ghost);
      --button-text-color-hover: var(--color-text-discovery-ghost-hover);
      --button-ring-color: var(--color-ring-discovery-ghost);
    }
  }

  /* =============================================
    Solid variant
  ============================================= */
  &[data-variant="solid"] {
    color: var(--button-text-color);

    &::before {
      background-color: var(--button-background-color);
    }

    &[aria-expanded="true"],
    &[data-state="open"],
    &[data-selected] {
      &::before {
        background-color: var(--button-background-color-hover);
      }
    }

    &:where(:not([data-disabled])) {
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          &::before {
            background-color: var(--button-background-color-hover);
          }
        }
      }

      &:active {
        &::before {
          background-color: var(--button-background-color-active);
        }

        &::before,
        &::after {
          transform: scale(var(--scale));
        }
      }
    }

    &:where([data-color="primary"]) {
      --button-background-color: var(--color-background-primary-solid);
      --button-background-color-hover: var(--color-background-primary-solid-hover);
      --button-background-color-active: var(--color-background-primary-solid-active);
      --button-text-color: var(--color-text-primary-solid);
      --button-ring-color: var(--color-ring-primary-solid);
    }

    &:where([data-color="secondary"]) {
      --button-background-color: var(--color-background-secondary-solid);
      --button-background-color-hover: var(--color-background-secondary-solid-hover);
      --button-background-color-active: var(--color-background-secondary-solid-active);
      --button-text-color: var(--color-text-secondary-solid);
      --button-ring-color: var(--color-ring-secondary-solid);
    }

    &:where([data-color="success"]) {
      --button-background-color: var(--color-background-success-solid);
      --button-background-color-hover: var(--color-background-success-solid-hover);
      --button-background-color-active: var(--color-background-success-solid-active);
      --button-text-color: var(--color-text-success-solid);
      --button-ring-color: var(--color-ring-success-solid);
    }

    &:where([data-color="danger"]) {
      --button-background-color: var(--color-background-danger-solid);
      --button-background-color-hover: var(--color-background-danger-solid-hover);
      --button-background-color-active: var(--color-background-danger-solid-active);
      --button-text-color: var(--color-text-danger-solid);
      --button-ring-color: var(--color-ring-danger-solid);
    }

    &:where([data-color="warning"]) {
      --button-background-color: var(--color-background-warning-solid);
      --button-background-color-hover: var(--color-background-warning-solid-hover);
      --button-background-color-active: var(--color-background-warning-solid-active);
      --button-text-color: var(--color-text-warning-solid);
      --button-ring-color: var(--color-ring-warning-solid);
    }

    &:where([data-color="caution"]) {
      --button-background-color: var(--color-background-caution-solid);
      --button-background-color-hover: var(--color-background-caution-solid-hover);
      --button-background-color-active: var(--color-background-caution-solid-active);
      --button-text-color: var(--color-text-caution-solid);
      --button-ring-color: var(--color-ring-caution-solid);
    }

    &:where([data-color="info"]) {
      --button-background-color: var(--color-background-info-solid);
      --button-background-color-hover: var(--color-background-info-solid-hover);
      --button-background-color-active: var(--color-background-info-solid-active);
      --button-text-color: var(--color-text-info-solid);
      --button-ring-color: var(--color-ring-info-solid);
    }

    &:where([data-color="discovery"]) {
      --button-background-color: var(--color-background-discovery-solid);
      --button-background-color-hover: var(--color-background-discovery-solid-hover);
      --button-background-color-active: var(--color-background-discovery-solid-active);
      --button-text-color: var(--color-text-discovery-solid);
      --button-ring-color: var(--color-ring-discovery-solid);
    }
  }

  /* =============================================
    Soft variant
  ============================================= */
  &[data-variant="soft"] {
    color: var(--button-text-color);

    &::before {
      background-color: var(--button-background-color);
    }

    &[aria-expanded="true"],
    &[data-state="open"],
    &[data-selected] {
      &::before {
        background-color: var(--button-background-color-hover);
      }
    }

    &:where(:not([data-disabled])) {
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          &::before {
            background-color: var(--button-background-color-hover);
          }
        }
      }

      &:active {
        &::before {
          background-color: var(--button-background-color-active);
        }

        &::before,
        &::after {
          transform: scale(var(--scale));
        }
      }
    }

    &:where([data-color="primary"]) {
      --button-background-color: var(--color-background-primary-soft-alpha);
      --button-background-color-hover: var(--color-background-primary-soft-alpha-hover);
      --button-background-color-active: var(--color-background-primary-soft-alpha-active);
      --button-text-color: var(--color-text-primary-soft);
      --button-ring-color: var(--color-ring-primary-soft);
    }

    &:where([data-color="secondary"]) {
      --button-background-color: var(--color-background-secondary-soft-alpha);
      --button-background-color-hover: var(--color-background-secondary-soft-alpha-hover);
      --button-background-color-active: var(--color-background-secondary-soft-alpha-active);
      --button-text-color: var(--color-text-secondary-soft);
      --button-ring-color: var(--color-ring-secondary-soft);
    }

    &:where([data-color="success"]) {
      --button-background-color: var(--color-background-success-soft-alpha);
      --button-background-color-hover: var(--color-background-success-soft-alpha-hover);
      --button-background-color-active: var(--color-background-success-soft-alpha-active);
      --button-text-color: var(--color-text-success-soft);
      --button-ring-color: var(--color-ring-success-soft);
    }

    &:where([data-color="danger"]) {
      --button-background-color: var(--color-background-danger-soft-alpha);
      --button-background-color-hover: var(--color-background-danger-soft-alpha-hover);
      --button-background-color-active: var(--color-background-danger-soft-alpha-active);
      --button-text-color: var(--color-text-danger-soft);
      --button-ring-color: var(--color-ring-danger-soft);
    }

    &:where([data-color="warning"]) {
      --button-background-color: var(--color-background-warning-soft-alpha);
      --button-background-color-hover: var(--color-background-warning-soft-alpha-hover);
      --button-background-color-active: var(--color-background-warning-soft-alpha-active);
      --button-text-color: var(--color-text-warning-soft);
      --button-ring-color: var(--color-ring-warning-soft);
    }

    &:where([data-color="caution"]) {
      --button-background-color: var(--color-background-caution-soft-alpha);
      --button-background-color-hover: var(--color-background-caution-soft-alpha-hover);
      --button-background-color-active: var(--color-background-caution-soft-alpha-active);
      --button-text-color: var(--color-text-caution-soft);
      --button-ring-color: var(--color-ring-caution-soft);
    }

    &:where([data-color="info"]) {
      --button-background-color: var(--color-background-info-soft-alpha);
      --button-background-color-hover: var(--color-background-info-soft-alpha-hover);
      --button-background-color-active: var(--color-background-info-soft-alpha-active);
      --button-text-color: var(--color-text-info-soft);
      --button-ring-color: var(--color-ring-info-soft);
    }

    &:where([data-color="discovery"]) {
      --button-background-color: var(--color-background-discovery-soft-alpha);
      --button-background-color-hover: var(--color-background-discovery-soft-alpha-hover);
      --button-background-color-active: var(--color-background-discovery-soft-alpha-active);
      --button-text-color: var(--color-text-discovery-soft);
      --button-ring-color: var(--color-ring-discovery-soft);
    }
  }

  /* =============================================
    Outline variant
  ============================================= */
  &[data-variant="outline"] {
    --button-ring-offset: -1px;

    color: var(--button-text-color);

    &::before {
      background-color: transparent;
      box-shadow:
        0 0 0 1px var(--button-border-color) inset,
        var(--button-shadow-custom, 0 0 #00000000);
    }

    &[aria-expanded="true"],
    &[data-state="open"],
    &[data-selected] {
      color: var(--button-text-color-hover);

      &::before {
        background-color: var(--button-background-color-hover);
        box-shadow:
          0 0 0 1px var(--button-border-color-hover) inset,
          var(--button-shadow-custom, 0 0 #00000000);
      }
    }

    &:where(:not([data-disabled])) {
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--button-text-color-hover);

          &::before {
            background-color: var(--button-background-color-hover);
            box-shadow:
              0 0 0 1px var(--button-border-color-hover) inset,
              var(--button-shadow-custom, 0 0 #00000000);
          }
        }
      }

      &:active {
        &::before {
          background-color: var(--button-background-color-active);
          transform: scale(var(--scale));
        }

        &::after {
          transform: scale(var(--scale));
        }
      }
    }

    &:where([data-color="primary"]) {
      --button-background-color-hover: var(--color-background-primary-outline-hover);
      --button-background-color-active: var(--color-background-primary-outline-active);
      --button-border-color: var(--color-border-primary-outline);
      --button-border-color-hover: var(--color-border-primary-outline-hover);
      --button-text-color: var(--color-text-primary-outline);
      --button-text-color-hover: var(--color-text-primary-outline-hover);
      --button-ring-color: var(--color-ring-primary-outline);
    }

    &:where([data-color="secondary"]) {
      --button-background-color-hover: var(--color-background-secondary-outline-hover);
      --button-background-color-active: var(--color-background-secondary-outline-active);
      --button-border-color: var(--color-border-secondary-outline);
      --button-border-color-hover: var(--color-border-secondary-outline-hover);
      --button-text-color: var(--color-text-secondary-outline);
      --button-text-color-hover: var(--color-text-secondary-outline-hover);
      --button-ring-color: var(--color-ring-secondary-outline);
    }

    &:where([data-color="danger"]) {
      --button-background-color-hover: var(--color-background-danger-outline-hover);
      --button-background-color-active: var(--color-background-danger-outline-active);
      --button-border-color: var(--color-border-danger-outline);
      --button-border-color-hover: var(--color-border-danger-outline-hover);
      --button-text-color: var(--color-text-danger-outline);
      --button-text-color-hover: var(--color-text-danger-outline-hover);
      --button-ring-color: var(--color-ring-danger-outline);
    }

    &:where([data-color="success"]) {
      --button-background-color-hover: var(--color-background-success-outline-hover);
      --button-background-color-active: var(--color-background-success-outline-active);
      --button-border-color: var(--color-border-success-outline);
      --button-border-color-hover: var(--color-border-success-outline-hover);
      --button-text-color: var(--color-text-success-outline);
      --button-text-color-hover: var(--color-text-success-outline-hover);
      --button-ring-color: var(--color-ring-success-outline);
    }

    &:where([data-color="warning"]) {
      --button-background-color-hover: var(--color-background-warning-outline-hover);
      --button-background-color-active: var(--color-background-warning-outline-active);
      --button-border-color: var(--color-border-warning-outline);
      --button-border-color-hover: var(--color-border-warning-outline-hover);
      --button-text-color: var(--color-text-warning-outline);
      --button-text-color-hover: var(--color-text-warning-outline-hover);
      --button-ring-color: var(--color-ring-warning-outline);
    }

    &:where([data-color="caution"]) {
      --button-background-color-hover: var(--color-background-caution-outline-hover);
      --button-background-color-active: var(--color-background-caution-outline-active);
      --button-border-color: var(--color-border-caution-outline);
      --button-border-color-hover: var(--color-border-caution-outline-hover);
      --button-text-color: var(--color-text-caution-outline);
      --button-text-color-hover: var(--color-text-caution-outline-hover);
      --button-ring-color: var(--color-ring-caution-outline);
    }

    &:where([data-color="info"]) {
      --button-background-color-hover: var(--color-background-info-outline-hover);
      --button-background-color-active: var(--color-background-info-outline-active);
      --button-border-color: var(--color-border-info-outline);
      --button-border-color-hover: var(--color-border-info-outline-hover);
      --button-text-color: var(--color-text-info-outline);
      --button-text-color-hover: var(--color-text-info-outline-hover);
      --button-ring-color: var(--color-ring-info-outline);
    }

    &:where([data-color="discovery"]) {
      --button-background-color-hover: var(--color-background-discovery-outline-hover);
      --button-background-color-active: var(--color-background-discovery-outline-active);
      --button-border-color: var(--color-border-discovery-outline);
      --button-border-color-hover: var(--color-border-discovery-outline-hover);
      --button-text-color: var(--color-text-discovery-outline);
      --button-text-color-hover: var(--color-text-discovery-outline-hover);
      --button-ring-color: var(--color-ring-discovery-outline);
    }
  }

  /* =============================================
    Disabled
  ============================================= */
  /* Non-visual disablement, akin to `inert` */
  &[disabled] {
    pointer-events: none;
  }

  /* Visual disablement */
  &[data-disabled][data-variant] {
    --button-background-color: var(--color-background-disabled);
    --button-border-color: var(--color-border-disabled);
    --button-text-color: var(--color-text-disabled);

    cursor: not-allowed;
    pointer-events: auto;

    /* Don't press while disabled */
    &:active::before {
      transform: scale(1);
    }

    /* Relaxed disabled tone: keep disabled visuals, soften cursor */
    &[data-disabled-tone="relaxed"] {
      cursor: default;
    }
  }
}

.oa-button-inner {
  position: relative;
  display: flex;
  /* Allows overrides through className on .oa-button */
  flex-direction: inherit;
  align-items: center;
  justify-content: center;
  /* Allows overrides through className on .oa-button */
  gap: inherit;
  width: 100%;
  /* Prevent padding-bottom from creating excess height (flexbox) */
  height: 100%;
  transition: opacity 0.15s ease 0.1s;

  [data-loading] & {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}

.oa-button-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  &[data-entering] {
    opacity: 0;
  }

  &[data-exiting] {
    opacity: 1;
  }

  &[data-entering-active],
  &[data-entering][data-interrupted] {
    opacity: 1;
    transition: opacity 0.15s ease 0.1s;
  }

  &[data-exiting-active],
  &[data-exiting][data-interrupted] {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
}

/* =============================================
  OpenAgents additions (not in Apps SDK UI)
============================================= */

/* Pressed scale without the pointer-enter script that sets --scale by width. */
.oa-button {
  --scale: 0.98;
}

/* Links styled as buttons carry no underline. */
a.oa-button,
span.oa-button[role="link"] {
  text-decoration: none;
}

/* Transparent variant: text only, no background on hover. ChatGPT uses
   data-variant="transparent" on toolbar buttons; it takes the ghost text roles. */
.oa-button[data-variant="transparent"] {
  --button-ring-offset: -1px;

  color: var(--button-text-color);

  &[aria-expanded="true"],
  &[data-state="open"],
  &[data-selected] {
    color: var(--button-text-color-hover);
  }

  &:where(:not([data-disabled])) {
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--button-text-color-hover);
      }
    }

    &:active::after {
      transform: scale(var(--scale));
    }
  }

  &:where([data-color="primary"]) {
    --button-text-color: var(--color-text-primary-ghost);
    --button-text-color-hover: var(--color-text-primary-ghost-hover);
    --button-ring-color: var(--color-ring-primary-ghost);
  }

  &:where([data-color="secondary"]) {
    --button-text-color: var(--color-text-secondary-ghost);
    --button-text-color-hover: var(--color-text-secondary-ghost-hover);
    --button-ring-color: var(--color-ring-secondary-ghost);
  }

  &:where([data-color="danger"]) {
    --button-text-color: var(--color-text-danger-ghost);
    --button-text-color-hover: var(--color-text-danger-ghost-hover);
    --button-ring-color: var(--color-ring-danger-ghost);
  }

  &:where([data-color="success"]) {
    --button-text-color: var(--color-text-success-ghost);
    --button-text-color-hover: var(--color-text-success-ghost-hover);
    --button-ring-color: var(--color-ring-success-ghost);
  }

  &:where([data-color="warning"]) {
    --button-text-color: var(--color-text-warning-ghost);
    --button-text-color-hover: var(--color-text-warning-ghost-hover);
    --button-ring-color: var(--color-ring-warning-ghost);
  }

  &:where([data-color="caution"]) {
    --button-text-color: var(--color-text-caution-ghost);
    --button-text-color-hover: var(--color-text-caution-ghost-hover);
    --button-ring-color: var(--color-ring-caution-ghost);
  }

  &:where([data-color="info"]) {
    --button-text-color: var(--color-text-info-ghost);
    --button-text-color-hover: var(--color-text-info-ghost-hover);
    --button-ring-color: var(--color-ring-info-ghost);
  }

  &:where([data-color="discovery"]) {
    --button-text-color: var(--color-text-discovery-ghost);
    --button-text-color-hover: var(--color-text-discovery-ghost-hover);
    --button-ring-color: var(--color-ring-discovery-ghost);
  }

  &[data-disabled] {
    --button-text-color: var(--color-text-disabled);
  }
}

/* CopyButton: both icons are rendered. The script hook (copy-button.js)
   sets data-copied on the button for 1.3s after a successful copy. */
.oa-copy-button-icon {
  display: inline-flex;
  width: var(--button-icon-size);
  height: var(--button-icon-size);

  &[data-copy-icon="copied"] {
    display: none;
  }

  .oa-button[data-copied] &[data-copy-icon="copy"] {
    display: none;
  }

  .oa-button[data-copied] &[data-copy-icon="copied"] {
    display: inline-flex;
    animation: oa-copy-button-enter 0.3s ease 0.15s both;
  }
}

/* Visually hidden live region that announces "Copied". */
.oa-copy-button-status {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes oa-copy-button-enter {
  from {
    transform: scale(0.6);
  }

  to {
    transform: scale(1);
  }
}
}

/* static/components/catalog-tokens.css */
@layer components {
/* Generated by openagents-ui from src/catalog/foundations.rs (OPENAGENTS_UI_BLESS=1 cargo test -p openagents-ui). Do not edit.
   One rule per catalog swatch: the site CSP forbids inline styles. */

.oa-catalog-swatch__chip[data-token="color-surface"] {
  background: var(--color-surface);
}

.oa-catalog-swatch__chip[data-token="color-surface-secondary"] {
  background: var(--color-surface-secondary);
}

.oa-catalog-swatch__chip[data-token="color-surface-tertiary"] {
  background: var(--color-surface-tertiary);
}

.oa-catalog-swatch__chip[data-token="color-surface-elevated"] {
  background: var(--color-surface-elevated);
}

.oa-catalog-swatch__chip[data-token="color-surface-elevated-secondary"] {
  background: var(--color-surface-elevated-secondary);
}

.oa-catalog-swatch__chip[data-token="color-text"] {
  background: var(--color-text);
}

.oa-catalog-swatch__chip[data-token="color-text-secondary"] {
  background: var(--color-text-secondary);
}

.oa-catalog-swatch__chip[data-token="color-text-tertiary"] {
  background: var(--color-text-tertiary);
}

.oa-catalog-swatch__chip[data-token="color-text-inverse"] {
  background: var(--color-text-inverse);
}

.oa-catalog-swatch__chip[data-token="color-border-subtle"] {
  background: var(--color-border-subtle);
}

.oa-catalog-swatch__chip[data-token="color-border"] {
  background: var(--color-border);
}

.oa-catalog-swatch__chip[data-token="color-border-strong"] {
  background: var(--color-border-strong);
}

.oa-catalog-swatch__chip[data-token="color-ring"] {
  background: var(--color-ring);
}

.oa-catalog-swatch__chip[data-token="color-background-disabled"] {
  background: var(--color-background-disabled);
}

.oa-catalog-swatch__chip[data-token="color-border-disabled"] {
  background: var(--color-border-disabled);
}

.oa-catalog-swatch__chip[data-token="color-text-disabled"] {
  background: var(--color-text-disabled);
}

.oa-catalog-swatch__chip[data-token="color-background-primary-solid"] {
  background: var(--color-background-primary-solid);
}

.oa-catalog-swatch__chip[data-token="color-background-primary-soft"] {
  background: var(--color-background-primary-soft);
}

.oa-catalog-swatch__chip[data-token="color-background-primary-surface"] {
  background: var(--color-background-primary-surface);
}

.oa-catalog-swatch__chip[data-token="color-border-primary-outline"] {
  background: var(--color-border-primary-outline);
}

.oa-catalog-swatch__chip[data-token="color-text-primary"] {
  background: var(--color-text-primary);
}

.oa-catalog-swatch__chip[data-token="color-background-secondary-solid"] {
  background: var(--color-background-secondary-solid);
}

.oa-catalog-swatch__chip[data-token="color-background-secondary-soft"] {
  background: var(--color-background-secondary-soft);
}

.oa-catalog-swatch__chip[data-token="color-border-secondary-outline"] {
  background: var(--color-border-secondary-outline);
}

.oa-catalog-swatch__chip[data-token="color-text-secondary"] {
  background: var(--color-text-secondary);
}

.oa-catalog-swatch__chip[data-token="color-background-info-solid"] {
  background: var(--color-background-info-solid);
}

.oa-catalog-swatch__chip[data-token="color-background-info-soft"] {
  background: var(--color-background-info-soft);
}

.oa-catalog-swatch__chip[data-token="color-background-info-surface"] {
  background: var(--color-background-info-surface);
}

.oa-catalog-swatch__chip[data-token="color-border-info-outline"] {
  background: var(--color-border-info-outline);
}

.oa-catalog-swatch__chip[data-token="color-text-info"] {
  background: var(--color-text-info);
}

.oa-catalog-swatch__chip[data-token="color-background-success-solid"] {
  background: var(--color-background-success-solid);
}

.oa-catalog-swatch__chip[data-token="color-background-success-soft"] {
  background: var(--color-background-success-soft);
}

.oa-catalog-swatch__chip[data-token="color-background-success-surface"] {
  background: var(--color-background-success-surface);
}

.oa-catalog-swatch__chip[data-token="color-border-success-outline"] {
  background: var(--color-border-success-outline);
}

.oa-catalog-swatch__chip[data-token="color-text-success"] {
  background: var(--color-text-success);
}

.oa-catalog-swatch__chip[data-token="color-background-warning-solid"] {
  background: var(--color-background-warning-solid);
}

.oa-catalog-swatch__chip[data-token="color-background-warning-soft"] {
  background: var(--color-background-warning-soft);
}

.oa-catalog-swatch__chip[data-token="color-background-warning-surface"] {
  background: var(--color-background-warning-surface);
}

.oa-catalog-swatch__chip[data-token="color-border-warning-outline"] {
  background: var(--color-border-warning-outline);
}

.oa-catalog-swatch__chip[data-token="color-text-warning"] {
  background: var(--color-text-warning);
}

.oa-catalog-swatch__chip[data-token="color-background-caution-solid"] {
  background: var(--color-background-caution-solid);
}

.oa-catalog-swatch__chip[data-token="color-background-caution-soft"] {
  background: var(--color-background-caution-soft);
}

.oa-catalog-swatch__chip[data-token="color-background-caution-surface"] {
  background: var(--color-background-caution-surface);
}

.oa-catalog-swatch__chip[data-token="color-border-caution-outline"] {
  background: var(--color-border-caution-outline);
}

.oa-catalog-swatch__chip[data-token="color-text-caution"] {
  background: var(--color-text-caution);
}

.oa-catalog-swatch__chip[data-token="color-background-danger-solid"] {
  background: var(--color-background-danger-solid);
}

.oa-catalog-swatch__chip[data-token="color-background-danger-soft"] {
  background: var(--color-background-danger-soft);
}

.oa-catalog-swatch__chip[data-token="color-background-danger-surface"] {
  background: var(--color-background-danger-surface);
}

.oa-catalog-swatch__chip[data-token="color-border-danger-outline"] {
  background: var(--color-border-danger-outline);
}

.oa-catalog-swatch__chip[data-token="color-text-danger"] {
  background: var(--color-text-danger);
}

.oa-catalog-swatch__chip[data-token="color-background-discovery-solid"] {
  background: var(--color-background-discovery-solid);
}

.oa-catalog-swatch__chip[data-token="color-background-discovery-soft"] {
  background: var(--color-background-discovery-soft);
}

.oa-catalog-swatch__chip[data-token="color-background-discovery-surface"] {
  background: var(--color-background-discovery-surface);
}

.oa-catalog-swatch__chip[data-token="color-border-discovery-outline"] {
  background: var(--color-border-discovery-outline);
}

.oa-catalog-swatch__chip[data-token="color-text-discovery"] {
  background: var(--color-text-discovery);
}

.oa-catalog-type__sample[data-token="heading-5xl"] {
  font-size: var(--font-heading-5xl-size);
  line-height: var(--font-heading-5xl-line-height);
  font-weight: var(--font-heading-5xl-weight);
  letter-spacing: var(--font-heading-5xl-tracking);
}

.oa-catalog-type__sample[data-token="heading-4xl"] {
  font-size: var(--font-heading-4xl-size);
  line-height: var(--font-heading-4xl-line-height);
  font-weight: var(--font-heading-4xl-weight);
  letter-spacing: var(--font-heading-4xl-tracking);
}

.oa-catalog-type__sample[data-token="heading-3xl"] {
  font-size: var(--font-heading-3xl-size);
  line-height: var(--font-heading-3xl-line-height);
  font-weight: var(--font-heading-3xl-weight);
  letter-spacing: var(--font-heading-3xl-tracking);
}

.oa-catalog-type__sample[data-token="heading-2xl"] {
  font-size: var(--font-heading-2xl-size);
  line-height: var(--font-heading-2xl-line-height);
  font-weight: var(--font-heading-2xl-weight);
  letter-spacing: var(--font-heading-2xl-tracking);
}

.oa-catalog-type__sample[data-token="heading-xl"] {
  font-size: var(--font-heading-xl-size);
  line-height: var(--font-heading-xl-line-height);
  font-weight: var(--font-heading-xl-weight);
  letter-spacing: var(--font-heading-xl-tracking);
}

.oa-catalog-type__sample[data-token="heading-lg"] {
  font-size: var(--font-heading-lg-size);
  line-height: var(--font-heading-lg-line-height);
  font-weight: var(--font-heading-lg-weight);
  letter-spacing: var(--font-heading-lg-tracking);
}

.oa-catalog-type__sample[data-token="heading-md"] {
  font-size: var(--font-heading-md-size);
  line-height: var(--font-heading-md-line-height);
  font-weight: var(--font-heading-md-weight);
  letter-spacing: var(--font-heading-md-tracking);
}

.oa-catalog-type__sample[data-token="heading-sm"] {
  font-size: var(--font-heading-sm-size);
  line-height: var(--font-heading-sm-line-height);
  font-weight: var(--font-heading-sm-weight);
  letter-spacing: var(--font-heading-sm-tracking);
}

.oa-catalog-type__sample[data-token="heading-xs"] {
  font-size: var(--font-heading-xs-size);
  line-height: var(--font-heading-xs-line-height);
  font-weight: var(--font-heading-xs-weight);
  letter-spacing: var(--font-heading-xs-tracking);
}

.oa-catalog-type__sample[data-token="text-lg"] {
  font-size: var(--font-text-lg-size);
  line-height: var(--font-text-lg-line-height);
  font-weight: var(--font-text-lg-weight);
  letter-spacing: var(--font-text-lg-tracking);
}

.oa-catalog-type__sample[data-token="text-md"] {
  font-size: var(--font-text-md-size);
  line-height: var(--font-text-md-line-height);
  font-weight: var(--font-text-md-weight);
  letter-spacing: var(--font-text-md-tracking);
}

.oa-catalog-type__sample[data-token="text-sm"] {
  font-size: var(--font-text-sm-size);
  line-height: var(--font-text-sm-line-height);
  font-weight: var(--font-text-sm-weight);
  letter-spacing: var(--font-text-sm-tracking);
}

.oa-catalog-type__sample[data-token="text-xs"] {
  font-size: var(--font-text-xs-size);
  line-height: var(--font-text-xs-line-height);
  font-weight: var(--font-text-xs-weight);
  letter-spacing: var(--font-text-xs-tracking);
}

.oa-catalog-type__sample[data-token="text-2xs"] {
  font-size: var(--font-text-2xs-size);
  line-height: var(--font-text-2xs-line-height);
  font-weight: var(--font-text-2xs-weight);
  letter-spacing: var(--font-text-2xs-tracking);
}

.oa-catalog-type__sample[data-token="text-3xs"] {
  font-size: var(--font-text-3xs-size);
  line-height: var(--font-text-3xs-line-height);
  font-weight: var(--font-text-3xs-weight);
  letter-spacing: var(--font-text-3xs-tracking);
}

.oa-catalog-shape[data-token="radius-2xs"] {
  border-radius: var(--radius-2xs);
}

.oa-catalog-shape[data-token="radius-xs"] {
  border-radius: var(--radius-xs);
}

.oa-catalog-shape[data-token="radius-sm"] {
  border-radius: var(--radius-sm);
}

.oa-catalog-shape[data-token="radius-md"] {
  border-radius: var(--radius-md);
}

.oa-catalog-shape[data-token="radius-lg"] {
  border-radius: var(--radius-lg);
}

.oa-catalog-shape[data-token="radius-xl"] {
  border-radius: var(--radius-xl);
}

.oa-catalog-shape[data-token="radius-2xl"] {
  border-radius: var(--radius-2xl);
}

.oa-catalog-shape[data-token="radius-3xl"] {
  border-radius: var(--radius-3xl);
}

.oa-catalog-shape[data-token="radius-4xl"] {
  border-radius: var(--radius-4xl);
}

.oa-catalog-shape[data-token="radius-full"] {
  border-radius: var(--radius-full);
}

.oa-catalog-shape[data-token="shadow-hairline"] {
  box-shadow: var(--shadow-hairline);
}

.oa-catalog-shape[data-token="shadow-100"] {
  box-shadow: var(--shadow-100);
}

.oa-catalog-shape[data-token="shadow-200"] {
  box-shadow: var(--shadow-200);
}

.oa-catalog-shape[data-token="shadow-300"] {
  box-shadow: var(--shadow-300);
}

.oa-catalog-shape[data-token="shadow-400"] {
  box-shadow: var(--shadow-400);
}
}

/* static/components/catalog.css */
@layer components {
/* Component catalog (UI-07): layout for openagents_ui::catalog::render().
   Each theme pane sets data-theme, so its tokens resolve through
   light-dark(); the pane restates color and background so text and surface
   follow the pane instead of inheriting the page's computed values.
   Per-token swatch rules live in catalog-tokens.css (generated). */

.oa-catalog {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 10);
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4) calc(var(--spacing) * 16);
  box-sizing: border-box;
  color: var(--color-text);
}

.oa-catalog-intro__title {
  margin: 0;
  font-size: var(--font-heading-2xl-size);
  line-height: var(--font-heading-2xl-line-height);
  font-weight: var(--font-heading-2xl-weight);
  letter-spacing: var(--font-heading-2xl-tracking);
}

.oa-catalog-intro__lede {
  margin: calc(var(--spacing) * 2) 0 0;
  color: var(--color-text-secondary);
}

/* Section nav */
.oa-catalog-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-surface-secondary);
}

.oa-catalog-nav__heading {
  display: block;
  margin-bottom: calc(var(--spacing) * 1.5);
  color: var(--color-text);
  font-size: var(--font-text-sm-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.oa-catalog-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.oa-catalog-nav__link {
  display: block;
  padding: calc(var(--spacing) * 0.5) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  text-decoration: none;
}

.oa-catalog-nav__link:hover,
.oa-catalog-nav__heading:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* Groups and sections */
.oa-catalog-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 8);
  scroll-margin-top: calc(var(--spacing) * 4);
}

.oa-catalog-group__title {
  margin: 0;
  padding-bottom: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-heading-xl-size);
  line-height: var(--font-heading-xl-line-height);
  font-weight: var(--font-heading-xl-weight);
}

.oa-catalog-section {
  scroll-margin-top: calc(var(--spacing) * 4);
}

.oa-catalog-section__title {
  margin: 0 0 calc(var(--spacing) * 3);
  font-size: var(--font-heading-md-size);
  line-height: var(--font-heading-md-line-height);
  font-weight: var(--font-heading-md-weight);
}

.oa-catalog-themes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 4);
}

@media (min-width: 64rem) {
  .oa-catalog-themes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.oa-catalog-theme {
  min-width: 0;
  padding: calc(var(--spacing) * 5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-text-md-size);
  line-height: var(--font-text-md-line-height);
}

.oa-catalog-theme__name {
  margin: 0 0 calc(var(--spacing) * 4);
  color: var(--color-text-tertiary);
  font-size: var(--font-text-xs-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.oa-catalog-theme__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
}

/* Specimens */
.oa-catalog-specimen {
  min-width: 0;
}

.oa-catalog-specimen__title {
  margin: 0 0 calc(var(--spacing) * 2);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  font-weight: var(--font-weight-medium);
}

.oa-catalog-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}

.oa-catalog-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--spacing) * 3);
  min-width: 0;
}

.oa-catalog-stack > p {
  margin: 0;
}

.oa-catalog-labelled {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 1);
}

.oa-catalog-caption {
  color: var(--color-text-tertiary);
  font-size: var(--font-text-xs-size);
}

/* A trigger given extra classes in the overlay specimens. */
.oa-catalog-trigger {
  font-weight: var(--font-weight-semibold);
}

/* Color swatches */
.oa-catalog-swatches__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: calc(var(--spacing) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.oa-catalog-swatch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: calc(var(--spacing) * 2.5);
  align-items: center;
}

.oa-catalog-swatch__chip {
  grid-row: 1 / span 2;
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}

.oa-catalog-swatch__name {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--font-text-xs-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oa-catalog-swatch__value {
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-text-2xs-size);
}

/* Type scale */
.oa-catalog-type {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.oa-catalog-type__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: calc(var(--spacing) * 3);
}

.oa-catalog-type__name {
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-text-xs-size);
}

.oa-catalog-type__sample {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oa-catalog-type__mono {
  margin: calc(var(--spacing) * 3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--font-text-sm-size);
}

/* Radius and shadow */
.oa-catalog-shapes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
  margin: 0 0 calc(var(--spacing) * 2);
  padding: 0;
  list-style: none;
}

.oa-catalog-shapes__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
}

.oa-catalog-shape {
  width: calc(var(--spacing) * 14);
  height: calc(var(--spacing) * 14);
  background: var(--color-surface-elevated);
}

.oa-catalog-shape[data-kind="radius"] {
  background: var(--color-background-secondary-soft);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.oa-catalog-shape[data-kind="shadow"] {
  border-radius: var(--radius-lg);
}

/* Icons */
.oa-catalog-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: calc(var(--spacing) * 1);
  max-height: 32rem;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.oa-catalog-icons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 1);
  border-radius: var(--radius-md);
  text-align: center;
}

.oa-catalog-icons__item:hover {
  background: var(--color-background-secondary-soft);
}

.oa-catalog-icons__name {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--font-text-2xs-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* App shell previews: a fixed-height frame instead of the full window. */
.oa-catalog-frame {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.oa-catalog-frame .oa-layout {
  height: 26rem;
}

.oa-catalog-frame .oa-skip-link {
  display: none;
}

/* The icon sprite the icon grids <use>. */
.oa-catalog-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
}

/* static/components/checkbox.css */
@layer components {
/*
 * Checkbox. Ported from Apps SDK UI `Checkbox.module.css` (MIT, see NOTICE).
 * The native <input type="checkbox"> sits transparent over `.oa-checkbox__box`
 * so clicks, keyboard and form submission stay native; the box draws the state.
 */
.oa-checkbox {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  cursor: pointer;
}

.oa-checkbox[data-orientation="right"] {
  flex-direction: row-reverse;
}

.oa-checkbox[data-disabled] {
  cursor: not-allowed;
}

.oa-checkbox__box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  /* Adjust downward for the label line-height; long labels can wrap. */
  top: 1px;
  border: 1px solid light-dark(var(--gray-200), var(--gray-500));
  border-radius: var(--radius-xs);
  background-color: transparent;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.oa-checkbox__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .oa-checkbox:not([data-disabled]) .oa-checkbox__box:hover:has(.oa-checkbox__input:not(:checked)) {
    border-color: light-dark(var(--gray-300), var(--gray-600));
  }
}

.oa-checkbox__box:has(.oa-checkbox__input:checked),
.oa-checkbox__box:has(.oa-checkbox__input:indeterminate) {
  border-color: var(--gray-900);
  background-color: var(--gray-900);
}

.oa-checkbox__box:has(.oa-checkbox__input:focus-visible) {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.oa-checkbox__box:has(.oa-checkbox__input:disabled) {
  border-color: light-dark(var(--gray-150), var(--gray-300));
  background: light-dark(var(--gray-25), var(--gray-200));
}

.oa-checkbox__box:has(.oa-checkbox__input:disabled:checked) {
  border-color: light-dark(var(--gray-300), var(--gray-200));
  background-color: light-dark(var(--gray-300), var(--gray-200));
}

/* Check mark: two arms drawn with pseudo elements. */
.oa-checkbox__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 64%;
  height: 32%;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-45deg) translate(-10%, 100%);
  transform-origin: center;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.oa-checkbox__input:checked + .oa-checkbox__mark,
.oa-checkbox__input:indeterminate + .oa-checkbox__mark {
  opacity: 1;
}

.oa-checkbox__input:indeterminate + .oa-checkbox__mark {
  transform: translate(30%, 80%);
}

.oa-checkbox__mark::before,
.oa-checkbox__mark::after {
  position: absolute;
  display: block;
  background: var(--gray-0);
  content: "";
  transform: scale(0);
  will-change: transform;
}

.oa-checkbox__input:checked + .oa-checkbox__mark::before,
.oa-checkbox__input:checked + .oa-checkbox__mark::after,
.oa-checkbox__input:indeterminate + .oa-checkbox__mark::after {
  transform: none;
}

/* Pure black is too low contrast to read as disabled. */
.oa-checkbox__input:disabled + .oa-checkbox__mark::before,
.oa-checkbox__input:disabled + .oa-checkbox__mark::after {
  background: light-dark(var(--gray-0), var(--gray-100));
}

.oa-checkbox__mark::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  transform-origin: 0 0;
  transition:
    transform 100ms ease 80ms,
    opacity 200ms ease;
}

.oa-checkbox__input:indeterminate + .oa-checkbox__mark::before {
  opacity: 0;
}

.oa-checkbox__mark::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  transform-origin: 0 100%;
  transition: transform 100ms ease 160ms;
}

.oa-checkbox__label {
  display: flex;
  flex-direction: column;
  min-height: 20px;
  font-size: 14px;
  line-height: 20px;
}

.oa-checkbox:not([data-orientation="right"]) .oa-checkbox__label {
  padding-left: 8px;
}

.oa-checkbox[data-orientation="right"] .oa-checkbox__label {
  padding-right: 8px;
}

.oa-checkbox[data-disabled] .oa-checkbox__label {
  opacity: 0.5;
}

.oa-checkbox__description {
  color: var(--color-text-secondary);
}
}

/* static/components/composer.css */
@layer components {
/* Composer (UI-06). Values come from the Apps SDK UI tokens (MIT, see
   NOTICE). The composer and message roles are product-only, named in the same
   scheme as the semantic layer so both themes resolve them through
   light-dark() primitives. */

:root {
  --color-background-composer-surface: var(--color-surface-elevated);
  --color-background-composer-primary: var(--color-background-primary-solid);
  --color-background-user-message: var(--color-background-secondary-soft);
  --color-text-user-message: var(--color-text);
  --color-text-composer-primary: var(--color-text);
  --color-text-composer-placeholder: var(--color-text-tertiary);
  --composer-border-radius: var(--radius-3xl);
  --composer-dropdown-label-color: var(--color-text-secondary);
  --composer-dropdown-label-value-color: var(--color-text);
  --elevation-composer: var(--shadow-100);
  --line-height-composer: var(--font-text-md-line-height);
  /* One line of text plus the input's top padding: the box starts at one
     line and grows with its content up to the max height. */
  --min-height-composer: calc(var(--line-height-composer) + var(--spacing) * 3);
  --max-height-composer: 22.5rem;
}

.oa-composer {
  position: relative;
  width: 100%;
  max-width: var(--thread-content-max-width, 48rem);
}

.oa-composer-root {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  width: 100%;
  margin: 0;
}

.oa-composer-selectors {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
  padding: 0 calc(var(--spacing) * 1.5);
}

/* A group of selectors a response replaces as one (by its id). */
.oa-composer-selector-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
}

.oa-composer-body {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--composer-border-radius);
  background: var(--color-background-composer-surface);
  box-shadow: var(--elevation-composer);
  cursor: text;
  transition: border-color var(--transition-duration-basic) var(--transition-ease-basic);
}
.oa-composer-body:focus-within {
  border-color: var(--color-border);
}

.oa-composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3) 0;
}
.oa-composer-attachments:empty {
  display: none;
}

.oa-composer-input {
  display: flex;
  flex-grow: 1;
  min-width: 0;
  overflow-y: auto;
}

.oa-rich-text-input {
  display: block;
  flex: 1;
  width: 100%;
  min-height: var(--min-height-composer);
  max-height: var(--max-height-composer);
  margin: 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4) 0;
  border: 0;
  background: transparent;
  color: var(--color-text-composer-primary);
  font-family: var(--font-sans);
  font-size: var(--font-text-md-size);
  line-height: var(--line-height-composer);
  resize: none;
  field-sizing: content;
  outline: none;
}
.oa-rich-text-input::placeholder {
  color: var(--color-text-composer-placeholder);
  opacity: 1;
}
.oa-rich-text-input:disabled {
  cursor: default;
  opacity: 0.6;
}

.oa-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2) calc(var(--spacing) * 2);
}
.oa-composer-footer-start,
.oa-composer-footer-end {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
}
.oa-composer-footer-start {
  flex: 1;
}
.oa-composer-footer-end {
  flex: none;
}

/* Dropdown labels and the model picker trigger. */
.oa-composer-dropdown,
.oa-model-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
  max-width: 15rem;
  height: calc(var(--spacing) * 8);
  padding: 0 calc(var(--spacing) * 2) 0 calc(var(--spacing) * 2.5);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--composer-dropdown-label-color);
  font: inherit;
  font-size: var(--font-text-sm-size);
  line-height: var(--font-text-sm-line-height);
  cursor: pointer;
  outline: none;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}
.oa-composer-dropdown:hover,
.oa-model-picker-trigger:hover,
.oa-composer-dropdown[aria-expanded="true"],
.oa-model-picker-trigger[aria-expanded="true"] {
  background: var(--color-background-primary-ghost-hover);
  color: var(--color-text);
}
.oa-composer-dropdown:focus-visible,
.oa-model-picker-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-composer-dropdown:disabled,
.oa-model-picker-trigger:disabled {
  cursor: default;
  opacity: 0.4;
}
.oa-composer-dropdown-icon {
  display: inline-flex;
  flex: none;
}
.oa-composer-dropdown-text,
.oa-model-picker-content {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
  overflow: hidden;
}
.oa-composer-dropdown-label {
  flex: none;
}
.oa-composer-dropdown-value,
.oa-model-picker-label {
  min-width: 0;
  overflow: hidden;
  color: var(--composer-dropdown-label-value-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-model-picker-effort {
  flex: none;
  color: var(--color-text-tertiary);
}
.oa-composer-dropdown-chevron {
  display: inline-flex;
  flex: none;
  color: var(--composer-dropdown-label-color);
}

/* Send. */
.oa-composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-background-composer-primary);
  color: var(--color-text-primary-solid);
  cursor: pointer;
  outline: none;
  transition: opacity var(--transition-duration-basic) var(--transition-ease-basic);
}
.oa-composer-send:hover {
  background: var(--color-background-primary-solid-hover);
}
.oa-composer-send:focus-visible {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-ring);
}
.oa-composer-send:disabled,
.oa-composer-send[aria-disabled="true"] {
  background: var(--color-background-disabled);
  color: var(--color-text-disabled);
  cursor: default;
}

/* Footer icon buttons: add context, voice input. */
.oa-composer-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--composer-dropdown-label-color);
  font: inherit;
  cursor: pointer;
  outline: none;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}
.oa-composer-action:hover,
.oa-composer-action[aria-expanded="true"] {
  background: var(--color-background-primary-ghost-hover);
  color: var(--color-text);
}
.oa-composer-action:focus-visible {
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-composer-action-icon {
  display: inline-flex;
  font-size: var(--font-text-lg-size);
}

/* Selector panels: loaded into the host after the form, they open above the
   composer. */
.oa-composer-panel-host {
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  z-index: 5;
  height: 0;
}
.oa-composer-panel {
  position: absolute;
  inset-inline-start: 0;
  bottom: calc(var(--spacing) * 2);
  box-sizing: border-box;
  width: min(32.5rem, calc(100vw - var(--spacing) * 8));
  max-height: min(60vh, 37.5rem);
  overflow: auto;
  padding: calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-300);
  color: var(--color-text);
  font-size: var(--font-text-sm-size);
}
.oa-composer-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  margin: 0 0 calc(var(--spacing) * 3);
}
.oa-composer-panel-title {
  margin: 0;
  font-size: var(--font-text-md-size);
  font-weight: var(--font-weight-semibold);
}
.oa-composer-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.oa-composer-panel-close:hover {
  background: var(--color-background-primary-ghost-hover);
  color: var(--color-text);
}
.oa-composer-panel-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-composer-panel-body p {
  margin: 0 0 calc(var(--spacing) * 3);
  line-height: var(--font-text-sm-line-height);
}
.oa-composer-panel-body h3 {
  margin: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 2);
  font-size: var(--font-text-sm-size);
  font-weight: var(--font-weight-semibold);
}
.oa-composer-panel-body form {
  margin: 0 0 calc(var(--spacing) * 2);
}
.oa-composer-panel-body label {
  display: block;
  margin: 0 0 calc(var(--spacing) * 1.5);
  color: var(--color-text-secondary);
  font-size: var(--font-text-xs-size);
}
.oa-composer-panel-body a {
  color: var(--color-text-primary-ghost, var(--color-text));
  font-size: var(--font-text-xs-size);
}
.oa-composer-panel-body [role="alert"] {
  color: var(--color-text-danger);
}
.oa-composer-choice {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-text-sm-size);
  text-align: start;
  white-space: normal;
  cursor: pointer;
}
.oa-composer-choice:hover {
  border-color: var(--color-border);
  background: var(--color-background-primary-ghost-hover);
}
.oa-composer-choice:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-composer-choice:disabled {
  cursor: default;
  opacity: 0.55;
}
.oa-composer-choice strong {
  display: block;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}
.oa-composer-choice small {
  display: block;
  margin-top: calc(var(--spacing) * 1);
  color: var(--color-text-secondary);
  font-size: var(--font-text-xs-size);
  overflow-wrap: anywhere;
}
.oa-composer-entry {
  display: flex;
  gap: calc(var(--spacing) * 2);
  margin: 0 0 calc(var(--spacing) * 3);
}
.oa-composer-entry input {
  flex: 1;
  min-width: 0;
  padding: calc(var(--spacing) * 2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.oa-composer-entry input:focus-visible {
  outline: none;
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-composer-entry button {
  flex: none;
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-background-composer-primary);
  color: var(--color-text-primary-solid);
  font: inherit;
  cursor: pointer;
}
.oa-composer-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  margin: 0 0 calc(var(--spacing) * 4);
  font-size: var(--font-text-xs-size);
}
.oa-composer-details dt {
  color: var(--color-text-secondary);
}
.oa-composer-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.oa-composer-note {
  color: var(--color-text-secondary);
  font-size: var(--font-text-xs-size);
}
/* A selection result loaded into the host sits just above the composer. */
.oa-composer-result {
  position: absolute;
  inset-inline-start: calc(var(--spacing) * 3);
  bottom: calc(var(--spacing) * 1);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-text-xs-size);
}

/* Status: failure messages; empty takes no space. */
.oa-composer-status {
  padding: 0 calc(var(--spacing) * 3);
  color: var(--color-text-danger-ghost, var(--color-text-secondary));
  font-size: var(--font-text-sm-size);
}
.oa-composer-status:empty {
  display: none;
}

@media (max-width: 40rem) {
  .oa-composer-dropdown,
  .oa-model-picker-trigger {
    max-width: 10rem;
    padding-inline: calc(var(--spacing) * 1.5);
    font-size: var(--font-text-xs-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oa-composer-body,
  .oa-composer-dropdown,
  .oa-model-picker-trigger,
  .oa-composer-send {
    transition: none;
  }
}

/* A selector row with nothing to offer this person takes no room (the chat
   page keeps the empty row so another chat opened in place can fill it). */
.oa-composer-selectors:has(> .oa-composer-selector-group:empty) {
  display: none;
}
.oa-composer-panel-body a.oa-composer-choice {
  color: var(--color-text);
  font-size: var(--font-text-sm-size);
  text-decoration: none;
}
}

/* static/components/content.css */
@layer components {
/*
 * Conversation content: Markdown root and its elements, code blocks, the
 * table family, source chips with favicons, and the sticky action bar.
 *
 * Ported from Apps SDK UI `Markdown.module.css` and `CodeBlock.module.css`
 * (MIT, see crates/openagents-ui/NOTICE). `spacing(n)` became
 * `calc(var(--spacing) * n)` and `alpha(c, p)` became `color-mix()`.
 *
 * `.oa-markdown` styles the plain HTML our Markdown renderer
 * (`openagents-web/src/markdown.rs`, pulldown-cmark) writes: p, h1-h6,
 * ul/ol/li, blockquote, hr, a, strong/em/del, inline `code`,
 * `pre > code`, and table/thead/tbody/tr/th/td. The builders in
 * `src/content/` emit the same structure with explicit classes.
 */

/* Component tokens, in the naming the product uses for chat surfaces. */
:where(:root) {
  --font-content: var(--font-sans);
  --markdown-font-size: var(--font-text-md-size, 1rem);
  --markdown-line-height: 1.75;
  --markdown-space: 1em;
  --markdown-code-font-size: 0.875em;
  --markdown-link-color: var(--link-primary-text-color);
  --markdown-link-color-hover: var(--link-primary-text-color-hover);
  --code-block-radius: var(--radius-xl);
  --code-block-bar-height: calc(var(--spacing) * 10);
  --sticky-action-bar-top: 0px;
  --source-height: calc(var(--spacing) * 5.5);
  --favicon-size: calc(var(--spacing) * 3);
}

/* ------------------------------------------------------------------ */
/* Markdown root                                                       */
/* ------------------------------------------------------------------ */

.oa-markdown {
  min-width: 0;
  color: var(--color-text);
  font-family: var(--font-content);
  font-size: var(--markdown-font-size);
  line-height: var(--markdown-line-height);
  overflow-wrap: anywhere;
}

.oa-markdown[data-size="sm"] {
  --markdown-font-size: var(--font-text-sm-size, 0.875rem);
  --markdown-line-height: 1.6;
}

/* A reply still streaming grows from its last render's height to the new
 * one instead of jumping (markdown-stream.js sets the heights). */
.oa-markdown[data-oa-growing] {
  overflow: hidden;
  transition: height var(--transition-duration-basic) var(--transition-ease-basic);
}

@media (prefers-reduced-motion: reduce) {
  .oa-markdown[data-oa-growing] {
    transition: none;
  }
}

/* Avoid margin collapse surprises: the first and last child sit flush. */
.oa-markdown > :first-child {
  margin-top: 0;
}

.oa-markdown > :last-child {
  margin-bottom: 0;
}

/* Headings */
.oa-markdown :is(h1, h2, h3, h4, h5, h6),
.oa-heading {
  color: var(--color-text);
  font-family: var(--font-content);
  font-weight: var(--font-weight-semibold);
}

.oa-markdown h1,
.oa-heading[data-level="1"] {
  margin: 0 0 0.5rem;
  font-size: 1.75em;
  letter-spacing: -0.04rem;
  line-height: 1.222;
}

.oa-markdown h2,
.oa-heading[data-level="2"] {
  margin: 2rem 0 1rem;
  font-size: 1.5em;
  line-height: 1.222;
}

.oa-markdown h3,
.oa-heading[data-level="3"] {
  margin: 1.125rem 0 0.625rem;
  font-size: 1.25em;
  line-height: 1.3;
}

.oa-markdown h4,
.oa-heading[data-level="4"] {
  margin: 1rem 0 0.5rem;
  font-size: 1em;
  line-height: 1.5;
}

.oa-markdown h5,
.oa-heading[data-level="5"] {
  margin: 1rem 0 0.5rem;
  font-size: 1em;
  line-height: 1.5;
}

.oa-markdown h6,
.oa-heading[data-level="6"] {
  margin: 1rem 0 0.5rem;
  font-size: 1em;
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
}

/* Paragraphs */
.oa-markdown p,
.oa-paragraph {
  margin: var(--markdown-space) 0;
  font-family: var(--font-content);
}

/* Lists */
.oa-markdown :is(ul, ol),
.oa-list {
  margin: 0.5em 0 var(--markdown-space);
  padding-left: 1.625em;
}

.oa-markdown ul,
.oa-list[data-variant="unordered"] {
  list-style-type: disc;
}

.oa-markdown ol,
.oa-list[data-variant="ordered"] {
  list-style-type: decimal;
}

.oa-markdown li,
.oa-list-item {
  min-height: 1.5em;
  margin: 0.5em 0;
  padding-left: 0.375em;
}

.oa-markdown li::marker,
.oa-list-item::marker {
  color: var(--color-text-secondary);
  font-size: 1em;
  font-weight: var(--font-weight-medium);
}

.oa-markdown li > :first-child,
.oa-list-item > :first-child {
  margin-top: 0;
  margin-bottom: 0;
}

.oa-markdown li :is(ul, ol),
.oa-list-item .oa-list {
  margin-top: 0.25em;
}

/* Emphasis */
.oa-markdown strong {
  font-weight: var(--font-weight-semibold);
}

.oa-markdown em {
  font-style: italic;
}

.oa-markdown del {
  color: var(--color-text-secondary);
}

/* Links: the renderer only keeps http, https, mailto, site paths and anchors. */
.oa-markdown a,
.oa-link {
  border-radius: var(--radius-sm);
  color: var(--markdown-link-color);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentcolor 40%, transparent);
  text-underline-offset: 0.15em;
  transition: color var(--transition-duration-basic, 150ms) var(--transition-ease-basic, ease);
}

.oa-markdown a:hover,
.oa-link:hover {
  color: var(--markdown-link-color-hover);
}

.oa-markdown a:focus-visible,
.oa-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
}

/* Images: the renderer only keeps the site's own files. */
.oa-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Quotes */
.oa-markdown blockquote {
  position: relative;
  margin: var(--markdown-space) 0;
  padding: 0.25em 0 0.25rem calc(var(--spacing) * 6);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-normal);
}

.oa-markdown blockquote::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 0.25rem;
  border-radius: var(--radius-2xs);
  background: light-dark(var(--alpha-15), var(--alpha-20));
  content: "";
}

.oa-markdown blockquote p {
  margin: 0.5em 0 0;
}

.oa-markdown blockquote p:first-child {
  margin-top: 0;
}

/* Dividers */
.oa-markdown hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid var(--alpha-10);
}

/* ------------------------------------------------------------------ */
/* Inline code                                                         */
/* ------------------------------------------------------------------ */

.oa-markdown :not(pre) > code,
.oa-inline-code {
  padding: 1px 0.3rem;
  border-radius: 0.25rem;
  background-color: light-dark(var(--alpha-04), var(--alpha-10));
  box-shadow: inset 0 0 0 1px var(--alpha-08);
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--markdown-code-font-size);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Code blocks                                                         */
/* ------------------------------------------------------------------ */

/* The surface: the builder's `.oa-code-block`, or a bare `pre` from the
 * renderer. `contain: inline-size` keeps a long line from widening the
 * conversation column; the content scrolls instead. */
.oa-code-block,
.oa-markdown pre {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: var(--markdown-space) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--code-block-radius);
  background-color: var(--codeblock-background-color);
  contain: inline-size;
  overflow: clip;
}

.oa-markdown .oa-code-block pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  contain: none;
  overflow: visible;
}

.oa-code-block__pane,
.oa-markdown pre {
  overflow-x: auto;
}

.oa-code-block__pane:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: -2px;
}

.oa-code-block__pre {
  margin: 0;
}

/* The content: monospace, never wrapped, scrolled sideways. */
.oa-code-block__code,
.oa-markdown pre > code {
  --syntax1: var(--codeblock-syntax-1);
  --syntax2: var(--codeblock-syntax-2);
  --syntax3: var(--codeblock-syntax-3);
  --syntax4: var(--codeblock-syntax-4);
  --syntax5: var(--codeblock-syntax-5);

  display: block;
  min-width: max-content;
  margin: 0;
  padding: 14px 16px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--markdown-code-font-size);
  font-weight: var(--font-weight-normal);
  line-height: 1.5em;
  tab-size: 4;
  white-space: pre;
  overflow-wrap: normal;
}

.oa-code-block[data-wrap] .oa-code-block__code {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Prism-style token classes from a highlighter. */
.oa-code-block__code :is(.token.property, .token.variable, .token.attr-name, .token.unit, .token.id, .token.selector, .token.entity, .token.tag, .token.type) {
  color: var(--syntax4);
}

.oa-code-block__code :is(.token.url, .token.boolean, .token.number, .token.important) {
  color: var(--syntax5);
}

.oa-code-block__code :is(.token.builtin, .token.function, .token.class-name) {
  color: var(--syntax1);
}

.oa-code-block__code :is(.token.keyword, .token.constant, .token.symbol, .token.deleted) {
  color: var(--syntax2);
}

.oa-code-block__code :is(.token.string, .token.char, .token.regex, .token.attr-value, .token.inserted) {
  color: var(--syntax3);
}

.oa-code-block__code :is(.token.comment, .token.prolog, .token.doctype, .token.cdata) {
  color: color-mix(in oklab, var(--color-text) 50%, transparent);
}

.oa-code-block__code :is(.token.punctuation, .token.operator) {
  color: color-mix(in oklab, var(--color-text) 60%, transparent);
}

/* ------------------------------------------------------------------ */
/* Sticky action bar (a code block's header, or any content toolbar)   */
/* ------------------------------------------------------------------ */

.oa-sticky-action-bar {
  position: sticky;
  top: var(--sticky-action-bar-top);
  z-index: 1;
  display: flex;
  min-height: var(--code-block-bar-height);
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  padding: 0 calc(var(--spacing) * 2) 0 calc(var(--spacing) * 4);
  background-color: var(--codeblock-background-color);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-text-sm-size, 0.875rem);
  line-height: var(--font-text-sm-line-height, 1.25rem);
  user-select: none;
}

.oa-code-block > .oa-sticky-action-bar {
  border-bottom: 1px solid var(--color-border-subtle);
}

.oa-sticky-action-bar__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oa-sticky-action-bar__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  margin-inline-start: auto;
}

/* An icon-only copy button right after an inline command in prose. */
.oa-markdown .oa-inline-copy {
  margin-inline-start: 2px;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

/* Builder tables: container > scroller > table. Long tables scroll
 * sideways inside the scroller, never the page. */
.oa-table-container {
  width: 100%;
  min-width: 0;
  margin: var(--markdown-space) 0;
}

.oa-table-scroller {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.oa-table-scroller:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* The renderer writes a bare `table`; as a scrolling block it behaves
 * like the scroller above with no extra markup. */
.oa-markdown table {
  display: block;
  width: 100%;
  margin: 2em 0;
  overflow-x: auto;
}

.oa-table,
.oa-markdown table {
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-content);
  font-size: 0.875em;
  line-height: 1.7142857;
  table-layout: auto;
  /* Keep whole words together so a wide table scrolls instead of
   * breaking every cell into letters. */
  overflow-wrap: break-word;
}

.oa-table {
  width: 100%;
  margin: 0;
}

.oa-table th,
.oa-markdown th {
  padding: calc(var(--spacing) * 2);
  border: 0;
  border-bottom: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-text-sm-line-height, 1.25rem);
  text-align: start;
  vertical-align: bottom;
}

.oa-table td,
.oa-markdown td {
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.oa-table :is(th, td):first-child,
.oa-markdown :is(th, td):first-child {
  padding-inline-start: 0;
}

.oa-table :is(th, td):last-child,
.oa-markdown :is(th, td):last-child {
  padding-inline-end: 0;
}

.oa-table tbody tr:last-child td,
.oa-markdown tbody tr:last-child td {
  border-bottom: 0;
}

.oa-table [data-numeric] {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.oa-table [data-col-size="sm"] {
  min-width: 6rem;
}

.oa-table [data-col-size="md"] {
  min-width: 10rem;
}

.oa-table [data-col-size="lg"] {
  min-width: 16rem;
}

/* ------------------------------------------------------------------ */
/* Source chips and favicons                                           */
/* ------------------------------------------------------------------ */

.oa-favicon {
  display: inline-flex;
  width: var(--favicon-size);
  height: var(--favicon-size);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-background-secondary-soft-alpha);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: calc(var(--favicon-size) * 0.7);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-transform: uppercase;
}

.oa-favicon > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oa-source {
  display: inline-flex;
  max-width: 100%;
  height: var(--source-height);
  align-items: center;
  gap: calc(var(--spacing) * 1);
  padding: 0 calc(var(--spacing) * 2);
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-background-secondary-soft-alpha);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color var(--transition-duration-basic, 150ms) var(--transition-ease-basic, ease);
}

a.oa-source:hover {
  background-color: var(--color-background-secondary-soft-alpha-hover);
  color: var(--color-text);
}

a.oa-source:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
}

.oa-source__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oa-source__extra {
  color: var(--color-text-tertiary);
}

/* Leading: a favicon and the site name, larger, for a source list. */
.oa-source[data-variant="leading"] {
  --favicon-size: calc(var(--spacing) * 4);

  height: auto;
  min-height: calc(var(--spacing) * 8);
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3) calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  font-size: var(--font-text-sm-size, 0.875rem);
}

.oa-markdown .oa-source {
  margin-inline: calc(var(--spacing) * 0.5);
}
}

/* static/components/dialog.css */
@layer components {
/*
 * Dialog. A native <dialog> opened with showModal() (by an invoker button's
 * command="show-modal", or by overlays.js where invoker commands are
 * missing) and closed by Escape, its close form (method="dialog"), or a
 * backdrop click. Sizes and backdrop use the Apps SDK UI --dialog-* tokens
 * (MIT, see NOTICE); the surface matches popover.css.
 */

.oa-dialog {
  box-sizing: border-box;
  width: calc(100vw - 32px);
  min-width: min(var(--dialog-min-width), calc(100vw - 32px));
  max-width: min(var(--dialog-max-width), calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-2xl, var(--popover-radius));
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow), var(--shadow-hairline);
  color: var(--color-text);

  &[data-size="sm"] {
    --dialog-max-width: 360px;
  }

  &[data-size="lg"] {
    --dialog-max-width: 640px;
  }

  &::backdrop {
    background: var(--dialog-backdrop-dim-background);
  }

  &:focus {
    outline: none;
  }
}

/* Fills the dialog so a click on the dialog element itself is a backdrop click. */
.oa-dialog-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  padding: var(--dialog-container-inner-padding);
}

.oa-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
}

.oa-dialog-title {
  margin: 0;
  font-size: var(--font-heading-xs-size, 1.125rem);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-heading-xs-line-height, 1.4);
}

.oa-dialog-description {
  margin: 0;
  color: var(--color-text-secondary);
}

.oa-dialog-close-form {
  margin: calc(var(--spacing) * -1) calc(var(--spacing) * -1) 0 0;
}

.oa-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size-sm);
  height: var(--control-size-sm);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;

  &:hover {
    background: var(--color-background-primary-ghost-hover);
    color: var(--color-text);
  }

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

.oa-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 2);
}

/* Enter and exit, the Popover transition values. */
@supports selector(:modal) {
  .oa-dialog {
    opacity: 0;
    transform: scale(0.95);
    transition-behavior: allow-discrete;
    transition-duration: 0.2s;
    transition-property: opacity, transform, overlay, display;
    transition-timing-function: var(--cubic-exit);

    &::backdrop {
      opacity: 0;
      transition-behavior: allow-discrete;
      transition-duration: 0.2s;
      transition-property: opacity, overlay, display;
    }

    &[open] {
      opacity: 1;
      transform: scale(1);
      transition-duration: 0.35s;
      transition-timing-function: var(--cubic-enter);

      &::backdrop {
        opacity: 1;
      }
    }
  }

  @starting-style {
    .oa-dialog[open] {
      opacity: 0;
      transform: scale(0.95);
    }

    .oa-dialog[open]::backdrop {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .oa-dialog,
  .oa-dialog::backdrop {
    transition: none;
  }
}
}

/* static/components/empty-message.css */
@layer components {
/* Ported from Apps SDK UI (src/components/EmptyMessage/EmptyMessage.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &[data-fill="static"] {
    width: 100%;
    height: 100%;
  }

  &[data-fill="absolute"] {
    position: absolute;
    inset: 0;
  }
}

.oa-empty-message-icon {
  --badge-size: 40px;
  --icon-size: 24px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: var(--radius-md);
  margin: 0 0 12px;
  background: var(--badge-background-color);
  color: var(--badge-text-color);

  svg {
    width: var(--icon-size);
    height: var(--icon-size);
  }

  &[data-size="sm"] {
    --badge-size: 32px;
    --icon-size: 20px;
  }

  &[data-color="secondary"] {
    --badge-background-color: var(--color-background-secondary-soft);
    --badge-text-color: var(--color-text-secondary-soft);
  }

  &[data-color="warning"] {
    --badge-background-color: var(--color-background-warning-soft);
    --badge-text-color: var(--color-text-warning-soft);
  }

  &[data-color="danger"] {
    --badge-background-color: var(--color-background-danger-soft);
    --badge-text-color: var(--color-text-danger-soft);
  }
}

.oa-empty-message-title {
  max-width: 90%;
  color: var(--color-text);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  text-wrap: balance;

  &:where([data-color="danger"]) {
    color: var(--color-text-danger);
  }

  &:where([data-color="warning"]) {
    color: var(--color-text-warning);
  }
}

.oa-empty-message-description {
  max-width: 90%;
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.oa-empty-message-action-row {
  margin-top: calc(var(--spacing) * 4);
}
}

/* static/components/field.css */
@layer components {
/*
 * Field: label, description and error around one control or a group.
 * Typography follows Apps SDK UI form usage (MIT, see NOTICE).
 */
.oa-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.oa-field__label {
  display: block;
  padding: 0;
  color: var(--color-text);
  font-size: var(--font-text-sm-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-text-sm-line-height);
}

.oa-field__required {
  margin-left: 2px;
  color: var(--color-text-danger);
}

.oa-field__optional {
  margin-left: 4px;
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-normal);
}

.oa-field__description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  line-height: var(--font-text-sm-line-height);
}

.oa-field__error {
  margin: 0;
  color: var(--color-text-danger);
  font-size: var(--font-text-sm-size);
  line-height: var(--font-text-sm-line-height);
}
}

/* static/components/icon.css */
@layer components {
/* Icons: inline SVG emitted by openagents_ui::icons::Icon.
   Sizes port the Apps SDK UI icon-* utilities (MIT, see NOTICE).
   One rule set covers every icon, so unused icons add nothing here. */

.oa-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.oa-icon[data-size="xs"] {
  width: var(--control-icon-size-xs, 0.875rem);
  height: var(--control-icon-size-xs, 0.875rem);
}

.oa-icon[data-size="sm"] {
  width: var(--control-icon-size-sm, 1rem);
  height: var(--control-icon-size-sm, 1rem);
}

.oa-icon[data-size="md"] {
  width: var(--control-icon-size-md, 1.125rem);
  height: var(--control-icon-size-md, 1.125rem);
}

.oa-icon[data-size="lg"] {
  width: var(--control-icon-size-lg, 1.25rem);
  height: var(--control-icon-size-lg, 1.25rem);
}

.oa-icon[data-size="xl"] {
  width: var(--control-icon-size-xl, 1.375rem);
  height: var(--control-icon-size-xl, 1.375rem);
}

.oa-icon[data-size="2xl"] {
  width: var(--control-icon-size-2xl, 1.5rem);
  height: var(--control-icon-size-2xl, 1.5rem);
}
}

/* static/components/image.css */
@layer components {
/* Ported from Apps SDK UI (src/components/Image/Image.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-image {
  opacity: 0;
  transition: opacity 0.3s var(--transition-ease-basic);

  &[data-loaded] {
    opacity: 1;
  }
}
}

/* static/components/indicator.css */
@layer components {
/* Ported from Apps SDK UI (src/components/Indicator/LoadingIndicator.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-loading-indicator {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  position: relative;
  width: var(--indicator-size, 1em);
  height: var(--indicator-size, 1em);
  animation: oa-indicator-rotate var(--indicator-rotate-duration, 0.8s) linear infinite;
  transition: opacity 0.15s ease;

  &::before {
    position: absolute;
    inset: 0;
    display: block;
    border: var(--indicator-stroke, 2px) solid var(--indicator-color, currentcolor);
    border-radius: 50%;
    content: "";
    mask-image: conic-gradient(rgb(0 0 0 / 0%), rgb(0 0 0));
  }

  &::after {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: var(--indicator-stroke, 2px);
    height: var(--indicator-stroke, 2px);
    border-radius: 100%;
    margin-left: calc(var(--indicator-stroke, 2px) * -1 / 2);
    background-color: var(--indicator-color, currentcolor);
    content: "";
  }
}

@keyframes oa-indicator-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(1turn);
  }
}

/* Ported from Apps SDK UI (src/components/Indicator/LoadingDots.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-loading-dots {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  /* Match line-height of message to avoid reflow when swapped with text */
  height: var(--font-text-md-line-height);
}

.oa-loading-dots-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  animation: oa-loading-dots-pulse 1s infinite both;
  background-color: currentcolor;

  &:nth-child(2) {
    animation-delay: 0.2s;
  }

  &:nth-child(3) {
    animation-delay: 0.4s;
  }
}

@keyframes oa-loading-dots-pulse {
  0% {
    opacity: 0.15;
  }

  20% {
    opacity: 0.4;
  }

  100% {
    opacity: 0.15;
  }
}

/* Ported from Apps SDK UI (src/components/Indicator/CircularProgress.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-circular-progress {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  position: relative;
  width: var(--circular-progress-size, 28px);
  height: var(--circular-progress-size, 28px);

  circle {
    stroke-width: var(--circular-progress-stroke, 2px);
  }
}

.oa-circular-progress-track {
  position: absolute;
  top: 0;
  left: 0;
  stroke: var(--circular-progress-track-color, light-dark(#deede9, var(--green-a50)));
  transition: stroke 0.15s ease;
}

.oa-circular-progress-track-progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  stroke: var(--circular-progress-track-active-color, var(--green-500));
  stroke-dasharray: 50px;
  stroke-dashoffset: 50px;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.3s ease;
  will-change: transform;
}

/* A spinner and its words, always on one row (Busy). */
.oa-busy {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  color: var(--color-text-secondary);
}
.oa-busy-text {
  white-space: nowrap;
}
}

/* static/components/input.css */
@layer components {
/*
 * Input. Ported from Apps SDK UI `Input.module.css` (MIT, see NOTICE).
 * `.oa-input` is the container (variant, size, adornments); `.oa-input__control`
 * is the native <input>. Focus uses :focus-within instead of a JS flag.
 */
.oa-input {
  display: flex;
  align-items: center;
  gap: var(--input-gap);
  width: 100%;
  border-radius: var(--input-radius);
  color: var(--input-text-color);
  cursor: text;
  /* Whenever this is not 16px on mobile, zooming occurs. */
  font-size: var(--input-font-size);
  font-weight: var(--font-weight-normal);
  transition-duration: var(--transition-duration-basic);
  transition-property: color, box-shadow, background-color;
  transition-timing-function: var(--transition-ease-basic);
}

.oa-input:where([data-optically-align="start"]) {
  margin-inline-start: calc(var(--input-gutter) * -1);
}

.oa-input:where([data-optically-align="end"]) {
  margin-inline-end: calc(var(--input-gutter) * -1);
}

/* Outline variant */
.oa-input:where([data-variant="outline"]) {
  box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
}

@media (hover: hover) and (pointer: fine) {
  .oa-input:where([data-variant="outline"]):not([data-disabled]):hover {
    box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
  }
}

.oa-input:where([data-variant="outline"]):not([data-disabled]):focus-within {
  box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
}

.oa-input:where([data-variant="outline"]):not([data-disabled])[data-invalid] {
  box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
}

/* Soft variant */
.oa-input:where([data-variant="soft"]) {
  background-color: var(--input-soft-background-color);
}

.oa-input:where([data-variant="soft"]):not([data-disabled]):focus-within {
  box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
}

.oa-input:where([data-variant="soft"]):not([data-disabled])[data-invalid] {
  box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
}

.oa-input[data-invalid] ::selection {
  background-color: var(--red-a50);
}

/* Sizes */
.oa-input:where([data-size="3xs"]) {
  --input-size: var(--control-size-3xs);
  --input-font-size: var(--control-font-size-sm);
  --input-radius: var(--control-radius-sm);
  --input-gutter: var(--control-gutter-xs);
  --input-gap: var(--input-gap-xs);
  --input-adornment-offset: -1px;
}

.oa-input:where([data-size="2xs"]) {
  --input-size: var(--control-size-2xs);
  --input-font-size: var(--control-font-size-sm);
  --input-radius: var(--control-radius-sm);
  --input-gutter: var(--control-gutter-xs);
  --input-gap: var(--input-gap-xs);
  --input-adornment-offset: -1px;
}

.oa-input:where([data-size="xs"]) {
  --input-size: var(--control-size-xs);
  --input-font-size: var(--control-font-size-md);
  --input-radius: var(--control-radius-sm);
  --input-gutter: var(--control-gutter-xs);
  --input-gap: var(--input-gap-sm);
  --input-adornment-offset: -1px;
}

.oa-input:where([data-size="sm"]) {
  --input-size: var(--control-size-sm);
  --input-font-size: var(--control-font-size-md);
  --input-radius: var(--control-radius-md);
  --input-gutter: var(--control-gutter-sm);
  --input-gap: var(--input-gap-md);
  --input-adornment-offset: -1px;
}

.oa-input:where([data-size="md"]) {
  --input-size: var(--control-size-md);
  --input-font-size: var(--control-font-size-md);
  --input-radius: var(--control-radius-md);
  --input-gutter: var(--control-gutter-md);
  --input-gap: var(--input-gap-md);
}

.oa-input:where([data-size="lg"]) {
  --input-size: var(--control-size-lg);
  --input-font-size: var(--control-font-size-md);
  --input-radius: var(--control-radius-md);
  --input-gutter: var(--control-gutter-md);
  --input-gap: var(--input-gap-md);
}

.oa-input:where([data-size="xl"]) {
  --input-size: var(--control-size-xl);
  --input-font-size: var(--control-font-size-lg);
  --input-radius: var(--control-radius-lg);
  --input-gutter: var(--control-gutter-lg);
  --input-gap: var(--input-gap-lg);
}

.oa-input:where([data-size="2xl"]) {
  --input-size: var(--control-size-2xl);
  --input-font-size: var(--control-font-size-lg);
  --input-radius: var(--control-radius-xl);
  --input-gutter: var(--control-gutter-xl);
  --input-gap: var(--input-gap-lg);
  --input-adornment-offset: -4px;
}

.oa-input:where([data-size="3xl"]) {
  --input-size: var(--control-size-3xl);
  --input-font-size: var(--control-font-size-lg);
  --input-radius: var(--control-radius-xl);
  --input-gutter: var(--control-gutter-xl);
  --input-gap: var(--input-gap-lg);
  --input-adornment-offset: -4px;
}

/* Gutter sizes */
.oa-input:where([data-gutter-size="2xs"]) {
  --input-gutter: var(--control-gutter-2xs);
  --input-adornment-offset: -1px;
}

.oa-input:where([data-gutter-size="xs"]) {
  --input-gutter: var(--control-gutter-xs);
  --input-adornment-offset: -1px;
}

.oa-input:where([data-gutter-size="sm"]) {
  --input-gutter: var(--control-gutter-sm);
  --input-adornment-offset: -2px;
}

.oa-input:where([data-gutter-size="md"]) {
  --input-gutter: var(--control-gutter-md);
  --input-adornment-offset: -2px;
}

.oa-input:where([data-gutter-size="lg"]) {
  --input-gutter: var(--control-gutter-lg);
  --input-adornment-offset: -2px;
}

.oa-input:where([data-gutter-size="xl"]) {
  --input-gutter: var(--control-gutter-xl);
  --input-adornment-offset: -4px;
}

/* Pill */
.oa-input:where([data-pill]) {
  --input-radius: var(--radius-full);
}

/* Disabled */
.oa-input[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* When adornments are present, the gutter moves to the container. */
.oa-input:where([data-has-start-adornment]) {
  padding-left: var(--input-gutter);
}

.oa-input:where([data-has-start-adornment][data-pill]) {
  padding-left: calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
}

.oa-input:where([data-has-end-adornment]) {
  padding-right: var(--input-gutter);
}

.oa-input:where([data-has-end-adornment][data-pill]) {
  padding-right: calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
}

.oa-input > :first-child:not(input) {
  margin-left: var(--input-adornment-offset, -2px);
}

.oa-input > :last-child:not(input) {
  margin-right: var(--input-adornment-offset, -2px);
}

.oa-input__adornment {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.oa-input__separator {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.oa-input__control {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--input-size);
  /* Padding is intrinsic to the control when no adornments are present (autofill extensions rely on it). */
  padding: 0 var(--input-gutter);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.oa-input__control:focus {
  outline: 0;
}

.oa-input__control:disabled {
  cursor: not-allowed;
}

.oa-input__control::placeholder {
  color: var(--input-placeholder-text-color);
}

.oa-input__control:-webkit-autofill,
.oa-input__control:-webkit-autofill:focus,
.oa-input__control:-webkit-autofill:hover {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  /* Delay the user-agent autofill colors for a very long time; their specificity cannot be beaten. */
  transition:
    background-color 0s 50000s,
    box-shadow 0s 50000s,
    filter 0s 50000s !important;
}

/* Prevent strange autofill size adjustments */
.oa-input__control:-webkit-autofill::first-line {
  font-size: inherit !important;
  transition: font-size 0s 50000s !important;
}

/* Hide number spinners */
.oa-input__control[type="number"] {
  appearance: textfield;
}

.oa-input__control[type="number"]::-webkit-outer-spin-button,
.oa-input__control[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

/* Native date inputs: keep the picker indicator, tinted to the text color. */
.oa-input__control[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

/* Dynamic pill spacing */
:where(.oa-input[data-pill]) .oa-input__control {
  padding: 0 calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
}

:where(.oa-input[data-has-start-adornment]) .oa-input__control {
  padding-left: 0;
}

:where(.oa-input[data-has-end-adornment]) .oa-input__control {
  padding-right: 0;
}

/* Date range: two native inputs share one container. */
.oa-input:where([data-range]) .oa-input__control {
  flex: 1 1 0;
}

.oa-input:where([data-range]) .oa-input__control:first-child {
  padding-right: 0;
}

.oa-input:where([data-range]) .oa-input__control:last-child {
  padding-left: 0;
}
}

/* static/components/link-card.css */
@layer components {
/* Link cards (content/link_card.rs): rectangular "learn about" cards where
   the whole card is one link. One column at phone width, two at tablet
   width, three where the column allows; the frame is a size container so
   the grid follows the space it is given. Colors come from the semantic
   tokens, which resolve through light-dark(), so the cards follow Coder
   Light and Coder Noir. */

.oa-link-cards-frame {
  container-type: inline-size;
  width: 100%;
}

.oa-link-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@container (min-width: 28rem) {
  .oa-link-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .oa-link-card {
    min-height: calc(var(--spacing) * 28);
  }
}

@container (min-width: 42rem) {
  .oa-link-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.oa-link-cards__item {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.oa-link-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--spacing) * 1.5);
  box-sizing: border-box;
  min-width: 0;
  padding: calc(var(--spacing) * 4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.oa-link-card:hover {
  border-color: var(--color-border-primary-outline-hover);
  background: var(--color-background-primary-ghost-hover);
}

.oa-link-card:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.oa-link-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  margin-bottom: auto;
  border-radius: var(--radius-lg);
  background: light-dark(var(--gray-100), var(--gray-200));
  color: var(--color-text);
}

.oa-link-card__title {
  padding-top: calc(var(--spacing) * 3);
  color: var(--color-text);
  font-size: var(--font-text-md-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.oa-link-card__description {
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .oa-link-card {
    transition: none;
  }
}
}

/* static/components/menu.css */
@layer components {
/*
 * Menu. Ported from Apps SDK UI Menu.module.css (MIT, see NOTICE). The list
 * is a native popover; the shared box reset, placement and transition live
 * in popover.css. Highlight follows [data-highlighted] (set by overlays.js
 * on keyboard and pointer focus) and plain :hover, so the menu reads the
 * same without JavaScript.
 */

.oa-menu-list {
  overflow: auto;
  box-sizing: border-box;
  width: var(--menu-width, auto);
  min-width: var(--menu-min-width, 300px);
  max-width: calc(100vw - 16px);
  max-height: min(calc(100dvh - 16px), var(--menu-max-height, 1200px));
  padding: var(--menu-gutter);
  border-radius: var(--menu-radius);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow), var(--shadow-hairline);
  color: var(--color-text);
  font-size: var(--menu-font-size);
  line-height: var(--menu-line-height);
  -webkit-overflow-scrolling: touch;

  &:focus {
    outline: none;
  }
}

.oa-menu-item {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--menu-item-padding);
  border: 0;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  text-align: start;
  text-decoration: none;
  user-select: none;

  &:focus {
    outline: none;
  }

  &:hover {
    /* Prevent links from changing colors */
    color: var(--color-text);
  }

  &::before {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
    background: var(--menu-item-background-color);
    content: "";
    opacity: 0;
    transform: scale(var(--scale, 0.98));
    transition-duration: var(--transition-duration-basic);
    transition-property: opacity, background-color, transform;
    transition-timing-function: var(--cubic-enter);
    will-change: opacity, transform;
  }

  &[data-state="open"],
  &[data-highlighted],
  &:focus-visible,
  &:hover {
    &::before {
      opacity: 1;
      transform: scale(1);
    }

    &:active::before {
      transform: scale(var(--scale, 0.98));
    }
  }

  &[data-disabled] {
    cursor: not-allowed;
    opacity: 0.5;

    &::before {
      display: none;
    }
  }
}

/* PressableInner: keeps the content above the highlight layer. */
.oa-menu-item-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--menu-item-gap);
}

.oa-menu-item-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.oa-menu-item-label {
  flex: 1;
  min-width: 0;
}

.oa-menu-check {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--menu-checkbox-indicator-size);
  height: var(--menu-checkbox-indicator-size);
  opacity: 0;
}

[aria-checked="true"] > .oa-menu-item-inner > .oa-menu-check {
  animation: oa-menu-fade-in 0.4s var(--cubic-enter);
  opacity: 1;
}

.oa-menu-separator {
  height: 1px;
  margin: var(--menu-separator-gutter);
  background: var(--menu-separator-background-color);
}

.oa-menu-heading {
  padding: var(--menu-item-padding);
  color: var(--color-text-secondary);
}

@keyframes oa-menu-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
}

/* static/components/page.css */
@layer components {
/*
 * Document pages: the reading column inside a scrolling shell, its eyebrow,
 * lead and meta lines, action rows, cards, item lists, the facts grid, the
 * server-drawn bar chart, and a framed canvas panel. Builders live in
 * `src/content/page.rs`; prose inside the column is styled by
 * `.oa-markdown` (content.css).
 */

.oa-page {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding: calc(var(--spacing) * 10) calc(var(--spacing) * 4) calc(var(--spacing) * 6);
}

.oa-page[data-width="wide"] {
  max-width: 64rem;
}

/*
 * A short page centered in the main area (an empty state, the log in
 * card): the column fills the workspace's height (a flex column) and
 * centers its content, with even padding above and below.
 */
.oa-page[data-align="center"] {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--spacing) * 8);
}

.oa-page[data-align="center"] > .oa-empty-message[data-fill="static"] {
  height: auto;
}

.oa-page .oa-page-eyebrow,
.oa-page-eyebrow {
  margin: 0 0 calc(var(--spacing) * 2);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  font-weight: var(--font-weight-medium);
}

.oa-page .oa-page-lead,
.oa-page-lead {
  color: var(--color-text-secondary);
  font-size: var(--font-text-lg-size);
  line-height: var(--font-text-lg-line-height);
}

.oa-page .oa-page-meta,
.oa-page-meta {
  color: var(--color-text-tertiary);
  font-size: var(--font-text-sm-size);
}

.oa-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) * 4) 0;
}

/* A command to type, with its Copy button beside it (Connect your
   terminal). Long commands wrap instead of running off the page. */
.oa-terminal-command {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  margin: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 5);
}

.oa-terminal-command pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A short inline form: a label, a field, and its button. */
.oa-terminal-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) * 4) 0;
}

/* A form under a page's intro text, set off from it. */
.oa-page-form {
  margin-top: calc(var(--spacing) * 6);
}

.oa-page-section {
  margin-top: calc(var(--spacing) * 10);
}

.oa-card {
  margin: calc(var(--spacing) * 6) 0;
  padding: calc(var(--spacing) * 5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.oa-card > :first-child {
  margin-top: 0;
}

.oa-card > :last-child {
  margin-bottom: 0;
}

.oa-markdown .oa-item-list,
.oa-item-list {
  margin: calc(var(--spacing) * 4) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-subtle);
}

.oa-markdown .oa-item-list > li,
.oa-item-list > li {
  margin: 0;
  padding: calc(var(--spacing) * 3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.oa-item-list > li > :first-child {
  margin-top: 0;
}

.oa-item-list > li > :last-child {
  margin-bottom: 0;
}

.oa-markdown .oa-item-title,
.oa-item-title {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.oa-disclosure {
  margin: calc(var(--spacing) * 6) 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
}

.oa-disclosure > summary {
  cursor: pointer;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.oa-disclosure[open] > summary {
  margin-bottom: calc(var(--spacing) * 3);
}

.oa-disclosure > summary:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.oa-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: calc(var(--spacing) * 3);
  margin: calc(var(--spacing) * 6) 0;
}

.oa-facts > div {
  min-width: 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.oa-facts dt {
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
}

.oa-facts dd {
  margin: calc(var(--spacing) * 1) 0 0;
  color: var(--color-text);
  font-size: var(--font-text-lg-size);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.oa-chart {
  margin: 0 0 calc(var(--spacing) * 6);
}

.oa-chart svg {
  display: block;
  width: 100%;
  height: 4rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.oa-chart-slot {
  fill: transparent;
}

.oa-chart-bar {
  fill: var(--color-text-secondary);
}

.oa-chart g:hover .oa-chart-bar {
  fill: var(--color-text);
}

.oa-chart figcaption {
  margin: calc(var(--spacing) * 2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
}

.oa-canvas-panel {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 3);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.oa-canvas-panel canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.oa-markdown .oa-event-list,
.oa-event-list {
  margin: calc(var(--spacing) * 3) 0 calc(var(--spacing) * 6);
  padding: 0;
  list-style: none;
  font-size: var(--font-text-sm-size);
}

.oa-markdown .oa-event-list > li,
.oa-event-list > li {
  margin: 0;
  padding: calc(var(--spacing) * 1.5) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .oa-page {
    padding-top: calc(var(--spacing) * 6);
  }

  .oa-canvas-panel {
    aspect-ratio: 1 / 1;
  }
}

/* The log in and sign up card: a narrow centered stack. */
.oa-sign-in {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  max-width: 24rem;
  margin: calc(var(--spacing) * 16) auto 0;
  text-align: center;
}

.oa-page[data-align="center"] > .oa-sign-in {
  width: 100%;
  margin-block: 0;
}

.oa-sign-in h1 {
  margin: 0;
}

.oa-sign-in .oa-page-meta {
  margin: 0;
}

/*
 * Settings: a title, then groups of rows. Each row has its label and hint
 * on the left and its control on the right, with a rule between rows.
 */
.oa-settings > h1 {
  margin: 0 0 calc(var(--spacing) * 8);
}

.oa-settings-group {
  margin: 0 0 calc(var(--spacing) * 8);
}

.oa-settings-group > h2 {
  margin: 0 0 calc(var(--spacing) * 2);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  font-weight: var(--font-weight-medium);
}

.oa-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  min-height: calc(var(--spacing) * 14);
  padding: calc(var(--spacing) * 3) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.oa-settings-row + .oa-settings-row {
  border-top: 0;
}

.oa-settings-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
}

.oa-settings-label {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.oa-settings-hint {
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
}

.oa-settings-who {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-width: 0;
}

.oa-settings-control {
  display: flex;
  flex: none;
  align-items: center;
}
}

/* static/components/plugin-card.css */
@layer components {
/* Plugin cards (content/plugin_card.rs, docs/web/plugin-card.md): our real
   plugins inline in a chat answer. One column at phone width, more as the
   thread widens. Colors come from the semantic tokens, which resolve
   through light-dark(), so the cards follow Coder Light and Coder Noir. */

.oa-plugin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: calc(var(--spacing) * 3);
  margin: calc(var(--spacing) * 3) 0 0;
  padding: 0;
  list-style: none;
}

.oa-plugin-cards__item {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.oa-plugin-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  box-sizing: border-box;
  min-width: 0;
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-elevated);
  color: var(--color-text);
}

.oa-plugin-card__head {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  min-width: 0;
}

.oa-plugin-card__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  border-radius: var(--radius-lg);
  background: light-dark(var(--gray-100), var(--gray-200));
  color: var(--color-text);
}

.oa-plugin-card__name {
  margin: 0;
  min-width: 0;
  color: var(--color-text);
  font-size: var(--font-text-md-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.oa-plugin-card__summary {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  line-height: 1.45;
}

.oa-plugin-card__where {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-text-xs-size);
}

.oa-plugin-card__action {
  display: flex;
  margin-top: auto;
  padding-top: calc(var(--spacing) * 1);
}
}

/* static/components/popover.css */
@layer components {
/*
 * Popover surface shared by every overlay in crates/openagents-ui (UI-05).
 * Ported from Apps SDK UI Popover.module.css and Transition (MIT, see
 * NOTICE). Shown and light-dismissed by the native Popover API; placed next
 * to its trigger with CSS anchor positioning (the invoker is the popover's
 * implicit anchor), or by static/components/overlays.js where anchor
 * positioning is missing. Enter and exit use @starting-style in place of the
 * React Transition component.
 */

.oa-overlay-root {
  display: contents;
}

/* Bare trigger when no button class is supplied. */
.oa-overlay-trigger {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.oa-overlay-trigger:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Reset the user-agent [popover] box for every overlay panel. Zero
   specificity, so each component's own file (bundled in any order) wins. */
:where(.oa-popover, .oa-menu-list, .oa-select-list, .oa-tooltip) {
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text);
}

.oa-popover {
  overflow: auto;
  width: var(--popover-width, auto);
  min-width: var(--popover-min-width, 300px);
  max-width: min(var(--popover-max-width, 700px), calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  border-radius: var(--popover-radius);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow), var(--shadow-hairline);
  -webkit-overflow-scrolling: touch;

  &:focus {
    outline: none;
  }

  &[data-animate="shake"] {
    animation: oa-shake 0.4s ease;
  }
}

/* Placed by script: hidden for the frame before overlays.js measures it. */
[data-oa-placing] {
  visibility: hidden;
}

/* =============================================
  Anchor positioning (data-side, data-align)
============================================= */
@supports (position-area: block-end) {
  .oa-popover,
  .oa-menu-list,
  .oa-select-list,
  .oa-tooltip {
    --oa-overlay-offset: 4px;

    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    margin-block: var(--oa-overlay-offset);

    &[data-align="center"] {
      position-area: block-end;
    }

    &[data-align="end"] {
      position-area: block-end span-inline-start;
    }

    &[data-side="top"] {
      position-area: block-start span-inline-end;

      &[data-align="center"] {
        position-area: block-start;
      }

      &[data-align="end"] {
        position-area: block-start span-inline-start;
      }
    }

    &[data-side="left"],
    &[data-side="right"] {
      margin-block: 0;
      margin-inline: var(--oa-overlay-offset);
    }

    &[data-side="left"] {
      position-area: inline-start span-block-end;

      &[data-align="center"] {
        position-area: inline-start;
      }

      &[data-align="end"] {
        position-area: inline-start span-block-start;
      }
    }

    &[data-side="right"] {
      position-area: inline-end span-block-end;

      &[data-align="center"] {
        position-area: inline-end;
      }

      &[data-align="end"] {
        position-area: inline-end span-block-start;
      }
    }
  }

  .oa-tooltip {
    --oa-overlay-offset: 6px;
  }
}

/* =============================================
  Enter and exit (Transition)
============================================= */
@supports selector(:popover-open) {
  .oa-popover,
  .oa-menu-list,
  .oa-select-list {
    opacity: 0;
    transform: scale(0.95);
    transform-origin: top left;
    transition-behavior: allow-discrete;
    transition-duration: 0.2s;
    transition-property: opacity, transform, overlay, display;
    transition-timing-function: var(--cubic-exit);

    &[data-side="top"] {
      transform-origin: bottom left;
    }

    &[data-side="left"] {
      transform-origin: top right;
    }

    &:popover-open {
      opacity: 1;
      transform: scale(1);
      transition-duration: 0.35s;
      transition-timing-function: var(--cubic-enter);
    }
  }

  @starting-style {
    .oa-popover:popover-open,
    .oa-menu-list:popover-open,
    .oa-select-list:popover-open {
      opacity: 0;
      transform: scale(0.95);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .oa-popover,
  .oa-menu-list,
  .oa-select-list,
  .oa-tooltip {
    transition: none;
  }
}

@keyframes oa-shake {
  0% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-5px);
  }

  40%,
  80% {
    transform: translateX(5px);
  }

  100% {
    transform: translateX(0);
  }
}
}

/* static/components/radio-group.css */
@layer components {
/*
 * RadioGroup. Ported from Apps SDK UI `RadioGroup.module.css` (MIT, see NOTICE).
 * Native <input type="radio"> elements sit transparent over the indicator, so
 * arrow keys, form submission and required validation are native.
 */
.oa-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--radio-group-row-gap);
}

.oa-radio-group:where([data-direction="col"]) {
  flex-direction: column;
  gap: var(--radio-group-col-gap);
}

.oa-radio {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--radio-group-item-gap);
  cursor: pointer;
  font-size: var(--radio-group-item-font-size);
  line-height: var(--radio-group-item-line-height);
}

.oa-radio[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.oa-radio-group:where([data-block]) .oa-radio {
  width: 100%;
}

/* Centers the indicator on the first line of the label. */
.oa-radio__indicator-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--radio-group-item-line-height);
}

.oa-radio__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}

.oa-radio__item {
  position: relative;
  display: inline-grid;
  flex-shrink: 0;
  width: var(--radio-group-indicator-size);
  height: var(--radio-group-indicator-size);
  border-radius: var(--radius-full);
  background-color: transparent;
  box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color) inset;
  transition-duration: var(--transition-duration-basic);
  transition-property: box-shadow;
  transition-timing-function: var(--transition-ease-basic);
}

@media (hover: hover) and (pointer: fine) {
  .oa-radio:not([data-disabled]):hover .oa-radio__item {
    box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color-hover) inset;
  }
}

.oa-radio__input:focus-visible + .oa-radio__item {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.oa-radio__item::before,
.oa-radio__item::after {
  display: none;
  content: "";
  grid-column-start: 1;
  grid-row-start: 1;
  place-self: center center;
  border-radius: var(--radius-full);
  will-change: transform;
}

.oa-radio__input:checked + .oa-radio__item::before,
.oa-radio__input:checked + .oa-radio__item::after {
  display: block;
}

/* Filled circle */
.oa-radio__item::before {
  width: var(--radio-group-indicator-size);
  height: var(--radio-group-indicator-size);
  animation: oa-radio-fade-in 0.6s var(--cubic-enter);
  background-color: var(--radio-group-indicator-background-color);
}

/* Empty middle circle */
.oa-radio__item::after {
  width: var(--radio-group-indicator-hole-size);
  height: var(--radio-group-indicator-hole-size);
  animation: oa-radio-scale-in 0.6s var(--cubic-enter);
  background-color: var(--radio-group-indicator-hole-background-color);
}

.oa-radio__description {
  display: block;
  color: var(--color-text-secondary);
}

@keyframes oa-radio-scale-in {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes oa-radio-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
}

/* static/components/scroll-to-bottom.css */
@layer components {
/* ScrollToBottom (openagents_ui::shell::ScrollToBottom): an icon-only round
   button centered at the bottom of its positioned parent, just above the
   docked composer, as in the desktop app's chat. Values come from the Apps
   SDK UI tokens (MIT, see NOTICE). */

.oa-scroll-bottom {
  position: absolute;
  inset-inline-start: 50%;
  bottom: calc(var(--spacing) * 3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  background: var(--color-surface-elevated, var(--color-surface));
  box-shadow: var(--shadow-100, none);
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  transform: translateX(-50%);
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}
.oa-scroll-bottom[hidden] {
  display: none;
}
.oa-scroll-bottom:hover {
  background: var(--color-background-primary-ghost-hover);
}
.oa-scroll-bottom:focus-visible {
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-scroll-sentinel {
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .oa-scroll-bottom {
    transition: none;
  }
}
}

/* static/components/segmented-control.css */
@layer components {
/*
 * SegmentedControl. Ported from Apps SDK UI `SegmentedControl.module.css`
 * (MIT, see NOTICE). Rendered as a native radio group: each option is a
 * <label> around a transparent <input type="radio">. The selected option
 * carries the thumb background instead of a JS-positioned thumb element.
 */
.oa-segmented-control {
  --segmented-control-size: var(--control-size-md);
  --segmented-control-font-size: var(--control-font-size-md);
  --segmented-control-radius: var(--control-radius-md);
  --segmented-control-option-gutter: var(--control-gutter-md);
  --segmented-control-option-radius: calc(
    var(--segmented-control-radius) - var(--segmented-control-gutter)
  );

  position: relative;
  overflow: auto;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--segmented-control-gap);
  height: var(--segmented-control-size);
  margin: 0;
  padding: var(--segmented-control-gutter);
  border: 0;
  border-radius: var(--segmented-control-radius);
  background: var(--segmented-control-background);
  font-size: var(--segmented-control-font-size);
  font-weight: var(--segmented-control-font-weight);
  scrollbar-width: none;
  /* Remove inline-flex baseline gap */
  vertical-align: middle;
  white-space: nowrap;
}

.oa-segmented-control::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.oa-segmented-control:where([data-block]) {
  overflow: hidden;
  display: flex;
  width: 100%;
  white-space: wrap;
}

/* Sizes */
.oa-segmented-control:where([data-size="3xs"]) {
  --segmented-control-size: var(--control-size-3xs);
  --segmented-control-font-size: var(--control-font-size-sm);
  --segmented-control-radius: var(--control-radius-sm);
  --segmented-control-option-gutter: var(--control-gutter-xs);
}

.oa-segmented-control:where([data-size="2xs"]) {
  --segmented-control-size: var(--control-size-2xs);
  --segmented-control-font-size: var(--control-font-size-sm);
  --segmented-control-radius: var(--control-radius-sm);
  --segmented-control-option-gutter: var(--control-gutter-xs);
}

.oa-segmented-control:where([data-size="xs"]) {
  --segmented-control-size: var(--control-size-xs);
  --segmented-control-font-size: var(--control-font-size-md);
  --segmented-control-radius: var(--control-radius-sm);
  --segmented-control-option-gutter: var(--control-gutter-xs);
}

.oa-segmented-control:where([data-size="sm"]) {
  --segmented-control-size: var(--control-size-sm);
  --segmented-control-font-size: var(--control-font-size-md);
  --segmented-control-radius: var(--control-radius-md);
  --segmented-control-option-gutter: var(--control-gutter-sm);
}

.oa-segmented-control:where([data-size="md"]) {
  --segmented-control-size: var(--control-size-md);
  --segmented-control-font-size: var(--control-font-size-md);
  --segmented-control-radius: var(--control-radius-md);
  --segmented-control-option-gutter: var(--control-gutter-md);
}

.oa-segmented-control:where([data-size="lg"]) {
  --segmented-control-size: var(--control-size-lg);
  --segmented-control-font-size: var(--control-font-size-md);
  --segmented-control-radius: var(--control-radius-md);
  --segmented-control-option-gutter: var(--control-gutter-md);
}

.oa-segmented-control:where([data-size="xl"]) {
  --segmented-control-size: var(--control-size-xl);
  --segmented-control-font-size: var(--control-font-size-md);
  --segmented-control-radius: var(--control-radius-lg);
  --segmented-control-option-gutter: var(--control-gutter-lg);
}

.oa-segmented-control:where([data-size="2xl"]) {
  --segmented-control-size: var(--control-size-2xl);
  --segmented-control-font-size: var(--control-font-size-lg);
  --segmented-control-radius: var(--control-radius-xl);
  --segmented-control-option-gutter: var(--control-gutter-xl);
}

.oa-segmented-control:where([data-size="3xl"]) {
  --segmented-control-size: var(--control-size-3xl);
  --segmented-control-font-size: var(--control-font-size-lg);
  --segmented-control-radius: var(--control-radius-xl);
  --segmented-control-option-gutter: var(--control-gutter-xl);
}

/* Gutter sizes */
.oa-segmented-control:where([data-gutter-size="2xs"]) {
  --segmented-control-option-gutter: var(--control-gutter-2xs);
}

.oa-segmented-control:where([data-gutter-size="xs"]) {
  --segmented-control-option-gutter: var(--control-gutter-xs);
}

.oa-segmented-control:where([data-gutter-size="sm"]) {
  --segmented-control-option-gutter: var(--control-gutter-sm);
}

.oa-segmented-control:where([data-gutter-size="md"]) {
  --segmented-control-option-gutter: var(--control-gutter-md);
}

.oa-segmented-control:where([data-gutter-size="lg"]) {
  --segmented-control-option-gutter: var(--control-gutter-lg);
}

.oa-segmented-control:where([data-gutter-size="xl"]) {
  --segmented-control-option-gutter: var(--control-gutter-xl);
}

/* Pill */
.oa-segmented-control:where([data-pill]) {
  --segmented-control-radius: var(--radius-full);
  --segmented-control-option-radius: var(--radius-full);
}

.oa-segmented-control__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--segmented-control-option-gutter);
  border-radius: var(--segmented-control-option-radius);
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 1;
  transition-duration: var(--transition-duration-basic);
  transition-property: opacity, background-color, color, box-shadow;
  transition-timing-function: var(--transition-ease-basic);
}

:where(.oa-segmented-control[data-block]) .oa-segmented-control__option {
  flex: 1;
}

:where(.oa-segmented-control[data-pill]) .oa-segmented-control__option {
  padding: 0 calc(var(--segmented-control-option-gutter) * var(--control-gutter-pill-scaling));
}

.oa-segmented-control__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}

.oa-segmented-control__option svg {
  display: block;
}

/* Hover highlight */
.oa-segmented-control__option::before {
  position: absolute;
  inset: var(--segmented-control-option-highlight-gutter);
  border-radius: var(--segmented-control-option-radius);
  background: var(--segmented-control-option-highlight-background-color);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transition-duration: var(--transition-duration-basic);
  transition-property: opacity, transform;
  transition-timing-function: var(--transition-ease-basic);
  will-change: transform;
}

.oa-segmented-control__option:active::before {
  transform: scale(var(--scale, 1), 0.97);
}

@media (hover: hover) and (pointer: fine) {
  .oa-segmented-control__option:not(:has(:checked, :disabled)):hover {
    color: var(--color-text);
  }

  .oa-segmented-control__option:not(:has(:checked, :disabled)):hover::before {
    opacity: 0.5;
  }
}

.oa-segmented-control__option:not(:has(:checked, :disabled)):active::before {
  opacity: 0.75;
}

.oa-segmented-control__option:has(:focus-visible) {
  color: var(--color-text);
  outline: 2px solid var(--color-ring);
}

/* Selected: the option carries the thumb. */
.oa-segmented-control__option:has(:checked) {
  background: var(--segmented-control-thumb-background);
  box-shadow: var(--segmented-control-thumb-shadow);
  color: var(--color-text);
}

.oa-segmented-control__option:has(:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

.oa-segmented-control__option:has(:disabled)::before {
  opacity: 0 !important;
}

.oa-segmented-control__text {
  position: relative;
}
}

/* static/components/select-control.css */
@layer components {
/*
 * SelectControl. The trigger is ported from Apps SDK UI
 * SelectControl.module.css and the option list from Select.module.css (MIT,
 * see NOTICE). Two forms share the look:
 *
 * - .oa-select-native wraps forms::Select (static/components/select.css): the
 *   no-JavaScript form.
 * - the rich control (search, multiple selection) is a trigger button plus a
 *   popover listbox; overlays.js shows it and hides the native select, which
 *   keeps carrying the form value.
 */

.oa-select-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--select-control-gap);
  flex-shrink: 0;
  height: var(--select-control-size);
  padding: 0 var(--select-control-gutter);
  border-radius: var(--select-control-radius);
  cursor: pointer;
  font-size: var(--select-control-font-size);
  font-weight: var(--select-control-font-weight);
  line-height: var(--font-text-md-line-height);
  text-align: left;
  transition-duration: var(--transition-duration-basic);
  transition-property: color;
  transition-timing-function: var(--transition-ease-basic);
  user-select: none;
  white-space: nowrap;

  &:where([data-optically-align="start"]) {
    margin-inline-start: calc(var(--select-control-gutter) * -1);
  }

  &:where([data-optically-align="end"]) {
    margin-inline-end: calc(var(--select-control-gutter) * -1);
  }

  /* Background / shape of the button */
  &::before {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    content: "";
    transition-duration: var(--transition-duration-basic);
    transition-property: opacity, background-color, transform, box-shadow, border-color;
    transition-timing-function: var(--transition-ease-basic);
    /* Composite layer seems required in some cases to avoid visual artifacts. */
    will-change: transform;
  }

  /* Focus ring */
  &::after {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    content: "";
    pointer-events: none;
    transition-duration: var(--transition-duration-basic);
    transition-property: transform;
    transition-timing-function: var(--transition-ease-basic);
    /* Composite layer seems required in some cases to avoid visual artifacts. */
    will-change: transform;
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    &::after {
      outline: 2px solid var(--button-ring-color, var(--color-ring));
      outline-offset: var(--select-control-ring-offset, 2px);
    }
  }

  /* =============================================
    Sizes
  ============================================= */
  &:where([data-size="3xs"]) {
    --select-control-size: var(--control-size-3xs);
    --select-control-gutter: var(--control-gutter-2xs);
    --select-control-font-size: var(--control-font-size-sm);
    --select-control-gap: 4px;
    --select-control-radius: var(--control-radius-sm);
    --start-icon-size: var(--control-icon-size-xs);
    --start-icon-offset: 0;
    --start-icon-pill-offset: 0;
    --clear-size: 14px;
    --clear-icon-size: 13px;
    --clear-iso-size: 12px;
    --clear-iso-icon-size: 10px;
    --clear-iso-offset: -1px;
    --clear-iso-pill-offset: -2px;
    --dropdown-icon-offset: 0;
    --dropdown-icon-pill-offset: 0;
    --dropdown-icon-width: 6px;
    --dropdown-icon-height: 9px;
    --dropdown-chevron-icon-width: 8px;
    --dropdown-chevron-icon-height: 5px;
    --indicator-wrapper-gap: calc(var(--spacing) * 1);
    --indicator-wrapper-gutter: 0;
  }

  &:where([data-size="2xs"]) {
    --select-control-size: var(--control-size-2xs);
    --select-control-gutter: var(--control-gutter-xs);
    --select-control-font-size: var(--control-font-size-sm);
    --select-control-gap: 6px;
    --select-control-radius: var(--control-radius-sm);
    --start-icon-size: var(--control-icon-size-sm);
    --start-icon-offset: 0;
    --start-icon-pill-offset: -1px;
    --clear-size: 16px;
    --clear-icon-size: 13px;
    --clear-iso-size: 14px;
    --clear-iso-icon-size: 12px;
    --clear-iso-offset: -2px;
    --clear-iso-pill-offset: -4px;
    --dropdown-icon-offset: 0;
    --dropdown-icon-pill-offset: 0;
    --dropdown-icon-width: 6px;
    --dropdown-icon-height: 9px;
    --dropdown-chevron-icon-width: 8px;
    --dropdown-chevron-icon-height: 5px;
    --indicator-wrapper-gap: calc(var(--spacing) * 1);
    --indicator-wrapper-gutter: 0;
  }

  &:where([data-size="xs"]) {
    --select-control-size: var(--control-size-xs);
    --select-control-gutter: var(--control-gutter-xs);
    --select-control-font-size: var(--control-font-size-md);
    --select-control-gap: 6px;
    --select-control-radius: var(--control-radius-sm);
    --start-icon-size: var(--control-icon-size-sm);
    --start-icon-offset: -1px;
    --start-icon-pill-offset: -1px;
    --clear-size: 18px;
    --clear-icon-size: 14px;
    --clear-iso-size: 16px;
    --clear-iso-icon-size: 12px;
    --clear-iso-offset: -2px;
    --clear-iso-pill-offset: -4px;
    --dropdown-icon-offset: 0;
    --dropdown-icon-pill-offset: 0;
    --dropdown-icon-width: 7px;
    --dropdown-icon-height: 11px;
    --dropdown-chevron-icon-width: 9px;
    --dropdown-chevron-icon-height: 5px;
    --indicator-wrapper-gap: calc(var(--spacing) * 1);
    --indicator-wrapper-gutter: 0;
  }

  &:where([data-size="sm"]) {
    --select-control-size: var(--control-size-sm);
    --select-control-gutter: var(--control-gutter-sm);
    --select-control-font-size: var(--control-font-size-md);
    --select-control-gap: 8px;
    --select-control-radius: var(--control-radius-sm);
    --start-icon-size: var(--control-icon-size-sm);
    --start-icon-offset: -1px;
    --start-icon-pill-offset: -2px;
    --clear-size: 18px;
    --clear-icon-size: 14px;
    --clear-iso-size: 16px;
    --clear-iso-icon-size: 12px;
    --clear-iso-offset: -3px;
    --clear-iso-pill-offset: -6px;
    --dropdown-icon-offset: 0;
    --dropdown-icon-pill-offset: -2px;
    --dropdown-icon-width: 7px;
    --dropdown-icon-height: 11px;
    --dropdown-chevron-icon-width: 9px;
    --dropdown-chevron-icon-height: 5px;
    --indicator-wrapper-gap: calc(var(--spacing) * 1);
    --indicator-wrapper-gutter: 0;
  }

  &:where([data-size="md"]) {
    --select-control-size: var(--control-size-md);
    --select-control-gutter: var(--control-gutter-md);
    --select-control-font-size: var(--control-font-size-md);
    --select-control-gap: 8px;
    --select-control-radius: var(--control-radius-md);
    --start-icon-size: var(--control-icon-size-md);
    --start-icon-offset: -1px;
    --start-icon-pill-offset: -4px;
    --clear-size: 22px;
    --clear-icon-size: 15px;
    --clear-iso-size: 18px;
    --clear-iso-icon-size: 14px;
    --clear-iso-offset: -4px;
    --clear-iso-pill-offset: -7px;
    --dropdown-icon-offset: 0;
    --dropdown-icon-pill-offset: -2px;
    --dropdown-icon-width: 8px;
    --dropdown-icon-height: 12px;
    --dropdown-chevron-icon-width: 11px;
    --dropdown-chevron-icon-height: 6px;
    --indicator-wrapper-gap: calc(var(--spacing) * 1);
    --indicator-wrapper-gutter: 0;
  }

  &:where([data-size="lg"]) {
    --select-control-size: var(--control-size-lg);
    --select-control-gutter: var(--control-gutter-md);
    --select-control-font-size: var(--control-font-size-md);
    --select-control-gap: 8px;
    --select-control-radius: var(--control-radius-md);
    --start-icon-size: var(--control-icon-size-md);
    --start-icon-offset: -2px;
    --start-icon-pill-offset: -4px;
    --clear-size: 22px;
    --clear-icon-size: 15px;
    --clear-iso-size: 18px;
    --clear-iso-icon-size: 14px;
    --clear-iso-offset: -2px;
    --clear-iso-pill-offset: -6px;
    --dropdown-icon-offset: 0;
    --dropdown-icon-pill-offset: -2px;
    --dropdown-icon-width: 8px;
    --dropdown-icon-height: 12px;
    --dropdown-chevron-icon-width: 11px;
    --dropdown-chevron-icon-height: 6px;
    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
    --indicator-wrapper-gutter: 0;
  }

  &:where([data-size="xl"]) {
    --select-control-size: var(--control-size-xl);
    --select-control-gutter: var(--control-gutter-lg);
    --select-control-font-size: var(--control-font-size-md);
    --select-control-gap: 8px;
    --select-control-radius: var(--control-radius-lg);
    --start-icon-size: var(--control-icon-size-md);
    --start-icon-offset: -2px;
    --start-icon-pill-offset: -4px;
    --clear-size: 24px;
    --clear-icon-size: 16px;
    --clear-iso-size: 18px;
    --clear-iso-icon-size: 14px;
    --clear-iso-offset: -2px;
    --clear-iso-pill-offset: -7px;
    --dropdown-icon-offset: 0;
    --dropdown-icon-pill-offset: -2px;
    --dropdown-icon-width: 8px;
    --dropdown-icon-height: 12px;
    --dropdown-chevron-icon-width: 11px;
    --dropdown-chevron-icon-height: 6px;
    --indicator-wrapper-gap: calc(var(--spacing) * 1);
    --indicator-wrapper-gutter: calc(var(--spacing) * 0.5);
  }

  &:where([data-size="2xl"]) {
    --select-control-size: var(--control-size-2xl);
    --select-control-gutter: var(--control-gutter-lg);
    --select-control-font-size: var(--control-font-size-lg);
    --select-control-gap: 10px;
    --select-control-radius: var(--control-radius-xl);
    --start-icon-size: var(--control-icon-size-lg);
    --start-icon-offset: -2px;
    --start-icon-pill-offset: -4px;
    --clear-size: 24px;
    --clear-icon-size: 16px;
    --clear-iso-size: 20px;
    --clear-iso-icon-size: 15px;
    --clear-iso-offset: -2px;
    --clear-iso-pill-offset: -7px;
    --dropdown-icon-offset: 0;
    --dropdown-icon-pill-offset: -2px;
    --dropdown-icon-width: 8px;
    --dropdown-icon-height: 12px;
    --dropdown-chevron-icon-width: 11px;
    --dropdown-chevron-icon-height: 6px;
    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
  }

  &:where([data-size="3xl"]) {
    --select-control-size: var(--control-size-3xl);
    --select-control-gutter: var(--control-gutter-xl);
    --select-control-font-size: var(--control-font-size-lg);
    --select-control-gap: 10px;
    --select-control-radius: var(--control-radius-xl);
    --start-icon-size: var(--control-icon-size-lg);
    --start-icon-offset: -2px;
    --start-icon-pill-offset: -4px;
    --clear-size: 24px;
    --clear-icon-size: 16px;
    --clear-iso-size: 20px;
    --clear-iso-icon-size: 15px;
    --clear-iso-offset: -2px;
    --clear-iso-pill-offset: -7px;
    --dropdown-icon-offset: 0;
    --dropdown-icon-pill-offset: -3px;
    --dropdown-icon-width: 9px;
    --dropdown-icon-height: 13px;
    --dropdown-chevron-icon-width: 12px;
    --dropdown-chevron-icon-height: 7px;
    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
  }

  /* =============================================
    Pill
  ============================================= */
  &:where([data-pill]) {
    --select-control-radius: var(--radius-full);

    padding: 0 calc(var(--select-control-gutter) * var(--control-gutter-pill-scaling));
  }

  /* =============================================
    Block
  ============================================= */
  &:where([data-block]) {
    width: 100%;
  }

  /* =============================================
    Ghost variant
  ============================================= */
  &[data-variant="ghost"] {
    --select-control-background-color: var(--color-background-primary-ghost-hover);
    --select-control-ring-offset: -1px;

    &::before {
      background-color: var(--select-control-background-color);
      opacity: 0;
      transform: scale(var(--scale));
    }

    &[aria-expanded="true"],
    &[data-state="open"] {
      &::before {
        opacity: 0.6;
        transform: scale(1);
      }
    }

    &:where(:not([data-disabled])) {
      &:hover {
        &::before {
          opacity: 1;
          transform: scale(1);
        }
      }

      &:not(:has(button:active)) {
        &:active {
          &::before {
            --select-control-background-color: var(--color-background-primary-ghost-active);

            opacity: 1;
            transform: scale(var(--scale));
          }

          &::after {
            transform: scale(var(--scale));
          }
        }
      }

      &[data-invalid] {
        &::before {
          --select-control-background-color: transparent;

          box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
          opacity: 1;
          transform: scale(1);
        }

        &:hover {
          &::before {
            --select-control-background-color: var(--color-background-primary-ghost-hover);
          }
        }
      }
    }
  }

  /* =============================================
    Soft variant
  ============================================= */
  &[data-variant="soft"] {
    --select-control-background-color: var(--color-background-primary-soft-alpha);

    &::before {
      background-color: var(--select-control-background-color);
    }

    &[aria-expanded="true"],
    &[data-state="open"] {
      &::before {
        --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
      }
    }

    &:where(:not([data-disabled])) {
      &:hover {
        &::before {
          --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
        }
      }

      &:not(:has(button:active)) {
        &:active {
          &::before {
            --select-control-background-color: var(--color-background-primary-soft-alpha-active);
          }

          &::before,
          &::after {
            transform: scale(var(--scale));
          }
        }
      }

      &[data-invalid]::before {
        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
      }
    }
  }

  /* =============================================
    Outline variant
  ============================================= */
  &[data-variant="outline"] {
    --select-control-border-color: var(--input-outline-border-color);
    --select-control-ring-offset: -1px;

    &::before {
      background-color: transparent;
      box-shadow: 0 0 0 1px var(--select-control-border-color) inset;
    }

    &[aria-expanded="true"],
    &[data-state="open"] {
      --select-control-border-color: var(--input-outline-border-color-hover);
    }

    &:where(:not([data-disabled])) {
      &:hover {
        --select-control-border-color: var(--input-outline-border-color-hover);
      }

      &:not(:has(button:active)) {
        &:active {
          &::before {
            transform: scale(var(--scale));
          }

          &::after {
            transform: scale(var(--scale));
          }
        }
      }

      &[data-invalid]::before {
        --select-control-border-color: var(--input-border-color-invalid);
      }
    }
  }

  /* =============================================
    Invalid
  ============================================= */
  &:where([data-invalid]) {
    --button-ring-color: var(--color-ring-danger);
  }

  /* =============================================
    Hover
  ============================================= */
  &:not([data-disabled]) {
    &:hover {
      .oa-select-control-clear,
      .oa-select-control-icon {
        opacity: 1;
      }
    }
  }

  /* =============================================
    Placeholder (e.g., "not `selected`")
  ============================================= */
  &[data-selected="false"] {
    color: var(--input-placeholder-text-color);
  }

  /* =============================================
    Disabled
  ============================================= */
  &[data-disabled][data-variant] {
    /* Matches disabled styling of Buttons, which is nice. */
    --select-control-background-color: var(--color-background-disabled);
    --select-control-border-color: var(--color-border-disabled);

    color: var(--color-text-disabled);
    cursor: not-allowed;

    .oa-select-control-icon {
      color: var(--color-text-disabled);
    }

    /* Don't press while disabled */
    &:active::before {
      transform: scale(1);
    }
  }
}

.oa-select-control-text {
  position: relative;
  overflow: hidden;
  flex: 1;
  max-width: 100%;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oa-select-control-indicators {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--indicator-wrapper-gap);
  padding-left: var(--indicator-wrapper-gutter);
}

.oa-select-control-start-icon {
  position: relative;
  width: var(--start-icon-size);
  height: var(--start-icon-size);
  margin-left: var(--start-icon-offset);

  :where(.oa-select-control[data-pill]) & {
    margin-left: var(--start-icon-pill-offset);
  }
}

.oa-select-control-clear {
  --button-size: var(--clear-size);
  --button-icon-size: var(--clear-icon-size);

  position: relative;
  opacity: 0.75;

  &[data-variant="solid"] {
    --button-size: var(--clear-iso-size);
    --button-icon-size: var(--clear-iso-icon-size);
  }

  [data-state="open"] &,
  &:focus-visible {
    opacity: 1;
  }

  &[data-only-child] {
    margin-right: var(--clear-iso-offset);

    :where(.oa-select-control[data-pill]) & {
      margin-right: var(--clear-iso-pill-offset);
    }
  }
}

.oa-select-control-icon {
  position: relative;
  width: var(--dropdown-icon-width, 8px);
  height: var(--dropdown-icon-height, 12px);
  margin-right: var(--dropdown-icon-offset);
  color: var(--color-text-secondary);
  opacity: 0.75;
  transition-duration: var(--transition-duration-basic);
  transition-property: opacity;
  transition-timing-function: var(--transition-ease-basic);
  will-change: opacity;

  :where(.oa-select-control[data-pill]) & {
    margin-right: var(--dropdown-icon-pill-offset);
  }

  [data-state="open"] & {
    opacity: 1;
  }
}

.oa-select-control-chevron {
  width: var(--dropdown-chevron-icon-width, 11px);
  height: var(--dropdown-chevron-icon-height, 6px);
}

/* Shares margin offset with dropdown indicator */
.oa-select-control-loading {
  margin-right: var(--dropdown-icon-offset);

  :where(.oa-select-control[data-pill]) & {
    margin-right: var(--dropdown-icon-pill-offset);
  }
}

/* The rich trigger ships hidden and the native wrapper is hidden once
   overlays.js enhances it; keep [hidden] above the display rules. */
.oa-select-control[hidden] {
  display: none;
}

/* =============================================
  Trigger as a <button>
============================================= */
button.oa-select-control {
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
}

.oa-select-control-icon {
  flex-shrink: 0;
}

.oa-select-root {
  display: inline-flex;
}

.oa-select-root[data-block] {
  display: flex;
}

/* =============================================
  The native select (forms::Select) before overlays.js enhances it
============================================= */
.oa-select-root[data-block] > .oa-select-native {
  display: block;
  width: 100%;
}

.oa-select-native[hidden] {
  display: none;
}

/* =============================================
  Option list (Select.module.css)
============================================= */
.oa-select-list {
  box-sizing: border-box;
  width: var(--select-list-width, auto);
  min-width: var(--select-list-min-width, 300px);
  max-width: min(var(--select-list-max-width, 100vw), calc(100vw - 16px));
  border-radius: var(--menu-radius);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow), var(--shadow-hairline);
  font-size: var(--menu-font-size);
  line-height: var(--menu-line-height);
  user-select: none;
}

/* At least as wide as the trigger. */
@supports (width: anchor-size(width)) {
  .oa-select-list {
    min-width: max(var(--select-list-min-width, 300px), anchor-size(width));
  }
}

.oa-select-list-inner {
  display: flex;
  flex-direction: column;
  max-height: min(var(--select-list-max-height, 400px), calc(100dvh - 16px));
}

.oa-select-search {
  position: relative;
  padding: var(--menu-gutter) var(--menu-gutter) 0;

  & > input {
    box-sizing: border-box;
    width: 100%;
    height: var(--control-size-sm);
    padding: 0 var(--control-gutter-sm);
    border: 0;
    border-radius: var(--control-radius-md);
    background: var(--color-background-primary-soft-alpha);
    color: var(--color-text);
    font: inherit;
    outline: none;
  }

  & > input:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: -1px;
  }
}

.oa-select-options {
  overflow: auto;
  flex: 1;
  padding: var(--menu-gutter);

  &:focus {
    outline: none;
  }
}

.oa-select-option {
  position: relative;
  padding: var(--menu-item-padding);
  cursor: pointer;
  overflow-wrap: anywhere;
  /* Keep a neighbour visible when keyboard navigation scrolls an option in. */
  scroll-margin: 15px 0;

  &::before {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
    background: var(--menu-item-background-color);
    content: "";
    opacity: 0;
    transform: scale(var(--scale, 0.98));
    transition-duration: var(--transition-duration-basic);
    transition-property: opacity, background-color, transform;
    transition-timing-function: var(--cubic-enter);
    will-change: opacity, transform;
  }

  &[aria-selected="true"] {
    font-weight: var(--font-weight-semibold);
  }

  &[data-highlighted] {
    &::before {
      opacity: 1;
      transform: scale(1);
    }

    &:active::before {
      transform: scale(var(--scale, 0.98));
    }
  }

  &[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;

    &::before {
      display: none;
    }
  }
}

.oa-select-option-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--spacing) * 1);
}

.oa-select-option-check {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  visibility: hidden;

  [aria-selected="true"] > .oa-select-option-inner > & {
    visibility: visible;
  }
}

.oa-select-empty {
  padding: var(--menu-gutter);
  margin: calc(var(--spacing) * 4) 0;
  color: var(--color-text-secondary);
  text-align: center;
}
}

/* static/components/select.css */
@layer components {
/*
 * Select. A native <select> styled with the Apps SDK UI SelectControl sizes
 * and the Input variants (MIT, see NOTICE). The chevron is a sibling icon; the
 * richer searchable SelectControl comes later as Popover plus Alpine.
 */
.oa-select {
  --select-control-size: var(--control-size-md);
  --select-control-gutter: var(--control-gutter-md);
  --select-control-font-size: var(--control-font-size-md);
  --select-control-radius: var(--control-radius-md);
  --dropdown-chevron-icon-width: 11px;
  --dropdown-chevron-icon-height: 6px;

  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  border-radius: var(--select-control-radius);
  color: var(--input-text-color);
  font-size: var(--select-control-font-size);
  font-weight: var(--select-control-font-weight);
  transition-duration: var(--transition-duration-basic);
  transition-property: color, box-shadow, background-color;
  transition-timing-function: var(--transition-ease-basic);
}

.oa-select:where([data-block="false"]) {
  width: auto;
}

/* Sizes (SelectControl) */
.oa-select:where([data-size="3xs"]) {
  --select-control-size: var(--control-size-3xs);
  --select-control-gutter: var(--control-gutter-2xs);
  --select-control-font-size: var(--control-font-size-sm);
  --select-control-radius: var(--control-radius-sm);
  --dropdown-chevron-icon-width: 8px;
  --dropdown-chevron-icon-height: 5px;
}

.oa-select:where([data-size="2xs"]) {
  --select-control-size: var(--control-size-2xs);
  --select-control-gutter: var(--control-gutter-xs);
  --select-control-font-size: var(--control-font-size-sm);
  --select-control-radius: var(--control-radius-sm);
  --dropdown-chevron-icon-width: 8px;
  --dropdown-chevron-icon-height: 5px;
}

.oa-select:where([data-size="xs"]) {
  --select-control-size: var(--control-size-xs);
  --select-control-gutter: var(--control-gutter-xs);
  --select-control-font-size: var(--control-font-size-md);
  --select-control-radius: var(--control-radius-sm);
  --dropdown-chevron-icon-width: 9px;
  --dropdown-chevron-icon-height: 5px;
}

.oa-select:where([data-size="sm"]) {
  --select-control-size: var(--control-size-sm);
  --select-control-gutter: var(--control-gutter-sm);
  --select-control-font-size: var(--control-font-size-md);
  --select-control-radius: var(--control-radius-sm);
  --dropdown-chevron-icon-width: 9px;
  --dropdown-chevron-icon-height: 5px;
}

.oa-select:where([data-size="md"]) {
  --select-control-size: var(--control-size-md);
  --select-control-gutter: var(--control-gutter-md);
  --select-control-font-size: var(--control-font-size-md);
  --select-control-radius: var(--control-radius-md);
}

.oa-select:where([data-size="lg"]) {
  --select-control-size: var(--control-size-lg);
  --select-control-gutter: var(--control-gutter-md);
  --select-control-font-size: var(--control-font-size-md);
  --select-control-radius: var(--control-radius-md);
}

.oa-select:where([data-size="xl"]) {
  --select-control-size: var(--control-size-xl);
  --select-control-gutter: var(--control-gutter-lg);
  --select-control-font-size: var(--control-font-size-lg);
  --select-control-radius: var(--control-radius-lg);
}

.oa-select:where([data-size="2xl"]) {
  --select-control-size: var(--control-size-2xl);
  --select-control-gutter: var(--control-gutter-xl);
  --select-control-font-size: var(--control-font-size-lg);
  --select-control-radius: var(--control-radius-xl);
}

.oa-select:where([data-size="3xl"]) {
  --select-control-size: var(--control-size-3xl);
  --select-control-gutter: var(--control-gutter-xl);
  --select-control-font-size: var(--control-font-size-lg);
  --select-control-radius: var(--control-radius-xl);
}

.oa-select:where([data-pill]) {
  --select-control-radius: var(--radius-full);
}

/* Outline variant */
.oa-select:where([data-variant="outline"]) {
  box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
}

@media (hover: hover) and (pointer: fine) {
  .oa-select:where([data-variant="outline"]):not([data-disabled]):hover {
    box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
  }
}

.oa-select:where([data-variant="outline"]):not([data-disabled]):focus-within {
  box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
}

/* Soft variant */
.oa-select:where([data-variant="soft"]) {
  background-color: var(--input-soft-background-color);
}

.oa-select:where([data-variant="soft"]):not([data-disabled]):focus-within {
  box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
}

.oa-select:not([data-disabled])[data-invalid] {
  box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
}

.oa-select[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.oa-select__control {
  width: 100%;
  height: var(--select-control-size);
  padding: 0 calc(var(--select-control-gutter) + var(--dropdown-chevron-icon-width) + 8px) 0
    var(--select-control-gutter);
  border: 0;
  border-radius: inherit;
  appearance: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: var(--font-text-md-line-height);
  text-overflow: ellipsis;
}

:where(.oa-select[data-pill]) .oa-select__control {
  padding-left: calc(var(--select-control-gutter) * var(--control-gutter-pill-scaling));
}

.oa-select__control:focus {
  outline: none;
}

.oa-select__control:disabled {
  cursor: not-allowed;
}

.oa-select__control:invalid {
  color: var(--input-placeholder-text-color);
}

.oa-select__control option {
  color: var(--color-text);
}

.oa-select__chevron {
  position: absolute;
  right: var(--select-control-gutter);
  width: var(--dropdown-chevron-icon-width);
  height: var(--dropdown-chevron-icon-height);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.oa-select__control[multiple] {
  height: auto;
  min-height: var(--select-control-size);
  padding: 4px var(--select-control-gutter);
}
}

/* static/components/shell.css */
@layer components {
/* App shell: layout, left panel, navigation, header, main frame (UI-06).
   Values come from the Apps SDK UI tokens (MIT, see NOTICE); the app-shell
   sizes below are product-only roles in the same naming scheme. */

:root {
  --app-color-background-shell: var(--color-surface-secondary);
  --app-shell-left-panel-width: 16.25rem;
  --app-shell-navigation-rail-width: 3.25rem;
  --app-shell-main-toolbar-height: 3.25rem;
  --app-shell-narrow-breakpoint: 48rem;
  --height-token-nav-row: 2.25rem;
  --padding-row-x: calc(var(--spacing) * 2.5);
  --padding-row-y: calc(var(--spacing) * 1.5);
  --thread-content-max-width: 48rem;
}

/* The app lives in one fixed-height screen: the document never scrolls or
   rubber-bands; only inner regions (the left panel's list, the main
   viewport, a thread) scroll, and they contain their overscroll. Scoped to
   shell documents (body.oa-body), so full-screen canvas pages are
   unaffected. 100vh is the fallback where dvh is missing. */
html:has(> body.oa-body) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
.oa-body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-text-md-size);
  line-height: var(--font-text-md-line-height);
}

.oa-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.oa-skip-link {
  position: absolute;
  inset-inline-start: calc(var(--spacing) * 2);
  top: calc(var(--spacing) * -12);
  z-index: 60;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-md);
  background: var(--color-background-primary-solid);
  color: var(--color-text-primary-solid);
}
.oa-skip-link:focus-visible {
  top: calc(var(--spacing) * 2);
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Layout: left panel beside the main surface; the window doesn't scroll. */
.oa-layout {
  position: relative;
  display: flex;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  background: var(--app-color-background-shell);
  overflow: hidden;
}

/* Left panel. It is a native popover so it can open over the page on narrow
   screens without JavaScript; on wide screens it stays in flow. Collapsed
   (wide screens, by the toggle) and at rest on narrow screens it is a rail
   showing only the toggle and the top rows' icons. */
.oa-left-panel {
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--app-shell-left-panel-width);
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-end: 1px solid var(--color-border-subtle);
  background: var(--app-color-background-shell);
  color: var(--color-text);
  overflow: hidden;
}
@media (min-width: 48rem) {
  .oa-left-panel[popover],
  .oa-left-panel[popover]:not(:popover-open) {
    position: relative;
    inset: auto;
    display: flex;
  }
  /* Collapsing needs the shell script; without it the toggle would do
     nothing here, so it is hidden. */
  :root:not([data-oa-sidebar-ready]) .oa-sidebar-toggle {
    display: none;
  }
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel {
    width: var(--app-shell-navigation-rail-width);
  }
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-sidebar-brand,
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-conversation-sidebar > :not(.oa-navigation),
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-nav-item-label,
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-nav-item-trailing,
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-account-name {
    display: none;
  }
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-sidebar-footer {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-account-trigger {
    justify-content: center;
    padding-inline: 0;
  }
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-sidebar-header {
    justify-content: center;
    padding: 0;
  }
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-conversation-sidebar {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-nav-item {
    justify-content: center;
    padding-inline: 0;
  }
}
@media (max-width: 47.999rem) {
  .oa-left-panel[popover]:not(:popover-open) {
    position: relative;
    inset: auto;
    display: flex;
    width: var(--app-shell-navigation-rail-width);
  }
  .oa-left-panel[popover]:not(:popover-open) .oa-sidebar-brand,
  .oa-left-panel[popover]:not(:popover-open) .oa-conversation-sidebar > :not(.oa-navigation),
  .oa-left-panel[popover]:not(:popover-open) .oa-nav-item-label,
  .oa-left-panel[popover]:not(:popover-open) .oa-nav-item-trailing,
  .oa-left-panel[popover]:not(:popover-open) .oa-account-name {
    display: none;
  }
  .oa-left-panel[popover]:not(:popover-open) .oa-sidebar-footer {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .oa-left-panel[popover]:not(:popover-open) .oa-account-trigger {
    justify-content: center;
    padding-inline: 0;
  }
  .oa-left-panel[popover]:not(:popover-open) .oa-sidebar-header {
    justify-content: center;
    padding: 0;
  }
  .oa-left-panel[popover]:not(:popover-open) .oa-conversation-sidebar {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .oa-left-panel[popover]:not(:popover-open) .oa-nav-item {
    justify-content: center;
    padding-inline: 0;
  }
  .oa-left-panel[popover]:popover-open {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(var(--app-shell-left-panel-width), 85vw);
    height: 100dvh;
    box-shadow: var(--shadow-300);
  }
  .oa-left-panel[popover]::backdrop {
    background: rgb(0 0 0 / 0.4);
  }
}

.oa-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  min-height: var(--app-shell-main-toolbar-height);
  padding: 0 calc(var(--spacing) * 2) 0 calc(var(--spacing) * 3);
}
.oa-sidebar-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  font-weight: var(--font-weight-semibold);
}
.oa-sidebar-brand a {
  color: inherit;
  text-decoration: none;
}

.oa-conversation-sidebar {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  min-width: 0;
  min-height: 0;
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.oa-navigation {
  display: flex;
  flex-direction: column;
}

.oa-nav-row {
  display: flex;
  min-width: 0;
}
.oa-nav-row > .oa-nav-item {
  flex: 1;
}

.oa-nav-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oa-nav-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
  min-height: var(--height-token-nav-row);
  padding: var(--padding-row-y) var(--padding-row-x);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--font-text-sm-size);
  line-height: var(--font-text-sm-line-height);
  text-decoration: none;
  outline: none;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}
.oa-nav-item:hover {
  background: var(--color-background-primary-ghost-hover);
}
.oa-nav-item[aria-current="page"] {
  background: var(--color-background-secondary-soft);
  font-weight: var(--font-weight-medium);
}
.oa-nav-item:focus-visible {
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-nav-item-icon {
  display: inline-flex;
  flex: none;
  color: var(--color-text-secondary);
}
.oa-nav-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-nav-item-trailing {
  display: inline-flex;
  flex: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-text-xs-size);
}

.oa-nav-shortcut {
  display: none;
  flex: none;
  padding: 0 calc(var(--spacing) * 1.25);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  font-family: inherit;
  font-size: var(--font-text-xs-size);
  line-height: var(--font-text-xs-line-height);
  white-space: nowrap;
}
/* The keycap hint shows only where there is a keyboard and room for it. */
@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
  .oa-layout:not([data-sidebar="collapsed"]) .oa-nav-shortcut,
  .oa-left-panel:popover-open .oa-nav-shortcut {
    display: inline-flex;
  }
}

.oa-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
}
.oa-sidebar-section-title {
  margin: 0;
  padding: 0 var(--padding-row-x);
  color: var(--color-text-tertiary);
  font-size: var(--font-text-xs-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-text-xs-line-height);
}
.oa-sidebar-empty {
  margin: 0;
  padding: 0 var(--padding-row-x);
  color: var(--color-text-tertiary);
  font-size: var(--font-text-sm-size);
}

.oa-chat-list {
  min-width: 0;
}
/* The chat list fills the column so its secondary links (Archived chats,
   Connect a GitHub repository, the Undo notice) sit at the bottom, just
   above the account footer. */
.oa-chat-list:has(.oa-chat-list-secondary) {
  flex: 1;
}
.oa-chat-list-secondary {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  margin-top: auto;
  padding-top: calc(var(--spacing) * 3);
  opacity: 0.85;
}
.oa-chat-list-rows,
.oa-chat-list-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
}
.oa-chat-list-rows {
  gap: calc(var(--spacing) * 3);
}
.oa-chat-list-notice:empty {
  display: none;
}
.oa-chat-list-notice {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: 0 var(--padding-row-x);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
}
.oa-chat-list-notice form {
  display: inline;
}
.oa-chat-list-link,
.oa-chat-list-notice button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.oa-chat-list-more {
  margin: 0;
  padding: 0 var(--padding-row-x);
  font-size: var(--font-text-sm-size);
}
.oa-chat-list-more .oa-chat-list-link {
  color: var(--color-text-tertiary);
}

.oa-chat-projects {
  gap: calc(var(--spacing) * 2);
}

/* A project's group: its name opens and closes it; "New chat" and a
   "Reconnect GitHub" note sit under the name; rows after the first five
   wait behind "Show more". */
.oa-chat-project,
.oa-chat-project-more {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.oa-chat-project-summary {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: calc(var(--spacing) * 1) var(--padding-row-x);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-text-sm-size);
  font-weight: 600;
  list-style: none;
}
.oa-chat-project-summary::-webkit-details-marker {
  display: none;
}
.oa-chat-project-summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  margin-right: calc(var(--spacing) * 2);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  opacity: 0.6;
  transition: transform 120ms ease;
}
.oa-chat-project[open] > .oa-chat-project-summary::before {
  transform: rotate(90deg);
}
.oa-chat-project-summary:hover {
  background: var(--color-background-primary-ghost-hover);
}
.oa-chat-project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-chat-project-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
  padding: 0 var(--padding-row-x) calc(var(--spacing) * 1);
  font-size: var(--font-text-sm-size);
}
.oa-chat-project-links .oa-chat-list-link {
  color: var(--color-text-tertiary);
}
.oa-chat-project-links .oa-chat-project-note {
  color: var(--color-text-warning);
}
.oa-chat-project-more > summary {
  padding: 0 var(--padding-row-x);
  color: var(--color-text-tertiary);
  font-size: var(--font-text-sm-size);
  list-style: none;
}
.oa-chat-project-more > summary::-webkit-details-marker {
  display: none;
}
.oa-chat-project-more[open] > summary {
  display: none;
}

/* The Archived chats page: one row per chat with its Restore button. */
.oa-chat-archive-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.oa-chat-archive-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  min-width: 0;
  margin: 0;
}
.oa-chat-archive-row > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-chat-archive-row > form {
  flex: none;
  margin: 0;
}

/* The search box over the chat list. */
.oa-chat-search {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--height-token-nav-row);
  padding: 0 var(--padding-row-x);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  color: var(--color-text-tertiary);
}
.oa-chat-search:focus-within {
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-chat-search-icon {
  display: inline-flex;
  flex: none;
}
.oa-chat-search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-text-sm-size);
}

/* A chat row's "…" menu: shows on hover or focus, always on touch. */
.oa-nav-row--menu {
  position: relative;
  align-items: center;
}
.oa-row-menu {
  position: absolute;
  inset-inline-end: calc(var(--spacing) * 1);
  display: inline-flex;
  opacity: 0;
}
.oa-row-menu .oa-menu-list {
  --menu-min-width: 10rem;
}
.oa-nav-row--menu:hover .oa-row-menu,
.oa-nav-row--menu:focus-within .oa-row-menu,
.oa-row-menu:has([data-state="open"]) {
  opacity: 1;
}
@media (hover: none) {
  .oa-row-menu {
    opacity: 1;
  }
}
.oa-row-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-background-secondary-soft);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.oa-row-menu-trigger:hover {
  color: var(--color-text);
}
.oa-row-menu-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--color-ring);
  outline: none;
}

/* Renaming a chat in place. */
.oa-nav-row--editing {
  padding: calc(var(--spacing) * 0.5) 0;
}
.oa-row-rename {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  min-width: 0;
}
.oa-row-rename-input {
  min-width: 0;
  min-height: var(--height-token-nav-row);
  padding: 0 var(--padding-row-x);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-text-sm-size);
}
.oa-row-rename-input:focus {
  box-shadow: 0 0 0 2px var(--color-ring);
  outline: none;
}
.oa-row-rename-actions {
  display: flex;
  gap: calc(var(--spacing) * 3);
  padding: 0 var(--padding-row-x);
}
.oa-row-rename-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-text-xs-size);
  text-decoration: none;
}
.oa-row-rename-button:hover {
  color: var(--color-text);
}

/* A row with a second line (a chat's repository and branch). */
.oa-nav-item-label--stacked {
  display: flex;
  flex-direction: column;
}
.oa-nav-item-title,
.oa-nav-item-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-nav-item-detail {
  color: var(--color-text-tertiary);
  font-size: var(--font-text-xs-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--font-text-xs-line-height);
}

/* A chat's status at the end of its row: a dot and a few words. */
.oa-chat-status {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  color: var(--color-text-tertiary);
  font-size: var(--font-text-xs-size);
  line-height: var(--font-text-xs-line-height);
  white-space: nowrap;
}
.oa-chat-status-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
}
.oa-chat-status-label {
  white-space: nowrap;
}
.oa-chat-status[data-status="working"] {
  color: var(--color-text-secondary);
  --indicator-size: 12px;
}
.oa-chat-status[data-status="waiting"] {
  color: var(--color-text-warning);
}
.oa-chat-status[data-status="done"] {
  color: var(--color-text-success);
}
.oa-chat-status[data-status="failed"] {
  color: var(--color-text-danger);
}

/* Bottom of the left panel: Docs (signed out), then the account. */
.oa-sidebar-footer {
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: flex-end;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2);
}
.oa-sidebar-footer-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
/* The theme toggle: bottom-right corner of the panel. */
.oa-sidebar-corner {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--height-token-nav-row);
}
.oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-sidebar-footer {
  flex-direction: column;
  align-items: stretch;
}
.oa-layout[data-sidebar="collapsed"] .oa-left-panel .oa-sidebar-corner {
  justify-content: center;
}
@media (max-width: 47.999rem) {
  .oa-left-panel[popover]:not(:popover-open) .oa-sidebar-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .oa-left-panel[popover]:not(:popover-open) .oa-sidebar-corner {
    justify-content: center;
  }
}
.oa-sidebar-bottom {
  display: flex;
  flex-direction: column;
}
.oa-sidebar-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: calc(var(--spacing) * 2.5);
  row-gap: calc(var(--spacing) * 0.5);
  padding: 0 var(--padding-row-x) calc(var(--spacing) * 1);
  color: var(--color-text-tertiary);
  font-size: var(--font-text-xs-size);
  line-height: var(--font-text-xs-line-height);
}
.oa-sidebar-legal a {
  color: inherit;
  text-decoration: none;
}
.oa-sidebar-legal a:hover {
  color: var(--color-text-secondary);
  text-decoration: underline;
}
.oa-sidebar-legal a:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
  border-radius: var(--radius-xs);
}
.oa-sidebar-legal-note {
  white-space: nowrap;
}

/* The account button at the bottom of the left panel (ChatGPT's profile
   row): avatar and name; its menu opens above it. */
.oa-account .oa-menu {
  display: block;
}
.oa-account-trigger {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--height-token-nav-row);
  padding: var(--padding-row-y) var(--padding-row-x);
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-text-sm-size);
  text-align: start;
  cursor: pointer;
  outline: none;
}
.oa-account-trigger:hover,
.oa-account-trigger[aria-expanded="true"] {
  background: var(--color-background-primary-ghost-hover);
}
.oa-account-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-account-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-account .oa-menu-list {
  --menu-min-width: 14rem;
}

/* The header row's breadcrumb: the page's name or the chat's title. */
.oa-breadcrumb {
  display: flex;
  min-width: 0;
}
.oa-breadcrumb-list {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.oa-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-width: 0;
}
.oa-breadcrumb-item:not(:last-child) {
  flex: none;
}
.oa-breadcrumb-item + .oa-breadcrumb-item::before {
  content: "\203A";
  color: var(--color-text-tertiary);
}
.oa-breadcrumb-link {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.oa-breadcrumb-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 40rem) {
  .oa-breadcrumb-item:not(:last-child) {
    flex: 0 1 auto;
    max-width: 5.5rem;
  }
}
.oa-breadcrumb-link:hover {
  color: var(--color-text);
}
.oa-breadcrumb-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.oa-breadcrumb-current {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shared icon buttons in the shell. */
.oa-sidebar-toggle,
.oa-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  outline: none;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}
.oa-sidebar-toggle:hover,
.oa-theme-toggle:hover {
  background: var(--color-background-primary-ghost-hover);
  color: var(--color-text);
}
.oa-sidebar-toggle:focus-visible,
.oa-theme-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-shell-glyph,
.oa-sidebar-toggle .oa-icon {
  display: block;
  flex: none;
}

/* Theme toggle: shows the icon for the theme it switches to. */
.oa-theme-toggle-form {
  display: contents;
}
.oa-theme-toggle-icon {
  display: inline-flex;
}
.oa-theme-toggle-icon[data-shows="dark"] {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .oa-theme-toggle-icon[data-shows="light"] {
    display: none;
  }
  :root:not([data-theme]) .oa-theme-toggle-icon[data-shows="dark"] {
    display: inline-flex;
  }
}
:root[data-theme="dark"] .oa-theme-toggle-icon[data-shows="light"] {
  display: none;
}
:root[data-theme="dark"] .oa-theme-toggle-icon[data-shows="dark"] {
  display: inline-flex;
}

/* Main surface: header over the frame. */
.oa-main-surface {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--color-surface);
}

.oa-main-header {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  flex: none;
  min-height: var(--app-shell-main-toolbar-height);
  padding: 0 calc(var(--spacing) * 3);
}
.oa-main-header-content {
  display: flex;
  align-items: center;
  flex: 1;
  gap: calc(var(--spacing) * 1.5);
  min-width: 0;
  font-size: var(--font-text-sm-size);
}
.oa-main-header-actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: calc(var(--spacing) * 1.5);
}

.oa-main-frame {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.oa-main-viewport {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.oa-layout[data-mode="app"] .oa-main-viewport {
  overflow: hidden;
}
.oa-workspace {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-width: 0;
  outline: none;
}
.oa-layout[data-mode="app"] .oa-workspace {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.oa-main-composer {
  flex: none;
  width: 100%;
  max-width: var(--thread-content-max-width);
  margin: 0 auto;
  padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 3 + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .oa-nav-item,
  .oa-sidebar-toggle,
  .oa-theme-toggle {
    transition: none;
  }
}
}

/* static/components/shimmer-text.css */
@layer components {
/* Ported from Apps SDK UI (src/components/ShimmerText/ShimmerText.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-shimmer-text {
  --shimmer-highlight: light-dark(var(--gray-200), var(--gray-900));

  display: inline-block;
  animation-delay: 0.6s;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: oa-shimmer-text;
  background: currentcolor
    linear-gradient(to left, currentcolor, var(--shimmer-highlight) 50%, currentcolor);
  background-clip: text;
  background-position: -100% top;
  background-repeat: no-repeat;
  background-size: 50% 200%;
  -webkit-text-fill-color: transparent;

  /* Preference: disable animations entirely, rather than leaving potentially *many* animations paused in the DOM. */
  &[data-idle] {
    animation: none;
    background: none;
    background-clip: unset;
    -webkit-text-fill-color: unset;
  }
}

@keyframes oa-shimmer-text {
  0% {
    background-position: -100% top;
  }

  70% {
    background-position: 250% top;
  }

  100% {
    background-position: 250% top;
  }
}
}

/* static/components/site-chrome.css */
@layer components {
/* Site chrome used by openagents-web's UiPage: the wordmark in the left
   panel. */
.oa-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.oa-wordmark:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
}

/* static/components/slider.css */
@layer components {
/*
 * Slider. Ported from Apps SDK UI `Slider.module.css` (MIT, see NOTICE) onto a
 * native <input type="range">. The filled range uses `--oa-slider-fill`. The
 * site CSP blocks inline style attributes, so the server emits the initial
 * fill rounded to 5% as `data-fill` (mapped by the presets below) and the
 * `oaSlider` Alpine component sets the exact value through the CSSOM
 * (`style.setProperty`, which CSP allows) as the value changes. Firefox draws
 * the fill natively with ::-moz-range-progress.
 */
.oa-slider {
  position: relative;
  width: 100%;
}

.oa-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 8px;
  color: var(--color-text);
  font-size: 14px;
}

.oa-slider__value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.oa-slider__unit {
  color: var(--color-text-secondary);
  font-size: 12px;
  user-select: none;
}

.oa-slider__input {
  --oa-slider-fill: 0%;

  display: block;
  width: 100%;
  height: 14px;
  margin: 0 0 6px;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.oa-slider__input[data-fill="0"] {
  --oa-slider-fill: 0%;
}

.oa-slider__input[data-fill="5"] {
  --oa-slider-fill: 5%;
}

.oa-slider__input[data-fill="10"] {
  --oa-slider-fill: 10%;
}

.oa-slider__input[data-fill="15"] {
  --oa-slider-fill: 15%;
}

.oa-slider__input[data-fill="20"] {
  --oa-slider-fill: 20%;
}

.oa-slider__input[data-fill="25"] {
  --oa-slider-fill: 25%;
}

.oa-slider__input[data-fill="30"] {
  --oa-slider-fill: 30%;
}

.oa-slider__input[data-fill="35"] {
  --oa-slider-fill: 35%;
}

.oa-slider__input[data-fill="40"] {
  --oa-slider-fill: 40%;
}

.oa-slider__input[data-fill="45"] {
  --oa-slider-fill: 45%;
}

.oa-slider__input[data-fill="50"] {
  --oa-slider-fill: 50%;
}

.oa-slider__input[data-fill="55"] {
  --oa-slider-fill: 55%;
}

.oa-slider__input[data-fill="60"] {
  --oa-slider-fill: 60%;
}

.oa-slider__input[data-fill="65"] {
  --oa-slider-fill: 65%;
}

.oa-slider__input[data-fill="70"] {
  --oa-slider-fill: 70%;
}

.oa-slider__input[data-fill="75"] {
  --oa-slider-fill: 75%;
}

.oa-slider__input[data-fill="80"] {
  --oa-slider-fill: 80%;
}

.oa-slider__input[data-fill="85"] {
  --oa-slider-fill: 85%;
}

.oa-slider__input[data-fill="90"] {
  --oa-slider-fill: 90%;
}

.oa-slider__input[data-fill="95"] {
  --oa-slider-fill: 95%;
}

.oa-slider__input[data-fill="100"] {
  --oa-slider-fill: 100%;
}

.oa-slider__input:focus {
  outline: none;
}

.oa-slider__input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Track (WebKit/Blink): the filled part is a gradient up to --oa-slider-fill. */
.oa-slider__input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-2xs);
  background: linear-gradient(
    to right,
    var(--slider-range-color) 0 var(--oa-slider-fill),
    var(--slider-track-color) var(--oa-slider-fill) 100%
  );
}

.oa-slider__input::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  appearance: none;
  background: var(--gray-0);
  box-shadow: inset 0 0 0 2px var(--slider-range-color);
  cursor: grab;
}

.oa-slider__input:active::-webkit-slider-thumb {
  cursor: grabbing;
}

.oa-slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 0 0 2px var(--green-600);
}

/* Track (Firefox) */
.oa-slider__input::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-2xs);
  background: var(--slider-track-color);
}

.oa-slider__input::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-2xs);
  background: var(--slider-range-color);
}

.oa-slider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--gray-0);
  box-shadow: inset 0 0 0 2px var(--slider-range-color);
  cursor: grab;
}

.oa-slider__input:focus-visible::-moz-range-thumb {
  box-shadow: inset 0 0 0 2px var(--green-600);
}

.oa-slider__marks {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
  color: var(--color-text);
  font-size: 12px;
}

.oa-slider__mark {
  overflow-wrap: break-word;
  text-align: center;
}
}

/* static/components/suggestions.css */
@layer components {
/* Suggestion chips (shell/suggestions.rs): a wrapping row of quiet pill
   buttons and links, under the home composer and under an answer. Values
   come from the Apps SDK UI tokens (MIT, see NOTICE). */

.oa-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--thread-content-max-width);
  margin: calc(var(--spacing) * 3) auto 0;
}
.oa-thread-column .oa-suggestions {
  justify-content: flex-start;
  margin: 0 0 calc(var(--spacing) * 6);
}

.oa-suggestion-form {
  display: contents;
}

.oa-suggestion-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: calc(var(--spacing) * 9);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3.5);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--font-text-sm-size);
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.oa-suggestion-chip:hover {
  background: var(--color-background-primary-ghost-hover);
  color: var(--color-text);
}
.oa-suggestion-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-suggestion-chip:disabled {
  cursor: default;
  opacity: 0.6;
}
}

/* static/components/switch.css */
@layer components {
/*
 * Switch. Ported from Apps SDK UI `Switch.module.css` (MIT, see NOTICE).
 * A native <input type="checkbox" role="switch"> sits transparent over the track.
 */
.oa-switch {
  display: inline-flex;
  align-items: flex-start;
  font-size: var(--font-text-sm-size);
  line-height: var(--font-text-sm-line-height);
  cursor: pointer;
  user-select: none;
}

.oa-switch[data-label-position="start"] {
  flex-direction: row-reverse;
}

.oa-switch[data-disabled] {
  cursor: not-allowed;
}

.oa-switch__track {
  position: relative;
  flex-shrink: 0;
  width: var(--switch-track-width);
  max-width: var(--switch-track-width);
  height: var(--switch-track-height);
  /* Align with the first label line; long labels can wrap. */
  top: var(--switch-track-top-offset, 1px);
  border-radius: var(--radius-full);
  background: var(--switch-track-color);
  transition: background-color 250ms var(--cubic-move);
}

.oa-switch__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .oa-switch:not([data-disabled]):hover .oa-switch__track:has(.oa-switch__input:not(:checked)) {
    background: var(--switch-track-color-hover);
  }
}

.oa-switch__track:has(.oa-switch__input:focus-visible) {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.oa-switch__track:has(.oa-switch__input:checked) {
  background: var(--switch-track-color-checked);
}

.oa-switch__track:has(.oa-switch__input:disabled) {
  background: var(--switch-track-color-disabled);
}

.oa-switch__track:has(.oa-switch__input:disabled:checked) {
  background: var(--switch-track-color-checked-disabled);
}

.oa-switch__thumb {
  position: absolute;
  top: var(--switch-thumb-offset);
  left: var(--switch-thumb-offset);
  display: block;
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: var(--radius-full);
  background: var(--switch-thumb-color);
  box-shadow: var(--switch-thumb-shadow);
  pointer-events: none;
  transition: transform 250ms var(--cubic-move);
}

.oa-switch__input:checked + .oa-switch__thumb {
  transform: translateX(
    calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset) * 2)
  );
}

.oa-switch__input:disabled + .oa-switch__thumb {
  background: var(--switch-thumb-color-disabled);
  box-shadow: none;
}

/* Padding keeps the spacing inside the clickable label. */
.oa-switch__label {
  display: flex;
  flex-direction: column;
}

.oa-switch:not([data-label-position="start"]) .oa-switch__label {
  padding-left: var(--switch-label-gap);
}

.oa-switch[data-label-position="start"] .oa-switch__label {
  padding-right: var(--switch-label-gap);
}

.oa-switch__description {
  color: var(--color-text-secondary);
}
}

/* static/components/tag-input.css */
@layer components {
/*
 * TagInput. Ported from Apps SDK UI `TagInput.module.css` (MIT, see NOTICE).
 * Without JavaScript the component is a plain comma-separated text field; the
 * `oaTagInput` Alpine component in forms.js turns entries into tags.
 */
.oa-tag-input {
  --tag-input-font-size: var(--control-font-size-md);
  --tag-input-height: 20px;
  --tag-input-tag-spacing: 6px;
  --min-rows: 1;

  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tag-input-tag-spacing);
  /* All rows plus spacing, N+1 to include the top spacing of the first row. */
  min-height: calc(
    (var(--min-rows) * var(--tag-input-height)) + ((var(--min-rows) + 1) * var(--tag-input-tag-spacing))
  );
  padding: var(--tag-input-tag-spacing) 12px;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
  cursor: text;
  outline: 0;
  transition: box-shadow 0.15s ease;
}

.oa-tag-input:has(.oa-tag-input__tag) {
  padding: var(--tag-input-tag-spacing);
}

.oa-tag-input[data-disabled] {
  opacity: 0.5;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .oa-tag-input:not([data-disabled]):hover {
    box-shadow: 0 0 0 1px light-dark(var(--gray-300), var(--gray-500)) inset;
  }
}

.oa-tag-input:not([data-disabled]):focus-within {
  box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
}

.oa-tag-input:not([data-disabled])[data-invalid] {
  box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
}

/* Sizes: 20 + 6 + 6 = 32 */
.oa-tag-input:where([data-size="md"]) {
  --tag-input-font-size: var(--control-font-size-md);
  --tag-input-height: 20px;
  --tag-input-tag-spacing: 6px;
}

/* 24 + 6 + 6 = 36 */
.oa-tag-input:where([data-size="lg"]) {
  --tag-input-font-size: var(--control-font-size-md);
  --tag-input-height: 24px;
  --tag-input-tag-spacing: 6px;
}

/* 24 + 8 + 8 = 40 */
.oa-tag-input:where([data-size="xl"]) {
  --tag-input-font-size: var(--control-font-size-lg);
  --tag-input-height: 24px;
  --tag-input-tag-spacing: 8px;
}

/* 28 + 8 + 8 = 44 */
.oa-tag-input:where([data-size="2xl"]) {
  --tag-input-font-size: var(--control-font-size-lg);
  --tag-input-height: 28px;
  --tag-input-tag-spacing: 8px;
}

/* 32 + 8 + 8 = 48 */
.oa-tag-input:where([data-size="3xl"]) {
  --tag-input-font-size: var(--control-font-size-lg);
  --tag-input-height: 32px;
  --tag-input-tag-spacing: 8px;
}

.oa-tag-input__tag {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: var(--tag-input-height);
  padding: 4px 4px 4px 8px;
  border-radius: var(--radius-md);
  background-color: light-dark(
    var(--color-background-secondary-soft),
    var(--color-background-secondary-solid)
  );
  color: light-dark(var(--color-text-secondary-soft), var(--color-text-secondary-solid));
  line-height: 1.4;
  transition: background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .oa-tag-input__tag:hover {
    background-color: light-dark(
      var(--color-background-secondary-soft-hover),
      var(--color-background-secondary-solid-hover)
    );
  }
}

.oa-tag-input__tag:focus-within {
  background-color: light-dark(
    var(--color-background-secondary-soft-hover),
    var(--color-background-secondary-solid-hover)
  );
}

.oa-tag-input__tag[data-duplicate] {
  animation: oa-tag-input-shake 0.5s ease;
}

.oa-tag-input__tag-value {
  font-size: var(--tag-input-font-size);
  white-space: nowrap;
}

.oa-tag-input__tag-remove {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.oa-tag-input__tag-remove:hover,
.oa-tag-input__tag-remove:focus-visible {
  opacity: 1;
}

.oa-tag-input__tag-remove:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 1px;
}

.oa-tag-input__control {
  display: block;
  flex-grow: 1;
  min-width: 20px;
  max-width: 100%;
  height: var(--tag-input-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text);
  font-size: var(--tag-input-font-size);
  line-height: 1.4;
}

.oa-tag-input__control:focus {
  outline: 0;
}

.oa-tag-input__control::placeholder {
  color: var(--color-text-tertiary);
}

.oa-tag-input__control:disabled {
  color: var(--color-text-tertiary);
}

.oa-tag-input__control:-webkit-autofill,
.oa-tag-input__control:-webkit-autofill:focus,
.oa-tag-input__control:-webkit-autofill:hover {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  transition:
    background-color 0s 50000s,
    box-shadow 0s 50000s,
    filter 0s 50000s !important;
}

.oa-tag-input__limit {
  width: 100%;
  margin-top: 2px;
  color: var(--color-text);
  font-size: var(--font-text-xs-size);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@keyframes oa-tag-input-shake {
  0% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-5px);
  }

  40%,
  80% {
    transform: translateX(5px);
  }

  100% {
    transform: translateX(0);
  }
}
}

/* static/components/text-link.css */
@layer components {
/* Ported from Apps SDK UI (src/components/TextLink/TextLink.module.css), MIT. See crates/openagents-ui/NOTICE. */

.oa-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--link-gap);
  /* Used to round the focus ring */
  border-radius: var(--link-radius);
  color: currentcolor;
  cursor: pointer;
  font-weight: var(--link-font-weight);
  overflow-wrap: anywhere;
  transition-duration: var(--transition-duration-basic);
  transition-property: opacity, color, box-shadow, text-decoration-color;
  transition-timing-function: var(--transition-ease-basic);

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      color: color-mix(in oklab, currentcolor 80%, transparent);

      /* stylelint-disable-next-line */
      :is(.text-secondary, .tw\:text-secondary) & {
        color: var(--color-text);
      }

      /* stylelint-disable-next-line */
      :is(.text-tertiary, .tw\:text-tertiary) & {
        color: var(--color-text-secondary);
      }
    }
  }

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

  &[data-underline] {
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, currentcolor 70%, transparent);
    text-underline-offset: var(--link-underline-decoration-offset);
  }

  &[data-primary] {
    color: var(--link-primary-text-color);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--link-primary-text-color-hover);
      }
    }
  }
}
}

/* static/components/textarea.css */
@layer components {
/*
 * Textarea. Ported from Apps SDK UI `Textarea.module.css` (MIT, see NOTICE).
 * Auto-grow uses `field-sizing: content` where supported; the `oaTextareaAutogrow`
 * Alpine component in forms.js covers other browsers.
 */
.oa-textarea {
  --textarea-line-height: 20px;
  --textarea-font-weight: var(--font-weight-normal);
  --textarea-color: var(--color-text);
  --textarea-min-rows: 3;
  --textarea-max-rows: 12;
  --textarea-base-height: var(--control-size-md);
  --textarea-font-size: var(--control-font-size-md);
  --textarea-radius: var(--control-radius-md);
  --textarea-gutter-x: var(--control-gutter-md);
  --textarea-gutter-y: calc(0.5 * calc(var(--textarea-base-height) - var(--textarea-line-height)));
  --textarea-min-height: calc(
    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-min-rows))
  );
  --textarea-max-height: calc(
    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-max-rows))
  );

  position: relative;
  overflow: hidden;
  display: flex;
  width: 100%;
  border-radius: var(--textarea-radius);
  color: var(--textarea-color);
  cursor: text;
  font-size: var(--textarea-font-size);
  font-weight: var(--textarea-font-weight);
  transition-duration: var(--transition-duration-basic);
  transition-property: color, box-shadow, background-color;
  transition-timing-function: var(--transition-ease-basic);
}

/* Row presets. The site CSP blocks inline style attributes, so Textarea
   emits data-min-rows (1-12) and data-max-rows (1-24) and these rules map
   them onto the row variables. */
.oa-textarea[data-min-rows="1"] {
  --textarea-min-rows: 1;
}

.oa-textarea[data-min-rows="2"] {
  --textarea-min-rows: 2;
}

.oa-textarea[data-min-rows="3"] {
  --textarea-min-rows: 3;
}

.oa-textarea[data-min-rows="4"] {
  --textarea-min-rows: 4;
}

.oa-textarea[data-min-rows="5"] {
  --textarea-min-rows: 5;
}

.oa-textarea[data-min-rows="6"] {
  --textarea-min-rows: 6;
}

.oa-textarea[data-min-rows="7"] {
  --textarea-min-rows: 7;
}

.oa-textarea[data-min-rows="8"] {
  --textarea-min-rows: 8;
}

.oa-textarea[data-min-rows="9"] {
  --textarea-min-rows: 9;
}

.oa-textarea[data-min-rows="10"] {
  --textarea-min-rows: 10;
}

.oa-textarea[data-min-rows="11"] {
  --textarea-min-rows: 11;
}

.oa-textarea[data-min-rows="12"] {
  --textarea-min-rows: 12;
}

.oa-textarea[data-max-rows="1"] {
  --textarea-max-rows: 1;
}

.oa-textarea[data-max-rows="2"] {
  --textarea-max-rows: 2;
}

.oa-textarea[data-max-rows="3"] {
  --textarea-max-rows: 3;
}

.oa-textarea[data-max-rows="4"] {
  --textarea-max-rows: 4;
}

.oa-textarea[data-max-rows="5"] {
  --textarea-max-rows: 5;
}

.oa-textarea[data-max-rows="6"] {
  --textarea-max-rows: 6;
}

.oa-textarea[data-max-rows="7"] {
  --textarea-max-rows: 7;
}

.oa-textarea[data-max-rows="8"] {
  --textarea-max-rows: 8;
}

.oa-textarea[data-max-rows="9"] {
  --textarea-max-rows: 9;
}

.oa-textarea[data-max-rows="10"] {
  --textarea-max-rows: 10;
}

.oa-textarea[data-max-rows="11"] {
  --textarea-max-rows: 11;
}

.oa-textarea[data-max-rows="12"] {
  --textarea-max-rows: 12;
}

.oa-textarea[data-max-rows="13"] {
  --textarea-max-rows: 13;
}

.oa-textarea[data-max-rows="14"] {
  --textarea-max-rows: 14;
}

.oa-textarea[data-max-rows="15"] {
  --textarea-max-rows: 15;
}

.oa-textarea[data-max-rows="16"] {
  --textarea-max-rows: 16;
}

.oa-textarea[data-max-rows="17"] {
  --textarea-max-rows: 17;
}

.oa-textarea[data-max-rows="18"] {
  --textarea-max-rows: 18;
}

.oa-textarea[data-max-rows="19"] {
  --textarea-max-rows: 19;
}

.oa-textarea[data-max-rows="20"] {
  --textarea-max-rows: 20;
}

.oa-textarea[data-max-rows="21"] {
  --textarea-max-rows: 21;
}

.oa-textarea[data-max-rows="22"] {
  --textarea-max-rows: 22;
}

.oa-textarea[data-max-rows="23"] {
  --textarea-max-rows: 23;
}

.oa-textarea[data-max-rows="24"] {
  --textarea-max-rows: 24;
}

/* Sizes */
.oa-textarea:where([data-size="3xs"]) {
  --textarea-base-height: var(--control-size-3xs);
  --textarea-font-size: var(--control-font-size-sm);
  --textarea-radius: var(--control-radius-sm);
  --textarea-gutter-x: var(--control-gutter-xs);
}

.oa-textarea:where([data-size="2xs"]) {
  --textarea-base-height: var(--control-size-2xs);
  --textarea-font-size: var(--control-font-size-sm);
  --textarea-radius: var(--control-radius-sm);
  --textarea-gutter-x: var(--control-gutter-xs);
}

.oa-textarea:where([data-size="xs"]) {
  --textarea-base-height: var(--control-size-xs);
  --textarea-font-size: var(--control-font-size-md);
  --textarea-radius: var(--control-radius-sm);
  --textarea-gutter-x: var(--control-gutter-xs);
}

.oa-textarea:where([data-size="sm"]) {
  --textarea-base-height: var(--control-size-sm);
  --textarea-font-size: var(--control-font-size-md);
  --textarea-radius: var(--control-radius-md);
  --textarea-gutter-x: var(--control-gutter-sm);
}

.oa-textarea:where([data-size="md"]) {
  --textarea-base-height: var(--control-size-md);
  --textarea-font-size: var(--control-font-size-md);
  --textarea-radius: var(--control-radius-md);
  --textarea-gutter-x: var(--control-gutter-md);
}

.oa-textarea:where([data-size="lg"]) {
  --textarea-base-height: var(--control-size-lg);
  --textarea-font-size: var(--control-font-size-md);
  --textarea-radius: var(--control-radius-md);
  --textarea-gutter-x: var(--control-gutter-md);
}

.oa-textarea:where([data-size="xl"]) {
  --textarea-base-height: var(--control-size-xl);
  --textarea-font-size: var(--control-font-size-lg);
  --textarea-radius: var(--control-radius-lg);
  --textarea-gutter-x: var(--control-gutter-lg);
}

.oa-textarea:where([data-size="2xl"]) {
  --textarea-base-height: var(--control-size-2xl);
  --textarea-font-size: var(--control-font-size-lg);
  --textarea-radius: var(--control-radius-xl);
  --textarea-gutter-x: var(--control-gutter-xl);
}

.oa-textarea:where([data-size="3xl"]) {
  --textarea-base-height: var(--control-size-3xl);
  --textarea-font-size: var(--control-font-size-lg);
  --textarea-radius: var(--control-radius-xl);
  --textarea-gutter-x: var(--control-gutter-xl);
}

/* Gutter sizes */
.oa-textarea:where([data-gutter-size="2xs"]) {
  --textarea-gutter-x: var(--control-gutter-2xs);
}

.oa-textarea:where([data-gutter-size="xs"]) {
  --textarea-gutter-x: var(--control-gutter-xs);
}

.oa-textarea:where([data-gutter-size="sm"]) {
  --textarea-gutter-x: var(--control-gutter-sm);
}

.oa-textarea:where([data-gutter-size="md"]) {
  --textarea-gutter-x: var(--control-gutter-md);
}

.oa-textarea:where([data-gutter-size="lg"]) {
  --textarea-gutter-x: var(--control-gutter-lg);
}

.oa-textarea:where([data-gutter-size="xl"]) {
  --textarea-gutter-x: var(--control-gutter-xl);
}

/* Outline variant */
.oa-textarea:where([data-variant="outline"]) {
  box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
}

@media (hover: hover) and (pointer: fine) {
  .oa-textarea:where([data-variant="outline"]):not([data-disabled]):hover {
    box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
  }
}

.oa-textarea:where([data-variant="outline"]):not([data-disabled]):focus-within {
  box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
}

.oa-textarea:where([data-variant="outline"]):not([data-disabled])[data-invalid] {
  box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
}

/* Soft variant */
.oa-textarea:where([data-variant="soft"]) {
  background-color: var(--input-soft-background-color);
}

.oa-textarea:where([data-variant="soft"]):not([data-disabled]):focus-within {
  box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
}

.oa-textarea:where([data-variant="soft"]):not([data-disabled])[data-invalid] {
  box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
}

.oa-textarea[data-invalid] ::selection {
  background-color: var(--red-a50);
}

.oa-textarea[data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.oa-textarea__control {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--textarea-min-height);
  padding: var(--textarea-gutter-y) var(--textarea-gutter-x);
  border: 0;
  border-radius: 0;
  appearance: none;
  background: none;
  box-shadow: none;
  color: inherit;
  /* Prevent Firefox autofill coloring */
  filter: none;
  font: inherit;
  line-height: var(--textarea-line-height);
  resize: vertical;
}

.oa-textarea:where([data-auto-grow]) .oa-textarea__control {
  max-height: var(--textarea-max-height);
  field-sizing: content;
  resize: none;
}

.oa-textarea__control:focus {
  outline: 0;
}

.oa-textarea__control:disabled {
  cursor: not-allowed;
}

.oa-textarea__control::placeholder {
  color: var(--input-placeholder-text-color);
  /* Firefox uses opacity instead of color for placeholders. */
  opacity: 1;
}

.oa-textarea__control:-webkit-autofill,
.oa-textarea__control:-webkit-autofill:focus,
.oa-textarea__control:-webkit-autofill:hover {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  transition:
    background-color 0s 50000s,
    box-shadow 0s 50000s,
    filter 0s 50000s !important;
}

.oa-textarea__control:-webkit-autofill::first-line {
  font-size: 16px !important;
  transition: font-size 0s 50000s !important;
}
}

/* static/components/thread.css */
@layer components {
/* Conversation thread (UI-09): messages in a centered column that scrolls
   between the header and the docked composer, and the home page's centered
   composer. Values come from the Apps SDK UI tokens (MIT, see NOTICE); the
   user bubble uses the product-only message roles from composer.css. */

.oa-thread-view {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.oa-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.oa-thread-column {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--thread-content-max-width);
  margin: 0 auto;
  padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4) calc(var(--spacing) * 4);
}

.oa-message {
  display: flex;
  flex-direction: column;
  margin: 0 0 calc(var(--spacing) * 6);
  overflow-wrap: anywhere;
  content-visibility: auto;
  contain-intrinsic-size: auto 100px;
}
.oa-message[data-role="user"] {
  align-items: flex-end;
}
.oa-message-author {
  margin: 0 0 calc(var(--spacing) * 1);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  font-weight: var(--font-weight-medium);
}
.oa-message-bubble {
  box-sizing: border-box;
  max-width: min(var(--user-chat-width, 70%), 100%);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
  border-radius: var(--radius-3xl);
  background: var(--color-background-user-message);
  color: var(--color-text-user-message);
  font-size: var(--font-text-md-size);
  line-height: var(--font-text-md-line-height);
  white-space: pre-wrap;
}
.oa-message-content {
  min-width: 0;
  color: var(--color-text);
}
.oa-message-status {
  margin: 0;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
}

.oa-thread-notice {
  margin: 0 0 calc(var(--spacing) * 4);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
}
.oa-thread-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
}
.oa-thread-error {
  margin: 0 0 calc(var(--spacing) * 4);
  color: var(--color-text-danger);
}

.oa-composer-feedback {
  margin: calc(var(--spacing) * 2) 0 0;
  padding: 0 calc(var(--spacing) * 3);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
}

.oa-composer-feedback:empty {
  margin: 0;
}

/* The home page: the composer centered in the content area, and the legal
   links small and centered along the bottom of the main area. */
/* The new chat: link cards centered where the thread would be, over the
   docked composer and its starter questions. */
.oa-home-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
/* The same 16px gutters as the docked composer, phone width included. */
.oa-thread-column.oa-home-stage {
  padding-inline: calc(var(--spacing) * 4);
}
.oa-main-composer .oa-suggestions {
  margin: 0 0 calc(var(--spacing) * 3);
}
/* At phone width the starter questions are one row that scrolls sideways,
   so they don't push the cards off the screen. */
@media (max-width: 40rem) {
  .oa-main-composer .oa-suggestions {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .oa-main-composer .oa-suggestion-chip {
    flex: none;
  }
}
.oa-home-legal {
  flex: none;
  padding: calc(var(--spacing) * 2) 0 0;
}
.oa-home-legal .oa-sidebar-legal {
  padding: 0;
}

@media (max-width: 40rem) {
  .oa-thread-column {
    padding-inline: calc(var(--spacing) * 3);
  }
  .oa-message-bubble {
    max-width: 85%;
  }
}

/* A task started from the chat (TaskRow): one compact line in the thread,
   linking to the task's page. */
.oa-task-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-width: 0;
  margin: 0 0 calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-text-sm-size);
  line-height: var(--font-text-sm-line-height);
  text-decoration: none;
}
a.oa-task-row:hover {
  background: var(--color-background-primary-ghost-hover);
  color: var(--color-text);
}
a.oa-task-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-ring);
}
.oa-task-row-icon {
  display: inline-flex;
  flex: none;
  color: var(--color-text-tertiary);
}
.oa-task-row-title {
  flex: none;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}
.oa-task-row-detail {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oa-task-row-status {
  flex: none;
  margin-inline-start: auto;
  --indicator-size: 12px;
}
}

/* static/components/tooltip.css */
@layer components {
/*
 * Tooltip. Ported from Apps SDK UI Tooltip.module.css (MIT, see NOTICE). A
 * manual popover shown by overlays.js on hover and keyboard focus; the box
 * reset and placement come from popover.css (data-side defaults to top).
 */

.oa-tooltip {
  max-width: 300px;
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow), var(--shadow-hairline);
  font-size: 14px;
  line-height: 1.45;
  cursor: default;

  &[data-gutter-size="sm"] {
    padding: 8px 12px;
  }

  &[data-gutter-size="md"] {
    padding: 12px 16px;
  }

  &[data-gutter-size="lg"] {
    padding: 14px 18px;
  }

  &[data-compact="true"] {
    padding: 2px 8px;
    background: var(--gray-700);
    color: var(--gray-0);
    font-size: 14px;
  }
}

@supports selector(:popover-open) {
  .oa-tooltip {
    opacity: 0;
    transform: scale(0.95);
    transition-behavior: allow-discrete;
    transition-duration: 0.2s;
    transition-property: opacity, transform, overlay, display;
    transition-timing-function: var(--cubic-exit);

    &:popover-open {
      opacity: 1;
      transform: scale(1);
      transition-timing-function: var(--cubic-enter);
    }
  }

  @starting-style {
    .oa-tooltip:popover-open {
      opacity: 0;
      transform: scale(0.95);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .oa-tooltip {
    transition: none;
  }
}

/* TriggerDecorator: a dotted underline on a text trigger while open. */
.oa-tooltip-root[data-decorated] > :first-child {
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: transparent;
}

.oa-tooltip-root[data-decorated][data-state="open"] > :first-child {
  text-decoration-color: var(--color-text-tertiary);
}
}