open-chat-studio-widget 0.4.0 → 0.4.2

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

@@ -500,28 +500,22 @@ video {
   display: none;
 }
 .starter-question {
-  margin-left: 3rem;
   border-radius: 0.5rem;
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
-  padding: 0.75rem;
   text-align: left;
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
   transition-duration: 200ms;
+    padding: var(--starter-question-padding, 0.75rem);
+    background-color: var(--starter-question-bg-color);
+    border: 1px solid var(--starter-question-border-color);
+    color: var(--starter-question-text-color);
 }
 .starter-question:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
-}
+    background-color: var(--starter-question-bg-hover-color);
+    border-color: var(--starter-question-border-hover-color);
+  }
 .chat-btn-text,
   .chat-btn-icon {
-  position: fixed;
   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: 9999px;
+  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);
@@ -536,17 +530,6 @@ video {
   --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:focus,
-  .chat-btn-icon:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
-  --tw-ring-offset-width: 2px;
-}
 .chat-btn-text,
   .chat-btn-icon {
     background-color: var(--button-background-color, white);
@@ -556,353 +539,643 @@ video {
 .chat-btn-text {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  gap: 8px;
+    padding: var(--button-padding, 0.75rem);
     color: var(--button-text-color, #111827);
-    min-height: 56px;
 }
 .chat-btn-text:hover {
     color: var(--button-text-color-hover, #1d4ed8);
   }
 .chat-btn-text span {
   white-space: nowrap;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
   font-weight: 500;
+    font-size: var(--button-font-size);
 }
 .chat-btn-text img {
-  height: 1.5rem;
-  width: 1.5rem;
   flex-shrink: 0;
   -o-object-fit: contain;
      object-fit: contain;
+    width: var(--button-icon-width, 1.5rem);
+    height: var(--button-icon-height, 1.5rem);
 }
 /* Icon-only button */
 .chat-btn-icon {
-  padding: 0.75rem;
+    padding: var(--button-padding, 0.75rem);
     width: 56px;
     height: 56px;
-}
+  }
 .chat-btn-icon img {
   height: 100%;
   width: 100%;
   -o-object-fit: contain;
      object-fit: contain;
 }
-.chat-btn-text,
-  .chat-btn-icon {
-  border-radius: 0.5rem; /* Default square shape */
-}
 .chat-btn-text.round,
   .chat-btn-icon.round {
   border-radius: 9999px;
 }
-.pointer-events-none {
-  pointer-events: none;
-}
-.visible {
-  visibility: visible;
-}
-.static {
-  position: static;
-}
-.fixed {
+/* Error message styling */
+.error-message {
+    padding: var(--error-message-padding, 0.5rem);
+    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%;
+  max-width: 1024px;
+  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);
+    font-size: var(--chat-window-font-size);
 }
-.ml-2 {
-  margin-left: 0.5rem;
-}
-.mt-1 {
-  margin-top: 0.25rem;
+.chat-window-normal {
+  position: fixed;
+  display: flex;
+  height: 83.333333%;
+  width: 100%;
+  max-width: 1024px;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.5rem;
 }
-.mt-2 {
-  margin-top: 0.5rem;
+@media (min-width: 640px) {
+
+  .chat-window-normal {
+    width: 450px;
+  }
 }
-.block {
-  display: block;
+.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);
 }
-.inline-block {
-  display: inline-block;
+.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;
 }
-.flex {
+/* 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: var(--header-padding, 0.5rem);
+    background-color: var(--header-bg-color);
+    border-bottom: 1px solid var(--header-border-color);
 }
-.table {
-  display: table;
-}
-.hidden {
-  display: none;
-}
-.size-6 {
-  width: 1.5rem;
-  height: 1.5rem;
+.chat-header:hover,
+  .chat-header:active {
+    background-color: var(--header-bg-hover-color);
+  }
+.chat-header-draggable {
+  cursor: grab;
 }
-.h-2 {
-  height: 0.5rem;
+.chat-header-dragging {
+  cursor: grabbing;
 }
-.h-3\/5 {
-  height: 60%;
+.drag-indicator {
+  display: none;
 }
-.h-5\/6 {
-  height: 83.333333%;
+@media (min-width: 640px) {
+
+  .drag-indicator {
+    display: flex;
+  }
 }
-.w-2 {
-  width: 0.5rem;
+.drag-dots {
+  pointer-events: none;
+  margin-left: 2px;
+  display: flex;
+  gap: 2px;
 }
-.w-full {
-  width: 100%;
+@media (min-width: 640px) {
+
+  .drag-spacer {
+    display: none;
+  }
 }
-.max-w-xs {
-  max-width: 20rem;
+.header-buttons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
-.flex-grow {
-  flex-grow: 1;
+/* 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: var(--button-padding-sm, 0.375rem);
+    color: var(--header-button-text-color);
 }
-@keyframes bounce {
-
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8,0,1,1);
+.header-button:hover {
+    background-color: var(--header-button-bg-hover-color);
   }
+.fullscreen-button {
+  display: none;
+}
+@media (min-width: 640px) {
 
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  .fullscreen-button {
+    display: block;
   }
 }
-.animate-bounce {
-  animation: bounce 1s infinite;
+/* Chat content area */
+.chat-content {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  overflow: hidden;
 }
-.cursor-grab {
-  cursor: grab;
+/* Loading state */
+.loading-container {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
 }
-.cursor-grabbing {
-  cursor: grabbing;
+.loading-text {
+    margin-left: 2px;
+    color: var(--loading-text-color);
+  }
+/* Messages container */
+.messages-container {
+  flex-grow: 1;
 }
-.cursor-not-allowed {
-  cursor: not-allowed;
+.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));
 }
-.resize-none {
-  resize: none;
+.messages-container {
+  overflow-y: auto;
 }
-.resize {
-  resize: both;
+.messages-container::-webkit-scrollbar {
+  width: 0.375rem;
 }
-.flex-col {
-  flex-direction: column;
+.messages-container::-webkit-scrollbar-track {
+  border-radius: 0.25rem;
+  background-color: var(--scrollbar-track-color);
 }
-.items-center {
-  align-items: center;
+.messages-container::-webkit-scrollbar-thumb {
+  border-radius: 0.25rem;
+  background-color: var(--scrollbar-thumb-color);
 }
-.justify-start {
-  justify-content: flex-start;
+.messages-container::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover-color);
 }
-.justify-end {
+.messages-container {
+    padding: var(--container-padding, 1rem);
+  }
+/* Message bubbles */
+.message-row {
+  display: flex;
+}
+.message-row-user {
   justify-content: flex-end;
 }
-.justify-center {
-  justify-content: center;
+.message-row-assistant {
+  justify-content: flex-start;
 }
-.justify-between {
-  justify-content: space-between;
+.message-bubble {
+  max-width: 20rem;
+  border-radius: 0.5rem;
 }
-.gap-0\.5 {
-  gap: 0.125rem;
+@media (min-width: 1024px) {
+
+  .message-bubble {
+    max-width: 28rem;
+  }
 }
-.gap-1 {
-  gap: 0.25rem;
+.message-bubble {
+    padding: var(--message-padding-y, 0.5rem) var(--message-padding-x, 1rem);
+  }
+.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);
 }
-.gap-2 {
-  gap: 0.5rem;
+.message-attachments {
+  margin-top: 8px;
 }
-.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+.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));
 }
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+.attachment-link {
+  display: block;
+  text-decoration-line: underline;
+}
+.attachment-link:hover {
+  text-decoration-line: none;
+}
+/* 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));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-.overflow-hidden {
+/* Typing indicator */
+.typing-indicator {
+  height: 0.375rem;
+  width: 100%;
   overflow: hidden;
 }
-.overflow-y-auto {
-  overflow-y: auto;
+.typing-progress {
+  height: 100%;
+  width: 100%;
+  transform-origin: 0% 50%;
 }
-.rounded-full {
-  border-radius: 9999px;
+@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);
+  }
 }
-.rounded-lg {
+.typing-progress {
+  animation: progress 3s infinite linear;
   border-radius: 0.5rem;
+    background-color: var(--typing-progress-bg-color);
 }
-.rounded-md {
-  border-radius: 0.375rem;
+.typing-text {
+  width: 100%;
+  justify-content: center;
+  opacity: 0.7;
+    font-size: var(--chat-window-font-size-sm);
 }
-.border {
-  border-width: 1px;
+@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;
+  }
 }
-.border-b {
-  border-bottom-width: 1px;
+.typing-dots {
+  animation: dots 1s steps(5, end) infinite;
 }
-.border-t {
-  border-top-width: 1px;
+.typing-dots:after {
+  content: ' .';
 }
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+/* 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));
 }
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+.starter-questions {
+    padding: var(--container-padding, 1rem);
+    font-size: var(--chat-window-font-size);
+  }
+.starter-question-row {
+  display: flex;
+  justify-content: flex-end;
+}
+/* Input area */
+.input-area {
+    padding: var(--container-padding, 1rem);
+    background-color: var(--input-bg-color);
+    border-top: 1px solid var(--input-border-color);
+    font-size: var(--chat-window-font-size);
+  }
+.input-container {
+  display: flex;
+  gap: 8px;
 }
-.border-gray-300 {
+.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));
 }
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
-}
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
-}
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
-}
-.bg-gray-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+.message-textarea:focus {
+  outline-color: #93c5fd;
 }
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-}
-.p-1\.5 {
-  padding: 0.375rem;
-}
-.p-2 {
-  padding: 0.5rem;
-}
-.p-4 {
-  padding: 1rem;
-}
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.message-textarea {
+    padding: var(--input-textarea-padding-y, 0.5rem) var(--input-textarea-padding-x, 0.75rem);
+    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: var(--send-button-padding-y, 0.5rem) var(--send-button-padding-x, 1rem);
+    font-size: var(--chat-window-font-size);
 }
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
+.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);
 }
-.font-medium {
-  font-weight: 500;
+.visible {
+  visibility: visible;
 }
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+.static {
+  position: static;
 }
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+.relative {
+  position: relative;
 }
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+.table {
+  display: table;
 }
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
 }
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+.h-5\/6 {
+  height: 83.333333%;
 }
-.underline {
-  text-decoration-line: underline;
+.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));
 }
-.opacity-70 {
-  opacity: 0.7;
+.resize {
+  resize: both;
 }
 .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);
 }
