open-chat-studio-widget 0.4.7 → 0.5.0

package/dist/collection/components/ocs-chat/ocs-chat.css

@@ -1,1081 +1,6 @@
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}/*
-! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
-*//*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-html,
-:host {
-  line-height: 1.5; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-  -moz-tab-size: 4; /* 3 */
-  -o-tab-size: 4;
-     tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
-  font-feature-settings: normal; /* 5 */
-  font-variation-settings: normal; /* 6 */
-  -webkit-tap-highlight-color: transparent; /* 7 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0; /* 1 */
-  color: inherit; /* 2 */
-  border-top-width: 1px; /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
-  font-feature-settings: normal; /* 2 */
-  font-variation-settings: normal; /* 3 */
-  font-size: 1em; /* 4 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0; /* 1 */
-  border-color: inherit; /* 2 */
-  border-collapse: collapse; /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-feature-settings: inherit; /* 1 */
-  font-variation-settings: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  font-weight: inherit; /* 1 */
-  line-height: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
-  color: inherit; /* 1 */
-  margin: 0; /* 2 */
-  padding: 0; /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-button,
-input:where([type='button']),
-input:where([type='reset']),
-input:where([type='submit']) {
-  -webkit-appearance: button; /* 1 */
-  background-color: transparent; /* 2 */
-  background-image: none; /* 2 */
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Reset default styling for dialogs.
-*/
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::-moz-placeholder, textarea::-moz-placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
-}
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1; /* 1 */
-  color: #9ca3af; /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role="button"] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden]:where(:not([hidden="until-found"])) {
-  display: none;
-}
-#ocs-chat-window {
-    z-index: var(--chat-z-index);
-    font-size: var(--chat-window-font-size);
-  }
-.starter-question {
-  border-radius: 0.5rem;
-  text-align: left;
-  transition-duration: 200ms;
-    padding: 0.75em;
-    background-color: var(--starter-question-bg-color);
-    border: 1px solid var(--starter-question-border-color);
-    color: var(--starter-question-text-color);
-}
-.starter-question:hover {
-    background-color: var(--starter-question-bg-hover-color);
-    border-color: var(--starter-question-border-hover-color);
-  }
-.chat-btn-text,
-  .chat-btn-icon {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  border-radius: 0.5rem;
-  border-width: 0px;
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: all;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-.chat-btn-text:hover,
-  .chat-btn-icon:hover {
-  --tw-scale-x: 1.05;
-  --tw-scale-y: 1.05;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.chat-btn-text,
-  .chat-btn-icon {
-    background-color: var(--button-background-color, white);
-    border: 1px solid var(--button-border-color);
-    z-index: var(--chat-z-index, 50);
-    font-size: var(--button-font-size);
-    padding: 0.5em;
-  }
-.chat-btn-text:hover, .chat-btn-icon:hover {
-    color: var(--button-text-color-hover, #1d4ed8);
-    border: 1px solid var(--button-border-color-hover);
-  }
-/* Button with text and icon */
-.chat-btn-text {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-    color: var(--button-text-color, #111827);
-}
-.chat-btn-text span {
-  white-space: nowrap;
-  font-weight: 500;
-}
-.chat-btn-text img {
-  flex-shrink: 0;
-  -o-object-fit: contain;
-     object-fit: contain;
-    width: var(--button-icon-size);
-    height: var(--button-icon-size);
-}
-/* Icon-only button */
-.chat-btn-icon {
-  }
-.chat-btn-icon img {
-  -o-object-fit: contain;
-     object-fit: contain;
-    width: var(--button-icon-size);
-    height: var(--button-icon-size);
-}
-.chat-btn-text.round,
-  .chat-btn-icon.round {
-  border-radius: 9999px;
-}
-/* Error message styling */
-.error-message {
-    padding: 0.5em;
-    color: var(--error-text-color);
-  }
-/* Chat window positioning classes */
-.chat-window-fullscreen {
-  position: fixed;
-  inset: 0px;
-  z-index: 9999;
-  display: flex;
-  height: 100%;
-  max-height: 100%;
-  width: 100%;
-  flex-direction: column;
-  overflow: hidden;
-  border-radius: 0px;
-  border-width: 0px;
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-    background-color: var(--chat-window-bg-color);
-    max-width: var(--chat-window-fullscreen-width);
-}
-.chat-window-normal {
-  position: fixed;
-  display: flex;
-  height: 100vh;
-  min-height: 300px;
-  width: 100vw;
-  min-width: 300px;
-  max-width: 1024px;
-  flex-direction: column;
-  overflow: hidden;
-  border-radius: 0.5rem;
-}
-@media (min-width: 640px) {
-
-  .chat-window-normal {
-    height: var(--chat-window-height);
-    width: var(--chat-window-width);
-  }
-}
-.chat-window-normal {
-    background-color: var(--chat-window-bg-color);
-    border: 1px solid var(--chat-window-border-color);
-  }
-.chat-window-dragging {
-  cursor: grabbing;
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-.chat-window-normal:not(.chat-window-dragging) {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-}
-/* Header/drag bar classes */
-.chat-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-    padding: 0.5em;
-    background-color: var(--header-bg-color);
-    border-bottom: 1px solid var(--header-border-color);
-    font-size: var(--header-font-size);
-}
-.header-text {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-    font-size: var(--header-text-font-size);
-    color: var(--header-text-color);
-}
-.chat-header:hover,
-  .chat-header:active {
-    background-color: var(--header-bg-hover-color);
-  }
-.chat-header-draggable {
-  cursor: grab;
-}
-.chat-header-dragging {
-  cursor: grabbing;
-}
-.drag-indicator {
-  display: none;
-}
-@media (min-width: 640px) {
-
-  .drag-indicator {
-    display: flex;
-  }
-}
-.drag-dots {
-  pointer-events: none;
-  margin-left: 2px;
-  display: flex;
-  gap: 2px;
-}
-.header-buttons {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-/* Header button classes */
-.header-button {
-  border-radius: 0.375rem;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-    padding: 0.375em;
-    color: var(--header-button-text-color);
-}
-.header-button svg {
-    width: var(--header-button-icon-size);
-    height: var(--header-button-icon-size);
-  }
-.header-button:hover {
-    background-color: var(--header-button-bg-hover-color);
-  }
-.fullscreen-button {
-  display: none;
-}
-@media (min-width: 640px) {
-
-  .fullscreen-button {
-    display: block;
-  }
-}
-/* Chat content area */
-.chat-content {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  overflow: hidden;
-}
-/* Loading state */
-.loading-container {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: center;
-}
-.loading-text {
-    margin-left: 2px;
-    color: var(--loading-text-color);
-  }
-/* Messages container */
-.messages-container {
-  flex-grow: 1;
-}
-.messages-container > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-.messages-container {
-  overflow-y: auto;
-}
-.messages-container::-webkit-scrollbar {
-  width: 0.375rem;
-}
-.messages-container::-webkit-scrollbar-track {
-  border-radius: 0.25rem;
-  background-color: var(--scrollbar-track-color);
-}
-.messages-container::-webkit-scrollbar-thumb {
-  border-radius: 0.25rem;
-  background-color: var(--scrollbar-thumb-color);
-}
-.messages-container::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-hover-color);
-}
-.messages-container {
-    padding: 1em;
-  }
-/* Message bubbles */
-.message-row {
-  display: flex;
-}
-.message-row-user {
-  justify-content: flex-end;
-}
-.message-row-assistant {
-  justify-content: flex-start;
-}
-.message-bubble {
-  border-radius: 0.5rem;
-    padding: 0.5em 1em;
-}
-.message-bubble-user {
-    background-color: var(--message-user-bg-color);
-    color: var(--message-user-text-color);
-  }
-.message-bubble-assistant {
-    background-color: var(--message-assistant-bg-color);
-    color: var(--message-assistant-text-color);
-  }
-.message-bubble-system {
-    background-color: var(--message-system-bg-color);
-    color: var(--message-system-text-color);
-  }
-.message-timestamp {
-  margin-top: 4px;
-  opacity: 0.7;
-    font-size: var(--chat-window-font-size-sm);
-}
-.message-attachments {
-  margin-top: 8px;
-}
-.message-attachments > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
-}
-/* Welcome messages */
-.welcome-messages > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-/* Typing indicator */
-.typing-indicator {
-  height: 0.375rem;
-  width: 100%;
-  overflow: hidden;
-}
-.typing-progress {
-  height: 100%;
-  width: 100%;
-  transform-origin: 0% 50%;
-}
-@keyframes progress {
-
-  0% {
-    transform:  translateX(0) scaleX(0);
-  }
-
-  10% {
-    transform: translateX(0) scaleX(0.3);
-  }
-
-  50% {
-    transform: translateX(100%) scaleX(0.3);
-  }
-
-  90% {
-    transform: translateX(0) scaleX(0.3);
-  }
-
-  100% {
-    transform: translateX(0) scaleX(0);
-  }
-}
-.typing-progress {
-  animation: progress 3s infinite linear;
-  border-radius: 0.5rem;
-    background-color: var(--typing-progress-bg-color);
-}
-.typing-text {
-  width: 100%;
-  justify-content: center;
-  opacity: 0.7;
-    font-size: var(--chat-window-font-size-sm);
-}
-@keyframes dots {
-
-  0%, 20% {
-    color: rgba(0,0,0,0);
-    text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
-  }
-
-  40% {
-    color: black;
-    text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
-  }
-
-  60% {
-    text-shadow: .25em 0 0 black, .5em 0 0 rgba(0,0,0,0);
-  }
-
-  80%, 100% {
-    text-shadow: .25em 0 0 black, .5em 0 0 black;
-  }
-}
-.typing-dots {
-  animation: dots 1s steps(5, end) infinite;
-}
-.typing-dots:after {
-  content: ' .';
-}
-/* Starter questions */
-.starter-questions > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-.starter-questions {
-    padding: 1em;
-  }
-.starter-question-row {
-  display: flex;
-  justify-content: flex-end;
-}
-/* Input area */
-.input-area {
-    padding: 1em 1em 0 1em;
-    background-color: var(--input-bg-color);
-    border-top: 1px solid var(--input-border-color);
-  }
-.input-container {
-  display: flex;
-  gap: 8px;
-}
-.message-textarea {
-  flex-grow: 1;
-  resize: none;
-  border-radius: 0.375rem;
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
-}
-.message-textarea:focus {
-  outline-color: #93c5fd;
-}
-.message-textarea {
-    background-color: var(--input-bg-color);
-    padding: 0.5em 0.75em;
-    color: var(--input-text-color);
-    border: 1px solid var(--input-border-color);
-  }
-.message-textarea:focus {
-    outline-color: var(--input-outline-focus-color);
-  }
-.send-button {
-  border-radius: 0.375rem;
-  font-weight: 500;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-    padding: 0.5em 1em;
-}
-.send-button-enabled {
-    background-color: var(--send-button-bg-color);
-    color: var(--send-button-text-color);
-  }
-.send-button-enabled:hover {
-    background-color: var(--send-button-bg-hover-color);
-  }
-.send-button-disabled {
-  cursor: not-allowed;
-    background-color: var(--send-button-bg-disabled-color);
-    color: var(--send-button-text-disabled-color);
-}
-/* Confirmation dialog */
-.confirmation-overlay {
-  position: fixed;
-  inset: 0px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-    background-color: var(--confirmation-overlay-bg-color);
-    z-index: 9999;
-}
-.confirmation-dialog {
-  margin-left: 1rem;
-  margin-right: 1rem;
-  width: 100%;
-  max-width: 24rem;
-    background-color: var(--confirmation-dialog-bg-color);
-    border: 1px solid var(--confirmation-dialog-border-color);
-    border-radius: 0.75em;
-    box-shadow: 0 0.625em 1.5625em var(--confirmation-dialog-shadow-color);
-}
-.confirmation-content {
-    padding: 1.5em;
-  }
-.confirmation-title {
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-    color: var(--confirmation-title-color);
-    font-size: var(--confirmation-title-font-size);
-}
-.confirmation-message {
-  margin-bottom: 1rem;
-    color: var(--confirmation-message-color);
-    font-size: var(--confirmation-message-font-size);
-}
-.confirmation-buttons {
-  display: flex;
-  justify-content: flex-end;
-    gap: 0.75em;
-}
-.confirmation-button {
-  border-radius: 0.375rem;
-  font-weight: 500;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-    padding: 0.5em 1em;
-}
-.confirmation-button-cancel {
-    background-color: var(--confirmation-button-cancel-bg-color);
-    color: var(--confirmation-button-cancel-text-color);
-  }
-.confirmation-button-cancel:hover {
-    background-color: var(--confirmation-button-cancel-bg-hover-color);
-  }
-.confirmation-button-confirm {
-    background-color: var(--confirmation-button-confirm-bg-color);
-    color: var(--confirmation-button-confirm-text-color);
-  }
-.confirmation-button-confirm:hover {
-    background-color: var(--confirmation-button-confirm-bg-hover-color);
-  }
-.\!visible {
-  visibility: visible !important;
-}
-.visible {
-  visibility: visible;
-}
-.static {
-  position: static;
-}
-.relative {
-  position: relative;
-}
-.flex {
-  display: flex;
-}
-.table {
-  display: table;
-}
-.hidden {
-  display: none;
-}
-.w-full {
-  width: 100%;
-}
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.resize {
-  resize: both;
-}
-.items-center {
-  align-items: center;
-}
-.justify-center {
-  justify-content: center;
-}
-.gap-\[0\.5em\] {
-  gap: 0.5em;
-}
-.space-y-\[0\.25em\] > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.25em * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25em * var(--tw-space-y-reverse));
-}
-.border {
-  border-width: 1px;
-}
-.py-\[2px\] {
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-.text-\[0\.8em\] {
-  font-size: 0.8em;
-}
-.font-light {
-  font-weight: 300;
-}
-.text-slate-500 {
-  --tw-text-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
-}
-.underline {
-  text-decoration-line: underline;
-}
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-.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);
-}
-:host {
-  /**
+@layer utilities {
+  :host {
+    /**
     * @prop --chat-z-index: Z-index for chat widget (50)
     *
     * @prop --button-background-color: Button background color (#ffffff)
@@ -1192,868 +117,598 @@ video {
     *
     * @prop --message-attachment-icon-size: Message attachment icon size (1em)
     */
-  /* Global variables */
-  --chat-z-index: 50;
-
-  /* Button variables */
-  --button-background-color: #ffffff;
-  --button-background-color-hover: #f3f4f6;
-  --button-text-color: #111827;
-  --button-text-color-hover: #1d4ed8;
-  --button-border-color: #d1d5db;
-  --button-border-color-hover: #6b7280;
-  --button-font-size: 1em; /* text-sm */
-  --button-icon-size: 1.5em;
-
-  /* Chat window variables */
-  --chat-window-height: 60%;
-  --chat-window-width: 25%;
-  --chat-window-fullscreen-width: 80%;
-  --chat-window-bg-color: #ffffff;
-  --chat-window-border-color: #d1d5db;
-  --chat-window-shadow-color: rgba(0, 0, 0, 0.1);
-  --chat-window-font-size: 0.875em; /* text-sm */
-  --chat-window-font-size-sm: 0.75em; /* text-xs */
-
-  /* Header variables */
-  --header-bg-color: transparent;
-  --header-bg-hover-color: #f9fafb;
-  --header-border-color: #f3f4f6;
-  --header-button-text-color: #6b7280;
-  --header-button-bg-hover-color: #f3f4f6;
-  --header-font-size: 1em;
-  --header-text-font-size: 1em;
-  --header-text-color: #525762;
-  --header-button-icon-size: 1.5em;
-
-  /* Starter question variables */
-  --starter-question-bg-color: transparent;
-  --starter-question-bg-hover-color: #eff6ff;
-  --starter-question-text-color: #3b82f6;
-  --starter-question-border-color: #3b82f6;
-  --starter-question-border-hover-color: #2563eb;
-
-  /* Message bubble variables */
-  --message-user-bg-color: #e4edfb;
-  --message-user-text-color: #1f2937;
-  --message-user-link-color: #155dfc;
-
-  --message-assistant-bg-color: #eae7e8;
-  --message-assistant-text-color: var(--message-user-text-color);
-  --message-assistant-link-color: var(--message-user-link-color);
-
-  --message-system-bg-color: #fbe4f8;
-  --message-system-text-color: var(--message-user-text-color);
-  --message-system-link-color: var(--message-user-link-color);
-
-  --message-timestamp-color: rgba(255, 255, 255, 0.7);
-  --message-timestamp-assistant-color: rgba(75, 85, 99, 0.7);
-
-  /* Input area variables */
-  --input-bg-color: transparent;
-  --input-border-color: #d1d5db;
-  --input-text-color: #111827;
-  --input-placeholder-color: #6b7280;
-  --input-outline-focus-color: #3b82f6;
-
-  /* Send button variables */
-  --send-button-bg-color: #3b82f6;
-  --send-button-bg-hover-color: #2563eb;
-  --send-button-text-color: #ffffff;
-  --send-button-bg-disabled-color: #d1d5db;
-  --send-button-text-disabled-color: #6b7280;
-
-  /* Loading variables */
-  --loading-text-color: #6b7280;
-  --loading-spinner-track-color: #e5e7eb;
-  --loading-spinner-fill-color: #3b82f6;
-  --loading-spinner-size: 1.25em;
-
-  /* Typing indicator variables */
-  --typing-progress-bg-color: #ade3ff;
-
-  /* Scrollbar variables */
-  --scrollbar-track-color: #f3f4f6;
-  --scrollbar-thumb-color: #d1d5db;
-  --scrollbar-thumb-hover-color: #9ca3af;
-
-  /* Error variables */
-  --error-text-color: #ef4444;
-  --success-text-color: #10b981; /* Complementary green to existing blue palette */;
-
-  /* Markdown code variables */
-  --code-bg-user-color: color-mix(in srgb, var(--message-user-bg-color) 80%, white 20%);
-  --code-text-user-color: var(--message-user-text-color);
-  --code-border-user-color: color-mix(in srgb, var(--message-user-bg-color) 90%, black 10%);
-  --code-bg-assistant-color: color-mix(in srgb, var(--message-assistant-bg-color) 50%, white 50%);
-  --code-text-assistant-color: var(--message-assistant-text-color);
-  --code-border-assistant-color: color-mix(in srgb, var(--message-assistant-bg-color) 90%, black 10%);;
-
-  --confirmation-overlay-bg-color: rgba(0, 0, 0, 0.5);
-  --confirmation-dialog-bg-color: var(--chat-window-bg-color);
-  --confirmation-dialog-border-color: var(--chat-window-border-color);
-  --confirmation-dialog-shadow-color: var(--chat-window-shadow-color);
-  --confirmation-title-color: #111827;
-  --confirmation-title-font-size: 1.125em;
-  --confirmation-message-color: var(--loading-text-color);
-  --confirmation-message-font-size: 1em;
-  --confirmation-button-cancel-bg-color: var(--button-background-color-hover);
-  --confirmation-button-cancel-bg-hover-color: #e5e7eb;
-  --confirmation-button-cancel-text-color: var(--header-button-text-color);
-  --confirmation-button-confirm-bg-color: var(--error-text-color);
-  --confirmation-button-confirm-bg-hover-color: var(--error-text-color);
-  --confirmation-button-confirm-text-color: var(--send-button-text-color);
-
-  /* File upload variables */
-  --file-attachment-button-bg-color: transparent;
-  --file-attachment-button-bg-hover-color: var(--header-button-bg-hover-color); /* #f3f4f6 */
-  --file-attachment-button-text-color: var(--header-button-text-color); /* #6b7280 */
-  --file-attachment-button-text-disabled-color: var(--send-button-text-disabled-color); /* #6b7280 */
-
-  /* Selected files variables */
-  --selected-files-bg-color: var(--chat-window-bg-color); /* transparent */
-  --selected-files-border-color: var(--header-border-color); /* #f3f4f6 */
-
-  /* Selected file item variables */
-  --selected-file-bg-color: var(--message-system-bg-color); /* #f3f4f6 */
-
-  /* Selected file text variables */
-  --selected-file-font-size: var(--chat-window-font-size-sm);
-  --selected-file-name-color: var(--message-assistant-text-color); /* #1f2937 */
-  --selected-file-size-color: var(--input-placeholder-color); /* #6b7280 */
-
-  /* Selected file icon variables */
-  --selected-file-icon-size: 1.25em;
-  --selected-file-remove-icon-color: var(--error-text-color); /* #ef4444 */
-  --selected-file-remove-icon-hover-color: #dc2626; /* Darker red for hover */
-
-  /* Message attachment variables */
-  --message-attachment-icon-size: 1em;
-
-  display: block;
-  position: fixed;
-  right: 30px;
-  bottom: 30px;
+    /* Global variables */
+    --chat-z-index: 50;
+
+    /* Button variables */
+    --button-background-color: #ffffff;
+    --button-background-color-hover: #f3f4f6;
+    --button-text-color: #111827;
+    --button-text-color-hover: #1d4ed8;
+    --button-border-color: #d1d5db;
+    --button-border-color-hover: #6b7280;
+    --button-font-size: 1em; /* text-sm */
+    --button-icon-size: 1.5em;
+
+    /* Chat window variables */
+    --chat-window-height: 60%;
+    --chat-window-width: 25%;
+    --chat-window-fullscreen-width: 80%;
+    --chat-window-bg-color: #ffffff;
+    --chat-window-border-color: #d1d5db;
+    --chat-window-shadow-color: rgba(0, 0, 0, 0.1);
+    --chat-window-font-size: 0.875em; /* text-sm */
+    --chat-window-font-size-sm: 0.75em; /* text-xs */
+
+    /* Header variables */
+    --header-bg-color: transparent;
+    --header-bg-hover-color: #f9fafb;
+    --header-border-color: #f3f4f6;
+    --header-button-text-color: #6b7280;
+    --header-button-bg-hover-color: #f3f4f6;
+    --header-font-size: 1em;
+    --header-text-font-size: 1em;
+    --header-text-color: #525762;
+    --header-button-icon-size: 1.5em;
+
+    /* Starter question variables */
+    --starter-question-bg-color: transparent;
+    --starter-question-bg-hover-color: #eff6ff;
+    --starter-question-text-color: #3b82f6;
+    --starter-question-border-color: #3b82f6;
+    --starter-question-border-hover-color: #2563eb;
+
+    /* Message bubble variables */
+    --message-user-bg-color: #e4edfb;
+    --message-user-text-color: #1f2937;
+    --message-user-link-color: #155dfc;
+
+    --message-assistant-bg-color: #eae7e8;
+    --message-assistant-text-color: var(--message-user-text-color);
+    --message-assistant-link-color: var(--message-user-link-color);
+
+    --message-system-bg-color: #fbe4f8;
+    --message-system-text-color: var(--message-user-text-color);
+    --message-system-link-color: var(--message-user-link-color);
+
+    --message-timestamp-color: rgba(255, 255, 255, 0.7);
+    --message-timestamp-assistant-color: rgba(75, 85, 99, 0.7);
+
+    /* Input area variables */
+    --input-bg-color: transparent;
+    --input-border-color: #d1d5db;
+    --input-text-color: #111827;
+    --input-placeholder-color: #6b7280;
+    --input-outline-focus-color: #3b82f6;
+
+    /* Send button variables */
+    --send-button-bg-color: #3b82f6;
+    --send-button-bg-hover-color: #2563eb;
+    --send-button-text-color: #ffffff;
+    --send-button-bg-disabled-color: #d1d5db;
+    --send-button-text-disabled-color: #6b7280;
+
+    /* Loading variables */
+    --loading-text-color: #6b7280;
+    --loading-spinner-track-color: #e5e7eb;
+    --loading-spinner-fill-color: #3b82f6;
+    --loading-spinner-size: 1.25em;
+
+    /* Typing indicator variables */
+    --typing-progress-bg-color: #ade3ff;
+
+    /* Scrollbar variables */
+    --scrollbar-track-color: #f3f4f6;
+    --scrollbar-thumb-color: #d1d5db;
+    --scrollbar-thumb-hover-color: #9ca3af;
+
+    /* Error variables */
+    --error-text-color: #ef4444;
+    --success-text-color: #10b981; /* Complementary green to existing blue palette */
+
+    /* Markdown code variables */
+    --code-bg-user-color: color-mix(
+      in srgb,
+      var(--message-user-bg-color) 80%,
+      white 20%
+    );
+    --code-text-user-color: var(--message-user-text-color);
+    --code-border-user-color: color-mix(
+      in srgb,
+      var(--message-user-bg-color) 90%,
+      black 10%
+    );
+    --code-bg-assistant-color: color-mix(
+      in srgb,
+      var(--message-assistant-bg-color) 50%,
+      white 50%
+    );
+    --code-text-assistant-color: var(--message-assistant-text-color);
+    --code-border-assistant-color: color-mix(
+      in srgb,
+      var(--message-assistant-bg-color) 90%,
+      black 10%
+    );
+
+    --confirmation-overlay-bg-color: rgba(0, 0, 0, 0.5);
+    --confirmation-dialog-bg-color: var(--chat-window-bg-color);
+    --confirmation-dialog-border-color: var(--chat-window-border-color);
+    --confirmation-dialog-shadow-color: var(--chat-window-shadow-color);
+    --confirmation-title-color: #111827;
+    --confirmation-title-font-size: 1.125em;
+    --confirmation-message-color: var(--loading-text-color);
+    --confirmation-message-font-size: 1em;
+    --confirmation-button-cancel-bg-color: var(--button-background-color-hover);
+    --confirmation-button-cancel-bg-hover-color: #e5e7eb;
+    --confirmation-button-cancel-text-color: var(--header-button-text-color);
+    --confirmation-button-confirm-bg-color: var(--error-text-color);
+    --confirmation-button-confirm-bg-hover-color: var(--error-text-color);
+    --confirmation-button-confirm-text-color: var(--send-button-text-color);
+
+    /* File upload variables */
+    --file-attachment-button-bg-color: transparent;
+    --file-attachment-button-bg-hover-color: var(
+      --header-button-bg-hover-color
+    ); /* #f3f4f6 */
+    --file-attachment-button-text-color: var(
+      --header-button-text-color
+    ); /* #6b7280 */
+    --file-attachment-button-text-disabled-color: var(
+      --send-button-text-disabled-color
+    ); /* #6b7280 */
+
+    /* Selected files variables */
+    --selected-files-bg-color: var(--chat-window-bg-color); /* transparent */
+    --selected-files-border-color: var(--header-border-color); /* #f3f4f6 */
+
+    /* Selected file item variables */
+    --selected-file-bg-color: var(--message-system-bg-color); /* #f3f4f6 */
+
+    /* Selected file text variables */
+    --selected-file-font-size: var(--chat-window-font-size-sm);
+    --selected-file-name-color: var(
+      --message-assistant-text-color
+    ); /* #1f2937 */
+    --selected-file-size-color: var(--input-placeholder-color); /* #6b7280 */
+
+    /* Selected file icon variables */
+    --selected-file-icon-size: 1.25em;
+    --selected-file-remove-icon-color: var(--error-text-color); /* #ef4444 */
+    --selected-file-remove-icon-hover-color: #dc2626; /* Darker red for hover */
+
+    /* Message attachment variables */
+    --message-attachment-icon-size: 1em;
+
+    display: block;
+    position: fixed;
+    right: 30px;
+    bottom: 30px;
+  }
+}
+
+@layer components {
+  #ocs-chat-window {
+    z-index: var(--chat-z-index);
+    font-size: var(--chat-window-font-size);
+  }
+
+  .starter-question {
+    @apply text-left rounded-lg duration-200;
+    padding: 0.75em;
+    background-color: var(--starter-question-bg-color);
+    border: 1px solid var(--starter-question-border-color);
+    color: var(--starter-question-text-color);
+
+    &:hover {
+      background-color: var(--starter-question-bg-hover-color);
+      border-color: var(--starter-question-border-hover-color);
+    }
+  }
+
+  .chat-btn-text {
+    @apply shadow-lg border-0 transition-all duration-200 ease-in-out transform hover:scale-105 rounded-lg;
+    background-color: var(--button-background-color, white);
+    border: 1px solid var(--button-border-color);
+    z-index: var(--chat-z-index, 50);
+    font-size: var(--button-font-size);
+    padding: 0.5em;
+
+    &:hover {
+      color: var(--button-text-color-hover, #1d4ed8);
+      border: 1px solid var(--button-border-color-hover);
+    }
+
+    /* Button with text and icon */
+    @apply flex gap-[8px] items-center;
+    color: var(--button-text-color, #111827);
+
+    & span {
+      @apply font-medium whitespace-nowrap;
+    }
+
+    & img {
+      @apply object-contain flex-shrink-0;
+      width: var(--button-icon-size);
+      height: var(--button-icon-size);
+    }
+
+    &.round {
+      @apply rounded-full;
+    }
+  }
+
+  .chat-btn-icon {
+    @apply shadow-lg border-0 transition-all duration-200 ease-in-out transform hover:scale-105 rounded-lg;
+    background-color: var(--button-background-color, white);
+    border: 1px solid var(--button-border-color);
+    z-index: var(--chat-z-index, 50);
+    font-size: var(--button-font-size);
+    padding: 0.5em;
+
+    &:hover {
+      color: var(--button-text-color-hover, #1d4ed8);
+      border: 1px solid var(--button-border-color-hover);
+    }
+
+    /* Icon-only button */
+
+    & img {
+      @apply object-contain;
+      width: var(--button-icon-size);
+      height: var(--button-icon-size);
+    }
+
+    &.round {
+      @apply rounded-full;
+    }
+  }
+
+  .round {
+    &.chat-btn-text {
+      @apply rounded-full;
+    }
+
+    & .chat-btn-icon {
+      @apply rounded-full;
+    }
+  }
+
+  .error-message {
+    /* Error message styling */
+    padding: 0.5em;
+    color: var(--error-text-color);
+  }
+
+  .chat-window-fullscreen {
+    /* Chat window positioning classes */
+    @apply fixed inset-0 w-full h-full max-h-full border-0 shadow-lg transition-shadow duration-200 rounded-none overflow-hidden flex flex-col z-9999;
+    background-color: var(--chat-window-bg-color);
+    max-width: var(--chat-window-fullscreen-width);
+  }
+
+  .chat-window-normal {
+    @apply fixed w-screen h-screen min-h-[300px] min-w-[300px] sm:w-(--chat-window-width) sm:h-(--chat-window-height) max-w-(--breakpoint-lg) rounded-lg overflow-hidden flex flex-col;
+    background-color: var(--chat-window-bg-color);
+    border: 1px solid var(--chat-window-border-color);
+
+    &:not(.chat-window-dragging) {
+      @apply shadow-lg transition-shadow duration-200;
+    }
+  }
+
+  .chat-window-dragging {
+    @apply shadow-2xl cursor-grabbing;
+  }
+
+  .chat-header {
+    /* Header/drag bar classes */
+    @apply flex justify-between items-center transition-colors duration-150;
+    padding: 0.5em;
+    background-color: var(--header-bg-color);
+    border-bottom: 1px solid var(--header-border-color);
+    font-size: var(--header-font-size);
+
+    &:hover {
+      background-color: var(--header-bg-hover-color);
+    }
+
+    &:active {
+      background-color: var(--header-bg-hover-color);
+    }
+  }
+
+  .header-text {
+    @apply flex items-center justify-center;
+    font-size: var(--header-text-font-size);
+    color: var(--header-text-color);
+  }
+
+  .chat-header-draggable {
+    @apply cursor-grab;
+  }
+
+  .chat-header-dragging {
+    @apply cursor-grabbing;
+  }
+
+  .drag-indicator {
+    @apply hidden sm:flex;
+  }
+
+  .drag-dots {
+    @apply flex gap-[2px] ml-[2px] pointer-events-none;
+  }
+
+  .header-buttons {
+    @apply flex gap-[4px] items-center;
+  }
+
+  .header-button {
+    /* Header button classes */
+    @apply rounded-md transition-colors duration-200;
+    padding: 0.375em;
+    color: var(--header-button-text-color);
+
+    & svg {
+      width: var(--header-button-icon-size);
+      height: var(--header-button-icon-size);
+    }
+
+    &:hover {
+      background-color: var(--header-button-bg-hover-color);
+    }
+  }
+
+  .fullscreen-button {
+    @apply hidden sm:block;
+  }
+
+  .chat-content {
+    /* Chat content area */
+    @apply flex flex-col flex-grow overflow-hidden;
+  }
+
+  .loading-container {
+    /* Loading state */
+    @apply flex items-center justify-center flex-grow;
+  }
+
+  .loading-text {
+    margin-left: 2px;
+    color: var(--loading-text-color);
+  }
+
+  .messages-container {
+    /* Messages container */
+    @apply flex-grow overflow-y-auto space-y-2;
+    padding: 1em;
+  }
+
+  .message-row {
+    /* Message bubbles */
+    @apply flex;
+  }
+
+  .message-row-user {
+    @apply justify-end;
+  }
+
+  .message-row-assistant {
+    @apply justify-start;
+  }
+
+  .message-bubble {
+    @apply rounded-lg;
+    padding: 0.5em 1em;
+  }
+
+  .message-bubble-user {
+    background-color: var(--message-user-bg-color);
+    color: var(--message-user-text-color);
+  }
+
+  .message-bubble-assistant {
+    background-color: var(--message-assistant-bg-color);
+    color: var(--message-assistant-text-color);
+  }
+
+  .message-bubble-system {
+    background-color: var(--message-system-bg-color);
+    color: var(--message-system-text-color);
+  }
+
+  .message-timestamp {
+    @apply opacity-70 mt-[4px];
+    font-size: var(--chat-window-font-size-sm);
+  }
+
+  .message-attachments {
+    @apply mt-[8px] space-y-1;
+  }
+
+  .attachment-link {
+    @apply block underline hover:no-underline;
+  }
+
+  .welcome-messages {
+    /* Welcome messages */
+    @apply space-y-2;
+  }
+
+  .typing-indicator {
+    /* Typing indicator */
+    @apply h-1.5 w-full overflow-hidden;
+  }
+
+  .typing-progress {
+    @apply animate-progress w-full h-full origin-left-right rounded-lg;
+    background-color: var(--typing-progress-bg-color);
+  }
+
+  .typing-text {
+    @apply w-full opacity-70 justify-center;
+    font-size: var(--chat-window-font-size-sm);
+  }
+
+  .typing-dots {
+    @apply animate-dots;
+  }
+
+  .starter-questions {
+    /* Starter questions */
+    @apply space-y-2;
+    padding: 1em;
+  }
+
+  .starter-question-row {
+    @apply flex justify-end;
+  }
+
+  .input-area {
+    /* Input area */
+    padding: 1em 1em 0 1em;
+    background-color: var(--input-bg-color);
+    border-top: 1px solid var(--input-border-color);
+  }
+
+  .input-container {
+    @apply flex gap-[8px];
+  }
+
+  .message-textarea {
+    @apply flex-grow border border-gray-300 rounded-md resize-none focus:outline-blue-300;
+    background-color: var(--input-bg-color);
+    padding: 0.5em 0.75em;
+    color: var(--input-text-color);
+    border: 1px solid var(--input-border-color);
+
+    &:focus {
+      outline-color: var(--input-outline-focus-color);
+    }
+  }
+
+  .send-button {
+    @apply rounded-md font-medium transition-colors duration-200;
+    padding: 0.5em 1em;
+  }
+
+  .send-button-enabled {
+    background-color: var(--send-button-bg-color);
+    color: var(--send-button-text-color);
+
+    &:hover {
+      background-color: var(--send-button-bg-hover-color);
+    }
+  }
+
+  .send-button-disabled {
+    @apply cursor-not-allowed;
+    background-color: var(--send-button-bg-disabled-color);
+    color: var(--send-button-text-disabled-color);
+  }
+
+  .confirmation-overlay {
+    /* Confirmation dialog */
+    @apply fixed inset-0 flex items-center justify-center;
+    background-color: var(--confirmation-overlay-bg-color);
+    z-index: 9999;
+  }
+
+  .confirmation-dialog {
+    @apply max-w-sm w-full mx-4;
+    background-color: var(--confirmation-dialog-bg-color);
+    border: 1px solid var(--confirmation-dialog-border-color);
+    border-radius: 0.75em;
+    box-shadow: 0 0.625em 1.5625em var(--confirmation-dialog-shadow-color);
+  }
+
+  .confirmation-content {
+    padding: 1.5em;
+  }
+
+  .confirmation-title {
+    @apply font-semibold mb-2;
+    color: var(--confirmation-title-color);
+    font-size: var(--confirmation-title-font-size);
+  }
+
+  .confirmation-message {
+    @apply mb-4;
+    color: var(--confirmation-message-color);
+    font-size: var(--confirmation-message-font-size);
+  }
+
+  .confirmation-buttons {
+    @apply flex justify-end;
+    gap: 0.75em;
+  }
+
+  .confirmation-button {
+    @apply rounded-md font-medium transition-colors duration-200;
+    padding: 0.5em 1em;
+  }
+
+  .confirmation-button-cancel {
+    background-color: var(--confirmation-button-cancel-bg-color);
+    color: var(--confirmation-button-cancel-text-color);
+
+    &:hover {
+      background-color: var(--confirmation-button-cancel-bg-hover-color);
+    }
+  }
+
+  .confirmation-button-confirm {
+    background-color: var(--confirmation-button-confirm-bg-color);
+    color: var(--confirmation-button-confirm-text-color);
+
+    &:hover {
+      background-color: var(--confirmation-button-confirm-bg-hover-color);
+    }
+  }
 }
+
 textarea {
-  max-height: 8rem;
-  min-height: 2.5rem;
-  resize: none;
-  overflow-y: auto;
-}
-textarea::-webkit-scrollbar {
-  width: 0.375rem;
-}
-textarea::-webkit-scrollbar-track {
-  border-radius: 0.25rem;
-  background-color: var(--scrollbar-track-color);
-}
-textarea::-webkit-scrollbar-thumb {
-  border-radius: 0.25rem;
-  background-color: var(--scrollbar-thumb-color);
-}
-textarea::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-hover-color);
+  @apply min-h-10 max-h-32 resize-none overflow-y-auto;
 }
