@helpway/react 0.17.2 → 0.17.3

package/dist/index.js

@@ -412,7 +412,7 @@ var MEMBER_ROLES = [MemberRole.Owner, MemberRole.Admin, MemberRole.Member];
 var ASSIGNABLE_ROLES = [MemberRole.Admin, MemberRole.Member];
 
 // ../widget-core/src/version.ts
-var SDK_VERSION = "0.17.2".length > 0 ? "0.17.2" : "dev";
+var SDK_VERSION = "0.17.3".length > 0 ? "0.17.3" : "dev";
 
 // ../widget-core/src/ws.ts
 var WebSocketManager = class {
@@ -2355,7 +2355,7 @@ function inferApiUrl() {
 }
 
 // src/themed/default-widget.tsx
-import { createContext as createContext2, useCallback as useCallback14, useContext as useContext2, useEffect as useEffect16, useRef as useRef17, useState as useState17 } from "react";
+import { createContext as createContext2, useCallback as useCallback14, useContext as useContext2, useEffect as useEffect17, useRef as useRef18, useState as useState18 } from "react";
 
 // src/hooks/use-announcements.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
@@ -4078,6 +4078,17 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 function esc(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function safeUrl(raw) {
+  const url = raw.trim();
+  if (url.length === 0) return null;
+  for (let i = 0; i < url.length; i++) {
+    const code = url.charCodeAt(i);
+    if (code <= 32 || code === 127) return null;
+  }
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(url)?.[1]?.toLowerCase();
+  if (scheme === void 0) return url;
+  return scheme === "http" || scheme === "https" || scheme === "mailto" || scheme === "tel" ? url : null;
+}
 var COPY_ICON = `<svg class="hw-code-copy-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M15 9V4.25C15 3.55964 14.4404 3 13.75 3H4.25C3.55964 3 3 3.55964 3 4.25V13.75C3 14.4404 3.55964 15 4.25 15H9M10.25 9H19.75C20.4404 9 21 9.55964 21 10.25V19.75C21 20.4404 20.4404 21 19.75 21H10.25C9.55964 21 9 20.4404 9 19.75V10.25C9 9.55964 9.55964 9 10.25 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 var CHECK_ICON = `<svg class="hw-code-check-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 13L11 16L16 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 function inferCodeLanguage(code, lang) {
@@ -4102,7 +4113,15 @@ function handleCodeBlockClick(e, root) {
     () => flashCopied(btn, true)
   );
 }
-function renderMarkdown(md) {
+function renderMarkdown(source, options = {}) {
+  const md = source.replace(/\u0000/g, "");
+  const inlines = [];
+  const putAway = (html2) => {
+    inlines.push(html2);
+    return `\0INLINE${inlines.length - 1}\0`;
+  };
+  const plainAttr = (value) => value.replace(/\u0000[A-Z]*\d*\u0000?/g, "");
+  const link = (url, label) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${label}</a>`;
   const codeBlocks = [];
   const codeBlockPlaceholder = (i) => `\0CODEBLOCK${i}\0`;
   const body = md.replace(
@@ -4126,12 +4145,18 @@ ${codeBlockPlaceholder(codeBlocks.length - 1)}
 `;
     }
   );
-  let html = body.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/^### (.+)$/gm, "<h3>$1</h3>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^# (.+)$/gm, "<h1>$1</h1>").replace(/^---$/gm, "<hr />").replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/`([^`]+)`/g, "<code>$1</code>").replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" />').replace(
-    /\[([^\]]+)\]\(([^)]+)\)/g,
-    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
-  ).replace(
-    /(?<!")(?<!=)(https?:\/\/[^\s<)]+)/g,
-    '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
+  let html = body.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/^### (.+)$/gm, "<h3>$1</h3>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^# (.+)$/gm, "<h1>$1</h1>").replace(/^---$/gm, "<hr />").replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/`([^`]+)`/g, "<code>$1</code>").replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, src) => {
+    const url = safeUrl(src);
+    if (url === null) return alt;
+    return putAway(
+      options.images === "link" ? link(url, alt.length > 0 ? alt : url) : `<img src="${url}" alt="${plainAttr(alt)}" />`
+    );
+  }).replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label, href) => {
+    const url = safeUrl(href);
+    return url === null ? label : putAway(link(url, label));
+  }).replace(
+    /(?<!&quot;)(https?:\/\/(?:(?!&quot;)[^\s<)\u0000])+)/g,
+    (_match, url) => putAway(link(url, url))
   ).replace(/^&gt; (.+)$/gm, "<blockquote>$1</blockquote>").replace(/^[*-] (.+)$/gm, "<li>$1</li>").replace(/^\d+\. (.+)$/gm, "<oli>$1</oli>");
   const tables = [];
   const tablePlaceholder = (i) => `\0TABLE${i}\0`;
@@ -4180,11 +4205,16 @@ ${tablePlaceholder(tables.length - 1)}
     });
     html = html.replace(/<p>(\s*<div class="hw-code"[\s\S]*?<\/div>\s*)<\/p>/g, "$1");
   }
