vue-parley 4.4.0 → 4.5.0

package/dist/chat.css

@@ -82,16 +82,19 @@
 
 @layer theme {
   .vue-chat {
-    --color-green-400: oklch(79.2% .209 151.711);
-    --color-blue-500: oklch(62.3% .214 259.815);
-    --color-purple-500: oklch(62.7% .265 303.9);
-    --color-pink-500: oklch(65.6% .241 354.308);
+    --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-300: oklch(87% 0 0);
+    --color-neutral-400: oklch(70.8% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
+    --color-neutral-900: oklch(20.5% 0 0);
     --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
@@ -162,12 +165,6 @@
     --background-image-diamond-primary-secondary: radial-gradient(circle at 70% 0%,
     var(--color-secondary-500),
     var(--color-primary-500));
-    --background-image-diamond-error: radial-gradient(circle at 70% 0%,
-    var(--color-error-600),
-    var(--color-error-200));
-    --background-image-diamond-black: radial-gradient(circle at 70% 0%,
-    var(--color-black-700),
-    var(--color-black-400));
     --color-primary: var(--p-primary-color, var(--color-primary-600));
     --color-on-primary: var(--p-primary-contrast-color, #fff);
     --color-secondary: var(--color-secondary-600);
@@ -184,9 +181,6 @@
     --color-surface-variant-3: var(--color-black-50);
     --color-outline: var(--color-gray-100);
     --color-outline-variant: var(--color-gray-50);
-    --text-title-lg: 22px;
-    --text-title-lg--line-height: 44px;
-    --text-title-lg--font-weight: 700;
     --text-title-md: 16px;
     --text-title-md--line-height: 32px;
     --text-title-md--font-weight: 700;
@@ -427,6 +421,18 @@
     visibility: visible;
   }
 
+  :where(.vue-chat, .vue-chat *).sr-only {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
   :where(.vue-chat, .vue-chat *).absolute {
     position: absolute;
   }
@@ -443,6 +449,10 @@
     position: relative;
   }
 
+  :where(.vue-chat, .vue-chat *).static {
+    position: static;
+  }
+
   :where(.vue-chat, .vue-chat *).inset-0 {
     inset: 0;
   }
@@ -451,10 +461,22 @@
     inset-inline: 0;
   }
 
+  :where(.vue-chat, .vue-chat *).inset-x-3 {
+    inset-inline: calc(var(--spacing) * 3);
+  }
+
   :where(.vue-chat, .vue-chat *).start-1\.5 {
     inset-inline-start: calc(var(--spacing) * 1.5);
   }
 
+  :where(.vue-chat, .vue-chat *).start-2 {
+    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;
   }
@@ -479,6 +501,10 @@
     inset-inline-end: calc(var(--spacing) * 3);
   }
 
+  :where(.vue-chat, .vue-chat *).end-5 {
+    inset-inline-end: calc(var(--spacing) * 5);
+  }
+
   :where(.vue-chat, .vue-chat *).end-6\! {
     inset-inline-end: calc(var(--spacing) * 6) !important;
   }
@@ -499,6 +525,10 @@
     top: 0;
   }
 
+  :where(.vue-chat, .vue-chat *).top-1 {
+    top: var(--spacing);
+  }
+
   :where(.vue-chat, .vue-chat *).top-1\.5 {
     top: calc(var(--spacing) * 1.5);
   }
@@ -511,6 +541,14 @@
     top: 50% !important;
   }
 
+  :where(.vue-chat, .vue-chat *).top-2 {
+    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);
   }
@@ -543,6 +581,10 @@
     bottom: calc(var(--spacing) * 3);
   }
 
+  :where(.vue-chat, .vue-chat *).bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+
   :where(.vue-chat, .vue-chat *).left-0 {
     left: 0;
   }
@@ -551,22 +593,10 @@
     left: 50%;
   }
 
-  :where(.vue-chat, .vue-chat *).left-2 {
-    left: calc(var(--spacing) * 2);
-  }
-
-  :where(.vue-chat, .vue-chat *).left-3 {
-    left: calc(var(--spacing) * 3);
-  }
-
   :where(.vue-chat, .vue-chat *).left-6 {
     left: calc(var(--spacing) * 6);
   }
 
-  :where(.vue-chat, .vue-chat *).z-0 {
-    z-index: 0;
-  }
-
   :where(.vue-chat, .vue-chat *).z-10 {
     z-index: 10;
   }
