@kushagradhawan/kookie-ui 0.1.49 → 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: calc(var(--space-1) * 0.75);
+    --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);
@@ -7620,8 +7620,8 @@
     --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-1);
-    --base-menu-item-height: var(--space-6);
+    --base-menu-item-padding-y: var(--space-2);
+    --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: calc(var(--space-1) * 0.75);
+        --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);
@@ -7729,8 +7729,8 @@
         --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-1);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-padding-y: var(--space-2);
+        --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: calc(var(--space-1) * 0.75);
+        --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);
@@ -7839,8 +7839,8 @@
         --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-1);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-padding-y: var(--space-2);
+        --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: calc(var(--space-1) * 0.75);
+        --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);
@@ -7949,8 +7949,8 @@
         --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-1);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-padding-y: var(--space-2);
+        --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: calc(var(--space-1) * 0.75);
+        --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);
@@ -8059,8 +8059,8 @@
         --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-1);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-padding-y: var(--space-2);
+        --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: calc(var(--space-1) * 0.75);
+        --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);
@@ -8169,8 +8169,8 @@
         --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-1);
-        --base-menu-item-height: var(--space-6);
+        --base-menu-item-padding-y: var(--space-2);
+        --base-menu-item-height: var(--space-7);
         border-radius: var(--radius-6);
     }
     .rt-BaseMenuContent:where(.xl\:rt-r-size-3) :where(.rt-BaseMenuItem) {
@@ -8209,8 +8209,7 @@
     color: var(--gray-a8);
     cursor: default;
 }
-.rt-BaseMenuItem
-  :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
     color: var(--gray-a10);
 }
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]) :where(.rt-BaseMenuShortcut), .rt-BaseMenuSubTrigger:where([data-state='open']) :where(.rt-BaseMenuShortcut) {
@@ -12155,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);
@@ -12185,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);
@@ -14556,6 +14547,11 @@
             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);
 }
 .rt-SidebarContent :where(.rt-ScrollAreaRoot) {
     flex: 1;
@@ -14569,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;
@@ -14589,14 +14591,13 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding-bottom: var(--base-menu-content-padding);
     box-sizing: border-box;
     list-style: none;
     margin: 0;
     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;
@@ -14608,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;
@@ -14617,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;
@@ -14688,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);
@@ -14712,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;
@@ -14725,71 +14726,221 @@
     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);
     margin-bottom: calc(var(--space-1) / 4);
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarContent),
-.rt-ShellSidebarRail :where(.rt-SidebarContent),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarContent) {
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent) {
     padding: var(--space-2);
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuButton),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuButton),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuButton) {
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuViewport) {
+    padding: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+    justify-content: center !important;
+    align-items: center !important;
+    flex-direction: column !important;
+    gap: var(--space-1) !important;
+    text-align: center !important;
+    font-size: var(--font-size-0) !important;
+    line-height: var(--line-height-0) !important;
+    padding-top: var(--space-2) !important;
+    padding-bottom: var(--space-2) !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;
+    --base-menu-item-padding-right: var(--space-1) !important;
+    --base-menu-item-padding-y: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: var(--space-1);
-    padding: var(--space-2) var(--space-1);
-}
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuBadge),
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuShortcut),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuBadge),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuShortcut),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuBadge),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuShortcut) {
-    display: none;
+    text-align: center;
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    min-width: 0;
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarGroupLabel),
-.rt-ShellSidebarRail :where(.rt-SidebarGroupLabel),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarGroupLabel) {
-    display: block;
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-3);
+    height: var(--content-icon-size-3);
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+    --base-menu-item-padding-right: var(--space-1) !important;
+    --base-menu-item-padding-y: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--space-1);
     text-align: center;
     font-size: var(--font-size-0);
     line-height: var(--line-height-0);
