vue-parley 5.5.0 → 5.5.1

package/dist/chat.css

@@ -85,12 +85,12 @@
     --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-gray-50: #f0f0f0;
-    --color-gray-100: #d1d0d2;
-    --color-gray-200: #bababc;
-    --color-gray-600: #605f63;
-    --color-gray-800: #3a393c;
-    --color-gray-900: #2c2c2e;
+    --color-gray-50: #f1f5f9;
+    --color-gray-100: #e2e8f0;
+    --color-gray-200: #cbd5e1;
+    --color-gray-600: #334155;
+    --color-gray-800: #172033;
+    --color-gray-900: #0f172a;
     --color-neutral-100: oklch(97% 0 0);
     --color-neutral-200: oklch(92.2% 0 0);
     --color-neutral-300: oklch(87% 0 0);
@@ -127,9 +127,11 @@
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-lg: 16px;
+    --blur-xl: 24px;
     --aspect-video: 16 / 9;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    --shadow-medium: 0 10px 30px -16px #0f172a38, 0 1px 3px #0f172a14;
     --color-primary-100: #afeee7;
     --color-primary-200: #7eded4;
     --color-primary-400: #40b8ac;
@@ -155,7 +157,7 @@
     --color-error-500: #e52b16;
     --color-error-600: #d02714;
     --color-error-900: #601209;
-    --color-gray-25: #f8f8fa;
+    --color-gray-25: #f8fafc;
     --color-black-50: #e8e8e9;
     --color-black-200: #94969b;
     --color-black-300: #64666e;
@@ -184,8 +186,8 @@
     --color-on-surface-variant: var(--color-gray-800);
     --color-surface-variant-2: var(--color-gray-50);
     --color-surface-variant-3: var(--color-black-50);
-    --color-outline: var(--color-gray-100);
-    --color-outline-variant: var(--color-gray-50);
+    --color-outline: var(--color-gray-200);
+    --color-outline-variant: var(--color-gray-100);
     --text-title-md: 16px;
     --text-title-md--line-height: 32px;
     --text-title-md--font-weight: 700;
@@ -214,6 +216,7 @@
     --color-chat-on-surface: var(--color-on-surface-variant);
     --color-chat-primary: var(--color-primary);
     --color-chat-secondary: var(--color-secondary-600);
+    --color-chat-outline: var(--color-outline);
     --color-chat-outline-variant: var(--color-outline-variant);
     --color-chat-warning: var(--color-warning);
     --color-chat-error: var(--color-error);
@@ -237,11 +240,23 @@
   @supports (color: color-mix(in lab, red, red)) {
     .vue-chat {
       --color-chat-bubble-mine: color-mix(in oklab,
-    var(--color-chat-primary) 14%,
+    var(--color-chat-primary) 16%,
     var(--color-chat-background));
     }
   }
 
+  .vue-chat {
+    --background-image-chat-canvas: radial-gradient(circle at 18% 12%, var(--color-chat-primary) 0, transparent 28rem),
+    radial-gradient(circle at 82% 88%, #2ac4840f 0, transparent 26rem);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .vue-chat {
+      --background-image-chat-canvas: radial-gradient(circle at 18% 12%, color-mix(in oklab, var(--color-chat-primary) 8%, transparent) 0, transparent 28rem),
+    radial-gradient(circle at 82% 88%, color-mix(in oklab, var(--color-chat-secondary) 6%, transparent) 0, transparent 26rem);
+    }
+  }
+
   .vue-chat {
     --font-chat-family: "Vazirmatn", system-ui, sans-serif;
     --text-chat-base: 14px;
@@ -378,7 +393,7 @@
   }
 
   .dark .vue-chat {
-    --color-chat-bubble: oklab(89.6816% .000786974 -.00336433);
+    --color-chat-bubble: oklab(90.0831% -.00104068 -.00392555);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
@@ -401,6 +416,18 @@
     }
   }
 