@@ -587,12 +617,12 @@
     z-index: 50;
   }
 
-  :where(.vue-chat, .vue-chat *).z-9999 {
-    z-index: 9999;
+  :where(.vue-chat, .vue-chat *).z-60 {
+    z-index: 60;
   }
 
-  :where(.vue-chat, .vue-chat *).z-\[60\] {
-    z-index: 60;
+  :where(.vue-chat, .vue-chat *).z-9999 {
+    z-index: 9999;
   }
 
   :where(.vue-chat, .vue-chat *).container {
@@ -629,6 +659,10 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).-m-1 {
+    margin: calc(var(--spacing) * -1);
+  }
+
   :where(.vue-chat, .vue-chat *).m-0 {
     margin: 0;
   }
@@ -637,10 +671,6 @@
     margin: 0 !important;
   }
 
-  :where(.vue-chat, .vue-chat *).m-4 {
-    margin: calc(var(--spacing) * 4);
-  }
-
   :where(.vue-chat, .vue-chat *).mx-0\.5 {
     margin-inline: calc(var(--spacing) * .5);
   }
@@ -661,10 +691,6 @@
     margin-inline: calc(var(--spacing) * 4);
   }
 
-  :where(.vue-chat, .vue-chat *).mx-auto {
-    margin-inline: auto;
-  }
-
   :where(.vue-chat, .vue-chat *).my-1\! {
     margin-block: var(--spacing) !important;
   }
@@ -717,10 +743,6 @@
     margin-bottom: calc(var(--spacing) * 1.5);
   }
 
-  :where(.vue-chat, .vue-chat *).mb-2 {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-
   :where(.vue-chat, .vue-chat *).mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -768,6 +790,10 @@
     display: inline-block;
   }
 
+  :where(.vue-chat, .vue-chat *).inline-flex {
+    display: inline-flex;
+  }
+
   :where(.vue-chat, .vue-chat *).aspect-square {
     aspect-ratio: 1;
   }
@@ -776,6 +802,11 @@
     aspect-ratio: var(--aspect-video);
   }
 
+  :where(.vue-chat, .vue-chat *).size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
+
   :where(.vue-chat, .vue-chat *).size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -846,6 +877,11 @@
     height: calc(var(--spacing) * 10) !important;
   }
 
+  :where(.vue-chat, .vue-chat *).size-11 {
+    width: calc(var(--spacing) * 11);
+    height: calc(var(--spacing) * 11);
+  }
+
   :where(.vue-chat, .vue-chat *).size-11\! {
     width: calc(var(--spacing) * 11) !important;
     height: calc(var(--spacing) * 11) !important;
@@ -890,10 +926,6 @@
     height: 0;
   }
 
-  :where(.vue-chat, .vue-chat *).h-1\.5 {
-    height: calc(var(--spacing) * 1.5);
-  }
-
   :where(.vue-chat, .vue-chat *).h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -922,6 +954,10 @@
     height: calc(var(--spacing) * 7);
   }
 
+  :where(.vue-chat, .vue-chat *).h-8\! {
+    height: calc(var(--spacing) * 8) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).h-9\! {
     height: calc(var(--spacing) * 9) !important;
   }
@@ -938,6 +974,10 @@
     height: calc(var(--spacing) * 11) !important;
   }
 
+  :where(.vue-chat, .vue-chat *).h-12\! {
+    height: calc(var(--spacing) * 12) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).h-16 {
     height: calc(var(--spacing) * 16);
   }
@@ -946,12 +986,8 @@
     height: calc(var(--spacing) * 19);
   }
 
-  :where(.vue-chat, .vue-chat *).h-21 {
-    height: calc(var(--spacing) * 21);
-  }
-
-  :where(.vue-chat, .vue-chat *).h-25 {
-    height: calc(var(--spacing) * 25);
+  :where(.vue-chat, .vue-chat *).h-20 {
+    height: calc(var(--spacing) * 20);
   }
 
   :where(.vue-chat, .vue-chat *).h-36 {
@@ -986,10 +1022,6 @@
     height: calc(var(--spacing) * 72);
   }
 
-  :where(.vue-chat, .vue-chat *).h-\[132px\] {
-    height: 132px;
-  }
-
   :where(.vue-chat, .vue-chat *).h-dvh {
     height: 100dvh;
   }
@@ -1002,8 +1034,8 @@
     max-height: 0;
   }
 