+  for (let depth = 0; depth < 4 && html.includes("\0INLINE"); depth++) {
+    html = html.replace(/\u0000INLINE(\d+)\u0000/g, (_m, idx) => {
+      return inlines[Number.parseInt(idx, 10)] ?? "";
+    });
+  }
   return html;
 }
 function linkifyText(text) {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(
-    /(https?:\/\/[^\s<]+)/g,
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(
+    /(https?:\/\/(?:(?!&quot;)[^\s<])+)/g,
     '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
   ).replace(/\n/g, "<br />");
 }
@@ -5087,7 +5117,7 @@ function DotsIcon({ size = 24, ...props }) {
 }
 
 // src/themed/message-bubble.tsx
-import { useEffect as useEffect13, useLayoutEffect, useRef as useRef15, useState as useState14 } from "react";
+import { useEffect as useEffect14, useLayoutEffect, useRef as useRef16, useState as useState15 } from "react";
 
 // src/themed/image-fallback.ts
 function imageFileName(url) {
@@ -5460,6 +5490,76 @@ function linkPreviewView(preview) {
 
 // src/themed/message-bubble.tsx
 import { createPortal } from "react-dom";
+
+// src/themed/stream-reveal.ts
+import { useEffect as useEffect13, useRef as useRef15, useState as useState14 } from "react";
+var DRAIN_MS = 300;
+var MAX_CHAR_INTERVAL_MS = 5;
+var MAX_WORD_BACKUP = 24;
+var BARE_MARKER = /(?:^|\n)[ \t]*(?:\d+[.)]|[-*+]|#{1,6})$/;
+function whileArriving(text) {
+  const trimmed = text.trimEnd();
+  const marker = BARE_MARKER.exec(trimmed);
+  return marker ? trimmed.slice(0, marker.index).trimEnd() : trimmed;
+}
+function advanceReveal(cursor, total, dtMs) {
+  const backlog = total - cursor;
+  if (backlog <= 0) return total;
+  const interval = Math.min(MAX_CHAR_INTERVAL_MS, DRAIN_MS / backlog);
+  return Math.min(total, cursor + dtMs / interval);
+}
+function wholeWords(text, cursor) {
+  const end = Math.floor(cursor);
+  if (end >= text.length) return text;
+  if (end <= 0) return "";
+  for (let i = end; i > 0 && end - i <= MAX_WORD_BACKUP; i--) {
+    if (/\s/.test(text.charAt(i))) return text.slice(0, i);
+  }
+  if (end <= MAX_WORD_BACKUP) return "";
+  const code = text.charCodeAt(end - 1);
+  const splitsPair = code >= 55296 && code <= 56319;
+  return text.slice(0, splitsPair ? end - 1 : end);
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useStreamReveal(text, streaming) {
+  const [paced, setPaced] = useState14(streaming);
+  if (streaming && !paced) setPaced(true);
+  const [shown, setShown] = useState14(streaming ? "" : text);
+  const cursorRef = useRef15(shown.length);
+  const shownRef = useRef15(shown);
+  useEffect13(() => {
+    if (!paced) return;
+    const show = (next) => {
+      if (next === shownRef.current) return;
+      shownRef.current = next;
+      setShown(next);
+    };
+    if (!text.startsWith(shownRef.current) || prefersReducedMotion()) {
+      cursorRef.current = text.length;
+      show(text);
+      return;
+    }
+    if (cursorRef.current >= text.length) return;
+    let frame = 0;
+    let last = null;
+    const step = (now) => {
+      const dt = last === null ? 16 : now - last;
+      last = now;
+      cursorRef.current = advanceReveal(cursorRef.current, text.length, dt);
+      show(wholeWords(text, cursorRef.current));
+      if (cursorRef.current < text.length) frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [text, paced]);
+  if (!paced) return { text, revealing: false, paced };
+  const visible = text.startsWith(shown) ? shown : text;
+  return { text: visible, revealing: visible.length < text.length, paced };
+}
+
+// src/themed/message-bubble.tsx
 import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function MessageBubble({
   text,
@@ -5470,10 +5570,16 @@ function MessageBubble({
   showAuthor,
   metadata,
   onQuickReplyTap,
-  streaming
+  streaming,
+  onReveal
 }) {
   const senderClass = `hw-msg--${sender}`;
-  const bubbleRef = useRef15(null);
+  const bubbleRef = useRef16(null);
+  const reveal = useStreamReveal(text, !!streaming);
+  const live = !!streaming || reveal.revealing;
+  useLayoutEffect(() => {
+    if (reveal.paced && reveal.text.length > 0) onReveal?.();
+  }, [reveal.text, reveal.paced, onReveal]);
   const imageParts = parts?.filter((p) => p.type === "image") ?? [];
   const fileParts = parts?.filter((p) => p.type === "file") ?? [];
   const linkPreviews = parts?.filter(
@@ -5483,7 +5589,7 @@ function MessageBubble({
     (p) => p.type === "source"
   ) ?? [];
   const hasText = text.length > 0;
-  useEffect13(() => {
+  useEffect14(() => {
     const bubble = bubbleRef.current;
     if (!bubble || sender !== "ai" && sender !== "team") return;
     const handleClick = (event) => {
@@ -5496,17 +5602,26 @@ function MessageBubble({
   }, [sender]);
   return /* @__PURE__ */ jsx15("div", { className: `hw-msg ${senderClass}`, children: /* @__PURE__ */ jsxs10("div", { className: "hw-msg-body", children: [
     imageParts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-images", children: imageParts.map((img, i) => /* @__PURE__ */ jsx15(PreviewableThumbnail, { src: img.url }, i)) }),
-    hasText && /* @__PURE__ */ jsxs10("div", { className: "hw-msg-bubble", ref: bubbleRef, children: [
-      sender === "ai" || sender === "team" ? /* @__PURE__ */ jsx15(
-        "span",
-        {
-          dangerouslySetInnerHTML: {
-            __html: renderMarkdown(streaming ? closeDanglingMarkdown(text) : text)
+    hasText && /* @__PURE__ */ jsx15(
+      "div",
+      {
+        className: live ? "hw-msg-bubble hw-msg-bubble--live" : "hw-msg-bubble",
+        ref: bubbleRef,
+        children: sender === "ai" || sender === "team" ? /* @__PURE__ */ jsx15(
+          "span",
+          {
+            dangerouslySetInnerHTML: {
+              __html: renderMarkdown(
+                live ? closeDanglingMarkdown(whileArriving(reveal.text)) : reveal.text,
+                /* A message does not get to make the browser fetch an
+                   address of its choosing. See RenderMarkdownOptions. */
+                { images: "link" }
+              )
+            }
           }
-        }
-      ) : /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: linkifyText(text) } }),
-      streaming && /* @__PURE__ */ jsx15("span", { className: "hw-streaming-cursor" })
-    ] }),
+        ) : /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: linkifyText(text) } })
+      }
+    ),
     fileParts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-files", children: fileParts.map((file, i) => /* @__PURE__ */ jsx15(FileCard, { file }, i)) }),
     linkPreviews.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-links", children: linkPreviews.map((lp, i) => /* @__PURE__ */ jsx15(LinkPreviewCard, { preview: lp }, i)) }),
     sources.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-sources", children: sources.map(
@@ -5547,7 +5662,7 @@ function QuickReplyButtons({
   metadata,
   onTap
 }) {
-  const [tappedId, setTappedId] = useState14(null);
+  const [tappedId, setTappedId] = useState15(null);
   const isLocked = metadata.cancelled || tappedId !== null;
   const handleTap = (optionId) => {
     if (isLocked) return;
@@ -5578,9 +5693,9 @@ function QuickReplyButtons({
   );
 }
 function PreviewableThumbnail({ src }) {
-  const [hover, setHover] = useState14(false);
-  const [broken, setBroken] = useState14(false);
-  const ref = useRef15(null);
+  const [hover, setHover] = useState15(false);
+  const [broken, setBroken] = useState15(false);
+  const ref = useRef16(null);
   if (broken) {
     const name = imageFileName(src);
     return /* @__PURE__ */ jsxs10("a", { href: src, target: "_blank", rel: "noopener noreferrer", className: "hw-msg-file", children: [
@@ -5608,8 +5723,8 @@ function PreviewableThumbnail({ src }) {
 }
 var PREVIEWABLE_EXTS = /* @__PURE__ */ new Set(["pdf", "csv", "png", "jpg", "jpeg", "gif", "webp", "svg"]);
 function FileCard({ file }) {
-  const [hover, setHover] = useState14(false);
-  const ref = useRef15(null);
+  const [hover, setHover] = useState15(false);
+  const ref = useRef16(null);
   const ext = file.fileName.split(".").pop()?.toLowerCase() ?? "";
   const isPreviewable = PREVIEWABLE_EXTS.has(ext);
   const isImage = file.mimeType.startsWith("image/");
@@ -5642,8 +5757,8 @@ function AnchoredPreview({
   href,
   onOpen
 }) {
-  const [style, setStyle] = useState14({ opacity: 0 });
-  const [portalTarget, setPortalTarget] = useState14(null);
+  const [style, setStyle] = useState15({ opacity: 0 });
+  const [portalTarget, setPortalTarget] = useState15(null);
   useLayoutEffect(() => {
     const anchor = anchorRef.current;
     if (!anchor) return;
@@ -5677,8 +5792,8 @@ function AnchoredDocPreview({
   anchorRef,
   href
 }) {
-  const [style, setStyle] = useState14({ opacity: 0 });
-  const [portalTarget, setPortalTarget] = useState14(null);
+  const [style, setStyle] = useState15({ opacity: 0 });
+  const [portalTarget, setPortalTarget] = useState15(null);
   useLayoutEffect(() => {
     const anchor = anchorRef.current;
     if (!anchor) return;
@@ -5753,8 +5868,8 @@ function FileTypeIcon({ ext }) {
 }
 function LinkPreviewCard({ preview }) {
   const view = linkPreviewView(preview);
-  const [imageFailed, setImageFailed] = useState14(false);
-  const [faviconFailed, setFaviconFailed] = useState14(false);
+  const [imageFailed, setImageFailed] = useState15(false);
+  const [faviconFailed, setFaviconFailed] = useState15(false);
   if (!view) return null;
   return /* @__PURE__ */ jsxs10(
     "a",
@@ -5804,7 +5919,7 @@ function LinkPreviewCard({ preview }) {
 }
 
 // src/themed/message-list.tsx
-import React, { useEffect as useEffect14, useRef as useRef16 } from "react";
+import React, { useEffect as useEffect15, useRef as useRef17 } from "react";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function parseParts(raw) {
   if (!raw) return null;
@@ -5839,12 +5954,12 @@ function MessageList({
   onLoadMore,
   renderAfterMessages
 }) {
-  const bottomRef = useRef16(null);
-  const topRef = useRef16(null);
-  const containerRef = useRef16(null);
-  const prevItemCountRef = useRef16(items.length);
-  const isInitialLoadRef = useRef16(true);
-  const hadStreamRef = useRef16(false);
+  const bottomRef = useRef17(null);
+  const topRef = useRef17(null);
+  const containerRef = useRef17(null);
+  const prevItemCountRef = useRef17(items.length);
+  const isInitialLoadRef = useRef17(true);
+  const hadStreamRef = useRef17(false);
   const client = useWidgetClient();
   const activeConversationId = useWidgetStore((s) => s.activeConversationId);
   const handleQuickReplyTap = React.useCallback(
@@ -5856,7 +5971,7 @@ function MessageList({
     },
     [client, activeConversationId]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     const prevCount = prevItemCountRef.current;
     const newCount = items.length;
     prevItemCountRef.current = newCount;
@@ -5872,18 +5987,21 @@ function MessageList({
       isInitialLoadRef.current = false;
     }
   }, [items]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (streamingText) {
       bottomRef.current?.scrollIntoView({ behavior: "instant" });
     }
     hadStreamRef.current = !!streamingText;
   }, [streamingText]);
-  useEffect14(() => {
+  const followReveal = React.useCallback(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "instant" });
+  }, []);
+  useEffect15(() => {
     if (isTyping || isAiProcessing) {
       bottomRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [isTyping, isAiProcessing]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!hasMore || !onLoadMore || !topRef.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -5975,7 +6093,8 @@ function MessageList({
                       metadata: parseTimelineItemMetadata(
                         item.metadata
                       ),
-                      onQuickReplyTap: handleQuickReplyTap
+                      onQuickReplyTap: handleQuickReplyTap,
+                      onReveal: followReveal
                     }
                   )
                 ]
@@ -6000,7 +6119,16 @@ function MessageList({
           ...streamingText && activeConversationId ? [
             /* @__PURE__ */ jsxs11(React.Fragment, { children: [
               null,
-              /* @__PURE__ */ jsx16(MessageBubble, { text: streamingText, sender: "ai", parts: null, streaming: true })
+              /* @__PURE__ */ jsx16(
+                MessageBubble,
+                {
+                  text: streamingText,
+                  sender: "ai",
+                  parts: null,
+                  streaming: true,
+                  onReveal: followReveal
+                }
+              )
             ] }, streamingKeyFor(activeConversationId))
           ] : []
         ],
@@ -6049,7 +6177,7 @@ function EventCard({ text }) {
 }
 
 // src/themed/message-preview.tsx
-import { useEffect as useEffect15, useState as useState15 } from "react";
+import { useEffect as useEffect16, useState as useState16 } from "react";
 import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function MessagePreview({
   onOpen,
@@ -6065,8 +6193,8 @@ function MessagePreview({
   const client = useWidgetClient();
   const senderName = preview?.senderName || agentName;
   const senderImage = preview?.senderImage || null;
-  const [closing, setClosing] = useState15(false);
-  useEffect15(() => {
+  const [closing, setClosing] = useState16(false);
+  useEffect16(() => {
     if (!preview || preview.quickReplies) return;
     if (autoDismissMs == null || autoDismissMs <= 0) return;
     const timer = setTimeout(() => {
@@ -6165,7 +6293,7 @@ function MessagePreview({
 }
 
 // src/themed/resolved-banner.tsx
-import { useId, useState as useState16 } from "react";
+import { useId, useState as useState17 } from "react";
 
 // src/themed/resolved-rating.ts
 function asCsatRating(value) {
@@ -6228,8 +6356,8 @@ function ResolvedBanner({ conversationId }) {
   const saved = useWidgetStore(
     (s) => asCsatRating(s.conversations.find((c) => c.id === conversationId)?.csatRating)
   );
-  const [pending, setPending] = useState16(null);
-  const [failed, setFailed] = useState16(false);
+  const [pending, setPending] = useState17(null);
+  const [failed, setFailed] = useState17(false);
   const rate = (rating) => {
     setPending(rating);
     setFailed(false);
@@ -6345,9 +6473,9 @@ function WidgetLogo({
 }
 function LauncherIcon({ className }) {
   const agentConfig = useWidgetStore((s) => s.agentConfig);
-  const [imgLoaded, setImgLoaded] = useState17(false);
+  const [imgLoaded, setImgLoaded] = useState18(false);
   const imgSrc = agentConfig?.launcherIconUrl ?? null;
-  useEffect16(() => {
+  useEffect17(() => {
     if (!imgSrc) return;
     setImgLoaded(false);
     const img = new Image();
@@ -6495,22 +6623,22 @@ function DefaultWidget({
     });
   }
   const storeIsOpen = useWidgetStore((s) => s.isOpen);
-  const [isClosing, setIsClosing] = useState17(false);
+  const [isClosing, setIsClosing] = useState18(false);
   const isOpen = storeIsOpen || isClosing;
-  const [activeTab, setActiveTab] = useState17("home");
-  const [subView, setSubView] = useState17(null);
-  const [newText, setNewText] = useState17("");
-  const [contentDetailSlug, setContentDetailSlug] = useState17(null);
-  const [contentCategoryName, setContentCategoryName] = useState17(null);
-  const prevActiveIdRef = useRef17(activeId);
-  useEffect16(() => {
+  const [activeTab, setActiveTab] = useState18("home");
+  const [subView, setSubView] = useState18(null);
+  const [newText, setNewText] = useState18("");
+  const [contentDetailSlug, setContentDetailSlug] = useState18(null);
+  const [contentCategoryName, setContentCategoryName] = useState18(null);
+  const prevActiveIdRef = useRef18(activeId);
+  useEffect17(() => {
     if (activeId && activeId !== prevActiveIdRef.current && subView !== "conversation") {
       setSubView("conversation");
     }
     prevActiveIdRef.current = activeId;
   }, [activeId, subView]);
   const prefill = useWidgetStore((s) => s.newConversationPrefill);
-  useEffect16(() => {
+  useEffect17(() => {
     if (prefill !== null) {
       if (prefill.length > 0) setNewText(prefill);
       setSubView("new");
@@ -6518,7 +6646,7 @@ function DefaultWidget({
       store.getState().setNewConversationPrefill(null);
     }
   }, [prefill, store]);
-  const closeTimerRef = useRef17(void 0);
+  const closeTimerRef = useRef18(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;
@@ -6555,8 +6683,8 @@ function DefaultWidget({
     setActiveConversation(tempId);
     setSubView("conversation");
   }, [agentConfig?.id, store, setActiveConversation, welcomeMessage]);
-  const didAutoOpenRef = useRef17(false);
-  useEffect16(() => {
+  const didAutoOpenRef = useRef18(false);
+  useEffect17(() => {
     if (!isOpen) {
       didAutoOpenRef.current = false;
       return;
@@ -6569,11 +6697,11 @@ function DefaultWidget({
     else openNewConversation();
   }, [isOpen, isReady, subView, conversations, openConversation, openNewConversation]);
   const dockComposer = useComposer(activeId);
-  const dockRef = useRef17(dockComposer);
-  useEffect16(() => {
+  const dockRef = useRef18(dockComposer);
+  useEffect17(() => {
     dockRef.current = dockComposer;
   });
-  const pendingDockText = useRef17(null);
+  const pendingDockText = useRef18(null);
   const reopenFromDock = useCallback14(() => {
     const state = store.getState();
     if (state.isOpen) return;
@@ -6603,14 +6731,14 @@ function DefaultWidget({
     },
     [activeId, openNewConversation, store]
   );
-  useEffect16(() => {
+  useEffect17(() => {
     if (!activeId || pendingDockText.current == null) return;
     const text = pendingDockText.current;
     pendingDockText.current = null;
     void dockRef.current.submit({ text, conversationId: activeId });
   }, [activeId]);
-  const [menuOpen, setMenuOpen] = useState17(false);
-  useEffect16(() => {
+  const [menuOpen, setMenuOpen] = useState18(false);
+  useEffect17(() => {
     if (!menuOpen) return;
     const close = () => setMenuOpen(false);
     const onKey = (event) => {
@@ -6665,7 +6793,7 @@ function DefaultWidget({
     [activeTab, subView, activeId, setActiveConversation]
   );
   const pendingContentDetail = useWidgetStore((s) => s.pendingContentDetail);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!pendingContentDetail) return;
     const { slug, tabId } = pendingContentDetail;
     markEntrySeen(slug);
@@ -6717,11 +6845,11 @@ function DefaultWidget({
       setSubView("conversation");
     }
   }, [newText, isCreating, create]);
-  const windowRef = useRef17(null);
-  const bubbleRef = useRef17(null);
-  const tabStateRef = useRef17({});
-  const touchStartY = useRef17(0);
-  const touchDeltaY = useRef17(0);
+  const windowRef = useRef18(null);
+  const bubbleRef = useRef18(null);
+  const tabStateRef = useRef18({});
+  const touchStartY = useRef18(0);
+  const touchDeltaY = useRef18(0);
   const handleTouchStart = useCallback14((e) => {
     touchStartY.current = e.touches[0]?.clientY ?? 0;
     touchDeltaY.current = 0;
@@ -6743,7 +6871,7 @@ function DefaultWidget({
       handleClose();
     }
   }, [handleClose]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isOpen || !windowRef.current) return;
     const vv = window.visualViewport;
     if (!vv) return;
@@ -6762,7 +6890,7 @@ function DefaultWidget({
       win.removeAttribute("data-hw-keyboard");
     };
   }, [isOpen]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isOpen || !windowRef.current) return;
     const win = windowRef.current;
     const handleKeyDown = (e) => {
@@ -6778,7 +6906,7 @@ function DefaultWidget({
     win.addEventListener("keydown", handleKeyDown);
     return () => win.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, subView, handleClose, goBack]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isOpen || !windowRef.current || hideLauncher) return;
     const win = windowRef.current;
     const getFocusable = () => win.querySelectorAll(
@@ -7420,10 +7548,10 @@ function ConversationRow({
 function InlineEmailPrompt({ conversationId }) {
   const { client, store } = useWidgetContext();
   const updateContact = useWidgetStore((s) => s.updateVisitorContact);
-  const [email, setEmail] = useState17("");
-  const [isSubmitting, setIsSubmitting] = useState17(false);
-  const [isSuccess, setIsSuccess] = useState17(false);
-  const [hasError, setHasError] = useState17(false);
+  const [email, setEmail] = useState18("");
+  const [isSubmitting, setIsSubmitting] = useState18(false);
+  const [isSuccess, setIsSuccess] = useState18(false);
+  const [hasError, setHasError] = useState18(false);
   const handleSubmit = async () => {
     const trimmed = email.trim();
     if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
@@ -7769,7 +7897,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/themed/styles.css
-styleInject(':host {\n  all: initial;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget *,\n.hw-widget *::before,\n.hw-widget *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.hw-widget :where(p, li, strong, b, em, i, u, s, small, a, code, pre, blockquote, h1, h2, h3, h4, h5, h6) {\n  color: inherit;\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: #fafaf9;\n  --hw-bg-hover: #f5f5f4;\n  --hw-border: #ebe9e5;\n  --hw-border-md: #e5e5e5;\n  --hw-text: #1c1b19;\n  --hw-text-1: #111;\n  --hw-text-2: #666;\n  --hw-text-3: #8a847c;\n  --hw-text-4: #a8a29a;\n  --hw-radius: 20px;\n  --hw-visitor-bubble-bg: #f5f5f4;\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 :is(.hw-header-bot-icon, .hw-hero-bot-icon, .hw-conv-card-avatar, .hw-event-avatar, .hw-bubble-icon--bot):has(> .hw-agent-custom) {\n  border-radius: 50%;\n  background: transparent;\n  padding: 0;\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:not(.hw-agent-custom 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:host([data-hw-mode="mobile"]) .hw-window,\n:host([data-hw-mode="mobile"]) .hw-window--reading {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: var(--hw-visible-height, 100%);\n  border-radius: 0;\n  box-shadow: none;\n  animation: none;\n}\n:host([data-hw-mode="mobile"]) .hw-hero {\n  background-color: color-mix(in srgb, var(--hw-primary) 60%, black);\n}\n:host([data-hw-mode="mobile"]) .hw-bubble {\n  display: none;\n}\n.hw-window[data-hw-keyboard] .hw-composer {\n  padding-bottom: 8px;\n}\n.hw-window[data-hw-keyboard] .hw-powered {\n  display: none;\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.hw-hero-bot-icon > .hw-agent-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: 14px 12px 14px 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: 0;\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: 32px;\n  height: 32px;\n  flex-shrink: 0;\n  color: var(--hw-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9px;\n  background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));\n}\n.hw-header-bot-icon > svg,\n.hw-header-bot-icon > .hw-agent-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: 15px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n.hw-header-status {\n  font-size: 11px;\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: 0;\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: 0;\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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:not(.hw-agent-custom 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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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:not(.hw-agent-custom 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 14px 8px;\n  background: var(--hw-bg-subtle);\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  overscroll-behavior: contain;\n  min-width: 0;\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n  scrollbar-width: thin;\n  -webkit-mask-image:\n    linear-gradient(\n      180deg,\n      transparent 0,\n      #000 12px);\n  mask-image:\n    linear-gradient(\n      180deg,\n      transparent 0,\n      #000 12px);\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: 16px;\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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: var(--hw-border);\n  color: var(--hw-text-3);\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-2);\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-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-dots {\n  display: flex;\n  gap: 3px;\n  padding: 6px 2px;\n  width: fit-content;\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  gap: 0;\n  border: 1px solid var(--hw-border, 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  min-height: 44px;\n  max-width: 100%;\n  text-align: start;\n}\n.hw-link-preview:hover {\n  background: var(--hw-bg-hover, rgba(0, 0, 0, 0.02));\n}\n.hw-link-preview-img {\n  width: 100%;\n  height: 56px;\n  flex: 0 0 56px;\n  object-fit: cover;\n  object-position: top;\n  border-radius: 0;\n}\n.hw-link-preview-body {\n  padding: 8px 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  justify-content: center;\n}\n.hw-link-preview-favicon {\n  width: 14px;\n  height: 14px;\n  flex: 0 0 14px;\n  border-radius: 3px;\n}\n.hw-widget[data-hw-placement=docked] .hw-link-preview-favicon {\n  box-sizing: content-box;\n  padding: 2px;\n  background: #ffffff;\n}\n.hw-link-preview-host {\n  direction: ltr;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  word-break: break-all;\n}\n.hw-link-preview-title {\n  font-size: 12.5px;\n  font-weight: 600;\n  line-height: 1.3;\n  color: var(--hw-text, #1a1a1a);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.hw-link-preview-desc {\n  font-size: 11.5px;\n  line-height: 1.4;\n  color: var(--hw-text-2, #6b7280);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.hw-link-preview-url {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  font-size: 11px;\n  color: var(--hw-text-2);\n}\n.hw-msg-links {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-width: 240px;\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  max-width: min(100%, 340px);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: none;\n  box-shadow: none;\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-title {\n  font-size: 14px;\n  font-weight: 550;\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-row {\n  max-width: 300px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 9px;\n  padding: 3px 3px 3px 12px;\n  border-radius: 999px;\n  border: 1px solid var(--hw-border, rgba(0,0,0,0.1));\n  background: var(--hw-bg-subtle, #fafafa);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-email-card-row:focus-within {\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 {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 0;\n  border: 0;\n  background: transparent;\n  color: var(--hw-text, #1a1a1a);\n  font: inherit;\n  font-size: 13px;\n  outline: none;\n}\n.hw-email-card-input::placeholder {\n  color: var(--hw-text-3, #999);\n}\n.hw-email-card-row:has(.hw-email-card-input--error) {\n  border-color: #ef4444;\n}\n.hw-email-card-submit {\n  flex: none;\n  display: grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 50%;\n  background: var(--hw-brand, #0a0a0a);\n  color: var(--hw-on-brand, #fff);\n  cursor: pointer;\n  transition: opacity 0.15s, transform 0.15s;\n}\n.hw-email-card-submit:hover:not(:disabled) {\n  transform: scale(1.06);\n}\n.hw-email-card-submit:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.hw-email-card--success {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 0;\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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: 2147483001;\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-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-window:has(.hw-powered) .hw-composer {\n    padding-bottom: 8px;\n  }\n  .hw-window:has(.hw-powered) .hw-tabs {\n    padding-bottom: 0;\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:not(.hw-agent-custom 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:not(.hw-agent-custom svg) {\n  width: 16px;\n  height: 16px;\n}\n.hw-preview-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\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  padding: 0 14px 14px;\n  margin-top: 0;\n}\n.hw-awaiting {\n  margin-top: 2px;\n  padding-left: 44px;\n  font-size: 11px;\n  line-height: 1.4;\n  color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-preview-dock {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 8px;\n  pointer-events: none;\n}\n.hw-preview-dock > .hw-preview,\n.hw-preview-dock > .hw-preview-stack {\n  position: relative;\n  bottom: auto;\n  right: auto;\n  pointer-events: auto;\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-stack.hw-preview-stack--anchored {\n  position: static;\n  bottom: auto;\n  right: auto;\n  width: 100%;\n}\n.hw-preview-more {\n  align-self: flex-end;\n  padding: 4px 10px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--hw-bg);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--hw-border);\n  color: var(--hw-text-2);\n  font: inherit;\n  font-size: 12px;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background 0.12s, color 0.12s;\n}\n.hw-preview-more:hover {\n  background: var(--hw-bg-hover);\n  color: var(--hw-text);\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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.hw-markdown ol {\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-table-wrap {\n  margin: 10px 0;\n  overflow-x: auto;\n  border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n  border-radius: 10px;\n}\n.hw-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n.hw-table th {\n  text-align: left;\n  font-weight: 600;\n  font-size: 12px;\n  padding: 8px 12px;\n  background: var(--hw-bg-hover, #f5f5f4);\n  border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n}\n.hw-table td {\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n  vertical-align: top;\n}\n.hw-table tbody tr:last-child td {\n  border-bottom: none;\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: 7px;\n  padding: 7px 14px;\n  background: var(--hw-bg-hover);\n  color: var(--hw-text-2);\n  font-size: 11.5px;\n  font-weight: 500;\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 0;\n  animation: hw-disconnect-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);\n}\n@keyframes hw-disconnect-in {\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.hw-disconnect-retry {\n  flex: none;\n  padding: 2px 4px;\n  margin: -2px 0;\n  border: 0;\n  border-radius: 4px;\n  background: none;\n  color: var(--hw-text);\n  font: inherit;\n  font-weight: 600;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n.hw-disconnect-retry:hover {\n  text-decoration-thickness: 2px;\n}\n.hw-disconnect-retry:focus-visible {\n  outline: 2px solid var(--hw-text);\n  outline-offset: 1px;\n}\n.hw-disconnect-spinner {\n  width: 9px;\n  height: 9px;\n  border: 1.5px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  opacity: 0.75;\n  flex-shrink: 0;\n  animation: hw-spin 0.7s linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-disconnect {\n    animation: none;\n  }\n  .hw-disconnect-spinner {\n    animation: none;\n    border-top-color: currentColor;\n    opacity: 0.5;\n  }\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  gap: 8px;\n  padding: 10px 14px;\n  border-top: 1px solid var(--hw-border);\n  flex-shrink: 0;\n}\n.hw-resolved-status {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12.5px;\n  font-weight: 550;\n  color: var(--hw-text);\n}\n.hw-resolved-status svg {\n  flex: none;\n  color: var(--hw-text-2);\n}\n.hw-csat {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 6px 10px;\n}\n.hw-csat-label,\n.hw-csat-error {\n  font-size: 12px;\n  color: var(--hw-text-2);\n}\n.hw-csat-error {\n  color: var(--hw-text);\n}\n.hw-csat-buttons {\n  display: flex;\n  gap: 6px;\n}\n.hw-csat-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  height: 30px;\n  padding: 0 11px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 999px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  font: inherit;\n  font-size: 12px;\n  font-weight: 550;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.hw-csat-btn svg {\n  flex: none;\n}\n.hw-csat-btn:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-csat-btn:focus-visible {\n  outline: 2px solid var(--hw-text);\n  outline-offset: 2px;\n}\n.hw-csat-btn[aria-pressed=true] {\n  background: var(--hw-bg-hover);\n  border-color: var(--hw-brand, var(--hw-primary));\n  box-shadow: inset 0 0 0 1px var(--hw-brand, var(--hw-primary));\n  cursor: default;\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: inherit;\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 2px;\n  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);\n  word-break: normal;\n  overflow-wrap: anywhere;\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-send-error {\n    background: #450a0a;\n    color: #fca5a5;\n  }\n  .hw-error-icon {\n    background: #450a0a;\n    color: #f87171;\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.hw-widget[data-hw-placement=docked] {\n  --hw-dock-width: 600px;\n  --hw-dock-bar-width: 480px;\n  --hw-dock-inset: 24px;\n  --hw-bar-max-height: 148px;\n  --hw-dock-surface: #ffffff;\n  --hw-dock-on-surface: #111111;\n  --hw-dock-pill-bg: rgba(44, 44, 48, 0.66);\n  --hw-dock-pill-fg: rgba(255, 255, 255, 0.94);\n  --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] {\n  z-index: 2147483000;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: var(--hw-dock-inset);\n  z-index: 2147483000;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  pointer-events: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock > * {\n  pointer-events: auto;\n}\n.hw-dock-suggestions {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 9px;\n  width: var(--hw-dock-bar-width, var(--hw-dock-width));\n  max-width: calc(100vw - 32px);\n  margin-bottom: 14px;\n}\n.hw-dock-pill-row {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  animation: hw-dock-pill-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;\n}\n.hw-dock-pill-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: var(--hw-dock-pill-fg);\n  cursor: pointer;\n  align-self: flex-start;\n  margin-top: 8px;\n  opacity: 0;\n  transform: scale(0.85);\n  transition:\n    opacity 0.12s linear,\n    transform 0.12s cubic-bezier(0.25, 1, 0.5, 1),\n    color 0.12s linear;\n}\n.hw-dock-pill-dismiss svg {\n  width: 11px;\n  height: 11px;\n}\n.hw-dock-suggestions:hover .hw-dock-pill-dismiss,\n.hw-dock-suggestions:focus-within .hw-dock-pill-dismiss {\n  opacity: 1;\n  transform: none;\n}\n.hw-dock-pill-dismiss:hover {\n  color: var(--hw-dock-on-surface);\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-dock-pill-dismiss {\n    transition: none;\n  }\n}\n@media (hover: none) {\n  .hw-dock-pill-dismiss {\n    opacity: 1;\n    transform: none;\n  }\n}\n.hw-dock-pill {\n  align-self: flex-start;\n  padding: 10px 18px;\n  border: 1px solid var(--hw-dock-pill-border, transparent);\n  border-radius: 999px;\n  cursor: pointer;\n  font: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  text-align: left;\n  background: var(--hw-dock-pill-bg);\n  color: var(--hw-dock-pill-fg);\n  backdrop-filter: blur(10px) saturate(1.2);\n  -webkit-backdrop-filter: blur(10px) saturate(1.2);\n  box-shadow: 0 4px 14px -8px rgba(12, 11, 10, 0.28);\n  transition:\n    background 0.16s,\n    border-color 0.16s,\n    transform 0.16s;\n}\n.hw-dock-pill {\n  backdrop-filter: blur(18px);\n  -webkit-backdrop-filter: blur(18px);\n}\n.hw-dock-pill:hover {\n  background: color-mix(in srgb, var(--hw-dock-pill-bg) 100%, var(--hw-dock-on-surface) 8%);\n  border-color: color-mix(in srgb, var(--hw-dock-pill-border) 100%, var(--hw-dock-on-surface) 10%);\n  transform: translateX(3px);\n}\n@keyframes hw-dock-pill-in {\n  from {\n    opacity: 0;\n    transform: translateY(10px) scale(0.97);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n.hw-dock-bar {\n  display: flex;\n  align-items: flex-end;\n  gap: 10px;\n  width: var(--hw-dock-bar-width, var(--hw-dock-width));\n  max-width: calc(100vw - 32px);\n  min-height: 52px;\n  padding: 10px 10px 10px 18px;\n  border: 0;\n  border-radius: 26px;\n  background: var(--hw-dock-surface);\n  color: var(--hw-dock-on-surface);\n  box-shadow:\n    inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n    0 0 0 1px color-mix(in srgb, var(--hw-dock-on-surface) 7%, transparent),\n    0 2px 6px rgba(12, 11, 10, 0.18),\n    0 20px 48px -14px rgba(12, 11, 10, 0.45);\n  transition:\n    border-radius 0.18s ease,\n    box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),\n    width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.hw-dock-bar:focus-within {\n  box-shadow:\n    inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n    0 0 0 1px color-mix(in srgb, var(--hw-primary, #fb923c) 60%, transparent),\n    0 2px 6px rgba(12, 11, 10, 0.18),\n    0 20px 48px -14px rgba(12, 11, 10, 0.45);\n}\n.hw-dock-bar[data-grown=true] {\n  border-radius: 20px;\n}\n.hw-dock-input {\n  flex: 1;\n  min-width: 0;\n  min-height: 20px;\n  max-height: var(--hw-bar-max-height);\n  padding: 6px 0;\n  border: 0;\n  outline: none;\n  resize: none;\n  overflow-y: auto;\n  background: transparent;\n  color: var(--hw-dock-on-surface);\n  font: inherit;\n  font-size: 14px;\n  line-height: 1.45;\n  transition: height 0.12s ease;\n}\n.hw-dock-input::placeholder {\n  color: color-mix(in srgb, var(--hw-dock-on-surface) 45%, transparent);\n}\n.hw-dock-send {\n  flex: none;\n  width: 32px;\n  height: 32px;\n  margin-bottom: 1px;\n  border: 0;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  background: var(--hw-primary, #fb923c);\n  color: var(--hw-on-brand, #fff);\n  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s;\n}\n.hw-dock-send:hover:not(:disabled) {\n  transform: scale(1.06);\n}\n.hw-dock-send:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n  position: fixed;\n  left: 50%;\n  right: auto;\n  margin-left: calc(var(--hw-dock-width) / -2);\n  bottom: calc(var(--hw-dock-inset) + 66px);\n  width: var(--hw-dock-width);\n  max-width: calc(100vw - 32px);\n  height: 420px;\n}\n@media (max-width: 640px) {\n  .hw-widget[data-hw-placement=docked] .hw-window {\n    left: 16px;\n    right: 16px;\n    margin-left: 0;\n    width: auto;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-bubble {\n  display: none;\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-window {\n  bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-suggestions {\n  display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-dock-pill,\n  .hw-dock-bar,\n  .hw-dock-input,\n  .hw-dock-send {\n    animation: none;\n    transition: none;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-composer,\n.hw-widget[data-hw-placement=docked] .hw-tabs,\n.hw-widget[data-hw-placement=docked] .hw-footer-tabs {\n  display: none;\n}\n.hw-starters {\n  display: flex;\n  flex-direction: column;\n  margin-top: 10px;\n  border-radius: 14px;\n  overflow: hidden;\n  background: var(--hw-bg);\n  box-shadow: inset 0 0 0 1px var(--hw-border);\n}\n.hw-starter {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 11px 14px;\n  border: 0;\n  border-radius: 0;\n  cursor: pointer;\n  background: transparent;\n  color: var(--hw-text);\n  font: inherit;\n  text-align: left;\n  animation: hw-starter-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n  transition: background 0.12s;\n}\n.hw-starter + .hw-starter {\n  box-shadow: inset 0 1px 0 var(--hw-border);\n}\n.hw-starter:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-starter-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n.hw-starter-k {\n  font-size: 13px;\n  font-weight: 550;\n  line-height: 1.35;\n  color: var(--hw-text);\n}\n.hw-starter-q {\n  font-size: 12px;\n  line-height: 1.35;\n  color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-starter svg {\n  flex: none;\n  color: var(--hw-text-3, var(--hw-text-muted));\n  opacity: 0.45;\n  transition: opacity 0.15s, transform 0.15s;\n}\n.hw-starter:hover svg {\n  opacity: 0.9;\n  transform: translateX(2px);\n}\n@keyframes hw-starter-in {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-header-back {\n  display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-starter {\n    animation: none;\n  }\n}\n@media (prefers-color-scheme: dark) {\n  .hw-widget:not([data-theme=light])[data-hw-placement=docked] {\n    --hw-dock-surface: #1f1f23;\n    --hw-dock-on-surface: #f4f4f6;\n    --hw-dock-pill-bg: rgba(255, 255, 255, 0.1);\n    --hw-dock-pill-fg: #e4e4e7;\n    --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n  }\n}\n.hw-widget[data-theme=dark][data-hw-placement=docked] {\n  --hw-dock-surface: #1f1f23;\n  --hw-dock-on-surface: #f4f4f6;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n  --hw-bg: rgba(255, 255, 255, 0.08);\n  --hw-bg-subtle: transparent;\n  --hw-bg-hover: rgba(255, 255, 255, 0.1);\n  --hw-border: rgba(255, 255, 255, 0.14);\n  --hw-border-md: rgba(255, 255, 255, 0.22);\n  --hw-text: rgba(255, 255, 255, 0.94);\n  --hw-text-1: #ffffff;\n  --hw-text-2: rgba(255, 255, 255, 0.72);\n  --hw-text-3: rgba(255, 255, 255, 0.62);\n  --hw-text-4: rgba(255, 255, 255, 0.46);\n  --hw-visitor-bubble-bg: rgba(255, 255, 255, 0.16);\n  --hw-visitor-bubble-text: #ffffff;\n  --hw-brand: rgba(255, 255, 255, 0.92);\n  --hw-on-brand: #17161a;\n  --hw-focus-border: rgba(255, 255, 255, 0.34);\n  --hw-focus-ring: rgba(255, 255, 255, 0.1);\n  height: 500px;\n  max-height: calc(100vh - 180px);\n  border-radius: 24px;\n  color: var(--hw-text);\n  background:\n    linear-gradient(\n      180deg,\n      rgba(40, 40, 44, 0.72) 0%,\n      rgba(46, 46, 50, 0.7) 55%,\n      rgba(52, 52, 56, 0.68) 100%);\n  backdrop-filter: blur(30px);\n  -webkit-backdrop-filter: blur(30px);\n  box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .hw-widget[data-hw-placement=docked] .hw-window {\n    background: #2c2c2e;\n  }\n}\n@media (max-width: 640px) {\n  .hw-widget[data-hw-placement=docked] .hw-window {\n    height: min(60vh, 460px);\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-header--sub {\n  padding: 14px 12px 8px 16px;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-status {\n  display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-name {\n  font-size: 15.5px;\n  font-weight: 560;\n  letter-spacing: -0.006em;\n  color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-conv-name,\n.hw-widget[data-hw-placement=docked] .hw-event-name {\n  font-weight: 545;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-bot-icon {\n  border-radius: 50%;\n  overflow: hidden;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-close:hover,\n.hw-widget[data-hw-placement=docked] .hw-header-menu-btn:hover {\n  background: rgba(255, 255, 255, 0.12);\n  color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-messages {\n  padding: 4px 22px 16px;\n  gap: 18px;\n  -webkit-mask-image:\n    linear-gradient(\n      180deg,\n      transparent 0,\n      #000 16px);\n  mask-image:\n    linear-gradient(\n      180deg,\n      transparent 0,\n      #000 16px);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--ai .hw-msg-bubble,\n.hw-widget[data-hw-placement=docked] .hw-msg--team .hw-msg-bubble {\n  padding: 0;\n  background: transparent;\n  border-radius: 0;\n  font-size: 15px;\n  line-height: 1.55;\n  color: var(--hw-text);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--visitor .hw-msg-bubble {\n  background: rgba(255, 255, 255, 0.16);\n  color: #ffffff;\n  font-size: 14.5px;\n  line-height: 1.5;\n}\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble pre,\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble code {\n  background: rgba(0, 0, 0, 0.28);\n  color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row {\n  background: rgba(0, 0, 0, 0.26);\n  border-color: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] .hw-window :focus-visible {\n  outline-color: rgba(255, 255, 255, 0.55);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus,\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row:focus-within {\n  border-color: rgba(255, 255, 255, 0.42);\n  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-submit {\n  background: #ffffff;\n  color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n  position: relative;\n  z-index: 3;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu {\n  background: #3a3a3f;\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 44px -12px rgba(12, 11, 10, 0.62);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button:hover {\n  background: rgba(255, 255, 255, 0.11);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button.hw-header-menu-conv[data-active=true] {\n  background: rgba(255, 255, 255, 0.09);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-convs {\n  border-bottom-color: rgba(255, 255, 255, 0.12);\n}\n.hw-widget[data-hw-placement=docked] .hw-event--card {\n  margin: 0;\n  background: rgba(255, 255, 255, 0.08);\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-event-avatar {\n  background: rgba(255, 255, 255, 0.14);\n  color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview {\n  position: fixed;\n  left: 50%;\n  right: auto;\n  margin-left: calc(var(--hw-dock-bar-width, var(--hw-dock-width)) / -2);\n  bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n  width: var(--hw-dock-bar-width, var(--hw-dock-width));\n  max-width: calc(100vw - 32px);\n  border: 0;\n  border-radius: 24px;\n  color: rgba(255, 255, 255, 0.94);\n  background:\n    linear-gradient(\n      180deg,\n      rgba(40, 40, 44, 0.74) 0%,\n      rgba(52, 52, 56, 0.7) 100%);\n  backdrop-filter: blur(30px);\n  -webkit-backdrop-filter: blur(30px);\n  box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-name,\n.hw-widget[data-hw-placement=docked] .hw-preview-body {\n  color: rgba(255, 255, 255, 0.94);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close {\n  color: rgba(255, 255, 255, 0.6);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close:hover {\n  background: rgba(255, 255, 255, 0.12);\n  color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-footer {\n  color: rgba(255, 255, 255, 0.55);\n  border-top-color: rgba(255, 255, 255, 0.1);\n}\n@media (max-width: 640px) {\n  .hw-widget[data-hw-placement=docked] .hw-preview {\n    left: 16px;\n    right: 16px;\n    margin-left: 0;\n    width: auto;\n  }\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .hw-widget[data-hw-placement=docked] .hw-preview {\n    background: #2c2c2e;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn {\n  padding: 7px 14px;\n  font-size: 13px;\n  font-weight: 550;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.94);\n  box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n  color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn:hover:not(:disabled) {\n  background: #ffffff;\n  box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n  transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn[data-tapped=true] {\n  background: rgba(255, 255, 255, 0.22);\n  color: #ffffff;\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n  transform: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn svg {\n  opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer {\n  padding: 7px 14px;\n  font-size: 13px;\n  background: rgba(255, 255, 255, 0.94);\n  color: #17161a;\n  box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n  transition:\n    background 0.15s,\n    box-shadow 0.15s,\n    transform 0.15s;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer:hover {\n  background: #ffffff;\n  color: #17161a;\n  box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n  transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-offer svg {\n  opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar {\n  --hw-dock-on-surface: rgba(255, 255, 255, 0.94);\n  color: rgba(255, 255, 255, 0.94);\n  background:\n    linear-gradient(\n      180deg,\n      rgba(44, 44, 48, 0.74) 0%,\n      rgba(52, 52, 56, 0.72) 100%);\n  backdrop-filter: blur(30px);\n  -webkit-backdrop-filter: blur(30px);\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -16px rgba(12, 11, 10, 0.45);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n  width: var(--hw-dock-width);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar:focus-within {\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 18px 40px -16px rgba(12, 11, 10, 0.5);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 22px 52px -18px rgba(12, 11, 10, 0.52);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-send:not(:disabled) {\n  background: #ffffff;\n  color: #17161a;\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .hw-widget[data-hw-placement=docked] .hw-dock-bar {\n    background: #2c2c2e;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n  transform-origin: 50% 100%;\n  animation: hw-dock-panel-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing {\n  animation: hw-dock-panel-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n@keyframes hw-dock-panel-in {\n  from {\n    opacity: 0;\n    transform: translateY(14px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n@keyframes hw-dock-panel-out {\n  from {\n    opacity: 1;\n    transform: none;\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.99);\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n  animation: hw-dock-settle 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n  animation: hw-dock-settle 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.11s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-header--sub,\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-messages {\n  animation: none;\n}\n@keyframes hw-dock-settle {\n  from {\n    opacity: 0;\n    transform: translateY(7px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-widget[data-hw-placement=docked] .hw-window,\n  .hw-widget[data-hw-placement=docked] .hw-window--closing,\n  .hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub,\n  .hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n    animation: none;\n  }\n}\n.hw-dock-bar {\n  flex-wrap: wrap;\n  padding-left: 18px;\n  padding-right: 8px;\n}\n.hw-dock-error {\n  width: var(--hw-dock-width);\n  max-width: calc(100vw - 32px);\n  margin-bottom: 8px;\n  padding: 8px 14px;\n  border-radius: 14px;\n  background: rgba(190, 24, 40, 0.92);\n  color: #ffffff;\n  font-size: 12.5px;\n  line-height: 1.35;\n  box-shadow: 0 10px 26px -12px rgba(12, 11, 10, 0.5);\n  animation: hw-dock-settle 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-dock-error {\n    animation: none;\n  }\n}\n.hw-dock-previews {\n  flex: 0 0 100%;\n  order: -1;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 2px 0 8px;\n}\n.hw-dock-lead {\n  flex: none;\n  display: grid;\n  place-items: center;\n  width: 32px;\n  height: 32px;\n  margin-left: -8px;\n}\n.hw-dock-actions {\n  flex: none;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  margin-bottom: 1px;\n}\n.hw-dock-tool {\n  display: grid;\n  place-items: center;\n  width: 30px;\n  height: 30px;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: color-mix(in srgb, var(--hw-dock-on-surface) 52%, transparent);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n.hw-dock-tool:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--hw-dock-on-surface) 8%, transparent);\n  color: var(--hw-dock-on-surface);\n}\n.hw-dock-tool:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n.hw-dock-tool[data-active=true] {\n  color: #e11d48;\n  background: rgba(225, 29, 72, 0.12);\n  animation: hw-dock-listening 1.4s ease-in-out infinite;\n}\n@keyframes hw-dock-listening {\n  0%, 100% {\n    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35);\n  }\n  50% {\n    box-shadow: 0 0 0 4px rgba(225, 29, 72, 0);\n  }\n}\n.hw-dock-send:disabled {\n  opacity: 1;\n  background: color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent);\n  color: color-mix(in srgb, var(--hw-dock-on-surface) 38%, transparent);\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-dock-tool[data-active=true] {\n    animation: none;\n  }\n  .hw-dock-bar {\n    transition: none;\n  }\n}\n.hw-dock-input:focus,\n.hw-dock-input:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-powered {\n  display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-disconnect {\n  border-radius: 20px 20px 0 0;\n}\n.hw-msg-meta {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.hw-msg-author {\n  font-weight: 550;\n}\n.hw-msg-meta-sep {\n  opacity: 0.55;\n}\n.hw-header-actions {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n.hw-header-menu-btn {\n  display: grid;\n  place-items: center;\n  width: 30px;\n  height: 30px;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n  background: transparent;\n  color: var(--hw-text-2, var(--hw-text-muted));\n  transition: background 0.15s, color 0.15s;\n}\n.hw-header-menu-btn:hover {\n  background: var(--hw-bg-hover);\n  color: var(--hw-text);\n}\n.hw-header-menu {\n  position: absolute;\n  top: 36px;\n  right: 0;\n  z-index: 6;\n  min-width: 236px;\n  max-width: 288px;\n  padding: 5px;\n  border-radius: 14px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  box-shadow: 0 0 0 1px var(--hw-border), 0 12px 32px -10px rgba(0, 0, 0, 0.32);\n  animation: hw-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n}\n@keyframes hw-menu-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n.hw-header-menu button {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 9px 10px;\n  border: 0;\n  border-radius: 9px;\n  cursor: pointer;\n  background: transparent;\n  color: var(--hw-text);\n  font: inherit;\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.14s;\n}\n.hw-header-menu button:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-header-menu button svg {\n  flex: none;\n  color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu button:hover svg {\n  color: var(--hw-brand, var(--hw-primary));\n}\n.hw-header-menu-convs {\n  display: flex;\n  flex-direction: column;\n  max-height: 168px;\n  overflow-y: auto;\n  padding-bottom: 5px;\n  margin-bottom: 5px;\n  border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-menu button.hw-header-menu-conv {\n  flex-direction: column;\n  align-items: stretch;\n  gap: 2px;\n  padding: 8px 10px;\n}\n.hw-header-menu button.hw-header-menu-conv[data-active=true] {\n  background: var(--hw-bg-hover);\n}\n.hw-header-menu-conv-top {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n.hw-header-menu-conv-name {\n  overflow: hidden;\n  font-size: 12.5px;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.hw-header-menu-conv-time {\n  flex: none;\n  font-size: 11px;\n  color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu-conv-preview {\n  overflow: hidden;\n  font-size: 12px;\n  color: var(--hw-text-2);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.hw-offers {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 10px;\n}\n.hw-offer {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  border: 0;\n  border-radius: 999px;\n  cursor: pointer;\n  background: var(--hw-bg-hover);\n  color: var(--hw-text);\n  font: inherit;\n  font-size: 12.5px;\n  font-weight: 550;\n  transition: background 0.15s, color 0.15s;\n}\n.hw-offer:hover {\n  background: var(--hw-brand, var(--hw-primary));\n  color: var(--hw-on-brand, #fff);\n}\n.hw-offer svg {\n  flex: none;\n}\n.hw-sources {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-top: 4px;\n}\n.hw-source {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 5px 14px;\n  border-radius: 9px;\n  background: transparent;\n  color: var(--hw-text);\n  text-decoration: none;\n  transition: background 0.15s;\n}\n.hw-widget[data-hw-placement=docked] .hw-source {\n  margin-inline: -8px;\n  padding-inline: 8px;\n}\na.hw-source {\n  cursor: pointer;\n}\na.hw-source:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-source-n {\n  display: grid;\n  place-items: center;\n  flex: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  background: var(--hw-brand, var(--hw-primary));\n  color: var(--hw-on-brand, #fff);\n  font-size: 10px;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n}\n.hw-source-title {\n  flex: 1;\n  min-width: 0;\n  font-size: 12px;\n  font-weight: 550;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] {\n  --hw-dock-tint: var(--hw-primary);\n  --hw-dock-ink: #ffffff;\n  --hw-dock-shade: #000000;\n  --hw-dock-wash: var(--hw-dock-shade);\n  --hw-dock-ink-2: color-mix(in srgb, var(--hw-dock-ink) 86%, var(--hw-dock-tint));\n  --hw-dock-ink-3: color-mix(in srgb, var(--hw-dock-ink) 78%, var(--hw-dock-tint));\n  --hw-dock-ink-4: color-mix(in srgb, var(--hw-dock-ink) 60%, var(--hw-dock-tint));\n  --hw-dock-pill-bg: var(--hw-dock-tint);\n  --hw-dock-pill-fg: var(--hw-dock-ink);\n  --hw-dock-pill-border: color-mix(in srgb, var(--hw-dock-ink) 30%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-window, .hw-dock-bar, .hw-preview) {\n  --hw-text: var(--hw-dock-ink);\n  --hw-text-1: var(--hw-dock-ink);\n  --hw-text-2: var(--hw-dock-ink-2);\n  --hw-text-3: var(--hw-dock-ink-3);\n  --hw-text-4: var(--hw-dock-ink-4);\n  --hw-text-muted: var(--hw-dock-ink-2);\n  --hw-bg: color-mix(in srgb, var(--hw-dock-wash) 12%, transparent);\n  --hw-bg-subtle: transparent;\n  --hw-bg-hover: color-mix(in srgb, var(--hw-dock-wash) 18%, transparent);\n  --hw-border: color-mix(in srgb, var(--hw-dock-ink) 22%, transparent);\n  --hw-border-md: color-mix(in srgb, var(--hw-dock-ink) 34%, transparent);\n  --hw-focus-border: color-mix(in srgb, var(--hw-dock-ink) 60%, transparent);\n  --hw-focus-ring: color-mix(in srgb, var(--hw-dock-ink) 18%, transparent);\n  --hw-visitor-bubble-bg: color-mix(in srgb, var(--hw-dock-wash) 14%, transparent);\n  --hw-visitor-bubble-text: var(--hw-dock-ink);\n  --hw-primary: var(--hw-dock-ink);\n  --hw-primary-hover: var(--hw-dock-ink);\n  --hw-brand: var(--hw-dock-ink);\n  --hw-on-brand: var(--hw-dock-tint);\n  --hw-dock-surface: transparent;\n  --hw-dock-on-surface: var(--hw-dock-ink);\n  color: var(--hw-dock-ink);\n  background:\n    radial-gradient(\n      70% 60% at 86% 8%,\n      var(--hw-dock-tint),\n      transparent 64%),\n    linear-gradient(\n      165deg,\n      color-mix(in srgb, var(--hw-dock-shade) 12%, var(--hw-dock-tint)) 0%,\n      color-mix(in srgb, var(--hw-dock-shade) 30%, var(--hw-dock-tint)) 100%);\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px color-mix(in srgb, var(--hw-dock-ink) 16%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble {\n  background: var(--hw-dock-ink);\n  color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble a,\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble a:hover {\n  color: inherit;\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-dock-send:not(:disabled), .hw-quick-reply-btn, .hw-quick-reply-btn:hover:not(:disabled), .hw-email-card-submit, .hw-offer, .hw-offer:hover) {\n  background: var(--hw-dock-ink);\n  color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-preview-body, .hw-header-close:hover, .hw-header-menu-btn:hover, .hw-preview-close:hover, .hw-quick-reply-btn[data-tapped=true]) {\n  color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-preview-close, .hw-preview-footer) {\n  color: var(--hw-dock-ink-2);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-quick-reply-btn[data-tapped=true] {\n  background: color-mix(in srgb, var(--hw-dock-wash) 22%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-window :focus-visible {\n  outline-color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg-bubble :is(pre, code),\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-email-card-row {\n  background: color-mix(in srgb, var(--hw-dock-shade) 26%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-header-menu {\n  background: color-mix(in srgb, var(--hw-dock-shade) 34%, var(--hw-dock-tint));\n  color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-header-bot-icon--team, .hw-event-avatar) {\n  background: var(--hw-dock-ink);\n  color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-dock-input::placeholder {\n  color: var(--hw-dock-ink-3);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-typing-dot {\n  background: var(--hw-dock-ink-2);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-disconnect {\n  background: color-mix(in srgb, var(--hw-dock-shade) 16%, transparent);\n  color: var(--hw-dock-ink-2);\n}\n');
+styleInject(':host {\n  all: initial;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget *,\n.hw-widget *::before,\n.hw-widget *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.hw-widget :where(p, li, strong, b, em, i, u, s, small, a, code, pre, blockquote, h1, h2, h3, h4, h5, h6) {\n  color: inherit;\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: #fafaf9;\n  --hw-bg-hover: #f5f5f4;\n  --hw-border: #ebe9e5;\n  --hw-border-md: #e5e5e5;\n  --hw-text: #1c1b19;\n  --hw-text-1: #111;\n  --hw-text-2: #666;\n  --hw-text-3: #8a847c;\n  --hw-text-4: #a8a29a;\n  --hw-radius: 20px;\n  --hw-visitor-bubble-bg: #f5f5f4;\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 :is(.hw-header-bot-icon, .hw-hero-bot-icon, .hw-conv-card-avatar, .hw-event-avatar, .hw-bubble-icon--bot):has(> .hw-agent-custom) {\n  border-radius: 50%;\n  background: transparent;\n  padding: 0;\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:not(.hw-agent-custom 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:host([data-hw-mode="mobile"]) .hw-window,\n:host([data-hw-mode="mobile"]) .hw-window--reading {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: var(--hw-visible-height, 100%);\n  border-radius: 0;\n  box-shadow: none;\n  animation: none;\n}\n:host([data-hw-mode="mobile"]) .hw-hero {\n  background-color: color-mix(in srgb, var(--hw-primary) 60%, black);\n}\n:host([data-hw-mode="mobile"]) .hw-bubble {\n  display: none;\n}\n.hw-window[data-hw-keyboard] .hw-composer {\n  padding-bottom: 8px;\n}\n.hw-window[data-hw-keyboard] .hw-powered {\n  display: none;\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.hw-hero-bot-icon > .hw-agent-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: 14px 12px 14px 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: 0;\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: 32px;\n  height: 32px;\n  flex-shrink: 0;\n  color: var(--hw-text);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9px;\n  background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));\n}\n.hw-header-bot-icon > svg,\n.hw-header-bot-icon > .hw-agent-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: 15px;\n  font-weight: 600;\n  line-height: 1.3;\n}\n.hw-header-status {\n  font-size: 11px;\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: 0;\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: 0;\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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:not(.hw-agent-custom 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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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:not(.hw-agent-custom 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 14px 8px;\n  background: var(--hw-bg-subtle);\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  overscroll-behavior: contain;\n  min-width: 0;\n  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n  scrollbar-width: thin;\n  -webkit-mask-image:\n    linear-gradient(\n      180deg,\n      transparent 0,\n      #000 12px);\n  mask-image:\n    linear-gradient(\n      180deg,\n      transparent 0,\n      #000 12px);\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: 16px;\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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: var(--hw-border);\n  color: var(--hw-text-3);\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-2);\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-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-dots {\n  display: flex;\n  gap: 3px;\n  padding: 6px 2px;\n  width: fit-content;\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-msg-bubble--live > span > :last-child:not(ol, ul, pre)::after,\n.hw-msg-bubble--live > span > :is(ol, ul):last-child > li:last-child::after {\n  content: "";\n  display: inline-block;\n  width: 2px;\n  height: 1em;\n  border-radius: 1px;\n  background: currentColor;\n  opacity: 0.5;\n  margin-left: 2px;\n  vertical-align: text-bottom;\n  animation: hw-cursor-breathe 1.1s ease-in-out infinite;\n}\n@keyframes hw-cursor-breathe {\n  0%, 100% {\n    opacity: 0.5;\n  }\n  50% {\n    opacity: 0.12;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-msg-bubble--live > span > :last-child:not(ol, ul, pre)::after,\n  .hw-msg-bubble--live > span > :is(ol, ul):last-child > li:last-child::after {\n    animation: none;\n  }\n}\n.hw-link-preview {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  border: 1px solid var(--hw-border, 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  min-height: 44px;\n  max-width: 100%;\n  text-align: start;\n}\n.hw-link-preview:hover {\n  background: var(--hw-bg-hover, rgba(0, 0, 0, 0.02));\n}\n.hw-link-preview-img {\n  width: 100%;\n  height: 56px;\n  flex: 0 0 56px;\n  object-fit: cover;\n  object-position: top;\n  border-radius: 0;\n}\n.hw-link-preview-body {\n  padding: 8px 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  justify-content: center;\n}\n.hw-link-preview-favicon {\n  width: 14px;\n  height: 14px;\n  flex: 0 0 14px;\n  border-radius: 3px;\n}\n.hw-widget[data-hw-placement=docked] .hw-link-preview-favicon {\n  box-sizing: content-box;\n  padding: 2px;\n  background: #ffffff;\n}\n.hw-link-preview-host {\n  direction: ltr;\n  min-width: 0;\n  overflow-wrap: anywhere;\n  word-break: break-all;\n}\n.hw-link-preview-title {\n  font-size: 12.5px;\n  font-weight: 600;\n  line-height: 1.3;\n  color: var(--hw-text, #1a1a1a);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.hw-link-preview-desc {\n  font-size: 11.5px;\n  line-height: 1.4;\n  color: var(--hw-text-2, #6b7280);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.hw-link-preview-url {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  font-size: 11px;\n  color: var(--hw-text-2);\n}\n.hw-msg-links {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-width: 240px;\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  max-width: min(100%, 340px);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: none;\n  box-shadow: none;\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-title {\n  font-size: 14px;\n  font-weight: 550;\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-row {\n  max-width: 300px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 9px;\n  padding: 3px 3px 3px 12px;\n  border-radius: 999px;\n  border: 1px solid var(--hw-border, rgba(0,0,0,0.1));\n  background: var(--hw-bg-subtle, #fafafa);\n  transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-email-card-row:focus-within {\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 {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 0;\n  border: 0;\n  background: transparent;\n  color: var(--hw-text, #1a1a1a);\n  font: inherit;\n  font-size: 13px;\n  outline: none;\n}\n.hw-email-card-input::placeholder {\n  color: var(--hw-text-3, #999);\n}\n.hw-email-card-row:has(.hw-email-card-input--error) {\n  border-color: #ef4444;\n}\n.hw-email-card-submit {\n  flex: none;\n  display: grid;\n  place-items: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 50%;\n  background: var(--hw-brand, #0a0a0a);\n  color: var(--hw-on-brand, #fff);\n  cursor: pointer;\n  transition: opacity 0.15s, transform 0.15s;\n}\n.hw-email-card-submit:hover:not(:disabled) {\n  transform: scale(1.06);\n}\n.hw-email-card-submit:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.hw-email-card--success {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 0;\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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: 2147483001;\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-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-window:has(.hw-powered) .hw-composer {\n    padding-bottom: 8px;\n  }\n  .hw-window:has(.hw-powered) .hw-tabs {\n    padding-bottom: 0;\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:not(.hw-agent-custom 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:not(.hw-agent-custom svg) {\n  width: 16px;\n  height: 16px;\n}\n.hw-preview-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\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  padding: 0 14px 14px;\n  margin-top: 0;\n}\n.hw-awaiting {\n  margin-top: 2px;\n  padding-left: 44px;\n  font-size: 11px;\n  line-height: 1.4;\n  color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-preview-dock {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 8px;\n  pointer-events: none;\n}\n.hw-preview-dock > .hw-preview,\n.hw-preview-dock > .hw-preview-stack {\n  position: relative;\n  bottom: auto;\n  right: auto;\n  pointer-events: auto;\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-stack.hw-preview-stack--anchored {\n  position: static;\n  bottom: auto;\n  right: auto;\n  width: 100%;\n}\n.hw-preview-more {\n  align-self: flex-end;\n  padding: 4px 10px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--hw-bg);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--hw-border);\n  color: var(--hw-text-2);\n  font: inherit;\n  font-size: 12px;\n  line-height: 1.4;\n  cursor: pointer;\n  transition: background 0.12s, color 0.12s;\n}\n.hw-preview-more:hover {\n  background: var(--hw-bg-hover);\n  color: var(--hw-text);\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: 0;\n  box-shadow: inset 0 0 0 1px var(--hw-border);\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.hw-markdown ol {\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-table-wrap {\n  margin: 10px 0;\n  overflow-x: auto;\n  border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n  border-radius: 10px;\n}\n.hw-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n.hw-table th {\n  text-align: left;\n  font-weight: 600;\n  font-size: 12px;\n  padding: 8px 12px;\n  background: var(--hw-bg-hover, #f5f5f4);\n  border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n}\n.hw-table td {\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n  vertical-align: top;\n}\n.hw-table tbody tr:last-child td {\n  border-bottom: none;\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: 7px;\n  padding: 7px 14px;\n  background: var(--hw-bg-hover);\n  color: var(--hw-text-2);\n  font-size: 11.5px;\n  font-weight: 500;\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 0;\n  animation: hw-disconnect-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);\n}\n@keyframes hw-disconnect-in {\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.hw-disconnect-retry {\n  flex: none;\n  padding: 2px 4px;\n  margin: -2px 0;\n  border: 0;\n  border-radius: 4px;\n  background: none;\n  color: var(--hw-text);\n  font: inherit;\n  font-weight: 600;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  cursor: pointer;\n}\n.hw-disconnect-retry:hover {\n  text-decoration-thickness: 2px;\n}\n.hw-disconnect-retry:focus-visible {\n  outline: 2px solid var(--hw-text);\n  outline-offset: 1px;\n}\n.hw-disconnect-spinner {\n  width: 9px;\n  height: 9px;\n  border: 1.5px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  opacity: 0.75;\n  flex-shrink: 0;\n  animation: hw-spin 0.7s linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-disconnect {\n    animation: none;\n  }\n  .hw-disconnect-spinner {\n    animation: none;\n    border-top-color: currentColor;\n    opacity: 0.5;\n  }\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  gap: 8px;\n  padding: 10px 14px;\n  border-top: 1px solid var(--hw-border);\n  flex-shrink: 0;\n}\n.hw-resolved-status {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12.5px;\n  font-weight: 550;\n  color: var(--hw-text);\n}\n.hw-resolved-status svg {\n  flex: none;\n  color: var(--hw-text-2);\n}\n.hw-csat {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 6px 10px;\n}\n.hw-csat-label,\n.hw-csat-error {\n  font-size: 12px;\n  color: var(--hw-text-2);\n}\n.hw-csat-error {\n  color: var(--hw-text);\n}\n.hw-csat-buttons {\n  display: flex;\n  gap: 6px;\n}\n.hw-csat-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  height: 30px;\n  padding: 0 11px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 999px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  font: inherit;\n  font-size: 12px;\n  font-weight: 550;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.hw-csat-btn svg {\n  flex: none;\n}\n.hw-csat-btn:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-csat-btn:focus-visible {\n  outline: 2px solid var(--hw-text);\n  outline-offset: 2px;\n}\n.hw-csat-btn[aria-pressed=true] {\n  background: var(--hw-bg-hover);\n  border-color: var(--hw-brand, var(--hw-primary));\n  box-shadow: inset 0 0 0 1px var(--hw-brand, var(--hw-primary));\n  cursor: default;\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: inherit;\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 2px;\n  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);\n  word-break: normal;\n  overflow-wrap: anywhere;\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-send-error {\n    background: #450a0a;\n    color: #fca5a5;\n  }\n  .hw-error-icon {\n    background: #450a0a;\n    color: #f87171;\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.hw-widget[data-hw-placement=docked] {\n  --hw-dock-width: 600px;\n  --hw-dock-bar-width: 480px;\n  --hw-dock-inset: 24px;\n  --hw-bar-max-height: 148px;\n  --hw-dock-surface: #ffffff;\n  --hw-dock-on-surface: #111111;\n  --hw-dock-pill-bg: rgba(44, 44, 48, 0.66);\n  --hw-dock-pill-fg: rgba(255, 255, 255, 0.94);\n  --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] {\n  z-index: 2147483000;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock {\n  position: fixed;\n  left: 0;\n  right: 0;\n  bottom: var(--hw-dock-inset);\n  z-index: 2147483000;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  pointer-events: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock > * {\n  pointer-events: auto;\n}\n.hw-dock-suggestions {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 9px;\n  width: var(--hw-dock-bar-width, var(--hw-dock-width));\n  max-width: calc(100vw - 32px);\n  margin-bottom: 14px;\n}\n.hw-dock-pill-row {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  animation: hw-dock-pill-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;\n}\n.hw-dock-pill-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: var(--hw-dock-pill-fg);\n  cursor: pointer;\n  align-self: flex-start;\n  margin-top: 8px;\n  opacity: 0;\n  transform: scale(0.85);\n  transition:\n    opacity 0.12s linear,\n    transform 0.12s cubic-bezier(0.25, 1, 0.5, 1),\n    color 0.12s linear;\n}\n.hw-dock-pill-dismiss svg {\n  width: 11px;\n  height: 11px;\n}\n.hw-dock-suggestions:hover .hw-dock-pill-dismiss,\n.hw-dock-suggestions:focus-within .hw-dock-pill-dismiss {\n  opacity: 1;\n  transform: none;\n}\n.hw-dock-pill-dismiss:hover {\n  color: var(--hw-dock-on-surface);\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-dock-pill-dismiss {\n    transition: none;\n  }\n}\n@media (hover: none) {\n  .hw-dock-pill-dismiss {\n    opacity: 1;\n    transform: none;\n  }\n}\n.hw-dock-pill {\n  align-self: flex-start;\n  padding: 10px 18px;\n  border: 1px solid var(--hw-dock-pill-border, transparent);\n  border-radius: 999px;\n  cursor: pointer;\n  font: inherit;\n  font-size: 14px;\n  font-weight: 500;\n  text-align: left;\n  background: var(--hw-dock-pill-bg);\n  color: var(--hw-dock-pill-fg);\n  backdrop-filter: blur(10px) saturate(1.2);\n  -webkit-backdrop-filter: blur(10px) saturate(1.2);\n  box-shadow: 0 4px 14px -8px rgba(12, 11, 10, 0.28);\n  transition:\n    background 0.16s,\n    border-color 0.16s,\n    transform 0.16s;\n}\n.hw-dock-pill {\n  backdrop-filter: blur(18px);\n  -webkit-backdrop-filter: blur(18px);\n}\n.hw-dock-pill:hover {\n  background: color-mix(in srgb, var(--hw-dock-pill-bg) 100%, var(--hw-dock-on-surface) 8%);\n  border-color: color-mix(in srgb, var(--hw-dock-pill-border) 100%, var(--hw-dock-on-surface) 10%);\n  transform: translateX(3px);\n}\n@keyframes hw-dock-pill-in {\n  from {\n    opacity: 0;\n    transform: translateY(10px) scale(0.97);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n.hw-dock-bar {\n  display: flex;\n  align-items: flex-end;\n  gap: 10px;\n  width: var(--hw-dock-bar-width, var(--hw-dock-width));\n  max-width: calc(100vw - 32px);\n  min-height: 52px;\n  padding: 10px 10px 10px 18px;\n  border: 0;\n  border-radius: 26px;\n  background: var(--hw-dock-surface);\n  color: var(--hw-dock-on-surface);\n  box-shadow:\n    inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n    0 0 0 1px color-mix(in srgb, var(--hw-dock-on-surface) 7%, transparent),\n    0 2px 6px rgba(12, 11, 10, 0.18),\n    0 20px 48px -14px rgba(12, 11, 10, 0.45);\n  transition:\n    border-radius 0.18s ease,\n    box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),\n    width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.hw-dock-bar:focus-within {\n  box-shadow:\n    inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n    0 0 0 1px color-mix(in srgb, var(--hw-primary, #fb923c) 60%, transparent),\n    0 2px 6px rgba(12, 11, 10, 0.18),\n    0 20px 48px -14px rgba(12, 11, 10, 0.45);\n}\n.hw-dock-bar[data-grown=true] {\n  border-radius: 20px;\n}\n.hw-dock-input {\n  flex: 1;\n  min-width: 0;\n  min-height: 20px;\n  max-height: var(--hw-bar-max-height);\n  padding: 6px 0;\n  border: 0;\n  outline: none;\n  resize: none;\n  overflow-y: auto;\n  background: transparent;\n  color: var(--hw-dock-on-surface);\n  font: inherit;\n  font-size: 14px;\n  line-height: 1.45;\n  transition: height 0.12s ease;\n}\n.hw-dock-input::placeholder {\n  color: color-mix(in srgb, var(--hw-dock-on-surface) 45%, transparent);\n}\n.hw-dock-send {\n  flex: none;\n  width: 32px;\n  height: 32px;\n  margin-bottom: 1px;\n  border: 0;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  background: var(--hw-primary, #fb923c);\n  color: var(--hw-on-brand, #fff);\n  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s;\n}\n.hw-dock-send:hover:not(:disabled) {\n  transform: scale(1.06);\n}\n.hw-dock-send:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n  position: fixed;\n  left: 50%;\n  right: auto;\n  margin-left: calc(var(--hw-dock-width) / -2);\n  bottom: calc(var(--hw-dock-inset) + 66px);\n  width: var(--hw-dock-width);\n  max-width: calc(100vw - 32px);\n  height: 420px;\n}\n@media (max-width: 640px) {\n  .hw-widget[data-hw-placement=docked] .hw-window {\n    left: 16px;\n    right: 16px;\n    margin-left: 0;\n    width: auto;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-bubble {\n  display: none;\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-window {\n  bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-suggestions {\n  display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-dock-pill,\n  .hw-dock-bar,\n  .hw-dock-input,\n  .hw-dock-send {\n    animation: none;\n    transition: none;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-composer,\n.hw-widget[data-hw-placement=docked] .hw-tabs,\n.hw-widget[data-hw-placement=docked] .hw-footer-tabs {\n  display: none;\n}\n.hw-starters {\n  display: flex;\n  flex-direction: column;\n  margin-top: 10px;\n  border-radius: 14px;\n  overflow: hidden;\n  background: var(--hw-bg);\n  box-shadow: inset 0 0 0 1px var(--hw-border);\n}\n.hw-starter {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 11px 14px;\n  border: 0;\n  border-radius: 0;\n  cursor: pointer;\n  background: transparent;\n  color: var(--hw-text);\n  font: inherit;\n  text-align: left;\n  animation: hw-starter-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n  transition: background 0.12s;\n}\n.hw-starter + .hw-starter {\n  box-shadow: inset 0 1px 0 var(--hw-border);\n}\n.hw-starter:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-starter-text {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n.hw-starter-k {\n  font-size: 13px;\n  font-weight: 550;\n  line-height: 1.35;\n  color: var(--hw-text);\n}\n.hw-starter-q {\n  font-size: 12px;\n  line-height: 1.35;\n  color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-starter svg {\n  flex: none;\n  color: var(--hw-text-3, var(--hw-text-muted));\n  opacity: 0.45;\n  transition: opacity 0.15s, transform 0.15s;\n}\n.hw-starter:hover svg {\n  opacity: 0.9;\n  transform: translateX(2px);\n}\n@keyframes hw-starter-in {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-header-back {\n  display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-starter {\n    animation: none;\n  }\n}\n@media (prefers-color-scheme: dark) {\n  .hw-widget:not([data-theme=light])[data-hw-placement=docked] {\n    --hw-dock-surface: #1f1f23;\n    --hw-dock-on-surface: #f4f4f6;\n    --hw-dock-pill-bg: rgba(255, 255, 255, 0.1);\n    --hw-dock-pill-fg: #e4e4e7;\n    --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n  }\n}\n.hw-widget[data-theme=dark][data-hw-placement=docked] {\n  --hw-dock-surface: #1f1f23;\n  --hw-dock-on-surface: #f4f4f6;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n  --hw-bg: rgba(255, 255, 255, 0.08);\n  --hw-bg-subtle: transparent;\n  --hw-bg-hover: rgba(255, 255, 255, 0.1);\n  --hw-border: rgba(255, 255, 255, 0.14);\n  --hw-border-md: rgba(255, 255, 255, 0.22);\n  --hw-text: rgba(255, 255, 255, 0.94);\n  --hw-text-1: #ffffff;\n  --hw-text-2: rgba(255, 255, 255, 0.72);\n  --hw-text-3: rgba(255, 255, 255, 0.62);\n  --hw-text-4: rgba(255, 255, 255, 0.46);\n  --hw-visitor-bubble-bg: rgba(255, 255, 255, 0.16);\n  --hw-visitor-bubble-text: #ffffff;\n  --hw-brand: rgba(255, 255, 255, 0.92);\n  --hw-on-brand: #17161a;\n  --hw-focus-border: rgba(255, 255, 255, 0.34);\n  --hw-focus-ring: rgba(255, 255, 255, 0.1);\n  height: 500px;\n  max-height: calc(100vh - 180px);\n  border-radius: 24px;\n  color: var(--hw-text);\n  background:\n    linear-gradient(\n      180deg,\n      rgba(40, 40, 44, 0.72) 0%,\n      rgba(46, 46, 50, 0.7) 55%,\n      rgba(52, 52, 56, 0.68) 100%);\n  backdrop-filter: blur(30px);\n  -webkit-backdrop-filter: blur(30px);\n  box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .hw-widget[data-hw-placement=docked] .hw-window {\n    background: #2c2c2e;\n  }\n}\n@media (max-width: 640px) {\n  .hw-widget[data-hw-placement=docked] .hw-window {\n    height: min(60vh, 460px);\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-header--sub {\n  padding: 14px 12px 8px 16px;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-status {\n  display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-name {\n  font-size: 15.5px;\n  font-weight: 560;\n  letter-spacing: -0.006em;\n  color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-conv-name,\n.hw-widget[data-hw-placement=docked] .hw-event-name {\n  font-weight: 545;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-bot-icon {\n  border-radius: 50%;\n  overflow: hidden;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-close:hover,\n.hw-widget[data-hw-placement=docked] .hw-header-menu-btn:hover {\n  background: rgba(255, 255, 255, 0.12);\n  color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-messages {\n  padding: 4px 22px 16px;\n  gap: 18px;\n  -webkit-mask-image:\n    linear-gradient(\n      180deg,\n      transparent 0,\n      #000 16px);\n  mask-image:\n    linear-gradient(\n      180deg,\n      transparent 0,\n      #000 16px);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--ai .hw-msg-bubble,\n.hw-widget[data-hw-placement=docked] .hw-msg--team .hw-msg-bubble {\n  padding: 0;\n  background: transparent;\n  border-radius: 0;\n  font-size: 15px;\n  line-height: 1.55;\n  color: var(--hw-text);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--visitor .hw-msg-bubble {\n  background: rgba(255, 255, 255, 0.16);\n  color: #ffffff;\n  font-size: 14.5px;\n  line-height: 1.5;\n}\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble pre,\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble code {\n  background: rgba(0, 0, 0, 0.28);\n  color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row {\n  background: rgba(0, 0, 0, 0.26);\n  border-color: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] .hw-window :focus-visible {\n  outline-color: rgba(255, 255, 255, 0.55);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus,\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row:focus-within {\n  border-color: rgba(255, 255, 255, 0.42);\n  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-submit {\n  background: #ffffff;\n  color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n  position: relative;\n  z-index: 3;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu {\n  background: #3a3a3f;\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 44px -12px rgba(12, 11, 10, 0.62);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button:hover {\n  background: rgba(255, 255, 255, 0.11);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button.hw-header-menu-conv[data-active=true] {\n  background: rgba(255, 255, 255, 0.09);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-convs {\n  border-bottom-color: rgba(255, 255, 255, 0.12);\n}\n.hw-widget[data-hw-placement=docked] .hw-event--card {\n  margin: 0;\n  background: rgba(255, 255, 255, 0.08);\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-event-avatar {\n  background: rgba(255, 255, 255, 0.14);\n  color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview {\n  position: fixed;\n  left: 50%;\n  right: auto;\n  margin-left: calc(var(--hw-dock-bar-width, var(--hw-dock-width)) / -2);\n  bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n  width: var(--hw-dock-bar-width, var(--hw-dock-width));\n  max-width: calc(100vw - 32px);\n  border: 0;\n  border-radius: 24px;\n  color: rgba(255, 255, 255, 0.94);\n  background:\n    linear-gradient(\n      180deg,\n      rgba(40, 40, 44, 0.74) 0%,\n      rgba(52, 52, 56, 0.7) 100%);\n  backdrop-filter: blur(30px);\n  -webkit-backdrop-filter: blur(30px);\n  box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-name,\n.hw-widget[data-hw-placement=docked] .hw-preview-body {\n  color: rgba(255, 255, 255, 0.94);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close {\n  color: rgba(255, 255, 255, 0.6);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close:hover {\n  background: rgba(255, 255, 255, 0.12);\n  color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-footer {\n  color: rgba(255, 255, 255, 0.55);\n  border-top-color: rgba(255, 255, 255, 0.1);\n}\n@media (max-width: 640px) {\n  .hw-widget[data-hw-placement=docked] .hw-preview {\n    left: 16px;\n    right: 16px;\n    margin-left: 0;\n    width: auto;\n  }\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .hw-widget[data-hw-placement=docked] .hw-preview {\n    background: #2c2c2e;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn {\n  padding: 7px 14px;\n  font-size: 13px;\n  font-weight: 550;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.94);\n  box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n  color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn:hover:not(:disabled) {\n  background: #ffffff;\n  box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n  transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn[data-tapped=true] {\n  background: rgba(255, 255, 255, 0.22);\n  color: #ffffff;\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n  transform: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn svg {\n  opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer {\n  padding: 7px 14px;\n  font-size: 13px;\n  background: rgba(255, 255, 255, 0.94);\n  color: #17161a;\n  box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n  transition:\n    background 0.15s,\n    box-shadow 0.15s,\n    transform 0.15s;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer:hover {\n  background: #ffffff;\n  color: #17161a;\n  box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n  transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-offer svg {\n  opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar {\n  --hw-dock-on-surface: rgba(255, 255, 255, 0.94);\n  color: rgba(255, 255, 255, 0.94);\n  background:\n    linear-gradient(\n      180deg,\n      rgba(44, 44, 48, 0.74) 0%,\n      rgba(52, 52, 56, 0.72) 100%);\n  backdrop-filter: blur(30px);\n  -webkit-backdrop-filter: blur(30px);\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -16px rgba(12, 11, 10, 0.45);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n  width: var(--hw-dock-width);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar:focus-within {\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 18px 40px -16px rgba(12, 11, 10, 0.5);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 22px 52px -18px rgba(12, 11, 10, 0.52);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-send:not(:disabled) {\n  background: #ffffff;\n  color: #17161a;\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .hw-widget[data-hw-placement=docked] .hw-dock-bar {\n    background: #2c2c2e;\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n  transform-origin: 50% 100%;\n  animation: hw-dock-panel-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing {\n  animation: hw-dock-panel-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n@keyframes hw-dock-panel-in {\n  from {\n    opacity: 0;\n    transform: translateY(14px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n@keyframes hw-dock-panel-out {\n  from {\n    opacity: 1;\n    transform: none;\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.99);\n  }\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n  animation: hw-dock-settle 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n  animation: hw-dock-settle 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.11s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-header--sub,\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-messages {\n  animation: none;\n}\n@keyframes hw-dock-settle {\n  from {\n    opacity: 0;\n    transform: translateY(7px);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-widget[data-hw-placement=docked] .hw-window,\n  .hw-widget[data-hw-placement=docked] .hw-window--closing,\n  .hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub,\n  .hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n    animation: none;\n  }\n}\n.hw-dock-bar {\n  flex-wrap: wrap;\n  padding-left: 18px;\n  padding-right: 8px;\n}\n.hw-dock-error {\n  width: var(--hw-dock-width);\n  max-width: calc(100vw - 32px);\n  margin-bottom: 8px;\n  padding: 8px 14px;\n  border-radius: 14px;\n  background: rgba(190, 24, 40, 0.92);\n  color: #ffffff;\n  font-size: 12.5px;\n  line-height: 1.35;\n  box-shadow: 0 10px 26px -12px rgba(12, 11, 10, 0.5);\n  animation: hw-dock-settle 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-dock-error {\n    animation: none;\n  }\n}\n.hw-dock-previews {\n  flex: 0 0 100%;\n  order: -1;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 2px 0 8px;\n}\n.hw-dock-lead {\n  flex: none;\n  display: grid;\n  place-items: center;\n  width: 32px;\n  height: 32px;\n  margin-left: -8px;\n}\n.hw-dock-actions {\n  flex: none;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  margin-bottom: 1px;\n}\n.hw-dock-tool {\n  display: grid;\n  place-items: center;\n  width: 30px;\n  height: 30px;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: color-mix(in srgb, var(--hw-dock-on-surface) 52%, transparent);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n.hw-dock-tool:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--hw-dock-on-surface) 8%, transparent);\n  color: var(--hw-dock-on-surface);\n}\n.hw-dock-tool:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n.hw-dock-tool[data-active=true] {\n  color: #e11d48;\n  background: rgba(225, 29, 72, 0.12);\n  animation: hw-dock-listening 1.4s ease-in-out infinite;\n}\n@keyframes hw-dock-listening {\n  0%, 100% {\n    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35);\n  }\n  50% {\n    box-shadow: 0 0 0 4px rgba(225, 29, 72, 0);\n  }\n}\n.hw-dock-send:disabled {\n  opacity: 1;\n  background: color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent);\n  color: color-mix(in srgb, var(--hw-dock-on-surface) 38%, transparent);\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-dock-tool[data-active=true] {\n    animation: none;\n  }\n  .hw-dock-bar {\n    transition: none;\n  }\n}\n.hw-dock-input:focus,\n.hw-dock-input:focus-visible {\n  outline: none;\n  box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-powered {\n  display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-disconnect {\n  border-radius: 20px 20px 0 0;\n}\n.hw-msg-meta {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.hw-msg-author {\n  font-weight: 550;\n}\n.hw-msg-meta-sep {\n  opacity: 0.55;\n}\n.hw-header-actions {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n.hw-header-menu-btn {\n  display: grid;\n  place-items: center;\n  width: 30px;\n  height: 30px;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n  background: transparent;\n  color: var(--hw-text-2, var(--hw-text-muted));\n  transition: background 0.15s, color 0.15s;\n}\n.hw-header-menu-btn:hover {\n  background: var(--hw-bg-hover);\n  color: var(--hw-text);\n}\n.hw-header-menu {\n  position: absolute;\n  top: 36px;\n  right: 0;\n  z-index: 6;\n  min-width: 236px;\n  max-width: 288px;\n  padding: 5px;\n  border-radius: 14px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  box-shadow: 0 0 0 1px var(--hw-border), 0 12px 32px -10px rgba(0, 0, 0, 0.32);\n  animation: hw-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n}\n@keyframes hw-menu-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n.hw-header-menu button {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 9px 10px;\n  border: 0;\n  border-radius: 9px;\n  cursor: pointer;\n  background: transparent;\n  color: var(--hw-text);\n  font: inherit;\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.14s;\n}\n.hw-header-menu button:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-header-menu button svg {\n  flex: none;\n  color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu button:hover svg {\n  color: var(--hw-brand, var(--hw-primary));\n}\n.hw-header-menu-convs {\n  display: flex;\n  flex-direction: column;\n  max-height: 168px;\n  overflow-y: auto;\n  padding-bottom: 5px;\n  margin-bottom: 5px;\n  border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-menu button.hw-header-menu-conv {\n  flex-direction: column;\n  align-items: stretch;\n  gap: 2px;\n  padding: 8px 10px;\n}\n.hw-header-menu button.hw-header-menu-conv[data-active=true] {\n  background: var(--hw-bg-hover);\n}\n.hw-header-menu-conv-top {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n.hw-header-menu-conv-name {\n  overflow: hidden;\n  font-size: 12.5px;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.hw-header-menu-conv-time {\n  flex: none;\n  font-size: 11px;\n  color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu-conv-preview {\n  overflow: hidden;\n  font-size: 12px;\n  color: var(--hw-text-2);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.hw-offers {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 10px;\n}\n.hw-offer {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  border: 0;\n  border-radius: 999px;\n  cursor: pointer;\n  background: var(--hw-bg-hover);\n  color: var(--hw-text);\n  font: inherit;\n  font-size: 12.5px;\n  font-weight: 550;\n  transition: background 0.15s, color 0.15s;\n}\n.hw-offer:hover {\n  background: var(--hw-brand, var(--hw-primary));\n  color: var(--hw-on-brand, #fff);\n}\n.hw-offer svg {\n  flex: none;\n}\n.hw-sources {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-top: 4px;\n}\n.hw-source {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 5px 14px;\n  border-radius: 9px;\n  background: transparent;\n  color: var(--hw-text);\n  text-decoration: none;\n  transition: background 0.15s;\n}\n.hw-widget[data-hw-placement=docked] .hw-source {\n  margin-inline: -8px;\n  padding-inline: 8px;\n}\na.hw-source {\n  cursor: pointer;\n}\na.hw-source:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-source-n {\n  display: grid;\n  place-items: center;\n  flex: none;\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  background: var(--hw-brand, var(--hw-primary));\n  color: var(--hw-on-brand, #fff);\n  font-size: 10px;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n}\n.hw-source-title {\n  flex: 1;\n  min-width: 0;\n  font-size: 12px;\n  font-weight: 550;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] {\n  --hw-dock-tint: var(--hw-primary);\n  --hw-dock-ink: #ffffff;\n  --hw-dock-shade: #000000;\n  --hw-dock-wash: var(--hw-dock-shade);\n  --hw-dock-ink-2: color-mix(in srgb, var(--hw-dock-ink) 86%, var(--hw-dock-tint));\n  --hw-dock-ink-3: color-mix(in srgb, var(--hw-dock-ink) 78%, var(--hw-dock-tint));\n  --hw-dock-ink-4: color-mix(in srgb, var(--hw-dock-ink) 60%, var(--hw-dock-tint));\n  --hw-dock-pill-bg: var(--hw-dock-tint);\n  --hw-dock-pill-fg: var(--hw-dock-ink);\n  --hw-dock-pill-border: color-mix(in srgb, var(--hw-dock-ink) 30%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-window, .hw-dock-bar, .hw-preview) {\n  --hw-text: var(--hw-dock-ink);\n  --hw-text-1: var(--hw-dock-ink);\n  --hw-text-2: var(--hw-dock-ink-2);\n  --hw-text-3: var(--hw-dock-ink-3);\n  --hw-text-4: var(--hw-dock-ink-4);\n  --hw-text-muted: var(--hw-dock-ink-2);\n  --hw-bg: color-mix(in srgb, var(--hw-dock-wash) 12%, transparent);\n  --hw-bg-subtle: transparent;\n  --hw-bg-hover: color-mix(in srgb, var(--hw-dock-wash) 18%, transparent);\n  --hw-border: color-mix(in srgb, var(--hw-dock-ink) 22%, transparent);\n  --hw-border-md: color-mix(in srgb, var(--hw-dock-ink) 34%, transparent);\n  --hw-focus-border: color-mix(in srgb, var(--hw-dock-ink) 60%, transparent);\n  --hw-focus-ring: color-mix(in srgb, var(--hw-dock-ink) 18%, transparent);\n  --hw-visitor-bubble-bg: color-mix(in srgb, var(--hw-dock-wash) 14%, transparent);\n  --hw-visitor-bubble-text: var(--hw-dock-ink);\n  --hw-primary: var(--hw-dock-ink);\n  --hw-primary-hover: var(--hw-dock-ink);\n  --hw-brand: var(--hw-dock-ink);\n  --hw-on-brand: var(--hw-dock-tint);\n  --hw-dock-surface: transparent;\n  --hw-dock-on-surface: var(--hw-dock-ink);\n  color: var(--hw-dock-ink);\n  background:\n    radial-gradient(\n      70% 60% at 86% 8%,\n      var(--hw-dock-tint),\n      transparent 64%),\n    linear-gradient(\n      165deg,\n      color-mix(in srgb, var(--hw-dock-shade) 12%, var(--hw-dock-tint)) 0%,\n      color-mix(in srgb, var(--hw-dock-shade) 30%, var(--hw-dock-tint)) 100%);\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px color-mix(in srgb, var(--hw-dock-ink) 16%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble {\n  background: var(--hw-dock-ink);\n  color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble a,\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble a:hover {\n  color: inherit;\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-dock-send:not(:disabled), .hw-quick-reply-btn, .hw-quick-reply-btn:hover:not(:disabled), .hw-email-card-submit, .hw-offer, .hw-offer:hover) {\n  background: var(--hw-dock-ink);\n  color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-preview-body, .hw-header-close:hover, .hw-header-menu-btn:hover, .hw-preview-close:hover, .hw-quick-reply-btn[data-tapped=true]) {\n  color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-preview-close, .hw-preview-footer) {\n  color: var(--hw-dock-ink-2);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-quick-reply-btn[data-tapped=true] {\n  background: color-mix(in srgb, var(--hw-dock-wash) 22%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-window :focus-visible {\n  outline-color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg-bubble :is(pre, code),\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-email-card-row {\n  background: color-mix(in srgb, var(--hw-dock-shade) 26%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-header-menu {\n  background: color-mix(in srgb, var(--hw-dock-shade) 34%, var(--hw-dock-tint));\n  color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-header-bot-icon--team, .hw-event-avatar) {\n  background: var(--hw-dock-ink);\n  color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-dock-input::placeholder {\n  color: var(--hw-dock-ink-3);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-typing-dot {\n  background: var(--hw-dock-ink-2);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-disconnect {\n  background: color-mix(in srgb, var(--hw-dock-shade) 16%, transparent);\n  color: var(--hw-dock-ink-2);\n}\n');
 
 // src/helpway-widget.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -7822,14 +7950,14 @@ function HelpwayWidget({
 }
 
 // src/hooks/use-realtime.ts
-import { useEffect as useEffect17, useRef as useRef18 } from "react";
+import { useEffect as useEffect18, useRef as useRef19 } from "react";
 function useRealtime(handler) {
   const { ws } = useWidgetContext();
-  const handlerRef = useRef18(handler);
-  useEffect17(() => {
+  const handlerRef = useRef19(handler);
+  useEffect18(() => {
     handlerRef.current = handler;
   });
-  useEffect17(() => {
+  useEffect18(() => {
     return ws.onEvent((event) => handlerRef.current(event));
   }, [ws]);
 }