vue-parley 4.9.2 → 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%;
   }
@@ -709,6 +804,10 @@
     margin-inline-start: var(--spacing);
   }
 
+  :where(.vue-chat, .vue-chat *).ms-1\.5 {
+    margin-inline-start: calc(var(--spacing) * 1.5);
+  }
+
   :where(.vue-chat, .vue-chat *).ms-px {
     margin-inline-start: 1px;
   }
@@ -745,6 +844,10 @@
     margin-bottom: calc(var(--spacing) * .5);
   }
 
+  :where(.vue-chat, .vue-chat *).mb-1 {
+    margin-bottom: var(--spacing);
+  }
+
   :where(.vue-chat, .vue-chat *).mb-1\.5 {
     margin-bottom: calc(var(--spacing) * 1.5);
   }
@@ -800,6 +903,10 @@
     display: inline-flex;
   }
 
+  :where(.vue-chat, .vue-chat *).table {
+    display: table;
+  }
+
   :where(.vue-chat, .vue-chat *).aspect-square {
     aspect-ratio: 1;
   }
@@ -808,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);
@@ -863,11 +975,21 @@
     height: calc(var(--spacing) * 7);
   }
 
+  :where(.vue-chat, .vue-chat *).size-7\! {
+    width: calc(var(--spacing) * 7) !important;
+    height: calc(var(--spacing) * 7) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
   }
 
+  :where(.vue-chat, .vue-chat *).size-8\! {
+    width: calc(var(--spacing) * 8) !important;
+    height: calc(var(--spacing) * 8) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
@@ -989,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);
   }
@@ -1001,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);
   }
@@ -1025,6 +1155,10 @@
     height: calc(var(--spacing) * 57.5);
   }
 
+  :where(.vue-chat, .vue-chat *).h-60 {
+    height: calc(var(--spacing) * 60);
+  }
+
   :where(.vue-chat, .vue-chat *).h-60\.5 {
     height: calc(var(--spacing) * 60.5);
   }
@@ -1033,6 +1167,10 @@
     height: calc(var(--spacing) * 72);
   }
 
+  :where(.vue-chat, .vue-chat *).h-\[407px\] {
+    height: 407px;
+  }
+
   :where(.vue-chat, .vue-chat *).h-dvh {
     height: 100dvh;
   }
@@ -1105,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);
   }
@@ -1173,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);
   }
@@ -1213,6 +1359,14 @@
     width: calc(var(--spacing) * 85);
   }
 
+  :where(.vue-chat, .vue-chat *).w-\[332px\] {
+    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;
   }
@@ -1229,6 +1383,10 @@
     width: 100%;
   }
 
+  :where(.vue-chat, .vue-chat *).w-full\! {
+    width: 100% !important;
+  }
+
   :where(.vue-chat, .vue-chat *).w-px {
     width: 1px;
   }
@@ -1253,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;
   }
@@ -1277,6 +1439,14 @@
     min-width: 0;
   }
 
+  :where(.vue-chat, .vue-chat *).min-w-0\! {
+    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);
   }
@@ -1309,6 +1479,10 @@
     flex-shrink: 0;
   }
 
+  :where(.vue-chat, .vue-chat *).grow {
+    flex-grow: 1;
+  }
+
   :where(.vue-chat, .vue-chat *).grow-0\! {
     flex-grow: 0 !important;
   }
@@ -1454,14 +1628,22 @@
     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 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  :where(.vue-chat, .vue-chat *).grid-cols-8 {
+    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;
   }
@@ -1470,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;
   }
@@ -1522,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;
   }
@@ -1534,14 +1724,14 @@
     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;
   }
 
+  :where(.vue-chat, .vue-chat *).gap-x-0\.5 {
+    column-gap: calc(var(--spacing) * .5);
+  }
+
   :where(.vue-chat, .vue-chat *).gap-x-1 {
     column-gap: var(--spacing);
   }
@@ -1550,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);
   }
@@ -1644,6 +1838,10 @@
     border-color: var(--color-chat-outline-variant);
   }
 
+  :where(.vue-chat, .vue-chat *).justify-self-center {
+    justify-self: center;
+  }
+
   :where(.vue-chat, .vue-chat *).truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1658,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;
   }
@@ -1670,6 +1872,10 @@
     overflow-y: auto !important;
   }
 
+  :where(.vue-chat, .vue-chat *).overscroll-contain {
+    overscroll-behavior: contain;
+  }
+
   :where(.vue-chat, .vue-chat *).\!rounded {
     border-radius: .25rem !important;
   }
@@ -1702,6 +1908,10 @@
     border-radius: var(--radius-lg);
   }
 
+  :where(.vue-chat, .vue-chat *).rounded-lg\! {
+    border-radius: var(--radius-lg) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).rounded-md {
     border-radius: var(--radius-md);
   }