-  :where(.vue-chat, .vue-chat *).max-h-40 {
-    max-height: calc(var(--spacing) * 40);
+  :where(.vue-chat, .vue-chat *).max-h-32 {
+    max-height: calc(var(--spacing) * 32);
   }
 
   :where(.vue-chat, .vue-chat *).max-h-60 {
@@ -1014,14 +1046,14 @@
     max-height: calc(var(--spacing) * 72) !important;
   }
 
-  :where(.vue-chat, .vue-chat *).max-h-109 {
-    max-height: calc(var(--spacing) * 109);
-  }
-
   :where(.vue-chat, .vue-chat *).max-h-250 {
     max-height: calc(var(--spacing) * 250);
   }
 
+  :where(.vue-chat, .vue-chat *).max-h-\[50dvh\] {
+    max-height: 50dvh;
+  }
+
   :where(.vue-chat, .vue-chat *).max-h-\[144px\] {
     max-height: 144px;
   }
@@ -1030,6 +1062,10 @@
     max-height: calc(100dvh - 10rem);
   }
 
+  :where(.vue-chat, .vue-chat *).max-h-\[min\(20rem\,45dvh\)\] {
+    max-height: min(20rem, 45dvh);
+  }
+
   :where(.vue-chat, .vue-chat *).max-h-full {
     max-height: 100%;
   }
@@ -1042,6 +1078,10 @@
     min-height: 0;
   }
 
+  :where(.vue-chat, .vue-chat *).min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
+
   :where(.vue-chat, .vue-chat *).min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
@@ -1066,10 +1106,6 @@
     width: calc(var(--spacing) * .5);
   }
 
-  :where(.vue-chat, .vue-chat *).w-1\.5 {
-    width: calc(var(--spacing) * 1.5);
-  }
-
   :where(.vue-chat, .vue-chat *).w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -1078,14 +1114,6 @@
     width: calc(var(--spacing) * 2.5);
   }
 
-  :where(.vue-chat, .vue-chat *).w-3 {
-    width: calc(var(--spacing) * 3);
-  }
-
-  :where(.vue-chat, .vue-chat *).w-4 {
-    width: calc(var(--spacing) * 4);
-  }
-
   :where(.vue-chat, .vue-chat *).w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -1094,20 +1122,28 @@
     width: calc(var(--spacing) * 6);
   }
 
-  :where(.vue-chat, .vue-chat *).w-7 {
-    width: calc(var(--spacing) * 7);
+  :where(.vue-chat, .vue-chat *).w-8\! {
+    width: calc(var(--spacing) * 8) !important;
   }
 
   :where(.vue-chat, .vue-chat *).w-10 {
     width: calc(var(--spacing) * 10);
   }
 
+  :where(.vue-chat, .vue-chat *).w-10\! {
+    width: calc(var(--spacing) * 10) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).w-12\! {
+    width: calc(var(--spacing) * 12) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).w-14 {
     width: calc(var(--spacing) * 14);
   }
 
-  :where(.vue-chat, .vue-chat *).w-16 {
-    width: calc(var(--spacing) * 16);
+  :where(.vue-chat, .vue-chat *).w-16\! {
+    width: calc(var(--spacing) * 16) !important;
   }
 
   :where(.vue-chat, .vue-chat *).w-20 {
@@ -1118,6 +1154,10 @@
     width: calc(var(--spacing) * 24);
   }
 
+  :where(.vue-chat, .vue-chat *).w-36 {
+    width: calc(var(--spacing) * 36);
+  }
+
   :where(.vue-chat, .vue-chat *).w-50 {
     width: calc(var(--spacing) * 50);
   }
@@ -1150,10 +1190,6 @@
     width: calc(var(--spacing) * 85);
   }
 
-  :where(.vue-chat, .vue-chat *).w-\[236px\] {
-    width: 236px;
-  }
-
   :where(.vue-chat, .vue-chat *).w-auto {
     width: auto;
   }
@@ -1190,6 +1226,10 @@
     max-width: calc(var(--spacing) * 80);
   }
 
+  :where(.vue-chat, .vue-chat *).max-w-\[60\%\] {
+    max-width: 60%;
+  }
+
   :where(.vue-chat, .vue-chat *).max-w-dvw {
     max-width: 100dvw;
   }
@@ -1387,10 +1427,6 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  :where(.vue-chat, .vue-chat *).grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
   :where(.vue-chat, .vue-chat *).flex-col {
     flex-direction: column;
   }
