@kushagradhawan/kookie-ui 0.1.50 → 0.1.51

package/components.css

@@ -7457,7 +7457,7 @@
     box-sizing: border-box;
 }
 :where(.rt-BaseMenuContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .rt-BaseMenuViewport {
-    padding-right: var(--space-3);
+    padding-inline-end: var(--space-3);
 }
 .rt-BaseMenuItem {
     display: flex;
@@ -7466,8 +7466,8 @@
     min-height: var(--base-menu-item-height);
     padding-top: var(--base-menu-item-padding-y);
     padding-bottom: var(--base-menu-item-padding-y);
-    padding-left: var(--base-menu-item-padding-left);
-    padding-right: var(--base-menu-item-padding-right);
+    padding-inline-start: var(--base-menu-item-padding-left);
+    padding-inline-end: var(--base-menu-item-padding-right);
     box-sizing: border-box;
     position: relative;
     outline: none;
@@ -7492,18 +7492,18 @@
 .rt-BaseMenuShortcut {
     display: flex;
     align-items: center;
-    margin-left: auto;
-    padding-left: var(--space-4);
-    margin-right: calc(-2px * var(--scaling));
+    margin-inline-start: auto;
+    padding-inline-start: var(--space-4);
+    margin-inline-end: calc(-2px * var(--scaling));
     color: var(--gray-a11);
 }
 .rt-BaseMenuSubTriggerIcon {
     color: var(--gray-12);
-    margin-right: calc(-2px * var(--scaling));
+    margin-inline-end: calc(-2px * var(--scaling));
 }
 .rt-BaseMenuItemIndicator {
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     width: var(--base-menu-item-padding-left);
     display: inline-flex;
     align-items: center;
@@ -7513,8 +7513,8 @@
     height: 1px;
     margin-top: var(--space-2);
     margin-bottom: var(--space-2);
-    margin-left: var(--base-menu-item-padding-left);
-    margin-right: var(--base-menu-item-padding-right);
+    margin-inline-start: var(--base-menu-item-padding-left);
+    margin-inline-end: var(--base-menu-item-padding-right);
     background-color: var(--gray-a6);
 }
 .rt-BaseMenuLabel {
@@ -7523,8 +7523,8 @@
     min-height: var(--base-menu-item-height);
     padding-top: var(--base-menu-item-padding-y);
     padding-bottom: var(--base-menu-item-padding-y);
-    padding-left: var(--base-menu-item-padding-left);
-    padding-right: var(--base-menu-item-padding-right);
+    padding-inline-start: var(--base-menu-item-padding-left);
+    padding-inline-end: var(--base-menu-item-padding-right);
     box-sizing: border-box;
     color: var(--gray-a10);
     -webkit-user-select: none;
@@ -7548,7 +7548,7 @@
     --base-menu-content-padding: var(--space-2);
     --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
     --base-menu-item-padding-right: var(--space-2);
-    --base-menu-item-padding-y: var(--space-2);
+    --base-menu-item-padding-y: var(--space-1);
     --base-menu-item-height: var(--space-5);
     border-radius: var(--radius-3);
 }
@@ -7568,7 +7568,7 @@
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
-    padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
+    padding-inline-start: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
 }
 .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
     width: var(--indicator-icon-size-1);
@@ -7584,7 +7584,7 @@
     --base-menu-content-padding: var(--space-3);
     --base-menu-item-padding-left: var(--space-3);
     --base-menu-item-padding-right: var(--space-3);
-    --base-menu-item-padding-y: var(--space-2);
+    --base-menu-item-padding-y: var(--space-1);
     --base-menu-item-height: var(--space-6);
     border-radius: var(--radius-5);
 }
@@ -7621,7 +7621,7 @@
     --base-menu-item-padding-left: var(--space-3);
     --base-menu-item-padding-right: var(--space-3);
     --base-menu-item-padding-y: var(--space-2);
