vue-parley 5.0.0 → 5.2.0

package/dist/chat.css

@@ -50,6 +50,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -75,22 +76,23 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
-      --tw-outline-style: solid;
     }
   }
 }
 
 @layer theme {
   .vue-chat {
+    --color-red-400: oklch(70.4% .191 22.216);
     --color-red-500: oklch(63.7% .237 25.331);
     --color-sky-400: oklch(74.6% .16 232.661);
-    --color-sky-600: oklch(58.8% .158 241.966);
     --color-gray-50: #f0f0f0;
     --color-gray-100: #d1d0d2;
     --color-gray-200: #bababc;
     --color-gray-600: #605f63;
     --color-gray-800: #3a393c;
     --color-gray-900: #2c2c2e;
+    --color-neutral-100: oklch(97% 0 0);
+    --color-neutral-200: oklch(92.2% 0 0);
     --color-neutral-300: oklch(87% 0 0);
     --color-neutral-400: oklch(70.8% 0 0);
     --color-neutral-800: oklch(26.9% 0 0);
@@ -184,6 +186,9 @@
     --text-title-md: 16px;
     --text-title-md--line-height: 32px;
     --text-title-md--font-weight: 700;
+    --text-title-sm: 14px;
+    --text-title-sm--line-height: 28px;
+    --text-title-sm--font-weight: 700;
     --text-label-lg: 16px;
     --text-label-lg--line-height: 32px;
     --text-label-lg--font-weight: 500;
@@ -398,6 +403,100 @@
       var(--color-gray-50),
       var(--color-gray-200));
   }
