@liveblocks/react-ui 2.25.0-aiprivatebeta8 → 3.0.0

package/src/styles/index.css

@@ -26,7 +26,7 @@
   --lb-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
   --lb-highlight-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
   --lb-elevation-shadow: $lb-elevation-shadow;
-  --lb-elevation-shadow-small: $lb-elevation-shadow-small;
+  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;
   --lb-tooltip-shadow: $lb-tooltip-shadow;
   --lb-accent-contrast: 8%;
   --lb-destructive-contrast: 8%;
@@ -284,6 +284,23 @@
     }
   }
 
+  &:where([data-variant="destructive"]) {
+    --lb-button-background: var(--lb-destructive);
+
+    color: var(--lb-destructive-foreground);
+
+    &:where(
+        :enabled:hover,
+        :enabled:focus-visible,
+        [aria-expanded="true"],
+        [aria-selected="true"]
+      ) {
+      --lb-button-background: var(--lb-destructive-secondary);
+
+      color: var(--lb-destructive-foreground);
+    }
+  }
+
   &:where([data-variant="outline"]) {
     box-shadow: inset 0 0 0 1px var(--lb-foreground-subtle);
     transition-property: background, color, opacity, box-shadow;
@@ -451,6 +468,278 @@
   opacity: 0.75;
 }
 
