@agno-hq/chat-react 0.1.0 → 0.3.0

package/dist/styles.css

@@ -1,126 +1,188 @@
 /*
- * agno-chat-react styles — aligned with the Agno OS design system.
- * Brand accent #ff4017, near-black #111113 surfaces, zinc greys, white-alpha
- * borders, Inter + DM Mono. Import once: `import 'agno-chat-react/styles.css'`.
+ * @agno-hq/chat-react — design tokens.
  *
- * Dark by default; add the `agno-light` class on a wrapper for light mode.
+ * Lifted from `agno-os/src/globals.css` so the components render with the same
+ * palette, radii and shadows as the AgentOS chat. Import this file alone
+ * (`@agno-hq/chat-react/tokens.css`) to keep the palette while supplying your own
+ * component CSS; `styles.css` already contains it.
+ *
+ * Declared on :root as well as the embed classes, so you can retheme globally
+ * or per-embed:
+ *
+ *   :root { --color-brand-brand: 99, 102, 241; --agno-radius-lg: 1.25rem; }
+ *
+ * Dark by default; add `agno-light` on the embed for light mode (`agno-dark`
+ * also works if you toggle both explicitly).
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
+/* ─────────────────────────────────────────────────────────────────────────
+   Design tokens — Agno OS
+   ───────────────────────────────────────────────────────────────────────── */
 
+:root,
 .agno-root,
-.agno-root * {
-  box-sizing: border-box;
+.agno-launcher {
+  /* Radii (agno-os: --radius-rounded-*) */
+  --agno-radius-xs: 0.25rem;
+  --agno-radius-sm: 0.5rem;
+  --agno-radius-md: 0.625rem;
+  --agno-radius-lg: 0.75rem;
+  --agno-radius-xl: 1rem;
+  --agno-radius-full: 9999px;
+
+  /* Brand + semantic colours are theme-independent in Agno OS */
+  --color-brand-brand: 255, 64, 23;
+  --color-brand-accent: 235, 110, 82;
+  --color-positive: 34, 197, 94;
+  --color-destructive: 229, 57, 53;
+
+  /* Dark theme (agno-os `.dark`) */
+  --color-primary: 255, 255, 255;
+  --color-primary-accent: 24, 24, 27;
+  --color-muted: 161, 161, 170;
+  --color-background: 17, 17, 19;
+  --color-background-secondary: 39, 39, 42;
+  --color-border-default: 255, 255, 255, 0.2;
+  --color-border-selected: 255, 255, 255, 0.75;
+
+  --agno-shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.4),
+    0 2px 4px 0 rgba(0, 0, 0, 0.3);
+  --agno-shadow-panel: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.6);
+
+  /* Semantic aliases used throughout this stylesheet. */
+  --agno-primary: rgb(var(--color-primary));
+  --agno-accent: rgb(var(--color-primary-accent));
+  --agno-muted: rgb(var(--color-muted));
+  --agno-bg: rgb(var(--color-background));
+  --agno-secondary: rgb(var(--color-background-secondary));
+  --agno-secondary-soft: rgba(var(--color-background-secondary), 0.5);
+  --agno-border: rgba(var(--color-border-default));
+  --agno-border-selected: rgba(var(--color-border-selected));
+  --agno-brand: rgb(var(--color-brand-brand));
+  --agno-brand-soft: rgba(var(--color-brand-brand), 0.14);
+  --agno-positive: rgb(var(--color-positive));
+  --agno-destructive: rgb(var(--color-destructive));
+  /* Agno OS layers subtle primary tints instead of extra greys. */
+  --agno-tint: rgba(var(--color-primary), 0.05);
+  --agno-tint-strong: rgba(var(--color-primary), 0.1);
+
+  /* Back-compat aliases (previous releases exposed these names). */
+  --agno-text: var(--agno-primary);
+  --agno-surface: var(--agno-bg);
+  --agno-surface-2: var(--agno-secondary);
+  --agno-error: var(--agno-destructive);
+  --agno-radius: var(--agno-radius-md);
+  --agno-primary-bg: var(--agno-primary);
+  --agno-primary-fg: var(--agno-accent);
+
+  /* Typography — repoint these to self-hosted faces to skip fonts.css. */
+  --agno-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --agno-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 
-.agno-root {
-  /* Agno OS dark tokens */
-  --agno-bg: #111113;
-  --agno-surface: #18181b;
-  --agno-surface-2: #27272a;
-  --agno-border: rgba(255, 255, 255, 0.1);
-  --agno-border-strong: rgba(255, 255, 255, 0.2);
-  --agno-text: #fafafa;
-  --agno-muted: #a1a1aa;
-
-  /* Signature brand colour, used as the accent. */
-  --agno-brand: #ff4017;
-  --agno-brand-soft: rgba(255, 64, 23, 0.14);
-  --agno-accent: var(--agno-brand);
-
-  /* Monochrome primary action (Agno uses inverse, not brand, for buttons). */
-  --agno-primary-bg: #fafafa;
-  --agno-primary-fg: #111113;
-
-  --agno-user: rgba(255, 255, 255, 0.06);
-  --agno-positive: #22c55e;
-  --agno-error: #e53935;
+/* Light theme (agno-os `:root`) */
+.agno-light,
+.agno-root.agno-light,
+.agno-launcher.agno-light {
+  --color-primary: 24, 24, 27;
+  --color-primary-accent: 255, 255, 255;
+  --color-muted: 113, 113, 122;
+  --color-background: 255, 255, 255;
+  --color-background-secondary: 244, 244, 245;
+  --color-border-default: 24, 24, 27, 0.1;
+  --color-border-selected: 24, 24, 27, 0.5;
 
-  --agno-radius-sm: 0.5rem;
-  --agno-radius: 0.625rem;
-  --agno-radius-lg: 0.75rem;
+  --agno-shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06),
+    0 2px 4px 0 rgba(0, 0, 0, 0.04);
+  --agno-shadow-panel: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 32px -8px rgba(0, 0, 0, 0.18);
+}
 