@@ -1451,8 +1487,8 @@
     gap: calc(var(--spacing) * .5) !important;
   }
 
-  :where(.vue-chat, .vue-chat *).gap-1 {
-    gap: var(--spacing);
+  :where(.vue-chat, .vue-chat *).gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
   }
 
   :where(.vue-chat, .vue-chat *).gap-2 {
@@ -1463,10 +1499,6 @@
     gap: calc(var(--spacing) * 3);
   }
 
-  :where(.vue-chat, .vue-chat *).gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
-
   :where(.vue-chat, .vue-chat *).gap-x-0 {
     column-gap: 0;
   }
@@ -1503,20 +1535,10 @@
     column-gap: calc(var(--spacing) * 4);
   }
 
-  :where(.vue-chat, .vue-chat *).gap-x-4\.5 {
-    column-gap: calc(var(--spacing) * 4.5);
-  }
-
   :where(.vue-chat, .vue-chat *).gap-x-5 {
     column-gap: calc(var(--spacing) * 5);
   }
 
-  :where(.vue-chat, .vue-chat *):where(.-space-x-1 > :not(:last-child)) {
-    --tw-space-x-reverse: 0;
-    margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
-    margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   :where(.vue-chat, .vue-chat *):where(.-space-x-2 > :not(:last-child)) {
     --tw-space-x-reverse: 0;
     margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
@@ -1617,6 +1639,10 @@
     border-radius: var(--radius-2xl) !important;
   }
 
+  :where(.vue-chat, .vue-chat *).rounded-\[inherit\] {
+    border-radius: inherit;
+  }
+
   :where(.vue-chat, .vue-chat *).rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -1653,6 +1679,11 @@
     border-radius: var(--radius-xl) !important;
   }
 
+  :where(.vue-chat, .vue-chat *).rounded-e-none\! {
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+  }
+
   :where(.vue-chat, .vue-chat *).rounded-tl-md {
     border-top-left-radius: var(--radius-md);
   }
@@ -1749,34 +1780,14 @@
     }
   }
 
-  :where(.vue-chat, .vue-chat *).border-chat-primary, :where(.vue-chat, .vue-chat *).border-chat-primary\/0 {
+  :where(.vue-chat, .vue-chat *).border-chat-primary {
     border-color: var(--color-chat-primary);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).border-chat-primary\/0 {
-      border-color: color-mix(in oklab, var(--color-chat-primary) 0%, transparent);
-    }
-  }
-
-  :where(.vue-chat, .vue-chat *).border-white\/10 {
-    border-color: #ffffff1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).border-white\/10 {
-      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-
   :where(.vue-chat, .vue-chat *).border-s-chat-primary {
     border-inline-start-color: var(--color-chat-primary);
   }
 
-  :where(.vue-chat, .vue-chat *).border-t-\[\#2C2C2E\] {
-    border-top-color: #2c2c2e;
-  }
-
   :where(.vue-chat, .vue-chat *).border-t-chat-outline-variant {
     border-top-color: var(--color-chat-outline-variant);
   }
@@ -1801,14 +1812,6 @@
     background-color: var(--color-black);
   }
 
-  :where(.vue-chat, .vue-chat *).bg-black-500 {
-    background-color: var(--color-black-500);
-  }
-
-  :where(.vue-chat, .vue-chat *).bg-black-600 {
-    background-color: var(--color-black-600);
-  }
-
   :where(.vue-chat, .vue-chat *).bg-black\/30 {
     background-color: #0000004d;
   }
@@ -1953,10 +1956,16 @@
     background-color: var(--color-chat-outline-variant);
   }
 
-  :where(.vue-chat, .vue-chat *).bg-chat-primary {
+  :where(.vue-chat, .vue-chat *).bg-chat-primary, :where(.vue-chat, .vue-chat *).bg-chat-primary\/10 {
     background-color: var(--color-chat-primary);
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-primary\/10 {
+      background-color: color-mix(in oklab, var(--color-chat-primary) 10%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).bg-chat-primary\/10\! {
     background-color: var(--color-chat-primary) !important;
   }
@@ -2015,8 +2024,12 @@
     background-color: var(--color-error);
   }
 
-  :where(.vue-chat, .vue-chat *).bg-green-400 {
-    background-color: var(--color-green-400);
+  :where(.vue-chat, .vue-chat *).bg-neutral-800 {
+    background-color: var(--color-neutral-800);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-neutral-900 {
+    background-color: var(--color-neutral-900);
   }
 
   :where(.vue-chat, .vue-chat *).bg-on-surface\/0 {
@@ -2049,6 +2062,24 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).bg-red-500 {
+    background-color: var(--color-red-500);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-red-500\/60 {
+    background-color: #fb2c3699;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-red-500\/60 {
+      background-color: color-mix(in oklab, var(--color-red-500) 60%, transparent);
+    }
+  }
+
+  :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);
   }
@@ -2093,13 +2124,23 @@
     }
   }
 
