@agent-native/agentkit 0.1.0

package/dist/react/styles.css

@@ -0,0 +1,1477 @@
+:where(.agentkit-chat) {
+  --agentkit-canvas: var(
+    --agentkit-chat-background,
+    var(--agent-kit-recessed-surface, Canvas)
+  );
+  --agentkit-surface: var(
+    --agentkit-composer-background,
+    var(
+      --agent-kit-raised-surface,
+      color-mix(in srgb, Canvas 96%, CanvasText 4%)
+    )
+  );
+  --agentkit-subtle: var(
+    --agent-kit-subtle-surface,
+    color-mix(in srgb, Canvas 92%, CanvasText 8%)
+  );
+  --agentkit-border: var(
+    --agent-kit-border,
+    color-mix(in srgb, CanvasText 16%, transparent)
+  );
+  --agentkit-text: var(--agent-kit-text, CanvasText);
+  --agentkit-text-muted: var(
+    --agent-kit-muted-text,
+    color-mix(in srgb, CanvasText 62%, transparent)
+  );
+  --agentkit-accent: var(--agent-kit-accent, CanvasText);
+  --agentkit-accent-text: var(--agent-kit-accent-text, Canvas);
+  --agentkit-danger: var(--agent-kit-danger, CanvasText);
+  --agentkit-success: var(--agent-kit-success, CanvasText);
+  --agentkit-focus: var(--agent-kit-focus, Highlight);
+  --agentkit-radius: var(--radius-xl, calc(var(--radius, 0.75rem) + 0.5rem));
+  --agentkit-radius-inner: var(--radius-lg, var(--radius, 0.75rem));
+  --agentkit-elevation: var(--agent-kit-composer-elevation, none);
+  --agentkit-composer-border: var(
+    --agent-kit-composer-border-color,
+    transparent
+  );
+  --agentkit-composer-focus-border: var(
+    --agent-kit-composer-focus-border-color,
+    transparent
+  );
+  --agentkit-composer-toolbar-control-size: var(
+    --agent-kit-composer-toolbar-control-size,
+    1.75rem
+  );
+  --agentkit-composer-toolbar-control-gap: var(
+    --agent-kit-composer-toolbar-control-gap,
+    0.25rem
+  );
+  --agentkit-composer-toolbar-control-padding-inline: var(
+    --agent-kit-composer-toolbar-control-padding-inline,
+    0.375rem
+  );
+  --agentkit-composer-toolbar-control-font-size: var(
+    --agent-kit-composer-toolbar-control-font-size,
+    0.75rem
+  );
+  --agentkit-composer-toolbar-control-line-height: var(
+    --agent-kit-composer-toolbar-control-line-height,
+    1rem
+  );
+  --agentkit-composer-toolbar-control-font-weight: var(
+    --agent-kit-composer-toolbar-control-font-weight,
+    500
+  );
+
+  position: relative;
+  display: grid;
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+  color: var(--agentkit-text);
+  background: var(--agentkit-canvas);
+  font: inherit;
+}
+
+/*
+ * AgentKit owns the complete visual contract for the shared composer
+ * primitives it renders internally. Keep this stylesheet independent from the
+ * Toolkit Tailwind source-registration stylesheet: AgentKit must remain valid
+ * CSS in hosts that do not use Tailwind.
+ */
+.agentkit-composer-stack [data-agent-composer-slot="area"] {
+  position: relative;
+  z-index: 1;
+  padding-block: 0.5rem;
+}
+
+.agentkit-composer-stack [data-agent-composer-slot="workflow"] {
+  position: relative;
+  display: flex;
+  inline-size: 100%;
+  flex-direction: column;
+}
+
+.agentkit-composer[data-agent-composer-slot="root"] {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--agentkit-composer-border);
+  border-color: var(--agentkit-composer-border) !important;
+  border-radius: var(--agentkit-radius);
+  color: var(--agentkit-text);
+  background: var(--agentkit-surface);
+  box-shadow: var(--agentkit-elevation);
+}
+
+.agentkit-composer[data-agent-composer-slot="root"]:focus-within {
+  border-color: var(--agentkit-composer-focus-border) !important;
+}
+
+:is(:root.dark, :root[data-theme="dark"], .dark)
+  .agentkit-composer[data-agent-composer-slot="root"],
+:is(:root.dark, :root[data-theme="dark"], .dark)
+  .agentkit-composer[data-agent-composer-slot="root"]:focus-within {
+  border-color: transparent !important;
+}
+
+.agentkit-composer [data-agent-composer-slot="editor-wrap"] {
+  padding: 0.75rem 0.875rem 0.25rem;
+}
+
+.agentkit-composer [data-agent-composer-slot="editor"] {
+  min-inline-size: 0;
+}
+
+.agentkit-composer [data-agent-composer-slot="editor-input"] {
+  min-block-size: 3.25rem;
+  max-block-size: 10rem;
+  overflow-y: auto;
+  outline: none;
+  color: var(--agentkit-text);
+  background: transparent;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.agentkit-composer [data-agent-composer-slot="editor-input"] p {
+  margin: 0;
+}
+
+.agentkit-composer [data-agent-composer-slot="mode-row"],
+.agentkit-composer [data-agent-composer-slot="context-row"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  padding: 0.5rem 0.625rem 0;
+}
+
+.agentkit-composer
+  [data-agent-composer-slot="editor-input"]
+  p.is-editor-empty:first-child::before,
+.agentkit-composer
+  [data-agent-composer-slot="editor-input"]
+  p.is-empty:first-child:last-child::before {
+  color: var(--agentkit-text-muted);
+}
+
+.agentkit-composer [data-agent-composer-slot="toolbar"] {
+  display: flex;
+  align-items: center;
+  gap: var(--agentkit-composer-toolbar-control-gap);
+  padding: 0.375rem 0.5rem 0.5rem;
+}
+
+.agentkit-composer [data-agent-composer-slot="toolbar-spacer"] {
+  flex: 1;
+}
+
+.agentkit-composer [data-agent-composer-slot="model-button"] {
+  flex: none;
+  max-inline-size: none;
+}
+
+.agentkit-composer input[type="file"] {
+  display: none;
+}
+
+.agentkit-composer button {
+  display: inline-flex;
+  min-inline-size: var(--agentkit-composer-toolbar-control-size);
+  block-size: var(--agentkit-composer-toolbar-control-size);
+  align-items: center;
+  justify-content: center;
+  gap: var(--agentkit-composer-toolbar-control-gap);
+  padding-inline: var(--agentkit-composer-toolbar-control-padding-inline);
+  border: 0;
+  border-radius: var(--agentkit-radius-inner);
+  color: var(--agentkit-text-muted);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--agentkit-composer-toolbar-control-font-size);
+  font-weight: var(--agentkit-composer-toolbar-control-font-weight);
+  line-height: var(--agentkit-composer-toolbar-control-line-height);
+  cursor: pointer;
+}
+
+.agentkit-composer button:has(> svg:only-child),
+.agentkit-composer [data-agent-composer-slot="send-button"] {
+  inline-size: var(--agentkit-composer-toolbar-control-size);
+  padding-inline: 0;
+}
+
+.agentkit-composer button:hover:not(:disabled) {
+  color: var(--agentkit-text);
+  background: var(--agentkit-subtle);
+}
+
+.agentkit-composer button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.agentkit-composer [data-agent-composer-slot="send-button"] {
+  border-radius: 999px;
+  color: var(--agentkit-accent-text);
+  background: var(--agentkit-accent);
+}
+
+.agentkit-composer button svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+  flex: none;
+}
+
+/* Recessed queued work grows from behind the composer as one workflow. */
+.agentkit-composer-stack
+  [data-agent-message-queue="true"][data-agent-message-queue-variant="recessed"] {
+  position: relative;
+  z-index: 0;
+  inline-size: calc(100% - 4rem);
+  block-size: var(--agent-message-queue-height, 0);
+  margin: 0 auto -1rem;
+  padding-block-end: 0.625rem;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--agentkit-border) 70%, transparent);
+  border-radius: var(--agentkit-radius-inner);
+  background: color-mix(
+    in srgb,
+    var(--agentkit-subtle) 78%,
+    var(--agentkit-surface)
+  );
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    block-size 200ms var(--ease-collapse, ease-out),
+    margin 200ms var(--ease-collapse, ease-out),
+    opacity 160ms ease-out,
+    transform 200ms var(--ease-collapse, ease-out),
+    border-color 160ms ease-out;
+}
+
+.agentkit-composer-stack [data-agent-message-queue="true"][data-empty="true"] {
+  margin-block-end: 0;
+  padding-block-end: 0;
+  border-color: transparent;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(0.5rem);
+}
+
+.agentkit-composer-stack [data-agent-message-queue="true"] ul {
+  display: flex;
+  block-size: 100%;
+  max-block-size: 10rem;
+  flex-direction: column;
+  gap: 0.125rem;
+  margin: 0;
+  padding: 0.25rem 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.agentkit-composer-stack [data-agent-message-queue="true"] li {
+  display: flex;
+  min-block-size: 2.25rem;
+  min-inline-size: 0;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 1rem;
+  color: var(--agentkit-text);
+  font-size: 0.8125rem;
+  line-height: 1rem;
+}
+
+.agentkit-composer-stack [data-agent-message-queue="true"] li > svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  flex: none;
+  color: var(--agentkit-text-muted);
+}
+
+.agentkit-composer-stack
+  [data-agent-message-queue="true"]
+  li
+  > div:first-of-type {
+  min-inline-size: 0;
+  flex: 1;
+}
+
+.agentkit-composer-stack
+  [data-agent-message-queue="true"]
+  li
+  > div:first-of-type
+  > div:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentkit-composer-stack [data-agent-message-queue="true"] li > div:last-child {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 0.125rem;
+  color: var(--agentkit-text-muted);
+}
+
+.agentkit-composer-stack [data-agent-message-queue="true"] button {
+  display: inline-flex;
+  min-inline-size: 1.75rem;
+  block-size: 1.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding-inline: 0.375rem;
+  border: 0;
+  border-radius: var(--radius-md, var(--radius));
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.agentkit-composer-stack
+  [data-agent-message-queue="true"]
+  button:has(> svg:only-child) {
+  inline-size: 1.75rem;
+  padding-inline: 0;
+}
+
+.agentkit-composer-stack
+  [data-agent-message-queue="true"]
+  button:hover:not(:disabled) {
+  color: var(--agentkit-text);
+  background: var(--agentkit-subtle);
+}
+
+.agentkit-composer-stack [data-agent-message-queue="true"] button svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  flex: none;
+}
+
+.agentkit-composer-stack [data-agent-message-queue="true"] img {
+  inline-size: 2rem;
+  block-size: 2rem;
+  border: 1px solid var(--agentkit-border);
+  border-radius: var(--radius-md, var(--radius));
+  object-fit: cover;
+}
+
+.agentkit-suggestions[data-agent-suggestion-bar="true"] {
+  inline-size: 100%;
+  overflow: hidden;
+  padding: 0.5rem 0;
+}
+
+.agentkit-suggestions [data-agent-suggestion-scroller="true"] {
+  display: flex;
+  inline-size: 100%;
+  gap: 0.375rem;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+}
+
+.agentkit-suggestions
+  [data-agent-suggestion-scroller="true"]::-webkit-scrollbar {
+  display: none;
+}
+
+.agentkit-suggestions button {
+  flex: none;
+  padding: 0.375rem 0.625rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  color: var(--agentkit-text-muted);
+  background: var(--agentkit-subtle);
+  font: inherit;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.agentkit-suggestions button:hover {
+  border-color: var(--agentkit-border);
+  color: var(--agentkit-text);
+}
+
+/* The slash and mention palette is portaled to body, so it resolves host
+ * tokens directly instead of relying on inheritance from .agentkit-chat. */
+[data-agent-native-composer-popover="true"] {
+  --agentkit-palette-surface: var(
+    --agent-kit-popover-surface,
+    var(--agent-kit-raised-surface, Canvas)
+  );
+  --agentkit-palette-text: var(
+    --agent-kit-popover-text,
+    var(--agent-kit-text, CanvasText)
+  );
+  --agentkit-palette-muted: var(
+    --agent-kit-muted-text,
+    color-mix(in srgb, CanvasText 62%, transparent)
+  );
+  --agentkit-palette-hover: var(
+    --agent-kit-subtle-surface,
+    color-mix(in srgb, Canvas 92%, CanvasText 8%)
+  );
+  --agentkit-palette-border: var(
+    --agent-kit-border,
+    color-mix(in srgb, CanvasText 16%, transparent)
+  );
+
+  position: fixed;
+  z-index: 9999;
+  max-block-size: min(27.5rem, calc(100vh - 2rem));
+  overflow-y: auto;
+  padding: 0.25rem;
+  border: 1px solid
+    color-mix(in srgb, var(--agentkit-palette-border) 80%, transparent);
+  border-radius: var(--radius-lg, var(--radius, 0.75rem));
+  color: var(--agentkit-palette-text);
+  background: var(--agentkit-palette-surface);
+  box-shadow: var(--agent-kit-overlay-elevation, none);
+  font: inherit;
+}
+
+body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
+  position: fixed;
+  z-index: 9998;
+  inset: 0;
+}
+
+[data-agent-native-composer-popover="true"] [data-mention-index] {
+  display: flex;
+  inline-size: 100%;
+  min-block-size: 2rem;
+  min-inline-size: 0;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  border: 0;
+  border-radius: var(--radius-md, var(--radius, 0.75rem));
+  color: var(--agentkit-palette-text);
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+[data-agent-native-composer-popover="true"] [data-mention-index]:hover,
+[data-agent-native-composer-popover="true"] [data-mention-index]:focus-visible {
+  background: var(--agentkit-palette-hover);
+}
+
+[data-agent-native-composer-popover="true"] [data-mention-index] > svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+  flex: none;
+  color: var(--agentkit-palette-muted);
+}
+
+[data-agent-native-composer-popover="true"] [data-mention-index] > span {
+  min-inline-size: 0;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  line-height: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-agent-native-composer-popover="true"]
+  [data-mention-index]
+  > span:last-child:not(:first-child) {
+  max-inline-size: 60%;
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--agentkit-palette-muted);
+}
+
+[data-agent-native-composer-popover="true"]
+  > div
+  > div
+  > div:not(:has([data-mention-index])) {
+  color: var(--agentkit-palette-muted);
+}
+
+.agentkit-chat[data-empty="true"] {
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.agentkit-chat[data-empty="true"][data-empty-composer-placement="center"] {
+  grid-template-rows: minmax(0, 1fr) auto 1rem auto minmax(0, 1fr);
+}
+
+.agentkit-chat[data-empty="true"][data-empty-composer-placement="center"]
+  .agentkit-transcript {
+  grid-row: 2;
+  overflow: visible;
+}
+
+.agentkit-chat[data-empty="true"][data-empty-composer-placement="center"]
+  .agentkit-transcript-content {
+  padding-block: 0;
+}
+
+.agentkit-chat[data-empty="true"][data-empty-composer-placement="center"]
+  .agentkit-chat-footer {
+  grid-row: 4;
+  padding-block-end: 0;
+}
+
+.agentkit-chat-header {
+  z-index: 2;
+  display: flex;
+  min-block-size: 3rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-inline: 1rem;
+  border-block-end: 1px solid var(--agentkit-border);
+  background: var(--agentkit-canvas);
+}
+
+.agentkit-chat-title {
+  min-inline-size: 0;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  font-weight: 560;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentkit-chat-toolbar {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.agentkit-chat-toolbar > * {
+  flex: none;
+}
+
+.agentkit-transcript {
+  grid-column: 1;
+  grid-row: 2;
+  inline-size: 100%;
+  min-block-size: 0;
+  overflow-y: auto;
+  overflow-anchor: none;
+  overscroll-behavior-block: contain;
+  scrollbar-color: transparent transparent;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+}
+
+.agentkit-transcript::-webkit-scrollbar {
+  inline-size: 0.3125rem;
+  block-size: 0.3125rem;
+}
+
+.agentkit-transcript::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.agentkit-transcript::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: transparent;
+}
+
+.agentkit-transcript[data-scrollbar-visible="true"] {
+  scrollbar-color: color-mix(
+      in srgb,
+      var(--agentkit-text-muted) 42%,
+      transparent
+    )
+    transparent;
+}
+
+.agentkit-transcript[data-scrollbar-visible="true"]::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--agentkit-text-muted) 42%, transparent);
+}
+
+.agentkit-transcript[data-scrollbar-visible="true"]::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--agentkit-text-muted) 62%, transparent);
+}
+
+.agentkit-transcript-content {
+  inline-size: min(100%, 47rem);
+  min-inline-size: 0;
+  margin-inline: auto;
+  padding: 1.5rem 1rem;
+}
+
+.agentkit-message {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-block: 0 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.52;
+}
+
+.agentkit-message[data-role="user"] {
+  align-items: flex-end;
+}
+
+.agentkit-message-content {
+  max-inline-size: 100%;
+}
+
+.agentkit-message[data-role="user"] .agentkit-message-content {
+  max-inline-size: min(88%, 38rem);
+  padding: 0.625rem 0.8125rem;
+  border-radius: var(--agentkit-radius-inner);
+  background: var(--agentkit-subtle);
+}
+
+.agentkit-message-content > :first-child {
+  margin-block-start: 0;
+}
+
+.agentkit-message-content > :last-child {
+  margin-block-end: 0;
+}
+
+.agentkit-message-content p {
+  margin-block: 0 0.625rem;
+  white-space: pre-wrap;
+}
+
+.agentkit-message-content p[data-format="plain"] {
+  font-weight: inherit;
+  font-style: normal;
+}
+
+.agentkit-markdown {
+  overflow-wrap: anywhere;
+}
+
+.agentkit-markdown p {
+  white-space: normal;
+}
+
+.agentkit-markdown :where(ul, ol) {
+  margin-block: 0 0.625rem;
+  padding-inline-start: 1.25rem;
+}
+
+.agentkit-markdown li + li {
+  margin-block-start: 0.25rem;
+}
+
+.agentkit-markdown :where(code, pre) {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.agentkit-markdown :not(pre) > code {
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--radius-sm, calc(var(--radius, 0.75rem) / 2));
+  background: var(--agentkit-subtle);
+  font-size: 0.875em;
+}
+
+.agentkit-markdown pre {
+  margin-block: 0 0.625rem;
+  padding: 0.75rem;
+  overflow-x: auto;
+  border: 1px solid var(--agentkit-border);
+  border-radius: var(--agentkit-radius-inner);
+  background: var(--agentkit-subtle);
+}
+
+.agentkit-markdown pre code {
+  font-size: 0.8125rem;
+}
+
+.agentkit-markdown a {
+  color: inherit;
+  text-decoration-color: var(--agentkit-text-muted);
+  text-underline-offset: 0.15em;
+}
+
+.agentkit-markdown blockquote {
+  margin: 0 0 0.625rem;
+  padding-inline-start: 0.75rem;
+  border-inline-start: 2px solid var(--agentkit-border);
+  color: var(--agentkit-text-muted);
+}
+
+.agentkit-message-actions {
+  display: flex;
+  min-block-size: 1.5rem;
+  align-items: center;
+  gap: 0.125rem;
+  margin-block-start: 0.25rem;
+  color: var(--agentkit-text-muted);
+  opacity: 0;
+  transition: opacity 140ms ease;
+}
+
+.agentkit-message:hover .agentkit-message-actions,
+.agentkit-message:focus-within .agentkit-message-actions {
+  opacity: 1;
+}
+
+.agentkit-message-actions button {
+  display: inline-grid;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md, var(--radius));
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.agentkit-chat-toolbar :where(button, [role="button"]) {
+  display: inline-flex;
+  min-inline-size: 1.75rem;
+  block-size: 1.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding-inline: 0.5rem;
+  border: 0;
+  border-radius: var(--radius-md, var(--radius));
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.agentkit-chat-toolbar :where(button, [role="button"]):has(> svg:only-child) {
+  inline-size: 1.75rem;
+  padding-inline: 0;
+}
+
+.agentkit-message-actions button:hover,
+.agentkit-chat-toolbar :where(button, [role="button"]):hover {
+  color: var(--agentkit-text);
+  background: var(--agentkit-subtle);
+}
+
+.agentkit-message-actions button[aria-pressed="true"] {
+  color: var(--agentkit-text);
+  background: var(--agentkit-subtle);
+}
+
+.agentkit-message-actions button[aria-pressed="true"] svg {
+  stroke-width: 2.2;
+}
+
+.agentkit-message-actions svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+.agentkit-message-actions time {
+  margin-inline-start: 0.25rem;
+  font-size: 0.6875rem;
+}
+
+.agentkit-icon {
+  inline-size: 1rem;
+  block-size: 1rem;
+  flex: none;
+  stroke-width: 1.7;
+}
+
+.agentkit-agent-feed,
+.agentkit-activities,
+.agentkit-tasks {
+  margin-block: 0.375rem 1.25rem;
+  color: var(--agentkit-text-muted);
+  font-size: 0.8125rem;
+}
+
+.agentkit-agent-feed {
+  display: grid;
+  gap: 0.125rem;
+}
+
+.agentkit-activities-summary,
+.agentkit-activity-row,
+.agentkit-agent-interaction,
+.agentkit-tasks-summary,
+.agentkit-task-row {
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  text-align: start;
+  list-style: none;
+}
+
+.agentkit-activities-summary,
+.agentkit-tasks-summary {
+  cursor: pointer;
+}
+
+.agentkit-activities-summary::-webkit-details-marker,
+.agentkit-activity-cluster > summary::-webkit-details-marker,
+.agentkit-tasks-summary::-webkit-details-marker {
+  display: none;
+}
+
+.agentkit-activities-summary:hover,
+.agentkit-activity-row:hover,
+.agentkit-agent-interaction:hover,
+.agentkit-tasks-summary:hover,
+.agentkit-task-row:hover {
+  color: var(--agentkit-text);
+}
+
+.agentkit-agent {
+  display: inline-flex;
+  min-inline-size: 0;
+  max-inline-size: 12rem;
+  flex: none;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--agentkit-border);
+  border-radius: 999px;
+  color: var(--agentkit-text);
+  overflow: hidden;
+  background: var(--agentkit-subtle);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+
+.agentkit-agent-name,
+.agentkit-agent-interaction-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentkit-agent[data-status="working"] .agentkit-agent-name {
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    var(--agentkit-text),
+    color-mix(in srgb, var(--agentkit-text) 34%, transparent),
+    var(--agentkit-text)
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  animation: agentkit-shimmer 1.8s linear infinite;
+}
+
+.agentkit-agent[data-status="failed"] {
+  border-color: color-mix(
+    in srgb,
+    var(--agentkit-danger) 32%,
+    var(--agentkit-border)
+  );
+  color: var(--agentkit-danger);
+}
+
+.agentkit-agent-interaction-detail {
+  min-inline-size: 0;
+  max-inline-size: 45%;
+  margin-inline-start: auto;
+  overflow: hidden;
+  color: var(--agentkit-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentkit-activities-count,
+.agentkit-activity-cluster-count,
+.agentkit-tasks-count,
+.agentkit-task-progress {
+  color: color-mix(in srgb, var(--agentkit-text-muted) 75%, transparent);
+  font-variant-numeric: tabular-nums;
+}
+
+.agentkit-activity-cluster-count {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+.agentkit-activity-cluster > summary {
+  cursor: pointer;
+}
+
+.agentkit-activity-cluster-items {
+  display: grid;
+  gap: 0.125rem;
+  margin-inline-start: 0.5rem;
+  padding-inline-start: 1rem;
+  border-inline-start: 1px solid var(--agentkit-border);
+}
+
+.agentkit-activities-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentkit-activities[data-running="true"] .agentkit-activities-label {
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    var(--agentkit-text-muted),
+    color-mix(in srgb, var(--agentkit-text-muted) 28%, transparent),
+    var(--agentkit-text-muted)
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  animation: agentkit-shimmer 1.8s linear infinite;
+}
+
+.agentkit-summary-chevron,
+.agentkit-disclosure-icon {
+  transition: transform 160ms ease;
+}
+
+.agentkit-activity-disclosure {
+  display: inline-grid;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  flex: none;
+  place-items: center;
+  margin-inline-start: 0.125rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md, var(--radius));
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.agentkit-activity-disclosure:hover {
+  color: var(--agentkit-text);
+  background: var(--agentkit-subtle);
+}
+
+.agentkit-activities[open] .agentkit-summary-chevron,
+.agentkit-tasks[open] .agentkit-summary-chevron,
+.agentkit-disclosure-icon[data-open="true"] {
+  transform: rotate(90deg);
+}
+
+.agentkit-activities-list,
+.agentkit-tasks-list {
+  display: grid;
+  gap: 0.125rem;
+  padding-block-start: 0.25rem;
+}
+
+.agentkit-task-title {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--agentkit-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentkit-task-detail,
+.agentkit-task-progress {
+  margin-inline-start: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentkit-task-row[data-status="running"] .agentkit-task-title {
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    var(--agentkit-text-muted),
+    color-mix(in srgb, var(--agentkit-text-muted) 28%, transparent),
+    var(--agentkit-text-muted)
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  animation: agentkit-shimmer 1.8s linear infinite;
+}
+
+.agentkit-activity-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--agentkit-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentkit-activity-item[data-status="running"] .agentkit-activity-label {
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    var(--agentkit-text-muted),
+    color-mix(in srgb, var(--agentkit-text-muted) 28%, transparent),
+    var(--agentkit-text-muted)
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  animation: agentkit-shimmer 1.8s linear infinite;
+}
+
+.agentkit-activity-detail,
+.agentkit-object {
+  display: flex;
+  min-inline-size: 0;
+  max-inline-size: 55%;
+  align-items: center;
+  gap: 0.375rem;
+  margin-inline-start: auto;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  color: var(--agentkit-text-muted);
+  background: transparent;
+  font: inherit;
+  text-align: end;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button.agentkit-object {
+  cursor: pointer;
+}
+
+.agentkit-object-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.agentkit-diff-added {
+  color: var(--agentkit-success);
+}
+
+.agentkit-diff-removed {
+  color: var(--agentkit-danger);
+}
+
+.agentkit-activity-summary {
+  margin-inline-start: 1.5rem;
+  padding: 0.25rem 0 0.5rem;
+  color: var(--agentkit-text);
+}
+
+.agentkit-approval,
+.agentkit-connection-request,
+.agentkit-widget {
+  overflow: hidden;
+  margin-block: 0.75rem 1.25rem;
+  border: 1px solid var(--agentkit-border);
+  border-radius: var(--agentkit-radius-inner);
+  background: var(--agentkit-surface);
+  box-shadow: var(--agent-kit-control-elevation, none);
+}
+
+.agentkit-approval-copy,
+.agentkit-connection-request-copy,
+.agentkit-widget {
+  padding: 0.875rem;
+}
+
+.agentkit-approval h3,
+.agentkit-connection-request h3,
+.agentkit-widget h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.agentkit-approval p,
+.agentkit-connection-request p,
+.agentkit-widget p {
+  margin: 0.25rem 0 0;
+  color: var(--agentkit-text-muted);
+  font-size: 0.75rem;
+}
+
+.agentkit-connection-request-copy {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+}
+
+.agentkit-connection-request-copy > .agentkit-icon {
+  flex: 0 0 auto;
+  margin-block-start: 0.125rem;
+  color: var(--agentkit-text-muted);
+}
+
+.agentkit-connection-request[data-status="connected"]
+  .agentkit-connection-request-copy
+  > .agentkit-icon {
+  color: var(--agentkit-success);
+}
+
+.agentkit-connection-request-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  padding: 0.625rem 0.875rem;
+  border-block-start: 1px solid var(--agentkit-border);
+}
+
+.agentkit-connection-request > .agentkit-command-error {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0 0.875rem 0.75rem;
+}
+
+.agentkit-approval-options {
+  display: grid;
+  gap: 0.375rem;
+  padding: 0 0.875rem 0.875rem;
+}
+
+.agentkit-approval-options button {
+  display: grid;
+  gap: 0.125rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--agentkit-border);
+  border-radius: var(--radius-md, var(--radius));
+  color: var(--agentkit-text);
+  background: transparent;
+  text-align: start;
+  cursor: pointer;
+}
+
+.agentkit-approval-options button[aria-pressed="true"] {
+  border-color: var(--agentkit-accent);
+  background: color-mix(in srgb, var(--agentkit-accent) 8%, transparent);
+}
+
+.agentkit-approval-options small {
+  color: var(--agentkit-text-muted);
+}
+
+.agentkit-approval-input {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0 0.875rem 0.875rem;
+  color: var(--agentkit-text-muted);
+  font-size: 0.75rem;
+}
+
+.agentkit-approval-input input {
+  min-block-size: 2.25rem;
+  padding-inline: 0.625rem;
+  border: 1px solid var(--agentkit-border);
+  border-radius: var(--radius-md, var(--radius));
+  color: var(--agentkit-text);
+  background: var(--agentkit-canvas);
+  font: inherit;
+}
+
+.agentkit-approval-footer,
+.agentkit-widget-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  padding: 0.625rem 0.875rem;
+  border-block-start: 1px solid var(--agentkit-border);
+}
+
+.agentkit-approval-footer button,
+.agentkit-widget-actions button {
+  min-block-size: 2rem;
+  padding-inline: 0.75rem;
+  border: 1px solid var(--agentkit-border);
+  border-radius: var(--radius-md, var(--radius));
+  color: var(--agentkit-text);
+  background: transparent;
+  font: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.agentkit-primary-button,
+.agentkit-widget-actions button[data-kind="primary"] {
+  border-color: var(--agentkit-accent);
+  color: var(--agentkit-accent-text);
+  background: var(--agentkit-accent);
+}
+
+.agentkit-widget-action {
+  display: grid;
+  justify-items: end;
+  gap: 0.25rem;
+}
+
+.agentkit-command-error,
+.agentkit-composer-error {
+  color: var(--agentkit-danger);
+  font-size: 0.75rem;
+  line-height: 1.35;
+}
+
+.agentkit-approval > .agentkit-command-error {
+  display: block;
+  margin: 0;
+  padding: 0 0.875rem 0.75rem;
+}
+
+.agentkit-composer-error {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem 0;
+}
+
+.agentkit-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--agentkit-text-muted);
+  text-decoration: none;
+}
+
+.agentkit-annotations {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-block-start: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.agentkit-annotations a,
+.agentkit-annotations span {
+  color: var(--agentkit-text-muted);
+  text-decoration-color: color-mix(
+    in srgb,
+    var(--agentkit-text-muted) 45%,
+    transparent
+  );
+  text-underline-offset: 0.2em;
+}
+
+.agentkit-reasoning {
+  margin-block: 0.375rem 0.75rem;
+  color: var(--agentkit-text-muted);
+  font-size: 0.8125rem;
+}
+
+.agentkit-reasoning-summary {
+  display: flex;
+  inline-size: max-content;
+  max-inline-size: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0.25rem;
+  color: var(--agentkit-text-muted);
+  cursor: pointer;
+  list-style: none;
+}
+
+.agentkit-reasoning-summary::-webkit-details-marker {
+  display: none;
+}
+
+.agentkit-reasoning-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentkit-reasoning[data-active="true"] .agentkit-reasoning-label {
+  color: transparent;
+  background: linear-gradient(
+    90deg,
+    var(--agentkit-text-muted),
+    color-mix(in srgb, var(--agentkit-text-muted) 28%, transparent),
+    var(--agentkit-text-muted)
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  animation: agentkit-shimmer 1.8s linear infinite;
+}
+
+.agentkit-reasoning-chevron {
+  transition: transform 160ms ease-out;
+}
+
+.agentkit-reasoning[open] .agentkit-reasoning-chevron {
+  transform: rotate(90deg);
+}
+
+.agentkit-reasoning-content {
+  margin-inline-start: 1.5rem;
+  padding: 0.25rem 0 0.5rem;
+  color: var(--agentkit-text);
+}
+
+.agentkit-reasoning-content p {
+  margin: 0;
+}
+
+.agentkit-error {
+  display: grid;
+  gap: 0.125rem;
+  margin-block: 0.75rem 1.25rem;
+  padding: 0.75rem 0.875rem;
+  border: 1px solid
+    color-mix(in srgb, var(--agentkit-danger) 32%, var(--agentkit-border));
+  border-radius: var(--agentkit-radius-inner);
+  background: color-mix(in srgb, var(--agentkit-danger) 6%, transparent);
+  font-size: 0.75rem;
+}
+
+.agentkit-error span {
+  color: var(--agentkit-text-muted);
+}
+
+.agentkit-error-actions {
+  display: flex;
+  justify-content: flex-start;
+  margin-block-start: 0.5rem;
+}
+
+.agentkit-run-failure {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-block: 0.375rem 1.25rem;
+  padding-block: 0.25rem;
+  color: var(--agentkit-danger);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.agentkit-run-failure > .agentkit-icon {
+  margin-block-start: 0.0625rem;
+}
+
+.agentkit-run-failure-copy {
+  display: flex;
+  min-inline-size: 0;
+  flex-wrap: wrap;
+  gap: 0.125rem 0.375rem;
+}
+
+.agentkit-run-failure-copy strong {
+  color: var(--agentkit-danger);
+  font-weight: 600;
+}
+
+.agentkit-run-failure-copy span {
+  color: var(--agentkit-text-muted);
+}
+
+:where(.agentkit-chat) :where(button, a, input, summary):focus-visible {
+  outline: 2px solid var(--agentkit-focus);
+  outline-offset: 2px;
+}
+
+.agentkit-chat-footer {
+  position: relative;
+  grid-column: 1;
+  grid-row: 3;
+  z-index: 3;
+  min-inline-size: 0;
+  padding: 0 1rem 1rem;
+  pointer-events: none;
+}
+
+.agentkit-composer-stack {
+  inline-size: min(100%, 47rem);
+  min-inline-size: 0;
+  margin-inline: auto;
+  pointer-events: auto;
+}
+
+.agentkit-composer-stack [data-agent-composer-slot="area"],
+.agentkit-composer-stack [data-agent-composer-slot="workflow"],
+.agentkit-composer-stack [data-agent-composer-slot="root"],
+.agentkit-composer-stack [data-agent-composer-slot="toolbar"] {
+  min-inline-size: 0;
+}
+
+.agentkit-composer {
+  border-radius: var(--agentkit-radius);
+  background: var(--agentkit-surface);
+  box-shadow: var(--agentkit-elevation);
+}
+
+.agentkit-suggestions {
+  padding-block: 0.5rem 0;
+}
+
+@keyframes agentkit-shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agentkit-activities[data-running="true"] .agentkit-activities-label,
+  .agentkit-activity-item[data-status="running"] .agentkit-activity-label,
+  .agentkit-agent[data-status="working"] .agentkit-agent-name,
+  .agentkit-reasoning[data-active="true"] .agentkit-reasoning-label {
+    animation: none;
+  }
+
+  .agentkit-message-actions,
+  .agentkit-summary-chevron,
+  .agentkit-disclosure-icon,
+  .agentkit-reasoning-chevron,
+  .agentkit-composer-stack [data-agent-message-queue="true"] {
+    transition: none;
+  }
+}
+
+@media (max-width: 40rem) {
+  .agentkit-transcript-content {
+    padding-inline: 0.75rem;
+  }
+
+  .agentkit-chat-footer {
+    padding-inline: 0.75rem;
+  }
+
+  .agentkit-composer-stack [data-agent-composer-slot="area"] {
+    padding-inline: 0;
+  }
+
+  .agentkit-composer [data-agent-composer-slot="toolbar"] {
+    gap: 0.125rem;
+    padding-inline: 0.5rem;
+  }
+
+  .agentkit-composer [data-agent-composer-slot="model-button"] {
+    max-inline-size: 7.5rem;
+    padding-inline: 0.375rem;
+  }
+
+  .agentkit-composer [data-agent-composer-slot="mode-button"] {
+    padding-inline: 0.375rem;
+  }
+
+  .agentkit-composer .agent-composer-model-effort {
+    display: none;
+  }
+
+  .agentkit-message[data-role="user"] .agentkit-message-content {
+    max-inline-size: 94%;
+  }
+}