@helpway/react 0.2.0 → 0.3.1

package/dist/index.js

@@ -462,6 +462,23 @@ function createWidgetStore() {
           state.setTyping(event.conversationId, false);
           break;
         }
+        case "conversationCreated": {
+          const conv = event.conversation;
+          const alreadyPresent = state.conversations.some((c) => c.id === conv.id);
+          if (alreadyPresent) break;
+          state.addConversation({
+            id: conv.id,
+            title: conv.title,
+            status: conv.status,
+            lastMessageText: conv.lastMessageText ?? null,
+            lastMessageAt: conv.lastMessageAt ?? null,
+            lastMessageSenderType: conv.lastMessageSenderType ?? null,
+            lastMessageSenderName: null,
+            lastMessageSenderImage: null,
+            unreadCount: 0
+          });
+          break;
+        }
         default:
           break;
       }
@@ -513,7 +530,7 @@ var en = {
   // Date separators (today is implicit — never rendered)
   "widget.yesterday": "Yesterday",
   // Sender labels
-  "widget.better_ai": "Better AI",
+  "widget.helpway_ai": "Helpway AI",
   "widget.support": "Support",
   // Events
   "widget.joined": "joined the conversation",
@@ -809,6 +826,9 @@ function SupportProvider({
                 status: c.status,
                 lastMessageText: c.lastMessageText,
                 lastMessageAt: c.lastMessageAt,
+                lastMessageSenderType: c.lastMessageSenderType,
+                lastMessageSenderName: c.lastMessageSenderName,
+                lastMessageSenderImage: c.lastMessageSenderImage,
                 unreadCount: 0
               })
             )
@@ -908,7 +928,7 @@ function inferApiUrl() {
 }
 
 // src/themed/default-widget.tsx
-import { useCallback as useCallback12, useEffect as useEffect10, useRef as useRef13, useState as useState12 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect11, useRef as useRef13, useState as useState12 } from "react";
 
 // src/hooks/use-composer.ts
 import { useCallback as useCallback2, useState as useState2 } from "react";
@@ -920,6 +940,7 @@ function useComposer(conversationId) {
   const [isSubmitting, setIsSubmitting] = useState2(false);
   const [attachments, setAttachments] = useState2([]);
   const [sendError, setSendError] = useState2(null);
+  const [emailGateConvId, setEmailGateConvId] = useState2(null);
   const addFiles = useCallback2(
     async (files) => {
       if (!conversationId) return;
@@ -1025,6 +1046,9 @@ function useComposer(conversationId) {
         if (result.item) {
           store.getState().replaceMessage(conv.id, optimisticId, result.item);
         }
+        if (result.requireEmail) {
+          setEmailGateConvId(conv.id);
+        }
       } else {
         const result = await client.widget.sendMessage.mutate({
           conversationId,
@@ -1057,7 +1081,8 @@ function useComposer(conversationId) {
     addFiles,
     removeAttachment,
     sendError,
-    clearSendError
+    clearSendError,
+    emailGateConvId
   };
 }
 function fileToBase64(file) {
@@ -1113,6 +1138,9 @@ function useConversations() {
       status: "open",
       lastMessageText: text,
       lastMessageAt: now,
+      lastMessageSenderType: "visitor",
+      lastMessageSenderName: null,
+      lastMessageSenderImage: null,
       unreadCount: 0
     });
     store2.setMessages(tempConversationId, [optimisticMsg]);
@@ -1294,39 +1322,215 @@ function useWidget() {
 import { useCallback as useCallback7, useRef as useRef7, useState as useState7 } from "react";
 
 // src/themed/icons.tsx
-import {
-  IconBubble2,
-  IconCrossMedium,
-  IconArrowLeft,
-  IconChevronRight,
-  IconSparklesSoft,
-  IconPaperPlaneTopRight,
-  IconPaperclip1,
-  IconArrowUp,
-  IconHome,
-  IconBubbleDots,
-  IconMagnifyingGlass,
-  IconBubblePlus,
-  IconAppleIntelligence,
-  IconBook,
-  IconMegaphone,
-  IconLightBulb,
-  IconCircleQuestionmark,
-  IconNewspaper,
-  IconStar
-} from "@central-icons-react/round-outlined-radius-2-stroke-2";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function XIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d: "M6.5 6.5L17.5 17.5M17.5 6.5L6.5 17.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    }
+  );
+}
+function SendIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d: "M9.61946 10.8613L20.9997 4.55422M9.04735 10.9043L4.10061 5.68812C3.49632 5.05091 3.94803 4 4.82621 4H20.2513C21.0247 4 21.5054 4.84039 21.1132 5.50702L13.1902 18.9762C12.7433 19.7358 11.6035 19.5879 11.3654 18.7393L9.28458 11.3223C9.24066 11.1658 9.15923 11.0223 9.04735 10.9043Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function PaperclipIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d: "M6 11V15C6 18.3137 8.68629 21 12 21C15.3137 21 18 18.3137 18 15V7C18 4.79086 16.2091 3 14 3C11.7909 3 10 4.79086 10 7V15C10 16.1046 10.8954 17 12 17C13.1046 17 14 16.1046 14 15V7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    }
+  );
+}
+function HomeIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d: "M4 9.77313C4 9.2136 4 8.93383 4.07063 8.67517C4.1332 8.446 4.23609 8.22982 4.3745 8.03675C4.53071 7.81882 4.74784 7.6424 5.1821 7.28957L9.9821 3.38956C10.7014 2.80513 11.0611 2.51291 11.4609 2.40099C11.8135 2.30229 12.1865 2.30229 12.5391 2.40099C12.9389 2.51291 13.2986 2.80513 14.0179 3.38957L18.8179 7.28957C19.2522 7.6424 19.4693 7.81882 19.6255 8.03675C19.7639 8.22982 19.8668 8.446 19.9294 8.67517C20 8.93383 20 9.2136 20 9.77313V16.8C20 17.9201 20 18.4802 19.782 18.908C19.5903 19.2843 19.2843 19.5903 18.908 19.782C18.4802 20 17.9201 20 16.8 20H7.2C6.07989 20 5.51984 20 5.09202 19.782C4.71569 19.5903 4.40973 19.2843 4.21799 18.908C4 18.4802 4 17.9201 4 16.8V9.77313Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" })
+    }
+  );
+}
+function MessagesIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M4.00195 6.00003C4.00195 4.89546 4.89738 4.00003 6.00195 4.00002L18.0019 4C19.1065 4 20.002 4.89543 20.002 6V16.0358C20.002 17.1403 19.1065 18.0358 18.002 18.0358L15.3757 18.0358C15.1427 18.0358 14.9171 18.1171 14.7377 18.2657L11.9977 20.5358L9.29398 18.2694C9.11393 18.1185 8.8865 18.0358 8.65157 18.0358H6.00195C4.89738 18.0358 4.00195 17.1403 4.00195 16.0358V6.00003Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx2("path", { d: "M6.875 11.25C6.875 11.7332 7.26675 12.125 7.75 12.125C8.23325 12.125 8.625 11.7332 8.625 11.25C8.625 10.7668 8.23325 10.375 7.75 10.375C7.26675 10.375 6.875 10.7668 6.875 11.25ZM11.125 11.25C11.125 11.7332 11.5168 12.125 12 12.125C12.4832 12.125 12.875 11.7332 12.875 11.25C12.875 10.7668 12.4832 10.375 12 10.375C11.5168 10.375 11.125 10.7668 11.125 11.25ZM15.375 11.25C15.375 11.7332 15.7668 12.125 16.25 12.125C16.7332 12.125 17.125 11.7332 17.125 11.25C17.125 10.7668 16.7332 10.375 16.25 10.375C15.7668 10.375 15.375 10.7668 15.375 11.25Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "0.75", strokeLinecap: "square" })
+      ]
+    }
+  );
+}
+function BookIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d: "M9 6C8.44772 6 8 6.44772 8 7C8 7.55228 8.44772 8 9 8V6ZM15 8C15.5523 8 16 7.55228 16 7C16 6.44772 15.5523 6 15 6V8ZM9 10C8.44772 10 8 10.4477 8 11C8 11.5523 8.44772 12 9 12V10ZM12 12C12.5523 12 13 11.5523 13 11C13 10.4477 12.5523 10 12 10V12ZM7 4H17V2H7V4ZM18 5V19H20V5H18ZM17 20H7V22H17V20ZM6 19V5H4V19H6ZM7 20C6.44771 20 6 19.5523 6 19H4C4 20.6569 5.34315 22 7 22V20ZM18 19C18 19.5523 17.5523 20 17 20V22C18.6569 22 20 20.6569 20 19H18ZM17 4C17.5523 4 18 4.44772 18 5H20C20 3.34315 18.6569 2 17 2V4ZM7 2C5.34315 2 4 3.34315 4 5H6C6 4.44772 6.44772 4 7 4V2ZM18 12V15H20V12H18ZM17 16H7V18H17V16ZM7 22H10V20H7V22ZM7 16C5.34315 16 4 17.3431 4 19H6C6 18.4477 6.44772 18 7 18V16ZM18 15C18 15.5523 17.5523 16 17 16V18C18.6569 18 20 16.6569 20 15H18ZM9 8H15V6H9V8ZM9 12H12V10H9V12Z", fill: "currentColor" })
+    }
+  );
+}
+function MegaphoneIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d: "M17.9961 14.0001C19.6529 14.0001 20.9961 12.657 20.9961 11.0001C20.9961 9.34325 19.6529 8.0001 17.9961 8.0001M12.8254 18.0001C12.4136 19.1653 11.3023 20.0001 9.99609 20.0001C8.33924 20.0001 6.99609 18.657 6.99609 17.0001V15.5001M6.99829 6.5001V15.5001M17.9961 5.73752V16.2627C17.9961 17.617 16.6784 18.5797 15.3882 18.1681L4.38819 14.6585C3.55899 14.394 2.99609 13.6235 2.99609 12.7532V9.24704C2.99609 8.37667 3.55899 7.60622 4.38819 7.34167L15.3882 3.83215C16.6784 3.42051 17.9961 4.38325 17.9961 5.73752Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function LightbulbIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d: "M10 21H14M15.6076 15C17.6404 13.7751 19 11.5463 19 9C19 5.13401 15.866 2 12 2C8.13401 2 5 5.13401 5 9C5 11.5463 6.35958 13.7751 8.39241 15M15.6076 15C15.4111 15.1184 15.2084 15.2274 15 15.3264V17C15 17.5523 14.5523 18 14 18H10C9.44772 18 9 17.5523 9 17V15.3264C8.7916 15.2274 8.58886 15.1184 8.39241 15M15.6076 15H8.39241", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function HelpCircleIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx2("path", { d: "M12 16V16.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx2("path", { d: "M12 13C12 11.3608 14 11.9319 14 10C14 8.89543 13.1046 8 12 8C11.2597 8 10.6134 8.4022 10.2676 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+      ]
+    }
+  );
+}
+function NewspaperIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d: "M16 12V6C16 4.89543 15.1046 4 14 4H5C3.89543 4 3 4.89543 3 6V17.5C3 18.8807 4.11929 20 5.5 20H18.5M16 12V17.5C16 18.8807 17.1193 20 18.5 20M16 12H19C20.1046 12 21 12.8954 21 14V17.5C21 18.8807 19.8807 20 18.5 20M7 16H12M7 8H12V12H7V8Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function StarIcon({ size = 24, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: typeof size === "number" ? `${size}px` : size,
+      height: typeof size === "number" ? `${size}px` : size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": true,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx2("path", { d: "M11.5288 2.29524C11.7179 1.90159 12.2821 1.90159 12.4712 2.29524L14.9458 7.44648C15.0219 7.60491 15.1735 7.71434 15.3487 7.73728L21.0456 8.4832C21.4809 8.5402 21.6552 9.07312 21.3368 9.37342L17.1693 13.303C17.0412 13.4238 16.9832 13.6009 17.0154 13.7735L18.0616 19.3857C18.1416 19.8146 17.6852 20.144 17.2993 19.9359L12.249 17.2133C12.0937 17.1296 11.9063 17.1296 11.751 17.2133L6.70073 19.9359C6.3148 20.144 5.85841 19.8146 5.93837 19.3857L6.98459 13.7735C7.01677 13.6009 6.95885 13.4238 6.83068 13.303L2.66324 9.37342C2.34476 9.07312 2.51909 8.5402 2.95444 8.4832L8.65127 7.73728C8.82648 7.71434 8.97811 7.60491 9.05422 7.44648L11.5288 2.29524Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
 
 // src/themed/message-bubble.tsx
