@agent-native/toolkit 0.23.1 → 0.198.1

package/src/app/styles/agent-native.css

@@ -0,0 +1,1429 @@
+/**
+ * Toolkit's shared Tailwind v4 app stylesheet, included by styles.css.
+ *
+ * Templates import `@agent-native/toolkit/styles.css` after Tailwind.
+ *
+ *   @import "tailwindcss";
+ *   @import "@agent-native/toolkit/styles.css";
+ *
+ * It provides:
+ *   - `@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";
+@import "./tokens/agent-kit.css";
+@import "../agentkit/react/styles.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@plugin "@tailwindcss/typography";
+
+@import "tw-animate-css";
+
+:root {
+  --agent-native-viewport-height: 100vh;
+}
+
+@supports (height: 100dvh) {
+  :root {
+    --agent-native-viewport-height: 100dvh;
+  }
+}
+
+.agent-sidebar-shell,
+.agent-layout-shell {
+  --agent-native-lower-surface: var(--agent-kit-nav-surface);
+  --agent-native-raised-surface: var(--agent-kit-recessed-surface);
+  --agent-native-card-surface: var(--agent-kit-raised-surface);
+  --agent-native-raised-radius: 8px;
+  height: var(--agent-native-viewport-height);
+  min-height: 0;
+  background: var(--agent-kit-recessed-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[data-collapsed="false"] > * {
+  width: var(--agent-layout-left-drawer-expanded-width, 14rem);
+  min-width: var(--agent-layout-left-drawer-expanded-width, 14rem);
+  max-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-panel[data-agent-sidebar-layout="desktop"] {
+  border-inline-start: 1px solid hsl(var(--border) / 0.72);
+}
+
+.agent-sidebar-panel .agent-sidebar-chat-header {
+  border-bottom: 1px solid hsl(var(--border) / 0.72);
+  background: var(--agent-kit-nav-surface);
+}
+
+.agent-sidebar-panel .agent-sidebar-chat-header .agent-native-shell-topbar {
+  background: transparent;
+}
+
+.agent-sidebar-panel .agentkit-chat {
+  --agentkit-chat-background: var(--agent-kit-nav-surface);
+}
+
+.agent-sidebar-panel
+  .agentkit-transcript-content:has([data-agent-suggestion-bar="true"]) {
+  padding-bottom: 0;
+}
+
+.agent-sidebar-panel .agent-tabs-scroll {
+  gap: 0.125rem;
+  padding: 0.25rem;
+}
+
+.agent-sidebar-panel .agent-tab {
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  padding-block: 0.375rem;
+  transition:
+    border-color 150ms ease-out,
+    background-color 150ms ease-out,
+    color 150ms ease-out;
+}
+
+.agent-sidebar-panel .agent-tab:not(.bg-accent):hover {
+  background: hsl(var(--muted) / 0.65) !important;
+  color: hsl(var(--foreground));
+}
+
+.agent-sidebar-panel .agent-tab.bg-accent {
+  border-color: hsl(var(--border));
+  background: var(--agent-kit-raised-surface) !important;
+  box-shadow: var(--agent-kit-control-elevation);
+  color: hsl(var(--foreground));
+}
+
+.agent-sidebar-panel .agent-chat-scroll {
+  background: var(--agent-kit-nav-surface);
+}
+
+.agent-sidebar-panel .agent-empty-state {
+  align-items: stretch;
+  justify-content: flex-end;
+  padding: 1.25rem 1rem 1.5rem;
+}
+
+.agent-sidebar-panel .agent-empty-state > svg {
+  align-self: center;
+  margin-bottom: 0.25rem;
+  color: hsl(var(--muted-foreground) / 0.46);
+}
+
+.agent-sidebar-panel .agent-composer-area:not(.agent-composer-area--hero) {
+  padding: 0;
+  border-top: 0;
+  background: transparent;
+}
+
+.agent-sidebar-panel .agent-composer-root:not(.agent-composer-root--hero) {
+  border-radius: 0.875rem;
+  border-color: hsl(var(--border) / 0.9);
+  background: var(--agent-kit-raised-surface);
+  box-shadow: var(--agent-kit-composer-elevation);
+}
+
+.agent-sidebar-panel .agent-composer-stack {
+  background: var(--agent-kit-nav-surface);
+}
+
+.agent-sidebar-panel [data-agent-suggestion-bar="true"] {
+  padding-block: 0 0.25rem;
+  background: var(--agent-kit-nav-surface);
+}
+
+.agent-sidebar-panel .agent-composer-workflow {
+  border-top: 0;
+  background: transparent;
+}
+
+.agent-sidebar-panel .agent-composer-workflow .agent-composer-area {
+  border-top: 0;
+  background: transparent;
+}
+
+.agent-sidebar-panel [data-agent-message-queue-variant="recessed"] {
+  width: calc(100% - 2.5rem);
+}
+
+.message-scroller-viewport {
+  --message-scroller-top-fade-size: 0px;
+  -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%;
+}
+
+.message-scroller-viewport--top-fade {
+  --message-scroller-top-fade-size: 48px;
+}
+
+.agent-sidebar-resize-handle {
+  background: transparent;
+}
+
+.agent-sidebar-drawer-placeholder {
+  height: 100%;
+  min-width: 0;
+  pointer-events: none;
+}
+
+.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-sidebar-resize-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  cursor: col-resize;
+  user-select: none;
+}
+
+.agent-sidebar-shell[data-agent-sidebar-resizing="true"] iframe,
+.agent-sidebar-shell[data-agent-sidebar-resizing="true"] webview {
+  pointer-events: none !important;
+}
+
+.agent-native-app-main {
+  container: agent-native-main / inline-size;
+}
+
+@media (min-width: 768px) {
+  .agent-layout-shell:not([data-agent-native-shell-variant="custom"]):has(
+      > .agent-sidebar-shell[data-agent-native-hosted-chat="true"]
+    )
+    > .agent-layout-left-drawer,
+  .agent-sidebar-shell[data-agent-native-hosted-chat="true"]
+    .agent-layout-shell:not([data-agent-native-shell-variant="custom"])
+    > .agent-layout-left-drawer {
+    order: 2;
+    border-inline-end: 0 !important;
+    border-inline-start: 1px solid hsl(var(--sidebar-border)) !important;
+  }
+}
+
+@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: 0;
+    border-end-end-radius: 0;
+    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;
+  }
+
+  .agent-layout-main-surface[data-agent-chat-canvas="true"] {
+    border-radius: 0;
+  }
+}
+
+.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%));
+  transition: transform 260ms var(--ease-drawer);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="drawer"] {
+  overflow: clip;
+  box-shadow: var(--agent-kit-drawer-elevation);
+  transition:
+    transform 260ms var(--ease-drawer),
+    width 260ms var(--ease-drawer);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="drawer"][data-agent-sidebar-state="closed"][data-agent-sidebar-position="right"] {
+  transform: translateX(100%);
+}
+
+.agent-sidebar-panel[data-agent-sidebar-animation="drawer"][data-agent-sidebar-state="closed"][data-agent-sidebar-position="left"] {
+  transform: translateX(-100%);
+}
+
+.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))
+  );
+  box-shadow: var(--agent-kit-drawer-elevation-block);
+  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;
+  }
+
+  .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-panel[data-agent-sidebar-animation="drawer"],
+  .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-agent-kit-positive: hsl(var(--agent-kit-positive));
+
+  --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.46s 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(-5px);
+    }
+    65% {
+      transform: translateY(-1px);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  @keyframes route-transition-sweep {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+.agent-kit-density {
+  font-size: var(--agent-kit-density-font-size);
+  line-height: var(--agent-kit-density-line-height);
+}
+
+.agent-kit-supporting-copy {
+  font-size: var(--agent-kit-supporting-font-size);
+  line-height: var(--agent-kit-supporting-line-height);
+}
+
+.agent-kit-caption-copy {
+  font-size: var(--agent-kit-caption-font-size);
+  line-height: var(--agent-kit-caption-line-height);
+}
+
+.agent-kit-micro-copy {
+  font-size: var(--agent-kit-micro-font-size);
+}
+
+.agent-kit-activity-row {
+  min-height: var(--agent-kit-activity-row-min-height);
+  font-size: var(--agent-kit-density-font-size);
+  line-height: var(--agent-kit-density-line-height);
+}
+
+.agent-kit-activity-icon {
+  width: var(--agent-kit-activity-icon-size);
+  height: var(--agent-kit-activity-icon-size);
+}
+
+.agent-kit-activity-object-boundary {
+  max-width: var(--agent-kit-activity-object-max-width);
+}
+
+.agent-kit-message-bubble-boundary {
+  max-width: var(--agent-kit-message-bubble-max-width);
+}
+
+.agent-kit-tool-content-boundary {
+  max-width: var(--agent-kit-tool-content-max-width);
+}
+
+.agent-kit-tone-positive {
+  color: hsl(var(--agent-kit-positive));
+}
+
+.agent-kit-composer-adjacent-width {
+  width: min(
+    calc(100% - var(--agent-kit-composer-adjacent-inline-inset)),
+    var(--agent-kit-conversation-max-width)
+  );
+}
+
+.agent-kit-page-fade {
+  top: var(--agent-kit-page-header-height);
+  z-index: var(--agent-kit-layer-page-fade);
+}
+
+.agent-kit-page-header {
+  height: var(--agent-kit-page-header-height);
+  z-index: var(--agent-kit-layer-page-header);
+  background: var(--agent-kit-recessed-surface);
+}
+
+@media (min-width: 768px) {
+  [data-agent-page-chat-topbar]:not(:has([data-agent-page-chat-header]))
+    .agentkit-chat[data-empty="true"][data-empty-composer-placement="center"] {
+    top: -1.75rem;
+  }
+}
+
+.agent-kit-chat-canvas-toolbar {
+  height: var(--agent-kit-page-header-height);
+  z-index: var(--agent-kit-layer-page-header);
+}
+
+[data-agent-chat-workspace-state] .agent-kit-page-header {
+  border-bottom-width: 0;
+}
+
+.agent-kit-chat-canvas-body {
+  width: 100%;
+  overflow: clip;
+}
+
+.agent-kit-workspace-panel {
+  top: var(--agent-kit-page-header-height);
+  bottom: 0;
+  z-index: var(--agent-kit-layer-workspace-panel);
+  width: min(
+    var(--agent-kit-workspace-panel-max-width),
+    calc(100% - var(--agent-kit-workspace-panel-viewport-gutter))
+  );
+}
+
+.agent-kit-workspace-panel[data-state="closed"] {
+  transform: translateX(100%);
+  pointer-events: none;
+}
+
+.agent-kit-workspace-panel[data-state="open"] {
+  transform: translateX(0);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .agent-kit-chat-canvas-body,
+  .agent-kit-workspace-panel {
+    transition-duration: var(--agent-kit-workspace-panel-transition-duration);
+    transition-timing-function: var(--ease-drawer);
+  }
+
+  .agent-kit-chat-canvas-body {
+    transition-property: width;
+  }
+
+  .agent-kit-workspace-panel {
+    transition-property: transform;
+  }
+}
+
+.agent-kit-workspace-panel__header {
+  height: var(--agent-kit-page-header-height);
+}
+
+@media (min-width: 48rem) {
+  .agent-kit-chat-canvas-body--workspace-open {
+    width: calc(100% - var(--agent-kit-workspace-panel-width));
+  }
+
+  .agent-kit-workspace-panel {
+    width: var(--agent-kit-workspace-panel-width);
+  }
+}
+
+.skeleton-shimmer,
+.animate-pulse[class~="bg-muted"],
+.animate-pulse[class*="bg-muted/"],
+.animate-pulse[class~="bg-card"],
+.animate-pulse[class~="bg-border"],
+.animate-pulse[class*="bg-border/"] {
+  background-image: linear-gradient(
+    100deg,
+    transparent 30%,
+    hsl(var(--foreground, var(--ui-foreground)) / 0.043) 50%,
+    transparent 70%
+  );
+  background-position: 150% 0;
+  background-repeat: repeat;
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.6s linear infinite;
+}
+
+@keyframes skeleton-shimmer {
+  from {
+    background-position: 150% 0;
+  }
+  to {
+    background-position: -50% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-shimmer,
+  .animate-pulse[class~="bg-muted"],
+  .animate-pulse[class*="bg-muted/"],
+  .animate-pulse[class~="bg-card"],
+  .animate-pulse[class~="bg-border"],
+  .animate-pulse[class*="bg-border/"] {
+    animation: none;
+  }
+
+  .animate-pulse {
+    animation: none;
+  }
+}
+
+.route-transition-indicator-bar {
+  animation: route-transition-sweep 1.1s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .route-transition-indicator-bar {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: hsl(var(--border));
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.22) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 999px;
+    background-clip: padding-box;
+    background-color: hsl(var(--muted-foreground) / 0.22);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--muted-foreground) / 0.34);
+  }
+
+  button,
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  .agent-native-search-input::-webkit-search-cancel-button,
+  .agent-native-search-input::-webkit-search-decoration,
+  .agent-native-search-input::-webkit-search-results-button,
+  .agent-native-search-input::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+: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%;
+}
+
+.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;
+  }
+}
+
+[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;
+}
+
+.agent-native-settings-row {
+  container-type: inline-size;
+  container-name: settings-row;
+}
+
+/* The row a Settings search hit opened, briefly highlighted so the eye can
+   find it after the page scrolls. */
+[data-settings-flash] {
+  animation: settings-search-flash 1.6s ease-out;
+}
+
+@keyframes settings-search-flash {
+  0%,
+  35% {
+    background-color: hsl(var(--accent));
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.agent-native-integration-grid {
+  container-type: inline-size;
+  container-name: integration-grid;
+}
+
+@container integration-grid (min-width: 56rem) {
+  .agent-native-integration-grid__items {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container settings-row (min-width: 36rem) {
+  .agent-native-settings-row__layout {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .agent-native-settings-row__control {
+    margin-inline-start: 1rem;
+    text-align: end;
+  }
+}
+
+.agent-composer-root {
+  container-type: inline-size;
+  container-name: agent-composer;
+  background: color-mix(
+    in srgb,
+    var(--agent-kit-subtle-surface) 45%,
+    var(--agent-kit-recessed-surface)
+  );
+}
+@container agent-composer (max-width: 370px) {
+  .agent-composer-model-effort {
+    display: none;
+  }
+}
+
+.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;
+  }
+}
+
+.agent-builder-setup-card {
+  container-type: inline-size;
+  container-name: agent-builder-setup;
+  min-inline-size: min(18rem, 100%);
+}
+
+.agent-builder-setup-content {
+  container-type: inline-size;
+  container-name: agent-builder-setup;
+}
+
+.agent-builder-setup-card--attached {
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1.875rem;
+  padding-bottom: 0 !important;
+}
+
+.agent-builder-setup-card--attached .agent-builder-setup-card__panel {
+  padding-bottom: calc(0.75rem + 1.875rem);
+  border-bottom-color: transparent;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background: color-mix(
+    in srgb,
+    hsl(var(--card)) 97%,
+    hsl(var(--foreground)) 3%
+  );
+  box-shadow: none;
+}
+
+.agent-builder-setup-card--attached.agent-builder-setup-card--sidebar
+  .agent-builder-setup-card__panel {
+  padding-bottom: calc(0.625rem + 1.875rem);
+}
+
+.agent-builder-setup-card--attached:not(.agent-builder-setup-card--sidebar) {
+  max-inline-size: min(100%, var(--agent-kit-conversation-max-width));
+  margin-inline: auto;
+  padding-inline: 0 !important;
+}
+
+.agent-builder-setup-inline--attached {
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1.875rem !important;
+  padding-bottom: calc(0.625rem + 1.875rem) !important;
+  border-bottom-color: transparent;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  background: color-mix(
+    in srgb,
+    hsl(var(--card)) 97%,
+    hsl(var(--foreground)) 3%
+  );
+  box-shadow: none;
+}
+
+.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: stretch;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .agent-builder-setup-card__builder-cta {
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .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: 100%;
+  }
+
+  .agent-builder-setup-card--sidebar .agent-builder-setup-card__builder-button {
+    width: 100%;
+  }
+
+  .agent-builder-setup-card--sidebar .agent-builder-setup-card__key-button {
+    width: 100%;
+  }
+}
+
+.agent-composer-area--hero {
+  padding-inline: 0;
+  padding-block: var(--agent-kit-composer-block-padding-start)
+    var(--agent-kit-composer-block-padding-end);
+}
+
+[data-agent-fullscreen="true"]
+  .agent-composer-stack
+  [data-agent-message-queue="true"] {
+  max-width: calc(
+    var(--agent-kit-conversation-max-width) -
+      var(--agent-kit-composer-adjacent-inline-inset)
+  );
+  margin-inline: auto;
+}
+
+.agent-composer-area--attached-above {
+  padding-top: 0 !important;
+}
+
+.agentkit-host-composer {
+  pointer-events: auto;
+}
+
+.agentkit-home-intro {
+  display: grid;
+  width: min(100%, 47rem);
+  justify-items: center;
+  gap: 0.5rem;
+  margin: 0 auto 2rem;
+  text-align: center;
+}
+
+.agentkit-home-intro h1 {
+  margin: 0;
+  color: hsl(var(--foreground));
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.12;
+}
+
+.agentkit-home-intro p {
+  max-width: 48rem;
+  margin: 0 auto;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+.agentkit-home-suggestions {
+  width: min(100%, 47rem);
+  margin: 0 auto 0.75rem;
+}
+
+.agentkit-after-composer-slot {
+  width: 100%;
+  min-width: 0;
+  padding-top: 1.25rem;
+  pointer-events: auto;
+}
+
+.agent-composer-area--attached-above .agent-composer-root {
+  position: relative;
+  z-index: 3;
+  background: var(--agent-kit-raised-surface);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-builder-setup-card--attached.animate-bounce-once {
+    animation: none;
+  }
+}
+
+.agent-composer-root--hero {
+  min-height: var(--agent-kit-composer-min-height);
+  border-radius: var(--agent-kit-composer-radius);
+  border-color: var(--agent-kit-composer-border-color);
+  background: var(--agent-kit-raised-surface);
+  box-shadow: var(--agent-kit-composer-elevation);
+}
+
+.agent-composer-root--hero:focus-within {
+  border-color: var(--agent-kit-composer-focus-border-color);
+  box-shadow: var(--agent-kit-composer-elevation);
+}
+
+.agent-composer-root--hero [data-agent-composer-slot="editor-wrap"] {
+  padding-block: var(--agent-kit-composer-editor-padding-block-start)
+    var(--agent-kit-composer-editor-padding-block-end);
+  padding-inline: var(--agent-kit-composer-editor-padding-inline);
+}
+
+.agent-composer-root--hero [data-agent-composer-slot="editor-input"] {
+  min-height: var(--agent-kit-composer-editor-min-height);
+  max-height: var(--agent-kit-composer-editor-max-height);
+  padding-block: var(--agent-kit-composer-editor-padding-block-end);
+  scroll-padding-block: var(--agent-kit-composer-block-padding-start);
+  font-size: var(--agent-kit-composer-font-size);
+  line-height: var(--agent-kit-composer-line-height);
+}
+
+@media (max-width: 767px) {
+  .agent-composer-root--hero [data-agent-composer-slot="editor-input"] {
+    font-size: var(--agent-kit-composer-mobile-font-size);
+    line-height: var(--agent-kit-composer-mobile-line-height);
+  }
+}
+
+.agent-composer-root--hero .agent-composer-toolbar {
+  padding-inline: var(--agent-kit-composer-toolbar-padding-inline);
+  padding-block: var(--agent-kit-composer-toolbar-padding-block-start)
+    var(--agent-kit-composer-toolbar-padding-block-end);
+}
+
+.agent-composer-root--hero .agent-composer-send-button {
+  height: var(--agent-kit-composer-control-size);
+  width: var(--agent-kit-composer-control-size);
+  border-radius: 999px;
+}
+
+.agent-composer-root:not(.agent-composer-root--hero)
+  .agent-composer-send-button {
+  border-radius: 999px;
+}
+
+.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;
+}
+
+.agent-plan-mode-callout {
+  width: 100%;
+}
+
+.agent-tool-call-stack {
+  display: contents;
+}
+
+[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,
+.agent-loading-label {
+  display: inline-block;
+}
+
+.agent-loading-label {
+  overflow: hidden;
+  text-align: left;
+  transition: width 220ms var(--ease-out-strong);
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-loading-label {
+    transition: none;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .agent-tool-summary__label {
+    display: inline-block;
+  }
+
+  @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;
+    }
+  }
+
+  @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),
+    ::view-transition-old(agent-native-sidebar-drawer),
+    ::view-transition-new(agent-native-sidebar-drawer) {
+      height: 100%;
+      animation-duration: 340ms;
+      animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+  }
+}