+/*************************************
+ *            Collapsible            *
+ *************************************/
+
+.lb-collapsible-trigger {
+  all: unset;
+  position: relative;
+  box-sizing: inherit;
+  user-select: none;
+  transition-timing-function: var(--lb-transition-easing);
+  transition-duration: var(--lb-transition-duration);
+  transition-property: color, background, opacity;
+  -webkit-tap-highlight-color: transparent;
+
+  &:where(:not([data-disabled])) {
+    cursor: pointer;
+  }
+}
+
+.lb-collapsible-chevron {
+  inline-size: calc(0.8 * var(--lb-icon-size));
+  block-size: calc(0.8 * var(--lb-icon-size));
+  margin-inline-start: -1px;
+  margin-block-start: 1px;
+  color: var(--lb-foreground-moderate);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @supports (interpolate-size: allow-keywords) {
+    .lb-collapsible-content {
+      block-size: 0;
+      opacity: 0;
+      transition-duration: calc(3 * var(--lb-transition-duration));
+      transition-property: block-size, opacity, content-visibility;
+
+      /* overflow-block: clip; doesn't work as expected */
+      /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
+      overflow-y: clip;
+
+      /* interpolate-size is a new-ish property */
+      /* stylelint-disable-next-line */
+      interpolate-size: allow-keywords;
+
+      /* transition-behavior is a new-ish property */
+      /* stylelint-disable-next-line */
+      transition-behavior: allow-discrete;
+
+      &:where([data-state="open"]) {
+        block-size: auto;
+        opacity: 1;
+
+        /* overflow-block: auto; doesn't work as expected */
+        /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .lb-collapsible-chevron {
+    transition-property: transform;
+
+    .lb-collapsible:where([data-state="open"]) :where(&) {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+/* Fix default browser styles when `hidden="until-found"` isn't supported. */
+.lb-collapsible-content:where([hidden]:not([hidden="until-found"])) {
+  display: none !important;
+}
+
+/*************************************
+ *              Prose               *
+ *************************************/
+
+.lb-prose {
+  &,
+  * {
+    line-height: var(--lb-line-height);
+  }
+
+  :where(p) {
+    margin-block: 0.75em;
+  }
+
+  :where(p, li) {
+    text-wrap: pretty;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    margin-block-start: 1.5em;
+    margin-block-end: 0.375em;
+    font-weight: 600;
+    text-wrap: balance;
+  }
+
+  :where(h1) {
+    font-size: 1.75em;
+    line-height: calc(0.8 * var(--lb-line-height));
+  }
+
+  :where(h2) {
+    font-size: 1.5em;
+    line-height: calc(0.86 * var(--lb-line-height));
+  }
+
+  :where(h3) {
+    font-size: 1.25em;
+    line-height: calc(0.92 * var(--lb-line-height));
+  }
+
+  :where(h4) {
+    font-size: 1.125em;
+    line-height: calc(0.98 * var(--lb-line-height));
+  }
+
+  :where(h5) {
+    font-size: 1em;
+  }
+
+  :where(h6) {
+    font-size: 0.875em;
+  }
+
+  :where(hr) {
+    margin-block: 1.5em;
+    border: none;
+    border-block-start: 1px solid var(--lb-foreground-subtle);
+  }
+
+  :where(ol, ul) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+    margin-block: 0.75em;
+    padding-inline-start: 1.5em;
+    list-style-position: outside;
+
+    :where(ol, ul) {
+      margin-block: 0;
+    }
+  }
+
+  :where(ul) {
+    list-style-type: disc;
+  }
+
+  :where(ol) {
+    list-style-type: decimal;
+  }
+
+  :where(li) {
+    margin-block: 0;
+
+    > :where(ol, ul) {
+      margin-block-start: 0.25em;
+    }
+  }
+
+  :where(a) {
+    color: var(--lb-foreground);
+    outline: none;
+    font-weight: 500;
+    transition-property: color, text-decoration-color;
+    text-decoration-line: underline;
+    text-decoration-color: var(--lb-foreground-moderate);
+    text-underline-offset: 2px;
+
+    &:where([href]):where(:hover, :focus-visible) {
+      color: var(--lb-accent);
+      text-decoration-color: var(--lb-accent-moderate);
+    }
+  }
+
+  :where(strong) {
+    font-weight: 600;
+  }
+
+  :where(table) {
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin-block: 1em;
+    border-collapse: collapse;
+    table-layout: auto;
+    word-break: break-word;
+  }
+
+  :where(thead) {
+    border-block-end: 2px solid var(--lb-foreground-subtle);
+
+    :where(th) {
+      vertical-align: bottom;
+    }
+  }
+
+  :where(tbody) {
+    :where(td) {
+      vertical-align: baseline;
+    }
+
+    :where(tr:not(:last-child)) {
+      border-block-end: 1px solid var(--lb-foreground-subtle);
+    }
+  }
+
+  :where(tfoot) {
+    border-block-start: 2px solid var(--lb-foreground-subtle);
+
+    :where(td) {
+      vertical-align: top;
+    }
+  }
+
+  :where(th, td) {
+    padding-inline: 0.75em;
+    padding-block: 0.5em;
+    text-align: start;
+
+    &:where(:first-child) {
+      padding-inline-start: 0;
+    }
+
+    &:where(:last-child) {
+      padding-inline-end: 0;
+    }
+  }
+
+  :where(.lb-code-block) {
+    margin-block: 1em;
+  }
+
+  :where(blockquote) {
+    position: relative;
+    margin-inline: 0;
+    margin-block: 0.75em;
+    padding: 0;
+    padding-inline-start: 1.25em;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset-inline-start: 0;
+      inset-block-start: 0;
+      inline-size: 4px;
+      block-size: 100%;
+      border-radius: calc(0.5 * var(--lb-radius));
+      background: var(--lb-foreground-subtle);
+    }
+
+    &:where(& + &) {
+      margin-block-start: 1em;
+    }
+
+    > :where(:first-child) {
+      margin-block-start: 0;
+    }
+
+    > :where(:last-child) {
+      margin-block-end: 0;
+    }
+  }
+
+  > :where(:first-child) {
+    margin-block-start: 0;
+  }
+
+  > :where(:last-child) {
+    margin-block-end: 0;
+  }
+}
+
 /*************************************
  *       Composer suggestions        *
  *************************************/
@@ -510,6 +799,14 @@
  *               Emoji               *
  *************************************/
 
+.lb-emoji {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  inline-size: 1em;
+  white-space: nowrap;
+}
+
 @include safari-only {
   .lb-emoji {
     transform: scale(0.825);
@@ -670,6 +967,7 @@
   --lb-background: #222;
   --lb-foreground: #fff;
   --lb-foreground-contrast: 10%;
+  --lb-dynamic-background: var(--lb-background);
 
   position: relative;
   display: flex;
@@ -1925,6 +2223,8 @@
  *************************************/
 
 .lb-elevation {
+  --lb-dynamic-background: var(--lb-background);
+
   position: relative;
   overflow: hidden;
   border-radius: var(--lb-radius);
@@ -1940,6 +2240,10 @@
     box-shadow: var(--lb-inset-shadow);
     pointer-events: none;
   }
+
+  &:where(.lb-elevation-moderate) {
+    box-shadow: var(--lb-elevation-shadow-moderate);
+  }
 }
 
 /*************************************
@@ -2049,9 +2353,56 @@
   }
 }
 
+/*************************************
+ *            Code block             *
+ *************************************/
+
+.lb-code-block {
+  min-inline-size: 0;
+  border: 1px solid var(--lb-foreground-subtle);
+  border-radius: var(--lb-radius);
+
+  :where(.lb-code-block-header) {
+    display: flex;
+    align-items: center;
+    padding: calc(0.5 * var(--lb-spacing));
+  }
+
+  :where(.lb-code-block-title) {
+    margin-inline-start: calc(0.5 * var(--lb-spacing));
+    color: var(--lb-foreground-tertiary);
+    font-weight: 600;
+    font-size: 0.675em;
+    text-transform: uppercase;
+  }
+
+  :where(.lb-code-block-header-actions) {
+    margin-inline-start: auto;
+  }
+
+  :where(.lb-code-block-content) {
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0 var(--lb-spacing) calc(0.875 * var(--lb-spacing));
+    font-size: 85%;
+    line-height: 1;
+
+    /* overflow-inline: auto; doesn't work as expected */
+    /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
+    overflow-x: auto;
+  }
+}
+
 /*************************************
  *          Chat Composer            *
  *************************************/
+
+.lb-ai-chat-composer {
+  position: relative;
+  inline-size: 100%;
+  color: var(--lb-foreground);
+}
+
 .lb-ai-chat-composer-form:where(
     :has(.lb-ai-chat-composer-editor:not(:focus-visible))
   ) {
@@ -2068,13 +2419,6 @@
   }
 }
 
-.lb-ai-chat-composer-form {
-  position: relative;
-  background: var(--lb-dynamic-background);
-  color: var(--lb-foreground);
-  transition-property: background;
-}
-
 .lb-ai-chat-composer-editor {
   max-block-size: 15rem;
   padding: var(--lb-spacing) var(--lb-spacing) 0;
@@ -2144,180 +2488,24 @@
 .lb-ai-chat-message {
   display: flex;
   flex-direction: column;
-  gap: calc(0.75 * var(--lb-spacing));
+  gap: var(--lb-spacing);
   color: var(--lb-foreground);
 }
 
-.lb-ai-chat-message-content {
-  inline-size: 100%;
-  white-space: break-spaces;
-}
-
 .lb-ai-chat-user-message {
   :where(.lb-ai-chat-message-content) {
+    min-block-size: calc(1lh + var(--lb-spacing));
     padding: calc(0.5 * var(--lb-spacing)) var(--lb-spacing);
-    border-radius: calc(3 * var(--lb-radius));
+
+    /**
+     * Exactly half the height (line-height + padding) of a one line bubble,
+     * so that it doesn't change when the text wraps and the bubble becomes taller.
+     */
+    border-radius: calc((1lh + var(--lb-spacing)) / 2);
     background: var(--lb-background-foreground-faint);
     color: var(--lb-foreground);
-  }
-}
-
-.lb-ai-chat-message-text {
-  display: flex;
-  flex-direction: column;
-
-  &,
-  * {
     line-height: var(--lb-line-height);
   }
-
-  :where(p) {
-    margin-block: 0.25em;
-  }
-
-  :where(h1, h2, h3, h4, h5, h6) {
-    margin-block: 0.5em;
-    font-weight: 600;
-  }
-
-  :where(h1) {
-    font-size: 1.75em;
-  }
-
-  :where(h2) {
-    font-size: 1.5em;
-  }
-
-  :where(h3) {
-    font-size: 1.25em;
-  }
-
-  :where(h4) {
-    font-size: 1.125em;
-  }
-
-  :where(h5) {
-    font-size: 1em;
-  }
-
-  :where(h6) {
-    font-size: 0.875em;
-  }
-
-  :where(hr) {
-    margin-block: calc(0.75 * var(--lb-spacing));
-    border-block-start: 1px solid var(--lb-foreground-subtle);
-  }
-
-  :where(blockquote) {
-    position: relative;
-    margin-block-start: calc(0.75 * var(--lb-spacing));
-    padding: calc(0.375 * var(--lb-spacing)) 0 calc(0.375 * var(--lb-spacing))
-      calc(1.5 * var(--lb-spacing));
-
-    &::after {
-      content: "";
-      position: absolute;
-      inset-inline-start: 0;
-      inset-block-start: 0;
-      inline-size: 4px;
-      block-size: 100%;
-      border-radius: calc(0.5 * var(--lb-radius));
-      background: var(--lb-foreground-subtle);
-    }
-  }
-
-  :where(ol, ul) {
-    margin-block: calc(0.75 * var(--lb-spacing));
-    padding-inline-start: calc(1.5 * var(--lb-spacing));
-    list-style-position: outside;
-  }
-
-  :where(ul) {
-    list-style-type: disc;
-  }
-
-  :where(ol) {
-    list-style-type: decimal;
-  }
-
-  :where(li) {
-    margin-block: calc(0.25 * var(--lb-spacing));
-  }
-
-  /**
-   * Merge adjacent inline code elements
-   */
-  :where(span:has(code) + span code) {
-    padding-inline-start: 0;
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  :where(span:has(code):has(+ span code) code) {
-    padding-inline-end: 0;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :where(a) {
-    color: var(--lb-foreground);
-    outline: none;
-    font-weight: 500;
-    transition-property: color, text-decoration-color;
-    text-decoration-line: underline;
-    text-decoration-color: var(--lb-foreground-moderate);
-    text-underline-offset: 2px;
-
-    &:where([href]):where(:hover, :focus-visible) {
-      color: var(--lb-accent);
-      text-decoration-color: var(--lb-accent-moderate);
-    }
-  }
-
-  :where(.lb-code-block) {
-    min-inline-size: 0;
-    margin-block: 0.25em;
-    border: 1px solid var(--lb-foreground-subtle);
-    border-radius: var(--lb-radius);
-
-    :where(.lb-code-block-header) {
-      display: flex;
-      align-items: center;
-      padding: calc(0.5 * var(--lb-spacing));
-    }
-
-    :where(.lb-code-block-title) {
-      margin-inline-start: calc(0.5 * var(--lb-spacing));
-      color: var(--lb-foreground-tertiary);
-      font-weight: 600;
-      font-size: 0.675em;
-      text-transform: uppercase;
-    }
-
-    :where(.lb-code-block-header-actions) {
-      margin-inline-start: auto;
-    }
-
-    :where(.lb-code-block-content) {
-      min-inline-size: 0;
-      padding: 0 var(--lb-spacing) calc(0.875 * var(--lb-spacing));
-      font-size: 85%;
-      line-height: 1;
-
-      /* overflow-inline: auto; doesn't work as expected */
-      /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
-      overflow-x: auto;
-    }
-  }
-
-  :where(strong) {
-    font-weight: 600;
-  }
-}
-
-.lb-ai-chat-message-tool {
-  margin-block: calc(0.25 * var(--lb-spacing));
 }
 
 .lb-ai-chat-message-deleted {
@@ -2326,110 +2514,67 @@
   inline-size: 100%;
   color: var(--lb-foreground-moderate);
   font-size: 0.875em;
-  text-wrap: balance;
+  text-wrap: pretty;
 }
 
 .lb-ai-chat-message-error {
-  --lb-dynamic-background: var(--lb-background-destructive-subtle);
-
-  position: relative;
   display: flex;
   gap: calc(0.5 * var(--lb-spacing));
-  align-items: center;
+  align-items: flex-start;
   inline-size: 100%;
-  padding: calc(0.75 * var(--lb-spacing));
-  border-radius: var(--lb-radius);
-  background: var(--lb-dynamic-background);
   color: var(--lb-destructive);
   font-size: 0.875em;
-  text-wrap: balance;
+  line-height: var(--lb-line-height);
+  text-wrap: pretty;
+  word-break: break-word;
 
   :where(.lb-icon-container) {
+    block-size: 1lh;
     color: var(--lb-destructive-secondary);
   }
-}
 
-.lb-ai-chat-message-collapsible-trigger {
-  @include truncate;
-
-  display: flex;
-  gap: calc(0.25 * var(--lb-spacing));
-  align-items: center;
-  cursor: pointer;
-}
-
-.lb-ai-chat-message-collapsible-content {
-  display: flex;
-  flex-direction: column;
-  gap: calc(0.5 * var(--lb-spacing));
-  line-height: var(--lb-line-height);
-
-  :where(& > *:first-child) {
-    margin-block-start: calc(0.5 * var(--lb-spacing));
+  :where(code:not(pre > code)) {
+    background: var(--lb-destructive-subtle);
   }
 }
 
-.lb-ai-chat-message-collapsible-chevron {
-  inline-size: calc(0.8 * var(--lb-icon-size));
-  block-size: calc(0.8 * var(--lb-icon-size));
-  margin-inline-start: -1px;
-  margin-block-start: 1px;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  @supports (interpolate-size: allow-keywords) {
-    .lb-ai-chat-message-collapsible-content {
-      block-size: 0;
-      opacity: 0;
-      transition-duration: calc(3 * var(--lb-transition-duration));
-      transition-property: block-size, opacity, content-visibility;
-      content-visibility: hidden;
-
-      /* overflow-block: clip; doesn't work as expected */
-      /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
-      overflow-y: clip;
-
-      /* interpolate-size is a new-ish property */
-      /* stylelint-disable-next-line */
-      interpolate-size: allow-keywords;
+.lb-ai-chat-message-content {
+  inline-size: 100%;
+  white-space: break-spaces;
 
-      /* transition-behavior is a new-ish property */
-      /* stylelint-disable-next-line */
-      transition-behavior: allow-discrete;
+  &:where(:empty) {
+    display: contents;
+  }
 
-      &:where([data-state="open"]) {
-        block-size: auto;
-        opacity: 1;
-        content-visibility: auto;
+  > :where(.lb-ai-chat-message-text) {
+    margin-block: var(--lb-spacing);
+  }
 
-        /* overflow-block: auto; doesn't work as expected */
-        /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
-        overflow-y: auto;
-      }
-    }
+  > :where(.lb-ai-chat-message-tool-invocation) {
+    margin-block: var(--lb-spacing);
   }
 
-  .lb-ai-chat-message-collapsible-chevron {
-    transition-property: transform;
+  > :where(:first-child) {
+    margin-block-start: 0;
+  }
 
-    .lb-ai-chat-message-collapsible:where([data-state="open"]) :where(&) {
-      transform: rotate(90deg);
-    }
+  > :where(:last-child) {
+    margin-block-end: 0;
   }
 }
 
 .lb-ai-chat-messages {
   display: flex;
   flex-direction: column;
-  gap: calc(0.75 * var(--lb-spacing));
+  gap: var(--lb-spacing);
   inline-size: 100%;
   max-inline-size: min(
     calc(var(--lb-ai-chat-container-width) - var(--lb-spacing)),
     calc(100% - 3 * var(--lb-spacing))
   );
   margin-inline: auto;
-  padding-block-start: var(--lb-spacing);
-  padding-block-end: calc(5 * var(--lb-spacing));
+  padding-block-start: calc(1.5 * var(--lb-spacing));
+  padding-block-end: calc(3 * var(--lb-spacing));
 
   :where(.lb-ai-chat-user-message) {
     max-inline-size: 80%;
@@ -2464,6 +2609,36 @@
     inset-block-end: 0;
     z-index: 1;
     margin-block-start: auto;
+  }
+
+  :where(.lb-ai-chat-composer) {
+    margin-inline: auto;
+  }
+}
+
+.lb-ai-chat:where(.lb-ai-chat\:layout-compact) {
+  :where(.lb-ai-chat-footer) {
+    background: var(--lb-dynamic-background);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-block-start: 1px solid var(--lb-foreground-subtle);
+      pointer-events: none;
+    }
+  }
+
+  :where(.lb-ai-chat-composer) {
+    max-inline-size: min(
+      100%,
+      calc(var(--lb-ai-chat-container-width) + var(--lb-spacing))
+    );
+  }
+}
+
+.lb-ai-chat:where(.lb-ai-chat\:layout-inset) {
+  :where(.lb-ai-chat-footer) {
     padding: var(--lb-spacing);
     padding-block-start: 0;
 
@@ -2483,13 +2658,15 @@
 
   :where(.lb-ai-chat-composer) {
     max-inline-size: var(--lb-ai-chat-container-width);
-    margin-inline: auto;
     border-radius: calc(2 * var(--lb-radius));
-    background: var(--lb-dynamic-background);
-    box-shadow: var(--lb-elevation-shadow-small);
   }
 }
 
+.lb-ai-chat-content {
+  position: relative;
+  flex: 1 0 auto;
+}
+
 .lb-ai-chat-footer-actions {
   position: absolute;
   inset-inline: 0;
@@ -2500,11 +2677,6 @@
   transform: translateY(-100%);
 }
 
-.lb-ai-chat-composer {
-  position: relative;
-  inline-size: 100%;
-}
-
 .lb-ai-chat-scroll-indicator {
   border-radius: $lb-radius-full;
   color: var(--lb-foreground-moderate);
@@ -2556,17 +2728,165 @@
 .lb-ai-chat-message-reasoning {
   inline-size: fit-content;
   max-inline-size: 100%;
+  color: var(--lb-foreground-tertiary);
+
+  &:where(.lb-ai-chat-pending),
+  :where(.lb-ai-chat-pending) {
+    color: var(--lb-foreground);
+  }
 }
 
 .lb-ai-chat-message-reasoning {
-  margin-block-end: calc(0.5 * var(--lb-spacing));
+  margin-block-end: calc(0.75 * var(--lb-spacing));
+
+  :where(.lb-collapsible-trigger) {
+    display: flex;
+    gap: calc(0.25 * var(--lb-spacing));
+    align-items: center;
+
+    &:where(:focus-visible) {
+      color: var(--lb-accent);
+
+      :where(.lb-collapsible-chevron) {
+        color: var(--lb-accent-moderate);
+      }
+    }
+  }
+
+  :where(.lb-collapsible-content) {
+    display: flex;
+    flex-direction: column;
+    gap: calc(0.5 * var(--lb-spacing));
+    line-height: var(--lb-line-height);
+
+    :where(& > *:first-child) {
+      margin-block-start: calc(0.5 * var(--lb-spacing));
+    }
+  }
 
-  :where(.lb-ai-chat-message-text) {
+  :where(.lb-prose) {
+    color: var(--lb-foreground);
     font-size: 0.875em;
     opacity: 0.75;
   }
 }
 
+.lb-ai-tool {
+  position: relative;
+  border-radius: var(--lb-radius);
+  box-shadow: inset 0 0 0 1px var(--lb-foreground-subtle);
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition-property: box-shadow;
+  }
+
+  &:where(:has(.lb-ai-tool-header:focus-visible)) {
+    z-index: 1;
+
+    &::after {
+      box-shadow:
+        var(--lb-dynamic-background) 0 0 0 2px,
+        var(--lb-accent) 0 0 0 4px;
+    }
+  }
+}
+
+.lb-ai-tool-header {
+  display: flex;
+  gap: calc(0.25 * var(--lb-spacing));
+  align-items: center;
+  inline-size: 100%;
+  block-size: calc($lb-button-size + var(--lb-spacing));
+  padding-inline: calc(0.5 * var(--lb-spacing));
+}
+
+.lb-ai-tool-header-icon-container,
+.lb-ai-tool-icon {
+  display: flex;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  inline-size: $lb-button-size;
+  block-size: $lb-button-size;
+}
+
+.lb-ai-tool-header-icon-container {
+  color: var(--lb-foreground-moderate);
+
+  &:where(:has(.lb-ai-tool-icon)) {
+    margin-inline-end: calc(0.25 * var(--lb-spacing));
+  }
+}
+
+.lb-ai-tool-icon {
+  border-radius: calc(0.75 * var(--lb-radius));
+  background: var(--lb-foreground-subtle);
+  font-size: 0.875em;
+}
+
+.lb-ai-tool-header-title {
+  @include truncate;
+
+  color: var(--lb-foreground-secondary);
+  font-size: 0.9375em;
+
+  &:where(:first-child) {
+    margin-inline-start: calc(0.25 * var(--lb-spacing));
+  }
+}
+
+.lb-ai-tool-header-status {
+  flex: none;
+  margin-inline-start: auto;
+  margin-inline-end: calc(0.25 * var(--lb-spacing));
+  color: var(--lb-foreground-moderate);
+}
+
+.lb-ai-tool:where([data-result="error"]) {
+  box-shadow: inset 0 0 0 1px var(--lb-destructive-moderate);
+
+  &:where(:has(.lb-ai-tool-header:focus-visible)) {
+    &::after {
+      box-shadow:
+        var(--lb-dynamic-background) 0 0 0 2px,
+        var(--lb-destructive) 0 0 0 4px;
+    }
+  }
+
+  :where(.lb-ai-tool-header-status) {
+    color: var(--lb-destructive);
+  }
+}
+
+.lb-ai-tool-content:where(:not(:empty)) {
+  padding: 0 calc(0.75 * var(--lb-spacing)) calc(0.75 * var(--lb-spacing));
+}
+
+.lb-ai-tool-inspector {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.75 * var(--lb-spacing));
+}
+
+.lb-ai-tool-confirmation-footer {
+  display: flex;
+  align-items: center;
+  margin-block-start: calc(0.75 * var(--lb-spacing));
+}
+
+.lb-ai-tool-confirmation-actions {
+  display: flex;
+  gap: calc(0.75 * var(--lb-spacing));
+  justify-content: flex-end;
+  align-items: center;
+  margin-inline-start: auto;
+}
+
 /*************************************
  *            Animations             *
  *************************************/