-import { useCallback as useCallback6, useLayoutEffect, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect5, useLayoutEffect, useRef as useRef6, useState as useState6 } from "react";
 import { createPortal } from "react-dom";
 
 // src/themed/content/simple-markdown.tsx
 import { useEffect as useEffect4, useRef as useRef5 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var COPY_ICON = `<svg class="hw-code-copy-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M15 9V4.25C15 3.55964 14.4404 3 13.75 3H4.25C3.55964 3 3 3.55964 3 4.25V13.75C3 14.4404 3.55964 15 4.25 15H9M10.25 9H19.75C20.4404 9 21 9.55964 21 10.25V19.75C21 20.4404 20.4404 21 19.75 21H10.25C9.55964 21 9 20.4404 9 19.75V10.25C9 9.55964 9.55964 9 10.25 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+var CHECK_ICON = `<svg class="hw-code-check-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 13L11 16L16 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+function inferCodeLanguage(code, lang) {
+  if (lang) return lang;
+  const trimmed = code.trim();
+  if (/^(npm|pnpm|yarn|bun|npx|curl|cd|mkdir|cp|mv|rm|export)\b/m.test(trimmed)) return "bash";
+  if (/\b(import|export)\b/.test(trimmed) && /<[A-Z_a-z][\w.:-]*(\s|>)/.test(trimmed)) return "tsx";
+  if (/\b(import|export|const|let|function|type|interface)\b/.test(trimmed)) return "ts";
+  if (/^\s*[{[]/.test(trimmed)) return "json";
+  return "code";
+}
+function handleCodeBlockClick(e, root) {
+  const target = e.target;
+  const btn = target?.closest(".hw-code-copy");
+  if (!btn || !root.contains(btn)) return;
+  const block = btn.closest(".hw-code");
+  const code = block?.querySelector("pre code");
+  const text = code?.textContent ?? "";
+  if (!text) return;
+  void navigator.clipboard?.writeText(text).then(
+    () => flashCopied(btn),
+    () => flashCopied(btn, true)
+  );
+}
 function renderMarkdown(md) {
   const codeBlocks = [];
   const codeBlockPlaceholder = (i) => `\0CODEBLOCK${i}\0`;
-  let body = md.replace(
+  const body = md.replace(
     // Eat ALL newlines around the fence (zero-or-more both sides). The
     // replacement re-emits its own `\n\n` pair so the paragraph splitter
     // cleanly bookends the fence. Without this, `before\n\n` + `\n\n` from
@@ -1334,11 +1538,11 @@ function renderMarkdown(md) {
     /\n*```(\w+)?\n?([\s\S]*?)```\n*/g,
     (_match, lang, code) => {
       const escaped = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      const className = lang ? ` class="language-${lang}"` : "";
-      const langLabel = lang ?? "code";
+      const langLabel = inferCodeLanguage(code, lang);
+      const className = langLabel !== "code" ? ` class="language-${langLabel}"` : "";
       const trimmed = escaped.replace(/\n$/, "");
       codeBlocks.push(
-        `<div class="hw-code" data-hw-code="1"><div class="hw-code-header"><span class="hw-code-lang">${langLabel}</span><button type="button" class="hw-code-copy" aria-label="Copy code"><span class="hw-code-copy-label">Copy</span></button></div><pre><code${className}>${trimmed}</code></pre></div>`
+        `<div class="hw-code" data-hw-code="1"><div class="hw-code-header"><span class="hw-code-lang">${langLabel}</span><div class="hw-code-actions"><button type="button" class="hw-code-action hw-code-copy" aria-label="Copy code" title="Copy code">${COPY_ICON}${CHECK_ICON}<span class="hw-code-copy-label">Copy</span></button></div></div><pre><code${className}>${trimmed}</code></pre></div>`
       );
       return `
 
@@ -1363,10 +1567,7 @@ ${codeBlockPlaceholder(codeBlocks.length - 1)}
       const i = Number.parseInt(idx, 10);
       return codeBlocks[i] ?? "";
     });
-    html = html.replace(
-      /<p>(\s*<div class="hw-code"[\s\S]*?<\/div>\s*)<\/p>/g,
-      "$1"
-    );
+    html = html.replace(/<p>(\s*<div class="hw-code"[\s\S]*?<\/div>\s*)<\/p>/g, "$1");
   }
   return html;
 }
@@ -1386,26 +1587,35 @@ function MarkdownContent({
   useEffect4(() => {
     const root = rootRef.current;
     if (!root) return;
-    const handler = (e) => {
-      const target = e.target;
-      const btn = target?.closest(".hw-code-copy");
-      if (!btn || !root.contains(btn)) return;
-      const block = btn.closest(".hw-code");
-      const code = block?.querySelector("pre code");
-      const text = code?.textContent ?? "";
-      if (!text) return;
-      void navigator.clipboard?.writeText(text).then(
-        () => flashCopied(btn),
-        () => flashCopied(btn, true)
+    const isWhitespaceOnly = (el) => {
+      const hasNonBrChild = Array.from(el.children).some(
+        (c) => c.tagName !== "BR"
       );
+      if (hasNonBrChild) return false;
+      const text = el.textContent ?? "";
+      return text.replace(/[\s ]/g, "") === "";
+    };
+    const removeEmpties = () => {
+      const candidates = root.querySelectorAll("p, div");
+      candidates.forEach((el) => {
+        if (isWhitespaceOnly(el)) el.remove();
+      });
+    };
+    removeEmpties();
+  }, [html]);
+  useEffect4(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const handler = (e) => {
+      handleCodeBlockClick(e, root);
     };
     root.addEventListener("click", handler);
     return () => {
       root.removeEventListener("click", handler);
     };
-  }, [html]);
+  }, []);
   if (!html) return null;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       ref: rootRef,
@@ -1427,31 +1637,42 @@ function flashCopied(btn, failed = false) {
 }
 
 // src/themed/message-bubble.tsx
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
-function MessageBubble({ text, sender, senderName, time, parts }) {
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function MessageBubble({ text, sender, senderName, parts }) {
   const senderClass = `hw-msg--${sender}`;
-  const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? t("widget.better_ai");
-  const relativeTime = formatRelativeTime(time);
-  const meta = sender === "ai" ? `${agentName} \xB7 ${relativeTime}` : relativeTime;
+  const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? t("widget.helpway_ai");
+  const senderLabel = sender === "ai" ? agentName : sender === "team" ? senderName ?? t("widget.support") : null;
+  const bubbleRef = useRef6(null);
   const imageParts = parts?.filter((p) => p.type === "image") ?? [];
   const fileParts = parts?.filter((p) => p.type === "file") ?? [];
   const hasText = text.length > 0;
-  return /* @__PURE__ */ jsx3("div", { className: `hw-msg ${senderClass}`, children: /* @__PURE__ */ jsxs("div", { className: "hw-msg-body", children: [
-    sender === "team" && /* @__PURE__ */ jsx3("div", { className: "hw-msg-sender", children: senderName ?? t("widget.support") }),
-    imageParts.length > 0 && /* @__PURE__ */ jsx3("div", { className: "hw-msg-images", children: imageParts.map((img, i) => /* @__PURE__ */ jsx3(PreviewableThumbnail, { src: img.url, type: "image" }, i)) }),
-    hasText && /* @__PURE__ */ jsx3("div", { className: "hw-msg-bubble", children: sender === "ai" || sender === "team" ? /* @__PURE__ */ jsx3("span", { dangerouslySetInnerHTML: { __html: renderMarkdown(text) } }) : /* @__PURE__ */ jsx3("span", { dangerouslySetInnerHTML: { __html: linkifyText(text) } }) }),
-    fileParts.length > 0 && /* @__PURE__ */ jsx3("div", { className: "hw-msg-files", children: fileParts.map((file, i) => /* @__PURE__ */ jsx3(FileCard, { file }, i)) }),
-    /* @__PURE__ */ jsxs("div", { className: "hw-msg-meta", children: [
-      meta,
-      hasText && /* @__PURE__ */ jsx3(CopyButton, { text })
+  useEffect5(() => {
+    const bubble = bubbleRef.current;
+    if (!bubble || sender !== "ai" && sender !== "team") return;
+    const handleClick = (event) => {
+      handleCodeBlockClick(event, bubble);
+    };
+    bubble.addEventListener("click", handleClick);
+    return () => {
+      bubble.removeEventListener("click", handleClick);
+    };
+  }, [sender]);
+  return /* @__PURE__ */ jsx4("div", { className: `hw-msg ${senderClass}`, children: /* @__PURE__ */ jsxs2("div", { className: "hw-msg-body", children: [
+    sender === "team" && /* @__PURE__ */ jsx4("div", { className: "hw-msg-sender", children: senderName ?? t("widget.support") }),
+    imageParts.length > 0 && /* @__PURE__ */ jsx4("div", { className: "hw-msg-images", children: imageParts.map((img, i) => /* @__PURE__ */ jsx4(PreviewableThumbnail, { src: img.url }, i)) }),
+    hasText && /* @__PURE__ */ jsx4("div", { className: "hw-msg-bubble", ref: bubbleRef, children: sender === "ai" || sender === "team" ? /* @__PURE__ */ jsx4("span", { dangerouslySetInnerHTML: { __html: renderMarkdown(text) } }) : /* @__PURE__ */ jsx4("span", { dangerouslySetInnerHTML: { __html: linkifyText(text) } }) }),
+    fileParts.length > 0 && /* @__PURE__ */ jsx4("div", { className: "hw-msg-files", children: fileParts.map((file, i) => /* @__PURE__ */ jsx4(FileCard, { file }, i)) }),
+    /* @__PURE__ */ jsxs2("div", { className: "hw-msg-meta", children: [
+      senderLabel && /* @__PURE__ */ jsx4("span", { className: "hw-msg-sender-label", children: senderLabel }),
+      hasText && /* @__PURE__ */ jsx4(CopyButton, { text })
     ] })
   ] }) });
 }
-function PreviewableThumbnail({ src, type }) {
+function PreviewableThumbnail({ src }) {
   const [hover, setHover] = useState6(false);
   const ref = useRef6(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4(
       "a",
       {
         ref,
@@ -1461,10 +1682,10 @@ function PreviewableThumbnail({ src, type }) {
         className: "hw-msg-image-link",
         onMouseEnter: () => setHover(true),
         onMouseLeave: () => setHover(false),
-        children: /* @__PURE__ */ jsx3("img", { src, alt: "", className: "hw-msg-image", loading: "lazy" })
+        children: /* @__PURE__ */ jsx4("img", { src, alt: "", className: "hw-msg-image", loading: "lazy" })
       }
     ),
-    hover && /* @__PURE__ */ jsx3(AnchoredPreview, { src, anchorRef: ref, href: src })
+    hover && /* @__PURE__ */ jsx4(AnchoredPreview, { src, anchorRef: ref, href: src })
   ] });
 }
 var PREVIEWABLE_EXTS = /* @__PURE__ */ new Set(["pdf", "csv", "png", "jpg", "jpeg", "gif", "webp", "svg"]);
@@ -1474,8 +1695,8 @@ function FileCard({ file }) {
   const ext = file.fileName.split(".").pop()?.toLowerCase() ?? "";
   const isPreviewable = PREVIEWABLE_EXTS.has(ext);
   const isImage = file.mimeType.startsWith("image/");
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
       "a",
       {
         ref,
@@ -1486,15 +1707,15 @@ function FileCard({ file }) {
         onMouseEnter: () => isPreviewable && setHover(true),
         onMouseLeave: () => setHover(false),
         children: [
-          /* @__PURE__ */ jsx3("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx3(FileTypeIcon, { ext }) }),
-          /* @__PURE__ */ jsxs("span", { className: "hw-msg-file-info", children: [
-            /* @__PURE__ */ jsx3("span", { className: "hw-msg-file-name", children: file.fileName }),
-            /* @__PURE__ */ jsx3("span", { className: "hw-msg-file-size", children: formatFileSize(file.fileSize) })
+          /* @__PURE__ */ jsx4("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx4(FileTypeIcon, { ext }) }),
+          /* @__PURE__ */ jsxs2("span", { className: "hw-msg-file-info", children: [
+            /* @__PURE__ */ jsx4("span", { className: "hw-msg-file-name", children: file.fileName }),
+            /* @__PURE__ */ jsx4("span", { className: "hw-msg-file-size", children: formatFileSize(file.fileSize) })
           ] })
         ]
       }
     ),
-    hover && isPreviewable && (isImage ? /* @__PURE__ */ jsx3(AnchoredPreview, { src: file.url, anchorRef: ref, href: file.url }) : /* @__PURE__ */ jsx3(AnchoredDocPreview, { fileName: file.fileName, ext, anchorRef: ref, href: file.url }))
+    hover && isPreviewable && (isImage ? /* @__PURE__ */ jsx4(AnchoredPreview, { src: file.url, anchorRef: ref, href: file.url }) : /* @__PURE__ */ jsx4(AnchoredDocPreview, { fileName: file.fileName, ext, anchorRef: ref, href: file.url }))
   ] });
 }
 function AnchoredPreview({
@@ -1528,7 +1749,7 @@ function AnchoredPreview({
   };
   if (!portalTarget) return null;
   return createPortal(
-    /* @__PURE__ */ jsx3("div", { className: "hw-hover-preview", style, onClick: handleClick, children: /* @__PURE__ */ jsx3("img", { src, alt: "", className: "hw-hover-preview-img" }) }),
+    /* @__PURE__ */ jsx4("div", { className: "hw-hover-preview", style, onClick: handleClick, children: /* @__PURE__ */ jsx4("img", { src, alt: "", className: "hw-hover-preview-img" }) }),
     portalTarget
   );
 }
@@ -1559,17 +1780,17 @@ function AnchoredDocPreview({
   }, [anchorRef]);
   if (!portalTarget) return null;
   return createPortal(
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2(
       "div",
       {
         className: "hw-hover-preview hw-hover-preview--doc",
         style,
         onClick: () => window.open(href, "_blank"),
         children: [
-          /* @__PURE__ */ jsx3("div", { className: "hw-hover-preview-doc-icon", children: /* @__PURE__ */ jsx3(FileTypeIcon, { ext }) }),
-          /* @__PURE__ */ jsxs("div", { className: "hw-hover-preview-doc-info", children: [
-            /* @__PURE__ */ jsx3("span", { className: "hw-hover-preview-doc-name", children: fileName }),
-            /* @__PURE__ */ jsx3("span", { className: "hw-hover-preview-doc-hint", children: t("widget.click_to_open") })
+          /* @__PURE__ */ jsx4("div", { className: "hw-hover-preview-doc-icon", children: /* @__PURE__ */ jsx4(FileTypeIcon, { ext }) }),
+          /* @__PURE__ */ jsxs2("div", { className: "hw-hover-preview-doc-info", children: [
+            /* @__PURE__ */ jsx4("span", { className: "hw-hover-preview-doc-name", children: fileName }),
+            /* @__PURE__ */ jsx4("span", { className: "hw-hover-preview-doc-hint", children: t("widget.click_to_open") })
           ] })
         ]
       }
@@ -1596,14 +1817,14 @@ function CopyButton({ text }) {
     },
     [text]
   );
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
       className: `hw-msg-copy ${copied ? "hw-msg-copy--done" : ""}`,
       onClick: handleCopy,
       "aria-label": copied ? t("widget.copied") : t("widget.copy"),
-      children: copied ? /* @__PURE__ */ jsx3(
+      children: copied ? /* @__PURE__ */ jsx4(
         "svg",
         {
           viewBox: "0 0 24 24",
@@ -1612,9 +1833,9 @@ function CopyButton({ text }) {
           strokeWidth: 2,
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx3("polyline", { points: "20 6 9 17 4 12" })
+          children: /* @__PURE__ */ jsx4("polyline", { points: "20 6 9 17 4 12" })
         }
-      ) : /* @__PURE__ */ jsxs(
+      ) : /* @__PURE__ */ jsxs2(
         "svg",
         {
           viewBox: "0 0 24 24",
@@ -1624,8 +1845,8 @@ function CopyButton({ text }) {
           strokeLinecap: "round",
           strokeLinejoin: "round",
           children: [
-            /* @__PURE__ */ jsx3("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-            /* @__PURE__ */ jsx3("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+            /* @__PURE__ */ jsx4("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+            /* @__PURE__ */ jsx4("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
           ]
         }
       )
@@ -1644,7 +1865,7 @@ function FileTypeIcon({ ext }) {
     zip: "#f59e0b"
   };
   const color = colors[ext] ?? "currentColor";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -1654,17 +1875,17 @@ function FileTypeIcon({ ext }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx3("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-        /* @__PURE__ */ jsx3("polyline", { points: "14 2 14 8 20 8" }),
-        ext === "pdf" && /* @__PURE__ */ jsx3("text", { x: "8", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "PDF" }),
-        ext === "csv" && /* @__PURE__ */ jsx3("text", { x: "7", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "CSV" })
+        /* @__PURE__ */ jsx4("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx4("polyline", { points: "14 2 14 8 20 8" }),
+        ext === "pdf" && /* @__PURE__ */ jsx4("text", { x: "8", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "PDF" }),
+        ext === "csv" && /* @__PURE__ */ jsx4("text", { x: "7", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "CSV" })
       ]
     }
   );
 }
 
 // src/themed/composer.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var MAX_CHARS = 5e3;
 var CHAR_WARN_THRESHOLD = 4800;
 var ACCEPTED_TYPES = [
@@ -1775,7 +1996,7 @@ function Composer({
   const canSend = (hasText || hasAttachments) && !stillUploading;
   const showCharCount = text.length >= CHAR_WARN_THRESHOLD;
   const isOverLimit = text.length > MAX_CHARS;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       className: `hw-composer ${compact ? "hw-composer--compact" : ""} ${isDragging ? "hw-composer--dragging" : ""}`,
@@ -1783,9 +2004,9 @@ function Composer({
       onDragLeave: handleDragLeave,
       onDragOver: handleDragOver,
       onDrop: handleDrop,
-      children: /* @__PURE__ */ jsxs2("div", { className: "hw-composer-box", style: { position: "relative" }, children: [
-        isDragging && /* @__PURE__ */ jsx4("div", { className: "hw-composer-drop-overlay", children: /* @__PURE__ */ jsx4("span", { className: "hw-composer-drop-text", children: t("widget.drop_files") }) }),
-        attachments && attachments.length > 0 && /* @__PURE__ */ jsx4("div", { className: "hw-composer-previews", children: attachments.map((a) => /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsxs3("div", { className: "hw-composer-box", style: { position: "relative" }, children: [
+        isDragging && /* @__PURE__ */ jsx5("div", { className: "hw-composer-drop-overlay", children: /* @__PURE__ */ jsx5("span", { className: "hw-composer-drop-text", children: t("widget.drop_files") }) }),
+        attachments && attachments.length > 0 && /* @__PURE__ */ jsx5("div", { className: "hw-composer-previews", children: attachments.map((a) => /* @__PURE__ */ jsx5(
           PreviewThumb,
           {
             attachment: a,
@@ -1793,7 +2014,7 @@ function Composer({
           },
           a.id
         )) }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "textarea",
           {
             ref,
@@ -1808,9 +2029,9 @@ function Composer({
             "aria-label": t("widget.aria_input")
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { className: "hw-composer-toolbar", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "hw-composer-toolbar-left", children: [
-            /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs3("div", { className: "hw-composer-toolbar", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "hw-composer-toolbar-left", children: [
+            /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
@@ -1818,10 +2039,10 @@ function Composer({
                 onClick: handleFileClick,
                 disabled: disabled || isSubmitting,
                 "aria-label": t("widget.aria_attach"),
-                children: /* @__PURE__ */ jsx4(IconPaperclip1, {})
+                children: /* @__PURE__ */ jsx5(PaperclipIcon, {})
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "input",
               {
                 ref: fileInputRef,
@@ -1832,9 +2053,9 @@ function Composer({
                 onChange: handleFileChange
               }
             ),
-            showCharCount && /* @__PURE__ */ jsx4("span", { className: `hw-composer-charcount ${isOverLimit ? "hw-composer-charcount--over" : ""}`, children: MAX_CHARS - text.length })
+            showCharCount && /* @__PURE__ */ jsx5("span", { className: `hw-composer-charcount ${isOverLimit ? "hw-composer-charcount--over" : ""}`, children: MAX_CHARS - text.length })
           ] }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -1842,7 +2063,7 @@ function Composer({
               onClick: onSubmit,
               disabled: disabled || !canSend || isSubmitting || isOverLimit,
               "aria-label": t("widget.aria_send"),
-              children: /* @__PURE__ */ jsx4(IconPaperPlaneTopRight, {})
+              children: /* @__PURE__ */ jsx5(SendIcon, {})
             }
           )
         ] })
@@ -1853,7 +2074,7 @@ function Composer({
 function PreviewThumb({ attachment: a, onRemove }) {
   const [hover, setHover] = useState7(false);
   const ref = useRef7(null);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref,
@@ -1861,20 +2082,20 @@ function PreviewThumb({ attachment: a, onRemove }) {
       onMouseEnter: () => setHover(true),
       onMouseLeave: () => setHover(false),
       children: [
-        a.previewUrl ? /* @__PURE__ */ jsx4("img", { src: a.previewUrl, alt: a.file.name, className: "hw-composer-preview-img" }) : /* @__PURE__ */ jsx4("div", { className: "hw-composer-preview-file", children: /* @__PURE__ */ jsx4("span", { className: "hw-composer-preview-ext", children: a.file.name.split(".").pop()?.toUpperCase() ?? "FILE" }) }),
-        a.isUploading && /* @__PURE__ */ jsx4("div", { className: "hw-composer-preview-loader" }),
-        a.error && /* @__PURE__ */ jsx4("div", { className: "hw-composer-preview-badge", title: a.error, children: "!" }),
-        onRemove && /* @__PURE__ */ jsx4(
+        a.previewUrl ? /* @__PURE__ */ jsx5("img", { src: a.previewUrl, alt: a.file.name, className: "hw-composer-preview-img" }) : /* @__PURE__ */ jsx5("div", { className: "hw-composer-preview-file", children: /* @__PURE__ */ jsx5("span", { className: "hw-composer-preview-ext", children: a.file.name.split(".").pop()?.toUpperCase() ?? "FILE" }) }),
+        a.isUploading && /* @__PURE__ */ jsx5("div", { className: "hw-composer-preview-loader" }),
+        a.error && /* @__PURE__ */ jsx5("div", { className: "hw-composer-preview-badge", title: a.error, children: "!" }),
+        onRemove && /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
             className: "hw-composer-preview-remove",
             onClick: onRemove,
             "aria-label": t("widget.aria_remove"),
-            children: /* @__PURE__ */ jsx4(IconCrossMedium, {})
+            children: /* @__PURE__ */ jsx5(XIcon, {})
           }
         ),
-        hover && a.previewUrl && !a.isUploading && /* @__PURE__ */ jsx4(AnchoredPreview, { src: a.previewUrl, anchorRef: ref })
+        hover && a.previewUrl && !a.isUploading && /* @__PURE__ */ jsx5(AnchoredPreview, { src: a.previewUrl, anchorRef: ref })
       ]
     }
   );
@@ -1891,8 +2112,8 @@ function extractFiles(data) {
 }
 
 // src/themed/debug-overlay.tsx
-import { useEffect as useEffect5, useMemo, useRef as useRef8, useState as useState8 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useMemo, useRef as useRef8, useState as useState8 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var MAX_EVENTS = 60;
 function isDebugEnabled() {
   if (typeof window === "undefined") return false;
@@ -1918,7 +2139,7 @@ function WidgetDebugOverlay() {
   const typingUsers = useWidgetStore((s) => s.typingUsers);
   const aiProcessingMap = useWidgetStore((s) => s.aiProcessing);
   const { store } = useWidgetContext();
-  useEffect5(() => {
+  useEffect6(() => {
     setEnabled(isDebugEnabled());
   }, []);
   const pushEvent = useMemo(
@@ -1933,7 +2154,7 @@ function WidgetDebugOverlay() {
     },
     []
   );
-  useEffect5(() => {
+  useEffect6(() => {
     if (!enabled) return;
     if (typeof window === "undefined" || typeof window.fetch !== "function") return;
     const originalFetch = window.fetch.bind(window);
@@ -1965,7 +2186,7 @@ function WidgetDebugOverlay() {
       window.fetch = originalFetch;
     };
   }, [enabled, pushEvent]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!enabled) return;
     const original = store.getState().handleRealtimeEvent;
     store.setState({
@@ -1984,7 +2205,7 @@ function WidgetDebugOverlay() {
     [activeMessages]
   );
   const prevSigRef = useRef8(lastMsgSignature);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!enabled) return;
     if (prevSigRef.current !== lastMsgSignature) {
       prevSigRef.current = lastMsgSignature;
@@ -1998,10 +2219,10 @@ function WidgetDebugOverlay() {
   if (!enabled) return null;
   const isTyping = activeId ? typingUsers.get(activeId) : false;
   const isAi = activeId ? aiProcessingMap.get(activeId) : false;
-  return /* @__PURE__ */ jsxs3("div", { style: styles.wrap, children: [
-    /* @__PURE__ */ jsxs3("div", { style: styles.header, children: [
-      /* @__PURE__ */ jsx5("strong", { children: "hw debug" }),
-      /* @__PURE__ */ jsxs3("span", { style: styles.meta, children: [
+  return /* @__PURE__ */ jsxs4("div", { style: styles.wrap, children: [
+    /* @__PURE__ */ jsxs4("div", { style: styles.header, children: [
+      /* @__PURE__ */ jsx6("strong", { children: "hw debug" }),
+      /* @__PURE__ */ jsxs4("span", { style: styles.meta, children: [
         " ",
         "\xB7 conv ",
         activeId ? activeId.slice(0, 10) : "\u2014",
@@ -2012,29 +2233,29 @@ function WidgetDebugOverlay() {
         " \xB7 ai ",
         isAi ? "Y" : "n"
       ] }),
-      /* @__PURE__ */ jsx5("button", { type: "button", style: styles.btn, onClick: () => setOpen((v) => !v), children: open ? "hide" : "show" }),
-      /* @__PURE__ */ jsx5("button", { type: "button", style: styles.btn, onClick: () => {
+      /* @__PURE__ */ jsx6("button", { type: "button", style: styles.btn, onClick: () => setOpen((v) => !v), children: open ? "hide" : "show" }),
+      /* @__PURE__ */ jsx6("button", { type: "button", style: styles.btn, onClick: () => {
         eventsRef.current = [];
         setEvents([]);
       }, children: "clear" })
     ] }),
-    open && /* @__PURE__ */ jsxs3("div", { style: styles.body, children: [
-      /* @__PURE__ */ jsxs3("div", { style: styles.section, children: [
-        /* @__PURE__ */ jsx5("div", { style: styles.sectionTitle, children: "messages (active)" }),
-        activeMessages.length === 0 ? /* @__PURE__ */ jsx5("div", { style: styles.empty, children: "empty" }) : activeMessages.map((m, i) => /* @__PURE__ */ jsxs3("div", { style: styles.row, children: [
-          /* @__PURE__ */ jsx5("span", { style: { ...styles.badge, background: colorFor(senderOf(m)) }, children: i }),
-          /* @__PURE__ */ jsx5("span", { style: styles.sender, children: senderOf(m) }),
-          /* @__PURE__ */ jsx5("span", { style: styles.ts, children: m.createdAt.slice(11, 23) }),
-          /* @__PURE__ */ jsx5("span", { style: styles.text, children: (m.text ?? "").slice(0, 60) })
+    open && /* @__PURE__ */ jsxs4("div", { style: styles.body, children: [
+      /* @__PURE__ */ jsxs4("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx6("div", { style: styles.sectionTitle, children: "messages (active)" }),
+        activeMessages.length === 0 ? /* @__PURE__ */ jsx6("div", { style: styles.empty, children: "empty" }) : activeMessages.map((m, i) => /* @__PURE__ */ jsxs4("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsx6("span", { style: { ...styles.badge, background: colorFor(senderOf(m)) }, children: i }),
+          /* @__PURE__ */ jsx6("span", { style: styles.sender, children: senderOf(m) }),
+          /* @__PURE__ */ jsx6("span", { style: styles.ts, children: m.createdAt.slice(11, 23) }),
+          /* @__PURE__ */ jsx6("span", { style: styles.text, children: (m.text ?? "").slice(0, 60) })
         ] }, m.id))
       ] }),
-      /* @__PURE__ */ jsxs3("div", { style: styles.section, children: [
-        /* @__PURE__ */ jsx5("div", { style: styles.sectionTitle, children: "events" }),
-        events.length === 0 ? /* @__PURE__ */ jsx5("div", { style: styles.empty, children: "no events yet \u2014 send a message" }) : events.map((e) => /* @__PURE__ */ jsxs3("div", { style: styles.row, children: [
-          /* @__PURE__ */ jsx5("span", { style: { ...styles.badge, background: kindColor(e.kind) }, children: e.kind }),
-          /* @__PURE__ */ jsx5("span", { style: styles.ts, children: new Date(e.t).toISOString().slice(11, 23) }),
-          /* @__PURE__ */ jsx5("span", { style: styles.evLabel, children: e.label }),
-          e.detail && /* @__PURE__ */ jsx5("span", { style: styles.detail, children: e.detail })
+      /* @__PURE__ */ jsxs4("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx6("div", { style: styles.sectionTitle, children: "events" }),
+        events.length === 0 ? /* @__PURE__ */ jsx6("div", { style: styles.empty, children: "no events yet \u2014 send a message" }) : events.map((e) => /* @__PURE__ */ jsxs4("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsx6("span", { style: { ...styles.badge, background: kindColor(e.kind) }, children: e.kind }),
+          /* @__PURE__ */ jsx6("span", { style: styles.ts, children: new Date(e.t).toISOString().slice(11, 23) }),
+          /* @__PURE__ */ jsx6("span", { style: styles.evLabel, children: e.label }),
+          e.detail && /* @__PURE__ */ jsx6("span", { style: styles.detail, children: e.detail })
         ] }, e.id))
       ] })
     ] })
@@ -2137,10 +2358,10 @@ var styles = {
 };
 
 // src/themed/content/content-tab-view.tsx
-import { useCallback as useCallback11, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect9 } from "react";
 
 // src/hooks/use-content-tab.ts
-import { useCallback as useCallback8, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect7, useState as useState9 } from "react";
 var EMPTY_TABS = [];
 function listKey(tabId, lang) {
   return `flat:${tabId}:${lang}:list`;
@@ -2255,7 +2476,7 @@ function useContentTab(tabId) {
   const clearDetail = useCallback8(() => {
     setDetail(null);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (tab && entries.length === 0) {
       fetchEntries({ page: 1, reset: true });
     }
@@ -2276,39 +2497,96 @@ function useContentTab(tabId) {
 }
 
 // src/themed/content/content-detail-view.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function ContentDetailView({
   entry,
   isLoading
 }) {
   if (isLoading || !entry) {
-    return /* @__PURE__ */ jsxs4("div", { className: "hw-skeleton-content", style: { paddingTop: 20 }, children: [
-      /* @__PURE__ */ jsx6("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "60%", height: 18 } }),
-      /* @__PURE__ */ jsx6("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "35%", height: 12 } }),
-      /* @__PURE__ */ jsxs4("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 8 }, children: [
-        /* @__PURE__ */ jsx6("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "100%", height: 12 } }),
-        /* @__PURE__ */ jsx6("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "95%", height: 12 } }),
-        /* @__PURE__ */ jsx6("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "80%", height: 12 } }),
-        /* @__PURE__ */ jsx6("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "60%", height: 12 } })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx7(ArticleSkeleton, {});
   }
   const badge = entry.customFields.version ?? entry.customFields.priority ?? entry.customFields.type ?? null;
-  return /* @__PURE__ */ jsxs4("div", { className: "hw-content-detail", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "hw-content-detail-header", children: [
-      /* @__PURE__ */ jsx6("h1", { className: "hw-content-detail-title", children: entry.title }),
-      (badge || entry.publishedAt) && /* @__PURE__ */ jsxs4("div", { className: "hw-content-detail-meta", children: [
-        badge && /* @__PURE__ */ jsx6("span", { className: "hw-content-entry-badge", children: badge }),
-        entry.publishedAt && /* @__PURE__ */ jsx6("span", { className: "hw-content-detail-date", children: formatRelativeTime(entry.publishedAt) })
+  return /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail-header", children: [
+      /* @__PURE__ */ jsx7("h1", { className: "hw-content-detail-title", children: entry.title }),
+      (badge || entry.publishedAt) && /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail-meta", children: [
+        badge && /* @__PURE__ */ jsx7("span", { className: "hw-content-entry-badge", children: badge }),
+        entry.publishedAt && /* @__PURE__ */ jsx7("span", { className: "hw-content-detail-date", children: formatRelativeTime(entry.publishedAt) })
+      ] })
+    ] }),
+    (entry.body || entry.bodyHtml) && /* @__PURE__ */ jsx7("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx7(MarkdownContent, { bodyHtml: entry.bodyHtml, bodyMarkdown: entry.body }) })
+  ] });
+}
+function ArticleSkeleton() {
+  const sections = [
+    {
+      headerWidth: "30%",
+      items: [
+        { l1: "98%", l2: "62%" },
+        { l1: "94%", l2: "48%" },
+        { l1: "96%", l2: "70%" }
+      ]
+    },
+    {
+      headerWidth: "26%",
+      items: [
+        { l1: "92%", l2: "55%" },
+        { l1: "88%", l2: "40%" }
+      ]
+    }
+  ];
+  return /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail-header", children: [
+      /* @__PURE__ */ jsx7("h1", { className: "hw-content-detail-title", children: /* @__PURE__ */ jsx7("span", { className: "hw-skeleton hw-skeleton-title" }) }),
+      /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail-meta", children: [
+        /* @__PURE__ */ jsx7("span", { className: "hw-skeleton hw-skeleton-badge" }),
+        /* @__PURE__ */ jsx7("span", { className: "hw-skeleton hw-skeleton-date" })
       ] })
     ] }),
-    (entry.body || entry.bodyHtml) && /* @__PURE__ */ jsx6("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx6(MarkdownContent, { bodyHtml: entry.bodyHtml, bodyMarkdown: entry.body }) })
+    /* @__PURE__ */ jsx7("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx7("div", { className: "hw-markdown", children: sections.map((s, i) => /* @__PURE__ */ jsx7(
+      SkeletonSection,
+      {
+        headerWidth: s.headerWidth,
+        items: s.items
+      },
+      i
+    )) }) })
+  ] });
+}
+function SkeletonSection({
+  headerWidth,
+  items
+}) {
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx7("h2", { children: /* @__PURE__ */ jsx7(
+      "span",
+      {
+        className: "hw-skeleton hw-skeleton-h2",
+        style: { display: "block", width: headerWidth }
+      }
+    ) }),
+    items.map((item, j) => /* @__PURE__ */ jsx7("ul", { children: /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs5("div", { className: "hw-skeleton-bullet-lines", children: [
+      /* @__PURE__ */ jsx7(
+        "span",
+        {
+          className: "hw-skeleton hw-skeleton-bullet-line",
+          style: { display: "block", width: item.l1 }
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "span",
+        {
+          className: "hw-skeleton hw-skeleton-bullet-line",
+          style: { display: "block", width: item.l2, marginTop: 8 }
+        }
+      )
+    ] }) }) }, j))
   ] });
 }
 
 // src/themed/content/content-list-view.tsx
 import { useCallback as useCallback9, useRef as useRef9, useState as useState10 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function ContentListView({
   entries,
   isLoading,
@@ -2332,13 +2610,13 @@ function ContentListView({
     },
     [onSearch]
   );
-  return /* @__PURE__ */ jsxs5("div", { className: "hw-content-list", children: [
-    onSearch && /* @__PURE__ */ jsx7("div", { className: "hw-content-search", children: /* @__PURE__ */ jsxs5("div", { className: "hw-content-search-box", children: [
-      /* @__PURE__ */ jsxs5("svg", { className: "hw-content-search-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx7("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx7("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  return /* @__PURE__ */ jsxs6("div", { className: "hw-content-list", children: [
+    onSearch && /* @__PURE__ */ jsx8("div", { className: "hw-content-search", children: /* @__PURE__ */ jsxs6("div", { className: "hw-content-search-box", children: [
+      /* @__PURE__ */ jsxs6("svg", { className: "hw-content-search-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx8("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx8("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
       ] }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "text",
@@ -2349,18 +2627,18 @@ function ContentListView({
         }
       )
     ] }) }),
-    isLoading && entries.length === 0 && /* @__PURE__ */ jsx7("div", { className: "hw-skeleton-content", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs5("div", { className: "hw-skeleton-content-item", children: [
-      /* @__PURE__ */ jsx7("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "70%", height: 14 } }),
-      /* @__PURE__ */ jsx7("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "90%", height: 12 } }),
-      /* @__PURE__ */ jsx7("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "40%", height: 10 } })
+    isLoading && entries.length === 0 && /* @__PURE__ */ jsx8("div", { className: "hw-skeleton-content", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs6("div", { className: "hw-skeleton-content-item", children: [
+      /* @__PURE__ */ jsx8("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "70%", height: 14 } }),
+      /* @__PURE__ */ jsx8("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "90%", height: 12 } }),
+      /* @__PURE__ */ jsx8("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "40%", height: 10 } })
     ] }, i)) }),
-    !isLoading && entries.length === 0 && /* @__PURE__ */ jsxs5("div", { className: "hw-content-empty", children: [
-      /* @__PURE__ */ jsx7("div", { className: "hw-content-empty-title", children: searchText ? t("widget.no_results") : t("widget.nothing_yet") }),
-      /* @__PURE__ */ jsx7("div", { className: "hw-content-empty-desc", children: searchText ? t("widget.try_different") : t("widget.check_back") })
+    !isLoading && entries.length === 0 && /* @__PURE__ */ jsxs6("div", { className: "hw-content-empty", children: [
+      /* @__PURE__ */ jsx8("div", { className: "hw-content-empty-title", children: searchText ? t("widget.no_results") : t("widget.nothing_yet") }),
+      /* @__PURE__ */ jsx8("div", { className: "hw-content-empty-desc", children: searchText ? t("widget.try_different") : t("widget.check_back") })
     ] }),
-    entries.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "hw-content-entries", children: [
-      entries.map((entry) => /* @__PURE__ */ jsx7(ContentEntryCard, { entry, onSelect, display }, entry.slug)),
-      hasMore && /* @__PURE__ */ jsx7(
+    entries.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "hw-content-entries", children: [
+      entries.map((entry) => /* @__PURE__ */ jsx8(ContentEntryCard, { entry, onSelect, display }, entry.slug)),
+      hasMore && /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -2387,21 +2665,21 @@ function ContentEntryCard({
   const badge = display?.badgeField ? customFields[display.badgeField] ?? null : customFields.version ?? customFields.priority ?? customFields.type ?? null;
   const subtitleValue = display?.subtitleField ? (display.subtitleField === "body" ? entry.body : customFields[display.subtitleField]) ?? null : customFields.excerpt ?? customFields.summary ?? customFields.description ?? null;
   const preview = subtitleValue ? truncateText(subtitleValue) : truncateText(entry.body);
-  return /* @__PURE__ */ jsx7("button", { type: "button", className: "hw-content-entry", onClick: () => onSelect(entry.slug), children: /* @__PURE__ */ jsxs5("div", { className: "hw-content-entry-main", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "hw-content-entry-text", children: [
-      /* @__PURE__ */ jsx7("span", { className: "hw-content-entry-title", children: entry.title }),
-      preview && /* @__PURE__ */ jsx7("span", { className: "hw-content-entry-desc", children: preview }),
-      (badge || entry.publishedAt) && /* @__PURE__ */ jsxs5("div", { className: "hw-content-entry-meta", children: [
-        badge && /* @__PURE__ */ jsx7("span", { className: "hw-content-entry-badge", children: badge }),
-        entry.publishedAt && /* @__PURE__ */ jsx7("span", { className: "hw-content-entry-date", children: formatRelativeTime(entry.publishedAt) })
+  return /* @__PURE__ */ jsx8("button", { type: "button", className: "hw-content-entry", onClick: () => onSelect(entry.slug), children: /* @__PURE__ */ jsxs6("div", { className: "hw-content-entry-main", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "hw-content-entry-text", children: [
+      /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-title", children: entry.title }),
+      preview && /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-desc", children: preview }),
+      (badge || entry.publishedAt) && /* @__PURE__ */ jsxs6("div", { className: "hw-content-entry-meta", children: [
+        badge && /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-badge", children: badge }),
+        entry.publishedAt && /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-date", children: formatRelativeTime(entry.publishedAt) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx7("svg", { className: "hw-content-entry-chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("polyline", { points: "9 18 15 12 9 6" }) })
+    /* @__PURE__ */ jsx8("svg", { className: "hw-content-entry-chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("polyline", { points: "9 18 15 12 9 6" }) })
   ] }) });
 }
 
 // src/themed/content/grouped-content-tab-view.tsx
-import { useEffect as useEffect7, useRef as useRef11 } from "react";
+import { useEffect as useEffect8, useRef as useRef11 } from "react";
 
 // src/hooks/use-grouped-content-tab.ts
 import { useCallback as useCallback10, useRef as useRef10, useState as useState11 } from "react";
@@ -2620,7 +2898,7 @@ function useGroupedContentTab(tabId) {
 }
 
 // src/themed/content/grouped-content-tab-view.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function GroupedContentTabView({
   tab,
   subView,
@@ -2645,26 +2923,26 @@ function GroupedContentTabView({
     fetchDetail,
     clearCategory
   } = useGroupedContentTab(tab.id);
-  useEffect7(() => {
+  useEffect8(() => {
     initFetch();
   }, [initFetch]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (detailSlug && subView === "content-detail") {
       fetchDetail(detailSlug);
     }
   }, [detailSlug, subView, fetchDetail]);
   const prevSubView = useRef11(subView);
-  useEffect7(() => {
+  useEffect8(() => {
     if (prevSubView.current === "content-category" && subView === null) {
       clearCategory();
     }
     prevSubView.current = subView;
   }, [subView, clearCategory]);
   if (subView === "content-detail" && detailSlug) {
-    return /* @__PURE__ */ jsx8(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
+    return /* @__PURE__ */ jsx9(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
   }
   if (subView === "content-category" && activeCategory) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       ContentListView,
       {
         entries: items,
@@ -2678,7 +2956,7 @@ function GroupedContentTabView({
       }
     );
   }
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     ContentListView,
     {
       entries: categories,
@@ -2700,7 +2978,7 @@ function GroupedContentTabView({
 }
 
 // src/themed/content/content-tab-view.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function ContentTabView({
   tab,
   showDetail,
@@ -2710,7 +2988,7 @@ function ContentTabView({
   onSelectCategory
 }) {
   if (tab.tabType === "grouped" && tab.itemsModelSlug) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       GroupedContentTabView,
       {
         tab,
@@ -2722,7 +3000,7 @@ function ContentTabView({
       }
     );
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     FlatContentTabView,
     {
       tab,
@@ -2748,7 +3026,7 @@ function FlatContentTabView({
     loadMore,
     fetchDetail
   } = useContentTab(tab.id);
-  useEffect8(() => {
+  useEffect9(() => {
     if (detailSlug) fetchDetail(detailSlug);
   }, [detailSlug, fetchDetail]);
   const handleSearch = useCallback11(
@@ -2758,9 +3036,9 @@ function FlatContentTabView({
     [fetchEntries]
   );
   if (showDetail && detailSlug) {
-    return /* @__PURE__ */ jsx9(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
+    return /* @__PURE__ */ jsx10(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     ContentListView,
     {
       entries,
@@ -2776,23 +3054,23 @@ function FlatContentTabView({
 }
 
 // src/themed/content/tab-icon.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var ICON_MAP = {
-  book: IconBook,
-  megaphone: IconMegaphone,
-  lightbulb: IconLightBulb,
-  "help-circle": IconCircleQuestionmark,
-  newspaper: IconNewspaper,
-  star: IconStar
+  book: BookIcon,
+  megaphone: MegaphoneIcon,
+  lightbulb: LightbulbIcon,
+  "help-circle": HelpCircleIcon,
+  newspaper: NewspaperIcon,
+  star: StarIcon
 };
 function ContentTabIconComponent({ icon }) {
-  const Icon = ICON_MAP[icon] ?? IconBook;
-  return /* @__PURE__ */ jsx10(Icon, {});
+  const Icon = ICON_MAP[icon] ?? BookIcon;
+  return /* @__PURE__ */ jsx11(Icon, {});
 }
 
 // src/themed/message-list.tsx
-import React, { useEffect as useEffect9, useRef as useRef12 } from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import React, { useEffect as useEffect10, useRef as useRef12 } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function parseParts(raw) {
   if (!raw) return null;
   if (Array.isArray(raw)) return raw;
@@ -2818,8 +3096,8 @@ function MessageList({
   const containerRef = useRef12(null);
   const prevItemCountRef = useRef12(items.length);
   const isInitialLoadRef = useRef12(true);
-  const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? t("widget.better_ai");
-  useEffect9(() => {
+  const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? t("widget.helpway_ai");
+  useEffect10(() => {
     const prevCount = prevItemCountRef.current;
     const newCount = items.length;
     prevItemCountRef.current = newCount;
@@ -2834,12 +3112,12 @@ function MessageList({
       isInitialLoadRef.current = false;
     }
   }, [items]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (isTyping || isAiProcessing) {
       bottomRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [isTyping, isAiProcessing]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!hasMore || !onLoadMore || !topRef.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -2862,16 +3140,16 @@ function MessageList({
     return () => observer.disconnect();
   }, [hasMore, onLoadMore, isLoadingMore]);
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
         className: "hw-messages",
         role: "log",
         "aria-label": t("widget.aria_messages"),
         "aria-live": "polite",
-        children: /* @__PURE__ */ jsxs6("div", { className: "hw-empty", children: [
-          /* @__PURE__ */ jsx11("div", { className: "hw-empty-icon", children: /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx11("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) }),
-          /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, color: "#aaa" }, children: t("widget.start_a_conversation") })
+        children: /* @__PURE__ */ jsxs7("div", { className: "hw-empty", children: [
+          /* @__PURE__ */ jsx12("div", { className: "hw-empty-icon", children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx12("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) }),
+          /* @__PURE__ */ jsx12("div", { className: "hw-empty-text", children: t("widget.start_a_conversation") })
         ] })
       }
     );
@@ -2881,7 +3159,7 @@ function MessageList({
   const yesterday = /* @__PURE__ */ new Date();
   yesterday.setDate(yesterday.getDate() - 1);
   const yesterdayKey = yesterday.toLocaleDateString("en-CA");
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: containerRef,
@@ -2890,14 +3168,14 @@ function MessageList({
       "aria-label": t("widget.aria_messages"),
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ jsx11("div", { ref: topRef, className: "hw-load-more-trigger", children: isLoadingMore && /* @__PURE__ */ jsxs6("div", { className: "hw-load-more-spinner", children: [
-          /* @__PURE__ */ jsx11("div", {}),
-          /* @__PURE__ */ jsx11("div", {}),
-          /* @__PURE__ */ jsx11("div", {})
+        /* @__PURE__ */ jsx12("div", { ref: topRef, className: "hw-load-more-trigger", children: isLoadingMore && /* @__PURE__ */ jsxs7("div", { className: "hw-load-more-spinner", children: [
+          /* @__PURE__ */ jsx12("div", {}),
+          /* @__PURE__ */ jsx12("div", {}),
+          /* @__PURE__ */ jsx12("div", {})
         ] }) }),
         items.map((item) => {
           if (item.type === "event") {
-            return /* @__PURE__ */ jsx11(EventCard, { text: item.text ?? "" }, item._stableKey ?? item.id);
+            return /* @__PURE__ */ jsx12(EventCard, { text: item.text ?? "" }, item._stableKey ?? item.id);
           }
           const itemDate = new Date(item.createdAt);
           const dateKey = itemDate.toLocaleDateString("en-CA");
@@ -2910,39 +3188,38 @@ function MessageList({
             day: "numeric"
           });
           const sender = item.visitorId ? "visitor" : item.aiAgentId ? "ai" : "team";
-          return /* @__PURE__ */ jsxs6(React.Fragment, { children: [
-            showDateSep && /* @__PURE__ */ jsxs6("div", { className: "hw-date-sep", children: [
-              /* @__PURE__ */ jsx11("div", { className: "hw-date-sep-line" }),
-              /* @__PURE__ */ jsx11("div", { className: "hw-date-sep-text", children: dateLabel }),
-              /* @__PURE__ */ jsx11("div", { className: "hw-date-sep-line" })
+          return /* @__PURE__ */ jsxs7(React.Fragment, { children: [
+            showDateSep && /* @__PURE__ */ jsxs7("div", { className: "hw-date-sep", children: [
+              /* @__PURE__ */ jsx12("div", { className: "hw-date-sep-line" }),
+              /* @__PURE__ */ jsx12("div", { className: "hw-date-sep-text", children: dateLabel }),
+              /* @__PURE__ */ jsx12("div", { className: "hw-date-sep-line" })
             ] }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               MessageBubble,
               {
                 text: item.text ?? "",
                 sender,
                 senderName: sender === "visitor" ? visitorName : item.userName ?? void 0,
-                time: item.createdAt,
                 parts: parseParts(item.parts)
               }
             )
           ] }, item._stableKey ?? item.id);
         }),
         renderAfterMessages,
-        isAiProcessing && /* @__PURE__ */ jsxs6("div", { className: "hw-typing", children: [
-          /* @__PURE__ */ jsx11("div", { className: "hw-typing-label", children: agentName }),
-          /* @__PURE__ */ jsxs6("div", { className: "hw-typing-dots", children: [
-            /* @__PURE__ */ jsx11("div", { className: "hw-typing-dot" }),
-            /* @__PURE__ */ jsx11("div", { className: "hw-typing-dot" }),
-            /* @__PURE__ */ jsx11("div", { className: "hw-typing-dot" })
+        isAiProcessing && /* @__PURE__ */ jsxs7("div", { className: "hw-typing", children: [
+          /* @__PURE__ */ jsx12("div", { className: "hw-typing-label", children: agentName }),
+          /* @__PURE__ */ jsxs7("div", { className: "hw-typing-dots", children: [
+            /* @__PURE__ */ jsx12("div", { className: "hw-typing-dot" }),
+            /* @__PURE__ */ jsx12("div", { className: "hw-typing-dot" }),
+            /* @__PURE__ */ jsx12("div", { className: "hw-typing-dot" })
           ] })
         ] }),
-        isTyping && !isAiProcessing && /* @__PURE__ */ jsx11("div", { className: "hw-typing", children: /* @__PURE__ */ jsxs6("div", { className: "hw-typing-dots", children: [
-          /* @__PURE__ */ jsx11("div", { className: "hw-typing-dot" }),
-          /* @__PURE__ */ jsx11("div", { className: "hw-typing-dot" }),
-          /* @__PURE__ */ jsx11("div", { className: "hw-typing-dot" })
+        isTyping && !isAiProcessing && /* @__PURE__ */ jsx12("div", { className: "hw-typing", children: /* @__PURE__ */ jsxs7("div", { className: "hw-typing-dots", children: [
+          /* @__PURE__ */ jsx12("div", { className: "hw-typing-dot" }),
+          /* @__PURE__ */ jsx12("div", { className: "hw-typing-dot" }),
+          /* @__PURE__ */ jsx12("div", { className: "hw-typing-dot" })
         ] }) }),
-        /* @__PURE__ */ jsx11("div", { ref: bottomRef })
+        /* @__PURE__ */ jsx12("div", { ref: bottomRef })
       ]
     }
   );
@@ -2960,20 +3237,20 @@ function EventCard({ text }) {
   const data = parseEventData(text);
   if (data) {
     const message = data.action === "joined" ? t("widget.joined") : t("widget.left");
-    return /* @__PURE__ */ jsxs6("div", { className: "hw-event hw-event--card", children: [
-      /* @__PURE__ */ jsx11("div", { className: "hw-event-avatar", children: data.image ? /* @__PURE__ */ jsx11("img", { src: data.image, alt: "", className: "hw-event-avatar-img" }) : /* @__PURE__ */ jsx11("span", { children: getInitials(data.name) }) }),
-      /* @__PURE__ */ jsxs6("div", { className: "hw-event-body", children: [
-        /* @__PURE__ */ jsx11("span", { className: "hw-event-name", children: data.name }),
+    return /* @__PURE__ */ jsxs7("div", { className: "hw-event hw-event--card", children: [
+      /* @__PURE__ */ jsx12("div", { className: "hw-event-avatar", children: data.image ? /* @__PURE__ */ jsx12("img", { src: data.image, alt: "", className: "hw-event-avatar-img" }) : /* @__PURE__ */ jsx12("span", { children: getInitials(data.name) }) }),
+      /* @__PURE__ */ jsxs7("div", { className: "hw-event-body", children: [
+        /* @__PURE__ */ jsx12("span", { className: "hw-event-name", children: data.name }),
         " ",
-        /* @__PURE__ */ jsx11("span", { className: "hw-event-action", children: message })
+        /* @__PURE__ */ jsx12("span", { className: "hw-event-action", children: message })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx11("div", { className: "hw-event", children: /* @__PURE__ */ jsx11("div", { className: "hw-event-text", children: text }) });
+  return /* @__PURE__ */ jsx12("div", { className: "hw-event", children: /* @__PURE__ */ jsx12("div", { className: "hw-event-text", children: text }) });
 }
 
 // src/themed/default-widget.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function resolveLabel2(label) {
   if (!label.startsWith("widget.")) return label;
   const resolved = t(label);
@@ -2985,7 +3262,7 @@ var EMPTY_CONTENT_TABS = [];
 var DEFAULT_EN_WELCOME = "Hi there \u{1F44B}\nHow can we help?";
 var DEFAULT_EN_SUBTITLE = "Usually replies in minutes";
 function HelpwayMark({ className }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "svg",
     {
       className,
@@ -2995,7 +3272,7 @@ function HelpwayMark({ className }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx13(
         "path",
         {
           d: "M28.7 0H12.8L0 12.8V28.7L12.8 41.5H28.7L41.5 28.7V12.8L28.7 0ZM15 28.9L6.80002 20.7L15 12.5C18.1 9.4 23.2 9.4 26.3 12.5L34.5 20.7L26.3 28.9C23.2 32 18.2 32 15 28.9Z",
@@ -3009,11 +3286,11 @@ function WidgetLogo({ className }) {
   const agentConfig = useWidgetStore((s) => s.agentConfig);
   const logoUrl = useWidgetStore((s) => s.website?.logoUrl);
   if (agentConfig?.avatarUrl) {
-    return /* @__PURE__ */ jsx12("img", { src: agentConfig.avatarUrl, alt: "", className: `hw-agent-img ${className ?? ""}` });
+    return /* @__PURE__ */ jsx13("img", { src: agentConfig.avatarUrl, alt: "", className: `hw-agent-img ${className ?? ""}` });
   }
   if (agentConfig?.avatarPreset) {
     const color = agentConfig.brandColor ?? "#0a0a0a";
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         className: `hw-agent-icon ${className ?? ""}`,
@@ -3024,14 +3301,14 @@ function WidgetLogo({ className }) {
           justifyContent: "center",
           borderRadius: 8
         },
-        children: /* @__PURE__ */ jsx12(AgentPresetIcon, { presetId: agentConfig.avatarPreset })
+        children: /* @__PURE__ */ jsx13(AgentPresetIcon, { presetId: agentConfig.avatarPreset })
       }
     );
   }
   if (logoUrl) {
-    return /* @__PURE__ */ jsx12("img", { src: logoUrl, alt: "", className: `hw-agent-img ${className ?? ""}` });
+    return /* @__PURE__ */ jsx13("img", { src: logoUrl, alt: "", className: `hw-agent-img ${className ?? ""}` });
   }
-  return /* @__PURE__ */ jsx12(HelpwayMark, { className });
+  return /* @__PURE__ */ jsx13(HelpwayMark, { className });
 }
 var PRESET_SVG = {
   // Helpway brand mark — octagonal chamfer with stylized "W" inside.
@@ -3090,7 +3367,7 @@ function AgentPresetIcon({ presetId }) {
   const svgContent = PRESET_SVG[presetId] ?? PRESET_SVG.sparkle;
   return (
     // biome-ignore lint: trusted static SVG content from our icon library
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "svg",
       {
         viewBox: "0 0 24 24",
@@ -3275,7 +3552,7 @@ function DefaultWidget({ initialOpen = false } = {}) {
       handleClose();
     }
   }, [handleClose]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isOpen || !windowRef.current) return;
     const vv = window.visualViewport;
     if (!vv) return;
@@ -3292,7 +3569,7 @@ function DefaultWidget({ initialOpen = false } = {}) {
       win.style.removeProperty("--hw-visible-height");
     };
   }, [isOpen]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isOpen || !windowRef.current) return;
     const win = windowRef.current;
     const handleKeyDown = (e) => {
@@ -3308,7 +3585,7 @@ function DefaultWidget({ initialOpen = false } = {}) {
     win.addEventListener("keydown", handleKeyDown);
     return () => win.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, subView, handleClose, goBack]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isOpen || !windowRef.current) return;
     const win = windowRef.current;
     const getFocusable = () => win.querySelectorAll(
@@ -3340,6 +3617,12 @@ function DefaultWidget({ initialOpen = false } = {}) {
     return () => win.removeEventListener("keydown", handleTab);
   }, [isOpen]);
   const showTabBar = subView === null;
+  const activeConvSummary = useWidgetStore((s) => {
+    const id = s.activeConversationId;
+    return id ? s.conversations.find((c) => c.id === id) : null;
+  });
+  const hasTeamAgent = activeConvSummary?.lastMessageSenderType === "team" && activeConvSummary?.lastMessageSenderName;
+  const headerName = hasTeamAgent ? activeConvSummary.lastMessageSenderName : agentConfig?.name ?? website?.name ?? "Support";
   const companyName = agentConfig?.name ?? website?.name ?? "Support";
   const subtitleMsg = agentConfig?.subtitleText;
   const subtitleIsFactoryDefault = !subtitleMsg || subtitleMsg === DEFAULT_EN_SUBTITLE;
@@ -3348,7 +3631,7 @@ function DefaultWidget({ initialOpen = false } = {}) {
   const widgetPosition = agentConfig?.widgetPosition ?? "bottom-right";
   const launcherStyle = agentConfig?.launcherStyle ?? "icon";
   const bubbleStyle = agentConfig?.bubbleStyle ?? "rounded";
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: "hw-widget",
@@ -3360,20 +3643,20 @@ function DefaultWidget({ initialOpen = false } = {}) {
         "--hw-window-left": widgetPosition === "bottom-left" ? "0" : "auto"
       },
       children: [
-        isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */ jsx12("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs7("div", { className: "hw-skeleton-loading", children: [
-          /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
-          /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } }),
-          /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } })
+        isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */ jsx13("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs8("div", { className: "hw-skeleton-loading", children: [
+          /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
+          /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } }),
+          /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } })
         ] }) }),
-        isOpen && hasBootstrapError && /* @__PURE__ */ jsx12("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs7("div", { className: "hw-bootstrap-error", children: [
-          /* @__PURE__ */ jsx12("div", { className: "hw-bootstrap-error-text", children: t("widget.error_desc") }),
-          /* @__PURE__ */ jsx12("button", { type: "button", className: "hw-bootstrap-error-retry", onClick: retryBootstrap, children: t("widget.retry") })
+        isOpen && hasBootstrapError && /* @__PURE__ */ jsx13("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs8("div", { className: "hw-bootstrap-error", children: [
+          /* @__PURE__ */ jsx13("div", { className: "hw-bootstrap-error-text", children: t("widget.error_desc") }),
+          /* @__PURE__ */ jsx13("button", { type: "button", className: "hw-bootstrap-error-retry", onClick: retryBootstrap, children: t("widget.retry") })
         ] }) }),
-        isOpen && isReady && /* @__PURE__ */ jsxs7(
+        isOpen && isReady && /* @__PURE__ */ jsxs8(
           "div",
           {
             ref: windowRef,
-            className: `hw-window ${isClosing ? "hw-window--closing" : ""}`,
+            className: `hw-window ${isClosing ? "hw-window--closing" : ""} ${subView === "content-detail" ? "hw-window--reading" : ""}`,
             role: "dialog",
             "aria-label": t("widget.aria_chat"),
             "aria-modal": "true",
@@ -3381,24 +3664,24 @@ function DefaultWidget({ initialOpen = false } = {}) {
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
             children: [
-              /* @__PURE__ */ jsx12("div", { className: "hw-drag-handle", children: /* @__PURE__ */ jsx12("div", { className: "hw-drag-handle-pill" }) }),
-              wsDisconnected && /* @__PURE__ */ jsxs7("div", { className: "hw-disconnect", children: [
-                /* @__PURE__ */ jsx12("div", { className: "hw-disconnect-dot" }),
+              /* @__PURE__ */ jsx13("div", { className: "hw-drag-handle", children: /* @__PURE__ */ jsx13("div", { className: "hw-drag-handle-pill" }) }),
+              wsDisconnected && /* @__PURE__ */ jsxs8("div", { className: "hw-disconnect", children: [
+                /* @__PURE__ */ jsx13("div", { className: "hw-disconnect-dot" }),
                 t("widget.reconnecting")
               ] }),
               (subView === "content-detail" || subView === "content-category") && (() => {
                 const tabId = activeTab.replace("content:", "");
                 const contentTab = contentTabs.find((t2) => t2.id === tabId);
                 const headerTitle = subView === "content-category" && contentCategoryName ? contentCategoryName : contentTab?.label ? resolveLabel2(contentTab.label) : t("widget.content");
-                return /* @__PURE__ */ jsxs7("div", { className: "hw-header hw-header--centered", children: [
-                  /* @__PURE__ */ jsx12(
+                return /* @__PURE__ */ jsxs8("div", { className: "hw-header hw-header--centered", children: [
+                  /* @__PURE__ */ jsx13(
                     "button",
                     {
                       type: "button",
                       className: "hw-header-back",
                       onClick: goBack,
                       "aria-label": t("widget.aria_back"),
-                      children: /* @__PURE__ */ jsx12(
+                      children: /* @__PURE__ */ jsx13(
                         "svg",
                         {
                           viewBox: "0 0 24 24",
@@ -3407,33 +3690,33 @@ function DefaultWidget({ initialOpen = false } = {}) {
                           strokeWidth: 2,
                           strokeLinecap: "round",
                           strokeLinejoin: "round",
-                          children: /* @__PURE__ */ jsx12("path", { d: "M15 18l-6-6 6-6" })
+                          children: /* @__PURE__ */ jsx13("path", { d: "M15 18l-6-6 6-6" })
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx12("div", { className: "hw-header-title", children: headerTitle }),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13("div", { className: "hw-header-title", children: headerTitle }),
+                  /* @__PURE__ */ jsx13(
                     "button",
                     {
                       type: "button",
                       className: "hw-header-close",
                       onClick: handleClose,
                       "aria-label": t("widget.aria_close"),
-                      children: /* @__PURE__ */ jsx12(IconCrossMedium, { size: 20 })
+                      children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
                     }
                   )
                 ] });
               })(),
-              subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */ jsxs7("div", { className: "hw-header hw-header--sub", children: [
-                /* @__PURE__ */ jsx12(
+              subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */ jsxs8("div", { className: "hw-header hw-header--sub", children: [
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
                     className: "hw-header-back",
                     onClick: goBack,
                     "aria-label": t("widget.aria_back"),
-                    children: /* @__PURE__ */ jsx12(
+                    children: /* @__PURE__ */ jsx13(
                       "svg",
                       {
                         viewBox: "0 0 24 24",
@@ -3442,66 +3725,66 @@ function DefaultWidget({ initialOpen = false } = {}) {
                         strokeWidth: 2,
                         strokeLinecap: "round",
                         strokeLinejoin: "round",
-                        children: /* @__PURE__ */ jsx12("path", { d: "M15 18l-6-6 6-6" })
+                        children: /* @__PURE__ */ jsx13("path", { d: "M15 18l-6-6 6-6" })
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ jsxs7("div", { className: "hw-header-identity", children: [
-                  /* @__PURE__ */ jsx12("div", { className: "hw-header-bot-icon", children: /* @__PURE__ */ jsx12(WidgetLogo, {}) }),
-                  /* @__PURE__ */ jsxs7("div", { className: "hw-header-info", children: [
-                    /* @__PURE__ */ jsx12("div", { className: "hw-header-name", children: companyName }),
-                    /* @__PURE__ */ jsx12("div", { className: "hw-header-status", children: subtitleText })
+                /* @__PURE__ */ jsxs8("div", { className: "hw-header-identity", children: [
+                  /* @__PURE__ */ jsx13("div", { className: `hw-header-bot-icon${hasTeamAgent ? " hw-header-bot-icon--team" : ""}`, children: hasTeamAgent && activeConvSummary?.lastMessageSenderImage ? /* @__PURE__ */ jsx13("img", { src: activeConvSummary.lastMessageSenderImage, alt: headerName, className: "hw-header-agent-img" }) : hasTeamAgent ? /* @__PURE__ */ jsx13("span", { className: "hw-header-agent-initials", children: headerName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx13(WidgetLogo, {}) }),
+                  /* @__PURE__ */ jsxs8("div", { className: "hw-header-info", children: [
+                    /* @__PURE__ */ jsx13("div", { className: "hw-header-name", children: headerName }),
+                    /* @__PURE__ */ jsx13("div", { className: "hw-header-status", children: subtitleText })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
                     className: "hw-header-close",
                     onClick: handleClose,
                     "aria-label": t("widget.aria_close"),
-                    children: /* @__PURE__ */ jsx12(IconCrossMedium, { size: 20 })
+                    children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
                   }
                 )
               ] }),
-              subView === null && activeTab === "home" && /* @__PURE__ */ jsxs7(Fragment2, { children: [
-                /* @__PURE__ */ jsxs7("div", { className: "hw-hero", children: [
-                  /* @__PURE__ */ jsxs7("div", { className: "hw-hero-top", children: [
-                    /* @__PURE__ */ jsx12("div", { className: "hw-hero-bot-icon", children: /* @__PURE__ */ jsx12(WidgetLogo, {}) }),
-                    /* @__PURE__ */ jsx12(
+              subView === null && activeTab === "home" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                /* @__PURE__ */ jsxs8("div", { className: "hw-hero", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "hw-hero-top", children: [
+                    /* @__PURE__ */ jsx13("div", { className: "hw-hero-bot-icon", children: /* @__PURE__ */ jsx13(WidgetLogo, {}) }),
+                    /* @__PURE__ */ jsx13(
                       "button",
                       {
                         type: "button",
                         className: "hw-hero-close",
                         onClick: handleClose,
                         "aria-label": t("widget.aria_close"),
-                        children: /* @__PURE__ */ jsx12(IconCrossMedium, { size: 20 })
+                        children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx12("div", { className: "hw-hero-greeting", children: welcomeMessage.split("\n").map((line, i) => /* @__PURE__ */ jsxs7(
+                  /* @__PURE__ */ jsx13("div", { className: "hw-hero-greeting", children: welcomeMessage.split("\n").map((line, i) => /* @__PURE__ */ jsxs8(
                     "span",
                     {
                       className: i === 0 ? "hw-hero-greeting-name" : "hw-hero-greeting-question",
                       children: [
-                        i > 0 && /* @__PURE__ */ jsx12("br", {}),
+                        i > 0 && /* @__PURE__ */ jsx13("br", {}),
                         line
                       ]
                     },
                     i
                   )) }),
-                  /* @__PURE__ */ jsx12("div", { className: "hw-hero-subtitle", children: subtitleText })
+                  /* @__PURE__ */ jsx13("div", { className: "hw-hero-subtitle", children: subtitleText })
                 ] }),
-                /* @__PURE__ */ jsx12("div", { className: "hw-sheet", children: /* @__PURE__ */ jsxs7("div", { className: "hw-sheet-inner", children: [
-                  /* @__PURE__ */ jsxs7("button", { type: "button", className: "hw-card", onClick: openNewConversation, children: [
-                    /* @__PURE__ */ jsxs7("div", { className: "hw-card-body", children: [
-                      /* @__PURE__ */ jsx12("div", { className: "hw-card-title", children: t("widget.send_us_message") }),
-                      /* @__PURE__ */ jsx12("div", { className: "hw-card-meta", children: t("widget.reply_time") })
+                /* @__PURE__ */ jsx13("div", { className: "hw-sheet", children: /* @__PURE__ */ jsxs8("div", { className: "hw-sheet-inner", children: [
+                  /* @__PURE__ */ jsxs8("button", { type: "button", className: "hw-card", onClick: openNewConversation, children: [
+                    /* @__PURE__ */ jsxs8("div", { className: "hw-card-body", children: [
+                      /* @__PURE__ */ jsx13("div", { className: "hw-card-title", children: t("widget.send_us_message") }),
+                      /* @__PURE__ */ jsx13("div", { className: "hw-card-meta", children: t("widget.reply_time") })
                     ] }),
-                    /* @__PURE__ */ jsx12("div", { className: "hw-card-arrow", children: /* @__PURE__ */ jsx12(IconPaperPlaneTopRight, {}) })
+                    /* @__PURE__ */ jsx13("div", { className: "hw-card-arrow", children: /* @__PURE__ */ jsx13(SendIcon, {}) })
                   ] }),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(
                     HomeView,
                     {
                       conversations,
@@ -3511,17 +3794,17 @@ function DefaultWidget({ initialOpen = false } = {}) {
                   )
                 ] }) })
               ] }),
-              subView === null && activeTab === "messages" && /* @__PURE__ */ jsxs7("div", { className: "hw-header hw-header--centered", children: [
-                /* @__PURE__ */ jsx12("div", { className: "hw-header-spacer" }),
-                /* @__PURE__ */ jsx12("div", { className: "hw-header-title", children: t("widget.messages") }),
-                /* @__PURE__ */ jsx12(
+              subView === null && activeTab === "messages" && /* @__PURE__ */ jsxs8("div", { className: "hw-header hw-header--centered", children: [
+                /* @__PURE__ */ jsx13("div", { className: "hw-header-spacer" }),
+                /* @__PURE__ */ jsx13("div", { className: "hw-header-title", children: t("widget.messages") }),
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     type: "button",
                     className: "hw-header-close",
                     onClick: handleClose,
                     "aria-label": t("widget.aria_close"),
-                    children: /* @__PURE__ */ jsx12(IconCrossMedium, { size: 20 })
+                    children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
                   }
                 )
               ] }),
@@ -3529,23 +3812,23 @@ function DefaultWidget({ initialOpen = false } = {}) {
                 const tabId = activeTab.replace("content:", "");
                 const contentTab = contentTabs.find((t2) => t2.id === tabId);
                 if (!contentTab) return null;
-                return /* @__PURE__ */ jsxs7("div", { className: "hw-header hw-header--centered", children: [
-                  /* @__PURE__ */ jsx12("div", { className: "hw-header-spacer" }),
-                  /* @__PURE__ */ jsx12("div", { className: "hw-header-title", children: resolveLabel2(contentTab.label) }),
-                  /* @__PURE__ */ jsx12(
+                return /* @__PURE__ */ jsxs8("div", { className: "hw-header hw-header--centered", children: [
+                  /* @__PURE__ */ jsx13("div", { className: "hw-header-spacer" }),
+                  /* @__PURE__ */ jsx13("div", { className: "hw-header-title", children: resolveLabel2(contentTab.label) }),
+                  /* @__PURE__ */ jsx13(
                     "button",
                     {
                       type: "button",
                       className: "hw-header-close",
                       onClick: handleClose,
                       "aria-label": t("widget.aria_close"),
-                      children: /* @__PURE__ */ jsx12(IconCrossMedium, { size: 20 })
+                      children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
                     }
                   )
                 ] });
               })(),
-              (subView !== null || activeTab !== "home") && /* @__PURE__ */ jsxs7("div", { className: "hw-content", children: [
-                subView === null && activeTab === "messages" && /* @__PURE__ */ jsx12(
+              (subView !== null || activeTab !== "home") && /* @__PURE__ */ jsxs8("div", { className: "hw-content", children: [
+                subView === null && activeTab === "messages" && /* @__PURE__ */ jsx13(
                   MessagesView,
                   {
                     conversations,
@@ -3553,7 +3836,7 @@ function DefaultWidget({ initialOpen = false } = {}) {
                     onNewClick: openNewConversation
                   }
                 ),
-                subView === "new" && /* @__PURE__ */ jsx12(
+                subView === "new" && /* @__PURE__ */ jsx13(
                   NewConversationView,
                   {
                     text: newText,
@@ -3563,12 +3846,12 @@ function DefaultWidget({ initialOpen = false } = {}) {
                     welcomeMessage
                   }
                 ),
-                subView === "conversation" && activeId && /* @__PURE__ */ jsx12(ConversationView, { conversationId: activeId }),
+                subView === "conversation" && activeId && /* @__PURE__ */ jsx13(ConversationView, { conversationId: activeId }),
                 activeTab.startsWith("content:") && (() => {
                   const tabId = activeTab.replace("content:", "");
                   const contentTab = contentTabs.find((t2) => t2.id === tabId);
                   if (!contentTab) return null;
-                  return /* @__PURE__ */ jsx12(
+                  return /* @__PURE__ */ jsx13(
                     ContentTabView,
                     {
                       tab: contentTab,
@@ -3587,7 +3870,7 @@ function DefaultWidget({ initialOpen = false } = {}) {
                   );
                 })()
               ] }),
-              showTabBar && /* @__PURE__ */ jsx12(
+              showTabBar && /* @__PURE__ */ jsx13(
                 TabBar,
                 {
                   activeTab,
@@ -3597,17 +3880,17 @@ function DefaultWidget({ initialOpen = false } = {}) {
                   showMessagesTab: agentConfig?.showMessagesTab ?? true
                 }
               ),
-              /* @__PURE__ */ jsxs7("div", { className: "hw-powered", children: [
+              /* @__PURE__ */ jsxs8("div", { className: "hw-powered", children: [
                 t("widget.powered_by"),
                 " ",
-                /* @__PURE__ */ jsx12("a", { href: "https://helpway.ai", target: "_blank", rel: "noopener noreferrer", children: "Helpway" })
+                /* @__PURE__ */ jsx13("a", { href: "https://helpway.ai", target: "_blank", rel: "noopener noreferrer", children: "Helpway" })
               ] })
             ]
           }
         ),
-        !isOpen && /* @__PURE__ */ jsx12(MessagePreview, { onOpen: handleBubbleClick }),
-        /* @__PURE__ */ jsx12(WidgetDebugOverlay, {}),
-        /* @__PURE__ */ jsxs7(
+        !isOpen && /* @__PURE__ */ jsx13(MessagePreview, { onOpen: handleBubbleClick }),
+        /* @__PURE__ */ jsx13(WidgetDebugOverlay, {}),
+        /* @__PURE__ */ jsxs8(
           "button",
           {
             ref: bubbleRef,
@@ -3624,22 +3907,22 @@ function DefaultWidget({ initialOpen = false } = {}) {
             "aria-expanded": isOpen,
             "aria-haspopup": "dialog",
             children: [
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "span",
                 {
                   className: `hw-bubble-icon hw-bubble-icon--bot ${isOpen ? "hw-bubble-icon--hidden" : ""}`,
-                  children: /* @__PURE__ */ jsx12(WidgetLogo, {})
+                  children: /* @__PURE__ */ jsx13(WidgetLogo, {})
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "span",
                 {
                   className: `hw-bubble-icon hw-bubble-icon--close ${!isOpen ? "hw-bubble-icon--hidden" : ""}`,
-                  children: /* @__PURE__ */ jsx12(IconCrossMedium, { size: 24 })
+                  children: /* @__PURE__ */ jsx13(XIcon, { size: 24 })
                 }
               ),
-              launcherStyle !== "icon" && !isOpen && /* @__PURE__ */ jsx12("span", { className: "hw-bubble-label", children: launcherStyle === "help" ? t("widget.help") : companyName }),
-              !isOpen && totalUnread > 0 && /* @__PURE__ */ jsx12("div", { className: "hw-bubble-badge", children: totalUnread })
+              launcherStyle !== "icon" && !isOpen && /* @__PURE__ */ jsx13("span", { className: "hw-bubble-label", children: launcherStyle === "help" ? t("widget.help") : companyName }),
+              !isOpen && totalUnread > 0 && /* @__PURE__ */ jsx13("div", { className: "hw-bubble-badge", children: totalUnread })
             ]
           }
         )
@@ -3654,8 +3937,8 @@ function TabBar({
   contentTabs,
   showMessagesTab = true
 }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "hw-tabs", role: "tablist", children: [
-    /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8("div", { className: "hw-tabs", role: "tablist", children: [
+    /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -3664,12 +3947,12 @@ function TabBar({
         role: "tab",
         "aria-selected": activeTab === "home",
         children: [
-          /* @__PURE__ */ jsx12(IconHome, {}),
-          /* @__PURE__ */ jsx12("span", { children: t("widget.home") })
+          /* @__PURE__ */ jsx13(HomeIcon, {}),
+          /* @__PURE__ */ jsx13("span", { children: t("widget.home") })
         ]
       }
     ),
-    showMessagesTab && /* @__PURE__ */ jsxs7(
+    showMessagesTab && /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -3678,15 +3961,15 @@ function TabBar({
         role: "tab",
         "aria-selected": activeTab === "messages",
         children: [
-          /* @__PURE__ */ jsxs7("span", { className: "hw-tabs-icon-wrap", children: [
-            /* @__PURE__ */ jsx12(IconBubbleDots, {}),
-            unreadCount > 0 && /* @__PURE__ */ jsx12("span", { className: "hw-tabs-badge", children: unreadCount > 99 ? "99+" : unreadCount })
+          /* @__PURE__ */ jsxs8("span", { className: "hw-tabs-icon-wrap", children: [
+            /* @__PURE__ */ jsx13(MessagesIcon, {}),
+            unreadCount > 0 && /* @__PURE__ */ jsx13("span", { className: "hw-tabs-badge", children: unreadCount > 99 ? "99+" : unreadCount })
           ] }),
-          /* @__PURE__ */ jsx12("span", { children: t("widget.messages") })
+          /* @__PURE__ */ jsx13("span", { children: t("widget.messages") })
         ]
       }
     ),
-    contentTabs.map((tab) => /* @__PURE__ */ jsxs7(
+    contentTabs.map((tab) => /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -3695,8 +3978,8 @@ function TabBar({
         role: "tab",
         "aria-selected": activeTab === `content:${tab.id}`,
         children: [
-          /* @__PURE__ */ jsx12(ContentTabIconComponent, { icon: tab.icon }),
-          /* @__PURE__ */ jsx12("span", { children: resolveLabel2(tab.label) })
+          /* @__PURE__ */ jsx13(ContentTabIconComponent, { icon: tab.icon }),
+          /* @__PURE__ */ jsx13("span", { children: resolveLabel2(tab.label) })
         ]
       },
       tab.id
@@ -3710,9 +3993,9 @@ function HomeView({
 }) {
   const recent = conversations.slice(0, 3);
   if (recent.length === 0) return null;
-  return /* @__PURE__ */ jsxs7("div", { className: "hw-recent-card", children: [
-    /* @__PURE__ */ jsx12("div", { className: "hw-recent-header", children: t("widget.recent_conversations") }),
-    recent.map((conv, i) => /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs8("div", { className: "hw-recent-card", children: [
+    /* @__PURE__ */ jsx13("div", { className: "hw-recent-header", children: t("widget.recent_conversations") }),
+    recent.map((conv, i) => /* @__PURE__ */ jsx13(
       ConversationRow,
       {
         conversation: conv,
@@ -3721,7 +4004,7 @@ function HomeView({
       },
       conv.id
     )),
-    conversations.length > 3 && /* @__PURE__ */ jsx12("button", { type: "button", className: "hw-recent-see-all", onClick: onMessagesClick, children: t("widget.see_all") })
+    conversations.length > 3 && /* @__PURE__ */ jsx13("button", { type: "button", className: "hw-recent-see-all", onClick: onMessagesClick, children: t("widget.see_all") })
   ] });
 }
 function MessagesView({
@@ -3730,26 +4013,28 @@ function MessagesView({
   onNewClick
 }) {
   if (conversations.length === 0) {
-    return /* @__PURE__ */ jsxs7("div", { className: "hw-empty-state", children: [
-      /* @__PURE__ */ jsx12("div", { className: "hw-empty-icon-wrap", children: /* @__PURE__ */ jsx12(IconBubbleDots, {}) }),
-      /* @__PURE__ */ jsx12("div", { className: "hw-empty-title", children: t("widget.no_messages") }),
-      /* @__PURE__ */ jsx12("div", { className: "hw-empty-desc", children: t("widget.no_messages_desc") }),
-      /* @__PURE__ */ jsx12("button", { type: "button", className: "hw-empty-btn", onClick: onNewClick, children: t("widget.start_conversation") })
+    return /* @__PURE__ */ jsxs8("div", { className: "hw-empty-state", children: [
+      /* @__PURE__ */ jsx13("div", { className: "hw-empty-icon-wrap", children: /* @__PURE__ */ jsx13(MessagesIcon, {}) }),
+      /* @__PURE__ */ jsx13("div", { className: "hw-empty-title", children: t("widget.no_messages") }),
+      /* @__PURE__ */ jsx13("div", { className: "hw-empty-desc", children: t("widget.no_messages_desc") }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "hw-empty-btn", onClick: onNewClick, children: t("widget.start_conversation") })
     ] });
   }
-  return /* @__PURE__ */ jsx12("div", { className: "hw-msgs-tab", children: conversations.map((conv) => /* @__PURE__ */ jsx12(ConversationCard, { conversation: conv, onSelect }, conv.id)) });
+  return /* @__PURE__ */ jsx13("div", { className: "hw-msgs-tab", children: conversations.map((conv) => /* @__PURE__ */ jsx13(ConversationCard, { conversation: conv, onSelect }, conv.id)) });
 }
 function ConvCardBody({ conv }) {
   const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
+  const isTeam = conv.lastMessageSenderType === "team" && conv.lastMessageSenderName;
+  const displayName = isTeam ? conv.lastMessageSenderName : agentName;
   const preview = conv.lastMessageText ?? t("widget.no_preview");
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx12("div", { className: "hw-conv-card-avatar", children: /* @__PURE__ */ jsx12(WidgetLogo, {}) }),
-    /* @__PURE__ */ jsxs7("div", { className: "hw-conv-card-content", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "hw-conv-card-top", children: [
-        /* @__PURE__ */ jsx12("span", { className: "hw-conv-card-name", children: agentName }),
-        conv.lastMessageAt && /* @__PURE__ */ jsx12("span", { className: "hw-conv-card-time", children: formatRelativeTime(conv.lastMessageAt) })
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx13("div", { className: `hw-conv-card-avatar${isTeam ? " hw-conv-card-avatar--team" : ""}`, children: isTeam ? conv.lastMessageSenderImage ? /* @__PURE__ */ jsx13("img", { src: conv.lastMessageSenderImage, alt: displayName, className: "hw-conv-card-avatar-img" }) : /* @__PURE__ */ jsx13("span", { className: "hw-conv-card-avatar-initials", children: displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx13(WidgetLogo, {}) }),
+    /* @__PURE__ */ jsxs8("div", { className: "hw-conv-card-content", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "hw-conv-card-top", children: [
+        /* @__PURE__ */ jsx13("span", { className: "hw-conv-card-name", children: displayName }),
+        conv.lastMessageAt && /* @__PURE__ */ jsx13("span", { className: "hw-conv-card-time", children: formatRelativeTime(conv.lastMessageAt) })
       ] }),
-      /* @__PURE__ */ jsx12("div", { className: "hw-conv-card-preview", children: preview })
+      /* @__PURE__ */ jsx13("div", { className: "hw-conv-card-preview", children: preview })
     ] })
   ] });
 }
@@ -3758,15 +4043,15 @@ function ConversationCard({
   onSelect
 }) {
   const hasUnread = conv.unreadCount > 0;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "button",
     {
       type: "button",
       className: `hw-conv-card ${hasUnread ? "hw-conv-card--unread" : ""}`,
       onClick: () => onSelect(conv.id),
       children: [
-        /* @__PURE__ */ jsx12("div", { className: "hw-conv-card-row", children: /* @__PURE__ */ jsx12(ConvCardBody, { conv }) }),
-        hasUnread && /* @__PURE__ */ jsx12("div", { className: "hw-conv-card-badge", children: conv.unreadCount })
+        /* @__PURE__ */ jsx13("div", { className: "hw-conv-card-row", children: /* @__PURE__ */ jsx13(ConvCardBody, { conv }) }),
+        hasUnread && /* @__PURE__ */ jsx13("div", { className: "hw-conv-card-badge", children: conv.unreadCount })
       ]
     }
   );
@@ -3777,20 +4062,20 @@ function ConversationRow({
   isLast
 }) {
   const hasUnread = conv.unreadCount > 0;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "button",
     {
       type: "button",
       className: `hw-recent-row ${hasUnread ? "hw-recent-row--unread" : ""} ${isLast ? "hw-recent-row--last" : ""}`,
       onClick: () => onSelect(conv.id),
       children: [
-        /* @__PURE__ */ jsx12(ConvCardBody, { conv }),
-        hasUnread && /* @__PURE__ */ jsx12("div", { className: "hw-recent-row-badge", children: conv.unreadCount })
+        /* @__PURE__ */ jsx13(ConvCardBody, { conv }),
+        hasUnread && /* @__PURE__ */ jsx13("div", { className: "hw-recent-row-badge", children: conv.unreadCount })
       ]
     }
   );
 }
-function InlineEmailPrompt() {
+function InlineEmailPrompt({ conversationId }) {
   const { client, store } = useWidgetContext();
   const updateContact = useWidgetStore((s) => s.updateVisitorContact);
   const [email, setEmail] = useState12("");
@@ -3814,7 +4099,10 @@ function InlineEmailPrompt() {
     setIsSuccess(true);
     setIsSubmitting(true);
     try {
-      const result = await client.widget.collectEmail.mutate({ email: trimmed });
+      const result = await client.widget.collectEmail.mutate({
+        email: trimmed,
+        ...conversationId ? { conversationId } : {}
+      });
       if (result.contact) {
         updateContact({
           id: result.contact.id,
@@ -3834,23 +4122,23 @@ function InlineEmailPrompt() {
     }
   };
   if (isSuccess) {
-    return /* @__PURE__ */ jsxs7("div", { className: "hw-email-card hw-email-card--success", children: [
-      /* @__PURE__ */ jsx12("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "#22c55e", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx12("polyline", { points: "20 6 9 17 4 12" }) }),
+    return /* @__PURE__ */ jsxs8("div", { className: "hw-email-card hw-email-card--success", children: [
+      /* @__PURE__ */ jsx13("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "#22c55e", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx13("polyline", { points: "20 6 9 17 4 12" }) }),
       t("widget.email_saved")
     ] });
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "hw-email-card", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "hw-email-card-header", children: [
-      /* @__PURE__ */ jsx12("div", { className: "hw-email-card-icon", children: /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx12("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
-        /* @__PURE__ */ jsx12("path", { d: "M22 7l-10 7L2 7" })
+  return /* @__PURE__ */ jsxs8("div", { className: "hw-email-card", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "hw-email-card-header", children: [
+      /* @__PURE__ */ jsx13("div", { className: "hw-email-card-icon", children: /* @__PURE__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx13("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+        /* @__PURE__ */ jsx13("path", { d: "M22 7l-10 7L2 7" })
       ] }) }),
-      /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsx12("p", { className: "hw-email-card-title", children: t("widget.email_title") }),
-        /* @__PURE__ */ jsx12("p", { className: "hw-email-card-subtitle", children: t("widget.email_subtitle") })
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx13("p", { className: "hw-email-card-title", children: t("widget.email_title") }),
+        /* @__PURE__ */ jsx13("p", { className: "hw-email-card-subtitle", children: t("widget.email_subtitle") })
       ] })
     ] }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "input",
       {
         type: "email",
@@ -3866,14 +4154,14 @@ function InlineEmailPrompt() {
         placeholder: t("widget.email_placeholder")
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
         className: "hw-email-card-submit",
         onClick: handleSubmit,
         disabled: isSubmitting || !email.trim(),
-        children: isSubmitting ? /* @__PURE__ */ jsx12("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx12("animate", { attributeName: "stroke-dashoffset", values: "32;0", dur: "1s", repeatCount: "indefinite" }) }) }) : t("widget.email_continue")
+        children: isSubmitting ? /* @__PURE__ */ jsx13("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx13("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx13("animate", { attributeName: "stroke-dashoffset", values: "32;0", dur: "1s", repeatCount: "indefinite" }) }) }) : t("widget.email_continue")
       }
     )
   ] });
@@ -3885,18 +4173,16 @@ function NewConversationView({
   isSubmitting,
   welcomeMessage
 }) {
-  const welcomeTime = useRef13((/* @__PURE__ */ new Date()).toISOString()).current;
-  return /* @__PURE__ */ jsxs7("div", { className: "hw-new", children: [
-    /* @__PURE__ */ jsx12("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs8("div", { className: "hw-new", children: [
+    /* @__PURE__ */ jsx13("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx13(
       MessageBubble,
       {
         text: welcomeMessage,
         sender: "ai",
-        time: welcomeTime,
         parts: null
       }
     ) }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       Composer,
       {
         text,
@@ -3919,7 +4205,8 @@ function ConversationView({ conversationId }) {
     addFiles,
     removeAttachment,
     sendError,
-    clearSendError
+    clearSendError,
+    emailGateConvId
   } = useComposer(conversationId);
   const { isTyping, isAiProcessing, setTyping } = usePresence(conversationId);
   const agentConfig = useWidgetStore((s) => s.agentConfig);
@@ -3934,29 +4221,30 @@ function ConversationView({ conversationId }) {
   const hasAiReply = items.some(
     (it) => it.type === "message" && Boolean(it.aiAgentId)
   );
-  const needsEmail = !!agentConfig?.requireVisitorEmail && !visitorContact?.email && hasVisitorMessage && hasAiReply;
+  const needsEmailPostReply = !!agentConfig?.requireVisitorEmail && !visitorContact?.email && hasVisitorMessage && hasAiReply;
+  const needsEmail = needsEmailPostReply || !!emailGateConvId;
   if (isLoading && items.length === 0) {
-    return /* @__PURE__ */ jsx12("div", { className: "hw-messages", children: /* @__PURE__ */ jsxs7("div", { className: "hw-skeleton-messages", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "hw-skeleton-msg", children: [
-        /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-avatar" }),
-        /* @__PURE__ */ jsxs7("div", { className: "hw-skeleton-bubble", children: [
-          /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 140 } }),
-          /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } })
+    return /* @__PURE__ */ jsx13("div", { className: "hw-messages", children: /* @__PURE__ */ jsxs8("div", { className: "hw-skeleton-messages", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "hw-skeleton-msg", children: [
+        /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-avatar" }),
+        /* @__PURE__ */ jsxs8("div", { className: "hw-skeleton-bubble", children: [
+          /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 140 } }),
+          /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } })
         ] })
       ] }),
-      /* @__PURE__ */ jsx12("div", { className: "hw-skeleton-msg hw-skeleton-msg--right", children: /* @__PURE__ */ jsx12("div", { className: "hw-skeleton-bubble", style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } }) }) }),
-      /* @__PURE__ */ jsxs7("div", { className: "hw-skeleton-msg", children: [
-        /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-avatar" }),
-        /* @__PURE__ */ jsxs7("div", { className: "hw-skeleton-bubble", children: [
-          /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 180 } }),
-          /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
-          /* @__PURE__ */ jsx12("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 80 } })
+      /* @__PURE__ */ jsx13("div", { className: "hw-skeleton-msg hw-skeleton-msg--right", children: /* @__PURE__ */ jsx13("div", { className: "hw-skeleton-bubble", style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } }) }) }),
+      /* @__PURE__ */ jsxs8("div", { className: "hw-skeleton-msg", children: [
+        /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-avatar" }),
+        /* @__PURE__ */ jsxs8("div", { className: "hw-skeleton-bubble", children: [
+          /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 180 } }),
+          /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
+          /* @__PURE__ */ jsx13("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 80 } })
         ] })
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx13(
       MessageList,
       {
         items,
@@ -3967,11 +4255,11 @@ function ConversationView({ conversationId }) {
         onLoadMore: loadMore
       }
     ),
-    isResolved ? /* @__PURE__ */ jsx12(ResolvedBanner, { conversationId }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      needsEmail && /* @__PURE__ */ jsx12(InlineEmailPrompt, {}),
-      sendError && /* @__PURE__ */ jsxs7("div", { className: "hw-send-error", children: [
+    isResolved ? /* @__PURE__ */ jsx13(ResolvedBanner, { conversationId }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      needsEmail && /* @__PURE__ */ jsx13(InlineEmailPrompt, { conversationId: emailGateConvId ?? void 0 }),
+      sendError && /* @__PURE__ */ jsxs8("div", { className: "hw-send-error", children: [
         sendError,
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -3984,7 +4272,7 @@ function ConversationView({ conversationId }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         Composer,
         {
           text,
@@ -4018,12 +4306,12 @@ function ResolvedBanner({ conversationId }) {
     client.widget.sendCsat.mutate({ conversationId, rating }).catch(() => {
     });
   };
-  return /* @__PURE__ */ jsxs7("div", { className: "hw-resolved", children: [
-    /* @__PURE__ */ jsx12("div", { className: "hw-resolved-text", children: t("widget.resolved_text") }),
-    !csatSubmitted ? /* @__PURE__ */ jsxs7("div", { className: "hw-csat", children: [
-      /* @__PURE__ */ jsx12("div", { className: "hw-csat-label", children: t("widget.csat_label") }),
-      /* @__PURE__ */ jsxs7("div", { className: "hw-csat-buttons", children: [
-        /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs8("div", { className: "hw-resolved", children: [
+    /* @__PURE__ */ jsx13("div", { className: "hw-resolved-text", children: t("widget.resolved_text") }),
+    !csatSubmitted ? /* @__PURE__ */ jsxs8("div", { className: "hw-csat", children: [
+      /* @__PURE__ */ jsx13("div", { className: "hw-csat-label", children: t("widget.csat_label") }),
+      /* @__PURE__ */ jsxs8("div", { className: "hw-csat-buttons", children: [
+        /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -4033,7 +4321,7 @@ function ResolvedBanner({ conversationId }) {
             children: "\u{1F44D}"
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
@@ -4044,8 +4332,8 @@ function ResolvedBanner({ conversationId }) {
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ jsx12("div", { className: "hw-csat-thanks", children: t("widget.csat_thanks") }),
-    /* @__PURE__ */ jsx12("div", { className: "hw-resolved-actions", children: /* @__PURE__ */ jsx12("button", { type: "button", className: "hw-resolved-reopen", onClick: handleReopen, children: t("widget.send_followup") }) })
+    ] }) : /* @__PURE__ */ jsx13("div", { className: "hw-csat-thanks", children: t("widget.csat_thanks") }),
+    /* @__PURE__ */ jsx13("div", { className: "hw-resolved-actions", children: /* @__PURE__ */ jsx13("button", { type: "button", className: "hw-resolved-reopen", onClick: handleReopen, children: t("widget.send_followup") }) })
   ] });
 }
 function MessagePreview({ onOpen }) {
@@ -4053,7 +4341,7 @@ function MessagePreview({ onOpen }) {
   const dismissPreview = useWidgetStore((s) => s.dismissPreview);
   const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
   const [closing, setClosing] = useState12(false);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!preview) return;
     const timer = setTimeout(() => {
       setClosing(true);
@@ -4074,7 +4362,7 @@ function MessagePreview({ onOpen }) {
     dismissPreview();
     onOpen();
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: `hw-preview ${closing ? "hw-preview--closing" : ""}`,
@@ -4082,21 +4370,21 @@ function MessagePreview({ onOpen }) {
       role: "button",
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ jsxs7("div", { className: "hw-preview-header", children: [
-          /* @__PURE__ */ jsx12("div", { className: "hw-preview-avatar", children: /* @__PURE__ */ jsx12(WidgetLogo, {}) }),
-          /* @__PURE__ */ jsx12("div", { className: "hw-preview-name", children: agentName }),
-          /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs8("div", { className: "hw-preview-header", children: [
+          /* @__PURE__ */ jsx13("div", { className: "hw-preview-avatar", children: /* @__PURE__ */ jsx13(WidgetLogo, {}) }),
+          /* @__PURE__ */ jsx13("div", { className: "hw-preview-name", children: agentName }),
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
               className: "hw-preview-close",
               onClick: handleClose,
               "aria-label": t("widget.aria_dismiss"),
-              children: /* @__PURE__ */ jsx12(IconCrossMedium, { size: 20 })
+              children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx12("div", { className: "hw-preview-body", children: preview.text })
+        /* @__PURE__ */ jsx13("div", { className: "hw-preview-body", children: preview.text })
       ]
     }
   );
@@ -4125,10 +4413,10 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/themed/styles.css
-styleInject(':host {\n  all: initial;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget *,\n.hw-widget *::before,\n.hw-widget *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.hw-widget {\n  --hw-primary: #171717;\n  --hw-primary-hover: #2a2a2a;\n  --hw-focus-border: #9ca3af;\n  --hw-focus-ring: rgba(0, 0, 0, 0.06);\n  --hw-accent: #6366f1;\n  --hw-bg: #ffffff;\n  --hw-bg-subtle: #fafafa;\n  --hw-bg-hover: #f5f5f5;\n  --hw-border: #f0f0f0;\n  --hw-border-md: #e5e5e5;\n  --hw-text: #111;\n  --hw-text-1: #111;\n  --hw-text-2: #666;\n  --hw-text-3: #999;\n  --hw-text-4: #bbb;\n  --hw-radius: 16px;\n  --hw-visitor-bubble-bg: #f0f0f0;\n  --hw-visitor-bubble-text: #1a1a1a;\n  --hw-font:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n}\n.hw-agent-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.hw-agent-icon {\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n.hw-widget :focus-visible {\n  outline: 2px solid var(--hw-primary);\n  outline-offset: 2px;\n}\n.hw-widget :focus:not(:focus-visible) {\n  outline: none;\n}\n.hw-widget {\n  position: fixed;\n  bottom: 20px;\n  right: var(--hw-position-right, 20px);\n  left: var(--hw-position-left, auto);\n  z-index: 999999;\n  font-family: var(--hw-font);\n}\n.hw-bubble {\n  width: 48px;\n  height: 48px;\n  border-radius: 14px;\n  background: var(--hw-primary);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;\n  position: relative;\n  overflow: visible;\n}\n.hw-bubble--rounded {\n  border-radius: 14px;\n}\n.hw-bubble--square {\n  border-radius: 8px;\n}\n.hw-bubble--pill {\n  border-radius: 24px;\n}\n.hw-bubble--launcher-bubble,\n.hw-bubble--launcher-help {\n  width: auto;\n  padding: 0 16px 0 12px;\n  gap: 8px;\n  border-radius: 24px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--square,\n.hw-bubble--launcher-help.hw-bubble--square {\n  border-radius: 8px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--rounded,\n.hw-bubble--launcher-help.hw-bubble--rounded {\n  border-radius: 14px;\n}\n.hw-bubble-label {\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  line-height: 1;\n  position: static;\n  opacity: 1;\n  transform: none;\n}\n.hw-bubble--launcher-bubble .hw-bubble-icon,\n.hw-bubble--launcher-help .hw-bubble-icon {\n  position: static;\n}\n.hw-bubble:hover {\n  transform: scale(1.05);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n}\n.hw-bubble:active {\n  transform: scale(0.95);\n}\n.hw-bubble--open {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n}\n.hw-bubble:focus-visible {\n  outline: 2px solid white;\n  outline-offset: 2px;\n}\n.hw-bubble-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;\n}\n.hw-bubble-icon svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-bubble-icon--hidden {\n  transform: scale(0.3) rotate(90deg);\n  opacity: 0;\n}\n.hw-bubble-icon--bot {\n}\n.hw-bubble--avatar .hw-bubble-icon--bot {\n  width: 100%;\n  height: 100%;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n}\n.hw-bubble-icon--close svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-bubble-badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  min-width: 20px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 11px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 5px;\n  border: 2px solid white;\n  animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes hw-badge-pop {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n.hw-bubble-badge::after {\n  content: "";\n  position: absolute;\n  inset: -2px;\n  border-radius: inherit;\n  background: var(--hw-primary);\n  opacity: 0;\n  animation: hw-badge-pulse 2s ease-out infinite;\n}\n@keyframes hw-badge-pulse {\n  0% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1.8);\n  }\n}\n.hw-window {\n  position: absolute;\n  bottom: 72px;\n  right: var(--hw-window-right, 0);\n  left: var(--hw-window-left, auto);\n  width: 440px;\n  height: 640px;\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text);\n  border-radius: var(--hw-radius);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: hw-window-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes hw-window-open {\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.hw-window--closing {\n  animation: hw-window-close 0.2s ease forwards;\n}\n@keyframes hw-window-close {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.98);\n  }\n}\n.hw-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-window,\n  .hw-window--closing,\n  .hw-content,\n  .hw-msg,\n  .hw-bubble-icon,\n  .hw-bubble-badge,\n  .hw-bubble-badge::after,\n  .hw-typing-dot,\n  .hw-loading-dot {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n.hw-hero {\n  flex-shrink: 0;\n  background:\n    linear-gradient(\n      160deg,\n      color-mix(in srgb, var(--hw-primary) 60%, black) 0%,\n      var(--hw-primary) 50%,\n      color-mix(in srgb, var(--hw-primary) 40%, black) 100%);\n  color: white;\n  padding: 20px 22px 40px;\n}\n.hw-hero-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n.hw-hero-close {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, color 0.15s;\n}\n.hw-hero-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  color: white;\n}\n.hw-hero-close:active {\n  transform: scale(0.92);\n  transition:\n    transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n    background 0.15s,\n    color 0.15s;\n}\n.hw-hero-close svg {\n  width: 20px;\n  height: 20px;\n}\n.hw-hero-bot-icon {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  overflow: hidden;\n}\n.hw-hero-bot-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.hw-hero-greeting {\n  font-size: 26px;\n  font-weight: 700;\n  line-height: 1.15;\n  margin-bottom: 6px;\n}\n.hw-hero-greeting-name {\n  font-weight: 300;\n}\n.hw-hero-greeting-question {\n  font-weight: 700;\n}\n.hw-hero-subtitle {\n  font-size: 15px;\n  color: rgba(255, 255, 255, 0.5);\n  line-height: 1.35;\n}\n.hw-sheet {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  background: #ffffff;\n  border-radius: 20px 20px 0 0;\n  margin-top: -24px;\n  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);\n  position: relative;\n  z-index: 1;\n}\n.hw-sheet-inner {\n  padding: 20px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.hw-header {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  background: var(--hw-primary);\n  color: white;\n  flex-shrink: 0;\n  gap: 10px;\n}\n.hw-header--sub {\n  justify-content: space-between;\n  background: transparent;\n  color: var(--hw-text);\n  border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-back {\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.15s, background 0.15s;\n  flex-shrink: 0;\n}\n.hw-header-back svg {\n  width: 18px;\n  height: 18px;\n}\n.hw-header-back:hover {\n  color: var(--hw-text);\n  background: var(--hw-bg-subtle);\n}\n.hw-header-identity {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n}\n.hw-header-bot-icon {\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  color: var(--hw-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  overflow: hidden;\n}\n.hw-header-bot-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.hw-header-info {\n  flex: 1;\n  min-width: 0;\n}\n.hw-header-name {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n.hw-header-status {\n  font-size: 12px;\n  color: var(--hw-text-3);\n  line-height: 1.3;\n}\n.hw-header-close {\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n  flex-shrink: 0;\n}\n.hw-header-close svg {\n  width: 20px;\n  height: 20px;\n}\n.hw-header-close:hover {\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text);\n}\n.hw-header-close:active {\n  transform: scale(0.92);\n}\n.hw-header--centered {\n  justify-content: space-between;\n  background: transparent;\n  color: var(--hw-text);\n  border-bottom: 1px solid var(--hw-border);\n}\n.hw-header--centered .hw-header-title {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: calc(100% - 88px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n}\n.hw-header-spacer {\n  width: 28px;\n  flex-shrink: 0;\n}\n.hw-header--messages {\n  justify-content: space-between;\n  background: transparent;\n  color: var(--hw-text);\n  border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-title {\n  font-size: 16px;\n  font-weight: 600;\n}\n.hw-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hw-header-action {\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-header-action svg {\n  width: 16px;\n  height: 16px;\n}\n.hw-header-action:hover {\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text);\n}\n.hw-header-action:active {\n  transform: scale(0.94);\n}\n.hw-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  padding: 14px 16px;\n  border-radius: 14px;\n  background: var(--hw-bg);\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n  cursor: pointer;\n  transition: box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n  text-align: left;\n  color: var(--hw-text);\n  font-family: inherit;\n}\n.hw-card:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);\n  transform: translateY(-1px);\n}\n.hw-card:active {\n  transform: translateY(0) scale(0.99);\n  transition-duration: 120ms;\n}\n.hw-card-body {\n  flex: 1;\n  min-width: 0;\n}\n.hw-card-title {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.3;\n  color: var(--hw-text);\n}\n.hw-card-meta {\n  font-size: 12px;\n  color: var(--hw-text-3);\n  line-height: 1.3;\n  margin-top: 1px;\n}\n.hw-card-arrow {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--hw-primary);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.hw-card-arrow svg {\n  width: 14px;\n  height: 14px;\n}\n.hw-msgs-tab {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.hw-recent-card {\n  border-radius: 14px;\n  background: var(--hw-bg);\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n  overflow: hidden;\n}\n.hw-recent-header {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--hw-text-2);\n  padding: 12px 14px 0;\n}\n.hw-recent-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 10px 14px;\n  border: none;\n  border-bottom: 1px solid var(--hw-border);\n  background: none;\n  cursor: pointer;\n  text-align: left;\n  font-family: inherit;\n  color: var(--hw-text);\n  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n  position: relative;\n}\n.hw-recent-row:hover {\n  background: rgba(0, 0, 0, 0.03);\n}\n.hw-recent-row:active {\n  transform: scale(0.995);\n}\n.hw-recent-row--last {\n  border-bottom: none;\n}\n.hw-recent-row .hw-conv-card-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n}\n.hw-recent-row .hw-conv-card-avatar svg {\n  width: 18px;\n  height: 18px;\n}\n.hw-recent-row .hw-conv-card-name {\n  font-size: 13px;\n}\n.hw-recent-row .hw-conv-card-preview {\n  font-size: 12px;\n}\n.hw-recent-row--unread .hw-conv-card-name {\n  color: var(--hw-text);\n}\n.hw-recent-row--unread .hw-conv-card-time {\n  color: var(--hw-accent);\n  font-weight: 500;\n}\n.hw-recent-row-badge {\n  min-width: 18px;\n  height: 18px;\n  border-radius: 9px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 5px;\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n.hw-recent-see-all {\n  display: block;\n  width: 100%;\n  padding: 10px 14px;\n  text-align: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--hw-text);\n  background: none;\n  border: none;\n  border-top: 1px solid var(--hw-border);\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.1s;\n}\n.hw-recent-see-all:hover {\n  background: rgba(0, 0, 0, 0.02);\n}\n.hw-conv-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 100%;\n  padding: 14px 16px;\n  border-radius: 14px;\n  background: var(--hw-bg);\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n  cursor: pointer;\n  transition: box-shadow 0.15s, transform 0.1s;\n  text-align: left;\n  font-family: inherit;\n  color: var(--hw-text);\n}\n.hw-conv-card:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.hw-conv-card:active {\n  transform: scale(0.99);\n}\n.hw-conv-card-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.hw-conv-card-avatar {\n  width: 36px;\n  height: 36px;\n  border-radius: 10px;\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text-3);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.hw-conv-card-avatar svg {\n  width: 20px;\n  height: 20px;\n}\n.hw-conv-card-content {\n  flex: 1;\n  min-width: 0;\n}\n.hw-conv-card-top {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n.hw-conv-card-name {\n  flex: 1;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--hw-text);\n}\n.hw-conv-card-time {\n  font-size: 11px;\n  color: var(--hw-text-3);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n.hw-conv-card-preview {\n  font-size: 13px;\n  color: var(--hw-text-2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.4;\n  margin-top: 1px;\n}\n.hw-conv-card--unread .hw-conv-card-name {\n  color: var(--hw-text);\n}\n.hw-conv-card--unread .hw-conv-card-time {\n  color: var(--hw-accent);\n  font-weight: 500;\n}\n.hw-conv-card-badge {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  min-width: 18px;\n  height: 18px;\n  border-radius: 9px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 5px;\n  font-variant-numeric: tabular-nums;\n}\n.hw-empty-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  text-align: center;\n}\n.hw-empty-icon-wrap {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: var(--hw-bg-subtle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 16px;\n  color: var(--hw-text-3);\n}\n.hw-empty-icon-wrap svg {\n  width: 24px;\n  height: 24px;\n}\n.hw-empty-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--hw-text);\n  margin-bottom: 4px;\n}\n.hw-empty-desc {\n  font-size: 13px;\n  color: var(--hw-text-3);\n  margin-bottom: 20px;\n}\n.hw-empty-btn {\n  padding: 8px 20px;\n  border-radius: 10px;\n  background: var(--hw-primary);\n  color: white;\n  border: none;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.15s;\n}\n.hw-empty-btn:hover {\n  background: var(--hw-primary-hover);\n}\n.hw-tabs {\n  display: flex;\n  border-top: 1px solid var(--hw-border);\n  flex-shrink: 0;\n  background: var(--hw-bg-subtle);\n}\n.hw-tabs-item {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  padding: 8px 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--hw-text-3);\n  transition: color 0.15s;\n}\n.hw-tabs-item svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-tabs-item--active {\n  color: var(--hw-text);\n}\n.hw-tabs-item:hover {\n  color: var(--hw-text-2);\n}\n.hw-tabs-item:active {\n  transform: scale(0.94);\n  transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), color 0.15s;\n}\n.hw-tabs-icon-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.hw-tabs-badge {\n  position: absolute;\n  top: -6px;\n  right: -10px;\n  min-width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 4px;\n  font-variant-numeric: tabular-nums;\n}\n.hw-messages {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 16px 20px;\n  background: var(--hw-bg-subtle);\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  overscroll-behavior: contain;\n  min-width: 0;\n}\n.hw-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  color: var(--hw-text-3);\n  text-align: center;\n}\n.hw-empty-icon {\n  width: 40px;\n  height: 40px;\n  margin-bottom: 12px;\n  opacity: 0.3;\n}\n.hw-date-sep {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 0;\n}\n.hw-date-sep-line {\n  flex: 1;\n  height: 1px;\n  background: var(--hw-border-md);\n}\n.hw-date-sep-text {\n  font-size: 11px;\n  color: var(--hw-text-3);\n  font-weight: 500;\n  white-space: nowrap;\n}\n.hw-msg {\n  display: flex;\n  padding: 4px 0;\n  max-width: 75%;\n  min-width: 0;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n@keyframes hw-msg-appear {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.hw-msg--visitor {\n  align-self: flex-end;\n}\n.hw-msg--team,\n.hw-msg--ai {\n  align-self: flex-start;\n}\n.hw-msg-body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  max-width: 100%;\n}\n.hw-msg-bubble {\n  padding: 10px 14px;\n  border-radius: 18px;\n  font-size: 14px;\n  line-height: 1.45;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  max-width: 100%;\n}\n.hw-msg--visitor .hw-msg-bubble {\n  background: var(--hw-primary);\n  color: white;\n  border-bottom-right-radius: 4px;\n}\n.hw-msg--team .hw-msg-bubble {\n  background: var(--hw-visitor-bubble-bg);\n  color: var(--hw-visitor-bubble-text);\n  border-bottom-left-radius: 4px;\n}\n.hw-msg--ai .hw-msg-bubble {\n  background: var(--hw-visitor-bubble-bg);\n  color: var(--hw-text);\n  border-bottom-left-radius: 4px;\n  white-space: normal;\n}\n.hw-msg-meta {\n  font-size: 11px;\n  color: var(--hw-text-3);\n  margin-top: 3px;\n  padding: 0 4px;\n  opacity: 0;\n  transition: opacity 0.15s;\n  font-variant-numeric: tabular-nums;\n}\n.hw-msg:hover .hw-msg-meta,\n.hw-msg:focus-within .hw-msg-meta {\n  opacity: 1;\n}\n.hw-msg--visitor .hw-msg-meta {\n  text-align: right;\n}\n.hw-msg--team .hw-msg-body,\n.hw-msg--ai .hw-msg-body {\n  align-items: flex-start;\n}\n.hw-msg--visitor .hw-msg-body {\n  align-items: flex-end;\n}\n.hw-msg-sender {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--hw-text-3);\n  margin-bottom: 3px;\n  padding: 0 4px;\n}\n.hw-typing {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  padding: 8px 0;\n  width: fit-content;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-typing-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--hw-text-3);\n  padding: 0 4px;\n}\n.hw-typing-dots {\n  display: flex;\n  gap: 3px;\n  padding: 10px 14px;\n  width: fit-content;\n  background: var(--hw-visitor-bubble-bg);\n  border-radius: var(--hw-radius);\n  border-bottom-left-radius: 4px;\n}\n.hw-typing-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--hw-text-3);\n  animation: hw-typing-bounce 1.4s infinite;\n}\n.hw-typing-dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.hw-typing-dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n@keyframes hw-typing-bounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n  }\n  30% {\n    transform: translateY(-4px);\n  }\n}\n.hw-loading {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hw-loading-dots {\n  display: flex;\n  gap: 4px;\n}\n.hw-loading-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--hw-text-4);\n  animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-loading-dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.hw-loading-dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n@keyframes hw-loading-pulse {\n  0%, 60%, 100% {\n    opacity: 0.3;\n    transform: scale(0.8);\n  }\n  30% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes hw-skeleton-shimmer {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n.hw-skeleton {\n  background:\n    linear-gradient(\n      90deg,\n      var(--hw-bg-subtle) 25%,\n      rgba(0, 0, 0, 0.04) 50%,\n      var(--hw-bg-subtle) 75%);\n  background-size: 200px 100%;\n  animation: hw-skeleton-shimmer 1.5s ease-in-out infinite;\n  border-radius: 6px;\n}\n.hw-skeleton-messages {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  gap: 16px;\n}\n.hw-skeleton-msg {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n}\n.hw-skeleton-msg--right {\n  flex-direction: row-reverse;\n}\n.hw-skeleton-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n.hw-skeleton-bubble {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.hw-skeleton-line {\n  height: 12px;\n  border-radius: 6px;\n}\n.hw-skeleton-convs {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n}\n.hw-skeleton-conv {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  padding: 10px 16px;\n}\n.hw-skeleton-conv-avatar {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n.hw-skeleton-conv-lines {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.hw-skeleton-content {\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  gap: 12px;\n}\n.hw-skeleton-content-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  border-radius: 10px;\n  background: var(--hw-bg);\n}\n.hw-email-card {\n  margin: 0 12px;\n  padding: 14px 16px 10px;\n  border: 1px solid var(--hw-border, rgba(0,0,0,0.08));\n  border-radius: 14px;\n  background: var(--hw-surface, #fff);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);\n  animation: hw-email-slide-in 0.25s ease-out;\n}\n@keyframes hw-email-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.hw-email-card-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  margin-bottom: 12px;\n}\n.hw-email-card-icon {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: var(--hw-brand, #0a0a0a);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n}\n.hw-email-card-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--hw-text, #1a1a1a);\n  line-height: 1.3;\n  margin: 0 0 2px;\n}\n.hw-email-card-subtitle {\n  font-size: 12px;\n  color: var(--hw-text-muted, #888);\n  line-height: 1.4;\n  margin: 0;\n}\n.hw-email-card-input {\n  width: 100%;\n  padding: 9px 12px;\n  border-radius: 10px;\n  border: 1px solid var(--hw-border, rgba(0,0,0,0.1));\n  background: var(--hw-bg, #fafafa);\n  color: var(--hw-text, #1a1a1a);\n  font-size: 13px;\n  outline: none;\n  margin-bottom: 8px;\n  box-sizing: border-box;\n  transition: border-color 0.15s;\n}\n.hw-email-card-input:focus {\n  border-color: var(--hw-brand, #0a0a0a);\n  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);\n}\n.hw-email-card-input--error {\n  border-color: #ef4444;\n}\n.hw-email-card-submit {\n  width: 100%;\n  padding: 9px;\n  border-radius: 10px;\n  border: none;\n  background: var(--hw-brand, #0a0a0a);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: opacity 0.15s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n.hw-email-card-submit:hover:not(:disabled) {\n  opacity: 0.88;\n}\n.hw-email-card-submit:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.hw-email-card--success {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: var(--hw-text-muted, #888);\n  animation: hw-email-slide-in 0.2s ease-out;\n}\n.hw-email-card--success svg {\n  flex-shrink: 0;\n}\n.hw-composer {\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  background: transparent;\n  flex-shrink: 0;\n}\n.hw-composer--compact {\n  padding: 8px 12px;\n}\n.hw-composer-box {\n  display: flex;\n  flex-direction: column;\n  border: 2px solid var(--hw-border-md);\n  border-radius: 16px;\n  overflow: hidden;\n  transition: border-color 0.2s;\n  background: var(--hw-bg);\n}\n.hw-composer-box:focus-within {\n  border-color: var(--hw-focus-border);\n  box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-composer-input {\n  flex: 1;\n  resize: none;\n  border: none;\n  padding: 12px 16px 4px;\n  font-size: 14px;\n  font-family: inherit;\n  line-height: 1.4;\n  outline: none;\n  min-height: 40px;\n  max-height: 120px;\n  background: transparent;\n  color: var(--hw-text);\n}\n.hw-composer-input:focus {\n  outline: none;\n}\n.hw-composer-input:focus-visible {\n  outline: none;\n}\n.hw-composer-input::placeholder {\n  color: var(--hw-text-4);\n}\n.hw-composer-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 10px 10px;\n}\n.hw-composer-toolbar-left {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.hw-composer-send {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition:\n    background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-composer-send:active:not(:disabled) {\n  transform: scale(0.9);\n}\n.hw-composer-send--active {\n  background: var(--hw-primary);\n  color: white;\n}\n.hw-composer-send--inactive {\n  background: var(--hw-border);\n  color: var(--hw-text-4);\n  cursor: default;\n}\n.hw-composer-send svg {\n  width: 14px;\n  height: 14px;\n}\n.hw-composer-charcount {\n  font-size: 11px;\n  color: var(--hw-text-3);\n  font-variant-numeric: tabular-nums;\n  opacity: 1;\n  transform: translateY(0);\n  transition:\n    color 180ms cubic-bezier(0.23, 1, 0.32, 1),\n    opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),\n    transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n@starting-style {\n  .hw-composer-charcount {\n    opacity: 0;\n    transform: translateY(3px);\n  }\n}\n.hw-composer-charcount--over {\n  color: #ef4444;\n  font-weight: 600;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-composer-charcount {\n    transform: none;\n    transition: color 160ms ease, opacity 160ms ease;\n  }\n  @starting-style {\n    .hw-composer-charcount {\n      transform: none;\n    }\n  }\n}\n.hw-composer-previews {\n  display: flex;\n  gap: 6px;\n  padding: 8px 10px 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.hw-composer-previews::-webkit-scrollbar {\n  display: none;\n}\n.hw-composer-preview {\n  position: relative;\n  width: 48px;\n  height: 48px;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  background: var(--hw-border);\n  cursor: pointer;\n}\n.hw-composer-preview--error {\n  outline: 2px solid #ef4444;\n  outline-offset: -2px;\n}\n.hw-composer-preview-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.hw-composer-preview-file {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--hw-bg-subtle);\n}\n.hw-composer-preview-ext {\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--hw-text-3);\n  text-transform: uppercase;\n}\n.hw-composer-preview-loader {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.35);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hw-composer-preview-loader::after {\n  content: "";\n  width: 16px;\n  height: 16px;\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top-color: white;\n  border-radius: 50%;\n  animation: hw-spin 0.6s linear infinite;\n}\n@keyframes hw-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.hw-composer-preview-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: #ef4444;\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hw-composer-preview-remove {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(0, 0, 0, 0.55);\n  color: white;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n.hw-composer-preview-remove svg {\n  width: 10px;\n  height: 10px;\n}\n.hw-composer-preview:hover .hw-composer-preview-remove {\n  opacity: 1;\n}\n.hw-composer-attach {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  opacity: 0.7;\n  transition: opacity 0.15s;\n}\n.hw-composer-attach:hover {\n  opacity: 1;\n}\n.hw-composer-attach svg {\n  width: 16px;\n  height: 16px;\n}\n.hw-msg-images {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-bottom: 4px;\n}\n.hw-msg-image-link {\n  display: block;\n  border-radius: 14px;\n  overflow: hidden;\n  line-height: 0;\n}\n.hw-msg-image {\n  max-width: 140px;\n  max-height: 80px;\n  object-fit: cover;\n  border-radius: 8px;\n  outline: 1px solid rgba(0, 0, 0, 0.08);\n  outline-offset: -1px;\n}\n.hw-msg-files {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 4px;\n}\n.hw-msg-file {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 10px;\n  background: var(--hw-bg-subtle);\n  text-decoration: none;\n  color: var(--hw-text);\n  transition: background 0.15s;\n}\n.hw-msg-file:hover {\n  background: var(--hw-border);\n}\n.hw-msg-file-icon {\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  color: var(--hw-text-3);\n}\n.hw-msg-file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n.hw-msg-file-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.hw-msg-file-name {\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.hw-msg-file-size {\n  font-size: 11px;\n  color: var(--hw-text-3);\n}\n.hw-msg-image-link {\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  background: none;\n  display: block;\n  line-height: 0;\n}\n.hw-hover-preview {\n  position: fixed;\n  z-index: 99998;\n  padding: 6px;\n  border-radius: 14px;\n  background: white;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);\n  cursor: pointer;\n  animation: hw-hover-in 0.15s ease-out;\n}\n@media (prefers-color-scheme: dark) {\n  .hw-hover-preview {\n    background: #1c1c1e;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n}\n@keyframes hw-hover-in {\n  from {\n    opacity: 0;\n    transform: scale(0.96) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n.hw-hover-preview-img {\n  width: 100%;\n  max-height: 200px;\n  object-fit: contain;\n  border-radius: 10px;\n  display: block;\n  outline: 1px solid rgba(0, 0, 0, 0.08);\n  outline-offset: -1px;\n}\n.hw-hover-preview--doc {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n}\n.hw-hover-preview-doc-icon {\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n}\n.hw-hover-preview-doc-icon svg {\n  width: 100%;\n  height: 100%;\n}\n.hw-hover-preview-doc-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.hw-hover-preview-doc-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--hw-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.hw-hover-preview-doc-hint {\n  font-size: 11px;\n  color: var(--hw-text-3);\n}\n.hw-event {\n  display: flex;\n  justify-content: center;\n  padding: 8px 16px;\n}\n.hw-event-text {\n  font-size: 12px;\n  color: var(--hw-text-3);\n  text-align: center;\n}\n.hw-event--card {\n  justify-content: flex-start;\n  align-items: center;\n  gap: 10px;\n  background: var(--hw-bg-subtle);\n  padding: 10px 14px;\n  border-radius: 12px;\n  margin: 4px 16px;\n}\n.hw-event-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: #e0e0e0;\n  color: #555;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.hw-event-avatar-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.hw-event-body {\n  font-size: 13px;\n  line-height: 1.3;\n}\n.hw-event-name {\n  font-weight: 600;\n  color: var(--hw-text);\n}\n.hw-event-action {\n  color: var(--hw-text-2);\n}\n.hw-resolved-banner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 16px;\n  border-top: 1px solid var(--hw-border);\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text-2);\n  font-size: 13px;\n  flex-shrink: 0;\n}\n.hw-new {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--hw-bg-subtle);\n}\n.hw-new-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 24px;\n  text-align: center;\n}\n.hw-new-welcome {\n  flex: 1;\n  padding: 16px 20px;\n  overflow-y: auto;\n}\n.hw-new-heading {\n  font-size: 17px;\n  font-weight: 600;\n  color: var(--hw-text);\n  margin-bottom: 6px;\n}\n.hw-new-desc {\n  font-size: 13px;\n  color: var(--hw-text-2);\n  margin-bottom: 24px;\n}\n.hw-powered {\n  text-align: center;\n  padding: 8px;\n  font-size: 11px;\n  color: var(--hw-text-4);\n  flex-shrink: 0;\n}\n.hw-powered a {\n  color: var(--hw-text-2);\n  text-decoration: none;\n  font-weight: 500;\n}\n.hw-powered a:hover {\n  color: var(--hw-text);\n}\n@media (max-width: 479px) {\n  .hw-widget {\n    bottom: 16px;\n    right: 16px;\n    left: auto;\n  }\n  .hw-window {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: var(--hw-visible-height, 100%);\n    border-radius: 0;\n    animation: hw-mob-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n  .hw-window--closing {\n    animation: hw-mob-down 0.2s ease forwards;\n  }\n  @keyframes hw-mob-up {\n    from {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes hw-mob-down {\n    from {\n      opacity: 1;\n      transform: translateY(0);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n  .hw-hero {\n    padding-top: calc(20px + env(safe-area-inset-top, 0px));\n  }\n  .hw-header {\n    padding-top: env(safe-area-inset-top, 0px);\n  }\n  .hw-tabs {\n    padding-bottom: env(safe-area-inset-bottom, 0px);\n  }\n  .hw-composer {\n    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));\n  }\n  .hw-powered {\n    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));\n  }\n  .hw-header-close,\n  .hw-header-back,\n  .hw-header-action {\n    width: 34px;\n    height: 34px;\n  }\n  .hw-composer-send {\n    width: 40px;\n    height: 40px;\n  }\n  .hw-window ~ .hw-bubble {\n    display: none;\n  }\n  .hw-messages {\n    padding: 12px 14px;\n  }\n  .hw-msg {\n    max-width: 82%;\n  }\n}\n.hw-preview {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  right: 0;\n  width: 300px;\n  max-width: calc(100vw - 40px);\n  background: var(--hw-bg);\n  border: 1px solid var(--hw-border);\n  border-radius: 16px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n  animation: hw-preview-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.15s, box-shadow 0.15s;\n}\n.hw-preview:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n.hw-preview--closing {\n  animation: hw-preview-out 0.2s ease forwards;\n}\n@keyframes hw-preview-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n@keyframes hw-preview-out {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.95);\n  }\n}\n.hw-preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px 0;\n}\n.hw-preview-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background:\n    linear-gradient(\n      135deg,\n      var(--hw-primary),\n      color-mix(in srgb, var(--hw-primary) 50%, black));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.hw-preview-avatar svg {\n  width: 16px;\n  height: 16px;\n}\n.hw-preview-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--hw-text);\n  flex: 1;\n}\n.hw-preview-close {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: background 0.15s, color 0.15s;\n  flex-shrink: 0;\n}\n.hw-preview-close:hover {\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text-2);\n}\n.hw-preview-close:active {\n  transform: scale(0.90);\n  transition:\n    transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n    background 0.15s,\n    color 0.15s;\n}\n.hw-preview-close svg {\n  width: 12px;\n  height: 12px;\n}\n.hw-preview-body {\n  padding: 8px 14px 14px;\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--hw-text-2);\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.hw-content-search {\n  padding: 10px 16px;\n}\n.hw-content-search-box {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--hw-bg);\n  border: 1px solid var(--hw-border-md);\n  border-radius: 10px;\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-content-search-box:focus-within {\n  border-color: var(--hw-focus-border);\n  box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-content-search-input {\n  flex: 1;\n  border: none !important;\n  outline: none !important;\n  box-shadow: none !important;\n  background: none;\n  font-size: 13px;\n  color: var(--hw-text-1);\n  font-family: inherit;\n  line-height: 1;\n  -webkit-appearance: none;\n}\n.hw-content-search-input:focus,\n.hw-content-search-input:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n  border: none !important;\n}\n.hw-content-search-input::placeholder {\n  color: var(--hw-text-3);\n}\n.hw-content-search-icon {\n  width: 15px;\n  height: 15px;\n  color: var(--hw-text-3);\n  flex-shrink: 0;\n}\n.hw-content-list {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.hw-content-entries {\n  flex: 1;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n.hw-content-entry {\n  display: block;\n  width: 100%;\n  padding: 14px 16px;\n  border: none;\n  border-bottom: 1px solid var(--hw-border);\n  background: none;\n  cursor: pointer;\n  text-align: left;\n  transition: background-color 0.15s ease;\n  -webkit-tap-highlight-color: transparent;\n}\n.hw-content-entry:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-content-entry:active {\n  background: var(--hw-border);\n}\n.hw-content-entry:last-child {\n  border-bottom: none;\n}\n.hw-content-entry-main {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.hw-content-entry-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n.hw-content-entry-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--hw-text-1);\n  line-height: 1.3;\n}\n.hw-content-entry-desc {\n  font-size: 13px;\n  color: var(--hw-text-2);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.hw-content-entry-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 2px;\n}\n.hw-content-entry-badge {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--hw-text-3);\n  background: var(--hw-bg-hover);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n.hw-content-entry-date {\n  font-size: 11px;\n  color: var(--hw-text-3);\n}\n.hw-content-entry-chevron {\n  width: 16px;\n  height: 16px;\n  color: var(--hw-text-3);\n  flex-shrink: 0;\n  opacity: 0.5;\n}\n.hw-content-detail {\n  padding: 16px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  height: 100%;\n}\n.hw-content-detail-header {\n  margin-bottom: 16px;\n}\n.hw-content-detail-title {\n  font-size: 17px;\n  font-weight: 700;\n  color: var(--hw-text-1);\n  margin: 0 0 6px;\n  line-height: 1.3;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hw-content-detail-meta {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.hw-content-detail-date {\n  font-size: 12px;\n  color: var(--hw-text-3);\n}\n.hw-content-detail-body {\n  font-size: 14px;\n  line-height: 1.6;\n  color: var(--hw-text-1);\n}\n.hw-markdown h1 {\n  font-size: 17px;\n  font-weight: 700;\n  margin: 20px 0 8px;\n}\n.hw-markdown h2 {\n  font-size: 15px;\n  font-weight: 600;\n  margin: 16px 0 6px;\n}\n.hw-markdown h3 {\n  font-size: 14px;\n  font-weight: 600;\n  margin: 12px 0 4px;\n}\n.hw-markdown p {\n  margin: 0 0 12px;\n}\n.hw-markdown ul {\n  margin: 0 0 12px;\n  padding-left: 20px;\n}\n.hw-markdown li {\n  margin: 4px 0;\n}\n.hw-markdown code {\n  font-family:\n    ui-monospace,\n    "SF Mono",\n    monospace;\n  font-size: 12px;\n  background: var(--hw-bg-hover);\n  padding: 1px 5px;\n  border-radius: 4px;\n}\n.hw-code {\n  margin: 10px 0;\n  border-radius: 10px;\n  overflow: hidden;\n  border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n  background: var(--hw-bg-hover, #f5f5f4);\n  font-family:\n    ui-monospace,\n    "SF Mono",\n    "Menlo",\n    monospace;\n}\n.hw-code-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  font-size: 11px;\n  color: var(--hw-text-2, #6b7280);\n  background: rgba(0, 0, 0, 0.03);\n  border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n}\n.hw-code-lang {\n  text-transform: lowercase;\n  letter-spacing: 0.02em;\n  font-weight: 500;\n}\n.hw-code-copy {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  font-size: 11px;\n  font-family: inherit;\n  color: var(--hw-text-2, #6b7280);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background 120ms ease, color 120ms ease;\n}\n.hw-code-copy:hover {\n  color: var(--hw-text, #111);\n  background: rgba(0, 0, 0, 0.06);\n}\n.hw-code-copy--copied {\n  color: #16a34a;\n}\n.hw-code-copy--failed {\n  color: #dc2626;\n}\n.hw-code pre {\n  margin: 0;\n  padding: 10px 12px;\n  background: transparent;\n  border-radius: 0;\n  overflow-x: auto;\n  max-width: 100%;\n}\n.hw-code pre code {\n  display: block;\n  background: transparent;\n  padding: 0;\n  font-size: 12px;\n  line-height: 1.55;\n  white-space: pre;\n  color: var(--hw-text, #111);\n}\n@media (prefers-color-scheme: dark) {\n  .hw-code {\n    background: rgba(255, 255, 255, 0.04);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n  .hw-code-header {\n    background: rgba(255, 255, 255, 0.03);\n    border-bottom-color: rgba(255, 255, 255, 0.06);\n  }\n  .hw-code-copy:hover {\n    background: rgba(255, 255, 255, 0.08);\n  }\n}\n.hw-markdown pre {\n  margin: 8px 0;\n  padding: 10px 12px;\n  background: var(--hw-bg-hover);\n  border-radius: 8px;\n  overflow-x: auto;\n  max-width: 100%;\n}\n.hw-markdown pre code {\n  display: block;\n  background: transparent;\n  padding: 0;\n  border-radius: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  white-space: pre;\n  word-break: normal;\n  color: inherit;\n}\n.hw-msg-bubble pre {\n  margin: 6px 0;\n  padding: 8px 10px;\n  background: rgba(0, 0, 0, 0.06);\n  border-radius: 6px;\n  overflow-x: auto;\n  max-width: 100%;\n}\n.hw-msg-bubble pre code {\n  background: transparent;\n  padding: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  white-space: pre;\n}\n.hw-msg--team .hw-msg-bubble pre,\n.hw-msg--visitor .hw-msg-bubble pre {\n  background: rgba(255, 255, 255, 0.12);\n}\n.hw-markdown blockquote {\n  margin: 0 0 12px;\n  padding: 8px 12px;\n  border-left: 3px solid var(--hw-border);\n  color: var(--hw-text-2);\n  font-style: italic;\n}\n.hw-markdown a {\n  color: var(--hw-primary);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.hw-markdown img {\n  max-width: 100%;\n  border-radius: 8px;\n  margin: 8px 0;\n  outline: 1px solid rgba(0, 0, 0, 0.08);\n  outline-offset: -1px;\n}\n.hw-markdown hr {\n  border: none;\n  border-top: 1px solid var(--hw-border);\n  margin: 16px 0;\n}\n.hw-content-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n}\n.hw-content-empty-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--hw-text-1);\n  margin-bottom: 4px;\n}\n.hw-content-empty-desc {\n  font-size: 12px;\n  color: var(--hw-text-3);\n}\n.hw-content-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n.hw-content-load-more {\n  display: block;\n  width: 100%;\n  padding: 10px;\n  border: none;\n  background: none;\n  color: var(--hw-primary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  text-align: center;\n}\n.hw-content-load-more:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-content-load-more:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n@media (hover: none) {\n  .hw-composer-preview-remove {\n    opacity: 0.7;\n  }\n  .hw-msg-meta {\n    opacity: 1;\n  }\n}\n.hw-composer--dragging .hw-composer-box {\n  border-color: var(--hw-primary);\n  background: color-mix(in srgb, var(--hw-primary) 4%, transparent);\n}\n.hw-composer-drop-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--hw-bg) 90%, transparent);\n  border: 2px dashed var(--hw-primary);\n  border-radius: 12px;\n  z-index: 10;\n  pointer-events: none;\n  animation: hw-drop-pulse 1.5s ease-in-out infinite;\n}\n.hw-composer-drop-text {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--hw-primary);\n}\n@keyframes hw-drop-pulse {\n  0%, 100% {\n    opacity: 0.8;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n.hw-msg-copy {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin-left: 4px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--hw-text-4);\n  cursor: pointer;\n  vertical-align: middle;\n  transition: color 0.15s, background 0.15s;\n  padding: 0;\n  flex-shrink: 0;\n}\n.hw-msg-copy:hover {\n  background: var(--hw-bg-hover);\n  color: var(--hw-text-2);\n}\n.hw-msg-copy svg {\n  width: 12px;\n  height: 12px;\n}\n.hw-msg-copy--done {\n  color: #22c55e;\n}\n.hw-disconnect {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #fef3c7;\n  color: #92400e;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-disconnect-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #f59e0b;\n  animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-error-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 24px;\n  text-align: center;\n  gap: 12px;\n}\n.hw-error-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: #fef2f2;\n  color: #ef4444;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hw-error-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.hw-error-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--hw-text);\n}\n.hw-error-desc {\n  font-size: 13px;\n  color: var(--hw-text-2);\n}\n.hw-error-btn {\n  padding: 8px 20px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.hw-error-btn:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-send-error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #fef2f2;\n  color: #dc2626;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-send-error-retry {\n  margin-left: auto;\n  padding: 2px 8px;\n  border: 1px solid #fca5a5;\n  border-radius: 4px;\n  background: none;\n  color: #dc2626;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.hw-send-error-retry:hover {\n  background: #fee2e2;\n}\n.hw-resolved {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--hw-border);\n  flex-shrink: 0;\n}\n.hw-resolved-text {\n  font-size: 13px;\n  color: var(--hw-text-3);\n  font-weight: 500;\n}\n.hw-resolved-actions {\n  display: flex;\n  gap: 8px;\n}\n.hw-resolved-reopen {\n  padding: 6px 16px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.hw-resolved-reopen:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-csat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n.hw-csat-label {\n  font-size: 12px;\n  color: var(--hw-text-3);\n}\n.hw-csat-buttons {\n  display: flex;\n  gap: 8px;\n}\n.hw-csat-btn {\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  transition:\n    transform 0.15s,\n    border-color 0.15s,\n    background 0.15s;\n}\n.hw-csat-btn:hover {\n  transform: scale(1.1);\n  border-color: var(--hw-text-3);\n}\n.hw-csat-btn--selected {\n  border-color: var(--hw-primary);\n  background: var(--hw-bg-hover);\n  transform: scale(1.15);\n}\n.hw-csat-thanks {\n  font-size: 12px;\n  color: #22c55e;\n  font-weight: 500;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-load-more-trigger {\n  display: flex;\n  justify-content: center;\n  min-height: 1px;\n}\n.hw-load-more-trigger:has(.hw-load-more-spinner) {\n  padding: 8px 0;\n}\n.hw-load-more-spinner {\n  display: flex;\n  gap: 3px;\n}\n.hw-load-more-spinner > div {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--hw-text-4);\n  animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-load-more-spinner > div:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.hw-load-more-spinner > div:nth-child(3) {\n  animation-delay: 0.4s;\n}\n.hw-drag-handle {\n  display: none;\n}\n@media (max-width: 479px) {\n  .hw-drag-handle {\n    display: flex;\n    justify-content: center;\n    padding: 8px 0 4px;\n    flex-shrink: 0;\n  }\n  .hw-drag-handle-pill {\n    width: 32px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--hw-text-4);\n  }\n}\n.hw-msg-bubble p {\n  margin: 0 0 8px;\n}\n.hw-msg-bubble p:last-child {\n  margin-bottom: 0;\n}\n.hw-msg-bubble strong {\n  font-weight: 600;\n}\n.hw-msg-bubble em {\n  font-style: italic;\n}\n.hw-msg-bubble a {\n  color: var(--hw-primary);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  word-break: break-all;\n}\n.hw-msg-bubble a:hover {\n  opacity: 0.8;\n}\n.hw-msg--visitor .hw-msg-bubble a {\n  color: rgba(255, 255, 255, 0.9);\n}\n.hw-msg--visitor .hw-msg-bubble a:hover {\n  color: white;\n}\n.hw-msg-bubble ul,\n.hw-msg-bubble ol {\n  margin: 4px 0 8px;\n  padding-left: 20px;\n}\n.hw-msg-bubble li {\n  margin: 2px 0;\n}\n.hw-msg-bubble code {\n  padding: 1px 4px;\n  border-radius: 3px;\n  background: rgba(0, 0, 0, 0.06);\n  font-size: 0.9em;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n.hw-msg-bubble pre {\n  margin: 4px 0 8px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  background: rgba(0, 0, 0, 0.06);\n  overflow-x: auto;\n  font-size: 0.85em;\n}\n.hw-msg-bubble pre code {\n  padding: 0;\n  background: none;\n}\n.hw-msg-bubble blockquote {\n  margin: 4px 0 8px;\n  padding: 4px 0 4px 12px;\n  border-left: 3px solid var(--hw-border-md);\n  color: var(--hw-text-2);\n}\n.hw-widget[data-theme=dark] {\n  --hw-bg: #1c1c1e;\n  --hw-bg-subtle: #161618;\n  --hw-bg-hover: #2c2c2e;\n  --hw-border: rgba(255, 255, 255, 0.08);\n  --hw-border-md: rgba(255, 255, 255, 0.14);\n  --hw-text: #f5f5f5;\n  --hw-text-1: #f5f5f5;\n  --hw-text-2: #a1a1aa;\n  --hw-text-3: #71717a;\n  --hw-text-4: #52525b;\n  --hw-visitor-bubble-bg: #2c2c2e;\n  --hw-visitor-bubble-text: #f5f5f5;\n  --hw-focus-border: rgba(255, 255, 255, 0.28);\n  --hw-focus-ring: rgba(255, 255, 255, 0.08);\n}\n@media (prefers-color-scheme: dark) {\n  .hw-widget:not([data-theme=light]) {\n    --hw-bg: #1c1c1e;\n    --hw-bg-subtle: #161618;\n    --hw-bg-hover: #2c2c2e;\n    --hw-border: rgba(255, 255, 255, 0.08);\n    --hw-border-md: rgba(255, 255, 255, 0.14);\n    --hw-text: #f5f5f5;\n    --hw-text-1: #f5f5f5;\n    --hw-text-2: #a1a1aa;\n    --hw-text-3: #71717a;\n    --hw-text-4: #52525b;\n    --hw-visitor-bubble-bg: #2c2c2e;\n    --hw-visitor-bubble-text: #f5f5f5;\n    --hw-focus-border: rgba(255, 255, 255, 0.28);\n    --hw-focus-ring: rgba(255, 255, 255, 0.08);\n  }\n}\n@media (prefers-color-scheme: dark) {\n  .hw-widget:not([data-theme=light]) .hw-header {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n  .hw-header-bot-icon {\n    background: var(--hw-bg-hover);\n  }\n  .hw-header-name,\n  .hw-header-title {\n    color: var(--hw-text);\n  }\n  .hw-header-status {\n    color: var(--hw-text-2);\n  }\n  .hw-header-close,\n  .hw-header-back {\n    color: var(--hw-text-2);\n  }\n  .hw-header-close:hover,\n  .hw-header-back:hover {\n    background: var(--hw-bg-hover);\n    color: var(--hw-text);\n  }\n  .hw-content-entry {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n  .hw-content-entry:hover {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n  }\n  .hw-content-empty,\n  .hw-empty {\n    color: var(--hw-text-3);\n  }\n  .hw-conv-card {\n    border-color: var(--hw-border);\n  }\n  .hw-recent-row {\n    border-color: var(--hw-border);\n  }\n  .hw-composer-drop-overlay {\n    background: rgba(0, 0, 0, 0.6);\n    color: var(--hw-text);\n  }\n  .hw-composer--dragging .hw-composer-box {\n    border-color: var(--hw-focus-border);\n    box-shadow: 0 0 0 3px var(--hw-focus-ring);\n  }\n  .hw-hero {\n    background:\n      linear-gradient(\n        160deg,\n        color-mix(in srgb, var(--hw-primary) 40%, black) 0%,\n        var(--hw-primary) 50%,\n        color-mix(in srgb, var(--hw-primary) 25%, black) 100%);\n  }\n  .hw-sheet {\n    background: var(--hw-bg);\n  }\n  .hw-card {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border);\n  }\n  .hw-card:hover {\n    background: #333;\n  }\n  .hw-window {\n    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n  .hw-bubble:focus-visible {\n    outline-color: var(--hw-text-3);\n  }\n  .hw-msg--visitor .hw-msg-bubble {\n    background: var(--hw-primary);\n    color: white;\n  }\n  .hw-msg-bubble code {\n    background: rgba(255, 255, 255, 0.08);\n  }\n  .hw-msg-bubble pre {\n    background: rgba(255, 255, 255, 0.08);\n  }\n  .hw-composer-box {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n  .hw-composer-input {\n    color: var(--hw-text);\n  }\n  .hw-tabs {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n  .hw-conv-card:hover,\n  .hw-recent-row:hover {\n    background: var(--hw-bg-hover);\n  }\n  .hw-disconnect {\n    background: #422006;\n    color: #fcd34d;\n  }\n  .hw-send-error {\n    background: #450a0a;\n    color: #fca5a5;\n  }\n  .hw-error-icon {\n    background: #450a0a;\n    color: #f87171;\n  }\n  .hw-msg-copy:hover {\n    background: var(--hw-bg-hover);\n    color: var(--hw-text-2);\n  }\n  .hw-resolved {\n    border-color: var(--hw-border);\n  }\n  .hw-resolved-reopen,\n  .hw-csat-btn {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n    color: var(--hw-text);\n  }\n  .hw-hover-preview {\n    background: #1c1c1e;\n    border-color: var(--hw-border);\n  }\n  .hw-content-search-box {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n  }\n  .hw-preview {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n}\n');
+styleInject(':host {\n  all: initial;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget *,\n.hw-widget *::before,\n.hw-widget *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.hw-widget {\n  --hw-primary: #171717;\n  --hw-primary-hover: #2a2a2a;\n  --hw-brand: #171717;\n  --hw-on-brand: #ffffff;\n  --hw-focus-border: #9ca3af;\n  --hw-focus-ring: rgba(0, 0, 0, 0.06);\n  --hw-accent: #6366f1;\n  --hw-bg: #ffffff;\n  --hw-bg-subtle: #fafafa;\n  --hw-bg-hover: #f5f5f5;\n  --hw-border: #f0f0f0;\n  --hw-border-md: #e5e5e5;\n  --hw-text: #111;\n  --hw-text-1: #111;\n  --hw-text-2: #666;\n  --hw-text-3: #999;\n  --hw-text-4: #bbb;\n  --hw-radius: 16px;\n  --hw-visitor-bubble-bg: #f0f0f0;\n  --hw-visitor-bubble-text: #1a1a1a;\n  --hw-font:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n}\n.hw-agent-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.hw-agent-icon {\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n.hw-widget :focus-visible {\n  outline: 2px solid var(--hw-primary);\n  outline-offset: 2px;\n}\n.hw-widget :focus:not(:focus-visible) {\n  outline: none;\n}\n.hw-widget {\n  position: fixed;\n  bottom: 20px;\n  right: var(--hw-position-right, 20px);\n  left: var(--hw-position-left, auto);\n  z-index: 999999;\n  font-family: var(--hw-font);\n}\n.hw-bubble {\n  width: 48px;\n  height: 48px;\n  border-radius: 14px;\n  background: var(--hw-primary);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;\n  position: relative;\n  overflow: visible;\n}\n.hw-bubble--rounded {\n  border-radius: 14px;\n}\n.hw-bubble--square {\n  border-radius: 8px;\n}\n.hw-bubble--pill {\n  border-radius: 24px;\n}\n.hw-bubble--launcher-bubble,\n.hw-bubble--launcher-help {\n  width: auto;\n  padding: 0 16px 0 12px;\n  gap: 8px;\n  border-radius: 24px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--square,\n.hw-bubble--launcher-help.hw-bubble--square {\n  border-radius: 8px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--rounded,\n.hw-bubble--launcher-help.hw-bubble--rounded {\n  border-radius: 14px;\n}\n.hw-bubble-label {\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  line-height: 1;\n  position: static;\n  opacity: 1;\n  transform: none;\n}\n.hw-bubble--launcher-bubble .hw-bubble-icon,\n.hw-bubble--launcher-help .hw-bubble-icon {\n  position: static;\n}\n.hw-bubble:hover {\n  transform: scale(1.05);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n}\n.hw-bubble:active {\n  transform: scale(0.95);\n}\n.hw-bubble--open {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n}\n.hw-bubble:focus-visible {\n  outline: 2px solid white;\n  outline-offset: 2px;\n}\n.hw-bubble-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;\n}\n.hw-bubble-icon svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-bubble-icon--hidden {\n  transform: scale(0.3) rotate(90deg);\n  opacity: 0;\n}\n.hw-bubble-icon--bot {\n}\n.hw-bubble--avatar .hw-bubble-icon--bot {\n  width: 100%;\n  height: 100%;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n}\n.hw-bubble-icon--close svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-bubble-badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  min-width: 20px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 11px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 5px;\n  border: 2px solid white;\n  animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes hw-badge-pop {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n.hw-bubble-badge::after {\n  content: "";\n  position: absolute;\n  inset: -2px;\n  border-radius: inherit;\n  background: var(--hw-primary);\n  opacity: 0;\n  animation: hw-badge-pulse 2s ease-out infinite;\n}\n@keyframes hw-badge-pulse {\n  0% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1.8);\n  }\n}\n.hw-window {\n  position: absolute;\n  bottom: 72px;\n  right: var(--hw-window-right, 0);\n  left: var(--hw-window-left, auto);\n  width: 440px;\n  height: 640px;\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text);\n  border-radius: var(--hw-radius);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: hw-window-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hw-window--reading {\n  width: min(720px, calc(100vw - 40px));\n  height: min(800px, calc(100vh - 100px));\n}\n@keyframes hw-window-open {\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.hw-window--closing {\n  animation: hw-window-close 0.2s ease forwards;\n}\n@keyframes hw-window-close {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.98);\n  }\n}\n.hw-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-window,\n  .hw-window--closing,\n  .hw-content,\n  .hw-msg,\n  .hw-bubble-icon,\n  .hw-bubble-badge,\n  .hw-bubble-badge::after,\n  .hw-typing-dot,\n  .hw-loading-dot {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n.hw-hero {\n  flex-shrink: 0;\n  background:\n    linear-gradient(\n      160deg,\n      color-mix(in srgb, var(--hw-primary) 60%, black) 0%,\n      var(--hw-primary) 50%,\n      color-mix(in srgb, var(--hw-primary) 40%, black) 100%);\n  color: white;\n  padding: 20px 22px 40px;\n}\n.hw-hero-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n.hw-hero-close {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, color 0.15s;\n}\n.hw-hero-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  color: white;\n}\n.hw-hero-close:active {\n  transform: scale(0.92);\n  transition:\n    transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n    background 0.15s,\n    color 0.15s;\n}\n.hw-hero-close svg {\n  width: 20px;\n  height: 20px;\n}\n.hw-hero-bot-icon {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n  overflow: hidden;\n}\n.hw-hero-bot-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.hw-hero-greeting {\n  font-size: 26px;\n  font-weight: 700;\n  line-height: 1.15;\n  margin-bottom: 6px;\n}\n.hw-hero-greeting-name {\n  font-weight: 300;\n}\n.hw-hero-greeting-question {\n  font-weight: 700;\n}\n.hw-hero-subtitle {\n  font-size: 15px;\n  color: rgba(255, 255, 255, 0.5);\n  line-height: 1.35;\n}\n.hw-sheet {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  background: #ffffff;\n  border-radius: 20px 20px 0 0;\n  margin-top: -24px;\n  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);\n  position: relative;\n  z-index: 1;\n}\n.hw-sheet-inner {\n  padding: 20px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.hw-header {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  background: var(--hw-primary);\n  color: white;\n  flex-shrink: 0;\n  gap: 10px;\n}\n.hw-header--sub {\n  justify-content: space-between;\n  background: transparent;\n  color: var(--hw-text);\n  border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-back {\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: color 0.15s, background 0.15s;\n  flex-shrink: 0;\n}\n.hw-header-back svg {\n  width: 18px;\n  height: 18px;\n}\n.hw-header-back:hover {\n  color: var(--hw-text);\n  background: var(--hw-bg-subtle);\n}\n.hw-header-identity {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n}\n.hw-header-bot-icon {\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n  color: var(--hw-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  overflow: hidden;\n}\n.hw-header-bot-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.hw-header-bot-icon--team {\n  background: var(--hw-brand, #0a0a0a);\n  color: var(--hw-on-brand, #fff);\n}\n.hw-header-agent-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.hw-header-agent-initials {\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n}\n.hw-header-info {\n  flex: 1;\n  min-width: 0;\n}\n.hw-header-name {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n.hw-header-status {\n  font-size: 12px;\n  color: var(--hw-text-3);\n  line-height: 1.3;\n}\n.hw-header-close {\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n  flex-shrink: 0;\n}\n.hw-header-close svg {\n  width: 20px;\n  height: 20px;\n}\n.hw-header-close:hover {\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text);\n}\n.hw-header-close:active {\n  transform: scale(0.92);\n}\n.hw-header--centered {\n  justify-content: space-between;\n  background: transparent;\n  color: var(--hw-text);\n  border-bottom: 1px solid var(--hw-border);\n}\n.hw-header--centered .hw-header-title {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: calc(100% - 88px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n}\n.hw-header-spacer {\n  width: 28px;\n  flex-shrink: 0;\n}\n.hw-header--messages {\n  justify-content: space-between;\n  background: transparent;\n  color: var(--hw-text);\n  border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-title {\n  font-size: 16px;\n  font-weight: 600;\n}\n.hw-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hw-header-action {\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  border: none;\n  background: transparent;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-header-action svg {\n  width: 16px;\n  height: 16px;\n}\n.hw-header-action:hover {\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text);\n}\n.hw-header-action:active {\n  transform: scale(0.94);\n}\n.hw-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  padding: 14px 16px;\n  border-radius: 14px;\n  background: var(--hw-bg);\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n  cursor: pointer;\n  transition: box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n  text-align: left;\n  color: var(--hw-text);\n  font-family: inherit;\n}\n.hw-card:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);\n  transform: translateY(-1px);\n}\n.hw-card:active {\n  transform: translateY(0) scale(0.99);\n  transition-duration: 120ms;\n}\n.hw-card-body {\n  flex: 1;\n  min-width: 0;\n}\n.hw-card-title {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.3;\n  color: var(--hw-text);\n}\n.hw-card-meta {\n  font-size: 12px;\n  color: var(--hw-text-3);\n  line-height: 1.3;\n  margin-top: 1px;\n}\n.hw-card-arrow {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--hw-primary);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.hw-card-arrow svg {\n  width: 14px;\n  height: 14px;\n}\n.hw-msgs-tab {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.hw-recent-card {\n  border-radius: 14px;\n  background: var(--hw-bg);\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n  overflow: hidden;\n}\n.hw-recent-header {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--hw-text-2);\n  padding: 12px 14px 0;\n}\n.hw-recent-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 10px 14px;\n  border: none;\n  border-bottom: 1px solid var(--hw-border);\n  background: none;\n  cursor: pointer;\n  text-align: left;\n  font-family: inherit;\n  color: var(--hw-text);\n  transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n  position: relative;\n}\n.hw-recent-row:hover {\n  background: rgba(0, 0, 0, 0.03);\n}\n.hw-recent-row:active {\n  transform: scale(0.995);\n}\n.hw-recent-row--last {\n  border-bottom: none;\n}\n.hw-recent-row .hw-conv-card-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n}\n.hw-recent-row .hw-conv-card-avatar svg {\n  width: 18px;\n  height: 18px;\n}\n.hw-recent-row .hw-conv-card-name {\n  font-size: 13px;\n}\n.hw-recent-row .hw-conv-card-preview {\n  font-size: 12px;\n}\n.hw-recent-row--unread .hw-conv-card-name {\n  color: var(--hw-text);\n}\n.hw-recent-row--unread .hw-conv-card-time {\n  color: var(--hw-accent);\n  font-weight: 500;\n}\n.hw-recent-row-badge {\n  min-width: 18px;\n  height: 18px;\n  border-radius: 9px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 5px;\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n.hw-recent-see-all {\n  display: block;\n  width: 100%;\n  padding: 10px 14px;\n  text-align: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--hw-text);\n  background: none;\n  border: none;\n  border-top: 1px solid var(--hw-border);\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.1s;\n}\n.hw-recent-see-all:hover {\n  background: rgba(0, 0, 0, 0.02);\n}\n.hw-conv-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 100%;\n  padding: 14px 16px;\n  border-radius: 14px;\n  background: var(--hw-bg);\n  border: 1px solid rgba(0, 0, 0, 0.06);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n  cursor: pointer;\n  transition: box-shadow 0.15s, transform 0.1s;\n  text-align: left;\n  font-family: inherit;\n  color: var(--hw-text);\n}\n.hw-conv-card:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.hw-conv-card:active {\n  transform: scale(0.99);\n}\n.hw-conv-card-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.hw-conv-card-avatar {\n  width: 36px;\n  height: 36px;\n  border-radius: 10px;\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text-3);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.hw-conv-card-avatar svg {\n  width: 20px;\n  height: 20px;\n}\n.hw-conv-card-avatar-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.hw-conv-card-avatar--team {\n  background: var(--hw-brand, #0a0a0a);\n  color: var(--hw-on-brand, #fff);\n}\n.hw-conv-card-avatar-initials {\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: 0.02em;\n}\n.hw-conv-card-content {\n  flex: 1;\n  min-width: 0;\n}\n.hw-conv-card-top {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n.hw-conv-card-name {\n  flex: 1;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--hw-text);\n}\n.hw-conv-card-time {\n  font-size: 11px;\n  color: var(--hw-text-3);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n.hw-conv-card-preview {\n  font-size: 13px;\n  color: var(--hw-text-2);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 1.4;\n  margin-top: 1px;\n}\n.hw-conv-card--unread .hw-conv-card-name {\n  color: var(--hw-text);\n}\n.hw-conv-card--unread .hw-conv-card-time {\n  color: var(--hw-accent);\n  font-weight: 500;\n}\n.hw-conv-card-badge {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  min-width: 18px;\n  height: 18px;\n  border-radius: 9px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 5px;\n  font-variant-numeric: tabular-nums;\n}\n.hw-empty-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  text-align: center;\n}\n.hw-empty-icon-wrap {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: var(--hw-bg-subtle);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 16px;\n  color: var(--hw-text-3);\n}\n.hw-empty-icon-wrap svg {\n  width: 24px;\n  height: 24px;\n}\n.hw-empty-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--hw-text);\n  margin-bottom: 4px;\n}\n.hw-empty-desc {\n  font-size: 13px;\n  color: var(--hw-text-3);\n  margin-bottom: 20px;\n}\n.hw-empty-btn {\n  padding: 8px 20px;\n  border-radius: 10px;\n  background: var(--hw-primary);\n  color: white;\n  border: none;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.15s;\n}\n.hw-empty-btn:hover {\n  background: var(--hw-primary-hover);\n}\n.hw-tabs {\n  display: flex;\n  border-top: 1px solid var(--hw-border);\n  flex-shrink: 0;\n  background: var(--hw-bg-subtle);\n}\n.hw-tabs-item {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  padding: 8px 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--hw-text-3);\n  transition: color 0.15s;\n}\n.hw-tabs-item svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-tabs-item--active {\n  color: var(--hw-text);\n}\n.hw-tabs-item:hover {\n  color: var(--hw-text-2);\n}\n.hw-tabs-item:active {\n  transform: scale(0.94);\n  transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), color 0.15s;\n}\n.hw-tabs-icon-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.hw-tabs-badge {\n  position: absolute;\n  top: -6px;\n  right: -10px;\n  min-width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 4px;\n  font-variant-numeric: tabular-nums;\n}\n.hw-messages {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 16px 20px;\n  background: var(--hw-bg-subtle);\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  overscroll-behavior: contain;\n  min-width: 0;\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n  scrollbar-width: thin;\n}\n.hw-messages::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n.hw-messages::-webkit-scrollbar-track {\n  background: transparent;\n}\n.hw-messages::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.16);\n  background-clip: content-box;\n  border: 3px solid transparent;\n  border-radius: 999px;\n}\n.hw-messages::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.28);\n  background-clip: content-box;\n}\n.hw-widget[data-theme=dark] .hw-messages {\n  scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n}\n.hw-widget[data-theme=dark] .hw-messages::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.2);\n  background-clip: content-box;\n}\n.hw-widget[data-theme=dark] .hw-messages::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.32);\n  background-clip: content-box;\n}\n.hw-empty {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px;\n  color: var(--hw-text-3);\n  text-align: center;\n}\n.hw-empty-icon {\n  width: 40px;\n  height: 40px;\n  margin-bottom: 12px;\n  opacity: 0.3;\n}\n.hw-empty-text {\n  font-size: 13px;\n}\n.hw-date-sep {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 0;\n}\n.hw-date-sep-line {\n  flex: 1;\n  height: 1px;\n  background: var(--hw-border-md);\n}\n.hw-date-sep-text {\n  font-size: 11px;\n  color: var(--hw-text-3);\n  font-weight: 500;\n  white-space: nowrap;\n}\n.hw-msg {\n  display: flex;\n  padding: 4px 0;\n  max-width: 75%;\n  min-width: 0;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n@keyframes hw-msg-appear {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.hw-msg--visitor {\n  align-self: flex-end;\n}\n.hw-msg--team,\n.hw-msg--ai {\n  align-self: flex-start;\n}\n.hw-msg--ai {\n  width: 100%;\n  max-width: 100%;\n}\n.hw-msg-body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  max-width: 100%;\n}\n.hw-msg-bubble {\n  padding: 10px 14px;\n  border-radius: 18px;\n  font-size: 14px;\n  line-height: 1.45;\n  white-space: pre-wrap;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  max-width: 100%;\n}\n.hw-msg--visitor .hw-msg-bubble {\n  background: var(--hw-primary);\n  color: white;\n  border-bottom-right-radius: 4px;\n}\n.hw-msg--team .hw-msg-bubble {\n  background: var(--hw-visitor-bubble-bg);\n  color: var(--hw-visitor-bubble-text);\n  border-bottom-left-radius: 4px;\n}\n.hw-msg--ai .hw-msg-bubble {\n  background: var(--hw-visitor-bubble-bg);\n  color: var(--hw-text);\n  border-bottom-left-radius: 4px;\n  white-space: normal;\n  max-width: min(100%, 640px);\n}\n.hw-msg--ai .hw-msg-body {\n  width: 100%;\n}\n.hw-msg--ai .hw-msg-bubble:has(.hw-code),\n.hw-msg--ai .hw-msg-bubble:has(pre) {\n  width: 100%;\n}\n.hw-msg--ai .hw-code {\n  width: 100%;\n  box-sizing: border-box;\n}\n.hw-msg-meta {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  color: var(--hw-text-3);\n  margin-top: 3px;\n  padding: 0 4px;\n  opacity: 0;\n  font-variant-numeric: tabular-nums;\n  min-height: 0;\n  height: 0;\n  overflow: hidden;\n  transition: opacity 140ms ease, height 140ms ease;\n}\n.hw-msg:hover .hw-msg-meta,\n.hw-msg:focus-within .hw-msg-meta {\n  opacity: 1;\n  height: 20px;\n  min-height: 20px;\n}\n.hw-msg-sender-label {\n  white-space: nowrap;\n}\n.hw-msg--visitor .hw-msg-meta {\n  text-align: right;\n}\n.hw-msg--team .hw-msg-body,\n.hw-msg--ai .hw-msg-body {\n  align-items: flex-start;\n}\n.hw-msg--visitor .hw-msg-body {\n  align-items: flex-end;\n}\n.hw-msg-sender {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--hw-text-3);\n  margin-bottom: 3px;\n  padding: 0 4px;\n}\n.hw-typing {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  padding: 8px 0;\n  width: fit-content;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-typing-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--hw-text-3);\n  padding: 0 4px;\n}\n.hw-typing-dots {\n  display: flex;\n  gap: 3px;\n  padding: 10px 14px;\n  width: fit-content;\n  background: var(--hw-visitor-bubble-bg);\n  border-radius: var(--hw-radius);\n  border-bottom-left-radius: 4px;\n}\n.hw-typing-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--hw-text-3);\n  animation: hw-typing-bounce 1.4s infinite;\n}\n.hw-typing-dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.hw-typing-dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n@keyframes hw-typing-bounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n  }\n  30% {\n    transform: translateY(-4px);\n  }\n}\n.hw-loading {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hw-loading-dots {\n  display: flex;\n  gap: 4px;\n}\n.hw-loading-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--hw-text-4);\n  animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-loading-dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.hw-loading-dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n@keyframes hw-loading-pulse {\n  0%, 60%, 100% {\n    opacity: 0.3;\n    transform: scale(0.8);\n  }\n  30% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes hw-skeleton-shimmer {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n.hw-skeleton {\n  background:\n    linear-gradient(\n      90deg,\n      var(--hw-bg-subtle) 25%,\n      rgba(0, 0, 0, 0.04) 50%,\n      var(--hw-bg-subtle) 75%);\n  background-size: 200px 100%;\n  animation: hw-skeleton-shimmer 1.5s ease-in-out infinite;\n  border-radius: 6px;\n}\n.hw-skeleton-messages {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  gap: 16px;\n}\n.hw-skeleton-msg {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n}\n.hw-skeleton-msg--right {\n  flex-direction: row-reverse;\n}\n.hw-skeleton-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n.hw-skeleton-bubble {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.hw-skeleton-line {\n  height: 12px;\n  border-radius: 6px;\n}\n.hw-skeleton-convs {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n}\n.hw-skeleton-conv {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  padding: 10px 16px;\n}\n.hw-skeleton-conv-avatar {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n.hw-skeleton-conv-lines {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.hw-skeleton-content {\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  gap: 12px;\n}\n.hw-skeleton-content-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  border-radius: 10px;\n  background: var(--hw-bg);\n}\n.hw-skeleton-title {\n  height: 22px;\n  width: 65%;\n  border-radius: 6px;\n}\n.hw-skeleton-badge {\n  width: 42px;\n  height: 18px;\n  border-radius: 9px;\n}\n.hw-skeleton-date {\n  width: 60px;\n  height: 12px;\n  border-radius: 6px;\n}\n.hw-skeleton-h2 {\n  height: 16px;\n  border-radius: 6px;\n}\n.hw-skeleton-bullet {\n  padding-left: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.hw-skeleton-bullet-line {\n  height: 14px;\n  border-radius: 7px;\n}\n.hw-email-card {\n  margin: 0 12px;\n  padding: 14px 16px 10px;\n  border: 1px solid var(--hw-border, rgba(0,0,0,0.08));\n  border-radius: 14px;\n  background: var(--hw-bg, #fff);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);\n  animation: hw-email-slide-in 0.25s ease-out;\n}\n@keyframes hw-email-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.hw-email-card-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  margin-bottom: 12px;\n}\n.hw-email-card-icon {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: var(--hw-bg-hover, #f5f5f5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--hw-text, #1a1a1a);\n}\n.hw-email-card-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--hw-text, #1a1a1a);\n  line-height: 1.3;\n  margin: 0 0 2px;\n}\n.hw-email-card-subtitle {\n  font-size: 12px;\n  color: var(--hw-text-2, #888);\n  line-height: 1.4;\n  margin: 0;\n}\n.hw-email-card-input {\n  width: 100%;\n  padding: 9px 12px;\n  border-radius: 10px;\n  border: 1px solid var(--hw-border, rgba(0,0,0,0.1));\n  background: var(--hw-bg-subtle, #fafafa);\n  color: var(--hw-text, #1a1a1a);\n  font-size: 13px;\n  outline: none;\n  margin-bottom: 8px;\n  box-sizing: border-box;\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-email-card-input::placeholder {\n  color: var(--hw-text-3, #999);\n}\n.hw-email-card-input:focus {\n  border-color: var(--hw-focus-border, rgba(0,0,0,0.2));\n  box-shadow: 0 0 0 2px var(--hw-focus-ring, rgba(0,0,0,0.06));\n}\n.hw-email-card-input--error {\n  border-color: #ef4444;\n}\n.hw-email-card-submit {\n  width: 100%;\n  padding: 9px;\n  border-radius: 10px;\n  border: none;\n  background: var(--hw-brand, #0a0a0a);\n  color: var(--hw-on-brand, #fff);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: opacity 0.15s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n}\n.hw-email-card-submit:hover:not(:disabled) {\n  opacity: 0.88;\n}\n.hw-email-card-submit:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.hw-email-card--success {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px 16px;\n  font-size: 13px;\n  color: var(--hw-text-2, #888);\n  animation: hw-email-slide-in 0.2s ease-out;\n}\n.hw-email-card--success svg {\n  flex-shrink: 0;\n}\n.hw-composer {\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  background: transparent;\n  flex-shrink: 0;\n}\n.hw-composer--compact {\n  padding: 8px 12px;\n}\n.hw-composer-box {\n  display: flex;\n  flex-direction: column;\n  border: 2px solid var(--hw-border-md);\n  border-radius: 16px;\n  overflow: hidden;\n  transition: border-color 0.2s;\n  background: var(--hw-bg);\n}\n.hw-composer-box:focus-within {\n  border-color: var(--hw-focus-border);\n  box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-composer-input {\n  flex: 1;\n  resize: none;\n  border: none;\n  padding: 12px 16px 4px;\n  font-size: 14px;\n  font-family: inherit;\n  line-height: 1.4;\n  outline: none;\n  min-height: 40px;\n  max-height: 120px;\n  background: transparent;\n  color: var(--hw-text);\n}\n.hw-composer-input:focus {\n  outline: none;\n}\n.hw-composer-input:focus-visible {\n  outline: none;\n}\n.hw-composer-input::placeholder {\n  color: var(--hw-text-4);\n}\n.hw-composer-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 10px 10px;\n}\n.hw-composer-toolbar-left {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.hw-composer-send {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition:\n    background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n    transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-composer-send:active:not(:disabled) {\n  transform: scale(0.9);\n}\n.hw-composer-send--active {\n  background: var(--hw-primary);\n  color: white;\n}\n.hw-composer-send--inactive {\n  background: var(--hw-border);\n  color: var(--hw-text-4);\n  cursor: default;\n}\n.hw-composer-send svg {\n  width: 14px;\n  height: 14px;\n}\n.hw-composer-charcount {\n  font-size: 11px;\n  color: var(--hw-text-3);\n  font-variant-numeric: tabular-nums;\n  opacity: 1;\n  transform: translateY(0);\n  transition:\n    color 180ms cubic-bezier(0.23, 1, 0.32, 1),\n    opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),\n    transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n@starting-style {\n  .hw-composer-charcount {\n    opacity: 0;\n    transform: translateY(3px);\n  }\n}\n.hw-composer-charcount--over {\n  color: #ef4444;\n  font-weight: 600;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-composer-charcount {\n    transform: none;\n    transition: color 160ms ease, opacity 160ms ease;\n  }\n  @starting-style {\n    .hw-composer-charcount {\n      transform: none;\n    }\n  }\n}\n.hw-composer-previews {\n  display: flex;\n  gap: 6px;\n  padding: 8px 10px 0;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.hw-composer-previews::-webkit-scrollbar {\n  display: none;\n}\n.hw-composer-preview {\n  position: relative;\n  width: 48px;\n  height: 48px;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  background: var(--hw-border);\n  cursor: pointer;\n}\n.hw-composer-preview--error {\n  outline: 2px solid #ef4444;\n  outline-offset: -2px;\n}\n.hw-composer-preview-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.hw-composer-preview-file {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--hw-bg-subtle);\n}\n.hw-composer-preview-ext {\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--hw-text-3);\n  text-transform: uppercase;\n}\n.hw-composer-preview-loader {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.35);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hw-composer-preview-loader::after {\n  content: "";\n  width: 16px;\n  height: 16px;\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top-color: white;\n  border-radius: 50%;\n  animation: hw-spin 0.6s linear infinite;\n}\n@keyframes hw-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.hw-composer-preview-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: #ef4444;\n  color: white;\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hw-composer-preview-remove {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(0, 0, 0, 0.55);\n  color: white;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n.hw-composer-preview-remove svg {\n  width: 10px;\n  height: 10px;\n}\n.hw-composer-preview:hover .hw-composer-preview-remove {\n  opacity: 1;\n}\n.hw-composer-attach {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  opacity: 0.7;\n  transition: opacity 0.15s;\n}\n.hw-composer-attach:hover {\n  opacity: 1;\n}\n.hw-composer-attach svg {\n  width: 16px;\n  height: 16px;\n}\n.hw-msg-images {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-bottom: 4px;\n}\n.hw-msg-image-link {\n  display: block;\n  border-radius: 14px;\n  overflow: hidden;\n  line-height: 0;\n}\n.hw-msg-image {\n  max-width: 140px;\n  max-height: 80px;\n  object-fit: cover;\n  border-radius: 8px;\n  outline: 1px solid rgba(0, 0, 0, 0.08);\n  outline-offset: -1px;\n}\n.hw-msg-files {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 4px;\n}\n.hw-msg-file {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 10px;\n  background: var(--hw-bg-subtle);\n  text-decoration: none;\n  color: var(--hw-text);\n  transition: background 0.15s;\n}\n.hw-msg-file:hover {\n  background: var(--hw-border);\n}\n.hw-msg-file-icon {\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  color: var(--hw-text-3);\n}\n.hw-msg-file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n.hw-msg-file-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.hw-msg-file-name {\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.hw-msg-file-size {\n  font-size: 11px;\n  color: var(--hw-text-3);\n}\n.hw-msg-image-link {\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  background: none;\n  display: block;\n  line-height: 0;\n}\n.hw-hover-preview {\n  position: fixed;\n  z-index: 99998;\n  padding: 6px;\n  border-radius: 14px;\n  background: white;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);\n  cursor: pointer;\n  animation: hw-hover-in 0.15s ease-out;\n}\n@media (prefers-color-scheme: dark) {\n  .hw-hover-preview {\n    background: #1c1c1e;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n}\n@keyframes hw-hover-in {\n  from {\n    opacity: 0;\n    transform: scale(0.96) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n.hw-hover-preview-img {\n  width: 100%;\n  max-height: 200px;\n  object-fit: contain;\n  border-radius: 10px;\n  display: block;\n  outline: 1px solid rgba(0, 0, 0, 0.08);\n  outline-offset: -1px;\n}\n.hw-hover-preview--doc {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n}\n.hw-hover-preview-doc-icon {\n  width: 28px;\n  height: 28px;\n  flex-shrink: 0;\n}\n.hw-hover-preview-doc-icon svg {\n  width: 100%;\n  height: 100%;\n}\n.hw-hover-preview-doc-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.hw-hover-preview-doc-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--hw-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.hw-hover-preview-doc-hint {\n  font-size: 11px;\n  color: var(--hw-text-3);\n}\n.hw-event {\n  display: flex;\n  justify-content: center;\n  padding: 8px 16px;\n}\n.hw-event-text {\n  font-size: 12px;\n  color: var(--hw-text-3);\n  text-align: center;\n}\n.hw-event--card {\n  justify-content: flex-start;\n  align-items: center;\n  gap: 10px;\n  background: var(--hw-bg-subtle);\n  padding: 10px 14px;\n  border-radius: 12px;\n  margin: 4px 16px;\n}\n.hw-event-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--hw-bg-hover, #e0e0e0);\n  color: var(--hw-text-2, #555);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 600;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.hw-event-avatar-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.hw-event-body {\n  font-size: 13px;\n  line-height: 1.3;\n}\n.hw-event-name {\n  font-weight: 600;\n  color: var(--hw-text);\n}\n.hw-event-action {\n  color: var(--hw-text-2);\n}\n.hw-resolved-banner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 16px;\n  border-top: 1px solid var(--hw-border);\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text-2);\n  font-size: 13px;\n  flex-shrink: 0;\n}\n.hw-new {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--hw-bg-subtle);\n}\n.hw-new-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 24px;\n  text-align: center;\n}\n.hw-new-welcome {\n  flex: 1;\n  padding: 16px 20px;\n  overflow-y: auto;\n}\n.hw-new-heading {\n  font-size: 17px;\n  font-weight: 600;\n  color: var(--hw-text);\n  margin-bottom: 6px;\n}\n.hw-new-desc {\n  font-size: 13px;\n  color: var(--hw-text-2);\n  margin-bottom: 24px;\n}\n.hw-powered {\n  text-align: center;\n  padding: 8px;\n  font-size: 11px;\n  color: var(--hw-text-4);\n  flex-shrink: 0;\n}\n.hw-powered a {\n  color: var(--hw-text-2);\n  text-decoration: none;\n  font-weight: 500;\n}\n.hw-powered a:hover {\n  color: var(--hw-text);\n}\n@media (max-width: 479px) {\n  .hw-widget {\n    bottom: 16px;\n    right: 16px;\n    left: auto;\n  }\n  .hw-window {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: var(--hw-visible-height, 100%);\n    border-radius: 0;\n    animation: hw-mob-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n  .hw-window--closing {\n    animation: hw-mob-down 0.2s ease forwards;\n  }\n  @keyframes hw-mob-up {\n    from {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes hw-mob-down {\n    from {\n      opacity: 1;\n      transform: translateY(0);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n  .hw-hero {\n    padding-top: calc(20px + env(safe-area-inset-top, 0px));\n  }\n  .hw-header {\n    padding-top: env(safe-area-inset-top, 0px);\n  }\n  .hw-tabs {\n    padding-bottom: env(safe-area-inset-bottom, 0px);\n  }\n  .hw-composer {\n    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));\n  }\n  .hw-powered {\n    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));\n  }\n  .hw-header-close,\n  .hw-header-back,\n  .hw-header-action {\n    width: 34px;\n    height: 34px;\n  }\n  .hw-composer-send {\n    width: 40px;\n    height: 40px;\n  }\n  .hw-window ~ .hw-bubble {\n    display: none;\n  }\n  .hw-messages {\n    padding: 12px 14px;\n  }\n  .hw-msg {\n    max-width: 82%;\n  }\n  .hw-msg--ai {\n    max-width: 100%;\n  }\n}\n.hw-preview {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  right: 0;\n  width: 300px;\n  max-width: calc(100vw - 40px);\n  background: var(--hw-bg);\n  border: 1px solid var(--hw-border);\n  border-radius: 16px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n  animation: hw-preview-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.15s, box-shadow 0.15s;\n}\n.hw-preview:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n.hw-preview--closing {\n  animation: hw-preview-out 0.2s ease forwards;\n}\n@keyframes hw-preview-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n@keyframes hw-preview-out {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.95);\n  }\n}\n.hw-preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px 0;\n}\n.hw-preview-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background:\n    linear-gradient(\n      135deg,\n      var(--hw-primary),\n      color-mix(in srgb, var(--hw-primary) 50%, black));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.hw-preview-avatar svg {\n  width: 16px;\n  height: 16px;\n}\n.hw-preview-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--hw-text);\n  flex: 1;\n}\n.hw-preview-close {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--hw-text-3);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: background 0.15s, color 0.15s;\n  flex-shrink: 0;\n}\n.hw-preview-close:hover {\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text-2);\n}\n.hw-preview-close:active {\n  transform: scale(0.90);\n  transition:\n    transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n    background 0.15s,\n    color 0.15s;\n}\n.hw-preview-close svg {\n  width: 12px;\n  height: 12px;\n}\n.hw-preview-body {\n  padding: 8px 14px 14px;\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--hw-text-2);\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.hw-content-search {\n  padding: 10px 16px;\n}\n.hw-content-search-box {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: var(--hw-bg);\n  border: 1px solid var(--hw-border-md);\n  border-radius: 10px;\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-content-search-box:focus-within {\n  border-color: var(--hw-focus-border);\n  box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-content-search-input {\n  flex: 1;\n  border: none !important;\n  outline: none !important;\n  box-shadow: none !important;\n  background: none;\n  font-size: 13px;\n  color: var(--hw-text-1);\n  font-family: inherit;\n  line-height: 1;\n  -webkit-appearance: none;\n}\n.hw-content-search-input:focus,\n.hw-content-search-input:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n  border: none !important;\n}\n.hw-content-search-input::placeholder {\n  color: var(--hw-text-3);\n}\n.hw-content-search-icon {\n  width: 15px;\n  height: 15px;\n  color: var(--hw-text-3);\n  flex-shrink: 0;\n}\n.hw-content-list {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.hw-content-entries {\n  flex: 1;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n.hw-content-entry {\n  display: block;\n  width: 100%;\n  padding: 14px 16px;\n  border: none;\n  border-bottom: 1px solid var(--hw-border);\n  background: none;\n  cursor: pointer;\n  text-align: left;\n  transition: background-color 0.15s ease;\n  -webkit-tap-highlight-color: transparent;\n}\n.hw-content-entry:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-content-entry:active {\n  background: var(--hw-border);\n}\n.hw-content-entry:last-child {\n  border-bottom: none;\n}\n.hw-content-entry-main {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.hw-content-entry-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n.hw-content-entry-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--hw-text-1);\n  line-height: 1.3;\n}\n.hw-content-entry-desc {\n  font-size: 13px;\n  color: var(--hw-text-2);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.hw-content-entry-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 2px;\n}\n.hw-content-entry-badge {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--hw-text-3);\n  background: var(--hw-bg-hover);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n.hw-content-entry-date {\n  font-size: 11px;\n  color: var(--hw-text-3);\n}\n.hw-content-entry-chevron {\n  width: 16px;\n  height: 16px;\n  color: var(--hw-text-3);\n  flex-shrink: 0;\n  opacity: 0.5;\n}\n.hw-content-detail {\n  padding: 16px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  height: 100%;\n}\n.hw-content-detail-header {\n  margin-bottom: 16px;\n}\n.hw-content-detail-title {\n  font-size: 17px;\n  font-weight: 700;\n  color: var(--hw-text-1);\n  margin: 0 0 6px;\n  line-height: 1.3;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hw-content-detail-meta {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.hw-content-detail-date {\n  font-size: 12px;\n  color: var(--hw-text-3);\n}\n.hw-content-detail-body {\n  font-size: 14px;\n  line-height: 1.6;\n  color: var(--hw-text-1);\n}\n.hw-markdown h1 {\n  font-size: 17px;\n  font-weight: 700;\n  margin: 0;\n}\n.hw-markdown h2 {\n  font-size: 15px;\n  font-weight: 600;\n  margin: 0;\n}\n.hw-markdown h3 {\n  font-size: 14px;\n  font-weight: 600;\n  margin: 0;\n}\n.hw-markdown p {\n  margin: 0;\n}\n.hw-markdown p:empty,\n.hw-markdown div:empty,\n.hw-markdown p:has(> br:only-child),\n.hw-markdown div:has(> br:only-child) {\n  display: none;\n}\n.hw-markdown > * + * {\n  margin-top: 12px;\n}\n.hw-markdown > * + h1,\n.hw-markdown > * + h2 {\n  margin-top: 20px;\n}\n.hw-markdown > * + h3 {\n  margin-top: 16px;\n}\n.hw-markdown > h1 + *,\n.hw-markdown > h2 + *,\n.hw-markdown > h3 + * {\n  margin-top: 8px;\n}\n.hw-markdown > *:first-child {\n  margin-top: 0;\n}\n.hw-markdown > *:last-child {\n  margin-bottom: 0;\n}\n.hw-markdown > br {\n  display: none;\n}\n.hw-markdown ul {\n  margin: 0;\n  padding-left: 20px;\n}\n.hw-markdown li {\n  margin: 4px 0;\n}\n.hw-markdown code {\n  font-family:\n    ui-monospace,\n    "SF Mono",\n    monospace;\n  font-size: 12px;\n  background: var(--hw-bg-hover);\n  padding: 1px 5px;\n  border-radius: 4px;\n}\n.hw-code {\n  margin: 10px 0;\n  border-radius: 10px;\n  overflow: hidden;\n  border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n  background: var(--hw-bg-hover, #f5f5f4);\n  font-family:\n    ui-monospace,\n    "SF Mono",\n    "Menlo",\n    monospace;\n}\n.hw-code-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 7px 8px 7px 12px;\n  font-size: 11px;\n  color: var(--hw-text-2, #6b7280);\n  background: rgba(0, 0, 0, 0.03);\n  border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n}\n.hw-code-lang {\n  text-transform: lowercase;\n  letter-spacing: 0.02em;\n  font-weight: 500;\n}\n.hw-code-actions {\n  display: inline-flex;\n  align-items: center;\n  gap: 1px;\n}\n.hw-code-action {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  font-family: inherit;\n  color: var(--hw-text-2, #6b7280);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  opacity: 0.62;\n  transition:\n    background 120ms ease,\n    color 120ms ease,\n    opacity 120ms ease,\n    scale 120ms ease;\n}\n.hw-code-action:hover {\n  color: var(--hw-text, #111);\n  background: rgba(0, 0, 0, 0.06);\n  opacity: 1;\n}\n.hw-code-action:active {\n  scale: 0.96;\n}\n.hw-code-action svg {\n  width: 13px;\n  height: 13px;\n}\n.hw-code-copy-icon,\n.hw-code-check-icon {\n  position: absolute;\n  inset: 50% auto auto 50%;\n  transition:\n    opacity 180ms cubic-bezier(0.2, 0, 0, 1),\n    scale 180ms cubic-bezier(0.2, 0, 0, 1),\n    filter 180ms cubic-bezier(0.2, 0, 0, 1);\n  translate: -50% -50%;\n}\n.hw-code-check-icon {\n  filter: blur(4px);\n  opacity: 0;\n  scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-copy-icon {\n  filter: blur(4px);\n  opacity: 0;\n  scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-check-icon {\n  filter: blur(0);\n  opacity: 1;\n  scale: 1;\n}\n.hw-code-copy-label {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n.hw-code-copy--copied {\n  color: #16a34a;\n}\n.hw-code-copy--failed {\n  color: #dc2626;\n}\n.hw-code pre {\n  margin: 0;\n  padding: 10px 12px;\n  background: transparent;\n  border-radius: 0;\n  overflow-x: auto;\n  max-width: 100%;\n  max-height: 320px;\n  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;\n  scrollbar-width: thin;\n}\n.hw-code pre::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n.hw-code pre::-webkit-scrollbar-track {\n  background: transparent;\n}\n.hw-code pre::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.18);\n  background-clip: content-box;\n  border: 3px solid transparent;\n  border-radius: 999px;\n}\n.hw-code pre::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.28);\n  background-clip: content-box;\n}\n.hw-code pre code {\n  display: block;\n  background: transparent;\n  padding: 0;\n  font-size: 12px;\n  line-height: 1.55;\n  white-space: pre;\n  color: var(--hw-text, #111);\n}\n@media (prefers-color-scheme: dark) {\n  .hw-code {\n    background: rgba(255, 255, 255, 0.04);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n  .hw-code-header {\n    background: rgba(255, 255, 255, 0.03);\n    border-bottom-color: rgba(255, 255, 255, 0.06);\n  }\n  .hw-code-action:hover,\n  .hw-code-action:focus-visible {\n    background: rgba(255, 255, 255, 0.08);\n  }\n  .hw-code pre {\n    scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n  }\n  .hw-code pre::-webkit-scrollbar-thumb {\n    background: rgba(255, 255, 255, 0.22);\n    background-clip: content-box;\n  }\n  .hw-code pre::-webkit-scrollbar-thumb:hover {\n    background: rgba(255, 255, 255, 0.32);\n    background-clip: content-box;\n  }\n}\n.hw-markdown pre {\n  margin: 8px 0;\n  padding: 10px 12px;\n  background: var(--hw-bg-hover);\n  border-radius: 8px;\n  overflow-x: auto;\n  max-width: 100%;\n}\n.hw-markdown pre code {\n  display: block;\n  background: transparent;\n  padding: 0;\n  border-radius: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  white-space: pre;\n  word-break: normal;\n  color: inherit;\n}\n.hw-msg-bubble pre {\n  margin: 6px 0;\n  padding: 8px 10px;\n  background: rgba(0, 0, 0, 0.06);\n  border-radius: 6px;\n  overflow-x: auto;\n  max-width: 100%;\n}\n.hw-msg-bubble pre code {\n  background: transparent;\n  padding: 0;\n  font-size: 12px;\n  line-height: 1.5;\n  white-space: pre;\n}\n.hw-msg-bubble .hw-code pre {\n  margin: 0;\n  padding: 10px 12px;\n  background: transparent;\n  border-radius: 0;\n}\n.hw-msg-bubble .hw-code pre code {\n  background: transparent;\n  padding: 0;\n  font-size: 12px;\n  line-height: 1.55;\n}\n.hw-msg--team .hw-msg-bubble pre,\n.hw-msg--visitor .hw-msg-bubble pre {\n  background: rgba(255, 255, 255, 0.12);\n}\n.hw-markdown blockquote {\n  margin: 0 0 12px;\n  padding: 8px 12px;\n  border-left: 3px solid var(--hw-border);\n  color: var(--hw-text-2);\n  font-style: italic;\n}\n.hw-markdown a {\n  color: var(--hw-primary);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.hw-markdown img {\n  max-width: 100%;\n  border-radius: 8px;\n  margin: 8px 0;\n  outline: 1px solid rgba(0, 0, 0, 0.08);\n  outline-offset: -1px;\n}\n.hw-markdown hr {\n  border: none;\n  border-top: 1px solid var(--hw-border);\n  margin: 16px 0;\n}\n.hw-content-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n}\n.hw-content-empty-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--hw-text-1);\n  margin-bottom: 4px;\n}\n.hw-content-empty-desc {\n  font-size: 12px;\n  color: var(--hw-text-3);\n}\n.hw-content-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n.hw-content-load-more {\n  display: block;\n  width: 100%;\n  padding: 10px;\n  border: none;\n  background: none;\n  color: var(--hw-primary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  text-align: center;\n}\n.hw-content-load-more:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-content-load-more:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n@media (hover: none) {\n  .hw-composer-preview-remove {\n    opacity: 0.7;\n  }\n  .hw-msg-meta {\n    opacity: 1;\n    height: auto;\n    min-height: 20px;\n    overflow: visible;\n  }\n  .hw-msg-copy {\n    opacity: 1;\n  }\n}\n.hw-composer--dragging .hw-composer-box {\n  border-color: var(--hw-primary);\n  background: color-mix(in srgb, var(--hw-primary) 4%, transparent);\n}\n.hw-composer-drop-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--hw-bg) 90%, transparent);\n  border: 2px dashed var(--hw-primary);\n  border-radius: 12px;\n  z-index: 10;\n  pointer-events: none;\n  animation: hw-drop-pulse 1.5s ease-in-out infinite;\n}\n.hw-composer-drop-text {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--hw-primary);\n}\n@keyframes hw-drop-pulse {\n  0%, 100% {\n    opacity: 0.8;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n.hw-msg-copy {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin-left: 4px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--hw-text-4);\n  cursor: pointer;\n  vertical-align: middle;\n  opacity: 0;\n  transition:\n    color 0.15s,\n    background 0.15s,\n    opacity 0.15s;\n  padding: 0;\n  flex-shrink: 0;\n}\n.hw-msg:hover .hw-msg-copy,\n.hw-msg:focus-within .hw-msg-copy {\n  opacity: 1;\n}\n.hw-msg-copy:hover {\n  background: var(--hw-bg-hover);\n  color: var(--hw-text-2);\n}\n.hw-msg-copy svg {\n  width: 12px;\n  height: 12px;\n}\n.hw-msg-copy--done {\n  color: #22c55e;\n}\n.hw-disconnect {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: #fef3c7;\n  color: #92400e;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-disconnect-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #f59e0b;\n  animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-error-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 24px;\n  text-align: center;\n  gap: 12px;\n}\n.hw-error-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: #fef2f2;\n  color: #ef4444;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.hw-error-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.hw-error-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--hw-text);\n}\n.hw-error-desc {\n  font-size: 13px;\n  color: var(--hw-text-2);\n}\n.hw-error-btn {\n  padding: 8px 20px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.hw-error-btn:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-send-error {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #fef2f2;\n  color: #dc2626;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-send-error-retry {\n  margin-left: auto;\n  padding: 2px 8px;\n  border: 1px solid #fca5a5;\n  border-radius: 4px;\n  background: none;\n  color: #dc2626;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.hw-send-error-retry:hover {\n  background: #fee2e2;\n}\n.hw-resolved {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--hw-border);\n  flex-shrink: 0;\n}\n.hw-resolved-text {\n  font-size: 13px;\n  color: var(--hw-text-3);\n  font-weight: 500;\n}\n.hw-resolved-actions {\n  display: flex;\n  gap: 8px;\n}\n.hw-resolved-reopen {\n  padding: 6px 16px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.hw-resolved-reopen:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-csat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n.hw-csat-label {\n  font-size: 12px;\n  color: var(--hw-text-3);\n}\n.hw-csat-buttons {\n  display: flex;\n  gap: 8px;\n}\n.hw-csat-btn {\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  transition:\n    transform 0.15s,\n    border-color 0.15s,\n    background 0.15s;\n}\n.hw-csat-btn:hover {\n  transform: scale(1.1);\n  border-color: var(--hw-text-3);\n}\n.hw-csat-btn--selected {\n  border-color: var(--hw-primary);\n  background: var(--hw-bg-hover);\n  transform: scale(1.15);\n}\n.hw-csat-thanks {\n  font-size: 12px;\n  color: #22c55e;\n  font-weight: 500;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-load-more-trigger {\n  display: flex;\n  justify-content: center;\n  min-height: 1px;\n}\n.hw-load-more-trigger:has(.hw-load-more-spinner) {\n  padding: 8px 0;\n}\n.hw-load-more-spinner {\n  display: flex;\n  gap: 3px;\n}\n.hw-load-more-spinner > div {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--hw-text-4);\n  animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-load-more-spinner > div:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.hw-load-more-spinner > div:nth-child(3) {\n  animation-delay: 0.4s;\n}\n.hw-drag-handle {\n  display: none;\n}\n@media (max-width: 479px) {\n  .hw-drag-handle {\n    display: flex;\n    justify-content: center;\n    padding: 8px 0 4px;\n    flex-shrink: 0;\n  }\n  .hw-drag-handle-pill {\n    width: 32px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--hw-text-4);\n  }\n}\n.hw-msg-bubble p {\n  margin: 0 0 8px;\n}\n.hw-msg-bubble p:last-child {\n  margin-bottom: 0;\n}\n.hw-msg-bubble strong {\n  font-weight: 600;\n}\n.hw-msg-bubble em {\n  font-style: italic;\n}\n.hw-msg-bubble a {\n  color: var(--hw-primary);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  word-break: break-all;\n}\n.hw-msg-bubble a:hover {\n  opacity: 0.8;\n}\n.hw-msg--visitor .hw-msg-bubble a {\n  color: rgba(255, 255, 255, 0.9);\n}\n.hw-msg--visitor .hw-msg-bubble a:hover {\n  color: white;\n}\n.hw-msg-bubble ul,\n.hw-msg-bubble ol {\n  margin: 4px 0 8px;\n  padding-left: 20px;\n}\n.hw-msg-bubble li {\n  margin: 2px 0;\n}\n.hw-msg-bubble code {\n  padding: 1px 4px;\n  border-radius: 3px;\n  background: rgba(0, 0, 0, 0.06);\n  font-size: 0.9em;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    monospace;\n}\n.hw-msg-bubble pre {\n  margin: 4px 0 8px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  background: rgba(0, 0, 0, 0.06);\n  overflow-x: auto;\n  font-size: 0.85em;\n}\n.hw-msg-bubble pre code {\n  padding: 0;\n  background: none;\n}\n.hw-msg-bubble blockquote {\n  margin: 4px 0 8px;\n  padding: 4px 0 4px 12px;\n  border-left: 3px solid var(--hw-border-md);\n  color: var(--hw-text-2);\n}\n.hw-widget[data-theme=dark] {\n  --hw-bg: #1c1c1e;\n  --hw-bg-subtle: #161618;\n  --hw-bg-hover: #2c2c2e;\n  --hw-border: rgba(255, 255, 255, 0.08);\n  --hw-border-md: rgba(255, 255, 255, 0.14);\n  --hw-text: #f5f5f5;\n  --hw-text-1: #f5f5f5;\n  --hw-text-2: #a1a1aa;\n  --hw-text-3: #71717a;\n  --hw-text-4: #52525b;\n  --hw-visitor-bubble-bg: #2c2c2e;\n  --hw-visitor-bubble-text: #f5f5f5;\n  --hw-focus-border: rgba(255, 255, 255, 0.28);\n  --hw-focus-ring: rgba(255, 255, 255, 0.08);\n  --hw-brand: #f5f5f5;\n  --hw-on-brand: #1c1c1e;\n}\n@media (prefers-color-scheme: dark) {\n  .hw-widget:not([data-theme=light]) .hw-messages {\n    scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n  }\n  .hw-widget:not([data-theme=light]) .hw-messages::-webkit-scrollbar-thumb {\n    background: rgba(255, 255, 255, 0.2);\n    background-clip: content-box;\n  }\n  .hw-widget:not([data-theme=light]) .hw-messages::-webkit-scrollbar-thumb:hover {\n    background: rgba(255, 255, 255, 0.32);\n    background-clip: content-box;\n  }\n  .hw-widget:not([data-theme=light]) {\n    --hw-bg: #1c1c1e;\n    --hw-bg-subtle: #161618;\n    --hw-bg-hover: #2c2c2e;\n    --hw-border: rgba(255, 255, 255, 0.08);\n    --hw-border-md: rgba(255, 255, 255, 0.14);\n    --hw-text: #f5f5f5;\n    --hw-text-1: #f5f5f5;\n    --hw-text-2: #a1a1aa;\n    --hw-text-3: #71717a;\n    --hw-text-4: #52525b;\n    --hw-visitor-bubble-bg: #2c2c2e;\n    --hw-visitor-bubble-text: #f5f5f5;\n    --hw-focus-border: rgba(255, 255, 255, 0.28);\n    --hw-focus-ring: rgba(255, 255, 255, 0.08);\n    --hw-brand: #f5f5f5;\n    --hw-on-brand: #1c1c1e;\n  }\n}\n@media (prefers-color-scheme: dark) {\n  .hw-widget:not([data-theme=light]) .hw-header {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n  .hw-header-bot-icon {\n    background: var(--hw-bg-hover);\n  }\n  .hw-header-name,\n  .hw-header-title {\n    color: var(--hw-text);\n  }\n  .hw-header-status {\n    color: var(--hw-text-2);\n  }\n  .hw-header-close,\n  .hw-header-back {\n    color: var(--hw-text-2);\n  }\n  .hw-header-close:hover,\n  .hw-header-back:hover {\n    background: var(--hw-bg-hover);\n    color: var(--hw-text);\n  }\n  .hw-content-entry {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n  .hw-content-entry:hover {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n  }\n  .hw-content-empty,\n  .hw-empty {\n    color: var(--hw-text-3);\n  }\n  .hw-conv-card {\n    border-color: var(--hw-border);\n  }\n  .hw-recent-row {\n    border-color: var(--hw-border);\n  }\n  .hw-composer-drop-overlay {\n    background: rgba(0, 0, 0, 0.6);\n    color: var(--hw-text);\n  }\n  .hw-composer--dragging .hw-composer-box {\n    border-color: var(--hw-focus-border);\n    box-shadow: 0 0 0 3px var(--hw-focus-ring);\n  }\n  .hw-hero {\n    background:\n      linear-gradient(\n        160deg,\n        color-mix(in srgb, var(--hw-primary) 40%, black) 0%,\n        var(--hw-primary) 50%,\n        color-mix(in srgb, var(--hw-primary) 25%, black) 100%);\n  }\n  .hw-sheet {\n    background: var(--hw-bg);\n  }\n  .hw-card {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border);\n  }\n  .hw-card:hover {\n    background: #333;\n  }\n  .hw-window {\n    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n  .hw-bubble:focus-visible {\n    outline-color: var(--hw-text-3);\n  }\n  .hw-msg--visitor .hw-msg-bubble {\n    background: var(--hw-primary);\n    color: white;\n  }\n  .hw-msg-bubble code {\n    background: rgba(255, 255, 255, 0.08);\n  }\n  .hw-msg-bubble pre {\n    background: rgba(255, 255, 255, 0.08);\n  }\n  .hw-composer-box {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n  .hw-composer-input {\n    color: var(--hw-text);\n  }\n  .hw-tabs {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n  .hw-conv-card:hover,\n  .hw-recent-row:hover {\n    background: var(--hw-bg-hover);\n  }\n  .hw-disconnect {\n    background: #422006;\n    color: #fcd34d;\n  }\n  .hw-send-error {\n    background: #450a0a;\n    color: #fca5a5;\n  }\n  .hw-error-icon {\n    background: #450a0a;\n    color: #f87171;\n  }\n  .hw-msg-copy:hover {\n    background: var(--hw-bg-hover);\n    color: var(--hw-text-2);\n  }\n  .hw-resolved {\n    border-color: var(--hw-border);\n  }\n  .hw-resolved-reopen,\n  .hw-csat-btn {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n    color: var(--hw-text);\n  }\n  .hw-hover-preview {\n    background: #1c1c1e;\n    border-color: var(--hw-border);\n  }\n  .hw-content-search-box {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n  }\n  .hw-preview {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n}\n');
 
 // src/helpway-widget.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function HelpwayWidget({
   apiKey,
   apiUrl,
@@ -4139,7 +4427,7 @@ function HelpwayWidget({
   src
 }) {
   const resolvedApiUrl = apiUrl ?? (src ? src.replace(/\/widget\.js$/, "") : void 0);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     SupportProvider,
     {
       apiKey,
@@ -4147,16 +4435,16 @@ function HelpwayWidget({
       locale,
       initialConversationId,
       onReady,
-      children: /* @__PURE__ */ jsx13(DefaultWidget, {})
+      children: /* @__PURE__ */ jsx14(DefaultWidget, {})
     }
   );
 }
 
 // src/hooks/use-realtime.ts
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 function useRealtime(handler) {
   const { ws } = useWidgetContext();
-  useEffect11(() => {
+  useEffect12(() => {
     return ws.onEvent(handler);
   }, [ws, handler]);
 }
@@ -4164,6 +4452,7 @@ export {
   Composer,
   DefaultWidget,
   HelpwayWidget,
+  MarkdownContent,
   MessageBubble,
   MessageList,
   SupportProvider,
@@ -4172,6 +4461,8 @@ export {
   formatTime,
   getInitials,
   getOrCreateVisitorId,
+  linkifyText,
+  renderMarkdown,
   useComposer,
   useConversations,
   useIdentify,