+  .dark .vue-chat {
+    --background-image-chat-canvas: radial-gradient(circle at 18% 12%, var(--color-chat-primary) 0, transparent 28rem),
+      radial-gradient(circle at 82% 88%, #2ac48414 0, transparent 26rem);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark .vue-chat {
+      --background-image-chat-canvas: radial-gradient(circle at 18% 12%, color-mix(in oklab, var(--color-chat-primary) 12%, transparent) 0, transparent 28rem),
+      radial-gradient(circle at 82% 88%, color-mix(in oklab, var(--color-chat-secondary) 8%, transparent) 0, transparent 26rem);
+    }
+  }
+
   .dark .vue-chat {
     --background-image-diamond-surface: radial-gradient(circle at 70% 0%,
       var(--color-gray-50),
@@ -1410,6 +1437,10 @@
     max-width: 60%;
   }
 
+  :where(.vue-chat, .vue-chat *).max-w-\[86\%\] {
+    max-width: 86%;
+  }
+
   :where(.vue-chat, .vue-chat *).max-w-\[calc\(100\%-3\.5rem\)\] {
     max-width: calc(100% - 3.5rem);
   }
@@ -1775,10 +1806,6 @@
     column-gap: calc(var(--spacing) * 4);
   }
 
-  :where(.vue-chat, .vue-chat *).gap-x-5 {
-    column-gap: calc(var(--spacing) * 5);
-  }
-
   :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));
@@ -1993,6 +2020,11 @@
     border-width: 2px;
   }
 
+  :where(.vue-chat, .vue-chat *).border-s {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+  }
+
   :where(.vue-chat, .vue-chat *).border-s-2 {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 2px;
@@ -2008,11 +2040,6 @@
     border-bottom-width: 1px;
   }
 
-  :where(.vue-chat, .vue-chat *).border-l {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
-  }
-
   :where(.vue-chat, .vue-chat *).border-none\! {
     --tw-border-style: none !important;
     border-style: none !important;
@@ -2030,8 +2057,18 @@
     border-color: var(--color-chat-outline-variant) !important;
   }
 
+  :where(.vue-chat, .vue-chat *).border-chat-outline-variant\/45 {
+    border-color: #e2e8f073;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).border-chat-outline-variant\/45 {
+      border-color: color-mix(in oklab, var(--color-chat-outline-variant) 45%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).border-chat-outline-variant\/60\! {
-    border-color: #f0f0f099 !important;
+    border-color: #e2e8f099 !important;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
@@ -2041,7 +2078,7 @@
   }
 
   :where(.vue-chat, .vue-chat *).border-chat-outline-variant\/70\! {
-    border-color: #f0f0f0b3 !important;
+    border-color: #e2e8f0b3 !important;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
@@ -2054,6 +2091,10 @@
     border-color: var(--color-chat-primary);
   }
 
+  :where(.vue-chat, .vue-chat *).border-transparent\! {
+    border-color: #0000 !important;
+  }
+
   :where(.vue-chat, .vue-chat *).border-s-chat-primary {
     border-inline-start-color: var(--color-chat-primary);
   }
@@ -2062,6 +2103,16 @@
     border-top-color: var(--color-chat-outline-variant);
   }
 
+  :where(.vue-chat, .vue-chat *).border-t-chat-outline-variant\/70 {
+    border-top-color: #e2e8f0b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).border-t-chat-outline-variant\/70 {
+      border-top-color: color-mix(in oklab, var(--color-chat-outline-variant) 70%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).border-t-outline-variant {
     border-top-color: var(--color-outline-variant);
   }
@@ -2070,6 +2121,16 @@
     border-bottom-color: var(--color-chat-outline-variant);
   }
 