-    color: var(--gray-a9);
-    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    min-width: 0;
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubTriggerIcon),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuSubTriggerIcon),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubTriggerIcon) {
-    display: none;
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-4);
+    height: var(--content-icon-size-4);
 }
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubList),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuSubList),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubList) {
-    padding-left: 0;
-    border-left: none;
-    margin-left: 0;
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+    --base-menu-item-padding-right: var(--space-1) !important;
+    --base-menu-item-padding-y: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3):where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3):where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--space-1);
+    text-align: center;
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    min-width: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-5);
+    height: var(--content-icon-size-5);
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton > *) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    min-width: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubTrigger > *) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton > * > svg) {
+    flex-shrink: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent .rt-SidebarMenuButton > *) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    min-width: 0;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton) :where(svg) {
+    display: block;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton .rt-SidebarMenuLabel) {
+    display: block;
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    color: var(--accent-11);
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuBadge),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuShortcut),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-Badge),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-Kbd) {
+    display: none !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarGroupLabel) {
+    display: none !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubTriggerIcon),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubTriggerIcon) {
+    display: none !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubList),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubList) {
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+    border-left: 0 !important;
+    border-top: 0 !important;
+    border-bottom: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubList::before),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubList::before) {
+    content: none !important;
+    display: none !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent) {
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+    border-left: 0 !important;
+    border-top: 1px solid var(--gray-a6) !important;
+    border-bottom: 1px solid var(--gray-a6) !important;
+    margin-top: var(--space-2) !important;
+    margin-bottom: var(--space-2) !important;
+}
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent .rt-SidebarMenuButton) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
 }
 :where([data-panel-background='translucent']) .rt-SidebarContainer {
     --sidebar-border-color: var(--gray-a6);
@@ -14995,7 +15146,7 @@
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
     border-radius: var(--radius-1);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-regular);
 }
 .rt-SidebarContent:where(.rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
     width: var(--content-icon-size-1);
@@ -15014,7 +15165,7 @@
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
     border-radius: var(--radius-2);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-regular);
 }
 .rt-SidebarContent:where(.rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
     width: var(--content-icon-size-2);
@@ -15056,7 +15207,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.xs\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15075,7 +15226,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.xs\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15118,7 +15269,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.sm\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15137,7 +15288,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.sm\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15180,7 +15331,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.md\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15199,7 +15350,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.md\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15242,7 +15393,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.lg\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15261,7 +15412,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.lg\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15304,7 +15455,7 @@
         line-height: var(--line-height-1);
         letter-spacing: var(--letter-spacing-1);
         border-radius: var(--radius-1);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.xl\:rt-r-size-1) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-1);
@@ -15323,7 +15474,7 @@
         line-height: var(--line-height-2);
         letter-spacing: var(--letter-spacing-2);
         border-radius: var(--radius-2);
-        font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-regular);
     }
     .rt-SidebarContent:where(.xl\:rt-r-size-2) :where(.rt-SidebarMenuButton) :where(svg) {
         width: var(--content-icon-size-2);
@@ -15386,6 +15537,7 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
+    font-weight: var(--font-weight-medium);
 }
 .rt-SidebarHeader:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text) {
     color: inherit !important;
@@ -15431,6 +15583,7 @@
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-12);
     color: var(--accent-1);
+    font-weight: var(--font-weight-medium);
 }
 .rt-SidebarHeader:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarContent:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text), .rt-SidebarFooter:where(.rt-menu-variant-solid):where(.rt-high-contrast) :where(.rt-SidebarMenuButton[data-active]) :where(.rt-Text) {
     color: inherit !important;
@@ -15506,6 +15659,7 @@
 .rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]), .rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-3);
     color: var(--accent-12);
