open-chat-studio-widget 0.4.2 → 0.4.4

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

@@ -499,11 +499,15 @@ video {
 [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: var(--starter-question-padding, 0.75rem);
+    padding: var(--starter-question-padding, 0.75em);
     background-color: var(--starter-question-bg-color);
     border: 1px solid var(--starter-question-border-color);
     color: var(--starter-question-text-color);
@@ -533,40 +537,39 @@ video {
 .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: var(--button-padding, 0.75em);
+  }
+.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;
-    padding: var(--button-padding, 0.75rem);
     color: var(--button-text-color, #111827);
 }
-.chat-btn-text:hover {
-    color: var(--button-text-color-hover, #1d4ed8);
-  }
 .chat-btn-text span {
   white-space: nowrap;
   font-weight: 500;
-    font-size: var(--button-font-size);
 }
 .chat-btn-text img {
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
   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: var(--button-padding, 0.75rem);
-    width: 56px;
-    height: 56px;
   }
 .chat-btn-icon img {
-  height: 100%;
-  width: 100%;
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
   -o-object-fit: contain;
      object-fit: contain;
 }
@@ -576,7 +579,7 @@ video {
 }
 /* Error message styling */
 .error-message {
-    padding: var(--error-message-padding, 0.5rem);
+    padding: var(--error-message-padding, 0.5em);
     color: var(--error-text-color);
   }
 /* Chat window positioning classes */
@@ -588,7 +591,6 @@ video {
   height: 100%;
   max-height: 100%;
   width: 100%;
-  max-width: 1024px;
   flex-direction: column;
   overflow: hidden;
   border-radius: 0px;
@@ -600,13 +602,15 @@ video {
   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);
+    max-width: var(--chat-window-fullscreen-width);
 }
 .chat-window-normal {
   position: fixed;
   display: flex;
-  height: 83.333333%;
-  width: 100%;
+  height: 100vh;
+  min-height: 300px;
+  width: 100vw;
+  min-width: 300px;
   max-width: 1024px;
   flex-direction: column;
   overflow: hidden;
@@ -615,7 +619,8 @@ video {
 @media (min-width: 640px) {
 
   .chat-window-normal {
-    width: 450px;
+    height: var(--chat-window-height);
+    width: var(--chat-window-width);
   }
 }
 .chat-window-normal {
@@ -644,9 +649,17 @@ video {
   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);
+    padding: var(--header-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 {
@@ -673,12 +686,6 @@ video {
   display: flex;
   gap: 2px;
 }
-@media (min-width: 640px) {
-
-  .drag-spacer {
-    display: none;
-  }
-}
 .header-buttons {
   display: flex;
   align-items: center;
@@ -690,9 +697,13 @@ video {
   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);
+    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);
   }
@@ -750,7 +761,7 @@ video {
   background-color: var(--scrollbar-thumb-hover-color);
 }
 .messages-container {
-    padding: var(--container-padding, 1rem);
+    padding: var(--container-padding, 1em);
   }
 /* Message bubbles */
 .message-row {
@@ -763,18 +774,9 @@ video {
   justify-content: flex-start;
 }
 .message-bubble {
-  max-width: 20rem;
   border-radius: 0.5rem;
+    padding: var(--message-padding-y, 0.5em) var(--message-padding-x, 1em);
 }
-@media (min-width: 1024px) {
-
-  .message-bubble {
-    max-width: 28rem;
-  }
-}
-.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);
@@ -890,8 +892,7 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 .starter-questions {
-    padding: var(--container-padding, 1rem);
-    font-size: var(--chat-window-font-size);
+    padding: var(--container-padding, 1em);
   }
 .starter-question-row {
   display: flex;
@@ -899,10 +900,9 @@ video {
 }
 /* Input area */
 .input-area {
-    padding: var(--container-padding, 1rem);
+    padding: var(--container-padding, 1em) var(--container-padding, 1em) 0 var(--container-padding, 1em);
     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;
@@ -920,7 +920,7 @@ video {
   outline-color: #93c5fd;
 }
 .message-textarea {
-    padding: var(--input-textarea-padding-y, 0.5rem) var(--input-textarea-padding-x, 0.75rem);
+    padding: var(--input-textarea-padding-y, 0.5em) var(--input-textarea-padding-x, 0.75em);
     color: var(--input-text-color);
     border: 1px solid var(--input-border-color);
   }
@@ -933,8 +933,7 @@ video {
   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);
+    padding: var(--send-button-padding-y, 0.5em) var(--send-button-padding-x, 1em);
 }
 .send-button-enabled {
     background-color: var(--send-button-bg-color);
@@ -957,15 +956,14 @@ video {
 .relative {
   position: relative;
 }
+.flex {
+  display: flex;
+}
 .table {
   display: table;
 }
-.size-6 {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.h-5\/6 {
-  height: 83.333333%;
+.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));
@@ -973,6 +971,32 @@ video {
 .resize {
   resize: both;
 }
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.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);
@@ -980,47 +1004,46 @@ video {
 }
 :host {
   /**
-    * Global Variables
     * @prop --chat-z-index: Z-index for chat widget (50)
-    * @prop --container-padding: General container padding (1rem)
+    * @prop --container-padding: General container padding (1em)
     *
-    * 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)
+    * @prop --button-padding: Button padding (0.75em)
+    * @prop --button-font-size: Button text font size (0.875em)
+    * @prop --button-icon-size: Button icon size (1.5em)
     *
-    * Chat Window Variables
+    * @prop --chat-window-height: Chat window height in pixels or percent (60%)
+    * @prop --chat-window-width: Chat window width in pixels or percent (25%)
+    * @prop --chat-window-fullscreen-width: Chat window fullscreen width in pixels or percent (80%)
     * @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)
+    * @prop --chat-window-font-size: Default font size for text in the chat window (0.875em)
+    * @prop --chat-window-font-size-sm: Font size for small text in the chat window (0.75em)
     *
-    * 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)
+    * @prop --header-padding: Header padding (0.5em)
+    * @prop --header-font-size: Header font size (1em)
+    * @prop --header-button-icon-size: Icon size for buttons in the header (1.5em)
+    * @prop --header-text-font-size: Font size for the text in the header (1em)
+    * @prop --header-text-color: Color for the text in the header (#525762)
     *
-    * 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)
+    * @prop --starter-question-padding: Starter question padding (0.75em)
     *
-    * 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)
@@ -1029,76 +1052,70 @@ video {
     * @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)
+    * @prop --message-padding-x: Message horizontal padding (1em)
+    * @prop --message-padding-y: Message vertical padding (0.5em)
     *
-    * 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)
+    * @prop --input-textarea-padding-x: Input textarea horizontal padding (0.75em)
+    * @prop --input-textarea-padding-y: Input textarea vertical padding (0.5em)
     *
-    * 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)
+    * @prop --send-button-padding-x: Send button horizontal padding (1em)
+    * @prop --send-button-padding-y: Send button vertical padding (0.5em)
     *
-    * 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)
+    * @prop --loading-spinner-size: Loading spinner size (1.25em)
     *
-    * 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)
+    * @prop --error-message-padding: Error message padding (0.5em)
     *
-    * 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)
+    * @prop --code-bg-user-color: Code background in user messages (--message-user-bg-color + 20% white)
+    * @prop --code-text-user-color: Code text color in user messages (--message-user-text-color)
+    * @prop --code-border-user-color: Code border in user messages (--message-user-bg-color + 20% black)
+    * @prop --code-bg-assistant-color: Code background in assistant messages (--message-assistant-bg-color + 50% white)
+    * @prop --code-text-assistant-color: Code text color in assistant messages (--message-assistant-text-color)
+    * @prop --code-border-assistant-color: Code border in assistant messages (--message-assistant-bg-color + 10% black)
     */
   /* Global variables */
   --chat-z-index: 50;
-  --container-padding: 1rem;
+  --container-padding: 1em;
 
   /* 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;
-  --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;
+  --button-border-color: transparent;
+  --button-border-color-hover: #d1d5db;
+  --button-padding: 0.5em;
+  --button-font-size: 0.875em; /* 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.875rem; /* text-sm */
-  --chat-window-font-size-sm: 0.75rem; /* text-xs */
+  --chat-window-font-size: 0.875em; /* text-sm */
+  --chat-window-font-size-sm: 0.75em; /* text-xs */
 
   /* Header variables */
   --header-bg-color: transparent;
@@ -1106,7 +1123,11 @@ video {
   --header-border-color: #f3f4f6;
   --header-button-text-color: #6b7280;
   --header-button-bg-hover-color: #f3f4f6;
-  --header-padding: 0.5rem;
+  --header-padding: 0.5em;
+  --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;
@@ -1114,7 +1135,7 @@ video {
   --starter-question-text-color: #3b82f6;
   --starter-question-border-color: #3b82f6;
   --starter-question-border-hover-color: #2563eb;
-  --starter-question-padding: 0.75rem;
+  --starter-question-padding: 0.75em;
 
   /* Message bubble variables */
   --message-user-bg-color: #3b82f6;
@@ -1125,8 +1146,8 @@ video {
   --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;
+  --message-padding-x: 1em;
+  --message-padding-y: 0.5em;
 
   /* Input area variables */
   --input-bg-color: transparent;
@@ -1134,8 +1155,8 @@ video {
   --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;
+  --input-textarea-padding-x: 0.75em;
+  --input-textarea-padding-y: 0.5em;
 
   /* Send button variables */
   --send-button-bg-color: #3b82f6;
@@ -1143,14 +1164,14 @@ video {
   --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;
+  --send-button-padding-x: 1em;
+  --send-button-padding-y: 0.5em;
 
   /* Loading variables */
   --loading-text-color: #6b7280;
   --loading-spinner-track-color: #e5e7eb;
   --loading-spinner-fill-color: #3b82f6;
-  --loading-spinner-size: 1.25rem;
+  --loading-spinner-size: 1.25em;
 
   /* Typing indicator variables */
   --typing-progress-bg-color: #ade3ff;
@@ -1162,24 +1183,21 @@ video {
 
   /* Error variables */
   --error-text-color: #ef4444;
-  --error-message-padding: 0.5rem;
+  --error-message-padding: 0.5em;
 
   /* 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;
+  --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%);;
 
   display: block;
   position: fixed;
   right: 20px;
   bottom: 20px;
 }
-#ocs-chat-window {
-  z-index: var(--chat-z-index);
-}
 textarea {
   max-height: 8rem;
   min-height: 2.5rem;
@@ -1200,6 +1218,10 @@ textarea::-webkit-scrollbar-thumb {
 textarea::-webkit-scrollbar-thumb:hover {
   background-color: var(--scrollbar-thumb-hover-color);
 }
+.loading-spinner {
+  width: var(--loading-spinner-size);
+  height: var(--loading-spinner-size);
+}
 @keyframes spin {
 
   to {
@@ -1212,8 +1234,6 @@ textarea::-webkit-scrollbar-thumb:hover {
   border-width: 2px;
   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;
@@ -1884,11 +1904,49 @@ textarea::-webkit-scrollbar-thumb:hover {
   --tw-prose-invert-th-borders: #4b5563;
   --tw-prose-invert-td-borders: #374151;
   max-width: none;
+  font-size: 1em;
+  --tw-prose-body: var(--message-assistant-text-color);
+  --tw-prose-headings: var(--message-assistant-text-color);
+  --tw-prose-lead: var(--message-assistant-text-color);
+  --tw-prose-links: var(--message-assistant-text-color);
+  --tw-prose-bold: var(--message-assistant-text-color);
+  --tw-prose-counters: var(--message-assistant-text-color);
+  --tw-prose-bullets: var(--message-assistant-text-color);
+  --tw-prose-hr: var(--message-assistant-text-color);
+  --tw-prose-quotes: var(--message-assistant-text-color);
+  --tw-prose-quote-borders: var(--message-assistant-text-color);
+  --tw-prose-captions: var(--message-assistant-text-color);
+  --tw-prose-kbd: var(--message-assistant-text-color);
+  --tw-prose-kbd-shadows: var(--message-assistant-text-color);
+  --tw-prose-code: var(--code-text-assistant-color);
+  --tw-prose-pre-code: var(--code-text-assistant-color);
+  --tw-prose-pre-bg: var(--code-bg-assistant-color);
+  --tw-prose-th-borders: var(--message-assistant-text-color);
+  --tw-prose-td-borders: var(--message-assistant-text-color);
+
+  --tw-prose-invert-body: var(--message-user-text-color);
+  --tw-prose-invert-headings: var(--message-user-text-color);
+  --tw-prose-invert-lead: var(--message-user-text-color);
+  --tw-prose-invert-links: var(--message-user-text-color);
+  --tw-prose-invert-bold: var(--message-user-text-color);
+  --tw-prose-invert-counters: var(--message-user-text-color);
+  --tw-prose-invert-bullets: var(--message-user-text-color);
+  --tw-prose-invert-hr: var(--message-user-text-color);
+  --tw-prose-invert-quotes: var(--message-user-text-color);
+  --tw-prose-invert-quote-borders: var(--message-user-text-color);
+  --tw-prose-invert-captions: var(--message-user-text-color);
+  --tw-prose-invert-kbd: var(--message-user-text-color);
+  --tw-prose-invert-kbd-shadows: var(--message-user-text-color);
+  --tw-prose-invert-code: var(--code-text-user-color);
+  --tw-prose-invert-pre-code: var(--code-text-user-color);
+  --tw-prose-invert-pre-bg: var(--code-bg-user-color);
+  --tw-prose-invert-th-borders: var(--message-user-text-color);
+  --tw-prose-invert-td-borders: var(--message-user-text-color);
 }
 /* override spacing */
 .chat-markdown > * {
-  margin-top: 0.1rem;
-  margin-bottom: 0.1rem;
+  margin-top: 0.1em;
+  margin-bottom: 0.1em;
 }
 .message-bubble-user .chat-markdown {
   --tw-prose-body: var(--tw-prose-invert-body);
@@ -1910,20 +1968,10 @@ 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);
 }
-.message-bubble-user .chat-markdown code {
-  background-color: var(--code-bg-user-color);
-  color: var(--code-text-user-color);
-}
 .message-bubble-user .chat-markdown pre {
-  background-color: var(--code-bg-user-color);
   border: 1px solid var(--code-border-user-color);
 }
-.message-bubble-assistant .chat-markdown code {
-  background-color: var(--code-bg-assistant-color);
-  color: var(--code-text-assistant-color);
-}
 .message-bubble-assistant .chat-markdown pre {
-  background-color: var(--code-bg-assistant-color);
   border: 1px solid var(--code-border-assistant-color);
 }
 .loading:after {