-    --base-menu-item-height: var(--space-6);
+    --base-menu-item-height: var(--space-7);
     border-radius: var(--radius-6);
 }
 .rt-BaseMenuContent:where(.rt-r-size-3) :where(.rt-BaseMenuItem) {
@@ -7657,7 +7657,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -7677,7 +7677,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
-        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
+        padding-inline-start: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -7693,7 +7693,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -7730,7 +7730,7 @@
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
         --base-menu-item-padding-y: var(--space-2);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-height: var(--space-7);
         border-radius: var(--radius-6);
     }
     .rt-BaseMenuContent:where(.xs\:rt-r-size-3) :where(.rt-BaseMenuItem) {
@@ -7767,7 +7767,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -7787,7 +7787,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
-        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
+        padding-inline-start: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -7803,7 +7803,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -7840,7 +7840,7 @@
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
         --base-menu-item-padding-y: var(--space-2);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-height: var(--space-7);
         border-radius: var(--radius-6);
     }
     .rt-BaseMenuContent:where(.sm\:rt-r-size-3) :where(.rt-BaseMenuItem) {
@@ -7877,7 +7877,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -7897,7 +7897,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
-        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
+        padding-inline-start: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -7913,7 +7913,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -7950,7 +7950,7 @@
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
         --base-menu-item-padding-y: var(--space-2);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-height: var(--space-7);
         border-radius: var(--radius-6);
     }
     .rt-BaseMenuContent:where(.md\:rt-r-size-3) :where(.rt-BaseMenuItem) {
@@ -7987,7 +7987,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -8007,7 +8007,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
-        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
+        padding-inline-start: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -8023,7 +8023,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -8060,7 +8060,7 @@
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
         --base-menu-item-padding-y: var(--space-2);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-height: var(--space-7);
         border-radius: var(--radius-6);
     }
     .rt-BaseMenuContent:where(.lg\:rt-r-size-3) :where(.rt-BaseMenuItem) {
@@ -8097,7 +8097,7 @@
         --base-menu-content-padding: var(--space-2);
         --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
         --base-menu-item-padding-right: var(--space-2);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-5);
         border-radius: var(--radius-3);
     }
@@ -8117,7 +8117,7 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
-        padding-left: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
+        padding-inline-start: calc(var(--base-menu-item-padding-left) + var(--component-gap-2));
     }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuItemIndicatorIcon, .rt-BaseMenuSubTriggerIcon) {
         width: var(--indicator-icon-size-1);
@@ -8133,7 +8133,7 @@
         --base-menu-content-padding: var(--space-3);
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
-        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-padding-y: var(--space-1);
         --base-menu-item-height: var(--space-6);
         border-radius: var(--radius-5);
     }
@@ -8170,7 +8170,7 @@
         --base-menu-item-padding-left: var(--space-3);
         --base-menu-item-padding-right: var(--space-3);
         --base-menu-item-padding-y: var(--space-2);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-height: var(--space-7);
         border-radius: var(--radius-6);
     }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-3) :where(.rt-BaseMenuItem) {
@@ -12154,28 +12154,22 @@
     will-change: transform;
 }
 :where(.rt-SheetContent[data-side='start']) {
-    top: 0 !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    right: auto !important;
+    inset-block: 0 !important;
+    inset-inline-start: 0 !important;
     margin: 0 !important;
     border-start-start-radius: 0;
     border-end-start-radius: 0;
 }
 :where(.rt-SheetContent[data-side='end']) {
-    top: 0 !important;
-    bottom: 0 !important;
-    right: 0 !important;
-    left: auto !important;
+    inset-block: 0 !important;
+    inset-inline-end: 0 !important;
     margin: 0 !important;
     border-start-end-radius: 0;
     border-end-end-radius: 0;
 }
 :where(.rt-SheetContent[data-side='top']) {
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: auto !important;
+    inset-block-start: 0 !important;
+    inset-inline: 0 !important;
     width: auto;
     max-width: none;
     height: var(--height, 75vh);
@@ -12184,10 +12178,8 @@
     border-start-end-radius: 0;
 }
 :where(.rt-SheetContent[data-side='bottom']) {
-    bottom: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    top: auto !important;
+    inset-block-end: 0 !important;
+    inset-inline: 0 !important;
     width: auto;
     max-width: none;
     height: var(--height, 75vh);
@@ -14555,6 +14547,8 @@
             backdrop-filter: none !important;
     box-shadow: none !important;
     border-radius: 0 !important;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
 }
 .rt-SidebarContent .rt-BaseMenuViewport {
     gap: var(--space-5);
@@ -14571,6 +14565,12 @@
     flex-direction: column;
     min-height: 0;
 }