+    font-weight: var(--font-weight-medium);
 }
 :where([data-panel-background='translucent']) :is(.rt-SidebarHeader:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where([data-panel-background='translucent']) :is(.rt-SidebarContent:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])), :where([data-panel-background='translucent']) :is(.rt-SidebarFooter:where(.rt-menu-variant-soft) :where(.rt-SidebarMenuButton[data-active])) {
     background-color: var(--accent-a3);
@@ -15576,6 +15730,7 @@
 }
 .rt-ShellRail[data-mode='collapsed'] {
     width: 0px;
+    transition-delay: var(--motion-duration-small);
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
@@ -15585,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);
@@ -15611,6 +15765,7 @@
 }
 .rt-ShellPanel:not([data-visible]) {
     width: 0px;
+    transition-delay: var(--motion-duration-small);
     position: absolute;
     inset-block: 0;
     inset-inline-start: var(--peek-rail-width, var(--rail-size, 64px));
@@ -15651,6 +15806,7 @@
 }
 .rt-ShellSidebar[data-mode='collapsed'] {
     width: 0px;
+    transition-delay: var(--motion-duration-small);
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
@@ -15670,6 +15826,17 @@
 .rt-ShellSidebarContent[data-visible] {
     opacity: 1;
 }
+.rt-ShellSidebarContent[data-phase='hiding'] {
+    opacity: 0;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellSidebarContent[data-phase='resizing'] {
+    opacity: 0;
+}
+.rt-ShellSidebarContent[data-phase='showing'] {
+    opacity: 1;
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
 .rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
     opacity: 0;
     transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
@@ -15710,6 +15877,7 @@
 }
 .rt-ShellInspector[data-mode='collapsed'] {
     width: 0px;
+    transition-delay: var(--motion-duration-small);
     position: absolute;
     inset-block: 0;
     inset-inline-end: 0;
@@ -15747,6 +15915,7 @@
     position: absolute;
     inset-inline: 0;
     inset-block-end: 0;
+    transition-delay: var(--motion-duration-small);
 }
 .rt-ShellBottomContent {
     display: flex;
@@ -15917,6 +16086,7 @@
 .rt-ShellInspector[data-peek] .rt-ShellInspectorContent,
 .rt-ShellBottom[data-peek] .rt-ShellBottomContent {
     opacity: 1;
+    transition-delay: var(--motion-duration-small);
 }
 .rt-ShellRail[data-peek] {
     inset-block: 0;
@@ -19173,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;
 }
@@ -19195,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%;
 }
@@ -19232,149 +19402,616 @@
 }
 .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 {
-    width: 100%;
-    transition: all var(--motion-duration-small) var(--motion-spring-snappy);
-}
-.rt-ChatbarDropOverlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--gray-a3);
-    border-radius: inherit;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    animation: rt-fade-in var(--motion-duration-small) var(--motion-spring-snappy);
-}
-.rt-ChatbarDropContent {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-2);
-    color: var(--accent-11);
-}
-.rt-ChatbarDropIcon {
-    width: var(--space-6);
-    height: var(--space-6);
-}
-.rt-ChatbarInlineStart,
-.rt-ChatbarInlineEnd {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-}
-.rt-ChatbarRowStart {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    flex-shrink: 0;
-}
-.rt-ChatbarRowEnd {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    flex-shrink: 0;
-    margin-left: auto;
-}
-.rt-ChatbarRoot:where(.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)));
+.rt-ChatbarRoot:where(.rt-r-size-1) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+    border-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)));
+.rt-ChatbarRoot:where(.rt-r-size-2) :where(.rt-ChatbarAttachment, .rt-ChatbarAttachmentPreview) {
+    border-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)));
+.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) {
-        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)));
+    .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) {
-        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)));
+    .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) {
-        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)));
+    .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) {
-        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)));
+    .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) {
-        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)));
+    .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) {
-        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)));
+    .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) {
+    .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: 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;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gray-a3);
+    border-radius: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    animation: rt-fade-in var(--motion-duration-small) var(--motion-spring-snappy);
+}
+.rt-ChatbarDropContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--accent-11);
+}
+.rt-ChatbarDropIcon {
+    width: var(--space-6);
+    height: var(--space-6);
+}
+.rt-ChatbarInlineStart,
+.rt-ChatbarInlineEnd {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+.rt-ChatbarRowStart {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+}
+.rt-ChatbarRowEnd {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-shrink: 0;
+    margin-left: auto;
+}
+.rt-ChatbarRoot:where(.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: 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-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-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: 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-1);
-        --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+        --chatbar-attachments-radius: var(--radius-2);
     }
-    .rt-ChatbarRoot:where(.md\:rt-r-size-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-2);
+        --chatbar-attachments-radius: var(--radius-3);
+    }
+}
+@media (min-width: 768px) {
+    .rt-ChatbarRoot:where(.sm\: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: 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-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-2);
-        --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+        --chatbar-attachments-radius: var(--radius-3);
+    }
+}
+@media (min-width: 1024px) {
+    .rt-ChatbarRoot:where(.md\: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: 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-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) {
@@ -19382,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) {
@@ -19405,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']) {