vue-parley 4.0.0

package/dist/chat.css

@@ -0,0 +1,3223 @@
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-space-x-reverse: 0;
+      --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-content: "";
+    }
+  }
+}
+
+@layer theme {
+  .vue-chat {
+    --color-green-400: oklch(79.2% .209 151.711);
+    --color-blue-500: oklch(62.3% .214 259.815);
+    --color-purple-500: oklch(62.7% .265 303.9);
+    --color-pink-500: oklch(65.6% .241 354.308);
+    --color-gray-50: #f0f0f0;
+    --color-gray-100: #d1d0d2;
+    --color-gray-200: #bababc;
+    --color-gray-600: #605f63;
+    --color-gray-800: #3a393c;
+    --color-gray-900: #2c2c2e;
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: .25rem;
+    --text-sm: .875rem;
+    --text-sm--line-height: calc(1.25 / .875);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-wide: .025em;
+    --radius-xs: .125rem;
+    --radius-sm: .25rem;
+    --radius-md: .375rem;
+    --radius-lg: .5rem;
+    --radius-xl: .75rem;
+    --radius-2xl: 1rem;
+    --ease-out: cubic-bezier(0, 0, .2, 1);
+    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
+    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
+    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
+    --blur-sm: 8px;
+    --blur-lg: 16px;
+    --aspect-video: 16 / 9;
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    --color-primary-100: #afeee7;
+    --color-primary-200: #7eded4;
+    --color-primary-400: #40b8ac;
+    --color-primary-500: #26a99c;
+    --color-primary-600: #1a9d90;
+    --color-primary-900: #055850;
+    --color-accent-blue-light: #08f;
+    --color-accent-blue-dark: #08f;
+    --color-secondary-100: #b3ffe0;
+    --color-secondary-200: #8dfbce;
+    --color-secondary-400: #49dea0;
+    --color-secondary-500: #3ad494;
+    --color-secondary-600: #2ac484;
+    --color-secondary-900: #0b613d;
+    --color-warning-100: #f8ead0;
+    --color-warning-200: #f3dfbb;
+    --color-warning-400: #e2bd7d;
+    --color-warning-600: #d09f46;
+    --color-warning-900: #875b0c;
+    --color-error-100: #f7bdb7;
+    --color-error-200: #f39d94;
+    --color-error-400: #ea5545;
+    --color-error-500: #e52b16;
+    --color-error-600: #d02714;
+    --color-error-900: #601209;
+    --color-gray-25: #f8f8fa;
+    --color-black-50: #e8e8e9;
+    --color-black-200: #94969b;
+    --color-black-300: #64666e;
+    --color-black-400: #393e4d;
+    --color-black-500: #242836;
+    --color-black-600: #151823;
+    --color-black-700: #10121b;
+    --color-black-900: #0a0b10;
+    --background-image-gradient-primary-secondary: linear-gradient(30deg,
+    var(--color-secondary-500),
+    var(--color-primary-500));
+    --background-image-diamond-primary-secondary: radial-gradient(circle at 70% 0%,
+    var(--color-secondary-500),
+    var(--color-primary-500));
+    --background-image-diamond-error: radial-gradient(circle at 70% 0%,
+    var(--color-error-600),
+    var(--color-error-200));
+    --background-image-diamond-black: radial-gradient(circle at 70% 0%,
+    var(--color-black-700),
+    var(--color-black-400));
+    --color-primary: var(--p-primary-color, var(--color-primary-600));
+    --color-on-primary: var(--p-primary-contrast-color, #fff);
+    --color-secondary: var(--color-secondary-600);
+    --color-on-secondary: #fff;
+    --color-warning: var(--color-warning-600);
+    --color-on-warning: #fff;
+    --color-error: var(--color-error-500);
+    --color-on-error: #fff;
+    --color-surface: #fff;
+    --color-on-surface: var(--color-black-900);
+    --color-surface-variant: var(--color-gray-25);
+    --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);
+    --text-title-lg: 22px;
+    --text-title-lg--line-height: 44px;
+    --text-title-lg--font-weight: 700;
+    --text-title-md: 16px;
+    --text-title-md--line-height: 32px;
+    --text-title-md--font-weight: 700;
+    --text-label-lg: 16px;
+    --text-label-lg--line-height: 32px;
+    --text-label-lg--font-weight: 500;
+    --text-label-md: 14px;
+    --text-label-md--line-height: 28px;
+    --text-label-md--font-weight: 500;
+    --text-label-sm: 12px;
+    --text-label-sm--line-height: 24px;
+    --text-label-sm--font-weight: 500;
+    --text-body-md: 14px;
+    --text-body-md--line-height: 28px;
+    --text-body-md--font-weight: 400;
+    --text-body-sm: 12px;
+    --text-body-sm--line-height: 24px;
+    --text-body-sm--font-weight: 400;
+    --color-chat-background: var(--color-surface);
+    --color-chat-surface: var(--color-surface-variant);
+    --color-chat-surface-3: var(--color-surface-variant-3);
+    --color-chat-on-background: var(--color-on-surface);
+    --color-chat-primary: var(--color-primary);
+    --color-chat-outline-variant: var(--color-outline-variant);
+    --color-chat-warning: var(--color-warning);
+    --color-chat-error: var(--color-error);
+    --color-chat-success: var(--color-secondary);
+    --color-chat-muted: oklab(15.0939% .00116904 -.0108064 / .65);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .vue-chat {
+      --color-chat-muted: color-mix(in oklab,
+    var(--color-chat-on-background) 65%,
+    transparent);
+    }
+  }
+
+  .vue-chat {
+    --color-chat-bubble: var(--color-chat-background);
+    --color-chat-bubble-mine: var(--color-chat-primary);
+  }
+
+  @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-background));
+    }
+  }
+
+  .vue-chat {
+    --font-chat-family: "Vazirmatn", system-ui, sans-serif;
+    --text-chat-base: 14px;
+    --text-chat-base--line-height: 24px;
+    --text-chat-base--font-weight: 400;
+  }
+}
+
+@layer base {
+  :where(.vue-chat, .vue-chat *) {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(.vue-chat) {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    -webkit-tap-highlight-color: transparent;
+    line-height: 1.5;
+  }
+
+  :where(.vue-chat) :where(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  :where(.vue-chat) :where(a) {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+
+  :where(.vue-chat) :where(b, strong) {
+    font-weight: bolder;
+  }
+
+  :where(.vue-chat) :where(ol, ul, menu) {
+    list-style: none;
+  }
+
+  :where(.vue-chat) :where(img, svg, video, canvas, audio, iframe, embed, object) {
+    vertical-align: middle;
+    display: block;
+  }
+
+  :where(.vue-chat) :where(img, video) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  :where(.vue-chat) :where(button, input, select, optgroup, textarea) {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :where(.vue-chat) ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+
+  :where(.vue-chat) ::placeholder {
+    opacity: 1;
+    color: currentColor;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat) ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  :where(.vue-chat) :where(textarea) {
+    resize: vertical;
+  }
+
+  :where(.vue-chat) :where([hidden]:not([hidden="until-found"])) {
+    display: none !important;
+  }
+
+  .dark .vue-chat {
+    --color-primary: var(--p-primary-color, var(--color-primary-400));
+    --color-on-primary: var(--p-primary-contrast-color, var(--color-black-900));
+    --color-on-primary-container: var(--color-primary-900);
+    --color-primary-container: var(--color-primary-100);
+    --color-accent: var(--color-accent-blue-dark);
+    --color-secondary: var(--color-secondary-400);
+    --color-on-secondary: var(--color-black-900);
+    --color-secondary-container: var(--color-secondary-900);
+    --color-on-secondary-container: var(--color-secondary-100);
+    --color-warning: var(--color-warning-400);
+    --color-on-warning: var(--color-black-900);
+    --color-warning-container: var(--color-warning-900);
+    --color-on-warning-container: var(--color-warning-100);
+    --color-error: var(--color-error-400);
+    --color-on-error: var(--color-error-900);
+    --color-error-container: var(--color-error-900);
+    --color-on-error-container: var(--color-error-100);
+    --color-surface: var(--color-black-600);
+    --color-on-surface: #fff;
+    --color-surface-variant: var(--color-black-500);
+    --color-on-surface-variant: var(--color-gray-50);
+    --color-surface-variant-2: var(--color-black-400);
+    --color-surface-variant-3: var(--color-black-300);
+    --color-outline: var(--color-gray-800);
+    --color-outline-variant: var(--color-gray-900);
+    --color-chat-secondary: var(--color-secondary-400);
+    --color-chat-warning: var(--color-warning-400);
+    --color-chat-error: var(--color-error-400);
+    --color-chat-success: var(--color-secondary-400);
+    --color-chat-muted: oklab(15.0939% .00116904 -.0108064 / .7);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark .vue-chat {
+      --color-chat-muted: color-mix(in oklab,
+      var(--color-chat-on-background) 70%,
+      transparent);
+    }
+  }
+
+  .dark .vue-chat {
+    --color-chat-bubble: oklab(89.6816% .000786974 -.00336433);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark .vue-chat {
+      --color-chat-bubble: color-mix(in oklab,
+      var(--color-chat-on-background) 10%,
+      var(--color-chat-surface));
+    }
+  }
+
+  .dark .vue-chat {
+    --color-chat-bubble-mine: var(--color-chat-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark .vue-chat {
+      --color-chat-bubble-mine: color-mix(in oklab,
+      var(--color-chat-primary) 22%,
+      var(--color-chat-background));
+    }
+  }
+
+  .dark .vue-chat {
+    --background-image-diamond-surface: radial-gradient(circle at 70% 0%,
+      var(--color-gray-50),
+      var(--color-gray-200));
+  }
+}
+
+@layer components;
+
+@layer utilities {
+  :where(.vue-chat, .vue-chat *).\!pointer-events-none {
+    pointer-events: none !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).pointer-events-auto {
+    pointer-events: auto;
+  }
+
+  :where(.vue-chat, .vue-chat *).pointer-events-none {
+    pointer-events: none;
+  }
+
+  :where(.vue-chat, .vue-chat *).visible {
+    visibility: visible;
+  }
+
+  :where(.vue-chat, .vue-chat *).absolute {
+    position: absolute;
+  }
+
+  :where(.vue-chat, .vue-chat *).absolute\! {
+    position: absolute !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).fixed {
+    position: fixed;
+  }
+
+  :where(.vue-chat, .vue-chat *).relative {
+    position: relative;
+  }
+
+  :where(.vue-chat, .vue-chat *).inset-0 {
+    inset: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).end-2 {
+    inset-inline-end: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).end-3 {
+    inset-inline-end: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).-top-2 {
+    top: calc(var(--spacing) * -2);
+  }
+
+  :where(.vue-chat, .vue-chat *).-top-20 {
+    top: calc(var(--spacing) * -20);
+  }
+
+  :where(.vue-chat, .vue-chat *).top-0 {
+    top: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).top-1\/2 {
+    top: 50%;
+  }
+
+  :where(.vue-chat, .vue-chat *).top-3 {
+    top: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).top-12 {
+    top: calc(var(--spacing) * 12);
+  }
+
+  :where(.vue-chat, .vue-chat *).right-0 {
+    right: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).right-3 {
+    right: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).bottom-0 {
+    bottom: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).left-0 {
+    left: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).left-1\/2 {
+    left: 50%;
+  }
+
+  :where(.vue-chat, .vue-chat *).left-2 {
+    left: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).left-3 {
+    left: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).left-6 {
+    left: calc(var(--spacing) * 6);
+  }
+
+  :where(.vue-chat, .vue-chat *).z-0 {
+    z-index: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).z-10 {
+    z-index: 10;
+  }
+
+  :where(.vue-chat, .vue-chat *).z-20 {
+    z-index: 20;
+  }
+
+  :where(.vue-chat, .vue-chat *).z-30 {
+    z-index: 30;
+  }
+
+  :where(.vue-chat, .vue-chat *).z-40 {
+    z-index: 40;
+  }
+
+  :where(.vue-chat, .vue-chat *).z-50 {
+    z-index: 50;
+  }
+
+  :where(.vue-chat, .vue-chat *).z-9999 {
+    z-index: 9999;
+  }
+
+  :where(.vue-chat, .vue-chat *).z-\[60\] {
+    z-index: 60;
+  }
+
+  :where(.vue-chat, .vue-chat *).z-\[1001\] {
+    z-index: 1001;
+  }
+
+  :where(.vue-chat, .vue-chat *).container {
+    width: 100%;
+  }
+
+  @media (min-width: 40rem) {
+    :where(.vue-chat, .vue-chat *).container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    :where(.vue-chat, .vue-chat *).container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    :where(.vue-chat, .vue-chat *).container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(.vue-chat, .vue-chat *).container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    :where(.vue-chat, .vue-chat *).container {
+      max-width: 96rem;
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).m-0\! {
+    margin: 0 !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).m-4 {
+    margin: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).mx-0\.5 {
+    margin-inline: calc(var(--spacing) * .5);
+  }
+
+  :where(.vue-chat, .vue-chat *).mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).mx-auto {
+    margin-inline: auto;
+  }
+
+  :where(.vue-chat, .vue-chat *).ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).mt-0\.5 {
+    margin-top: calc(var(--spacing) * .5);
+  }
+
+  :where(.vue-chat, .vue-chat *).mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+
+  :where(.vue-chat, .vue-chat *).mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * .5);
+  }
+
+  :where(.vue-chat, .vue-chat *).mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).ml-1 {
+    margin-left: var(--spacing);
+  }
+
+  :where(.vue-chat, .vue-chat *).line-clamp-1 {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  :where(.vue-chat, .vue-chat *).block {
+    display: block;
+  }
+
+  :where(.vue-chat, .vue-chat *).flex {
+    display: flex;
+  }
+
+  :where(.vue-chat, .vue-chat *).grid {
+    display: grid;
+  }
+
+  :where(.vue-chat, .vue-chat *).hidden {
+    display: none;
+  }
+
+  :where(.vue-chat, .vue-chat *).hidden\! {
+    display: none !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).inline {
+    display: inline;
+  }
+
+  :where(.vue-chat, .vue-chat *).inline-block {
+    display: inline-block;
+  }
+
+  :where(.vue-chat, .vue-chat *).aspect-square {
+    aspect-ratio: 1;
+  }
+
+  :where(.vue-chat, .vue-chat *).aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-11\! {
+    width: calc(var(--spacing) * 11) !important;
+    height: calc(var(--spacing) * 11) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).size-16 {
+    width: calc(var(--spacing) * 16);
+    height: calc(var(--spacing) * 16);
+  }
+
+  :where(.vue-chat, .vue-chat *).size-full {
+    width: 100%;
+    height: 100%;
+  }
+
+  :where(.vue-chat, .vue-chat *).size-full\! {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).h-0 {
+    height: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).h-0\.5 {
+    height: calc(var(--spacing) * .5);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-12\.5 {
+    height: calc(var(--spacing) * 12.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-19 {
+    height: calc(var(--spacing) * 19);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-21 {
+    height: calc(var(--spacing) * 21);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-25 {
+    height: calc(var(--spacing) * 25);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-29 {
+    height: calc(var(--spacing) * 29);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-36 {
+    height: calc(var(--spacing) * 36);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-40 {
+    height: calc(var(--spacing) * 40);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-40\.5 {
+    height: calc(var(--spacing) * 40.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-50 {
+    height: calc(var(--spacing) * 50);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-54\.5 {
+    height: calc(var(--spacing) * 54.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-57\.5 {
+    height: calc(var(--spacing) * 57.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-60\.5 {
+    height: calc(var(--spacing) * 60.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).h-\[60dvh\] {
+    height: 60dvh;
+  }
+
+  :where(.vue-chat, .vue-chat *).h-\[132px\] {
+    height: 132px;
+  }
+
+  :where(.vue-chat, .vue-chat *).h-dvh {
+    height: 100dvh;
+  }
+
+  :where(.vue-chat, .vue-chat *).h-full {
+    height: 100%;
+  }
+
+  :where(.vue-chat, .vue-chat *).max-h-0 {
+    max-height: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).max-h-40 {
+    max-height: calc(var(--spacing) * 40);
+  }
+
+  :where(.vue-chat, .vue-chat *).max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
+
+  :where(.vue-chat, .vue-chat *).max-h-109 {
+    max-height: calc(var(--spacing) * 109);
+  }
+
+  :where(.vue-chat, .vue-chat *).max-h-250 {
+    max-height: calc(var(--spacing) * 250);
+  }
+
+  :where(.vue-chat, .vue-chat *).max-h-\[144px\] {
+    max-height: 144px;
+  }
+
+  :where(.vue-chat, .vue-chat *).max-h-full {
+    max-height: 100%;
+  }
+
+  :where(.vue-chat, .vue-chat *).min-h-0 {
+    min-height: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
+
+  :where(.vue-chat, .vue-chat *).min-h-13 {
+    min-height: calc(var(--spacing) * 13);
+  }
+
+  :where(.vue-chat, .vue-chat *).min-h-19 {
+    min-height: calc(var(--spacing) * 19);
+  }
+
+  :where(.vue-chat, .vue-chat *).min-h-117 {
+    min-height: calc(var(--spacing) * 117);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-0 {
+    width: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).w-0\.5 {
+    width: calc(var(--spacing) * .5);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-1\/2 {
+    width: 50%;
+  }
+
+  :where(.vue-chat, .vue-chat *).w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-11 {
+    width: calc(var(--spacing) * 11);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-14 {
+    width: calc(var(--spacing) * 14);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-15\.5 {
+    width: calc(var(--spacing) * 15.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-25 {
+    width: calc(var(--spacing) * 25);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-50 {
+    width: calc(var(--spacing) * 50);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-54\.5 {
+    width: calc(var(--spacing) * 54.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-55 {
+    width: calc(var(--spacing) * 55);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-57\.5 {
+    width: calc(var(--spacing) * 57.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-60\.5 {
+    width: calc(var(--spacing) * 60.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-70 {
+    width: calc(var(--spacing) * 70);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-85 {
+    width: calc(var(--spacing) * 85);
+  }
+
+  :where(.vue-chat, .vue-chat *).w-\[200\%\] {
+    width: 200%;
+  }
+
+  :where(.vue-chat, .vue-chat *).w-\[236px\] {
+    width: 236px;
+  }
+
+  :where(.vue-chat, .vue-chat *).w-auto {
+    width: auto;
+  }
+
+  :where(.vue-chat, .vue-chat *).w-dvw {
+    width: 100dvw;
+  }
+
+  :where(.vue-chat, .vue-chat *).w-full {
+    width: 100%;
+  }
+
+  :where(.vue-chat, .vue-chat *).max-w-4\/5 {
+    max-width: 80%;
+  }
+
+  :where(.vue-chat, .vue-chat *).max-w-75 {
+    max-width: calc(var(--spacing) * 75);
+  }
+
+  :where(.vue-chat, .vue-chat *).max-w-dvw {
+    max-width: 100dvw;
+  }
+
+  :where(.vue-chat, .vue-chat *).max-w-full {
+    max-width: 100%;
+  }
+
+  :where(.vue-chat, .vue-chat *).min-w-0 {
+    min-width: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).min-w-12 {
+    min-width: calc(var(--spacing) * 12);
+  }
+
+  :where(.vue-chat, .vue-chat *).min-w-20 {
+    min-width: calc(var(--spacing) * 20);
+  }
+
+  :where(.vue-chat, .vue-chat *).flex-1 {
+    flex: 1;
+  }
+
+  :where(.vue-chat, .vue-chat *).shrink {
+    flex-shrink: 1;
+  }
+
+  :where(.vue-chat, .vue-chat *).shrink-0 {
+    flex-shrink: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).origin-bottom {
+    transform-origin: bottom;
+  }
+
+  :where(.vue-chat, .vue-chat *).-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).translate-x-0 {
+    --tw-translate-x: 0;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).-translate-y-2 {
+    --tw-translate-y: calc(var(--spacing) * -2);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).-translate-y-10 {
+    --tw-translate-y: calc(var(--spacing) * -10);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).translate-y-0 {
+    --tw-translate-y: 0;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).translate-y-1\/4 {
+    --tw-translate-y: calc(1 / 4 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).scale-0 {
+    --tw-scale-x: 0%;
+    --tw-scale-y: 0%;
+    --tw-scale-z: 0%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).scale-75 {
+    --tw-scale-x: 75%;
+    --tw-scale-y: 75%;
+    --tw-scale-z: 75%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).-rotate-90 {
+    rotate: -90deg;
+  }
+
+  :where(.vue-chat, .vue-chat *).transform {
+    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+  }
+
+  :where(.vue-chat, .vue-chat *).\!animate-pulse {
+    animation: var(--animate-pulse) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).animate-bounce {
+    animation: var(--animate-bounce);
+  }
+
+  :where(.vue-chat, .vue-chat *).animate-ping {
+    animation: var(--animate-ping);
+  }
+
+  :where(.vue-chat, .vue-chat *).animate-pulse {
+    animation: var(--animate-pulse);
+  }
+
+  :where(.vue-chat, .vue-chat *).cursor-default {
+    cursor: default;
+  }
+
+  :where(.vue-chat, .vue-chat *).cursor-move {
+    cursor: move;
+  }
+
+  :where(.vue-chat, .vue-chat *).cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  :where(.vue-chat, .vue-chat *).cursor-pointer {
+    cursor: pointer;
+  }
+
+  :where(.vue-chat, .vue-chat *).cursor-text {
+    cursor: text;
+  }
+
+  :where(.vue-chat, .vue-chat *).touch-none {
+    touch-action: none;
+  }
+
+  :where(.vue-chat, .vue-chat *).resize {
+    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-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :where(.vue-chat, .vue-chat *).flex-col {
+    flex-direction: column;
+  }
+
+  :where(.vue-chat, .vue-chat *).flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  :where(.vue-chat, .vue-chat *).items-center {
+    align-items: center;
+  }
+
+  :where(.vue-chat, .vue-chat *).items-end {
+    align-items: flex-end;
+  }
+
+  :where(.vue-chat, .vue-chat *).justify-between {
+    justify-content: space-between;
+  }
+
+  :where(.vue-chat, .vue-chat *).justify-center {
+    justify-content: center;
+  }
+
+  :where(.vue-chat, .vue-chat *).justify-end {
+    justify-content: flex-end;
+  }
+
+  :where(.vue-chat, .vue-chat *).justify-start {
+    justify-content: flex-start;
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-1 {
+    gap: var(--spacing);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-0 {
+    column-gap: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-1 {
+    column-gap: var(--spacing);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-1\.5 {
+    column-gap: calc(var(--spacing) * 1.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-2\.5 {
+    column-gap: calc(var(--spacing) * 2.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-3 {
+    column-gap: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-3\! {
+    column-gap: calc(var(--spacing) * 3) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-4\.5 {
+    column-gap: calc(var(--spacing) * 4.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-x-5 {
+    column-gap: calc(var(--spacing) * 5);
+  }
+
+  :where(.vue-chat, .vue-chat *):where(.-space-x-1 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-y-0\.5 {
+    row-gap: calc(var(--spacing) * .5);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-y-0\.5\! {
+    row-gap: calc(var(--spacing) * .5) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-y-1 {
+    row-gap: var(--spacing);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-y-1\.5 {
+    row-gap: calc(var(--spacing) * 1.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-y-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-y-2\.5 {
+    row-gap: calc(var(--spacing) * 2.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-y-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-y-4 {
+    row-gap: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).gap-y-5 {
+    row-gap: calc(var(--spacing) * 5);
+  }
+
+  :where(.vue-chat, .vue-chat *).truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  :where(.vue-chat, .vue-chat *).overflow-hidden {
+    overflow: hidden;
+  }
+
+  :where(.vue-chat, .vue-chat *).overflow-visible {
+    overflow: visible;
+  }
+
+  :where(.vue-chat, .vue-chat *).overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  :where(.vue-chat, .vue-chat *).overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  :where(.vue-chat, .vue-chat *).\!rounded {
+    border-radius: .25rem !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded {
+    border-radius: .25rem;
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-full {
+    border-radius: 3.40282e38px;
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-md {
+    border-radius: var(--radius-md);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-ss-md {
+    border-start-start-radius: var(--radius-md);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-se-md {
+    border-start-end-radius: var(--radius-md);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-ee-md {
+    border-end-end-radius: var(--radius-md);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-ee-xs {
+    border-end-end-radius: var(--radius-xs);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-es-md {
+    border-end-start-radius: var(--radius-md);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-es-xs {
+    border-end-start-radius: var(--radius-xs);
+  }
+
+  :where(.vue-chat, .vue-chat *).rounded-b-none\! {
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  :where(.vue-chat, .vue-chat *).border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+
+  :where(.vue-chat, .vue-chat *).border-s-2 {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 2px;
+  }
+
+  :where(.vue-chat, .vue-chat *).border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+
+  :where(.vue-chat, .vue-chat *).border-b {
+    border-bottom-style: var(--tw-border-style);
+    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;
+  }
+
+  :where(.vue-chat, .vue-chat *).border-chat-background {
+    border-color: var(--color-chat-background);
+  }
+
+  :where(.vue-chat, .vue-chat *).border-chat-outline-variant {
+    border-color: var(--color-chat-outline-variant);
+  }
+
+  :where(.vue-chat, .vue-chat *).border-chat-primary, :where(.vue-chat, .vue-chat *).border-chat-primary\/0 {
+    border-color: var(--color-chat-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).border-chat-primary\/0 {
+      border-color: color-mix(in oklab, var(--color-chat-primary) 0%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).border-white\/10 {
+    border-color: #ffffff1a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).border-white\/10 {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).border-s-chat-primary {
+    border-inline-start-color: var(--color-chat-primary);
+  }
+
+  :where(.vue-chat, .vue-chat *).border-t-\[\#2C2C2E\] {
+    border-top-color: #2c2c2e;
+  }
+
+  :where(.vue-chat, .vue-chat *).border-t-chat-outline-variant {
+    border-top-color: var(--color-chat-outline-variant);
+  }
+
+  :where(.vue-chat, .vue-chat *).border-t-outline-variant {
+    border-top-color: var(--color-outline-variant);
+  }
+
+  :where(.vue-chat, .vue-chat *).border-b-chat-outline-variant {
+    border-bottom-color: var(--color-chat-outline-variant);
+  }
+
+  :where(.vue-chat, .vue-chat *).\!bg-surface-variant-2 {
+    background-color: var(--color-surface-variant-2) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-\[\#1C1E22\] {
+    background-color: #1c1e22;
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-black-500 {
+    background-color: var(--color-black-500);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-black-600 {
+    background-color: var(--color-black-600);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-black\/30 {
+    background-color: #0000004d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-black\/30 {
+      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-black\/40 {
+    background-color: #0006;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-black\/40 {
+      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-black\/45 {
+    background-color: #00000073;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-black\/45 {
+      background-color: color-mix(in oklab, var(--color-black) 45%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-background {
+    background-color: var(--color-chat-background);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-background\/85 {
+    background-color: #ffffffd9;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-background\/85 {
+      background-color: color-mix(in oklab, var(--color-chat-background) 85%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-bubble {
+    background-color: var(--color-chat-bubble);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-bubble-mine {
+    background-color: var(--color-chat-bubble-mine);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-error {
+    background-color: var(--color-chat-error);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-error\/10 {
+    background-color: #e52b161a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-error\/10 {
+      background-color: color-mix(in oklab, var(--color-chat-error) 10%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-on-background {
+    background-color: var(--color-chat-on-background);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-on-background\/10 {
+    background-color: #0a0b101a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-on-background\/10 {
+      background-color: color-mix(in oklab, var(--color-chat-on-background) 10%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-primary {
+    background-color: var(--color-chat-primary);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-primary\/10\! {
+    background-color: var(--color-chat-primary) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-primary\/10\! {
+      background-color: color-mix(in oklab, var(--color-chat-primary) 10%, transparent) !important;
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-success\/10 {
+    background-color: #2ac4841a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-success\/10 {
+      background-color: color-mix(in oklab, var(--color-chat-success) 10%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-chat-surface {
+    background-color: var(--color-chat-surface);
+  }
+
+  :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\/30 {
+    background-color: #f8f8fa4d;
+  }
+
+  @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-warning\/10 {
+    background-color: #d09f461a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-chat-warning\/10 {
+      background-color: color-mix(in oklab, var(--color-chat-warning) 10%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-error {
+    background-color: var(--color-error);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-green-400 {
+    background-color: var(--color-green-400);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-on-surface\/0 {
+    background-color: #0000;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-on-surface\/0 {
+      background-color: color-mix(in oklab, var(--color-on-surface) 0%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-on-surface\/5 {
+    background-color: #0a0b100d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-on-surface\/5 {
+      background-color: color-mix(in oklab, var(--color-on-surface) 5%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-on-surface\/10 {
+    background-color: #0a0b101a;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).bg-on-surface\/10 {
+      background-color: color-mix(in oklab, var(--color-on-surface) 10%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-surface {
+    background-color: var(--color-surface);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-surface-variant-2 {
+    background-color: var(--color-surface-variant-2);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-transparent {
+    background-color: #0000;
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-white {
+    background-color: var(--color-white);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-gradient-to-br {
+    --tw-gradient-position: to bottom right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-gradient-to-t {
+    --tw-gradient-position: to top in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-diamond-black {
+    background-image: var(--background-image-diamond-black);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-diamond-error {
+    background-image: var(--background-image-diamond-error);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-diamond-primary-secondary {
+    background-image: var(--background-image-diamond-primary-secondary);
+  }
+
+  :where(.vue-chat, .vue-chat *).bg-gradient-primary-secondary {
+    background-image: var(--background-image-gradient-primary-secondary);
+  }
+
+  :where(.vue-chat, .vue-chat *).from-black\/50 {
+    --tw-gradient-from: #00000080;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).from-black\/50 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).from-black\/50 {
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  :where(.vue-chat, .vue-chat *).from-black\/60 {
+    --tw-gradient-from: #0009;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).from-black\/60 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 60%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).from-black\/60 {
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  :where(.vue-chat, .vue-chat *).from-blue-500\/5 {
+    --tw-gradient-from: #3080ff0d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).from-blue-500\/5 {
+      --tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 5%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).from-blue-500\/5 {
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  :where(.vue-chat, .vue-chat *).via-purple-500\/5 {
+    --tw-gradient-via: #ac4bff0d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).via-purple-500\/5 {
+      --tw-gradient-via: color-mix(in oklab, var(--color-purple-500) 5%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).via-purple-500\/5 {
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  :where(.vue-chat, .vue-chat *).via-transparent {
+    --tw-gradient-via: transparent;
+    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+    --tw-gradient-stops: var(--tw-gradient-via-stops);
+  }
+
+  :where(.vue-chat, .vue-chat *).to-black\/20 {
+    --tw-gradient-to: #0003;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).to-black\/20 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).to-black\/20 {
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  :where(.vue-chat, .vue-chat *).to-pink-500\/5 {
+    --tw-gradient-to: #f6339a0d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).to-pink-500\/5 {
+      --tw-gradient-to: color-mix(in oklab, var(--color-pink-500) 5%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).to-pink-500\/5 {
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  :where(.vue-chat, .vue-chat *).to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
+  :where(.vue-chat, .vue-chat *).fill-chat-error {
+    fill: var(--color-chat-error);
+  }
+
+  :where(.vue-chat, .vue-chat *).fill-chat-muted {
+    fill: var(--color-chat-muted);
+  }
+
+  :where(.vue-chat, .vue-chat *).fill-chat-on-background {
+    fill: var(--color-chat-on-background);
+  }
+
+  :where(.vue-chat, .vue-chat *).fill-chat-on-background\/30 {
+    fill: #0a0b104d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).fill-chat-on-background\/30 {
+      fill: color-mix(in oklab, var(--color-chat-on-background) 30%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).fill-chat-primary {
+    fill: var(--color-chat-primary);
+  }
+
+  :where(.vue-chat, .vue-chat *).fill-chat-surface-3 {
+    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);
+  }
+
+  :where(.vue-chat, .vue-chat *).fill-on-surface {
+    fill: var(--color-on-surface);
+  }
+
+  :where(.vue-chat, .vue-chat *).fill-white {
+    fill: var(--color-white);
+  }
+
+  :where(.vue-chat, .vue-chat *).stroke-chat-on-background {
+    stroke: var(--color-chat-on-background);
+  }
+
+  :where(.vue-chat, .vue-chat *).stroke-chat-on-background\/45 {
+    stroke: #0a0b1073;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).stroke-chat-on-background\/45 {
+      stroke: color-mix(in oklab, var(--color-chat-on-background) 45%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).stroke-chat-primary {
+    stroke: var(--color-chat-primary);
+  }
+
+  :where(.vue-chat, .vue-chat *).stroke-white {
+    stroke: var(--color-white);
+  }
+
+  :where(.vue-chat, .vue-chat *).stroke-white\/30 {
+    stroke: #ffffff4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).stroke-white\/30 {
+      stroke: color-mix(in oklab, var(--color-white) 30%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).object-contain {
+    object-fit: contain;
+  }
+
+  :where(.vue-chat, .vue-chat *).object-cover {
+    object-fit: cover;
+  }
+
+  :where(.vue-chat, .vue-chat *).p-0 {
+    padding: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).p-0\! {
+    padding: 0 !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).p-0\.5 {
+    padding: calc(var(--spacing) * .5);
+  }
+
+  :where(.vue-chat, .vue-chat *).p-1 {
+    padding: var(--spacing);
+  }
+
+  :where(.vue-chat, .vue-chat *).p-1\! {
+    padding: var(--spacing) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).px-1 {
+    padding-inline: var(--spacing);
+  }
+
+  :where(.vue-chat, .vue-chat *).px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+
+  :where(.vue-chat, .vue-chat *).px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+
+  :where(.vue-chat, .vue-chat *).py-0\.5 {
+    padding-block: calc(var(--spacing) * .5);
+  }
+
+  :where(.vue-chat, .vue-chat *).py-1 {
+    padding-block: var(--spacing);
+  }
+
+  :where(.vue-chat, .vue-chat *).py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  :where(.vue-chat, .vue-chat *).py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+
+  :where(.vue-chat, .vue-chat *).py-26 {
+    padding-block: calc(var(--spacing) * 26);
+  }
+
+  :where(.vue-chat, .vue-chat *).pt-0 {
+    padding-top: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).pt-0\.5 {
+    padding-top: calc(var(--spacing) * .5);
+  }
+
+  :where(.vue-chat, .vue-chat *).pt-1 {
+    padding-top: var(--spacing);
+  }
+
+  :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);
+  }
+
+  :where(.vue-chat, .vue-chat *).pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
+
+  :where(.vue-chat, .vue-chat *).pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+
+  :where(.vue-chat, .vue-chat *).pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).pb-1 {
+    padding-bottom: var(--spacing);
+  }
+
+  :where(.vue-chat, .vue-chat *).pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+
+  :where(.vue-chat, .vue-chat *).pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+
+  :where(.vue-chat, .vue-chat *).pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-center {
+    text-align: center;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-left {
+    text-align: left;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-start {
+    text-align: start;
+  }
+
+  :where(.vue-chat, .vue-chat *).align-middle {
+    vertical-align: middle;
+  }
+
+  :where(.vue-chat, .vue-chat *).font-chat-family {
+    font-family: var(--font-chat-family);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-body-md {
+    font-size: var(--text-body-md);
+    line-height: var(--tw-leading, var(--text-body-md--line-height));
+    font-weight: var(--tw-font-weight, var(--text-body-md--font-weight));
+  }
+
+  :where(.vue-chat, .vue-chat *).text-body-sm {
+    font-size: var(--text-body-sm);
+    line-height: var(--tw-leading, var(--text-body-sm--line-height));
+    font-weight: var(--tw-font-weight, var(--text-body-sm--font-weight));
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-base {
+    font-size: var(--text-chat-base);
+    line-height: var(--tw-leading, var(--text-chat-base--line-height));
+    font-weight: var(--tw-font-weight, var(--text-chat-base--font-weight));
+  }
+
+  :where(.vue-chat, .vue-chat *).text-label-lg {
+    font-size: var(--text-label-lg);
+    line-height: var(--tw-leading, var(--text-label-lg--line-height));
+    font-weight: var(--tw-font-weight, var(--text-label-lg--font-weight));
+  }
+
+  :where(.vue-chat, .vue-chat *).text-label-md {
+    font-size: var(--text-label-md);
+    line-height: var(--tw-leading, var(--text-label-md--line-height));
+    font-weight: var(--tw-font-weight, var(--text-label-md--font-weight));
+  }
+
+  :where(.vue-chat, .vue-chat *).text-label-sm {
+    font-size: var(--text-label-sm);
+    line-height: var(--tw-leading, var(--text-label-sm--line-height));
+    font-weight: var(--tw-font-weight, var(--text-label-sm--font-weight));
+  }
+
+  :where(.vue-chat, .vue-chat *).text-title-lg {
+    font-size: var(--text-title-lg);
+    line-height: var(--tw-leading, var(--text-title-lg--line-height));
+    font-weight: var(--tw-font-weight, var(--text-title-lg--font-weight));
+  }
+
+  :where(.vue-chat, .vue-chat *).text-title-md {
+    font-size: var(--text-title-md);
+    line-height: var(--tw-leading, var(--text-title-md--line-height));
+    font-weight: var(--tw-font-weight, var(--text-title-md--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;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+
+  :where(.vue-chat, .vue-chat *).text-\[7px\] {
+    font-size: 7px;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-\[10px\]\! {
+    font-size: 10px !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-\[11px\] {
+    font-size: 11px;
+  }
+
+  :where(.vue-chat, .vue-chat *).leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+
+  :where(.vue-chat, .vue-chat *).leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
+
+  :where(.vue-chat, .vue-chat *).leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+
+  :where(.vue-chat, .vue-chat *).font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
+  :where(.vue-chat, .vue-chat *).font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where(.vue-chat, .vue-chat *).font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :where(.vue-chat, .vue-chat *).tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-wrap {
+    text-wrap: wrap;
+  }
+
+  :where(.vue-chat, .vue-chat *).break-words, :where(.vue-chat, .vue-chat *).wrap-break-word {
+    overflow-wrap: break-word;
+  }
+
+  :where(.vue-chat, .vue-chat *).break-all {
+    word-break: break-all;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  :where(.vue-chat, .vue-chat *).whitespace-nowrap {
+    white-space: nowrap;
+  }
+
+  :where(.vue-chat, .vue-chat *).whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  :where(.vue-chat, .vue-chat *).\!text-transparent {
+    color: #0000 !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-error {
+    color: var(--color-chat-error);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-error\! {
+    color: var(--color-chat-error) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-muted {
+    color: var(--color-chat-muted);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-on-background {
+    color: var(--color-chat-on-background);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-on-background\/60 {
+    color: #0a0b1099;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).text-chat-on-background\/60 {
+      color: color-mix(in oklab, var(--color-chat-on-background) 60%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-on-background\/70 {
+    color: #0a0b10b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).text-chat-on-background\/70 {
+      color: color-mix(in oklab, var(--color-chat-on-background) 70%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-primary {
+    color: var(--color-chat-primary);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-primary\! {
+    color: var(--color-chat-primary) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-success {
+    color: var(--color-chat-success);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-chat-warning {
+    color: var(--color-chat-warning);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-error {
+    color: var(--color-error);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-on-surface {
+    color: var(--color-on-surface);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-on-surface\/70 {
+    color: #0a0b10b3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).text-on-surface\/70 {
+      color: color-mix(in oklab, var(--color-on-surface) 70%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).text-white {
+    color: var(--color-white);
+  }
+
+  :where(.vue-chat, .vue-chat *).text-white\! {
+    color: var(--color-white) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).text-white\/90 {
+    color: #ffffffe6;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.vue-chat, .vue-chat *).text-white\/90 {
+      color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).uppercase {
+    text-transform: uppercase;
+  }
+
+  :where(.vue-chat, .vue-chat *).tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
+  }
+
+  :where(.vue-chat, .vue-chat *).opacity-0 {
+    opacity: 0;
+  }
+
+  :where(.vue-chat, .vue-chat *).opacity-30 {
+    opacity: .3;
+  }
+
+  :where(.vue-chat, .vue-chat *).opacity-60 {
+    opacity: .6;
+  }
+
+  :where(.vue-chat, .vue-chat *).opacity-100 {
+    opacity: 1;
+  }
+
+  :where(.vue-chat, .vue-chat *).shadow-floating {
+    --tw-shadow: 0 8px 24px 0 var(--tw-shadow-color, #959da533);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  :where(.vue-chat, .vue-chat *).shadow-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 {
+    --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);
+  }
+
+  :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, );
+  }
+
+  :where(.vue-chat, .vue-chat *).backdrop-blur-lg {
+    --tw-backdrop-blur: blur(var(--blur-lg));
+    -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-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, );
+    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-sm {
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -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 *).\!transition-all {
+    transition-property: all !important;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
+    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  :where(.vue-chat, .vue-chat *).transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  :where(.vue-chat, .vue-chat *).transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  :where(.vue-chat, .vue-chat *).transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  :where(.vue-chat, .vue-chat *).transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
+  :where(.vue-chat, .vue-chat *).transition-none {
+    transition-property: none;
+  }
+
+  :where(.vue-chat, .vue-chat *).\!duration-300 {
+    --tw-duration: .3s !important;
+    transition-duration: .3s !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).duration-75 {
+    --tw-duration: 75ms;
+    transition-duration: 75ms;
+  }
+
+  :where(.vue-chat, .vue-chat *).duration-100 {
+    --tw-duration: .1s;
+    transition-duration: .1s;
+  }
+
+  :where(.vue-chat, .vue-chat *).duration-200 {
+    --tw-duration: .2s;
+    transition-duration: .2s;
+  }
+
+  :where(.vue-chat, .vue-chat *).duration-300 {
+    --tw-duration: .3s;
+    transition-duration: .3s;
+  }
+
+  :where(.vue-chat, .vue-chat *).duration-500 {
+    --tw-duration: .5s;
+    transition-duration: .5s;
+  }
+
+  :where(.vue-chat, .vue-chat *).\!ease-in-out {
+    --tw-ease: var(--ease-in-out) !important;
+    transition-timing-function: var(--ease-in-out) !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).ease-\[cubic-bezier\(0\.33\,1\,0\.68\,1\)\] {
+    --tw-ease: cubic-bezier(.33,1,.68,1);
+    transition-timing-function: cubic-bezier(.33, 1, .68, 1);
+  }
+
+  :where(.vue-chat, .vue-chat *).ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+
+  :where(.vue-chat, .vue-chat *).ease-linear {
+    --tw-ease: linear;
+    transition-timing-function: linear;
+  }
+
+  :where(.vue-chat, .vue-chat *).ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+
+  :where(.vue-chat, .vue-chat *).will-change-\[opacity\,background-color\] {
+    will-change: opacity,background-color;
+  }
+
+  :where(.vue-chat, .vue-chat *).\!select-none {
+    -webkit-user-select: none !important;
+    user-select: none !important;
+  }
+
+  :where(.vue-chat, .vue-chat *).outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+
+  :where(.vue-chat, .vue-chat *).select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  :where(.vue-chat, .vue-chat *).select-text {
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
+  :where(.vue-chat, .vue-chat *).\[vue-chat\:call\] {
+    vue-chat: call;
+  }
+
+  @media (hover: hover) {
+    :where(.vue-chat, .vue-chat *).group-hover\:opacity-100:is(:where(.group):hover *) {
+      opacity: 1;
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).empty\:before\:text-chat-muted:empty:before {
+    content: var(--tw-content);
+    color: var(--color-chat-muted);
+  }
+
+  :where(.vue-chat, .vue-chat *).empty\:before\:content-\[attr\(data-placeholder\)\]:empty:before {
+    --tw-content: attr(data-placeholder);
+    content: var(--tw-content);
+  }
+
+  :where(.vue-chat, .vue-chat *).active\:scale-95:active {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  @media (min-width: 40rem) {
+    :where(.vue-chat, .vue-chat *).sm\:h-20 {
+      height: calc(var(--spacing) * 20);
+    }
+
+    :where(.vue-chat, .vue-chat *).sm\:gap-x-3 {
+      column-gap: calc(var(--spacing) * 3);
+    }
+  }
+
+  @media (min-width: 48rem) {
+    :where(.vue-chat, .vue-chat *).md\:absolute {
+      position: absolute;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:block {
+      display: block;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:flex {
+      display: flex;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:hidden {
+      display: none;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:hidden\! {
+      display: none !important;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:inline-flex\! {
+      display: inline-flex !important;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:h-0 {
+      height: 0;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:h-14 {
+      height: calc(var(--spacing) * 14);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:h-20 {
+      height: calc(var(--spacing) * 20);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:h-\[75vh\] {
+      height: 75vh;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:h-auto {
+      height: auto;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:w-14 {
+      width: calc(var(--spacing) * 14);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:w-80 {
+      width: calc(var(--spacing) * 80);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:w-\[70vw\] {
+      width: 70vw;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:w-full {
+      width: 100%;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:max-w-85 {
+      max-width: calc(var(--spacing) * 85);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:max-w-135 {
+      max-width: calc(var(--spacing) * 135);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:-translate-y-full {
+      --tw-translate-y: -100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:grid-cols-\[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\:rounded-xl {
+      border-radius: var(--radius-xl);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:bg-transparent {
+      background-color: #0000;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:px-2 {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:py-4 {
+      padding-block: calc(var(--spacing) * 4);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:pt-16\.5 {
+      padding-top: calc(var(--spacing) * 16.5);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:pr-4 {
+      padding-right: 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, );
+      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 *).md\:transition-all {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:duration-300 {
+      --tw-duration: .3s;
+      transition-duration: .3s;
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:ease-in-out {
+      --tw-ease: var(--ease-in-out);
+      transition-timing-function: var(--ease-in-out);
+    }
+
+    :where(.vue-chat, .vue-chat *).md\:select-auto {
+      -webkit-user-select: auto;
+      user-select: auto;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    :where(.vue-chat, .vue-chat *).lg\:flex {
+      display: flex;
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).ltr\:-translate-x-1\/2:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).ltr\:rotate-180:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    rotate: 180deg;
+  }
+
+  :where(.vue-chat, .vue-chat *).ltr\:border-r:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+
+  :where(.vue-chat, .vue-chat *).ltr\:border-r-chat-surface:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    border-right-color: var(--color-chat-surface);
+  }
+
+  :where(.vue-chat, .vue-chat *).rtl\:translate-x-1\/2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    --tw-translate-x: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).rtl\:-scale-x-100:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    --tw-scale-x: calc(100% * -1);
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
+  :where(.vue-chat, .vue-chat *).rtl\:rotate-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    rotate: 0deg;
+  }
+
+  :where(.vue-chat, .vue-chat *).rtl\:border-l:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+
+  :where(.vue-chat, .vue-chat *).rtl\:border-l-chat-surface:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    border-left-color: var(--color-chat-surface);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :where(.vue-chat, .vue-chat *).dark\:\!bg-surface-variant-2 {
+      background-color: var(--color-surface-variant-2) !important;
+    }
+
+    :where(.vue-chat, .vue-chat *).dark\:stroke-chat-background {
+      stroke: var(--color-chat-background);
+    }
+  }
+
+  :where(.vue-chat, .vue-chat *).\[\&\>\*\]\:\!opacity-0 > * {
+    opacity: 0 !important;
+  }
+}
+
+:where(.vue-chat, .vue-chat *).glass-effect {
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  background: linear-gradient(135deg, #ffffff1a, #ffffff0d);
+  border: 1px solid #fff3;
+  position: relative;
+  overflow: hidden;
+}
+
+:where(.vue-chat, .vue-chat *).glass-effect:before {
+  content: "";
+  pointer-events: none;
+  background: linear-gradient(135deg, #fff6 0%, #fff0 100%);
+  position: absolute;
+  inset: 0;
+}
+
+:where(.vue-chat, .vue-chat *)[class*="backdrop-blur"] {
+  backface-visibility: hidden;
+  perspective: 1000px;
+  will-change: backdrop-filter;
+  transform: translateZ(0);
+}
+
+:where(.vue-chat, .vue-chat *).hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+:where(.vue-chat, .vue-chat *).chat-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #0a0b1038 transparent;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :where(.vue-chat, .vue-chat *).chat-scrollbar {
+    scrollbar-color: color-mix(in oklab, var(--color-chat-on-background) 22%, transparent) transparent;
+  }
+}
+
+:where(.vue-chat, .vue-chat *).chat-scrollbar {
+  scrollbar-gutter: stable;
+}
+
+:where(.vue-chat, .vue-chat *).emoji-glyph {
+  font-variant-emoji: emoji;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, Twemoji Mozilla, EmojiOne Color, Android Emoji, sans-serif;
+}
+
+:where(.vue-chat, .vue-chat *).border-diamond {
+  background-image: linear-gradient(var(--color-surface), var(--color-surface)), var(--background-image-diamond-primary-secondary) !important;
+  background-origin: border-box !important;
+  background-clip: padding-box, border-box !important;
+  border-color: #0000 !important;
+}
+
+:where(.vue-chat):where(.p-dialog, .p-contextmenu, .p-menu, .p-popover, .p-toast, .p-galleria-mask) {
+  font-family: var(--font-chat-family);
+}
+
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-leading {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ease {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
+
+@keyframes ping {
+  75%, 100% {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
+    transform: translateY(-25%);
+  }
+
+  50% {
+    animation-timing-function: cubic-bezier(0, 0, .2, 1);
+    transform: none;
+  }
+}
+
+/* Styles remain exactly the same */
+:where(.vue-chat, .vue-chat *).flip-vertical[data-v-4f4d9098] {
+  transform: scaleY(-1);
+  will-change: transform;
+}
+:where(.vue-chat, .vue-chat *)[data-index][data-v-4f4d9098] {
+  will-change: transform;
+  backface-visibility: hidden;
+}
+@keyframes slide-in-right-4f4d9098 {
+0% {
+    opacity: 0;
+    transform: scaleY(-1) translateX(30px);
+}
+100% {
+    opacity: 1;
+    transform: scaleY(-1) translateX(0);
+}
+}
+@keyframes slide-in-left-4f4d9098 {
+0% {
+    opacity: 0;
+    transform: scaleY(-1) translateX(-30px);
+}
+100% {
+    opacity: 1;
+    transform: scaleY(-1) translateX(0);
+}
+}
+:where(.vue-chat, .vue-chat *).animate-slide-right[data-v-4f4d9098] {
+  animation: slide-in-right-4f4d9098 300ms ease-out forwards;
+  will-change: transform, opacity;
+}
+:where(.vue-chat, .vue-chat *).animate-slide-left[data-v-4f4d9098] {
+  animation: slide-in-left-4f4d9098 300ms ease-out forwards;
+  will-change: transform, opacity;
+}
+:where(.vue-chat, .vue-chat *)#list[data-v-4f4d9098] {
+  will-change: padding-top;
+}
+:where(.vue-chat, .vue-chat *).animate-request-in[data-v-4f4d9098] {
+  animation: request-in-4f4d9098 0.4s ease-out forwards;
+  overflow: hidden;
+  transform: scaleY(-1);
+}
+@keyframes request-in-4f4d9098 {
+0% {
+    opacity: 0;
+    max-height: 0;
+    transform: scaleY(-1) translateY(10px);
+}
+100% {
+    opacity: 1;
+    max-height: 1000px;
+    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;
+}