+.rt-SidebarContent :where(.rt-BaseMenuViewport) {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    will-change: transform;
+    contain: paint;
+}
 .rt-SidebarFooter {
     display: flex;
     flex-direction: column;
@@ -14597,7 +14597,7 @@
     min-height: 0;
 }
 :where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) .rt-SidebarMenu {
-    padding-right: var(--space-3);
+    padding-inline-end: var(--space-3);
 }
 .rt-SidebarMenuItem {
     list-style: none;
@@ -14609,8 +14609,8 @@
     min-height: var(--base-menu-item-height);
     padding-top: var(--base-menu-item-padding-y);
     padding-bottom: var(--base-menu-item-padding-y);
-    padding-left: var(--base-menu-item-padding-left);
-    padding-right: var(--base-menu-item-padding-right);
+    padding-inline-start: var(--base-menu-item-padding-left);
+    padding-inline-end: var(--base-menu-item-padding-right);
     box-sizing: border-box;
     position: relative;
     outline: none;
@@ -14618,8 +14618,8 @@
     background: none;
     border: none;
     width: 100%;
-    text-align: left;
-    transition: var(--transition-menu);
+    text-align: start;
+    transition: background-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-small) var(--motion-ease-standard), font-weight var(--motion-duration-small) var(--motion-ease-standard);
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
@@ -14689,19 +14689,19 @@
     }
 }
 .rt-SidebarMenuSubList {
-    padding-left: var(--space-4);
-    border-left: 1px solid var(--gray-a5);
-    margin-left: var(--space-3);
+    padding-inline-start: var(--space-4);
+    border-inline-start: 1px solid var(--gray-a5);
+    margin-inline-start: var(--space-3);
 }
 :where(.rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-    padding-left: var(--space-3);
+    padding-inline-start: var(--space-3);
     padding-top: calc(var(--space-1) * 0.75);
     padding-bottom: calc(var(--space-1) * 0.75);
     min-height: var(--space-5);
     font-size: var(--font-size-1);
 }
 :where(.rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
-    padding-left: var(--space-3);
+    padding-inline-start: var(--space-3);
     padding-top: var(--space-1);
     padding-bottom: var(--space-1);
     min-height: var(--space-6);
@@ -14713,8 +14713,8 @@
     min-height: var(--base-menu-item-height);
     padding-top: var(--base-menu-item-padding-y);
     padding-bottom: var(--base-menu-item-padding-y);
-    padding-left: var(--base-menu-item-padding-left);
-    padding-right: var(--base-menu-item-padding-right);
+    padding-inline-start: var(--base-menu-item-padding-left);
+    padding-inline-end: var(--base-menu-item-padding-right);
     box-sizing: border-box;
     color: var(--gray-a10);
     -webkit-user-select: none;
@@ -14726,23 +14726,23 @@
     margin-top: var(--space-2);
 }
 :where(.rt-SidebarContent.rt-r-size-1) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