+
+  .vue-chat {
+    --chat-avatar-light-1: #99f6e4;
+    --chat-avatar-light-1-fg: #134e4a;
+    --chat-avatar-dark-1: #115e59;
+    --chat-avatar-dark-1-fg: #ccfbf1;
+    --chat-avatar-light-2: #bae6fd;
+    --chat-avatar-light-2-fg: #0c4a6e;
+    --chat-avatar-dark-2: #075985;
+    --chat-avatar-dark-2-fg: #e0f2fe;
+    --chat-avatar-light-3: #c7d2fe;
+    --chat-avatar-light-3-fg: #312e81;
+    --chat-avatar-dark-3: #3730a3;
+    --chat-avatar-dark-3-fg: #e0e7ff;
+    --chat-avatar-light-4: #ddd6fe;
+    --chat-avatar-light-4-fg: #4c1d95;
+    --chat-avatar-dark-4: #5b21b6;
+    --chat-avatar-dark-4-fg: #ede9fe;
+    --chat-avatar-light-5: #fbcfe8;
+    --chat-avatar-light-5-fg: #831843;
+    --chat-avatar-dark-5: #9d174d;
+    --chat-avatar-dark-5-fg: #fce7f3;
+    --chat-avatar-light-6: #fed7aa;
+    --chat-avatar-light-6-fg: #7c2d12;
+    --chat-avatar-dark-6: #9a3412;
+    --chat-avatar-dark-6-fg: #ffedd5;
+    --chat-avatar-light-7: #fde68a;
+    --chat-avatar-light-7-fg: #78350f;
+    --chat-avatar-dark-7: #92400e;
+    --chat-avatar-dark-7-fg: #fef3c7;
+    --chat-avatar-light-8: #bbf7d0;
+    --chat-avatar-light-8-fg: #14532d;
+    --chat-avatar-dark-8: #166534;
+    --chat-avatar-dark-8-fg: #dcfce7;
+    --chat-avatar-light-9: #a5f3fc;
+    --chat-avatar-light-9-fg: #164e63;
+    --chat-avatar-dark-9: #155e75;
+    --chat-avatar-dark-9-fg: #cffafe;
+    --chat-avatar-light-10: #e7e5e4;
+    --chat-avatar-light-10-fg: #44403c;
+    --chat-avatar-dark-10: #44403c;
+    --chat-avatar-dark-10-fg: #f5f5f4;
+    --chat-avatar-light-none: #e2e8f0;
+    --chat-avatar-light-none-fg: #475569;
+    --chat-avatar-dark-none: #334155;
+    --chat-avatar-dark-none-fg: #cbd5e1;
+    --color-chat-avatar-1: var(--chat-avatar-light-1);
+    --color-chat-avatar-1-fg: var(--chat-avatar-light-1-fg);
+    --color-chat-avatar-2: var(--chat-avatar-light-2);
+    --color-chat-avatar-2-fg: var(--chat-avatar-light-2-fg);
+    --color-chat-avatar-3: var(--chat-avatar-light-3);
+    --color-chat-avatar-3-fg: var(--chat-avatar-light-3-fg);
+    --color-chat-avatar-4: var(--chat-avatar-light-4);
+    --color-chat-avatar-4-fg: var(--chat-avatar-light-4-fg);
+    --color-chat-avatar-5: var(--chat-avatar-light-5);
+    --color-chat-avatar-5-fg: var(--chat-avatar-light-5-fg);
+    --color-chat-avatar-6: var(--chat-avatar-light-6);
+    --color-chat-avatar-6-fg: var(--chat-avatar-light-6-fg);
+    --color-chat-avatar-7: var(--chat-avatar-light-7);
+    --color-chat-avatar-7-fg: var(--chat-avatar-light-7-fg);
+    --color-chat-avatar-8: var(--chat-avatar-light-8);
+    --color-chat-avatar-8-fg: var(--chat-avatar-light-8-fg);
+    --color-chat-avatar-9: var(--chat-avatar-light-9);
+    --color-chat-avatar-9-fg: var(--chat-avatar-light-9-fg);
+    --color-chat-avatar-10: var(--chat-avatar-light-10);
+    --color-chat-avatar-10-fg: var(--chat-avatar-light-10-fg);
+    --color-chat-avatar-none: var(--chat-avatar-light-none);
+    --color-chat-avatar-none-fg: var(--chat-avatar-light-none-fg);
+  }
+
+  .dark .vue-chat {
+    --color-chat-avatar-1: var(--chat-avatar-dark-1);
+    --color-chat-avatar-1-fg: var(--chat-avatar-dark-1-fg);
+    --color-chat-avatar-2: var(--chat-avatar-dark-2);
+    --color-chat-avatar-2-fg: var(--chat-avatar-dark-2-fg);
+    --color-chat-avatar-3: var(--chat-avatar-dark-3);
+    --color-chat-avatar-3-fg: var(--chat-avatar-dark-3-fg);
+    --color-chat-avatar-4: var(--chat-avatar-dark-4);
+    --color-chat-avatar-4-fg: var(--chat-avatar-dark-4-fg);
+    --color-chat-avatar-5: var(--chat-avatar-dark-5);
+    --color-chat-avatar-5-fg: var(--chat-avatar-dark-5-fg);
+    --color-chat-avatar-6: var(--chat-avatar-dark-6);
+    --color-chat-avatar-6-fg: var(--chat-avatar-dark-6-fg);
+    --color-chat-avatar-7: var(--chat-avatar-dark-7);
+    --color-chat-avatar-7-fg: var(--chat-avatar-dark-7-fg);
+    --color-chat-avatar-8: var(--chat-avatar-dark-8);
+    --color-chat-avatar-8-fg: var(--chat-avatar-dark-8-fg);
+    --color-chat-avatar-9: var(--chat-avatar-dark-9);
+    --color-chat-avatar-9-fg: var(--chat-avatar-dark-9-fg);
+    --color-chat-avatar-10: var(--chat-avatar-dark-10);
+    --color-chat-avatar-10-fg: var(--chat-avatar-dark-10-fg);
+    --color-chat-avatar-none: var(--chat-avatar-dark-none);
+    --color-chat-avatar-none-fg: var(--chat-avatar-dark-none-fg);
+  }
 }
 
 @layer components;
@@ -479,10 +578,6 @@
     inset-inline-start: calc(var(--spacing) * 2);
   }
 
-  :where(.vue-chat, .vue-chat *).start-4 {
-    inset-inline-start: calc(var(--spacing) * 4);
-  }
-
   :where(.vue-chat, .vue-chat *).start-6\! {
     inset-inline-start: calc(var(--spacing) * 6) !important;
   }
@@ -551,10 +646,6 @@
     top: calc(var(--spacing) * 2);
   }
 
-  :where(.vue-chat, .vue-chat *).top-2\.5 {
-    top: calc(var(--spacing) * 2.5);
-  }
-
   :where(.vue-chat, .vue-chat *).top-3 {
     top: calc(var(--spacing) * 3);
   }
@@ -563,8 +654,8 @@
     top: calc(var(--spacing) * 4);
   }
 