-  :where(.vue-chat, .vue-chat *).bg-white\/15 {
-    background-color: #ffffff26;
+  :where(.vue-chat, .vue-chat *).bg-white\/12 {
+    background-color: #ffffff1f;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-white\/12 {
+      background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-white\/30 {
+    background-color: #ffffff4d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).bg-white\/15 {
-      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+    :where(.vue-chat, .vue-chat *).bg-white\/30 {
+      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
     }
   }
 
@@ -2117,42 +2158,24 @@
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
-  :where(.vue-chat, .vue-chat *).bg-gradient-to-br {
-    --tw-gradient-position: to bottom right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
+  :where(.vue-chat, .vue-chat *).bg-linear-to-t {
+    --tw-gradient-position: to top;
   }
 
-  :where(.vue-chat, .vue-chat *).bg-gradient-to-t {
-    --tw-gradient-position: to top in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-
-  :where(.vue-chat, .vue-chat *).bg-diamond-black {
-    background-image: var(--background-image-diamond-black);
+  @supports (background-image: linear-gradient(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-linear-to-t {
+      --tw-gradient-position: to top in oklab;
+    }
   }
 
-  :where(.vue-chat, .vue-chat *).bg-diamond-error {
-    background-image: var(--background-image-diamond-error);
+  :where(.vue-chat, .vue-chat *).bg-linear-to-t {
+    background-image: linear-gradient(var(--tw-gradient-stops));
   }
 
   :where(.vue-chat, .vue-chat *).bg-gradient-primary-secondary {
     background-image: var(--background-image-gradient-primary-secondary);
   }
 
-  :where(.vue-chat, .vue-chat *).from-black\/50 {
-    --tw-gradient-from: #00000080;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).from-black\/50 {
-      --tw-gradient-from: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
-  }
-
-  :where(.vue-chat, .vue-chat *).from-black\/50 {
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-
   :where(.vue-chat, .vue-chat *).from-black\/60 {
     --tw-gradient-from: #0009;
   }
@@ -2181,66 +2204,23 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
-  :where(.vue-chat, .vue-chat *).from-blue-500\/5 {
-    --tw-gradient-from: #3080ff0d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).from-blue-500\/5 {
-      --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 5%, transparent);
-    }
-  }
-
-  :where(.vue-chat, .vue-chat *).from-blue-500\/5 {
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-
-  :where(.vue-chat, .vue-chat *).via-purple-500\/5 {
-    --tw-gradient-via: #ac4bff0d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).via-purple-500\/5 {
-      --tw-gradient-via: color-mix(in oklab, var(--color-purple-500) 5%, transparent);
-    }
-  }
-
-  :where(.vue-chat, .vue-chat *).via-purple-500\/5 {
-    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
-    --tw-gradient-stops: var(--tw-gradient-via-stops);
-  }
-
   :where(.vue-chat, .vue-chat *).via-transparent {
     --tw-gradient-via: transparent;
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
 
-  :where(.vue-chat, .vue-chat *).to-black\/20 {
-    --tw-gradient-to: #0003;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).to-black\/20 {
-      --tw-gradient-to: color-mix(in oklab, var(--color-black) 20%, transparent);
-    }
-  }
-
-  :where(.vue-chat, .vue-chat *).to-black\/20 {
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-
-  :where(.vue-chat, .vue-chat *).to-pink-500\/5 {
-    --tw-gradient-to: #f6339a0d;
+  :where(.vue-chat, .vue-chat *).to-black\/30 {
+    --tw-gradient-to: #0000004d;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).to-pink-500\/5 {
-      --tw-gradient-to: color-mix(in oklab, var(--color-pink-500) 5%, transparent);
+    :where(.vue-chat, .vue-chat *).to-black\/30 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-black) 30%, transparent);
     }
   }
 
-  :where(.vue-chat, .vue-chat *).to-pink-500\/5 {
+  :where(.vue-chat, .vue-chat *).to-black\/30 {
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
@@ -2487,6 +2467,18 @@
     padding-inline-start: var(--spacing);
   }
 
+  :where(.vue-chat, .vue-chat *).ps-1\! {
+    padding-inline-start: var(--spacing) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).ps-3 {
+    padding-inline-start: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).pe-1\.5 {
+    padding-inline-end: calc(var(--spacing) * 1.5);
+  }
+
   :where(.vue-chat, .vue-chat *).pe-11\! {
     padding-inline-end: calc(var(--spacing) * 11) !important;
   }
@@ -2623,12 +2615,6 @@
     font-weight: var(--tw-font-weight, var(--text-label-sm--font-weight));
   }
 
-  :where(.vue-chat, .vue-chat *).text-title-lg {
-    font-size: var(--text-title-lg);
-    line-height: var(--tw-leading, var(--text-title-lg--line-height));
-    font-weight: var(--tw-font-weight, var(--text-title-lg--font-weight));
-  }
-
   :where(.vue-chat, .vue-chat *).text-title-md {
     font-size: var(--text-title-md);
     line-height: var(--tw-leading, var(--text-title-md--line-height));
@@ -2799,6 +2785,14 @@
     color: var(--color-error);
   }
 
+  :where(.vue-chat, .vue-chat *).text-neutral-300 {
+    color: var(--color-neutral-300);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-neutral-400 {
+    color: var(--color-neutral-400);
+  }
+
   :where(.vue-chat, .vue-chat *).text-on-surface {
     color: var(--color-on-surface);
   }
@@ -2813,6 +2807,10 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).text-sky-400 {
+    color: var(--color-sky-400);
+  }
+
   :where(.vue-chat, .vue-chat *).text-white {
     color: var(--color-white);
   }
@@ -2841,16 +2839,6 @@
     }
   }
 
-  :where(.vue-chat, .vue-chat *).text-white\/90 {
-    color: #ffffffe6;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).text-white\/90 {
-      color: color-mix(in oklab, var(--color-white) 90%, transparent);
-    }
-  }
-
   :where(.vue-chat, .vue-chat *).uppercase {
     text-transform: uppercase;
   }
@@ -2884,11 +2872,21 @@
     opacity: 1 !important;
   }
 
+  :where(.vue-chat, .vue-chat *).shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
+    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-floating {
     --tw-shadow: 0 8px 24px 0 var(--tw-shadow-color, #959da533);
     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-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px 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;
@@ -2899,7 +2897,7 @@
     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 *).ring {
+  :where(.vue-chat, .vue-chat *).ring, :where(.vue-chat, .vue-chat *).ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + 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);
   }
@@ -2909,14 +2907,37 @@
     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 *).ring-3 {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + 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 *).ring-chat-background {
     --tw-ring-color: var(--color-chat-background);
   }
 
