@helpway/react 0.9.0 → 0.10.0

package/dist/index.js

@@ -17,17 +17,17 @@ function generateId() {
 }
 function getOrCreateVisitorId(publicKey) {
   try {
-    const storageKey = keyFor(publicKey);
-    const existing = localStorage.getItem(storageKey);
+    const storageKey2 = keyFor(publicKey);
+    const existing = localStorage.getItem(storageKey2);
     if (existing) return existing;
     const legacy = localStorage.getItem(LEGACY_KEY);
     if (legacy) {
-      localStorage.setItem(storageKey, legacy);
+      localStorage.setItem(storageKey2, legacy);
       localStorage.removeItem(LEGACY_KEY);
       return legacy;
     }
     const id = generateId();
-    localStorage.setItem(storageKey, id);
+    localStorage.setItem(storageKey2, id);
     return id;
   } catch {
     return generateId();
@@ -223,8 +223,29 @@ var WebSocketManager = class {
 // ../widget-core/src/store.ts
 import { createStore } from "zustand/vanilla";
 var CONTENT_CACHE_TTL = 5 * 60 * 1e3;
+var PREVIEW_STORAGE_KEY = "helpway:incoming-preview";
+function loadPersistedPreview() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(PREVIEW_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function persistPreview(preview) {
+  if (typeof window === "undefined") return;
+  try {
+    if (preview) {
+      window.localStorage.setItem(PREVIEW_STORAGE_KEY, JSON.stringify(preview));
+    } else {
+      window.localStorage.removeItem(PREVIEW_STORAGE_KEY);
+    }
+  } catch {
+  }
+}
 function createWidgetStore() {
-  return createStore((set, get) => ({
+  const store = createStore((set, get) => ({
     // Initial state
     isReady: false,
     isConnecting: true,
@@ -240,7 +261,9 @@ function createWidgetStore() {
     isOpen: false,
     isDismissed: false,
     view: "home",
-    incomingPreview: null,
+    incomingPreview: loadPersistedPreview(),
+    announcementPreviews: [],
+    unseenAnnouncementCount: 0,
     newConversationPrefill: null,
     contentCache: /* @__PURE__ */ new Map(),
     // ── Lifecycle ────────────────────────────────────
@@ -407,7 +430,8 @@ function createWidgetStore() {
     setOpen(open) {
       set((s) => ({
         isOpen: open,
-        incomingPreview: open ? null : s.incomingPreview
+        incomingPreview: open ? null : s.incomingPreview,
+        announcementPreviews: open ? [] : s.announcementPreviews
       }));
     },
     setDismissed(dismissed) {
@@ -422,6 +446,27 @@ function createWidgetStore() {
     dismissPreview() {
       set({ incomingPreview: null });
     },
+    // ── Announcements ────────────────────────────────
+    setAnnouncementPreview(preview) {
+      set((s) => ({
+        announcementPreviews: [
+          ...s.announcementPreviews.filter((p) => p.tabId !== preview.tabId),
+          preview
+        ]
+      }));
+    },
+    dismissAnnouncementPreview(slug) {
+      if (slug) {
+        set((s) => ({
+          announcementPreviews: s.announcementPreviews.filter((p) => p.slug !== slug)
+        }));
+      } else {
+        set({ announcementPreviews: [] });
+      }
+    },
+    setUnseenAnnouncementCount(count) {
+      set({ unseenAnnouncementCount: count });
+    },
     // ── Content Cache ────────────────────────────────
     setContentCache(key, data) {
       get().contentCache.set(key, { data, ts: Date.now() });
@@ -530,6 +575,16 @@ function createWidgetStore() {
       }
     }
   }));
+  if (typeof window !== "undefined") {
+    let last = store.getState().incomingPreview;
+    store.subscribe((s) => {
+      if (s.incomingPreview !== last) {
+        last = s.incomingPreview;
+        persistPreview(s.incomingPreview);
+      }
+    });
+  }
+  return store;
 }
 
 // ../widget-core/src/api.ts
@@ -707,6 +762,8 @@ var en = {
   "widget.reply_time": "We typically reply in a few minutes",
   "widget.recent_conversations": "Recent conversations",
   "widget.see_all": "See all conversations",
+  "widget.whats_new": "What's New",
+  "widget.view_all": "View all",
   // Messages tab
   "widget.no_messages": "No messages yet",
   "widget.no_messages_desc": "Start a conversation to get help",
@@ -1353,10 +1410,171 @@ function inferApiUrl() {
 }
 
 // src/themed/default-widget.tsx
-import { useCallback as useCallback11, useEffect as useEffect11, useRef as useRef13, useState as useState12 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect13, useRef as useRef14, useState as useState13 } from "react";
+
+// src/hooks/use-announcements.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+function storageKey(websiteId, visitorId) {
+  return `helpway:${websiteId}:${visitorId}:announcements:seen`;
+}
+function hasSeenKey(websiteId, visitorId) {
+  try {
+    return localStorage.getItem(storageKey(websiteId, visitorId)) !== null;
+  } catch {
+    return false;
+  }
+}
+function getSeenSlugs(websiteId, visitorId) {
+  try {
+    const raw = localStorage.getItem(storageKey(websiteId, visitorId));
+    if (!raw) return /* @__PURE__ */ new Set();
+    return new Set(JSON.parse(raw));
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function addSeenSlug(websiteId, visitorId, slug) {
+  try {
+    const seen = getSeenSlugs(websiteId, visitorId);
+    seen.add(slug);
+    localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...seen]));
+  } catch {
+  }
+}
+function addSeenSlugs(websiteId, visitorId, slugs) {
+  try {
+    const seen = getSeenSlugs(websiteId, visitorId);
+    for (const s of slugs) seen.add(s);
+    localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...seen]));
+  } catch {
+  }
+}
+function filterUnseen(entries, seen) {
+  return entries.filter((e) => !seen.has(e.slug));
+}
+var EMPTY_TABS = [];
+function useAnnouncements() {
+  const { client, store } = useWidgetContext();
+  const isReady = useWidgetStore((s) => s.isReady);
+  const websiteId = useWidgetStore((s) => s.website?.id) ?? null;
+  const visitorId = useWidgetStore((s) => s.visitor?.id) ?? null;
+  const isAnonymous = useWidgetStore((s) => !s.visitor?.contact);
+  const contentTabs = useWidgetStore((s) => s.agentConfig?.contentTabs) ?? EMPTY_TABS;
+  const announcementTabs = useMemo(
+    () => contentTabs.filter((t2) => t2.isAnnouncements),
+    [contentTabs]
+  );
+  const checkedRef = useRef2(false);
+  useEffect2(() => {
+    if (!isReady || !websiteId || !visitorId || announcementTabs.length === 0) return;
+    if (checkedRef.current) return;
+    checkedRef.current = true;
+    const isFirstVisit = !hasSeenKey(websiteId, visitorId);
+    let pending = announcementTabs.length;
+    let totalUnseen = 0;
+    const allSlugs = [];
+    function onTabDone(entries, tab) {
+      allSlugs.push(...entries.map((e) => e.slug));
+      if (!(isFirstVisit && !isAnonymous) && entries.length > 0) {
+        const seen = getSeenSlugs(websiteId, visitorId);
+        const unseen = filterUnseen(entries, seen);
+        totalUnseen += unseen.length;
+        const newest = unseen[0];
+        if (newest && !store.getState().isOpen) {
+          const badgeField = tab.display?.badgeField;
+          store.getState().setAnnouncementPreview({
+            title: newest.title,
+            body: newest.body,
+            slug: newest.slug,
+            tabId: tab.id,
+            badge: badgeField ? newest.customFields[badgeField] ?? null : null
+          });
+        }
+      }
+      pending--;
+      if (pending === 0) {
+        if (isFirstVisit && !isAnonymous) {
+          if (allSlugs.length > 0) {
+            addSeenSlugs(websiteId, visitorId, allSlugs);
+          }
+          store.getState().setUnseenAnnouncementCount(0);
+        } else {
+          store.getState().setUnseenAnnouncementCount(totalUnseen);
+        }
+      }
+    }
+    for (const tab of announcementTabs) {
+      const cacheKey = `announcements:${tab.id}:${getLocale()}`;
+      const cached = store.getState().contentCache.get(cacheKey);
+      if (cached && Date.now() - cached.ts < CONTENT_CACHE_TTL) {
+        onTabDone(cached.data, tab);
+      } else {
+        client.widget.getContent.query({ tabId: tab.id, page: 1, limit: 5, language: getLocale() }).then((result) => {
+          const entries = result.items ?? [];
+          store.getState().setContentCache(cacheKey, entries);
+          onTabDone(entries, tab);
+        }).catch(() => {
+          onTabDone([], tab);
+        });
+      }
+    }
+  }, [isReady, websiteId, visitorId, isAnonymous, announcementTabs, client, store]);
+  const markEntrySeen = useCallback2(
+    (slug) => {
+      if (!websiteId || !visitorId || announcementTabs.length === 0) return;
+      addSeenSlug(websiteId, visitorId, slug);
+      const seen = getSeenSlugs(websiteId, visitorId);
+      let total = 0;
+      for (const tab of announcementTabs) {
+        const cacheKey = `announcements:${tab.id}:${getLocale()}`;
+        const cached = store.getState().contentCache.get(cacheKey);
+        if (cached) {
+          total += filterUnseen(cached.data, seen).length;
+        }
+      }
+      store.getState().setUnseenAnnouncementCount(total);
+      store.getState().dismissAnnouncementPreview(slug);
+    },
+    [websiteId, visitorId, announcementTabs, store]
+  );
+  const markAllSeen = useCallback2(() => {
+    if (!websiteId || !visitorId || announcementTabs.length === 0) return;
+    for (const tab of announcementTabs) {
+      const cacheKey = `announcements:${tab.id}:${getLocale()}`;
+      const cached = store.getState().contentCache.get(cacheKey);
+      if (cached) {
+        const entries = cached.data;
+        addSeenSlugs(websiteId, visitorId, entries.map((e) => e.slug));
+      }
+    }
+    store.getState().setUnseenAnnouncementCount(0);
+    store.getState().dismissAnnouncementPreview();
+  }, [websiteId, visitorId, announcementTabs, store]);
+  const getUnseenEntries = useCallback2(() => {
+    if (announcementTabs.length === 0 || !websiteId || !visitorId) return [];
+    const seen = getSeenSlugs(websiteId, visitorId);
+    const result = [];
+    for (const tab of announcementTabs) {
+      const cacheKey = `announcements:${tab.id}:${getLocale()}`;
+      const cached = store.getState().contentCache.get(cacheKey);
+      if (cached) {
+        for (const entry of filterUnseen(cached.data, seen)) {
+          result.push({ ...entry, tabId: tab.id });
+        }
+      }
+    }
+    return result;
+  }, [announcementTabs, websiteId, visitorId, store]);
+  return {
+    announcementTabs,
+    markEntrySeen,
+    markAllSeen,
+    getUnseenEntries
+  };
+}
 
 // src/hooks/use-composer.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
+import { useCallback as useCallback3, useState as useState2 } from "react";
 var MAX_ATTACHMENTS = 10;
 var MAX_FILE_SIZE = 10 * 1024 * 1024;
 function useComposer(conversationId) {
@@ -1366,7 +1584,7 @@ function useComposer(conversationId) {
   const [attachments, setAttachments] = useState2([]);
   const [sendError, setSendError] = useState2(null);
   const [emailGateConvId, setEmailGateConvId] = useState2(null);
-  const addFiles = useCallback2(
+  const addFiles = useCallback3(
     async (files) => {
       if (!conversationId) return;
       const remaining = MAX_ATTACHMENTS - attachments.length;
@@ -1409,14 +1627,14 @@ function useComposer(conversationId) {
     },
     [conversationId, attachments.length, client]
   );
-  const removeAttachment = useCallback2((id) => {
+  const removeAttachment = useCallback3((id) => {
     setAttachments((prev) => {
       const item = prev.find((a) => a.id === id);
       if (item?.previewUrl) URL.revokeObjectURL(item.previewUrl);
       return prev.filter((a) => a.id !== id);
     });
   }, []);
-  const submit = useCallback2(async () => {
+  const submit = useCallback3(async () => {
     const trimmed = text.trim();
     const readyParts = attachments.filter((a) => a.part !== null).map((a) => a.part);
     const hasText = trimmed.length > 0;
@@ -1514,7 +1732,7 @@ function useComposer(conversationId) {
       setIsSubmitting(false);
     }
   }, [text, attachments, conversationId, isSubmitting, client, ws, store]);
-  const clearSendError = useCallback2(() => setSendError(null), []);
+  const clearSendError = useCallback3(() => setSendError(null), []);
   return {
     text,
     setText,
@@ -1543,17 +1761,17 @@ function fileToBase64(file) {
 }
 
 // src/hooks/use-conversations.ts
-import { useCallback as useCallback3, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback4, useRef as useRef3, useState as useState3 } from "react";
 function useConversations() {
   const { client, store } = useWidgetContext();
   const conversations = useWidgetStore((s) => s.conversations);
   const setActiveConversation = useWidgetStore((s) => s.setActiveConversation);
   const [isCreating, setIsCreating] = useState3(false);
-  const clientRef = useRef2(client);
-  const storeRef = useRef2(store);
+  const clientRef = useRef3(client);
+  const storeRef = useRef3(store);
   clientRef.current = client;
   storeRef.current = store;
-  const create = useCallback3(async (text) => {
+  const create = useCallback4(async (text) => {
     setIsCreating(true);
     const tempConversationId = `temp-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
     const now = (/* @__PURE__ */ new Date()).toISOString();
@@ -1617,10 +1835,10 @@ function useConversations() {
 }
 
 // src/hooks/use-i18n.ts
-import { useEffect as useEffect2, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 function useI18n() {
   const [rev, setRev] = useState4(() => getI18nRevision());
-  useEffect2(() => {
+  useEffect3(() => {
     return onLocaleChange(() => {
       setRev(getI18nRevision());
     });
@@ -1629,7 +1847,7 @@ function useI18n() {
 }
 
 // src/hooks/use-presence.ts
-import { useCallback as useCallback4, useRef as useRef3 } from "react";
+import { useCallback as useCallback5, useRef as useRef4 } from "react";
 function usePresence(conversationId) {
   const { ws } = useWidgetContext();
   const isTyping = useWidgetStore(
@@ -1638,9 +1856,9 @@ function usePresence(conversationId) {
   const isAiProcessing = useWidgetStore(
     (s) => conversationId ? s.aiProcessing.get(conversationId) ?? false : false
   );
-  const typingTimer = useRef3(null);
-  const isSendingTyping = useRef3(false);
-  const setTyping = useCallback4(
+  const typingTimer = useRef4(null);
+  const isSendingTyping = useRef4(false);
+  const setTyping = useCallback5(
     (typing) => {
       if (!conversationId) return;
       if (typingTimer.current) clearTimeout(typingTimer.current);
@@ -1666,7 +1884,7 @@ function usePresence(conversationId) {
 }
 
 // src/hooks/use-timeline.ts
-import { useCallback as useCallback5, useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
 var EMPTY_ITEMS = [];
 function useTimeline(conversationId) {
   const { client, store } = useWidgetContext();
@@ -1675,12 +1893,12 @@ function useTimeline(conversationId) {
   );
   const [isLoading, setIsLoading] = useState5(false);
   const [hasMore, setHasMore] = useState5(false);
-  const cursorRef = useRef4(void 0);
-  const clientRef = useRef4(client);
-  const storeRef = useRef4(store);
+  const cursorRef = useRef5(void 0);
+  const clientRef = useRef5(client);
+  const storeRef = useRef5(store);
   clientRef.current = client;
   storeRef.current = store;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!conversationId) return;
     if (conversationId.startsWith("temp-")) return;
     let cancelled = false;
@@ -1721,7 +1939,7 @@ function useTimeline(conversationId) {
       cancelled = true;
     };
   }, [conversationId]);
-  const loadMore = useCallback5(async () => {
+  const loadMore = useCallback6(async () => {
     if (!conversationId || !hasMore || isLoading) return;
     setIsLoading(true);
     try {
@@ -1764,7 +1982,7 @@ function useWidget() {
 }
 
 // src/themed/composer.tsx
-import { useCallback as useCallback6, useRef as useRef7, useState as useState7 } from "react";
+import { useCallback as useCallback7, useRef as useRef8, useState as useState7 } from "react";
 
 // src/themed/icons.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -1942,11 +2160,11 @@ function StarIcon({ size = 24, ...props }) {
 }
 
 // src/themed/message-bubble.tsx
-import { useEffect as useEffect5, useLayoutEffect, useRef as useRef6, useState as useState6 } from "react";
+import { useEffect as useEffect6, useLayoutEffect, useRef as useRef7, 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 { useEffect as useEffect5, useRef as useRef6 } from "react";
 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>`;
@@ -2027,9 +2245,9 @@ function MarkdownContent({
   bodyMarkdown,
   className
 }) {
-  const rootRef = useRef5(null);
+  const rootRef = useRef6(null);
   const html = bodyHtml ?? (bodyMarkdown ? renderMarkdown(bodyMarkdown) : "");
-  useEffect4(() => {
+  useEffect5(() => {
     const root = rootRef.current;
     if (!root) return;
     const isWhitespaceOnly = (el) => {
@@ -2048,7 +2266,7 @@ function MarkdownContent({
     };
     removeEmpties();
   }, [html]);
-  useEffect4(() => {
+  useEffect5(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = (e) => {
@@ -2093,14 +2311,14 @@ function MessageBubble({
   onQuickReplyTap
 }) {
   const senderClass = `hw-msg--${sender}`;
-  const bubbleRef = useRef6(null);
+  const bubbleRef = useRef7(null);
   const imageParts = parts?.filter((p) => p.type === "image") ?? [];
   const fileParts = parts?.filter((p) => p.type === "file") ?? [];
   const linkPreviews = parts?.filter(
     (p) => p.type === "link-preview"
   ) ?? [];
   const hasText = text.length > 0;
-  useEffect5(() => {
+  useEffect6(() => {
     const bubble = bubbleRef.current;
     if (!bubble || sender !== "ai" && sender !== "team") return;
     const handleClick = (event) => {
@@ -2157,7 +2375,7 @@ function QuickReplyButtons({
 }
 function PreviewableThumbnail({ src }) {
   const [hover, setHover] = useState6(false);
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx4(
       "a",
@@ -2178,7 +2396,7 @@ function PreviewableThumbnail({ src }) {
 var PREVIEWABLE_EXTS = /* @__PURE__ */ new Set(["pdf", "csv", "png", "jpg", "jpeg", "gif", "webp", "svg"]);
 function FileCard({ file }) {
   const [hover, setHover] = useState6(false);
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   const ext = file.fileName.split(".").pop()?.toLowerCase() ?? "";
   const isPreviewable = PREVIEWABLE_EXTS.has(ext);
   const isImage = file.mimeType.startsWith("image/");
@@ -2404,12 +2622,12 @@ function Composer({
   onRemoveAttachment,
   disabled
 }) {
-  const ref = useRef7(null);
-  const fileInputRef = useRef7(null);
-  const supportsFieldSizing = useRef7(
+  const ref = useRef8(null);
+  const fileInputRef = useRef8(null);
+  const supportsFieldSizing = useRef8(
     typeof CSS !== "undefined" && CSS.supports?.("field-sizing", "content")
   );
-  const handleKeyDown = useCallback6(
+  const handleKeyDown = useCallback7(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -2418,7 +2636,7 @@ function Composer({
     },
     [onSubmit]
   );
-  const handleChange = useCallback6(
+  const handleChange = useCallback7(
     (e) => {
       const value = e.target.value;
       if (value.length > MAX_CHARS) return;
@@ -2434,7 +2652,7 @@ function Composer({
     },
     [onTextChange, onTyping]
   );
-  const handlePaste = useCallback6(
+  const handlePaste = useCallback7(
     (e) => {
       if (!onAddFiles) return;
       const files = extractFiles(e.clipboardData);
@@ -2446,22 +2664,22 @@ function Composer({
     [onAddFiles]
   );
   const [isDragging, setIsDragging] = useState7(false);
-  const dragCountRef = useRef7(0);
-  const handleDragEnter = useCallback6((e) => {
+  const dragCountRef = useRef8(0);
+  const handleDragEnter = useCallback7((e) => {
     e.preventDefault();
     dragCountRef.current++;
     if (dragCountRef.current === 1) setIsDragging(true);
   }, []);
-  const handleDragLeave = useCallback6((e) => {
+  const handleDragLeave = useCallback7((e) => {
     e.preventDefault();
     dragCountRef.current--;
     if (dragCountRef.current === 0) setIsDragging(false);
   }, []);
-  const handleDragOver = useCallback6((e) => {
+  const handleDragOver = useCallback7((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
   }, []);
-  const handleDrop = useCallback6(
+  const handleDrop = useCallback7(
     (e) => {
       e.preventDefault();
       dragCountRef.current = 0;
@@ -2472,10 +2690,10 @@ function Composer({
     },
     [onAddFiles]
   );
-  const handleFileClick = useCallback6(() => {
+  const handleFileClick = useCallback7(() => {
     fileInputRef.current?.click();
   }, []);
-  const handleFileChange = useCallback6(
+  const handleFileChange = useCallback7(
     (e) => {
       if (!onAddFiles || !e.target.files) return;
       onAddFiles(Array.from(e.target.files));
@@ -2566,7 +2784,7 @@ function Composer({
 }
 function PreviewThumb({ attachment: a, onRemove }) {
   const [hover, setHover] = useState7(false);
-  const ref = useRef7(null);
+  const ref = useRef8(null);
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -2605,7 +2823,7 @@ function extractFiles(data) {
 }
 
 // src/themed/debug-overlay.tsx
-import { useEffect as useEffect6, useMemo, useRef as useRef8, useState as useState8 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo2, useRef as useRef9, useState as useState8 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var MAX_EVENTS = 60;
 function isDebugEnabled() {
@@ -2626,16 +2844,16 @@ function WidgetDebugOverlay() {
   const [enabled, setEnabled] = useState8(false);
   const [open, setOpen] = useState8(true);
   const [events, setEvents] = useState8([]);
-  const eventsRef = useRef8([]);
+  const eventsRef = useRef9([]);
   const activeId = useWidgetStore((s) => s.activeConversationId);
   const messagesMap = useWidgetStore((s) => s.messages);
   const typingUsers = useWidgetStore((s) => s.typingUsers);
   const aiProcessingMap = useWidgetStore((s) => s.aiProcessing);
   const { store } = useWidgetContext();
-  useEffect6(() => {
+  useEffect7(() => {
     setEnabled(isDebugEnabled());
   }, []);
-  const pushEvent = useMemo(
+  const pushEvent = useMemo2(
     () => (ev) => {
       const e = {
         ...ev,
@@ -2647,7 +2865,7 @@ function WidgetDebugOverlay() {
     },
     []
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (!enabled) return;
     if (typeof window === "undefined" || typeof window.fetch !== "function") return;
     const originalFetch = window.fetch.bind(window);
@@ -2679,7 +2897,7 @@ function WidgetDebugOverlay() {
       window.fetch = originalFetch;
     };
   }, [enabled, pushEvent]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!enabled) return;
     const original = store.getState().handleRealtimeEvent;
     store.setState({
@@ -2693,12 +2911,12 @@ function WidgetDebugOverlay() {
     };
   }, [enabled, store, pushEvent]);
   const activeMessages = activeId ? messagesMap.get(activeId) ?? [] : [];
-  const lastMsgSignature = useMemo(
+  const lastMsgSignature = useMemo2(
     () => activeMessages.map((m) => `${m.id}:${senderOf(m)}:${m.createdAt}`).join("|"),
     [activeMessages]
   );
-  const prevSigRef = useRef8(lastMsgSignature);
-  useEffect6(() => {
+  const prevSigRef = useRef9(lastMsgSignature);
+  useEffect7(() => {
     if (!enabled) return;
     if (prevSigRef.current !== lastMsgSignature) {
       prevSigRef.current = lastMsgSignature;
@@ -2851,11 +3069,11 @@ var styles = {
 };
 
 // src/themed/content/content-tab-view.tsx
-import { useCallback as useCallback10, useEffect as useEffect9 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect10 } from "react";
 
 // src/hooks/use-content-tab.ts
-import { useCallback as useCallback7, useEffect as useEffect7, useState as useState9 } from "react";
-var EMPTY_TABS = [];
+import { useCallback as useCallback8, useEffect as useEffect8, useState as useState9 } from "react";
+var EMPTY_TABS2 = [];
 function listKey(tabId, lang) {
   return `flat:${tabId}:${lang}:list`;
 }
@@ -2870,7 +3088,7 @@ function readCache(cache, key) {
 }
 function useContentTab(tabId) {
   const { client, store } = useWidgetContext();
-  const contentTabs = useWidgetStore((s) => s.agentConfig?.contentTabs) ?? EMPTY_TABS;
+  const contentTabs = useWidgetStore((s) => s.agentConfig?.contentTabs) ?? EMPTY_TABS2;
   const tab = contentTabs.find((t2) => t2.id === tabId) ?? null;
   const lang = getLocale();
   const cache = store.getState().contentCache;
@@ -2889,7 +3107,7 @@ function useContentTab(tabId) {
   const [page, setPage] = useState9(
     () => readCache(cache, listKey(tabId, lang))?.page ?? 1
   );
-  const fetchEntries = useCallback7(
+  const fetchEntries = useCallback8(
     async (opts) => {
       if (!tab) return;
       const p = opts?.page ?? 1;
@@ -2928,11 +3146,11 @@ function useContentTab(tabId) {
     },
     [client, tabId, tab, store]
   );
-  const loadMore = useCallback7(() => {
+  const loadMore = useCallback8(() => {
     if (!hasMore || isLoading) return;
     fetchEntries({ page: page + 1 });
   }, [fetchEntries, hasMore, isLoading, page]);
-  const fetchDetail = useCallback7(
+  const fetchDetail = useCallback8(
     async (slug) => {
       if (!tab) return;
       const cached = readCache(
@@ -2966,10 +3184,10 @@ function useContentTab(tabId) {
     },
     [client, tabId, tab, store]
   );
-  const clearDetail = useCallback7(() => {
+  const clearDetail = useCallback8(() => {
     setDetail(null);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (tab && entries.length === 0) {
       fetchEntries({ page: 1, reset: true });
     }
@@ -3078,7 +3296,7 @@ function SkeletonSection({
 }
 
 // src/themed/content/content-list-view.tsx
-import { useCallback as useCallback8, useRef as useRef9, useState as useState10 } from "react";
+import { useCallback as useCallback9, useRef as useRef10, useState as useState10 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function ContentListView({
   entries,
@@ -3091,8 +3309,8 @@ function ContentListView({
   display
 }) {
   const [searchText, setSearchText] = useState10("");
-  const debounceRef = useRef9(void 0);
-  const handleSearch = useCallback8(
+  const debounceRef = useRef10(void 0);
+  const handleSearch = useCallback9(
     (value) => {
       setSearchText(value);
       if (!onSearch) return;
@@ -3172,11 +3390,11 @@ function ContentEntryCard({
 }
 
 // src/themed/content/grouped-content-tab-view.tsx
-import { useEffect as useEffect8, useRef as useRef11 } from "react";
+import { useEffect as useEffect9, useRef as useRef12 } from "react";
 
 // src/hooks/use-grouped-content-tab.ts
-import { useCallback as useCallback9, useRef as useRef10, useState as useState11 } from "react";
-var EMPTY_TABS2 = [];
+import { useCallback as useCallback10, useRef as useRef11, useState as useState11 } from "react";
+var EMPTY_TABS3 = [];
 function categoriesKey(tabId, lang) {
   return `grouped:${tabId}:${lang}:categories`;
 }
@@ -3194,7 +3412,7 @@ function readCache2(cache, key) {
 }
 function useGroupedContentTab(tabId) {
   const { client, store } = useWidgetContext();
-  const contentTabs = useWidgetStore((s) => s.agentConfig?.contentTabs) ?? EMPTY_TABS2;
+  const contentTabs = useWidgetStore((s) => s.agentConfig?.contentTabs) ?? EMPTY_TABS3;
   const tab = contentTabs.find((t2) => t2.id === tabId) ?? null;
   const lang = getLocale();
   const cache = store.getState().contentCache;
@@ -3204,12 +3422,12 @@ function useGroupedContentTab(tabId) {
   const [items, setItems] = useState11([]);
   const [isItemsLoading, setIsItemsLoading] = useState11(false);
   const [itemsHasMore, setItemsHasMore] = useState11(false);
-  const itemsPageRef = useRef10(1);
+  const itemsPageRef = useRef11(1);
   const [detail, setDetail] = useState11(null);
   const [isLoadingDetail, setIsLoadingDetail] = useState11(false);
   const [activeCategory, setActiveCategory] = useState11(null);
-  const allCategoriesRef = useRef10(cachedCategories ?? []);
-  const fetchCategories = useCallback9(async () => {
+  const allCategoriesRef = useRef11(cachedCategories ?? []);
+  const fetchCategories = useCallback10(async () => {
     if (!tab) return;
     setIsCategoriesLoading(true);
     try {
@@ -3230,12 +3448,12 @@ function useGroupedContentTab(tabId) {
       setIsCategoriesLoading(false);
     }
   }, [client, tabId, tab, store]);
-  const initFetch = useCallback9(() => {
+  const initFetch = useCallback10(() => {
     if (tab && categories.length === 0) {
       fetchCategories();
     }
   }, [fetchCategories, tab, categories.length]);
-  const fetchItems = useCallback9(
+  const fetchItems = useCallback10(
     async (opts) => {
       if (!tab?.itemsModelSlug) return;
       const p = opts?.page ?? 1;
@@ -3273,7 +3491,7 @@ function useGroupedContentTab(tabId) {
     },
     [client, tabId, tab, store]
   );
-  const selectCategory = useCallback9(
+  const selectCategory = useCallback10(
     (category) => {
       setActiveCategory(category);
       setDetail(null);
@@ -3292,14 +3510,14 @@ function useGroupedContentTab(tabId) {
     },
     [fetchItems, store, tabId]
   );
-  const loadMoreItems = useCallback9(() => {
+  const loadMoreItems = useCallback10(() => {
     if (!itemsHasMore || isItemsLoading || !activeCategory) return;
     fetchItems({
       page: itemsPageRef.current + 1,
       groupSlug: activeCategory.slug
     });
   }, [fetchItems, itemsHasMore, isItemsLoading, activeCategory]);
-  const searchItems = useCallback9(
+  const searchItems = useCallback10(
     (query) => {
       setItems([]);
       fetchItems({
@@ -3311,7 +3529,7 @@ function useGroupedContentTab(tabId) {
     },
     [fetchItems, activeCategory]
   );
-  const fetchDetail = useCallback9(
+  const fetchDetail = useCallback10(
     async (slug) => {
       if (!tab?.itemsModelSlug) return;
       const cached = readCache2(
@@ -3346,7 +3564,7 @@ function useGroupedContentTab(tabId) {
     },
     [client, tabId, tab, store]
   );
-  const searchCategories = useCallback9(
+  const searchCategories = useCallback10(
     (query) => {
       if (!query.trim()) {
         setCategories(allCategoriesRef.current);
@@ -3361,10 +3579,10 @@ function useGroupedContentTab(tabId) {
     },
     []
   );
-  const clearDetail = useCallback9(() => {
+  const clearDetail = useCallback10(() => {
     setDetail(null);
   }, []);
-  const clearCategory = useCallback9(() => {
+  const clearCategory = useCallback10(() => {
     setActiveCategory(null);
     setItems([]);
     setDetail(null);
@@ -3416,16 +3634,16 @@ function GroupedContentTabView({
     fetchDetail,
     clearCategory
   } = useGroupedContentTab(tab.id);
-  useEffect8(() => {
+  useEffect9(() => {
     initFetch();
   }, [initFetch]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (detailSlug && subView === "content-detail") {
       fetchDetail(detailSlug);
     }
   }, [detailSlug, subView, fetchDetail]);
-  const prevSubView = useRef11(subView);
-  useEffect8(() => {
+  const prevSubView = useRef12(subView);
+  useEffect9(() => {
     if (prevSubView.current === "content-category" && subView === null) {
       clearCategory();
     }
@@ -3519,10 +3737,10 @@ function FlatContentTabView({
     loadMore,
     fetchDetail
   } = useContentTab(tab.id);
-  useEffect9(() => {
+  useEffect10(() => {
     if (detailSlug) fetchDetail(detailSlug);
   }, [detailSlug, fetchDetail]);
-  const handleSearch = useCallback10(
+  const handleSearch = useCallback11(
     (query) => {
       fetchEntries({ page: 1, search: query || void 0, reset: true });
     },
@@ -3562,7 +3780,7 @@ function ContentTabIconComponent({ icon }) {
 }
 
 // src/themed/message-list.tsx
-import React, { useEffect as useEffect10, useRef as useRef12 } from "react";
+import React, { useEffect as useEffect11, useRef as useRef13 } from "react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function parseParts(raw) {
   if (!raw) return null;
@@ -3595,11 +3813,11 @@ function MessageList({
   onLoadMore,
   renderAfterMessages
 }) {
-  const bottomRef = useRef12(null);
-  const topRef = useRef12(null);
-  const containerRef = useRef12(null);
-  const prevItemCountRef = useRef12(items.length);
-  const isInitialLoadRef = useRef12(true);
+  const bottomRef = useRef13(null);
+  const topRef = useRef13(null);
+  const containerRef = useRef13(null);
+  const prevItemCountRef = useRef13(items.length);
+  const isInitialLoadRef = useRef13(true);
   const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? t("widget.helpway_ai");
   const client = useWidgetClient();
   const activeConversationId = useWidgetStore((s) => s.activeConversationId);
@@ -3612,7 +3830,7 @@ function MessageList({
     },
     [client, activeConversationId]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     const prevCount = prevItemCountRef.current;
     const newCount = items.length;
     prevItemCountRef.current = newCount;
@@ -3627,12 +3845,12 @@ function MessageList({
       isInitialLoadRef.current = false;
     }
   }, [items]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (isTyping || isAiProcessing) {
       bottomRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [isTyping, isAiProcessing]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!hasMore || !onLoadMore || !topRef.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -3778,8 +3996,97 @@ function EventCard({ text }) {
   return /* @__PURE__ */ jsx12("div", { className: "hw-event", children: /* @__PURE__ */ jsx12("div", { className: "hw-event-text", children: text }) });
 }
 
-// src/themed/default-widget.tsx
+// src/themed/message-preview.tsx
+import { useEffect as useEffect12, useState as useState12 } from "react";
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+function MessagePreview({
+  onOpen,
+  avatar,
+  placement = "launcher",
+  autoDismissMs = 8e3,
+  footer
+}) {
+  const preview = useWidgetStore((s) => s.incomingPreview);
+  const dismissPreview = useWidgetStore((s) => s.dismissPreview);
+  const setActiveConversation = useWidgetStore((s) => s.setActiveConversation);
+  const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
+  const [closing, setClosing] = useState12(false);
+  useEffect12(() => {
+    if (!preview || preview.quickReplies) return;
+    if (autoDismissMs == null || autoDismissMs <= 0) return;
+    const timer = setTimeout(() => {
+      setClosing(true);
+      setTimeout(() => dismissPreview(), 200);
+    }, autoDismissMs);
+    return () => clearTimeout(timer);
+  }, [preview, dismissPreview, autoDismissMs]);
+  if (!preview) return null;
+  const handleClose = (e) => {
+    e.stopPropagation();
+    setClosing(true);
+    setTimeout(() => {
+      dismissPreview();
+      setClosing(false);
+    }, 200);
+  };
+  const handleClick = () => {
+    const targetConvId = preview.conversationId;
+    dismissPreview();
+    setActiveConversation(targetConvId);
+    onOpen();
+  };
+  const messages = preview.messages?.length ? preview.messages : [{ text: preview.text }];
+  const hasQr = preview.quickReplies && preview.quickReplies.options.length > 0;
+  const placementClass = placement === "anchored" ? "hw-preview--anchored " : "";
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: `hw-preview ${placementClass}${closing ? "hw-preview--closing" : ""}`,
+      onClick: handleClick,
+      role: "button",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxs8("div", { className: "hw-preview-header", children: [
+          /* @__PURE__ */ jsx13("div", { className: "hw-preview-avatar", children: avatar }),
+          /* @__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__ */ jsx13(XIcon, { size: 20 })
+            }
+          )
+        ] }),
+        messages.map((m, i) => /* @__PURE__ */ jsx13("div", { className: "hw-preview-body", children: m.text }, i)),
+        hasQr && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          preview.quickReplies.prompt && /* @__PURE__ */ jsx13("div", { className: "hw-preview-body", children: preview.quickReplies.prompt }),
+          /* @__PURE__ */ jsx13("div", { className: "hw-preview-quick-replies", children: preview.quickReplies.options.map((opt) => /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              className: "hw-preview-qr-btn",
+              onClick: (e) => {
+                e.stopPropagation();
+                dismissPreview();
+                setActiveConversation(preview.conversationId);
+                onOpen();
+              },
+              children: opt.label
+            },
+            opt.id
+          )) })
+        ] }),
+        footer != null && footer !== false && /* @__PURE__ */ jsx13("div", { className: "hw-preview-footer", children: footer })
+      ]
+    }
+  );
+}
+
+// src/themed/default-widget.tsx
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function resolveLabel2(label) {
   if (!label.startsWith("widget.")) return label;
   const resolved = t(label);
@@ -3791,7 +4098,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__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "svg",
     {
       className,
@@ -3801,7 +4108,7 @@ function HelpwayMark({ className }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         "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",
@@ -3825,7 +4132,7 @@ function WidgetLogo({
   });
   const logoClass = forceAgent ? "hw-agent-img--logo" : "";
   if (!forceAgent && activeId && assignee?.assigneeImage) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "img",
       {
         src: assignee.assigneeImage,
@@ -3835,10 +4142,10 @@ function WidgetLogo({
     );
   }
   if (agentConfig?.avatarUrl) {
-    return /* @__PURE__ */ jsx13("img", { src: agentConfig.avatarUrl, alt: "", className: `hw-agent-img ${logoClass} ${className ?? ""}` });
+    return /* @__PURE__ */ jsx14("img", { src: agentConfig.avatarUrl, alt: "", className: `hw-agent-img ${logoClass} ${className ?? ""}` });
   }
   if (agentConfig?.avatarPreset) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "div",
       {
         className: `hw-agent-icon ${className ?? ""}`,
@@ -3849,20 +4156,20 @@ function WidgetLogo({
           justifyContent: "center",
           borderRadius: 8
         },
-        children: /* @__PURE__ */ jsx13(AgentPresetIcon, { presetId: agentConfig.avatarPreset })
+        children: /* @__PURE__ */ jsx14(AgentPresetIcon, { presetId: agentConfig.avatarPreset })
       }
     );
   }
   if (logoUrl) {
-    return /* @__PURE__ */ jsx13("img", { src: logoUrl, alt: "", className: `hw-agent-img hw-agent-img--logo ${className ?? ""}` });
+    return /* @__PURE__ */ jsx14("img", { src: logoUrl, alt: "", className: `hw-agent-img hw-agent-img--logo ${className ?? ""}` });
   }
-  return /* @__PURE__ */ jsx13(HelpwayMark, { className });
+  return /* @__PURE__ */ jsx14(HelpwayMark, { className });
 }
 function LauncherIcon({ className }) {
   const agentConfig = useWidgetStore((s) => s.agentConfig);
-  const [imgLoaded, setImgLoaded] = useState12(false);
+  const [imgLoaded, setImgLoaded] = useState13(false);
   const imgSrc = agentConfig?.launcherIconUrl ?? null;
-  useEffect11(() => {
+  useEffect13(() => {
     if (!imgSrc) return;
     setImgLoaded(false);
     const img = new Image();
@@ -3875,7 +4182,7 @@ function LauncherIcon({ className }) {
     img.onerror = () => setImgLoaded(true);
   }, [imgSrc]);
   if (imgSrc) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "img",
       {
         src: imgSrc,
@@ -3885,7 +4192,7 @@ function LauncherIcon({ className }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx13(WidgetLogo, { className, forceAgent: true });
+  return /* @__PURE__ */ jsx14(WidgetLogo, { className, forceAgent: true });
 }
 var PRESET_SVG = {
   // Helpway brand mark — octagonal chamfer with stylized "W" inside.
@@ -3944,7 +4251,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__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "svg",
       {
         viewBox: "0 0 24 24",
@@ -3965,6 +4272,8 @@ function DefaultWidget({ hideLauncher = false } = {}) {
   const isDismissed = useWidgetStore((s) => s.isDismissed);
   const { totalUnread } = useUnread();
   const contentTabs = useWidgetStore((s) => s.agentConfig?.contentTabs) ?? EMPTY_CONTENT_TABS;
+  const { announcementTabs, markEntrySeen, markAllSeen, getUnseenEntries } = useAnnouncements();
+  const unseenAnnouncementCount = useWidgetStore((s) => s.unseenAnnouncementCount);
   const visitorContact = useWidgetStore((s) => s.visitor?.contact);
   if (process.env.NODE_ENV !== "production") {
     console.debug("[Widget]", {
@@ -3974,22 +4283,22 @@ function DefaultWidget({ hideLauncher = false } = {}) {
     });
   }
   const storeIsOpen = useWidgetStore((s) => s.isOpen);
-  const [isClosing, setIsClosing] = useState12(false);
+  const [isClosing, setIsClosing] = useState13(false);
   const isOpen = storeIsOpen || isClosing;
-  const [activeTab, setActiveTab] = useState12("home");
-  const [subView, setSubView] = useState12(null);
-  const [newText, setNewText] = useState12("");
-  const [contentDetailSlug, setContentDetailSlug] = useState12(null);
-  const [contentCategoryName, setContentCategoryName] = useState12(null);
-  const prevActiveIdRef = useRef13(activeId);
-  useEffect11(() => {
+  const [activeTab, setActiveTab] = useState13("home");
+  const [subView, setSubView] = useState13(null);
+  const [newText, setNewText] = useState13("");
+  const [contentDetailSlug, setContentDetailSlug] = useState13(null);
+  const [contentCategoryName, setContentCategoryName] = useState13(null);
+  const prevActiveIdRef = useRef14(activeId);
+  useEffect13(() => {
     if (activeId && activeId !== prevActiveIdRef.current && subView !== "conversation") {
       setSubView("conversation");
     }
     prevActiveIdRef.current = activeId;
   }, [activeId, subView]);
   const prefill = useWidgetStore((s) => s.newConversationPrefill);
-  useEffect11(() => {
+  useEffect13(() => {
     if (prefill !== null) {
       if (prefill.length > 0) setNewText(prefill);
       setSubView("new");
@@ -3997,18 +4306,18 @@ function DefaultWidget({ hideLauncher = false } = {}) {
       store.getState().setNewConversationPrefill(null);
     }
   }, [prefill, store]);
-  const closeTimerRef = useRef13(void 0);
+  const closeTimerRef = useRef14(void 0);
   const welcomeMsgRaw = agentConfig?.welcomeMessage;
   const welcomeIsFactoryDefault = !welcomeMsgRaw || welcomeMsgRaw === DEFAULT_EN_WELCOME;
   const welcomeMessage = welcomeMsgRaw?.startsWith("widget.") ? t(welcomeMsgRaw) : welcomeIsFactoryDefault ? t("widget.welcome_message") : welcomeMsgRaw;
-  const openConversation = useCallback11(
+  const openConversation = useCallback12(
     (id) => {
       setActiveConversation(id);
       setSubView("conversation");
     },
     [setActiveConversation]
   );
-  const openNewConversation = useCallback11(() => {
+  const openNewConversation = useCallback12(() => {
     const agentId = agentConfig?.id;
     if (!agentId) {
       setSubView("new");
@@ -4034,7 +4343,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
     setActiveConversation(tempId);
     setSubView("conversation");
   }, [agentConfig?.id, store, setActiveConversation, welcomeMessage]);
-  const goBack = useCallback11(() => {
+  const goBack = useCallback12(() => {
     if (subView === "content-detail") {
       const tabId = activeTab.startsWith("content:") ? activeTab.slice(8) : null;
       const activeContentTab = tabId ? contentTabs.find((t2) => t2.id === tabId) : null;
@@ -4061,7 +4370,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
     setActiveConversation(null);
     setSubView(null);
   }, [setActiveConversation, subView, activeTab, contentTabs, contentCategoryName, client, store]);
-  const switchTab = useCallback11(
+  const switchTab = useCallback12(
     (tab) => {
       tabStateRef.current[activeTab] = { subView, activeId };
       const saved = tabStateRef.current[tab];
@@ -4076,7 +4385,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
     [activeTab, subView, activeId, setActiveConversation]
   );
   const setStoreOpen = useWidgetStore((s) => s.setOpen);
-  const handleBubbleClick = useCallback11(() => {
+  const handleBubbleClick = useCallback12(() => {
     if (storeIsOpen) {
       const leavingId = store.getState().activeConversationId;
       if (leavingId && !leavingId.startsWith("temp-")) {
@@ -4096,7 +4405,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
       setStoreOpen(true);
     }
   }, [storeIsOpen, setStoreOpen, client, store]);
-  const handleClose = useCallback11(() => {
+  const handleClose = useCallback12(() => {
     const leavingId = store.getState().activeConversationId;
     if (leavingId && !leavingId.startsWith("temp-")) {
       store.getState().clearUnread(leavingId);
@@ -4109,7 +4418,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
       setStoreOpen(false);
     }, 200);
   }, [setStoreOpen, client, store]);
-  const handleNewConversation = useCallback11(async () => {
+  const handleNewConversation = useCallback12(async () => {
     const trimmed = newText.trim();
     if (!trimmed || isCreating) return;
     const conv = await create(trimmed);
@@ -4118,16 +4427,16 @@ function DefaultWidget({ hideLauncher = false } = {}) {
       setSubView("conversation");
     }
   }, [newText, isCreating, create]);
-  const windowRef = useRef13(null);
-  const bubbleRef = useRef13(null);
-  const tabStateRef = useRef13({});
-  const touchStartY = useRef13(0);
-  const touchDeltaY = useRef13(0);
-  const handleTouchStart = useCallback11((e) => {
+  const windowRef = useRef14(null);
+  const bubbleRef = useRef14(null);
+  const tabStateRef = useRef14({});
+  const touchStartY = useRef14(0);
+  const touchDeltaY = useRef14(0);
+  const handleTouchStart = useCallback12((e) => {
     touchStartY.current = e.touches[0]?.clientY ?? 0;
     touchDeltaY.current = 0;
   }, []);
-  const handleTouchMove = useCallback11((e) => {
+  const handleTouchMove = useCallback12((e) => {
     const delta = (e.touches[0]?.clientY ?? 0) - touchStartY.current;
     touchDeltaY.current = delta;
     if (delta > 0 && windowRef.current) {
@@ -4135,7 +4444,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
       windowRef.current.style.opacity = `${Math.max(1 - delta / 400, 0.5)}`;
     }
   }, []);
-  const handleTouchEnd = useCallback11(() => {
+  const handleTouchEnd = useCallback12(() => {
     if (windowRef.current) {
       windowRef.current.style.transform = "";
       windowRef.current.style.opacity = "";
@@ -4144,7 +4453,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
       handleClose();
     }
   }, [handleClose]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!isOpen || !windowRef.current) return;
     const vv = window.visualViewport;
     if (!vv) return;
@@ -4161,7 +4470,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
       win.style.removeProperty("--hw-visible-height");
     };
   }, [isOpen]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!isOpen || !windowRef.current) return;
     const win = windowRef.current;
     const handleKeyDown = (e) => {
@@ -4177,8 +4486,8 @@ function DefaultWidget({ hideLauncher = false } = {}) {
     win.addEventListener("keydown", handleKeyDown);
     return () => win.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, subView, handleClose, goBack]);
-  useEffect11(() => {
-    if (!isOpen || !windowRef.current) return;
+  useEffect13(() => {
+    if (!isOpen || !windowRef.current || hideLauncher) return;
     const win = windowRef.current;
     const getFocusable = () => win.querySelectorAll(
       'button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
@@ -4207,7 +4516,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
     const focusable = getFocusable();
     if (focusable.length > 0) focusable[0]?.focus();
     return () => win.removeEventListener("keydown", handleTab);
-  }, [isOpen]);
+  }, [isOpen, hideLauncher]);
   const showTabBar = subView === null;
   const activeConvSummary = useWidgetStore((s) => {
     const id = s.activeConversationId;
@@ -4225,7 +4534,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
   const launcherStyle = agentConfig?.launcherStyle ?? "icon";
   const bubbleStyle = agentConfig?.bubbleStyle ?? "rounded";
   const hasUploadedAvatar = !!agentConfig?.avatarUrl;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: "hw-widget",
@@ -4238,16 +4547,16 @@ function DefaultWidget({ hideLauncher = false } = {}) {
         "--hw-window-left": widgetPosition === "bottom-left" ? "0" : "auto"
       },
       children: [
-        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 && !isReady && !hasBootstrapError && /* @__PURE__ */ jsx14("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs9("div", { className: "hw-skeleton-loading", children: [
+          /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
+          /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } }),
+          /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } })
         ] }) }),
-        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 && hasBootstrapError && /* @__PURE__ */ jsx14("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs9("div", { className: "hw-bootstrap-error", children: [
+          /* @__PURE__ */ jsx14("div", { className: "hw-bootstrap-error-text", children: t("widget.error_desc") }),
+          /* @__PURE__ */ jsx14("button", { type: "button", className: "hw-bootstrap-error-retry", onClick: retryBootstrap, children: t("widget.retry") })
         ] }) }),
-        isOpen && isReady && /* @__PURE__ */ jsxs8(
+        isOpen && isReady && /* @__PURE__ */ jsxs9(
           "div",
           {
             ref: windowRef,
@@ -4259,24 +4568,24 @@ function DefaultWidget({ hideLauncher = false } = {}) {
             onTouchMove: handleTouchMove,
             onTouchEnd: handleTouchEnd,
             children: [
-              /* @__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" }),
+              /* @__PURE__ */ jsx14("div", { className: "hw-drag-handle", children: /* @__PURE__ */ jsx14("div", { className: "hw-drag-handle-pill" }) }),
+              wsDisconnected && /* @__PURE__ */ jsxs9("div", { className: "hw-disconnect", children: [
+                /* @__PURE__ */ jsx14("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__ */ jsxs8("div", { className: "hw-header hw-header--centered", children: [
-                  /* @__PURE__ */ jsx13(
+                return /* @__PURE__ */ jsxs9("div", { className: "hw-header hw-header--centered", children: [
+                  /* @__PURE__ */ jsx14(
                     "button",
                     {
                       type: "button",
                       className: "hw-header-back",
                       onClick: goBack,
                       "aria-label": t("widget.aria_back"),
-                      children: /* @__PURE__ */ jsx13(
+                      children: /* @__PURE__ */ jsx14(
                         "svg",
                         {
                           viewBox: "0 0 24 24",
@@ -4285,33 +4594,33 @@ function DefaultWidget({ hideLauncher = false } = {}) {
                           strokeWidth: 2,
                           strokeLinecap: "round",
                           strokeLinejoin: "round",
-                          children: /* @__PURE__ */ jsx13("path", { d: "M15 18l-6-6 6-6" })
+                          children: /* @__PURE__ */ jsx14("path", { d: "M15 18l-6-6 6-6" })
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx13("div", { className: "hw-header-title", children: headerTitle }),
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14("div", { className: "hw-header-title", children: headerTitle }),
+                  /* @__PURE__ */ jsx14(
                     "button",
                     {
                       type: "button",
                       className: "hw-header-close",
                       onClick: handleClose,
                       "aria-label": t("widget.aria_close"),
-                      children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
+                      children: /* @__PURE__ */ jsx14(XIcon, { size: 20 })
                     }
                   )
                 ] });
               })(),
-              subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */ jsxs8("div", { className: "hw-header hw-header--sub", children: [
-                /* @__PURE__ */ jsx13(
+              subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */ jsxs9("div", { className: "hw-header hw-header--sub", children: [
+                /* @__PURE__ */ jsx14(
                   "button",
                   {
                     type: "button",
                     className: "hw-header-back",
                     onClick: goBack,
                     "aria-label": t("widget.aria_back"),
-                    children: /* @__PURE__ */ jsx13(
+                    children: /* @__PURE__ */ jsx14(
                       "svg",
                       {
                         viewBox: "0 0 24 24",
@@ -4320,66 +4629,82 @@ function DefaultWidget({ hideLauncher = false } = {}) {
                         strokeWidth: 2,
                         strokeLinecap: "round",
                         strokeLinejoin: "round",
-                        children: /* @__PURE__ */ jsx13("path", { d: "M15 18l-6-6 6-6" })
+                        children: /* @__PURE__ */ jsx14("path", { d: "M15 18l-6-6 6-6" })
                       }
                     )
                   }
                 ),
-                /* @__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__ */ jsxs9("div", { className: "hw-header-identity", children: [
+                  /* @__PURE__ */ jsx14("div", { className: `hw-header-bot-icon${hasTeamAgent ? " hw-header-bot-icon--team" : ""}`, children: hasTeamAgent && activeConvSummary?.lastMessageSenderImage ? /* @__PURE__ */ jsx14("img", { src: activeConvSummary.lastMessageSenderImage, alt: headerName, className: "hw-header-agent-img" }) : hasTeamAgent ? /* @__PURE__ */ jsx14("span", { className: "hw-header-agent-initials", children: headerName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx14(WidgetLogo, {}) }),
+                  /* @__PURE__ */ jsxs9("div", { className: "hw-header-info", children: [
+                    /* @__PURE__ */ jsx14("div", { className: "hw-header-name", children: headerName }),
+                    /* @__PURE__ */ jsx14("div", { className: "hw-header-status", children: subtitleText })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx14(
                   "button",
                   {
                     type: "button",
                     className: "hw-header-close",
                     onClick: handleClose,
                     "aria-label": t("widget.aria_close"),
-                    children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
+                    children: /* @__PURE__ */ jsx14(XIcon, { size: 20 })
                   }
                 )
               ] }),
-              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(
+              subView === null && activeTab === "home" && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+                /* @__PURE__ */ jsxs9("div", { className: "hw-hero", children: [
+                  /* @__PURE__ */ jsxs9("div", { className: "hw-hero-top", children: [
+                    /* @__PURE__ */ jsx14("div", { className: "hw-hero-bot-icon", children: /* @__PURE__ */ jsx14(WidgetLogo, {}) }),
+                    /* @__PURE__ */ jsx14(
                       "button",
                       {
                         type: "button",
                         className: "hw-hero-close",
                         onClick: handleClose,
                         "aria-label": t("widget.aria_close"),
-                        children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
+                        children: /* @__PURE__ */ jsx14(XIcon, { size: 20 })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx13("div", { className: "hw-hero-greeting", children: welcomeMessage.split("\n").map((line, i) => /* @__PURE__ */ jsxs8(
+                  /* @__PURE__ */ jsx14("div", { className: "hw-hero-greeting", children: welcomeMessage.split("\n").map((line, i) => /* @__PURE__ */ jsxs9(
                     "span",
                     {
                       className: i === 0 ? "hw-hero-greeting-name" : "hw-hero-greeting-question",
                       children: [
-                        i > 0 && /* @__PURE__ */ jsx13("br", {}),
+                        i > 0 && /* @__PURE__ */ jsx14("br", {}),
                         line
                       ]
                     },
                     i
                   )) }),
-                  /* @__PURE__ */ jsx13("div", { className: "hw-hero-subtitle", children: subtitleText })
+                  /* @__PURE__ */ jsx14("div", { className: "hw-hero-subtitle", children: subtitleText })
                 ] }),
-                /* @__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__ */ jsx14("div", { className: "hw-sheet", children: /* @__PURE__ */ jsxs9("div", { className: "hw-sheet-inner", children: [
+                  /* @__PURE__ */ jsxs9("button", { type: "button", className: "hw-card", onClick: openNewConversation, children: [
+                    /* @__PURE__ */ jsxs9("div", { className: "hw-card-body", children: [
+                      /* @__PURE__ */ jsx14("div", { className: "hw-card-title", children: t("widget.send_us_message") }),
+                      /* @__PURE__ */ jsx14("div", { className: "hw-card-meta", children: t("widget.reply_time") })
                     ] }),
-                    /* @__PURE__ */ jsx13("div", { className: "hw-card-arrow", children: /* @__PURE__ */ jsx13(SendIcon, {}) })
+                    /* @__PURE__ */ jsx14("div", { className: "hw-card-arrow", children: /* @__PURE__ */ jsx14(SendIcon, {}) })
                   ] }),
-                  /* @__PURE__ */ jsx13(
+                  announcementTabs.length > 0 && /* @__PURE__ */ jsx14(
+                    WhatsNewCard,
+                    {
+                      getUnseenEntries,
+                      announcementTabs,
+                      onViewAll: () => {
+                        switchTab(`content:${announcementTabs[0].id}`);
+                      },
+                      onSelect: (slug, tabId) => {
+                        switchTab(`content:${tabId}`);
+                        setContentDetailSlug(slug);
+                        setSubView("content-detail");
+                        markEntrySeen(slug);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx14(
                     HomeView,
                     {
                       conversations,
@@ -4389,17 +4714,17 @@ function DefaultWidget({ hideLauncher = false } = {}) {
                   )
                 ] }) })
               ] }),
-              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(
+              subView === null && activeTab === "messages" && /* @__PURE__ */ jsxs9("div", { className: "hw-header hw-header--centered", children: [
+                /* @__PURE__ */ jsx14("div", { className: "hw-header-spacer" }),
+                /* @__PURE__ */ jsx14("div", { className: "hw-header-title", children: t("widget.messages") }),
+                /* @__PURE__ */ jsx14(
                   "button",
                   {
                     type: "button",
                     className: "hw-header-close",
                     onClick: handleClose,
                     "aria-label": t("widget.aria_close"),
-                    children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
+                    children: /* @__PURE__ */ jsx14(XIcon, { size: 20 })
                   }
                 )
               ] }),
@@ -4407,23 +4732,23 @@ function DefaultWidget({ hideLauncher = false } = {}) {
                 const tabId = activeTab.replace("content:", "");
                 const contentTab = contentTabs.find((t2) => t2.id === tabId);
                 if (!contentTab) return null;
-                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(
+                return /* @__PURE__ */ jsxs9("div", { className: "hw-header hw-header--centered", children: [
+                  /* @__PURE__ */ jsx14("div", { className: "hw-header-spacer" }),
+                  /* @__PURE__ */ jsx14("div", { className: "hw-header-title", children: resolveLabel2(contentTab.label) }),
+                  /* @__PURE__ */ jsx14(
                     "button",
                     {
                       type: "button",
                       className: "hw-header-close",
                       onClick: handleClose,
                       "aria-label": t("widget.aria_close"),
-                      children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
+                      children: /* @__PURE__ */ jsx14(XIcon, { size: 20 })
                     }
                   )
                 ] });
               })(),
-              (subView !== null || activeTab !== "home") && /* @__PURE__ */ jsxs8("div", { className: "hw-content", children: [
-                subView === null && activeTab === "messages" && /* @__PURE__ */ jsx13(
+              (subView !== null || activeTab !== "home") && /* @__PURE__ */ jsxs9("div", { className: "hw-content", children: [
+                subView === null && activeTab === "messages" && /* @__PURE__ */ jsx14(
                   MessagesView,
                   {
                     conversations,
@@ -4431,7 +4756,7 @@ function DefaultWidget({ hideLauncher = false } = {}) {
                     onNewClick: openNewConversation
                   }
                 ),
-                subView === "new" && /* @__PURE__ */ jsx13(
+                subView === "new" && /* @__PURE__ */ jsx14(
                   NewConversationView,
                   {
                     text: newText,
@@ -4441,12 +4766,12 @@ function DefaultWidget({ hideLauncher = false } = {}) {
                     welcomeMessage
                   }
                 ),
-                subView === "conversation" && activeId && /* @__PURE__ */ jsx13(ConversationView, { conversationId: activeId }),
+                subView === "conversation" && activeId && /* @__PURE__ */ jsx14(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__ */ jsx13(
+                  return /* @__PURE__ */ jsx14(
                     ContentTabView,
                     {
                       tab: contentTab,
@@ -4465,27 +4790,42 @@ function DefaultWidget({ hideLauncher = false } = {}) {
                   );
                 })()
               ] }),
-              showTabBar && /* @__PURE__ */ jsx13(
+              showTabBar && /* @__PURE__ */ jsx14(
                 TabBar,
                 {
                   activeTab,
                   onTabChange: switchTab,
                   unreadCount: totalUnread,
                   contentTabs,
-                  showMessagesTab: agentConfig?.showMessagesTab ?? true
+                  showMessagesTab: agentConfig?.showMessagesTab ?? true,
+                  unseenAnnouncementCount
                 }
               ),
-              /* @__PURE__ */ jsxs8("div", { className: "hw-powered", children: [
+              /* @__PURE__ */ jsxs9("div", { className: "hw-powered", children: [
                 t("widget.powered_by"),
                 " ",
-                /* @__PURE__ */ jsx13("a", { href: "https://helpway.ai", target: "_blank", rel: "noopener noreferrer", children: "Helpway" })
+                /* @__PURE__ */ jsx14("a", { href: "https://helpway.ai", target: "_blank", rel: "noopener noreferrer", children: "Helpway" })
               ] })
             ]
           }
         ),
-        isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsx13(MessagePreview, { onOpen: handleBubbleClick }),
-        /* @__PURE__ */ jsx13(WidgetDebugOverlay, {}),
-        isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */ jsxs8(
+        isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsx14(MessagePreview, { onOpen: handleBubbleClick, avatar: /* @__PURE__ */ jsx14(WidgetLogo, {}) }),
+        isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsx14(
+          AnnouncementPreviews,
+          {
+            onOpen: (slug, tabId) => {
+              markEntrySeen(slug);
+              handleBubbleClick();
+              setTimeout(() => {
+                switchTab(`content:${tabId}`);
+                setContentDetailSlug(slug);
+                setSubView("content-detail");
+              }, 50);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx14(WidgetDebugOverlay, {}),
+        isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */ jsxs9(
           "button",
           {
             ref: bubbleRef,
@@ -4502,22 +4842,25 @@ function DefaultWidget({ hideLauncher = false } = {}) {
             "aria-expanded": isOpen,
             "aria-haspopup": "dialog",
             children: [
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14(
                 "span",
                 {
                   className: `hw-bubble-icon hw-bubble-icon--bot ${isOpen ? "hw-bubble-icon--hidden" : ""}`,
-                  children: /* @__PURE__ */ jsx13(LauncherIcon, {})
+                  children: /* @__PURE__ */ jsx14(LauncherIcon, {})
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14(
                 "span",
                 {
                   className: `hw-bubble-icon hw-bubble-icon--close ${!isOpen ? "hw-bubble-icon--hidden" : ""}`,
-                  children: /* @__PURE__ */ jsx13(XIcon, { size: 24 })
+                  children: /* @__PURE__ */ jsx14(XIcon, { size: 24 })
                 }
               ),
-              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 })
+              launcherStyle !== "icon" && !isOpen && /* @__PURE__ */ jsx14("span", { className: "hw-bubble-label", children: launcherStyle === "help" ? t("widget.help") : companyName }),
+              !isOpen && (totalUnread > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsxs9("div", { className: "hw-bubble-badge", children: [
+                totalUnread > 0 ? totalUnread : "",
+                totalUnread === 0 && unseenAnnouncementCount > 0 && /* @__PURE__ */ jsx14("span", { className: "hw-bubble-badge-dot" })
+              ] })
             ]
           }
         )
@@ -4530,10 +4873,11 @@ function TabBar({
   onTabChange,
   unreadCount,
   contentTabs,
-  showMessagesTab = true
+  showMessagesTab = true,
+  unseenAnnouncementCount = 0
 }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "hw-tabs", role: "tablist", children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: "hw-tabs", role: "tablist", children: [
+    /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -4542,12 +4886,12 @@ function TabBar({
         role: "tab",
         "aria-selected": activeTab === "home",
         children: [
-          /* @__PURE__ */ jsx13(HomeIcon, {}),
-          /* @__PURE__ */ jsx13("span", { children: t("widget.home") })
+          /* @__PURE__ */ jsx14(HomeIcon, {}),
+          /* @__PURE__ */ jsx14("span", { children: t("widget.home") })
         ]
       }
     ),
-    showMessagesTab && /* @__PURE__ */ jsxs8(
+    showMessagesTab && /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -4556,15 +4900,15 @@ function TabBar({
         role: "tab",
         "aria-selected": activeTab === "messages",
         children: [
-          /* @__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__ */ jsxs9("span", { className: "hw-tabs-icon-wrap", children: [
+            /* @__PURE__ */ jsx14(MessagesIcon, {}),
+            unreadCount > 0 && /* @__PURE__ */ jsx14("span", { className: "hw-tabs-badge", children: unreadCount > 99 ? "99+" : unreadCount })
           ] }),
-          /* @__PURE__ */ jsx13("span", { children: t("widget.messages") })
+          /* @__PURE__ */ jsx14("span", { children: t("widget.messages") })
         ]
       }
     ),
-    contentTabs.map((tab) => /* @__PURE__ */ jsxs8(
+    contentTabs.map((tab) => /* @__PURE__ */ jsxs9(
       "button",
       {
         type: "button",
@@ -4573,8 +4917,11 @@ function TabBar({
         role: "tab",
         "aria-selected": activeTab === `content:${tab.id}`,
         children: [
-          /* @__PURE__ */ jsx13(ContentTabIconComponent, { icon: tab.icon }),
-          /* @__PURE__ */ jsx13("span", { children: resolveLabel2(tab.label) })
+          /* @__PURE__ */ jsxs9("span", { className: "hw-tabs-icon-wrap", children: [
+            /* @__PURE__ */ jsx14(ContentTabIconComponent, { icon: tab.icon }),
+            tab.isAnnouncements && unseenAnnouncementCount > 0 && /* @__PURE__ */ jsx14("span", { className: "hw-tabs-dot" })
+          ] }),
+          /* @__PURE__ */ jsx14("span", { children: resolveLabel2(tab.label) })
         ]
       },
       tab.id
@@ -4588,9 +4935,9 @@ function HomeView({
 }) {
   const recent = conversations.slice(0, 3);
   if (recent.length === 0) return null;
-  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(
+  return /* @__PURE__ */ jsxs9("div", { className: "hw-recent-card", children: [
+    /* @__PURE__ */ jsx14("div", { className: "hw-recent-header", children: t("widget.recent_conversations") }),
+    recent.map((conv, i) => /* @__PURE__ */ jsx14(
       ConversationRow,
       {
         conversation: conv,
@@ -4599,7 +4946,7 @@ function HomeView({
       },
       conv.id
     )),
-    conversations.length > 3 && /* @__PURE__ */ jsx13("button", { type: "button", className: "hw-recent-see-all", onClick: onMessagesClick, children: t("widget.see_all") })
+    conversations.length > 3 && /* @__PURE__ */ jsx14("button", { type: "button", className: "hw-recent-see-all", onClick: onMessagesClick, children: t("widget.see_all") })
   ] });
 }
 function MessagesView({
@@ -4608,28 +4955,28 @@ function MessagesView({
   onNewClick
 }) {
   if (conversations.length === 0) {
-    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__ */ jsxs9("div", { className: "hw-empty-state", children: [
+      /* @__PURE__ */ jsx14("div", { className: "hw-empty-icon-wrap", children: /* @__PURE__ */ jsx14(MessagesIcon, {}) }),
+      /* @__PURE__ */ jsx14("div", { className: "hw-empty-title", children: t("widget.no_messages") }),
+      /* @__PURE__ */ jsx14("div", { className: "hw-empty-desc", children: t("widget.no_messages_desc") }),
+      /* @__PURE__ */ jsx14("button", { type: "button", className: "hw-empty-btn", onClick: onNewClick, children: t("widget.start_conversation") })
     ] });
   }
-  return /* @__PURE__ */ jsx13("div", { className: "hw-msgs-tab", children: conversations.map((conv) => /* @__PURE__ */ jsx13(ConversationCard, { conversation: conv, onSelect }, conv.id)) });
+  return /* @__PURE__ */ jsx14("div", { className: "hw-msgs-tab", children: conversations.map((conv) => /* @__PURE__ */ jsx14(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__ */ 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) })
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx14("div", { className: `hw-conv-card-avatar${isTeam ? " hw-conv-card-avatar--team" : ""}`, children: isTeam ? conv.lastMessageSenderImage ? /* @__PURE__ */ jsx14("img", { src: conv.lastMessageSenderImage, alt: displayName, className: "hw-conv-card-avatar-img" }) : /* @__PURE__ */ jsx14("span", { className: "hw-conv-card-avatar-initials", children: displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx14(WidgetLogo, {}) }),
+    /* @__PURE__ */ jsxs9("div", { className: "hw-conv-card-content", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "hw-conv-card-top", children: [
+        /* @__PURE__ */ jsx14("span", { className: "hw-conv-card-name", children: displayName }),
+        conv.lastMessageAt && /* @__PURE__ */ jsx14("span", { className: "hw-conv-card-time", children: formatRelativeTime(conv.lastMessageAt) })
       ] }),
-      /* @__PURE__ */ jsx13("div", { className: "hw-conv-card-preview", children: preview })
+      /* @__PURE__ */ jsx14("div", { className: "hw-conv-card-preview", children: preview })
     ] })
   ] });
 }
@@ -4638,15 +4985,15 @@ function ConversationCard({
   onSelect
 }) {
   const hasUnread = conv.unreadCount > 0;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "button",
     {
       type: "button",
       className: `hw-conv-card ${hasUnread ? "hw-conv-card--unread" : ""}`,
       onClick: () => onSelect(conv.id),
       children: [
-        /* @__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 })
+        /* @__PURE__ */ jsx14("div", { className: "hw-conv-card-row", children: /* @__PURE__ */ jsx14(ConvCardBody, { conv }) }),
+        hasUnread && /* @__PURE__ */ jsx14("div", { className: "hw-conv-card-badge", children: conv.unreadCount })
       ]
     }
   );
@@ -4657,15 +5004,15 @@ function ConversationRow({
   isLast
 }) {
   const hasUnread = conv.unreadCount > 0;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "button",
     {
       type: "button",
       className: `hw-recent-row ${hasUnread ? "hw-recent-row--unread" : ""} ${isLast ? "hw-recent-row--last" : ""}`,
       onClick: () => onSelect(conv.id),
       children: [
-        /* @__PURE__ */ jsx13(ConvCardBody, { conv }),
-        hasUnread && /* @__PURE__ */ jsx13("div", { className: "hw-recent-row-badge", children: conv.unreadCount })
+        /* @__PURE__ */ jsx14(ConvCardBody, { conv }),
+        hasUnread && /* @__PURE__ */ jsx14("div", { className: "hw-recent-row-badge", children: conv.unreadCount })
       ]
     }
   );
@@ -4673,10 +5020,10 @@ function ConversationRow({
 function InlineEmailPrompt({ conversationId }) {
   const { client, store } = useWidgetContext();
   const updateContact = useWidgetStore((s) => s.updateVisitorContact);
-  const [email, setEmail] = useState12("");
-  const [isSubmitting, setIsSubmitting] = useState12(false);
-  const [isSuccess, setIsSuccess] = useState12(false);
-  const [hasError, setHasError] = useState12(false);
+  const [email, setEmail] = useState13("");
+  const [isSubmitting, setIsSubmitting] = useState13(false);
+  const [isSuccess, setIsSuccess] = useState13(false);
+  const [hasError, setHasError] = useState13(false);
   const handleSubmit = async () => {
     const trimmed = email.trim();
     if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
@@ -4717,23 +5064,23 @@ function InlineEmailPrompt({ conversationId }) {
     }
   };
   if (isSuccess) {
-    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" }) }),
+    return /* @__PURE__ */ jsxs9("div", { className: "hw-email-card hw-email-card--success", children: [
+      /* @__PURE__ */ jsx14("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "#22c55e", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx14("polyline", { points: "20 6 9 17 4 12" }) }),
       t("widget.email_saved")
     ] });
   }
-  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" })
+  return /* @__PURE__ */ jsxs9("div", { className: "hw-email-card", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "hw-email-card-header", children: [
+      /* @__PURE__ */ jsx14("div", { className: "hw-email-card-icon", children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx14("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+        /* @__PURE__ */ jsx14("path", { d: "M22 7l-10 7L2 7" })
       ] }) }),
-      /* @__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__ */ jsxs9("div", { children: [
+        /* @__PURE__ */ jsx14("p", { className: "hw-email-card-title", children: t("widget.email_title") }),
+        /* @__PURE__ */ jsx14("p", { className: "hw-email-card-subtitle", children: t("widget.email_subtitle") })
       ] })
     ] }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "input",
       {
         type: "email",
@@ -4749,14 +5096,14 @@ function InlineEmailPrompt({ conversationId }) {
         placeholder: t("widget.email_placeholder")
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
         className: "hw-email-card-submit",
         onClick: handleSubmit,
         disabled: isSubmitting || !email.trim(),
-        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")
+        children: isSubmitting ? /* @__PURE__ */ jsx14("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx14("animate", { attributeName: "stroke-dashoffset", values: "32;0", dur: "1s", repeatCount: "indefinite" }) }) }) : t("widget.email_continue")
       }
     )
   ] });
@@ -4768,8 +5115,8 @@ function NewConversationView({
   isSubmitting,
   welcomeMessage
 }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "hw-new", children: [
-    /* @__PURE__ */ jsx13("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs9("div", { className: "hw-new", children: [
+    /* @__PURE__ */ jsx14("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx14(
       MessageBubble,
       {
         text: welcomeMessage,
@@ -4777,7 +5124,7 @@ function NewConversationView({
         parts: null
       }
     ) }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       Composer,
       {
         text,
@@ -4822,27 +5169,27 @@ function ConversationView({ conversationId }) {
   const needsEmailPostReply = !!agentConfig?.requireVisitorEmail && !hasEmail && visitorMessageCount >= 2 && hasAiReply;
   const needsEmail = needsEmailPostReply || !!emailGateConvId;
   if (isLoading && items.length === 0) {
-    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 } })
+    return /* @__PURE__ */ jsx14("div", { className: "hw-messages", children: /* @__PURE__ */ jsxs9("div", { className: "hw-skeleton-messages", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "hw-skeleton-msg", children: [
+        /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-avatar" }),
+        /* @__PURE__ */ jsxs9("div", { className: "hw-skeleton-bubble", children: [
+          /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 140 } }),
+          /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } })
         ] })
       ] }),
-      /* @__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 } })
+      /* @__PURE__ */ jsx14("div", { className: "hw-skeleton-msg hw-skeleton-msg--right", children: /* @__PURE__ */ jsx14("div", { className: "hw-skeleton-bubble", style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } }) }) }),
+      /* @__PURE__ */ jsxs9("div", { className: "hw-skeleton-msg", children: [
+        /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-avatar" }),
+        /* @__PURE__ */ jsxs9("div", { className: "hw-skeleton-bubble", children: [
+          /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 180 } }),
+          /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
+          /* @__PURE__ */ jsx14("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 80 } })
         ] })
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(
       MessageList,
       {
         items,
@@ -4854,63 +5201,55 @@ function ConversationView({ conversationId }) {
         onLoadMore: loadMore
       }
     ),
-    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__ */ jsx13(
-          "button",
-          {
-            type: "button",
-            className: "hw-send-error-retry",
-            onClick: () => {
-              clearSendError();
-              submit();
-            },
-            children: t("widget.retry")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx13(
-        Composer,
+    isResolved && /* @__PURE__ */ jsx14(ResolvedBanner, { conversationId }),
+    needsEmail && /* @__PURE__ */ jsx14(InlineEmailPrompt, { conversationId: emailGateConvId ?? void 0 }),
+    sendError && /* @__PURE__ */ jsxs9("div", { className: "hw-send-error", children: [
+      sendError,
+      /* @__PURE__ */ jsx14(
+        "button",
         {
-          text,
-          onTextChange: setText,
-          onSubmit: submit,
-          onTyping: setTyping,
-          isSubmitting,
-          attachments,
-          onAddFiles: addFiles,
-          onRemoveAttachment: removeAttachment,
-          disabled: needsEmail
+          type: "button",
+          className: "hw-send-error-retry",
+          onClick: () => {
+            clearSendError();
+            submit();
+          },
+          children: t("widget.retry")
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx14(
+      Composer,
+      {
+        text,
+        onTextChange: setText,
+        onSubmit: submit,
+        onTyping: setTyping,
+        isSubmitting,
+        attachments,
+        onAddFiles: addFiles,
+        onRemoveAttachment: removeAttachment,
+        disabled: needsEmail
+      }
+    )
   ] });
 }
 function ResolvedBanner({ conversationId }) {
   const { client } = useWidgetContext();
-  const [csatRating, setCsatRating] = useState12(null);
-  const [csatSubmitted, setCsatSubmitted] = useState12(false);
-  const handleReopen = async () => {
-    try {
-      await client.widget.sendMessage.mutate({ conversationId, text: t("widget.send_followup") });
-    } catch (err) {
-      console.error("Failed to reopen:", err);
-    }
-  };
+  const [csatRating, setCsatRating] = useState13(null);
+  const [csatSubmitted, setCsatSubmitted] = useState13(false);
   const handleCsat = (rating) => {
     setCsatRating(rating);
     setCsatSubmitted(true);
     client.widget.sendCsat.mutate({ conversationId, rating }).catch(() => {
     });
   };
-  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(
+  return /* @__PURE__ */ jsxs9("div", { className: "hw-resolved", children: [
+    /* @__PURE__ */ jsx14("div", { className: "hw-resolved-text", children: t("widget.resolved_text") }),
+    !csatSubmitted ? /* @__PURE__ */ jsxs9("div", { className: "hw-csat", children: [
+      /* @__PURE__ */ jsx14("div", { className: "hw-csat-label", children: t("widget.csat_label") }),
+      /* @__PURE__ */ jsxs9("div", { className: "hw-csat-buttons", children: [
+        /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -4920,7 +5259,7 @@ function ResolvedBanner({ conversationId }) {
             children: "\u{1F44D}"
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -4931,86 +5270,123 @@ function ResolvedBanner({ conversationId }) {
           }
         )
       ] })
-    ] }) : /* @__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") }) })
+    ] }) : /* @__PURE__ */ jsx14("div", { className: "hw-csat-thanks", children: t("widget.csat_thanks") })
   ] });
 }
-function MessagePreview({ onOpen }) {
-  const preview = useWidgetStore((s) => s.incomingPreview);
-  const dismissPreview = useWidgetStore((s) => s.dismissPreview);
-  const setActiveConversation = useWidgetStore((s) => s.setActiveConversation);
+function stripMarkdown(text) {
+  return text.replace(/^#{1,6}\s+/gm, "").replace(/\*\*(.+?)\*\*/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/^[-*+]\s+/gm, "").replace(/\[(.+?)\]\(.+?\)/g, "$1").replace(/`(.+?)`/g, "$1").replace(/\n{2,}/g, " ").replace(/\n/g, " ").trim();
+}
+function AnnouncementPreviews({ onOpen }) {
+  const previews = useWidgetStore((s) => s.announcementPreviews);
+  const dismissPreview = useWidgetStore((s) => s.dismissAnnouncementPreview);
   const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
-  const [closing, setClosing] = useState12(false);
-  useEffect11(() => {
-    if (!preview || preview.quickReplies) return;
-    const timer = setTimeout(() => {
-      setClosing(true);
-      setTimeout(() => dismissPreview(), 200);
-    }, 8e3);
-    return () => clearTimeout(timer);
-  }, [preview, dismissPreview]);
-  if (!preview) return null;
+  if (previews.length === 0) return null;
+  return /* @__PURE__ */ jsx14("div", { className: "hw-preview-stack", children: previews.map((preview) => /* @__PURE__ */ jsx14(
+    AnnouncementPreviewItem,
+    {
+      preview,
+      agentName,
+      onOpen,
+      onDismiss: (slug) => dismissPreview(slug)
+    },
+    preview.slug
+  )) });
+}
+function AnnouncementPreviewItem({
+  preview,
+  agentName,
+  onOpen,
+  onDismiss
+}) {
+  const [closing, setClosing] = useState13(false);
   const handleClose = (e) => {
     e.stopPropagation();
     setClosing(true);
     setTimeout(() => {
-      dismissPreview();
+      onDismiss(preview.slug);
       setClosing(false);
     }, 200);
   };
-  const handleClick = () => {
-    const targetConvId = preview.conversationId;
-    dismissPreview();
-    setActiveConversation(targetConvId);
-    onOpen();
-  };
-  const messages = preview.messages?.length ? preview.messages : [{ text: preview.text }];
-  const hasQr = preview.quickReplies && preview.quickReplies.options.length > 0;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
-      className: `hw-preview ${closing ? "hw-preview--closing" : ""}`,
-      onClick: handleClick,
+      className: `hw-preview hw-preview--announcement ${closing ? "hw-preview--closing" : ""}`,
+      onClick: () => onOpen(preview.slug, preview.tabId),
       role: "button",
       tabIndex: 0,
       children: [
-        /* @__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(
+        /* @__PURE__ */ jsxs9("div", { className: "hw-preview-header", children: [
+          /* @__PURE__ */ jsx14("div", { className: "hw-preview-avatar", children: /* @__PURE__ */ jsx14(WidgetLogo, {}) }),
+          /* @__PURE__ */ jsx14("div", { className: "hw-preview-name", children: agentName }),
+          /* @__PURE__ */ jsx14(
             "button",
             {
               type: "button",
               className: "hw-preview-close",
               onClick: handleClose,
               "aria-label": t("widget.aria_dismiss"),
-              children: /* @__PURE__ */ jsx13(XIcon, { size: 20 })
+              children: /* @__PURE__ */ jsx14(XIcon, { size: 20 })
             }
           )
         ] }),
-        messages.map((m, i) => /* @__PURE__ */ jsx13("div", { className: "hw-preview-body", children: m.text }, i)),
-        hasQr && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          preview.quickReplies.prompt && /* @__PURE__ */ jsx13("div", { className: "hw-preview-body", children: preview.quickReplies.prompt }),
-          /* @__PURE__ */ jsx13("div", { className: "hw-preview-quick-replies", children: preview.quickReplies.options.map((opt) => /* @__PURE__ */ jsx13(
-            "button",
-            {
-              type: "button",
-              className: "hw-preview-qr-btn",
-              onClick: (e) => {
-                e.stopPropagation();
-                dismissPreview();
-                setActiveConversation(preview.conversationId);
-                onOpen();
-              },
-              children: opt.label
-            },
-            opt.id
-          )) })
-        ] })
+        preview.badge && /* @__PURE__ */ jsx14("div", { className: "hw-announcement-badge", children: preview.badge }),
+        /* @__PURE__ */ jsx14("div", { className: "hw-preview-body hw-preview-body--title", children: preview.title }),
+        preview.body && (() => {
+          const clean = stripMarkdown(preview.body);
+          return /* @__PURE__ */ jsx14("div", { className: "hw-preview-body hw-preview-body--desc", children: clean.length > 120 ? `${clean.slice(0, 120)}\u2026` : clean });
+        })()
       ]
     }
   );
 }
+function WhatsNewCard({
+  getUnseenEntries,
+  announcementTabs,
+  onViewAll,
+  onSelect
+}) {
+  const unseen = getUnseenEntries();
+  if (unseen.length === 0) return null;
+  const display = unseen.slice(0, 3);
+  const badgeFieldMap = new Map(
+    announcementTabs.map((t2) => [t2.id, t2.display?.badgeField])
+  );
+  return /* @__PURE__ */ jsxs9("div", { className: "hw-whats-new", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "hw-whats-new-header", children: [
+      /* @__PURE__ */ jsx14("span", { className: "hw-whats-new-title", children: resolveLabel2("widget.whats_new") }),
+      /* @__PURE__ */ jsxs9("button", { type: "button", className: "hw-whats-new-view-all", onClick: onViewAll, children: [
+        resolveLabel2("widget.view_all"),
+        " \u2192"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx14("div", { className: "hw-whats-new-list", children: display.map((entry) => {
+      const badgeField = badgeFieldMap.get(entry.tabId);
+      return /* @__PURE__ */ jsxs9(
+        "button",
+        {
+          type: "button",
+          className: "hw-whats-new-item",
+          onClick: () => onSelect(entry.slug, entry.tabId),
+          children: [
+            badgeField && entry.customFields[badgeField] && /* @__PURE__ */ jsxs9("div", { className: "hw-whats-new-item-top", children: [
+              /* @__PURE__ */ jsx14("span", { className: "hw-whats-new-badge", children: entry.customFields[badgeField] }),
+              entry.publishedAt && /* @__PURE__ */ jsx14("span", { className: "hw-whats-new-time", children: formatRelativeTime(entry.publishedAt) })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "hw-whats-new-item-title", children: [
+              entry.title,
+              !badgeField && entry.publishedAt && /* @__PURE__ */ jsx14("span", { className: "hw-whats-new-time-inline", children: formatRelativeTime(entry.publishedAt) })
+            ] }),
+            entry.body && (() => {
+              const clean = stripMarkdown(entry.body);
+              return /* @__PURE__ */ jsx14("div", { className: "hw-whats-new-item-body", children: clean.length > 80 ? `${clean.slice(0, 80)}\u2026` : clean });
+            })()
+          ]
+        },
+        entry.slug
+      );
+    }) })
+  ] });
+}
 
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
@@ -5035,10 +5411,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:where(.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@keyframes hw-bubble-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.6);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\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  animation: hw-bubble-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;\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-agent-img.hw-agent-img--logo {\n  object-fit: contain;\n  padding: 10px;\n  box-sizing: border-box;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img.hw-agent-img--logo {\n  padding: 10px;\n  box-sizing: border-box;\n  object-fit: contain;\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,\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}\n.hw-hero-bot-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.hw-hero-bot-icon .hw-agent-img,\n.hw-hero-bot-icon .hw-agent-icon {\n  border-radius: inherit;\n  overflow: hidden;\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  background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));\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  border-radius: inherit;\n}\n.hw-header-bot-icon .hw-agent-img,\n.hw-header-bot-icon .hw-agent-icon {\n  border-radius: inherit;\n  overflow: hidden;\n}\n.hw-header-bot-icon .hw-agent-img {\n  object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n  padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n  box-sizing: border-box;\n}\n.hw-widget[data-has-avatar=true] {\n  --hw-agent-bg-default: var(--hw-primary);\n  --hw-agent-fit-default: contain;\n  --hw-agent-pad-default: 6px;\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-primary);\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-agent-bg, var(--hw-agent-bg-default, 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 .hw-agent-img {\n  object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n  padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n  box-sizing: border-box;\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-primary);\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-quick-replies {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 8px;\n}\n.hw-quick-reply-btn {\n  font: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  padding: 6px 14px;\n  border-radius: 18px;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n  background: var(--hw-bg, #fff);\n  color: var(--hw-text-1, #1a1a1a);\n  cursor: pointer;\n  transition:\n    background 120ms ease,\n    border-color 120ms ease,\n    box-shadow 120ms ease,\n    transform 80ms ease;\n  line-height: 1.3;\n}\n.hw-quick-reply-btn:hover:not(:disabled) {\n  border-color: var(--hw-primary);\n  background: color-mix(in srgb, var(--hw-primary) 8%, transparent);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n.hw-quick-reply-btn:active:not(:disabled) {\n  transform: scale(0.97);\n}\n.hw-quick-reply-btn:disabled {\n  cursor: default;\n  opacity: 0.4;\n}\n.hw-quick-reply-btn[data-tapped=true] {\n  background: var(--hw-primary);\n  color: white;\n  border-color: var(--hw-primary);\n  opacity: 1;\n}\n.hw-quick-replies[data-cancelled=true] .hw-quick-reply-btn {\n  border-color: rgba(0, 0, 0, 0.08);\n  color: var(--hw-text-muted, #9ca3af);\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: 2px;\n  padding: 0 4px;\n  font-variant-numeric: tabular-nums;\n}\n.hw-msg-time {\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-streaming-cursor {\n  display: inline-block;\n  width: 2px;\n  height: 1em;\n  background: currentColor;\n  opacity: 0.6;\n  margin-left: 1px;\n  vertical-align: text-bottom;\n  animation: hw-cursor-blink 0.8s step-end infinite;\n}\n@keyframes hw-cursor-blink {\n  50% {\n    opacity: 0;\n  }\n}\n.hw-link-preview {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 10px;\n  overflow: hidden;\n  text-decoration: none;\n  color: inherit;\n  margin-top: 6px;\n  transition: background 0.15s;\n}\n.hw-link-preview:hover {\n  background: rgba(0, 0, 0, 0.02);\n}\n.hw-link-preview-img {\n  width: 100%;\n  max-height: 140px;\n  object-fit: cover;\n}\n.hw-link-preview-body {\n  padding: 10px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n.hw-link-preview-favicon {\n  width: 16px;\n  height: 16px;\n  border-radius: 2px;\n}\n.hw-link-preview-title {\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.3;\n  color: var(--hw-text, #1a1a1a);\n}\n.hw-link-preview-desc {\n  font-size: 12px;\n  line-height: 1.4;\n  color: var(--hw-text-muted, #6b7280);\n}\n.hw-link-preview-url {\n  font-size: 11px;\n  color: var(--hw-text-muted, #9ca3af);\n}\n.hw-msg-links {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-width: 280px;\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  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: 220px;\n  background: transparent;\n  color: var(--hw-text);\n  field-sizing: content;\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-agent-bg, var(--hw-agent-bg-default, 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-avatar .hw-agent-img {\n  object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n  padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n  box-sizing: border-box;\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.22, 1, 0.36, 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@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: 4px 14px;\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--hw-text-2);\n}\n.hw-preview-body:first-of-type {\n  padding-top: 8px;\n}\n.hw-preview-body:last-child {\n  padding-bottom: 14px;\n}\n.hw-preview-prompt {\n  padding: 2px 14px 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--hw-text-1);\n}\n.hw-preview-quick-replies {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 0 14px 14px;\n}\n.hw-preview-qr-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.3;\n  color: var(--hw-brand, #000);\n  background: transparent;\n  border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.1));\n  border-radius: 18px;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.hw-preview-qr-btn:hover {\n  background: var(--hw-hover, rgba(0, 0, 0, 0.04));\n  border-color: var(--hw-brand, #000);\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}\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-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-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:where(.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@keyframes hw-bubble-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.6);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\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  animation: hw-bubble-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;\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-agent-img.hw-agent-img--logo {\n  object-fit: contain;\n  padding: 10px;\n  box-sizing: border-box;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img.hw-agent-img--logo {\n  padding: 10px;\n  box-sizing: border-box;\n  object-fit: contain;\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 - 112px));\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,\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}\n.hw-hero-bot-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.hw-hero-bot-icon .hw-agent-img,\n.hw-hero-bot-icon .hw-agent-icon {\n  border-radius: inherit;\n  overflow: hidden;\n  object-fit: contain;\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  background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));\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  border-radius: inherit;\n}\n.hw-header-bot-icon .hw-agent-img,\n.hw-header-bot-icon .hw-agent-icon {\n  border-radius: inherit;\n  overflow: hidden;\n}\n.hw-header-bot-icon .hw-agent-img {\n  object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n  padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n  box-sizing: border-box;\n}\n.hw-widget[data-has-avatar=true] {\n  --hw-agent-bg-default: var(--hw-primary);\n  --hw-agent-fit-default: contain;\n  --hw-agent-pad-default: 6px;\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-primary);\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-agent-bg, var(--hw-agent-bg-default, 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 .hw-agent-img {\n  object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n  padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n  box-sizing: border-box;\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-primary);\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  overflow: visible;\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-quick-replies {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 8px;\n}\n.hw-quick-reply-btn {\n  font: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  padding: 6px 14px;\n  border-radius: 18px;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n  background: var(--hw-bg, #fff);\n  color: var(--hw-text-1, #1a1a1a);\n  cursor: pointer;\n  transition:\n    background 120ms ease,\n    border-color 120ms ease,\n    box-shadow 120ms ease,\n    transform 80ms ease;\n  line-height: 1.3;\n}\n.hw-quick-reply-btn:hover:not(:disabled) {\n  border-color: var(--hw-primary);\n  background: color-mix(in srgb, var(--hw-primary) 8%, transparent);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n.hw-quick-reply-btn:active:not(:disabled) {\n  transform: scale(0.97);\n}\n.hw-quick-reply-btn:disabled {\n  cursor: default;\n  opacity: 0.4;\n}\n.hw-quick-reply-btn[data-tapped=true] {\n  background: var(--hw-primary);\n  color: white;\n  border-color: var(--hw-primary);\n  opacity: 1;\n}\n.hw-quick-replies[data-cancelled=true] .hw-quick-reply-btn {\n  border-color: rgba(0, 0, 0, 0.08);\n  color: var(--hw-text-muted, #9ca3af);\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: 2px;\n  padding: 0 4px;\n  font-variant-numeric: tabular-nums;\n}\n.hw-msg-time {\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-streaming-cursor {\n  display: inline-block;\n  width: 2px;\n  height: 1em;\n  background: currentColor;\n  opacity: 0.6;\n  margin-left: 1px;\n  vertical-align: text-bottom;\n  animation: hw-cursor-blink 0.8s step-end infinite;\n}\n@keyframes hw-cursor-blink {\n  50% {\n    opacity: 0;\n  }\n}\n.hw-link-preview {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 10px;\n  overflow: hidden;\n  text-decoration: none;\n  color: inherit;\n  margin-top: 6px;\n  transition: background 0.15s;\n}\n.hw-link-preview:hover {\n  background: rgba(0, 0, 0, 0.02);\n}\n.hw-link-preview-img {\n  width: 100%;\n  max-height: 140px;\n  object-fit: cover;\n}\n.hw-link-preview-body {\n  padding: 10px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n.hw-link-preview-favicon {\n  width: 16px;\n  height: 16px;\n  border-radius: 2px;\n}\n.hw-link-preview-title {\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.3;\n  color: var(--hw-text, #1a1a1a);\n}\n.hw-link-preview-desc {\n  font-size: 12px;\n  line-height: 1.4;\n  color: var(--hw-text-muted, #6b7280);\n}\n.hw-link-preview-url {\n  font-size: 11px;\n  color: var(--hw-text-muted, #9ca3af);\n}\n.hw-msg-links {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-width: 280px;\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  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: 220px;\n  background: transparent;\n  color: var(--hw-text);\n  field-sizing: content;\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-agent-bg, var(--hw-agent-bg-default, 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-avatar .hw-agent-img {\n  object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n  padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n  box-sizing: border-box;\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.22, 1, 0.36, 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.hw-preview--anchored {\n  position: static;\n  bottom: auto;\n  right: auto;\n  width: 100%;\n  max-width: 100%;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar {\n  background: none;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar img,\n.hw-preview.hw-preview--anchored .hw-preview-avatar svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\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@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: 4px 14px;\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--hw-text-2);\n}\n.hw-preview-body:first-of-type {\n  padding-top: 8px;\n}\n.hw-preview-body:last-child {\n  padding-bottom: 14px;\n}\n.hw-preview-footer {\n  margin-top: 2px;\n  padding: 8px 14px 12px;\n  border-top: 1px solid var(--hw-border);\n  font-size: 11px;\n  line-height: 1.3;\n  color: var(--hw-text-2);\n  opacity: 0.65;\n}\n.hw-preview-prompt {\n  padding: 2px 14px 6px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--hw-text-1);\n}\n.hw-preview-quick-replies {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 0 14px 14px;\n}\n.hw-preview-qr-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 6px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.3;\n  color: var(--hw-brand, #000);\n  background: transparent;\n  border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.1));\n  border-radius: 18px;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.hw-preview-qr-btn:hover {\n  background: var(--hw-hover, rgba(0, 0, 0, 0.04));\n  border-color: var(--hw-brand, #000);\n}\n.hw-preview--closing {\n  animation: hw-preview-out 0.2s ease-in forwards;\n}\n.hw-preview-stack {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.hw-preview-stack .hw-preview {\n  position: relative;\n  bottom: auto;\n  right: auto;\n}\n.hw-preview--announcement {\n  width: 340px;\n}\n.hw-preview--announcement .hw-preview-body--title {\n  font-weight: 600;\n  color: var(--hw-text);\n  font-size: 15px;\n  line-height: 1.3;\n  padding-top: 10px;\n}\n.hw-preview--announcement .hw-preview-body--desc {\n  font-size: 13px;\n  color: var(--hw-text-2);\n  line-height: 1.5;\n  padding-bottom: 16px;\n}\n.hw-announcement-badge {\n  display: inline-block;\n  margin: 8px 14px 0;\n  padding: 2px 8px;\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--hw-primary);\n  background: color-mix(in srgb, var(--hw-primary) 10%, transparent);\n  border-radius: 4px;\n}\n.hw-whats-new {\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-whats-new-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px 0;\n}\n.hw-whats-new-title {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--hw-text-2);\n}\n.hw-whats-new-view-all {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--hw-primary);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  font-family: inherit;\n}\n.hw-whats-new-view-all:hover {\n  opacity: 0.8;\n}\n.hw-whats-new-list {\n  display: flex;\n  flex-direction: column;\n}\n.hw-whats-new-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\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 ease;\n}\n.hw-whats-new-item:last-child {\n  border-bottom: none;\n}\n.hw-whats-new-item:hover {\n  background: rgba(0, 0, 0, 0.03);\n}\n.hw-whats-new-item-top {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.hw-whats-new-badge {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--hw-primary);\n}\n.hw-whats-new-time {\n  font-size: 11px;\n  color: var(--hw-text-3);\n  margin-left: auto;\n}\n.hw-whats-new-item-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--hw-text);\n  line-height: 1.3;\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n}\n.hw-whats-new-time-inline {\n  font-size: 11px;\n  font-weight: 400;\n  color: var(--hw-text-3);\n  margin-left: auto;\n  flex-shrink: 0;\n}\n.hw-whats-new-item-body {\n  font-size: 12px;\n  color: var(--hw-text-2);\n  line-height: 1.4;\n}\n.hw-tabs-dot {\n  position: absolute;\n  top: -2px;\n  right: -6px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--hw-primary);\n  animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.hw-bubble-badge-dot {\n  display: block;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: white;\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  flex: 1;\n  min-height: 0;\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}\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-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-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 jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function HelpwayWidget({
   apiKey,
   apiUrl,
@@ -5055,7 +5431,7 @@ function HelpwayWidget({
   src
 }) {
   const resolvedApiUrl = apiUrl ?? (src ? src.replace(/\/widget\.js$/, "") : void 0);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SupportProvider,
     {
       apiKey,
@@ -5068,16 +5444,16 @@ function HelpwayWidget({
       onClose,
       onUnreadChange,
       theme,
-      children: /* @__PURE__ */ jsx14(DefaultWidget, { hideLauncher })
+      children: /* @__PURE__ */ jsx15(DefaultWidget, { hideLauncher })
     }
   );
 }
 
 // src/hooks/use-realtime.ts
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect14 } from "react";
 function useRealtime(handler) {
   const { ws } = useWidgetContext();
-  useEffect12(() => {
+  useEffect14(() => {
     return ws.onEvent(handler);
   }, [ws, handler]);
 }
@@ -5088,7 +5464,9 @@ export {
   MarkdownContent,
   MessageBubble,
   MessageList,
+  MessagePreview,
   SupportProvider,
+  WidgetLogo,
   clearVisitorId,
   formatRelativeTime,
   formatTime,