-  :where(.vue-chat, .vue-chat *).top-6 {
-    top: calc(var(--spacing) * 6);
+  :where(.vue-chat, .vue-chat *).top-8 {
+    top: calc(var(--spacing) * 8);
   }
 
   :where(.vue-chat, .vue-chat *).right-0 {
@@ -631,6 +722,10 @@
     z-index: 9999;
   }
 
+  :where(.vue-chat, .vue-chat *).col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   :where(.vue-chat, .vue-chat *).container {
     width: 100%;
   }
@@ -820,6 +915,11 @@
     aspect-ratio: var(--aspect-video);
   }
 
+  :where(.vue-chat, .vue-chat *).size-1\/2 {
+    width: 50%;
+    height: 50%;
+  }
+
   :where(.vue-chat, .vue-chat *).size-2 {
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
@@ -1011,6 +1111,10 @@
     height: calc(var(--spacing) * 12) !important;
   }
 
+  :where(.vue-chat, .vue-chat *).h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+
   :where(.vue-chat, .vue-chat *).h-16 {
     height: calc(var(--spacing) * 16);
   }
@@ -1023,6 +1127,10 @@
     height: calc(var(--spacing) * 20);
   }
 
+  :where(.vue-chat, .vue-chat *).h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+
   :where(.vue-chat, .vue-chat *).h-36 {
     height: calc(var(--spacing) * 36);
   }
@@ -1135,6 +1243,10 @@
     min-height: calc(var(--spacing) * 13);
   }
 
+  :where(.vue-chat, .vue-chat *).min-h-14 {
+    min-height: calc(var(--spacing) * 14);
+  }
+
   :where(.vue-chat, .vue-chat *).min-h-19 {
     min-height: calc(var(--spacing) * 19);
   }
@@ -1203,6 +1315,10 @@
     width: calc(var(--spacing) * 36);
   }
 
+  :where(.vue-chat, .vue-chat *).w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+
   :where(.vue-chat, .vue-chat *).w-50 {
     width: calc(var(--spacing) * 50);
   }
@@ -1247,6 +1363,10 @@
     width: 332px;
   }
 
+  :where(.vue-chat, .vue-chat *).w-\[calc\(50\%-var\(--call-gap\)\/2\)\] {
+    width: calc(50% - var(--call-gap) / 2);
+  }
+
   :where(.vue-chat, .vue-chat *).w-auto {
     width: auto;
   }
@@ -1263,6 +1383,10 @@
     width: 100%;
   }
 
+  :where(.vue-chat, .vue-chat *).w-full\! {
+    width: 100% !important;
+  }
+
   :where(.vue-chat, .vue-chat *).w-px {
     width: 1px;
   }
@@ -1287,6 +1411,10 @@
     max-width: 60%;
   }
 
+  :where(.vue-chat, .vue-chat *).max-w-\[calc\(100\%-3\.5rem\)\] {
+    max-width: calc(100% - 3.5rem);
+  }
+
   :where(.vue-chat, .vue-chat *).max-w-\[calc\(100vw-1\.5rem\)\]\! {
     max-width: calc(100vw - 1.5rem) !important;
   }
@@ -1315,6 +1443,10 @@
     min-width: 0 !important;
   }
 
+  :where(.vue-chat, .vue-chat *).min-w-11 {
+    min-width: calc(var(--spacing) * 11);
+  }
+
   :where(.vue-chat, .vue-chat *).min-w-12 {
     min-width: calc(var(--spacing) * 12);
   }
@@ -1496,8 +1628,8 @@
     resize: both;
   }
 
-  :where(.vue-chat, .vue-chat *).grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+  :where(.vue-chat, .vue-chat *).grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   :where(.vue-chat, .vue-chat *).grid-cols-3 {
@@ -1508,6 +1640,10 @@
     grid-template-columns: repeat(8, minmax(0, 1fr));
   }
 
+  :where(.vue-chat, .vue-chat *).grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
   :where(.vue-chat, .vue-chat *).flex-col {
     flex-direction: column;
   }
@@ -1516,6 +1652,10 @@
     flex-direction: column !important;
   }
 
+  :where(.vue-chat, .vue-chat *).flex-row {
+    flex-direction: row;
+  }
+
   :where(.vue-chat, .vue-chat *).flex-row\! {
     flex-direction: row !important;
   }
@@ -1568,6 +1708,10 @@
     justify-content: flex-start !important;
   }
 
+  :where(.vue-chat, .vue-chat *).gap-\(--call-gap\) {
+    gap: var(--call-gap);
+  }
+
   :where(.vue-chat, .vue-chat *).gap-0\.5\! {
     gap: calc(var(--spacing) * .5) !important;
   }
@@ -1580,10 +1724,6 @@
     gap: calc(var(--spacing) * 2);
   }
 