+  :where(.vue-chat, .vue-chat *).ring-sky-400 {
+    --tw-ring-color: var(--color-sky-400);
+  }
+
+  :where(.vue-chat, .vue-chat *).ring-transparent {
+    --tw-ring-color: transparent;
+  }
+
   :where(.vue-chat, .vue-chat *).ring-white {
     --tw-ring-color: var(--color-white);
   }
 
+  :where(.vue-chat, .vue-chat *).ring-white\/10 {
+    --tw-ring-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).ring-white\/10 {
+      --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).ring-offset-2 {
     --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);
@@ -2990,6 +3011,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  :where(.vue-chat, .vue-chat *).transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   :where(.vue-chat, .vue-chat *).transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3030,11 +3057,6 @@
     transition-duration: .3s;
   }
 
-  :where(.vue-chat, .vue-chat *).duration-500 {
-    --tw-duration: .5s;
-    transition-duration: .5s;
-  }
-
   :where(.vue-chat, .vue-chat *).\!ease-in-out {
     --tw-ease: var(--ease-in-out) !important;
     transition-timing-function: var(--ease-in-out) !important;
@@ -3093,6 +3115,10 @@
     user-select: text;
   }
 
+  :where(.vue-chat, .vue-chat *).\[clip-path\:inset\(0_round_var\(--radius-2xl\)\)\] {
+    clip-path: inset(0 round var(--radius-2xl));
+  }
+
   :where(.vue-chat, .vue-chat *).\[unicode-bidi\:plaintext\] {
     unicode-bidi: plaintext;
   }
