/**
 * 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";

/* Core's own client components (settings, TeamPage, share dialogs, …) render
   @agent-native/toolkit UI, so the toolkit's @source registration belongs here
   rather than in each app's global.css. Without it Tailwind never generates the
   classes that appear only inside toolkit components — including the `z-[290]`
   on portaled dropdown/select/popover content — and those menus render behind
   raised app surfaces. Apps that import this stylesheet get it for free. */
@import "@agent-native/toolkit/styles.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;
}

.message-scroller-viewport--top-fade {
  --message-scroller-top-fade-size: 48px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--message-scroller-top-fade-size),
    black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black var(--message-scroller-top-fade-size),
    black 100%
  );
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.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;
}

/* A named chat surface already morphs from its old geometry during a
   full-page-chat handoff. Override only the initial style of that panel so it
   does not slide in from the right underneath the morph. Keeping the normal
   rules intact preserves ordinary sidebar open/close animation. */
@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;
  }

  .agent-native-chat-view-transition.agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-chat-handoff="true"] {
    width: var(--agent-sidebar-width);
  }

  .agent-native-chat-view-transition.agent-sidebar-panel[data-agent-sidebar-animation="desktop"][data-agent-sidebar-chat-handoff="true"]
    > .agent-sidebar-panel-inner {
    transform: translateX(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;
  cursor: pointer;
  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;
  transition:
    background-color 150ms ease-out,
    box-shadow 150ms ease-out;
}

.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-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.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-missing-key-cta {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: hsl(var(--foreground));
  padding: 0.5rem 0.75rem;
  color: hsl(var(--background));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out;
}

.agent-composer-missing-key-trigger:hover .agent-composer-missing-key-cta {
  opacity: 0.9;
}

.agent-composer-missing-key-trigger:active .agent-composer-missing-key-cta {
  transform: scale(0.98);
}

.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-root--hero .agent-composer-missing-key-content {
  align-items: center;
}

.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;
  padding-bottom: clamp(3rem, 8vh, 6rem);
}

[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,
.agent-running-shimmer {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .agent-tool-call--entering {
    animation: agent-tool-call-enter 220ms var(--ease-out-strong) both;
  }

  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .agent-thinking-indicator__text,
    .agent-running-shimmer {
      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;
    }
  }

  @keyframes agent-tool-call-enter {
    from {
      opacity: 0;
      transform: translateY(0.375rem);
    }

    to {
      opacity: 1;
      transform: translateY(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);
    }
  }
}