-  :where(.vue-chat, .vue-chat *).gap-3 {
-    gap: calc(var(--spacing) * 3);
-  }
-
   :where(.vue-chat, .vue-chat *).gap-x-0 {
     column-gap: 0;
   }
@@ -1600,6 +1740,10 @@
     column-gap: calc(var(--spacing) * 1.5);
   }
 
+  :where(.vue-chat, .vue-chat *).gap-x-1\.5\! {
+    column-gap: calc(var(--spacing) * 1.5) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -1712,6 +1856,10 @@
     overflow: visible;
   }
 
+  :where(.vue-chat, .vue-chat *).overflow-x-auto {
+    overflow-x: auto;
+  }
+
   :where(.vue-chat, .vue-chat *).overflow-x-hidden {
     overflow-x: hidden;
   }
@@ -1981,6 +2129,36 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).bg-black\/60 {
+    background-color: #0009;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-black\/60 {
+      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-black\/65 {
+    background-color: #000000a6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-black\/65 {
+      background-color: color-mix(in oklab, var(--color-black) 65%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-black\/70 {
+    background-color: #000000b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-black\/70 {
+      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).bg-black\/95\! {
     background-color: #000000f2 !important;
   }
@@ -2189,6 +2367,16 @@
     background-color: var(--color-neutral-900);
   }
 
+  :where(.vue-chat, .vue-chat *).bg-neutral-900\/85 {
+    background-color: #171717d9;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-neutral-900\/85 {
+      background-color: color-mix(in oklab, var(--color-neutral-900) 85%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).bg-on-surface\/0 {
     background-color: #0000;
   }
@@ -2233,10 +2421,6 @@
     }
   }
 
-  :where(.vue-chat, .vue-chat *).bg-sky-600\! {
-    background-color: var(--color-sky-600) !important;
-  }
-
   :where(.vue-chat, .vue-chat *).bg-surface {
     background-color: var(--color-surface);
   }
@@ -2798,6 +2982,12 @@
     font-weight: var(--tw-font-weight, var(--text-title-md--font-weight));
   }
 
+  :where(.vue-chat, .vue-chat *).text-title-sm {
+    font-size: var(--text-title-sm);
+    line-height: var(--tw-leading, var(--text-title-sm--line-height));
+    font-weight: var(--tw-font-weight, var(--text-title-sm--font-weight));
+  }
+
   :where(.vue-chat, .vue-chat *).text-sm\! {
     font-size: var(--text-sm) !important;
     line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
@@ -2984,6 +3174,14 @@
     color: var(--color-error);
   }
 
+  :where(.vue-chat, .vue-chat *).text-neutral-100 {
+    color: var(--color-neutral-100);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-neutral-200 {
+    color: var(--color-neutral-200);
+  }
+
   :where(.vue-chat, .vue-chat *).text-neutral-300 {
     color: var(--color-neutral-300);
   }
@@ -3006,6 +3204,10 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).text-red-400 {
+    color: var(--color-red-400);
+  }
+
   :where(.vue-chat, .vue-chat *).text-sky-400 {
     color: var(--color-sky-400);
   }
@@ -3103,6 +3305,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  :where(.vue-chat, .vue-chat *).shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   :where(.vue-chat, .vue-chat *).shadow-xl\! {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a) !important;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
@@ -3163,6 +3370,21 @@
     --tw-ring-offset-color: var(--color-black);
   }
 
