@helpway/react 0.15.3 → 0.16.0

package/dist/index.js

@@ -66,6 +66,36 @@ function createWidgetClient(config) {
   });
 }
 
+// ../types/src/model-registry.ts
+var AI_MODELS = {
+  "openai/gpt-5.5": {
+    label: "GPT-5.5",
+    provider: "OpenAI",
+    maxTokens: 32768
+  },
+  "openai/gpt-4.1": {
+    label: "GPT-4.1",
+    provider: "OpenAI",
+    maxTokens: 32768
+  },
+  "openai/gpt-4.1-mini": {
+    label: "GPT-4.1 Mini",
+    provider: "OpenAI",
+    maxTokens: 32768
+  },
+  "openai/gpt-4o": {
+    label: "GPT-4o",
+    provider: "OpenAI",
+    maxTokens: 4096
+  },
+  "openai/gpt-4o-mini": {
+    label: "GPT-4o Mini",
+    provider: "OpenAI",
+    maxTokens: 4096
+  }
+};
+var AI_MODEL_IDS = Object.keys(AI_MODELS);
+
 // ../types/src/realtime-events.ts
 var WsEventType = {
   ConnectionEstablished: "connectionEstablished",
@@ -343,6 +373,9 @@ var DOC_NAV_ICON_MAP = Object.fromEntries(
   DOC_NAV_ICONS.map((i) => [i.name, i])
 );
 
+// ../widget-core/src/version.ts
+var SDK_VERSION = "0.16.0".length > 0 ? "0.16.0" : "dev";
+
 // ../widget-core/src/ws.ts
 var WebSocketManager = class {
   ws = null;
@@ -384,7 +417,9 @@ var WebSocketManager = class {
       type: "visitor",
       id: this.config.visitorId,
       websiteId: this.config.websiteId,
-      key: this.config.apiKey
+      key: this.config.apiKey,
+      // SDK version on the hello (#167): the server logs it per connect.
+      v: SDK_VERSION
     });
     const ws = new WebSocket(`${base}/ws?${params}`);
     ws.onopen = () => {
@@ -479,75 +514,375 @@ var WebSocketManager = class {
 
 // ../widget-core/src/store.ts
 import { createStore } from "zustand/vanilla";
-var CONTENT_CACHE_TTL = 5 * 60 * 1e3;
-var PREVIEW_STORAGE_KEY = "helpway:incoming-preview";
-function streamingKeyFor(conversationId) {
-  return `streaming-${conversationId}`;
+
+// ../widget-core/src/i18n.ts
+var en = {
+  // Navigation & tabs
+  "widget.home": "Home",
+  "widget.messages": "Messages",
+  "widget.help": "Help",
+  // Home screen
+  "widget.send_us_message": "Send us a message",
+  "widget.reply_time": "We typically reply in a few minutes",
+  "widget.recent_conversations": "Recent conversations",
+  "widget.see_all": "See all conversations",
+  "widget.whats_new": "What's New",
+  "widget.view_all": "View all",
+  // Messages tab
+  "widget.no_messages": "No messages yet",
+  "widget.no_messages_desc": "Start a conversation to get help",
+  "widget.start_conversation": "Start a conversation",
+  "widget.no_preview": "No messages yet",
+  // Conversation
+  "widget.new_conversation": "New conversation",
+  "widget.talk_to_human": "Talk to a human",
+  "widget.talk_to_human_message": "I'd like to talk to a human, please.",
+  "widget.aria_options": "Conversation options",
+  "widget.resolved_text": "This conversation has been resolved",
+  "widget.send_followup": "Send a follow-up",
+  "widget.start_a_conversation": "Start a conversation",
+  // Composer
+  "widget.placeholder": "Send a message...",
+  "widget.placeholder_new": "How can we help?",
+  "widget.drop_files": "Drop files here",
+  // CSAT
+  "widget.csat_label": "How was your experience?",
+  "widget.csat_thanks": "Thanks for your feedback!",
+  // Inline email collection (after AI reply)
+  "widget.email_title": "Don't miss our reply",
+  "widget.email_subtitle": "We'll email you when we respond",
+  "widget.email_placeholder": "you@email.com",
+  "widget.email_continue": "Send",
+  "widget.email_saved": "You'll be notified by email",
+  "widget.email_dismiss": "No thanks",
+  // Errors
+  "widget.error_title": "Something went wrong",
+  "widget.error_desc": "Failed to load. Please try again.",
+  "widget.retry": "Retry",
+  "widget.reconnecting": "Reconnecting...",
+  "widget.send_error": "Message not sent",
+  // Date separators (today is implicit — never rendered)
+  "widget.yesterday": "Yesterday",
+  // Sender labels
+  "widget.helpway_ai": "Helpway AI",
+  "widget.support": "Support",
+  // Events
+  "widget.joined": "joined the conversation",
+  "widget.left": "left the conversation",
+  // Content/search
+  "widget.content": "Content",
+  "widget.search": "Search...",
+  "widget.no_results": "No results found",
+  "widget.try_different": "Try a different search term",
+  "widget.nothing_yet": "Nothing here yet",
+  "widget.check_back": "Check back later for updates",
+  "widget.load_more": "Load more",
+  "widget.loading": "Loading...",
+  // Copy
+  "widget.copy": "Copy message",
+  "widget.copied": "Copied",
+  // File upload
+  "widget.file_too_large": "File too large (max 10 MB)",
+  "widget.click_to_open": "Click to open",
+  "widget.caption_required": "Add a message to send with your attachment",
+  // Accessibility
+  "widget.aria_chat": "Support chat",
+  "widget.aria_close": "Close",
+  "widget.aria_back": "Back",
+  "widget.aria_send": "Send message",
+  "widget.aria_open_image": "Open image",
+  "widget.aria_attach": "Attach file",
+  "widget.aria_dictate": "Dictate message",
+  "widget.aria_input": "Message input",
+  "widget.aria_remove": "Remove",
+  "widget.aria_dismiss": "Dismiss",
+  "widget.aria_open": "Open support",
+  "widget.aria_close_support": "Close support",
+  "widget.aria_good": "Good",
+  "widget.aria_bad": "Bad",
+  "widget.aria_messages": "Messages",
+  // Time (relative)
+  "widget.time_now": "now",
+  "widget.time_yesterday": "Yesterday",
+  // Powered by
+  "widget.powered_by": "Powered by",
+  // Closed-state dock — overflow row when the announcement stack is clipped
+  /* Plural handled by two keys rather than a rule. The widget's `t()` does
+     `{{var}}` substitution and nothing else, and inventing a plural engine for
+     one string would be the larger mistake; the languages we ship differ on
+     where the count sits, not on how many forms it needs here. */
+  /* A state, not a count. "3" in a pill reads as unread; this row is telling the
+     visitor the thread is waiting on THEM, which is a different thing and the one
+     that decides whether an answered conversation gets abandoned. */
+  "widget.awaiting_your_reply": "Awaiting your reply",
+  "widget.more_announcements_one": "+1 more update",
+  "widget.more_announcements": "+{{count}} more updates",
+  // Hero / home screen
+  /* One line, not two. The second line was "How can we help?" — the exact string
+     the composer's own placeholder shows, two inches below it. The input is what
+     asks the question; the greeting only has to say hello. */
+  "widget.welcome_message": "Hi there \u{1F44B}",
+  "widget.subtitle_text": "Usually replies in minutes"
+};
+var currentLocale = "en";
+var translations = {};
+var isLoaded = false;
+var revision = 0;
+var listeners = [];
+function t(key, params) {
+  const value = translations[key] ?? en[key] ?? key;
+  if (!params) return value;
+  return value.replace(/\{\{(\w+)\}\}/g, (_, k) => {
+    return params[k]?.toString() ?? `{{${k}}}`;
+  });
 }
-function loadPersistedPreview() {
-  if (typeof window === "undefined") return null;
-  try {
-    const raw = window.localStorage.getItem(PREVIEW_STORAGE_KEY);
-    return raw ? JSON.parse(raw) : null;
-  } catch {
-    return null;
-  }
+function getLocale() {
+  return currentLocale;
 }
-function persistPreview(preview) {
-  if (typeof window === "undefined") return;
+function getI18nRevision() {
+  return revision;
+}
+function onLocaleChange(fn) {
+  listeners.push(fn);
+  return () => {
+    const idx = listeners.indexOf(fn);
+    if (idx >= 0) listeners.splice(idx, 1);
+  };
+}
+async function initI18n(options) {
+  if (options?.cdnBase) {
+    cdnBase = options.cdnBase;
+  }
+  const detected = options?.locale ?? (typeof navigator !== "undefined" ? navigator.language : "en");
+  currentLocale = normalizeLocale(detected);
+  if (currentLocale === "en") {
+    isLoaded = true;
+    notify();
+    return;
+  }
   try {
-    if (preview) {
-      window.localStorage.setItem(PREVIEW_STORAGE_KEY, JSON.stringify(preview));
-    } else {
-      window.localStorage.removeItem(PREVIEW_STORAGE_KEY);
+    const data = await fetchTranslations(currentLocale);
+    if (data) {
+      for (const [key, value] of Object.entries(data)) {
+        if (typeof value === "string") {
+          translations[`widget.${key}`] = value;
+        }
+      }
     }
-  } catch {
+  } catch (err) {
+    console.warn(`[Helpway] Failed to fetch ${currentLocale} translations, using English`, err);
   }
+  isLoaded = true;
+  notify();
 }
-function parseJoinEvent(text) {
-  if (!text.startsWith("{")) return null;
+async function setLocale(locale) {
+  const normalized = normalizeLocale(locale);
+  if (normalized === currentLocale) return;
+  currentLocale = normalized;
+  translations = {};
+  if (normalized === "en") {
+    notify();
+    return;
+  }
   try {
-    const parsed = JSON.parse(text);
-    if (parsed.action !== "joined") return null;
-    return { name: parsed.name ?? null, image: parsed.image ?? null };
+    const data = await fetchTranslations(normalized);
+    if (data) {
+      for (const [key, value] of Object.entries(data)) {
+        if (typeof value === "string") {
+          translations[`widget.${key}`] = value;
+        }
+      }
+    }
   } catch {
-    return null;
   }
+  notify();
 }
-function latestAssignee(items) {
-  for (let i = items.length - 1; i >= 0; i--) {
-    const item = items[i];
-    if (item?.type !== "event" || !item.text) continue;
-    const joined = parseJoinEvent(item.text);
-    if (joined) return joined;
+var cdnBase = "https://cdn.better-i18n.com/helpway/widget";
+async function fetchTranslations(locale) {
+  const url = `${cdnBase}/${locale}/translations.json`;
+  let res = await fetch(url);
+  if (!res.ok && locale.includes("-")) {
+    const base = locale.split("-")[0];
+    res = await fetch(`${cdnBase}/${base}/translations.json`);
+  }
+  if (!res.ok) return null;
+  const data = await res.json();
+  const widgetNs = data.widget;
+  if (widgetNs && typeof widgetNs === "object" && !Array.isArray(widgetNs)) {
+    const result = {};
+    for (const [k, v] of Object.entries(widgetNs)) {
+      if (typeof v === "string") result[k] = v;
+    }
+    return result;
   }
   return null;
 }
-var AI_INDICATOR_MAX_MS = 45e3;
-function createWidgetStore() {
-  const indicatorWatchdogs = /* @__PURE__ */ new Map();
-  const clearWatchdog = (conversationId) => {
-    const timer = indicatorWatchdogs.get(conversationId);
-    if (timer !== void 0) {
-      clearTimeout(timer);
-      indicatorWatchdogs.delete(conversationId);
+function normalizeLocale(input) {
+  const regional = ["pt-br", "zh-cn", "zh-tw", "zh-hk"];
+  const lower = input.toLowerCase().replace("_", "-");
+  for (const r of regional) {
+    if (lower.startsWith(r)) return r;
+  }
+  return lower.split("-")[0] ?? "en";
+}
+function notify() {
+  revision++;
+  for (const fn of listeners) {
+    try {
+      fn();
+    } catch {
     }
-  };
-  const store = createStore((set, get) => ({
-    // Initial state
-    isReady: false,
-    isConnecting: true,
-    visitor: null,
-    website: null,
-    agentConfig: null,
-    conversations: [],
-    activeConversationId: null,
-    messages: /* @__PURE__ */ new Map(),
-    typingUsers: /* @__PURE__ */ new Map(),
-    aiProcessing: /* @__PURE__ */ new Map(),
-    streamingText: /* @__PURE__ */ new Map(),
-    isOpen: false,
-    isDismissed: false,
+  }
+}
+
+// ../widget-core/src/utils.ts
+function formatRelativeTime(date) {
+  const now = Date.now();
+  const then = typeof date === "string" ? new Date(date).getTime() : date.getTime();
+  const diffMs = now - then;
+  const diffMin = Math.floor(diffMs / 6e4);
+  const diffHour = Math.floor(diffMs / 36e5);
+  const diffDay = Math.floor(diffMs / 864e5);
+  if (diffMin < 1) return t("widget.time_now");
+  if (diffMin < 60) return `${diffMin}m`;
+  if (diffHour < 24) return `${diffHour}h`;
+  if (diffDay === 1) return t("widget.time_yesterday");
+  if (diffDay < 7) return `${diffDay}d`;
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleDateString(getLocale(), { month: "short", day: "numeric" });
+}
+function formatTime(date) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+}
+function resolveLabel(label) {
+  if (!label.startsWith("widget.")) return label;
+  const resolved = t(label);
+  if (resolved === label) {
+    return label.replace("widget.", "").replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+  }
+  return resolved;
+}
+function getInitials(value) {
+  if (!value) return "?";
+  if (value.includes("@")) return (value[0] ?? "?").toUpperCase();
+  const parts = value.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
+  }
+  return (parts[0]?.[0] ?? "?").toUpperCase();
+}
+function parseTimelineItemMetadata(raw) {
+  if (!raw) return null;
+  if (typeof raw === "object") return raw;
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function previewQuickReplies(metadata) {
+  const parsed = parseTimelineItemMetadata(metadata);
+  if (parsed?.kind !== "quick_replies") return null;
+  if (!Array.isArray(parsed.options) || parsed.options.length === 0) return null;
+  if (parsed.cancelled) return null;
+  return {
+    stepId: parsed.stepId,
+    prompt: parsed.prompt ?? null,
+    options: parsed.options.map((o) => ({ id: o.id, label: o.label }))
+  };
+}
+function splitAnnouncementStack(previews, maxVisible) {
+  const room = Number.isFinite(maxVisible) ? Math.max(0, Math.trunc(maxVisible)) : previews.length;
+  return { visible: previews.slice(0, room), hidden: previews.slice(room) };
+}
+function isAwaitingVisitorReply(conversation) {
+  if (conversation.status !== "open") return false;
+  return conversation.lastMessageSenderType === "team" || conversation.unreadCount > 0;
+}
+function awaitingReplyCount(conversations) {
+  return conversations.filter(isAwaitingVisitorReply).length;
+}
+var PREVIEW_BODY_LIMIT = 120;
+function truncatePreviewBody(text, limit = PREVIEW_BODY_LIMIT) {
+  if (text.length <= limit) return text;
+  const slice = text.slice(0, limit);
+  const lastSpace = slice.lastIndexOf(" ");
+  const cut = lastSpace > limit * 0.6 ? slice.slice(0, lastSpace) : slice;
+  return `${cut.trimEnd()}\u2026`;
+}
+
+// ../widget-core/src/store.ts
+var CONTENT_CACHE_TTL = 5 * 60 * 1e3;
+var PREVIEW_STORAGE_KEY = "helpway:incoming-preview";
+function streamingKeyFor(conversationId) {
+  return `streaming-${conversationId}`;
+}
+function loadPersistedPreview() {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(PREVIEW_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function persistPreview(preview) {
+  if (typeof window === "undefined") return;
+  try {
+    if (preview) {
+      window.localStorage.setItem(PREVIEW_STORAGE_KEY, JSON.stringify(preview));
+    } else {
+      window.localStorage.removeItem(PREVIEW_STORAGE_KEY);
+    }
+  } catch {
+  }
+}
+function parseJoinEvent(text) {
+  if (!text.startsWith("{")) return null;
+  try {
+    const parsed = JSON.parse(text);
+    if (parsed.action !== "joined") return null;
+    return { name: parsed.name ?? null, image: parsed.image ?? null };
+  } catch {
+    return null;
+  }
+}
+function latestAssignee(items) {
+  for (let i = items.length - 1; i >= 0; i--) {
+    const item = items[i];
+    if (item?.type !== "event" || !item.text) continue;
+    const joined = parseJoinEvent(item.text);
+    if (joined) return joined;
+  }
+  return null;
+}
+var AI_INDICATOR_MAX_MS = 45e3;
+function createWidgetStore() {
+  const indicatorWatchdogs = /* @__PURE__ */ new Map();
+  const clearWatchdog = (conversationId) => {
+    const timer = indicatorWatchdogs.get(conversationId);
+    if (timer !== void 0) {
+      clearTimeout(timer);
+      indicatorWatchdogs.delete(conversationId);
+    }
+  };
+  const store = createStore((set, get) => ({
+    // Initial state
+    isReady: false,
+    isConnecting: true,
+    visitor: null,
+    website: null,
+    agentConfig: null,
+    conversations: [],
+    activeConversationId: null,
+    messages: /* @__PURE__ */ new Map(),
+    typingUsers: /* @__PURE__ */ new Map(),
+    aiProcessing: /* @__PURE__ */ new Map(),
+    streamingText: /* @__PURE__ */ new Map(),
+    isOpen: false,
+    isDismissed: false,
     view: "home",
     incomingPreview: loadPersistedPreview(),
     announcementPreviews: [],
@@ -929,6 +1264,9 @@ function createWidgetStore() {
             const isIncoming = !event.item.visitorId;
             const currentState = get();
             const isViewingThis = currentState.isOpen && currentState.activeConversationId === event.conversationId;
+            const qr = previewQuickReplies(
+              event.item.metadata
+            );
             set((s) => ({
               conversations: s.conversations.map(
                 (c) => c.id === event.conversationId ? {
@@ -942,11 +1280,18 @@ function createWidgetStore() {
               // Show preview bubble if widget is closed and message is incoming
               ...isIncoming && !currentState.isOpen ? {
                 incomingPreview: {
-                  text: event.item.text ?? "",
+                  /* Empty for a quick-replies step, always. The prompt belongs to the
+                     card's quick-replies block, which prints it directly above the
+                     buttons — putting it here too rendered it twice, once as a message
+                     body and once as the prompt. And a prompt-less step persists the
+                     option labels as its bullet-list fallback, so carrying `text`
+                     through would enumerate in prose the buttons sitting underneath. */
+                  text: qr ? "" : event.item.text ?? "",
                   conversationId: event.conversationId,
                   timestamp: Date.now(),
                   senderName: event.item.userName ?? null,
-                  senderImage: event.item.userImage ?? null
+                  senderImage: event.item.userImage ?? null,
+                  ...qr ? { quickReplies: qr } : {}
                 }
               } : {}
             }));
@@ -1195,251 +1540,80 @@ var WidgetEventEmitter = class {
   }
 };
 
-// ../widget-core/src/i18n.ts
-var en = {
-  // Navigation & tabs
-  "widget.home": "Home",
-  "widget.messages": "Messages",
-  "widget.help": "Help",
-  // Home screen
-  "widget.send_us_message": "Send us a message",
-  "widget.reply_time": "We typically reply in a few minutes",
-  "widget.recent_conversations": "Recent conversations",
-  "widget.see_all": "See all conversations",
-  "widget.whats_new": "What's New",
-  "widget.view_all": "View all",
-  // Messages tab
-  "widget.no_messages": "No messages yet",
-  "widget.no_messages_desc": "Start a conversation to get help",
-  "widget.start_conversation": "Start a conversation",
-  "widget.no_preview": "No messages yet",
-  // Conversation
-  "widget.new_conversation": "New conversation",
-  "widget.talk_to_human": "Talk to a human",
-  "widget.talk_to_human_message": "I'd like to talk to a human, please.",
-  "widget.aria_options": "Conversation options",
-  "widget.resolved_text": "This conversation has been resolved",
-  "widget.send_followup": "Send a follow-up",
-  "widget.start_a_conversation": "Start a conversation",
-  // Composer
-  "widget.placeholder": "Send a message...",
-  "widget.placeholder_new": "How can we help?",
-  "widget.drop_files": "Drop files here",
-  // CSAT
-  "widget.csat_label": "How was your experience?",
-  "widget.csat_thanks": "Thanks for your feedback!",
-  // Inline email collection (after AI reply)
-  "widget.email_title": "Don't miss our reply",
-  "widget.email_subtitle": "We'll email you when we respond",
-  "widget.email_placeholder": "you@email.com",
-  "widget.email_continue": "Send",
-  "widget.email_saved": "You'll be notified by email",
-  "widget.email_dismiss": "No thanks",
-  // Errors
-  "widget.error_title": "Something went wrong",
-  "widget.error_desc": "Failed to load. Please try again.",
-  "widget.retry": "Retry",
-  "widget.reconnecting": "Reconnecting...",
-  "widget.send_error": "Message not sent",
-  // Date separators (today is implicit — never rendered)
-  "widget.yesterday": "Yesterday",
-  // Sender labels
-  "widget.helpway_ai": "Helpway AI",
-  "widget.support": "Support",
-  // Events
-  "widget.joined": "joined the conversation",
-  "widget.left": "left the conversation",
-  // Content/search
-  "widget.content": "Content",
-  "widget.search": "Search...",
-  "widget.no_results": "No results found",
-  "widget.try_different": "Try a different search term",
-  "widget.nothing_yet": "Nothing here yet",
-  "widget.check_back": "Check back later for updates",
-  "widget.load_more": "Load more",
-  "widget.loading": "Loading...",
-  // Copy
-  "widget.copy": "Copy message",
-  "widget.copied": "Copied",
-  // File upload
-  "widget.file_too_large": "File too large (max 10 MB)",
-  "widget.click_to_open": "Click to open",
-  "widget.caption_required": "Add a message to send with your attachment",
-  // Accessibility
-  "widget.aria_chat": "Support chat",
-  "widget.aria_close": "Close",
-  "widget.aria_back": "Back",
-  "widget.aria_send": "Send message",
-  "widget.aria_open_image": "Open image",
-  "widget.aria_attach": "Attach file",
-  "widget.aria_dictate": "Dictate message",
-  "widget.aria_input": "Message input",
-  "widget.aria_remove": "Remove",
-  "widget.aria_dismiss": "Dismiss",
-  "widget.aria_open": "Open support",
-  "widget.aria_close_support": "Close support",
-  "widget.aria_good": "Good",
-  "widget.aria_bad": "Bad",
-  "widget.aria_messages": "Messages",
-  // Time (relative)
-  "widget.time_now": "now",
-  "widget.time_yesterday": "Yesterday",
-  // Powered by
-  "widget.powered_by": "Powered by",
-  // Hero / home screen
-  /* One line, not two. The second line was "How can we help?" — the exact string
-     the composer's own placeholder shows, two inches below it. The input is what
-     asks the question; the greeting only has to say hello. */
-  "widget.welcome_message": "Hi there \u{1F44B}",
-  "widget.subtitle_text": "Usually replies in minutes"
-};
-var currentLocale = "en";
-var translations = {};
-var isLoaded = false;
-var revision = 0;
-var listeners = [];
-function t(key, params) {
-  const value = translations[key] ?? en[key] ?? key;
-  if (!params) return value;
-  return value.replace(/\{\{(\w+)\}\}/g, (_, k) => {
-    return params[k]?.toString() ?? `{{${k}}}`;
-  });
-}
-function getLocale() {
-  return currentLocale;
-}
-function getI18nRevision() {
-  return revision;
-}
-function onLocaleChange(fn) {
-  listeners.push(fn);
-  return () => {
-    const idx = listeners.indexOf(fn);
-    if (idx >= 0) listeners.splice(idx, 1);
+// ../widget-core/src/page-tracker.ts
+var DEFAULT_TITLE_SETTLE_MS = 50;
+var DEFAULT_TITLE_MAX_WAIT_MS = 1e3;
+function createPageTracker(deps) {
+  const settleMs = deps.settleMs ?? DEFAULT_TITLE_SETTLE_MS;
+  const maxWaitMs = deps.maxWaitMs ?? DEFAULT_TITLE_MAX_WAIT_MS;
+  const schedule = deps.setTimeout ?? ((fn, ms) => setTimeout(fn, ms));
+  const cancel = deps.clearTimeout ?? ((h) => clearTimeout(h));
+  let pending = null;
+  let lastReported = null;
+  let correctionArmedFor = null;
+  let fallbackTimer = null;
+  let settleTimer = null;
+  let stopped = false;
+  const clearTimers = () => {
+    if (fallbackTimer !== null) cancel(fallbackTimer);
+    if (settleTimer !== null) cancel(settleTimer);
+    fallbackTimer = null;
+    settleTimer = null;
   };
-}
-async function initI18n(options) {
-  if (options?.cdnBase) {
-    cdnBase = options.cdnBase;
-  }
-  const detected = options?.locale ?? (typeof navigator !== "undefined" ? navigator.language : "en");
-  currentLocale = normalizeLocale(detected);
-  if (currentLocale === "en") {
-    isLoaded = true;
-    notify();
-    return;
-  }
-  try {
-    const data = await fetchTranslations(currentLocale);
-    if (data) {
-      for (const [key, value] of Object.entries(data)) {
-        if (typeof value === "string") {
-          translations[`widget.${key}`] = value;
-        }
-      }
+  const send = (page) => {
+    if (lastReported && lastReported.url === page.url && lastReported.title === page.title) return;
+    lastReported = page;
+    deps.report(page);
+  };
+  const settle = (source) => {
+    if (stopped || !pending) return;
+    const title = deps.getTitle();
+    if (source === "title" && title === pending.titleAtNavigate) return;
+    const { url, titleAtNavigate } = pending;
+    pending = null;
+    clearTimers();
+    send({ url, title });
+    correctionArmedFor = source === "fallback" && title === titleAtNavigate ? url : null;
+  };
+  const onTitleChange = () => {
+    if (stopped) return;
+    if (pending) {
+      if (settleTimer !== null) cancel(settleTimer);
+      settleTimer = schedule(() => {
+        settleTimer = null;
+        settle("title");
+      }, settleMs);
+      return;
     }
-  } catch (err) {
-    console.warn(`[Helpway] Failed to fetch ${currentLocale} translations, using English`, err);
-  }
-  isLoaded = true;
-  notify();
-}
-async function setLocale(locale) {
-  const normalized = normalizeLocale(locale);
-  if (normalized === currentLocale) return;
-  currentLocale = normalized;
-  translations = {};
-  if (normalized === "en") {
-    notify();
-    return;
-  }
-  try {
-    const data = await fetchTranslations(normalized);
-    if (data) {
-      for (const [key, value] of Object.entries(data)) {
-        if (typeof value === "string") {
-          translations[`widget.${key}`] = value;
-        }
+    if (correctionArmedFor !== null && deps.getUrl() === correctionArmedFor) {
+      const title = deps.getTitle();
+      if (lastReported && title !== lastReported.title) {
+        correctionArmedFor = null;
+        send({ url: lastReported.url, title });
       }
     }
-  } catch {
-  }
-  notify();
-}
-var cdnBase = "https://cdn.better-i18n.com/helpway/widget";
-async function fetchTranslations(locale) {
-  const url = `${cdnBase}/${locale}/translations.json`;
-  let res = await fetch(url);
-  if (!res.ok && locale.includes("-")) {
-    const base = locale.split("-")[0];
-    res = await fetch(`${cdnBase}/${base}/translations.json`);
-  }
-  if (!res.ok) return null;
-  const data = await res.json();
-  const widgetNs = data.widget;
-  if (widgetNs && typeof widgetNs === "object" && !Array.isArray(widgetNs)) {
-    const result = {};
-    for (const [k, v] of Object.entries(widgetNs)) {
-      if (typeof v === "string") result[k] = v;
-    }
-    return result;
-  }
-  return null;
-}
-function normalizeLocale(input) {
-  const regional = ["pt-br", "zh-cn", "zh-tw", "zh-hk"];
-  const lower = input.toLowerCase().replace("_", "-");
-  for (const r of regional) {
-    if (lower.startsWith(r)) return r;
-  }
-  return lower.split("-")[0] ?? "en";
-}
-function notify() {
-  revision++;
-  for (const fn of listeners) {
-    try {
-      fn();
-    } catch {
+  };
+  const unobserve = deps.observeTitle(onTitleChange);
+  return {
+    navigate() {
+      if (stopped) return;
+      const url = deps.getUrl();
+      if (pending?.url === url) return;
+      clearTimers();
+      correctionArmedFor = null;
+      pending = { url, titleAtNavigate: deps.getTitle() };
+      fallbackTimer = schedule(() => {
+        fallbackTimer = null;
+        settle("fallback");
+      }, maxWaitMs);
+    },
+    stop() {
+      stopped = true;
+      clearTimers();
+      pending = null;
+      unobserve();
     }
-  }
-}
-
-// ../widget-core/src/utils.ts
-function formatRelativeTime(date) {
-  const now = Date.now();
-  const then = typeof date === "string" ? new Date(date).getTime() : date.getTime();
-  const diffMs = now - then;
-  const diffMin = Math.floor(diffMs / 6e4);
-  const diffHour = Math.floor(diffMs / 36e5);
-  const diffDay = Math.floor(diffMs / 864e5);
-  if (diffMin < 1) return t("widget.time_now");
-  if (diffMin < 60) return `${diffMin}m`;
-  if (diffHour < 24) return `${diffHour}h`;
-  if (diffDay === 1) return t("widget.time_yesterday");
-  if (diffDay < 7) return `${diffDay}d`;
-  const d = typeof date === "string" ? new Date(date) : date;
-  return d.toLocaleDateString(getLocale(), { month: "short", day: "numeric" });
-}
-function formatTime(date) {
-  const d = typeof date === "string" ? new Date(date) : date;
-  return d.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
-}
-function resolveLabel(label) {
-  if (!label.startsWith("widget.")) return label;
-  const resolved = t(label);
-  if (resolved === label) {
-    return label.replace("widget.", "").replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
-  }
-  return resolved;
-}
-function getInitials(value) {
-  if (!value) return "?";
-  if (value.includes("@")) return (value[0] ?? "?").toUpperCase();
-  const parts = value.trim().split(/\s+/);
-  if (parts.length >= 2) {
-    return ((parts[0]?.[0] ?? "") + (parts[1]?.[0] ?? "")).toUpperCase();
-  }
-  return (parts[0]?.[0] ?? "?").toUpperCase();
+  };
 }
 
 // src/provider.tsx
@@ -1491,6 +1665,8 @@ function SupportProvider({
   const [hasBootstrapError, setHasBootstrapError] = useState(false);
   const [wsDisconnected, setWsDisconnected] = useState(false);
   const [bootstrapAttempt, setBootstrapAttempt] = useState(0);
+  const sourceLocaleRef = useRef(locale);
+  const getSourceLocale = useCallback(() => sourceLocaleRef.current, []);
   if (!initRef.current) {
     const resolvedApiUrl = apiUrl ?? inferApiUrl();
     const client2 = createWidgetClient({
@@ -1518,6 +1694,7 @@ function SupportProvider({
         const metaLocale = data.metadata?.locale;
         if (typeof metaLocale === "string" && metaLocale.length > 0) {
           setLocale(metaLocale);
+          sourceLocaleRef.current = metaLocale;
         }
       } catch (err) {
         console.error("[Helpway] identify failed:", err);
@@ -1545,7 +1722,7 @@ function SupportProvider({
         store.getState().setReady(data.visitor, data.website, data.agentConfig);
         setHasBootstrapError(false);
         if (data.visitor?.id) {
-          syncVisitorId(apiKey, data.visitor.id);
+          syncVisitorId(apiKey, data.visitor.signedId ?? data.visitor.id);
         }
         const convData = await client.widget.listConversations.query();
         if (cancelled) return;
@@ -1558,11 +1735,20 @@ function SupportProvider({
           lastMessageSenderType: c.lastMessageSenderType,
           lastMessageSenderName: c.lastMessageSenderName,
           lastMessageSenderImage: c.lastMessageSenderImage,
-          unreadCount: 0
+          /* The server's count, not a zero.
+          
+          					   This was the literal `0`, which meant `useUnread()` answered 0 on
+          					   every page load however many replies were waiting — the value
+          					   described "messages that arrived while this tab has been open",
+          					   not "unread". A badge shipped against the hook downstream never
+          					   rendered once, with an unanswered agent message on screen.
+          
+          					   Still defaulted, because a widget on an older API build gets a
+          					   payload without the field, and 0 is the honest answer there — the
+          					   socket path raises it from there as messages land. */
+          unreadCount: c.unreadCount ?? 0
         });
-        store.getState().setConversations(
-          convData.conversations.map(mapConversation)
-        );
+        store.getState().setConversations(convData.conversations.map(mapConversation));
         if (data.website?.id && data.visitor?.id) {
           ws.configure({ websiteId: data.website.id, visitorId: data.visitor.id });
           ws.connect();
@@ -1601,27 +1787,19 @@ function SupportProvider({
           } catch {
           }
         }
-        if (typeof window !== "undefined") {
-          client.widget.updatePage.mutate({
-            url: window.location.href,
-            title: document.title || window.location.pathname
-          }).catch(() => {
-          });
-        }
+        pageTracker?.navigate();
         if (initialConversationId && !cancelled) {
           if (deepLinkToken) {
             try {
               const redeemed = await client.widget.redeemDeepLink.mutate({ token: deepLinkToken });
               if (!cancelled && redeemed?.visitorId && redeemed.visitorId !== data.visitor?.id) {
-                syncVisitorId(apiKey, redeemed.visitorId);
+                syncVisitorId(apiKey, redeemed.signedVisitorId ?? redeemed.visitorId);
                 const freshData = await client.widget.bootstrap.query();
                 if (!cancelled) {
                   store.getState().setReady(freshData.visitor, freshData.website, freshData.agentConfig);
                   const freshConvs = await client.widget.listConversations.query();
                   if (!cancelled) {
-                    store.getState().setConversations(
-                      freshConvs.conversations.map(mapConversation)
-                    );
+                    store.getState().setConversations(freshConvs.conversations.map(mapConversation));
                   }
                 }
               }
@@ -1643,19 +1821,29 @@ function SupportProvider({
         }
       }
     }
-    bootstrap();
-    let pageDebounce = null;
-    const reportPage = () => {
-      if (typeof window === "undefined") return;
-      if (pageDebounce) clearTimeout(pageDebounce);
-      pageDebounce = setTimeout(() => {
-        client.widget.updatePage.mutate({
-          url: window.location.href,
-          title: document.title || window.location.pathname
-        }).catch(() => {
+    const pageTracker = typeof window === "undefined" ? null : createPageTracker({
+      getUrl: () => window.location.href,
+      getTitle: () => document.title || window.location.pathname,
+      observeTitle: (onChange) => {
+        if (typeof MutationObserver === "undefined") return () => {
+        };
+        const observer = new MutationObserver(onChange);
+        observer.observe(document.head ?? document.documentElement, {
+          subtree: true,
+          childList: true,
+          characterData: true
+        });
+        return () => observer.disconnect();
+      },
+      report: (page) => {
+        client.widget.updatePage.mutate(page).catch(() => {
         });
-      }, 250);
+      }
+    });
+    const reportPage = () => {
+      pageTracker?.navigate();
     };
+    bootstrap();
     const origPush = window.history.pushState.bind(window.history);
     const origReplace = window.history.replaceState.bind(window.history);
     window.history.pushState = function patchedPush(...args) {
@@ -1710,7 +1898,7 @@ function SupportProvider({
       unsub();
       clearInterval(wsCheck);
       if (markSeenTimer) clearTimeout(markSeenTimer);
-      if (pageDebounce) clearTimeout(pageDebounce);
+      pageTracker?.stop();
       window.history.pushState = origPush;
       window.history.replaceState = origReplace;
       window.removeEventListener("popstate", reportPage);
@@ -1720,6 +1908,7 @@ function SupportProvider({
   useEffect(() => {
     if (locale != null) {
       setLocale(locale);
+      sourceLocaleRef.current = locale;
     }
   }, [locale]);
   useEffect(() => {
@@ -1793,7 +1982,8 @@ function SupportProvider({
     emitter,
     hasBootstrapError,
     wsDisconnected,
-    retryBootstrap
+    retryBootstrap,
+    getSourceLocale
   };
   return /* @__PURE__ */ jsx(WidgetContext.Provider, { value: ctxValue, children });
 }
@@ -2056,6 +2246,11 @@ function useAnnouncements() {
   };
 }
 
+// src/hooks/use-awaiting-reply.ts
+function useAwaitingReply() {
+  return useWidgetStore((s) => awaitingReplyCount(s.conversations));
+}
+
 // src/hooks/use-composer.ts
 import { useCallback as useCallback3, useState as useState2 } from "react";
 function currentPagePayload() {
@@ -2082,7 +2277,7 @@ var ACCEPTED_TYPES = [
   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
 ].join(",");
 function useComposer(boundConversationId) {
-  const { client, ws, store } = useWidgetContext();
+  const { client, ws, store, getSourceLocale } = useWidgetContext();
   const conversationId = boundConversationId;
   const [text, setText] = useState2("");
   const [isSubmitting, setIsSubmitting] = useState2(false);
@@ -2207,12 +2402,14 @@ function useComposer(boundConversationId) {
           } catch {
           }
         } else if (isTempConversation) {
+          const sourceLocale = getSourceLocale();
           const result = await client.widget.createConversation.mutate({
             ...hasText ? { text: trimmed } : {},
             ...hasAttachments ? { parts: readyParts } : {},
             /* The first message is the one that most needs this — someone
                lands on a page and immediately asks what it is. */
-            ...currentPagePayload()
+            ...currentPagePayload(),
+            ...sourceLocale ? { sourceLocale } : {}
           });
           const conv = result.conversation;
           store.getState().remapConversationId(conversationId2, conv.id);
@@ -2250,7 +2447,7 @@ function useComposer(boundConversationId) {
         setIsSubmitting(false);
       }
     },
-    [text, attachments, boundConversationId, isSubmitting, client, ws, store]
+    [text, attachments, boundConversationId, isSubmitting, client, ws, store, getSourceLocale]
   );
   const clearSendError = useCallback3(() => setSendError(null), []);
   return {
@@ -2283,15 +2480,17 @@ function fileToBase64(file) {
 // src/hooks/use-conversations.ts
 import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 function useConversations() {
-  const { client, store } = useWidgetContext();
+  const { client, store, getSourceLocale } = useWidgetContext();
   const conversations = useWidgetStore((s) => s.conversations);
   const setActiveConversation = useWidgetStore((s) => s.setActiveConversation);
   const [isCreating, setIsCreating] = useState3(false);
   const clientRef = useRef3(client);
   const storeRef = useRef3(store);
+  const getSourceLocaleRef = useRef3(getSourceLocale);
   useEffect3(() => {
     clientRef.current = client;
     storeRef.current = store;
+    getSourceLocaleRef.current = getSourceLocale;
   });
   const create = useCallback4(async (text) => {
     setIsCreating(true);
@@ -2331,7 +2530,11 @@ function useConversations() {
     store2.setMessages(tempConversationId, [optimisticMsg]);
     store2.setActiveConversation(tempConversationId);
     try {
-      const result = await clientRef.current.widget.createConversation.mutate({ text });
+      const sourceLocale = getSourceLocaleRef.current();
+      const result = await clientRef.current.widget.createConversation.mutate({
+        text,
+        ...sourceLocale ? { sourceLocale } : {}
+      });
       const conv = result.conversation;
       storeRef.current.getState().remapConversationId(tempConversationId, conv.id);
       if (result.item) {
@@ -2533,6 +2736,9 @@ function useWidget() {
   return { isReady, isConnecting, visitor, website, agentConfig, identify };
 }
 
+// src/shell/docked-bar.tsx
+import { useCallback as useCallback8, useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
+
 // src/themed/composer.tsx
 import { useCallback as useCallback7, useRef as useRef6, useState as useState6 } from "react";
 
@@ -2930,310 +3136,63 @@ function Composer({
               "input",
               {
                 ref: fileInputRef,
-                type: "file",
-                accept: ACCEPTED_TYPES,
-                multiple: true,
-                hidden: true,
-                onChange: handleFileChange
-              }
-            ),
-            showCharCount && /* @__PURE__ */ jsx3("span", { className: `hw-composer-charcount ${isOverLimit ? "hw-composer-charcount--over" : ""}`, children: MAX_CHARS - text.length })
-          ] }),
-          /* @__PURE__ */ jsx3(
-            "button",
-            {
-              type: "button",
-              className: `hw-composer-send ${canSend && !isOverLimit && !disabled ? "hw-composer-send--active" : "hw-composer-send--inactive"}`,
-              onClick: () => onSubmit(),
-              disabled: disabled || !canSend || isSubmitting || isOverLimit,
-              "aria-label": t("widget.aria_send"),
-              children: /* @__PURE__ */ jsx3(SendIcon, {})
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
-function PreviewThumb({ attachment: a, onRemove }) {
-  return /* @__PURE__ */ jsxs2("div", { className: `hw-composer-preview ${a.error ? "hw-composer-preview--error" : ""}`, children: [
-    a.previewUrl ? /* @__PURE__ */ jsx3("img", { src: a.previewUrl, alt: a.file.name, className: "hw-composer-preview-img" }) : /* @__PURE__ */ jsx3("div", { className: "hw-composer-preview-file", children: /* @__PURE__ */ jsx3("span", { className: "hw-composer-preview-ext", children: a.file.name.split(".").pop()?.toUpperCase() ?? "FILE" }) }),
-    a.isUploading && /* @__PURE__ */ jsx3("div", { className: "hw-composer-preview-loader" }),
-    a.error && /* @__PURE__ */ jsx3("div", { className: "hw-composer-preview-badge", title: a.error, children: "!" }),
-    onRemove && /* @__PURE__ */ jsx3(
-      "button",
-      {
-        type: "button",
-        className: "hw-composer-preview-remove",
-        onClick: onRemove,
-        "aria-label": t("widget.aria_remove"),
-        children: /* @__PURE__ */ jsx3(XIcon, {})
-      }
-    )
-  ] });
-}
-function extractFiles(data) {
-  const files = [];
-  if (data.files) {
-    for (let i = 0; i < data.files.length; i++) {
-      const file = data.files[i];
-      if (file) files.push(file);
-    }
-  }
-  return files;
-}
-
-// src/themed/debug-overlay.tsx
-import { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef7, useState as useState7 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var MAX_EVENTS = 60;
-function isDebugEnabled() {
-  if (typeof window === "undefined") return false;
-  if (typeof window.localStorage !== "undefined" && window.localStorage.getItem("hw:debug") === "1") {
-    return true;
-  }
-  const search = window.location?.search ?? "";
-  return search.includes("hwdebug=1") || search.includes("debug=hw");
-}
-function senderOf(item) {
-  if (item.visitorId) return "visitor";
-  if (item.aiAgentId) return "ai";
-  if (item.userId) return "team";
-  return item.type;
-}
-function WidgetDebugOverlay() {
-  const [enabled, setEnabled] = useState7(false);
-  const [open, setOpen] = useState7(true);
-  const [events, setEvents] = useState7([]);
-  const eventsRef = useRef7([]);
-  const activeId = useWidgetStore((s) => s.activeConversationId);
-  const messagesMap = useWidgetStore((s) => s.messages);
-  const typingUsers = useWidgetStore((s) => s.typingUsers);
-  const aiProcessingMap = useWidgetStore((s) => s.aiProcessing);
-  const { store } = useWidgetContext();
-  useEffect6(() => {
-    setEnabled(isDebugEnabled());
-  }, []);
-  const pushEvent = useMemo2(
-    () => (ev) => {
-      const e = {
-        ...ev,
-        id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
-        t: Date.now()
-      };
-      eventsRef.current = [e, ...eventsRef.current].slice(0, MAX_EVENTS);
-      setEvents(eventsRef.current);
-    },
-    []
-  );
-  useEffect6(() => {
-    if (!enabled) return;
-    if (typeof window === "undefined" || typeof window.fetch !== "function") return;
-    const originalFetch = window.fetch.bind(window);
-    const patched = (async (input, init) => {
-      const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
-      const isTrpc = url.includes("/trpc/");
-      if (isTrpc) {
-        const method = init?.method ?? (typeof input !== "string" && !(input instanceof URL) ? input.method : "GET");
-        const label = url.split("/trpc/")[1]?.split("?")[0] ?? url;
-        pushEvent({ kind: "trpc", label: `\u2192 ${method} ${label}`, detail: shortJson(init?.body) });
-      }
-      try {
-        const res = await originalFetch(input, init);
-        if (isTrpc) {
-          const label = url.split("/trpc/")[1]?.split("?")[0] ?? url;
-          pushEvent({ kind: "trpc", label: `\u2190 ${res.status} ${label}` });
-        }
-        return res;
-      } catch (err) {
-        if (isTrpc) {
-          const label = url.split("/trpc/")[1]?.split("?")[0] ?? url;
-          pushEvent({ kind: "error", label: `\u2718 ${label}`, detail: err instanceof Error ? err.message : String(err) });
-        }
-        throw err;
-      }
-    });
-    window.fetch = patched;
-    return () => {
-      window.fetch = originalFetch;
-    };
-  }, [enabled, pushEvent]);
-  useEffect6(() => {
-    if (!enabled) return;
-    const original = store.getState().handleRealtimeEvent;
-    store.setState({
-      handleRealtimeEvent: (ev) => {
-        pushEvent({ kind: "ws", label: ev.type, detail: shortJson(ev) });
-        original(ev);
-      }
-    });
-    return () => {
-      store.setState({ handleRealtimeEvent: original });
-    };
-  }, [enabled, store, pushEvent]);
-  const activeMessages = activeId ? messagesMap.get(activeId) ?? [] : [];
-  const lastMsgSignature = useMemo2(
-    () => activeMessages.map((m) => `${m.id}:${senderOf(m)}:${m.createdAt}`).join("|"),
-    [activeMessages]
-  );
-  const prevSigRef = useRef7(lastMsgSignature);
-  useEffect6(() => {
-    if (!enabled) return;
-    if (prevSigRef.current !== lastMsgSignature) {
-      prevSigRef.current = lastMsgSignature;
-      pushEvent({
-        kind: "store",
-        label: `messages[${activeMessages.length}]`,
-        detail: activeMessages.map((m, i) => `${i}:${senderOf(m)}=${(m.text ?? "").slice(0, 24)}`).join(" | ")
-      });
-    }
-  }, [lastMsgSignature, activeMessages, enabled, pushEvent]);
-  if (!enabled) return null;
-  const isTyping = activeId ? typingUsers.get(activeId) : false;
-  const isAi = activeId ? aiProcessingMap.get(activeId) : false;
-  return /* @__PURE__ */ jsxs3("div", { style: styles.wrap, children: [
-    /* @__PURE__ */ jsxs3("div", { style: styles.header, children: [
-      /* @__PURE__ */ jsx4("strong", { children: "hw debug" }),
-      /* @__PURE__ */ jsxs3("span", { style: styles.meta, children: [
-        " ",
-        "\xB7 conv ",
-        activeId ? activeId.slice(0, 10) : "\u2014",
-        " \xB7 items ",
-        activeMessages.length,
-        " \xB7 typing ",
-        isTyping ? "Y" : "n",
-        " \xB7 ai ",
-        isAi ? "Y" : "n"
-      ] }),
-      /* @__PURE__ */ jsx4("button", { type: "button", style: styles.btn, onClick: () => setOpen((v) => !v), children: open ? "hide" : "show" }),
-      /* @__PURE__ */ jsx4("button", { type: "button", style: styles.btn, onClick: () => {
-        eventsRef.current = [];
-        setEvents([]);
-      }, children: "clear" })
-    ] }),
-    open && /* @__PURE__ */ jsxs3("div", { style: styles.body, children: [
-      /* @__PURE__ */ jsxs3("div", { style: styles.section, children: [
-        /* @__PURE__ */ jsx4("div", { style: styles.sectionTitle, children: "messages (active)" }),
-        activeMessages.length === 0 ? /* @__PURE__ */ jsx4("div", { style: styles.empty, children: "empty" }) : activeMessages.map((m, i) => /* @__PURE__ */ jsxs3("div", { style: styles.row, children: [
-          /* @__PURE__ */ jsx4("span", { style: { ...styles.badge, background: colorFor(senderOf(m)) }, children: i }),
-          /* @__PURE__ */ jsx4("span", { style: styles.sender, children: senderOf(m) }),
-          /* @__PURE__ */ jsx4("span", { style: styles.ts, children: m.createdAt.slice(11, 23) }),
-          /* @__PURE__ */ jsx4("span", { style: styles.text, children: (m.text ?? "").slice(0, 60) })
-        ] }, m.id))
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { style: styles.section, children: [
-        /* @__PURE__ */ jsx4("div", { style: styles.sectionTitle, children: "events" }),
-        events.length === 0 ? /* @__PURE__ */ jsx4("div", { style: styles.empty, children: "no events yet \u2014 send a message" }) : events.map((e) => /* @__PURE__ */ jsxs3("div", { style: styles.row, children: [
-          /* @__PURE__ */ jsx4("span", { style: { ...styles.badge, background: kindColor(e.kind) }, children: e.kind }),
-          /* @__PURE__ */ jsx4("span", { style: styles.ts, children: new Date(e.t).toISOString().slice(11, 23) }),
-          /* @__PURE__ */ jsx4("span", { style: styles.evLabel, children: e.label }),
-          e.detail && /* @__PURE__ */ jsx4("span", { style: styles.detail, children: e.detail })
-        ] }, e.id))
-      ] })
-    ] })
-  ] });
-}
-function shortJson(v) {
-  if (v === void 0) return "";
-  try {
-    const s = JSON.stringify(v);
-    if (!s) return "";
-    return s.length > 180 ? `${s.slice(0, 177)}\u2026` : s;
-  } catch {
-    return String(v);
-  }
-}
-function colorFor(sender) {
-  switch (sender) {
-    case "visitor":
-      return "#1d4ed8";
-    case "ai":
-      return "#7c3aed";
-    case "team":
-      return "#16a34a";
-    default:
-      return "#6b7280";
-  }
-}
-function kindColor(kind) {
-  switch (kind) {
-    case "trpc":
-      return "#0ea5e9";
-    case "ws":
-      return "#f97316";
-    case "store":
-      return "#64748b";
-    case "error":
-      return "#dc2626";
-  }
-}
-var styles = {
-  wrap: {
-    position: "fixed",
-    right: 12,
-    bottom: 12,
-    zIndex: 2147483e3,
-    width: 420,
-    maxHeight: "70vh",
-    background: "rgba(9,9,11,0.94)",
-    color: "#e5e7eb",
-    borderRadius: 10,
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-    fontSize: 11,
-    boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
-    overflow: "hidden",
-    pointerEvents: "auto"
-  },
-  header: {
-    display: "flex",
-    alignItems: "center",
-    gap: 6,
-    padding: "6px 10px",
-    background: "#18181b",
-    borderBottom: "1px solid #27272a"
-  },
-  meta: { flex: 1, color: "#a1a1aa", fontSize: 10 },
-  btn: {
-    background: "#27272a",
-    color: "#e4e4e7",
-    border: "1px solid #3f3f46",
-    borderRadius: 4,
-    padding: "2px 8px",
-    cursor: "pointer",
-    fontSize: 10
-  },
-  body: { display: "flex", flexDirection: "column", maxHeight: "calc(70vh - 32px)", overflow: "auto" },
-  section: { borderBottom: "1px solid #27272a", padding: "6px 10px" },
-  sectionTitle: { color: "#a1a1aa", fontSize: 10, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 },
-  row: {
-    display: "grid",
-    gridTemplateColumns: "32px 56px 72px 1fr",
-    gap: 6,
-    alignItems: "baseline",
-    padding: "2px 0",
-    borderTop: "1px dashed #27272a"
-  },
-  badge: {
-    display: "inline-block",
-    borderRadius: 3,
-    padding: "1px 4px",
-    color: "white",
-    fontSize: 9,
-    textAlign: "center"
-  },
-  sender: { color: "#d4d4d8" },
-  ts: { color: "#71717a", fontSize: 10 },
-  text: { color: "#e4e4e7", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
-  evLabel: { color: "#e4e4e7" },
-  detail: { gridColumn: "1 / -1", color: "#a1a1aa", fontSize: 10, whiteSpace: "pre-wrap", wordBreak: "break-all" },
-  empty: { color: "#52525b", fontStyle: "italic", fontSize: 10 }
-};
+                type: "file",
+                accept: ACCEPTED_TYPES,
+                multiple: true,
+                hidden: true,
+                onChange: handleFileChange
+              }
+            ),
+            showCharCount && /* @__PURE__ */ jsx3("span", { className: `hw-composer-charcount ${isOverLimit ? "hw-composer-charcount--over" : ""}`, children: MAX_CHARS - text.length })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: `hw-composer-send ${canSend && !isOverLimit && !disabled ? "hw-composer-send--active" : "hw-composer-send--inactive"}`,
+              onClick: () => onSubmit(),
+              disabled: disabled || !canSend || isSubmitting || isOverLimit,
+              "aria-label": t("widget.aria_send"),
+              children: /* @__PURE__ */ jsx3(SendIcon, {})
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function PreviewThumb({ attachment: a, onRemove }) {
+  return /* @__PURE__ */ jsxs2("div", { className: `hw-composer-preview ${a.error ? "hw-composer-preview--error" : ""}`, children: [
+    a.previewUrl ? /* @__PURE__ */ jsx3("img", { src: a.previewUrl, alt: a.file.name, className: "hw-composer-preview-img" }) : /* @__PURE__ */ jsx3("div", { className: "hw-composer-preview-file", children: /* @__PURE__ */ jsx3("span", { className: "hw-composer-preview-ext", children: a.file.name.split(".").pop()?.toUpperCase() ?? "FILE" }) }),
+    a.isUploading && /* @__PURE__ */ jsx3("div", { className: "hw-composer-preview-loader" }),
+    a.error && /* @__PURE__ */ jsx3("div", { className: "hw-composer-preview-badge", title: a.error, children: "!" }),
+    onRemove && /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: "hw-composer-preview-remove",
+        onClick: onRemove,
+        "aria-label": t("widget.aria_remove"),
+        children: /* @__PURE__ */ jsx3(XIcon, {})
+      }
+    )
+  ] });
+}
+function extractFiles(data) {
+  const files = [];
+  if (data.files) {
+    for (let i = 0; i < data.files.length; i++) {
+      const file = data.files[i];
+      if (file) files.push(file);
+    }
+  }
+  return files;
+}
 
 // src/shell/docked-bar.tsx
-import { useCallback as useCallback8, useEffect as useEffect7, useRef as useRef8, useState as useState8 } from "react";
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function useDismissableOffer(suggestions) {
-  const [dismissedKey, setDismissedKey] = useState8(null);
+  const [dismissedKey, setDismissedKey] = useState7(null);
   const questions = (suggestions ?? []).map(
     (entry) => typeof entry === "string" ? entry : entry.question
   );
@@ -3249,14 +3208,14 @@ function recognitionCtor() {
   return scope.SpeechRecognition ?? scope.webkitSpeechRecognition ?? null;
 }
 function useDictation(onText) {
-  const [listening, setListening] = useState8(false);
-  const recRef = useRef8(null);
-  const onTextRef = useRef8(onText);
-  useEffect7(() => {
+  const [listening, setListening] = useState7(false);
+  const recRef = useRef7(null);
+  const onTextRef = useRef7(onText);
+  useEffect6(() => {
     onTextRef.current = onText;
   }, [onText]);
-  const [supported] = useState8(() => recognitionCtor() !== null);
-  useEffect7(
+  const [supported] = useState7(() => recognitionCtor() !== null);
+  useEffect6(
     () => () => {
       recRef.current?.stop();
       recRef.current = null;
@@ -3323,10 +3282,10 @@ function DockedBar({
   sendError,
   onClearSendError
 }) {
-  const [focused, setFocused] = useState8(false);
-  const inputRef = useRef8(null);
-  const boxRef = useRef8(null);
-  const fileInputRef = useRef8(null);
+  const [focused, setFocused] = useState7(false);
+  const inputRef = useRef7(null);
+  const boxRef = useRef7(null);
+  const fileInputRef = useRef7(null);
   const { questions: visibleQuestions, dismiss: dismissOffer } = useDismissableOffer(suggestions);
   const dictation = useDictation((chunk) => {
     const current = inputRef.current?.value ?? value;
@@ -3342,7 +3301,7 @@ function DockedBar({
     el.style.height = `${next}px`;
     box.dataset.grown = next > GROWN_AT ? "true" : "false";
   }, []);
-  useEffect7(grow, [grow, value]);
+  useEffect6(grow, [grow, value]);
   const handleKeyDown = useCallback8(
     (event) => {
       if (event.key !== "Enter" || event.shiftKey) return;
@@ -3372,19 +3331,19 @@ function DockedBar({
   const uploading = attachments?.some((a) => a.isUploading) ?? false;
   const hasAttachment = attachments?.some((a) => a.part !== null) ?? false;
   const canSend = (!!value.trim() || hasAttachment) && !uploading && !disabled;
-  return /* @__PURE__ */ jsxs4("div", { className: "hw-dock", onFocus: () => setFocused(true), onBlur: onDockBlur, children: [
-    showSuggestions && /* @__PURE__ */ jsx5("div", { className: "hw-dock-suggestions", children: visibleQuestions.map((question, index) => (
+  return /* @__PURE__ */ jsxs3("div", { className: "hw-dock", onFocus: () => setFocused(true), onBlur: onDockBlur, children: [
+    showSuggestions && /* @__PURE__ */ jsx4("div", { className: "hw-dock-suggestions", children: visibleQuestions.map((question, index) => (
       /* The pill stays a button and the dismiss is a sibling, not a nested
          button — a button inside a button is invalid and the inner click
          would still fire the outer one. Only the first row carries the ×,
          since it closes the whole offer. */
-      /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs3(
         "span",
         {
           className: "hw-dock-pill-row",
           style: { animationDelay: `${120 + index * 90}ms` },
           children: [
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -3393,14 +3352,14 @@ function DockedBar({
                 children: question
               }
             ),
-            index === 0 && /* @__PURE__ */ jsx5(
+            index === 0 && /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
                 className: "hw-dock-pill-dismiss",
                 "aria-label": t("widget.aria_dismiss"),
                 onClick: dismissOffer,
-                children: /* @__PURE__ */ jsx5(
+                children: /* @__PURE__ */ jsx4(
                   "svg",
                   {
                     viewBox: "0 0 24 24",
@@ -3409,7 +3368,7 @@ function DockedBar({
                     strokeWidth: "2.5",
                     strokeLinecap: "round",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18M6 6l12 12" })
+                    children: /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18M6 6l12 12" })
                   }
                 )
               }
@@ -3419,8 +3378,8 @@ function DockedBar({
         question
       )
     )) }),
-    sendError && /* @__PURE__ */ jsx5("div", { className: "hw-dock-error", role: "alert", children: sendError }),
-    /* @__PURE__ */ jsxs4(
+    sendError && /* @__PURE__ */ jsx4("div", { className: "hw-dock-error", role: "alert", children: sendError }),
+    /* @__PURE__ */ jsxs3(
       "div",
       {
         className: "hw-dock-bar",
@@ -3429,7 +3388,7 @@ function DockedBar({
         onMouseDown: onReopen,
         onTouchStart: onReopen,
         children: [
-          !!attachments?.length && /* @__PURE__ */ jsx5("div", { className: "hw-dock-previews", children: attachments.map((a) => /* @__PURE__ */ jsx5(
+          !!attachments?.length && /* @__PURE__ */ jsx4("div", { className: "hw-dock-previews", children: attachments.map((a) => /* @__PURE__ */ jsx4(
             PreviewThumb,
             {
               attachment: a,
@@ -3437,7 +3396,7 @@ function DockedBar({
             },
             a.id
           )) }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx4(
             "textarea",
             {
               ref: inputRef,
@@ -3455,8 +3414,8 @@ function DockedBar({
               onPaste: handlePaste
             }
           ),
-          /* @__PURE__ */ jsxs4("div", { className: "hw-dock-actions", children: [
-            dictation.supported && /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs3("div", { className: "hw-dock-actions", children: [
+            dictation.supported && /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -3466,11 +3425,11 @@ function DockedBar({
                 "aria-pressed": dictation.listening,
                 disabled,
                 onClick: dictation.toggle,
-                children: /* @__PURE__ */ jsx5(MicGlyph, {})
+                children: /* @__PURE__ */ jsx4(MicGlyph, {})
               }
             ),
-            onAddFiles && /* @__PURE__ */ jsxs4(Fragment, { children: [
-              /* @__PURE__ */ jsx5(
+            onAddFiles && /* @__PURE__ */ jsxs3(Fragment, { children: [
+              /* @__PURE__ */ jsx4(
                 "button",
                 {
                   type: "button",
@@ -3478,10 +3437,10 @@ function DockedBar({
                   "aria-label": t("widget.aria_attach"),
                   disabled,
                   onClick: () => fileInputRef.current?.click(),
-                  children: /* @__PURE__ */ jsx5(PaperclipIcon, { size: 17 })
+                  children: /* @__PURE__ */ jsx4(PaperclipIcon, { size: 17 })
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   ref: fileInputRef,
@@ -3497,7 +3456,7 @@ function DockedBar({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "button",
@@ -3505,7 +3464,7 @@ function DockedBar({
                 "aria-label": t("widget.aria_send"),
                 disabled: !canSend,
                 onClick: onSubmit,
-                children: /* @__PURE__ */ jsx5(ArrowUpIcon, { size: 16 })
+                children: /* @__PURE__ */ jsx4(ArrowUpIcon, { size: 16 })
               }
             )
           ] })
@@ -3515,7 +3474,7 @@ function DockedBar({
   ] });
 }
 function MicGlyph() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     "svg",
     {
       width: "17",
@@ -3528,19 +3487,121 @@ function MicGlyph() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx5("path", { d: "M12 3.5a3 3 0 0 1 3 3v4.5a3 3 0 0 1-6 0V6.5a3 3 0 0 1 3-3Z" }),
-        /* @__PURE__ */ jsx5("path", { d: "M5.5 11v.5a6.5 6.5 0 0 0 13 0V11" }),
-        /* @__PURE__ */ jsx5("path", { d: "M12 18v3" })
+        /* @__PURE__ */ jsx4("path", { d: "M12 3.5a3 3 0 0 1 3 3v4.5a3 3 0 0 1-6 0V6.5a3 3 0 0 1 3-3Z" }),
+        /* @__PURE__ */ jsx4("path", { d: "M5.5 11v.5a6.5 6.5 0 0 0 13 0V11" }),
+        /* @__PURE__ */ jsx4("path", { d: "M12 18v3" })
+      ]
+    }
+  );
+}
+
+// src/themed/announcement-previews.tsx
+import { useState as useState8 } from "react";
+
+// src/themed/strip-markdown.ts
+function stripMarkdown(text) {
+  return text.replace(/^#{1,6}\s+/gm, "").replace(/\*\*(.+?)\*\*/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/^[-*+]\s+/gm, "").replace(/\[(.+?)\]\(.+?\)/g, "$1").replace(/`(.+?)`/g, "$1").replace(/\n{2,}/g, " ").replace(/\n/g, " ").trim();
+}
+
+// src/themed/announcement-previews.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function AnnouncementPreviews({
+  onOpen,
+  avatar,
+  placement = "launcher",
+  footer,
+  maxVisible = Number.POSITIVE_INFINITY
+}) {
+  const previews = useWidgetStore((s) => s.announcementPreviews);
+  const dismissPreview = useWidgetStore((s) => s.dismissAnnouncementPreview);
+  const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
+  if (previews.length === 0) return null;
+  const stackPlacementClass = placement === "anchored" ? "hw-preview-stack--anchored " : "";
+  const { visible, hidden } = splitAnnouncementStack(previews, maxVisible);
+  const next = hidden[0];
+  return /* @__PURE__ */ jsxs4("div", { className: `hw-preview-stack ${stackPlacementClass}`.trim(), children: [
+    visible.map((preview) => /* @__PURE__ */ jsx5(
+      AnnouncementPreviewItem,
+      {
+        preview,
+        agentName,
+        avatar,
+        placement,
+        footer,
+        onOpen,
+        onDismiss: (slug) => dismissPreview(slug)
+      },
+      preview.slug
+    )),
+    next && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: "hw-preview-more",
+        onClick: () => onOpen(next.slug, next.tabId),
+        children: hidden.length === 1 ? t("widget.more_announcements_one") : t("widget.more_announcements", { count: hidden.length })
+      }
+    )
+  ] });
+}
+function AnnouncementPreviewItem({
+  preview,
+  agentName,
+  avatar,
+  placement,
+  footer,
+  onOpen,
+  onDismiss
+}) {
+  const [closing, setClosing] = useState8(false);
+  const handleClose = (e) => {
+    e.stopPropagation();
+    setClosing(true);
+    setTimeout(() => {
+      onDismiss(preview.slug);
+      setClosing(false);
+    }, 200);
+  };
+  const placementClass = placement === "anchored" ? "hw-preview--anchored " : "";
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `hw-preview hw-preview--announcement ${placementClass}${closing ? "hw-preview--closing" : ""}`.trim(),
+      onClick: () => onOpen(preview.slug, preview.tabId),
+      role: "button",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "hw-preview-header", children: [
+          /* @__PURE__ */ jsx5("div", { className: "hw-preview-avatar", children: avatar }),
+          /* @__PURE__ */ jsx5("div", { className: "hw-preview-name", children: agentName }),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              className: "hw-preview-close",
+              onClick: handleClose,
+              "aria-label": t("widget.aria_dismiss"),
+              children: /* @__PURE__ */ jsx5(XIcon, { size: 20 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "hw-preview-body hw-preview-body--title", children: preview.title }),
+        preview.body && (() => {
+          const clean = stripMarkdown(preview.body);
+          return /* @__PURE__ */ jsx5("div", { className: "hw-preview-body hw-preview-body--desc", children: truncatePreviewBody(clean) });
+        })(),
+        preview.badge && /* @__PURE__ */ jsx5("div", { className: "hw-announcement-badge", children: preview.badge }),
+        footer != null && footer !== false && /* @__PURE__ */ jsx5("div", { className: "hw-preview-footer", children: footer })
       ]
     }
   );
 }
 
 // src/themed/content/content-tab-view.tsx
-import { useCallback as useCallback12, useEffect as useEffect11 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect10 } from "react";
 
 // src/hooks/use-content-tab.ts
-import { useCallback as useCallback9, useEffect as useEffect8, useState as useState9 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect7, useState as useState9 } from "react";
 var EMPTY_TABS2 = [];
 function listKey(tabId, lang) {
   return `flat:${tabId}:${lang}:list`;
@@ -3655,7 +3716,7 @@ function useContentTab(tabId) {
   const clearDetail = useCallback9(() => {
     setDetail(null);
   }, []);
-  useEffect8(() => {
+  useEffect7(() => {
     if (tab && entries.length === 0) {
       fetchEntries({ page: 1, reset: true });
     }
@@ -3676,7 +3737,7 @@ function useContentTab(tabId) {
 }
 
 // src/themed/content/simple-markdown.tsx
-import { useEffect as useEffect9, useRef as useRef9 } from "react";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var COPY_ICON = `<svg class="hw-code-copy-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M15 9V4.25C15 3.55964 14.4404 3 13.75 3H4.25C3.55964 3 3 3.55964 3 4.25V13.75C3 14.4404 3.55964 15 4.25 15H9M10.25 9H19.75C20.4404 9 21 9.55964 21 10.25V19.75C21 20.4404 20.4404 21 19.75 21H10.25C9.55964 21 9 20.4404 9 19.75V10.25C9 9.55964 9.55964 9 10.25 9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 var CHECK_ICON = `<svg class="hw-code-check-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 13L11 16L16 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
@@ -3791,9 +3852,9 @@ function MarkdownContent({
   bodyMarkdown,
   className
 }) {
-  const rootRef = useRef9(null);
+  const rootRef = useRef8(null);
   const html = bodyHtml ?? (bodyMarkdown ? renderMarkdown(bodyMarkdown) : "");
-  useEffect9(() => {
+  useEffect8(() => {
     const root = rootRef.current;
     if (!root) return;
     const isWhitespaceOnly = (el) => {
@@ -3812,7 +3873,7 @@ function MarkdownContent({
     };
     removeEmpties();
   }, [html]);
-  useEffect9(() => {
+  useEffect8(() => {
     const root = rootRef.current;
     if (!root) return;
     const handler = (e) => {
@@ -3942,7 +4003,7 @@ function SkeletonSection({
 }
 
 // src/themed/content/content-list-view.tsx
-import { useCallback as useCallback10, useRef as useRef10, useState as useState10 } from "react";
+import { useCallback as useCallback10, useRef as useRef9, useState as useState10 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function ContentListView({
   entries,
@@ -3955,7 +4016,7 @@ function ContentListView({
   display
 }) {
   const [searchText, setSearchText] = useState10("");
-  const debounceRef = useRef10(void 0);
+  const debounceRef = useRef9(void 0);
   const handleSearch = useCallback10(
     (value) => {
       setSearchText(value);
@@ -4036,10 +4097,10 @@ function ContentEntryCard({
 }
 
 // src/themed/content/grouped-content-tab-view.tsx
-import { useEffect as useEffect10, useRef as useRef12 } from "react";
+import { useEffect as useEffect9, useRef as useRef11 } from "react";
 
 // src/hooks/use-grouped-content-tab.ts
-import { useCallback as useCallback11, useRef as useRef11, useState as useState11 } from "react";
+import { useCallback as useCallback11, useRef as useRef10, useState as useState11 } from "react";
 var EMPTY_TABS3 = [];
 function categoriesKey(tabId, lang) {
   return `grouped:${tabId}:${lang}:categories`;
@@ -4068,11 +4129,11 @@ function useGroupedContentTab(tabId) {
   const [items, setItems] = useState11([]);
   const [isItemsLoading, setIsItemsLoading] = useState11(false);
   const [itemsHasMore, setItemsHasMore] = useState11(false);
-  const itemsPageRef = useRef11(1);
+  const itemsPageRef = useRef10(1);
   const [detail, setDetail] = useState11(null);
   const [isLoadingDetail, setIsLoadingDetail] = useState11(false);
   const [activeCategory, setActiveCategory] = useState11(null);
-  const allCategoriesRef = useRef11(cachedCategories ?? []);
+  const allCategoriesRef = useRef10(cachedCategories ?? []);
   const fetchCategories = useCallback11(async () => {
     if (!tab) return;
     setIsCategoriesLoading(true);
@@ -4280,16 +4341,16 @@ function GroupedContentTabView({
     fetchDetail,
     clearCategory
   } = useGroupedContentTab(tab.id);
-  useEffect10(() => {
+  useEffect9(() => {
     initFetch();
   }, [initFetch]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (detailSlug && subView === "content-detail") {
       fetchDetail(detailSlug);
     }
   }, [detailSlug, subView, fetchDetail]);
-  const prevSubView = useRef12(subView);
-  useEffect10(() => {
+  const prevSubView = useRef11(subView);
+  useEffect9(() => {
     if (prevSubView.current === "content-category" && subView === null) {
       clearCategory();
     }
@@ -4383,7 +4444,7 @@ function FlatContentTabView({
     loadMore,
     fetchDetail
   } = useContentTab(tab.id);
-  useEffect11(() => {
+  useEffect10(() => {
     if (detailSlug) fetchDetail(detailSlug);
   }, [detailSlug, fetchDetail]);
   const handleSearch = useCallback12(
@@ -4407,111 +4468,269 @@ function FlatContentTabView({
       searchPlaceholder: `${t("widget.search")} ${resolveLabel(tab.label).toLowerCase()}...`,
       display: tab.display
     }
-  );
-}
-
-// src/themed/content/tab-icon.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ICON_MAP = {
-  book: BookIcon,
-  megaphone: MegaphoneIcon,
-  lightbulb: LightbulbIcon,
-  "help-circle": HelpCircleIcon,
-  newspaper: NewspaperIcon,
-  star: StarIcon
-};
-function ContentTabIconComponent({ icon }) {
-  const Icon = ICON_MAP[icon] ?? BookIcon;
-  return /* @__PURE__ */ jsx11(Icon, {});
+  );
+}
+
+// src/themed/content/tab-icon.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ICON_MAP = {
+  book: BookIcon,
+  megaphone: MegaphoneIcon,
+  lightbulb: LightbulbIcon,
+  "help-circle": HelpCircleIcon,
+  newspaper: NewspaperIcon,
+  star: StarIcon
+};
+function ContentTabIconComponent({ icon }) {
+  const Icon = ICON_MAP[icon] ?? BookIcon;
+  return /* @__PURE__ */ jsx11(Icon, {});
+}
+
+// src/themed/debug-overlay.tsx
+import { useEffect as useEffect11, useMemo as useMemo2, useRef as useRef12, useState as useState12 } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var MAX_EVENTS = 60;
+function isDebugEnabled() {
+  if (typeof window === "undefined") return false;
+  if (typeof window.localStorage !== "undefined" && window.localStorage.getItem("hw:debug") === "1") {
+    return true;
+  }
+  const search = window.location?.search ?? "";
+  return search.includes("hwdebug=1") || search.includes("debug=hw");
+}
+function senderOf(item) {
+  if (item.visitorId) return "visitor";
+  if (item.aiAgentId) return "ai";
+  if (item.userId) return "team";
+  return item.type;
+}
+function WidgetDebugOverlay() {
+  const [enabled, setEnabled] = useState12(false);
+  const [open, setOpen] = useState12(true);
+  const [events, setEvents] = useState12([]);
+  const eventsRef = useRef12([]);
+  const activeId = useWidgetStore((s) => s.activeConversationId);
+  const messagesMap = useWidgetStore((s) => s.messages);
+  const typingUsers = useWidgetStore((s) => s.typingUsers);
+  const aiProcessingMap = useWidgetStore((s) => s.aiProcessing);
+  const { store } = useWidgetContext();
+  useEffect11(() => {
+    setEnabled(isDebugEnabled());
+  }, []);
+  const pushEvent = useMemo2(
+    () => (ev) => {
+      const e = {
+        ...ev,
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+        t: Date.now()
+      };
+      eventsRef.current = [e, ...eventsRef.current].slice(0, MAX_EVENTS);
+      setEvents(eventsRef.current);
+    },
+    []
+  );
+  useEffect11(() => {
+    if (!enabled) return;
+    if (typeof window === "undefined" || typeof window.fetch !== "function") return;
+    const originalFetch = window.fetch.bind(window);
+    const patched = (async (input, init) => {
+      const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      const isTrpc = url.includes("/trpc/");
+      if (isTrpc) {
+        const method = init?.method ?? (typeof input !== "string" && !(input instanceof URL) ? input.method : "GET");
+        const label = url.split("/trpc/")[1]?.split("?")[0] ?? url;
+        pushEvent({ kind: "trpc", label: `\u2192 ${method} ${label}`, detail: shortJson(init?.body) });
+      }
+      try {
+        const res = await originalFetch(input, init);
+        if (isTrpc) {
+          const label = url.split("/trpc/")[1]?.split("?")[0] ?? url;
+          pushEvent({ kind: "trpc", label: `\u2190 ${res.status} ${label}` });
+        }
+        return res;
+      } catch (err) {
+        if (isTrpc) {
+          const label = url.split("/trpc/")[1]?.split("?")[0] ?? url;
+          pushEvent({ kind: "error", label: `\u2718 ${label}`, detail: err instanceof Error ? err.message : String(err) });
+        }
+        throw err;
+      }
+    });
+    window.fetch = patched;
+    return () => {
+      window.fetch = originalFetch;
+    };
+  }, [enabled, pushEvent]);
+  useEffect11(() => {
+    if (!enabled) return;
+    const original = store.getState().handleRealtimeEvent;
+    store.setState({
+      handleRealtimeEvent: (ev) => {
+        pushEvent({ kind: "ws", label: ev.type, detail: shortJson(ev) });
+        original(ev);
+      }
+    });
+    return () => {
+      store.setState({ handleRealtimeEvent: original });
+    };
+  }, [enabled, store, pushEvent]);
+  const activeMessages = activeId ? messagesMap.get(activeId) ?? [] : [];
+  const lastMsgSignature = useMemo2(
+    () => activeMessages.map((m) => `${m.id}:${senderOf(m)}:${m.createdAt}`).join("|"),
+    [activeMessages]
+  );
+  const prevSigRef = useRef12(lastMsgSignature);
+  useEffect11(() => {
+    if (!enabled) return;
+    if (prevSigRef.current !== lastMsgSignature) {
+      prevSigRef.current = lastMsgSignature;
+      pushEvent({
+        kind: "store",
+        label: `messages[${activeMessages.length}]`,
+        detail: activeMessages.map((m, i) => `${i}:${senderOf(m)}=${(m.text ?? "").slice(0, 24)}`).join(" | ")
+      });
+    }
+  }, [lastMsgSignature, activeMessages, enabled, pushEvent]);
+  if (!enabled) return null;
+  const isTyping = activeId ? typingUsers.get(activeId) : false;
+  const isAi = activeId ? aiProcessingMap.get(activeId) : false;
+  return /* @__PURE__ */ jsxs7("div", { style: styles.wrap, children: [
+    /* @__PURE__ */ jsxs7("div", { style: styles.header, children: [
+      /* @__PURE__ */ jsx12("strong", { children: "hw debug" }),
+      /* @__PURE__ */ jsxs7("span", { style: styles.meta, children: [
+        " ",
+        "\xB7 conv ",
+        activeId ? activeId.slice(0, 10) : "\u2014",
+        " \xB7 items ",
+        activeMessages.length,
+        " \xB7 typing ",
+        isTyping ? "Y" : "n",
+        " \xB7 ai ",
+        isAi ? "Y" : "n"
+      ] }),
+      /* @__PURE__ */ jsx12("button", { type: "button", style: styles.btn, onClick: () => setOpen((v) => !v), children: open ? "hide" : "show" }),
+      /* @__PURE__ */ jsx12("button", { type: "button", style: styles.btn, onClick: () => {
+        eventsRef.current = [];
+        setEvents([]);
+      }, children: "clear" })
+    ] }),
+    open && /* @__PURE__ */ jsxs7("div", { style: styles.body, children: [
+      /* @__PURE__ */ jsxs7("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx12("div", { style: styles.sectionTitle, children: "messages (active)" }),
+        activeMessages.length === 0 ? /* @__PURE__ */ jsx12("div", { style: styles.empty, children: "empty" }) : activeMessages.map((m, i) => /* @__PURE__ */ jsxs7("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsx12("span", { style: { ...styles.badge, background: colorFor(senderOf(m)) }, children: i }),
+          /* @__PURE__ */ jsx12("span", { style: styles.sender, children: senderOf(m) }),
+          /* @__PURE__ */ jsx12("span", { style: styles.ts, children: m.createdAt.slice(11, 23) }),
+          /* @__PURE__ */ jsx12("span", { style: styles.text, children: (m.text ?? "").slice(0, 60) })
+        ] }, m.id))
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx12("div", { style: styles.sectionTitle, children: "events" }),
+        events.length === 0 ? /* @__PURE__ */ jsx12("div", { style: styles.empty, children: "no events yet \u2014 send a message" }) : events.map((e) => /* @__PURE__ */ jsxs7("div", { style: styles.row, children: [
+          /* @__PURE__ */ jsx12("span", { style: { ...styles.badge, background: kindColor(e.kind) }, children: e.kind }),
+          /* @__PURE__ */ jsx12("span", { style: styles.ts, children: new Date(e.t).toISOString().slice(11, 23) }),
+          /* @__PURE__ */ jsx12("span", { style: styles.evLabel, children: e.label }),
+          e.detail && /* @__PURE__ */ jsx12("span", { style: styles.detail, children: e.detail })
+        ] }, e.id))
+      ] })
+    ] })
+  ] });
 }
-
-// src/themed/announcement-previews.tsx
-import { useState as useState12 } from "react";
-
-// src/themed/strip-markdown.ts
-function stripMarkdown(text) {
-  return text.replace(/^#{1,6}\s+/gm, "").replace(/\*\*(.+?)\*\*/g, "$1").replace(/\*(.+?)\*/g, "$1").replace(/^[-*+]\s+/gm, "").replace(/\[(.+?)\]\(.+?\)/g, "$1").replace(/`(.+?)`/g, "$1").replace(/\n{2,}/g, " ").replace(/\n/g, " ").trim();
+function shortJson(v) {
+  if (v === void 0) return "";
+  try {
+    const s = JSON.stringify(v);
+    if (!s) return "";
+    return s.length > 180 ? `${s.slice(0, 177)}\u2026` : s;
+  } catch {
+    return String(v);
+  }
 }
-
-// src/themed/announcement-previews.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-function AnnouncementPreviews({
-  onOpen,
-  avatar,
-  placement = "launcher",
-  footer
-}) {
-  const previews = useWidgetStore((s) => s.announcementPreviews);
-  const dismissPreview = useWidgetStore((s) => s.dismissAnnouncementPreview);
-  const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
-  if (previews.length === 0) return null;
-  const stackPlacementClass = placement === "anchored" ? "hw-preview-stack--anchored " : "";
-  return /* @__PURE__ */ jsx12("div", { className: `hw-preview-stack ${stackPlacementClass}`.trim(), children: previews.map((preview) => /* @__PURE__ */ jsx12(
-    AnnouncementPreviewItem,
-    {
-      preview,
-      agentName,
-      avatar,
-      placement,
-      footer,
-      onOpen,
-      onDismiss: (slug) => dismissPreview(slug)
-    },
-    preview.slug
-  )) });
+function colorFor(sender) {
+  switch (sender) {
+    case "visitor":
+      return "#1d4ed8";
+    case "ai":
+      return "#7c3aed";
+    case "team":
+      return "#16a34a";
+    default:
+      return "#6b7280";
+  }
 }
-function AnnouncementPreviewItem({
-  preview,
-  agentName,
-  avatar,
-  placement,
-  footer,
-  onOpen,
-  onDismiss
-}) {
-  const [closing, setClosing] = useState12(false);
-  const handleClose = (e) => {
-    e.stopPropagation();
-    setClosing(true);
-    setTimeout(() => {
-      onDismiss(preview.slug);
-      setClosing(false);
-    }, 200);
-  };
-  const placementClass = placement === "anchored" ? "hw-preview--anchored " : "";
-  return /* @__PURE__ */ jsxs7(
-    "div",
-    {
-      className: `hw-preview hw-preview--announcement ${placementClass}${closing ? "hw-preview--closing" : ""}`.trim(),
-      onClick: () => onOpen(preview.slug, preview.tabId),
-      role: "button",
-      tabIndex: 0,
-      children: [
-        /* @__PURE__ */ jsxs7("div", { className: "hw-preview-header", children: [
-          /* @__PURE__ */ jsx12("div", { className: "hw-preview-avatar", children: avatar }),
-          /* @__PURE__ */ jsx12("div", { className: "hw-preview-name", children: agentName }),
-          /* @__PURE__ */ jsx12(
-            "button",
-            {
-              type: "button",
-              className: "hw-preview-close",
-              onClick: handleClose,
-              "aria-label": t("widget.aria_dismiss"),
-              children: /* @__PURE__ */ jsx12(XIcon, { size: 20 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx12("div", { className: "hw-preview-body hw-preview-body--title", children: preview.title }),
-        preview.body && (() => {
-          const clean = stripMarkdown(preview.body);
-          return /* @__PURE__ */ jsx12("div", { className: "hw-preview-body hw-preview-body--desc", children: clean.length > 120 ? `${clean.slice(0, 120)}\u2026` : clean });
-        })(),
-        preview.badge && /* @__PURE__ */ jsx12("div", { className: "hw-announcement-badge", children: preview.badge }),
-        footer != null && footer !== false && /* @__PURE__ */ jsx12("div", { className: "hw-preview-footer", children: footer })
-      ]
-    }
-  );
+function kindColor(kind) {
+  switch (kind) {
+    case "trpc":
+      return "#0ea5e9";
+    case "ws":
+      return "#f97316";
+    case "store":
+      return "#64748b";
+    case "error":
+      return "#dc2626";
+  }
 }
+var styles = {
+  wrap: {
+    position: "fixed",
+    right: 12,
+    bottom: 12,
+    zIndex: 2147483e3,
+    width: 420,
+    maxHeight: "70vh",
+    background: "rgba(9,9,11,0.94)",
+    color: "#e5e7eb",
+    borderRadius: 10,
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    fontSize: 11,
+    boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
+    overflow: "hidden",
+    pointerEvents: "auto"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 10px",
+    background: "#18181b",
+    borderBottom: "1px solid #27272a"
+  },
+  meta: { flex: 1, color: "#a1a1aa", fontSize: 10 },
+  btn: {
+    background: "#27272a",
+    color: "#e4e4e7",
+    border: "1px solid #3f3f46",
+    borderRadius: 4,
+    padding: "2px 8px",
+    cursor: "pointer",
+    fontSize: 10
+  },
+  body: { display: "flex", flexDirection: "column", maxHeight: "calc(70vh - 32px)", overflow: "auto" },
+  section: { borderBottom: "1px solid #27272a", padding: "6px 10px" },
+  sectionTitle: { color: "#a1a1aa", fontSize: 10, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 },
+  row: {
+    display: "grid",
+    gridTemplateColumns: "32px 56px 72px 1fr",
+    gap: 6,
+    alignItems: "baseline",
+    padding: "2px 0",
+    borderTop: "1px dashed #27272a"
+  },
+  badge: {
+    display: "inline-block",
+    borderRadius: 3,
+    padding: "1px 4px",
+    color: "white",
+    fontSize: 9,
+    textAlign: "center"
+  },
+  sender: { color: "#d4d4d8" },
+  ts: { color: "#71717a", fontSize: 10 },
+  text: { color: "#e4e4e7", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
+  evLabel: { color: "#e4e4e7" },
+  detail: { gridColumn: "1 / -1", color: "#a1a1aa", fontSize: 10, whiteSpace: "pre-wrap", wordBreak: "break-all" },
+  empty: { color: "#52525b", fontStyle: "italic", fontSize: 10 }
+};
 
 // src/themed/message-bubble.tsx
 import { useEffect as useEffect12, useLayoutEffect, useRef as useRef13, useState as useState13 } from "react";
@@ -4864,15 +5083,18 @@ function parseParts(raw) {
     return null;
   }
 }
-function parseMetadata(raw) {
-  if (!raw) return null;
-  if (typeof raw === "object") return raw;
-  try {
-    const parsed = JSON.parse(raw);
-    return parsed && typeof parsed === "object" ? parsed : null;
-  } catch {
-    return null;
-  }
+var DATE_KEY_FMT = new Intl.DateTimeFormat("en-CA");
+var displayFmtCache = /* @__PURE__ */ new Map();
+function displayDateFormatter(locale) {
+  const hit = displayFmtCache.get(locale);
+  if (hit) return hit;
+  const fmt = new Intl.DateTimeFormat(locale, {
+    weekday: "long",
+    month: "short",
+    day: "numeric"
+  });
+  displayFmtCache.set(locale, fmt);
+  return fmt;
 }
 function MessageList({
   items,
@@ -4966,10 +5188,10 @@ function MessageList({
     );
   }
   let lastDateKey = "";
-  const todayKey = (/* @__PURE__ */ new Date()).toLocaleDateString("en-CA");
+  const todayKey = DATE_KEY_FMT.format(/* @__PURE__ */ new Date());
   const yesterday = /* @__PURE__ */ new Date();
   yesterday.setDate(yesterday.getDate() - 1);
-  const yesterdayKey = yesterday.toLocaleDateString("en-CA");
+  const yesterdayKey = DATE_KEY_FMT.format(yesterday);
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -4996,15 +5218,11 @@ function MessageList({
               );
             }
             const itemDate = new Date(item.createdAt);
-            const dateKey = itemDate.toLocaleDateString("en-CA");
+            const dateKey = DATE_KEY_FMT.format(itemDate);
             const isNewBucket = dateKey !== lastDateKey;
             if (isNewBucket) lastDateKey = dateKey;
             const showDateSep = isNewBucket && dateKey !== todayKey;
-            const dateLabel = dateKey === yesterdayKey ? t("widget.yesterday") : itemDate.toLocaleDateString(getLocale(), {
-              weekday: "long",
-              month: "short",
-              day: "numeric"
-            });
+            const dateLabel = dateKey === yesterdayKey ? t("widget.yesterday") : displayDateFormatter(getLocale()).format(itemDate);
             const sender = item.visitorId ? "visitor" : item.aiAgentId ? "ai" : "team";
             return /* @__PURE__ */ jsxs9(
               React.Fragment,
@@ -5021,7 +5239,7 @@ function MessageList({
                       text: item.text ?? "",
                       sender,
                       parts: parseParts(item.parts),
-                      metadata: parseMetadata(
+                      metadata: parseTimelineItemMetadata(
                         item.metadata
                       ),
                       onQuickReplyTap: handleQuickReplyTap
@@ -5103,6 +5321,7 @@ function MessagePreview({
   const dismissPreview = useWidgetStore((s) => s.dismissPreview);
   const setActiveConversation = useWidgetStore((s) => s.setActiveConversation);
   const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
+  const client = useWidgetClient();
   const senderName = preview?.senderName || agentName;
   const senderImage = preview?.senderImage || null;
   const [closing, setClosing] = useState14(false);
@@ -5130,14 +5349,34 @@ function MessagePreview({
     setActiveConversation(targetConvId);
     onOpen();
   };
-  const messages = preview.messages?.length ? preview.messages : [{ text: preview.text }];
-  const hasQr = preview.quickReplies && preview.quickReplies.options.length > 0;
+  const submitQuickReply = (optionId) => {
+    const convId = preview.conversationId;
+    const stepId = preview.quickReplies?.stepId;
+    if (stepId && !convId.startsWith(EPHEMERAL_CONV_PREFIX)) {
+      client.widget.workflowReply.mutate({ conversationId: convId, stepId, optionId }).catch((err) => {
+        console.warn("[helpway] workflowReply from preview failed:", err);
+      });
+    }
+    dismissPreview();
+    setActiveConversation(convId);
+    onOpen();
+  };
+  const messages = (preview.messages?.length ? preview.messages : [{ text: preview.text }]).filter(
+    (m) => m.text.trim().length > 0
+  );
+  const qr = preview.quickReplies && preview.quickReplies.options.length > 0 ? preview.quickReplies : null;
   const placementClass = placement === "anchored" ? "hw-preview--anchored " : "";
   return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: `hw-preview ${placementClass}${closing ? "hw-preview--closing" : ""}`,
       onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key !== "Enter" && e.key !== " ") return;
+        if (e.target !== e.currentTarget) return;
+        e.preventDefault();
+        handleClick();
+      },
       role: "button",
       tabIndex: 0,
       children: [
@@ -5155,19 +5394,23 @@ function MessagePreview({
             }
           )
         ] }),
-        messages.map((m, i) => /* @__PURE__ */ jsx15("div", { className: "hw-preview-body", children: m.text }, i)),
-        hasQr && /* @__PURE__ */ jsxs10(Fragment4, { children: [
-          preview.quickReplies.prompt && /* @__PURE__ */ jsx15("div", { className: "hw-preview-body", children: preview.quickReplies.prompt }),
-          /* @__PURE__ */ jsx15("div", { className: "hw-preview-quick-replies hw-quick-replies", children: preview.quickReplies.options.map((opt) => /* @__PURE__ */ jsx15(
+        messages.map((m) => (
+          /* Keyed by content, not index: the card's bodies are the sender's own
+             consecutive messages, so two identical ones would already be a bug
+             upstream, and an index key hands React the wrong bubble to reuse the
+             moment a new message lands mid-animation. */
+          /* @__PURE__ */ jsx15("div", { className: "hw-preview-body", children: truncatePreviewBody(m.text) }, m.text)
+        )),
+        qr && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+          qr.prompt && /* @__PURE__ */ jsx15("div", { className: "hw-preview-body", children: qr.prompt }),
+          /* @__PURE__ */ jsx15("div", { className: "hw-preview-quick-replies hw-quick-replies", children: qr.options.map((opt) => /* @__PURE__ */ jsx15(
             "button",
             {
               type: "button",
               className: "hw-quick-reply-btn",
               onClick: (e) => {
                 e.stopPropagation();
-                dismissPreview();
-                setActiveConversation(preview.conversationId);
-                onOpen();
+                submitQuickReply(opt.id);
               },
               children: opt.label
             },
@@ -5237,7 +5480,14 @@ function WidgetLogo({
     );
   }
   if (agentConfig?.avatarUrl) {
-    return /* @__PURE__ */ jsx16("img", { src: agentConfig.avatarUrl, alt: "", className: `hw-agent-img ${logoClass} ${className ?? ""}` });
+    return /* @__PURE__ */ jsx16(
+      "img",
+      {
+        src: agentConfig.avatarUrl,
+        alt: "",
+        className: `hw-agent-img ${logoClass} ${className ?? ""}`
+      }
+    );
   }
   if (agentConfig?.avatarPreset) {
     return /* @__PURE__ */ jsx16(
@@ -5389,9 +5639,11 @@ function DefaultWidget({
   const activeId = useWidgetStore((s) => s.activeConversationId);
   const isDismissed = useWidgetStore((s) => s.isDismissed);
   const { totalUnread } = useUnread();
+  const awaitingReply = useAwaitingReply();
   const contentTabs = useWidgetStore((s) => s.agentConfig?.contentTabs) ?? EMPTY_CONTENT_TABS;
   const { announcementTabs, markEntrySeen, getUnseenEntries } = useAnnouncements();
   const unseenAnnouncementCount = useWidgetStore((s) => s.unseenAnnouncementCount);
+  const incomingPreview = useWidgetStore((s) => !!s.incomingPreview);
   const visitorContact = useWidgetStore((s) => s.visitor?.contact);
   if (process.env.NODE_ENV !== "production") {
     console.debug("[Widget]", {
@@ -5473,14 +5725,7 @@ function DefaultWidget({
     const mostRecent = conversations[0];
     if (mostRecent) openConversation(mostRecent.id);
     else openNewConversation();
-  }, [
-    isOpen,
-    isReady,
-    subView,
-    conversations,
-    openConversation,
-    openNewConversation
-  ]);
+  }, [isOpen, isReady, subView, conversations, openConversation, openNewConversation]);
   const dockComposer = useComposer(activeId);
   const dockRef = useRef15(dockComposer);
   useEffect15(() => {
@@ -5853,7 +6098,13 @@ function DefaultWidget({
                   }
                 ),
                 /* @__PURE__ */ jsxs11("div", { className: "hw-header-identity", children: [
-                  /* @__PURE__ */ jsx16("div", { className: `hw-header-bot-icon${hasTeamAgent ? " hw-header-bot-icon--team" : ""}`, children: hasTeamAgent && humanImage ? /* @__PURE__ */ jsx16("img", { src: humanImage, alt: headerName, className: "hw-header-agent-img" }) : hasTeamAgent ? /* @__PURE__ */ jsx16("span", { className: "hw-header-agent-initials", children: headerName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx16(WidgetLogo, {}) }),
+                  /* @__PURE__ */ jsx16(
+                    "div",
+                    {
+                      className: `hw-header-bot-icon${hasTeamAgent ? " hw-header-bot-icon--team" : ""}`,
+                      children: hasTeamAgent && humanImage ? /* @__PURE__ */ jsx16("img", { src: humanImage, alt: headerName, className: "hw-header-agent-img" }) : hasTeamAgent ? /* @__PURE__ */ jsx16("span", { className: "hw-header-agent-initials", children: headerName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx16(WidgetLogo, {})
+                    }
+                  ),
                   /* @__PURE__ */ jsxs11("div", { className: "hw-header-info", children: [
                     /* @__PURE__ */ jsx16("div", { className: "hw-header-name", children: headerName }),
                     /* @__PURE__ */ jsx16("div", { className: "hw-header-status", children: subtitleText })
@@ -6083,35 +6334,25 @@ function DefaultWidget({
             ]
           }
         ),
-        isReady && !isOpen && !isDismissed && !hideLauncher && /* No auto-dismiss. This card only ever carries a real incoming reply,
-           and the old 8-second timer deleted it: a visitor who looked away
-           for a moment lost the notification entirely — the unread count
-           stayed, the words did not. It now waits for the visitor to open
-           the thread or close the card, which is what a notification is
-           supposed to do. */
-        /* @__PURE__ */ jsx16(
-          MessagePreview,
-          {
-            onOpen: handleBubbleClick,
-            avatar: /* @__PURE__ */ jsx16(WidgetLogo, {}),
-            autoDismissMs: null
-          }
-        ),
-        isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsx16(
-          AnnouncementPreviews,
-          {
-            avatar: /* @__PURE__ */ jsx16(WidgetLogo, {}),
-            onOpen: (slug, tabId) => {
-              markEntrySeen(slug);
-              handleBubbleClick();
-              setTimeout(() => {
-                switchTab(`content:${tabId}`);
-                setContentDetailSlug(slug);
-                setSubView("content-detail");
-              }, 50);
+        isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsxs11("div", { className: "hw-preview-dock", children: [
+          /* @__PURE__ */ jsx16(
+            AnnouncementPreviews,
+            {
+              maxVisible: incomingPreview ? 1 : 2,
+              avatar: /* @__PURE__ */ jsx16(WidgetLogo, {}),
+              onOpen: (slug, tabId) => {
+                markEntrySeen(slug);
+                handleBubbleClick();
+                setTimeout(() => {
+                  switchTab(`content:${tabId}`);
+                  setContentDetailSlug(slug);
+                  setSubView("content-detail");
+                }, 50);
+              }
             }
-          }
-        ),
+          ),
+          /* @__PURE__ */ jsx16(MessagePreview, { onOpen: handleBubbleClick, avatar: /* @__PURE__ */ jsx16(WidgetLogo, {}), autoDismissMs: null })
+        ] }),
         /* @__PURE__ */ jsx16(WidgetDebugOverlay, {}),
         isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */ jsxs11(
           "button",
@@ -6145,9 +6386,9 @@ function DefaultWidget({
                 }
               ),
               launcherStyle !== "icon" && !isOpen && /* @__PURE__ */ jsx16("span", { className: "hw-bubble-label", children: launcherStyle === "help" ? t("widget.help") : companyName }),
-              !isOpen && (totalUnread > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsxs11("div", { className: "hw-bubble-badge", children: [
+              !isOpen && (totalUnread > 0 || awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsxs11("div", { className: "hw-bubble-badge", children: [
                 totalUnread > 0 ? totalUnread : "",
-                totalUnread === 0 && unseenAnnouncementCount > 0 && /* @__PURE__ */ jsx16("span", { className: "hw-bubble-badge-dot" })
+                totalUnread === 0 && (awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsx16("span", { className: "hw-bubble-badge-dot" })
               ] })
             ]
           }
@@ -6274,6 +6515,7 @@ function ConversationCard({
   onSelect
 }) {
   const hasUnread = conv.unreadCount > 0;
+  const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
   return /* @__PURE__ */ jsxs11(
     "button",
     {
@@ -6282,7 +6524,8 @@ function ConversationCard({
       onClick: () => onSelect(conv.id),
       children: [
         /* @__PURE__ */ jsx16("div", { className: "hw-conv-card-row", children: /* @__PURE__ */ jsx16(ConvCardBody, { conv }) }),
-        hasUnread && /* @__PURE__ */ jsx16("div", { className: "hw-conv-card-badge", children: conv.unreadCount })
+        hasUnread && /* @__PURE__ */ jsx16("div", { className: "hw-conv-card-badge", children: conv.unreadCount }),
+        awaiting && /* @__PURE__ */ jsx16("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
       ]
     }
   );
@@ -6293,6 +6536,7 @@ function ConversationRow({
   isLast
 }) {
   const hasUnread = conv.unreadCount > 0;
+  const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
   return /* @__PURE__ */ jsxs11(
     "button",
     {
@@ -6301,7 +6545,8 @@ function ConversationRow({
       onClick: () => onSelect(conv.id),
       children: [
         /* @__PURE__ */ jsx16(ConvCardBody, { conv }),
-        hasUnread && /* @__PURE__ */ jsx16("div", { className: "hw-recent-row-badge", children: conv.unreadCount })
+        hasUnread && /* @__PURE__ */ jsx16("div", { className: "hw-recent-row-badge", children: conv.unreadCount }),
+        awaiting && /* @__PURE__ */ jsx16("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
       ]
     }
   );
@@ -6354,7 +6599,20 @@ function InlineEmailPrompt({ conversationId }) {
   };
   if (isSuccess) {
     return /* @__PURE__ */ jsxs11("div", { className: "hw-email-card hw-email-card--success", children: [
-      /* @__PURE__ */ jsx16("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "#22c55e", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx16("polyline", { points: "20 6 9 17 4 12" }) }),
+      /* @__PURE__ */ jsx16(
+        "svg",
+        {
+          width: "15",
+          height: "15",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "#22c55e",
+          strokeWidth: 2.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx16("polyline", { points: "20 6 9 17 4 12" })
+        }
+      ),
       t("widget.email_saved")
     ] });
   }
@@ -6386,7 +6644,41 @@ function InlineEmailPrompt({ conversationId }) {
           onClick: handleSubmit,
           disabled: isSubmitting || !email.trim(),
           "aria-label": t("widget.email_continue"),
-          children: isSubmitting ? /* @__PURE__ */ jsx16("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx16("animate", { attributeName: "stroke-dashoffset", values: "32;0", dur: "1s", repeatCount: "indefinite" }) }) }) : /* @__PURE__ */ jsx16("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "M5 12h13M12 5l7 7-7 7" }) })
+          children: isSubmitting ? /* @__PURE__ */ jsx16(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx16(
+                "animate",
+                {
+                  attributeName: "stroke-dashoffset",
+                  values: "32;0",
+                  dur: "1s",
+                  repeatCount: "indefinite"
+                }
+              ) })
+            }
+          ) : /* @__PURE__ */ jsx16(
+            "svg",
+            {
+              width: "15",
+              height: "15",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2.2,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx16("path", { d: "M5 12h13M12 5l7 7-7 7" })
+            }
+          )
         }
       )
     ] })
@@ -6400,14 +6692,7 @@ function NewConversationView({
   welcomeMessage
 }) {
   return /* @__PURE__ */ jsxs11("div", { className: "hw-new", children: [
-    /* @__PURE__ */ jsx16("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx16(
-      MessageBubble,
-      {
-        text: welcomeMessage,
-        sender: "ai",
-        parts: null
-      }
-    ) }),
+    /* @__PURE__ */ jsx16("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx16(MessageBubble, { text: welcomeMessage, sender: "ai", parts: null }) }),
     /* @__PURE__ */ jsx16(
       Composer,
       {
@@ -6595,9 +6880,7 @@ function WhatsNewCard({
   const unseen = getUnseenEntries();
   if (unseen.length === 0) return null;
   const display = unseen.slice(0, 3);
-  const badgeFieldMap = new Map(
-    announcementTabs.map((t2) => [t2.id, t2.display?.badgeField])
-  );
+  const badgeFieldMap = new Map(announcementTabs.map((t2) => [t2.id, t2.display?.badgeField]));
   return /* @__PURE__ */ jsxs11("div", { className: "hw-whats-new", children: [
     /* @__PURE__ */ jsxs11("div", { className: "hw-whats-new-header", children: [
       /* @__PURE__ */ jsx16("span", { className: "hw-whats-new-title", children: resolveLabel2("widget.whats_new") }),
@@ -6658,7 +6941,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: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 :focus-visible {\n  outline: 2px solid var(--hw-primary);\n  outline-offset: 2px;\n}\n.hw-widget :focus:not(:focus-visible) {\n  outline: none;\n}\n.hw-widget {\n  position: fixed;\n  bottom: 20px;\n  right: var(--hw-position-right, 20px);\n  left: var(--hw-position-left, auto);\n  z-index: 999999;\n  font-family: var(--hw-font);\n}\n@keyframes hw-bubble-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.6);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.hw-bubble {\n  width: 48px;\n  height: 48px;\n  border-radius: 14px;\n  background: var(--hw-primary);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;\n  position: relative;\n  overflow: visible;\n  animation: hw-bubble-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n}\n.hw-bubble--rounded {\n  border-radius: 14px;\n}\n.hw-bubble--square {\n  border-radius: 8px;\n}\n.hw-bubble--pill {\n  border-radius: 24px;\n}\n.hw-bubble--launcher-bubble,\n.hw-bubble--launcher-help {\n  width: auto;\n  padding: 0 16px 0 12px;\n  gap: 8px;\n  border-radius: 24px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--square,\n.hw-bubble--launcher-help.hw-bubble--square {\n  border-radius: 8px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--rounded,\n.hw-bubble--launcher-help.hw-bubble--rounded {\n  border-radius: 14px;\n}\n.hw-bubble-label {\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  line-height: 1;\n  position: static;\n  opacity: 1;\n  transform: none;\n}\n.hw-bubble--launcher-bubble .hw-bubble-icon,\n.hw-bubble--launcher-help .hw-bubble-icon {\n  position: static;\n}\n.hw-bubble:hover {\n  transform: scale(1.05);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n}\n.hw-bubble:active {\n  transform: scale(0.95);\n}\n.hw-bubble--open {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n}\n.hw-bubble:focus-visible {\n  outline: 2px solid white;\n  outline-offset: 2px;\n}\n.hw-bubble-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;\n}\n.hw-bubble-icon svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-bubble-icon--hidden {\n  transform: scale(0.3) rotate(90deg);\n  opacity: 0;\n}\n.hw-bubble-icon--bot {\n}\n.hw-bubble--avatar .hw-bubble-icon--bot {\n  width: 100%;\n  height: 100%;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n}\n.hw-agent-img.hw-agent-img--logo {\n  object-fit: contain;\n  padding: 10px;\n  box-sizing: border-box;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img.hw-agent-img--logo {\n  padding: 10px;\n  box-sizing: border-box;\n  object-fit: contain;\n}\n.hw-bubble-icon--close svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-bubble-badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  min-width: 20px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 11px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 5px;\n  border: 2px solid white;\n  animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes hw-badge-pop {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n.hw-bubble-badge::after {\n  content: "";\n  position: absolute;\n  inset: -2px;\n  border-radius: inherit;\n  background: var(--hw-primary);\n  opacity: 0;\n  animation: hw-badge-pulse 2s ease-out infinite;\n}\n@keyframes hw-badge-pulse {\n  0% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1.8);\n  }\n}\n.hw-window {\n  position: absolute;\n  bottom: 72px;\n  right: var(--hw-window-right, 0);\n  left: var(--hw-window-left, auto);\n  width: 440px;\n  height: 640px;\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text);\n  border-radius: var(--hw-radius);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: hw-window-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hw-window--reading {\n  width: min(720px, calc(100vw - 40px));\n  height: min(800px, calc(100vh - 112px));\n}\n@keyframes hw-window-open {\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.hw-window--closing {\n  animation: hw-window-close 0.2s ease forwards;\n}\n@keyframes hw-window-close {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.98);\n  }\n}\n.hw-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-window,\n  .hw-window--closing,\n  .hw-content,\n  .hw-msg,\n  .hw-bubble,\n  .hw-bubble-icon,\n  .hw-bubble-badge,\n  .hw-bubble-badge::after,\n  .hw-typing-dot,\n  .hw-loading-dot {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n.hw-hero {\n  flex-shrink: 0;\n  background:\n    linear-gradient(\n      160deg,\n      color-mix(in srgb, var(--hw-primary) 60%, black) 0%,\n      var(--hw-primary) 50%,\n      color-mix(in srgb, var(--hw-primary) 40%, black) 100%);\n  color: white;\n  padding: 20px 22px 40px;\n}\n.hw-hero-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n.hw-hero-close {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, color 0.15s;\n}\n.hw-hero-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  color: white;\n}\n.hw-hero-close:active {\n  transform: scale(0.92);\n  transition:\n    transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n    background 0.15s,\n    color 0.15s;\n}\n.hw-hero-close svg {\n  width: 20px;\n  height: 20px;\n}\n.hw-hero-bot-icon {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n}\n.hw-hero-bot-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.hw-hero-bot-icon .hw-agent-img,\n.hw-hero-bot-icon .hw-agent-icon {\n  border-radius: inherit;\n  overflow: hidden;\n  object-fit: contain;\n}\n.hw-hero-greeting {\n  font-size: 26px;\n  font-weight: 700;\n  line-height: 1.15;\n  margin-bottom: 6px;\n}\n.hw-hero-greeting-name {\n  font-weight: 300;\n}\n.hw-hero-greeting-question {\n  font-weight: 700;\n}\n.hw-hero-subtitle {\n  font-size: 15px;\n  color: rgba(255, 255, 255, 0.5);\n  line-height: 1.35;\n}\n.hw-sheet {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  background: #ffffff;\n  border-radius: 20px 20px 0 0;\n  margin-top: -24px;\n  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);\n  position: relative;\n  z-index: 1;\n}\n.hw-sheet-inner {\n  padding: 20px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.hw-header {\n  display: flex;\n  align-items: center;\n  padding: 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  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 {\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 {\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}\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}\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: 16px;\n  height: 16px;\n  border-radius: 2px;\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}\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}\n.hw-link-preview-url {\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-resolved-banner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 16px;\n  border-top: 1px solid var(--hw-border);\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text-2);\n  font-size: 13px;\n  flex-shrink: 0;\n}\n.hw-new {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--hw-bg-subtle);\n}\n.hw-new-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 24px;\n  text-align: center;\n}\n.hw-new-welcome {\n  flex: 1;\n  padding: 16px 20px;\n  overflow-y: auto;\n}\n.hw-new-heading {\n  font-size: 17px;\n  font-weight: 600;\n  color: var(--hw-text);\n  margin-bottom: 6px;\n}\n.hw-new-desc {\n  font-size: 13px;\n  color: var(--hw-text-2);\n  margin-bottom: 24px;\n}\n.hw-powered {\n  text-align: center;\n  padding: 8px;\n  font-size: 11px;\n  color: var(--hw-text-4);\n  flex-shrink: 0;\n}\n.hw-powered a {\n  color: var(--hw-text-2);\n  text-decoration: none;\n  font-weight: 500;\n}\n.hw-powered a:hover {\n  color: var(--hw-text);\n}\n@media (max-width: 479px) {\n  .hw-widget {\n    bottom: 16px;\n    right: 16px;\n    left: auto;\n  }\n  .hw-window {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: var(--hw-visible-height, 100%);\n    border-radius: 0;\n    animation: hw-mob-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n  }\n  .hw-window--closing {\n    animation: hw-mob-down 0.2s ease forwards;\n  }\n  @keyframes hw-mob-up {\n    from {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes hw-mob-down {\n    from {\n      opacity: 1;\n      transform: translateY(0);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n  .hw-hero {\n    padding-top: calc(20px + env(safe-area-inset-top, 0px));\n  }\n  .hw-header {\n    padding-top: env(safe-area-inset-top, 0px);\n  }\n  .hw-tabs {\n    padding-bottom: env(safe-area-inset-bottom, 0px);\n  }\n  .hw-composer {\n    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));\n  }\n  .hw-powered {\n    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));\n  }\n  .hw-header-close,\n  .hw-header-back,\n  .hw-header-action {\n    width: 34px;\n    height: 34px;\n  }\n  .hw-composer-send {\n    width: 40px;\n    height: 40px;\n  }\n  .hw-window ~ .hw-bubble {\n    display: none;\n  }\n  .hw-messages {\n    padding: 12px 14px;\n  }\n  .hw-msg {\n    max-width: 82%;\n  }\n  .hw-msg--ai {\n    max-width: 100%;\n  }\n}\n.hw-preview {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  right: 0;\n  width: 300px;\n  max-width: calc(100vw - 40px);\n  background: var(--hw-bg);\n  border: 1px solid var(--hw-border);\n  border-radius: 16px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n  animation: hw-preview-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.15s, box-shadow 0.15s;\n}\n.hw-preview.hw-preview--anchored {\n  position: static;\n  bottom: auto;\n  right: auto;\n  width: 100%;\n  max-width: 100%;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar {\n  background: none;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar img,\n.hw-preview.hw-preview--anchored .hw-preview-avatar svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.hw-preview:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n@keyframes hw-preview-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n@keyframes hw-preview-out {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.95);\n  }\n}\n.hw-preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px 0;\n}\n.hw-preview-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background:\n    linear-gradient(\n      135deg,\n      var(--hw-primary),\n      color-mix(in srgb, var(--hw-primary) 50%, black));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.hw-preview-avatar svg {\n  width: 16px;\n  height: 16px;\n}\n.hw-preview-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-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--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-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  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--hw-border);\n  flex-shrink: 0;\n}\n.hw-resolved-text {\n  font-size: 13px;\n  color: var(--hw-text-3);\n  font-weight: 500;\n}\n.hw-resolved-actions {\n  display: flex;\n  gap: 8px;\n}\n.hw-resolved-reopen {\n  padding: 6px 16px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.hw-resolved-reopen:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-csat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n.hw-csat-label {\n  font-size: 12px;\n  color: var(--hw-text-3);\n}\n.hw-csat-buttons {\n  display: flex;\n  gap: 8px;\n}\n.hw-csat-btn {\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  transition:\n    transform 0.15s,\n    border-color 0.15s,\n    background 0.15s;\n}\n.hw-csat-btn:hover {\n  transform: scale(1.1);\n  border-color: var(--hw-text-3);\n}\n.hw-csat-btn--selected {\n  border-color: var(--hw-primary);\n  background: var(--hw-bg-hover);\n  transform: scale(1.15);\n}\n.hw-csat-thanks {\n  font-size: 12px;\n  color: #22c55e;\n  font-weight: 500;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-load-more-trigger {\n  display: flex;\n  justify-content: center;\n  min-height: 1px;\n}\n.hw-load-more-trigger:has(.hw-load-more-spinner) {\n  padding: 8px 0;\n}\n.hw-load-more-spinner {\n  display: flex;\n  gap: 3px;\n}\n.hw-load-more-spinner > div {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--hw-text-4);\n  animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-load-more-spinner > div:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.hw-load-more-spinner > div:nth-child(3) {\n  animation-delay: 0.4s;\n}\n.hw-drag-handle {\n  display: none;\n}\n@media (max-width: 479px) {\n  .hw-drag-handle {\n    display: flex;\n    justify-content: center;\n    padding: 8px 0 4px;\n    flex-shrink: 0;\n  }\n  .hw-drag-handle-pill {\n    width: 32px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--hw-text-4);\n  }\n}\n.hw-msg-bubble p {\n  margin: 0 0 8px;\n}\n.hw-msg-bubble p:last-child {\n  margin-bottom: 0;\n}\n.hw-msg-bubble strong {\n  font-weight: 600;\n}\n.hw-msg-bubble em {\n  font-style: italic;\n}\n.hw-msg-bubble a {\n  color: 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-resolved {\n    border-color: var(--hw-border);\n  }\n  .hw-resolved-reopen,\n  .hw-csat-btn {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n    color: var(--hw-text);\n  }\n  .hw-hover-preview {\n    background: #1c1c1e;\n    border-color: var(--hw-border);\n  }\n  .hw-content-search-box {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n  }\n  .hw-preview {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n}\n.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-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: 8px;\n}\n.hw-source {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 7px 10px;\n  border-radius: 9px;\n  background: transparent;\n  color: var(--hw-text);\n  text-decoration: none;\n  transition: background 0.15s;\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');
+styleInject(':host {\n  all: initial;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    "Helvetica Neue",\n    Arial,\n    sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  color: #1a1a1a;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget *,\n.hw-widget *::before,\n.hw-widget *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n:where(.hw-widget) {\n  --hw-primary: #171717;\n  --hw-primary-hover: #2a2a2a;\n  --hw-brand: #171717;\n  --hw-on-brand: #ffffff;\n  --hw-focus-border: #9ca3af;\n  --hw-focus-ring: rgba(0, 0, 0, 0.06);\n  --hw-accent: #6366f1;\n  --hw-bg: #ffffff;\n  --hw-bg-subtle: #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 :focus-visible {\n  outline: 2px solid var(--hw-primary);\n  outline-offset: 2px;\n}\n.hw-widget :focus:not(:focus-visible) {\n  outline: none;\n}\n.hw-widget {\n  position: fixed;\n  bottom: 20px;\n  right: var(--hw-position-right, 20px);\n  left: var(--hw-position-left, auto);\n  z-index: 999999;\n  font-family: var(--hw-font);\n}\n@keyframes hw-bubble-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.6);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.hw-bubble {\n  width: 48px;\n  height: 48px;\n  border-radius: 14px;\n  background: var(--hw-primary);\n  color: white;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;\n  position: relative;\n  overflow: visible;\n  animation: hw-bubble-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n}\n.hw-bubble--rounded {\n  border-radius: 14px;\n}\n.hw-bubble--square {\n  border-radius: 8px;\n}\n.hw-bubble--pill {\n  border-radius: 24px;\n}\n.hw-bubble--launcher-bubble,\n.hw-bubble--launcher-help {\n  width: auto;\n  padding: 0 16px 0 12px;\n  gap: 8px;\n  border-radius: 24px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--square,\n.hw-bubble--launcher-help.hw-bubble--square {\n  border-radius: 8px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--rounded,\n.hw-bubble--launcher-help.hw-bubble--rounded {\n  border-radius: 14px;\n}\n.hw-bubble-label {\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  line-height: 1;\n  position: static;\n  opacity: 1;\n  transform: none;\n}\n.hw-bubble--launcher-bubble .hw-bubble-icon,\n.hw-bubble--launcher-help .hw-bubble-icon {\n  position: static;\n}\n.hw-bubble:hover {\n  transform: scale(1.05);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n}\n.hw-bubble:active {\n  transform: scale(0.95);\n}\n.hw-bubble--open {\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n}\n.hw-bubble:focus-visible {\n  outline: 2px solid white;\n  outline-offset: 2px;\n}\n.hw-bubble-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;\n}\n.hw-bubble-icon svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-bubble-icon--hidden {\n  transform: scale(0.3) rotate(90deg);\n  opacity: 0;\n}\n.hw-bubble-icon--bot {\n}\n.hw-bubble--avatar .hw-bubble-icon--bot {\n  width: 100%;\n  height: 100%;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img {\n  width: 100%;\n  height: 100%;\n  border-radius: 0;\n}\n.hw-agent-img.hw-agent-img--logo {\n  object-fit: contain;\n  padding: 10px;\n  box-sizing: border-box;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img.hw-agent-img--logo {\n  padding: 10px;\n  box-sizing: border-box;\n  object-fit: contain;\n}\n.hw-bubble-icon--close svg {\n  width: 22px;\n  height: 22px;\n}\n.hw-bubble-badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  min-width: 20px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--hw-primary);\n  color: white;\n  font-size: 11px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 5px;\n  border: 2px solid white;\n  animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes hw-badge-pop {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n.hw-bubble-badge::after {\n  content: "";\n  position: absolute;\n  inset: -2px;\n  border-radius: inherit;\n  background: var(--hw-primary);\n  opacity: 0;\n  animation: hw-badge-pulse 2s ease-out infinite;\n}\n@keyframes hw-badge-pulse {\n  0% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n  100% {\n    opacity: 0;\n    transform: scale(1.8);\n  }\n}\n.hw-window {\n  position: absolute;\n  bottom: 72px;\n  right: var(--hw-window-right, 0);\n  left: var(--hw-window-left, auto);\n  width: 440px;\n  height: 640px;\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text);\n  border-radius: var(--hw-radius);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: hw-window-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hw-window--reading {\n  width: min(720px, calc(100vw - 40px));\n  height: min(800px, calc(100vh - 112px));\n}\n@keyframes hw-window-open {\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.hw-window--closing {\n  animation: hw-window-close 0.2s ease forwards;\n}\n@keyframes hw-window-close {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.98);\n  }\n}\n.hw-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n  .hw-window,\n  .hw-window--closing,\n  .hw-content,\n  .hw-msg,\n  .hw-bubble,\n  .hw-bubble-icon,\n  .hw-bubble-badge,\n  .hw-bubble-badge::after,\n  .hw-typing-dot,\n  .hw-loading-dot {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n.hw-hero {\n  flex-shrink: 0;\n  background:\n    linear-gradient(\n      160deg,\n      color-mix(in srgb, var(--hw-primary) 60%, black) 0%,\n      var(--hw-primary) 50%,\n      color-mix(in srgb, var(--hw-primary) 40%, black) 100%);\n  color: white;\n  padding: 20px 22px 40px;\n}\n.hw-hero-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n.hw-hero-close {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, color 0.15s;\n}\n.hw-hero-close:hover {\n  background: rgba(255, 255, 255, 0.2);\n  color: white;\n}\n.hw-hero-close:active {\n  transform: scale(0.92);\n  transition:\n    transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n    background 0.15s,\n    color 0.15s;\n}\n.hw-hero-close svg {\n  width: 20px;\n  height: 20px;\n}\n.hw-hero-bot-icon {\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 10px;\n}\n.hw-hero-bot-icon svg {\n  width: 32px;\n  height: 32px;\n}\n.hw-hero-bot-icon .hw-agent-img,\n.hw-hero-bot-icon .hw-agent-icon {\n  border-radius: inherit;\n  overflow: hidden;\n  object-fit: contain;\n}\n.hw-hero-greeting {\n  font-size: 26px;\n  font-weight: 700;\n  line-height: 1.15;\n  margin-bottom: 6px;\n}\n.hw-hero-greeting-name {\n  font-weight: 300;\n}\n.hw-hero-greeting-question {\n  font-weight: 700;\n}\n.hw-hero-subtitle {\n  font-size: 15px;\n  color: rgba(255, 255, 255, 0.5);\n  line-height: 1.35;\n}\n.hw-sheet {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n  background: #ffffff;\n  border-radius: 20px 20px 0 0;\n  margin-top: -24px;\n  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);\n  position: relative;\n  z-index: 1;\n}\n.hw-sheet-inner {\n  padding: 20px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.hw-header {\n  display: flex;\n  align-items: center;\n  padding: 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  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 {\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 {\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}\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}\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: 16px;\n  height: 16px;\n  border-radius: 2px;\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}\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}\n.hw-link-preview-url {\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-resolved-banner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 16px;\n  border-top: 1px solid var(--hw-border);\n  background: var(--hw-bg-subtle);\n  color: var(--hw-text-2);\n  font-size: 13px;\n  flex-shrink: 0;\n}\n.hw-new {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  background: var(--hw-bg-subtle);\n}\n.hw-new-body {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 24px;\n  text-align: center;\n}\n.hw-new-welcome {\n  flex: 1;\n  padding: 16px 20px;\n  overflow-y: auto;\n}\n.hw-new-heading {\n  font-size: 17px;\n  font-weight: 600;\n  color: var(--hw-text);\n  margin-bottom: 6px;\n}\n.hw-new-desc {\n  font-size: 13px;\n  color: var(--hw-text-2);\n  margin-bottom: 24px;\n}\n.hw-powered {\n  text-align: center;\n  padding: 8px;\n  font-size: 11px;\n  color: var(--hw-text-4);\n  flex-shrink: 0;\n}\n.hw-powered a {\n  color: var(--hw-text-2);\n  text-decoration: none;\n  font-weight: 500;\n}\n.hw-powered a:hover {\n  color: var(--hw-text);\n}\n@media (max-width: 479px) {\n  .hw-widget {\n    bottom: 16px;\n    right: 16px;\n    left: auto;\n  }\n  .hw-window {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: var(--hw-visible-height, 100%);\n    border-radius: 0;\n    animation: hw-mob-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n  }\n  .hw-window--closing {\n    animation: hw-mob-down 0.2s ease forwards;\n  }\n  @keyframes hw-mob-up {\n    from {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes hw-mob-down {\n    from {\n      opacity: 1;\n      transform: translateY(0);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n  .hw-hero {\n    padding-top: calc(20px + env(safe-area-inset-top, 0px));\n  }\n  .hw-header {\n    padding-top: env(safe-area-inset-top, 0px);\n  }\n  .hw-tabs {\n    padding-bottom: env(safe-area-inset-bottom, 0px);\n  }\n  .hw-composer {\n    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));\n  }\n  .hw-powered {\n    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));\n  }\n  .hw-header-close,\n  .hw-header-back,\n  .hw-header-action {\n    width: 34px;\n    height: 34px;\n  }\n  .hw-composer-send {\n    width: 40px;\n    height: 40px;\n  }\n  .hw-window ~ .hw-bubble {\n    display: none;\n  }\n  .hw-messages {\n    padding: 12px 14px;\n  }\n  .hw-msg {\n    max-width: 82%;\n  }\n  .hw-msg--ai {\n    max-width: 100%;\n  }\n}\n.hw-preview {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  right: 0;\n  width: 300px;\n  max-width: calc(100vw - 40px);\n  background: var(--hw-bg);\n  border: 1px solid var(--hw-border);\n  border-radius: 16px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n  animation: hw-preview-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n  overflow: hidden;\n  cursor: pointer;\n  transition: transform 0.15s, box-shadow 0.15s;\n}\n.hw-preview.hw-preview--anchored {\n  position: static;\n  bottom: auto;\n  right: auto;\n  width: 100%;\n  max-width: 100%;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar {\n  background: none;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar img,\n.hw-preview.hw-preview--anchored .hw-preview-avatar svg {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n.hw-preview:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n@keyframes hw-preview-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n@keyframes hw-preview-out {\n  from {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(8px) scale(0.95);\n  }\n}\n.hw-preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 14px 0;\n}\n.hw-preview-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background:\n    linear-gradient(\n      135deg,\n      var(--hw-primary),\n      color-mix(in srgb, var(--hw-primary) 50%, black));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.hw-preview-avatar svg {\n  width: 16px;\n  height: 16px;\n}\n.hw-preview-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-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  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--hw-border);\n  flex-shrink: 0;\n}\n.hw-resolved-text {\n  font-size: 13px;\n  color: var(--hw-text-3);\n  font-weight: 500;\n}\n.hw-resolved-actions {\n  display: flex;\n  gap: 8px;\n}\n.hw-resolved-reopen {\n  padding: 6px 16px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  color: var(--hw-text);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.hw-resolved-reopen:hover {\n  background: var(--hw-bg-hover);\n}\n.hw-csat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n.hw-csat-label {\n  font-size: 12px;\n  color: var(--hw-text-3);\n}\n.hw-csat-buttons {\n  display: flex;\n  gap: 8px;\n}\n.hw-csat-btn {\n  width: 36px;\n  height: 36px;\n  border: 1px solid var(--hw-border-md);\n  border-radius: 8px;\n  background: var(--hw-bg);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  transition:\n    transform 0.15s,\n    border-color 0.15s,\n    background 0.15s;\n}\n.hw-csat-btn:hover {\n  transform: scale(1.1);\n  border-color: var(--hw-text-3);\n}\n.hw-csat-btn--selected {\n  border-color: var(--hw-primary);\n  background: var(--hw-bg-hover);\n  transform: scale(1.15);\n}\n.hw-csat-thanks {\n  font-size: 12px;\n  color: #22c55e;\n  font-weight: 500;\n  animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-load-more-trigger {\n  display: flex;\n  justify-content: center;\n  min-height: 1px;\n}\n.hw-load-more-trigger:has(.hw-load-more-spinner) {\n  padding: 8px 0;\n}\n.hw-load-more-spinner {\n  display: flex;\n  gap: 3px;\n}\n.hw-load-more-spinner > div {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background: var(--hw-text-4);\n  animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-load-more-spinner > div:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.hw-load-more-spinner > div:nth-child(3) {\n  animation-delay: 0.4s;\n}\n.hw-drag-handle {\n  display: none;\n}\n@media (max-width: 479px) {\n  .hw-drag-handle {\n    display: flex;\n    justify-content: center;\n    padding: 8px 0 4px;\n    flex-shrink: 0;\n  }\n  .hw-drag-handle-pill {\n    width: 32px;\n    height: 4px;\n    border-radius: 2px;\n    background: var(--hw-text-4);\n  }\n}\n.hw-msg-bubble p {\n  margin: 0 0 8px;\n}\n.hw-msg-bubble p:last-child {\n  margin-bottom: 0;\n}\n.hw-msg-bubble strong {\n  font-weight: 600;\n}\n.hw-msg-bubble em {\n  font-style: italic;\n}\n.hw-msg-bubble a {\n  color: 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-resolved {\n    border-color: var(--hw-border);\n  }\n  .hw-resolved-reopen,\n  .hw-csat-btn {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n    color: var(--hw-text);\n  }\n  .hw-hover-preview {\n    background: #1c1c1e;\n    border-color: var(--hw-border);\n  }\n  .hw-content-search-box {\n    background: var(--hw-bg-hover);\n    border-color: var(--hw-border-md);\n  }\n  .hw-preview {\n    background: var(--hw-bg);\n    border-color: var(--hw-border);\n  }\n}\n.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-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: 8px;\n}\n.hw-source {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 7px 10px;\n  border-radius: 9px;\n  background: transparent;\n  color: var(--hw-text);\n  text-decoration: none;\n  transition: background 0.15s;\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');
 
 // src/helpway-widget.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -6710,12 +6993,16 @@ function HelpwayWidget({
 }
 
 // src/hooks/use-realtime.ts
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect16, useRef as useRef16 } from "react";
 function useRealtime(handler) {
   const { ws } = useWidgetContext();
+  const handlerRef = useRef16(handler);
+  useEffect16(() => {
+    handlerRef.current = handler;
+  });
   useEffect16(() => {
-    return ws.onEvent(handler);
-  }, [ws, handler]);
+    return ws.onEvent((event) => handlerRef.current(event));
+  }, [ws]);
 }
 export {
   AnnouncementPreviews,
@@ -6735,6 +7022,7 @@ export {
   getOrCreateVisitorId,
   linkifyText,
   renderMarkdown,
+  useAwaitingReply,
   useComposer,
   useConversations,
   useIdentify,