-@keyframes spin {
 
-  to {
-    transform: rotate(360deg);
-  }
-}
 .loading-spinner {
-  animation: spin 1s linear infinite;
-  border-radius: 9999px;
-  border-width: 2px;
+  @apply border-2 rounded-full animate-spin;
   border-color: var(--loading-spinner-track-color);
   border-top-color: var(--loading-spinner-fill-color);
   width: var(--loading-spinner-size);
   height: var(--loading-spinner-size);
 }
+
 .overflow-y-auto::-webkit-scrollbar {
-  width: 0.375rem;
+  @apply w-1.5 h-1.5;
 }
+
 .overflow-y-auto::-webkit-scrollbar-track {
-  border-radius: 0.25rem;
+  @apply rounded-sm;
   background-color: var(--scrollbar-track-color);
 }
+
 .overflow-y-auto::-webkit-scrollbar-thumb {
-  border-radius: 0.25rem;
+  @apply rounded-sm;
   background-color: var(--scrollbar-thumb-color);
 }
+
 .overflow-y-auto::-webkit-scrollbar-thumb:hover {
   background-color: var(--scrollbar-thumb-hover-color);
 }
+
 /* Markdown content styling for chat messages */
 .chat-markdown {
-  color: var(--tw-prose-body);
-  max-width: 65ch;
-}
-.chat-markdown :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-.chat-markdown :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-lead);
-  font-size: 1.25em;
-  line-height: 1.6;
-  margin-top: 1.2em;
-  margin-bottom: 1.2em;
-}
-.chat-markdown :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-links);
-  text-decoration: underline;
-  font-weight: 500;
-}
-.chat-markdown :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-bold);
-  font-weight: 600;
-}
-.chat-markdown :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-}
-.chat-markdown :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-}
-.chat-markdown :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-}
-.chat-markdown :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: decimal;
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-  padding-inline-start: 1.625em;
-}
-.chat-markdown :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: upper-alpha;
-}
-.chat-markdown :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: lower-alpha;
-}
-.chat-markdown :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: upper-alpha;
-}
-.chat-markdown :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: lower-alpha;
-}
-.chat-markdown :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: upper-roman;
-}
-.chat-markdown :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: lower-roman;
-}
-.chat-markdown :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: upper-roman;
-}
-.chat-markdown :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: lower-roman;
-}
-.chat-markdown :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: decimal;
-}
-.chat-markdown :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  list-style-type: disc;
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-  padding-inline-start: 1.625em;
-}
-.chat-markdown :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
-  font-weight: 400;
-  color: var(--tw-prose-counters);
-}
-.chat-markdown :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
-  color: var(--tw-prose-bullets);
-}
-.chat-markdown :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 600;
-  margin-top: 1.25em;
-}
-.chat-markdown :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  border-color: var(--tw-prose-hr);
-  border-top-width: 1px;
-  margin-top: 3em;
-  margin-bottom: 3em;
-}
-.chat-markdown :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-weight: 500;
-  font-style: italic;
-  color: var(--tw-prose-quotes);
-  border-inline-start-width: 0.25rem;
-  border-inline-start-color: var(--tw-prose-quote-borders);
-  quotes: "\201C""\201D""\2018""\2019";
-  margin-top: 1.6em;
-  margin-bottom: 1.6em;
-  padding-inline-start: 1em;
-}
-.chat-markdown :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
-  content: open-quote;
-}
-.chat-markdown :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
-  content: close-quote;
-}
-.chat-markdown :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 800;
-  font-size: 2.25em;
-  margin-top: 0;
-  margin-bottom: 0.8888889em;
-  line-height: 1.1111111;
-}
-.chat-markdown :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-weight: 900;
-  color: inherit;
-}
-.chat-markdown :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 700;
-  font-size: 1.5em;
-  margin-top: 2em;
-  margin-bottom: 1em;
-  line-height: 1.3333333;
-}
-.chat-markdown :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-weight: 800;
-  color: inherit;
-}
-.chat-markdown :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 600;
-  font-size: 1.25em;
-  margin-top: 1.6em;
-  margin-bottom: 0.6em;
-  line-height: 1.6;
-}
-.chat-markdown :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-weight: 700;
-  color: inherit;
-}
-.chat-markdown :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 600;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  line-height: 1.5;
-}
-.chat-markdown :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-weight: 700;
-  color: inherit;
-}
-.chat-markdown :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-.chat-markdown :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  display: block;
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-.chat-markdown :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-.chat-markdown :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-weight: 500;
-  font-family: inherit;
-  color: var(--tw-prose-kbd);
-  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
-  font-size: 0.875em;
-  border-radius: 0.3125rem;
-  padding-top: 0.1875em;
-  padding-inline-end: 0.375em;
-  padding-bottom: 0.1875em;
-  padding-inline-start: 0.375em;
-}
-.chat-markdown :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-code);
-  font-weight: 600;
-  font-size: 0.875em;
-}
-.chat-markdown :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
-  content: "`";
-}
-.chat-markdown :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
-  content: "`";
-}
-.chat-markdown :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-}
-.chat-markdown :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-}
-.chat-markdown :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-  font-size: 0.875em;
-}
-.chat-markdown :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-  font-size: 0.9em;
-}
-.chat-markdown :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-}
-.chat-markdown :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-}
-.chat-markdown :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: inherit;
-}
-.chat-markdown :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-pre-code);
-  background-color: var(--tw-prose-pre-bg);
-  overflow-x: auto;
-  font-weight: 400;
-  font-size: 0.875em;
-  line-height: 1.7142857;
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-  border-radius: 0.375rem;
-  padding-top: 0.8571429em;
-  padding-inline-end: 1.1428571em;
-  padding-bottom: 0.8571429em;
-  padding-inline-start: 1.1428571em;
-}
-.chat-markdown :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  background-color: transparent;
-  border-width: 0;
-  border-radius: 0;
-  padding: 0;
-  font-weight: inherit;
-  color: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-}
-.chat-markdown :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
-  content: none;
-}
-.chat-markdown :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
-  content: none;
-}
-.chat-markdown :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  width: 100%;
-  table-layout: auto;
-  margin-top: 2em;
-  margin-bottom: 2em;
-  font-size: 0.875em;
-  line-height: 1.7142857;
-}
-.chat-markdown :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  border-bottom-width: 1px;
-  border-bottom-color: var(--tw-prose-th-borders);
-}
-.chat-markdown :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 600;
-  vertical-align: bottom;
-  padding-inline-end: 0.5714286em;
-  padding-bottom: 0.5714286em;
-  padding-inline-start: 0.5714286em;
-}
-.chat-markdown :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  border-bottom-width: 1px;
-  border-bottom-color: var(--tw-prose-td-borders);
-}
-.chat-markdown :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  border-bottom-width: 0;
-}
-.chat-markdown :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  vertical-align: baseline;
-}
-.chat-markdown :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  border-top-width: 1px;
-  border-top-color: var(--tw-prose-th-borders);
-}
-.chat-markdown :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  vertical-align: top;
-}
-.chat-markdown :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  text-align: start;
-}
-.chat-markdown :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.chat-markdown :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  color: var(--tw-prose-captions);
-  font-size: 0.875em;
-  line-height: 1.4285714;
-  margin-top: 0.8571429em;
-}
-.chat-markdown {
-  --tw-prose-body: #374151;
-  --tw-prose-headings: #111827;
-  --tw-prose-lead: #4b5563;
-  --tw-prose-links: #111827;
-  --tw-prose-bold: #111827;
-  --tw-prose-counters: #6b7280;
-  --tw-prose-bullets: #d1d5db;
-  --tw-prose-hr: #e5e7eb;
-  --tw-prose-quotes: #111827;
-  --tw-prose-quote-borders: #e5e7eb;
-  --tw-prose-captions: #6b7280;
-  --tw-prose-kbd: #111827;
-  --tw-prose-kbd-shadows: 17 24 39;
-  --tw-prose-code: #111827;
-  --tw-prose-pre-code: #e5e7eb;
-  --tw-prose-pre-bg: #1f2937;
-  --tw-prose-th-borders: #d1d5db;
-  --tw-prose-td-borders: #e5e7eb;
-  --tw-prose-invert-body: #d1d5db;
-  --tw-prose-invert-headings: #fff;
-  --tw-prose-invert-lead: #9ca3af;
-  --tw-prose-invert-links: #fff;
-  --tw-prose-invert-bold: #fff;
-  --tw-prose-invert-counters: #9ca3af;
-  --tw-prose-invert-bullets: #4b5563;
-  --tw-prose-invert-hr: #374151;
-  --tw-prose-invert-quotes: #f3f4f6;
-  --tw-prose-invert-quote-borders: #374151;
-  --tw-prose-invert-captions: #9ca3af;
-  --tw-prose-invert-kbd: #fff;
-  --tw-prose-invert-kbd-shadows: 255 255 255;
-  --tw-prose-invert-code: #fff;
-  --tw-prose-invert-pre-code: #d1d5db;
-  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
-  --tw-prose-invert-th-borders: #4b5563;
-  --tw-prose-invert-td-borders: #374151;
-  font-size: 1rem;
-  line-height: 1.75;
-}
-.chat-markdown :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.chat-markdown :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-.chat-markdown :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-start: 0.375em;
-}
-.chat-markdown :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-start: 0.375em;
-}
-.chat-markdown :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-.chat-markdown :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.25em;
-}
-.chat-markdown :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-bottom: 1.25em;
-}
-.chat-markdown :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.25em;
-}
-.chat-markdown :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-bottom: 1.25em;
-}
-.chat-markdown :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-.chat-markdown :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-.chat-markdown :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0.5em;
-  padding-inline-start: 1.625em;
-}
-.chat-markdown :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-start: 0;
-}
-.chat-markdown :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-end: 0;
-}
-.chat-markdown :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-top: 0.5714286em;
-  padding-inline-end: 0.5714286em;
-  padding-bottom: 0.5714286em;
-  padding-inline-start: 0.5714286em;
-}
-.chat-markdown :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-start: 0;
-}
-.chat-markdown :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-end: 0;
-}
-.chat-markdown :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-.chat-markdown :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-.chat-markdown {
-  font-size: 0.875rem;
-  line-height: 1.7142857;
-}
-.chat-markdown :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-  margin-bottom: 1.1428571em;
-}
-.chat-markdown :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 1.2857143em;
-  line-height: 1.5555556;
-  margin-top: 0.8888889em;
-  margin-bottom: 0.8888889em;
-}
-.chat-markdown :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.3333333em;
-  margin-bottom: 1.3333333em;
-  padding-inline-start: 1.1111111em;
-}
-.chat-markdown :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 2.1428571em;
-  margin-top: 0;
-  margin-bottom: 0.8em;
-  line-height: 1.2;
-}
-.chat-markdown :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 1.4285714em;
-  margin-top: 1.6em;
-  margin-bottom: 0.8em;
-  line-height: 1.4;
-}
-.chat-markdown :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 1.2857143em;
-  margin-top: 1.5555556em;
-  margin-bottom: 0.4444444em;
-  line-height: 1.5555556;
-}
-.chat-markdown :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.4285714em;
-  margin-bottom: 0.5714286em;
-  line-height: 1.4285714;
-}
-.chat-markdown :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-}
-.chat-markdown :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-}
-.chat-markdown :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.chat-markdown :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-}
-.chat-markdown :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 0.8571429em;
-  border-radius: 0.3125rem;
-  padding-top: 0.1428571em;
-  padding-inline-end: 0.3571429em;
-  padding-bottom: 0.1428571em;
-  padding-inline-start: 0.3571429em;
-}
-.chat-markdown :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 0.8571429em;
-}
-.chat-markdown :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 0.9em;
-}
-.chat-markdown :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 0.8888889em;
-}
-.chat-markdown :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 0.8571429em;
-  line-height: 1.6666667;
-  margin-top: 1.6666667em;
-  margin-bottom: 1.6666667em;
-  border-radius: 0.25rem;
-  padding-top: 0.6666667em;
-  padding-inline-end: 1em;
-  padding-bottom: 0.6666667em;
-  padding-inline-start: 1em;
-}
-.chat-markdown :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-  margin-bottom: 1.1428571em;
-  padding-inline-start: 1.5714286em;
-}
-.chat-markdown :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-  margin-bottom: 1.1428571em;
-  padding-inline-start: 1.5714286em;
-}
-.chat-markdown :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0.2857143em;
-  margin-bottom: 0.2857143em;
-}
-.chat-markdown :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-start: 0.4285714em;
-}
-.chat-markdown :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-start: 0.4285714em;
-}
-.chat-markdown :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0.5714286em;
-  margin-bottom: 0.5714286em;
-}
-.chat-markdown :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-}
-.chat-markdown :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-bottom: 1.1428571em;
-}
-.chat-markdown :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-}
-.chat-markdown :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-bottom: 1.1428571em;
-}
-.chat-markdown :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0.5714286em;
-  margin-bottom: 0.5714286em;
-}
-.chat-markdown :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-  margin-bottom: 1.1428571em;
-}
-.chat-markdown :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-}
-.chat-markdown :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0.2857143em;
-  padding-inline-start: 1.5714286em;
-}
-.chat-markdown :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 2.8571429em;
-  margin-bottom: 2.8571429em;
-}
-.chat-markdown :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 0.8571429em;
-  line-height: 1.5;
-}
-.chat-markdown :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-end: 1em;
-  padding-bottom: 0.6666667em;
-  padding-inline-start: 1em;
-}
-.chat-markdown :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-start: 0;
-}
-.chat-markdown :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-end: 0;
-}
-.chat-markdown :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-top: 0.6666667em;
-  padding-inline-end: 1em;
-  padding-bottom: 0.6666667em;
-  padding-inline-start: 1em;
-}
-.chat-markdown :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-start: 0;
-}
-.chat-markdown :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  padding-inline-end: 0;
-}
-.chat-markdown :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-}
-.chat-markdown :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.chat-markdown :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  font-size: 0.8571429em;
-  line-height: 1.3333333;
-  margin-top: 0.6666667em;
-}
-.chat-markdown :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-top: 0;
-}
-.chat-markdown :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-.chat-markdown {
-  --tw-prose-body: #374151;
-  --tw-prose-headings: #111827;
-  --tw-prose-lead: #4b5563;
-  --tw-prose-links: #111827;
-  --tw-prose-bold: #111827;
-  --tw-prose-counters: #6b7280;
-  --tw-prose-bullets: #d1d5db;
-  --tw-prose-hr: #e5e7eb;
-  --tw-prose-quotes: #111827;
-  --tw-prose-quote-borders: #e5e7eb;
-  --tw-prose-captions: #6b7280;
-  --tw-prose-kbd: #111827;
-  --tw-prose-kbd-shadows: 17 24 39;
-  --tw-prose-code: #111827;
-  --tw-prose-pre-code: #e5e7eb;
-  --tw-prose-pre-bg: #1f2937;
-  --tw-prose-th-borders: #d1d5db;
-  --tw-prose-td-borders: #e5e7eb;
-  --tw-prose-invert-body: #d1d5db;
-  --tw-prose-invert-headings: #fff;
-  --tw-prose-invert-lead: #9ca3af;
-  --tw-prose-invert-links: #fff;
-  --tw-prose-invert-bold: #fff;
-  --tw-prose-invert-counters: #9ca3af;
-  --tw-prose-invert-bullets: #4b5563;
-  --tw-prose-invert-hr: #374151;
-  --tw-prose-invert-quotes: #f3f4f6;
-  --tw-prose-invert-quote-borders: #374151;
-  --tw-prose-invert-captions: #9ca3af;
-  --tw-prose-invert-kbd: #fff;
-  --tw-prose-invert-kbd-shadows: 255 255 255;
-  --tw-prose-invert-code: #fff;
-  --tw-prose-invert-pre-code: #d1d5db;
-  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
-  --tw-prose-invert-th-borders: #4b5563;
-  --tw-prose-invert-td-borders: #374151;
-  max-width: none;
-}
-.chat-markdown :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
-  text-decoration-line: none;
-}
-.chat-markdown :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
-  text-decoration-line: underline;
-}
-.chat-markdown {
+  @apply prose prose-sm prose-gray max-w-none prose-a:no-underline prose-a:hover:underline;
   font-size: 1em;
 }