-.shadow-2xl {
-  --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);
-}
-.shadow-lg {
-  --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-colors {
-  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;
-}
-.transition-shadow {
-  transition-property: box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.duration-150 {
-  transition-duration: 150ms;
-}
-.duration-200 {
-  transition-duration: 200ms;
-}
 :host {
   /**
-    * @prop --button-background-color: Button background color
-    * @prop --button-background-color-hover: Button background color on hover
-    * @prop --button-text-color: Button text color
-    * @prop --button-text-color-hover: Button text color on hover
-    * @prop --button-border-color: Button border color
-    * @prop --button-border-color-hover: Button border color on hover
+    * Global Variables
+    * @prop --chat-z-index: Z-index for chat widget (50)
+    * @prop --container-padding: General container padding (1rem)
+    *
+    * Button Variables
+    * @prop --button-background-color: Button background color (#ffffff)
+    * @prop --button-background-color-hover: Button background color on hover (#f3f4f6)
+    * @prop --button-text-color: Button text color (#111827)
+    * @prop --button-text-color-hover: Button text color on hover (#1d4ed8)
+    * @prop --button-border-color: Button border color (#6b7280)
+    * @prop --button-border-color-hover: Button border color on hover (#374151)
+    * @prop --button-padding: Button padding (0.75rem)
+    * @prop --button-padding-sm: Small button padding (0.375rem)
+    * @prop --button-font-size: Button text font size (0.875rem)
+    * @prop --button-icon-width: Button icon width (1.5rem)
+    * @prop --button-icon-height: Button icon height (1.5rem)
+    *
+    * Chat Window Variables
+    * @prop --chat-window-bg-color: Chat window background color (#ffffff)
+    * @prop --chat-window-border-color: Chat window border color (#d1d5db)
+    * @prop --chat-window-shadow-color: Chat window shadow color (rgba(0, 0, 0, 0.1))
+    * @prop --chat-window-font-size: Default font size for text in the chat window (0.875rem)
+    * @prop --chat-window-font-size-sm: Font size for small text in the chat window (0.75rem)
+    *
+    * Header Variables
+    * @prop --header-bg-color: Header background color (transparent)
+    * @prop --header-bg-hover-color: Header background color on hover (#f9fafb)
+    * @prop --header-border-color: Header border color (#f3f4f6)
+    * @prop --header-button-text-color: Header button text color (#6b7280)
+    * @prop --header-button-bg-hover-color: Header button background on hover (#f3f4f6)
+    * @prop --header-padding: Header padding (0.5rem)
+    *
+    * Starter Question Variables
+    * @prop --starter-question-bg-color: Starter question background color (transparent)
+    * @prop --starter-question-bg-hover-color: Starter question background on hover (#eff6ff)
+    * @prop --starter-question-text-color: Starter question text color (#3b82f6)
+    * @prop --starter-question-border-color: Starter question border color (#3b82f6)
+    * @prop --starter-question-border-hover-color: Starter question border on hover (#2563eb)
+    * @prop --starter-question-padding: Starter question padding (0.75rem)
+    *
+    * Message Bubble Variables
+    * @prop --message-user-bg-color: User message background color (#3b82f6)
+    * @prop --message-user-text-color: User message text color (#ffffff)
+    * @prop --message-assistant-bg-color: Assistant message background color (#e5e7eb)
+    * @prop --message-assistant-text-color: Assistant message text color (#1f2937)
+    * @prop --message-system-bg-color: System message background color (#f3f4f6)
+    * @prop --message-system-text-color: System message text color (#4b5563)
+    * @prop --message-timestamp-color: User message timestamp color (rgba(255, 255, 255, 0.7))
+    * @prop --message-timestamp-assistant-color: Assistant message timestamp color (rgba(75, 85, 99, 0.7))
+    * @prop --message-padding-x: Message horizontal padding (1rem)
+    * @prop --message-padding-y: Message vertical padding (0.5rem)
+    *
+    * Input Area Variables
+    * @prop --input-bg-color: Input area background color (transparent)
+    * @prop --input-border-color: Input field border color (#d1d5db)
+    * @prop --input-text-color: Input text color (#111827)
+    * @prop --input-placeholder-color: Input placeholder text color (#6b7280)
+    * @prop --input-outline-focus-color: Input field focus ring color (#3b82f6)
+    * @prop --input-textarea-padding-x: Input textarea horizontal padding (0.75rem)
+    * @prop --input-textarea-padding-y: Input textarea vertical padding (0.5rem)
+    *
+    * Send Button Variables
+    * @prop --send-button-bg-color: Send button background color (#3b82f6)
+    * @prop --send-button-bg-hover-color: Send button background on hover (#2563eb)
+    * @prop --send-button-text-color: Send button text color (#ffffff)
+    * @prop --send-button-bg-disabled-color: Send button background when disabled (#d1d5db)
+    * @prop --send-button-text-disabled-color: Send button text when disabled (#6b7280)
+    * @prop --send-button-padding-x: Send button horizontal padding (1rem)
+    * @prop --send-button-padding-y: Send button vertical padding (0.5rem)
+    *
+    * Loading Variables
+    * @prop --loading-text-color: Loading text color (#6b7280)
+    * @prop --loading-spinner-track-color: Loading spinner track color (#e5e7eb)
+    * @prop --loading-spinner-fill-color: Loading spinner fill color (#3b82f6)
+    * @prop --loading-spinner-size: Loading spinner size (1.25rem)
+    *
+    * Typing Indicator Variables
+    * @prop --typing-progress-bg-color: Typing progress bar background color (#ade3ff)
+    *
+    * Scrollbar Variables
+    * @prop --scrollbar-track-color: Scrollbar track color (#f3f4f6)
+    * @prop --scrollbar-thumb-color: Scrollbar thumb color (#d1d5db)
+    * @prop --scrollbar-thumb-hover-color: Scrollbar thumb hover color (#9ca3af)
+    *
+    * Error Variables
+    * @prop --error-text-color: Error text color (#ef4444)
+    * @prop --error-message-padding: Error message padding (0.5rem)
+    *
+    * Markdown Code Variables
+    * @prop --code-bg-user-color: Code background in user messages (rgba(59, 130, 246, 0.3))
+    * @prop --code-text-user-color: Code text color in user messages (#dbeafe)
+    * @prop --code-border-user-color: Code border in user messages (rgba(59, 130, 246, 0.6))
+    * @prop --code-bg-assistant-color: Code background in assistant messages (#ffffff)
+    * @prop --code-text-assistant-color: Code text color in assistant messages (#1f2937)
+    * @prop --code-border-assistant-color: Code border in assistant messages (#d1d5db)
     */
-  --button-background-color: white;
+  /* Global variables */
+  --chat-z-index: 50;
+  --container-padding: 1rem;
+
+  /* Button variables */
+  --button-background-color: #ffffff;
   --button-background-color-hover: #f3f4f6;
   --button-text-color: #111827;
   --button-text-color-hover: #1d4ed8;
   --button-border-color: #6b7280;
   --button-border-color-hover: #374151;
-  --chat-z-index: 50;
+  --button-padding: 0.75rem;
+  --button-padding-sm: 0.375rem;
+  --button-font-size: 0.875rem; /* text-sm */
+  --button-icon-width: 1.5rem;
+  --button-icon-height: 1.5rem;
+
+  /* Chat window variables */
+  --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.875rem; /* text-sm */
+  --chat-window-font-size-sm: 0.75rem; /* 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-padding: 0.5rem;
+
+  /* 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;
+  --starter-question-padding: 0.75rem;
+
+  /* Message bubble variables */
+  --message-user-bg-color: #3b82f6;
+  --message-user-text-color: #ffffff;
+  --message-assistant-bg-color: #e5e7eb;
+  --message-assistant-text-color: #1f2937;
+  --message-system-bg-color: #f3f4f6;
+  --message-system-text-color: #4b5563;
+  --message-timestamp-color: rgba(255, 255, 255, 0.7);
+  --message-timestamp-assistant-color: rgba(75, 85, 99, 0.7);
+  --message-padding-x: 1rem;
+  --message-padding-y: 0.5rem;
+
+  /* Input area variables */
+  --input-bg-color: transparent;
+  --input-border-color: #d1d5db;
+  --input-text-color: #111827;
+  --input-placeholder-color: #6b7280;
+  --input-outline-focus-color: #3b82f6;
+  --input-textarea-padding-x: 0.75rem;
+  --input-textarea-padding-y: 0.5rem;
+
+  /* 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;
+  --send-button-padding-x: 1rem;
+  --send-button-padding-y: 0.5rem;
+
+  /* Loading variables */
+  --loading-text-color: #6b7280;
+  --loading-spinner-track-color: #e5e7eb;
+  --loading-spinner-fill-color: #3b82f6;
+  --loading-spinner-size: 1.25rem;
+
+  /* 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;
+  --error-message-padding: 0.5rem;
+
+  /* Markdown code variables */
+  --code-bg-user-color: rgba(59, 130, 246, 0.3);
+  --code-text-user-color: #dbeafe;
+  --code-border-user-color: rgba(59, 130, 246, 0.6);
+  --code-bg-assistant-color: #ffffff;
+  --code-text-assistant-color: #1f2937;
+  --code-border-assistant-color: #d1d5db;
+
   display: block;
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
 }
 #ocs-chat-window {
   z-index: var(--chat-z-index);
@@ -918,21 +1191,14 @@ textarea::-webkit-scrollbar {
 }
 textarea::-webkit-scrollbar-track {
   border-radius: 0.25rem;
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  background-color: var(--scrollbar-track-color);
 }
 textarea::-webkit-scrollbar-thumb {
   border-radius: 0.25rem;
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+  background-color: var(--scrollbar-thumb-color);
 }
 textarea::-webkit-scrollbar-thumb:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
-}
-.loading-spinner {
-  height: 1.25rem;
-  width: 1.25rem;
+  background-color: var(--scrollbar-thumb-hover-color);
 }
 @keyframes spin {
 
@@ -944,26 +1210,24 @@ textarea::-webkit-scrollbar-thumb:hover {
   animation: spin 1s linear infinite;
   border-radius: 9999px;
   border-width: 2px;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
-  --tw-border-opacity: 1;
-  border-top-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+  border-color: var(--loading-spinner-track-color);
+  border-top-color: var(--loading-spinner-fill-color);
+  width: var(--loading-spinner-size, 1.25rem);
+  height: var(--loading-spinner-size, 1.25rem);
 }
 .overflow-y-auto::-webkit-scrollbar {
   width: 0.375rem;
 }
 .overflow-y-auto::-webkit-scrollbar-track {
   border-radius: 0.25rem;
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  background-color: var(--scrollbar-track-color);
 }
 .overflow-y-auto::-webkit-scrollbar-thumb {
   border-radius: 0.25rem;
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+  background-color: var(--scrollbar-thumb-color);
 }
 .overflow-y-auto::-webkit-scrollbar-thumb:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+  background-color: var(--scrollbar-thumb-hover-color);
 }
 /* Markdown content styling for chat messages */
 .chat-markdown {
@@ -1626,7 +1890,7 @@ textarea::-webkit-scrollbar-thumb:hover {
   margin-top: 0.1rem;
   margin-bottom: 0.1rem;
 }
-.bg-blue-500 .chat-markdown {
+.message-bubble-user .chat-markdown {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);
   --tw-prose-lead: var(--tw-prose-invert-lead);
@@ -1646,102 +1910,22 @@ textarea::-webkit-scrollbar-thumb:hover {
   --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
   --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
-.bg-blue-500 .chat-markdown code {
-  background-color: rgb(96 165 250 / 0.5);
-  --tw-text-opacity: 1;
-  color: rgb(239 246 255 / var(--tw-text-opacity, 1));
+.message-bubble-user .chat-markdown code {
+  background-color: var(--code-bg-user-color);
+  color: var(--code-text-user-color);
 }
-.bg-blue-500 .chat-markdown pre {
-  --tw-border-opacity: 1;
-  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
-  background-color: rgb(96 165 250 / 0.5);
+.message-bubble-user .chat-markdown pre {
+  background-color: var(--code-bg-user-color);
+  border: 1px solid var(--code-border-user-color);
 }
-.bg-gray-200 .chat-markdown code {
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-}
-.bg-gray-200 .chat-markdown pre {
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-}
-@media (max-width: 640px) {
-  .max-w-xs {
-    max-width: 85%;
-  }
-
-  .chat-btn-icon {
-    width: 56px;
-    height: 56px;
-  }
-
-  .chat-btn-text {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    min-height: 52px;
-  }
-
-  .chat-btn-text img {
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-
-  .chat-btn-text span {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-}
-.hover\:bg-blue-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+.message-bubble-assistant .chat-markdown code {
+  background-color: var(--code-bg-assistant-color);
+  color: var(--code-text-assistant-color);
 }
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+.message-bubble-assistant .chat-markdown pre {
+  background-color: var(--code-bg-assistant-color);
+  border: 1px solid var(--code-border-assistant-color);
 }
-.hover\:no-underline:hover {
-  text-decoration-line: none;
-}
-.focus\:border-transparent:focus {
-  border-color: transparent;
-}
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-.focus\:ring-blue-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
-}
-.active\:bg-gray-50:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-@media (min-width: 640px) {
-
-  .sm\:flex {
-    display: flex;
-  }
-
-  .sm\:w-\[450px\] {
-    width: 450px;
-  }
-}
-@media (min-width: 1024px) {
-
-  .lg\:max-w-md {
-    max-width: 28rem;
-  }
+.loading:after {
+  content: ' .';
 }