+  :where(.vue-chat, .vue-chat *).border-b-chat-outline-variant\/70 {
+    border-bottom-color: #e2e8f0b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).border-b-chat-outline-variant\/70 {
+      border-bottom-color: color-mix(in oklab, var(--color-chat-outline-variant) 70%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).\!bg-surface-variant-2 {
     background-color: var(--color-surface-variant-2) !important;
   }
@@ -2196,6 +2257,26 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).bg-chat-background\/92 {
+    background-color: #ffffffeb;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-background\/92 {
+      background-color: color-mix(in oklab, var(--color-chat-background) 92%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-background\/95 {
+    background-color: #fffffff2;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-background\/95 {
+      background-color: color-mix(in oklab, var(--color-chat-background) 95%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).bg-chat-background\/95\! {
     background-color: #fffffff2 !important;
   }
@@ -2266,7 +2347,17 @@
     background-color: var(--color-chat-outline-variant);
   }
 
-  :where(.vue-chat, .vue-chat *).bg-chat-primary, :where(.vue-chat, .vue-chat *).bg-chat-primary\/10 {
+  :where(.vue-chat, .vue-chat *).bg-chat-primary, :where(.vue-chat, .vue-chat *).bg-chat-primary\/9 {
+    background-color: var(--color-chat-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-primary\/9 {
+      background-color: color-mix(in oklab, var(--color-chat-primary) 9%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-primary\/10 {
     background-color: var(--color-chat-primary);
   }
 
@@ -2320,27 +2411,21 @@
     background-color: var(--color-chat-surface);
   }
 
-  :where(.vue-chat, .vue-chat *).bg-chat-surface-3 {
-    background-color: var(--color-chat-surface-3);
-  }
-
-  :where(.vue-chat, .vue-chat *).bg-chat-surface\/0 {
-    background-color: #0000;
+  :where(.vue-chat, .vue-chat *).bg-chat-surface\! {
+    background-color: var(--color-chat-surface) !important;
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).bg-chat-surface\/0 {
-      background-color: color-mix(in oklab, var(--color-chat-surface) 0%, transparent);
-    }
+  :where(.vue-chat, .vue-chat *).bg-chat-surface-3 {
+    background-color: var(--color-chat-surface-3);
   }
 
-  :where(.vue-chat, .vue-chat *).bg-chat-surface\/30 {
-    background-color: #f8f8fa4d;
+  :where(.vue-chat, .vue-chat *).bg-chat-surface\/75 {
+    background-color: #f8fafcbf;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    :where(.vue-chat, .vue-chat *).bg-chat-surface\/30 {
-      background-color: color-mix(in oklab, var(--color-chat-surface) 30%, transparent);
+    :where(.vue-chat, .vue-chat *).bg-chat-surface\/75 {
+      background-color: color-mix(in oklab, var(--color-chat-surface) 75%, transparent);
     }
   }
 
@@ -2685,6 +2770,10 @@
     padding: calc(var(--spacing) * 2.5);
   }
 
+  :where(.vue-chat, .vue-chat *).p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
   :where(.vue-chat, .vue-chat *).p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -2789,6 +2878,10 @@
     padding-block: calc(var(--spacing) * 3);
   }
 
+  :where(.vue-chat, .vue-chat *).py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
+
   :where(.vue-chat, .vue-chat *).py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -2813,6 +2906,10 @@
     padding-inline-start: var(--spacing) !important;
   }
 
+  :where(.vue-chat, .vue-chat *).ps-2 {
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
+
   :where(.vue-chat, .vue-chat *).ps-3 {
     padding-inline-start: calc(var(--spacing) * 3);
   }
@@ -2845,10 +2942,6 @@
     padding-top: calc(var(--spacing) * 2);
   }
 
-  :where(.vue-chat, .vue-chat *).pt-2\.5 {
-    padding-top: calc(var(--spacing) * 2.5);
-  }
-
   :where(.vue-chat, .vue-chat *).pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -2901,6 +2994,10 @@
     padding-bottom: calc(var(--spacing) * 4);
   }
 
+  :where(.vue-chat, .vue-chat *).pb-5 {
+    padding-bottom: calc(var(--spacing) * 5);
+  }
+
   :where(.vue-chat, .vue-chat *).pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
@@ -3293,8 +3390,23 @@
     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-\[0_-8px_24px_-22px_rgb\(15_23_42\/0\.45\)\] {
+    --tw-shadow: 0 -8px 24px -22px var(--tw-shadow-color, #0f172a73);
+    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-\[0_1px_0_rgb\(15_23_42\/0\.02\)\] {
+    --tw-shadow: 0 1px 0 var(--tw-shadow-color, #0f172a05);
+    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-\[0_3px_12px_-8px_rgb\(15_23_42\/0\.35\)\] {
+    --tw-shadow: 0 3px 12px -8px var(--tw-shadow-color, #0f172a59);
+    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);
+    --tw-shadow: 0 18px 48px -18px var(--tw-shadow-color, #0f172a47), 0 4px 12px -6px var(--tw-shadow-color, #0f172a1f);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -3303,6 +3415,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-none\! {
+    --tw-shadow: 0 0 #0000 !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;
+  }
+
   :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);
@@ -3313,11 +3430,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
 
-  :where(.vue-chat, .vue-chat *).shadow-xs {
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
-    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-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);
@@ -3337,6 +3449,16 @@
     --tw-ring-color: var(--color-chat-background);
   }
 
+  :where(.vue-chat, .vue-chat *).ring-chat-primary\/16 {
+    --tw-ring-color: var(--color-chat-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).ring-chat-primary\/16 {
+      --tw-ring-color: color-mix(in oklab, var(--color-chat-primary) 16%, transparent);
+    }
+  }
+
   :where(.vue-chat, .vue-chat *).ring-sky-400 {
     --tw-ring-color: var(--color-sky-400);
   }
@@ -3417,6 +3539,12 @@
     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, );
   }
 
+  :where(.vue-chat, .vue-chat *).backdrop-blur-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -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, );
+    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, );
+  }
+
   :where(.vue-chat, .vue-chat *).backdrop-filter {
     -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, );
     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, );
@@ -3597,6 +3725,35 @@
     content: var(--tw-content);
   }
 
