@agent-native/core 0.113.0 → 0.114.0

package/src/styles/agent-native.css

@@ -0,0 +1,938 @@
+/**
+ * Agent-native shared Tailwind v4 stylesheet.
+ *
+ * Templates should import this in their `app/global.css` AFTER `@import "tailwindcss";`:
+ *
+ *   @import "tailwindcss";
+ *   @import "@agent-native/core/styles/agent-native.css";
+ *
+ * It provides:
+ *   - `@source` directives so Tailwind scans @agent-native/core's compiled
+ *     client files for class names (AgentPanel, AssistantChat, onboarding, etc.)
+ *   - `@custom-variant dark` for the `.dark` class-based dark-mode strategy
+ *   - shadcn/ui-compatible `@theme inline` color tokens so utilities resolve
+ *     `hsl(var(--background))` at use time (required for `.dark`, `.light`, and
+ *     other scoped overrides on subtrees).
+ *   - Full shadcn/ui animation utilities via tw-animate-css (animate-in,
+ *     animate-out, fade, zoom, slide, spin) plus accordion keyframes.
+ *   - The official typography plugin.
+ *
+ * Templates remain in control of their own colour palette: they only need
+ * to define the raw `--background`, `--foreground`, etc. variables — this
+ * file maps those to Tailwind utilities like `bg-background`, `text-foreground`.
+ */
+
+@import "./agent-conversation.css";
+@import "./rich-markdown-editor.css";
+@import "./blocks.css";
+@import "./chat-history-list.css";
+
+/* Scan @agent-native/core's compiled client output for Tailwind classes.
+   Path is resolved relative to THIS file. After build, this CSS lives at
+   dist/styles/agent-native.css, so `../client/**` resolves to dist/client/**. */
+@source "../client/**/*.{js,mjs,ts,tsx}";
+@source "../client/**/onboarding/**/*.{js,mjs,ts,tsx}";
+
+/* Class-based dark mode (matches v3 darkMode: ["class"]). */
+@custom-variant dark (&:is(.dark *));
+
+@plugin "@tailwindcss/typography";
+
+/* shadcn/ui animation utilities (animate-in, animate-out, fade-in/out,
+   zoom-in/out, slide-in-from-*, spin-in, etc.). */
+@import "tw-animate-css";
+
+:root {
+  --agent-native-viewport-height: 100vh;
+}
+
+@supports (height: 100dvh) {
+  :root {
+    --agent-native-viewport-height: 100dvh;
+  }
+}
+
+/* Shared shell depth.
+   Use these classes on app layouts that have a persistent left nav:
+
+   <div className="agent-layout-shell ...">
+     <aside className="agent-layout-left-drawer ...">...</aside>
+     <main className="agent-layout-main-surface ...">...</main>
+   </div>
+
+   AgentSidebar applies the same classes internally for the right agent drawer. */
+.agent-sidebar-shell,
+.agent-layout-shell {
+  --agent-native-lower-surface: hsl(
+    var(--sidebar-background, var(--background))
+  );
+  --agent-native-raised-surface: hsl(var(--background));
+  --agent-native-card-surface: hsl(var(--card));
+  --agent-native-raised-radius: 8px;
+  height: var(--agent-native-viewport-height);
+  min-height: 0;
+  background: var(--agent-native-lower-surface);
+}
+
+@supports (background: color-mix(in srgb, white, black)) {
+  .agent-sidebar-shell,
+  .agent-layout-shell {
+    --agent-native-lower-surface: color-mix(
+      in srgb,
+      hsl(var(--sidebar-background, var(--background))) 98%,
+      black
+    );
+  }
+
+  .dark .agent-sidebar-shell,
+  .dark .agent-layout-shell,
+  .dark.agent-sidebar-shell,
+  .dark.agent-layout-shell {
+    --agent-native-lower-surface: color-mix(
+      in srgb,
+      hsl(var(--sidebar-background, var(--background))) 94%,
+      black
+    );
+  }
+}
+
+.agent-layout-left-drawer,
+.agent-sidebar-panel[data-agent-sidebar-layout="desktop"],
+.agent-sidebar-panel[data-agent-sidebar-layout="mobile"] {
+  background: var(--agent-native-lower-surface);
+}
+
+.agent-layout-left-drawer {
+  background: var(--agent-native-lower-surface) !important;
+}
+
+.agent-layout-left-drawer[data-collapsed] {
+  overflow: clip;
+  width: var(--agent-layout-left-drawer-width, auto);
+  transition: width 260ms var(--ease-drawer);
+}
+
+.agent-layout-left-drawer[data-collapsed="true"] {
+  width: var(--agent-layout-left-drawer-collapsed-width, 3.5rem);
+}
+
+.agent-layout-left-drawer[data-collapsed="false"] {
+  width: var(--agent-layout-left-drawer-expanded-width, 14rem);
+}
+
+.agent-layout-left-drawer .bg-sidebar {
+  background: var(--agent-native-lower-surface) !important;
+}
+
+.agent-layout-shell .agent-layout-left-drawer {
+  border-inline-end-color: transparent !important;
+}
+
+.agent-layout-shell
+  .agent-layout-left-drawer
+  > :where(.border-e, .border-r):first-child {
+  border-inline-end-color: transparent !important;
+  border-right-color: transparent !important;
+}
+
+.agent-sidebar-panel > .agent-sidebar-panel-inner {
+  background: inherit;
+}
+
+.agent-sidebar-resize-handle {
+  background: transparent;
+}
+
+.agent-layout-main-surface,
+.agent-sidebar-main-surface {
+  position: relative;
+  z-index: 1;
+  container: agent-native-main / inline-size;
+  background: var(--agent-native-raised-surface);
+  transition:
+    border-radius 260ms var(--ease-drawer),
+    border-color 260ms var(--ease-drawer),
+    box-shadow 260ms var(--ease-drawer);
+}
+
+.agent-sidebar-shell[data-agent-sidebar-resizing="true"],
+.agent-sidebar-shell[data-agent-sidebar-resizing="true"] * {
+  transition: none !important;
+}
+
+.agent-native-app-main {
+  container: agent-native-main / inline-size;
+}
+
+@media (min-width: 768px) {
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :first-child
+    > :where(header, div).border-b,
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :where(header, div).border-b,
+  .agent-layout-shell
+    .agent-layout-left-drawer
+    > :where(header, div).border-b:first-child,
+  .agent-layout-shell
+    .agent-layout-left-drawer
+    > :first-child
+    > :where(header, div).border-b,
+  .agent-layout-shell .agent-native-shell-topbar {
+    border-bottom-color: transparent !important;
+  }
+
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :first-child
+    > :where(header, div).border-b,
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :where(header, div).border-b {
+    background-color: var(--agent-native-raised-surface) !important;
+  }
+
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :first-child
+    > :where(header, div).border-b.h-12,
+  .agent-layout-shell
+    :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+    > :where(header, div).border-b.h-12 {
+    min-height: 4rem;
+    height: 4rem;
+  }
+}
+
+.dark
+  .agent-layout-shell
+  :where(.agent-layout-main-surface, .agent-sidebar-main-surface)
+  :where(.bg-card) {
+  background-color: var(--agent-native-card-surface) !important;
+}
+
+@media (min-width: 768px) {
+  .agent-layout-main-surface,
+  .agent-layout-shell > .agent-sidebar-shell > .agent-sidebar-main-surface {
+    border-start-start-radius: var(--agent-native-raised-radius);
+    border-end-start-radius: var(--agent-native-raised-radius);
+    box-shadow: none;
+  }
+
+  .agent-sidebar-main-surface[data-agent-sidebar-main-state="open"][data-agent-sidebar-main-position="right"] {
+    border-start-end-radius: var(--agent-native-raised-radius);
+    border-end-end-radius: var(--agent-native-raised-radius);
+    box-shadow: none;
+  }
+
+  .agent-sidebar-main-surface[data-agent-sidebar-main-state="open"][data-agent-sidebar-main-position="left"] {
+    border-start-start-radius: var(--agent-native-raised-radius);
+    border-end-start-radius: var(--agent-native-raised-radius);
+    box-shadow: none;
+  }
+}
+
+/* Shared agent sidebar entry/exit transitions.
+   `@starting-style` gives newly-mounted panels a real before-change style, so
+   opening animates in as reliably as closing animates out. */
+.agent-sidebar-panel[data-agent-sidebar-animation="desktop"] {
+  width: 0;
+  overflow: clip;
+  transition: width 260ms var(--ease-drawer);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-resizing="true"] {
+  transition: none;
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-state="open"] {
+  width: var(--agent-sidebar-width);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="desktop"]
+  > .agent-sidebar-panel-inner {
+  width: var(--agent-sidebar-width);
+  min-width: var(--agent-sidebar-width);
+  max-width: var(--agent-sidebar-width);
+  height: 100%;
+  transform: var(--agent-sidebar-inner-closed-transform, translateX(100%));
+  will-change: transform;
+  transition: transform 260ms var(--ease-drawer);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-state="open"]
+  > .agent-sidebar-panel-inner {
+  transform: translateX(0);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="mobile"] {
+  transform: var(
+    --agent-sidebar-closed-transform,
+    translateX(calc(100% + 1px))
+  );
+  will-change: transform;
+  transition: transform 260ms var(--ease-drawer);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="mobile"][data-agent-sidebar-state="open"] {
+  transform: translateX(0);
+}
+
+.agent-sidebar-backdrop[data-agent-sidebar-animation="mobile"] {
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+.agent-sidebar-backdrop[data-agent-sidebar-animation="mobile"][data-agent-sidebar-state="open"] {
+  opacity: 1;
+}
+
+@starting-style {
+  .agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-state="open"] {
+    width: 0;
+  }
+
+  .agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-state="open"]
+    > .agent-sidebar-panel-inner {
+    transform: var(--agent-sidebar-inner-closed-transform, translateX(100%));
+  }
+
+  .agent-sidebar-panel[data-agent-sidebar-animation="mobile"][data-agent-sidebar-state="open"] {
+    transform: var(
+      --agent-sidebar-closed-transform,
+      translateX(calc(100% + 1px))
+    );
+  }
+
+  .agent-sidebar-backdrop[data-agent-sidebar-animation="mobile"][data-agent-sidebar-state="open"] {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-layout-left-drawer[data-collapsed],
+  .agent-sidebar-panel[data-agent-sidebar-animation],
+  .agent-sidebar-panel[data-agent-sidebar-animation="desktop"]
+    > .agent-sidebar-panel-inner,
+  .agent-sidebar-backdrop[data-agent-sidebar-animation] {
+    transition: none;
+  }
+}
+
+@theme inline {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-bounce-once: bounce-once 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-collapse: cubic-bezier(0.2, 0, 0, 1);
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+  @keyframes bounce-once {
+    0% {
+      transform: translateY(0);
+    }
+    35% {
+      transform: translateY(-8px);
+    }
+    65% {
+      transform: translateY(-2px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+}
+
+/* Border-color compatibility shim:
+   In Tailwind v3, the preflight set the default border colour to
+   `hsl(var(--border))`. v4 drops that — borders default to currentColor.
+   Many of our components/templates use `border` or `border-t/b/l/r` without
+   an explicit colour and rely on the v3 behaviour. Keep that working. */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: hsl(var(--border));
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: gray transparent;
+  }
+
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+}
+
+/* Appearance presets.
+   Applied via `<html data-appearance="...">` so the user can switch the
+   background tint and accent without editing the template's source. Presets
+   override the most visible HSL vars (background, accent, primary, ring,
+   sidebar tint); everything else inherits from the template's :root / .dark.
+   The `default` preset is the absence of the attribute — no overrides. */
+:root[data-appearance="warm"] {
+  --background: 35 30% 97%;
+  --sidebar-background: 35 28% 95%;
+  --accent: 30 35% 92%;
+  --muted: 35 25% 94%;
+  --primary: 25 65% 45%;
+  --ring: 25 55% 50%;
+}
+.dark[data-appearance="warm"] {
+  --background: 28 14% 7%;
+  --sidebar-background: 28 14% 5%;
+  --accent: 28 12% 14%;
+  --muted: 28 10% 12%;
+  --primary: 30 65% 65%;
+  --ring: 30 55% 55%;
+}
+
+:root[data-appearance="ocean"] {
+  --background: 210 35% 97%;
+  --sidebar-background: 210 32% 95%;
+  --accent: 200 40% 92%;
+  --muted: 210 28% 94%;
+  --primary: 205 70% 42%;
+  --ring: 205 60% 50%;
+}
+.dark[data-appearance="ocean"] {
+  --background: 215 25% 8%;
+  --sidebar-background: 215 28% 6%;
+  --accent: 215 22% 15%;
+  --muted: 215 20% 12%;
+  --primary: 200 75% 65%;
+  --ring: 200 65% 55%;
+}
+
+:root[data-appearance="forest"] {
+  --background: 130 22% 97%;
+  --sidebar-background: 130 20% 95%;
+  --accent: 135 28% 92%;
+  --muted: 130 18% 94%;
+  --primary: 145 55% 35%;
+  --ring: 145 45% 45%;
+}
+.dark[data-appearance="forest"] {
+  --background: 140 14% 7%;
+  --sidebar-background: 140 14% 5%;
+  --accent: 140 12% 14%;
+  --muted: 140 10% 12%;
+  --primary: 145 50% 60%;
+  --ring: 145 40% 50%;
+}
+
+:root[data-appearance="rose"] {
+  --background: 340 35% 98%;
+  --sidebar-background: 340 32% 96%;
+  --accent: 345 40% 93%;
+  --muted: 340 28% 95%;
+  --primary: 345 60% 50%;
+  --ring: 345 50% 55%;
+}
+.dark[data-appearance="rose"] {
+  --background: 340 14% 8%;
+  --sidebar-background: 340 14% 6%;
+  --accent: 340 14% 15%;
+  --muted: 340 12% 12%;
+  --primary: 345 65% 65%;
+  --ring: 345 55% 55%;
+}
+
+:root[data-appearance="slate"] {
+  --background: 215 16% 96%;
+  --sidebar-background: 215 14% 94%;
+  --accent: 215 18% 91%;
+  --muted: 215 14% 93%;
+  --primary: 215 25% 25%;
+  --ring: 215 20% 40%;
+}
+.dark[data-appearance="slate"] {
+  --background: 215 14% 8%;
+  --sidebar-background: 215 14% 6%;
+  --accent: 215 12% 14%;
+  --muted: 215 10% 12%;
+  --primary: 215 15% 75%;
+  --ring: 215 12% 60%;
+}
+
+/* Settings sections: animate between closed and intrinsic open height. */
+.agent-native-settings-section-body {
+  display: flow-root;
+  height: auto;
+  overflow: hidden;
+  overflow: clip;
+  opacity: 1;
+  clip-path: inset(0);
+  interpolate-size: allow-keywords;
+  transition:
+    height 200ms var(--ease-collapse),
+    opacity 150ms ease,
+    clip-path 200ms var(--ease-collapse);
+}
+
+.agent-native-settings-section-body[data-state="closed"] {
+  height: 0;
+  opacity: 0;
+  clip-path: inset(0 0 100% 0);
+  pointer-events: none;
+}
+
+@starting-style {
+  .agent-native-settings-section-body[data-state="open"] {
+    height: 0;
+    opacity: 0;
+    clip-path: inset(0 0 100% 0);
+  }
+}
+
+@supports not (interpolate-size: allow-keywords) {
+  .agent-native-settings-section-body {
+    height: auto;
+    max-height: 64rem;
+    transition:
+      max-height 200ms var(--ease-collapse),
+      opacity 150ms ease,
+      clip-path 200ms var(--ease-collapse);
+  }
+
+  .agent-native-settings-section-body[data-state="closed"] {
+    max-height: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-native-settings-section-body {
+    transition: opacity 150ms ease;
+  }
+}
+
+/* Full settings page section bodies.
+   The framework's shared settings sections (LLM, App model defaults, Agent
+   limits, Email, Account, Secrets, Usage, Voice, Automations, A2A, hosting
+   cards, etc.) are authored dense for the compact agent sidebar. On the
+   full-width settings page they render inside polished shadcn-style cards
+   (PageSettingsSection), so bump the smallest fixed type up to a comfortable,
+   consistent reading size that matches the app-owned General/Team cards.
+   Scoped to `[data-agent-native-settings-page]` (only PageSettingsSection's
+   body) so app-owned tab content is never affected. The `.text-[…px]` classes
+   are Tailwind arbitrary values; the double-class specificity here wins. */
+[data-agent-native-settings-page] .text-\[10px\] {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+[data-agent-native-settings-page] .text-\[11px\] {
+  font-size: 0.8125rem;
+  line-height: 1.15rem;
+}
+[data-agent-native-settings-page] .text-\[12px\] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+[data-agent-native-settings-page] .text-\[13px\] {
+  font-size: 0.9375rem;
+  line-height: 1.4rem;
+}
+
+/* Composer toolbar: keep the model name + version readable on narrow
+   chatfields. The bordered composer box is a size container; below 370px
+   wide (e.g. a narrow agent sidebar) we drop the reasoning-level suffix
+   ("· Auto") so the model name + version never truncates. The reasoning
+   level always stays reachable via the model picker popover. */
+.agent-composer-root {
+  container-type: inline-size;
+  container-name: agent-composer;
+}
+@container agent-composer (max-width: 370px) {
+  .agent-composer-model-effort {
+    display: none;
+  }
+}
+
+/* Guided questions size themselves from the rendered container, not viewport
+   breakpoints, so they stay readable in narrow chat sidebars. */
+.guided-question-flow {
+  container-type: inline-size;
+  container-name: guided-question-flow;
+}
+
+.guided-question-flow-options {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container guided-question-flow (min-width: 42rem) {
+  .guided-question-flow-inner {
+    padding: 2rem;
+  }
+
+  .guided-question-flow-header {
+    margin-bottom: 1.5rem;
+  }
+
+  .guided-question-flow-title {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .guided-question-flow-options {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .guided-question-flow-footer {
+    margin-top: 1.25rem;
+    padding-top: 1rem;
+  }
+}
+
+@container guided-question-flow (max-width: 24rem) {
+  .guided-question-flow-description {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+  }
+
+  .guided-question-flow-footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .guided-question-flow-footer > :last-child {
+    justify-content: flex-end;
+  }
+}
+
+/* Connect AI card: use the card width, not the viewport, so narrow embedded
+   sidebars stack the copy and actions before the secondary button clips. */
+.agent-builder-setup-card {
+  min-inline-size: min(18rem, 100%);
+}
+
+.agent-builder-setup-card--sidebar {
+  container-type: inline-size;
+  container-name: agent-builder-setup;
+}
+
+.agent-builder-setup-card--sidebar .agent-builder-setup-card__actions {
+  gap: 0.25rem;
+}
+
+.agent-builder-setup-card--sidebar .agent-builder-setup-card__builder-button {
+  justify-content: center;
+  min-height: 2rem;
+}
+
+.agent-builder-setup-card--sidebar .agent-builder-setup-card__key-button {
+  align-self: center;
+  justify-content: center;
+  width: auto;
+  min-height: 1.5rem;
+  height: 1.5rem;
+  border: 0;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  padding-inline: 0.25rem;
+}
+
+.agent-builder-setup-card--sidebar .agent-builder-setup-card__key-button:hover {
+  background: transparent;
+  color: hsl(var(--foreground));
+}
+
+@container agent-builder-setup (max-width: 560px) {
+  .agent-builder-setup-card__content {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .agent-builder-setup-card__actions {
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .agent-builder-setup-card__builder-cta {
+    align-items: stretch;
+    flex: 0 1 auto;
+  }
+
+  .agent-builder-setup-card__builder-button {
+    justify-content: center;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .agent-builder-setup-card__key-button {
+    flex: 0 0 auto;
+    min-width: 0;
+    width: auto;
+  }
+}
+
+@container agent-builder-setup (max-width: 360px) {
+  .agent-builder-setup-card__actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+
+.agent-composer-area--hero {
+  padding-inline: 0;
+  padding-block: 0.5rem;
+}
+
+.agent-composer-root--hero {
+  min-height: 5.625rem;
+  border-radius: 1rem;
+  border-color: hsl(var(--border) / 0.75);
+  background: hsl(var(--muted) / 0.62);
+  box-shadow: none;
+}
+
+.agent-composer-root--hero:focus-within {
+  border-color: hsl(var(--ring) / 0.9);
+  box-shadow: none;
+}
+
+.agent-composer-root--hero [data-agent-composer-slot="editor-wrap"] {
+  padding-inline: 0.775rem;
+  padding-top: 0.675rem;
+}
+
+.agent-composer-root--hero [data-agent-composer-slot="editor-input"] {
+  min-height: 3rem;
+  font-size: 1rem;
+  line-height: 1.75rem;
+}
+
+.agent-composer-root--missing-key {
+  overflow: visible;
+}
+
+.agent-composer-missing-key-trigger {
+  display: flex;
+  min-height: 4.5rem;
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  padding: 0.875rem;
+  text-align: start;
+  color: hsl(var(--foreground));
+  outline: none;
+}
+
+.agent-composer-missing-key-trigger:hover {
+  background: hsl(var(--accent) / 0.45);
+}
+
+.agent-composer-missing-key-trigger:focus-visible {
+  box-shadow: inset 0 0 0 2px hsl(var(--ring));
+}
+
+.agent-composer-missing-key-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.agent-composer-missing-key-title {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+
+.agent-composer-missing-key-description {
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.agent-composer-root--hero .agent-composer-missing-key-trigger {
+  min-height: 7.5rem;
+  justify-content: center;
+  padding: 1.25rem;
+  text-align: center;
+}
+
+.agent-composer-root--hero .agent-composer-missing-key-title {
+  font-size: 0.9375rem;
+  line-height: 1.375rem;
+}
+
+.agent-composer-stack {
+  position: relative;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.agent-composer-stack[data-agent-composer-adjacent-ui="true"],
+.agent-composer-stack:has(.agent-selection-attached-pill) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Plan-mode callout pill: lives inside .agent-composer-stack directly above
+   the composer. Matching .agent-composer-area's own width keeps the pill
+   visually attached to (and right-aligned with) the composer instead of the
+   full pane, whether the pane is a narrow sidebar or a wide centered page. */
+.agent-plan-mode-callout {
+  width: 100%;
+}
+
+[data-agent-empty-state="centered"] {
+  justify-content: center;
+}
+
+[data-agent-empty-state="centered"] > .agent-chat-scroll {
+  flex: 0 0 auto;
+  overflow: visible;
+}
+
+[data-agent-empty-state="compact-setup"] .agent-empty-state {
+  height: auto;
+  min-height: 5rem;
+  gap: 0.5rem;
+  padding-block: 0.875rem;
+}
+
+[data-agent-empty-state="compact-setup"] .agent-empty-state > div:first-child {
+  width: 2rem;
+  height: 2rem;
+}
+
+[data-agent-empty-state="compact-setup"] .agent-empty-state svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.agent-thinking-indicator {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.125rem;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.125rem;
+}
+
+.agent-thinking-indicator__text {
+  display: inline-block;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
+    .agent-thinking-indicator__text {
+      color: transparent;
+      background: linear-gradient(
+        90deg,
+        hsl(var(--muted-foreground) / 0.7) 0%,
+        hsl(var(--muted-foreground) / 0.7) 36%,
+        hsl(var(--foreground) / 0.95) 50%,
+        hsl(var(--muted-foreground) / 0.78) 64%,
+        hsl(var(--muted-foreground) / 0.7) 100%
+      );
+      background-size: 14rem 100%;
+      background-position: 0 0;
+      background-repeat: repeat;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: agent-thinking-shine 2.6s linear infinite;
+    }
+  }
+
+  @keyframes agent-thinking-shine {
+    0% {
+      background-position: 0 0;
+    }
+
+    100% {
+      background-position: 14rem 0;
+    }
+  }
+
+  @supports (view-transition-name: agent-native-chat) {
+    .agent-native-chat-view-transition {
+      contain: layout;
+    }
+
+    ::view-transition-old(agent-native-chat),
+    ::view-transition-new(agent-native-chat) {
+      /* The default `block-size: auto` scales each snapshot by width, so as the
+         panel narrows (896 -> 380) its captured height shrinks and the
+         bottom-pinned chat field gets dragged upward (the "rises to half-page"
+         bug). Lock the snapshots to the group's constant height so only x +
+         width animate: the panel slides right at constant height and the chat
+         field stays pinned to the bottom. */
+      height: 100%;
+      animation-duration: 340ms;
+      animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+  }
+}