@@ -3101,6 +3127,14 @@
     vue-chat: call;
   }
 
+  :where(.vue-chat, .vue-chat *).ring-inset {
+    --tw-ring-inset: inset;
+  }
+
+  :where(.vue-chat, .vue-chat *).group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
+    opacity: 1;
+  }
+
   @media (hover: hover) {
     :where(.vue-chat, .vue-chat *).group-hover\:opacity-100:is(:where(.group):hover *) {
       opacity: 1;
@@ -3123,6 +3157,16 @@
   }
 
   @media (hover: hover) {
+    :where(.vue-chat, .vue-chat *).hover\:bg-black\/70:hover {
+      background-color: #000000b3;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.vue-chat, .vue-chat *).hover\:bg-black\/70:hover {
+        background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+      }
+    }
+
     :where(.vue-chat, .vue-chat *).hover\:bg-chat-on-background\/10\!:hover {
       background-color: #0a0b101a !important;
     }
@@ -3211,14 +3255,30 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    :where(.vue-chat, .vue-chat *).motion-reduce\:animate-none {
+      animation: none;
+    }
+
     :where(.vue-chat, .vue-chat *).motion-reduce\:transition-none {
       transition-property: none;
     }
   }
 
   @media (min-width: 40rem) {
-    :where(.vue-chat, .vue-chat *).sm\:h-20 {
-      height: calc(var(--spacing) * 20);
+    :where(.vue-chat, .vue-chat *).sm\:w-12\! {
+      width: calc(var(--spacing) * 12) !important;
+    }
+
+    :where(.vue-chat, .vue-chat *).sm\:w-14\! {
+      width: calc(var(--spacing) * 14) !important;
+    }
+
+    :where(.vue-chat, .vue-chat *).sm\:w-18\! {
+      width: calc(var(--spacing) * 18) !important;
+    }
+
+    :where(.vue-chat, .vue-chat *).sm\:w-56 {
+      width: calc(var(--spacing) * 56);
     }
 
     :where(.vue-chat, .vue-chat *).sm\:gap-x-3 {
@@ -3231,6 +3291,22 @@
       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);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:bottom-6 {
+      bottom: calc(var(--spacing) * 6);
+    }
+
     :where(.vue-chat, .vue-chat *).md\:block {
       display: block;
     }
@@ -3281,6 +3357,10 @@
       height: auto;
     }
 
+    :where(.vue-chat, .vue-chat *).md\:w-64 {
+      width: calc(var(--spacing) * 64);
+    }
+
     :where(.vue-chat, .vue-chat *).md\:w-80 {
       width: calc(var(--spacing) * 80);
     }
@@ -3301,11 +3381,23 @@
       max-width: calc(100dvw - 9rem);
     }
 
+    :where(.vue-chat, .vue-chat *).md\:min-w-28 {
+      min-width: calc(var(--spacing) * 28);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:flex-none {
+      flex: none;
+    }
+
     :where(.vue-chat, .vue-chat *).md\:-translate-y-full {
       --tw-translate-y: -100%;
       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));
     }
@@ -3314,6 +3406,10 @@
       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);
     }
@@ -3326,6 +3422,10 @@
       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);
     }
@@ -3334,6 +3434,10 @@
       padding-inline: calc(var(--spacing) * 5);
     }
 
+    :where(.vue-chat, .vue-chat *).md\:px-6 {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+
     :where(.vue-chat, .vue-chat *).md\:px-18 {
       padding-inline: calc(var(--spacing) * 18);
     }
@@ -3465,6 +3569,10 @@
     border-left-width: 1px;
   }
 
+  :where(.vue-chat, .vue-chat *).rtl\:text-end:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    text-align: end;
+  }
+
   @media (prefers-color-scheme: dark) {
     :where(.vue-chat, .vue-chat *).dark\:\!bg-surface-variant-2 {
       background-color: var(--color-surface-variant-2) !important;
@@ -3506,6 +3614,12 @@
       background-color: color-mix(in oklab, var(--color-chat-error) 10%, transparent) !important;
     }
   }
+
+  @media (hover: none) {
+    :where(.vue-chat, .vue-chat *).\[\@media\(hover\:none\)\]\:opacity-100 {
+      opacity: 1;
+    }
+  }
 }
 
 :where(.vue-chat, .vue-chat *).glass-effect {