-    padding-right: var(--base-menu-item-padding-y);
+    padding-inline-end: var(--base-menu-item-padding-y);
 }
 :where(.rt-SidebarContent.rt-r-size-2) .rt-SidebarMenuButton:where(:has(.rt-SidebarMenuShortcut, .rt-SidebarMenuBadge)) {
-    padding-right: var(--base-menu-item-padding-y);
+    padding-inline-end: var(--base-menu-item-padding-y);
 }
 .rt-SidebarMenuShortcut {
     display: flex;
     align-items: center;
-    margin-left: auto;
-    padding-left: var(--space-4);
+    margin-inline-start: auto;
+    padding-inline-start: var(--space-4);
     color: var(--gray-a11);
 }
 .rt-SidebarMenuBadge {
     display: flex;
     align-items: center;
-    margin-left: auto;
-    padding-left: var(--space-2);
+    margin-inline-start: auto;
+    padding-inline-start: var(--space-2);
 }
 .rt-SidebarContent :where(.rt-BaseMenuItem) {
     margin-top: calc(var(--space-1) / 4);
@@ -14764,8 +14764,8 @@
     line-height: var(--line-height-0) !important;
     padding-top: var(--space-2) !important;
     padding-bottom: var(--space-2) !important;
-    padding-left: var(--space-1) !important;
-    padding-right: var(--space-1) !important;
+    padding-inline-start: var(--space-1) !important;
+    padding-inline-end: var(--space-1) !important;
 }
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) {
     --base-menu-item-padding-left: var(--space-1) !important;
@@ -15740,7 +15740,6 @@
     flex-direction: column;
     width: var(--rail-size, 64px);
     height: 100%;
-    padding: var(--space-2);
     gap: var(--space-2);
     opacity: 0;
     transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
@@ -19344,18 +19343,18 @@
     text-align: start;
     transition: height 150ms ease-out;
 }
