@ensembleapp/client-sdk 0.0.41 → 0.0.43

package/dist/index.d.ts

@@ -450,7 +450,9 @@ interface ChatWidgetStyles {
     backgroundSecondary?: string;
     backgroundTertiary?: string;
     borderColor?: string;
-    borderColorLight?: string;
+    subtleBorderColor?: string;
+    /** Controls only the outer ChatWidget border width. Internal dividers still use borderColor. */
+    borderWidth?: string | number;
     headerTextColor?: string;
     userBubbleTextColor?: string;
     assistantBubbleBackground?: string;

package/dist/index.js

@@ -27,7 +27,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // lib/chat/ChatWidget.css
-styleInject(':root[data-chat-widget],\n[data-chat-widget] {\n  --chat-primary: #3b82f6;\n  --chat-primary-text: #ffffff;\n  --chat-primary-hover: #2563eb;\n  --chat-primary-subtle: rgba(59, 130, 246, 0.1);\n  --chat-background: #ffffff;\n  --chat-background-secondary: #f9fafb;\n  --chat-background-tertiary: #f3f4f6;\n  --chat-border: #e5e7eb;\n  --chat-border-light: #f3f4f6;\n  --chat-text: #111827;\n  --chat-text-secondary: #4b5563;\n  --chat-text-muted: #6b7280;\n  --chat-text-disabled: #9ca3af;\n  --chat-success: #22c55e;\n  --chat-success-bg: rgba(34, 197, 94, 0.1);\n  --chat-error: #ef4444;\n  --chat-error-bg: rgba(239, 68, 68, 0.1);\n  --chat-header-text: #ffffff;\n  --chat-user-text: #ffffff;\n  --chat-assistant-bg: transparent;\n  --chat-assistant-text: var(--chat-text);\n  --chat-input-bg: var(--chat-background);\n  --chat-input-text: var(--chat-text);\n  --chat-input-placeholder: var(--chat-text-muted);\n  --chat-thought-border: var(--chat-border);\n  --chat-font-family:\n    "Inter",\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif;\n  --chat-radius: 0.75rem;\n  --chat-font-size: 0.925rem;\n  --chat-thought-font-size: 0.75rem;\n  --chat-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);\n  --chat-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);\n  --chat-overlay-bg: rgba(0, 0, 0, 0.3);\n}\n.chat-widget {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 24rem;\n  background: var(--chat-background);\n  border: 1px solid var(--chat-border);\n  border-radius: var(--chat-radius);\n  box-shadow: var(--chat-shadow);\n  overflow: hidden;\n  font-family: var(--chat-font-family);\n  color: var(--chat-assistant-text);\n}\n.chat-widget__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 40px;\n  padding: 0.75rem 1rem;\n  background: var(--chat-primary);\n  color: var(--chat-header-text);\n}\n.chat-widget__title {\n  margin: 0;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n.chat-widget__messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.chat-widget__message {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n.chat-widget__message-row {\n  display: flex;\n}\n.chat-widget__message-row--user {\n  justify-content: flex-end;\n}\n.chat-widget__message-row--assistant {\n  justify-content: flex-start;\n}\n.chat-widget__bubble {\n  max-width: 90%;\n  padding: 0.5rem 0.25rem;\n  border-radius: calc(var(--chat-radius) * 0.65);\n  font-size: var(--chat-font-size);\n}\n.chat-widget__bubble--user {\n  background: var(--chat-primary);\n  color: var(--chat-user-text);\n  border-bottom-right-radius: 0.35rem;\n}\n.chat-widget__bubble--assistant {\n  width: 90%;\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  border-bottom-left-radius: 0.35rem;\n}\n.chat-widget__widget {\n  width: 100%;\n}\n.chat-widget__markdown {\n  white-space: normal;\n  font-size: var(--chat-font-size);\n}\n.chat-widget__markdown h1 {\n  font-size: calc(var(--chat-font-size) * 1.4);\n}\n.chat-widget__markdown h2 {\n  font-size: calc(var(--chat-font-size) * 1.25);\n}\n.chat-widget__markdown h3 {\n  font-size: calc(var(--chat-font-size) * 1.1);\n}\n.chat-widget__markdown h4 {\n  font-size: calc(var(--chat-font-size) * 1.05);\n}\n.chat-widget__markdown h5 {\n  font-size: calc(var(--chat-font-size) * 1);\n}\n.chat-widget__markdown h6 {\n  font-size: calc(var(--chat-font-size) * 0.95);\n}\n.chat-widget__anchor-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.65rem 0.85rem;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  border: none;\n  border-radius: 999px;\n  box-shadow: var(--chat-shadow);\n  cursor: pointer;\n  font-weight: 600;\n  z-index: 99999;\n}\n.chat-widget__anchor-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-widget__anchor--left {\n  right: auto;\n  left: 20px;\n}\n.chat-widget__anchor-icon {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.chat-widget__popup {\n  position: fixed;\n  bottom: 80px;\n  right: 20px;\n  z-index: 99998;\n}\n.chat-widget__anchor--left.chat-widget__popup {\n  right: auto;\n  left: 20px;\n}\n.chat-widget__popup-inner {\n  width: 384px;\n  max-width: calc(100vw - 40px);\n  height: 500px;\n  max-height: calc(100vh - 140px);\n  box-shadow: var(--chat-shadow);\n  border-radius: 12px;\n  overflow: hidden;\n}\n.chat-widget__markdown a {\n  color: var(--chat-primary);\n  text-decoration: underline;\n}\n.chat-widget__markdown a:hover {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__markdown table {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 0.5rem 0;\n}\n.chat-widget__markdown th,\n.chat-widget__markdown td {\n  border: 1px solid var(--chat-border);\n  padding: 0.5rem;\n  text-align: left;\n  vertical-align: top;\n}\n.chat-widget__markdown thead th {\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  font-weight: 600;\n}\n.chat-widget__thoughts {\n  min-width: 0;\n  --chat-font-size: var(--chat-thought-font-size);\n}\n.chat-widget__details {\n  border: 0;\n}\n.chat-widget__thoughts-summary {\n  list-style: none;\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  cursor: pointer;\n  color: var(--chat-text-muted);\n  font-size: 0.8125rem;\n}\n.chat-widget__thoughts-summary:hover {\n  color: var(--chat-assistant-text);\n}\n.chat-widget__thoughts-icon-container {\n  display: flex;\n  border: 1px solid var(--chat-border);\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__thoughts-icon {\n  width: 0.75rem;\n  height: 0.75rem;\n  transition: transform 0.2s ease;\n}\n.chat-widget__details[open] .chat-widget__thoughts-icon {\n  transform: rotate(90deg);\n}\n.chat-widget__thoughts-content {\n  margin-top: 0.5rem;\n  margin-left: 0.4rem;\n  padding: 0.75rem;\n  border-left: 2px solid var(--chat-thought-border);\n  border-color: var(--chat-primary);\n  max-width: 100%;\n  overflow-x: auto;\n}\n.chat-widget__thoughts-text {\n  margin: 0;\n  line-height: 1.5;\n  color: var(--chat-text-secondary);\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  display: block;\n}\n.chat-widget__loading {\n  display: flex;\n  justify-content: flex-start;\n}\n.chat-widget__loading-bubble {\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  border-radius: calc(var(--chat-radius) * 0.65);\n  border-bottom-left-radius: 0.35rem;\n  padding: 0.5rem 0.75rem;\n}\n.chat-widget__loading-dots {\n  display: flex;\n  gap: 0.35rem;\n}\n.chat-widget__loading-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 999px;\n  background: var(--chat-text-disabled);\n  animation: chat-widget-bounce 1s infinite ease-in-out;\n}\n.chat-widget__loading-dot[data-delay="1"] {\n  animation-delay: 0.1s;\n}\n.chat-widget__loading-dot[data-delay="2"] {\n  animation-delay: 0.2s;\n}\n@keyframes chat-widget-bounce {\n  0%, 80%, 100% {\n    transform: scale(0.6);\n    opacity: 0.4;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n.chat-widget__input {\n  border-top: 1px solid var(--chat-border);\n  padding: 0.25rem 0 0.75rem;\n  background: var(--chat-input-bg);\n}\n.chat-widget__form {\n  position: relative;\n}\n.chat-widget__textarea {\n  width: 100%;\n  border: 0;\n  padding: 0.75rem 5.25rem 0.75rem 0.75rem;\n  background: transparent;\n  font-size: 0.925rem;\n  resize: none;\n  color: var(--chat-input-text);\n  font-family: inherit;\n}\n.chat-widget__textarea::-moz-placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__textarea::placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__textarea:focus-visible {\n  outline: none;\n}\n.chat-widget__textarea:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.chat-widget__toolbar {\n  position: absolute;\n  top: 0;\n  right: 3.75rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-right: 1px solid var(--chat-border);\n}\n.chat-widget__submit {\n  position: absolute;\n  top: 50%;\n  right: 0.75rem;\n  transform: translateY(-50%);\n  background: transparent;\n  border: 0;\n  width: 2.5rem;\n  height: 2.5rem;\n  display: grid;\n  place-items: center;\n  color: var(--chat-primary);\n  cursor: pointer;\n}\n.chat-widget__submit:disabled {\n  color: var(--chat-text-disabled);\n  cursor: not-allowed;\n}\n.chat-widget__submit:not(:disabled):hover {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__send-icon {\n  width: 1.2rem;\n  height: 1.2rem;\n}\n.chat-widget__mic-button {\n  position: relative;\n  border: none;\n  background: transparent;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: grid;\n  place-items: center;\n  color: var(--chat-primary);\n  cursor: pointer;\n  border-radius: 999px;\n}\n.chat-widget__mic-button:disabled {\n  color: var(--chat-text-disabled);\n  cursor: not-allowed;\n}\n.chat-widget__mic-button--active {\n  color: var(--chat-primary-hover);\n  background: var(--chat-primary-subtle);\n}\n.chat-widget__mic-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__mic-bar {\n  position: absolute;\n  bottom: 0.1rem;\n  left: 50%;\n  width: 16px;\n  height: 2px;\n  border-radius: 999px;\n  background: var(--chat-border);\n  overflow: hidden;\n  display: block;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n.chat-widget__mic-bar-fill {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: currentColor;\n  transform-origin: left;\n  transition: transform 0.12s linear;\n}\n.chat-widget__voice {\n  display: flex;\n  margin-top: 0.25rem;\n}\n.chat-widget__voice-button {\n  border: none;\n  background: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.1rem 0;\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: var(--chat-primary);\n  cursor: pointer;\n}\n.chat-widget__voice-button:disabled {\n  color: var(--chat-text-disabled);\n  cursor: not-allowed;\n}\n.chat-widget__voice-button--active {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__voice-icon {\n  width: 0.95rem;\n  height: 0.95rem;\n}\n.chat-widget__voice-icon--spin {\n  animation: chat-widget-spin 1s linear infinite;\n}\n@keyframes chat-widget-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.chat-widget__collapsed {\n  position: relative;\n  margin-bottom: 0.25rem;\n}\n.chat-widget__collapsed-content {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 300ms ease-out;\n}\n.chat-widget__collapsed-content--expanded {\n  grid-template-rows: 1fr;\n}\n.chat-widget__collapsed-content-inner {\n  overflow: hidden;\n}\n.chat-widget__collapsed-preview {\n  position: relative;\n  max-height: 1.5em;\n  overflow: hidden;\n  opacity: 0.6;\n  pointer-events: none;\n  transition: opacity 300ms ease-out, max-height 300ms ease-out;\n}\n.chat-widget__collapsed-preview--hidden {\n  opacity: 0;\n  max-height: 0;\n  pointer-events: none;\n}\n.chat-widget__collapsed-gradient {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 70%;\n  height: 100%;\n  background:\n    linear-gradient(\n      to right,\n      transparent 0%,\n      var(--chat-background) 90%);\n  pointer-events: none;\n}\n.chat-widget__collapsed-toggle {\n  display: inline-block;\n  padding: 0;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--chat-primary);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.chat-widget__collapsed-toggle:hover {\n  text-decoration: underline;\n}\n@keyframes chat-widget-slide-up {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 200px;\n  }\n  to {\n    opacity: 0.6;\n    transform: translateY(-8px);\n    max-height: 1.5em;\n  }\n}\n.chat-widget__collapsed--animating .chat-widget__collapsed-preview {\n  animation: chat-widget-slide-up 300ms ease-out forwards;\n}\n');
+styleInject(':root[data-chat-widget],\n[data-chat-widget] {\n  --chat-primary: #3b82f6;\n  --chat-primary-text: #ffffff;\n  --chat-primary-hover: #2563eb;\n  --chat-primary-subtle: rgba(59, 130, 246, 0.1);\n  --chat-background: #ffffff;\n  --chat-background-secondary: #f9fafb;\n  --chat-background-tertiary: #f3f4f6;\n  --chat-border: #e5e7eb;\n  --chat-border-light: #f3f4f6;\n  --chat-widget-border-width: 1px;\n  --chat-text: #111827;\n  --chat-text-secondary: #4b5563;\n  --chat-text-muted: #6b7280;\n  --chat-text-disabled: #9ca3af;\n  --chat-success: #22c55e;\n  --chat-success-bg: rgba(34, 197, 94, 0.1);\n  --chat-error: #ef4444;\n  --chat-error-bg: rgba(239, 68, 68, 0.1);\n  --chat-header-text: #ffffff;\n  --chat-user-text: #ffffff;\n  --chat-assistant-bg: transparent;\n  --chat-assistant-text: var(--chat-text);\n  --chat-input-bg: var(--chat-background);\n  --chat-input-text: var(--chat-text);\n  --chat-input-placeholder: var(--chat-text-muted);\n  --chat-thought-border: var(--chat-border);\n  --chat-font-family:\n    "Inter",\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif;\n  --chat-radius: 0.75rem;\n  --chat-font-size: 0.925rem;\n  --chat-thought-font-size: 0.75rem;\n  --chat-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);\n  --chat-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);\n  --chat-overlay-bg: rgba(0, 0, 0, 0.3);\n}\n.chat-widget {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 24rem;\n  background: var(--chat-background);\n  border: var(--chat-widget-border-width) solid var(--chat-border);\n  border-radius: 0;\n  box-shadow: var(--chat-shadow);\n  overflow: hidden;\n  font-family: var(--chat-font-family);\n  color: var(--chat-assistant-text);\n}\n.chat-widget--popup-content {\n  border: 0;\n  border-radius: inherit;\n  box-shadow: none;\n  min-height: 0;\n}\n.chat-widget__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 40px;\n  padding: 0.75rem 1rem;\n  background: var(--chat-primary);\n  color: var(--chat-header-text);\n}\n.chat-widget__title {\n  margin: 0;\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n.chat-widget__messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.chat-widget__message {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n.chat-widget__message-row {\n  display: flex;\n}\n.chat-widget__message-row--user {\n  justify-content: flex-end;\n}\n.chat-widget__message-row--assistant {\n  justify-content: flex-start;\n}\n.chat-widget__bubble {\n  max-width: 90%;\n  padding: 0.5rem 0.25rem;\n  border-radius: calc(var(--chat-radius) * 0.65);\n  font-size: var(--chat-font-size);\n}\n.chat-widget__bubble--user {\n  background: var(--chat-primary);\n  color: var(--chat-user-text);\n  border-bottom-right-radius: 0.35rem;\n}\n.chat-widget__bubble--assistant {\n  width: 90%;\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  border-bottom-left-radius: 0.35rem;\n}\n.chat-widget__widget {\n  width: 100%;\n}\n.chat-widget__markdown {\n  white-space: normal;\n  font-size: var(--chat-font-size);\n}\n.chat-widget__markdown h1 {\n  font-size: calc(var(--chat-font-size) * 1.4);\n}\n.chat-widget__markdown h2 {\n  font-size: calc(var(--chat-font-size) * 1.25);\n}\n.chat-widget__markdown h3 {\n  font-size: calc(var(--chat-font-size) * 1.1);\n}\n.chat-widget__markdown h4 {\n  font-size: calc(var(--chat-font-size) * 1.05);\n}\n.chat-widget__markdown h5 {\n  font-size: calc(var(--chat-font-size) * 1);\n}\n.chat-widget__markdown h6 {\n  font-size: calc(var(--chat-font-size) * 0.95);\n}\n.chat-widget__anchor-button {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.65rem 0.85rem;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  border: none;\n  border-radius: 999px;\n  box-shadow: var(--chat-shadow);\n  cursor: pointer;\n  font-weight: 600;\n  z-index: 99999;\n}\n.chat-widget__anchor-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-widget__anchor--left {\n  right: auto;\n  left: 20px;\n}\n.chat-widget__anchor-icon {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.chat-widget__popup {\n  position: fixed;\n  bottom: 80px;\n  right: 20px;\n  z-index: 99998;\n}\n.chat-widget__anchor--left.chat-widget__popup {\n  right: auto;\n  left: 20px;\n}\n.chat-widget__popup-inner {\n  width: 384px;\n  max-width: calc(100vw - 40px);\n  height: 500px;\n  max-height: calc(100vh - 140px);\n  box-shadow: var(--chat-shadow);\n  border-radius: 12px;\n  overflow: hidden;\n}\n.chat-widget__markdown a {\n  color: var(--chat-primary);\n  text-decoration: underline;\n}\n.chat-widget__markdown a:hover {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__markdown table {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 0.5rem 0;\n}\n.chat-widget__markdown th,\n.chat-widget__markdown td {\n  border: 1px solid var(--chat-border);\n  padding: 0.5rem;\n  text-align: left;\n  vertical-align: top;\n}\n.chat-widget__markdown thead th {\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  font-weight: 600;\n}\n.chat-widget__thoughts {\n  min-width: 0;\n  --chat-font-size: var(--chat-thought-font-size);\n}\n.chat-widget__details {\n  border: 0;\n}\n.chat-widget__thoughts-summary {\n  list-style: none;\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  cursor: pointer;\n  color: var(--chat-text-muted);\n  font-size: 0.8125rem;\n}\n.chat-widget__thoughts-summary:hover {\n  color: var(--chat-assistant-text);\n}\n.chat-widget__thoughts-icon-container {\n  display: flex;\n  border: 1px solid var(--chat-border);\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__thoughts-icon {\n  width: 0.75rem;\n  height: 0.75rem;\n  transition: transform 0.2s ease;\n}\n.chat-widget__details[open] .chat-widget__thoughts-icon {\n  transform: rotate(90deg);\n}\n.chat-widget__thoughts-content {\n  margin-top: 0.5rem;\n  margin-left: 0.4rem;\n  padding: 0.75rem;\n  border-left: 2px solid var(--chat-thought-border);\n  border-color: var(--chat-primary);\n  max-width: 100%;\n  overflow-x: auto;\n}\n.chat-widget__thoughts-text {\n  margin: 0;\n  line-height: 1.5;\n  color: var(--chat-text-secondary);\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  display: block;\n}\n.chat-widget__loading {\n  display: flex;\n  justify-content: flex-start;\n}\n.chat-widget__loading-bubble {\n  background: var(--chat-assistant-bg);\n  color: var(--chat-assistant-text);\n  border-radius: calc(var(--chat-radius) * 0.65);\n  border-bottom-left-radius: 0.35rem;\n  padding: 0.5rem 0.75rem;\n}\n.chat-widget__loading-dots {\n  display: flex;\n  gap: 0.35rem;\n}\n.chat-widget__loading-dot {\n  width: 0.5rem;\n  height: 0.5rem;\n  border-radius: 999px;\n  background: var(--chat-text-disabled);\n  animation: chat-widget-bounce 1s infinite ease-in-out;\n}\n.chat-widget__loading-dot[data-delay="1"] {\n  animation-delay: 0.1s;\n}\n.chat-widget__loading-dot[data-delay="2"] {\n  animation-delay: 0.2s;\n}\n@keyframes chat-widget-bounce {\n  0%, 80%, 100% {\n    transform: scale(0.6);\n    opacity: 0.4;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n.chat-widget__input {\n  border-top: 1px solid var(--chat-border);\n  padding: 0.25rem 0 0.75rem;\n  background: var(--chat-input-bg);\n}\n.chat-widget__form {\n  position: relative;\n}\n.chat-widget__textarea {\n  width: 100%;\n  border: 0;\n  padding: 0.75rem 5.25rem 0.75rem 0.75rem;\n  background: transparent;\n  font-size: 0.925rem;\n  resize: none;\n  color: var(--chat-input-text);\n  font-family: inherit;\n}\n.chat-widget__textarea::-moz-placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__textarea::placeholder {\n  color: var(--chat-input-placeholder);\n}\n.chat-widget__textarea:focus-visible {\n  outline: none;\n}\n.chat-widget__textarea:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.chat-widget__toolbar {\n  position: absolute;\n  top: 0;\n  right: 3.75rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-right: 1px solid var(--chat-border);\n}\n.chat-widget__submit {\n  position: absolute;\n  top: 50%;\n  right: 0.75rem;\n  transform: translateY(-50%);\n  background: transparent;\n  border: 0;\n  width: 2.5rem;\n  height: 2.5rem;\n  display: grid;\n  place-items: center;\n  color: var(--chat-primary);\n  cursor: pointer;\n}\n.chat-widget__submit:disabled {\n  color: var(--chat-text-disabled);\n  cursor: not-allowed;\n}\n.chat-widget__submit:not(:disabled):hover {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__send-icon {\n  width: 1.2rem;\n  height: 1.2rem;\n}\n.chat-widget__mic-button {\n  position: relative;\n  border: none;\n  background: transparent;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: grid;\n  place-items: center;\n  color: var(--chat-primary);\n  cursor: pointer;\n  border-radius: 999px;\n}\n.chat-widget__mic-button:disabled {\n  color: var(--chat-text-disabled);\n  cursor: not-allowed;\n}\n.chat-widget__mic-button--active {\n  color: var(--chat-primary-hover);\n  background: var(--chat-primary-subtle);\n}\n.chat-widget__mic-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.chat-widget__mic-bar {\n  position: absolute;\n  bottom: 0.1rem;\n  left: 50%;\n  width: 16px;\n  height: 2px;\n  border-radius: 999px;\n  background: var(--chat-border);\n  overflow: hidden;\n  display: block;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n.chat-widget__mic-bar-fill {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: currentColor;\n  transform-origin: left;\n  transition: transform 0.12s linear;\n}\n.chat-widget__voice {\n  display: flex;\n  margin-top: 0.25rem;\n}\n.chat-widget__voice-button {\n  border: none;\n  background: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.1rem 0;\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: var(--chat-primary);\n  cursor: pointer;\n}\n.chat-widget__voice-button:disabled {\n  color: var(--chat-text-disabled);\n  cursor: not-allowed;\n}\n.chat-widget__voice-button--active {\n  color: var(--chat-primary-hover);\n}\n.chat-widget__voice-icon {\n  width: 0.95rem;\n  height: 0.95rem;\n}\n.chat-widget__voice-icon--spin {\n  animation: chat-widget-spin 1s linear infinite;\n}\n@keyframes chat-widget-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.chat-widget__collapsed {\n  position: relative;\n  margin-bottom: 0.25rem;\n}\n.chat-widget__collapsed-content {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 300ms ease-out;\n}\n.chat-widget__collapsed-content--expanded {\n  grid-template-rows: 1fr;\n}\n.chat-widget__collapsed-content-inner {\n  overflow: hidden;\n}\n.chat-widget__collapsed-preview {\n  position: relative;\n  max-height: 1.5em;\n  overflow: hidden;\n  opacity: 0.6;\n  pointer-events: none;\n  transition: opacity 300ms ease-out, max-height 300ms ease-out;\n}\n.chat-widget__collapsed-preview--hidden {\n  opacity: 0;\n  max-height: 0;\n  pointer-events: none;\n}\n.chat-widget__collapsed-gradient {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 70%;\n  height: 100%;\n  background:\n    linear-gradient(\n      to right,\n      transparent 0%,\n      var(--chat-background) 90%);\n  pointer-events: none;\n}\n.chat-widget__collapsed-toggle {\n  display: inline-block;\n  padding: 0;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--chat-primary);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.chat-widget__collapsed-toggle:hover {\n  text-decoration: underline;\n}\n@keyframes chat-widget-slide-up {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 200px;\n  }\n  to {\n    opacity: 0.6;\n    transform: translateY(-8px);\n    max-height: 1.5em;\n  }\n}\n.chat-widget__collapsed--animating .chat-widget__collapsed-preview {\n  animation: chat-widget-slide-up 300ms ease-out forwards;\n}\n');
 
 // lib/chat/ChatWidget.tsx
 import { Send, StopCircle } from "lucide-react";
@@ -26901,7 +26901,8 @@ var lightTheme = {
   backgroundSecondary: "#f9fafb",
   backgroundTertiary: "#f3f4f6",
   borderColor: "#e5e7eb",
-  borderColorLight: "#f3f4f6",
+  subtleBorderColor: "#f3f4f6",
+  borderWidth: "1px",
   headerTextColor: "#ffffff",
   userBubbleTextColor: "#ffffff",
   assistantBubbleBackground: "transparent",
@@ -26921,27 +26922,28 @@ var darkTheme = {
   theme: "dark",
   primaryColor: "#3b82f6",
   primaryTextColor: "#ffffff",
-  backgroundColor: "#1f2937",
-  backgroundSecondary: "#374151",
-  backgroundTertiary: "#4b5563",
-  borderColor: "#4b5563",
-  borderColorLight: "#374151",
+  backgroundColor: "#111827",
+  backgroundSecondary: "#1f2937",
+  backgroundTertiary: "#374151",
+  borderColor: "#374151",
+  subtleBorderColor: "#1f2937",
+  borderWidth: "1px",
   headerTextColor: "#ffffff",
   userBubbleTextColor: "#ffffff",
   assistantBubbleBackground: "transparent",
-  assistantBubbleTextColor: "#f9fafb",
-  textColor: "#f9fafb",
-  textSecondary: "#d1d5db",
-  textMuted: "#9ca3af",
-  textDisabled: "#6b7280",
+  assistantBubbleTextColor: "#fafafa",
+  textColor: "#fafafa",
+  textSecondary: "#d4d4d8",
+  textMuted: "#a1a1aa",
+  textDisabled: "#71717a",
   fontFamily: `'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif`,
   borderRadius: "0.75rem",
-  inputBackground: "#374151",
-  inputTextColor: "#f9fafb",
-  inputPlaceholderColor: "#9ca3af",
-  thoughtsBorderColor: "#4b5563"
+  inputBackground: "#1f2937",
+  inputTextColor: "#fafafa",
+  inputPlaceholderColor: "#a1a1aa",
+  thoughtsBorderColor: "#374151"
 };
-function detectDarkMode() {
+function detectChatWidgetDarkMode() {
   if (typeof window === "undefined") return false;
   const html2 = document.documentElement;
   const body = document.body;
@@ -26955,6 +26957,15 @@ function detectDarkMode() {
   if (colorScheme === "light") return false;
   return window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
+function resolveChatWidgetTheme(styleProps, detectedDarkMode) {
+  const themeMode = styleProps?.theme || "auto";
+  const isDark = themeMode === "dark" || themeMode === "auto" && detectedDarkMode;
+  const baseTheme = isDark ? darkTheme : lightTheme;
+  const overrides = styleProps ? Object.fromEntries(
+    Object.entries(styleProps).filter(([, v]) => v !== void 0)
+  ) : {};
+  return { ...baseTheme, ...overrides };
+}
 var mixWithBlack = (hex3, ratio = 0.15) => {
   const normalized = hex3.replace("#", "");
   if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return hex3;
@@ -26987,14 +26998,14 @@ var ChatWidget = forwardRef(function ChatWidget2({
   widgets,
   feedback
 }, ref) {
-  const [detectedDarkMode, setDetectedDarkMode] = useState9(() => detectDarkMode());
+  const [detectedDarkMode, setDetectedDarkMode] = useState9(() => detectChatWidgetDarkMode());
   useEffect6(() => {
-    setDetectedDarkMode(detectDarkMode());
+    setDetectedDarkMode(detectChatWidgetDarkMode());
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => setDetectedDarkMode(detectDarkMode());
+    const handleChange = () => setDetectedDarkMode(detectChatWidgetDarkMode());
     mediaQuery.addEventListener("change", handleChange);
     const observer = new MutationObserver(() => {
-      setDetectedDarkMode(detectDarkMode());
+      setDetectedDarkMode(detectChatWidgetDarkMode());
     });
     observer.observe(document.documentElement, {
       attributes: true,
@@ -27009,15 +27020,11 @@ var ChatWidget = forwardRef(function ChatWidget2({
       observer.disconnect();
     };
   }, []);
-  const theme = useMemo5(() => {
-    const themeMode = styleProps?.theme || "auto";
-    const isDark = themeMode === "dark" || themeMode === "auto" && detectedDarkMode;
-    const baseTheme = isDark ? darkTheme : lightTheme;
-    const overrides = styleProps ? Object.fromEntries(
-      Object.entries(styleProps).filter(([, v]) => v !== void 0)
-    ) : {};
-    return { ...baseTheme, ...overrides };
-  }, [styleProps, detectedDarkMode]);
+  const theme = useMemo5(
+    () => resolveChatWidgetTheme(styleProps, detectedDarkMode),
+    [styleProps, detectedDarkMode]
+  );
+  const widgetBorderWidth = typeof theme.borderWidth === "number" ? `${theme.borderWidth}px` : theme.borderWidth;
   const themeVariables = useMemo5(
     () => ({
       "--chat-primary": theme.primaryColor,
@@ -27029,7 +27036,8 @@ var ChatWidget = forwardRef(function ChatWidget2({
       "--chat-background-secondary": theme.backgroundSecondary,
       "--chat-background-tertiary": theme.backgroundTertiary,
       "--chat-border": theme.borderColor,
-      "--chat-border-light": theme.borderColorLight,
+      "--chat-border-light": theme.subtleBorderColor,
+      "--chat-widget-border-width": widgetBorderWidth,
       "--chat-text": theme.textColor,
       "--chat-text-secondary": theme.textSecondary,
       "--chat-text-muted": theme.textMuted,
@@ -27045,7 +27053,7 @@ var ChatWidget = forwardRef(function ChatWidget2({
       "--chat-input-placeholder": theme.inputPlaceholderColor,
       "--chat-thought-border": theme.thoughtsBorderColor
     }),
-    [theme]
+    [theme, widgetBorderWidth]
   );
   const [input, setInput] = useState9("");
   const [isMicActive, setIsMicActive] = useState9(false);
@@ -27404,7 +27412,7 @@ var ChatWidget = forwardRef(function ChatWidget2({
 });
 
 // lib/chat/PopupChatWidget.css
-styleInject(".chat-popup__anchor {\n  position: fixed;\n  inset-block-end: 20px;\n  inset-inline-end: 20px;\n}\n.chat-popup--start {\n  inset-inline-end: auto;\n  inset-inline-start: 20px;\n}\n.chat-popup__anchor-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.65rem 0.85rem;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  border: none;\n  border-radius: 999px;\n  box-shadow: var(--chat-shadow);\n  cursor: pointer;\n  font-weight: 600;\n  z-index: 99999;\n}\n.chat-popup__anchor-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-popup__anchor-icon {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.chat-popup__panel {\n  position: fixed;\n  inset-block-end: 20px;\n  inset-inline-end: 20px;\n  z-index: 99998;\n  transition: opacity 0.15s ease, visibility 0.15s ease;\n}\n.chat-popup--start.chat-popup__panel {\n  inset-inline-end: auto;\n  inset-inline-start: 20px;\n}\n.chat-popup__panel--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n.chat-popup__panel--closed {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.chat-popup__panel-inner {\n  width: 384px;\n  max-width: calc(100vw - 40px);\n  height: 500px;\n  max-height: calc(100vh - 140px);\n  box-shadow: var(--chat-shadow);\n  border-radius: 12px;\n  overflow: visible;\n  background: var(--chat-background);\n  border: 1px solid var(--chat-border);\n  position: relative;\n}\n.chat-popup__close {\n  position: absolute;\n  top: 0;\n  z-index: 10;\n  transform: translate(30%, -40%);\n}\n.chat-popup__close--end {\n  inset-inline-end: 0;\n}\n.chat-popup__close--start {\n  inset-inline-start: 0;\n}\n.chat-popup__close-button {\n  border: none;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  box-shadow: var(--chat-shadow);\n}\n.chat-popup__close-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-popup__close-icon {\n  width: 16px;\n  height: 16px;\n}\n");
+styleInject(".chat-popup__anchor {\n  position: fixed;\n  inset-block-end: 20px;\n  inset-inline-end: 20px;\n}\n.chat-popup--start {\n  inset-inline-end: auto;\n  inset-inline-start: 20px;\n}\n.chat-popup__anchor-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.65rem 0.85rem;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  border: none;\n  border-radius: 999px;\n  box-shadow: var(--chat-shadow);\n  cursor: pointer;\n  font-weight: 600;\n  z-index: 99999;\n}\n.chat-popup__anchor-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-popup__anchor-icon {\n  width: 1.1rem;\n  height: 1.1rem;\n}\n.chat-popup__panel {\n  position: fixed;\n  inset-block-end: 20px;\n  inset-inline-end: 20px;\n  z-index: 99998;\n  transition: opacity 0.15s ease, visibility 0.15s ease;\n}\n.chat-popup--start.chat-popup__panel {\n  inset-inline-end: auto;\n  inset-inline-start: 20px;\n}\n.chat-popup__panel--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n.chat-popup__panel--closed {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.chat-popup__panel-inner {\n  width: 384px;\n  max-width: calc(100vw - 40px);\n  height: 500px;\n  max-height: calc(100vh - 140px);\n  box-shadow: var(--chat-shadow);\n  border-radius: var(--chat-radius);\n  overflow: visible;\n  background: var(--chat-background);\n  border: 1px solid var(--chat-border);\n  position: relative;\n}\n.chat-popup__close {\n  position: absolute;\n  top: 0;\n  z-index: 10;\n  transform: translate(30%, -40%);\n}\n.chat-popup__close--end {\n  inset-inline-end: 0;\n}\n.chat-popup__close--start {\n  inset-inline-start: 0;\n}\n.chat-popup__close-button {\n  border: none;\n  background: var(--chat-primary);\n  color: var(--chat-primary-text);\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  cursor: pointer;\n  display: grid;\n  place-items: center;\n  box-shadow: var(--chat-shadow);\n}\n.chat-popup__close-button:hover {\n  background: var(--chat-primary-hover);\n}\n.chat-popup__close-icon {\n  width: 16px;\n  height: 16px;\n}\n");
 
 // lib/chat/PopupChatWidget.tsx
 import { MessageSquare as MessageSquare2, X } from "lucide-react";
@@ -27413,7 +27421,29 @@ import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function PopupChatWidget({ anchor, ...props }) {
   const [isOpen, setIsOpen] = useState10(anchor?.initiallyOpen ?? false);
   const [hasOpened, setHasOpened] = useState10(anchor?.initiallyOpen ?? false);
+  const [detectedDarkMode, setDetectedDarkMode] = useState10(() => detectChatWidgetDarkMode());
   const openResolved = props.openOverride ?? isOpen;
+  useEffect7(() => {
+    setDetectedDarkMode(detectChatWidgetDarkMode());
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => setDetectedDarkMode(detectChatWidgetDarkMode());
+    mediaQuery.addEventListener("change", handleChange);
+    const observer = new MutationObserver(() => {
+      setDetectedDarkMode(detectChatWidgetDarkMode());
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+      observer.disconnect();
+    };
+  }, []);
   useEffect7(() => {
     if (props.openOverride === void 0) return;
     setIsOpen(props.openOverride);
@@ -27433,12 +27463,11 @@ function PopupChatWidget({ anchor, ...props }) {
   const anchorPositionClass = anchor?.position === "bottom-start" ? "chat-popup--start" : "chat-popup--end";
   const closeConfig = anchor?.closeButton ?? props.closeButton;
   const showClose = closeConfig?.show !== false;
+  const theme = useMemo6(
+    () => resolveChatWidgetTheme(props.styles, detectedDarkMode),
+    [props.styles, detectedDarkMode]
+  );
   const themeStyle = useMemo6(() => {
-    const primary = props.styles?.primaryColor ?? "#3b82f6";
-    const primaryText = props.styles?.primaryTextColor ?? "#ffffff";
-    const background = props.styles?.backgroundColor ?? "#ffffff";
-    const border = props.styles?.borderColor ?? "#e5e7eb";
-    const headerText = props.styles?.headerTextColor ?? "#ffffff";
     const mixWithBlack2 = (hex3, ratio = 0.15) => {
       const normalized = hex3.replace("#", "");
       if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return hex3;
@@ -27449,14 +27478,17 @@ function PopupChatWidget({ anchor, ...props }) {
       return `#${mix(r).toString(16).padStart(2, "0")}${mix(g).toString(16).padStart(2, "0")}${mix(b).toString(16).padStart(2, "0")}`;
     };
     return {
-      "--chat-primary": primary,
-      "--chat-primary-hover": mixWithBlack2(primary, 0.2),
-      "--chat-primary-text": primaryText,
-      "--chat-background": background,
-      "--chat-border": border,
-      "--chat-header-text": headerText
+      "--chat-primary": theme.primaryColor,
+      "--chat-primary-hover": mixWithBlack2(theme.primaryColor, 0.2),
+      "--chat-primary-text": theme.primaryTextColor,
+      "--chat-background": theme.backgroundColor,
+      "--chat-border": theme.borderColor,
+      "--chat-header-text": theme.headerTextColor,
+      "--chat-radius": theme.borderRadius,
+      "--chat-text": theme.textColor,
+      "--chat-text-muted": theme.textMuted
     };
-  }, [props.styles]);
+  }, [theme]);
   const popupStyle = useMemo6(() => {
     const size = props.popupSize ?? {};
     return {
@@ -27509,7 +27541,13 @@ function PopupChatWidget({ anchor, ...props }) {
               )
             }
           ),
-          hasOpened && /* @__PURE__ */ jsx18(ChatWidget, { ...props })
+          hasOpened && /* @__PURE__ */ jsx18(
+            ChatWidget,
+            {
+              ...props,
+              className: cn("chat-widget--popup-content", props.className)
+            }
+          )
         ] })
       }
     )