+
 /* override spacing */
 .chat-markdown > * {
   margin-top: 0.1em;
   margin-bottom: 0.1em;
 }
+
 .message-bubble-assistant .chat-markdown {
   --tw-prose-body: var(--message-assistant-text-color);
   --tw-prose-headings: var(--message-assistant-text-color);
@@ -2074,6 +729,7 @@ textarea::-webkit-scrollbar-thumb:hover {
   --tw-prose-th-borders: var(--message-assistant-text-color);
   --tw-prose-td-borders: var(--message-assistant-text-color);
 }
+
 .message-bubble-user .chat-markdown {
   --tw-prose-body: var(--message-user-text-color);
   --tw-prose-headings: var(--message-user-text-color);
@@ -2094,6 +750,7 @@ textarea::-webkit-scrollbar-thumb:hover {
   --tw-prose-th-borders: var(--message-user-text-color);
   --tw-prose-td-borders: var(--message-user-text-color);
 }
+
 .message-bubble-system .chat-markdown {
   --tw-prose-body: var(--message-system-text-color);
   --tw-prose-headings: var(--message-system-text-color);
@@ -2114,118 +771,110 @@ textarea::-webkit-scrollbar-thumb:hover {
   --tw-prose-th-borders: var(--message-system-text-color);
   --tw-prose-td-borders: var(--message-system-text-color);
 }
+
 .message-bubble-user .chat-markdown pre {
   border: 1px solid var(--code-border-user-color);
 }
+
 .message-bubble-assistant .chat-markdown pre {
   border: 1px solid var(--code-border-assistant-color);
 }
+
 .loading:after {
   content: ' .';
 }
+
 /* File Upload Button */
 .file-attachment-button {
-  border-radius: 0.375rem;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-}
-.file-attachment-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.file-attachment-button {
+  @apply rounded-md transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
   padding: 0.375em;
   background-color: var(--file-attachment-button-bg-color);
   color: var(--file-attachment-button-text-color);
 }
+
 .file-attachment-button svg {
-  width: 1.5em;
-  height: 1.5em;
+  @apply size-[1.5em];
 }
+
 .file-attachment-button:hover:not(:disabled) {
   background-color: var(--file-attachment-button-bg-hover-color);
 }
+
 .file-attachment-button:disabled {
   color: var(--file-attachment-button-text-disabled-color);
 }
+
 /* Selected Files Container */
 .selected-files-container {
   padding: 1em 1em 0.5em 1em;
   background-color: var(--selected-files-bg-color);
   border-top: 1px solid var(--selected-files-border-color);
 }
+
 /* Selected File Item */
 .selected-file-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  @apply flex items-center justify-between;
   background-color: var(--selected-file-bg-color);
   border-radius: 0.375em;
   padding: 0.25em 0.5em;
   font-size: var(--selected-file-font-size);
   color: var(--selected-file-name-color);
 }
+
 .selected-file-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @apply flex items-center justify-center;
 }
+
 .selected-file-icon svg {
   width: var(--selected-file-icon-size);
   height: var(--selected-file-icon-size);
 }
+
 .selected-file-size {
   color: var(--selected-file-size-color);
 }
+
 .selected-file-error {
   color: var(--error-text-color);
 }
+
 .selected-file-success-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @apply flex items-center justify-center;
   color: var(--success-text-color);
   width: var(--selected-file-icon-size);
   height: var(--selected-file-icon-size);
 }
+
 .selected-file-remove-button {
-  font-weight: 700;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
+  @apply font-bold transition-colors duration-200;
   color: var(--selected-file-remove-icon-color);
   padding: 0.375em;
 }
+
 .selected-file-remove-button svg {
   width: var(--selected-file-icon-size);
   height: var(--selected-file-icon-size);
 }
+
 .selected-file-remove-button:hover {
   color: var(--selected-file-remove-icon-hover-color);
 }
+
 /* Message Attachments */
 .message-attachments {
-  margin-top: 0.5em;
-}
-.message-attachments > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.25em * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25em * var(--tw-space-y-reverse));
-}
-.message-attachments {
+  @apply mt-[0.5em] space-y-[0.25em];
   font-size: var(--chat-window-font-size-sm);
 }
+
 .message-attachment-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @apply flex items-center justify-center;
   width: var(--message-attachment-icon-size);
   height: var(--message-attachment-icon-size);
 }
+
 /* Update Send Button for Upload State */
 .send-button-disabled {
-  cursor: not-allowed;
+  @apply cursor-not-allowed;
   background-color: var(--send-button-bg-disabled-color);
   color: var(--send-button-text-disabled-color);
 }