-.rt-ChatbarCard :where(.rt-ChatbarGrid) {
+.rt-ChatbarBox :where(.rt-ChatbarGrid) {
     display: flex;
     flex-direction: column;
     gap: var(--space-4);
     width: 100%;
 }
-.rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarGrid) {
+.rt-ChatbarRoot:where([data-state='closed']) :where(.rt-ChatbarGrid) {
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
 }
-.rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarAttachmentsRow) {
+.rt-ChatbarRoot:where([data-state='closed']) :where(.rt-ChatbarAttachmentsRow) {
     flex-basis: 100%;
     order: -1;
 }
@@ -19366,10 +19365,10 @@
 .rt-ChatbarSend {
     transition: opacity 150ms ease-in-out;
 }
-.rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarRow) {
+.rt-ChatbarRoot:where([data-state='closed']) :where(.rt-ChatbarRow) {
     display: none;
 }
-.rt-ChatbarRoot:where([data-state="open"]) :where(.rt-ChatbarRow) {
+.rt-ChatbarRoot:where([data-state='open']) :where(.rt-ChatbarRow) {
     display: block;
     width: 100%;
 }
@@ -19403,15 +19402,482 @@
 }
 .rt-ChatbarAttachment {
     position: relative;
+    background-color: var(--gray-1);
+    border-radius: var(--radius-1);
+}
+.rt-ChatbarAttachment:where([data-kind='file']) {
+    max-width: 200px;
 }
 .rt-ChatbarAttachmentRemove {
     position: absolute;
     top: var(--chatbar-remove-offset);
     right: var(--chatbar-remove-offset);
 }
-.rt-ChatbarCard {
+.rt-ChatbarRoot:where(.rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+    border-radius: var(--radius-1);
+}
+.rt-ChatbarRoot:where(.rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+    border-radius: var(--radius-2);
+}
+.rt-ChatbarRoot:where(.rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+    border-radius: var(--radius-3);
+}
+@media (min-width: 520px) {
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-1);
+    }
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-2);
+    }
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-3);
+    }
+}
+@media (min-width: 768px) {
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-1);
+    }
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-2);
+    }
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-3);
+    }
+}
+@media (min-width: 1024px) {
+    .rt-ChatbarRoot:where(.md\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-1);
+    }
+    .rt-ChatbarRoot:where(.md\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-2);
+    }
+    .rt-ChatbarRoot:where(.md\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-3);
+    }
+}
+@media (min-width: 1280px) {
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-1);
+    }
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-2);
+    }
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-3);
+    }
+}
+@media (min-width: 1640px) {
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-1);
+    }
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-2);
+    }
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-3) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+        border-radius: var(--radius-3);
+    }
+}
+.rt-ChatbarBox {
+    box-sizing: border-box;
     width: 100%;
-    transition: all var(--motion-duration-small) var(--motion-spring-snappy);
+    transition: var(--transition-text-field);
+    isolation: isolate;
+}
+.rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox {
+    -webkit-backdrop-filter: var(--backdrop-filter-components);
+            backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+}
+.rt-ChatbarRoot:where([data-panel-background='solid'], [data-material='solid']) .rt-ChatbarBox {
+    -webkit-backdrop-filter: none;
+            backdrop-filter: none;
+    --backdrop-filter-components: none;
+}
+.rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox {
+    border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+    padding: var(--space-2);
+}
+.rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput {
+    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    font-size: var(--font-size-1);
+    line-height: var(--line-height-1);
+    letter-spacing: var(--letter-spacing-1);
+}
+.rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox {
+    border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    padding: var(--space-3);
+}
+.rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput {
+    --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+    letter-spacing: var(--letter-spacing-2);
+}
+.rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
+    border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    padding: var(--space-4);
+}
+.rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
+    --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+    --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+    font-size: var(--font-size-3);
+    line-height: var(--line-height-3);
+    letter-spacing: var(--letter-spacing-3);
+}
+@media (min-width: 520px) {
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-1) .rt-ChatbarBox {
+        border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        padding: var(--space-2);
+    }
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-1) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-2) .rt-ChatbarBox {
+        border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        padding: var(--space-3);
+    }
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-2) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarBox {
+        border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        padding: var(--space-4);
+    }
+    .rt-ChatbarRoot:where(.xs\:rt-r-size-3) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+    }
+}
+@media (min-width: 768px) {
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-1) .rt-ChatbarBox {
+        border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        padding: var(--space-2);
+    }
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-1) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-2) .rt-ChatbarBox {
+        border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        padding: var(--space-3);
+    }
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-2) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarBox {
+        border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        padding: var(--space-4);
+    }
+    .rt-ChatbarRoot:where(.sm\:rt-r-size-3) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+    }
+}
+@media (min-width: 1024px) {
+    .rt-ChatbarRoot:where(.md\:rt-r-size-1) .rt-ChatbarBox {
+        border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        padding: var(--space-2);
+    }
+    .rt-ChatbarRoot:where(.md\:rt-r-size-1) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-ChatbarRoot:where(.md\:rt-r-size-2) .rt-ChatbarBox {
+        border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        padding: var(--space-3);
+    }
+    .rt-ChatbarRoot:where(.md\:rt-r-size-2) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarBox {
+        border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        padding: var(--space-4);
+    }
+    .rt-ChatbarRoot:where(.md\:rt-r-size-3) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+    }
+}
+@media (min-width: 1280px) {
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-1) .rt-ChatbarBox {
+        border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        padding: var(--space-2);
+    }
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-1) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-2) .rt-ChatbarBox {
+        border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        padding: var(--space-3);
+    }
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-2) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarBox {
+        border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        padding: var(--space-4);
+    }
+    .rt-ChatbarRoot:where(.lg\:rt-r-size-3) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+    }
+}
+@media (min-width: 1640px) {
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-1) .rt-ChatbarBox {
+        border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        padding: var(--space-2);
+    }
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-1) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+    }
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-2) .rt-ChatbarBox {
+        border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        padding: var(--space-3);
+    }
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-2) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+    }
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarBox {
+        border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        padding: var(--space-4);
+    }
+    .rt-ChatbarRoot:where(.xl\:rt-r-size-3) .rt-ChatbarInput {
+        --text-area-padding-y: calc(var(--space-3) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+    }
+}
+.rt-ChatbarRoot:where([data-state='open'].rt-r-size-1) .rt-ChatbarBox {
+    min-height: var(--space-8);
+}
+.rt-ChatbarRoot:where([data-state='open'].rt-r-size-2) .rt-ChatbarBox {
+    min-height: var(--space-9);
+}
+.rt-ChatbarRoot:where([data-state='open'].rt-r-size-3) .rt-ChatbarBox {
+    min-height: 80px;
+}
+@media (min-width: 520px) {
+    .rt-ChatbarRoot:where([data-state='open'].xs\:rt-r-size-1) .rt-ChatbarBox {
+        min-height: var(--space-8);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].xs\:rt-r-size-2) .rt-ChatbarBox {
+        min-height: var(--space-9);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].xs\:rt-r-size-3) .rt-ChatbarBox {
+        min-height: 80px;
+    }
+}
+@media (min-width: 768px) {
+    .rt-ChatbarRoot:where([data-state='open'].sm\:rt-r-size-1) .rt-ChatbarBox {
+        min-height: var(--space-8);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].sm\:rt-r-size-2) .rt-ChatbarBox {
+        min-height: var(--space-9);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].sm\:rt-r-size-3) .rt-ChatbarBox {
+        min-height: 80px;
+    }
+}
+@media (min-width: 1024px) {
+    .rt-ChatbarRoot:where([data-state='open'].md\:rt-r-size-1) .rt-ChatbarBox {
+        min-height: var(--space-8);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].md\:rt-r-size-2) .rt-ChatbarBox {
+        min-height: var(--space-9);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].md\:rt-r-size-3) .rt-ChatbarBox {
+        min-height: 80px;
+    }
+}
+@media (min-width: 1280px) {
+    .rt-ChatbarRoot:where([data-state='open'].lg\:rt-r-size-1) .rt-ChatbarBox {
+        min-height: var(--space-8);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].lg\:rt-r-size-2) .rt-ChatbarBox {
+        min-height: var(--space-9);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].lg\:rt-r-size-3) .rt-ChatbarBox {
+        min-height: 80px;
+    }
+}
+@media (min-width: 1640px) {
+    .rt-ChatbarRoot:where([data-state='open'].xl\:rt-r-size-1) .rt-ChatbarBox {
+        min-height: var(--space-8);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].xl\:rt-r-size-2) .rt-ChatbarBox {
+        min-height: var(--space-9);
+    }
+    .rt-ChatbarRoot:where([data-state='open'].xl\:rt-r-size-3) .rt-ChatbarBox {
+        min-height: 80px;
+    }
+}
+.rt-ChatbarBox:where(.rt-variant-outline) {
+    --text-area-selection-color: var(--focus-a5);
+    --text-area-focus-color: var(--focus-8);
+    --text-area-border-width: 1px;
+    box-shadow: inset 0 0 0 1px var(--accent-6);
+    transition: var(--transition-background-blur);
+}
+.rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-outline) {
+    box-shadow: inset 0 0 0 1px var(--accent-a6);
+}
+@media (hover: hover) {
+    .rt-ChatbarBox:where(.rt-variant-outline):where(:hover:not(:focus-within)) {
+        background-color: var(--accent-2);
+        box-shadow: inset 0 0 0 1px var(--accent-7);
+    }
+    .rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-outline):where(:hover:not(:focus-within)) {
+        background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+        box-shadow: inset 0 0 0 1px var(--accent-a7);
+    }
+}
+.rt-ChatbarBox:where(.rt-variant-outline):where(:focus-within) {
+    box-shadow: inset 0 0 0 1px var(--accent-8);
+}
+.rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-outline):where(:focus-within) {
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
+}
+.rt-ChatbarBox:where(.rt-variant-classic) {
+    --text-area-selection-color: var(--focus-a5);
+    --text-area-focus-color: var(--focus-8);
+    --text-area-border-width: 0px;
+    background-color: var(--color-surface-solid);
+    box-shadow: var(--shadow-2);
+    transition: var(--transition-text-field);
+}
+.rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-classic) {
+    background-color: var(--color-surface-translucent);
+}
+@media (hover: hover) {
+    .rt-ChatbarBox:where(.rt-variant-classic):where(:hover:not(:focus-within)) {
+        background-color: var(--accent-2);
+        box-shadow: var(--shadow-3);
+    }
+}
+.rt-ChatbarBox:where(.rt-variant-classic):where(:focus-within) {
+    box-shadow: var(--shadow-2), 0 0 0 2px var(--focus-8);
+}
+.rt-ChatbarBox:where(.rt-variant-soft) {
+    --text-area-selection-color: var(--accent-a5);
+    --text-area-focus-color: var(--accent-8);
+    --text-area-border-width: 0px;
+    background-color: var(--accent-3);
+    transition: var(--transition-background-blur);
+}
+.rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-soft) {
+    background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+}
+@media (hover: hover) {
+    .rt-ChatbarBox:where(.rt-variant-soft):where(:hover:not(:focus-within)) {
+        background-color: var(--accent-4);
+    }
+    .rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-soft):where(:hover:not(:focus-within)) {
+        background-color: color-mix(in srgb, var(--accent-a4), var(--accent-4) 60%);
+    }
+}
+.rt-ChatbarBox:where(.rt-variant-ghost) {
+    --text-area-selection-color: var(--accent-a5);
+    --text-area-focus-color: var(--accent-8);
+    --text-area-border-width: 0px;
+    background-color: transparent;
+}
+@media (hover: hover) {
+    .rt-ChatbarBox:where(.rt-variant-ghost):where(:hover:not(:focus-within)) {
+        background-color: var(--accent-3);
+    }
+    .rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-ghost):where(:hover:not(:focus-within)) {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+    }
+}
+.rt-ChatbarBox:where(.rt-variant-ghost):where(:focus-within) {
+    background-color: var(--accent-2);
+}
+.rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-ghost):where(:focus-within) {
+    background-color: var(--accent-a2);
+}
+.rt-ChatbarBox:where(.rt-variant-surface) {
+    --text-area-selection-color: var(--accent-a5);
+    --text-area-focus-color: var(--accent-8);
+    --text-area-border-width: 1px;
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 1px var(--accent-6);
+    transition: var(--transition-background-blur);
+}
+.rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-surface) {
+    background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
+    box-shadow: inset 0 0 0 1px var(--accent-a6);
+}
+@media (hover: hover) {
+    .rt-ChatbarBox:where(.rt-variant-surface):where(:hover:not(:focus-within)) {
+        background-color: var(--accent-3);
+        box-shadow: inset 0 0 0 1px var(--accent-7);
+    }
+    .rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-surface):where(:hover:not(:focus-within)) {
+        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
+        box-shadow: inset 0 0 0 1px var(--accent-a7);
+    }
+}
+.rt-ChatbarBox:where(.rt-variant-surface):where(:focus-within) {
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 var(--text-area-border-width) var(--accent-8);
+}
+.rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox:where(.rt-variant-surface):where(:focus-within) {
+    background-color: var(--accent-a2);
+    box-shadow: inset 0 0 0 var(--text-area-border-width) var(--accent-a8);
 }
 .rt-ChatbarDropOverlay {
     position: absolute;
@@ -19462,44 +19928,44 @@
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     --chatbar-attachment-thumb: var(--space-8);
-    --chatbar-remove-offset: var(--space-1);
-    --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+    --chatbar-remove-offset: calc(var(--space-1) * 0.5);
+    --chatbar-attachments-radius: var(--radius-1);
 }
 .rt-ChatbarRoot:where(.rt-r-size-2) {
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     --chatbar-attachment-thumb: var(--space-9);
-    --chatbar-remove-offset: var(--space-2);
-    --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    --chatbar-remove-offset: var(--space-1);
+    --chatbar-attachments-radius: var(--radius-2);
 }
 .rt-ChatbarRoot:where(.rt-r-size-3) {
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     --chatbar-attachment-thumb: var(--space-9);
-    --chatbar-remove-offset: var(--space-3);
-    --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    --chatbar-remove-offset: var(--space-2);
+    --chatbar-attachments-radius: var(--radius-3);
 }
 @media (min-width: 520px) {
     .rt-ChatbarRoot:where(.xs\:rt-r-size-1) {
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         --chatbar-attachment-thumb: var(--space-8);
-        --chatbar-remove-offset: var(--space-1);
-        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        --chatbar-remove-offset: calc(var(--space-1) * 0.5);
+        --chatbar-attachments-radius: var(--radius-1);
     }
     .rt-ChatbarRoot:where(.xs\:rt-r-size-2) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-2);