+  :where(.vue-chat, .vue-chat *).outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+
+  :where(.vue-chat, .vue-chat *).outline-white\/25 {
+    outline-color: #ffffff40;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).outline-white\/25 {
+      outline-color: color-mix(in oklab, var(--color-white) 25%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).filter {
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
@@ -3438,6 +3660,24 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).focus-visible\:ring-2:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  :where(.vue-chat, .vue-chat *).focus-visible\:ring-white:focus-visible {
+    --tw-ring-color: var(--color-white);
+  }
+
+  :where(.vue-chat, .vue-chat *).focus-visible\:ring-offset-2:focus-visible {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+
+  :where(.vue-chat, .vue-chat *).focus-visible\:ring-offset-neutral-900:focus-visible {
+    --tw-ring-offset-color: var(--color-neutral-900);
+  }
+
   :where(.vue-chat, .vue-chat *).focus-visible\:outline-2:focus-visible {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
@@ -3455,6 +3695,11 @@
     outline-color: var(--color-chat-primary);
   }
 
+  :where(.vue-chat, .vue-chat *).focus-visible\:outline-none:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
   :where(.vue-chat, .vue-chat *).active\:scale-95:active {
     --tw-scale-x: 95%;
     --tw-scale-y: 95%;
@@ -3481,6 +3726,10 @@
   }
 
   @media (min-width: 40rem) {
+    :where(.vue-chat, .vue-chat *).sm\:h-28 {
+      height: calc(var(--spacing) * 28);
+    }
+
     :where(.vue-chat, .vue-chat *).sm\:w-12\! {
       width: calc(var(--spacing) * 12) !important;
     }
@@ -3497,6 +3746,10 @@
       width: calc(var(--spacing) * 56);
     }
 
+    :where(.vue-chat, .vue-chat *).sm\:w-80\! {
+      width: calc(var(--spacing) * 80) !important;
+    }
+
     :where(.vue-chat, .vue-chat *).sm\:gap-x-3 {
       column-gap: calc(var(--spacing) * 3);
     }
@@ -3507,14 +3760,6 @@
       position: absolute;
     }
 
-    :where(.vue-chat, .vue-chat *).md\:relative {
-      position: relative;
-    }
-
-    :where(.vue-chat, .vue-chat *).md\:static {
-      position: static;
-    }
-
     :where(.vue-chat, .vue-chat *).md\:end-6 {
       inset-inline-end: calc(var(--spacing) * 6);
     }
@@ -3565,6 +3810,10 @@
       height: 0;
     }
 
+    :where(.vue-chat, .vue-chat *).md\:h-16 {
+      height: calc(var(--spacing) * 16);
+    }
+
     :where(.vue-chat, .vue-chat *).md\:h-20 {
       height: calc(var(--spacing) * 20);
     }
@@ -3610,22 +3859,10 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
 
-    :where(.vue-chat, .vue-chat *).md\:grid-cols-\[1fr_auto_1fr\] {
-      grid-template-columns: 1fr auto 1fr;
-    }
-
-    :where(.vue-chat, .vue-chat *).md\:grid-cols-\[repeat\(auto-fit\,minmax\(300px\,1fr\)\)\] {
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    }
-
     :where(.vue-chat, .vue-chat *).md\:items-end {
       align-items: flex-end;
     }
 
-    :where(.vue-chat, .vue-chat *).md\:gap-4 {
-      gap: calc(var(--spacing) * 4);
-    }
-
     :where(.vue-chat, .vue-chat *).md\:gap-x-2 {
       column-gap: calc(var(--spacing) * 2);
     }
@@ -3638,14 +3875,14 @@
       background-color: #0000;
     }
 
-    :where(.vue-chat, .vue-chat *).md\:p-4 {
-      padding: calc(var(--spacing) * 4);
-    }
-
     :where(.vue-chat, .vue-chat *).md\:px-3 {
       padding-inline: calc(var(--spacing) * 3);
     }
 
+    :where(.vue-chat, .vue-chat *).md\:px-4 {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+
     :where(.vue-chat, .vue-chat *).md\:px-5 {
       padding-inline: calc(var(--spacing) * 5);
     }
@@ -3674,6 +3911,10 @@
       padding-bottom: 0;
     }
 
+    :where(.vue-chat, .vue-chat *).md\:pb-4 {
+      padding-bottom: calc(var(--spacing) * 4);
+    }
+
     :where(.vue-chat, .vue-chat *).md\:backdrop-blur-none {
       --tw-backdrop-blur:  ;
       -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -3706,6 +3947,10 @@
     :where(.vue-chat, .vue-chat *).lg\:flex {
       display: flex;
     }
+
+    :where(.vue-chat, .vue-chat *).lg\:w-56 {
+      width: calc(var(--spacing) * 56);
+    }
   }
 
   @container chat-header (min-width: 48rem) {
@@ -3842,6 +4087,11 @@
   }
 
   @media (hover: none) {
+    :where(.vue-chat, .vue-chat *).\[\@media\(hover\:none\)\]\:size-11\! {
+      width: calc(var(--spacing) * 11) !important;
+      height: calc(var(--spacing) * 11) !important;
+    }
+
     :where(.vue-chat, .vue-chat *).\[\@media\(hover\:none\)\]\:opacity-100 {
       opacity: 1;
     }
@@ -4174,6 +4424,12 @@
   initial-value: 0 0 #0000;
 }
 
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
 @property --tw-blur {
   syntax: "*";
   inherits: false
@@ -4301,12 +4557,6 @@
   initial-value: "";
 }
 
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
 @keyframes ping {
   75%, 100% {
     opacity: 0;