+  :where(.vue-chat, .vue-chat *).focus-within\:border-chat-primary\/35:focus-within {
+    border-color: var(--color-chat-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).focus-within\:border-chat-primary\/35:focus-within {
+      border-color: color-mix(in oklab, var(--color-chat-primary) 35%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).focus-within\:bg-chat-background:focus-within {
+    background-color: var(--color-chat-background);
+  }
+
+  :where(.vue-chat, .vue-chat *).focus-within\:ring-3:focus-within {
+    --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 *).focus-within\:ring-chat-primary\/10:focus-within {
+    --tw-ring-color: var(--color-chat-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).focus-within\:ring-chat-primary\/10:focus-within {
+      --tw-ring-color: color-mix(in oklab, var(--color-chat-primary) 10%, transparent);
+    }
+  }
+
   @media (hover: hover) {
     :where(.vue-chat, .vue-chat *).hover\:bg-black\/70\!:hover {
       background-color: #000000b3 !important;
@@ -3618,18 +3775,12 @@
       }
     }
 
-    :where(.vue-chat, .vue-chat *).hover\:bg-chat-surface\/50:hover {
-      background-color: #f8f8fa80;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      :where(.vue-chat, .vue-chat *).hover\:bg-chat-surface\/50:hover {
-        background-color: color-mix(in oklab, var(--color-chat-surface) 50%, transparent);
-      }
+    :where(.vue-chat, .vue-chat *).hover\:bg-chat-surface:hover {
+      background-color: var(--color-chat-surface);
     }
 
     :where(.vue-chat, .vue-chat *).hover\:bg-chat-surface\/60:hover {
-      background-color: #f8f8fa99;
+      background-color: #f8fafc99;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -3663,6 +3814,31 @@
     }
   }
 
+  :where(.vue-chat, .vue-chat *).focus\:border-chat-primary\/35\!:focus {
+    border-color: var(--color-chat-primary) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).focus\:border-chat-primary\/35\!:focus {
+      border-color: color-mix(in oklab, var(--color-chat-primary) 35%, transparent) !important;
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).focus\:ring-3\!:focus {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !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;
+  }
+
+  :where(.vue-chat, .vue-chat *).focus\:ring-chat-primary\/10\!:focus {
+    --tw-ring-color: var(--color-chat-primary) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).focus\:ring-chat-primary\/10\!:focus {
+      --tw-ring-color: color-mix(in oklab, var(--color-chat-primary) 10%, transparent) !important;
+    }
+  }
+
   :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);
@@ -3817,6 +3993,10 @@
       height: calc(var(--spacing) * 16);
     }
 
+    :where(.vue-chat, .vue-chat *).md\:h-18 {
+      height: calc(var(--spacing) * 18);
+    }
+
     :where(.vue-chat, .vue-chat *).md\:h-20 {
       height: calc(var(--spacing) * 20);
     }
@@ -3833,6 +4013,10 @@
       width: calc(var(--spacing) * 80);
     }
 
+    :where(.vue-chat, .vue-chat *).md\:w-88 {
+      width: calc(var(--spacing) * 88);
+    }
+
     :where(.vue-chat, .vue-chat *).md\:w-full {
       width: 100%;
     }
@@ -3845,6 +4029,10 @@
       max-width: calc(var(--spacing) * 135);
     }
 
+    :where(.vue-chat, .vue-chat *).md\:max-w-\[76\%\] {
+      max-width: 76%;
+    }
+
     :where(.vue-chat, .vue-chat *).md\:max-w-\[calc\(100dvw-9rem\)\] {
       max-width: calc(100dvw - 9rem);
     }
@@ -4159,6 +4347,35 @@
   border-color: #0000 !important;
 }
 