-        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: var(--radius-2);
     }
     .rt-ChatbarRoot:where(.xs\:rt-r-size-3) {
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-3);
-        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: var(--radius-3);
     }
 }
 @media (min-width: 768px) {
@@ -19507,22 +19973,22 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         --chatbar-attachment-thumb: var(--space-8);
-        --chatbar-remove-offset: var(--space-1);
-        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        --chatbar-remove-offset: calc(var(--space-1) * 0.5);
+        --chatbar-attachments-radius: var(--radius-1);
     }
     .rt-ChatbarRoot:where(.sm\:rt-r-size-2) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-2);
-        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: var(--radius-2);
     }
     .rt-ChatbarRoot:where(.sm\:rt-r-size-3) {
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-3);
-        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: var(--radius-3);
     }
 }
 @media (min-width: 1024px) {
@@ -19530,22 +19996,22 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         --chatbar-attachment-thumb: var(--space-8);
-        --chatbar-remove-offset: var(--space-1);
-        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        --chatbar-remove-offset: calc(var(--space-1) * 0.5);
+        --chatbar-attachments-radius: var(--radius-1);
     }
     .rt-ChatbarRoot:where(.md\:rt-r-size-2) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-2);
-        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: var(--radius-2);
     }
     .rt-ChatbarRoot:where(.md\:rt-r-size-3) {
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-3);
-        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: var(--radius-3);
     }
 }
 @media (min-width: 1280px) {
@@ -19553,22 +20019,22 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         --chatbar-attachment-thumb: var(--space-8);
-        --chatbar-remove-offset: var(--space-1);
-        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        --chatbar-remove-offset: calc(var(--space-1) * 0.5);
+        --chatbar-attachments-radius: var(--radius-1);
     }
     .rt-ChatbarRoot:where(.lg\:rt-r-size-2) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-2);
-        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: var(--radius-2);
     }
     .rt-ChatbarRoot:where(.lg\:rt-r-size-3) {
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-3);
-        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: var(--radius-3);
     }
 }
 @media (min-width: 1640px) {
@@ -19576,22 +20042,22 @@
         font-size: var(--font-size-1);
         line-height: var(--line-height-1);
         --chatbar-attachment-thumb: var(--space-8);
-        --chatbar-remove-offset: var(--space-1);
-        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        --chatbar-remove-offset: calc(var(--space-1) * 0.5);
+        --chatbar-attachments-radius: var(--radius-1);
     }
     .rt-ChatbarRoot:where(.xl\:rt-r-size-2) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-2);
-        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        --chatbar-remove-offset: var(--space-1);
+        --chatbar-attachments-radius: var(--radius-2);
     }
     .rt-ChatbarRoot:where(.xl\:rt-r-size-3) {
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
         --chatbar-attachment-thumb: var(--space-9);
-        --chatbar-remove-offset: var(--space-3);
-        --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+        --chatbar-remove-offset: var(--space-2);
+        --chatbar-attachments-radius: var(--radius-3);
     }
 }
 .radix-themes:where([data-is-root-theme='true']) {