@helpway/react 0.17.1 → 0.17.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -70,6 +70,14 @@ function createWidgetClient(config) {
70
70
  });
71
71
  }
72
72
 
73
+ // ../types/src/enums.ts
74
+ var MemberRole = {
75
+ Owner: "owner",
76
+ Admin: "admin",
77
+ Agent: "agent",
78
+ Member: "member"
79
+ };
80
+
73
81
  // ../types/src/visitor.ts
74
82
  var ONLINE_WINDOW_MS = 5 * 6e4;
75
83
 
@@ -381,11 +389,30 @@ var DOC_NAV_ICON_MAP = Object.fromEntries(
381
389
  );
382
390
 
383
391
  // ../types/src/upload.ts
392
+ var ALLOWED_MIME_TYPES = /* @__PURE__ */ new Set([
393
+ // Images — the only kind anyone has sent in volume.
394
+ "image/png",
395
+ "image/jpeg",
396
+ "image/gif",
397
+ "image/webp",
398
+ // Documents
399
+ "application/pdf",
400
+ // Text — inert by definition.
401
+ "text/plain",
402
+ "text/csv"
403
+ ]);
384
404
  var MAX_FILE_SIZE = 10 * 1024 * 1024;
385
405
  var MAX_BASE64_LENGTH = Math.ceil(MAX_FILE_SIZE * 1.37);
406
+ function acceptAttribute() {
407
+ return [...ALLOWED_MIME_TYPES].sort().join(",");
408
+ }
409
+
410
+ // ../types/src/member-roles.ts
411
+ var MEMBER_ROLES = [MemberRole.Owner, MemberRole.Admin, MemberRole.Member];
412
+ var ASSIGNABLE_ROLES = [MemberRole.Admin, MemberRole.Member];
386
413
 
387
414
  // ../widget-core/src/version.ts
388
- var SDK_VERSION = "0.17.1".length > 0 ? "0.17.1" : "dev";
415
+ var SDK_VERSION = "0.17.3".length > 0 ? "0.17.3" : "dev";
389
416
 
390
417
  // ../widget-core/src/ws.ts
391
418
  var WebSocketManager = class {
@@ -397,7 +424,17 @@ var WebSocketManager = class {
397
424
  reconnectTimer = null;
398
425
  pingTimer = null;
399
426
  isDestroyed = false;
427
+ /* What the "Reconnecting…" notice needs and `isConnected` cannot say: a
428
+ socket that has never been open is CONNECTING, not reconnecting, and one
429
+ nobody has asked to connect yet is neither (connection-notice.ts). */
430
+ openedOnce = false;
431
+ firstConnectAt = null;
400
432
  visibilityHandler = null;
433
+ /* The retry budget is spent and nothing is scheduled. Until this existed the
434
+ manager simply went quiet after its tenth attempt, and the widget kept
435
+ saying "Reconnecting…" about a socket nobody was reconnecting. */
436
+ gaveUp = false;
437
+ onlineHandler = null;
401
438
  constructor(config) {
402
439
  this.config = config;
403
440
  this.setupVisibilityListener();
@@ -414,6 +451,15 @@ var WebSocketManager = class {
414
451
  };
415
452
  document.addEventListener("visibilitychange", this.visibilityHandler);
416
453
  }
454
+ /* The browser saying the network is back is the best moment to try again,
455
+ and after giving up it is the only automatic one. */
456
+ setupOnlineListener() {
457
+ if (typeof window === "undefined" || this.onlineHandler) return;
458
+ this.onlineHandler = () => {
459
+ if (!this.isDestroyed && !this.isConnected) this.retryNow();
460
+ };
461
+ window.addEventListener("online", this.onlineHandler);
462
+ }
417
463
  /** Update connection parameters (call before connect) */
418
464
  configure(params) {
419
465
  Object.assign(this.config, params);
@@ -422,6 +468,8 @@ var WebSocketManager = class {
422
468
  connect() {
423
469
  if (this.ws?.readyState === WebSocket.OPEN) return;
424
470
  this.isDestroyed = false;
471
+ if (this.firstConnectAt === null) this.firstConnectAt = Date.now();
472
+ this.setupOnlineListener();
425
473
  const protocol = this.config.apiUrl.startsWith("https") ? "wss" : "ws";
426
474
  const base = this.config.apiUrl.replace(/^https?/, protocol);
427
475
  const params = new URLSearchParams({
@@ -435,6 +483,8 @@ var WebSocketManager = class {
435
483
  const ws = new WebSocket(`${base}/ws?${params}`);
436
484
  ws.onopen = () => {
437
485
  this.reconnectAttempts = 0;
486
+ this.openedOnce = true;
487
+ this.gaveUp = false;
438
488
  if (typeof document === "undefined" || document.visibilityState === "visible") {
439
489
  this.startPing();
440
490
  }
@@ -474,6 +524,10 @@ var WebSocketManager = class {
474
524
  document.removeEventListener("visibilitychange", this.visibilityHandler);
475
525
  this.visibilityHandler = null;
476
526
  }
527
+ if (this.onlineHandler && typeof window !== "undefined") {
528
+ window.removeEventListener("online", this.onlineHandler);
529
+ this.onlineHandler = null;
530
+ }
477
531
  if (this.ws) {
478
532
  this.ws.close(1e3, "Client disconnect");
479
533
  this.ws = null;
@@ -500,9 +554,39 @@ var WebSocketManager = class {
500
554
  get isConnected() {
501
555
  return this.ws?.readyState === WebSocket.OPEN;
502
556
  }
557
+ /** True once the socket has been open at least once. */
558
+ get hasOpened() {
559
+ return this.openedOnce;
560
+ }
561
+ /** When `connect()` was first called (ms epoch); null before that. */
562
+ get connectStartedAt() {
563
+ return this.firstConnectAt;
564
+ }
565
+ /** True once every automatic retry has failed and none is scheduled. */
566
+ get hasGivenUp() {
567
+ return this.gaveUp;
568
+ }
569
+ /**
570
+ * Start over with a full retry budget: the visitor pressed "Retry", or the
571
+ * browser came back online. Safe to call at any time; a no-op while
572
+ * connected or after `disconnect()`.
573
+ */
574
+ retryNow() {
575
+ if (this.isDestroyed || this.isConnected) return;
576
+ if (this.reconnectTimer) {
577
+ clearTimeout(this.reconnectTimer);
578
+ this.reconnectTimer = null;
579
+ }
580
+ this.reconnectAttempts = 0;
581
+ this.gaveUp = false;
582
+ this.connect();
583
+ }
503
584
  // ── Private ──────────────────────────────────────────
504
585
  scheduleReconnect() {
505
- if (this.reconnectAttempts >= this.maxReconnectAttempts) return;
586
+ if (this.reconnectAttempts >= this.maxReconnectAttempts) {
587
+ this.gaveUp = true;
588
+ return;
589
+ }
506
590
  const delay = Math.min(1e3 * 2 ** this.reconnectAttempts, 3e4);
507
591
  this.reconnectAttempts++;
508
592
  this.reconnectTimer = setTimeout(() => {
@@ -523,6 +607,100 @@ var WebSocketManager = class {
523
607
  }
524
608
  };
525
609
 
610
+ // ../widget-core/src/dock-ink.ts
611
+ var WHITE = [255, 255, 255];
612
+ var NEAR_BLACK = [5, 5, 7];
613
+ var BLACK = [0, 0, 0];
614
+ var clamp = (n) => Math.min(255, Math.max(0, Math.round(n)));
615
+ function fromHsl(h, s, l) {
616
+ const a = s * Math.min(l, 1 - l);
617
+ const f = (n) => {
618
+ const k = (n + h / 30) % 12;
619
+ return clamp(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
620
+ };
621
+ return [f(0), f(8), f(4)];
622
+ }
623
+ function parseColor(input) {
624
+ if (!input) return null;
625
+ const v = input.trim().toLowerCase();
626
+ if (v.startsWith("#")) {
627
+ const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])[0-9a-f]?$/.exec(v);
628
+ const long = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})(?:[0-9a-f]{2})?$/.exec(v);
629
+ const [, r, g, b] = short ?? long ?? [];
630
+ if (r === void 0 || g === void 0 || b === void 0) return null;
631
+ const channel = (digits) => Number.parseInt(short ? digits + digits : digits, 16);
632
+ return [channel(r), channel(g), channel(b)];
633
+ }
634
+ const [, kind, body] = /^(rgb|hsl)a?\(([^)]+)\)$/.exec(v) ?? [];
635
+ if (kind === void 0 || body === void 0) return null;
636
+ const [p0, p1, p2] = body.split(/[\s,/]+/).filter(Boolean);
637
+ if (p0 === void 0 || p1 === void 0 || p2 === void 0) return null;
638
+ const n0 = Number.parseFloat(p0);
639
+ const n1 = Number.parseFloat(p1);
640
+ const n2 = Number.parseFloat(p2);
641
+ if (Number.isNaN(n0) || Number.isNaN(n1) || Number.isNaN(n2)) return null;
642
+ if (kind === "rgb") {
643
+ const channel = (part, n) => clamp(part.endsWith("%") ? n * 2.55 : n);
644
+ return [channel(p0, n0), channel(p1, n1), channel(p2, n2)];
645
+ }
646
+ return fromHsl((n0 % 360 + 360) % 360, n1 / 100, n2 / 100);
647
+ }
648
+ function luminance([r, g, b]) {
649
+ const f = (c) => {
650
+ const s = c / 255;
651
+ return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
652
+ };
653
+ return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
654
+ }
655
+ function contrast(a, b) {
656
+ const la = luminance(a);
657
+ const lb = luminance(b);
658
+ return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
659
+ }
660
+ function mix(a, b, amount) {
661
+ const channel = (x, y) => clamp(x * amount + y * (1 - amount));
662
+ return [channel(a[0], b[0]), channel(a[1], b[1]), channel(a[2], b[2])];
663
+ }
664
+ var toHex = (c) => `#${c.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
665
+ function quiet(ink, tint, from, floor) {
666
+ for (let amount = from; amount < 1; amount += 0.02) {
667
+ const c = mix(ink, tint, amount);
668
+ if (contrast(c, tint) >= floor) return c;
669
+ }
670
+ return ink;
671
+ }
672
+ function dockInk(primaryColor) {
673
+ const tint = parseColor(primaryColor);
674
+ if (!tint) return null;
675
+ const onLight = contrast(WHITE, tint);
676
+ const useLight = onLight >= 4.5 || onLight >= contrast(NEAR_BLACK, tint);
677
+ const ink = useLight ? WHITE : NEAR_BLACK;
678
+ const shade = useLight ? BLACK : WHITE;
679
+ return {
680
+ tint: toHex(tint),
681
+ ink: toHex(ink),
682
+ shade: toHex(shade),
683
+ wash: toHex(contrast(ink, tint) >= 7 ? ink : shade),
684
+ ink2: toHex(quiet(ink, tint, 0.8, 4.5)),
685
+ ink3: toHex(quiet(ink, tint, 0.68, 4.5)),
686
+ ink4: toHex(quiet(ink, tint, 0.5, 3))
687
+ };
688
+ }
689
+
690
+ // ../widget-core/src/connection-notice.ts
691
+ var RECONNECT_GRACE_MS = 2e3;
692
+ var FIRST_CONNECT_GRACE_MS = 8e3;
693
+ function connectionNotice(s) {
694
+ if (s.connected) return "none";
695
+ if (s.gaveUp) return "lost";
696
+ return showReconnecting(s) ? "reconnecting" : "none";
697
+ }
698
+ function showReconnecting(s) {
699
+ if (s.connected || s.startedAt === null) return false;
700
+ if (!s.hasOpened) return s.now - s.startedAt >= FIRST_CONNECT_GRACE_MS;
701
+ return s.downSince !== null && s.now - s.downSince >= RECONNECT_GRACE_MS;
702
+ }
703
+
526
704
  // ../widget-core/src/store.ts
527
705
  import { createStore } from "zustand/vanilla";
528
706
 
@@ -555,10 +733,12 @@ var en = {
555
733
  // Composer
556
734
  "widget.placeholder": "Send a message...",
557
735
  "widget.placeholder_new": "How can we help?",
736
+ "widget.placeholder_resolved": "Reply to reopen this conversation\u2026",
558
737
  "widget.drop_files": "Drop files here",
559
738
  // CSAT
560
739
  "widget.csat_label": "How was your experience?",
561
740
  "widget.csat_thanks": "Thanks for your feedback!",
741
+ "widget.csat_error": "Couldn't save your rating. Please try again.",
562
742
  // Inline email collection (after AI reply)
563
743
  "widget.email_title": "Don't miss our reply",
564
744
  "widget.email_subtitle": "We'll email you when we respond",
@@ -571,6 +751,7 @@ var en = {
571
751
  "widget.error_desc": "Failed to load. Please try again.",
572
752
  "widget.retry": "Retry",
573
753
  "widget.reconnecting": "Reconnecting...",
754
+ "widget.connection_lost": "Connection lost",
574
755
  "widget.send_error": "Message not sent",
575
756
  // Date separators (today is implicit — never rendered)
576
757
  "widget.yesterday": "Yesterday",
@@ -592,6 +773,13 @@ var en = {
592
773
  // Copy
593
774
  "widget.copy": "Copy message",
594
775
  "widget.copied": "Copied",
776
+ /* The code-block button is its own three strings, not a reuse of the pair
777
+ above: that one copies a whole message and reads "Copy message", this one
778
+ sits inside a fenced block where the label has to stay one short word
779
+ (helpway#88). */
780
+ "widget.code_copy": "Copy",
781
+ "widget.code_copy_aria": "Copy code",
782
+ "widget.code_copy_failed": "Failed",
595
783
  // File upload
596
784
  "widget.file_too_large": "File too large (max 10 MB)",
597
785
  "widget.click_to_open": "Click to open",
@@ -1065,12 +1253,12 @@ function createWidgetStore() {
1065
1253
  const existingItems = nextMessages.get(newId) ?? [];
1066
1254
  const tempRewritten = tempItems.map((m) => ({ ...m, conversationId: newId }));
1067
1255
  const isAgentMsg = (m) => !!m.aiAgentId && !m.visitorId && !m.userId;
1068
- const seen = /* @__PURE__ */ new Set();
1256
+ const seen2 = /* @__PURE__ */ new Set();
1069
1257
  const merged = [];
1070
1258
  let keptAgentWelcome = false;
1071
1259
  for (const m of tempRewritten) {
1072
- if (seen.has(m.id)) continue;
1073
- seen.add(m.id);
1260
+ if (seen2.has(m.id)) continue;
1261
+ seen2.add(m.id);
1074
1262
  merged.push(m);
1075
1263
  if (isAgentMsg(m) && merged.length === 1) keptAgentWelcome = true;
1076
1264
  }
@@ -1084,7 +1272,7 @@ function createWidgetStore() {
1084
1272
  });
1085
1273
  let graftedWelcome = false;
1086
1274
  for (const m of existingItems) {
1087
- if (seen.has(m.id)) continue;
1275
+ if (seen2.has(m.id)) continue;
1088
1276
  if (isVisitorMsg(m) && typeof m.text === "string" && pendingVisitor.has(m.text)) {
1089
1277
  const idx = pendingVisitor.get(m.text);
1090
1278
  pendingVisitor.delete(m.text);
@@ -1093,7 +1281,7 @@ function createWidgetStore() {
1093
1281
  ...m,
1094
1282
  _stableKey: optimistic ? optimistic._stableKey ?? optimistic.id : m.id
1095
1283
  };
1096
- seen.add(m.id);
1284
+ seen2.add(m.id);
1097
1285
  continue;
1098
1286
  }
1099
1287
  const isWelcomeEcho = isAgentMsg(m) && keptAgentWelcome && !graftedWelcome && (!serverVisitorTs || m.createdAt <= serverVisitorTs);
@@ -1103,11 +1291,11 @@ function createWidgetStore() {
1103
1291
  ...m,
1104
1292
  _stableKey: seed ? seed._stableKey ?? seed.id : m.id
1105
1293
  };
1106
- seen.add(m.id);
1294
+ seen2.add(m.id);
1107
1295
  graftedWelcome = true;
1108
1296
  continue;
1109
1297
  }
1110
- seen.add(m.id);
1298
+ seen2.add(m.id);
1111
1299
  merged.push(m);
1112
1300
  }
1113
1301
  nextMessages.delete(oldId);
@@ -1541,6 +1729,21 @@ function applyTheme(host, theme) {
1541
1729
  host.style.removeProperty("--hw-window-left");
1542
1730
  }
1543
1731
  if (theme.placement) host.dataset.hwPlacement = theme.placement;
1732
+ if (theme.dockSurface === "brand") {
1733
+ host.dataset.hwDockSurface = "brand";
1734
+ const ink = dockInk(theme.primaryColor);
1735
+ if (ink) {
1736
+ setVar(host, "--hw-dock-tint", ink.tint);
1737
+ setVar(host, "--hw-dock-ink", ink.ink);
1738
+ setVar(host, "--hw-dock-shade", ink.shade);
1739
+ setVar(host, "--hw-dock-wash", ink.wash);
1740
+ setVar(host, "--hw-dock-ink-2", ink.ink2);
1741
+ setVar(host, "--hw-dock-ink-3", ink.ink3);
1742
+ setVar(host, "--hw-dock-ink-4", ink.ink4);
1743
+ }
1744
+ } else if (theme.dockSurface === "glass") {
1745
+ delete host.dataset.hwDockSurface;
1746
+ }
1544
1747
  if (theme.colorScheme === "light" || theme.colorScheme === "dark") {
1545
1748
  host.dataset.theme = theme.colorScheme;
1546
1749
  } else if (theme.colorScheme === "system") {
@@ -1664,6 +1867,43 @@ import {
1664
1867
  useState
1665
1868
  } from "react";
1666
1869
  import { useStore } from "zustand";
1870
+
1871
+ // src/map-conversation.ts
1872
+ function mapConversation(c) {
1873
+ return {
1874
+ id: c.id,
1875
+ title: c.title,
1876
+ status: c.status,
1877
+ lastMessageText: c.lastMessageText,
1878
+ lastMessageAt: c.lastMessageAt,
1879
+ lastMessageSenderType: c.lastMessageSenderType,
1880
+ lastMessageSenderName: c.lastMessageSenderName,
1881
+ lastMessageSenderImage: c.lastMessageSenderImage,
1882
+ /* The server's count, not a zero.
1883
+
1884
+ This was the literal `0`, which meant `useUnread()` answered 0 on every
1885
+ page load however many replies were waiting — the value described
1886
+ "messages that arrived while this tab has been open", not "unread". A
1887
+ badge shipped against the hook downstream never rendered once, with an
1888
+ unanswered agent message on screen.
1889
+
1890
+ Still defaulted, because a widget on an older API build gets a payload
1891
+ without the field, and 0 is the honest answer there — the socket path
1892
+ raises it from there as messages land. */
1893
+ unreadCount: c.unreadCount ?? 0,
1894
+ /* `?? null`, not left undefined: the store type says `string | null`, and
1895
+ undefined would satisfy it structurally while meaning something else to
1896
+ every reader downstream. */
1897
+ assigneeName: c.assigneeName ?? null,
1898
+ assigneeImage: c.assigneeImage ?? null,
1899
+ /* The visitor's own answer. Without it the resolved block asked "How was
1900
+ your experience?" again on every page load, to someone who had already
1901
+ said, and the server then refused the second answer. */
1902
+ csatRating: c.csatRating ?? null
1903
+ };
1904
+ }
1905
+
1906
+ // src/provider.tsx
1667
1907
  import { jsx } from "react/jsx-runtime";
1668
1908
  var WidgetContext = createContext(null);
1669
1909
  function useWidgetContext() {
@@ -1703,6 +1943,7 @@ function SupportProvider({
1703
1943
  const initRef = useRef(null);
1704
1944
  const [hasBootstrapError, setHasBootstrapError] = useState(false);
1705
1945
  const [wsDisconnected, setWsDisconnected] = useState(false);
1946
+ const [wsLost, setWsLost] = useState(false);
1706
1947
  const [bootstrapAttempt, setBootstrapAttempt] = useState(0);
1707
1948
  const sourceLocaleRef = useRef(locale);
1708
1949
  const getSourceLocale = useCallback(() => sourceLocaleRef.current, []);
@@ -1766,28 +2007,6 @@ function SupportProvider({
1766
2007
  }
1767
2008
  const convData = await client.widget.listConversations.query();
1768
2009
  if (cancelled) return;
1769
- const mapConversation = (c) => ({
1770
- id: c.id,
1771
- title: c.title,
1772
- status: c.status,
1773
- lastMessageText: c.lastMessageText,
1774
- lastMessageAt: c.lastMessageAt,
1775
- lastMessageSenderType: c.lastMessageSenderType,
1776
- lastMessageSenderName: c.lastMessageSenderName,
1777
- lastMessageSenderImage: c.lastMessageSenderImage,
1778
- /* The server's count, not a zero.
1779
-
1780
- This was the literal `0`, which meant `useUnread()` answered 0 on
1781
- every page load however many replies were waiting — the value
1782
- described "messages that arrived while this tab has been open",
1783
- not "unread". A badge shipped against the hook downstream never
1784
- rendered once, with an unanswered agent message on screen.
1785
-
1786
- Still defaulted, because a widget on an older API build gets a
1787
- payload without the field, and 0 is the honest answer there — the
1788
- socket path raises it from there as messages land. */
1789
- unreadCount: c.unreadCount ?? 0
1790
- });
1791
2010
  store.getState().setConversations(convData.conversations.map(mapConversation));
1792
2011
  if (data.website?.id && data.visitor?.id) {
1793
2012
  ws.configure({ websiteId: data.website.id, visitorId: data.visitor.id });
@@ -1922,16 +2141,21 @@ function SupportProvider({
1922
2141
  if (isViewing) scheduleMarkSeen(event.conversationId);
1923
2142
  }
1924
2143
  });
1925
- const DOWN_GRACE_MS = 2e3;
1926
2144
  let downSince = null;
1927
2145
  const wsCheck = setInterval(() => {
1928
- if (ws.isConnected) {
1929
- downSince = null;
1930
- setWsDisconnected(false);
1931
- return;
1932
- }
1933
- if (downSince === null) downSince = Date.now();
1934
- setWsDisconnected(Date.now() - downSince >= DOWN_GRACE_MS);
2146
+ const connected = ws.isConnected;
2147
+ if (connected) downSince = null;
2148
+ else if (downSince === null) downSince = Date.now();
2149
+ const notice = connectionNotice({
2150
+ connected,
2151
+ hasOpened: ws.hasOpened ?? false,
2152
+ startedAt: ws.connectStartedAt ?? null,
2153
+ downSince,
2154
+ now: Date.now(),
2155
+ gaveUp: ws.hasGivenUp ?? false
2156
+ });
2157
+ setWsDisconnected(notice === "reconnecting");
2158
+ setWsLost(notice === "lost");
1935
2159
  }, 1e3);
1936
2160
  return () => {
1937
2161
  cancelled = true;
@@ -2022,6 +2246,14 @@ function SupportProvider({
2022
2246
  emitter,
2023
2247
  hasBootstrapError,
2024
2248
  wsDisconnected,
2249
+ wsLost,
2250
+ /* Answer the press on screen at once: the strip goes back to
2251
+ "Reconnecting…" now, not at the next one-second sample. */
2252
+ retryConnection: () => {
2253
+ ws.retryNow?.();
2254
+ setWsLost(false);
2255
+ setWsDisconnected(true);
2256
+ },
2025
2257
  retryBootstrap,
2026
2258
  getSourceLocale
2027
2259
  };
@@ -2123,7 +2355,7 @@ function inferApiUrl() {
2123
2355
  }
2124
2356
 
2125
2357
  // src/themed/default-widget.tsx
2126
- import { createContext as createContext2, useCallback as useCallback14, useContext as useContext2, useEffect as useEffect16, useRef as useRef17, useState as useState16 } from "react";
2358
+ import { createContext as createContext2, useCallback as useCallback14, useContext as useContext2, useEffect as useEffect17, useRef as useRef18, useState as useState18 } from "react";
2127
2359
 
2128
2360
  // src/hooks/use-announcements.ts
2129
2361
  import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
@@ -2148,22 +2380,22 @@ function getSeenSlugs(websiteId, visitorId) {
2148
2380
  }
2149
2381
  function addSeenSlug(websiteId, visitorId, slug) {
2150
2382
  try {
2151
- const seen = getSeenSlugs(websiteId, visitorId);
2152
- seen.add(slug);
2153
- localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...seen]));
2383
+ const seen2 = getSeenSlugs(websiteId, visitorId);
2384
+ seen2.add(slug);
2385
+ localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...seen2]));
2154
2386
  } catch {
2155
2387
  }
2156
2388
  }
2157
2389
  function addSeenSlugs(websiteId, visitorId, slugs) {
2158
2390
  try {
2159
- const seen = getSeenSlugs(websiteId, visitorId);
2160
- for (const s of slugs) seen.add(s);
2161
- localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...seen]));
2391
+ const seen2 = getSeenSlugs(websiteId, visitorId);
2392
+ for (const s of slugs) seen2.add(s);
2393
+ localStorage.setItem(storageKey(websiteId, visitorId), JSON.stringify([...seen2]));
2162
2394
  } catch {
2163
2395
  }
2164
2396
  }
2165
- function filterUnseen(entries, seen) {
2166
- return entries.filter((e) => !seen.has(e.slug));
2397
+ function filterUnseen(entries, seen2) {
2398
+ return entries.filter((e) => !seen2.has(e.slug));
2167
2399
  }
2168
2400
  var EMPTY_TABS = [];
2169
2401
  function useAnnouncements() {
@@ -2189,8 +2421,8 @@ function useAnnouncements() {
2189
2421
  function onTabDone(entries, tab) {
2190
2422
  allSlugs.push(...entries.map((e) => e.slug));
2191
2423
  if (!(isFirstVisit && !isAnonymous) && entries.length > 0) {
2192
- const seen = getSeenSlugs(websiteId, visitorId);
2193
- const unseen = filterUnseen(entries, seen);
2424
+ const seen2 = getSeenSlugs(websiteId, visitorId);
2425
+ const unseen = filterUnseen(entries, seen2);
2194
2426
  totalUnseen += unseen.length;
2195
2427
  const newest = unseen[0];
2196
2428
  if (newest && !store.getState().isOpen) {
@@ -2236,13 +2468,13 @@ function useAnnouncements() {
2236
2468
  (slug) => {
2237
2469
  if (!websiteId || !visitorId || announcementTabs.length === 0) return;
2238
2470
  addSeenSlug(websiteId, visitorId, slug);
2239
- const seen = getSeenSlugs(websiteId, visitorId);
2471
+ const seen2 = getSeenSlugs(websiteId, visitorId);
2240
2472
  let total = 0;
2241
2473
  for (const tab of announcementTabs) {
2242
2474
  const cacheKey = `announcements:${tab.id}:${getLocale()}`;
2243
2475
  const cached = store.getState().contentCache.get(cacheKey);
2244
2476
  if (cached) {
2245
- total += filterUnseen(cached.data, seen).length;
2477
+ total += filterUnseen(cached.data, seen2).length;
2246
2478
  }
2247
2479
  }
2248
2480
  store.getState().setUnseenAnnouncementCount(total);
@@ -2265,13 +2497,13 @@ function useAnnouncements() {
2265
2497
  }, [websiteId, visitorId, announcementTabs, store]);
2266
2498
  const getUnseenEntries = useCallback2(() => {
2267
2499
  if (announcementTabs.length === 0 || !websiteId || !visitorId) return [];
2268
- const seen = getSeenSlugs(websiteId, visitorId);
2500
+ const seen2 = getSeenSlugs(websiteId, visitorId);
2269
2501
  const result = [];
2270
2502
  for (const tab of announcementTabs) {
2271
2503
  const cacheKey = `announcements:${tab.id}:${getLocale()}`;
2272
2504
  const cached = store.getState().contentCache.get(cacheKey);
2273
2505
  if (cached) {
2274
- for (const entry of filterUnseen(cached.data, seen)) {
2506
+ for (const entry of filterUnseen(cached.data, seen2)) {
2275
2507
  result.push({ ...entry, tabId: tab.id });
2276
2508
  }
2277
2509
  }
@@ -2301,21 +2533,7 @@ function currentPagePayload() {
2301
2533
  }
2302
2534
  var MAX_ATTACHMENTS = 10;
2303
2535
  var MAX_FILE_SIZE2 = 10 * 1024 * 1024;
2304
- var ACCEPTED_TYPES = [
2305
- "image/png",
2306
- "image/jpeg",
2307
- "image/gif",
2308
- "image/webp",
2309
- "image/svg+xml",
2310
- "application/pdf",
2311
- "text/plain",
2312
- "text/csv",
2313
- "application/zip",
2314
- "application/msword",
2315
- "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
2316
- "application/vnd.ms-excel",
2317
- "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
2318
- ].join(",");
2536
+ var ACCEPTED_TYPES = acceptAttribute();
2319
2537
  function useComposer(boundConversationId) {
2320
2538
  const { client, ws, store, getSourceLocale } = useWidgetContext();
2321
2539
  const conversationId = boundConversationId;
@@ -3020,6 +3238,51 @@ function StarIcon({ size = 24, ...props }) {
3020
3238
  }
3021
3239
  );
3022
3240
  }
3241
+ function CheckCircleIcon({ size = 24, ...props }) {
3242
+ return /* @__PURE__ */ jsx2(
3243
+ "svg",
3244
+ {
3245
+ width: typeof size === "number" ? `${size}px` : size,
3246
+ height: typeof size === "number" ? `${size}px` : size,
3247
+ viewBox: "0 0 24 24",
3248
+ fill: "none",
3249
+ "aria-hidden": true,
3250
+ xmlns: "http://www.w3.org/2000/svg",
3251
+ ...props,
3252
+ children: /* @__PURE__ */ jsx2("path", { d: "M15 9.5L10.5 15L8.5 13M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
3253
+ }
3254
+ );
3255
+ }
3256
+ function ThumbsUpIcon({ size = 24, ...props }) {
3257
+ return /* @__PURE__ */ jsx2(
3258
+ "svg",
3259
+ {
3260
+ width: typeof size === "number" ? `${size}px` : size,
3261
+ height: typeof size === "number" ? `${size}px` : size,
3262
+ viewBox: "0 0 24 24",
3263
+ fill: "none",
3264
+ "aria-hidden": true,
3265
+ xmlns: "http://www.w3.org/2000/svg",
3266
+ ...props,
3267
+ children: /* @__PURE__ */ jsx2("path", { d: "M7 11H4C3.44772 11 3 11.4477 3 12V19C3 19.5523 3.44772 20 4 20H7M7 11V20M7 11L11 3H11.6156C12.843 3 13.7808 4.09535 13.5917 5.3081L13.0161 9H18.0631C19.8811 9 21.2813 10.6041 21.0356 12.4053L20.3538 17.4053C20.1511 18.8918 18.8815 20 17.3813 20H7", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" })
3268
+ }
3269
+ );
3270
+ }
3271
+ function ThumbsDownIcon({ size = 24, ...props }) {
3272
+ return /* @__PURE__ */ jsx2(
3273
+ "svg",
3274
+ {
3275
+ width: typeof size === "number" ? `${size}px` : size,
3276
+ height: typeof size === "number" ? `${size}px` : size,
3277
+ viewBox: "0 0 24 24",
3278
+ fill: "none",
3279
+ "aria-hidden": true,
3280
+ xmlns: "http://www.w3.org/2000/svg",
3281
+ ...props,
3282
+ children: /* @__PURE__ */ jsx2("path", { d: "M17 13H20C20.5523 13 21 12.5523 21 12L21 5C21 4.44772 20.5523 4 20 4H17M17 13L17 4M17 13L13.301 20.4505C13.1339 20.7871 12.7905 21 12.4147 21V21C11.1917 21 10.2572 19.9046 10.4456 18.6919L11.0192 15L5.98994 15C4.17839 15 2.78316 13.3959 3.02793 11.5947L3.70735 6.59466C3.90933 5.1082 5.17443 4 6.66936 4H17", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" })
3283
+ }
3284
+ );
3285
+ }
3023
3286
 
3024
3287
  // src/themed/composer.tsx
3025
3288
  import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -3636,6 +3899,31 @@ function AnnouncementPreviewItem({
3636
3899
  );
3637
3900
  }
3638
3901
 
3902
+ // src/themed/connection-strip.tsx
3903
+ import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
3904
+ function ConnectionStrip({
3905
+ reconnecting,
3906
+ lost,
3907
+ onRetry
3908
+ }) {
3909
+ if (lost) {
3910
+ return (
3911
+ // biome-ignore lint/a11y/useSemanticElements: <output> is a form element and is styled by host pages; a div with the role is announced the same
3912
+ /* @__PURE__ */ jsxs5("div", { className: "hw-disconnect", role: "status", children: [
3913
+ /* @__PURE__ */ jsx6("span", { children: t("widget.connection_lost") }),
3914
+ /* @__PURE__ */ jsx6("button", { type: "button", className: "hw-disconnect-retry", onClick: onRetry, children: t("widget.retry") })
3915
+ ] })
3916
+ );
3917
+ }
3918
+ if (reconnecting) {
3919
+ return /* @__PURE__ */ jsxs5("div", { className: "hw-disconnect", children: [
3920
+ /* @__PURE__ */ jsx6("div", { className: "hw-disconnect-spinner" }),
3921
+ t("widget.reconnecting")
3922
+ ] });
3923
+ }
3924
+ return null;
3925
+ }
3926
+
3639
3927
  // src/themed/content/content-tab-view.tsx
3640
3928
  import { useCallback as useCallback13, useEffect as useEffect11 } from "react";
3641
3929
 
@@ -3786,7 +4074,21 @@ function useContentTab(tabId) {
3786
4074
 
3787
4075
  // src/themed/content/simple-markdown.tsx
3788
4076
  import { useEffect as useEffect9, useRef as useRef10 } from "react";
3789
- import { jsx as jsx6 } from "react/jsx-runtime";
4077
+ import { jsx as jsx7 } from "react/jsx-runtime";
4078
+ function esc(value) {
4079
+ return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
4080
+ }
4081
+ function safeUrl(raw) {
4082
+ const url = raw.trim();
4083
+ if (url.length === 0) return null;
4084
+ for (let i = 0; i < url.length; i++) {
4085
+ const code = url.charCodeAt(i);
4086
+ if (code <= 32 || code === 127) return null;
4087
+ }
4088
+ const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(url)?.[1]?.toLowerCase();
4089
+ if (scheme === void 0) return url;
4090
+ return scheme === "http" || scheme === "https" || scheme === "mailto" || scheme === "tel" ? url : null;
4091
+ }
3790
4092
  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>`;
3791
4093
  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>`;
3792
4094
  function inferCodeLanguage(code, lang) {
@@ -3811,7 +4113,15 @@ function handleCodeBlockClick(e, root) {
3811
4113
  () => flashCopied(btn, true)
3812
4114
  );
3813
4115
  }
3814
- function renderMarkdown(md) {
4116
+ function renderMarkdown(source, options = {}) {
4117
+ const md = source.replace(/\u0000/g, "");
4118
+ const inlines = [];
4119
+ const putAway = (html2) => {
4120
+ inlines.push(html2);
4121
+ return `\0INLINE${inlines.length - 1}\0`;
4122
+ };
4123
+ const plainAttr = (value) => value.replace(/\u0000[A-Z]*\d*\u0000?/g, "");
4124
+ const link = (url, label) => `<a href="${url}" target="_blank" rel="noopener noreferrer">${label}</a>`;
3815
4125
  const codeBlocks = [];
3816
4126
  const codeBlockPlaceholder = (i) => `\0CODEBLOCK${i}\0`;
3817
4127
  const body = md.replace(
@@ -3826,7 +4136,7 @@ function renderMarkdown(md) {
3826
4136
  const className = langLabel !== "code" ? ` class="language-${langLabel}"` : "";
3827
4137
  const trimmed = escaped.replace(/\n$/, "");
3828
4138
  codeBlocks.push(
3829
- `<div class="hw-code" data-hw-code="1"><div class="hw-code-header"><span class="hw-code-lang">${langLabel}</span><div class="hw-code-actions"><button type="button" class="hw-code-action hw-code-copy" aria-label="Copy code" title="Copy code">${COPY_ICON}${CHECK_ICON}<span class="hw-code-copy-label">Copy</span></button></div></div><pre><code${className}>${trimmed}</code></pre></div>`
4139
+ `<div class="hw-code" data-hw-code="1"><div class="hw-code-header"><span class="hw-code-lang">${langLabel}</span><div class="hw-code-actions"><button type="button" class="hw-code-action hw-code-copy" aria-label="${esc(t("widget.code_copy_aria"))}" title="${esc(t("widget.code_copy_aria"))}">${COPY_ICON}${CHECK_ICON}<span class="hw-code-copy-label">${esc(t("widget.code_copy"))}</span></button></div></div><pre><code${className}>${trimmed}</code></pre></div>`
3830
4140
  );
3831
4141
  return `
3832
4142
 
@@ -3835,12 +4145,18 @@ ${codeBlockPlaceholder(codeBlocks.length - 1)}
3835
4145
  `;
3836
4146
  }
3837
4147
  );
3838
- let html = body.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/^### (.+)$/gm, "<h3>$1</h3>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^# (.+)$/gm, "<h1>$1</h1>").replace(/^---$/gm, "<hr />").replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/`([^`]+)`/g, "<code>$1</code>").replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" />').replace(
3839
- /\[([^\]]+)\]\(([^)]+)\)/g,
3840
- '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
3841
- ).replace(
3842
- /(?<!")(?<!=)(https?:\/\/[^\s<)]+)/g,
3843
- '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
4148
+ let html = body.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/^### (.+)$/gm, "<h3>$1</h3>").replace(/^## (.+)$/gm, "<h2>$1</h2>").replace(/^# (.+)$/gm, "<h1>$1</h1>").replace(/^---$/gm, "<hr />").replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>").replace(/\*(.+?)\*/g, "<em>$1</em>").replace(/`([^`]+)`/g, "<code>$1</code>").replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, src) => {
4149
+ const url = safeUrl(src);
4150
+ if (url === null) return alt;
4151
+ return putAway(
4152
+ options.images === "link" ? link(url, alt.length > 0 ? alt : url) : `<img src="${url}" alt="${plainAttr(alt)}" />`
4153
+ );
4154
+ }).replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label, href) => {
4155
+ const url = safeUrl(href);
4156
+ return url === null ? label : putAway(link(url, label));
4157
+ }).replace(
4158
+ /(?<!&quot;)(https?:\/\/(?:(?!&quot;)[^\s<)\u0000])+)/g,
4159
+ (_match, url) => putAway(link(url, url))
3844
4160
  ).replace(/^&gt; (.+)$/gm, "<blockquote>$1</blockquote>").replace(/^[*-] (.+)$/gm, "<li>$1</li>").replace(/^\d+\. (.+)$/gm, "<oli>$1</oli>");
3845
4161
  const tables = [];
3846
4162
  const tablePlaceholder = (i) => `\0TABLE${i}\0`;
@@ -3850,7 +4166,9 @@ ${codeBlockPlaceholder(codeBlocks.length - 1)}
3850
4166
  (_match, headerLine, bodyLines) => {
3851
4167
  const cells = (line) => line.trim().replace(/^\||\|$/g, "").split("|").map((c) => c.trim());
3852
4168
  const head = cells(headerLine).map((c) => `<th>${c}</th>`).join("");
3853
- const rows = bodyLines.trim().split("\n").map((line) => `<tr>${cells(line).map((c) => `<td>${c}</td>`).join("")}</tr>`).join("");
4169
+ const rows = bodyLines.trim().split("\n").map(
4170
+ (line) => `<tr>${cells(line).map((c) => `<td>${c}</td>`).join("")}</tr>`
4171
+ ).join("");
3854
4172
  tables.push(
3855
4173
  `<div class="hw-table-wrap"><table class="hw-table"><thead><tr>${head}</tr></thead><tbody>${rows}</tbody></table></div>`
3856
4174
  );
@@ -3887,11 +4205,16 @@ ${tablePlaceholder(tables.length - 1)}
3887
4205
  });
3888
4206
  html = html.replace(/<p>(\s*<div class="hw-code"[\s\S]*?<\/div>\s*)<\/p>/g, "$1");
3889
4207
  }
4208
+ for (let depth = 0; depth < 4 && html.includes("\0INLINE"); depth++) {
4209
+ html = html.replace(/\u0000INLINE(\d+)\u0000/g, (_m, idx) => {
4210
+ return inlines[Number.parseInt(idx, 10)] ?? "";
4211
+ });
4212
+ }
3890
4213
  return html;
3891
4214
  }
3892
4215
  function linkifyText(text) {
3893
- return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(
3894
- /(https?:\/\/[^\s<]+)/g,
4216
+ return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(
4217
+ /(https?:\/\/(?:(?!&quot;)[^\s<])+)/g,
3895
4218
  '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
3896
4219
  ).replace(/\n/g, "<br />");
3897
4220
  }
@@ -3906,9 +4229,7 @@ function MarkdownContent({
3906
4229
  const root = rootRef.current;
3907
4230
  if (!root) return;
3908
4231
  const isWhitespaceOnly = (el) => {
3909
- const hasNonBrChild = Array.from(el.children).some(
3910
- (c) => c.tagName !== "BR"
3911
- );
4232
+ const hasNonBrChild = Array.from(el.children).some((c) => c.tagName !== "BR");
3912
4233
  if (hasNonBrChild) return false;
3913
4234
  const text = el.textContent ?? "";
3914
4235
  return text.replace(/[\s ]/g, "") === "";
@@ -3933,7 +4254,7 @@ function MarkdownContent({
3933
4254
  };
3934
4255
  }, []);
3935
4256
  if (!html) return null;
3936
- return /* @__PURE__ */ jsx6(
4257
+ return /* @__PURE__ */ jsx7(
3937
4258
  "div",
3938
4259
  {
3939
4260
  ref: rootRef,
@@ -3945,8 +4266,8 @@ function MarkdownContent({
3945
4266
  function flashCopied(btn, failed = false) {
3946
4267
  const label = btn.querySelector(".hw-code-copy-label");
3947
4268
  if (!label) return;
3948
- const original = label.textContent ?? "Copy";
3949
- label.textContent = failed ? "Failed" : "Copied";
4269
+ const original = label.textContent ?? t("widget.code_copy");
4270
+ label.textContent = failed ? t("widget.code_copy_failed") : t("widget.copied");
3950
4271
  btn.classList.add(failed ? "hw-code-copy--failed" : "hw-code-copy--copied");
3951
4272
  setTimeout(() => {
3952
4273
  label.textContent = original;
@@ -3963,24 +4284,24 @@ function closeDanglingMarkdown(partial) {
3963
4284
  }
3964
4285
 
3965
4286
  // src/themed/content/content-detail-view.tsx
3966
- import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
4287
+ import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
3967
4288
  function ContentDetailView({
3968
4289
  entry,
3969
4290
  isLoading
3970
4291
  }) {
3971
4292
  if (isLoading || !entry) {
3972
- return /* @__PURE__ */ jsx7(ArticleSkeleton, {});
4293
+ return /* @__PURE__ */ jsx8(ArticleSkeleton, {});
3973
4294
  }
3974
4295
  const badge = entry.customFields.version ?? entry.customFields.priority ?? entry.customFields.type ?? null;
3975
- return /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail", children: [
3976
- /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail-header", children: [
3977
- /* @__PURE__ */ jsx7("h1", { className: "hw-content-detail-title", children: entry.title }),
3978
- (badge || entry.publishedAt) && /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail-meta", children: [
3979
- badge && /* @__PURE__ */ jsx7("span", { className: "hw-content-entry-badge", children: badge }),
3980
- entry.publishedAt && /* @__PURE__ */ jsx7("span", { className: "hw-content-detail-date", children: formatRelativeTime(entry.publishedAt) })
4296
+ return /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail", children: [
4297
+ /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-header", children: [
4298
+ /* @__PURE__ */ jsx8("h1", { className: "hw-content-detail-title", children: entry.title }),
4299
+ (badge || entry.publishedAt) && /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-meta", children: [
4300
+ badge && /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-badge", children: badge }),
4301
+ entry.publishedAt && /* @__PURE__ */ jsx8("span", { className: "hw-content-detail-date", children: formatRelativeTime(entry.publishedAt) })
3981
4302
  ] })
3982
4303
  ] }),
3983
- (entry.body || entry.bodyHtml) && /* @__PURE__ */ jsx7("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx7(MarkdownContent, { bodyHtml: entry.bodyHtml, bodyMarkdown: entry.body }) })
4304
+ (entry.body || entry.bodyHtml) && /* @__PURE__ */ jsx8("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx8(MarkdownContent, { bodyHtml: entry.bodyHtml, bodyMarkdown: entry.body }) })
3984
4305
  ] });
3985
4306
  }
3986
4307
  function ArticleSkeleton() {
@@ -4001,15 +4322,15 @@ function ArticleSkeleton() {
4001
4322
  ]
4002
4323
  }
4003
4324
  ];
4004
- return /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail", children: [
4005
- /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail-header", children: [
4006
- /* @__PURE__ */ jsx7("h1", { className: "hw-content-detail-title", children: /* @__PURE__ */ jsx7("span", { className: "hw-skeleton hw-skeleton-title" }) }),
4007
- /* @__PURE__ */ jsxs5("div", { className: "hw-content-detail-meta", children: [
4008
- /* @__PURE__ */ jsx7("span", { className: "hw-skeleton hw-skeleton-badge" }),
4009
- /* @__PURE__ */ jsx7("span", { className: "hw-skeleton hw-skeleton-date" })
4325
+ return /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail", children: [
4326
+ /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-header", children: [
4327
+ /* @__PURE__ */ jsx8("h1", { className: "hw-content-detail-title", children: /* @__PURE__ */ jsx8("span", { className: "hw-skeleton hw-skeleton-title" }) }),
4328
+ /* @__PURE__ */ jsxs6("div", { className: "hw-content-detail-meta", children: [
4329
+ /* @__PURE__ */ jsx8("span", { className: "hw-skeleton hw-skeleton-badge" }),
4330
+ /* @__PURE__ */ jsx8("span", { className: "hw-skeleton hw-skeleton-date" })
4010
4331
  ] })
4011
4332
  ] }),
4012
- /* @__PURE__ */ jsx7("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx7("div", { className: "hw-markdown", children: sections.map((s, i) => /* @__PURE__ */ jsx7(
4333
+ /* @__PURE__ */ jsx8("div", { className: "hw-content-detail-body", children: /* @__PURE__ */ jsx8("div", { className: "hw-markdown", children: sections.map((s, i) => /* @__PURE__ */ jsx8(
4013
4334
  SkeletonSection,
4014
4335
  {
4015
4336
  headerWidth: s.headerWidth,
@@ -4023,23 +4344,23 @@ function SkeletonSection({
4023
4344
  headerWidth,
4024
4345
  items
4025
4346
  }) {
4026
- return /* @__PURE__ */ jsxs5(Fragment2, { children: [
4027
- /* @__PURE__ */ jsx7("h2", { children: /* @__PURE__ */ jsx7(
4347
+ return /* @__PURE__ */ jsxs6(Fragment2, { children: [
4348
+ /* @__PURE__ */ jsx8("h2", { children: /* @__PURE__ */ jsx8(
4028
4349
  "span",
4029
4350
  {
4030
4351
  className: "hw-skeleton hw-skeleton-h2",
4031
4352
  style: { display: "block", width: headerWidth }
4032
4353
  }
4033
4354
  ) }),
4034
- items.map((item, j) => /* @__PURE__ */ jsx7("ul", { children: /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs5("div", { className: "hw-skeleton-bullet-lines", children: [
4035
- /* @__PURE__ */ jsx7(
4355
+ items.map((item, j) => /* @__PURE__ */ jsx8("ul", { children: /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsxs6("div", { className: "hw-skeleton-bullet-lines", children: [
4356
+ /* @__PURE__ */ jsx8(
4036
4357
  "span",
4037
4358
  {
4038
4359
  className: "hw-skeleton hw-skeleton-bullet-line",
4039
4360
  style: { display: "block", width: item.l1 }
4040
4361
  }
4041
4362
  ),
4042
- /* @__PURE__ */ jsx7(
4363
+ /* @__PURE__ */ jsx8(
4043
4364
  "span",
4044
4365
  {
4045
4366
  className: "hw-skeleton hw-skeleton-bullet-line",
@@ -4052,7 +4373,7 @@ function SkeletonSection({
4052
4373
 
4053
4374
  // src/themed/content/content-list-view.tsx
4054
4375
  import { useCallback as useCallback11, useRef as useRef11, useState as useState11 } from "react";
4055
- import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
4376
+ import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
4056
4377
  function ContentListView({
4057
4378
  entries,
4058
4379
  isLoading,
@@ -4076,13 +4397,13 @@ function ContentListView({
4076
4397
  },
4077
4398
  [onSearch]
4078
4399
  );
4079
- return /* @__PURE__ */ jsxs6("div", { className: "hw-content-list", children: [
4080
- onSearch && /* @__PURE__ */ jsx8("div", { className: "hw-content-search", children: /* @__PURE__ */ jsxs6("div", { className: "hw-content-search-box", children: [
4081
- /* @__PURE__ */ jsxs6("svg", { className: "hw-content-search-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
4082
- /* @__PURE__ */ jsx8("circle", { cx: "11", cy: "11", r: "8" }),
4083
- /* @__PURE__ */ jsx8("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
4400
+ return /* @__PURE__ */ jsxs7("div", { className: "hw-content-list", children: [
4401
+ onSearch && /* @__PURE__ */ jsx9("div", { className: "hw-content-search", children: /* @__PURE__ */ jsxs7("div", { className: "hw-content-search-box", children: [
4402
+ /* @__PURE__ */ jsxs7("svg", { className: "hw-content-search-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
4403
+ /* @__PURE__ */ jsx9("circle", { cx: "11", cy: "11", r: "8" }),
4404
+ /* @__PURE__ */ jsx9("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
4084
4405
  ] }),
4085
- /* @__PURE__ */ jsx8(
4406
+ /* @__PURE__ */ jsx9(
4086
4407
  "input",
4087
4408
  {
4088
4409
  type: "text",
@@ -4093,18 +4414,18 @@ function ContentListView({
4093
4414
  }
4094
4415
  )
4095
4416
  ] }) }),
4096
- isLoading && entries.length === 0 && /* @__PURE__ */ jsx8("div", { className: "hw-skeleton-content", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs6("div", { className: "hw-skeleton-content-item", children: [
4097
- /* @__PURE__ */ jsx8("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "70%", height: 14 } }),
4098
- /* @__PURE__ */ jsx8("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "90%", height: 12 } }),
4099
- /* @__PURE__ */ jsx8("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "40%", height: 10 } })
4417
+ isLoading && entries.length === 0 && /* @__PURE__ */ jsx9("div", { className: "hw-skeleton-content", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs7("div", { className: "hw-skeleton-content-item", children: [
4418
+ /* @__PURE__ */ jsx9("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "70%", height: 14 } }),
4419
+ /* @__PURE__ */ jsx9("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "90%", height: 12 } }),
4420
+ /* @__PURE__ */ jsx9("div", { className: "hw-skeleton hw-skeleton-line", style: { width: "40%", height: 10 } })
4100
4421
  ] }, i)) }),
4101
- !isLoading && entries.length === 0 && /* @__PURE__ */ jsxs6("div", { className: "hw-content-empty", children: [
4102
- /* @__PURE__ */ jsx8("div", { className: "hw-content-empty-title", children: searchText ? t("widget.no_results") : t("widget.nothing_yet") }),
4103
- /* @__PURE__ */ jsx8("div", { className: "hw-content-empty-desc", children: searchText ? t("widget.try_different") : t("widget.check_back") })
4422
+ !isLoading && entries.length === 0 && /* @__PURE__ */ jsxs7("div", { className: "hw-content-empty", children: [
4423
+ /* @__PURE__ */ jsx9("div", { className: "hw-content-empty-title", children: searchText ? t("widget.no_results") : t("widget.nothing_yet") }),
4424
+ /* @__PURE__ */ jsx9("div", { className: "hw-content-empty-desc", children: searchText ? t("widget.try_different") : t("widget.check_back") })
4104
4425
  ] }),
4105
- entries.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "hw-content-entries", children: [
4106
- entries.map((entry) => /* @__PURE__ */ jsx8(ContentEntryCard, { entry, onSelect, display }, entry.slug)),
4107
- hasMore && /* @__PURE__ */ jsx8(
4426
+ entries.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "hw-content-entries", children: [
4427
+ entries.map((entry) => /* @__PURE__ */ jsx9(ContentEntryCard, { entry, onSelect, display }, entry.slug)),
4428
+ hasMore && /* @__PURE__ */ jsx9(
4108
4429
  "button",
4109
4430
  {
4110
4431
  type: "button",
@@ -4131,16 +4452,16 @@ function ContentEntryCard({
4131
4452
  const badge = display?.badgeField ? customFields[display.badgeField] ?? null : customFields.version ?? customFields.priority ?? customFields.type ?? null;
4132
4453
  const subtitleValue = display?.subtitleField ? (display.subtitleField === "body" ? entry.body : customFields[display.subtitleField]) ?? null : customFields.excerpt ?? customFields.summary ?? customFields.description ?? null;
4133
4454
  const preview = subtitleValue ? truncateText(subtitleValue) : truncateText(entry.body);
4134
- return /* @__PURE__ */ jsx8("button", { type: "button", className: "hw-content-entry", onClick: () => onSelect(entry.slug), children: /* @__PURE__ */ jsxs6("div", { className: "hw-content-entry-main", children: [
4135
- /* @__PURE__ */ jsxs6("div", { className: "hw-content-entry-text", children: [
4136
- /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-title", children: entry.title }),
4137
- preview && /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-desc", children: preview }),
4138
- (badge || entry.publishedAt) && /* @__PURE__ */ jsxs6("div", { className: "hw-content-entry-meta", children: [
4139
- badge && /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-badge", children: badge }),
4140
- entry.publishedAt && /* @__PURE__ */ jsx8("span", { className: "hw-content-entry-date", children: formatRelativeTime(entry.publishedAt) })
4455
+ return /* @__PURE__ */ jsx9("button", { type: "button", className: "hw-content-entry", onClick: () => onSelect(entry.slug), children: /* @__PURE__ */ jsxs7("div", { className: "hw-content-entry-main", children: [
4456
+ /* @__PURE__ */ jsxs7("div", { className: "hw-content-entry-text", children: [
4457
+ /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-title", children: entry.title }),
4458
+ preview && /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-desc", children: preview }),
4459
+ (badge || entry.publishedAt) && /* @__PURE__ */ jsxs7("div", { className: "hw-content-entry-meta", children: [
4460
+ badge && /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-badge", children: badge }),
4461
+ entry.publishedAt && /* @__PURE__ */ jsx9("span", { className: "hw-content-entry-date", children: formatRelativeTime(entry.publishedAt) })
4141
4462
  ] })
4142
4463
  ] }),
4143
- /* @__PURE__ */ jsx8("svg", { className: "hw-content-entry-chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("polyline", { points: "9 18 15 12 9 6" }) })
4464
+ /* @__PURE__ */ jsx9("svg", { className: "hw-content-entry-chevron", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("polyline", { points: "9 18 15 12 9 6" }) })
4144
4465
  ] }) });
4145
4466
  }
4146
4467
 
@@ -4357,7 +4678,7 @@ function useGroupedContentTab(tabId) {
4357
4678
  }
4358
4679
 
4359
4680
  // src/themed/content/grouped-content-tab-view.tsx
4360
- import { jsx as jsx9 } from "react/jsx-runtime";
4681
+ import { jsx as jsx10 } from "react/jsx-runtime";
4361
4682
  function GroupedContentTabView({
4362
4683
  tab,
4363
4684
  subView,
@@ -4398,10 +4719,10 @@ function GroupedContentTabView({
4398
4719
  prevSubView.current = subView;
4399
4720
  }, [subView, clearCategory]);
4400
4721
  if (subView === "content-detail" && detailSlug) {
4401
- return /* @__PURE__ */ jsx9(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
4722
+ return /* @__PURE__ */ jsx10(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
4402
4723
  }
4403
4724
  if (subView === "content-category" && activeCategory) {
4404
- return /* @__PURE__ */ jsx9(
4725
+ return /* @__PURE__ */ jsx10(
4405
4726
  ContentListView,
4406
4727
  {
4407
4728
  entries: items,
@@ -4415,7 +4736,7 @@ function GroupedContentTabView({
4415
4736
  }
4416
4737
  );
4417
4738
  }
4418
- return /* @__PURE__ */ jsx9(
4739
+ return /* @__PURE__ */ jsx10(
4419
4740
  ContentListView,
4420
4741
  {
4421
4742
  entries: categories,
@@ -4437,7 +4758,7 @@ function GroupedContentTabView({
4437
4758
  }
4438
4759
 
4439
4760
  // src/themed/content/content-tab-view.tsx
4440
- import { jsx as jsx10 } from "react/jsx-runtime";
4761
+ import { jsx as jsx11 } from "react/jsx-runtime";
4441
4762
  function ContentTabView({
4442
4763
  tab,
4443
4764
  showDetail,
@@ -4447,7 +4768,7 @@ function ContentTabView({
4447
4768
  onSelectCategory
4448
4769
  }) {
4449
4770
  if (tab.tabType === "grouped" && tab.itemsModelSlug) {
4450
- return /* @__PURE__ */ jsx10(
4771
+ return /* @__PURE__ */ jsx11(
4451
4772
  GroupedContentTabView,
4452
4773
  {
4453
4774
  tab,
@@ -4459,7 +4780,7 @@ function ContentTabView({
4459
4780
  }
4460
4781
  );
4461
4782
  }
4462
- return /* @__PURE__ */ jsx10(
4783
+ return /* @__PURE__ */ jsx11(
4463
4784
  FlatContentTabView,
4464
4785
  {
4465
4786
  tab,
@@ -4495,9 +4816,9 @@ function FlatContentTabView({
4495
4816
  [fetchEntries]
4496
4817
  );
4497
4818
  if (showDetail && detailSlug) {
4498
- return /* @__PURE__ */ jsx10(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
4819
+ return /* @__PURE__ */ jsx11(ContentDetailView, { entry: detail, isLoading: isLoadingDetail });
4499
4820
  }
4500
- return /* @__PURE__ */ jsx10(
4821
+ return /* @__PURE__ */ jsx11(
4501
4822
  ContentListView,
4502
4823
  {
4503
4824
  entries,
@@ -4513,7 +4834,7 @@ function FlatContentTabView({
4513
4834
  }
4514
4835
 
4515
4836
  // src/themed/content/tab-icon.tsx
4516
- import { jsx as jsx11 } from "react/jsx-runtime";
4837
+ import { jsx as jsx12 } from "react/jsx-runtime";
4517
4838
  var ICON_MAP = {
4518
4839
  book: BookIcon,
4519
4840
  megaphone: MegaphoneIcon,
@@ -4524,12 +4845,12 @@ var ICON_MAP = {
4524
4845
  };
4525
4846
  function ContentTabIconComponent({ icon }) {
4526
4847
  const Icon = ICON_MAP[icon] ?? BookIcon;
4527
- return /* @__PURE__ */ jsx11(Icon, {});
4848
+ return /* @__PURE__ */ jsx12(Icon, {});
4528
4849
  }
4529
4850
 
4530
4851
  // src/themed/debug-overlay.tsx
4531
4852
  import { useEffect as useEffect12, useMemo as useMemo2, useRef as useRef14, useState as useState13 } from "react";
4532
- import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
4853
+ import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
4533
4854
  var MAX_EVENTS = 60;
4534
4855
  function isDebugEnabled() {
4535
4856
  if (typeof window === "undefined") return false;
@@ -4635,10 +4956,10 @@ function WidgetDebugOverlay() {
4635
4956
  if (!enabled) return null;
4636
4957
  const isTyping = activeId ? typingUsers.get(activeId) : false;
4637
4958
  const isAi = activeId ? aiProcessingMap.get(activeId) : false;
4638
- return /* @__PURE__ */ jsxs7("div", { style: styles.wrap, children: [
4639
- /* @__PURE__ */ jsxs7("div", { style: styles.header, children: [
4640
- /* @__PURE__ */ jsx12("strong", { children: "hw debug" }),
4641
- /* @__PURE__ */ jsxs7("span", { style: styles.meta, children: [
4959
+ return /* @__PURE__ */ jsxs8("div", { style: styles.wrap, children: [
4960
+ /* @__PURE__ */ jsxs8("div", { style: styles.header, children: [
4961
+ /* @__PURE__ */ jsx13("strong", { children: "hw debug" }),
4962
+ /* @__PURE__ */ jsxs8("span", { style: styles.meta, children: [
4642
4963
  " ",
4643
4964
  "\xB7 conv ",
4644
4965
  activeId ? activeId.slice(0, 10) : "\u2014",
@@ -4649,29 +4970,29 @@ function WidgetDebugOverlay() {
4649
4970
  " \xB7 ai ",
4650
4971
  isAi ? "Y" : "n"
4651
4972
  ] }),
4652
- /* @__PURE__ */ jsx12("button", { type: "button", style: styles.btn, onClick: () => setOpen((v) => !v), children: open ? "hide" : "show" }),
4653
- /* @__PURE__ */ jsx12("button", { type: "button", style: styles.btn, onClick: () => {
4973
+ /* @__PURE__ */ jsx13("button", { type: "button", style: styles.btn, onClick: () => setOpen((v) => !v), children: open ? "hide" : "show" }),
4974
+ /* @__PURE__ */ jsx13("button", { type: "button", style: styles.btn, onClick: () => {
4654
4975
  eventsRef.current = [];
4655
4976
  setEvents([]);
4656
4977
  }, children: "clear" })
4657
4978
  ] }),
4658
- open && /* @__PURE__ */ jsxs7("div", { style: styles.body, children: [
4659
- /* @__PURE__ */ jsxs7("div", { style: styles.section, children: [
4660
- /* @__PURE__ */ jsx12("div", { style: styles.sectionTitle, children: "messages (active)" }),
4661
- activeMessages.length === 0 ? /* @__PURE__ */ jsx12("div", { style: styles.empty, children: "empty" }) : activeMessages.map((m, i) => /* @__PURE__ */ jsxs7("div", { style: styles.row, children: [
4662
- /* @__PURE__ */ jsx12("span", { style: { ...styles.badge, background: colorFor(senderOf(m)) }, children: i }),
4663
- /* @__PURE__ */ jsx12("span", { style: styles.sender, children: senderOf(m) }),
4664
- /* @__PURE__ */ jsx12("span", { style: styles.ts, children: m.createdAt.slice(11, 23) }),
4665
- /* @__PURE__ */ jsx12("span", { style: styles.text, children: (m.text ?? "").slice(0, 60) })
4979
+ open && /* @__PURE__ */ jsxs8("div", { style: styles.body, children: [
4980
+ /* @__PURE__ */ jsxs8("div", { style: styles.section, children: [
4981
+ /* @__PURE__ */ jsx13("div", { style: styles.sectionTitle, children: "messages (active)" }),
4982
+ activeMessages.length === 0 ? /* @__PURE__ */ jsx13("div", { style: styles.empty, children: "empty" }) : activeMessages.map((m, i) => /* @__PURE__ */ jsxs8("div", { style: styles.row, children: [
4983
+ /* @__PURE__ */ jsx13("span", { style: { ...styles.badge, background: colorFor(senderOf(m)) }, children: i }),
4984
+ /* @__PURE__ */ jsx13("span", { style: styles.sender, children: senderOf(m) }),
4985
+ /* @__PURE__ */ jsx13("span", { style: styles.ts, children: m.createdAt.slice(11, 23) }),
4986
+ /* @__PURE__ */ jsx13("span", { style: styles.text, children: (m.text ?? "").slice(0, 60) })
4666
4987
  ] }, m.id))
4667
4988
  ] }),
4668
- /* @__PURE__ */ jsxs7("div", { style: styles.section, children: [
4669
- /* @__PURE__ */ jsx12("div", { style: styles.sectionTitle, children: "events" }),
4670
- 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: [
4671
- /* @__PURE__ */ jsx12("span", { style: { ...styles.badge, background: kindColor(e.kind) }, children: e.kind }),
4672
- /* @__PURE__ */ jsx12("span", { style: styles.ts, children: new Date(e.t).toISOString().slice(11, 23) }),
4673
- /* @__PURE__ */ jsx12("span", { style: styles.evLabel, children: e.label }),
4674
- e.detail && /* @__PURE__ */ jsx12("span", { style: styles.detail, children: e.detail })
4989
+ /* @__PURE__ */ jsxs8("div", { style: styles.section, children: [
4990
+ /* @__PURE__ */ jsx13("div", { style: styles.sectionTitle, children: "events" }),
4991
+ events.length === 0 ? /* @__PURE__ */ jsx13("div", { style: styles.empty, children: "no events yet \u2014 send a message" }) : events.map((e) => /* @__PURE__ */ jsxs8("div", { style: styles.row, children: [
4992
+ /* @__PURE__ */ jsx13("span", { style: { ...styles.badge, background: kindColor(e.kind) }, children: e.kind }),
4993
+ /* @__PURE__ */ jsx13("span", { style: styles.ts, children: new Date(e.t).toISOString().slice(11, 23) }),
4994
+ /* @__PURE__ */ jsx13("span", { style: styles.evLabel, children: e.label }),
4995
+ e.detail && /* @__PURE__ */ jsx13("span", { style: styles.detail, children: e.detail })
4675
4996
  ] }, e.id))
4676
4997
  ] })
4677
4998
  ] })
@@ -4774,9 +5095,9 @@ var styles = {
4774
5095
  };
4775
5096
 
4776
5097
  // src/themed/icons-local.tsx
4777
- import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
5098
+ import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
4778
5099
  function DotsIcon({ size = 24, ...props }) {
4779
- return /* @__PURE__ */ jsxs8(
5100
+ return /* @__PURE__ */ jsxs9(
4780
5101
  "svg",
4781
5102
  {
4782
5103
  width: size,
@@ -4787,18 +5108,459 @@ function DotsIcon({ size = 24, ...props }) {
4787
5108
  "aria-hidden": "true",
4788
5109
  ...props,
4789
5110
  children: [
4790
- /* @__PURE__ */ jsx13("circle", { cx: "5", cy: "12", r: "1.7", fill: "currentColor" }),
4791
- /* @__PURE__ */ jsx13("circle", { cx: "12", cy: "12", r: "1.7", fill: "currentColor" }),
4792
- /* @__PURE__ */ jsx13("circle", { cx: "19", cy: "12", r: "1.7", fill: "currentColor" })
5111
+ /* @__PURE__ */ jsx14("circle", { cx: "5", cy: "12", r: "1.7", fill: "currentColor" }),
5112
+ /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "1.7", fill: "currentColor" }),
5113
+ /* @__PURE__ */ jsx14("circle", { cx: "19", cy: "12", r: "1.7", fill: "currentColor" })
4793
5114
  ]
4794
5115
  }
4795
5116
  );
4796
5117
  }
4797
5118
 
4798
5119
  // src/themed/message-bubble.tsx
4799
- import { useEffect as useEffect13, useLayoutEffect, useRef as useRef15, useState as useState14 } from "react";
5120
+ import { useEffect as useEffect14, useLayoutEffect, useRef as useRef16, useState as useState15 } from "react";
5121
+
5122
+ // src/themed/image-fallback.ts
5123
+ function imageFileName(url) {
5124
+ try {
5125
+ const { pathname, host } = new URL(url);
5126
+ const last = pathname.split("/").filter(Boolean).pop();
5127
+ if (!last) return host;
5128
+ try {
5129
+ return decodeURIComponent(last);
5130
+ } catch {
5131
+ return last;
5132
+ }
5133
+ } catch {
5134
+ return url.split(/[?#]/)[0]?.split("/").filter(Boolean).pop() ?? url;
5135
+ }
5136
+ }
5137
+ function fileExt(name) {
5138
+ const dot = name.lastIndexOf(".");
5139
+ return dot > 0 ? name.slice(dot + 1).toLowerCase() : "";
5140
+ }
5141
+
5142
+ // ../types/src/link-preview.ts
5143
+ var FILE_ENDINGS = /* @__PURE__ */ new Set([
5144
+ "js",
5145
+ "jsx",
5146
+ "ts",
5147
+ "tsx",
5148
+ "mjs",
5149
+ "cjs",
5150
+ "css",
5151
+ "scss",
5152
+ "html",
5153
+ "htm",
5154
+ "json",
5155
+ "yaml",
5156
+ "yml",
5157
+ "toml",
5158
+ "xml",
5159
+ "txt",
5160
+ "log",
5161
+ "csv",
5162
+ "pdf",
5163
+ "png",
5164
+ "jpg",
5165
+ "jpeg",
5166
+ "gif",
5167
+ "svg",
5168
+ "webp",
5169
+ "php",
5170
+ "rb",
5171
+ "cpp",
5172
+ "exe",
5173
+ "lock",
5174
+ "map",
5175
+ "env",
5176
+ "md",
5177
+ "gz",
5178
+ "tar"
5179
+ ]);
5180
+ var FILE_MIDDLES = /* @__PURE__ */ new Set([
5181
+ "config",
5182
+ "spec",
5183
+ "test",
5184
+ "min",
5185
+ "d",
5186
+ "module",
5187
+ "stories",
5188
+ "setup",
5189
+ "types",
5190
+ "bundle",
5191
+ "schema"
5192
+ ]);
5193
+ var KNOWN_NAMES = /* @__PURE__ */ new Set(["asp.net", "ado.net", "vb.net"]);
5194
+ var DOT_LETTERS = /* @__PURE__ */ new Set(["\uA4F8", "\uA78F"]);
5195
+ var make = (source, flags) => new RegExp(source, flags);
5196
+ var one = (set) => make(`^[${set}]$`, "u");
5197
+ var engine;
5198
+ function patterns() {
5199
+ if (engine !== void 0) return engine;
5200
+ try {
5201
+ const lgc = "\\p{sc=Latn}\\p{sc=Grek}\\p{sc=Cyrl}\\p{sc=Zyyy}";
5202
+ engine = {
5203
+ /* Controls, line separators and the bidi controls: a space, not
5204
+ nothing, because they separated something. */
5205
+ control: make("[\\p{Cc}\\p{Zl}\\p{Zp}\\u202a-\\u202e\\u2066-\\u2069]", "gu"),
5206
+ invisible: make("[\\p{Cf}\\p{Me}\\p{Default_Ignorable_Code_Point}]", "gu"),
5207
+ looseMark: make(`(^|[${lgc}])\\p{Mn}+`, "gu"),
5208
+ anyMark: make("\\p{M}", "gu"),
5209
+ letter: one("\\p{L}"),
5210
+ modifier: one("\\p{Lm}"),
5211
+ digit: one("\\p{Nd}"),
5212
+ number: one("\\p{N}"),
5213
+ punctOrSymbol: one("\\p{P}\\p{S}"),
5214
+ /* Dashes and quotation marks are not drawn as a dot. */
5215
+ notAJoiner: one("\\p{Pd}\\p{Pi}\\p{Pf}"),
5216
+ latin: one("\\p{sc=Latn}"),
5217
+ greek: one("\\p{sc=Grek}"),
5218
+ cyrillic: one("\\p{sc=Cyrl}"),
5219
+ noSpace: one(
5220
+ "\\p{sc=Hani}\\p{sc=Hira}\\p{sc=Kana}\\p{sc=Hang}\\p{sc=Bopo}\\p{sc=Thai}\\p{sc=Laoo}\\p{sc=Khmr}\\p{sc=Mymr}\\p{sc=Tibt}"
5221
+ ),
5222
+ common: one("\\p{sc=Zyyy}\\p{sc=Zinh}"),
5223
+ tld: make("^\\p{L}{2,}$", "u"),
5224
+ ipv6Bracket: make("\\[[0-9a-f:.]*:[0-9a-f:.]*\\]", "g"),
5225
+ ipv6Bare: make("(^|[^\\p{L}\\p{N}:.])([0-9a-f:]{3,})(?![\\p{L}\\p{N}:.])", "gu")
5226
+ };
5227
+ } catch {
5228
+ engine = null;
5229
+ }
5230
+ return engine;
5231
+ }
5232
+ function foldPreviewText(value) {
5233
+ const rx = patterns();
5234
+ if (!rx) throw new Error("link-preview: no Unicode property support");
5235
+ return value.normalize("NFKC").replace(rx.control, " ").replace(rx.invisible, "").replace(rx.looseMark, "$1").replace(/\s+/g, " ").trim();
5236
+ }
5237
+ function cleanPreviewText(value, cap) {
5238
+ if (typeof value !== "string") return null;
5239
+ let text;
5240
+ try {
5241
+ text = foldPreviewText(value);
5242
+ } catch {
5243
+ return null;
5244
+ }
5245
+ if (!text) return null;
5246
+ return text.length > cap ? `${text.slice(0, cap - 1).trimEnd()}\u2026` : text;
5247
+ }
5248
+ var BREAK = { kind: "break", script: "common" };
5249
+ var seen = /* @__PURE__ */ new Map();
5250
+ function scriptOf(ch, rx) {
5251
+ if (rx.latin.test(ch)) return "latin";
5252
+ if (rx.noSpace.test(ch)) return "nospace";
5253
+ if (rx.cyrillic.test(ch)) return "cyrillic";
5254
+ if (rx.greek.test(ch)) return "greek";
5255
+ if (rx.common.test(ch)) return "common";
5256
+ return "other";
5257
+ }
5258
+ function read(ch, rx) {
5259
+ const code = ch.codePointAt(0) ?? 0;
5260
+ if (code < 128) {
5261
+ if (ch === ".") return { kind: "dot", script: "common" };
5262
+ if (ch === "-" || code >= 48 && code <= 57) return { kind: "word", script: "common" };
5263
+ if (code >= 97 && code <= 122) return { kind: "word", script: "latin" };
5264
+ return BREAK;
5265
+ }
5266
+ const known = seen.get(ch);
5267
+ if (known) return known;
5268
+ let out = BREAK;
5269
+ if (DOT_LETTERS.has(ch) || rx.modifier.test(ch)) out = { kind: "join", script: "common" };
5270
+ else if (rx.letter.test(ch)) out = { kind: "word", script: scriptOf(ch, rx) };
5271
+ else if (rx.digit.test(ch)) out = { kind: "join", script: "common" };
5272
+ else if (rx.number.test(ch)) out = { kind: "word", script: "common" };
5273
+ else if (rx.notAJoiner.test(ch)) out = BREAK;
5274
+ else if (rx.punctOrSymbol.test(ch)) out = { kind: "join", script: "common" };
5275
+ if (seen.size < 4096) seen.set(ch, out);
5276
+ return out;
5277
+ }
5278
+ function shapeOf(checked, rx) {
5279
+ const tokens = [];
5280
+ let mixed = false;
5281
+ let run = "";
5282
+ let letters = 0;
5283
+ let noSpaceLetters = 0;
5284
+ let piece = /* @__PURE__ */ new Set();
5285
+ const endPiece = () => {
5286
+ piece.delete("nospace");
5287
+ piece.delete("common");
5288
+ if (piece.size > 1) mixed = true;
5289
+ piece = /* @__PURE__ */ new Set();
5290
+ };
5291
+ const endRun = () => {
5292
+ if (!run) return;
5293
+ endPiece();
5294
+ if (/[^-]/.test(run)) {
5295
+ tokens.push({
5296
+ kind: "word",
5297
+ text: run,
5298
+ noSpace: letters > 0 && noSpaceLetters === letters,
5299
+ hasLetter: letters > 0
5300
+ });
5301
+ } else {
5302
+ tokens.push({ kind: "break", text: run, noSpace: false, hasLetter: false });
5303
+ }
5304
+ run = "";
5305
+ letters = 0;
5306
+ noSpaceLetters = 0;
5307
+ };
5308
+ for (const ch of checked) {
5309
+ const c = read(ch, rx);
5310
+ if (c.kind === "word") {
5311
+ run += ch;
5312
+ if (ch === "-") endPiece();
5313
+ else if (c.script !== "common") {
5314
+ letters++;
5315
+ if (c.script === "nospace") noSpaceLetters++;
5316
+ piece.add(c.script);
5317
+ }
5318
+ continue;
5319
+ }
5320
+ endRun();
5321
+ tokens.push({ kind: c.kind, text: ch, noSpace: false, hasLetter: false });
5322
+ }
5323
+ endRun();
5324
+ return { tokens, mixed };
5325
+ }
5326
+ function hostOf(labels, rx, asAddress) {
5327
+ const n = labels.length;
5328
+ if (n === 4 && labels.every((l) => /^\d{1,3}$/.test(l))) return labels.join(".");
5329
+ let end = n;
5330
+ if (!asAddress) {
5331
+ let file = false;
5332
+ while (end > 1 && FILE_ENDINGS.has(labels[end - 1] ?? "")) {
5333
+ end--;
5334
+ file = true;
5335
+ }
5336
+ while (file && end > 1 && FILE_MIDDLES.has(labels[end - 1] ?? "")) end--;
5337
+ }
5338
+ for (let i = end - 1; i >= 1; i--) {
5339
+ const ending = (labels[i] ?? "").split("-", 1)[0] ?? "";
5340
+ if (!rx.tld.test(ending)) continue;
5341
+ const host = [...labels.slice(0, i), ending].join(".");
5342
+ return KNOWN_NAMES.has(host) ? null : host;
5343
+ }
5344
+ return null;
5345
+ }
5346
+ function hostsNamedIn(text) {
5347
+ const rx = patterns();
5348
+ if (!rx) return [""];
5349
+ const checked = foldPreviewText(text).replace(rx.anyMark, "").toLowerCase();
5350
+ const out = /* @__PURE__ */ new Set();
5351
+ const { tokens, mixed } = shapeOf(checked, rx);
5352
+ if (mixed) out.add("");
5353
+ for (let i = 0; i < tokens.length; i++) {
5354
+ const first = tokens[i];
5355
+ if (!first || first.kind !== "word") continue;
5356
+ const labels = [first.text];
5357
+ let anyLetter = first.hasLetter;
5358
+ let j = i;
5359
+ for (; ; ) {
5360
+ const sep = tokens[j + 1];
5361
+ const next = tokens[j + 2];
5362
+ const here = tokens[j];
5363
+ if (!sep || !next || !here || next.kind !== "word") break;
5364
+ if (sep.kind === "break") break;
5365
+ if (sep.kind === "join" && here.noSpace && next.noSpace) break;
5366
+ labels.push(next.text);
5367
+ anyLetter ||= next.hasLetter;
5368
+ j += 2;
5369
+ }
5370
+ const before = tokens[i - 1]?.text;
5371
+ const host = labels.length > 1 ? hostOf(labels, rx, before === "@") : null;
5372
+ if (host) out.add(host);
5373
+ const colon = tokens[j + 1];
5374
+ const port = tokens[j + 2];
5375
+ if (!host && anyLetter && colon?.text === ":" && port && /^\d{1,5}$/.test(port.text)) {
5376
+ out.add(labels.join("."));
5377
+ }
5378
+ i = j;
5379
+ }
5380
+ for (let at = checked.indexOf("://"); at !== -1; at = checked.indexOf("://", at + 3)) {
5381
+ const rest = checked.slice(at + 3, at + 3 + 300);
5382
+ const authority = (rest.split(/[\s/?#]/, 1)[0] ?? "").split("@").pop() ?? "";
5383
+ const literal = /^\[[^\]]*\]/.exec(authority)?.[0];
5384
+ out.add(literal ?? authority.replace(/:\d*$/, ""));
5385
+ }
5386
+ for (const m of checked.matchAll(rx.ipv6Bracket)) out.add(m[0]);
5387
+ for (const m of checked.matchAll(rx.ipv6Bare)) {
5388
+ const literal = m[2] ?? "";
5389
+ const colons = literal.split(":").length - 1;
5390
+ if (/[0-9a-f]/.test(literal) && (literal.includes("::") || colons === 7)) out.add(literal);
5391
+ }
5392
+ return [...out];
5393
+ }
5394
+ function bare(host) {
5395
+ const h = host.toLowerCase();
5396
+ const bracketed = /^\[(.*)\](?::\d+)?$/.exec(h);
5397
+ if (bracketed) return bracketed[1] ?? "";
5398
+ if (h.split(":").length > 2) return h;
5399
+ return h.replace(/:\d+$/, "").replace(/\.$/, "").replace(/^www\./, "");
5400
+ }
5401
+ function sameSite(a, b) {
5402
+ const x = bare(a);
5403
+ const y = bare(b);
5404
+ if (!x || !y) return false;
5405
+ return x === y || x.endsWith(`.${y}`) || y.endsWith(`.${x}`);
5406
+ }
5407
+ function ascii(named) {
5408
+ if (/^[\x00-\x7f]*$/.test(named)) return named;
5409
+ try {
5410
+ return new URL(`https://${named}`).hostname;
5411
+ } catch {
5412
+ return null;
5413
+ }
5414
+ }
5415
+ function namesAnotherSite(text, realHost) {
5416
+ let named;
5417
+ try {
5418
+ named = hostsNamedIn(text);
5419
+ } catch {
5420
+ return true;
5421
+ }
5422
+ for (const host of named) {
5423
+ const form = host === "" ? null : ascii(host);
5424
+ if (form === null || !sameSite(form, realHost)) return true;
5425
+ }
5426
+ return false;
5427
+ }
5428
+ var PREVIEW_HOST_CAP = 40;
5429
+ function previewHost(url) {
5430
+ const host = url.host.replace(/^www\./, "");
5431
+ return host.length > PREVIEW_HOST_CAP ? `\u2026${host.slice(host.length - (PREVIEW_HOST_CAP - 1))}` : host;
5432
+ }
5433
+ function previewWords(url, raw, caps = { title: 160, description: 280 }) {
5434
+ const keep = (value, cap) => {
5435
+ if (typeof value !== "string" || namesAnotherSite(value, url.hostname)) return null;
5436
+ return cleanPreviewText(value, cap);
5437
+ };
5438
+ return {
5439
+ title: keep(raw.title, caps.title),
5440
+ description: keep(raw.description, caps.description)
5441
+ };
5442
+ }
5443
+ var PREVIEW_ICON_MAX_BYTES = 32 * 1024;
5444
+
5445
+ // src/themed/link-preview.ts
5446
+ function httpsOnly(value) {
5447
+ if (!value) return null;
5448
+ try {
5449
+ const url = new URL(value);
5450
+ return url.protocol === "https:" && !url.username && !url.password ? url.href : null;
5451
+ } catch {
5452
+ return null;
5453
+ }
5454
+ }
5455
+ function pictureOnly(image, title) {
5456
+ if (!image || !title) return image;
5457
+ let asked;
5458
+ try {
5459
+ asked = new URL(image).searchParams.get("title");
5460
+ } catch {
5461
+ return image;
5462
+ }
5463
+ if (!asked) return image;
5464
+ const fold = (v) => v.toLowerCase().replace(/\s+/g, " ").trim();
5465
+ const a = fold(asked);
5466
+ const t2 = fold(title);
5467
+ return a.length >= 4 && (t2.includes(a) || a.includes(t2)) ? null : image;
5468
+ }
5469
+ function linkPreviewView(preview) {
5470
+ let url;
5471
+ try {
5472
+ url = new URL(preview.url);
5473
+ } catch {
5474
+ return null;
5475
+ }
5476
+ if (url.protocol !== "http:" && url.protocol !== "https:" || url.username || url.password) {
5477
+ return null;
5478
+ }
5479
+ const { title, description } = previewWords(url, preview);
5480
+ if (!title && !description) return null;
5481
+ return {
5482
+ href: url.href,
5483
+ host: previewHost(url),
5484
+ title,
5485
+ description,
5486
+ image: pictureOnly(httpsOnly(preview.imageUrl), title),
5487
+ favicon: httpsOnly(preview.favicon)
5488
+ };
5489
+ }
5490
+
5491
+ // src/themed/message-bubble.tsx
4800
5492
  import { createPortal } from "react-dom";
4801
- import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
5493
+
5494
+ // src/themed/stream-reveal.ts
5495
+ import { useEffect as useEffect13, useRef as useRef15, useState as useState14 } from "react";
5496
+ var DRAIN_MS = 300;
5497
+ var MAX_CHAR_INTERVAL_MS = 5;
5498
+ var MAX_WORD_BACKUP = 24;
5499
+ var BARE_MARKER = /(?:^|\n)[ \t]*(?:\d+[.)]|[-*+]|#{1,6})$/;
5500
+ function whileArriving(text) {
5501
+ const trimmed = text.trimEnd();
5502
+ const marker = BARE_MARKER.exec(trimmed);
5503
+ return marker ? trimmed.slice(0, marker.index).trimEnd() : trimmed;
5504
+ }
5505
+ function advanceReveal(cursor, total, dtMs) {
5506
+ const backlog = total - cursor;
5507
+ if (backlog <= 0) return total;
5508
+ const interval = Math.min(MAX_CHAR_INTERVAL_MS, DRAIN_MS / backlog);
5509
+ return Math.min(total, cursor + dtMs / interval);
5510
+ }
5511
+ function wholeWords(text, cursor) {
5512
+ const end = Math.floor(cursor);
5513
+ if (end >= text.length) return text;
5514
+ if (end <= 0) return "";
5515
+ for (let i = end; i > 0 && end - i <= MAX_WORD_BACKUP; i--) {
5516
+ if (/\s/.test(text.charAt(i))) return text.slice(0, i);
5517
+ }
5518
+ if (end <= MAX_WORD_BACKUP) return "";
5519
+ const code = text.charCodeAt(end - 1);
5520
+ const splitsPair = code >= 55296 && code <= 56319;
5521
+ return text.slice(0, splitsPair ? end - 1 : end);
5522
+ }
5523
+ function prefersReducedMotion() {
5524
+ return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
5525
+ }
5526
+ function useStreamReveal(text, streaming) {
5527
+ const [paced, setPaced] = useState14(streaming);
5528
+ if (streaming && !paced) setPaced(true);
5529
+ const [shown, setShown] = useState14(streaming ? "" : text);
5530
+ const cursorRef = useRef15(shown.length);
5531
+ const shownRef = useRef15(shown);
5532
+ useEffect13(() => {
5533
+ if (!paced) return;
5534
+ const show = (next) => {
5535
+ if (next === shownRef.current) return;
5536
+ shownRef.current = next;
5537
+ setShown(next);
5538
+ };
5539
+ if (!text.startsWith(shownRef.current) || prefersReducedMotion()) {
5540
+ cursorRef.current = text.length;
5541
+ show(text);
5542
+ return;
5543
+ }
5544
+ if (cursorRef.current >= text.length) return;
5545
+ let frame = 0;
5546
+ let last = null;
5547
+ const step = (now) => {
5548
+ const dt = last === null ? 16 : now - last;
5549
+ last = now;
5550
+ cursorRef.current = advanceReveal(cursorRef.current, text.length, dt);
5551
+ show(wholeWords(text, cursorRef.current));
5552
+ if (cursorRef.current < text.length) frame = requestAnimationFrame(step);
5553
+ };
5554
+ frame = requestAnimationFrame(step);
5555
+ return () => cancelAnimationFrame(frame);
5556
+ }, [text, paced]);
5557
+ if (!paced) return { text, revealing: false, paced };
5558
+ const visible = text.startsWith(shown) ? shown : text;
5559
+ return { text: visible, revealing: visible.length < text.length, paced };
5560
+ }
5561
+
5562
+ // src/themed/message-bubble.tsx
5563
+ import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
4802
5564
  function MessageBubble({
4803
5565
  text,
4804
5566
  sender,
@@ -4808,10 +5570,16 @@ function MessageBubble({
4808
5570
  showAuthor,
4809
5571
  metadata,
4810
5572
  onQuickReplyTap,
4811
- streaming
5573
+ streaming,
5574
+ onReveal
4812
5575
  }) {
4813
5576
  const senderClass = `hw-msg--${sender}`;
4814
- const bubbleRef = useRef15(null);
5577
+ const bubbleRef = useRef16(null);
5578
+ const reveal = useStreamReveal(text, !!streaming);
5579
+ const live = !!streaming || reveal.revealing;
5580
+ useLayoutEffect(() => {
5581
+ if (reveal.paced && reveal.text.length > 0) onReveal?.();
5582
+ }, [reveal.text, reveal.paced, onReveal]);
4815
5583
  const imageParts = parts?.filter((p) => p.type === "image") ?? [];
4816
5584
  const fileParts = parts?.filter((p) => p.type === "file") ?? [];
4817
5585
  const linkPreviews = parts?.filter(
@@ -4821,7 +5589,7 @@ function MessageBubble({
4821
5589
  (p) => p.type === "source"
4822
5590
  ) ?? [];
4823
5591
  const hasText = text.length > 0;
4824
- useEffect13(() => {
5592
+ useEffect14(() => {
4825
5593
  const bubble = bubbleRef.current;
4826
5594
  if (!bubble || sender !== "ai" && sender !== "team") return;
4827
5595
  const handleClick = (event) => {
@@ -4832,23 +5600,32 @@ function MessageBubble({
4832
5600
  bubble.removeEventListener("click", handleClick);
4833
5601
  };
4834
5602
  }, [sender]);
4835
- return /* @__PURE__ */ jsx14("div", { className: `hw-msg ${senderClass}`, children: /* @__PURE__ */ jsxs9("div", { className: "hw-msg-body", children: [
4836
- imageParts.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hw-msg-images", children: imageParts.map((img, i) => /* @__PURE__ */ jsx14(PreviewableThumbnail, { src: img.url }, i)) }),
4837
- hasText && /* @__PURE__ */ jsxs9("div", { className: "hw-msg-bubble", ref: bubbleRef, children: [
4838
- sender === "ai" || sender === "team" ? /* @__PURE__ */ jsx14(
4839
- "span",
4840
- {
4841
- dangerouslySetInnerHTML: {
4842
- __html: renderMarkdown(streaming ? closeDanglingMarkdown(text) : text)
5603
+ return /* @__PURE__ */ jsx15("div", { className: `hw-msg ${senderClass}`, children: /* @__PURE__ */ jsxs10("div", { className: "hw-msg-body", children: [
5604
+ imageParts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-images", children: imageParts.map((img, i) => /* @__PURE__ */ jsx15(PreviewableThumbnail, { src: img.url }, i)) }),
5605
+ hasText && /* @__PURE__ */ jsx15(
5606
+ "div",
5607
+ {
5608
+ className: live ? "hw-msg-bubble hw-msg-bubble--live" : "hw-msg-bubble",
5609
+ ref: bubbleRef,
5610
+ children: sender === "ai" || sender === "team" ? /* @__PURE__ */ jsx15(
5611
+ "span",
5612
+ {
5613
+ dangerouslySetInnerHTML: {
5614
+ __html: renderMarkdown(
5615
+ live ? closeDanglingMarkdown(whileArriving(reveal.text)) : reveal.text,
5616
+ /* A message does not get to make the browser fetch an
5617
+ address of its choosing. See RenderMarkdownOptions. */
5618
+ { images: "link" }
5619
+ )
5620
+ }
4843
5621
  }
4844
- }
4845
- ) : /* @__PURE__ */ jsx14("span", { dangerouslySetInnerHTML: { __html: linkifyText(text) } }),
4846
- streaming && /* @__PURE__ */ jsx14("span", { className: "hw-streaming-cursor" })
4847
- ] }),
4848
- fileParts.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hw-msg-files", children: fileParts.map((file, i) => /* @__PURE__ */ jsx14(FileCard, { file }, i)) }),
4849
- linkPreviews.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hw-msg-links", children: linkPreviews.map((lp, i) => /* @__PURE__ */ jsx14(LinkPreviewCard, { preview: lp }, i)) }),
4850
- sources.length > 0 && /* @__PURE__ */ jsx14("div", { className: "hw-sources", children: sources.map(
4851
- (src, i) => src.sourceUrl ? /* @__PURE__ */ jsxs9(
5622
+ ) : /* @__PURE__ */ jsx15("span", { dangerouslySetInnerHTML: { __html: linkifyText(text) } })
5623
+ }
5624
+ ),
5625
+ fileParts.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-files", children: fileParts.map((file, i) => /* @__PURE__ */ jsx15(FileCard, { file }, i)) }),
5626
+ linkPreviews.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-msg-links", children: linkPreviews.map((lp, i) => /* @__PURE__ */ jsx15(LinkPreviewCard, { preview: lp }, i)) }),
5627
+ sources.length > 0 && /* @__PURE__ */ jsx15("div", { className: "hw-sources", children: sources.map(
5628
+ (src, i) => src.sourceUrl ? /* @__PURE__ */ jsxs10(
4852
5629
  "a",
4853
5630
  {
4854
5631
  href: src.sourceUrl,
@@ -4857,26 +5634,26 @@ function MessageBubble({
4857
5634
  className: "hw-source",
4858
5635
  onClick: (e) => e.stopPropagation(),
4859
5636
  children: [
4860
- /* @__PURE__ */ jsx14("span", { className: "hw-source-n", children: i + 1 }),
4861
- /* @__PURE__ */ jsx14("span", { className: "hw-source-title", children: src.title })
5637
+ /* @__PURE__ */ jsx15("span", { className: "hw-source-n", children: i + 1 }),
5638
+ /* @__PURE__ */ jsx15("span", { className: "hw-source-title", children: src.title })
4862
5639
  ]
4863
5640
  },
4864
5641
  src.knowledgeId
4865
- ) : /* @__PURE__ */ jsxs9("div", { className: "hw-source", children: [
4866
- /* @__PURE__ */ jsx14("span", { className: "hw-source-n", children: i + 1 }),
4867
- /* @__PURE__ */ jsx14("span", { className: "hw-source-title", children: src.title })
5642
+ ) : /* @__PURE__ */ jsxs10("div", { className: "hw-source", children: [
5643
+ /* @__PURE__ */ jsx15("span", { className: "hw-source-n", children: i + 1 }),
5644
+ /* @__PURE__ */ jsx15("span", { className: "hw-source-title", children: src.title })
4868
5645
  ] }, src.knowledgeId)
4869
5646
  ) }),
4870
- metadata?.kind === "quick_replies" && /* @__PURE__ */ jsx14(QuickReplyButtons, { metadata, onTap: onQuickReplyTap }),
5647
+ metadata?.kind === "quick_replies" && /* @__PURE__ */ jsx15(QuickReplyButtons, { metadata, onTap: onQuickReplyTap }),
4871
5648
  (() => {
4872
5649
  const isVisitor = sender === "visitor";
4873
5650
  const lead = isVisitor ? null : senderName ?? null;
4874
5651
  const withLead = (showAuthor ?? !!timestamp) && !!lead;
4875
5652
  if (!withLead && !timestamp) return null;
4876
- return /* @__PURE__ */ jsxs9("div", { className: "hw-msg-meta", children: [
4877
- withLead && /* @__PURE__ */ jsx14("span", { className: "hw-msg-author", children: lead }),
4878
- withLead && timestamp && /* @__PURE__ */ jsx14("span", { className: "hw-msg-meta-sep", children: "\xB7" }),
4879
- timestamp && /* @__PURE__ */ jsx14("span", { className: "hw-msg-time", children: timestamp })
5653
+ return /* @__PURE__ */ jsxs10("div", { className: "hw-msg-meta", children: [
5654
+ withLead && /* @__PURE__ */ jsx15("span", { className: "hw-msg-author", children: lead }),
5655
+ withLead && timestamp && /* @__PURE__ */ jsx15("span", { className: "hw-msg-meta-sep", children: "\xB7" }),
5656
+ timestamp && /* @__PURE__ */ jsx15("span", { className: "hw-msg-time", children: timestamp })
4880
5657
  ] });
4881
5658
  })()
4882
5659
  ] }) });
@@ -4885,21 +5662,21 @@ function QuickReplyButtons({
4885
5662
  metadata,
4886
5663
  onTap
4887
5664
  }) {
4888
- const [tappedId, setTappedId] = useState14(null);
5665
+ const [tappedId, setTappedId] = useState15(null);
4889
5666
  const isLocked = metadata.cancelled || tappedId !== null;
4890
5667
  const handleTap = (optionId) => {
4891
5668
  if (isLocked) return;
4892
5669
  setTappedId(optionId);
4893
5670
  onTap?.(optionId, metadata.stepId);
4894
5671
  };
4895
- return /* @__PURE__ */ jsx14(
5672
+ return /* @__PURE__ */ jsx15(
4896
5673
  "div",
4897
5674
  {
4898
5675
  className: "hw-quick-replies",
4899
5676
  "data-cancelled": metadata.cancelled ? "true" : void 0,
4900
5677
  children: metadata.options.map((opt) => {
4901
5678
  const isTapped = tappedId === opt.id;
4902
- return /* @__PURE__ */ jsx14(
5679
+ return /* @__PURE__ */ jsx15(
4903
5680
  "button",
4904
5681
  {
4905
5682
  type: "button",
@@ -4916,10 +5693,18 @@ function QuickReplyButtons({
4916
5693
  );
4917
5694
  }
4918
5695
  function PreviewableThumbnail({ src }) {
4919
- const [hover, setHover] = useState14(false);
4920
- const ref = useRef15(null);
4921
- return /* @__PURE__ */ jsxs9(Fragment3, { children: [
4922
- /* @__PURE__ */ jsx14(
5696
+ const [hover, setHover] = useState15(false);
5697
+ const [broken, setBroken] = useState15(false);
5698
+ const ref = useRef16(null);
5699
+ if (broken) {
5700
+ const name = imageFileName(src);
5701
+ return /* @__PURE__ */ jsxs10("a", { href: src, target: "_blank", rel: "noopener noreferrer", className: "hw-msg-file", children: [
5702
+ /* @__PURE__ */ jsx15("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx15(FileTypeIcon, { ext: fileExt(name) }) }),
5703
+ /* @__PURE__ */ jsx15("span", { className: "hw-msg-file-info", children: /* @__PURE__ */ jsx15("span", { className: "hw-msg-file-name", children: name }) })
5704
+ ] });
5705
+ }
5706
+ return /* @__PURE__ */ jsxs10(Fragment3, { children: [
5707
+ /* @__PURE__ */ jsx15(
4923
5708
  "a",
4924
5709
  {
4925
5710
  ref,
@@ -4930,21 +5715,21 @@ function PreviewableThumbnail({ src }) {
4930
5715
  "aria-label": t("widget.aria_open_image"),
4931
5716
  onMouseEnter: () => setHover(true),
4932
5717
  onMouseLeave: () => setHover(false),
4933
- children: /* @__PURE__ */ jsx14("img", { src, alt: "", className: "hw-msg-image", loading: "lazy" })
5718
+ children: /* @__PURE__ */ jsx15("img", { src, alt: "", className: "hw-msg-image", loading: "lazy", onError: () => setBroken(true) })
4934
5719
  }
4935
5720
  ),
4936
- hover && /* @__PURE__ */ jsx14(AnchoredPreview, { src, anchorRef: ref, href: src })
5721
+ hover && /* @__PURE__ */ jsx15(AnchoredPreview, { src, anchorRef: ref, href: src })
4937
5722
  ] });
4938
5723
  }
4939
5724
  var PREVIEWABLE_EXTS = /* @__PURE__ */ new Set(["pdf", "csv", "png", "jpg", "jpeg", "gif", "webp", "svg"]);
4940
5725
  function FileCard({ file }) {
4941
- const [hover, setHover] = useState14(false);
4942
- const ref = useRef15(null);
5726
+ const [hover, setHover] = useState15(false);
5727
+ const ref = useRef16(null);
4943
5728
  const ext = file.fileName.split(".").pop()?.toLowerCase() ?? "";
4944
5729
  const isPreviewable = PREVIEWABLE_EXTS.has(ext);
4945
5730
  const isImage = file.mimeType.startsWith("image/");
4946
- return /* @__PURE__ */ jsxs9(Fragment3, { children: [
4947
- /* @__PURE__ */ jsxs9(
5731
+ return /* @__PURE__ */ jsxs10(Fragment3, { children: [
5732
+ /* @__PURE__ */ jsxs10(
4948
5733
  "a",
4949
5734
  {
4950
5735
  ref,
@@ -4955,15 +5740,15 @@ function FileCard({ file }) {
4955
5740
  onMouseEnter: () => isPreviewable && setHover(true),
4956
5741
  onMouseLeave: () => setHover(false),
4957
5742
  children: [
4958
- /* @__PURE__ */ jsx14("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx14(FileTypeIcon, { ext }) }),
4959
- /* @__PURE__ */ jsxs9("span", { className: "hw-msg-file-info", children: [
4960
- /* @__PURE__ */ jsx14("span", { className: "hw-msg-file-name", children: file.fileName }),
4961
- /* @__PURE__ */ jsx14("span", { className: "hw-msg-file-size", children: formatFileSize(file.fileSize) })
5743
+ /* @__PURE__ */ jsx15("span", { className: "hw-msg-file-icon", children: /* @__PURE__ */ jsx15(FileTypeIcon, { ext }) }),
5744
+ /* @__PURE__ */ jsxs10("span", { className: "hw-msg-file-info", children: [
5745
+ /* @__PURE__ */ jsx15("span", { className: "hw-msg-file-name", children: file.fileName }),
5746
+ /* @__PURE__ */ jsx15("span", { className: "hw-msg-file-size", children: formatFileSize(file.fileSize) })
4962
5747
  ] })
4963
5748
  ]
4964
5749
  }
4965
5750
  ),
4966
- hover && isPreviewable && (isImage ? /* @__PURE__ */ jsx14(AnchoredPreview, { src: file.url, anchorRef: ref, href: file.url }) : /* @__PURE__ */ jsx14(AnchoredDocPreview, { fileName: file.fileName, ext, anchorRef: ref, href: file.url }))
5751
+ hover && isPreviewable && (isImage ? /* @__PURE__ */ jsx15(AnchoredPreview, { src: file.url, anchorRef: ref, href: file.url }) : /* @__PURE__ */ jsx15(AnchoredDocPreview, { fileName: file.fileName, ext, anchorRef: ref, href: file.url }))
4967
5752
  ] });
4968
5753
  }
4969
5754
  function AnchoredPreview({
@@ -4972,8 +5757,8 @@ function AnchoredPreview({
4972
5757
  href,
4973
5758
  onOpen
4974
5759
  }) {
4975
- const [style, setStyle] = useState14({ opacity: 0 });
4976
- const [portalTarget, setPortalTarget] = useState14(null);
5760
+ const [style, setStyle] = useState15({ opacity: 0 });
5761
+ const [portalTarget, setPortalTarget] = useState15(null);
4977
5762
  useLayoutEffect(() => {
4978
5763
  const anchor = anchorRef.current;
4979
5764
  if (!anchor) return;
@@ -4997,7 +5782,7 @@ function AnchoredPreview({
4997
5782
  };
4998
5783
  if (!portalTarget) return null;
4999
5784
  return createPortal(
5000
- /* @__PURE__ */ jsx14("div", { className: "hw-hover-preview", style, onClick: handleClick, children: /* @__PURE__ */ jsx14("img", { src, alt: "", className: "hw-hover-preview-img" }) }),
5785
+ /* @__PURE__ */ jsx15("div", { className: "hw-hover-preview", style, onClick: handleClick, children: /* @__PURE__ */ jsx15("img", { src, alt: "", className: "hw-hover-preview-img" }) }),
5001
5786
  portalTarget
5002
5787
  );
5003
5788
  }
@@ -5007,8 +5792,8 @@ function AnchoredDocPreview({
5007
5792
  anchorRef,
5008
5793
  href
5009
5794
  }) {
5010
- const [style, setStyle] = useState14({ opacity: 0 });
5011
- const [portalTarget, setPortalTarget] = useState14(null);
5795
+ const [style, setStyle] = useState15({ opacity: 0 });
5796
+ const [portalTarget, setPortalTarget] = useState15(null);
5012
5797
  useLayoutEffect(() => {
5013
5798
  const anchor = anchorRef.current;
5014
5799
  if (!anchor) return;
@@ -5028,17 +5813,17 @@ function AnchoredDocPreview({
5028
5813
  }, [anchorRef]);
5029
5814
  if (!portalTarget) return null;
5030
5815
  return createPortal(
5031
- /* @__PURE__ */ jsxs9(
5816
+ /* @__PURE__ */ jsxs10(
5032
5817
  "div",
5033
5818
  {
5034
5819
  className: "hw-hover-preview hw-hover-preview--doc",
5035
5820
  style,
5036
5821
  onClick: () => window.open(href, "_blank", "noopener,noreferrer"),
5037
5822
  children: [
5038
- /* @__PURE__ */ jsx14("div", { className: "hw-hover-preview-doc-icon", children: /* @__PURE__ */ jsx14(FileTypeIcon, { ext }) }),
5039
- /* @__PURE__ */ jsxs9("div", { className: "hw-hover-preview-doc-info", children: [
5040
- /* @__PURE__ */ jsx14("span", { className: "hw-hover-preview-doc-name", children: fileName }),
5041
- /* @__PURE__ */ jsx14("span", { className: "hw-hover-preview-doc-hint", children: t("widget.click_to_open") })
5823
+ /* @__PURE__ */ jsx15("div", { className: "hw-hover-preview-doc-icon", children: /* @__PURE__ */ jsx15(FileTypeIcon, { ext }) }),
5824
+ /* @__PURE__ */ jsxs10("div", { className: "hw-hover-preview-doc-info", children: [
5825
+ /* @__PURE__ */ jsx15("span", { className: "hw-hover-preview-doc-name", children: fileName }),
5826
+ /* @__PURE__ */ jsx15("span", { className: "hw-hover-preview-doc-hint", children: t("widget.click_to_open") })
5042
5827
  ] })
5043
5828
  ]
5044
5829
  }
@@ -5063,7 +5848,7 @@ var FILE_TYPE_COLORS = {
5063
5848
  };
5064
5849
  function FileTypeIcon({ ext }) {
5065
5850
  const color = FILE_TYPE_COLORS[ext] ?? "currentColor";
5066
- return /* @__PURE__ */ jsxs9(
5851
+ return /* @__PURE__ */ jsxs10(
5067
5852
  "svg",
5068
5853
  {
5069
5854
  viewBox: "0 0 24 24",
@@ -5073,60 +5858,60 @@ function FileTypeIcon({ ext }) {
5073
5858
  strokeLinecap: "round",
5074
5859
  strokeLinejoin: "round",
5075
5860
  children: [
5076
- /* @__PURE__ */ jsx14("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
5077
- /* @__PURE__ */ jsx14("polyline", { points: "14 2 14 8 20 8" }),
5078
- ext === "pdf" && /* @__PURE__ */ jsx14("text", { x: "8", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "PDF" }),
5079
- ext === "csv" && /* @__PURE__ */ jsx14("text", { x: "7", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "CSV" })
5861
+ /* @__PURE__ */ jsx15("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
5862
+ /* @__PURE__ */ jsx15("polyline", { points: "14 2 14 8 20 8" }),
5863
+ ext === "pdf" && /* @__PURE__ */ jsx15("text", { x: "8", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "PDF" }),
5864
+ ext === "csv" && /* @__PURE__ */ jsx15("text", { x: "7", y: "18", fontSize: "6", fill: color, stroke: "none", fontWeight: "700", children: "CSV" })
5080
5865
  ]
5081
5866
  }
5082
5867
  );
5083
5868
  }
5084
5869
  function LinkPreviewCard({ preview }) {
5085
- const hostname = (() => {
5086
- try {
5087
- return new URL(preview.url).hostname;
5088
- } catch {
5089
- return preview.url;
5090
- }
5091
- })();
5092
- return /* @__PURE__ */ jsxs9(
5870
+ const view = linkPreviewView(preview);
5871
+ const [imageFailed, setImageFailed] = useState15(false);
5872
+ const [faviconFailed, setFaviconFailed] = useState15(false);
5873
+ if (!view) return null;
5874
+ return /* @__PURE__ */ jsxs10(
5093
5875
  "a",
5094
5876
  {
5095
- href: preview.url,
5877
+ href: view.href,
5096
5878
  target: "_blank",
5097
5879
  rel: "noopener noreferrer",
5098
5880
  className: "hw-link-preview",
5099
5881
  onClick: (e) => e.stopPropagation(),
5100
5882
  children: [
5101
- preview.imageUrl && /* @__PURE__ */ jsx14(
5883
+ view.image && !imageFailed && /* @__PURE__ */ jsx15(
5102
5884
  "img",
5103
5885
  {
5104
- src: preview.imageUrl,
5886
+ src: view.image,
5105
5887
  alt: "",
5106
5888
  className: "hw-link-preview-img",
5107
5889
  loading: "lazy",
5108
- onError: (e) => {
5109
- e.target.style.display = "none";
5110
- }
5890
+ decoding: "async",
5891
+ referrerPolicy: "no-referrer",
5892
+ onError: () => setImageFailed(true)
5111
5893
  }
5112
5894
  ),
5113
- /* @__PURE__ */ jsxs9("div", { className: "hw-link-preview-body", children: [
5114
- preview.favicon && /* @__PURE__ */ jsx14(
5115
- "img",
5116
- {
5117
- src: preview.favicon,
5118
- alt: "",
5119
- className: "hw-link-preview-favicon",
5120
- width: 16,
5121
- height: 16,
5122
- onError: (e) => {
5123
- e.target.style.display = "none";
5895
+ /* @__PURE__ */ jsxs10("div", { className: "hw-link-preview-body", children: [
5896
+ /* @__PURE__ */ jsxs10("div", { className: "hw-link-preview-url", children: [
5897
+ view.favicon && !faviconFailed && /* @__PURE__ */ jsx15(
5898
+ "img",
5899
+ {
5900
+ src: view.favicon,
5901
+ alt: "",
5902
+ className: "hw-link-preview-favicon",
5903
+ width: 14,
5904
+ height: 14,
5905
+ loading: "lazy",
5906
+ decoding: "async",
5907
+ referrerPolicy: "no-referrer",
5908
+ onError: () => setFaviconFailed(true)
5124
5909
  }
5125
- }
5126
- ),
5127
- preview.title && /* @__PURE__ */ jsx14("div", { className: "hw-link-preview-title", children: preview.title }),
5128
- preview.description && /* @__PURE__ */ jsx14("div", { className: "hw-link-preview-desc", children: preview.description.slice(0, 120) }),
5129
- /* @__PURE__ */ jsx14("div", { className: "hw-link-preview-url", children: hostname })
5910
+ ),
5911
+ /* @__PURE__ */ jsx15("span", { className: "hw-link-preview-host", children: view.host })
5912
+ ] }),
5913
+ view.title && /* @__PURE__ */ jsx15("div", { className: "hw-link-preview-title", dir: "auto", children: view.title }),
5914
+ view.description && /* @__PURE__ */ jsx15("div", { className: "hw-link-preview-desc", dir: "auto", children: view.description })
5130
5915
  ] })
5131
5916
  ]
5132
5917
  }
@@ -5134,8 +5919,8 @@ function LinkPreviewCard({ preview }) {
5134
5919
  }
5135
5920
 
5136
5921
  // src/themed/message-list.tsx
5137
- import React, { useEffect as useEffect14, useRef as useRef16 } from "react";
5138
- import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
5922
+ import React, { useEffect as useEffect15, useRef as useRef17 } from "react";
5923
+ import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
5139
5924
  function parseParts(raw) {
5140
5925
  if (!raw) return null;
5141
5926
  if (Array.isArray(raw)) return raw;
@@ -5169,12 +5954,12 @@ function MessageList({
5169
5954
  onLoadMore,
5170
5955
  renderAfterMessages
5171
5956
  }) {
5172
- const bottomRef = useRef16(null);
5173
- const topRef = useRef16(null);
5174
- const containerRef = useRef16(null);
5175
- const prevItemCountRef = useRef16(items.length);
5176
- const isInitialLoadRef = useRef16(true);
5177
- const hadStreamRef = useRef16(false);
5957
+ const bottomRef = useRef17(null);
5958
+ const topRef = useRef17(null);
5959
+ const containerRef = useRef17(null);
5960
+ const prevItemCountRef = useRef17(items.length);
5961
+ const isInitialLoadRef = useRef17(true);
5962
+ const hadStreamRef = useRef17(false);
5178
5963
  const client = useWidgetClient();
5179
5964
  const activeConversationId = useWidgetStore((s) => s.activeConversationId);
5180
5965
  const handleQuickReplyTap = React.useCallback(
@@ -5186,7 +5971,7 @@ function MessageList({
5186
5971
  },
5187
5972
  [client, activeConversationId]
5188
5973
  );
5189
- useEffect14(() => {
5974
+ useEffect15(() => {
5190
5975
  const prevCount = prevItemCountRef.current;
5191
5976
  const newCount = items.length;
5192
5977
  prevItemCountRef.current = newCount;
@@ -5202,18 +5987,21 @@ function MessageList({
5202
5987
  isInitialLoadRef.current = false;
5203
5988
  }
5204
5989
  }, [items]);
5205
- useEffect14(() => {
5990
+ useEffect15(() => {
5206
5991
  if (streamingText) {
5207
5992
  bottomRef.current?.scrollIntoView({ behavior: "instant" });
5208
5993
  }
5209
5994
  hadStreamRef.current = !!streamingText;
5210
5995
  }, [streamingText]);
5211
- useEffect14(() => {
5996
+ const followReveal = React.useCallback(() => {
5997
+ bottomRef.current?.scrollIntoView({ behavior: "instant" });
5998
+ }, []);
5999
+ useEffect15(() => {
5212
6000
  if (isTyping || isAiProcessing) {
5213
6001
  bottomRef.current?.scrollIntoView({ behavior: "smooth" });
5214
6002
  }
5215
6003
  }, [isTyping, isAiProcessing]);
5216
- useEffect14(() => {
6004
+ useEffect15(() => {
5217
6005
  if (!hasMore || !onLoadMore || !topRef.current) return;
5218
6006
  const observer = new IntersectionObserver(
5219
6007
  (entries) => {
@@ -5236,16 +6024,16 @@ function MessageList({
5236
6024
  return () => observer.disconnect();
5237
6025
  }, [hasMore, onLoadMore, isLoadingMore]);
5238
6026
  if (items.length === 0) {
5239
- return /* @__PURE__ */ jsx15(
6027
+ return /* @__PURE__ */ jsx16(
5240
6028
  "div",
5241
6029
  {
5242
6030
  className: "hw-messages",
5243
6031
  role: "log",
5244
6032
  "aria-label": t("widget.aria_messages"),
5245
6033
  "aria-live": "polite",
5246
- children: /* @__PURE__ */ jsxs10("div", { className: "hw-empty", children: [
5247
- /* @__PURE__ */ jsx15("div", { className: "hw-empty-icon", children: /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx15("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) }),
5248
- /* @__PURE__ */ jsx15("div", { className: "hw-empty-text", children: t("widget.start_a_conversation") })
6034
+ children: /* @__PURE__ */ jsxs11("div", { className: "hw-empty", children: [
6035
+ /* @__PURE__ */ jsx16("div", { className: "hw-empty-icon", children: /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx16("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }) }) }),
6036
+ /* @__PURE__ */ jsx16("div", { className: "hw-empty-text", children: t("widget.start_a_conversation") })
5249
6037
  ] })
5250
6038
  }
5251
6039
  );
@@ -5255,7 +6043,7 @@ function MessageList({
5255
6043
  const yesterday = /* @__PURE__ */ new Date();
5256
6044
  yesterday.setDate(yesterday.getDate() - 1);
5257
6045
  const yesterdayKey = DATE_KEY_FMT.format(yesterday);
5258
- return /* @__PURE__ */ jsxs10(
6046
+ return /* @__PURE__ */ jsxs11(
5259
6047
  "div",
5260
6048
  {
5261
6049
  ref: containerRef,
@@ -5264,15 +6052,15 @@ function MessageList({
5264
6052
  "aria-label": t("widget.aria_messages"),
5265
6053
  "aria-live": "polite",
5266
6054
  children: [
5267
- /* @__PURE__ */ jsx15("div", { ref: topRef, className: "hw-load-more-trigger", children: isLoadingMore && /* @__PURE__ */ jsxs10("div", { className: "hw-load-more-spinner", children: [
5268
- /* @__PURE__ */ jsx15("div", {}),
5269
- /* @__PURE__ */ jsx15("div", {}),
5270
- /* @__PURE__ */ jsx15("div", {})
6055
+ /* @__PURE__ */ jsx16("div", { ref: topRef, className: "hw-load-more-trigger", children: isLoadingMore && /* @__PURE__ */ jsxs11("div", { className: "hw-load-more-spinner", children: [
6056
+ /* @__PURE__ */ jsx16("div", {}),
6057
+ /* @__PURE__ */ jsx16("div", {}),
6058
+ /* @__PURE__ */ jsx16("div", {})
5271
6059
  ] }) }),
5272
6060
  [
5273
6061
  ...items.map((item) => {
5274
6062
  if (item.type === "event") {
5275
- return /* @__PURE__ */ jsx15(
6063
+ return /* @__PURE__ */ jsx16(
5276
6064
  EventCard,
5277
6065
  {
5278
6066
  text: item.text ?? ""
@@ -5287,16 +6075,16 @@ function MessageList({
5287
6075
  const showDateSep = isNewBucket && dateKey !== todayKey;
5288
6076
  const dateLabel = dateKey === yesterdayKey ? t("widget.yesterday") : displayDateFormatter(getLocale()).format(itemDate);
5289
6077
  const sender = item.visitorId ? "visitor" : item.aiAgentId ? "ai" : "team";
5290
- return /* @__PURE__ */ jsxs10(
6078
+ return /* @__PURE__ */ jsxs11(
5291
6079
  React.Fragment,
5292
6080
  {
5293
6081
  children: [
5294
- showDateSep && /* @__PURE__ */ jsxs10("div", { className: "hw-date-sep", children: [
5295
- /* @__PURE__ */ jsx15("div", { className: "hw-date-sep-line" }),
5296
- /* @__PURE__ */ jsx15("div", { className: "hw-date-sep-text", children: dateLabel }),
5297
- /* @__PURE__ */ jsx15("div", { className: "hw-date-sep-line" })
6082
+ showDateSep && /* @__PURE__ */ jsxs11("div", { className: "hw-date-sep", children: [
6083
+ /* @__PURE__ */ jsx16("div", { className: "hw-date-sep-line" }),
6084
+ /* @__PURE__ */ jsx16("div", { className: "hw-date-sep-text", children: dateLabel }),
6085
+ /* @__PURE__ */ jsx16("div", { className: "hw-date-sep-line" })
5298
6086
  ] }),
5299
- /* @__PURE__ */ jsx15(
6087
+ /* @__PURE__ */ jsx16(
5300
6088
  MessageBubble,
5301
6089
  {
5302
6090
  text: item.text ?? "",
@@ -5305,7 +6093,8 @@ function MessageList({
5305
6093
  metadata: parseTimelineItemMetadata(
5306
6094
  item.metadata
5307
6095
  ),
5308
- onQuickReplyTap: handleQuickReplyTap
6096
+ onQuickReplyTap: handleQuickReplyTap,
6097
+ onReveal: followReveal
5309
6098
  }
5310
6099
  )
5311
6100
  ]
@@ -5328,19 +6117,28 @@ function MessageList({
5328
6117
  its place, .hw-msg replayed hw-msg-appear (styles.css:1326), and the
5329
6118
  answer visibly animated in a second time just as it finished. */
5330
6119
  ...streamingText && activeConversationId ? [
5331
- /* @__PURE__ */ jsxs10(React.Fragment, { children: [
6120
+ /* @__PURE__ */ jsxs11(React.Fragment, { children: [
5332
6121
  null,
5333
- /* @__PURE__ */ jsx15(MessageBubble, { text: streamingText, sender: "ai", parts: null, streaming: true })
6122
+ /* @__PURE__ */ jsx16(
6123
+ MessageBubble,
6124
+ {
6125
+ text: streamingText,
6126
+ sender: "ai",
6127
+ parts: null,
6128
+ streaming: true,
6129
+ onReveal: followReveal
6130
+ }
6131
+ )
5334
6132
  ] }, streamingKeyFor(activeConversationId))
5335
6133
  ] : []
5336
6134
  ],
5337
6135
  renderAfterMessages,
5338
- (isAiProcessing || isTyping) && !streamingText && /* @__PURE__ */ jsx15("div", { className: "hw-typing", children: /* @__PURE__ */ jsxs10("div", { className: "hw-typing-dots", children: [
5339
- /* @__PURE__ */ jsx15("div", { className: "hw-typing-dot" }),
5340
- /* @__PURE__ */ jsx15("div", { className: "hw-typing-dot" }),
5341
- /* @__PURE__ */ jsx15("div", { className: "hw-typing-dot" })
6136
+ (isAiProcessing || isTyping) && !streamingText && /* @__PURE__ */ jsx16("div", { className: "hw-typing", children: /* @__PURE__ */ jsxs11("div", { className: "hw-typing-dots", children: [
6137
+ /* @__PURE__ */ jsx16("div", { className: "hw-typing-dot" }),
6138
+ /* @__PURE__ */ jsx16("div", { className: "hw-typing-dot" }),
6139
+ /* @__PURE__ */ jsx16("div", { className: "hw-typing-dot" })
5342
6140
  ] }) }),
5343
- /* @__PURE__ */ jsx15("div", { ref: bottomRef })
6141
+ /* @__PURE__ */ jsx16("div", { ref: bottomRef })
5344
6142
  ]
5345
6143
  }
5346
6144
  );
@@ -5358,8 +6156,8 @@ function EventCard({ text }) {
5358
6156
  const data = parseEventData(text);
5359
6157
  if (data) {
5360
6158
  const message = data.action === "joined" ? t("widget.joined") : t("widget.left");
5361
- return /* @__PURE__ */ jsxs10("div", { className: "hw-event hw-event--card", children: [
5362
- /* @__PURE__ */ jsx15("div", { className: "hw-event-avatar", children: data.image ? /* @__PURE__ */ jsx15(
6159
+ return /* @__PURE__ */ jsxs11("div", { className: "hw-event hw-event--card", children: [
6160
+ /* @__PURE__ */ jsx16("div", { className: "hw-event-avatar", children: data.image ? /* @__PURE__ */ jsx16(
5363
6161
  "img",
5364
6162
  {
5365
6163
  src: data.image,
@@ -5367,20 +6165,20 @@ function EventCard({ text }) {
5367
6165
  className: "hw-event-avatar-img",
5368
6166
  referrerPolicy: "no-referrer"
5369
6167
  }
5370
- ) : /* @__PURE__ */ jsx15("span", { children: getInitials(data.name) }) }),
5371
- /* @__PURE__ */ jsxs10("div", { className: "hw-event-body", children: [
5372
- /* @__PURE__ */ jsx15("span", { className: "hw-event-name", children: data.name }),
6168
+ ) : /* @__PURE__ */ jsx16("span", { children: getInitials(data.name) }) }),
6169
+ /* @__PURE__ */ jsxs11("div", { className: "hw-event-body", children: [
6170
+ /* @__PURE__ */ jsx16("span", { className: "hw-event-name", children: data.name }),
5373
6171
  " ",
5374
- /* @__PURE__ */ jsx15("span", { className: "hw-event-action", children: message })
6172
+ /* @__PURE__ */ jsx16("span", { className: "hw-event-action", children: message })
5375
6173
  ] })
5376
6174
  ] });
5377
6175
  }
5378
- return /* @__PURE__ */ jsx15("div", { className: "hw-event", children: /* @__PURE__ */ jsx15("div", { className: "hw-event-text", children: text }) });
6176
+ return /* @__PURE__ */ jsx16("div", { className: "hw-event", children: /* @__PURE__ */ jsx16("div", { className: "hw-event-text", children: text }) });
5379
6177
  }
5380
6178
 
5381
6179
  // src/themed/message-preview.tsx
5382
- import { useEffect as useEffect15, useState as useState15 } from "react";
5383
- import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
6180
+ import { useEffect as useEffect16, useState as useState16 } from "react";
6181
+ import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
5384
6182
  function MessagePreview({
5385
6183
  onOpen,
5386
6184
  avatar,
@@ -5395,8 +6193,8 @@ function MessagePreview({
5395
6193
  const client = useWidgetClient();
5396
6194
  const senderName = preview?.senderName || agentName;
5397
6195
  const senderImage = preview?.senderImage || null;
5398
- const [closing, setClosing] = useState15(false);
5399
- useEffect15(() => {
6196
+ const [closing, setClosing] = useState16(false);
6197
+ useEffect16(() => {
5400
6198
  if (!preview || preview.quickReplies) return;
5401
6199
  if (autoDismissMs == null || autoDismissMs <= 0) return;
5402
6200
  const timer = setTimeout(() => {
@@ -5437,7 +6235,7 @@ function MessagePreview({
5437
6235
  );
5438
6236
  const qr = preview.quickReplies && preview.quickReplies.options.length > 0 ? preview.quickReplies : null;
5439
6237
  const placementClass = placement === "anchored" ? "hw-preview--anchored " : "";
5440
- return /* @__PURE__ */ jsxs11(
6238
+ return /* @__PURE__ */ jsxs12(
5441
6239
  "div",
5442
6240
  {
5443
6241
  className: `hw-preview ${placementClass}${closing ? "hw-preview--closing" : ""}`,
@@ -5451,17 +6249,17 @@ function MessagePreview({
5451
6249
  role: "button",
5452
6250
  tabIndex: 0,
5453
6251
  children: [
5454
- /* @__PURE__ */ jsxs11("div", { className: "hw-preview-header", children: [
5455
- /* @__PURE__ */ jsx16("div", { className: "hw-preview-avatar", children: senderImage ? /* @__PURE__ */ jsx16("img", { src: senderImage, alt: "", referrerPolicy: "no-referrer" }) : avatar }),
5456
- /* @__PURE__ */ jsx16("div", { className: "hw-preview-name", children: senderName }),
5457
- /* @__PURE__ */ jsx16(
6252
+ /* @__PURE__ */ jsxs12("div", { className: "hw-preview-header", children: [
6253
+ /* @__PURE__ */ jsx17("div", { className: "hw-preview-avatar", children: senderImage ? /* @__PURE__ */ jsx17("img", { src: senderImage, alt: "", referrerPolicy: "no-referrer" }) : avatar }),
6254
+ /* @__PURE__ */ jsx17("div", { className: "hw-preview-name", children: senderName }),
6255
+ /* @__PURE__ */ jsx17(
5458
6256
  "button",
5459
6257
  {
5460
6258
  type: "button",
5461
6259
  className: "hw-preview-close",
5462
6260
  onClick: handleClose,
5463
6261
  "aria-label": t("widget.aria_dismiss"),
5464
- children: /* @__PURE__ */ jsx16(XIcon, { size: 20 })
6262
+ children: /* @__PURE__ */ jsx17(XIcon, { size: 20 })
5465
6263
  }
5466
6264
  )
5467
6265
  ] }),
@@ -5470,11 +6268,11 @@ function MessagePreview({
5470
6268
  consecutive messages, so two identical ones would already be a bug
5471
6269
  upstream, and an index key hands React the wrong bubble to reuse the
5472
6270
  moment a new message lands mid-animation. */
5473
- /* @__PURE__ */ jsx16("div", { className: "hw-preview-body", children: truncatePreviewBody(m.text) }, m.text)
6271
+ /* @__PURE__ */ jsx17("div", { className: "hw-preview-body", children: truncatePreviewBody(m.text) }, m.text)
5474
6272
  )),
5475
- qr && /* @__PURE__ */ jsxs11(Fragment4, { children: [
5476
- qr.prompt && /* @__PURE__ */ jsx16("div", { className: "hw-preview-body", children: qr.prompt }),
5477
- /* @__PURE__ */ jsx16("div", { className: "hw-preview-quick-replies hw-quick-replies", children: qr.options.map((opt) => /* @__PURE__ */ jsx16(
6273
+ qr && /* @__PURE__ */ jsxs12(Fragment4, { children: [
6274
+ qr.prompt && /* @__PURE__ */ jsx17("div", { className: "hw-preview-body", children: qr.prompt }),
6275
+ /* @__PURE__ */ jsx17("div", { className: "hw-preview-quick-replies hw-quick-replies", children: qr.options.map((opt) => /* @__PURE__ */ jsx17(
5478
6276
  "button",
5479
6277
  {
5480
6278
  type: "button",
@@ -5488,14 +6286,92 @@ function MessagePreview({
5488
6286
  opt.id
5489
6287
  )) })
5490
6288
  ] }),
5491
- footer != null && footer !== false && /* @__PURE__ */ jsx16("div", { className: "hw-preview-footer", children: footer })
6289
+ footer != null && footer !== false && /* @__PURE__ */ jsx17("div", { className: "hw-preview-footer", children: footer })
5492
6290
  ]
5493
6291
  }
5494
6292
  );
5495
6293
  }
5496
6294
 
6295
+ // src/themed/resolved-banner.tsx
6296
+ import { useId, useState as useState17 } from "react";
6297
+
6298
+ // src/themed/resolved-rating.ts
6299
+ function asCsatRating(value) {
6300
+ return value === "good" || value === "bad" ? value : null;
6301
+ }
6302
+ async function saveRating(client, store, conversationId, rating) {
6303
+ try {
6304
+ await client.widget.sendCsat.mutate({ conversationId, rating });
6305
+ } catch {
6306
+ return false;
6307
+ }
6308
+ store.setState((s) => ({
6309
+ conversations: s.conversations.map(
6310
+ (c) => c.id === conversationId ? { ...c, csatRating: rating } : c
6311
+ )
6312
+ }));
6313
+ return true;
6314
+ }
6315
+
6316
+ // src/themed/resolved-banner.tsx
6317
+ import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
6318
+ var OPTIONS = [
6319
+ { value: "good", labelKey: "widget.aria_good", Icon: ThumbsUpIcon },
6320
+ { value: "bad", labelKey: "widget.aria_bad", Icon: ThumbsDownIcon }
6321
+ ];
6322
+ function ResolvedBlock({
6323
+ rating,
6324
+ failed = false,
6325
+ onRate
6326
+ }) {
6327
+ const labelId = useId();
6328
+ return /* @__PURE__ */ jsxs13("div", { className: "hw-resolved", children: [
6329
+ /* @__PURE__ */ jsxs13("div", { className: "hw-resolved-status", role: "status", children: [
6330
+ /* @__PURE__ */ jsx18(CheckCircleIcon, { size: 16 }),
6331
+ /* @__PURE__ */ jsx18("span", { children: t("widget.resolved_text") })
6332
+ ] }),
6333
+ /* @__PURE__ */ jsxs13("div", { className: "hw-csat", role: "group", "aria-labelledby": labelId, children: [
6334
+ /* @__PURE__ */ jsx18("span", { className: "hw-csat-label", id: labelId, children: rating ? t("widget.csat_thanks") : t("widget.csat_label") }),
6335
+ /* @__PURE__ */ jsx18("span", { className: "hw-csat-buttons", children: OPTIONS.filter((o) => !rating || o.value === rating).map(({ value, labelKey, Icon }) => /* @__PURE__ */ jsxs13(
6336
+ "button",
6337
+ {
6338
+ type: "button",
6339
+ className: "hw-csat-btn",
6340
+ "aria-pressed": rating === value,
6341
+ "aria-disabled": rating ? true : void 0,
6342
+ onClick: rating ? void 0 : () => onRate(value),
6343
+ children: [
6344
+ /* @__PURE__ */ jsx18(Icon, { size: 14 }),
6345
+ t(labelKey)
6346
+ ]
6347
+ },
6348
+ value
6349
+ )) })
6350
+ ] }),
6351
+ failed && !rating && /* @__PURE__ */ jsx18("div", { className: "hw-csat-error", role: "alert", children: t("widget.csat_error") })
6352
+ ] });
6353
+ }
6354
+ function ResolvedBanner({ conversationId }) {
6355
+ const { client, store } = useWidgetContext();
6356
+ const saved = useWidgetStore(
6357
+ (s) => asCsatRating(s.conversations.find((c) => c.id === conversationId)?.csatRating)
6358
+ );
6359
+ const [pending, setPending] = useState17(null);
6360
+ const [failed, setFailed] = useState17(false);
6361
+ const rate = (rating) => {
6362
+ setPending(rating);
6363
+ setFailed(false);
6364
+ void saveRating(client, store, conversationId, rating).then((ok) => {
6365
+ if (ok) return;
6366
+ setPending(null);
6367
+ setFailed(true);
6368
+ });
6369
+ };
6370
+ return /* @__PURE__ */ jsx18(ResolvedBlock, { rating: saved ?? pending, failed, onRate: rate });
6371
+ }
6372
+
5497
6373
  // src/themed/default-widget.tsx
5498
- import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
6374
+ import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
5499
6375
  function resolveLabel2(label) {
5500
6376
  if (!label.startsWith("widget.")) return label;
5501
6377
  const resolved = t(label);
@@ -5507,7 +6383,7 @@ var EMPTY_CONTENT_TABS = [];
5507
6383
  var DEFAULT_EN_WELCOME = "Hi there \u{1F44B}\nHow can we help?";
5508
6384
  var DEFAULT_EN_SUBTITLE = "Usually replies in minutes";
5509
6385
  function HelpwayMark({ className }) {
5510
- return /* @__PURE__ */ jsx17(
6386
+ return /* @__PURE__ */ jsx19(
5511
6387
  "svg",
5512
6388
  {
5513
6389
  className,
@@ -5517,7 +6393,7 @@ function HelpwayMark({ className }) {
5517
6393
  fill: "none",
5518
6394
  xmlns: "http://www.w3.org/2000/svg",
5519
6395
  "aria-hidden": "true",
5520
- children: /* @__PURE__ */ jsx17(
6396
+ children: /* @__PURE__ */ jsx19(
5521
6397
  "path",
5522
6398
  {
5523
6399
  d: "M28.7 0H12.8L0 12.8V28.7L12.8 41.5H28.7L41.5 28.7V12.8L28.7 0ZM15 28.9L6.80002 20.7L15 12.5C18.1 9.4 23.2 9.4 26.3 12.5L34.5 20.7L26.3 28.9C23.2 32 18.2 32 15 28.9Z",
@@ -5544,7 +6420,7 @@ function WidgetLogo({
5544
6420
  });
5545
6421
  const logoClass = forceAgent ? "hw-agent-img--logo" : "";
5546
6422
  if (!forceAgent && activeId && assignee?.assigneeImage) {
5547
- return /* @__PURE__ */ jsx17(
6423
+ return /* @__PURE__ */ jsx19(
5548
6424
  "img",
5549
6425
  {
5550
6426
  src: assignee.assigneeImage,
@@ -5555,7 +6431,7 @@ function WidgetLogo({
5555
6431
  );
5556
6432
  }
5557
6433
  if (customAvatar) {
5558
- return /* @__PURE__ */ jsx17(
6434
+ return /* @__PURE__ */ jsx19(
5559
6435
  "span",
5560
6436
  {
5561
6437
  className: `hw-agent-icon hw-agent-custom ${className ?? ""}`,
@@ -5565,7 +6441,7 @@ function WidgetLogo({
5565
6441
  );
5566
6442
  }
5567
6443
  if (agentConfig?.avatarUrl) {
5568
- return /* @__PURE__ */ jsx17(
6444
+ return /* @__PURE__ */ jsx19(
5569
6445
  "img",
5570
6446
  {
5571
6447
  src: agentConfig.avatarUrl,
@@ -5575,7 +6451,7 @@ function WidgetLogo({
5575
6451
  );
5576
6452
  }
5577
6453
  if (agentConfig?.avatarPreset) {
5578
- return /* @__PURE__ */ jsx17(
6454
+ return /* @__PURE__ */ jsx19(
5579
6455
  "div",
5580
6456
  {
5581
6457
  className: `hw-agent-icon ${className ?? ""}`,
@@ -5586,20 +6462,20 @@ function WidgetLogo({
5586
6462
  justifyContent: "center",
5587
6463
  borderRadius: 8
5588
6464
  },
5589
- children: /* @__PURE__ */ jsx17(AgentPresetIcon, { presetId: agentConfig.avatarPreset })
6465
+ children: /* @__PURE__ */ jsx19(AgentPresetIcon, { presetId: agentConfig.avatarPreset })
5590
6466
  }
5591
6467
  );
5592
6468
  }
5593
6469
  if (logoUrl) {
5594
- return /* @__PURE__ */ jsx17("img", { src: logoUrl, alt: "", className: `hw-agent-img hw-agent-img--logo ${className ?? ""}` });
6470
+ return /* @__PURE__ */ jsx19("img", { src: logoUrl, alt: "", className: `hw-agent-img hw-agent-img--logo ${className ?? ""}` });
5595
6471
  }
5596
- return /* @__PURE__ */ jsx17(HelpwayMark, { className });
6472
+ return /* @__PURE__ */ jsx19(HelpwayMark, { className });
5597
6473
  }
5598
6474
  function LauncherIcon({ className }) {
5599
6475
  const agentConfig = useWidgetStore((s) => s.agentConfig);
5600
- const [imgLoaded, setImgLoaded] = useState16(false);
6476
+ const [imgLoaded, setImgLoaded] = useState18(false);
5601
6477
  const imgSrc = agentConfig?.launcherIconUrl ?? null;
5602
- useEffect16(() => {
6478
+ useEffect17(() => {
5603
6479
  if (!imgSrc) return;
5604
6480
  setImgLoaded(false);
5605
6481
  const img = new Image();
@@ -5612,7 +6488,7 @@ function LauncherIcon({ className }) {
5612
6488
  img.onerror = () => setImgLoaded(true);
5613
6489
  }, [imgSrc]);
5614
6490
  if (imgSrc) {
5615
- return /* @__PURE__ */ jsx17(
6491
+ return /* @__PURE__ */ jsx19(
5616
6492
  "img",
5617
6493
  {
5618
6494
  src: imgSrc,
@@ -5622,7 +6498,7 @@ function LauncherIcon({ className }) {
5622
6498
  }
5623
6499
  );
5624
6500
  }
5625
- return /* @__PURE__ */ jsx17(WidgetLogo, { className, forceAgent: true });
6501
+ return /* @__PURE__ */ jsx19(WidgetLogo, { className, forceAgent: true });
5626
6502
  }
5627
6503
  var PRESET_SVG = {
5628
6504
  // Helpway brand mark — octagonal chamfer with stylized "W" inside.
@@ -5681,7 +6557,7 @@ function AgentPresetIcon({ presetId }) {
5681
6557
  const svgContent = PRESET_SVG[presetId] ?? PRESET_SVG.sparkle;
5682
6558
  return (
5683
6559
  // biome-ignore lint: trusted static SVG content from our icon library
5684
- /* @__PURE__ */ jsx17(
6560
+ /* @__PURE__ */ jsx19(
5685
6561
  "svg",
5686
6562
  {
5687
6563
  viewBox: "0 0 24 24",
@@ -5694,8 +6570,8 @@ function AgentPresetIcon({ presetId }) {
5694
6570
  );
5695
6571
  }
5696
6572
  function CloseGlyph({ docked }) {
5697
- if (!docked) return /* @__PURE__ */ jsx17(XIcon, { size: 20 });
5698
- return /* @__PURE__ */ jsx17(
6573
+ if (!docked) return /* @__PURE__ */ jsx19(XIcon, { size: 20 });
6574
+ return /* @__PURE__ */ jsx19(
5699
6575
  "svg",
5700
6576
  {
5701
6577
  width: "20",
@@ -5707,7 +6583,7 @@ function CloseGlyph({ docked }) {
5707
6583
  strokeLinecap: "round",
5708
6584
  strokeLinejoin: "round",
5709
6585
  "aria-hidden": "true",
5710
- children: /* @__PURE__ */ jsx17("path", { d: "M6 9.5 12 15.5 18 9.5" })
6586
+ children: /* @__PURE__ */ jsx19("path", { d: "M6 9.5 12 15.5 18 9.5" })
5711
6587
  }
5712
6588
  );
5713
6589
  }
@@ -5720,7 +6596,15 @@ function DefaultWidget({
5720
6596
  const { isReady, website, agentConfig } = useWidget();
5721
6597
  const customAvatar = useContext2(AgentAvatarContext);
5722
6598
  useI18n();
5723
- const { client, store, hasBootstrapError, wsDisconnected, retryBootstrap } = useWidgetContext();
6599
+ const {
6600
+ client,
6601
+ store,
6602
+ hasBootstrapError,
6603
+ wsDisconnected,
6604
+ wsLost,
6605
+ retryConnection,
6606
+ retryBootstrap
6607
+ } = useWidgetContext();
5724
6608
  const { conversations, create, isCreating, setActiveConversation } = useConversations();
5725
6609
  const activeId = useWidgetStore((s) => s.activeConversationId);
5726
6610
  const isDismissed = useWidgetStore((s) => s.isDismissed);
@@ -5739,22 +6623,22 @@ function DefaultWidget({
5739
6623
  });
5740
6624
  }
5741
6625
  const storeIsOpen = useWidgetStore((s) => s.isOpen);
5742
- const [isClosing, setIsClosing] = useState16(false);
6626
+ const [isClosing, setIsClosing] = useState18(false);
5743
6627
  const isOpen = storeIsOpen || isClosing;
5744
- const [activeTab, setActiveTab] = useState16("home");
5745
- const [subView, setSubView] = useState16(null);
5746
- const [newText, setNewText] = useState16("");
5747
- const [contentDetailSlug, setContentDetailSlug] = useState16(null);
5748
- const [contentCategoryName, setContentCategoryName] = useState16(null);
5749
- const prevActiveIdRef = useRef17(activeId);
5750
- useEffect16(() => {
6628
+ const [activeTab, setActiveTab] = useState18("home");
6629
+ const [subView, setSubView] = useState18(null);
6630
+ const [newText, setNewText] = useState18("");
6631
+ const [contentDetailSlug, setContentDetailSlug] = useState18(null);
6632
+ const [contentCategoryName, setContentCategoryName] = useState18(null);
6633
+ const prevActiveIdRef = useRef18(activeId);
6634
+ useEffect17(() => {
5751
6635
  if (activeId && activeId !== prevActiveIdRef.current && subView !== "conversation") {
5752
6636
  setSubView("conversation");
5753
6637
  }
5754
6638
  prevActiveIdRef.current = activeId;
5755
6639
  }, [activeId, subView]);
5756
6640
  const prefill = useWidgetStore((s) => s.newConversationPrefill);
5757
- useEffect16(() => {
6641
+ useEffect17(() => {
5758
6642
  if (prefill !== null) {
5759
6643
  if (prefill.length > 0) setNewText(prefill);
5760
6644
  setSubView("new");
@@ -5762,7 +6646,7 @@ function DefaultWidget({
5762
6646
  store.getState().setNewConversationPrefill(null);
5763
6647
  }
5764
6648
  }, [prefill, store]);
5765
- const closeTimerRef = useRef17(void 0);
6649
+ const closeTimerRef = useRef18(void 0);
5766
6650
  const welcomeMsgRaw = agentConfig?.welcomeMessage;
5767
6651
  const welcomeIsFactoryDefault = !welcomeMsgRaw || welcomeMsgRaw === DEFAULT_EN_WELCOME;
5768
6652
  const welcomeMessage = welcomeMsgRaw?.startsWith("widget.") ? t(welcomeMsgRaw) : welcomeIsFactoryDefault ? t("widget.welcome_message") : welcomeMsgRaw;
@@ -5799,8 +6683,8 @@ function DefaultWidget({
5799
6683
  setActiveConversation(tempId);
5800
6684
  setSubView("conversation");
5801
6685
  }, [agentConfig?.id, store, setActiveConversation, welcomeMessage]);
5802
- const didAutoOpenRef = useRef17(false);
5803
- useEffect16(() => {
6686
+ const didAutoOpenRef = useRef18(false);
6687
+ useEffect17(() => {
5804
6688
  if (!isOpen) {
5805
6689
  didAutoOpenRef.current = false;
5806
6690
  return;
@@ -5813,11 +6697,11 @@ function DefaultWidget({
5813
6697
  else openNewConversation();
5814
6698
  }, [isOpen, isReady, subView, conversations, openConversation, openNewConversation]);
5815
6699
  const dockComposer = useComposer(activeId);
5816
- const dockRef = useRef17(dockComposer);
5817
- useEffect16(() => {
6700
+ const dockRef = useRef18(dockComposer);
6701
+ useEffect17(() => {
5818
6702
  dockRef.current = dockComposer;
5819
6703
  });
5820
- const pendingDockText = useRef17(null);
6704
+ const pendingDockText = useRef18(null);
5821
6705
  const reopenFromDock = useCallback14(() => {
5822
6706
  const state = store.getState();
5823
6707
  if (state.isOpen) return;
@@ -5847,14 +6731,14 @@ function DefaultWidget({
5847
6731
  },
5848
6732
  [activeId, openNewConversation, store]
5849
6733
  );
5850
- useEffect16(() => {
6734
+ useEffect17(() => {
5851
6735
  if (!activeId || pendingDockText.current == null) return;
5852
6736
  const text = pendingDockText.current;
5853
6737
  pendingDockText.current = null;
5854
6738
  void dockRef.current.submit({ text, conversationId: activeId });
5855
6739
  }, [activeId]);
5856
- const [menuOpen, setMenuOpen] = useState16(false);
5857
- useEffect16(() => {
6740
+ const [menuOpen, setMenuOpen] = useState18(false);
6741
+ useEffect17(() => {
5858
6742
  if (!menuOpen) return;
5859
6743
  const close = () => setMenuOpen(false);
5860
6744
  const onKey = (event) => {
@@ -5909,7 +6793,7 @@ function DefaultWidget({
5909
6793
  [activeTab, subView, activeId, setActiveConversation]
5910
6794
  );
5911
6795
  const pendingContentDetail = useWidgetStore((s) => s.pendingContentDetail);
5912
- useEffect16(() => {
6796
+ useEffect17(() => {
5913
6797
  if (!pendingContentDetail) return;
5914
6798
  const { slug, tabId } = pendingContentDetail;
5915
6799
  markEntrySeen(slug);
@@ -5961,11 +6845,11 @@ function DefaultWidget({
5961
6845
  setSubView("conversation");
5962
6846
  }
5963
6847
  }, [newText, isCreating, create]);
5964
- const windowRef = useRef17(null);
5965
- const bubbleRef = useRef17(null);
5966
- const tabStateRef = useRef17({});
5967
- const touchStartY = useRef17(0);
5968
- const touchDeltaY = useRef17(0);
6848
+ const windowRef = useRef18(null);
6849
+ const bubbleRef = useRef18(null);
6850
+ const tabStateRef = useRef18({});
6851
+ const touchStartY = useRef18(0);
6852
+ const touchDeltaY = useRef18(0);
5969
6853
  const handleTouchStart = useCallback14((e) => {
5970
6854
  touchStartY.current = e.touches[0]?.clientY ?? 0;
5971
6855
  touchDeltaY.current = 0;
@@ -5987,7 +6871,7 @@ function DefaultWidget({
5987
6871
  handleClose();
5988
6872
  }
5989
6873
  }, [handleClose]);
5990
- useEffect16(() => {
6874
+ useEffect17(() => {
5991
6875
  if (!isOpen || !windowRef.current) return;
5992
6876
  const vv = window.visualViewport;
5993
6877
  if (!vv) return;
@@ -6006,7 +6890,7 @@ function DefaultWidget({
6006
6890
  win.removeAttribute("data-hw-keyboard");
6007
6891
  };
6008
6892
  }, [isOpen]);
6009
- useEffect16(() => {
6893
+ useEffect17(() => {
6010
6894
  if (!isOpen || !windowRef.current) return;
6011
6895
  const win = windowRef.current;
6012
6896
  const handleKeyDown = (e) => {
@@ -6022,7 +6906,7 @@ function DefaultWidget({
6022
6906
  win.addEventListener("keydown", handleKeyDown);
6023
6907
  return () => win.removeEventListener("keydown", handleKeyDown);
6024
6908
  }, [isOpen, subView, handleClose, goBack]);
6025
- useEffect16(() => {
6909
+ useEffect17(() => {
6026
6910
  if (!isOpen || !windowRef.current || hideLauncher) return;
6027
6911
  const win = windowRef.current;
6028
6912
  const getFocusable = () => win.querySelectorAll(
@@ -6065,7 +6949,7 @@ function DefaultWidget({
6065
6949
  const launcherStyle = agentConfig?.launcherStyle ?? "icon";
6066
6950
  const bubbleStyle = agentConfig?.bubbleStyle ?? "rounded";
6067
6951
  const hasUploadedAvatar = !!agentConfig?.avatarUrl;
6068
- return /* @__PURE__ */ jsxs12(
6952
+ return /* @__PURE__ */ jsxs14(
6069
6953
  "div",
6070
6954
  {
6071
6955
  className: "hw-widget",
@@ -6081,7 +6965,7 @@ function DefaultWidget({
6081
6965
  "--hw-window-left": widgetPosition === "bottom-left" ? "0" : "auto"
6082
6966
  },
6083
6967
  children: [
6084
- placement === "docked" && isReady && /* @__PURE__ */ jsx17(
6968
+ placement === "docked" && isReady && /* @__PURE__ */ jsx19(
6085
6969
  DockedBar,
6086
6970
  {
6087
6971
  value: dockComposer.text,
@@ -6096,19 +6980,20 @@ function DefaultWidget({
6096
6980
  onReopen: reopenFromDock,
6097
6981
  sendError: dockComposer.sendError,
6098
6982
  onClearSendError: dockComposer.clearSendError,
6099
- leading: customAvatar
6983
+ leading: customAvatar,
6984
+ placeholder: conversations.find((c) => c.id === activeId)?.status === "resolved" ? t("widget.placeholder_resolved") : void 0
6100
6985
  }
6101
6986
  ),
6102
- isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */ jsx17("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-loading", children: [
6103
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
6104
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } }),
6105
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } })
6987
+ isOpen && !isReady && !hasBootstrapError && /* @__PURE__ */ jsx19("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-loading", children: [
6988
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
6989
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } }),
6990
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } })
6106
6991
  ] }) }),
6107
- isOpen && hasBootstrapError && /* @__PURE__ */ jsx17("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs12("div", { className: "hw-bootstrap-error", children: [
6108
- /* @__PURE__ */ jsx17("div", { className: "hw-bootstrap-error-text", children: t("widget.error_desc") }),
6109
- /* @__PURE__ */ jsx17("button", { type: "button", className: "hw-bootstrap-error-retry", onClick: retryBootstrap, children: t("widget.retry") })
6992
+ isOpen && hasBootstrapError && /* @__PURE__ */ jsx19("div", { className: `hw-window ${isClosing ? "hw-window--closing" : ""}`, children: /* @__PURE__ */ jsxs14("div", { className: "hw-bootstrap-error", children: [
6993
+ /* @__PURE__ */ jsx19("div", { className: "hw-bootstrap-error-text", children: t("widget.error_desc") }),
6994
+ /* @__PURE__ */ jsx19("button", { type: "button", className: "hw-bootstrap-error-retry", onClick: retryBootstrap, children: t("widget.retry") })
6110
6995
  ] }) }),
6111
- isOpen && isReady && /* @__PURE__ */ jsxs12(
6996
+ isOpen && isReady && /* @__PURE__ */ jsxs14(
6112
6997
  "div",
6113
6998
  {
6114
6999
  ref: windowRef,
@@ -6120,24 +7005,28 @@ function DefaultWidget({
6120
7005
  onTouchMove: handleTouchMove,
6121
7006
  onTouchEnd: handleTouchEnd,
6122
7007
  children: [
6123
- /* @__PURE__ */ jsx17("div", { className: "hw-drag-handle", children: /* @__PURE__ */ jsx17("div", { className: "hw-drag-handle-pill" }) }),
6124
- wsDisconnected && /* @__PURE__ */ jsxs12("div", { className: "hw-disconnect", children: [
6125
- /* @__PURE__ */ jsx17("div", { className: "hw-disconnect-spinner" }),
6126
- t("widget.reconnecting")
6127
- ] }),
7008
+ /* @__PURE__ */ jsx19("div", { className: "hw-drag-handle", children: /* @__PURE__ */ jsx19("div", { className: "hw-drag-handle-pill" }) }),
7009
+ /* @__PURE__ */ jsx19(
7010
+ ConnectionStrip,
7011
+ {
7012
+ reconnecting: wsDisconnected,
7013
+ lost: wsLost,
7014
+ onRetry: retryConnection
7015
+ }
7016
+ ),
6128
7017
  (subView === "content-detail" || subView === "content-category") && (() => {
6129
7018
  const tabId = activeTab.replace("content:", "");
6130
7019
  const contentTab = contentTabs.find((t2) => t2.id === tabId);
6131
7020
  const headerTitle = subView === "content-category" && contentCategoryName ? contentCategoryName : contentTab?.label ? resolveLabel2(contentTab.label) : t("widget.content");
6132
- return /* @__PURE__ */ jsxs12("div", { className: "hw-header hw-header--centered", children: [
6133
- /* @__PURE__ */ jsx17(
7021
+ return /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--centered", children: [
7022
+ /* @__PURE__ */ jsx19(
6134
7023
  "button",
6135
7024
  {
6136
7025
  type: "button",
6137
7026
  className: "hw-header-back",
6138
7027
  onClick: goBack,
6139
7028
  "aria-label": t("widget.aria_back"),
6140
- children: /* @__PURE__ */ jsx17(
7029
+ children: /* @__PURE__ */ jsx19(
6141
7030
  "svg",
6142
7031
  {
6143
7032
  viewBox: "0 0 24 24",
@@ -6146,33 +7035,33 @@ function DefaultWidget({
6146
7035
  strokeWidth: 2,
6147
7036
  strokeLinecap: "round",
6148
7037
  strokeLinejoin: "round",
6149
- children: /* @__PURE__ */ jsx17("path", { d: "M15 18l-6-6 6-6" })
7038
+ children: /* @__PURE__ */ jsx19("path", { d: "M15 18l-6-6 6-6" })
6150
7039
  }
6151
7040
  )
6152
7041
  }
6153
7042
  ),
6154
- /* @__PURE__ */ jsx17("div", { className: "hw-header-title", children: headerTitle }),
6155
- /* @__PURE__ */ jsx17(
7043
+ /* @__PURE__ */ jsx19("div", { className: "hw-header-title", children: headerTitle }),
7044
+ /* @__PURE__ */ jsx19(
6156
7045
  "button",
6157
7046
  {
6158
7047
  type: "button",
6159
7048
  className: "hw-header-close",
6160
7049
  onClick: handleClose,
6161
7050
  "aria-label": t("widget.aria_close"),
6162
- children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
7051
+ children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
6163
7052
  }
6164
7053
  )
6165
7054
  ] });
6166
7055
  })(),
6167
- subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */ jsxs12("div", { className: "hw-header hw-header--sub", children: [
6168
- /* @__PURE__ */ jsx17(
7056
+ subView !== null && subView !== "content-detail" && subView !== "content-category" && /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--sub", children: [
7057
+ /* @__PURE__ */ jsx19(
6169
7058
  "button",
6170
7059
  {
6171
7060
  type: "button",
6172
7061
  className: "hw-header-back",
6173
7062
  onClick: goBack,
6174
7063
  "aria-label": t("widget.aria_back"),
6175
- children: /* @__PURE__ */ jsx17(
7064
+ children: /* @__PURE__ */ jsx19(
6176
7065
  "svg",
6177
7066
  {
6178
7067
  viewBox: "0 0 24 24",
@@ -6181,17 +7070,17 @@ function DefaultWidget({
6181
7070
  strokeWidth: 2,
6182
7071
  strokeLinecap: "round",
6183
7072
  strokeLinejoin: "round",
6184
- children: /* @__PURE__ */ jsx17("path", { d: "M15 18l-6-6 6-6" })
7073
+ children: /* @__PURE__ */ jsx19("path", { d: "M15 18l-6-6 6-6" })
6185
7074
  }
6186
7075
  )
6187
7076
  }
6188
7077
  ),
6189
- /* @__PURE__ */ jsxs12("div", { className: "hw-header-identity", children: [
6190
- /* @__PURE__ */ jsx17(
7078
+ /* @__PURE__ */ jsxs14("div", { className: "hw-header-identity", children: [
7079
+ /* @__PURE__ */ jsx19(
6191
7080
  "div",
6192
7081
  {
6193
7082
  className: `hw-header-bot-icon${hasTeamAgent ? " hw-header-bot-icon--team" : ""}`,
6194
- children: hasTeamAgent && humanImage ? /* @__PURE__ */ jsx17(
7083
+ children: hasTeamAgent && humanImage ? /* @__PURE__ */ jsx19(
6195
7084
  "img",
6196
7085
  {
6197
7086
  src: humanImage,
@@ -6199,16 +7088,16 @@ function DefaultWidget({
6199
7088
  className: "hw-header-agent-img",
6200
7089
  referrerPolicy: "no-referrer"
6201
7090
  }
6202
- ) : hasTeamAgent ? /* @__PURE__ */ jsx17("span", { className: "hw-header-agent-initials", children: headerName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx17(WidgetLogo, {})
7091
+ ) : hasTeamAgent ? /* @__PURE__ */ jsx19("span", { className: "hw-header-agent-initials", children: headerName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx19(WidgetLogo, {})
6203
7092
  }
6204
7093
  ),
6205
- /* @__PURE__ */ jsxs12("div", { className: "hw-header-info", children: [
6206
- /* @__PURE__ */ jsx17("div", { className: "hw-header-name", children: headerName }),
6207
- /* @__PURE__ */ jsx17("div", { className: "hw-header-status", children: subtitleText })
7094
+ /* @__PURE__ */ jsxs14("div", { className: "hw-header-info", children: [
7095
+ /* @__PURE__ */ jsx19("div", { className: "hw-header-name", children: headerName }),
7096
+ /* @__PURE__ */ jsx19("div", { className: "hw-header-status", children: subtitleText })
6208
7097
  ] })
6209
7098
  ] }),
6210
- /* @__PURE__ */ jsxs12("div", { className: "hw-header-actions", children: [
6211
- /* @__PURE__ */ jsx17(
7099
+ /* @__PURE__ */ jsxs14("div", { className: "hw-header-actions", children: [
7100
+ /* @__PURE__ */ jsx19(
6212
7101
  "button",
6213
7102
  {
6214
7103
  type: "button",
@@ -6220,21 +7109,21 @@ function DefaultWidget({
6220
7109
  event.stopPropagation();
6221
7110
  setMenuOpen((open) => !open);
6222
7111
  },
6223
- children: /* @__PURE__ */ jsx17(DotsIcon, { size: 18 })
7112
+ children: /* @__PURE__ */ jsx19(DotsIcon, { size: 18 })
6224
7113
  }
6225
7114
  ),
6226
- /* @__PURE__ */ jsx17(
7115
+ /* @__PURE__ */ jsx19(
6227
7116
  "button",
6228
7117
  {
6229
7118
  type: "button",
6230
7119
  className: "hw-header-close",
6231
7120
  onClick: handleClose,
6232
7121
  "aria-label": t("widget.aria_close"),
6233
- children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
7122
+ children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
6234
7123
  }
6235
7124
  ),
6236
- menuOpen && /* @__PURE__ */ jsxs12("div", { className: "hw-header-menu", role: "menu", children: [
6237
- conversations.length > 0 && /* @__PURE__ */ jsx17("div", { className: "hw-header-menu-convs", children: conversations.slice(0, 3).map((conv) => /* @__PURE__ */ jsxs12(
7125
+ menuOpen && /* @__PURE__ */ jsxs14("div", { className: "hw-header-menu", role: "menu", children: [
7126
+ conversations.length > 0 && /* @__PURE__ */ jsx19("div", { className: "hw-header-menu-convs", children: conversations.slice(0, 3).map((conv) => /* @__PURE__ */ jsxs14(
6238
7127
  "button",
6239
7128
  {
6240
7129
  type: "button",
@@ -6246,16 +7135,16 @@ function DefaultWidget({
6246
7135
  openConversation(conv.id);
6247
7136
  },
6248
7137
  children: [
6249
- /* @__PURE__ */ jsxs12("span", { className: "hw-header-menu-conv-top", children: [
6250
- /* @__PURE__ */ jsx17("span", { className: "hw-header-menu-conv-name", children: conversationIdentity(conv).humanName ?? companyName }),
6251
- conv.lastMessageAt && /* @__PURE__ */ jsx17("span", { className: "hw-header-menu-conv-time", children: formatRelativeTime(conv.lastMessageAt) })
7138
+ /* @__PURE__ */ jsxs14("span", { className: "hw-header-menu-conv-top", children: [
7139
+ /* @__PURE__ */ jsx19("span", { className: "hw-header-menu-conv-name", children: conversationIdentity(conv).humanName ?? companyName }),
7140
+ conv.lastMessageAt && /* @__PURE__ */ jsx19("span", { className: "hw-header-menu-conv-time", children: formatRelativeTime(conv.lastMessageAt) })
6252
7141
  ] }),
6253
- /* @__PURE__ */ jsx17("span", { className: "hw-header-menu-conv-preview", children: conv.lastMessageText ?? t("widget.no_preview") })
7142
+ /* @__PURE__ */ jsx19("span", { className: "hw-header-menu-conv-preview", children: conv.lastMessageText ?? t("widget.no_preview") })
6254
7143
  ]
6255
7144
  },
6256
7145
  conv.id
6257
7146
  )) }),
6258
- /* @__PURE__ */ jsxs12(
7147
+ /* @__PURE__ */ jsxs14(
6259
7148
  "button",
6260
7149
  {
6261
7150
  type: "button",
@@ -6265,7 +7154,7 @@ function DefaultWidget({
6265
7154
  openNewConversation();
6266
7155
  },
6267
7156
  children: [
6268
- /* @__PURE__ */ jsx17(NewChatIcon, { size: 16 }),
7157
+ /* @__PURE__ */ jsx19(NewChatIcon, { size: 16 }),
6269
7158
  t("widget.new_conversation")
6270
7159
  ]
6271
7160
  }
@@ -6273,43 +7162,43 @@ function DefaultWidget({
6273
7162
  ] })
6274
7163
  ] })
6275
7164
  ] }),
6276
- subView === null && activeTab === "home" && /* @__PURE__ */ jsxs12(Fragment5, { children: [
6277
- /* @__PURE__ */ jsxs12("div", { className: "hw-hero", children: [
6278
- /* @__PURE__ */ jsxs12("div", { className: "hw-hero-top", children: [
6279
- /* @__PURE__ */ jsx17("div", { className: "hw-hero-bot-icon", children: /* @__PURE__ */ jsx17(WidgetLogo, {}) }),
6280
- /* @__PURE__ */ jsx17(
7165
+ subView === null && activeTab === "home" && /* @__PURE__ */ jsxs14(Fragment5, { children: [
7166
+ /* @__PURE__ */ jsxs14("div", { className: "hw-hero", children: [
7167
+ /* @__PURE__ */ jsxs14("div", { className: "hw-hero-top", children: [
7168
+ /* @__PURE__ */ jsx19("div", { className: "hw-hero-bot-icon", children: /* @__PURE__ */ jsx19(WidgetLogo, {}) }),
7169
+ /* @__PURE__ */ jsx19(
6281
7170
  "button",
6282
7171
  {
6283
7172
  type: "button",
6284
7173
  className: "hw-hero-close",
6285
7174
  onClick: handleClose,
6286
7175
  "aria-label": t("widget.aria_close"),
6287
- children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
7176
+ children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
6288
7177
  }
6289
7178
  )
6290
7179
  ] }),
6291
- /* @__PURE__ */ jsx17("div", { className: "hw-hero-greeting", children: welcomeMessage.split("\n").map((line, i) => /* @__PURE__ */ jsxs12(
7180
+ /* @__PURE__ */ jsx19("div", { className: "hw-hero-greeting", children: welcomeMessage.split("\n").map((line, i) => /* @__PURE__ */ jsxs14(
6292
7181
  "span",
6293
7182
  {
6294
7183
  className: i === 0 ? "hw-hero-greeting-name" : "hw-hero-greeting-question",
6295
7184
  children: [
6296
- i > 0 && /* @__PURE__ */ jsx17("br", {}),
7185
+ i > 0 && /* @__PURE__ */ jsx19("br", {}),
6297
7186
  line
6298
7187
  ]
6299
7188
  },
6300
7189
  i
6301
7190
  )) }),
6302
- /* @__PURE__ */ jsx17("div", { className: "hw-hero-subtitle", children: subtitleText })
7191
+ /* @__PURE__ */ jsx19("div", { className: "hw-hero-subtitle", children: subtitleText })
6303
7192
  ] }),
6304
- /* @__PURE__ */ jsx17("div", { className: "hw-sheet", children: /* @__PURE__ */ jsxs12("div", { className: "hw-sheet-inner", children: [
6305
- /* @__PURE__ */ jsxs12("button", { type: "button", className: "hw-card", onClick: openNewConversation, children: [
6306
- /* @__PURE__ */ jsxs12("div", { className: "hw-card-body", children: [
6307
- /* @__PURE__ */ jsx17("div", { className: "hw-card-title", children: t("widget.send_us_message") }),
6308
- /* @__PURE__ */ jsx17("div", { className: "hw-card-meta", children: t("widget.reply_time") })
7193
+ /* @__PURE__ */ jsx19("div", { className: "hw-sheet", children: /* @__PURE__ */ jsxs14("div", { className: "hw-sheet-inner", children: [
7194
+ /* @__PURE__ */ jsxs14("button", { type: "button", className: "hw-card", onClick: openNewConversation, children: [
7195
+ /* @__PURE__ */ jsxs14("div", { className: "hw-card-body", children: [
7196
+ /* @__PURE__ */ jsx19("div", { className: "hw-card-title", children: t("widget.send_us_message") }),
7197
+ /* @__PURE__ */ jsx19("div", { className: "hw-card-meta", children: t("widget.reply_time") })
6309
7198
  ] }),
6310
- /* @__PURE__ */ jsx17("div", { className: "hw-card-arrow", children: /* @__PURE__ */ jsx17(SendIcon, {}) })
7199
+ /* @__PURE__ */ jsx19("div", { className: "hw-card-arrow", children: /* @__PURE__ */ jsx19(SendIcon, {}) })
6311
7200
  ] }),
6312
- announcementTabs.length > 0 && /* @__PURE__ */ jsx17(
7201
+ announcementTabs.length > 0 && /* @__PURE__ */ jsx19(
6313
7202
  WhatsNewCard,
6314
7203
  {
6315
7204
  getUnseenEntries,
@@ -6325,7 +7214,7 @@ function DefaultWidget({
6325
7214
  }
6326
7215
  }
6327
7216
  ),
6328
- /* @__PURE__ */ jsx17(
7217
+ /* @__PURE__ */ jsx19(
6329
7218
  HomeView,
6330
7219
  {
6331
7220
  conversations,
@@ -6335,17 +7224,17 @@ function DefaultWidget({
6335
7224
  )
6336
7225
  ] }) })
6337
7226
  ] }),
6338
- subView === null && activeTab === "messages" && /* @__PURE__ */ jsxs12("div", { className: "hw-header hw-header--centered", children: [
6339
- /* @__PURE__ */ jsx17("div", { className: "hw-header-spacer" }),
6340
- /* @__PURE__ */ jsx17("div", { className: "hw-header-title", children: t("widget.messages") }),
6341
- /* @__PURE__ */ jsx17(
7227
+ subView === null && activeTab === "messages" && /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--centered", children: [
7228
+ /* @__PURE__ */ jsx19("div", { className: "hw-header-spacer" }),
7229
+ /* @__PURE__ */ jsx19("div", { className: "hw-header-title", children: t("widget.messages") }),
7230
+ /* @__PURE__ */ jsx19(
6342
7231
  "button",
6343
7232
  {
6344
7233
  type: "button",
6345
7234
  className: "hw-header-close",
6346
7235
  onClick: handleClose,
6347
7236
  "aria-label": t("widget.aria_close"),
6348
- children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
7237
+ children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
6349
7238
  }
6350
7239
  )
6351
7240
  ] }),
@@ -6353,23 +7242,23 @@ function DefaultWidget({
6353
7242
  const tabId = activeTab.replace("content:", "");
6354
7243
  const contentTab = contentTabs.find((t2) => t2.id === tabId);
6355
7244
  if (!contentTab) return null;
6356
- return /* @__PURE__ */ jsxs12("div", { className: "hw-header hw-header--centered", children: [
6357
- /* @__PURE__ */ jsx17("div", { className: "hw-header-spacer" }),
6358
- /* @__PURE__ */ jsx17("div", { className: "hw-header-title", children: resolveLabel2(contentTab.label) }),
6359
- /* @__PURE__ */ jsx17(
7245
+ return /* @__PURE__ */ jsxs14("div", { className: "hw-header hw-header--centered", children: [
7246
+ /* @__PURE__ */ jsx19("div", { className: "hw-header-spacer" }),
7247
+ /* @__PURE__ */ jsx19("div", { className: "hw-header-title", children: resolveLabel2(contentTab.label) }),
7248
+ /* @__PURE__ */ jsx19(
6360
7249
  "button",
6361
7250
  {
6362
7251
  type: "button",
6363
7252
  className: "hw-header-close",
6364
7253
  onClick: handleClose,
6365
7254
  "aria-label": t("widget.aria_close"),
6366
- children: /* @__PURE__ */ jsx17(CloseGlyph, { docked: placement === "docked" })
7255
+ children: /* @__PURE__ */ jsx19(CloseGlyph, { docked: placement === "docked" })
6367
7256
  }
6368
7257
  )
6369
7258
  ] });
6370
7259
  })(),
6371
- (subView !== null || activeTab !== "home") && /* @__PURE__ */ jsxs12("div", { className: "hw-content", children: [
6372
- subView === null && activeTab === "messages" && /* @__PURE__ */ jsx17(
7260
+ (subView !== null || activeTab !== "home") && /* @__PURE__ */ jsxs14("div", { className: "hw-content", children: [
7261
+ subView === null && activeTab === "messages" && /* @__PURE__ */ jsx19(
6373
7262
  MessagesView,
6374
7263
  {
6375
7264
  conversations,
@@ -6377,7 +7266,7 @@ function DefaultWidget({
6377
7266
  onNewClick: openNewConversation
6378
7267
  }
6379
7268
  ),
6380
- subView === "new" && /* @__PURE__ */ jsx17(
7269
+ subView === "new" && /* @__PURE__ */ jsx19(
6381
7270
  NewConversationView,
6382
7271
  {
6383
7272
  text: newText,
@@ -6387,12 +7276,12 @@ function DefaultWidget({
6387
7276
  welcomeMessage
6388
7277
  }
6389
7278
  ),
6390
- subView === "conversation" && activeId && /* @__PURE__ */ jsx17(ConversationView, { conversationId: activeId, starters: dockSuggestions }),
7279
+ subView === "conversation" && activeId && /* @__PURE__ */ jsx19(ConversationView, { conversationId: activeId, starters: dockSuggestions }),
6391
7280
  activeTab.startsWith("content:") && (() => {
6392
7281
  const tabId = activeTab.replace("content:", "");
6393
7282
  const contentTab = contentTabs.find((t2) => t2.id === tabId);
6394
7283
  if (!contentTab) return null;
6395
- return /* @__PURE__ */ jsx17(
7284
+ return /* @__PURE__ */ jsx19(
6396
7285
  ContentTabView,
6397
7286
  {
6398
7287
  tab: contentTab,
@@ -6412,7 +7301,7 @@ function DefaultWidget({
6412
7301
  );
6413
7302
  })()
6414
7303
  ] }),
6415
- showTabBar && /* @__PURE__ */ jsx17(
7304
+ showTabBar && /* @__PURE__ */ jsx19(
6416
7305
  TabBar,
6417
7306
  {
6418
7307
  activeTab,
@@ -6423,20 +7312,20 @@ function DefaultWidget({
6423
7312
  unseenAnnouncementCount
6424
7313
  }
6425
7314
  ),
6426
- /* @__PURE__ */ jsxs12("div", { className: "hw-powered", children: [
7315
+ /* @__PURE__ */ jsxs14("div", { className: "hw-powered", children: [
6427
7316
  t("widget.powered_by"),
6428
7317
  " ",
6429
- /* @__PURE__ */ jsx17("a", { href: "https://helpway.ai", target: "_blank", rel: "noopener noreferrer", children: "Helpway" })
7318
+ /* @__PURE__ */ jsx19("a", { href: "https://helpway.ai", target: "_blank", rel: "noopener noreferrer", children: "Helpway" })
6430
7319
  ] })
6431
7320
  ]
6432
7321
  }
6433
7322
  ),
6434
- isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsxs12("div", { className: "hw-preview-dock", children: [
6435
- /* @__PURE__ */ jsx17(
7323
+ isReady && !isOpen && !isDismissed && !hideLauncher && /* @__PURE__ */ jsxs14("div", { className: "hw-preview-dock", children: [
7324
+ /* @__PURE__ */ jsx19(
6436
7325
  AnnouncementPreviews,
6437
7326
  {
6438
7327
  maxVisible: incomingPreview ? 1 : 2,
6439
- avatar: /* @__PURE__ */ jsx17(WidgetLogo, {}),
7328
+ avatar: /* @__PURE__ */ jsx19(WidgetLogo, {}),
6440
7329
  onOpen: (slug, tabId) => {
6441
7330
  markEntrySeen(slug);
6442
7331
  handleBubbleClick();
@@ -6448,10 +7337,10 @@ function DefaultWidget({
6448
7337
  }
6449
7338
  }
6450
7339
  ),
6451
- /* @__PURE__ */ jsx17(MessagePreview, { onOpen: handleBubbleClick, avatar: /* @__PURE__ */ jsx17(WidgetLogo, {}), autoDismissMs: null })
7340
+ /* @__PURE__ */ jsx19(MessagePreview, { onOpen: handleBubbleClick, avatar: /* @__PURE__ */ jsx19(WidgetLogo, {}), autoDismissMs: null })
6452
7341
  ] }),
6453
- /* @__PURE__ */ jsx17(WidgetDebugOverlay, {}),
6454
- isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */ jsxs12(
7342
+ /* @__PURE__ */ jsx19(WidgetDebugOverlay, {}),
7343
+ isReady && !isDismissed && (!hideLauncher || isOpen) && /* @__PURE__ */ jsxs14(
6455
7344
  "button",
6456
7345
  {
6457
7346
  ref: bubbleRef,
@@ -6468,24 +7357,24 @@ function DefaultWidget({
6468
7357
  "aria-expanded": isOpen,
6469
7358
  "aria-haspopup": "dialog",
6470
7359
  children: [
6471
- /* @__PURE__ */ jsx17(
7360
+ /* @__PURE__ */ jsx19(
6472
7361
  "span",
6473
7362
  {
6474
7363
  className: `hw-bubble-icon hw-bubble-icon--bot ${isOpen ? "hw-bubble-icon--hidden" : ""}`,
6475
- children: /* @__PURE__ */ jsx17(LauncherIcon, {})
7364
+ children: /* @__PURE__ */ jsx19(LauncherIcon, {})
6476
7365
  }
6477
7366
  ),
6478
- /* @__PURE__ */ jsx17(
7367
+ /* @__PURE__ */ jsx19(
6479
7368
  "span",
6480
7369
  {
6481
7370
  className: `hw-bubble-icon hw-bubble-icon--close ${!isOpen ? "hw-bubble-icon--hidden" : ""}`,
6482
- children: /* @__PURE__ */ jsx17(XIcon, { size: 24 })
7371
+ children: /* @__PURE__ */ jsx19(XIcon, { size: 24 })
6483
7372
  }
6484
7373
  ),
6485
- launcherStyle !== "icon" && !isOpen && /* @__PURE__ */ jsx17("span", { className: "hw-bubble-label", children: launcherStyle === "help" ? t("widget.help") : companyName }),
6486
- !isOpen && (totalUnread > 0 || awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsxs12("div", { className: "hw-bubble-badge", children: [
7374
+ launcherStyle !== "icon" && !isOpen && /* @__PURE__ */ jsx19("span", { className: "hw-bubble-label", children: launcherStyle === "help" ? t("widget.help") : companyName }),
7375
+ !isOpen && (totalUnread > 0 || awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsxs14("div", { className: "hw-bubble-badge", children: [
6487
7376
  totalUnread > 0 ? totalUnread : "",
6488
- totalUnread === 0 && (awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsx17("span", { className: "hw-bubble-badge-dot" })
7377
+ totalUnread === 0 && (awaitingReply > 0 || unseenAnnouncementCount > 0) && /* @__PURE__ */ jsx19("span", { className: "hw-bubble-badge-dot" })
6489
7378
  ] })
6490
7379
  ]
6491
7380
  }
@@ -6502,8 +7391,8 @@ function TabBar({
6502
7391
  showMessagesTab = true,
6503
7392
  unseenAnnouncementCount = 0
6504
7393
  }) {
6505
- return /* @__PURE__ */ jsxs12("div", { className: "hw-tabs", role: "tablist", children: [
6506
- /* @__PURE__ */ jsxs12(
7394
+ return /* @__PURE__ */ jsxs14("div", { className: "hw-tabs", role: "tablist", children: [
7395
+ /* @__PURE__ */ jsxs14(
6507
7396
  "button",
6508
7397
  {
6509
7398
  type: "button",
@@ -6512,12 +7401,12 @@ function TabBar({
6512
7401
  role: "tab",
6513
7402
  "aria-selected": activeTab === "home",
6514
7403
  children: [
6515
- /* @__PURE__ */ jsx17(HomeIcon, {}),
6516
- /* @__PURE__ */ jsx17("span", { children: t("widget.home") })
7404
+ /* @__PURE__ */ jsx19(HomeIcon, {}),
7405
+ /* @__PURE__ */ jsx19("span", { children: t("widget.home") })
6517
7406
  ]
6518
7407
  }
6519
7408
  ),
6520
- showMessagesTab && /* @__PURE__ */ jsxs12(
7409
+ showMessagesTab && /* @__PURE__ */ jsxs14(
6521
7410
  "button",
6522
7411
  {
6523
7412
  type: "button",
@@ -6526,15 +7415,15 @@ function TabBar({
6526
7415
  role: "tab",
6527
7416
  "aria-selected": activeTab === "messages",
6528
7417
  children: [
6529
- /* @__PURE__ */ jsxs12("span", { className: "hw-tabs-icon-wrap", children: [
6530
- /* @__PURE__ */ jsx17(MessagesIcon, {}),
6531
- unreadCount > 0 && /* @__PURE__ */ jsx17("span", { className: "hw-tabs-badge", children: unreadCount > 99 ? "99+" : unreadCount })
7418
+ /* @__PURE__ */ jsxs14("span", { className: "hw-tabs-icon-wrap", children: [
7419
+ /* @__PURE__ */ jsx19(MessagesIcon, {}),
7420
+ unreadCount > 0 && /* @__PURE__ */ jsx19("span", { className: "hw-tabs-badge", children: unreadCount > 99 ? "99+" : unreadCount })
6532
7421
  ] }),
6533
- /* @__PURE__ */ jsx17("span", { children: t("widget.messages") })
7422
+ /* @__PURE__ */ jsx19("span", { children: t("widget.messages") })
6534
7423
  ]
6535
7424
  }
6536
7425
  ),
6537
- contentTabs.map((tab) => /* @__PURE__ */ jsxs12(
7426
+ contentTabs.map((tab) => /* @__PURE__ */ jsxs14(
6538
7427
  "button",
6539
7428
  {
6540
7429
  type: "button",
@@ -6543,11 +7432,11 @@ function TabBar({
6543
7432
  role: "tab",
6544
7433
  "aria-selected": activeTab === `content:${tab.id}`,
6545
7434
  children: [
6546
- /* @__PURE__ */ jsxs12("span", { className: "hw-tabs-icon-wrap", children: [
6547
- /* @__PURE__ */ jsx17(ContentTabIconComponent, { icon: tab.icon }),
6548
- tab.isAnnouncements && unseenAnnouncementCount > 0 && /* @__PURE__ */ jsx17("span", { className: "hw-tabs-dot" })
7435
+ /* @__PURE__ */ jsxs14("span", { className: "hw-tabs-icon-wrap", children: [
7436
+ /* @__PURE__ */ jsx19(ContentTabIconComponent, { icon: tab.icon }),
7437
+ tab.isAnnouncements && unseenAnnouncementCount > 0 && /* @__PURE__ */ jsx19("span", { className: "hw-tabs-dot" })
6549
7438
  ] }),
6550
- /* @__PURE__ */ jsx17("span", { children: resolveLabel2(tab.label) })
7439
+ /* @__PURE__ */ jsx19("span", { children: resolveLabel2(tab.label) })
6551
7440
  ]
6552
7441
  },
6553
7442
  tab.id
@@ -6561,9 +7450,9 @@ function HomeView({
6561
7450
  }) {
6562
7451
  const recent = conversations.slice(0, 3);
6563
7452
  if (recent.length === 0) return null;
6564
- return /* @__PURE__ */ jsxs12("div", { className: "hw-recent-card", children: [
6565
- /* @__PURE__ */ jsx17("div", { className: "hw-recent-header", children: t("widget.recent_conversations") }),
6566
- recent.map((conv, i) => /* @__PURE__ */ jsx17(
7453
+ return /* @__PURE__ */ jsxs14("div", { className: "hw-recent-card", children: [
7454
+ /* @__PURE__ */ jsx19("div", { className: "hw-recent-header", children: t("widget.recent_conversations") }),
7455
+ recent.map((conv, i) => /* @__PURE__ */ jsx19(
6567
7456
  ConversationRow,
6568
7457
  {
6569
7458
  conversation: conv,
@@ -6572,7 +7461,7 @@ function HomeView({
6572
7461
  },
6573
7462
  conv.id
6574
7463
  )),
6575
- conversations.length > 3 && /* @__PURE__ */ jsx17("button", { type: "button", className: "hw-recent-see-all", onClick: onMessagesClick, children: t("widget.see_all") })
7464
+ conversations.length > 3 && /* @__PURE__ */ jsx19("button", { type: "button", className: "hw-recent-see-all", onClick: onMessagesClick, children: t("widget.see_all") })
6576
7465
  ] });
6577
7466
  }
6578
7467
  function MessagesView({
@@ -6581,14 +7470,14 @@ function MessagesView({
6581
7470
  onNewClick
6582
7471
  }) {
6583
7472
  if (conversations.length === 0) {
6584
- return /* @__PURE__ */ jsxs12("div", { className: "hw-empty-state", children: [
6585
- /* @__PURE__ */ jsx17("div", { className: "hw-empty-icon-wrap", children: /* @__PURE__ */ jsx17(MessagesIcon, {}) }),
6586
- /* @__PURE__ */ jsx17("div", { className: "hw-empty-title", children: t("widget.no_messages") }),
6587
- /* @__PURE__ */ jsx17("div", { className: "hw-empty-desc", children: t("widget.no_messages_desc") }),
6588
- /* @__PURE__ */ jsx17("button", { type: "button", className: "hw-empty-btn", onClick: onNewClick, children: t("widget.start_conversation") })
7473
+ return /* @__PURE__ */ jsxs14("div", { className: "hw-empty-state", children: [
7474
+ /* @__PURE__ */ jsx19("div", { className: "hw-empty-icon-wrap", children: /* @__PURE__ */ jsx19(MessagesIcon, {}) }),
7475
+ /* @__PURE__ */ jsx19("div", { className: "hw-empty-title", children: t("widget.no_messages") }),
7476
+ /* @__PURE__ */ jsx19("div", { className: "hw-empty-desc", children: t("widget.no_messages_desc") }),
7477
+ /* @__PURE__ */ jsx19("button", { type: "button", className: "hw-empty-btn", onClick: onNewClick, children: t("widget.start_conversation") })
6589
7478
  ] });
6590
7479
  }
6591
- return /* @__PURE__ */ jsx17("div", { className: "hw-msgs-tab", children: conversations.map((conv) => /* @__PURE__ */ jsx17(ConversationCard, { conversation: conv, onSelect }, conv.id)) });
7480
+ return /* @__PURE__ */ jsx19("div", { className: "hw-msgs-tab", children: conversations.map((conv) => /* @__PURE__ */ jsx19(ConversationCard, { conversation: conv, onSelect }, conv.id)) });
6592
7481
  }
6593
7482
  function ConvCardBody({ conv }) {
6594
7483
  const agentName = useWidgetStore((s) => s.agentConfig?.name) ?? "Support";
@@ -6596,8 +7485,8 @@ function ConvCardBody({ conv }) {
6596
7485
  const isTeam = !!humanName;
6597
7486
  const displayName = humanName ?? agentName;
6598
7487
  const preview = conv.lastMessageText ?? t("widget.no_preview");
6599
- return /* @__PURE__ */ jsxs12(Fragment5, { children: [
6600
- /* @__PURE__ */ jsx17("div", { className: `hw-conv-card-avatar${isTeam ? " hw-conv-card-avatar--team" : ""}`, children: isTeam ? humanImage ? /* @__PURE__ */ jsx17(
7488
+ return /* @__PURE__ */ jsxs14(Fragment5, { children: [
7489
+ /* @__PURE__ */ jsx19("div", { className: `hw-conv-card-avatar${isTeam ? " hw-conv-card-avatar--team" : ""}`, children: isTeam ? humanImage ? /* @__PURE__ */ jsx19(
6601
7490
  "img",
6602
7491
  {
6603
7492
  src: humanImage,
@@ -6605,13 +7494,13 @@ function ConvCardBody({ conv }) {
6605
7494
  className: "hw-conv-card-avatar-img",
6606
7495
  referrerPolicy: "no-referrer"
6607
7496
  }
6608
- ) : /* @__PURE__ */ jsx17("span", { className: "hw-conv-card-avatar-initials", children: displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx17(WidgetLogo, {}) }),
6609
- /* @__PURE__ */ jsxs12("div", { className: "hw-conv-card-content", children: [
6610
- /* @__PURE__ */ jsxs12("div", { className: "hw-conv-card-top", children: [
6611
- /* @__PURE__ */ jsx17("span", { className: "hw-conv-card-name", children: displayName }),
6612
- conv.lastMessageAt && /* @__PURE__ */ jsx17("span", { className: "hw-conv-card-time", children: formatRelativeTime(conv.lastMessageAt) })
7497
+ ) : /* @__PURE__ */ jsx19("span", { className: "hw-conv-card-avatar-initials", children: displayName.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx19(WidgetLogo, {}) }),
7498
+ /* @__PURE__ */ jsxs14("div", { className: "hw-conv-card-content", children: [
7499
+ /* @__PURE__ */ jsxs14("div", { className: "hw-conv-card-top", children: [
7500
+ /* @__PURE__ */ jsx19("span", { className: "hw-conv-card-name", children: displayName }),
7501
+ conv.lastMessageAt && /* @__PURE__ */ jsx19("span", { className: "hw-conv-card-time", children: formatRelativeTime(conv.lastMessageAt) })
6613
7502
  ] }),
6614
- /* @__PURE__ */ jsx17("div", { className: "hw-conv-card-preview", children: preview })
7503
+ /* @__PURE__ */ jsx19("div", { className: "hw-conv-card-preview", children: preview })
6615
7504
  ] })
6616
7505
  ] });
6617
7506
  }
@@ -6621,16 +7510,16 @@ function ConversationCard({
6621
7510
  }) {
6622
7511
  const hasUnread = conv.unreadCount > 0;
6623
7512
  const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
6624
- return /* @__PURE__ */ jsxs12(
7513
+ return /* @__PURE__ */ jsxs14(
6625
7514
  "button",
6626
7515
  {
6627
7516
  type: "button",
6628
7517
  className: `hw-conv-card ${hasUnread ? "hw-conv-card--unread" : ""}`,
6629
7518
  onClick: () => onSelect(conv.id),
6630
7519
  children: [
6631
- /* @__PURE__ */ jsx17("div", { className: "hw-conv-card-row", children: /* @__PURE__ */ jsx17(ConvCardBody, { conv }) }),
6632
- hasUnread && /* @__PURE__ */ jsx17("div", { className: "hw-conv-card-badge", children: conv.unreadCount }),
6633
- awaiting && /* @__PURE__ */ jsx17("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
7520
+ /* @__PURE__ */ jsx19("div", { className: "hw-conv-card-row", children: /* @__PURE__ */ jsx19(ConvCardBody, { conv }) }),
7521
+ hasUnread && /* @__PURE__ */ jsx19("div", { className: "hw-conv-card-badge", children: conv.unreadCount }),
7522
+ awaiting && /* @__PURE__ */ jsx19("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
6634
7523
  ]
6635
7524
  }
6636
7525
  );
@@ -6642,16 +7531,16 @@ function ConversationRow({
6642
7531
  }) {
6643
7532
  const hasUnread = conv.unreadCount > 0;
6644
7533
  const awaiting = !hasUnread && isAwaitingVisitorReply(conv);
6645
- return /* @__PURE__ */ jsxs12(
7534
+ return /* @__PURE__ */ jsxs14(
6646
7535
  "button",
6647
7536
  {
6648
7537
  type: "button",
6649
7538
  className: `hw-recent-row ${hasUnread ? "hw-recent-row--unread" : ""} ${isLast ? "hw-recent-row--last" : ""}`,
6650
7539
  onClick: () => onSelect(conv.id),
6651
7540
  children: [
6652
- /* @__PURE__ */ jsx17(ConvCardBody, { conv }),
6653
- hasUnread && /* @__PURE__ */ jsx17("div", { className: "hw-recent-row-badge", children: conv.unreadCount }),
6654
- awaiting && /* @__PURE__ */ jsx17("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
7541
+ /* @__PURE__ */ jsx19(ConvCardBody, { conv }),
7542
+ hasUnread && /* @__PURE__ */ jsx19("div", { className: "hw-recent-row-badge", children: conv.unreadCount }),
7543
+ awaiting && /* @__PURE__ */ jsx19("div", { className: "hw-awaiting", children: t("widget.awaiting_your_reply") })
6655
7544
  ]
6656
7545
  }
6657
7546
  );
@@ -6659,10 +7548,10 @@ function ConversationRow({
6659
7548
  function InlineEmailPrompt({ conversationId }) {
6660
7549
  const { client, store } = useWidgetContext();
6661
7550
  const updateContact = useWidgetStore((s) => s.updateVisitorContact);
6662
- const [email, setEmail] = useState16("");
6663
- const [isSubmitting, setIsSubmitting] = useState16(false);
6664
- const [isSuccess, setIsSuccess] = useState16(false);
6665
- const [hasError, setHasError] = useState16(false);
7551
+ const [email, setEmail] = useState18("");
7552
+ const [isSubmitting, setIsSubmitting] = useState18(false);
7553
+ const [isSuccess, setIsSuccess] = useState18(false);
7554
+ const [hasError, setHasError] = useState18(false);
6666
7555
  const handleSubmit = async () => {
6667
7556
  const trimmed = email.trim();
6668
7557
  if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
@@ -6703,8 +7592,8 @@ function InlineEmailPrompt({ conversationId }) {
6703
7592
  }
6704
7593
  };
6705
7594
  if (isSuccess) {
6706
- return /* @__PURE__ */ jsxs12("div", { className: "hw-email-card hw-email-card--success", children: [
6707
- /* @__PURE__ */ jsx17(
7595
+ return /* @__PURE__ */ jsxs14("div", { className: "hw-email-card hw-email-card--success", children: [
7596
+ /* @__PURE__ */ jsx19(
6708
7597
  "svg",
6709
7598
  {
6710
7599
  width: "15",
@@ -6715,17 +7604,17 @@ function InlineEmailPrompt({ conversationId }) {
6715
7604
  strokeWidth: 2.5,
6716
7605
  strokeLinecap: "round",
6717
7606
  strokeLinejoin: "round",
6718
- children: /* @__PURE__ */ jsx17("polyline", { points: "20 6 9 17 4 12" })
7607
+ children: /* @__PURE__ */ jsx19("polyline", { points: "20 6 9 17 4 12" })
6719
7608
  }
6720
7609
  ),
6721
7610
  t("widget.email_saved")
6722
7611
  ] });
6723
7612
  }
6724
- return /* @__PURE__ */ jsxs12("div", { className: "hw-email-card", children: [
6725
- /* @__PURE__ */ jsx17("p", { className: "hw-email-card-title", children: t("widget.email_title") }),
6726
- /* @__PURE__ */ jsx17("p", { className: "hw-email-card-subtitle", children: t("widget.email_subtitle") }),
6727
- /* @__PURE__ */ jsxs12("div", { className: "hw-email-card-row", children: [
6728
- /* @__PURE__ */ jsx17(
7613
+ return /* @__PURE__ */ jsxs14("div", { className: "hw-email-card", children: [
7614
+ /* @__PURE__ */ jsx19("p", { className: "hw-email-card-title", children: t("widget.email_title") }),
7615
+ /* @__PURE__ */ jsx19("p", { className: "hw-email-card-subtitle", children: t("widget.email_subtitle") }),
7616
+ /* @__PURE__ */ jsxs14("div", { className: "hw-email-card-row", children: [
7617
+ /* @__PURE__ */ jsx19(
6729
7618
  "input",
6730
7619
  {
6731
7620
  type: "email",
@@ -6741,7 +7630,7 @@ function InlineEmailPrompt({ conversationId }) {
6741
7630
  placeholder: t("widget.email_placeholder")
6742
7631
  }
6743
7632
  ),
6744
- /* @__PURE__ */ jsx17(
7633
+ /* @__PURE__ */ jsx19(
6745
7634
  "button",
6746
7635
  {
6747
7636
  type: "button",
@@ -6749,7 +7638,7 @@ function InlineEmailPrompt({ conversationId }) {
6749
7638
  onClick: handleSubmit,
6750
7639
  disabled: isSubmitting || !email.trim(),
6751
7640
  "aria-label": t("widget.email_continue"),
6752
- children: isSubmitting ? /* @__PURE__ */ jsx17(
7641
+ children: isSubmitting ? /* @__PURE__ */ jsx19(
6753
7642
  "svg",
6754
7643
  {
6755
7644
  width: "14",
@@ -6759,7 +7648,7 @@ function InlineEmailPrompt({ conversationId }) {
6759
7648
  stroke: "currentColor",
6760
7649
  strokeWidth: 2,
6761
7650
  "aria-hidden": "true",
6762
- children: /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx17(
7651
+ children: /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "32", strokeDashoffset: "32", children: /* @__PURE__ */ jsx19(
6763
7652
  "animate",
6764
7653
  {
6765
7654
  attributeName: "stroke-dashoffset",
@@ -6769,7 +7658,7 @@ function InlineEmailPrompt({ conversationId }) {
6769
7658
  }
6770
7659
  ) })
6771
7660
  }
6772
- ) : /* @__PURE__ */ jsx17(
7661
+ ) : /* @__PURE__ */ jsx19(
6773
7662
  "svg",
6774
7663
  {
6775
7664
  width: "15",
@@ -6781,7 +7670,7 @@ function InlineEmailPrompt({ conversationId }) {
6781
7670
  strokeLinecap: "round",
6782
7671
  strokeLinejoin: "round",
6783
7672
  "aria-hidden": "true",
6784
- children: /* @__PURE__ */ jsx17("path", { d: "M5 12h13M12 5l7 7-7 7" })
7673
+ children: /* @__PURE__ */ jsx19("path", { d: "M5 12h13M12 5l7 7-7 7" })
6785
7674
  }
6786
7675
  )
6787
7676
  }
@@ -6796,9 +7685,9 @@ function NewConversationView({
6796
7685
  isSubmitting,
6797
7686
  welcomeMessage
6798
7687
  }) {
6799
- return /* @__PURE__ */ jsxs12("div", { className: "hw-new", children: [
6800
- /* @__PURE__ */ jsx17("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx17(MessageBubble, { text: welcomeMessage, sender: "ai", parts: null }) }),
6801
- /* @__PURE__ */ jsx17(
7688
+ return /* @__PURE__ */ jsxs14("div", { className: "hw-new", children: [
7689
+ /* @__PURE__ */ jsx19("div", { className: "hw-new-welcome", children: /* @__PURE__ */ jsx19(MessageBubble, { text: welcomeMessage, sender: "ai", parts: null }) }),
7690
+ /* @__PURE__ */ jsx19(
6802
7691
  Composer,
6803
7692
  {
6804
7693
  text,
@@ -6847,27 +7736,27 @@ function ConversationView({
6847
7736
  const needsEmailPostReply = !!agentConfig?.requireVisitorEmail && !hasEmail && visitorMessageCount >= 2 && hasAiReply;
6848
7737
  const needsEmail = needsEmailPostReply || !!emailGateConvId;
6849
7738
  if (isLoading && items.length === 0) {
6850
- return /* @__PURE__ */ jsx17("div", { className: "hw-messages", children: /* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-messages", children: [
6851
- /* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-msg", children: [
6852
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-avatar" }),
6853
- /* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-bubble", children: [
6854
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 140 } }),
6855
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } })
7739
+ return /* @__PURE__ */ jsx19("div", { className: "hw-messages", children: /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-messages", children: [
7740
+ /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-msg", children: [
7741
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-avatar" }),
7742
+ /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-bubble", children: [
7743
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 140 } }),
7744
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 200 } })
6856
7745
  ] })
6857
7746
  ] }),
6858
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton-msg hw-skeleton-msg--right", children: /* @__PURE__ */ jsx17("div", { className: "hw-skeleton-bubble", style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } }) }) }),
6859
- /* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-msg", children: [
6860
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-avatar" }),
6861
- /* @__PURE__ */ jsxs12("div", { className: "hw-skeleton-bubble", children: [
6862
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 180 } }),
6863
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
6864
- /* @__PURE__ */ jsx17("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 80 } })
7747
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton-msg hw-skeleton-msg--right", children: /* @__PURE__ */ jsx19("div", { className: "hw-skeleton-bubble", style: { alignItems: "flex-end" }, children: /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 160 } }) }) }),
7748
+ /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-msg", children: [
7749
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-avatar" }),
7750
+ /* @__PURE__ */ jsxs14("div", { className: "hw-skeleton-bubble", children: [
7751
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 180 } }),
7752
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 120 } }),
7753
+ /* @__PURE__ */ jsx19("div", { className: "hw-skeleton hw-skeleton-line", style: { width: 80 } })
6865
7754
  ] })
6866
7755
  ] })
6867
7756
  ] }) });
6868
7757
  }
6869
- return /* @__PURE__ */ jsxs12(Fragment5, { children: [
6870
- /* @__PURE__ */ jsx17(
7758
+ return /* @__PURE__ */ jsxs14(Fragment5, { children: [
7759
+ /* @__PURE__ */ jsx19(
6871
7760
  MessageList,
6872
7761
  {
6873
7762
  items,
@@ -6877,12 +7766,12 @@ function ConversationView({
6877
7766
  hasMore,
6878
7767
  isLoadingMore: isLoading,
6879
7768
  onLoadMore: loadMore,
6880
- renderAfterMessages: needsEmail || showStarters ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
6881
- needsEmail && /* @__PURE__ */ jsx17(InlineEmailPrompt, { conversationId: emailGateConvId ?? void 0 }),
6882
- showStarters && /* @__PURE__ */ jsx17("div", { className: "hw-starters", children: starters?.map((entry, index) => {
7769
+ renderAfterMessages: needsEmail || showStarters ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
7770
+ needsEmail && /* @__PURE__ */ jsx19(InlineEmailPrompt, { conversationId: emailGateConvId ?? void 0 }),
7771
+ showStarters && /* @__PURE__ */ jsx19("div", { className: "hw-starters", children: starters?.map((entry, index) => {
6883
7772
  const question = typeof entry === "string" ? entry : entry.question;
6884
7773
  const label = typeof entry === "string" ? null : entry.label;
6885
- return /* @__PURE__ */ jsxs12(
7774
+ return /* @__PURE__ */ jsxs14(
6886
7775
  "button",
6887
7776
  {
6888
7777
  type: "button",
@@ -6892,11 +7781,11 @@ function ConversationView({
6892
7781
  void submit({ text: question });
6893
7782
  },
6894
7783
  children: [
6895
- /* @__PURE__ */ jsxs12("span", { className: "hw-starter-text", children: [
6896
- /* @__PURE__ */ jsx17("span", { className: "hw-starter-k", children: label ?? question }),
6897
- label && /* @__PURE__ */ jsx17("span", { className: "hw-starter-q", children: question })
7784
+ /* @__PURE__ */ jsxs14("span", { className: "hw-starter-text", children: [
7785
+ /* @__PURE__ */ jsx19("span", { className: "hw-starter-k", children: label ?? question }),
7786
+ label && /* @__PURE__ */ jsx19("span", { className: "hw-starter-q", children: question })
6898
7787
  ] }),
6899
- /* @__PURE__ */ jsx17(ChevronRightIcon, { size: 14 })
7788
+ /* @__PURE__ */ jsx19(ChevronRightIcon, { size: 14 })
6900
7789
  ]
6901
7790
  },
6902
7791
  question
@@ -6905,10 +7794,10 @@ function ConversationView({
6905
7794
  ] }) : void 0
6906
7795
  }
6907
7796
  ),
6908
- isResolved && /* @__PURE__ */ jsx17(ResolvedBanner, { conversationId }),
6909
- sendError && /* @__PURE__ */ jsxs12("div", { className: "hw-send-error", children: [
7797
+ isResolved && /* @__PURE__ */ jsx19(ResolvedBanner, { conversationId }),
7798
+ sendError && /* @__PURE__ */ jsxs14("div", { className: "hw-send-error", children: [
6910
7799
  sendError,
6911
- /* @__PURE__ */ jsx17(
7800
+ /* @__PURE__ */ jsx19(
6912
7801
  "button",
6913
7802
  {
6914
7803
  type: "button",
@@ -6921,7 +7810,7 @@ function ConversationView({
6921
7810
  }
6922
7811
  )
6923
7812
  ] }),
6924
- /* @__PURE__ */ jsx17(
7813
+ /* @__PURE__ */ jsx19(
6925
7814
  Composer,
6926
7815
  {
6927
7816
  text,
@@ -6932,50 +7821,12 @@ function ConversationView({
6932
7821
  attachments,
6933
7822
  onAddFiles: addFiles,
6934
7823
  onRemoveAttachment: removeAttachment,
6935
- disabled: needsEmail
7824
+ disabled: needsEmail,
7825
+ placeholder: isResolved ? t("widget.placeholder_resolved") : void 0
6936
7826
  }
6937
7827
  )
6938
7828
  ] });
6939
7829
  }
6940
- function ResolvedBanner({ conversationId }) {
6941
- const { client } = useWidgetContext();
6942
- const [csatRating, setCsatRating] = useState16(null);
6943
- const [csatSubmitted, setCsatSubmitted] = useState16(false);
6944
- const handleCsat = (rating) => {
6945
- setCsatRating(rating);
6946
- setCsatSubmitted(true);
6947
- client.widget.sendCsat.mutate({ conversationId, rating }).catch(() => {
6948
- });
6949
- };
6950
- return /* @__PURE__ */ jsxs12("div", { className: "hw-resolved", children: [
6951
- /* @__PURE__ */ jsx17("div", { className: "hw-resolved-text", children: t("widget.resolved_text") }),
6952
- !csatSubmitted ? /* @__PURE__ */ jsxs12("div", { className: "hw-csat", children: [
6953
- /* @__PURE__ */ jsx17("div", { className: "hw-csat-label", children: t("widget.csat_label") }),
6954
- /* @__PURE__ */ jsxs12("div", { className: "hw-csat-buttons", children: [
6955
- /* @__PURE__ */ jsx17(
6956
- "button",
6957
- {
6958
- type: "button",
6959
- className: `hw-csat-btn ${csatRating === "good" ? "hw-csat-btn--selected" : ""}`,
6960
- onClick: () => handleCsat("good"),
6961
- "aria-label": t("widget.aria_good"),
6962
- children: "\u{1F44D}"
6963
- }
6964
- ),
6965
- /* @__PURE__ */ jsx17(
6966
- "button",
6967
- {
6968
- type: "button",
6969
- className: `hw-csat-btn ${csatRating === "bad" ? "hw-csat-btn--selected" : ""}`,
6970
- onClick: () => handleCsat("bad"),
6971
- "aria-label": t("widget.aria_bad"),
6972
- children: "\u{1F44E}"
6973
- }
6974
- )
6975
- ] })
6976
- ] }) : /* @__PURE__ */ jsx17("div", { className: "hw-csat-thanks", children: t("widget.csat_thanks") })
6977
- ] });
6978
- }
6979
7830
  function WhatsNewCard({
6980
7831
  getUnseenEntries,
6981
7832
  announcementTabs,
@@ -6986,34 +7837,34 @@ function WhatsNewCard({
6986
7837
  if (unseen.length === 0) return null;
6987
7838
  const display = unseen.slice(0, 3);
6988
7839
  const badgeFieldMap = new Map(announcementTabs.map((t2) => [t2.id, t2.display?.badgeField]));
6989
- return /* @__PURE__ */ jsxs12("div", { className: "hw-whats-new", children: [
6990
- /* @__PURE__ */ jsxs12("div", { className: "hw-whats-new-header", children: [
6991
- /* @__PURE__ */ jsx17("span", { className: "hw-whats-new-title", children: resolveLabel2("widget.whats_new") }),
6992
- /* @__PURE__ */ jsxs12("button", { type: "button", className: "hw-whats-new-view-all", onClick: onViewAll, children: [
7840
+ return /* @__PURE__ */ jsxs14("div", { className: "hw-whats-new", children: [
7841
+ /* @__PURE__ */ jsxs14("div", { className: "hw-whats-new-header", children: [
7842
+ /* @__PURE__ */ jsx19("span", { className: "hw-whats-new-title", children: resolveLabel2("widget.whats_new") }),
7843
+ /* @__PURE__ */ jsxs14("button", { type: "button", className: "hw-whats-new-view-all", onClick: onViewAll, children: [
6993
7844
  resolveLabel2("widget.view_all"),
6994
7845
  " \u2192"
6995
7846
  ] })
6996
7847
  ] }),
6997
- /* @__PURE__ */ jsx17("div", { className: "hw-whats-new-list", children: display.map((entry) => {
7848
+ /* @__PURE__ */ jsx19("div", { className: "hw-whats-new-list", children: display.map((entry) => {
6998
7849
  const badgeField = badgeFieldMap.get(entry.tabId);
6999
- return /* @__PURE__ */ jsxs12(
7850
+ return /* @__PURE__ */ jsxs14(
7000
7851
  "button",
7001
7852
  {
7002
7853
  type: "button",
7003
7854
  className: "hw-whats-new-item",
7004
7855
  onClick: () => onSelect(entry.slug, entry.tabId),
7005
7856
  children: [
7006
- badgeField && entry.customFields[badgeField] && /* @__PURE__ */ jsxs12("div", { className: "hw-whats-new-item-top", children: [
7007
- /* @__PURE__ */ jsx17("span", { className: "hw-whats-new-badge", children: entry.customFields[badgeField] }),
7008
- entry.publishedAt && /* @__PURE__ */ jsx17("span", { className: "hw-whats-new-time", children: formatRelativeTime(entry.publishedAt) })
7857
+ badgeField && entry.customFields[badgeField] && /* @__PURE__ */ jsxs14("div", { className: "hw-whats-new-item-top", children: [
7858
+ /* @__PURE__ */ jsx19("span", { className: "hw-whats-new-badge", children: entry.customFields[badgeField] }),
7859
+ entry.publishedAt && /* @__PURE__ */ jsx19("span", { className: "hw-whats-new-time", children: formatRelativeTime(entry.publishedAt) })
7009
7860
  ] }),
7010
- /* @__PURE__ */ jsxs12("div", { className: "hw-whats-new-item-title", children: [
7861
+ /* @__PURE__ */ jsxs14("div", { className: "hw-whats-new-item-title", children: [
7011
7862
  entry.title,
7012
- !badgeField && entry.publishedAt && /* @__PURE__ */ jsx17("span", { className: "hw-whats-new-time-inline", children: formatRelativeTime(entry.publishedAt) })
7863
+ !badgeField && entry.publishedAt && /* @__PURE__ */ jsx19("span", { className: "hw-whats-new-time-inline", children: formatRelativeTime(entry.publishedAt) })
7013
7864
  ] }),
7014
7865
  entry.body && (() => {
7015
7866
  const clean = stripMarkdown(entry.body);
7016
- return /* @__PURE__ */ jsx17("div", { className: "hw-whats-new-item-body", children: clean.length > 80 ? `${clean.slice(0, 80)}\u2026` : clean });
7867
+ return /* @__PURE__ */ jsx19("div", { className: "hw-whats-new-item-body", children: clean.length > 80 ? `${clean.slice(0, 80)}\u2026` : clean });
7017
7868
  })()
7018
7869
  ]
7019
7870
  },
@@ -7046,10 +7897,10 @@ function styleInject(css, { insertAt } = {}) {
7046
7897
  }
7047
7898
 
7048
7899
  // src/themed/styles.css
7049
- 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 :is(.hw-header-bot-icon, .hw-hero-bot-icon, .hw-conv-card-avatar, .hw-event-avatar, .hw-bubble-icon--bot):has(> .hw-agent-custom) {\n border-radius: 50%;\n background: transparent;\n padding: 0;\n}\n.hw-widget :focus-visible {\n outline: 2px solid var(--hw-primary);\n outline-offset: 2px;\n}\n.hw-widget :focus:not(:focus-visible) {\n outline: none;\n}\n.hw-widget {\n position: fixed;\n bottom: 20px;\n right: var(--hw-position-right, 20px);\n left: var(--hw-position-left, auto);\n z-index: 999999;\n font-family: var(--hw-font);\n}\n@keyframes hw-bubble-enter {\n from {\n opacity: 0;\n transform: scale(0.6);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n.hw-bubble {\n width: 48px;\n height: 48px;\n border-radius: 14px;\n background: var(--hw-primary);\n color: white;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;\n position: relative;\n overflow: visible;\n animation: hw-bubble-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n}\n.hw-bubble--rounded {\n border-radius: 14px;\n}\n.hw-bubble--square {\n border-radius: 8px;\n}\n.hw-bubble--pill {\n border-radius: 24px;\n}\n.hw-bubble--launcher-bubble,\n.hw-bubble--launcher-help {\n width: auto;\n padding: 0 16px 0 12px;\n gap: 8px;\n border-radius: 24px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--square,\n.hw-bubble--launcher-help.hw-bubble--square {\n border-radius: 8px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--rounded,\n.hw-bubble--launcher-help.hw-bubble--rounded {\n border-radius: 14px;\n}\n.hw-bubble-label {\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n line-height: 1;\n position: static;\n opacity: 1;\n transform: none;\n}\n.hw-bubble--launcher-bubble .hw-bubble-icon,\n.hw-bubble--launcher-help .hw-bubble-icon {\n position: static;\n}\n.hw-bubble:hover {\n transform: scale(1.05);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n}\n.hw-bubble:active {\n transform: scale(0.95);\n}\n.hw-bubble--open {\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n}\n.hw-bubble:focus-visible {\n outline: 2px solid white;\n outline-offset: 2px;\n}\n.hw-bubble-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;\n}\n.hw-bubble-icon svg:not(.hw-agent-custom svg) {\n width: 22px;\n height: 22px;\n}\n.hw-bubble-icon--hidden {\n transform: scale(0.3) rotate(90deg);\n opacity: 0;\n}\n.hw-bubble-icon--bot {\n}\n.hw-bubble--avatar .hw-bubble-icon--bot {\n width: 100%;\n height: 100%;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img {\n width: 100%;\n height: 100%;\n border-radius: 0;\n}\n.hw-agent-img.hw-agent-img--logo {\n object-fit: contain;\n padding: 10px;\n box-sizing: border-box;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img.hw-agent-img--logo {\n padding: 10px;\n box-sizing: border-box;\n object-fit: contain;\n}\n.hw-bubble-icon--close svg {\n width: 22px;\n height: 22px;\n}\n.hw-bubble-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n border-radius: 10px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n border: 2px solid white;\n animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes hw-badge-pop {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n.hw-bubble-badge::after {\n content: "";\n position: absolute;\n inset: -2px;\n border-radius: inherit;\n background: var(--hw-primary);\n opacity: 0;\n animation: hw-badge-pulse 2s ease-out infinite;\n}\n@keyframes hw-badge-pulse {\n 0% {\n opacity: 0.5;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(1.8);\n }\n}\n.hw-window {\n position: absolute;\n bottom: 72px;\n right: var(--hw-window-right, 0);\n left: var(--hw-window-left, auto);\n width: 440px;\n height: 640px;\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n border-radius: var(--hw-radius);\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n animation: hw-window-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hw-window--reading {\n width: min(720px, calc(100vw - 40px));\n height: min(800px, calc(100vh - 112px));\n}\n:host([data-hw-mode="mobile"]) .hw-window,\n:host([data-hw-mode="mobile"]) .hw-window--reading {\n position: fixed;\n inset: 0;\n width: 100%;\n height: var(--hw-visible-height, 100%);\n border-radius: 0;\n box-shadow: none;\n animation: none;\n}\n:host([data-hw-mode="mobile"]) .hw-hero {\n background-color: color-mix(in srgb, var(--hw-primary) 60%, black);\n}\n:host([data-hw-mode="mobile"]) .hw-bubble {\n display: none;\n}\n.hw-window[data-hw-keyboard] .hw-composer {\n padding-bottom: 8px;\n}\n.hw-window[data-hw-keyboard] .hw-powered {\n display: none;\n}\n@keyframes hw-window-open {\n from {\n opacity: 0;\n transform: translateY(12px) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n.hw-window--closing {\n animation: hw-window-close 0.2s ease forwards;\n}\n@keyframes hw-window-close {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.98);\n }\n}\n.hw-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-window,\n .hw-window--closing,\n .hw-content,\n .hw-msg,\n .hw-bubble,\n .hw-bubble-icon,\n .hw-bubble-badge,\n .hw-bubble-badge::after,\n .hw-typing-dot,\n .hw-loading-dot {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n}\n.hw-hero {\n flex-shrink: 0;\n background:\n linear-gradient(\n 160deg,\n color-mix(in srgb, var(--hw-primary) 60%, black) 0%,\n var(--hw-primary) 50%,\n color-mix(in srgb, var(--hw-primary) 40%, black) 100%);\n color: white;\n padding: 20px 22px 40px;\n}\n.hw-hero-top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 16px;\n}\n.hw-hero-close {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n border: none;\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.6);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s, color 0.15s;\n}\n.hw-hero-close:hover {\n background: rgba(255, 255, 255, 0.2);\n color: white;\n}\n.hw-hero-close:active {\n transform: scale(0.92);\n transition:\n transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n background 0.15s,\n color 0.15s;\n}\n.hw-hero-close svg {\n width: 20px;\n height: 20px;\n}\n.hw-hero-bot-icon {\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n}\n.hw-hero-bot-icon > svg,\n.hw-hero-bot-icon > .hw-agent-icon > svg {\n width: 32px;\n height: 32px;\n}\n.hw-hero-bot-icon .hw-agent-img,\n.hw-hero-bot-icon .hw-agent-icon {\n border-radius: inherit;\n overflow: hidden;\n object-fit: contain;\n}\n.hw-hero-greeting {\n font-size: 26px;\n font-weight: 700;\n line-height: 1.15;\n margin-bottom: 6px;\n}\n.hw-hero-greeting-name {\n font-weight: 300;\n}\n.hw-hero-greeting-question {\n font-weight: 700;\n}\n.hw-hero-subtitle {\n font-size: 15px;\n color: rgba(255, 255, 255, 0.5);\n line-height: 1.35;\n}\n.hw-sheet {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n background: #ffffff;\n border-radius: 20px 20px 0 0;\n margin-top: -24px;\n box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);\n position: relative;\n z-index: 1;\n}\n.hw-sheet-inner {\n padding: 20px 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.hw-header {\n display: flex;\n align-items: center;\n padding: 14px 12px 14px 16px;\n background: var(--hw-primary);\n color: white;\n flex-shrink: 0;\n gap: 10px;\n}\n.hw-header--sub {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header-back {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.15s, background 0.15s;\n flex-shrink: 0;\n}\n.hw-header-back svg {\n width: 18px;\n height: 18px;\n}\n.hw-header-back:hover {\n color: var(--hw-text);\n background: var(--hw-bg-subtle);\n}\n.hw-header-identity {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 0;\n}\n.hw-header-bot-icon {\n width: 32px;\n height: 32px;\n flex-shrink: 0;\n color: var(--hw-text);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9px;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));\n}\n.hw-header-bot-icon > svg,\n.hw-header-bot-icon > .hw-agent-icon > svg {\n width: 24px;\n height: 24px;\n}\n.hw-header-bot-icon--team {\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n}\n.hw-header-agent-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n.hw-header-bot-icon .hw-agent-img,\n.hw-header-bot-icon .hw-agent-icon {\n border-radius: inherit;\n overflow: hidden;\n}\n.hw-header-bot-icon .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-widget[data-has-avatar=true] {\n --hw-agent-bg-default: var(--hw-primary);\n --hw-agent-fit-default: contain;\n --hw-agent-pad-default: 6px;\n}\n.hw-header-agent-initials {\n font-size: 11px;\n font-weight: 600;\n line-height: 1;\n}\n.hw-header-info {\n flex: 1;\n min-width: 0;\n}\n.hw-header-name {\n font-size: 15px;\n font-weight: 600;\n line-height: 1.3;\n}\n.hw-header-status {\n font-size: 11px;\n color: var(--hw-text-3);\n line-height: 1.3;\n}\n.hw-header-close {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n flex-shrink: 0;\n}\n.hw-header-close svg {\n width: 20px;\n height: 20px;\n}\n.hw-header-close:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n}\n.hw-header-close:active {\n transform: scale(0.92);\n}\n.hw-header--centered {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header--centered .hw-header-title {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n max-width: calc(100% - 88px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n}\n.hw-header-spacer {\n width: 28px;\n flex-shrink: 0;\n}\n.hw-header--messages {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header-title {\n font-size: 16px;\n font-weight: 600;\n}\n.hw-header-actions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.hw-header-action {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-header-action svg {\n width: 16px;\n height: 16px;\n}\n.hw-header-action:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n}\n.hw-header-action:active {\n transform: scale(0.94);\n}\n.hw-card {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 14px 16px;\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n cursor: pointer;\n transition: box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n text-align: left;\n color: var(--hw-text);\n font-family: inherit;\n}\n.hw-card:hover {\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);\n transform: translateY(-1px);\n}\n.hw-card:active {\n transform: translateY(0) scale(0.99);\n transition-duration: 120ms;\n}\n.hw-card-body {\n flex: 1;\n min-width: 0;\n}\n.hw-card-title {\n font-size: 14px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--hw-text);\n}\n.hw-card-meta {\n font-size: 12px;\n color: var(--hw-text-3);\n line-height: 1.3;\n margin-top: 1px;\n}\n.hw-card-arrow {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--hw-primary);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n.hw-card-arrow svg {\n width: 14px;\n height: 14px;\n}\n.hw-msgs-tab {\n flex: 1;\n overflow-y: auto;\n padding: 12px 16px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-recent-card {\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n overflow: hidden;\n}\n.hw-recent-header {\n font-size: 12px;\n font-weight: 600;\n color: var(--hw-text-2);\n padding: 12px 14px 0;\n}\n.hw-recent-row {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 14px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n position: relative;\n}\n.hw-recent-row:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n.hw-recent-row:active {\n transform: scale(0.995);\n}\n.hw-recent-row--last {\n border-bottom: none;\n}\n.hw-recent-row .hw-conv-card-avatar {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n}\n.hw-recent-row .hw-conv-card-avatar svg:not(.hw-agent-custom svg) {\n width: 18px;\n height: 18px;\n}\n.hw-recent-row .hw-conv-card-name {\n font-size: 13px;\n}\n.hw-recent-row .hw-conv-card-preview {\n font-size: 12px;\n}\n.hw-recent-row--unread .hw-conv-card-name {\n color: var(--hw-text);\n}\n.hw-recent-row--unread .hw-conv-card-time {\n color: var(--hw-primary);\n font-weight: 500;\n}\n.hw-recent-row-badge {\n min-width: 18px;\n height: 18px;\n border-radius: 9px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n.hw-recent-see-all {\n display: block;\n width: 100%;\n padding: 10px 14px;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-text);\n background: none;\n border: none;\n border-top: 1px solid var(--hw-border);\n cursor: pointer;\n font-family: inherit;\n transition: background 0.1s;\n}\n.hw-recent-see-all:hover {\n background: rgba(0, 0, 0, 0.02);\n}\n.hw-conv-card {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 14px 16px;\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n cursor: pointer;\n transition: box-shadow 0.15s, transform 0.1s;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n}\n.hw-conv-card:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.hw-conv-card:active {\n transform: scale(0.99);\n}\n.hw-conv-card-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hw-conv-card-avatar {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, var(--hw-bg-subtle)));\n color: var(--hw-text-3);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-conv-card-avatar svg:not(.hw-agent-custom svg) {\n width: 20px;\n height: 20px;\n}\n.hw-conv-card-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-conv-card-avatar .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-conv-card-avatar--team {\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n}\n.hw-conv-card-avatar-initials {\n font-size: 12px;\n font-weight: 600;\n line-height: 1;\n letter-spacing: 0.02em;\n}\n.hw-conv-card-content {\n flex: 1;\n min-width: 0;\n}\n.hw-conv-card-top {\n display: flex;\n align-items: baseline;\n gap: 8px;\n}\n.hw-conv-card-name {\n flex: 1;\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-conv-card-time {\n font-size: 11px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n.hw-conv-card-preview {\n font-size: 13px;\n color: var(--hw-text-2);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 1.4;\n margin-top: 1px;\n}\n.hw-conv-card--unread .hw-conv-card-name {\n color: var(--hw-text);\n}\n.hw-conv-card--unread .hw-conv-card-time {\n color: var(--hw-primary);\n font-weight: 500;\n}\n.hw-conv-card-badge {\n position: absolute;\n top: 12px;\n right: 12px;\n min-width: 18px;\n height: 18px;\n border-radius: 9px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n font-variant-numeric: tabular-nums;\n}\n.hw-empty-state {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n text-align: center;\n}\n.hw-empty-icon-wrap {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--hw-bg-subtle);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n color: var(--hw-text-3);\n}\n.hw-empty-icon-wrap svg {\n width: 24px;\n height: 24px;\n}\n.hw-empty-title {\n font-size: 15px;\n font-weight: 600;\n color: var(--hw-text);\n margin-bottom: 4px;\n}\n.hw-empty-desc {\n font-size: 13px;\n color: var(--hw-text-3);\n margin-bottom: 20px;\n}\n.hw-empty-btn {\n padding: 8px 20px;\n border-radius: 10px;\n background: var(--hw-primary);\n color: white;\n border: none;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n font-family: inherit;\n transition: background 0.15s;\n}\n.hw-empty-btn:hover {\n background: var(--hw-primary-hover);\n}\n.hw-tabs {\n display: flex;\n border-top: 1px solid var(--hw-border);\n flex-shrink: 0;\n background: var(--hw-bg-subtle);\n}\n.hw-tabs-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n padding: 8px 0;\n border: none;\n background: none;\n cursor: pointer;\n font-family: inherit;\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-text-3);\n transition: color 0.15s;\n}\n.hw-tabs-item svg {\n width: 22px;\n height: 22px;\n overflow: visible;\n}\n.hw-tabs-item--active {\n color: var(--hw-text);\n}\n.hw-tabs-item:hover {\n color: var(--hw-text-2);\n}\n.hw-tabs-item:active {\n transform: scale(0.94);\n transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), color 0.15s;\n}\n.hw-tabs-icon-wrap {\n position: relative;\n display: inline-flex;\n}\n.hw-tabs-badge {\n position: absolute;\n top: -6px;\n right: -10px;\n min-width: 16px;\n height: 16px;\n border-radius: 8px;\n background: var(--hw-primary);\n color: white;\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n font-variant-numeric: tabular-nums;\n}\n.hw-messages {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px 14px 8px;\n background: var(--hw-bg-subtle);\n display: flex;\n flex-direction: column;\n gap: 14px;\n overscroll-behavior: contain;\n min-width: 0;\n scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n scrollbar-width: thin;\n}\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-window:has(.hw-powered) .hw-composer {\n padding-bottom: 8px;\n }\n .hw-window:has(.hw-powered) .hw-tabs {\n padding-bottom: 0;\n }\n .hw-header-close,\n .hw-header-back,\n .hw-header-action {\n width: 34px;\n height: 34px;\n }\n .hw-composer-send {\n width: 40px;\n height: 40px;\n }\n .hw-window ~ .hw-bubble {\n display: none;\n }\n .hw-messages {\n padding: 12px 14px;\n }\n .hw-msg {\n max-width: 82%;\n }\n .hw-msg--ai {\n max-width: 100%;\n }\n}\n.hw-preview {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n width: 300px;\n max-width: calc(100vw - 40px);\n background: var(--hw-bg);\n border: 1px solid var(--hw-border);\n border-radius: 16px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n animation: hw-preview-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.15s, box-shadow 0.15s;\n}\n.hw-preview.hw-preview--anchored {\n position: static;\n bottom: auto;\n right: auto;\n width: 100%;\n max-width: 100%;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar {\n background: none;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar img,\n.hw-preview.hw-preview--anchored .hw-preview-avatar svg:not(.hw-agent-custom svg) {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.hw-preview:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n@keyframes hw-preview-in {\n from {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n@keyframes hw-preview-out {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n}\n.hw-preview-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px 0;\n}\n.hw-preview-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background:\n linear-gradient(\n 135deg,\n var(--hw-primary),\n color-mix(in srgb, var(--hw-primary) 50%, black));\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-preview-avatar svg:not(.hw-agent-custom svg) {\n width: 16px;\n height: 16px;\n}\n.hw-preview-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n.hw-preview-name {\n font-size: 13px;\n font-weight: 600;\n color: var(--hw-text);\n flex: 1;\n}\n.hw-preview-close {\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: background 0.15s, color 0.15s;\n flex-shrink: 0;\n}\n.hw-preview-close:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text-2);\n}\n.hw-preview-close:active {\n transform: scale(0.90);\n transition:\n transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n background 0.15s,\n color 0.15s;\n}\n.hw-preview-close svg {\n width: 12px;\n height: 12px;\n}\n.hw-preview-body {\n padding: 4px 14px;\n font-size: 14px;\n line-height: 1.45;\n color: var(--hw-text-2);\n}\n.hw-preview-body:first-of-type {\n padding-top: 8px;\n}\n.hw-preview-body:last-child {\n padding-bottom: 14px;\n}\n.hw-preview-footer {\n margin-top: 2px;\n padding: 8px 14px 12px;\n border-top: 1px solid var(--hw-border);\n font-size: 11px;\n line-height: 1.3;\n color: var(--hw-text-2);\n opacity: 0.65;\n}\n.hw-preview-prompt {\n padding: 2px 14px 6px;\n font-size: 14px;\n font-weight: 500;\n color: var(--hw-text-1);\n}\n.hw-preview-quick-replies {\n padding: 0 14px 14px;\n margin-top: 0;\n}\n.hw-awaiting {\n margin-top: 2px;\n padding-left: 44px;\n font-size: 11px;\n line-height: 1.4;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-preview-dock {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 8px;\n pointer-events: none;\n}\n.hw-preview-dock > .hw-preview,\n.hw-preview-dock > .hw-preview-stack {\n position: relative;\n bottom: auto;\n right: auto;\n pointer-events: auto;\n}\n.hw-preview--closing {\n animation: hw-preview-out 0.2s ease-in forwards;\n}\n.hw-preview-stack {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-preview-stack .hw-preview {\n position: relative;\n bottom: auto;\n right: auto;\n}\n.hw-preview-stack.hw-preview-stack--anchored {\n position: static;\n bottom: auto;\n right: auto;\n width: 100%;\n}\n.hw-preview-more {\n align-self: flex-end;\n padding: 4px 10px;\n border: 0;\n border-radius: 999px;\n background: var(--hw-bg);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--hw-border);\n color: var(--hw-text-2);\n font: inherit;\n font-size: 12px;\n line-height: 1.4;\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n}\n.hw-preview-more:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n}\n.hw-preview--announcement {\n width: 340px;\n}\n.hw-preview--announcement .hw-preview-body--title {\n font-weight: 600;\n color: var(--hw-text);\n font-size: 15px;\n line-height: 1.3;\n padding-top: 10px;\n}\n.hw-preview--announcement .hw-preview-body--desc {\n font-size: 13px;\n color: var(--hw-text-2);\n line-height: 1.5;\n padding-bottom: 16px;\n}\n.hw-announcement-badge {\n display: inline-block;\n margin: 8px 14px 0;\n padding: 2px 8px;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 10%, transparent);\n border-radius: 4px;\n}\n.hw-whats-new {\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n overflow: hidden;\n}\n.hw-whats-new-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 14px 0;\n}\n.hw-whats-new-title {\n font-size: 12px;\n font-weight: 600;\n color: var(--hw-text-2);\n}\n.hw-whats-new-view-all {\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-primary);\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-family: inherit;\n}\n.hw-whats-new-view-all:hover {\n opacity: 0.8;\n}\n.hw-whats-new-list {\n display: flex;\n flex-direction: column;\n}\n.hw-whats-new-item {\n display: flex;\n flex-direction: column;\n gap: 2px;\n width: 100%;\n padding: 10px 14px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n transition: background-color 140ms ease;\n}\n.hw-whats-new-item:last-child {\n border-bottom: none;\n}\n.hw-whats-new-item:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n.hw-whats-new-item-top {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.hw-whats-new-badge {\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--hw-primary);\n}\n.hw-whats-new-time {\n font-size: 11px;\n color: var(--hw-text-3);\n margin-left: auto;\n}\n.hw-whats-new-item-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--hw-text);\n line-height: 1.3;\n display: flex;\n align-items: baseline;\n gap: 8px;\n}\n.hw-whats-new-time-inline {\n font-size: 11px;\n font-weight: 400;\n color: var(--hw-text-3);\n margin-left: auto;\n flex-shrink: 0;\n}\n.hw-whats-new-item-body {\n font-size: 12px;\n color: var(--hw-text-2);\n line-height: 1.4;\n}\n.hw-tabs-dot {\n position: absolute;\n top: -2px;\n right: -6px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--hw-primary);\n animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.hw-bubble-badge-dot {\n display: block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: white;\n}\n.hw-content-search {\n padding: 10px 16px;\n}\n.hw-content-search-box {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--hw-bg);\n border: 1px solid var(--hw-border-md);\n border-radius: 10px;\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-content-search-box:focus-within {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-content-search-input {\n flex: 1;\n border: none !important;\n outline: none !important;\n box-shadow: none !important;\n background: none;\n font-size: 13px;\n color: var(--hw-text-1);\n font-family: inherit;\n line-height: 1;\n -webkit-appearance: none;\n}\n.hw-content-search-input:focus,\n.hw-content-search-input:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n}\n.hw-content-search-input::placeholder {\n color: var(--hw-text-3);\n}\n.hw-content-search-icon {\n width: 15px;\n height: 15px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n}\n.hw-content-list {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.hw-content-entries {\n flex: 1;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n.hw-content-entry {\n display: block;\n width: 100%;\n padding: 14px 16px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n transition: background-color 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n}\n.hw-content-entry:hover {\n background: var(--hw-bg-hover);\n}\n.hw-content-entry:active {\n background: var(--hw-border);\n}\n.hw-content-entry:last-child {\n border-bottom: none;\n}\n.hw-content-entry-main {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hw-content-entry-text {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 3px;\n}\n.hw-content-entry-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text-1);\n line-height: 1.3;\n}\n.hw-content-entry-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.hw-content-entry-meta {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 2px;\n}\n.hw-content-entry-badge {\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-text-3);\n background: var(--hw-bg-hover);\n padding: 1px 6px;\n border-radius: 4px;\n}\n.hw-content-entry-date {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-content-entry-chevron {\n width: 16px;\n height: 16px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n opacity: 0.5;\n}\n.hw-content-detail {\n padding: 16px;\n overflow-y: auto;\n overscroll-behavior: contain;\n flex: 1;\n min-height: 0;\n}\n.hw-content-detail-header {\n margin-bottom: 16px;\n}\n.hw-content-detail-title {\n font-size: 17px;\n font-weight: 700;\n color: var(--hw-text-1);\n margin: 0 0 6px;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.hw-content-detail-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n.hw-content-detail-date {\n font-size: 12px;\n color: var(--hw-text-3);\n}\n.hw-content-detail-body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--hw-text-1);\n}\n.hw-markdown h1 {\n font-size: 17px;\n font-weight: 700;\n margin: 0;\n}\n.hw-markdown h2 {\n font-size: 15px;\n font-weight: 600;\n margin: 0;\n}\n.hw-markdown h3 {\n font-size: 14px;\n font-weight: 600;\n margin: 0;\n}\n.hw-markdown p {\n margin: 0;\n}\n.hw-markdown p:empty,\n.hw-markdown div:empty,\n.hw-markdown p:has(> br:only-child),\n.hw-markdown div:has(> br:only-child) {\n display: none;\n}\n.hw-markdown > * + * {\n margin-top: 12px;\n}\n.hw-markdown > * + h1,\n.hw-markdown > * + h2 {\n margin-top: 20px;\n}\n.hw-markdown > * + h3 {\n margin-top: 16px;\n}\n.hw-markdown > h1 + *,\n.hw-markdown > h2 + *,\n.hw-markdown > h3 + * {\n margin-top: 8px;\n}\n.hw-markdown > *:first-child {\n margin-top: 0;\n}\n.hw-markdown > *:last-child {\n margin-bottom: 0;\n}\n.hw-markdown > br {\n display: none;\n}\n.hw-markdown ul,\n.hw-markdown ol {\n margin: 0;\n padding-left: 20px;\n}\n.hw-markdown li {\n margin: 4px 0;\n}\n.hw-markdown code {\n font-family:\n ui-monospace,\n "SF Mono",\n monospace;\n font-size: 12px;\n background: var(--hw-bg-hover);\n padding: 1px 5px;\n border-radius: 4px;\n}\n.hw-table-wrap {\n margin: 10px 0;\n overflow-x: auto;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n border-radius: 10px;\n}\n.hw-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n.hw-table th {\n text-align: left;\n font-weight: 600;\n font-size: 12px;\n padding: 8px 12px;\n background: var(--hw-bg-hover, #f5f5f4);\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n}\n.hw-table td {\n padding: 8px 12px;\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n vertical-align: top;\n}\n.hw-table tbody tr:last-child td {\n border-bottom: none;\n}\n.hw-code {\n margin: 10px 0;\n border-radius: 10px;\n overflow: hidden;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n background: var(--hw-bg-hover, #f5f5f4);\n font-family:\n ui-monospace,\n "SF Mono",\n "Menlo",\n monospace;\n}\n.hw-code-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n padding: 7px 8px 7px 12px;\n font-size: 11px;\n color: var(--hw-text-2, #6b7280);\n background: rgba(0, 0, 0, 0.03);\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n}\n.hw-code-lang {\n text-transform: lowercase;\n letter-spacing: 0.02em;\n font-weight: 500;\n}\n.hw-code-actions {\n display: inline-flex;\n align-items: center;\n gap: 1px;\n}\n.hw-code-action {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n padding: 0;\n font-family: inherit;\n color: var(--hw-text-2, #6b7280);\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n cursor: pointer;\n opacity: 0.62;\n transition:\n background 120ms ease,\n color 120ms ease,\n opacity 120ms ease,\n scale 120ms ease;\n}\n.hw-code-action:hover {\n color: var(--hw-text, #111);\n background: rgba(0, 0, 0, 0.06);\n opacity: 1;\n}\n.hw-code-action:active {\n scale: 0.96;\n}\n.hw-code-action svg {\n width: 13px;\n height: 13px;\n}\n.hw-code-copy-icon,\n.hw-code-check-icon {\n position: absolute;\n inset: 50% auto auto 50%;\n transition:\n opacity 180ms cubic-bezier(0.2, 0, 0, 1),\n scale 180ms cubic-bezier(0.2, 0, 0, 1),\n filter 180ms cubic-bezier(0.2, 0, 0, 1);\n translate: -50% -50%;\n}\n.hw-code-check-icon {\n filter: blur(4px);\n opacity: 0;\n scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-copy-icon {\n filter: blur(4px);\n opacity: 0;\n scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-check-icon {\n filter: blur(0);\n opacity: 1;\n scale: 1;\n}\n.hw-code-copy-label {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n.hw-code-copy--copied {\n color: #16a34a;\n}\n.hw-code-copy--failed {\n color: #dc2626;\n}\n.hw-code pre {\n margin: 0;\n padding: 10px 12px;\n background: transparent;\n border-radius: 0;\n overflow-x: auto;\n max-width: 100%;\n max-height: 320px;\n scrollbar-color: rgba(0, 0, 0, 0.22) transparent;\n scrollbar-width: thin;\n}\n.hw-code pre::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n.hw-code pre::-webkit-scrollbar-track {\n background: transparent;\n}\n.hw-code pre::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.18);\n background-clip: content-box;\n border: 3px solid transparent;\n border-radius: 999px;\n}\n.hw-code pre::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.28);\n background-clip: content-box;\n}\n.hw-code pre code {\n display: block;\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.55;\n white-space: pre;\n color: var(--hw-text, #111);\n}\n@media (prefers-color-scheme: dark) {\n .hw-code {\n background: rgba(255, 255, 255, 0.04);\n border-color: rgba(255, 255, 255, 0.08);\n }\n .hw-code-header {\n background: rgba(255, 255, 255, 0.03);\n border-bottom-color: rgba(255, 255, 255, 0.06);\n }\n .hw-code-action:hover,\n .hw-code-action:focus-visible {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-code pre {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n }\n .hw-code pre::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.22);\n background-clip: content-box;\n }\n .hw-code pre::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n }\n}\n.hw-markdown pre {\n margin: 8px 0;\n padding: 10px 12px;\n background: var(--hw-bg-hover);\n border-radius: 8px;\n overflow-x: auto;\n max-width: 100%;\n}\n.hw-markdown pre code {\n display: block;\n background: transparent;\n padding: 0;\n border-radius: 0;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n word-break: normal;\n color: inherit;\n}\n.hw-msg-bubble pre {\n margin: 6px 0;\n padding: 8px 10px;\n background: rgba(0, 0, 0, 0.06);\n border-radius: 6px;\n overflow-x: auto;\n max-width: 100%;\n}\n.hw-msg-bubble pre code {\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n}\n.hw-msg-bubble .hw-code pre {\n margin: 0;\n padding: 10px 12px;\n background: transparent;\n border-radius: 0;\n}\n.hw-msg-bubble .hw-code pre code {\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.55;\n}\n.hw-msg--team .hw-msg-bubble pre,\n.hw-msg--visitor .hw-msg-bubble pre {\n background: rgba(255, 255, 255, 0.12);\n}\n.hw-markdown blockquote {\n margin: 0 0 12px;\n padding: 8px 12px;\n border-left: 3px solid var(--hw-border);\n color: var(--hw-text-2);\n font-style: italic;\n}\n.hw-markdown a {\n color: var(--hw-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.hw-markdown img {\n max-width: 100%;\n border-radius: 8px;\n margin: 8px 0;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-markdown hr {\n border: none;\n border-top: 1px solid var(--hw-border);\n margin: 16px 0;\n}\n.hw-content-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n.hw-content-empty-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text-1);\n margin-bottom: 4px;\n}\n.hw-content-empty-desc {\n font-size: 12px;\n color: var(--hw-text-3);\n}\n.hw-content-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n.hw-content-load-more {\n display: block;\n width: 100%;\n padding: 10px;\n border: none;\n background: none;\n color: var(--hw-primary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n text-align: center;\n}\n.hw-content-load-more:hover {\n background: var(--hw-bg-hover);\n}\n.hw-content-load-more:disabled {\n opacity: 0.5;\n cursor: default;\n}\n@media (hover: none) {\n .hw-composer-preview-remove {\n opacity: 0.7;\n }\n}\n.hw-composer--dragging .hw-composer-box {\n border-color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 4%, transparent);\n}\n.hw-composer-drop-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--hw-bg) 90%, transparent);\n border: 2px dashed var(--hw-primary);\n border-radius: 12px;\n z-index: 10;\n pointer-events: none;\n animation: hw-drop-pulse 1.5s ease-in-out infinite;\n}\n.hw-composer-drop-text {\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-primary);\n}\n@keyframes hw-drop-pulse {\n 0%, 100% {\n opacity: 0.8;\n }\n 50% {\n opacity: 1;\n }\n}\n.hw-disconnect {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n padding: 7px 14px;\n background: var(--hw-bg-hover);\n color: var(--hw-text-2);\n font-size: 11.5px;\n font-weight: 500;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 0;\n animation: hw-disconnect-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);\n}\n@keyframes hw-disconnect-in {\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-disconnect-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-lead {\n flex: none;\n display: grid;\n place-items: center;\n width: 32px;\n height: 32px;\n margin-left: -8px;\n}\n.hw-dock-actions {\n flex: none;\n display: flex;\n align-items: center;\n gap: 2px;\n margin-bottom: 1px;\n}\n.hw-dock-tool {\n display: grid;\n place-items: center;\n width: 30px;\n height: 30px;\n border: 0;\n border-radius: 50%;\n background: transparent;\n color: color-mix(in srgb, var(--hw-dock-on-surface) 52%, transparent);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n}\n.hw-dock-tool:hover:not(:disabled) {\n background: color-mix(in srgb, var(--hw-dock-on-surface) 8%, transparent);\n color: var(--hw-dock-on-surface);\n}\n.hw-dock-tool:disabled {\n opacity: 0.4;\n cursor: default;\n}\n.hw-dock-tool[data-active=true] {\n color: #e11d48;\n background: rgba(225, 29, 72, 0.12);\n animation: hw-dock-listening 1.4s ease-in-out infinite;\n}\n@keyframes hw-dock-listening {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(225, 29, 72, 0);\n }\n}\n.hw-dock-send:disabled {\n opacity: 1;\n background: color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent);\n color: color-mix(in srgb, var(--hw-dock-on-surface) 38%, transparent);\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-tool[data-active=true] {\n animation: none;\n }\n .hw-dock-bar {\n transition: none;\n }\n}\n.hw-dock-input:focus,\n.hw-dock-input:focus-visible {\n outline: none;\n box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-powered {\n display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-disconnect {\n border-radius: 20px 20px 0 0;\n}\n.hw-msg-meta {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.hw-msg-author {\n font-weight: 550;\n}\n.hw-msg-meta-sep {\n opacity: 0.55;\n}\n.hw-header-actions {\n position: relative;\n display: flex;\n align-items: center;\n gap: 2px;\n}\n.hw-header-menu-btn {\n display: grid;\n place-items: center;\n width: 30px;\n height: 30px;\n border: 0;\n border-radius: 8px;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text-2, var(--hw-text-muted));\n transition: background 0.15s, color 0.15s;\n}\n.hw-header-menu-btn:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n}\n.hw-header-menu {\n position: absolute;\n top: 36px;\n right: 0;\n z-index: 6;\n min-width: 236px;\n max-width: 288px;\n padding: 5px;\n border-radius: 14px;\n background: var(--hw-bg);\n color: var(--hw-text);\n box-shadow: 0 0 0 1px var(--hw-border), 0 12px 32px -10px rgba(0, 0, 0, 0.32);\n animation: hw-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n}\n@keyframes hw-menu-in {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-header-menu button {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 9px 10px;\n border: 0;\n border-radius: 9px;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text);\n font: inherit;\n font-size: 13px;\n text-align: left;\n transition: background 0.14s;\n}\n.hw-header-menu button:hover {\n background: var(--hw-bg-hover);\n}\n.hw-header-menu button svg {\n flex: none;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu button:hover svg {\n color: var(--hw-brand, var(--hw-primary));\n}\n.hw-header-menu-convs {\n display: flex;\n flex-direction: column;\n max-height: 168px;\n overflow-y: auto;\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-menu button.hw-header-menu-conv {\n flex-direction: column;\n align-items: stretch;\n gap: 2px;\n padding: 8px 10px;\n}\n.hw-header-menu button.hw-header-menu-conv[data-active=true] {\n background: var(--hw-bg-hover);\n}\n.hw-header-menu-conv-top {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n}\n.hw-header-menu-conv-name {\n overflow: hidden;\n font-size: 12.5px;\n font-weight: 600;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-header-menu-conv-time {\n flex: none;\n font-size: 11px;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu-conv-preview {\n overflow: hidden;\n font-size: 12px;\n color: var(--hw-text-2);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-offers {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 10px;\n}\n.hw-offer {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n border: 0;\n border-radius: 999px;\n cursor: pointer;\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n font: inherit;\n font-size: 12.5px;\n font-weight: 550;\n transition: background 0.15s, color 0.15s;\n}\n.hw-offer:hover {\n background: var(--hw-brand, var(--hw-primary));\n color: var(--hw-on-brand, #fff);\n}\n.hw-offer svg {\n flex: none;\n}\n.hw-sources {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 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');
7900
+ styleInject(':host {\n all: initial;\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n font-size: 14px;\n line-height: 1.5;\n color: #1a1a1a;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget {\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n font-size: 14px;\n line-height: 1.5;\n color: #1a1a1a;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.hw-widget *,\n.hw-widget *::before,\n.hw-widget *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n.hw-widget :where(p, li, strong, b, em, i, u, s, small, a, code, pre, blockquote, h1, h2, h3, h4, h5, h6) {\n color: inherit;\n}\n:where(.hw-widget) {\n --hw-primary: #171717;\n --hw-primary-hover: #2a2a2a;\n --hw-brand: #171717;\n --hw-on-brand: #ffffff;\n --hw-focus-border: #9ca3af;\n --hw-focus-ring: rgba(0, 0, 0, 0.06);\n --hw-accent: #6366f1;\n --hw-bg: #ffffff;\n --hw-bg-subtle: #fafaf9;\n --hw-bg-hover: #f5f5f4;\n --hw-border: #ebe9e5;\n --hw-border-md: #e5e5e5;\n --hw-text: #1c1b19;\n --hw-text-1: #111;\n --hw-text-2: #666;\n --hw-text-3: #8a847c;\n --hw-text-4: #a8a29a;\n --hw-radius: 20px;\n --hw-visitor-bubble-bg: #f5f5f4;\n --hw-visitor-bubble-text: #1a1a1a;\n --hw-font:\n -apple-system,\n BlinkMacSystemFont,\n "Segoe UI",\n Roboto,\n "Helvetica Neue",\n Arial,\n sans-serif;\n}\n.hw-agent-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-agent-icon {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n}\n.hw-widget :is(.hw-header-bot-icon, .hw-hero-bot-icon, .hw-conv-card-avatar, .hw-event-avatar, .hw-bubble-icon--bot):has(> .hw-agent-custom) {\n border-radius: 50%;\n background: transparent;\n padding: 0;\n}\n.hw-widget :focus-visible {\n outline: 2px solid var(--hw-primary);\n outline-offset: 2px;\n}\n.hw-widget :focus:not(:focus-visible) {\n outline: none;\n}\n.hw-widget {\n position: fixed;\n bottom: 20px;\n right: var(--hw-position-right, 20px);\n left: var(--hw-position-left, auto);\n z-index: 999999;\n font-family: var(--hw-font);\n}\n@keyframes hw-bubble-enter {\n from {\n opacity: 0;\n transform: scale(0.6);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n.hw-bubble {\n width: 48px;\n height: 48px;\n border-radius: 14px;\n background: var(--hw-primary);\n color: white;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;\n position: relative;\n overflow: visible;\n animation: hw-bubble-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n}\n.hw-bubble--rounded {\n border-radius: 14px;\n}\n.hw-bubble--square {\n border-radius: 8px;\n}\n.hw-bubble--pill {\n border-radius: 24px;\n}\n.hw-bubble--launcher-bubble,\n.hw-bubble--launcher-help {\n width: auto;\n padding: 0 16px 0 12px;\n gap: 8px;\n border-radius: 24px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--square,\n.hw-bubble--launcher-help.hw-bubble--square {\n border-radius: 8px;\n}\n.hw-bubble--launcher-bubble.hw-bubble--rounded,\n.hw-bubble--launcher-help.hw-bubble--rounded {\n border-radius: 14px;\n}\n.hw-bubble-label {\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n line-height: 1;\n position: static;\n opacity: 1;\n transform: none;\n}\n.hw-bubble--launcher-bubble .hw-bubble-icon,\n.hw-bubble--launcher-help .hw-bubble-icon {\n position: static;\n}\n.hw-bubble:hover {\n transform: scale(1.05);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n}\n.hw-bubble:active {\n transform: scale(0.95);\n}\n.hw-bubble--open {\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n}\n.hw-bubble:focus-visible {\n outline: 2px solid white;\n outline-offset: 2px;\n}\n.hw-bubble-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;\n}\n.hw-bubble-icon svg:not(.hw-agent-custom svg) {\n width: 22px;\n height: 22px;\n}\n.hw-bubble-icon--hidden {\n transform: scale(0.3) rotate(90deg);\n opacity: 0;\n}\n.hw-bubble-icon--bot {\n}\n.hw-bubble--avatar .hw-bubble-icon--bot {\n width: 100%;\n height: 100%;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img {\n width: 100%;\n height: 100%;\n border-radius: 0;\n}\n.hw-agent-img.hw-agent-img--logo {\n object-fit: contain;\n padding: 10px;\n box-sizing: border-box;\n}\n.hw-bubble--avatar .hw-bubble-icon--bot .hw-agent-img.hw-agent-img--logo {\n padding: 10px;\n box-sizing: border-box;\n object-fit: contain;\n}\n.hw-bubble-icon--close svg {\n width: 22px;\n height: 22px;\n}\n.hw-bubble-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n min-width: 20px;\n height: 20px;\n border-radius: 10px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n border: 2px solid white;\n animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n@keyframes hw-badge-pop {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n.hw-bubble-badge::after {\n content: "";\n position: absolute;\n inset: -2px;\n border-radius: inherit;\n background: var(--hw-primary);\n opacity: 0;\n animation: hw-badge-pulse 2s ease-out infinite;\n}\n@keyframes hw-badge-pulse {\n 0% {\n opacity: 0.5;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(1.8);\n }\n}\n.hw-window {\n position: absolute;\n bottom: 72px;\n right: var(--hw-window-right, 0);\n left: var(--hw-window-left, auto);\n width: 440px;\n height: 640px;\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n border-radius: var(--hw-radius);\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n animation: hw-window-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1), height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hw-window--reading {\n width: min(720px, calc(100vw - 40px));\n height: min(800px, calc(100vh - 112px));\n}\n:host([data-hw-mode="mobile"]) .hw-window,\n:host([data-hw-mode="mobile"]) .hw-window--reading {\n position: fixed;\n inset: 0;\n width: 100%;\n height: var(--hw-visible-height, 100%);\n border-radius: 0;\n box-shadow: none;\n animation: none;\n}\n:host([data-hw-mode="mobile"]) .hw-hero {\n background-color: color-mix(in srgb, var(--hw-primary) 60%, black);\n}\n:host([data-hw-mode="mobile"]) .hw-bubble {\n display: none;\n}\n.hw-window[data-hw-keyboard] .hw-composer {\n padding-bottom: 8px;\n}\n.hw-window[data-hw-keyboard] .hw-powered {\n display: none;\n}\n@keyframes hw-window-open {\n from {\n opacity: 0;\n transform: translateY(12px) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n.hw-window--closing {\n animation: hw-window-close 0.2s ease forwards;\n}\n@keyframes hw-window-close {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.98);\n }\n}\n.hw-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-window,\n .hw-window--closing,\n .hw-content,\n .hw-msg,\n .hw-bubble,\n .hw-bubble-icon,\n .hw-bubble-badge,\n .hw-bubble-badge::after,\n .hw-typing-dot,\n .hw-loading-dot {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n}\n.hw-hero {\n flex-shrink: 0;\n background:\n linear-gradient(\n 160deg,\n color-mix(in srgb, var(--hw-primary) 60%, black) 0%,\n var(--hw-primary) 50%,\n color-mix(in srgb, var(--hw-primary) 40%, black) 100%);\n color: white;\n padding: 20px 22px 40px;\n}\n.hw-hero-top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 16px;\n}\n.hw-hero-close {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n border: none;\n background: rgba(255, 255, 255, 0.1);\n color: rgba(255, 255, 255, 0.6);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s, color 0.15s;\n}\n.hw-hero-close:hover {\n background: rgba(255, 255, 255, 0.2);\n color: white;\n}\n.hw-hero-close:active {\n transform: scale(0.92);\n transition:\n transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n background 0.15s,\n color 0.15s;\n}\n.hw-hero-close svg {\n width: 20px;\n height: 20px;\n}\n.hw-hero-bot-icon {\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n}\n.hw-hero-bot-icon > svg,\n.hw-hero-bot-icon > .hw-agent-icon > svg {\n width: 32px;\n height: 32px;\n}\n.hw-hero-bot-icon .hw-agent-img,\n.hw-hero-bot-icon .hw-agent-icon {\n border-radius: inherit;\n overflow: hidden;\n object-fit: contain;\n}\n.hw-hero-greeting {\n font-size: 26px;\n font-weight: 700;\n line-height: 1.15;\n margin-bottom: 6px;\n}\n.hw-hero-greeting-name {\n font-weight: 300;\n}\n.hw-hero-greeting-question {\n font-weight: 700;\n}\n.hw-hero-subtitle {\n font-size: 15px;\n color: rgba(255, 255, 255, 0.5);\n line-height: 1.35;\n}\n.hw-sheet {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n background: #ffffff;\n border-radius: 20px 20px 0 0;\n margin-top: -24px;\n box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);\n position: relative;\n z-index: 1;\n}\n.hw-sheet-inner {\n padding: 20px 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.hw-header {\n display: flex;\n align-items: center;\n padding: 14px 12px 14px 16px;\n background: var(--hw-primary);\n color: white;\n flex-shrink: 0;\n gap: 10px;\n}\n.hw-header--sub {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header-back {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.15s, background 0.15s;\n flex-shrink: 0;\n}\n.hw-header-back svg {\n width: 18px;\n height: 18px;\n}\n.hw-header-back:hover {\n color: var(--hw-text);\n background: var(--hw-bg-subtle);\n}\n.hw-header-identity {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 0;\n}\n.hw-header-bot-icon {\n width: 32px;\n height: 32px;\n flex-shrink: 0;\n color: var(--hw-text);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9px;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, transparent));\n}\n.hw-header-bot-icon > svg,\n.hw-header-bot-icon > .hw-agent-icon > svg {\n width: 24px;\n height: 24px;\n}\n.hw-header-bot-icon--team {\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n}\n.hw-header-agent-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n.hw-header-bot-icon .hw-agent-img,\n.hw-header-bot-icon .hw-agent-icon {\n border-radius: inherit;\n overflow: hidden;\n}\n.hw-header-bot-icon .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-widget[data-has-avatar=true] {\n --hw-agent-bg-default: var(--hw-primary);\n --hw-agent-fit-default: contain;\n --hw-agent-pad-default: 6px;\n}\n.hw-header-agent-initials {\n font-size: 11px;\n font-weight: 600;\n line-height: 1;\n}\n.hw-header-info {\n flex: 1;\n min-width: 0;\n}\n.hw-header-name {\n font-size: 15px;\n font-weight: 600;\n line-height: 1.3;\n}\n.hw-header-status {\n font-size: 11px;\n color: var(--hw-text-3);\n line-height: 1.3;\n}\n.hw-header-close {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n flex-shrink: 0;\n}\n.hw-header-close svg {\n width: 20px;\n height: 20px;\n}\n.hw-header-close:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n}\n.hw-header-close:active {\n transform: scale(0.92);\n}\n.hw-header--centered {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header--centered .hw-header-title {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n max-width: calc(100% - 88px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: center;\n}\n.hw-header-spacer {\n width: 28px;\n flex-shrink: 0;\n}\n.hw-header--messages {\n justify-content: space-between;\n background: transparent;\n color: var(--hw-text);\n border-bottom: 0;\n}\n.hw-header-title {\n font-size: 16px;\n font-weight: 600;\n}\n.hw-header-actions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.hw-header-action {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-header-action svg {\n width: 16px;\n height: 16px;\n}\n.hw-header-action:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text);\n}\n.hw-header-action:active {\n transform: scale(0.94);\n}\n.hw-card {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 14px 16px;\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n cursor: pointer;\n transition: box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n text-align: left;\n color: var(--hw-text);\n font-family: inherit;\n}\n.hw-card:hover {\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);\n transform: translateY(-1px);\n}\n.hw-card:active {\n transform: translateY(0) scale(0.99);\n transition-duration: 120ms;\n}\n.hw-card-body {\n flex: 1;\n min-width: 0;\n}\n.hw-card-title {\n font-size: 14px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--hw-text);\n}\n.hw-card-meta {\n font-size: 12px;\n color: var(--hw-text-3);\n line-height: 1.3;\n margin-top: 1px;\n}\n.hw-card-arrow {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--hw-primary);\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n.hw-card-arrow svg {\n width: 14px;\n height: 14px;\n}\n.hw-msgs-tab {\n flex: 1;\n overflow-y: auto;\n padding: 12px 16px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-recent-card {\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n overflow: hidden;\n}\n.hw-recent-header {\n font-size: 12px;\n font-weight: 600;\n color: var(--hw-text-2);\n padding: 12px 14px 0;\n}\n.hw-recent-row {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 14px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n transition: background-color 140ms cubic-bezier(0.23, 1, 0.32, 1), transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n position: relative;\n}\n.hw-recent-row:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n.hw-recent-row:active {\n transform: scale(0.995);\n}\n.hw-recent-row--last {\n border-bottom: none;\n}\n.hw-recent-row .hw-conv-card-avatar {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n}\n.hw-recent-row .hw-conv-card-avatar svg:not(.hw-agent-custom svg) {\n width: 18px;\n height: 18px;\n}\n.hw-recent-row .hw-conv-card-name {\n font-size: 13px;\n}\n.hw-recent-row .hw-conv-card-preview {\n font-size: 12px;\n}\n.hw-recent-row--unread .hw-conv-card-name {\n color: var(--hw-text);\n}\n.hw-recent-row--unread .hw-conv-card-time {\n color: var(--hw-primary);\n font-weight: 500;\n}\n.hw-recent-row-badge {\n min-width: 18px;\n height: 18px;\n border-radius: 9px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n.hw-recent-see-all {\n display: block;\n width: 100%;\n padding: 10px 14px;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-text);\n background: none;\n border: none;\n border-top: 1px solid var(--hw-border);\n cursor: pointer;\n font-family: inherit;\n transition: background 0.1s;\n}\n.hw-recent-see-all:hover {\n background: rgba(0, 0, 0, 0.02);\n}\n.hw-conv-card {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 14px 16px;\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n cursor: pointer;\n transition: box-shadow 0.15s, transform 0.1s;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n}\n.hw-conv-card:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.hw-conv-card:active {\n transform: scale(0.99);\n}\n.hw-conv-card-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hw-conv-card-avatar {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, var(--hw-bg-subtle)));\n color: var(--hw-text-3);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-conv-card-avatar svg:not(.hw-agent-custom svg) {\n width: 20px;\n height: 20px;\n}\n.hw-conv-card-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-conv-card-avatar .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-conv-card-avatar--team {\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n}\n.hw-conv-card-avatar-initials {\n font-size: 12px;\n font-weight: 600;\n line-height: 1;\n letter-spacing: 0.02em;\n}\n.hw-conv-card-content {\n flex: 1;\n min-width: 0;\n}\n.hw-conv-card-top {\n display: flex;\n align-items: baseline;\n gap: 8px;\n}\n.hw-conv-card-name {\n flex: 1;\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-conv-card-time {\n font-size: 11px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n.hw-conv-card-preview {\n font-size: 13px;\n color: var(--hw-text-2);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: 1.4;\n margin-top: 1px;\n}\n.hw-conv-card--unread .hw-conv-card-name {\n color: var(--hw-text);\n}\n.hw-conv-card--unread .hw-conv-card-time {\n color: var(--hw-primary);\n font-weight: 500;\n}\n.hw-conv-card-badge {\n position: absolute;\n top: 12px;\n right: 12px;\n min-width: 18px;\n height: 18px;\n border-radius: 9px;\n background: var(--hw-primary);\n color: white;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 5px;\n font-variant-numeric: tabular-nums;\n}\n.hw-empty-state {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n text-align: center;\n}\n.hw-empty-icon-wrap {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--hw-bg-subtle);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n color: var(--hw-text-3);\n}\n.hw-empty-icon-wrap svg {\n width: 24px;\n height: 24px;\n}\n.hw-empty-title {\n font-size: 15px;\n font-weight: 600;\n color: var(--hw-text);\n margin-bottom: 4px;\n}\n.hw-empty-desc {\n font-size: 13px;\n color: var(--hw-text-3);\n margin-bottom: 20px;\n}\n.hw-empty-btn {\n padding: 8px 20px;\n border-radius: 10px;\n background: var(--hw-primary);\n color: white;\n border: none;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n font-family: inherit;\n transition: background 0.15s;\n}\n.hw-empty-btn:hover {\n background: var(--hw-primary-hover);\n}\n.hw-tabs {\n display: flex;\n border-top: 1px solid var(--hw-border);\n flex-shrink: 0;\n background: var(--hw-bg-subtle);\n}\n.hw-tabs-item {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n padding: 8px 0;\n border: none;\n background: none;\n cursor: pointer;\n font-family: inherit;\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-text-3);\n transition: color 0.15s;\n}\n.hw-tabs-item svg {\n width: 22px;\n height: 22px;\n overflow: visible;\n}\n.hw-tabs-item--active {\n color: var(--hw-text);\n}\n.hw-tabs-item:hover {\n color: var(--hw-text-2);\n}\n.hw-tabs-item:active {\n transform: scale(0.94);\n transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), color 0.15s;\n}\n.hw-tabs-icon-wrap {\n position: relative;\n display: inline-flex;\n}\n.hw-tabs-badge {\n position: absolute;\n top: -6px;\n right: -10px;\n min-width: 16px;\n height: 16px;\n border-radius: 8px;\n background: var(--hw-primary);\n color: white;\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n font-variant-numeric: tabular-nums;\n}\n.hw-messages {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px 14px 8px;\n background: var(--hw-bg-subtle);\n display: flex;\n flex-direction: column;\n gap: 14px;\n overscroll-behavior: contain;\n min-width: 0;\n scrollbar-color: rgba(0, 0, 0, 0.2) transparent;\n scrollbar-width: thin;\n -webkit-mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 12px);\n mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 12px);\n}\n.hw-messages::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n.hw-messages::-webkit-scrollbar-track {\n background: transparent;\n}\n.hw-messages::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.16);\n background-clip: content-box;\n border: 3px solid transparent;\n border-radius: 999px;\n}\n.hw-messages::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.28);\n background-clip: content-box;\n}\n.hw-widget[data-theme=dark] .hw-messages {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n}\n.hw-widget[data-theme=dark] .hw-messages::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n background-clip: content-box;\n}\n.hw-widget[data-theme=dark] .hw-messages::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n}\n.hw-empty {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n color: var(--hw-text-3);\n text-align: center;\n}\n.hw-empty-icon {\n width: 40px;\n height: 40px;\n margin-bottom: 12px;\n opacity: 0.3;\n}\n.hw-empty-text {\n font-size: 13px;\n}\n.hw-date-sep {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 0;\n}\n.hw-date-sep-line {\n flex: 1;\n height: 1px;\n background: var(--hw-border-md);\n}\n.hw-date-sep-text {\n font-size: 11px;\n color: var(--hw-text-3);\n font-weight: 500;\n white-space: nowrap;\n}\n.hw-msg {\n display: flex;\n padding: 4px 0;\n max-width: 75%;\n min-width: 0;\n animation: hw-msg-appear 0.25s ease-out;\n}\n@keyframes hw-msg-appear {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-msg--visitor {\n align-self: flex-end;\n}\n.hw-msg--team,\n.hw-msg--ai {\n align-self: flex-start;\n}\n.hw-msg--ai {\n width: 100%;\n max-width: 100%;\n}\n.hw-msg-body {\n display: flex;\n flex-direction: column;\n min-width: 0;\n max-width: 100%;\n}\n.hw-msg-bubble {\n padding: 10px 14px;\n border-radius: 16px;\n font-size: 14px;\n line-height: 1.45;\n white-space: pre-wrap;\n word-break: break-word;\n overflow-wrap: anywhere;\n max-width: 100%;\n}\n.hw-msg--visitor .hw-msg-bubble {\n background: var(--hw-primary);\n color: white;\n border-bottom-right-radius: 4px;\n}\n.hw-msg--team .hw-msg-bubble {\n background: var(--hw-visitor-bubble-bg);\n color: var(--hw-visitor-bubble-text);\n border-bottom-left-radius: 4px;\n}\n.hw-msg--ai .hw-msg-bubble {\n background: var(--hw-visitor-bubble-bg);\n color: var(--hw-text);\n border-bottom-left-radius: 4px;\n white-space: normal;\n max-width: min(100%, 640px);\n}\n.hw-msg--ai .hw-msg-body {\n width: 100%;\n}\n.hw-msg--ai .hw-msg-bubble:has(.hw-code),\n.hw-msg--ai .hw-msg-bubble:has(pre) {\n width: 100%;\n}\n.hw-quick-replies {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 8px;\n}\n.hw-quick-reply-btn {\n font: inherit;\n font-size: 13px;\n font-weight: 500;\n padding: 6px 14px;\n border-radius: 18px;\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n background: var(--hw-bg, #fff);\n color: var(--hw-text-1, #1a1a1a);\n cursor: pointer;\n transition:\n background 120ms ease,\n border-color 120ms ease,\n box-shadow 120ms ease,\n transform 80ms ease;\n line-height: 1.3;\n}\n.hw-quick-reply-btn:hover:not(:disabled) {\n border-color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 8%, transparent);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n}\n.hw-quick-reply-btn:active:not(:disabled) {\n transform: scale(0.97);\n}\n.hw-quick-reply-btn:disabled {\n cursor: default;\n opacity: 0.4;\n}\n.hw-quick-reply-btn[data-tapped=true] {\n background: var(--hw-primary);\n color: white;\n border-color: var(--hw-primary);\n opacity: 1;\n}\n.hw-quick-replies[data-cancelled=true] .hw-quick-reply-btn {\n border-color: var(--hw-border);\n color: var(--hw-text-3);\n}\n.hw-msg--ai .hw-code {\n width: 100%;\n box-sizing: border-box;\n}\n.hw-msg-meta {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n color: var(--hw-text-2);\n margin-top: 2px;\n padding: 0 4px;\n font-variant-numeric: tabular-nums;\n}\n.hw-msg-time {\n white-space: nowrap;\n}\n.hw-msg--visitor .hw-msg-meta {\n text-align: right;\n}\n.hw-msg--team .hw-msg-body,\n.hw-msg--ai .hw-msg-body {\n align-items: flex-start;\n}\n.hw-msg--visitor .hw-msg-body {\n align-items: flex-end;\n}\n.hw-typing {\n display: flex;\n flex-direction: column;\n gap: 3px;\n padding: 8px 0;\n width: fit-content;\n animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-typing-dots {\n display: flex;\n gap: 3px;\n padding: 6px 2px;\n width: fit-content;\n}\n.hw-typing-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--hw-text-3);\n animation: hw-typing-bounce 1.4s infinite;\n}\n.hw-typing-dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n.hw-typing-dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n@keyframes hw-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-4px);\n }\n}\n.hw-msg-bubble--live > span > :last-child:not(ol, ul, pre)::after,\n.hw-msg-bubble--live > span > :is(ol, ul):last-child > li:last-child::after {\n content: "";\n display: inline-block;\n width: 2px;\n height: 1em;\n border-radius: 1px;\n background: currentColor;\n opacity: 0.5;\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: hw-cursor-breathe 1.1s ease-in-out infinite;\n}\n@keyframes hw-cursor-breathe {\n 0%, 100% {\n opacity: 0.5;\n }\n 50% {\n opacity: 0.12;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-msg-bubble--live > span > :last-child:not(ol, ul, pre)::after,\n .hw-msg-bubble--live > span > :is(ol, ul):last-child > li:last-child::after {\n animation: none;\n }\n}\n.hw-link-preview {\n display: flex;\n flex-direction: column;\n gap: 0;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n border-radius: 10px;\n overflow: hidden;\n text-decoration: none;\n color: inherit;\n margin-top: 6px;\n transition: background 0.15s;\n min-height: 44px;\n max-width: 100%;\n text-align: start;\n}\n.hw-link-preview:hover {\n background: var(--hw-bg-hover, rgba(0, 0, 0, 0.02));\n}\n.hw-link-preview-img {\n width: 100%;\n height: 56px;\n flex: 0 0 56px;\n object-fit: cover;\n object-position: top;\n border-radius: 0;\n}\n.hw-link-preview-body {\n padding: 8px 10px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n justify-content: center;\n}\n.hw-link-preview-favicon {\n width: 14px;\n height: 14px;\n flex: 0 0 14px;\n border-radius: 3px;\n}\n.hw-widget[data-hw-placement=docked] .hw-link-preview-favicon {\n box-sizing: content-box;\n padding: 2px;\n background: #ffffff;\n}\n.hw-link-preview-host {\n direction: ltr;\n min-width: 0;\n overflow-wrap: anywhere;\n word-break: break-all;\n}\n.hw-link-preview-title {\n font-size: 12.5px;\n font-weight: 600;\n line-height: 1.3;\n color: var(--hw-text, #1a1a1a);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: anywhere;\n}\n.hw-link-preview-desc {\n font-size: 11.5px;\n line-height: 1.4;\n color: var(--hw-text-2, #6b7280);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: anywhere;\n}\n.hw-link-preview-url {\n display: flex;\n align-items: center;\n gap: 6px;\n min-width: 0;\n font-size: 11px;\n color: var(--hw-text-2);\n}\n.hw-msg-links {\n display: flex;\n flex-direction: column;\n gap: 6px;\n max-width: 240px;\n}\n.hw-loading {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-loading-dots {\n display: flex;\n gap: 4px;\n}\n.hw-loading-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--hw-text-4);\n animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-loading-dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n.hw-loading-dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n@keyframes hw-loading-pulse {\n 0%, 60%, 100% {\n opacity: 0.3;\n transform: scale(0.8);\n }\n 30% {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes hw-skeleton-shimmer {\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n}\n.hw-skeleton {\n background:\n linear-gradient(\n 90deg,\n var(--hw-bg-subtle) 25%,\n rgba(0, 0, 0, 0.04) 50%,\n var(--hw-bg-subtle) 75%);\n background-size: 200px 100%;\n animation: hw-skeleton-shimmer 1.5s ease-in-out infinite;\n border-radius: 6px;\n}\n.hw-skeleton-messages {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: 16px;\n gap: 16px;\n}\n.hw-skeleton-msg {\n display: flex;\n gap: 10px;\n align-items: flex-start;\n}\n.hw-skeleton-msg--right {\n flex-direction: row-reverse;\n}\n.hw-skeleton-avatar {\n width: 28px;\n height: 28px;\n border-radius: 8px;\n flex-shrink: 0;\n}\n.hw-skeleton-bubble {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.hw-skeleton-line {\n height: 12px;\n border-radius: 6px;\n}\n.hw-skeleton-convs {\n display: flex;\n flex-direction: column;\n padding: 8px 0;\n}\n.hw-skeleton-conv {\n display: flex;\n gap: 10px;\n align-items: center;\n padding: 10px 16px;\n}\n.hw-skeleton-conv-avatar {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n flex-shrink: 0;\n}\n.hw-skeleton-conv-lines {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n.hw-skeleton-content {\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n gap: 12px;\n}\n.hw-skeleton-content-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 12px;\n border-radius: 10px;\n background: var(--hw-bg);\n}\n.hw-skeleton-title {\n height: 22px;\n width: 65%;\n border-radius: 6px;\n}\n.hw-skeleton-badge {\n width: 42px;\n height: 18px;\n border-radius: 9px;\n}\n.hw-skeleton-date {\n width: 60px;\n height: 12px;\n border-radius: 6px;\n}\n.hw-skeleton-h2 {\n height: 16px;\n border-radius: 6px;\n}\n.hw-skeleton-bullet {\n padding-left: 20px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-skeleton-bullet-line {\n height: 14px;\n border-radius: 7px;\n}\n.hw-email-card {\n max-width: min(100%, 340px);\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: none;\n box-shadow: none;\n animation: hw-email-slide-in 0.25s ease-out;\n}\n@keyframes hw-email-slide-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-email-card-title {\n font-size: 14px;\n font-weight: 550;\n color: var(--hw-text, #1a1a1a);\n line-height: 1.3;\n margin: 0 0 2px;\n}\n.hw-email-card-subtitle {\n font-size: 12px;\n color: var(--hw-text-2, #888);\n line-height: 1.4;\n margin: 0;\n}\n.hw-email-card-row {\n max-width: 300px;\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 9px;\n padding: 3px 3px 3px 12px;\n border-radius: 999px;\n border: 1px solid var(--hw-border, rgba(0,0,0,0.1));\n background: var(--hw-bg-subtle, #fafafa);\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-email-card-row:focus-within {\n border-color: var(--hw-focus-border, rgba(0,0,0,0.2));\n box-shadow: 0 0 0 2px var(--hw-focus-ring, rgba(0,0,0,0.06));\n}\n.hw-email-card-input {\n flex: 1;\n min-width: 0;\n padding: 6px 0;\n border: 0;\n background: transparent;\n color: var(--hw-text, #1a1a1a);\n font: inherit;\n font-size: 13px;\n outline: none;\n}\n.hw-email-card-input::placeholder {\n color: var(--hw-text-3, #999);\n}\n.hw-email-card-row:has(.hw-email-card-input--error) {\n border-color: #ef4444;\n}\n.hw-email-card-submit {\n flex: none;\n display: grid;\n place-items: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 50%;\n background: var(--hw-brand, #0a0a0a);\n color: var(--hw-on-brand, #fff);\n cursor: pointer;\n transition: opacity 0.15s, transform 0.15s;\n}\n.hw-email-card-submit:hover:not(:disabled) {\n transform: scale(1.06);\n}\n.hw-email-card-submit:disabled {\n opacity: 0.45;\n cursor: default;\n}\n.hw-email-card--success {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 2px 0;\n font-size: 13px;\n color: var(--hw-text-2, #888);\n animation: hw-email-slide-in 0.2s ease-out;\n}\n.hw-email-card--success svg {\n flex-shrink: 0;\n}\n.hw-composer {\n display: flex;\n flex-direction: column;\n padding: 12px 16px;\n background: transparent;\n flex-shrink: 0;\n}\n.hw-composer--compact {\n padding: 8px 12px;\n}\n.hw-composer-box {\n display: flex;\n flex-direction: column;\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n border-radius: 16px;\n overflow: hidden;\n transition: border-color 0.2s;\n background: var(--hw-bg);\n}\n.hw-composer-box:focus-within {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-composer-input {\n resize: none;\n border: none;\n padding: 12px 16px 4px;\n font-size: 14px;\n font-family: inherit;\n line-height: 1.4;\n outline: none;\n min-height: 40px;\n max-height: 220px;\n background: transparent;\n color: var(--hw-text);\n field-sizing: content;\n}\n.hw-composer-input:focus {\n outline: none;\n}\n.hw-composer-input:focus-visible {\n outline: none;\n}\n.hw-composer-input::placeholder {\n color: var(--hw-text-4);\n}\n.hw-composer-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 10px 10px;\n}\n.hw-composer-toolbar-left {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.hw-composer-send {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition:\n background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n color 140ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 140ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n.hw-composer-send:active:not(:disabled) {\n transform: scale(0.9);\n}\n.hw-composer-send--active {\n background: var(--hw-primary);\n color: white;\n}\n.hw-composer-send--inactive {\n background: var(--hw-border);\n color: var(--hw-text-4);\n cursor: default;\n}\n.hw-composer-send svg {\n width: 14px;\n height: 14px;\n}\n.hw-composer-charcount {\n font-size: 11px;\n color: var(--hw-text-3);\n font-variant-numeric: tabular-nums;\n opacity: 1;\n transform: translateY(0);\n transition:\n color 180ms cubic-bezier(0.23, 1, 0.32, 1),\n opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),\n transform 180ms cubic-bezier(0.23, 1, 0.32, 1);\n}\n@starting-style {\n .hw-composer-charcount {\n opacity: 0;\n transform: translateY(3px);\n }\n}\n.hw-composer-charcount--over {\n color: #ef4444;\n font-weight: 600;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-composer-charcount {\n transform: none;\n transition: color 160ms ease, opacity 160ms ease;\n }\n @starting-style {\n .hw-composer-charcount {\n transform: none;\n }\n }\n}\n.hw-composer-previews {\n display: flex;\n gap: 6px;\n padding: 8px 10px 0;\n overflow-x: auto;\n scrollbar-width: none;\n}\n.hw-composer-previews::-webkit-scrollbar {\n display: none;\n}\n.hw-composer-preview {\n position: relative;\n width: 48px;\n height: 48px;\n border-radius: 8px;\n overflow: hidden;\n flex-shrink: 0;\n background: var(--hw-border);\n cursor: pointer;\n}\n.hw-composer-preview--error {\n outline: 2px solid #ef4444;\n outline-offset: -2px;\n}\n.hw-composer-preview-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-composer-preview-file {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--hw-bg-subtle);\n}\n.hw-composer-preview-ext {\n font-size: 10px;\n font-weight: 700;\n color: var(--hw-text-3);\n text-transform: uppercase;\n}\n.hw-composer-preview-loader {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.35);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-composer-preview-loader::after {\n content: "";\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: hw-spin 0.6s linear infinite;\n}\n@keyframes hw-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.hw-composer-preview-badge {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #ef4444;\n color: white;\n font-size: 10px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-composer-preview-remove {\n position: absolute;\n top: 2px;\n right: 2px;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: none;\n background: rgba(0, 0, 0, 0.55);\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.15s;\n}\n.hw-composer-preview-remove svg {\n width: 10px;\n height: 10px;\n}\n.hw-composer-preview:hover .hw-composer-preview-remove {\n opacity: 1;\n}\n.hw-composer-attach {\n width: 28px;\n height: 28px;\n border: none;\n background: none;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n opacity: 0.7;\n transition: opacity 0.15s;\n}\n.hw-composer-attach:hover {\n opacity: 1;\n}\n.hw-composer-attach svg {\n width: 16px;\n height: 16px;\n}\n.hw-msg-images {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-bottom: 4px;\n}\n.hw-msg-image-link {\n display: block;\n border-radius: 14px;\n overflow: hidden;\n line-height: 0;\n}\n.hw-msg-image {\n max-width: 140px;\n max-height: 80px;\n object-fit: cover;\n border-radius: 8px;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-msg-files {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-top: 4px;\n}\n.hw-msg-file {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 10px;\n background: var(--hw-bg-subtle);\n text-decoration: none;\n color: var(--hw-text);\n transition: background 0.15s;\n}\n.hw-msg-file:hover {\n background: var(--hw-border);\n}\n.hw-msg-file-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n color: var(--hw-text-3);\n}\n.hw-msg-file-icon svg {\n width: 100%;\n height: 100%;\n}\n.hw-msg-file-info {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.hw-msg-file-name {\n font-size: 13px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.hw-msg-file-size {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-msg-image-link {\n cursor: pointer;\n border: none;\n padding: 0;\n background: none;\n display: block;\n line-height: 0;\n}\n.hw-hover-preview {\n position: fixed;\n z-index: 2147483001;\n padding: 6px;\n border-radius: 14px;\n background: white;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);\n cursor: pointer;\n animation: hw-hover-in 0.15s ease-out;\n}\n@media (prefers-color-scheme: dark) {\n .hw-hover-preview {\n background: #1c1c1e;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n}\n@keyframes hw-hover-in {\n from {\n opacity: 0;\n transform: scale(0.96) translateY(4px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n.hw-hover-preview-img {\n width: 100%;\n max-height: 200px;\n object-fit: contain;\n border-radius: 10px;\n display: block;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-hover-preview--doc {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n}\n.hw-hover-preview-doc-icon {\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n}\n.hw-hover-preview-doc-icon svg {\n width: 100%;\n height: 100%;\n}\n.hw-hover-preview-doc-info {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.hw-hover-preview-doc-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.hw-hover-preview-doc-hint {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-event {\n display: flex;\n justify-content: center;\n padding: 8px 16px;\n}\n.hw-event-text {\n font-size: 12px;\n color: var(--hw-text-3);\n text-align: center;\n}\n.hw-event--card {\n justify-content: flex-start;\n align-items: center;\n gap: 10px;\n background: var(--hw-bg-subtle);\n padding: 10px 14px;\n border-radius: 12px;\n margin: 4px 16px;\n}\n.hw-event-avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--hw-agent-bg, var(--hw-agent-bg-default, var(--hw-bg-hover, #e0e0e0)));\n color: var(--hw-text-2, #555);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 600;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-event-avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.hw-event-avatar .hw-agent-img {\n object-fit: var(--hw-agent-fit, var(--hw-agent-fit-default, cover));\n padding: var(--hw-agent-pad, var(--hw-agent-pad-default, 0));\n box-sizing: border-box;\n}\n.hw-event-body {\n font-size: 13px;\n line-height: 1.3;\n}\n.hw-event-name {\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-event-action {\n color: var(--hw-text-2);\n}\n.hw-new {\n flex: 1;\n display: flex;\n flex-direction: column;\n background: var(--hw-bg-subtle);\n}\n.hw-new-body {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 24px;\n text-align: center;\n}\n.hw-new-welcome {\n flex: 1;\n padding: 16px 20px;\n overflow-y: auto;\n}\n.hw-new-heading {\n font-size: 17px;\n font-weight: 600;\n color: var(--hw-text);\n margin-bottom: 6px;\n}\n.hw-new-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n margin-bottom: 24px;\n}\n.hw-powered {\n text-align: center;\n padding: 8px;\n font-size: 11px;\n color: var(--hw-text-4);\n flex-shrink: 0;\n}\n.hw-powered a {\n color: var(--hw-text-2);\n text-decoration: none;\n font-weight: 500;\n}\n.hw-powered a:hover {\n color: var(--hw-text);\n}\n@media (max-width: 479px) {\n .hw-widget {\n bottom: 16px;\n right: 16px;\n left: auto;\n }\n .hw-window {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: var(--hw-visible-height, 100%);\n border-radius: 0;\n animation: hw-mob-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);\n }\n .hw-window--closing {\n animation: hw-mob-down 0.2s ease forwards;\n }\n @keyframes hw-mob-up {\n from {\n opacity: 0;\n transform: translateY(100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes hw-mob-down {\n from {\n opacity: 1;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n transform: translateY(100%);\n }\n }\n .hw-hero {\n padding-top: calc(20px + env(safe-area-inset-top, 0px));\n }\n .hw-header {\n padding-top: env(safe-area-inset-top, 0px);\n }\n .hw-tabs {\n padding-bottom: env(safe-area-inset-bottom, 0px);\n }\n .hw-composer {\n padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));\n }\n .hw-powered {\n padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));\n }\n .hw-window:has(.hw-powered) .hw-composer {\n padding-bottom: 8px;\n }\n .hw-window:has(.hw-powered) .hw-tabs {\n padding-bottom: 0;\n }\n .hw-header-close,\n .hw-header-back,\n .hw-header-action {\n width: 34px;\n height: 34px;\n }\n .hw-composer-send {\n width: 40px;\n height: 40px;\n }\n .hw-window ~ .hw-bubble {\n display: none;\n }\n .hw-messages {\n padding: 12px 14px;\n }\n .hw-msg {\n max-width: 82%;\n }\n .hw-msg--ai {\n max-width: 100%;\n }\n}\n.hw-preview {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n width: 300px;\n max-width: calc(100vw - 40px);\n background: var(--hw-bg);\n border: 1px solid var(--hw-border);\n border-radius: 16px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);\n animation: hw-preview-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.15s, box-shadow 0.15s;\n}\n.hw-preview.hw-preview--anchored {\n position: static;\n bottom: auto;\n right: auto;\n width: 100%;\n max-width: 100%;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar {\n background: none;\n}\n.hw-preview.hw-preview--anchored .hw-preview-avatar img,\n.hw-preview.hw-preview--anchored .hw-preview-avatar svg:not(.hw-agent-custom svg) {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n.hw-preview:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n@keyframes hw-preview-in {\n from {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n@keyframes hw-preview-out {\n from {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.95);\n }\n}\n.hw-preview-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px 0;\n}\n.hw-preview-avatar {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background:\n linear-gradient(\n 135deg,\n var(--hw-primary),\n color-mix(in srgb, var(--hw-primary) 50%, black));\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n flex-shrink: 0;\n overflow: hidden;\n}\n.hw-preview-avatar svg:not(.hw-agent-custom svg) {\n width: 16px;\n height: 16px;\n}\n.hw-preview-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n.hw-preview-name {\n font-size: 13px;\n font-weight: 600;\n color: var(--hw-text);\n flex: 1;\n}\n.hw-preview-close {\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--hw-text-3);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: background 0.15s, color 0.15s;\n flex-shrink: 0;\n}\n.hw-preview-close:hover {\n background: var(--hw-bg-subtle);\n color: var(--hw-text-2);\n}\n.hw-preview-close:active {\n transform: scale(0.90);\n transition:\n transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),\n background 0.15s,\n color 0.15s;\n}\n.hw-preview-close svg {\n width: 12px;\n height: 12px;\n}\n.hw-preview-body {\n padding: 4px 14px;\n font-size: 14px;\n line-height: 1.45;\n color: var(--hw-text-2);\n}\n.hw-preview-body:first-of-type {\n padding-top: 8px;\n}\n.hw-preview-body:last-child {\n padding-bottom: 14px;\n}\n.hw-preview-footer {\n margin-top: 2px;\n padding: 8px 14px 12px;\n border-top: 1px solid var(--hw-border);\n font-size: 11px;\n line-height: 1.3;\n color: var(--hw-text-2);\n opacity: 0.65;\n}\n.hw-preview-prompt {\n padding: 2px 14px 6px;\n font-size: 14px;\n font-weight: 500;\n color: var(--hw-text-1);\n}\n.hw-preview-quick-replies {\n padding: 0 14px 14px;\n margin-top: 0;\n}\n.hw-awaiting {\n margin-top: 2px;\n padding-left: 44px;\n font-size: 11px;\n line-height: 1.4;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-preview-dock {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 8px;\n pointer-events: none;\n}\n.hw-preview-dock > .hw-preview,\n.hw-preview-dock > .hw-preview-stack {\n position: relative;\n bottom: auto;\n right: auto;\n pointer-events: auto;\n}\n.hw-preview--closing {\n animation: hw-preview-out 0.2s ease-in forwards;\n}\n.hw-preview-stack {\n position: absolute;\n bottom: calc(100% + 12px);\n right: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.hw-preview-stack .hw-preview {\n position: relative;\n bottom: auto;\n right: auto;\n}\n.hw-preview-stack.hw-preview-stack--anchored {\n position: static;\n bottom: auto;\n right: auto;\n width: 100%;\n}\n.hw-preview-more {\n align-self: flex-end;\n padding: 4px 10px;\n border: 0;\n border-radius: 999px;\n background: var(--hw-bg);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--hw-border);\n color: var(--hw-text-2);\n font: inherit;\n font-size: 12px;\n line-height: 1.4;\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n}\n.hw-preview-more:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n}\n.hw-preview--announcement {\n width: 340px;\n}\n.hw-preview--announcement .hw-preview-body--title {\n font-weight: 600;\n color: var(--hw-text);\n font-size: 15px;\n line-height: 1.3;\n padding-top: 10px;\n}\n.hw-preview--announcement .hw-preview-body--desc {\n font-size: 13px;\n color: var(--hw-text-2);\n line-height: 1.5;\n padding-bottom: 16px;\n}\n.hw-announcement-badge {\n display: inline-block;\n margin: 8px 14px 0;\n padding: 2px 8px;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 10%, transparent);\n border-radius: 4px;\n}\n.hw-whats-new {\n border-radius: 14px;\n background: var(--hw-bg);\n border: 0;\n box-shadow: inset 0 0 0 1px var(--hw-border);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);\n overflow: hidden;\n}\n.hw-whats-new-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 14px 0;\n}\n.hw-whats-new-title {\n font-size: 12px;\n font-weight: 600;\n color: var(--hw-text-2);\n}\n.hw-whats-new-view-all {\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-primary);\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n font-family: inherit;\n}\n.hw-whats-new-view-all:hover {\n opacity: 0.8;\n}\n.hw-whats-new-list {\n display: flex;\n flex-direction: column;\n}\n.hw-whats-new-item {\n display: flex;\n flex-direction: column;\n gap: 2px;\n width: 100%;\n padding: 10px 14px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n color: var(--hw-text);\n transition: background-color 140ms ease;\n}\n.hw-whats-new-item:last-child {\n border-bottom: none;\n}\n.hw-whats-new-item:hover {\n background: rgba(0, 0, 0, 0.03);\n}\n.hw-whats-new-item-top {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.hw-whats-new-badge {\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--hw-primary);\n}\n.hw-whats-new-time {\n font-size: 11px;\n color: var(--hw-text-3);\n margin-left: auto;\n}\n.hw-whats-new-item-title {\n font-size: 13px;\n font-weight: 600;\n color: var(--hw-text);\n line-height: 1.3;\n display: flex;\n align-items: baseline;\n gap: 8px;\n}\n.hw-whats-new-time-inline {\n font-size: 11px;\n font-weight: 400;\n color: var(--hw-text-3);\n margin-left: auto;\n flex-shrink: 0;\n}\n.hw-whats-new-item-body {\n font-size: 12px;\n color: var(--hw-text-2);\n line-height: 1.4;\n}\n.hw-tabs-dot {\n position: absolute;\n top: -2px;\n right: -6px;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--hw-primary);\n animation: hw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.hw-bubble-badge-dot {\n display: block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: white;\n}\n.hw-content-search {\n padding: 10px 16px;\n}\n.hw-content-search-box {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--hw-bg);\n border: 1px solid var(--hw-border-md);\n border-radius: 10px;\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n.hw-content-search-box:focus-within {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n}\n.hw-content-search-input {\n flex: 1;\n border: none !important;\n outline: none !important;\n box-shadow: none !important;\n background: none;\n font-size: 13px;\n color: var(--hw-text-1);\n font-family: inherit;\n line-height: 1;\n -webkit-appearance: none;\n}\n.hw-content-search-input:focus,\n.hw-content-search-input:focus-visible {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n}\n.hw-content-search-input::placeholder {\n color: var(--hw-text-3);\n}\n.hw-content-search-icon {\n width: 15px;\n height: 15px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n}\n.hw-content-list {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.hw-content-entries {\n flex: 1;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n.hw-content-entry {\n display: block;\n width: 100%;\n padding: 14px 16px;\n border: none;\n border-bottom: 1px solid var(--hw-border);\n background: none;\n cursor: pointer;\n text-align: left;\n transition: background-color 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n}\n.hw-content-entry:hover {\n background: var(--hw-bg-hover);\n}\n.hw-content-entry:active {\n background: var(--hw-border);\n}\n.hw-content-entry:last-child {\n border-bottom: none;\n}\n.hw-content-entry-main {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.hw-content-entry-text {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 3px;\n}\n.hw-content-entry-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text-1);\n line-height: 1.3;\n}\n.hw-content-entry-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.hw-content-entry-meta {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 2px;\n}\n.hw-content-entry-badge {\n font-size: 11px;\n font-weight: 500;\n color: var(--hw-text-3);\n background: var(--hw-bg-hover);\n padding: 1px 6px;\n border-radius: 4px;\n}\n.hw-content-entry-date {\n font-size: 11px;\n color: var(--hw-text-3);\n}\n.hw-content-entry-chevron {\n width: 16px;\n height: 16px;\n color: var(--hw-text-3);\n flex-shrink: 0;\n opacity: 0.5;\n}\n.hw-content-detail {\n padding: 16px;\n overflow-y: auto;\n overscroll-behavior: contain;\n flex: 1;\n min-height: 0;\n}\n.hw-content-detail-header {\n margin-bottom: 16px;\n}\n.hw-content-detail-title {\n font-size: 17px;\n font-weight: 700;\n color: var(--hw-text-1);\n margin: 0 0 6px;\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.hw-content-detail-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n.hw-content-detail-date {\n font-size: 12px;\n color: var(--hw-text-3);\n}\n.hw-content-detail-body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--hw-text-1);\n}\n.hw-markdown h1 {\n font-size: 17px;\n font-weight: 700;\n margin: 0;\n}\n.hw-markdown h2 {\n font-size: 15px;\n font-weight: 600;\n margin: 0;\n}\n.hw-markdown h3 {\n font-size: 14px;\n font-weight: 600;\n margin: 0;\n}\n.hw-markdown p {\n margin: 0;\n}\n.hw-markdown p:empty,\n.hw-markdown div:empty,\n.hw-markdown p:has(> br:only-child),\n.hw-markdown div:has(> br:only-child) {\n display: none;\n}\n.hw-markdown > * + * {\n margin-top: 12px;\n}\n.hw-markdown > * + h1,\n.hw-markdown > * + h2 {\n margin-top: 20px;\n}\n.hw-markdown > * + h3 {\n margin-top: 16px;\n}\n.hw-markdown > h1 + *,\n.hw-markdown > h2 + *,\n.hw-markdown > h3 + * {\n margin-top: 8px;\n}\n.hw-markdown > *:first-child {\n margin-top: 0;\n}\n.hw-markdown > *:last-child {\n margin-bottom: 0;\n}\n.hw-markdown > br {\n display: none;\n}\n.hw-markdown ul,\n.hw-markdown ol {\n margin: 0;\n padding-left: 20px;\n}\n.hw-markdown li {\n margin: 4px 0;\n}\n.hw-markdown code {\n font-family:\n ui-monospace,\n "SF Mono",\n monospace;\n font-size: 12px;\n background: var(--hw-bg-hover);\n padding: 1px 5px;\n border-radius: 4px;\n}\n.hw-table-wrap {\n margin: 10px 0;\n overflow-x: auto;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n border-radius: 10px;\n}\n.hw-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n.hw-table th {\n text-align: left;\n font-weight: 600;\n font-size: 12px;\n padding: 8px 12px;\n background: var(--hw-bg-hover, #f5f5f4);\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n}\n.hw-table td {\n padding: 8px 12px;\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n vertical-align: top;\n}\n.hw-table tbody tr:last-child td {\n border-bottom: none;\n}\n.hw-code {\n margin: 10px 0;\n border-radius: 10px;\n overflow: hidden;\n border: 1px solid var(--hw-border, rgba(0, 0, 0, 0.08));\n background: var(--hw-bg-hover, #f5f5f4);\n font-family:\n ui-monospace,\n "SF Mono",\n "Menlo",\n monospace;\n}\n.hw-code-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n padding: 7px 8px 7px 12px;\n font-size: 11px;\n color: var(--hw-text-2, #6b7280);\n background: rgba(0, 0, 0, 0.03);\n border-bottom: 1px solid var(--hw-border, rgba(0, 0, 0, 0.06));\n}\n.hw-code-lang {\n text-transform: lowercase;\n letter-spacing: 0.02em;\n font-weight: 500;\n}\n.hw-code-actions {\n display: inline-flex;\n align-items: center;\n gap: 1px;\n}\n.hw-code-action {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n padding: 0;\n font-family: inherit;\n color: var(--hw-text-2, #6b7280);\n background: transparent;\n border: 1px solid transparent;\n border-radius: 6px;\n cursor: pointer;\n opacity: 0.62;\n transition:\n background 120ms ease,\n color 120ms ease,\n opacity 120ms ease,\n scale 120ms ease;\n}\n.hw-code-action:hover {\n color: var(--hw-text, #111);\n background: rgba(0, 0, 0, 0.06);\n opacity: 1;\n}\n.hw-code-action:active {\n scale: 0.96;\n}\n.hw-code-action svg {\n width: 13px;\n height: 13px;\n}\n.hw-code-copy-icon,\n.hw-code-check-icon {\n position: absolute;\n inset: 50% auto auto 50%;\n transition:\n opacity 180ms cubic-bezier(0.2, 0, 0, 1),\n scale 180ms cubic-bezier(0.2, 0, 0, 1),\n filter 180ms cubic-bezier(0.2, 0, 0, 1);\n translate: -50% -50%;\n}\n.hw-code-check-icon {\n filter: blur(4px);\n opacity: 0;\n scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-copy-icon {\n filter: blur(4px);\n opacity: 0;\n scale: 0.25;\n}\n.hw-code-copy--copied .hw-code-check-icon {\n filter: blur(0);\n opacity: 1;\n scale: 1;\n}\n.hw-code-copy-label {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n}\n.hw-code-copy--copied {\n color: #16a34a;\n}\n.hw-code-copy--failed {\n color: #dc2626;\n}\n.hw-code pre {\n margin: 0;\n padding: 10px 12px;\n background: transparent;\n border-radius: 0;\n overflow-x: auto;\n max-width: 100%;\n max-height: 320px;\n scrollbar-color: rgba(0, 0, 0, 0.22) transparent;\n scrollbar-width: thin;\n}\n.hw-code pre::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n.hw-code pre::-webkit-scrollbar-track {\n background: transparent;\n}\n.hw-code pre::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.18);\n background-clip: content-box;\n border: 3px solid transparent;\n border-radius: 999px;\n}\n.hw-code pre::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.28);\n background-clip: content-box;\n}\n.hw-code pre code {\n display: block;\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.55;\n white-space: pre;\n color: var(--hw-text, #111);\n}\n@media (prefers-color-scheme: dark) {\n .hw-code {\n background: rgba(255, 255, 255, 0.04);\n border-color: rgba(255, 255, 255, 0.08);\n }\n .hw-code-header {\n background: rgba(255, 255, 255, 0.03);\n border-bottom-color: rgba(255, 255, 255, 0.06);\n }\n .hw-code-action:hover,\n .hw-code-action:focus-visible {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-code pre {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n }\n .hw-code pre::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.22);\n background-clip: content-box;\n }\n .hw-code pre::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n }\n}\n.hw-markdown pre {\n margin: 8px 0;\n padding: 10px 12px;\n background: var(--hw-bg-hover);\n border-radius: 8px;\n overflow-x: auto;\n max-width: 100%;\n}\n.hw-markdown pre code {\n display: block;\n background: transparent;\n padding: 0;\n border-radius: 0;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n word-break: normal;\n color: inherit;\n}\n.hw-msg-bubble pre {\n margin: 6px 0;\n padding: 8px 10px;\n background: rgba(0, 0, 0, 0.06);\n border-radius: 6px;\n overflow-x: auto;\n max-width: 100%;\n}\n.hw-msg-bubble pre code {\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.5;\n white-space: pre;\n}\n.hw-msg-bubble .hw-code pre {\n margin: 0;\n padding: 10px 12px;\n background: transparent;\n border-radius: 0;\n}\n.hw-msg-bubble .hw-code pre code {\n background: transparent;\n padding: 0;\n font-size: 12px;\n line-height: 1.55;\n}\n.hw-msg--team .hw-msg-bubble pre,\n.hw-msg--visitor .hw-msg-bubble pre {\n background: rgba(255, 255, 255, 0.12);\n}\n.hw-markdown blockquote {\n margin: 0 0 12px;\n padding: 8px 12px;\n border-left: 3px solid var(--hw-border);\n color: var(--hw-text-2);\n font-style: italic;\n}\n.hw-markdown a {\n color: var(--hw-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n.hw-markdown img {\n max-width: 100%;\n border-radius: 8px;\n margin: 8px 0;\n outline: 1px solid rgba(0, 0, 0, 0.08);\n outline-offset: -1px;\n}\n.hw-markdown hr {\n border: none;\n border-top: 1px solid var(--hw-border);\n margin: 16px 0;\n}\n.hw-content-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n.hw-content-empty-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--hw-text-1);\n margin-bottom: 4px;\n}\n.hw-content-empty-desc {\n font-size: 12px;\n color: var(--hw-text-3);\n}\n.hw-content-loading {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n.hw-content-load-more {\n display: block;\n width: 100%;\n padding: 10px;\n border: none;\n background: none;\n color: var(--hw-primary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n text-align: center;\n}\n.hw-content-load-more:hover {\n background: var(--hw-bg-hover);\n}\n.hw-content-load-more:disabled {\n opacity: 0.5;\n cursor: default;\n}\n@media (hover: none) {\n .hw-composer-preview-remove {\n opacity: 0.7;\n }\n}\n.hw-composer--dragging .hw-composer-box {\n border-color: var(--hw-primary);\n background: color-mix(in srgb, var(--hw-primary) 4%, transparent);\n}\n.hw-composer-drop-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--hw-bg) 90%, transparent);\n border: 2px dashed var(--hw-primary);\n border-radius: 12px;\n z-index: 10;\n pointer-events: none;\n animation: hw-drop-pulse 1.5s ease-in-out infinite;\n}\n.hw-composer-drop-text {\n font-size: 13px;\n font-weight: 500;\n color: var(--hw-primary);\n}\n@keyframes hw-drop-pulse {\n 0%, 100% {\n opacity: 0.8;\n }\n 50% {\n opacity: 1;\n }\n}\n.hw-disconnect {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n padding: 7px 14px;\n background: var(--hw-bg-hover);\n color: var(--hw-text-2);\n font-size: 11.5px;\n font-weight: 500;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex-shrink: 0;\n animation: hw-disconnect-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);\n}\n@keyframes hw-disconnect-in {\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.hw-disconnect-retry {\n flex: none;\n padding: 2px 4px;\n margin: -2px 0;\n border: 0;\n border-radius: 4px;\n background: none;\n color: var(--hw-text);\n font: inherit;\n font-weight: 600;\n text-decoration: underline;\n text-underline-offset: 2px;\n cursor: pointer;\n}\n.hw-disconnect-retry:hover {\n text-decoration-thickness: 2px;\n}\n.hw-disconnect-retry:focus-visible {\n outline: 2px solid var(--hw-text);\n outline-offset: 1px;\n}\n.hw-disconnect-spinner {\n width: 9px;\n height: 9px;\n border: 1.5px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n opacity: 0.75;\n flex-shrink: 0;\n animation: hw-spin 0.7s linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-disconnect {\n animation: none;\n }\n .hw-disconnect-spinner {\n animation: none;\n border-top-color: currentColor;\n opacity: 0.5;\n }\n}\n.hw-error-state {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 24px;\n text-align: center;\n gap: 12px;\n}\n.hw-error-icon {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: #fef2f2;\n color: #ef4444;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.hw-error-icon svg {\n width: 24px;\n height: 24px;\n}\n.hw-error-title {\n font-size: 15px;\n font-weight: 600;\n color: var(--hw-text);\n}\n.hw-error-desc {\n font-size: 13px;\n color: var(--hw-text-2);\n}\n.hw-error-btn {\n padding: 8px 20px;\n border: 1px solid var(--hw-border-md);\n border-radius: 8px;\n background: var(--hw-bg);\n color: var(--hw-text);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n.hw-error-btn:hover {\n background: var(--hw-bg-hover);\n}\n.hw-send-error {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: #fef2f2;\n color: #dc2626;\n font-size: 12px;\n font-weight: 500;\n flex-shrink: 0;\n animation: hw-msg-appear 0.25s ease-out;\n}\n.hw-send-error-retry {\n margin-left: auto;\n padding: 2px 8px;\n border: 1px solid #fca5a5;\n border-radius: 4px;\n background: none;\n color: #dc2626;\n font-size: 11px;\n font-weight: 600;\n cursor: pointer;\n}\n.hw-send-error-retry:hover {\n background: #fee2e2;\n}\n.hw-resolved {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 10px 14px;\n border-top: 1px solid var(--hw-border);\n flex-shrink: 0;\n}\n.hw-resolved-status {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12.5px;\n font-weight: 550;\n color: var(--hw-text);\n}\n.hw-resolved-status svg {\n flex: none;\n color: var(--hw-text-2);\n}\n.hw-csat {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 6px 10px;\n}\n.hw-csat-label,\n.hw-csat-error {\n font-size: 12px;\n color: var(--hw-text-2);\n}\n.hw-csat-error {\n color: var(--hw-text);\n}\n.hw-csat-buttons {\n display: flex;\n gap: 6px;\n}\n.hw-csat-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n height: 30px;\n padding: 0 11px;\n border: 1px solid var(--hw-border-md);\n border-radius: 999px;\n background: var(--hw-bg);\n color: var(--hw-text);\n font: inherit;\n font-size: 12px;\n font-weight: 550;\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n}\n.hw-csat-btn svg {\n flex: none;\n}\n.hw-csat-btn:hover {\n background: var(--hw-bg-hover);\n}\n.hw-csat-btn:focus-visible {\n outline: 2px solid var(--hw-text);\n outline-offset: 2px;\n}\n.hw-csat-btn[aria-pressed=true] {\n background: var(--hw-bg-hover);\n border-color: var(--hw-brand, var(--hw-primary));\n box-shadow: inset 0 0 0 1px var(--hw-brand, var(--hw-primary));\n cursor: default;\n}\n.hw-load-more-trigger {\n display: flex;\n justify-content: center;\n min-height: 1px;\n}\n.hw-load-more-trigger:has(.hw-load-more-spinner) {\n padding: 8px 0;\n}\n.hw-load-more-spinner {\n display: flex;\n gap: 3px;\n}\n.hw-load-more-spinner > div {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--hw-text-4);\n animation: hw-loading-pulse 1.4s infinite;\n}\n.hw-load-more-spinner > div:nth-child(2) {\n animation-delay: 0.2s;\n}\n.hw-load-more-spinner > div:nth-child(3) {\n animation-delay: 0.4s;\n}\n.hw-drag-handle {\n display: none;\n}\n@media (max-width: 479px) {\n .hw-drag-handle {\n display: flex;\n justify-content: center;\n padding: 8px 0 4px;\n flex-shrink: 0;\n }\n .hw-drag-handle-pill {\n width: 32px;\n height: 4px;\n border-radius: 2px;\n background: var(--hw-text-4);\n }\n}\n.hw-msg-bubble p {\n margin: 0 0 8px;\n}\n.hw-msg-bubble p:last-child {\n margin-bottom: 0;\n}\n.hw-msg-bubble strong {\n font-weight: 600;\n}\n.hw-msg-bubble em {\n font-style: italic;\n}\n.hw-msg-bubble a {\n color: inherit;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);\n word-break: normal;\n overflow-wrap: anywhere;\n}\n.hw-msg-bubble a:hover {\n opacity: 0.8;\n}\n.hw-msg--visitor .hw-msg-bubble a {\n color: rgba(255, 255, 255, 0.9);\n}\n.hw-msg--visitor .hw-msg-bubble a:hover {\n color: white;\n}\n.hw-msg-bubble ul,\n.hw-msg-bubble ol {\n margin: 4px 0 8px;\n padding-left: 20px;\n}\n.hw-msg-bubble li {\n margin: 2px 0;\n}\n.hw-msg-bubble code {\n padding: 1px 4px;\n border-radius: 3px;\n background: rgba(0, 0, 0, 0.06);\n font-size: 0.9em;\n font-family:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n monospace;\n}\n.hw-msg-bubble pre {\n margin: 4px 0 8px;\n padding: 8px 10px;\n border-radius: 6px;\n background: rgba(0, 0, 0, 0.06);\n overflow-x: auto;\n font-size: 0.85em;\n}\n.hw-msg-bubble pre code {\n padding: 0;\n background: none;\n}\n.hw-msg-bubble blockquote {\n margin: 4px 0 8px;\n padding: 4px 0 4px 12px;\n border-left: 3px solid var(--hw-border-md);\n color: var(--hw-text-2);\n}\n.hw-widget[data-theme=dark] {\n --hw-bg: #1c1c1e;\n --hw-bg-subtle: #161618;\n --hw-bg-hover: #2c2c2e;\n --hw-border: rgba(255, 255, 255, 0.08);\n --hw-border-md: rgba(255, 255, 255, 0.14);\n --hw-text: #f5f5f5;\n --hw-text-1: #f5f5f5;\n --hw-text-2: #a1a1aa;\n --hw-text-3: #71717a;\n --hw-text-4: #52525b;\n --hw-visitor-bubble-bg: #2c2c2e;\n --hw-visitor-bubble-text: #f5f5f5;\n --hw-focus-border: rgba(255, 255, 255, 0.28);\n --hw-focus-ring: rgba(255, 255, 255, 0.08);\n --hw-brand: #f5f5f5;\n --hw-on-brand: #1c1c1e;\n}\n@media (prefers-color-scheme: dark) {\n .hw-widget:not([data-theme=light]) .hw-messages {\n scrollbar-color: rgba(255, 255, 255, 0.26) transparent;\n }\n .hw-widget:not([data-theme=light]) .hw-messages::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2);\n background-clip: content-box;\n }\n .hw-widget:not([data-theme=light]) .hw-messages::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.32);\n background-clip: content-box;\n }\n .hw-widget:not([data-theme=light]) {\n --hw-bg: #1c1c1e;\n --hw-bg-subtle: #161618;\n --hw-bg-hover: #2c2c2e;\n --hw-border: rgba(255, 255, 255, 0.08);\n --hw-border-md: rgba(255, 255, 255, 0.14);\n --hw-text: #f5f5f5;\n --hw-text-1: #f5f5f5;\n --hw-text-2: #a1a1aa;\n --hw-text-3: #71717a;\n --hw-text-4: #52525b;\n --hw-visitor-bubble-bg: #2c2c2e;\n --hw-visitor-bubble-text: #f5f5f5;\n --hw-focus-border: rgba(255, 255, 255, 0.28);\n --hw-focus-ring: rgba(255, 255, 255, 0.08);\n --hw-brand: #f5f5f5;\n --hw-on-brand: #1c1c1e;\n }\n}\n@media (prefers-color-scheme: dark) {\n .hw-widget:not([data-theme=light]) .hw-header {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-header-bot-icon {\n background: var(--hw-bg-hover);\n }\n .hw-header-name,\n .hw-header-title {\n color: var(--hw-text);\n }\n .hw-header-status {\n color: var(--hw-text-2);\n }\n .hw-header-close,\n .hw-header-back {\n color: var(--hw-text-2);\n }\n .hw-header-close:hover,\n .hw-header-back:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n }\n .hw-content-entry {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-content-entry:hover {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border-md);\n }\n .hw-content-empty,\n .hw-empty {\n color: var(--hw-text-3);\n }\n .hw-conv-card {\n border-color: var(--hw-border);\n }\n .hw-recent-row {\n border-color: var(--hw-border);\n }\n .hw-composer-drop-overlay {\n background: rgba(0, 0, 0, 0.6);\n color: var(--hw-text);\n }\n .hw-composer--dragging .hw-composer-box {\n border-color: var(--hw-focus-border);\n box-shadow: 0 0 0 3px var(--hw-focus-ring);\n }\n .hw-hero {\n background:\n linear-gradient(\n 160deg,\n color-mix(in srgb, var(--hw-primary) 40%, black) 0%,\n var(--hw-primary) 50%,\n color-mix(in srgb, var(--hw-primary) 25%, black) 100%);\n }\n .hw-sheet {\n background: var(--hw-bg);\n }\n .hw-card {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border);\n }\n .hw-card:hover {\n background: #333;\n }\n .hw-window {\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);\n }\n .hw-bubble:focus-visible {\n outline-color: var(--hw-text-3);\n }\n .hw-msg--visitor .hw-msg-bubble {\n background: var(--hw-primary);\n color: white;\n }\n .hw-msg-bubble code {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-msg-bubble pre {\n background: rgba(255, 255, 255, 0.08);\n }\n .hw-composer-box {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-composer-input {\n color: var(--hw-text);\n }\n .hw-tabs {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n .hw-conv-card:hover,\n .hw-recent-row:hover {\n background: var(--hw-bg-hover);\n }\n .hw-send-error {\n background: #450a0a;\n color: #fca5a5;\n }\n .hw-error-icon {\n background: #450a0a;\n color: #f87171;\n }\n .hw-hover-preview {\n background: #1c1c1e;\n border-color: var(--hw-border);\n }\n .hw-content-search-box {\n background: var(--hw-bg-hover);\n border-color: var(--hw-border-md);\n }\n .hw-preview {\n background: var(--hw-bg);\n border-color: var(--hw-border);\n }\n}\n.hw-widget[data-hw-placement=docked] {\n --hw-dock-width: 600px;\n --hw-dock-bar-width: 480px;\n --hw-dock-inset: 24px;\n --hw-bar-max-height: 148px;\n --hw-dock-surface: #ffffff;\n --hw-dock-on-surface: #111111;\n --hw-dock-pill-bg: rgba(44, 44, 48, 0.66);\n --hw-dock-pill-fg: rgba(255, 255, 255, 0.94);\n --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] {\n z-index: 2147483000;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock {\n position: fixed;\n left: 0;\n right: 0;\n bottom: var(--hw-dock-inset);\n z-index: 2147483000;\n display: flex;\n flex-direction: column;\n align-items: center;\n pointer-events: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock > * {\n pointer-events: auto;\n}\n.hw-dock-suggestions {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 9px;\n width: var(--hw-dock-bar-width, var(--hw-dock-width));\n max-width: calc(100vw - 32px);\n margin-bottom: 14px;\n}\n.hw-dock-pill-row {\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n animation: hw-dock-pill-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;\n}\n.hw-dock-pill-dismiss {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n padding: 0;\n border: 0;\n background: none;\n color: var(--hw-dock-pill-fg);\n cursor: pointer;\n align-self: flex-start;\n margin-top: 8px;\n opacity: 0;\n transform: scale(0.85);\n transition:\n opacity 0.12s linear,\n transform 0.12s cubic-bezier(0.25, 1, 0.5, 1),\n color 0.12s linear;\n}\n.hw-dock-pill-dismiss svg {\n width: 11px;\n height: 11px;\n}\n.hw-dock-suggestions:hover .hw-dock-pill-dismiss,\n.hw-dock-suggestions:focus-within .hw-dock-pill-dismiss {\n opacity: 1;\n transform: none;\n}\n.hw-dock-pill-dismiss:hover {\n color: var(--hw-dock-on-surface);\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-pill-dismiss {\n transition: none;\n }\n}\n@media (hover: none) {\n .hw-dock-pill-dismiss {\n opacity: 1;\n transform: none;\n }\n}\n.hw-dock-pill {\n align-self: flex-start;\n padding: 10px 18px;\n border: 1px solid var(--hw-dock-pill-border, transparent);\n border-radius: 999px;\n cursor: pointer;\n font: inherit;\n font-size: 14px;\n font-weight: 500;\n text-align: left;\n background: var(--hw-dock-pill-bg);\n color: var(--hw-dock-pill-fg);\n backdrop-filter: blur(10px) saturate(1.2);\n -webkit-backdrop-filter: blur(10px) saturate(1.2);\n box-shadow: 0 4px 14px -8px rgba(12, 11, 10, 0.28);\n transition:\n background 0.16s,\n border-color 0.16s,\n transform 0.16s;\n}\n.hw-dock-pill {\n backdrop-filter: blur(18px);\n -webkit-backdrop-filter: blur(18px);\n}\n.hw-dock-pill:hover {\n background: color-mix(in srgb, var(--hw-dock-pill-bg) 100%, var(--hw-dock-on-surface) 8%);\n border-color: color-mix(in srgb, var(--hw-dock-pill-border) 100%, var(--hw-dock-on-surface) 10%);\n transform: translateX(3px);\n}\n@keyframes hw-dock-pill-in {\n from {\n opacity: 0;\n transform: translateY(10px) scale(0.97);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-dock-bar {\n display: flex;\n align-items: flex-end;\n gap: 10px;\n width: var(--hw-dock-bar-width, var(--hw-dock-width));\n max-width: calc(100vw - 32px);\n min-height: 52px;\n padding: 10px 10px 10px 18px;\n border: 0;\n border-radius: 26px;\n background: var(--hw-dock-surface);\n color: var(--hw-dock-on-surface);\n box-shadow:\n inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n 0 0 0 1px color-mix(in srgb, var(--hw-dock-on-surface) 7%, transparent),\n 0 2px 6px rgba(12, 11, 10, 0.18),\n 0 20px 48px -14px rgba(12, 11, 10, 0.45);\n transition:\n border-radius 0.18s ease,\n box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),\n width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n.hw-dock-bar:focus-within {\n box-shadow:\n inset 0 1px 0 color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent),\n 0 0 0 1px color-mix(in srgb, var(--hw-primary, #fb923c) 60%, transparent),\n 0 2px 6px rgba(12, 11, 10, 0.18),\n 0 20px 48px -14px rgba(12, 11, 10, 0.45);\n}\n.hw-dock-bar[data-grown=true] {\n border-radius: 20px;\n}\n.hw-dock-input {\n flex: 1;\n min-width: 0;\n min-height: 20px;\n max-height: var(--hw-bar-max-height);\n padding: 6px 0;\n border: 0;\n outline: none;\n resize: none;\n overflow-y: auto;\n background: transparent;\n color: var(--hw-dock-on-surface);\n font: inherit;\n font-size: 14px;\n line-height: 1.45;\n transition: height 0.12s ease;\n}\n.hw-dock-input::placeholder {\n color: color-mix(in srgb, var(--hw-dock-on-surface) 45%, transparent);\n}\n.hw-dock-send {\n flex: none;\n width: 32px;\n height: 32px;\n margin-bottom: 1px;\n border: 0;\n border-radius: 50%;\n display: grid;\n place-items: center;\n cursor: pointer;\n background: var(--hw-primary, #fb923c);\n color: var(--hw-on-brand, #fff);\n transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s;\n}\n.hw-dock-send:hover:not(:disabled) {\n transform: scale(1.06);\n}\n.hw-dock-send:disabled {\n opacity: 0.45;\n cursor: default;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n position: fixed;\n left: 50%;\n right: auto;\n margin-left: calc(var(--hw-dock-width) / -2);\n bottom: calc(var(--hw-dock-inset) + 66px);\n width: var(--hw-dock-width);\n max-width: calc(100vw - 32px);\n height: 420px;\n}\n@media (max-width: 640px) {\n .hw-widget[data-hw-placement=docked] .hw-window {\n left: 16px;\n right: 16px;\n margin-left: 0;\n width: auto;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-bubble {\n display: none;\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-window {\n bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-suggestions {\n display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-pill,\n .hw-dock-bar,\n .hw-dock-input,\n .hw-dock-send {\n animation: none;\n transition: none;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-composer,\n.hw-widget[data-hw-placement=docked] .hw-tabs,\n.hw-widget[data-hw-placement=docked] .hw-footer-tabs {\n display: none;\n}\n.hw-starters {\n display: flex;\n flex-direction: column;\n margin-top: 10px;\n border-radius: 14px;\n overflow: hidden;\n background: var(--hw-bg);\n box-shadow: inset 0 0 0 1px var(--hw-border);\n}\n.hw-starter {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 11px 14px;\n border: 0;\n border-radius: 0;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text);\n font: inherit;\n text-align: left;\n animation: hw-starter-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n transition: background 0.12s;\n}\n.hw-starter + .hw-starter {\n box-shadow: inset 0 1px 0 var(--hw-border);\n}\n.hw-starter:hover {\n background: var(--hw-bg-hover);\n}\n.hw-starter-text {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n.hw-starter-k {\n font-size: 13px;\n font-weight: 550;\n line-height: 1.35;\n color: var(--hw-text);\n}\n.hw-starter-q {\n font-size: 12px;\n line-height: 1.35;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-starter svg {\n flex: none;\n color: var(--hw-text-3, var(--hw-text-muted));\n opacity: 0.45;\n transition: opacity 0.15s, transform 0.15s;\n}\n.hw-starter:hover svg {\n opacity: 0.9;\n transform: translateX(2px);\n}\n@keyframes hw-starter-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-header-back {\n display: none;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-starter {\n animation: none;\n }\n}\n@media (prefers-color-scheme: dark) {\n .hw-widget:not([data-theme=light])[data-hw-placement=docked] {\n --hw-dock-surface: #1f1f23;\n --hw-dock-on-surface: #f4f4f6;\n --hw-dock-pill-bg: rgba(255, 255, 255, 0.1);\n --hw-dock-pill-fg: #e4e4e7;\n --hw-dock-pill-border: rgba(255, 255, 255, 0.14);\n }\n}\n.hw-widget[data-theme=dark][data-hw-placement=docked] {\n --hw-dock-surface: #1f1f23;\n --hw-dock-on-surface: #f4f4f6;\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n --hw-bg: rgba(255, 255, 255, 0.08);\n --hw-bg-subtle: transparent;\n --hw-bg-hover: rgba(255, 255, 255, 0.1);\n --hw-border: rgba(255, 255, 255, 0.14);\n --hw-border-md: rgba(255, 255, 255, 0.22);\n --hw-text: rgba(255, 255, 255, 0.94);\n --hw-text-1: #ffffff;\n --hw-text-2: rgba(255, 255, 255, 0.72);\n --hw-text-3: rgba(255, 255, 255, 0.62);\n --hw-text-4: rgba(255, 255, 255, 0.46);\n --hw-visitor-bubble-bg: rgba(255, 255, 255, 0.16);\n --hw-visitor-bubble-text: #ffffff;\n --hw-brand: rgba(255, 255, 255, 0.92);\n --hw-on-brand: #17161a;\n --hw-focus-border: rgba(255, 255, 255, 0.34);\n --hw-focus-ring: rgba(255, 255, 255, 0.1);\n height: 500px;\n max-height: calc(100vh - 180px);\n border-radius: 24px;\n color: var(--hw-text);\n background:\n linear-gradient(\n 180deg,\n rgba(40, 40, 44, 0.72) 0%,\n rgba(46, 46, 50, 0.7) 55%,\n rgba(52, 52, 56, 0.68) 100%);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .hw-widget[data-hw-placement=docked] .hw-window {\n background: #2c2c2e;\n }\n}\n@media (max-width: 640px) {\n .hw-widget[data-hw-placement=docked] .hw-window {\n height: min(60vh, 460px);\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-header--sub {\n padding: 14px 12px 8px 16px;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-status {\n display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-name {\n font-size: 15.5px;\n font-weight: 560;\n letter-spacing: -0.006em;\n color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-conv-name,\n.hw-widget[data-hw-placement=docked] .hw-event-name {\n font-weight: 545;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-bot-icon {\n border-radius: 50%;\n overflow: hidden;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-close:hover,\n.hw-widget[data-hw-placement=docked] .hw-header-menu-btn:hover {\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-messages {\n padding: 4px 22px 16px;\n gap: 18px;\n -webkit-mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 16px);\n mask-image:\n linear-gradient(\n 180deg,\n transparent 0,\n #000 16px);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--ai .hw-msg-bubble,\n.hw-widget[data-hw-placement=docked] .hw-msg--team .hw-msg-bubble {\n padding: 0;\n background: transparent;\n border-radius: 0;\n font-size: 15px;\n line-height: 1.55;\n color: var(--hw-text);\n}\n.hw-widget[data-hw-placement=docked] .hw-msg--visitor .hw-msg-bubble {\n background: rgba(255, 255, 255, 0.16);\n color: #ffffff;\n font-size: 14.5px;\n line-height: 1.5;\n}\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble pre,\n.hw-widget[data-hw-placement=docked] .hw-msg-bubble code {\n background: rgba(0, 0, 0, 0.28);\n color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row {\n background: rgba(0, 0, 0, 0.26);\n border-color: rgba(255, 255, 255, 0.14);\n}\n.hw-widget[data-hw-placement=docked] .hw-window :focus-visible {\n outline-color: rgba(255, 255, 255, 0.55);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus,\n.hw-widget[data-hw-placement=docked] .hw-email-card-input:focus-visible {\n outline: none;\n box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-row:focus-within {\n border-color: rgba(255, 255, 255, 0.42);\n box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-email-card-submit {\n background: #ffffff;\n color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n position: relative;\n z-index: 3;\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu {\n background: #3a3a3f;\n box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 44px -12px rgba(12, 11, 10, 0.62);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button:hover {\n background: rgba(255, 255, 255, 0.11);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu button.hw-header-menu-conv[data-active=true] {\n background: rgba(255, 255, 255, 0.09);\n}\n.hw-widget[data-hw-placement=docked] .hw-header-menu-convs {\n border-bottom-color: rgba(255, 255, 255, 0.12);\n}\n.hw-widget[data-hw-placement=docked] .hw-event--card {\n margin: 0;\n background: rgba(255, 255, 255, 0.08);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n}\n.hw-widget[data-hw-placement=docked] .hw-event-avatar {\n background: rgba(255, 255, 255, 0.14);\n color: var(--hw-text-1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview {\n position: fixed;\n left: 50%;\n right: auto;\n margin-left: calc(var(--hw-dock-bar-width, var(--hw-dock-width)) / -2);\n bottom: calc(var(--hw-dock-inset) + 52px + 12px);\n width: var(--hw-dock-bar-width, var(--hw-dock-width));\n max-width: calc(100vw - 32px);\n border: 0;\n border-radius: 24px;\n color: rgba(255, 255, 255, 0.94);\n background:\n linear-gradient(\n 180deg,\n rgba(40, 40, 44, 0.74) 0%,\n rgba(52, 52, 56, 0.7) 100%);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-name,\n.hw-widget[data-hw-placement=docked] .hw-preview-body {\n color: rgba(255, 255, 255, 0.94);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close {\n color: rgba(255, 255, 255, 0.6);\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-close:hover {\n background: rgba(255, 255, 255, 0.12);\n color: #ffffff;\n}\n.hw-widget[data-hw-placement=docked] .hw-preview-footer {\n color: rgba(255, 255, 255, 0.55);\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n@media (max-width: 640px) {\n .hw-widget[data-hw-placement=docked] .hw-preview {\n left: 16px;\n right: 16px;\n margin-left: 0;\n width: auto;\n }\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .hw-widget[data-hw-placement=docked] .hw-preview {\n background: #2c2c2e;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn {\n padding: 7px 14px;\n font-size: 13px;\n font-weight: 550;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.94);\n box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n color: #17161a;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn:hover:not(:disabled) {\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn[data-tapped=true] {\n background: rgba(255, 255, 255, 0.22);\n color: #ffffff;\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n transform: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-quick-reply-btn svg {\n opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer {\n padding: 7px 14px;\n font-size: 13px;\n background: rgba(255, 255, 255, 0.94);\n color: #17161a;\n box-shadow: 0 1px 3px rgba(12, 11, 10, 0.22);\n transition:\n background 0.15s,\n box-shadow 0.15s,\n transform 0.15s;\n}\n.hw-widget[data-hw-placement=docked] .hw-offer:hover {\n background: #ffffff;\n color: #17161a;\n box-shadow: 0 4px 12px rgba(12, 11, 10, 0.28);\n transform: translateY(-1px);\n}\n.hw-widget[data-hw-placement=docked] .hw-offer svg {\n opacity: 0.55;\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar {\n --hw-dock-on-surface: rgba(255, 255, 255, 0.94);\n color: rgba(255, 255, 255, 0.94);\n background:\n linear-gradient(\n 180deg,\n rgba(44, 44, 48, 0.74) 0%,\n rgba(52, 52, 56, 0.72) 100%);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -16px rgba(12, 11, 10, 0.45);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n width: var(--hw-dock-width);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-bar:focus-within {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0 18px 40px -16px rgba(12, 11, 10, 0.5);\n}\n.hw-widget[data-hw-placement=docked][data-hw-open=true] .hw-dock-bar {\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 22px 52px -18px rgba(12, 11, 10, 0.52);\n}\n.hw-widget[data-hw-placement=docked] .hw-dock-send:not(:disabled) {\n background: #ffffff;\n color: #17161a;\n}\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n .hw-widget[data-hw-placement=docked] .hw-dock-bar {\n background: #2c2c2e;\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-window {\n transform-origin: 50% 100%;\n animation: hw-dock-panel-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing {\n animation: hw-dock-panel-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;\n}\n@keyframes hw-dock-panel-in {\n from {\n opacity: 0;\n transform: translateY(14px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n@keyframes hw-dock-panel-out {\n from {\n opacity: 1;\n transform: none;\n }\n to {\n opacity: 0;\n transform: translateY(8px) scale(0.99);\n }\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub {\n animation: hw-dock-settle 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n animation: hw-dock-settle 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.11s both;\n}\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-header--sub,\n.hw-widget[data-hw-placement=docked] .hw-window--closing .hw-messages {\n animation: none;\n}\n@keyframes hw-dock-settle {\n from {\n opacity: 0;\n transform: translateY(7px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-widget[data-hw-placement=docked] .hw-window,\n .hw-widget[data-hw-placement=docked] .hw-window--closing,\n .hw-widget[data-hw-placement=docked] .hw-window .hw-header--sub,\n .hw-widget[data-hw-placement=docked] .hw-window .hw-messages {\n animation: none;\n }\n}\n.hw-dock-bar {\n flex-wrap: wrap;\n padding-left: 18px;\n padding-right: 8px;\n}\n.hw-dock-error {\n width: var(--hw-dock-width);\n max-width: calc(100vw - 32px);\n margin-bottom: 8px;\n padding: 8px 14px;\n border-radius: 14px;\n background: rgba(190, 24, 40, 0.92);\n color: #ffffff;\n font-size: 12.5px;\n line-height: 1.35;\n box-shadow: 0 10px 26px -12px rgba(12, 11, 10, 0.5);\n animation: hw-dock-settle 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-error {\n animation: none;\n }\n}\n.hw-dock-previews {\n flex: 0 0 100%;\n order: -1;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 2px 0 8px;\n}\n.hw-dock-lead {\n flex: none;\n display: grid;\n place-items: center;\n width: 32px;\n height: 32px;\n margin-left: -8px;\n}\n.hw-dock-actions {\n flex: none;\n display: flex;\n align-items: center;\n gap: 2px;\n margin-bottom: 1px;\n}\n.hw-dock-tool {\n display: grid;\n place-items: center;\n width: 30px;\n height: 30px;\n border: 0;\n border-radius: 50%;\n background: transparent;\n color: color-mix(in srgb, var(--hw-dock-on-surface) 52%, transparent);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n}\n.hw-dock-tool:hover:not(:disabled) {\n background: color-mix(in srgb, var(--hw-dock-on-surface) 8%, transparent);\n color: var(--hw-dock-on-surface);\n}\n.hw-dock-tool:disabled {\n opacity: 0.4;\n cursor: default;\n}\n.hw-dock-tool[data-active=true] {\n color: #e11d48;\n background: rgba(225, 29, 72, 0.12);\n animation: hw-dock-listening 1.4s ease-in-out infinite;\n}\n@keyframes hw-dock-listening {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(225, 29, 72, 0);\n }\n}\n.hw-dock-send:disabled {\n opacity: 1;\n background: color-mix(in srgb, var(--hw-dock-on-surface) 9%, transparent);\n color: color-mix(in srgb, var(--hw-dock-on-surface) 38%, transparent);\n}\n@media (prefers-reduced-motion: reduce) {\n .hw-dock-tool[data-active=true] {\n animation: none;\n }\n .hw-dock-bar {\n transition: none;\n }\n}\n.hw-dock-input:focus,\n.hw-dock-input:focus-visible {\n outline: none;\n box-shadow: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-powered {\n display: none;\n}\n.hw-widget[data-hw-placement=docked] .hw-disconnect {\n border-radius: 20px 20px 0 0;\n}\n.hw-msg-meta {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.hw-msg-author {\n font-weight: 550;\n}\n.hw-msg-meta-sep {\n opacity: 0.55;\n}\n.hw-header-actions {\n position: relative;\n display: flex;\n align-items: center;\n gap: 2px;\n}\n.hw-header-menu-btn {\n display: grid;\n place-items: center;\n width: 30px;\n height: 30px;\n border: 0;\n border-radius: 8px;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text-2, var(--hw-text-muted));\n transition: background 0.15s, color 0.15s;\n}\n.hw-header-menu-btn:hover {\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n}\n.hw-header-menu {\n position: absolute;\n top: 36px;\n right: 0;\n z-index: 6;\n min-width: 236px;\n max-width: 288px;\n padding: 5px;\n border-radius: 14px;\n background: var(--hw-bg);\n color: var(--hw-text);\n box-shadow: 0 0 0 1px var(--hw-border), 0 12px 32px -10px rgba(0, 0, 0, 0.32);\n animation: hw-menu-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;\n}\n@keyframes hw-menu-in {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: none;\n }\n}\n.hw-header-menu button {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 9px 10px;\n border: 0;\n border-radius: 9px;\n cursor: pointer;\n background: transparent;\n color: var(--hw-text);\n font: inherit;\n font-size: 13px;\n text-align: left;\n transition: background 0.14s;\n}\n.hw-header-menu button:hover {\n background: var(--hw-bg-hover);\n}\n.hw-header-menu button svg {\n flex: none;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu button:hover svg {\n color: var(--hw-brand, var(--hw-primary));\n}\n.hw-header-menu-convs {\n display: flex;\n flex-direction: column;\n max-height: 168px;\n overflow-y: auto;\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid var(--hw-border);\n}\n.hw-header-menu button.hw-header-menu-conv {\n flex-direction: column;\n align-items: stretch;\n gap: 2px;\n padding: 8px 10px;\n}\n.hw-header-menu button.hw-header-menu-conv[data-active=true] {\n background: var(--hw-bg-hover);\n}\n.hw-header-menu-conv-top {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 8px;\n}\n.hw-header-menu-conv-name {\n overflow: hidden;\n font-size: 12.5px;\n font-weight: 600;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-header-menu-conv-time {\n flex: none;\n font-size: 11px;\n color: var(--hw-text-3, var(--hw-text-muted));\n}\n.hw-header-menu-conv-preview {\n overflow: hidden;\n font-size: 12px;\n color: var(--hw-text-2);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-offers {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 10px;\n}\n.hw-offer {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n border: 0;\n border-radius: 999px;\n cursor: pointer;\n background: var(--hw-bg-hover);\n color: var(--hw-text);\n font: inherit;\n font-size: 12.5px;\n font-weight: 550;\n transition: background 0.15s, color 0.15s;\n}\n.hw-offer:hover {\n background: var(--hw-brand, var(--hw-primary));\n color: var(--hw-on-brand, #fff);\n}\n.hw-offer svg {\n flex: none;\n}\n.hw-sources {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 4px;\n}\n.hw-source {\n display: flex;\n align-items: center;\n gap: 9px;\n padding: 5px 14px;\n border-radius: 9px;\n background: transparent;\n color: var(--hw-text);\n text-decoration: none;\n transition: background 0.15s;\n}\n.hw-widget[data-hw-placement=docked] .hw-source {\n margin-inline: -8px;\n padding-inline: 8px;\n}\na.hw-source {\n cursor: pointer;\n}\na.hw-source:hover {\n background: var(--hw-bg-hover);\n}\n.hw-source-n {\n display: grid;\n place-items: center;\n flex: none;\n width: 16px;\n height: 16px;\n border-radius: 4px;\n background: var(--hw-brand, var(--hw-primary));\n color: var(--hw-on-brand, #fff);\n font-size: 10px;\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n}\n.hw-source-title {\n flex: 1;\n min-width: 0;\n font-size: 12px;\n font-weight: 550;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] {\n --hw-dock-tint: var(--hw-primary);\n --hw-dock-ink: #ffffff;\n --hw-dock-shade: #000000;\n --hw-dock-wash: var(--hw-dock-shade);\n --hw-dock-ink-2: color-mix(in srgb, var(--hw-dock-ink) 86%, var(--hw-dock-tint));\n --hw-dock-ink-3: color-mix(in srgb, var(--hw-dock-ink) 78%, var(--hw-dock-tint));\n --hw-dock-ink-4: color-mix(in srgb, var(--hw-dock-ink) 60%, var(--hw-dock-tint));\n --hw-dock-pill-bg: var(--hw-dock-tint);\n --hw-dock-pill-fg: var(--hw-dock-ink);\n --hw-dock-pill-border: color-mix(in srgb, var(--hw-dock-ink) 30%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-window, .hw-dock-bar, .hw-preview) {\n --hw-text: var(--hw-dock-ink);\n --hw-text-1: var(--hw-dock-ink);\n --hw-text-2: var(--hw-dock-ink-2);\n --hw-text-3: var(--hw-dock-ink-3);\n --hw-text-4: var(--hw-dock-ink-4);\n --hw-text-muted: var(--hw-dock-ink-2);\n --hw-bg: color-mix(in srgb, var(--hw-dock-wash) 12%, transparent);\n --hw-bg-subtle: transparent;\n --hw-bg-hover: color-mix(in srgb, var(--hw-dock-wash) 18%, transparent);\n --hw-border: color-mix(in srgb, var(--hw-dock-ink) 22%, transparent);\n --hw-border-md: color-mix(in srgb, var(--hw-dock-ink) 34%, transparent);\n --hw-focus-border: color-mix(in srgb, var(--hw-dock-ink) 60%, transparent);\n --hw-focus-ring: color-mix(in srgb, var(--hw-dock-ink) 18%, transparent);\n --hw-visitor-bubble-bg: color-mix(in srgb, var(--hw-dock-wash) 14%, transparent);\n --hw-visitor-bubble-text: var(--hw-dock-ink);\n --hw-primary: var(--hw-dock-ink);\n --hw-primary-hover: var(--hw-dock-ink);\n --hw-brand: var(--hw-dock-ink);\n --hw-on-brand: var(--hw-dock-tint);\n --hw-dock-surface: transparent;\n --hw-dock-on-surface: var(--hw-dock-ink);\n color: var(--hw-dock-ink);\n background:\n radial-gradient(\n 70% 60% at 86% 8%,\n var(--hw-dock-tint),\n transparent 64%),\n linear-gradient(\n 165deg,\n color-mix(in srgb, var(--hw-dock-shade) 12%, var(--hw-dock-tint)) 0%,\n color-mix(in srgb, var(--hw-dock-shade) 30%, var(--hw-dock-tint)) 100%);\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n box-shadow: 0 24px 60px -20px rgba(12, 11, 10, 0.5), inset 0 0 0 1px color-mix(in srgb, var(--hw-dock-ink) 16%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble {\n background: var(--hw-dock-ink);\n color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble a,\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg--visitor .hw-msg-bubble a:hover {\n color: inherit;\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-dock-send:not(:disabled), .hw-quick-reply-btn, .hw-quick-reply-btn:hover:not(:disabled), .hw-email-card-submit, .hw-offer, .hw-offer:hover) {\n background: var(--hw-dock-ink);\n color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-preview-body, .hw-header-close:hover, .hw-header-menu-btn:hover, .hw-preview-close:hover, .hw-quick-reply-btn[data-tapped=true]) {\n color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-preview-close, .hw-preview-footer) {\n color: var(--hw-dock-ink-2);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-quick-reply-btn[data-tapped=true] {\n background: color-mix(in srgb, var(--hw-dock-wash) 22%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-window :focus-visible {\n outline-color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-msg-bubble :is(pre, code),\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-email-card-row {\n background: color-mix(in srgb, var(--hw-dock-shade) 26%, transparent);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-header-menu {\n background: color-mix(in srgb, var(--hw-dock-shade) 34%, var(--hw-dock-tint));\n color: var(--hw-dock-ink);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] :is(.hw-header-bot-icon--team, .hw-event-avatar) {\n background: var(--hw-dock-ink);\n color: var(--hw-dock-tint);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-dock-input::placeholder {\n color: var(--hw-dock-ink-3);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-typing-dot {\n background: var(--hw-dock-ink-2);\n}\n.hw-widget[data-hw-placement=docked][data-hw-dock-surface=brand] .hw-disconnect {\n background: color-mix(in srgb, var(--hw-dock-shade) 16%, transparent);\n color: var(--hw-dock-ink-2);\n}\n');
7050
7901
 
7051
7902
  // src/helpway-widget.tsx
7052
- import { jsx as jsx18 } from "react/jsx-runtime";
7903
+ import { jsx as jsx20 } from "react/jsx-runtime";
7053
7904
  function HelpwayWidget({
7054
7905
  apiKey,
7055
7906
  apiUrl,
@@ -7071,7 +7922,7 @@ function HelpwayWidget({
7071
7922
  src
7072
7923
  }) {
7073
7924
  const resolvedApiUrl = apiUrl ?? (src ? src.replace(/\/widget\.js$/, "") : void 0);
7074
- return /* @__PURE__ */ jsx18(
7925
+ return /* @__PURE__ */ jsx20(
7075
7926
  SupportProvider,
7076
7927
  {
7077
7928
  apiKey,
@@ -7085,7 +7936,7 @@ function HelpwayWidget({
7085
7936
  onClose,
7086
7937
  onUnreadChange,
7087
7938
  theme,
7088
- children: /* @__PURE__ */ jsx18(AgentAvatarProvider, { value: agentAvatar ?? null, children: /* @__PURE__ */ jsx18(
7939
+ children: /* @__PURE__ */ jsx20(AgentAvatarProvider, { value: agentAvatar ?? null, children: /* @__PURE__ */ jsx20(
7089
7940
  DefaultWidget,
7090
7941
  {
7091
7942
  hideLauncher,
@@ -7099,14 +7950,14 @@ function HelpwayWidget({
7099
7950
  }
7100
7951
 
7101
7952
  // src/hooks/use-realtime.ts
7102
- import { useEffect as useEffect17, useRef as useRef18 } from "react";
7953
+ import { useEffect as useEffect18, useRef as useRef19 } from "react";
7103
7954
  function useRealtime(handler) {
7104
7955
  const { ws } = useWidgetContext();
7105
- const handlerRef = useRef18(handler);
7106
- useEffect17(() => {
7956
+ const handlerRef = useRef19(handler);
7957
+ useEffect18(() => {
7107
7958
  handlerRef.current = handler;
7108
7959
  });
7109
- useEffect17(() => {
7960
+ useEffect18(() => {
7110
7961
  return ws.onEvent((event) => handlerRef.current(event));
7111
7962
  }, [ws]);
7112
7963
  }