@lapismd/design-core 0.1.2 → 0.3.0

package/dist/shared/ai/chat.css

@@ -0,0 +1,1610 @@
+:where([data-ui-component^="ai-chat-"]) {
+  --ui-ai-chat-max-content-width: 50rem;
+  --ui-ai-chat-compact-gap: 0.5rem;
+  --ui-ai-chat-balanced-gap: 1rem;
+  --ui-ai-chat-spacious-gap: 1.5rem;
+  --ui-ai-chat-bubble-radius: 1.75rem;
+  --ui-ai-chat-bubble-compact-radius: 0.75rem;
+  --ui-ai-chat-user-bubble: color-mix(
+    in oklab,
+    var(--primary) 14%,
+    var(--muted)
+  );
+  --ui-ai-chat-user-bubble-foreground: var(--foreground);
+  --ui-ai-chat-assistant-bubble: var(--muted);
+  --ui-ai-chat-assistant-bubble-foreground: var(--foreground);
+  --ui-ai-chat-composer-radius: 1.75rem;
+  --ui-ai-chat-composer-padding: 0.75rem;
+  --ui-ai-chat-composer-background: var(--popover);
+  --ui-ai-chat-shadow-medium: var(
+    --shadow-md,
+    0 0.375rem 1rem color-mix(in srgb, var(--foreground) 14%, transparent)
+  );
+  --ui-ai-chat-shadow-large: var(
+    --shadow-lg,
+    0 0.75rem 2rem color-mix(in srgb, var(--foreground) 18%, transparent)
+  );
+  --ui-ai-chat-dock-background: color-mix(
+    in oklab,
+    var(--background) 88%,
+    transparent
+  );
+  --ui-ai-chat-trigger-width: 18rem;
+  --ui-ai-chat-attachment-background: color-mix(
+    in oklab,
+    var(--foreground) 10%,
+    var(--muted)
+  );
+  --ui-ai-chat-attachment-background-hover: color-mix(
+    in oklab,
+    var(--foreground) 16%,
+    var(--muted)
+  );
+  --ui-ai-chat-attachment-foreground: var(--foreground);
+  --ui-ai-chat-attachment-border: transparent;
+  --ui-ai-chat-attachment-radius: 0.375rem;
+  --ui-ai-chat-attachment-remove-hover: color-mix(
+    in oklab,
+    var(--foreground) 12%,
+    transparent
+  );
+}
+
+[data-ui-component="ai-chat-layout"] {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+[data-ui-component="ai-chat-layout"] > [data-ui-part="scroll-shell"],
+[data-ui-component="ai-chat-layout"]
+  > [data-ui-part="scroll-shell"]
+  > [data-ui-component="scroll-area"] {
+  position: relative;
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+[data-ui-component="ai-chat-layout"]
+  [data-ui-part="scroll-shell"]
+  [data-ui-part="scroll-area-viewport"] {
+  scroll-behavior: auto;
+  overscroll-behavior: contain;
+}
+
+[data-ui-component="ai-chat-layout"][data-virtualized]
+  [data-ui-part="scroll-shell"]
+  [data-ui-part="scroll-area-thumb"] {
+  transition: background-color 140ms ease;
+}
+
+[data-ui-component="ai-chat-layout"]
+  [data-ui-part="scroll-shell"]
+  [data-scroll-area-content] {
+  display: flex;
+  min-height: 100%;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+
+[data-ui-component="ai-chat-layout"] [data-ui-part="message-area"] {
+  display: flex;
+  min-height: 100%;
+  flex: 1 0 auto;
+  flex-direction: column;
+  padding-inline: 0;
+  box-sizing: border-box;
+}
+
+[data-ui-component="ai-chat-layout"][data-density="compact"]
+  [data-ui-part="message-area"] {
+  padding-block: 0 5rem;
+}
+
+[data-ui-component="ai-chat-layout"][data-density="balanced"]
+  [data-ui-part="message-area"] {
+  padding-block: 0 6.25rem;
+}
+
+[data-ui-component="ai-chat-layout"][data-density="spacious"]
+  [data-ui-part="message-area"] {
+  max-width: var(--ui-ai-chat-max-content-width);
+  margin-inline: auto;
+  padding-block: 0 7.5rem;
+}
+
+[data-ui-component="ai-chat-layout"] [data-ui-part="empty-state"] {
+  display: grid;
+  min-height: 100%;
+  flex: 1 0 auto;
+  place-items: center;
+}
+
+[data-ui-component="ai-chat-layout"] [data-ui-part="composer-dock"] {
+  position: absolute;
+  z-index: 3;
+  isolation: isolate;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0 0.75rem 0.75rem;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--ui-ai-chat-dock-background) 36%
+  );
+}
+
+[data-ui-component="ai-chat-layout"] [data-ui-part="composer-dock"]::before {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 6.25rem;
+  backdrop-filter: blur(0.75rem);
+  content: "";
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black var(--ui-ai-chat-dock-mask-stop, 2.25rem)
+  );
+  pointer-events: none;
+}
+
+[data-ui-component="ai-chat-layout"][data-density="compact"]
+  [data-ui-part="composer-dock"] {
+  --ui-ai-chat-dock-mask-stop: 1.5rem;
+
+  padding: 0 0.5rem 0.5rem;
+}
+
+[data-ui-component="ai-chat-layout"][data-density="compact"]
+  [data-ui-part="composer-dock"]::before {
+  height: 5rem;
+}
+
+[data-ui-component="ai-chat-layout"][data-density="spacious"]
+  [data-ui-part="composer-dock"] {
+  --ui-ai-chat-dock-mask-stop: 3rem;
+
+  padding: 0 1rem 0.75rem;
+}
+
+[data-ui-component="ai-chat-layout"][data-density="spacious"]
+  [data-ui-part="composer-dock"]::before {
+  height: 7.5rem;
+}
+
+[data-ui-component="ai-chat-layout"]
+  [data-ui-part="composer-dock"]
+  > [data-ui-part="composer-inner"] {
+  position: relative;
+  z-index: 1;
+  max-width: var(--ui-ai-chat-max-content-width);
+  margin-inline: auto;
+  pointer-events: auto;
+}
+
+[data-ui-component="ai-chat-layout-scroll-button"] {
+  position: absolute;
+  z-index: 4;
+  right: 50%;
+  bottom: var(--ui-ai-chat-scroll-button-bottom, 0.75rem);
+  translate: 50% 0;
+  transition:
+    opacity 160ms ease,
+    translate 160ms ease,
+    max-width 160ms ease;
+}
+
+[data-ui-component="ai-chat-layout-scroll-button"][data-visible="false"] {
+  opacity: 0;
+  translate: 50% 0.5rem;
+  pointer-events: none;
+}
+
+[data-ui-component="ai-chat-layout-scroll-button"]
+  [data-ui-component="button"] {
+  height: 2rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--popover);
+  color: var(--foreground);
+  padding-inline: 0.5rem;
+  box-shadow: var(--ui-ai-chat-shadow-medium);
+  white-space: nowrap;
+}
+
+[data-ui-component="ai-chat-layout-scroll-button"] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-ui-component="ai-chat-message-list"] {
+  display: flex;
+  width: min(100%, var(--ui-ai-chat-max-content-width));
+  min-height: 0;
+  margin-inline: auto;
+  flex: 1 1 auto;
+  flex-direction: column;
+  outline: none;
+}
+
+[data-ui-component="ai-chat-message-list"] [data-ui-part="list-inner"] {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+[data-ui-component="ai-chat-message-list"][data-density="compact"]
+  [data-ui-part="list-inner"] {
+  gap: var(--ui-ai-chat-compact-gap);
+  padding: 0.5rem 0.75rem;
+}
+
+[data-ui-component="ai-chat-message-list"][data-density="balanced"]
+  [data-ui-part="list-inner"] {
+  gap: var(--ui-ai-chat-balanced-gap);
+  padding: 1rem;
+}
+
+[data-ui-component="ai-chat-message-list"][data-density="spacious"]
+  [data-ui-part="list-inner"] {
+  gap: var(--ui-ai-chat-spacious-gap);
+  padding: 1.5rem;
+}
+
+[data-ui-component="ai-chat-message-list"] [data-ui-part="top-sentinel"] {
+  display: flex;
+  min-height: 2rem;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-ui-component="ai-chat-message-list"]
+  [data-ui-part="top-sentinel"]
+  [data-ui-component="button"] {
+  color: var(--muted-foreground);
+}
+
+[data-ui-component="ai-chat-message-list"] [data-ui-part="empty"] {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+[data-ui-component="ai-chat-message-list"] [data-ui-part="list-spacer"] {
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+[data-ui-component="ai-chat-message"] {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+  align-items: start;
+  justify-content: flex-start;
+}
+
+[data-ui-component="ai-chat-message"][data-sender="user"] {
+  flex-direction: row-reverse;
+}
+
+[data-ui-component="ai-chat-message"][data-density="compact"]:has(
+    [data-ui-part="avatar"]
+  ) {
+  gap: 0.375rem;
+}
+
+[data-ui-component="ai-chat-message"][data-density="balanced"]:has(
+    [data-ui-part="avatar"]
+  ) {
+  gap: 0.5rem;
+}
+
+[data-ui-component="ai-chat-message"][data-density="spacious"]:has(
+    [data-ui-part="avatar"]
+  ) {
+  gap: 0.75rem;
+}
+
+[data-ui-component="ai-chat-message"] [data-ui-part="avatar"] {
+  display: block;
+  flex: 0 0 auto;
+}
+
+[data-ui-component="ai-chat-message"] [data-ui-part="avatar"] img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+[data-ui-component="ai-chat-message"] [data-ui-part="content"] {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+[data-ui-component="ai-chat-message"][data-sender="user"]
+  [data-ui-part="content"] {
+  align-items: flex-end;
+}
+
+[data-ui-component="ai-chat-message"][data-sender="system"] {
+  justify-content: center;
+}
+
+[data-ui-component="ai-chat-message"][data-sender="system"]
+  [data-ui-part="content"] {
+  max-width: 90%;
+  align-items: center;
+}
+
+[data-ui-component="ai-chat-message"] [data-ui-part="name"] {
+  margin-bottom: 0.25rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  font-weight: 600;
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
+  color: var(--muted-foreground);
+}
+
+[data-ui-component="ai-chat-message"] [data-ui-part="bubbles"] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  align-items: inherit;
+}
+
+[data-ui-component="ai-chat-message"][data-density="compact"]
+  [data-ui-part="bubbles"] {
+  gap: 0.125rem;
+}
+
+[data-ui-component="ai-chat-message"][data-density="balanced"]
+  [data-ui-part="bubbles"] {
+  gap: 0.25rem;
+}
+
+[data-ui-component="ai-chat-message"][data-density="spacious"]
+  [data-ui-part="bubbles"] {
+  gap: 0.375rem;
+}
+
+[data-ui-component="ai-chat-message"]
+  [data-ui-part="avatar"]:has(
+    ~ [data-ui-part="content"] [data-ui-part="bubble-name-row"]
+  ) {
+  margin-top: 1.25rem;
+}
+
+[data-ui-component="ai-chat-message-bubble"] {
+  display: flex;
+  max-width: max(80%, 17.5rem);
+  flex-direction: column;
+  overflow-wrap: anywhere;
+  border-radius: var(--ui-ai-chat-bubble-radius);
+  font-size: calc(0.875rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1.375rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-density="compact"] {
+  border-radius: var(--ui-ai-chat-bubble-compact-radius);
+  padding: 0.75rem 1rem;
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-density="balanced"] {
+  padding: 0.75rem 1rem;
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-density="spacious"] {
+  padding: 1rem 1.25rem;
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-sender="assistant"][data-variant="filled"] {
+  background: var(--ui-ai-chat-assistant-bubble);
+  color: var(--ui-ai-chat-assistant-bubble-foreground);
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-sender="user"][data-variant="filled"] {
+  background: var(--ui-ai-chat-user-bubble);
+  color: var(--ui-ai-chat-user-bubble-foreground);
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-variant="ghost"] {
+  padding-block: 0;
+  background: transparent;
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-group="first"][data-sender="assistant"],
+[data-ui-component="ai-chat-message-bubble"][data-group="middle"][data-sender="assistant"] {
+  border-bottom-left-radius: 0.375rem;
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-group="middle"][data-sender="assistant"],
+[data-ui-component="ai-chat-message-bubble"][data-group="last"][data-sender="assistant"] {
+  border-top-left-radius: 0.375rem;
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-group="first"][data-sender="user"],
+[data-ui-component="ai-chat-message-bubble"][data-group="middle"][data-sender="user"] {
+  border-bottom-right-radius: 0.375rem;
+}
+
+[data-ui-component="ai-chat-message-bubble"][data-group="middle"][data-sender="user"],
+[data-ui-component="ai-chat-message-bubble"][data-group="last"][data-sender="user"] {
+  border-top-right-radius: 0.375rem;
+}
+
+[data-ui-part="bubble-name-row"],
+[data-ui-part="bubble-metadata"] {
+  padding-inline: 1rem;
+}
+
+[data-ui-component="ai-chat-message"][data-density="spacious"]
+  [data-ui-part="bubble-name-row"],
+[data-ui-component="ai-chat-message"][data-density="spacious"]
+  [data-ui-part="bubble-metadata"] {
+  padding-inline: 1.25rem;
+}
+
+[data-ui-part="bubble-name-row"] {
+  display: flex;
+  height: 1.25rem;
+  margin-bottom: -0.375rem;
+  align-items: center;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  font-weight: 600;
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
+  color: var(--muted-foreground);
+}
+
+[data-ui-component="ai-chat-message"][data-sender="user"]
+  [data-ui-part="bubble-name-row"],
+[data-ui-component="ai-chat-message"][data-sender="user"]
+  [data-ui-part="bubble-metadata"] {
+  text-align: end;
+}
+
+[data-ui-part="bubble-metadata"] {
+  margin-top: -0.375rem;
+}
+
+[data-ui-component="ai-chat-message-metadata"] {
+  display: flex;
+  min-height: 1.25rem;
+  margin-top: 0.25rem;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: calc(0.6875rem * var(--ui-ai-chat-type-scale, 1));
+  color: var(--muted-foreground);
+}
+
+[data-ui-component="ai-chat-message-metadata"][data-sender="user"] {
+  justify-content: flex-end;
+}
+
+[data-ui-component="ai-chat-message-metadata"] [data-ui-part="status"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.1875rem;
+}
+
+[data-ui-component="ai-chat-message-metadata"]
+  [data-ui-part="status"][data-status="error"] {
+  color: var(--destructive);
+}
+
+[data-ui-component="ai-chat-message-metadata"] svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+[data-ui-component="ai-chat-message-metadata"] [data-status="sending"] svg {
+  animation: ui-ai-chat-pulse 1.25s ease-in-out infinite;
+}
+
+[data-ui-component="ai-chat-system-message"] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  color: var(--muted-foreground);
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  text-align: center;
+}
+
+[data-ui-component="ai-chat-system-message"][data-variant="default"] {
+  padding-block: 0.375rem;
+}
+
+[data-ui-component="ai-chat-system-message"][data-variant="divider"]
+  [data-ui-component="separator"] {
+  flex: 1 1 auto;
+}
+
+[data-ui-component="ai-chat-system-message"] [data-ui-part="icon"] {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+[data-ui-component="ai-chat-system-message"] [data-ui-part="icon"] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-ui-component="ai-chat-composer"] {
+  position: relative;
+  z-index: 0;
+  isolation: isolate;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  overflow: visible;
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="body"] {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-radius: var(--ui-ai-chat-composer-radius);
+  background: var(--ui-ai-chat-composer-background);
+  padding: var(--ui-ai-chat-composer-padding);
+  cursor: text;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+[data-ui-component="ai-chat-composer"][data-density="compact"]
+  [data-ui-part="body"] {
+  --ui-ai-chat-composer-padding: 0.5rem;
+
+  gap: 0.25rem;
+}
+
+[data-ui-component="ai-chat-composer"][data-elevation="low"]
+  [data-ui-part="body"] {
+  /* Match Astryx --shadow-low: drop shadow + 1px inset ring so the top edge reads. */
+  box-shadow:
+    var(--ui-ai-chat-shadow-medium),
+    inset 0 0 0 1px var(--border);
+}
+
+[data-ui-component="ai-chat-composer"][data-elevation="low"]
+  [data-ui-part="body"]:hover,
+[data-ui-component="ai-chat-composer"][data-elevation="low"]
+  [data-ui-part="body"]:focus-within {
+  box-shadow:
+    var(--ui-ai-chat-shadow-large),
+    inset 0 0 0 1px var(--border);
+}
+
+[data-ui-component="ai-chat-composer"][data-elevation="none"]
+  [data-ui-part="body"] {
+  border: 1px solid var(--border);
+  padding: calc(var(--ui-ai-chat-composer-padding) - 1px);
+  box-shadow: none;
+}
+
+[data-ui-component="ai-chat-composer"][data-elevation="none"]
+  [data-ui-part="body"]:focus-within {
+  border-color: transparent;
+  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--ring) 28%, transparent);
+}
+
+[data-ui-component="ai-chat-composer"][data-disabled="true"]:not(
+    [data-stop-shown="true"]
+  ):not([data-interactive-drawer-when-disabled="true"]) {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+[data-ui-component="ai-chat-composer"][data-disabled="true"][data-interactive-drawer-when-disabled="true"] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+[data-ui-component="ai-chat-composer"][data-disabled="true"][data-stop-shown="true"]
+  [data-ui-part="header"],
+[data-ui-component="ai-chat-composer"][data-disabled="true"][data-stop-shown="true"]
+  [data-ui-part="input-area"],
+[data-ui-component="ai-chat-composer"][data-disabled="true"][data-stop-shown="true"]
+  [data-ui-part="footer-actions"],
+[data-ui-component="ai-chat-composer"][data-disabled="true"][data-interactive-drawer-when-disabled="true"]:not(
+    [data-stop-shown="true"]
+  )
+  > [data-ui-part="body"] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+[data-ui-component="ai-chat-composer"][data-disabled="true"][data-stop-shown="true"]
+  [data-ui-part="send-button"] {
+  pointer-events: auto;
+  opacity: 1;
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="header"],
+[data-ui-component="ai-chat-composer"] [data-ui-part="footer"] {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="header"] {
+  min-height: 1.75rem;
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="footer"] {
+  min-height: 2rem;
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="header-context"],
+[data-ui-component="ai-chat-composer"] [data-ui-part="header-actions"],
+[data-ui-component="ai-chat-composer"] [data-ui-part="footer-actions"],
+[data-ui-component="ai-chat-composer"] [data-ui-part="send-actions"] {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="header-context"] {
+  margin-inline-start: auto;
+  gap: 0.5rem;
+  color: var(--muted-foreground);
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="send-actions"] {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="status"] {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  min-height: 1.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline: 1rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-composer"]
+  [data-ui-part="status"][data-position="top"] {
+  margin-bottom: calc(-1 * var(--ui-ai-chat-composer-radius));
+  border-radius: var(--ui-ai-chat-composer-radius)
+    var(--ui-ai-chat-composer-radius) 0 0;
+  padding-block: var(--ui-ai-chat-composer-padding)
+    calc(var(--ui-ai-chat-composer-padding) + var(--ui-ai-chat-composer-radius));
+}
+
+[data-ui-component="ai-chat-composer"]
+  [data-ui-part="status"][data-position="bottom"] {
+  margin-top: calc(-1 * var(--ui-ai-chat-composer-radius));
+  border-radius: 0 0 var(--ui-ai-chat-composer-radius)
+    var(--ui-ai-chat-composer-radius);
+  padding-block: calc(
+      var(--ui-ai-chat-composer-padding) + var(--ui-ai-chat-composer-radius)
+    )
+    var(--ui-ai-chat-composer-padding);
+}
+
+[data-ui-component="ai-chat-composer"]
+  [data-ui-part="status"][data-status="warning"] {
+  background: color-mix(in oklab, var(--chart-4) 14%, var(--background));
+  color: var(--foreground);
+}
+
+[data-ui-component="ai-chat-composer"]
+  [data-ui-part="status"][data-status="error"] {
+  background: color-mix(in oklab, var(--destructive) 12%, var(--background));
+  color: var(--foreground);
+}
+
+[data-ui-component="ai-chat-composer"]
+  [data-ui-part="status"][data-status="warning"]
+  svg {
+  color: color-mix(in oklab, var(--chart-4) 62%, var(--foreground));
+}
+
+[data-ui-component="ai-chat-composer"]
+  [data-ui-part="status"][data-status="error"]
+  svg {
+  color: var(--destructive);
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="status"] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="input-area"] {
+  min-width: 0;
+}
+
+[data-ui-component="button"][data-ui-part="send-button"] {
+  border-radius: 999px;
+}
+
+[data-ui-component="button"][data-ui-part="send-button"][data-stop="true"] {
+  background-color: var(--foreground);
+  color: var(--background);
+}
+
+[data-ui-component="button"][data-ui-part="send-button"][data-stop="true"]:hover {
+  background-color: color-mix(
+    in oklab,
+    var(--foreground) 82%,
+    var(--background)
+  );
+  color: var(--background);
+}
+
+[data-ui-component="ai-chat-composer"] [data-ui-part="send-button"] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+[data-ui-component="ai-chat-composer-input"] {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 1.375rem;
+  flex-direction: column;
+}
+
+[data-ui-component="ai-chat-composer-input"] [data-ui-part="editable"] {
+  position: relative;
+  z-index: 1;
+  min-height: 1.375rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0.25rem;
+  outline: none;
+  color: var(--foreground);
+  caret-color: var(--ring);
+  font-size: calc(0.875rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1.375rem * var(--ui-ai-chat-type-scale, 1));
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+@media (pointer: coarse) {
+  [data-ui-component="ai-chat-composer-input"] [data-ui-part="editable"],
+  [data-ui-component="ai-chat-composer-input"] [data-ui-part="placeholder"] {
+    font-size: max(1rem, calc(0.875rem * var(--ui-ai-chat-type-scale, 1)));
+  }
+}
+
+[data-ui-component="ai-chat-composer-input"][data-disabled="true"]
+  [data-ui-part="editable"] {
+  cursor: not-allowed;
+}
+
+[data-ui-component="ai-chat-composer-input"] [data-ui-part="placeholder"] {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  padding: 0.25rem;
+  pointer-events: none;
+  color: var(--muted-foreground);
+  font-size: calc(0.875rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1.375rem * var(--ui-ai-chat-type-scale, 1));
+  user-select: none;
+}
+
+[data-ui-component="ai-chat-composer-input"] [data-ui-part="trigger-menu"] {
+  position: absolute;
+  z-index: calc(var(--ui-workspace-overlay-z-index, 50) + 40);
+  width: min(var(--ui-ai-chat-trigger-width), calc(100vw - 2rem));
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  background: var(--popover);
+  box-shadow: var(--ui-ai-chat-shadow-large);
+}
+
+[data-ui-component="ai-chat-composer-input"]
+  [data-ui-part="trigger-menu"][data-placement="above"] {
+  transform: translateY(calc(-100% - 0.375rem));
+}
+
+[data-ui-component="ai-chat-composer-input"]
+  [data-ui-part="trigger-menu"]
+  > [data-ui-component="command"] {
+  max-height: 18rem;
+}
+
+[data-ui-component="ai-chat-composer-input"]
+  [data-ui-part="trigger-menu"]
+  [data-ui-part="command-item"][data-highlighted="true"] {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+[data-ui-component="ai-chat-composer-input"]
+  [data-ui-part="trigger-menu"]
+  [data-ui-part="command-item"] {
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+  height: auto;
+  white-space: normal;
+}
+
+[data-ui-component="ai-chat-composer-input"]
+  [data-ui-part="trigger-menu"]
+  [data-ui-part="command-check-icon"] {
+  display: none;
+}
+
+[data-ui-component="ai-chat-composer-input"]
+  [data-ui-part="trigger-item-label"] {
+  min-width: 0;
+  width: 100%;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+[data-ui-component="ai-chat-composer-input"]
+  [data-ui-part="trigger-item-description"] {
+  min-width: 0;
+  width: 100%;
+  color: var(--muted-foreground);
+  font-size: var(--text-xs, 0.75rem);
+  line-height: var(--text-xs--line-height, 1rem);
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+[data-ui-component="ai-chat-composer-token"] {
+  display: inline-flex;
+  max-width: 100%;
+  vertical-align: baseline;
+}
+
+[data-ui-component="ai-chat-composer-token"][data-ui-part="inline-token"] {
+  align-items: center;
+  min-height: 1.35rem;
+  margin-inline: 0.125rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--secondary);
+  padding-inline: 0.45rem;
+  color: var(--secondary-foreground);
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  font-weight: 500;
+  line-height: calc(1.25rem * var(--ui-ai-chat-type-scale, 1));
+  white-space: nowrap;
+  cursor: default;
+}
+
+[data-ui-component="ai-chat-composer-token"][data-ui-part="root"]
+  [data-ui-component="badge"] {
+  vertical-align: baseline;
+}
+
+[data-ui-component="ai-chat-tokenized-text"] {
+  display: inline;
+}
+
+[data-ui-component="ai-chat-tokenized-text"]
+  [data-ui-component="ai-chat-composer-token"] {
+  margin-inline: 0.125rem;
+}
+
+[data-ui-component="ai-chat-composer-drawer"] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  margin-bottom: calc(-1 * var(--ui-ai-chat-composer-radius));
+  border-radius: var(--ui-ai-chat-composer-radius)
+    var(--ui-ai-chat-composer-radius) 0 0;
+  background: color-mix(in oklab, var(--muted) 72%, var(--background));
+  padding: 0.75rem 1rem calc(0.75rem + var(--ui-ai-chat-composer-radius));
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-trigger"] {
+  display: grid;
+  width: 100%;
+  height: 1.25rem;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  margin-inline: -1rem;
+  padding: 0 1rem;
+  color: var(--muted-foreground);
+  font: inherit;
+  cursor: pointer;
+}
+
+[data-ui-component="ai-chat-composer-drawer"] [data-ui-part="drawer-summary"] {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  gap: 0.5rem;
+  font-size: calc(0.875rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1.25rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-composer-drawer"] [data-ui-part="drawer-handle"] {
+  width: 1.25rem;
+  height: 0.125rem;
+  justify-self: center;
+  border-radius: 999px;
+  background: var(--muted-foreground);
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"] {
+  display: flex;
+  min-height: 0;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 0.375rem;
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  > [data-ui-component="badge"][data-variant="secondary"],
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  > [data-ui-component="ai-chat-composer-token"]
+  [data-ui-component="badge"][data-variant="secondary"],
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="attachment-chip"] {
+  border: 1px solid var(--ui-ai-chat-attachment-border);
+  border-radius: var(--ui-ai-chat-attachment-radius);
+  background: var(--ui-ai-chat-attachment-background);
+  color: var(--ui-ai-chat-attachment-foreground);
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="attachment-chip"] {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  > [data-ui-component="badge"][data-variant="secondary"]:hover,
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="attachment-chip"]:hover {
+  background: var(--ui-ai-chat-attachment-background-hover);
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="attachment-remove"] {
+  display: grid;
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 0;
+  border-radius: 0.25rem;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="attachment-remove"]:hover,
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="attachment-remove"]:focus-visible {
+  background: var(--ui-ai-chat-attachment-remove-hover);
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="attachment-remove"]
+  svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="feedback-list"] {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="feedback-option"] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  border: 0;
+  border-radius: var(--ui-ai-chat-attachment-radius);
+  background: transparent;
+  padding: 0.375rem;
+  color: var(--ui-ai-chat-attachment-foreground);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="feedback-option"]:hover:not(:disabled),
+[data-ui-component="ai-chat-composer-drawer"]
+  [data-ai-chat-part="drawer-content"]
+  [data-ui-part="feedback-option"][data-selected="true"] {
+  background: var(--ui-ai-chat-attachment-background-hover);
+}
+
+[data-ui-component="ai-chat-dictation-button"] {
+  display: inline-flex;
+}
+
+[data-ui-component="ai-chat-dictation-button"] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+[data-ui-component="ai-chat-dictation-button"] [data-ui-part="volume-bars"] {
+  display: flex;
+  height: 1.125rem;
+  align-items: center;
+  gap: 0.1rem;
+}
+
+[data-ui-component="ai-chat-dictation-button"] [data-ui-part="volume-bar"] {
+  width: 0.125rem;
+  max-height: 1rem;
+  border-radius: 999px;
+  background: currentColor;
+  transition: height 80ms linear;
+}
+
+[data-ui-component="ai-chat-tool-calls"] {
+  display: flex;
+  width: var(--ui-ai-chat-tool-width, min(100%, 42rem));
+  margin-top: 0.5rem;
+  flex-direction: column;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ai-chat-part="group-trigger"] {
+  display: flex;
+  width: 100%;
+  min-height: 1.5rem;
+  align-items: center;
+  gap: 0.375rem;
+  border: 0;
+  background: transparent;
+  padding: 0.125rem 0;
+  padding-inline: var(--ui-ai-chat-tool-trigger-padding-inline, 0);
+  color: var(--muted-foreground);
+  font: inherit;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
+  text-align: left;
+  cursor: pointer;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="group-icon"] {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="group-label"] {
+  font-weight: 500;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="group-icon"] svg,
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="chevron"],
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="detail-chevron"] {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="chevron"] {
+  transition: rotate 160ms ease;
+}
+
+[data-ui-component="ai-chat-tool-calls"][data-expanded="true"]
+  [data-ui-part="chevron"] {
+  rotate: 180deg;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="call-list"] {
+  display: flex;
+  margin: 0;
+  flex-direction: column;
+  padding: 0;
+  list-style: none;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="call"] {
+  min-width: 0;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ai-chat-part="call-trigger"] {
+  display: flex;
+  width: 100%;
+  min-height: 1.5rem;
+  align-items: center;
+  gap: 0.375rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  padding: 0.125rem 0;
+  padding-inline: var(--ui-ai-chat-tool-trigger-padding-inline, 0);
+  color: var(--muted-foreground);
+  font: inherit;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: calc(1rem * var(--ui-ai-chat-type-scale, 1));
+  text-align: left;
+}
+
+[data-ui-component="ai-chat-tool-calls"]
+  [data-ai-chat-part="call-trigger"]:not(:disabled):hover {
+  background: var(--accent);
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="call-status"] {
+  position: relative;
+  display: inline-grid;
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--muted-foreground);
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="status-circle"] {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.15;
+}
+
+[data-ui-component="ai-chat-tool-calls"]
+  [data-ui-part="call"][data-status="running"]
+  [data-ui-part="call-status"] {
+  color: var(--primary);
+}
+
+[data-ui-component="ai-chat-tool-calls"]
+  [data-ui-part="call"][data-status="complete"]
+  [data-ui-part="call-status"] {
+  color: var(--ui-ai-chat-success, var(--chart-2));
+}
+
+[data-ui-component="ai-chat-tool-calls"]
+  [data-ui-part="call"][data-status="error"]
+  [data-ui-part="call-status"],
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="error"] {
+  color: var(--destructive);
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="call-status"] svg {
+  position: relative;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="call-name"] {
+  min-width: 0;
+  overflow: hidden;
+  flex: 0 1 auto;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="call-target"],
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="duration"] {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted-foreground);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="duration"] {
+  flex: 0 0 auto;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="diff-stats"],
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="call-stats"] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 0.25rem;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="call-count"] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.125rem;
+  opacity: 0.72;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="call-count"] svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+[data-ui-component="ai-chat-tool-calls"]
+  [data-ui-part="diff-stats"]
+  [data-kind="addition"] {
+  color: var(--foreground);
+}
+
+[data-ui-component="ai-chat-tool-calls"]
+  [data-ui-part="diff-stats"]
+  [data-kind="deletion"] {
+  color: var(--destructive);
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="detail-chevron"] {
+  transition: rotate 160ms ease;
+}
+
+[data-ui-component="ai-chat-tool-calls"]
+  [data-ai-chat-part="call-trigger"][data-state="open"]
+  [data-ui-part="detail-chevron"] {
+  rotate: 180deg;
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ui-part="error"] {
+  margin: 0;
+  padding: 0 0.5rem 0.5rem 1.95rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-tool-calls"] [data-ai-chat-part="call-detail"] {
+  padding: 0.25rem 0 0.5rem 1.375rem;
+  color: var(--muted-foreground);
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+@keyframes ui-ai-chat-pulse {
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes ui-ai-chat-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+[data-ui-component="ai-chat-reasoning"] {
+  --ui-ai-chat-reasoning-accent: var(--muted-foreground);
+  margin-block-start: 0.5rem;
+}
+
+[data-ui-component="ai-chat-reasoning"] [data-ai-chat-part="reasoning-trigger"],
+[data-ui-component="ai-chat-reasoning"] [data-ai-chat-part="reasoning-status"] {
+  display: flex;
+  width: 100%;
+  min-height: 1.75rem;
+  align-items: center;
+  gap: 0.375rem;
+  border: 0;
+  background: transparent;
+  padding: 0.125rem 0;
+  color: var(--ui-ai-chat-reasoning-accent);
+  text-align: left;
+  cursor: pointer;
+}
+
+[data-ui-component="ai-chat-reasoning"] [data-ai-chat-part="reasoning-status"] {
+  cursor: default;
+}
+
+[data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-icon"],
+[data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-chevron"] {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex: none;
+}
+
+[data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-row"] {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 0.25rem;
+  overflow: hidden;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-label"] {
+  flex: none;
+  font-weight: 500;
+}
+
+@keyframes ui-ai-chat-reasoning-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0% 0;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
+  [data-ui-component="ai-chat-reasoning"][data-streaming="true"]
+    [data-ui-part="reasoning-icon"] {
+    animation: ui-ai-chat-spin 1s linear infinite;
+  }
+
+  @supports (background-clip: text) {
+    [data-ui-component="ai-chat-reasoning"][data-streaming="true"]
+      [data-ui-part="reasoning-label"] {
+      background-image: linear-gradient(
+        110deg,
+        var(--ui-ai-chat-reasoning-accent) 35%,
+        var(--foreground) 50%,
+        var(--ui-ai-chat-reasoning-accent) 65%
+      );
+      background-size: 250% 100%;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: ui-ai-chat-reasoning-shimmer 2s linear infinite;
+    }
+  }
+}
+
+[data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-duration"],
+[data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-separator"],
+[data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-preview"] {
+  color: var(--muted-foreground);
+}
+
+[data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-preview"] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-chevron"] {
+  transition: rotate 160ms ease;
+}
+
+[data-ui-component="ai-chat-reasoning"][data-expanded="true"]
+  [data-ui-part="reasoning-chevron"] {
+  rotate: 180deg;
+}
+
+[data-ui-component="ai-chat-reasoning"]
+  [data-ai-chat-part="reasoning-content"] {
+  padding: 0.5rem 0 0 1.25rem;
+}
+
+[data-ui-component="ai-chat-reasoning"]
+  [data-ui-part="reasoning-content-inner"] {
+  border-left: 2px solid var(--border);
+  padding-left: 0.75rem;
+  color: var(--muted-foreground);
+  font-size: calc(0.8125rem * var(--ui-ai-chat-type-scale, 1));
+  line-height: 1.5;
+}
+
+[data-ui-component="ai-chat-typing-indicator"] {
+  display: flex;
+  min-height: 1.25rem;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--muted-foreground);
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-typing-indicator"] [data-ui-part="typing-dots"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+[data-ui-component="ai-chat-typing-indicator"] [data-ui-part="typing-dot"] {
+  width: 0.3125rem;
+  height: 0.3125rem;
+  border-radius: 999px;
+  background: currentcolor;
+  animation: ui-ai-chat-typing 900ms ease-in-out infinite;
+}
+
+[data-ui-component="ai-chat-typing-indicator"]
+  [data-ui-part="typing-dot"]:nth-child(2) {
+  animation-delay: 160ms;
+}
+
+[data-ui-component="ai-chat-typing-indicator"]
+  [data-ui-part="typing-dot"]:nth-child(3) {
+  animation-delay: 320ms;
+}
+
+[data-ui-component="ai-chat-unread-divider"] {
+  --ui-ai-chat-unread-color: var(--destructive);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding-block: 0.25rem;
+  color: var(--ui-ai-chat-unread-color);
+}
+
+[data-ui-component="ai-chat-unread-divider"] [data-ai-chat-part="unread-line"] {
+  flex: 1;
+  background: currentcolor;
+}
+
+[data-ui-component="ai-chat-unread-divider"] [data-ui-part="unread-label"] {
+  flex: none;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+  font-weight: 700;
+}
+
+[data-ui-component="ai-chat-emoji-picker"] [data-ai-chat-part="emoji-content"] {
+  --ui-popover-gap: 0.5rem;
+  --ui-popover-padding: 0.5rem;
+  width: 18rem;
+}
+
+[data-ui-component="ai-chat-emoji-picker"] [data-ui-part="emoji-panel"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+[data-ui-component="ai-chat-emoji-picker"] [data-ui-part="emoji-grid"] {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 0.125rem;
+}
+
+[data-ui-component="ai-chat-emoji-picker"]
+  [data-ui-part="emoji-grid"]
+  [data-ui-component="button"] {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  font-size: calc(1.125rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-emoji-picker"] [data-ui-part="emoji-empty"] {
+  margin: 0;
+  padding: 0.5rem 0.25rem;
+  color: var(--muted-foreground);
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-reaction-bar"] {
+  --ui-ai-chat-reaction-background: var(--muted);
+  --ui-ai-chat-reaction-selected-background: var(--accent);
+  --ui-ai-chat-reaction-selected-border: var(--ring);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+[data-ui-component="ai-chat-reaction-bar"] [data-ai-chat-part="reaction"] {
+  height: 1.5rem;
+  min-width: 0;
+  gap: 0.25rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: var(--ui-ai-chat-reaction-background);
+  padding-inline: 0.5rem;
+  font-size: calc(0.75rem * var(--ui-ai-chat-type-scale, 1));
+}
+
+[data-ui-component="ai-chat-reaction-bar"]
+  [data-ai-chat-part="reaction"][data-state="on"] {
+  border-color: var(--ui-ai-chat-reaction-selected-border);
+  background: var(--ui-ai-chat-reaction-selected-background);
+}
+
+[data-ui-component="ai-chat-reaction-bar"] [data-ui-part="reaction-count"] {
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+@keyframes ui-ai-chat-typing {
+  30% {
+    translate: 0 -0.1875rem;
+    opacity: 1;
+  }
+  0%,
+  60%,
+  100% {
+    translate: 0 0;
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-ui-component="ai-chat-layout-scroll-button"],
+  [data-ui-component="ai-chat-message-metadata"] [data-status="sending"] svg,
+  [data-ui-component="ai-chat-composer-drawer"] svg,
+  [data-ui-component="ai-chat-dictation-button"] [data-ui-part="volume-bar"],
+  [data-ui-component="ai-chat-tool-calls"] svg,
+  [data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-label"],
+  [data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-icon"],
+  [data-ui-component="ai-chat-reasoning"] [data-ui-part="reasoning-chevron"],
+  [data-ui-component="ai-chat-typing-indicator"] [data-ui-part="typing-dot"] {
+    transition: none;
+    animation: none;
+  }
+}
+
+[data-ui-component="ai-chat-message-list"] [data-ui-part="virtual-content"] {
+  position: relative;
+  flex: 0 0 auto;
+  width: 100%;
+  overflow-anchor: none;
+}
+[data-ui-component="ai-chat-message-list"] [data-ui-part="virtual-row"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding-bottom: var(--ui-ai-chat-balanced-gap);
+  overflow-anchor: none;
+}
+[data-ui-component="ai-chat-message-list"][data-density="compact"]
+  [data-ui-part="virtual-row"] {
+  padding-bottom: var(--ui-ai-chat-compact-gap);
+}
+[data-ui-component="ai-chat-message-list"][data-density="spacious"]
+  [data-ui-part="virtual-row"] {
+  padding-bottom: var(--ui-ai-chat-spacious-gap);
+}