@@ -1909,6 +2119,46 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).bg-black\/55\! {
+    background-color: #0000008c !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-black\/55\! {
+      background-color: color-mix(in oklab, var(--color-black) 55%, transparent) !important;
+    }
+  }
+
+  :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;
   }
@@ -2117,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;
   }
@@ -2161,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);
   }
@@ -2344,10 +2600,6 @@
     fill: var(--color-chat-surface-3);
   }
 
-  :where(.vue-chat, .vue-chat *).fill-current {
-    fill: currentColor;
-  }
-
   :where(.vue-chat, .vue-chat *).fill-error {
     fill: var(--color-error);
   }
@@ -2444,6 +2696,10 @@
     padding: calc(var(--spacing) * 4);
   }
 
+  :where(.vue-chat, .vue-chat *).p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+
   :where(.vue-chat, .vue-chat *).px-1 {
     padding-inline: var(--spacing);
   }
@@ -2572,6 +2828,10 @@
     padding-inline-end: calc(var(--spacing) * 1.5);
   }
 
+  :where(.vue-chat, .vue-chat *).pe-9\! {
+    padding-inline-end: calc(var(--spacing) * 9) !important;
+  }
+
   :where(.vue-chat, .vue-chat *).pe-11\! {
     padding-inline-end: calc(var(--spacing) * 11) !important;
   }
@@ -2588,6 +2848,10 @@
     padding-top: var(--spacing);
   }
 
+  :where(.vue-chat, .vue-chat *).pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+
   :where(.vue-chat, .vue-chat *).pt-2\.5 {
     padding-top: calc(var(--spacing) * 2.5);
   }
@@ -2628,6 +2892,10 @@
     padding-bottom: var(--spacing);
   }
 
+  :where(.vue-chat, .vue-chat *).pb-1\.5 {
+    padding-bottom: calc(var(--spacing) * 1.5);
+  }
+
   :where(.vue-chat, .vue-chat *).pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2714,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;
@@ -2724,6 +2998,10 @@
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
 
+  :where(.vue-chat, .vue-chat *).text-\[1\.6rem\]\! {
+    font-size: 1.6rem !important;
+  }
+
   :where(.vue-chat, .vue-chat *).text-\[7px\] {
     font-size: 7px;
   }
@@ -2765,6 +3043,11 @@
     line-height: 1;
   }
 
+  :where(.vue-chat, .vue-chat *).leading-none\! {
+    --tw-leading: 1 !important;
+    line-height: 1 !important;
+  }
+
   :where(.vue-chat, .vue-chat *).leading-normal\! {
     --tw-leading: var(--leading-normal) !important;
     line-height: var(--leading-normal) !important;
@@ -2891,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);
   }
@@ -2913,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);
   }
@@ -2949,6 +3244,10 @@
     text-transform: capitalize;
   }
 
+  :where(.vue-chat, .vue-chat *).lowercase {
+    text-transform: lowercase;
+  }
+
   :where(.vue-chat, .vue-chat *).uppercase {
     text-transform: uppercase;
   }
@@ -2986,6 +3285,11 @@
     opacity: 1 !important;
   }
 
+  :where(.vue-chat, .vue-chat *).shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px 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-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);
@@ -3001,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;
@@ -3061,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, );
   }
@@ -3271,13 +3595,13 @@
   }
 
   @media (hover: hover) {
-    :where(.vue-chat, .vue-chat *).hover\:bg-black\/70:hover {
-      background-color: #000000b3;
+    :where(.vue-chat, .vue-chat *).hover\:bg-black\/70\!:hover {
+      background-color: #000000b3 !important;
     }
 
     @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-black\/70\!:hover {
+        background-color: color-mix(in oklab, var(--color-black) 70%, transparent) !important;
       }
     }
 
@@ -3336,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;
@@ -3353,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%;
@@ -3379,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;
     }
@@ -3395,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);
     }
@@ -3405,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);
     }
@@ -3463,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);
     }
@@ -3508,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);
     }
@@ -3536,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);
     }
@@ -3572,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, );
@@ -3604,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) {
@@ -3740,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;
     }
@@ -4072,6 +4424,12 @@
   initial-value: 0 0 #0000;
 }
 
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
 @property --tw-blur {
   syntax: "*";
   inherits: false
@@ -4199,12 +4557,6 @@
   initial-value: "";
 }
 
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
 @keyframes ping {
   75%, 100% {
     opacity: 0;
@@ -4287,11 +4639,3 @@
     transform: scaleY(-1) translateY(0);
 }
 }
-
-:where(.vue-chat, .vue-chat *).v3-emoji-picker {
-  height: 407px;
-  width: 332px;
-}
-:where(.vue-chat, .vue-chat *).v3-emoji-picker .v3-footer {
-  display: none !important;
-}