+:where(.vue-chat, .vue-chat *).chat-canvas {
+  background-color: var(--color-chat-surface);
+  background-image: var(--background-image-chat-canvas);
+}
+
+:where(.vue-chat, .vue-chat *).chat-panel {
+  border: 1px solid #cbd5e1b8;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :where(.vue-chat, .vue-chat *).chat-panel {
+    border: 1px solid color-mix(in oklab, var(--color-chat-outline) 72%, transparent);
+  }
+}
+
+:where(.vue-chat, .vue-chat *).chat-panel {
+  background: #fffffff0;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :where(.vue-chat, .vue-chat *).chat-panel {
+    background: color-mix(in oklab, var(--color-chat-background) 94%, transparent);
+  }
+}
+
+:where(.vue-chat, .vue-chat *).chat-panel {
+  box-shadow: var(--shadow-medium);
+}
+
 :where(.vue-chat):where(.p-dialog, .p-contextmenu, .p-menu, .p-popover, .p-toast, .p-galleria-mask) {
   font-family: var(--font-chat-family);
 }
@@ -4592,15 +4809,15 @@
 }
 
 /* Styles remain exactly the same */
-:where(.vue-chat, .vue-chat *).flip-vertical[data-v-c38cc418] {
+:where(.vue-chat, .vue-chat *).flip-vertical[data-v-385d0498] {
   transform: scaleY(-1);
   will-change: transform;
 }
-:where(.vue-chat, .vue-chat *)[data-index][data-v-c38cc418] {
+:where(.vue-chat, .vue-chat *)[data-index][data-v-385d0498] {
   will-change: transform;
   backface-visibility: hidden;
 }
-@keyframes slide-in-right-c38cc418 {
+@keyframes slide-in-right-385d0498 {
 0% {
     opacity: 0;
     transform: scaleY(-1) translateX(30px);
@@ -4610,7 +4827,7 @@
     transform: scaleY(-1) translateX(0);
 }
 }
-@keyframes slide-in-left-c38cc418 {
+@keyframes slide-in-left-385d0498 {
 0% {
     opacity: 0;
     transform: scaleY(-1) translateX(-30px);
@@ -4620,23 +4837,23 @@
     transform: scaleY(-1) translateX(0);
 }
 }
-:where(.vue-chat, .vue-chat *).animate-slide-right[data-v-c38cc418] {
-  animation: slide-in-right-c38cc418 300ms ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-slide-right[data-v-385d0498] {
+  animation: slide-in-right-385d0498 300ms ease-out forwards;
   will-change: transform, opacity;
 }
-:where(.vue-chat, .vue-chat *).animate-slide-left[data-v-c38cc418] {
-  animation: slide-in-left-c38cc418 300ms ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-slide-left[data-v-385d0498] {
+  animation: slide-in-left-385d0498 300ms ease-out forwards;
   will-change: transform, opacity;
 }
-:where(.vue-chat, .vue-chat *)#list[data-v-c38cc418] {
+:where(.vue-chat, .vue-chat *)#list[data-v-385d0498] {
   will-change: padding-top;
 }
-:where(.vue-chat, .vue-chat *).animate-request-in[data-v-c38cc418] {
-  animation: request-in-c38cc418 0.4s ease-out forwards;
+:where(.vue-chat, .vue-chat *).animate-request-in[data-v-385d0498] {
+  animation: request-in-385d0498 0.4s ease-out forwards;
   overflow: hidden;
   transform: scaleY(-1);
 }
-@keyframes request-in-c38cc418 {
+@keyframes request-in-385d0498 {
 0% {
     opacity: 0;
     max-height: 0;

package/dist/chunks/{Call-CqqBK4xd.mjs → Call-BVp6aHyk.mjs}

@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted, watch, nextTick, reactive, onBeforeUnmount, computed, defineComponent, openBlock, createElementBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, normalizeStyle, createSlots, toDisplayString, createCommentVNode, withDirectives, Fragment, useModel, renderList, createTextVNode, mergeModels, watchEffect, renderSlot, withModifiers, Transition, vShow } from "vue";
-import { u as useCallStore, a as useLocalI18n, c as chat, n as nameInitials, b as avatarToneStyle, _ as _sfc_main$8, d as useDirection, f as formatDuration, e as _export_sfc, g as useChatStore } from "./index-Dlt-grAd.mjs";
+import { u as useCallStore, a as useLocalI18n, c as chat, n as nameInitials, b as avatarToneStyle, _ as _sfc_main$8, d as useDirection, f as formatDuration, e as _export_sfc, g as useChatStore } from "./index-CcZpxhB1.mjs";
 import { useFullscreen, useWindowSize, useDraggable, useElementSize, useEventListener } from "@vueuse/core";
 import Button from "primevue/button";
 import Menu from "primevue/menu";
@@ -2444,4 +2444,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=Call-CqqBK4xd.mjs.map
+//# sourceMappingURL=Call-BVp6aHyk.mjs.map