vue-parley 5.5.0 → 5.5.2

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\! {
+    background-color: var(--color-chat-surface) !important;
   }
 
-  :where(.vue-chat, .vue-chat *).bg-chat-surface\/0 {
-    background-color: #0000;
-  }
-
-  @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;
@@ -4649,15 +4866,15 @@
 }
 }
 
-:where(.vue-chat, .vue-chat *).call-chip--button[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-chip--button[data-v-9e488ad1] {
   cursor: pointer;
 }
-:where(.vue-chat, .vue-chat *).call-chip.call-chip--icon[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-chip.call-chip--icon[data-v-9e488ad1] {
   justify-content: center;
   aspect-ratio: 1;
   padding: 0;
 }
-:where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-9e488ad1] {
   padding: 0;
   color: inherit;
   font: inherit;
@@ -4665,10 +4882,10 @@
   border: 0;
   background: none;
 }
-:where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-4431f1c1]:disabled {
+:where(.vue-chat, .vue-chat *):where(.call-screen) button[data-v-9e488ad1]:disabled {
   cursor: not-allowed;
 }
-:where(.vue-chat, .vue-chat *).call-screen[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen[data-v-9e488ad1] {
   --background-primary: #0b1119;
   --background-secondary: #111822;
   --background-header: #1c2934;
@@ -4702,7 +4919,7 @@
   font-family: inherit;
   background: radial-gradient(circle at 50% -20%, #1d3040 0%, #111822 37%, #0b1119 85%);
 }
-:where(.vue-chat, .vue-chat *).call-header[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-header[data-v-9e488ad1] {
   display: flex;
   flex-shrink: 0;
   gap: 0.5rem;
@@ -4712,25 +4929,25 @@
   margin-inline: var(--gutter);
   border-bottom: 1px solid rgb(255 255 255 / 0.07);
 }
-:where(.vue-chat, .vue-chat *).call-brand[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-brand[data-v-9e488ad1] {
   display: flex;
   gap: 0.6875rem;
   align-items: center;
   min-width: 0;
 }
-:where(.vue-chat, .vue-chat *).call-brand h1[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-brand h1[data-v-9e488ad1] {
   font-size: 1.25rem;
   font-weight: 800;
   line-height: 1.3;
 }
-:where(.vue-chat, .vue-chat *).call-brand p[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-brand p[data-v-9e488ad1] {
   overflow: hidden;
   color: #97a7b8;
   font-size: 0.75rem;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-:where(.vue-chat, .vue-chat *).call-logo[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-logo[data-v-9e488ad1] {
   display: grid;
   flex-shrink: 0;
   place-items: center;
@@ -4741,15 +4958,15 @@
   background: linear-gradient(145deg, var(--accent-turquoise), var(--accent-turquoise-dark));
   box-shadow: 0 6px 22px rgb(32 190 182 / 0.17);
 }
-:where(.vue-chat, .vue-chat *).call-logo svg[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-logo svg[data-v-9e488ad1] {
   width: 68%;
 }
-:where(.vue-chat, .vue-chat *).call-meta[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-meta[data-v-9e488ad1] {
   display: flex;
   flex-shrink: 0;
   gap: 0.5rem;
 }
-:where(.vue-chat, .vue-chat *).call-chip[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-chip[data-v-9e488ad1] {
   display: flex;
   gap: 0.4375rem;
   align-items: center;
@@ -4762,11 +4979,11 @@
   border-radius: 14px;
   background: var(--background-header);
 }
-:where(.vue-chat, .vue-chat *).call-time[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-time[data-v-9e488ad1] {
   color: #84e1d3;
   font-variant-numeric: tabular-nums;
 }
-:where(.vue-chat, .vue-chat *).call-dot[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-dot[data-v-9e488ad1] {
   flex-shrink: 0;
   width: 0.4375rem;
   height: 0.4375rem;
@@ -4774,10 +4991,10 @@
   background: var(--accent-success);
   box-shadow: 0 0 0 3px rgb(66 212 164 / 0.1);
 }
-:where(.vue-chat, .vue-chat *).call-dot--off[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-dot--off[data-v-9e488ad1] {
   background: var(--text-muted);
 }
-:where(.vue-chat, .vue-chat *).call-main[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-main[data-v-9e488ad1] {
   position: relative;
   flex: 1 1 0;
   min-height: 9rem;
@@ -4788,24 +5005,24 @@
   background: var(--background-secondary);
   box-shadow: 0 18px 50px rgb(2 6 14 / 0.33);
 }
-:where(.vue-chat, .vue-chat *).call-main--expanded[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-main--expanded[data-v-9e488ad1] {
   margin: 0;
   border-radius: 0;
 }
 
 /* The fallback where the browser has no fullscreen: the screen's whole height, over its siblings. */
-:where(.vue-chat, .vue-chat *).call-main--expanded[data-v-4431f1c1]:not(:fullscreen) {
+:where(.vue-chat, .vue-chat *).call-main--expanded[data-v-9e488ad1]:not(:fullscreen) {
   position: absolute;
   inset: 0;
   z-index: 2;
 }
-:where(.vue-chat, .vue-chat *).call-shade[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-shade[data-v-9e488ad1] {
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(to bottom, rgb(10 27 43 / 0.33) 0%, transparent 23%, transparent 54%, rgb(6 19 26 / 0.67) 100%);
 }
-:where(.vue-chat, .vue-chat *).call-badge[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-badge[data-v-9e488ad1] {
   position: absolute;
   display: flex;
   gap: 0.5rem;
@@ -4818,11 +5035,11 @@
   background: rgb(6 20 27 / 0.67);
   backdrop-filter: blur(10px);
 }
-:where(.vue-chat, .vue-chat *).call-badge--camera[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-badge--camera[data-v-9e488ad1] {
   top: 1.0625rem;
   inset-inline-start: 1.0625rem;
 }
-:where(.vue-chat, .vue-chat *).call-badge--tile[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-badge--tile[data-v-9e488ad1] {
   top: 0.75rem;
   inset-inline-start: 0.75rem;
   padding: 0.3125rem 0.5rem;
@@ -4833,13 +5050,13 @@
   background: rgb(13 23 37 / 0.49);
   backdrop-filter: none;
 }
-:where(.vue-chat, .vue-chat *).call-badge--center[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-badge--center[data-v-9e488ad1] {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   white-space: nowrap;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-9e488ad1] {
   position: absolute !important;
   top: 1.0625rem;
   inset-inline-end: 1.0625rem;
@@ -4852,7 +5069,7 @@
   background: rgb(6 20 27 / 0.57) !important;
   backdrop-filter: blur(12px);
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-pin[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-pin[data-v-9e488ad1] {
   position: absolute !important;
   top: 1.0625rem;
   inset-inline-end: 4rem;
@@ -4865,18 +5082,18 @@
   background: rgb(6 20 27 / 0.57) !important;
   backdrop-filter: blur(12px);
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-pin--active[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-pin--active[data-v-9e488ad1] {
   color: #15232d !important;
   border-color: #84e1d3 !important;
   background: #84e1d3 !important;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-4431f1c1]::after {
+:where(.vue-chat, .vue-chat *).call-screen .call-fullscreen[data-v-9e488ad1]::after {
   /* The design's 38px, with a thumb's reach. */
   content: '';
   position: absolute;
   inset: -3px;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-sound[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-sound[data-v-9e488ad1] {
   position: absolute !important;
   top: 4rem;
   left: 50%;
@@ -4888,7 +5105,7 @@
   background: var(--text-primary) !important;
   transform: translateX(-50%);
 }
-:where(.vue-chat, .vue-chat *).call-main-footer[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-main-footer[data-v-9e488ad1] {
   position: absolute;
   inset-inline: clamp(0.75rem, 3.3vw, 1.125rem);
   bottom: clamp(0.75rem, 3.3vw, 1.125rem);
@@ -4897,7 +5114,7 @@
   align-items: flex-end;
   justify-content: space-between;
 }
-:where(.vue-chat, .vue-chat *).call-identity[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-identity[data-v-9e488ad1] {
   display: flex;
   flex: 1 1 0;
   flex-direction: column;
@@ -4905,7 +5122,7 @@
   align-items: flex-start;
   min-width: 0;
 }
-:where(.vue-chat, .vue-chat *).call-identity strong[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-identity strong[data-v-9e488ad1] {
   display: -webkit-box;
   overflow: hidden;
   font-size: clamp(1rem, 3.9vw, 1.3125rem);
@@ -4914,12 +5131,12 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
-:where(.vue-chat, .vue-chat *).call-identity small[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-identity small[data-v-9e488ad1] {
   margin-top: 0.25rem;
   color: #d8e4e7;
   font-size: 0.75rem;
 }
-:where(.vue-chat, .vue-chat *).call-torch-note[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-torch-note[data-v-9e488ad1] {
   display: inline-flex;
   gap: 0.4375rem;
   align-items: center;
@@ -4932,12 +5149,12 @@
   border-radius: 10px;
   background: rgb(10 18 27 / 0.55);
 }
-:where(.vue-chat, .vue-chat *).call-torch-note--on[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-torch-note--on[data-v-9e488ad1] {
   color: #b2fbe9;
   border-color: rgb(112 224 197 / 0.3);
   background: rgb(13 52 45 / 0.9);
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-9e488ad1] {
   flex-shrink: 0;
   gap: 0.5rem;
   min-height: 2.875rem;
@@ -4952,38 +5169,38 @@
   box-shadow: 0 7px 22px rgb(29 26 10 / 0.37);
   opacity: 1 !important;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-torch-float--on[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-torch-float--on[data-v-9e488ad1] {
   color: #222327 !important;
   background: var(--accent-yellow) !important;
 }
-:where(.vue-chat, .vue-chat *).call-others-title[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-others-title[data-v-9e488ad1] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
   margin: clamp(0.375rem, 1.7dvh, 1.125rem) calc(var(--gutter) + 2px) clamp(0.25rem, 1dvh, 0.6875rem);
 }
-:where(.vue-chat, .vue-chat *).call-others-title h2[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-others-title h2[data-v-9e488ad1] {
   color: var(--text-secondary);
   font-size: 0.8125rem;
   font-weight: 400;
 }
-:where(.vue-chat, .vue-chat *).call-others-title span[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-others-title span[data-v-9e488ad1] {
   color: var(--text-muted);
   font-size: 0.6875rem;
 }
-:where(.vue-chat, .vue-chat *).call-others[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-others[data-v-9e488ad1] {
   display: flex;
   flex-shrink: 0;
   gap: 0.75rem;
   height: clamp(5.75rem, 16.76dvh, 11.3125rem);
   padding-inline: var(--gutter);
 }
-:where(.vue-chat, .vue-chat *).call-others--scroll[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-others--scroll[data-v-9e488ad1] {
   overflow-x: auto;
   scrollbar-width: none;
 }
-:where(.vue-chat, .vue-chat *).call-tile[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-tile[data-v-9e488ad1] {
   position: relative;
   flex: 1 1 0;
   min-width: 0;
@@ -4994,21 +5211,21 @@
   outline-offset: -1px;
   background: #1c2a36;
 }
-:where(.vue-chat, .vue-chat *).call-tile--off[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-tile--off[data-v-9e488ad1] {
   background: radial-gradient(circle at 50% 40%, #32445a 0%, #192633 66%);
 }
-:where(.vue-chat, .vue-chat *).call-tile[data-v-4431f1c1]::after {
+:where(.vue-chat, .vue-chat *).call-tile[data-v-9e488ad1]::after {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(to bottom, transparent 35%, rgb(14 27 38 / 0.68) 100%);
 }
-:where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-9e488ad1] {
   flex: 0 0 44%;
   max-width: none;
 }
-:where(.vue-chat, .vue-chat *).call-avatar[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-avatar[data-v-9e488ad1] {
   position: absolute;
   top: 45%;
   left: 50%;
@@ -5023,11 +5240,11 @@
   background: #3d496c;
   transform: translate(-50%, -50%);
 }
-:where(.vue-chat, .vue-chat *).call-avatar--large[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-avatar--large[data-v-9e488ad1] {
   width: 6rem;
   font-size: 2rem;
 }
-:where(.vue-chat, .vue-chat *).call-tile-footer[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-tile-footer[data-v-9e488ad1] {
   position: absolute;
   inset-inline: clamp(0.5rem, 2.2vw, 0.75rem);
   bottom: clamp(0.5rem, 2.2vw, 0.75rem);
@@ -5037,7 +5254,7 @@
   align-items: center;
   justify-content: space-between;
 }
-:where(.vue-chat, .vue-chat *).call-name[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-name[data-v-9e488ad1] {
   overflow: hidden;
   padding: 0.4375rem 0.5625rem;
   font-size: 0.75rem;
@@ -5047,7 +5264,7 @@
   border-radius: 9px;
   background: rgb(13 21 39 / 0.72);
 }
-:where(.vue-chat, .vue-chat *).call-mic[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-mic[data-v-9e488ad1] {
   display: grid;
   flex-shrink: 0;
   place-items: center;
@@ -5057,11 +5274,11 @@
   border-radius: 9px;
   background: #143e3a;
 }
-:where(.vue-chat, .vue-chat *).call-mic--off[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-mic--off[data-v-9e488ad1] {
   color: #fff;
   background: #ef5764;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-tile-pick[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-tile-pick[data-v-9e488ad1] {
   position: absolute !important;
   inset: 0;
   z-index: 2;
@@ -5072,7 +5289,7 @@
   border-radius: inherit !important;
   background: transparent !important;
 }
-:where(.vue-chat, .vue-chat *).call-controls[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-controls[data-v-9e488ad1] {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -5086,7 +5303,7 @@
     0 -8px 26px rgb(0 0 0 / 0.14),
     0 16px 32px rgb(0 0 0 / 0.27);
 }
-:where(.vue-chat, .vue-chat *).call-control[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-control[data-v-9e488ad1] {
   display: flex;
   flex: 1 1 0;
   flex-direction: column;
@@ -5100,13 +5317,16 @@
   text-align: center;
   white-space: nowrap;
 }
-:where(.vue-chat, .vue-chat *).call-control--lit[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-control--lit[data-v-9e488ad1] {
   color: #ffc572;
 }
-:where(.vue-chat, .vue-chat *).call-control--end[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-control--end[data-v-9e488ad1] {
   color: #f4a9ae;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-9e488ad1] {
+  position: relative;
+  display: grid;
+  place-items: center;
   width: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
   height: clamp(2.75rem, min(12.5vw, 6.5dvh), 3.5rem);
   padding: 0 !important;
@@ -5117,24 +5337,37 @@
   opacity: 1 !important;
   transition: transform 0.12s;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-4431f1c1]:active,
-:where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-4431f1c1]:active {
+
+/* Keep the glyph centred independently of the host application's SVG and RTL rules. */
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button > svg[data-v-9e488ad1] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0;
+  transform: translate(-50%, -50%);
+}
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-9e488ad1]:active,
+:where(.vue-chat, .vue-chat *).call-screen .call-torch-float[data-v-9e488ad1]:active {
   transform: scale(0.94);
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button--lit[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button--lit[data-v-9e488ad1] {
   color: #242c33 !important;
   border-color: #ffdb95 !important;
   background: var(--accent-yellow) !important;
   box-shadow: 0 4px 18px rgb(236 173 74 / 0.18);
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button--end[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button--end[data-v-9e488ad1] {
   color: #fff !important;
   border-color: var(--accent-danger-border) !important;
   border-radius: 20px !important;
   background: var(--accent-danger) !important;
   box-shadow: 0 5px 20px rgb(238 62 80 / 0.22);
 }
-:where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-9e488ad1] {
   position: fixed;
   inset: 0;
   z-index: 10;
@@ -5143,7 +5376,7 @@
   background: rgb(0 0 0 / 0.58);
   backdrop-filter: blur(3px);
 }
-:where(.vue-chat, .vue-chat *).call-members[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-members[data-v-9e488ad1] {
   width: 100%;
   max-height: min(75dvh, 36rem);
   padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
@@ -5154,13 +5387,13 @@
   background: #17222d;
   box-shadow: 0 -18px 50px rgb(0 0 0 / 0.35);
 }
-:where(.vue-chat, .vue-chat *).call-members header[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-members header[data-v-9e488ad1] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.75rem;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-members-close[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-members-close[data-v-9e488ad1] {
   width: 2.5rem;
   height: 2.5rem;
   padding: 0 !important;
@@ -5169,12 +5402,12 @@
   border-radius: 12px !important;
   background: var(--background-control) !important;
 }
-:where(.vue-chat, .vue-chat *).call-members ul[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-members ul[data-v-9e488ad1] {
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
 }
-:where(.vue-chat, .vue-chat *).call-members li[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-members li[data-v-9e488ad1] {
   display: flex;
   gap: 0.75rem;
   align-items: center;
@@ -5183,11 +5416,11 @@
   border-radius: 16px;
   background: var(--background-panel);
 }
-:where(.vue-chat, .vue-chat *).call-members li.is-main[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-members li.is-main[data-v-9e488ad1] {
   border-color: rgb(42 201 188 / 0.75);
   box-shadow: inset 0 0 0 1px rgb(42 201 188 / 0.18);
 }
-:where(.vue-chat, .vue-chat *).call-member-avatar[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-member-avatar[data-v-9e488ad1] {
   display: grid;
   flex: 0 0 2.5rem;
   place-items: center;
@@ -5195,22 +5428,22 @@
   border-radius: 50%;
   background: #3d496c;
 }
-:where(.vue-chat, .vue-chat *).call-member-name[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-member-name[data-v-9e488ad1] {
   display: flex;
   flex: 1 1 0;
   flex-direction: column;
   min-width: 0;
 }
-:where(.vue-chat, .vue-chat *).call-member-name strong[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-member-name strong[data-v-9e488ad1] {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-:where(.vue-chat, .vue-chat *).call-member-name small[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-member-name small[data-v-9e488ad1] {
   color: var(--text-muted);
   font-size: 0.6875rem;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-9e488ad1] {
   flex-shrink: 0;
   padding: 0.625rem 0.75rem !important;
   color: #102026 !important;
@@ -5219,51 +5452,51 @@
   border-radius: 11px !important;
   background: var(--accent-turquoise) !important;
 }
-:where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-4431f1c1]:disabled {
+:where(.vue-chat, .vue-chat *).call-screen .call-member-pick[data-v-9e488ad1]:disabled {
   color: #b5eee7 !important;
   background: #1e514f !important;
   opacity: 1;
 }
 @media (min-width: 768px) {
-:where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-members-backdrop[data-v-9e488ad1] {
     align-items: stretch;
     justify-content: flex-start;
 }
-:where(.vue-chat, .vue-chat *).call-members[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-members[data-v-9e488ad1] {
     width: min(25rem, 42vw);
     max-height: none;
     border-radius: 0 24px 24px 0;
 }
 }
 @media (min-width: 768px) {
-:where(.vue-chat, .vue-chat *).call-others[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-others[data-v-9e488ad1] {
     height: clamp(8rem, 20dvh, 13rem);
 }
 }
 @media (min-width: 768px) {
-:where(.vue-chat, .vue-chat *).call-screen[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen[data-v-9e488ad1] {
     display: grid;
     grid-template-rows: auto auto minmax(0, 1fr) auto;
     grid-template-columns: clamp(17rem, 23vw, 22rem) minmax(0, 1fr);
     gap: 0 1rem;
     padding: 1.5rem;
 }
-:where(.vue-chat, .vue-chat *).call-header[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-header[data-v-9e488ad1] {
     grid-row: 1;
     grid-column: 1 / 3;
     margin: 0 0 1.25rem;
 }
-:where(.vue-chat, .vue-chat *).call-main[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-main[data-v-9e488ad1] {
     grid-row: 2 / 4;
     grid-column: 2;
     margin: 0;
 }
-:where(.vue-chat, .vue-chat *).call-others-title[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-others-title[data-v-9e488ad1] {
     grid-row: 2;
     grid-column: 1;
     margin: 0 0 0.75rem;
 }
-:where(.vue-chat, .vue-chat *).call-others[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-others[data-v-9e488ad1] {
     grid-row: 3;
     grid-column: 1;
     flex-direction: column;
@@ -5274,20 +5507,20 @@
     overflow-x: hidden;
     overflow-y: auto;
 }
-:where(.vue-chat, .vue-chat *).call-tile[data-v-4431f1c1],
-  :where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-tile[data-v-9e488ad1],
+  :where(.vue-chat, .vue-chat *).call-others--scroll .call-tile[data-v-9e488ad1] {
     flex: 0 0 clamp(8.5rem, 20vh, 12rem);
     width: 100%;
     max-width: none;
 }
-:where(.vue-chat, .vue-chat *).call-controls[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-controls[data-v-9e488ad1] {
     grid-row: 4;
     grid-column: 1 / 3;
     margin: 1.25rem 0 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-:where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-4431f1c1] {
+:where(.vue-chat, .vue-chat *).call-screen .call-control-button[data-v-9e488ad1] {
     transition: none;
 }
 }