+/* Explicit dark, for apps that toggle both classes. */
+.agno-dark,
+.agno-root.agno-dark,
+.agno-launcher.agno-dark {
+  --color-primary: 255, 255, 255;
+  --color-primary-accent: 24, 24, 27;
+  --color-muted: 161, 161, 170;
+  --color-background: 17, 17, 19;
+  --color-background-secondary: 39, 39, 42;
+  --color-border-default: 255, 255, 255, 0.2;
+  --color-border-selected: 255, 255, 255, 0.75;
+}
+
+/*
+ * @agno-hq/chat-react — component styles, following the Agno OS design system.
+ *
+ * Every colour, radius, shadow and font here comes from a token in
+ * `tokens.css`; `styles.css` ships the two concatenated, so import that unless
+ * you are supplying your own tokens. Webfonts are a separate opt-in file
+ * (`fonts.css`) — this sheet makes no third-party request.
+ *
+ * Each class below is also addressable from the `classNames` prop on the
+ * components, so Tailwind (or anything else) layers on top of these rules
+ * rather than replacing them.
+ */
+
+.agno-root,
+.agno-root *,
+.agno-launcher,
+.agno-launcher * {
+  box-sizing: border-box;
+}
+
+
+.agno-root {
   display: flex;
   flex-direction: column;
   background: var(--agno-bg);
-  color: var(--agno-text);
+  color: var(--agno-primary);
   border: 1px solid var(--agno-border);
   border-radius: var(--agno-radius-lg);
   overflow: hidden;
-  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-  font-size: 14px;
-  line-height: 1.55;
+  font-family: var(--agno-font);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 21px;
+  letter-spacing: -0.02em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.agno-root.agno-light {
-  --agno-bg: #ffffff;
-  --agno-surface: #ffffff;
-  --agno-surface-2: #f4f4f5;
-  --agno-border: rgba(24, 24, 27, 0.1);
-  --agno-border-strong: rgba(24, 24, 27, 0.5);
-  --agno-text: #18181b;
-  --agno-muted: #71717a;
-  --agno-brand-soft: rgba(255, 64, 23, 0.1);
-  --agno-primary-bg: #18181b;
-  --agno-primary-fg: #ffffff;
-  --agno-user: #f4f4f5;
+
+/* Type scale — Agno OS `Paragraph` sizes. */
+.agno-text-body {
+  font-size: 0.875rem;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+}
+.agno-text-xsmall {
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
+  letter-spacing: -0.02em;
+}
+.agno-text-label,
+.agno-mono {
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.02em;
 }
 
-/* Scrollbars — thin, like Agno OS. */
 .agno-root ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
 .agno-root ::-webkit-scrollbar-thumb {
-  background: var(--agno-border-strong);
-  border-radius: 9999px;
+  background: var(--agno-tint-strong);
+  border-radius: var(--agno-radius-full);
 }
 .agno-root ::-webkit-scrollbar-track {
   background: transparent;
 }
 
-/* Header */
-.agno-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--agno-border);
-  background: var(--agno-bg);
-}
-.agno-header__brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.agno-header__title {
-  font-weight: 600;
-  font-size: 13px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-/* Agno brand mark — orange rounded square with the "A". */
-.agno-logo {
-  display: grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 7px;
-  background: var(--agno-brand);
-  color: #fff;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 1;
-  box-shadow: 0 0 16px rgba(255, 64, 23, 0.45);
-}
-.agno-header__controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
+/* ─────────────────────────────────────────────────────────────────────────
+   Shell: sidebars, chat column
+   ───────────────────────────────────────────────────────────────────────── */
 
 .agno-main {
   display: flex;
@@ -129,26 +191,26 @@
 }
 
 .agno-sidebar {
-  width: 300px;
+  width: 316px;
   border-left: 1px solid var(--agno-border);
   background: var(--agno-bg);
-  padding: 12px;
+  padding: 16px;
   overflow: auto;
 }
 .agno-sidebar--left {
   border-left: none;
   border-right: 1px solid var(--agno-border);
-  width: 248px;
+  width: 260px;
 }
 .agno-sidebar__title {
-  font-size: 11px;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
   color: var(--agno-muted);
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
-/* Chat surface */
 .agno-chat {
   display: flex;
   flex-direction: column;
@@ -157,105 +219,93 @@
   min-height: 0;
 }
 
+/* ─────────────────────────────────────────────────────────────────────────
+   Transcript
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-list {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: 24px 24px 8px;
+}
+/* Agno OS centres the conversation in an 800px column. */
+.agno-list__inner {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 36px;
 }
 .agno-list__empty {
-  margin: auto;
-  color: var(--agno-muted);
+  height: 100%;
+  display: grid;
+  place-items: center;
   text-align: center;
-  max-width: 360px;
+  color: var(--agno-muted);
 }
 
-/* Messages */
 .agno-msg {
   display: flex;
-  gap: 12px;
   align-items: flex-start;
-}
-.agno-msg--user {
-  flex-direction: row-reverse;
+  gap: 16px;
 }
 .agno-msg__avatar {
-  flex: 0 0 30px;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
   display: grid;
   place-items: center;
-  background: var(--agno-surface-2);
-  border: 1px solid var(--agno-border);
-  font-size: 15px;
+  overflow: hidden;
+}
+.agno-msg__avatar svg {
+  display: block;
+}
+.agno-msg--user .agno-msg__avatar {
+  background: var(--agno-secondary);
+  color: var(--agno-primary);
+  border-radius: var(--agno-radius-sm);
+  font-size: 10px;
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0;
 }
-.agno-msg--agent .agno-msg__avatar {
+.agno-msg--team .agno-msg__avatar {
   background: var(--agno-brand);
-  border-color: transparent;
   color: #fff;
-  font-weight: 700;
-  box-shadow: 0 0 14px rgba(255, 64, 23, 0.4);
+  padding: 4px;
 }
 .agno-msg__body {
-  max-width: 80%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-/* Agent body spans the column so tool/step cards keep a stable width as
-   content streams in (no horizontal jitter). */
-.agno-msg--agent .agno-msg__body {
   flex: 1;
-  max-width: 100%;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  color: var(--agno-primary);
 }
-.agno-msg--user .agno-msg__body {
-  align-items: flex-end;
-}
-/* Agent replies render as plain text (Agno OS style), not a card. */
+/* Agent and user messages are both plain text in Agno OS — no bubbles. */
 .agno-msg__content {
-  padding: 2px 0;
   word-break: break-word;
 }
-/* User messages sit in a rounded bubble. */
-.agno-msg--user .agno-msg__content {
-  background: var(--agno-user);
-  border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius);
-  padding: 10px 14px;
-}
-.agno-msg__content--empty {
-  min-height: 20px;
-}
 .agno-msg__error {
-  color: var(--agno-error);
-  font-size: 13px;
+  color: var(--agno-destructive);
+  word-break: break-word;
 }
-
-/* Inline "what it's doing" indicator, shown in the agent bubble before content. */
 .agno-msg__activity {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 8px;
+  min-height: 28px;
   color: var(--agno-muted);
-  font-size: 13px;
-  padding: 4px 0;
 }
-.agno-msg__activity-label {
-  letter-spacing: 0.01em;
-}
-
-/* Streaming caret — brand accent */
 .agno-msg__caret {
   display: inline-block;
-  width: 7px;
+  width: 6px;
   height: 14px;
   margin-left: 2px;
   vertical-align: text-bottom;
-  background: var(--agno-brand);
+  background: var(--agno-primary);
   border-radius: 1px;
   animation: agno-blink 1s steps(2, start) infinite;
 }
@@ -265,7 +315,10 @@
   }
 }
 
-/* Markdown */
+/* ─────────────────────────────────────────────────────────────────────────
+   Markdown
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-md > :first-child {
   margin-top: 0;
 }
@@ -273,230 +326,844 @@
   margin-bottom: 0;
 }
 .agno-md-p {
-  margin: 6px 0;
+  margin: 8px 0;
 }
 .agno-md-heading {
-  margin: 12px 0 6px;
-  line-height: 1.3;
-  letter-spacing: -0.01em;
+  margin: 16px 0 8px;
+  font-weight: 500;
+  line-height: normal;
 }
 .agno-md-list {
-  margin: 6px 0;
+  margin: 8px 0;
   padding-left: 20px;
 }
 .agno-md-code {
-  background: var(--agno-surface-2);
+  background: var(--agno-tint);
   padding: 1px 5px;
-  border-radius: 5px;
-  font-size: 0.88em;
-  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-}
-.agno-md-pre {
-  background: var(--agno-surface-2);
+  border-radius: var(--agno-radius-xs);
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: -0.015em;
+}
+/* Fenced code: a header bar (language, copy) over a numbered, highlighted body. */
+.agno-md-code-block {
+  margin: 8px 0;
   border: 1px solid var(--agno-border);
+  border-radius: var(--agno-radius-md);
+  background: var(--agno-secondary-soft);
+  overflow: hidden;
+}
+.agno-md-code-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 8px 6px 14px;
+  border-bottom: 1px solid var(--agno-border);
+}
+.agno-md-code-lang {
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  color: var(--agno-muted);
+  letter-spacing: -0.01em;
+}
+.agno-md-copy {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
   border-radius: var(--agno-radius-sm);
+  background: transparent;
+  color: var(--agno-muted);
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.agno-md-copy:hover,
+.agno-md-copy:focus-visible {
+  color: var(--agno-primary);
+  background: var(--agno-tint);
+}
+.agno-md-copy.is-copied {
+  color: var(--agno-positive);
+}
+
+.agno-md-pre {
+  margin: 0;
   padding: 12px 14px;
+  max-height: var(--agno-code-max-height, 32rem);
+  overflow: auto;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  line-height: 1.5rem;
+  letter-spacing: -0.02em;
+}
+/* Line numbers are counters, so they neither select nor copy. */
+.agno-md-pre code {
+  counter-reset: line;
+}
+.agno-md-line {
+  counter-increment: line;
+}
+.agno-md-line::before {
+  content: counter(line);
+  display: inline-block;
+  width: var(--agno-code-gutter, 2ch);
+  margin-right: 1.25rem;
+  text-align: right;
+  color: var(--agno-muted);
+  user-select: none;
+}
+/* Tokens carry both themes; the theme class picks one, like every other colour. */
+.agno-md-line span {
+  color: var(--shiki-dark);
+}
+.agno-light .agno-md-line span {
+  color: var(--shiki-light);
+}
+.agno-dark .agno-md-line span {
+  color: var(--shiki-dark);
+}
+
+.agno-md a {
+  color: var(--agno-primary);
+  text-underline-offset: 2px;
+}
+.agno-md-quote {
+  margin: 8px 0;
+  padding-left: 12px;
+  border-left: 2px solid var(--agno-border);
+  color: var(--agno-muted);
+}
+.agno-md-rule {
+  margin: 16px 0;
+  border: none;
+  border-top: 1px solid var(--agno-border);
+}
+.agno-md-img {
+  max-width: 100%;
+  border-radius: var(--agno-radius-md);
+}
+/* Wide tables scroll in place — the transcript column never widens. */
+.agno-md-table-wrap {
+  margin: 8px 0;
   overflow-x: auto;
-  font-size: 12.5px;
-  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  border: 1px solid var(--agno-border);
+  border-radius: var(--agno-radius-md);
+}
+.agno-md-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+}
+.agno-md-table th,
+.agno-md-table td {
+  padding: 6px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+.agno-md-table th {
+  background: var(--agno-secondary-soft);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.agno-md-table tr + tr td {
+  border-top: 1px solid var(--agno-border);
 }
+/* GFM task lists: the checkbox replaces the bullet. */
+.agno-md-list li:has(> input[type='checkbox']) {
+  list-style: none;
+  margin-left: -20px;
+}
+.agno-md-list li input[type='checkbox'] {
+  margin-right: 6px;
+  accent-color: var(--agno-brand);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Tool calls — pill triggers, detail panel underneath
+   ───────────────────────────────────────────────────────────────────────── */
 
-/* Tool calls */
 .agno-tools {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-}
-.agno-tool {
-  border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius-sm);
-  background: var(--agno-surface);
-  overflow: hidden;
-}
-.agno-tool--running {
-  border-color: rgba(255, 64, 23, 0.35);
+  gap: 8px;
 }
-.agno-tool__head {
-  width: 100%;
+.agno-tools__row {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
-  padding: 8px 11px;
-  background: none;
+}
+.agno-tool {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 8px;
   border: none;
-  color: inherit;
+  border-radius: var(--agno-radius-sm);
+  background: var(--agno-tint);
+  color: var(--agno-primary);
   cursor: pointer;
-  font: inherit;
-  text-align: left;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  transition: background 0.12s ease;
 }
-.agno-tool__icon {
-  font-size: 12px;
-  opacity: 0.7;
+.agno-tool:hover {
+  background: var(--agno-tint-strong);
 }
-.agno-tool__name {
-  font-weight: 500;
-  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 13px;
-}
-.agno-tool__status {
-  font-size: 10.5px;
-  padding: 1px 8px;
-  border-radius: 999px;
-  background: var(--agno-surface-2);
+.agno-tool.is-open {
+  background: var(--agno-tint-strong);
+}
+.agno-tool__spinner {
   color: var(--agno-muted);
-  text-transform: lowercase;
-  letter-spacing: 0.02em;
 }
-.agno-tool__status--running {
-  color: var(--agno-brand);
-  background: var(--agno-brand-soft);
+.agno-spin {
+  animation: agno-spin 1s linear infinite;
 }
-.agno-tool__status--done {
-  color: var(--agno-positive);
+@keyframes agno-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.agno-tool__icon {
+  color: var(--agno-muted);
 }
-.agno-tool__status--error {
-  color: var(--agno-error);
+.agno-tool--error {
+  color: var(--agno-destructive);
 }
-.agno-tool__status--paused {
+.agno-tool--paused .agno-tool__icon {
   color: var(--agno-brand);
 }
-.agno-tool__chev {
-  margin-left: auto;
-  font-size: 9px;
-  color: var(--agno-muted);
-}
-.agno-tool__body {
-  padding: 10px 11px;
-  border-top: 1px solid var(--agno-border);
+
+.agno-tool-detail {
   display: flex;
   flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  border-radius: var(--agno-radius-md);
+  background: var(--agno-secondary-soft);
+}
+.agno-tool-detail__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 8px;
 }
-.agno-tool__label {
-  font-size: 10.5px;
+.agno-tool-detail__meta {
+  margin-left: auto;
+}
+.agno-tool-detail__name {
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.agno-tool-detail__status {
+  color: var(--agno-muted);
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+}
+.agno-tool-detail__status--done {
+  color: var(--agno-positive);
+}
+.agno-tool-detail__status--error {
+  color: var(--agno-destructive);
+}
+.agno-tool-detail__status--paused,
+.agno-tool-detail__status--running {
+  color: var(--agno-brand);
+}
+.agno-tool-detail__label {
   color: var(--agno-muted);
-  margin-bottom: 4px;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  margin-bottom: 6px;
 }
-.agno-tool__pre {
+.agno-tool-detail__pre {
   margin: 0;
-  background: var(--agno-surface-2);
-  border-radius: 6px;
-  padding: 9px;
+  padding: 10px;
+  border-radius: var(--agno-radius-sm);
+  background: var(--agno-bg);
   overflow-x: auto;
-  font-size: 12px;
-  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  letter-spacing: -0.02em;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
-/* Reasoning + citations */
-.agno-reasoning,
-.agno-citations {
-  border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius-sm);
-  background: var(--agno-surface);
-}
-.agno-reasoning__toggle,
-.agno-citations__toggle {
-  width: 100%;
+/* ─────────────────────────────────────────────────────────────────────────
+   Collapsible panels: reasoning, tool calls
+   ───────────────────────────────────────────────────────────────────────── */
+
+.agno-disclosure__toggle {
   display: flex;
   align-items: center;
-  gap: 7px;
-  padding: 8px 11px;
+  gap: 8px;
+  padding: 0;
   background: none;
   border: none;
   color: var(--agno-muted);
   cursor: pointer;
   font: inherit;
-  font-size: 13px;
+  text-align: left;
 }
-.agno-reasoning__chev,
-.agno-citations__chev {
-  margin-left: auto;
-  font-size: 9px;
+.agno-disclosure__toggle:hover {
+  color: var(--agno-primary);
 }
-.agno-reasoning__list {
-  margin: 0;
-  padding: 4px 12px 12px 28px;
+.agno-disclosure__chev {
+  flex: 0 0 16px;
+  transition: transform 0.2s ease;
+}
+.agno-disclosure__toggle[aria-expanded='true'] .agno-disclosure__chev {
+  transform: rotate(180deg);
+}
+
+.agno-reasoning {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
 }
-.agno-reasoning__step {
+/* Timeline — a continuous rule down the centre of the icon column. */
+.agno-timeline {
   position: relative;
+  isolation: isolate;
+  margin: 0;
+  padding: 0 0 0 24px;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
-.agno-reasoning__step::before {
+.agno-timeline::before {
   content: '';
   position: absolute;
-  left: -16px;
-  top: 6px;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--agno-brand);
+  left: 8px;
+  top: 10px;
+  bottom: 10px;
+  width: 1px;
+  background: var(--agno-border);
 }
-.agno-reasoning__title {
-  font-weight: 600;
+.agno-timeline__item {
+  position: relative;
+}
+.agno-timeline__item::before {
+  content: '';
+  position: absolute;
+  left: -20px;
+  top: 7px;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--agno-radius-full);
+  background: var(--agno-muted);
+  box-shadow: 0 0 0 4px var(--agno-bg);
+}
+.agno-reasoning__title {
+  font-weight: 500;
 }
 .agno-reasoning__text {
-  color: var(--agno-text);
+  color: var(--agno-primary);
 }
 .agno-reasoning__meta {
-  font-size: 12px;
   color: var(--agno-muted);
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
 }
 
-.agno-citations__body {
-  padding: 4px 11px 11px;
+/* Behind the scenes — one trigger over the whole run timeline. */
+.agno-bts {
   display: flex;
   flex-direction: column;
-  gap: 9px;
+  gap: 12px;
+}
+.agno-bts__toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  max-width: 100%;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--agno-muted);
+  cursor: pointer;
+  font: inherit;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+.agno-bts__toggle:hover {
+  color: var(--agno-primary);
+}
+/* Loader and chevron share a cell: the loader shows while streaming, and the
+   chevron takes over on hover — as in AgentOS. */
+.agno-bts__marker {
+  display: grid;
+  place-items: center;
+  flex: 0 0 16px;
+  width: 16px;
+  height: 16px;
+}
+.agno-bts__marker > * {
+  grid-column: 1;
+  grid-row: 1;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.agno-bts--streaming .agno-bts__chev {
+  opacity: 0;
 }
-.agno-citations__name {
-  font-weight: 600;
-  font-size: 12px;
+.agno-bts--streaming .agno-bts__toggle:hover .agno-bts__chev {
+  opacity: 1;
 }
-.agno-citations__snippet {
-  font-size: 12px;
+.agno-bts--streaming .agno-bts__toggle:hover .agno-loader {
+  opacity: 0;
+}
+.agno-bts__toggle[aria-expanded='true'] .agno-bts__chev {
+  transform: rotate(180deg);
+}
+.agno-bts__label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agno-bts__label {
   color: var(--agno-muted);
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
 }
-.agno-citations__url {
-  font-size: 12px;
-  color: var(--agno-brand);
+/* One step line: label, truncated preview, marker on the right. */
+.agno-bts__step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  color: var(--agno-muted);
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+.agno-bts__step--button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+.agno-bts__step--button:hover .agno-bts__step-label {
+  color: var(--agno-primary);
+}
+.agno-bts__step-label {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.agno-bts__preview {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--agno-muted);
+}
+.agno-bts__detail {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.agno-bts__step-marker {
+  margin-left: auto;
+  display: grid;
+  place-items: center;
+  flex: 0 0 14px;
+  width: 14px;
+  height: 14px;
+}
+.agno-bts__step-marker > * {
+  grid-column: 1;
+  grid-row: 1;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+/* While a step runs the loader shows; hovering reveals the chevron. */
+.agno-bts__step-marker .agno-loader + .agno-bts__chev {
+  opacity: 0;
+}
+.agno-bts__step--button:hover .agno-bts__step-marker .agno-bts__chev {
+  opacity: 1;
+}
+.agno-bts__step--button:hover .agno-bts__step-marker .agno-loader {
+  opacity: 0;
+}
+.agno-bts__step--button[aria-expanded='true'] .agno-bts__chev {
+  transform: rotate(180deg);
+}
+.agno-bts__step-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 4px;
+}
+.agno-bts__name {
+  color: var(--agno-primary);
+  font-weight: 500;
+}
+.agno-bts__content {
+  color: var(--agno-primary);
+}
+
+/* Timeline rows with an icon column (the line runs behind the icons). */
+.agno-timeline--icons {
+  padding-left: 0;
+}
+/* A single step needs no connecting rule. */
+.agno-timeline--icons:has(> :only-child)::before {
+  display: none;
+}
+.agno-timeline__row {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.agno-timeline__icon {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  flex: 0 0 16px;
+  width: 16px;
+  height: 20px;
+  color: var(--agno-muted);
+  background: var(--agno-bg);
+}
+.agno-timeline__content {
+  flex: 1;
+  min-width: 0;
+  margin-top: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Sources — the cards under an answer
+   ───────────────────────────────────────────────────────────────────────── */
+
+.agno-sources {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.agno-sources__head {
+  color: var(--agno-muted);
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+/* Cards are sized by their title and wrap into as many per row as fit. */
+.agno-sources__grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.agno-sources__more {
+  align-self: flex-start;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--agno-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.75rem;
+}
+.agno-sources__more:hover {
+  color: var(--agno-primary);
+}
+
+.agno-source {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: min(100%, 320px);
+  padding: 8px 12px;
+  border: 1px solid transparent;
+  border-radius: var(--agno-radius-md);
+  background: var(--agno-secondary-soft);
+  color: inherit;
+  text-decoration: none;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+a.agno-source:hover {
+  border-color: var(--agno-border);
+  background: var(--agno-secondary);
+}
+.agno-source__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.125rem;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Follow-ups — "Related questions" under the latest answer
+   ───────────────────────────────────────────────────────────────────────── */
+
+.agno-followups {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.agno-followups__head {
+  color: var(--agno-muted);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+}
+/* One bordered box, rows divided by hairlines — reads as a list of questions
+   rather than a row of chips, so long prompts have the full width. */
+.agno-followups__list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--agno-border);
+  border-radius: var(--agno-radius-lg);
+  background: var(--agno-secondary-soft);
+  overflow: hidden;
+}
+.agno-followup {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 10px 14px;
+  border: 0;
+  border-top: 1px solid var(--agno-border);
+  background: none;
+  color: var(--agno-primary);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  letter-spacing: -0.01em;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+.agno-followup:first-child {
+  border-top: 0;
+}
+.agno-followup:hover:not(:disabled),
+.agno-followup:focus-visible {
+  background: var(--agno-tint);
+  outline: none;
+}
+.agno-followup:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/* Clamped to `--agno-followup-lines` (set per button from the `lines` prop),
+   one by default: a prompt that wraps reads like an answer, not a question to
+   ask. The full text is on the button's `title`. */
+.agno-followup__text {
+  flex: 1;
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--agno-followup-lines, 1);
+  line-clamp: var(--agno-followup-lines, 1);
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+/* Pinned above the dock by `<ChatWindow>`: same 800px column and inner
+   padding as the quick prompts, so the box lines up with the input. */
+.agno-followups--dock {
+  width: 100%;
+  max-width: calc(800px + 48px);
+  margin: 0 auto;
+  padding: 0 32px 8px;
+  box-sizing: border-box;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Link previews — the card body, shared by source cards and hover cards
+   ───────────────────────────────────────────────────────────────────────── */
+
+.agno-preview {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.agno-preview__site {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: var(--agno-muted);
+  font-size: 0.6875rem;
+  line-height: 1rem;
+}
+.agno-preview__host {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agno-preview__title {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.125rem;
+  /* Two lines, then ellipsis — titles vary wildly and the cards are a grid. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.agno-preview__desc {
+  color: var(--agno-muted);
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.agno-preview__image {
+  margin-top: 6px;
+  width: 100%;
+  aspect-ratio: 1.91;
+  object-fit: cover;
+  border-radius: var(--agno-radius-sm);
+}
+.agno-preview[data-loading='true'] .agno-preview__title {
+  opacity: 0.6;
+}
+
+.agno-favicon {
+  flex: 0 0 14px;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--agno-radius-xs);
+  object-fit: contain;
+}
+.agno-favicon--glyph {
+  display: grid;
+  place-items: center;
+  color: var(--agno-muted);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Inline citation markers + the hover card
+   ───────────────────────────────────────────────────────────────────────── */
+
+.agno-hover {
+  /* The card is portalled to <body>, so this only has to hold the trigger. */
+  display: inline;
+}
+.agno-cite {
+  display: inline-grid;
+  place-items: center;
+  min-width: 16px;
+  height: 16px;
+  margin: 0 1px 0 2px;
+  padding: 0 4px;
+  border-radius: var(--agno-radius-full);
+  background: var(--agno-tint);
+  color: var(--agno-muted);
+  font-size: 0.625rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
   text-decoration: none;
+  vertical-align: 2px;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.agno-md a.agno-cite {
+  color: var(--agno-muted);
+}
+.agno-cite:hover,
+.agno-cite:focus-visible {
+  background: var(--agno-tint-strong);
+  color: var(--agno-primary);
 }
 
-/* Workflow steps */
+.agno-hovercard {
+  position: fixed;
+  z-index: 2147483000;
+  padding: 12px;
+  border: 1px solid var(--agno-border);
+  border-radius: var(--agno-radius-lg);
+  background: var(--agno-bg);
+  box-shadow: var(--agno-shadow-panel);
+  color: var(--agno-primary);
+  font-family: var(--agno-font);
+  animation: agno-hovercard-in 0.12s ease-out;
+}
+/* Positioned by its top edge either way; anchoring above means lifting the
+   card by its own height, which only CSS knows. */
+.agno-hovercard--top {
+  transform: translateY(-100%);
+}
+@keyframes agno-hovercard-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .agno-hovercard {
+    animation: none;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Workflow steps + member responses
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-steps,
 .agno-members {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 .agno-steps__title,
 .agno-members__title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
   color: var(--agno-muted);
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 .agno-steps__list {
   display: flex;
   flex-direction: column;
-  position: relative;
+  gap: 6px;
 }
-.agno-step {
-  border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius-sm);
-  background: var(--agno-surface);
-  margin-bottom: 4px;
+.agno-step,
+.agno-member {
+  border-radius: var(--agno-radius-md);
+  background: var(--agno-secondary-soft);
+  overflow: hidden;
 }
-.agno-step__head {
+.agno-step__head,
+.agno-member__head {
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 9px;
-  padding: 8px 11px;
+  gap: 8px;
+  padding: 10px 12px;
   background: none;
   border: none;
   color: inherit;
@@ -505,79 +1172,53 @@
   text-align: left;
 }
 .agno-step__icon {
+  flex: 0 0 18px;
   width: 18px;
   height: 18px;
-  flex: 0 0 18px;
-  border-radius: 50%;
+  border-radius: var(--agno-radius-full);
   display: grid;
   place-items: center;
   font-size: 11px;
-  background: var(--agno-surface-2);
+  background: var(--agno-tint);
   color: var(--agno-muted);
 }
 .agno-step__icon--completed {
-  background: rgba(34, 197, 94, 0.15);
+  background: rgba(var(--color-positive), 0.15);
   color: var(--agno-positive);
 }
 .agno-step__icon--running {
   background: var(--agno-brand-soft);
   color: var(--agno-brand);
-  animation: agno-pulse 1.4s ease-in-out infinite;
 }
 .agno-step__icon--error {
-  background: rgba(229, 57, 53, 0.15);
-  color: var(--agno-error);
-}
-@keyframes agno-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
+  background: rgba(var(--color-destructive), 0.15);
+  color: var(--agno-destructive);
 }
-.agno-step__name {
+.agno-step__name,
+.agno-member__name {
   font-weight: 500;
-  font-size: 13px;
 }
-.agno-step__chev {
+.agno-step__chev,
+.agno-member__chev {
   margin-left: auto;
-  font-size: 9px;
   color: var(--agno-muted);
+  transition: transform 0.2s ease;
+}
+.agno-step__head[aria-expanded='true'] .agno-step__chev,
+.agno-member__head[aria-expanded='true'] .agno-member__chev {
+  transform: rotate(180deg);
 }
 .agno-step__body {
-  padding: 0 11px 11px 38px;
-  font-size: 13px;
+  padding: 0 12px 12px 38px;
 }
 .agno-step__error {
-  color: var(--agno-error);
-}
-
-/* Member / executor responses */
-.agno-member {
-  border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius-sm);
-  background: var(--agno-surface);
-  overflow: hidden;
-}
-.agno-member__head {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 11px;
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
+  color: var(--agno-destructive);
 }
 .agno-member__dot {
+  flex: 0 0 8px;
   width: 8px;
   height: 8px;
-  flex: 0 0 8px;
-  border-radius: 50%;
+  border-radius: var(--agno-radius-full);
   background: var(--agno-muted);
 }
 .agno-member__dot--running {
@@ -588,36 +1229,35 @@
   background: var(--agno-positive);
 }
 .agno-member__dot--error {
-  background: var(--agno-error);
+  background: var(--agno-destructive);
 }
-.agno-member__name {
-  font-weight: 600;
-  font-size: 13px;
+@keyframes agno-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
 }
 .agno-member__kind {
-  font-size: 10.5px;
   color: var(--agno-muted);
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-.agno-member__chev {
-  margin-left: auto;
-  font-size: 9px;
-  color: var(--agno-muted);
 }
 .agno-member__body {
-  padding: 0 11px 11px;
-  border-top: 1px solid var(--agno-border);
+  padding: 0 12px 12px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding-top: 10px;
-}
-.agno-member__content {
-  font-size: 13.5px;
+  gap: 12px;
 }
 
-/* Media */
+/* ─────────────────────────────────────────────────────────────────────────
+   Media
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-media {
   display: flex;
   flex-wrap: wrap;
@@ -626,63 +1266,219 @@
 .agno-media__img,
 .agno-media__video {
   max-width: 100%;
-  border-radius: var(--agno-radius-sm);
+  border-radius: var(--agno-radius-md);
   border: 1px solid var(--agno-border);
 }
 .agno-media__audio {
   width: 100%;
 }
 
-/* Status indicator */
+/* ─────────────────────────────────────────────────────────────────────────
+   Status + loader (ported from agno-os DiagonalGridLoader)
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-status {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 8px;
   color: var(--agno-muted);
-  font-size: 13px;
-  padding-left: 42px;
-}
-.agno-status__dots {
-  display: inline-flex;
-  gap: 3px;
-}
-.agno-status__dots span {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--agno-brand);
-  animation: agno-bounce 1.2s infinite ease-in-out;
+  padding-left: 40px;
 }
-.agno-status__dots span:nth-child(2) {
-  animation-delay: 0.15s;
+
+.agno-loader {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  color: currentColor;
 }
-.agno-status__dots span:nth-child(3) {
-  animation-delay: 0.3s;
+
+/* Grid loader — copied from agno-os DiagonalGridLoader.css */
+.agno-loader__dot {
+  color: currentColor;
+  box-shadow:
+    var(--gap) calc(-1 * var(--gap)) 0 0px,
+    calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+    calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+    var(--gap) 0 0 0px,
+    calc(2 * var(--gap)) 0 0 0px,
+    calc(3 * var(--gap)) 0 0 0px,
+    var(--gap) var(--gap) 0 0px,
+    calc(2 * var(--gap)) var(--gap) 0 0px,
+    calc(3 * var(--gap)) var(--gap) 0 0px;
+  transform: translateX(calc(-2 * var(--gap)));
+  animation: agno-grid-loader 2s infinite linear;
 }
-@keyframes agno-bounce {
-  0%, 60%, 100% {
-    transform: translateY(0);
-    opacity: 0.5;
+
+@keyframes agno-grid-loader {
+  0% {
+    box-shadow:
+      var(--gap) calc(-1 * var(--gap)) 0 0px,
+      calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      var(--gap) 0 0 0px,
+      calc(2 * var(--gap)) 0 0 0px,
+      calc(3 * var(--gap)) 0 0 0px,
+      var(--gap) var(--gap) 0 0px,
+      calc(2 * var(--gap)) var(--gap) 0 0px,
+      calc(3 * var(--gap)) var(--gap) 0 0px;
   }
-  30% {
-    transform: translateY(-4px);
-    opacity: 1;
+
+  12.5% {
+    box-shadow:
+      var(--gap) calc(-1 * var(--gap)) 0 0px,
+      calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      var(--gap) 0 0 0px color-mix(in srgb, currentColor 20%, transparent),
+      calc(2 * var(--gap)) 0 0 0px,
+      calc(3 * var(--gap)) 0 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      var(--gap) var(--gap) 0 0px,
+      calc(2 * var(--gap)) var(--gap) 0 0px,
+      calc(3 * var(--gap)) var(--gap) 0 0px;
+  }
+
+  25% {
+    box-shadow:
+      var(--gap) calc(-1 * var(--gap)) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      var(--gap) 0 0 0px,
+      calc(2 * var(--gap)) 0 0 0px,
+      calc(3 * var(--gap)) 0 0 0px,
+      var(--gap) var(--gap) 0 0px,
+      calc(2 * var(--gap)) var(--gap) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(3 * var(--gap)) var(--gap) 0 0px;
   }
+
+  37.5% {
+    box-shadow:
+      var(--gap) calc(-1 * var(--gap)) 0 0px,
+      calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      var(--gap) 0 0 0px,
+      calc(2 * var(--gap)) 0 0 0px,
+      calc(3 * var(--gap)) 0 0 0px,
+      var(--gap) var(--gap) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(2 * var(--gap)) var(--gap) 0 0px,
+      calc(3 * var(--gap)) var(--gap) 0 0px;
+  }
+
+  50% {
+    box-shadow:
+      var(--gap) calc(-1 * var(--gap)) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      var(--gap) 0 0 0px,
+      calc(2 * var(--gap)) 0 0 0px,
+      calc(3 * var(--gap)) 0 0 0px,
+      var(--gap) var(--gap) 0 0px,
+      calc(2 * var(--gap)) var(--gap) 0 0px,
+      calc(3 * var(--gap)) var(--gap) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  62.5% {
+    box-shadow:
+      var(--gap) calc(-1 * var(--gap)) 0 0px,
+      calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      var(--gap) 0 0 0px color-mix(in srgb, currentColor 20%, transparent),
+      calc(2 * var(--gap)) 0 0 0px,
+      calc(3 * var(--gap)) 0 0 0px,
+      var(--gap) var(--gap) 0 0px,
+      calc(2 * var(--gap)) var(--gap) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(3 * var(--gap)) var(--gap) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  75% {
+    box-shadow:
+      var(--gap) calc(-1 * var(--gap)) 0 0px,
+      calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      var(--gap) 0 0 0px,
+      calc(2 * var(--gap)) 0 0 0px,
+      calc(3 * var(--gap)) 0 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      var(--gap) var(--gap) 0 0px,
+      calc(2 * var(--gap)) var(--gap) 0 0px,
+      calc(3 * var(--gap)) var(--gap) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent);
+  }
+
+  87.5% {
+    box-shadow:
+      var(--gap) calc(-1 * var(--gap)) 0 0px,
+      calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      var(--gap) 0 0 0px,
+      calc(2 * var(--gap)) 0 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(3 * var(--gap)) 0 0 0px,
+      var(--gap) var(--gap) 0 0px
+        color-mix(in srgb, currentColor 20%, transparent),
+      calc(2 * var(--gap)) var(--gap) 0 0px,
+      calc(3 * var(--gap)) var(--gap) 0 0px;
+  }
+
+  100% {
+    box-shadow:
+      var(--gap) calc(-1 * var(--gap)) 0 0px,
+      calc(2 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      calc(3 * var(--gap)) calc(-1 * var(--gap)) 0 0px,
+      var(--gap) 0 0 0px,
+      calc(2 * var(--gap)) 0 0 0px,
+      calc(3 * var(--gap)) 0 0 0px,
+      var(--gap) var(--gap) 0 0px,
+      calc(2 * var(--gap)) var(--gap) 0 0px,
+      calc(3 * var(--gap)) var(--gap) 0 0px;
+  }
+}
+
+/* Loader sizing — agno-os sets these inline; the defaults match its `default` size. */
+.agno-loader__dot {
+  --dot-size: 2px;
+  --gap: 6px;
+  width: 2px;
+  height: 2px;
+  aspect-ratio: 1;
+  border-radius: 0.5px;
 }
 
-/* Human-in-the-loop — Agno OS style cards */
+/* ─────────────────────────────────────────────────────────────────────────
+   Human in the loop
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-hitl {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  max-width: 360px;
+  gap: 12px;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
 }
 .agno-hitl__title {
   display: flex;
   align-items: center;
-  gap: 7px;
-  font-weight: 600;
-  font-size: 13px;
+  gap: 8px;
+  color: var(--agno-muted);
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 .agno-hitl__actions {
   display: flex;
@@ -694,9 +1490,8 @@
   flex-direction: column;
   gap: 12px;
   padding: 12px;
-  background: var(--agno-surface-2);
-  border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius);
+  border-radius: var(--agno-radius-md);
+  background: var(--agno-secondary-soft);
 }
 .agno-hitl-card__head {
   display: flex;
@@ -707,48 +1502,41 @@
 .agno-hitl-card__tool {
   display: flex;
   align-items: center;
-  gap: 7px;
-  font-family: 'DM Mono', ui-monospace, monospace;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
+  gap: 8px;
   color: var(--agno-muted);
-}
-.agno-hitl-card__icon {
-  font-size: 13px;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 .agno-hitl-card__choices {
   display: flex;
   gap: 6px;
 }
 .agno-hitl-card__choice {
-  width: 26px;
-  height: 26px;
   display: grid;
   place-items: center;
-  border-radius: 6px;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--agno-radius-sm);
   border: 1px solid var(--agno-border);
-  background: var(--agno-bg);
+  background: transparent;
   color: var(--agno-muted);
   cursor: pointer;
-  font-size: 12px;
 }
 .agno-hitl-card__choice:hover:not(:disabled) {
-  border-color: var(--agno-border-strong);
-  color: var(--agno-text);
+  border-color: var(--agno-border-selected);
+  color: var(--agno-primary);
 }
 .agno-hitl-card__choice.is-active.is-confirm {
   border-color: var(--agno-positive);
   color: var(--agno-positive);
-  box-shadow: 0 0 0 1px var(--agno-positive);
 }
 .agno-hitl-card__choice.is-active.is-reject {
-  border-color: var(--agno-error);
-  color: var(--agno-error);
-  box-shadow: 0 0 0 1px var(--agno-error);
+  border-color: var(--agno-destructive);
+  color: var(--agno-destructive);
 }
 .agno-hitl-card__args {
-  border: 1px solid var(--agno-border);
   border-radius: var(--agno-radius-sm);
   background: var(--agno-bg);
 }
@@ -757,60 +1545,69 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 7px 10px;
+  gap: 8px;
+  padding: 8px 10px;
   background: none;
   border: none;
   color: var(--agno-muted);
   cursor: pointer;
-  font: inherit;
-  font-size: 11px;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+}
+.agno-hitl-card__args-head[aria-expanded='true'] .agno-hitl-card__chev {
+  transform: rotate(180deg);
 }
 .agno-hitl-card__chev {
-  font-size: 8px;
+  transition: transform 0.2s ease;
 }
 .agno-hitl-card__args-body {
-  padding: 0 10px 9px;
+  padding: 0 10px 10px;
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 .agno-hitl-card__arg {
   display: flex;
-  gap: 6px;
-  font-size: 12.5px;
+  gap: 8px;
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
 }
 .agno-hitl-card__arg-key {
   color: var(--agno-muted);
-  font-family: 'DM Mono', ui-monospace, monospace;
+  font-family: var(--agno-font-mono);
 }
 .agno-hitl-card__arg-val {
-  color: var(--agno-text);
   word-break: break-word;
 }
-.agno-hitl-card__reason {
+.agno-hitl-card__reason,
+.agno-hitl-card__input {
   background: var(--agno-bg);
   border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius-sm);
-  padding: 8px 10px;
-  color: var(--agno-text);
+  border-radius: var(--agno-radius-md);
+  padding: 9px 11px;
+  color: var(--agno-primary);
   font: inherit;
+  letter-spacing: -0.02em;
+}
+.agno-hitl-card__reason {
   resize: vertical;
 }
-.agno-hitl-card__reason:focus {
+.agno-hitl-card__reason:focus,
+.agno-hitl-card__input:focus {
   outline: none;
-  border-color: var(--agno-border-strong);
+  border-color: var(--agno-border-selected);
 }
 .agno-hitl-card__fields {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
 }
 .agno-hitl-card__field {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
 }
 .agno-hitl-card__field.is-bool {
   flex-direction: row;
@@ -818,32 +1615,26 @@
   justify-content: space-between;
 }
 .agno-hitl-card__field-name {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
   color: var(--agno-muted);
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
-.agno-hitl-card__input {
-  background: var(--agno-bg);
-  border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius-sm);
-  padding: 9px 11px;
-  color: var(--agno-text);
-  font: inherit;
-}
-.agno-hitl-card__input:focus {
-  outline: none;
-  border-color: var(--agno-brand);
-}
 
-/* Event log */
+/* ─────────────────────────────────────────────────────────────────────────
+   Event log
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-eventlog {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 3px;
-  font-size: 12px;
-  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  gap: 4px;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  letter-spacing: -0.02em;
 }
 .agno-eventlog__empty {
   color: var(--agno-muted);
@@ -852,20 +1643,16 @@
   display: flex;
   align-items: baseline;
   gap: 8px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  background: var(--agno-surface);
-  border: 1px solid var(--agno-border);
+  padding: 5px 8px;
+  border-radius: var(--agno-radius-sm);
+  background: var(--agno-secondary-soft);
 }
 .agno-eventlog__name {
-  color: var(--agno-brand);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 .agno-eventlog__count {
-  color: var(--agno-text);
-  background: var(--agno-surface-2);
-  border-radius: 999px;
-  padding: 0 6px;
-  font-size: 11px;
+  color: var(--agno-muted);
 }
 .agno-eventlog__source {
   color: var(--agno-muted);
@@ -879,11 +1666,20 @@
   white-space: nowrap;
 }
 
-/* Sessions */
+/* The per-run feed nested inside a behind-the-scenes step. */
+.agno-timeline__content .agno-eventlog {
+  margin-top: 4px;
+  padding-right: 4px;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Sessions
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-sessions {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
   height: 100%;
   min-height: 0;
 }
@@ -893,42 +1689,16 @@
   justify-content: space-between;
 }
 .agno-sessions__title {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
   color: var(--agno-muted);
-}
-.agno-sessions__new {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  background: var(--agno-surface);
-  border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius);
-  color: var(--agno-text);
-  padding: 11px 12px;
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 600;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  transition: border-color 0.12s ease, background 0.12s ease;
-}
-.agno-sessions__new:hover {
-  border-color: var(--agno-border-strong);
-  background: var(--agno-surface-2);
-}
-.agno-sessions__new span {
-  font-size: 15px;
-  font-weight: 400;
 }
 .agno-sessions__empty {
   color: var(--agno-muted);
-  font-size: 13px;
-  padding: 6px 2px;
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
 }
 .agno-sessions__list {
   list-style: none;
@@ -936,29 +1706,31 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   overflow-y: auto;
 }
 .agno-sessions__item {
   display: flex;
   align-items: stretch;
-  border-radius: var(--agno-radius);
-  border: 1px solid var(--agno-border);
-  background: var(--agno-surface);
-  transition: border-color 0.12s ease, background 0.12s ease;
+  /* The list scrolls, so a row must never be squeezed to make others fit —
+     shrinking one cascades into the name's line box and clips its descenders. */
+  flex-shrink: 0;
+  min-height: 3.25rem;
+  border-radius: var(--agno-radius-md);
+  background: var(--agno-secondary-soft);
 }
 .agno-sessions__item:hover {
-  border-color: var(--agno-border-strong);
+  background: var(--agno-secondary);
 }
 .agno-sessions__item.is-active {
-  background: var(--agno-surface-2);
-  border-color: var(--agno-border-strong);
+  background: var(--agno-secondary);
 }
 .agno-sessions__select {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   gap: 2px;
   background: none;
   border: none;
@@ -966,251 +1738,387 @@
   cursor: pointer;
   font: inherit;
   text-align: left;
-  padding: 9px 11px;
+  padding: 10px 12px;
 }
 .agno-sessions__name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 13px;
+  /* `overflow: hidden` clips vertically too, so keep the full line box. */
+  flex-shrink: 0;
 }
 .agno-sessions__date {
-  font-size: 11px;
   color: var(--agno-muted);
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
 }
 .agno-sessions__delete {
+  display: grid;
+  place-items: center;
   background: none;
   border: none;
   color: var(--agno-muted);
   cursor: pointer;
-  padding: 0 10px;
-  font-size: 13px;
+  padding: 0 12px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.agno-sessions__item:hover .agno-sessions__delete,
+.agno-sessions__delete:focus-visible {
+  opacity: 1;
 }
 .agno-sessions__delete:hover {
-  color: var(--agno-error);
+  color: var(--agno-destructive);
+}
+.agno-sessions__spinner {
+  display: grid;
+  place-items: center;
+  padding: 0 12px;
+  color: var(--agno-muted);
 }
 
-/* Banner */
+/* ─────────────────────────────────────────────────────────────────────────
+   Banner + errors
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-banner {
-  padding: 11px 16px;
+  padding: 12px 16px;
   background: var(--agno-brand-soft);
-  border-bottom: 1px solid rgba(255, 64, 23, 0.3);
-  color: var(--agno-text);
-  font-size: 13px;
+  border-bottom: 1px solid rgba(var(--color-brand-brand), 0.3);
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
 }
 .agno-banner code {
-  background: var(--agno-surface-2);
+  background: var(--agno-tint);
   padding: 1px 5px;
-  border-radius: 5px;
-  font-size: 0.9em;
-  font-family: 'DM Mono', ui-monospace, monospace;
+  border-radius: var(--agno-radius-xs);
+  font-family: var(--agno-font-mono);
 }
+.agno-chat__error {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 800px;
+  max-height: 120px;
+  overflow-y: auto;
+  margin: 0 auto;
+  padding: 0 24px 8px;
+  color: var(--agno-destructive);
+  font-size: 0.75rem;
+  line-height: 1.0625rem;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Chat input dock
+   ───────────────────────────────────────────────────────────────────────── */
 
-/* Input */
 .agno-input {
-  border-top: 1px solid var(--agno-border);
-  background: var(--agno-bg);
-  padding: 12px 14px;
+  padding: 8px 24px 12px;
+}
+.agno-input__dock {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--agno-border);
+  border-radius: var(--agno-radius-xl);
+  background: var(--agno-accent);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+/* Attachment previews — the AgentOS upload banner: a count with "clear all",
+   then a scrolling row of thumbnails and typed file cards. */
+.agno-files {
   display: flex;
   flex-direction: column;
+  gap: 10px;
+  padding: 4px 4px 2px;
+}
+.agno-files__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.agno-files__count,
+.agno-files__clear {
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.agno-files__count {
+  color: var(--agno-muted);
+}
+.agno-files__clear {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: none;
+  background: none;
+  padding: 0;
+  color: var(--agno-primary);
+  cursor: pointer;
+}
+.agno-files__row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.agno-files__row::-webkit-scrollbar {
+  display: none;
+}
+.agno-file {
+  position: relative;
+  flex: none;
+}
+.agno-file__remove {
+  position: absolute;
+  top: -5px;
+  right: -6px;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  padding: 2px;
+  border: none;
+  border-radius: var(--agno-radius-full);
+  background: rgba(var(--color-muted), 0.9);
+  color: var(--agno-accent);
+  cursor: pointer;
+}
+.agno-file__thumb {
+  display: block;
+  width: 69px;
+  height: 54px;
+  object-fit: cover;
+  border-radius: var(--agno-radius-sm);
+}
+.agno-file__card {
+  display: flex;
+  align-items: center;
   gap: 8px;
+  height: 54px;
+  padding: 0 12px;
+  border: 1px solid var(--agno-border);
+  border-radius: var(--agno-radius-sm);
+  background: var(--agno-bg);
+}
+.agno-file__mark {
+  display: grid;
+  place-items: center;
+  flex: none;
+  padding: 6px;
+  border-radius: var(--agno-radius-sm);
+  background: var(--agno-tint);
+  color: var(--agno-primary);
 }
-.agno-input__files {
+.agno-file__meta {
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
+  flex-direction: column;
+  min-width: 0;
 }
-.agno-input__file {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  background: var(--agno-surface-2);
-  border-radius: 999px;
-  padding: 2px 6px 2px 10px;
+.agno-file__name {
+  max-width: 8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--agno-primary);
 }
-.agno-input__file button {
-  border: none;
-  background: none;
-  color: var(--agno-muted);
-  cursor: pointer;
-  font-size: 14px;
+.agno-file__type {
+  max-width: 8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--agno-font-mono);
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: rgba(var(--color-primary), 0.5);
 }
-.agno-input__row {
+.agno-input__field {
   display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  background: var(--agno-surface);
-  border: 1px solid var(--agno-border);
+  align-items: flex-start;
   border-radius: var(--agno-radius-lg);
-  padding: 7px 8px 7px 10px;
-}
-.agno-input__row:focus-within {
-  border-color: var(--agno-border-strong);
+  background: var(--agno-secondary);
 }
 .agno-input__textarea {
   flex: 1;
+  min-width: 0;
+  min-height: 31px;
+  max-height: 213px;
   resize: none;
-  max-height: 160px;
+  overflow-y: auto;
   background: transparent;
   border: none;
-  padding: 6px 8px;
-  color: var(--agno-text);
+  padding: 12px;
+  color: var(--agno-primary);
   font: inherit;
+  letter-spacing: -0.02em;
 }
 .agno-input__textarea::placeholder {
-  color: var(--agno-muted);
+  color: rgba(var(--color-muted), 0.5);
 }
 .agno-input__textarea:focus {
   outline: none;
 }
-.agno-input__attach {
-  background: none;
-  border: none;
-  border-radius: var(--agno-radius-sm);
-  width: 34px;
-  height: 34px;
-  cursor: pointer;
-  color: var(--agno-muted);
-  font-size: 15px;
+.agno-input__textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.agno-input__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
 }
-.agno-input__attach:hover {
-  color: var(--agno-text);
-  background: var(--agno-surface-2);
+.agno-input__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-/* Buttons */
+/* ─────────────────────────────────────────────────────────────────────────
+   Buttons — Agno OS `Button` (DM Mono, uppercase, rounded-md)
+   ───────────────────────────────────────────────────────────────────────── */
+
 .agno-btn {
-  border: 1px solid var(--agno-border);
-  background: var(--agno-surface-2);
-  color: var(--agno-text);
-  border-radius: var(--agno-radius-sm);
-  padding: 8px 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 16px;
+  border: 1px solid transparent;
+  border-radius: var(--agno-radius-md);
+  background: var(--agno-primary);
+  color: var(--agno-accent);
   cursor: pointer;
-  font: inherit;
-  font-weight: 500;
-  transition: opacity 0.12s ease, border-color 0.12s ease;
+  user-select: none;
+  white-space: nowrap;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 0.24px;
+  text-transform: uppercase;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: background 0.12s ease, opacity 0.12s ease, border-color 0.12s ease;
 }
 .agno-btn:hover:not(:disabled) {
-  border-color: var(--agno-border-strong);
+  background: rgba(var(--color-primary), 0.8);
 }
 .agno-btn:disabled {
-  opacity: 0.45;
+  opacity: 0.5;
   cursor: not-allowed;
+  pointer-events: none;
 }
-.agno-btn--primary {
-  background: var(--agno-primary-bg);
-  border-color: var(--agno-primary-bg);
-  color: var(--agno-primary-fg);
+.agno-btn--secondary {
+  background: var(--agno-secondary);
+  color: var(--agno-primary);
 }
-.agno-btn--primary:hover:not(:disabled) {
-  opacity: 0.9;
-  border-color: var(--agno-primary-bg);
+.agno-btn--secondary:hover:not(:disabled) {
+  background: var(--agno-secondary-soft);
 }
-.agno-btn--stop {
-  background: var(--agno-error);
-  border-color: var(--agno-error);
-  color: #fff;
+.agno-btn--outline {
+  background: transparent;
+  border-color: var(--agno-border);
+  color: var(--agno-primary);
+}
+.agno-btn--outline:hover:not(:disabled) {
+  background: var(--agno-tint);
 }
 .agno-btn--ghost {
-  background: none;
-  color: var(--agno-muted);
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  padding: 7px 12px;
+  background: transparent;
+  color: var(--agno-primary);
+  box-shadow: none;
 }
 .agno-btn--ghost:hover:not(:disabled) {
-  color: var(--agno-text);
-  background: var(--agno-surface);
+  background: var(--agno-tint);
 }
 .agno-btn--ghost.is-active {
-  background: var(--agno-surface-2);
-  color: var(--agno-text);
-  border-color: var(--agno-border-strong);
+  background: var(--agno-tint-strong);
 }
-/* Circular icon send button (paper-plane), brand-styled. */
-.agno-input__send {
-  flex: 0 0 auto;
-  display: grid;
-  place-items: center;
-  width: 36px;
-  height: 36px;
-  border-radius: var(--agno-radius);
-  border: 1px solid transparent;
-  background: var(--agno-primary-bg);
-  color: var(--agno-primary-fg);
-  cursor: pointer;
-  font-size: 14px;
-  transition: opacity 0.12s ease, background 0.12s ease;
+.agno-btn--destructive {
+  background: var(--agno-destructive);
+  color: #fff;
 }
-.agno-input__send span {
-  display: block;
-  transform: translateX(1px);
+.agno-btn--destructive:hover:not(:disabled) {
+  background: rgba(var(--color-destructive), 0.8);
 }
-.agno-input__send:hover:not(:disabled) {
-  opacity: 0.9;
+.agno-btn--sm {
+  height: 32px;
+  padding: 0 12px;
 }
-.agno-input__send:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
+/* Square icon buttons: `iconSm` (32px) and `iconXs` (24px) in Agno OS. */
+.agno-btn--icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: var(--agno-radius-sm);
 }
-.agno-input__send--stop {
-  background: var(--agno-error);
-  color: #fff;
+.agno-btn--icon-xs {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: var(--agno-radius-sm);
 }
-.agno-input__send--stop span {
-  transform: none;
-  font-size: 11px;
+.agno-btn--block {
+  width: 100%;
 }
 
-.agno-chat__error {
-  color: var(--agno-error);
-  font-size: 13px;
-  padding: 6px 14px;
-}
+/* ─────────────────────────────────────────────────────────────────────────
+   Entity selector
+   ───────────────────────────────────────────────────────────────────────── */
 
-/* Entity selector — Agno OS style popover */
 .agno-select {
   position: relative;
+  min-width: 0;
 }
 .agno-select__trigger {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  height: 34px;
-  min-width: 190px;
+  height: 32px;
+  /* Comfortable 190px when there is room, but never wider than what the header
+     can spare — a hard floor here starves the title in a narrow launcher
+     panel. `.agno-select__value` ellipses once it shrinks. */
+  min-width: min(190px, 100%);
   max-width: 280px;
   padding: 0 10px;
-  background: var(--agno-surface);
+  background: transparent;
   border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius-sm);
-  color: var(--agno-text);
+  border-radius: var(--agno-radius-md);
+  color: var(--agno-primary);
   cursor: pointer;
-  font: inherit;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 .agno-select__trigger:hover:not(:disabled) {
-  border-color: var(--agno-border-strong);
+  background: var(--agno-tint);
 }
 .agno-select__trigger:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 .agno-select__value {
-  font-family: 'DM Mono', ui-monospace, monospace;
-  font-size: 12px;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .agno-select__chev {
+  flex: 0 0 16px;
   color: var(--agno-muted);
-  font-size: 13px;
-  transition: transform 0.15s ease;
+  transition: transform 0.2s ease;
 }
 .agno-select__chev.is-open {
   transform: rotate(180deg);
@@ -1225,27 +2133,25 @@
   max-height: 360px;
   overflow-y: auto;
   padding: 6px;
-  background: var(--agno-surface);
-  border: 1px solid var(--agno-border);
-  border-radius: var(--agno-radius);
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.3),
-    0 12px 32px -8px rgba(0, 0, 0, 0.6);
+  background: var(--agno-bg);
+  border-radius: var(--agno-radius-lg);
+  box-shadow: var(--agno-shadow-panel);
 }
 .agno-select__empty {
   padding: 8px 10px;
   color: var(--agno-muted);
-  font-size: 13px;
+  font-size: 0.75rem;
 }
 .agno-select__group + .agno-select__group {
   margin-top: 4px;
 }
 .agno-select__group-label {
   padding: 6px 10px 4px;
-  font-size: 11px;
   color: var(--agno-muted);
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
 }
 .agno-select__option {
   width: 100%;
@@ -1256,22 +2162,19 @@
   background: none;
   border: none;
   border-radius: var(--agno-radius-sm);
-  color: var(--agno-text);
+  color: var(--agno-primary);
   cursor: pointer;
   font: inherit;
   text-align: left;
 }
-.agno-select__option:hover {
-  background: var(--agno-surface-2);
-}
+.agno-select__option:hover,
 .agno-select__option.is-selected {
-  background: var(--agno-surface-2);
+  background: var(--agno-secondary-soft);
 }
 .agno-select__check {
-  width: 14px;
   flex: 0 0 14px;
-  color: var(--agno-brand);
-  font-size: 12px;
+  width: 14px;
+  color: var(--agno-primary);
 }
 .agno-select__label {
   flex: 1;
@@ -1279,15 +2182,348 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 14px;
 }
 .agno-select__model {
-  font-family: 'DM Mono', ui-monospace, monospace;
-  font-size: 10.5px;
   color: var(--agno-muted);
-  background: var(--agno-bg);
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Quick prompts — suggested chips on an empty transcript
+   ───────────────────────────────────────────────────────────────────────── */
+
+.agno-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  max-width: 480px;
+}
+
+/* AgentOS stacks the suggestions above the dock as left-aligned cards, sharing
+   the dock's 800px column and inner padding so their left edges line up. */
+.agno-prompts {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  /* Line the cards up with the dock's inner block: the dock is an 800px box
+     inside `.agno-input`'s 24px padding, then 8px of its own. Matching that
+     total here keeps the left edges flush at every width. */
+  max-width: calc(800px + 48px);
+  margin: 0 auto;
+  padding: 0 32px 8px;
+  max-height: 45vh;
+  overflow-y: auto;
+}
+.agno-prompt {
+  display: flex;
+  align-items: center;
+  width: 400px;
+  max-width: 100%;
+  padding: 8px 12px;
+  border: 1px solid rgba(var(--color-primary), 0.15);
+  border-radius: var(--agno-radius-sm);
+  background: var(--agno-secondary-soft);
+  backdrop-filter: blur(40px);
+  color: rgba(var(--color-primary), 0.8);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+  text-align: left;
+  cursor: pointer;
+  /* Long prompts clamp rather than growing the stack out of the viewport. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: border-color 0.15s ease;
+}
+.agno-prompt:hover:not(:disabled) {
+  border-color: var(--agno-primary);
+}
+.agno-prompt:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Floating launcher — the support-widget layout
+   ───────────────────────────────────────────────────────────────────────── */
+
+.agno-launcher {
+  --agno-launcher-offset: 24px;
+  --agno-launcher-width: 400px;
+  --agno-launcher-height: 620px;
+
+  position: fixed;
+  z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-family: var(--agno-font);
+}
+
+/* Bottom corners stack panel-then-bubble; top corners flip the order. */
+.agno-launcher--bottom-right {
+  bottom: var(--agno-launcher-offset);
+  right: var(--agno-launcher-offset);
+  align-items: flex-end;
+}
+.agno-launcher--bottom-left {
+  bottom: var(--agno-launcher-offset);
+  left: var(--agno-launcher-offset);
+  align-items: flex-start;
+}
+.agno-launcher--top-right {
+  top: var(--agno-launcher-offset);
+  right: var(--agno-launcher-offset);
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+.agno-launcher--top-left {
+  top: var(--agno-launcher-offset);
+  left: var(--agno-launcher-offset);
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.agno-launcher__panel {
+  display: flex;
+  width: var(--agno-launcher-width);
+  height: var(--agno-launcher-height);
+  /* Never outgrow the viewport: leave the offsets plus room for the bubble. */
+  max-width: calc(100vw - 2 * var(--agno-launcher-offset));
+  max-height: calc(100vh - 2 * var(--agno-launcher-offset) - 68px);
+  border-radius: var(--agno-radius-lg);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 24px 48px -12px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  animation: agno-launcher-in 0.16s ease-out;
+}
+.agno-launcher__panel > * {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+.agno-launcher__panel[hidden] {
+  display: none;
+}
+
+@keyframes agno-launcher-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.agno-launcher__bubble {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  border: none;
+  border-radius: var(--agno-radius-full);
+  background: var(--agno-brand);
+  color: #fff;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  cursor: pointer;
+  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
+  transition: transform 0.15s ease, filter 0.15s ease;
+}
+.agno-launcher__bubble.has-label {
+  width: auto;
+  padding: 0 20px;
+}
+.agno-launcher__bubble:hover {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+.agno-launcher__label {
+  white-space: nowrap;
+}
+
+/* Full-screen panels take the viewport; the bubble becomes a corner close. */
+.agno-launcher.is-fullscreen.is-open {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  gap: 0;
+  align-items: stretch;
+}
+.agno-launcher.is-fullscreen.is-open .agno-launcher__panel {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+}
+.agno-launcher.is-fullscreen.is-open .agno-launcher__bubble {
+  position: absolute;
+  top: var(--agno-launcher-offset);
+  width: 40px;
+  height: 40px;
+}
+.agno-launcher.is-fullscreen.is-open.agno-launcher--bottom-right .agno-launcher__bubble,
+.agno-launcher.is-fullscreen.is-open.agno-launcher--top-right .agno-launcher__bubble {
+  right: var(--agno-launcher-offset);
+}
+.agno-launcher.is-fullscreen.is-open.agno-launcher--bottom-left .agno-launcher__bubble,
+.agno-launcher.is-fullscreen.is-open.agno-launcher--top-left .agno-launcher__bubble {
+  left: var(--agno-launcher-offset);
+}
+.agno-launcher.is-fullscreen.is-open .agno-root {
+  border: none;
+  border-radius: 0;
+}
+
+/* Below the popover width, a popover panel fills the screen too. */
+@media (max-width: 480px) {
+  .agno-launcher.is-popover.is-open {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    gap: 0;
+    align-items: stretch;
+  }
+  .agno-launcher.is-popover.is-open .agno-launcher__panel {
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    border-radius: 0;
+  }
+  .agno-launcher.is-popover.is-open .agno-launcher__bubble {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 40px;
+    height: 40px;
+  }
+  .agno-launcher.is-popover.is-open .agno-root {
+    border: none;
+    border-radius: 0;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Header-less shell
+   The embed ships without chrome of its own. Two rules pick up the pieces the
+   old header used to hold.
+   ───────────────────────────────────────────────────────────────────────── */
+
+/* A full-screen launcher panel covers its own bubble, so it needs a way out.
+   With no header to sit in, the close button floats over the surface. */
+.agno-close-floating {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 2;
+}
+.agno-root {
+  position: relative;
+}
+
+/* The entity picker now lives in the composer's right action group, beside the
+   send button — the AgentOS composer layout, where the left group holds attach
+   and the right holds the component selector then send. */
+.agno-input__actions > .agno-select {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+.agno-input__actions > .agno-select .agno-select__trigger {
+  /* AgentOS sizes this h-8, max-w-[300px], px-3. Inside the dock it needs no
+     border of its own — the dock already frames it — so it reads as part of
+     the row until hovered. */
+  height: 32px;
+  min-width: 0;
+  max-width: 300px;
+  padding: 0 12px;
+  border-color: transparent;
+}
+.agno-input__actions > .agno-select .agno-select__trigger:hover {
+  border-color: var(--agno-border);
+}
+/* The dock sits at the bottom of the surface, so the popover opens upwards. */
+.agno-input__actions > .agno-select .agno-select__panel {
+  top: auto;
+  bottom: calc(100% + 6px);
+  right: 0;
+  left: auto;
+}
+
+/* Rows must be allowed to shrink, or the transcript cannot scroll inside a
+   fixed-height embed. */
+.agno-main,
+.agno-chat {
+  min-height: 0;
+}
+
+/* The read-only selection display in the composer row — AgentOS's
+   `SelectComponentType`: h-8, capped width, mono uppercase, model chip. */
+.agno-entity {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  height: 32px;
+  min-width: 0;
+  max-width: 300px;
+  padding: 0 4px;
+  cursor: default;
+}
+.agno-entity__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--agno-font-mono);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--agno-primary);
+}
+/* AgentOS frames the provider mark in a small bordered square. */
+.agno-entity__mark {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
   border: 1px solid var(--agno-border);
-  border-radius: 999px;
-  padding: 1px 7px;
+  border-radius: 6px;
+  color: var(--agno-primary);
+}
+.agno-entity__model {
+  flex: none;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
+  padding: 2px 6px;
+  border: 1px solid var(--agno-border);
+  border-radius: 6px;
+  font-family: var(--agno-font-mono);
+  font-size: 0.6875rem;
+  line-height: 1rem;
+  letter-spacing: 0.02em;
+  color: var(--agno-muted);
 }