@paramms/chat-widget 1.0.36 → 1.0.38

package/dist/index.js

@@ -1,16 +1,16 @@
-var pe = Object.defineProperty;
-var he = (o, e, i) => e in o ? pe(o, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[e] = i;
-var y = (o, e, i) => he(o, typeof e != "symbol" ? e + "" : e, i);
-import { p as fe, r as ue, a as we } from "./uid.js";
-import { h as Me } from "./uid.js";
-import { P as be, C as xe, b as ge } from "./outbox.js";
-import { e as He } from "./outbox.js";
-import { E2ESession as me, extractX3DHInit as ye } from "./e2e.js";
-const te = "http://www.w3.org/2000/svg", ve = 8e3;
-class ke {
+var be = Object.defineProperty;
+var xe = (o, e, i) => e in o ? be(o, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[e] = i;
+var v = (o, e, i) => xe(o, typeof e != "symbol" ? e + "" : e, i);
+import { p as ge, r as me, a as ve } from "./codec.js";
+import { h as We } from "./codec.js";
+import { P as ye, C as ke, b as Ce } from "./outbox.js";
+import { e as Ke } from "./outbox.js";
+import { E2ESession as Te, extractX3DHInit as Ie } from "./e2e.js";
+const ae = "http://www.w3.org/2000/svg", Se = 8e3;
+class ze {
   constructor() {
-    y(this, "svg", null);
-    y(this, "timers", /* @__PURE__ */ new Set());
+    v(this, "svg", null);
+    v(this, "timers", /* @__PURE__ */ new Set());
   }
   /** Feed every server frame; the overlay reacts to annotation frames only. */
   apply(e) {
@@ -23,7 +23,7 @@ class ke {
   ensureSvg() {
     var i;
     if ((i = this.svg) != null && i.isConnected) return this.svg;
-    const e = document.createElementNS(te, "svg");
+    const e = document.createElementNS(ae, "svg");
     return e.setAttribute("data-relay-annotations", ""), e.setAttribute("aria-hidden", "true"), e.setAttribute(
       "style",
       "position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483000;"
@@ -32,15 +32,15 @@ class ke {
   draw(e) {
     var b;
     if (typeof document > "u" || !((b = e.points) != null && b.length)) return;
-    const i = this.ensureSvg(), s = window.innerWidth, a = window.innerHeight, c = document.createElementNS(te, "polyline");
-    c.setAttribute("points", e.points.map((d) => `${(d.x * s).toFixed(1)},${(d.y * a).toFixed(1)}`).join(" ")), c.setAttribute("fill", "none"), c.setAttribute("stroke", e.color || "#ff3b30"), c.setAttribute("stroke-width", String(e.width || 3)), c.setAttribute("stroke-linecap", "round"), c.setAttribute("stroke-linejoin", "round"), c.setAttribute("data-stroke-id", e.id), i.append(c);
+    const i = this.ensureSvg(), s = window.innerWidth, a = window.innerHeight, r = document.createElementNS(ae, "polyline");
+    r.setAttribute("points", e.points.map((d) => `${(d.x * s).toFixed(1)},${(d.y * a).toFixed(1)}`).join(" ")), r.setAttribute("fill", "none"), r.setAttribute("stroke", e.color || "#ff3b30"), r.setAttribute("stroke-width", String(e.width || 3)), r.setAttribute("stroke-linecap", "round"), r.setAttribute("stroke-linejoin", "round"), r.setAttribute("data-stroke-id", e.id), i.append(r);
     const f = setTimeout(() => {
-      c.style.transition = "opacity 600ms", c.style.opacity = "0";
+      r.style.transition = "opacity 600ms", r.style.opacity = "0";
       const d = setTimeout(() => {
-        c.remove(), this.timers.delete(d);
+        r.remove(), this.timers.delete(d);
       }, 650);
       this.timers.add(d), this.timers.delete(f);
-    }, ve);
+    }, Se);
     this.timers.add(f);
   }
   clear() {
@@ -53,19 +53,29 @@ class ke {
     this.timers.clear(), (e = this.svg) == null || e.remove(), this.svg = null;
   }
 }
-const oe = "objectchat-widget-styles", Ce = ["👍", "❤️", "😂", "😮", "😢", "🙏"], Te = `
+const re = "objectchat-widget-styles", Ee = ["👍", "❤️", "😂", "😮", "😢", "🙏"], Pe = 400, Le = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', je = `
 .ocw { --ocw-accent:#4F63F5; --ocw-bg:#f3efe9; --ocw-card:#fff; --ocw-line:#ececec; --ocw-ink:#1c1b1a; --ocw-mut:#9b9690;
   position:relative;
   display:flex; flex-direction:column; height:100%; min-height:320px; background:var(--ocw-bg);
   font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; color:var(--ocw-ink); overflow:hidden; }
-@media (max-width:480px) {
-  .ocw { min-height:100dvh; border-radius:0 !important; }
-  .ocw-bubble { font-size:15px; }
-  .ocw-input textarea { font-size:16px; } /* prevent iOS zoom on focus */
-  .ocw-chip { padding:9px 14px; font-size:14px; }
-  .ocw-modal-card { width:90%; }
-  .ocw-row { max-width:94%; }
-}
+/* ── Responsive sizing ──────────────────────────────────────────────────────
+ * Sizing is driven by the WIDGET'S OWN width (ResizeObserver toggles
+ * .ocw-compact below 400px), not the viewport — so a widget embedded in a
+ * narrow desktop sidebar sizes the same as one on a phone, and a tablet in
+ * landscape keeps comfortable desktop sizing. A viewport query alone can't
+ * see the container. Fullscreen (launcher on mobile) additionally gets
+ * .ocw-fs from the launcher, which is the only case that should remove the
+ * corner radius — an INLINE embed on a phone must NOT take over the page
+ * (the old blanket min-height:100dvh rule did exactly that). */
+.ocw.ocw-fs { border-radius:0 !important; }
+.ocw-compact .ocw-bubble { font-size:15px; }
+.ocw-compact.ocw .ocw-input textarea { font-size:16px; } /* ≥16px prevents iOS zoom on focus */
+.ocw-compact .ocw-chip { padding:9px 14px; font-size:14px; }
+.ocw-compact .ocw-modal-card { width:90%; }
+.ocw-compact .ocw-row { max-width:94%; }
+.ocw-compact .ocw-sendbtn { min-width:44px; height:44px; }
+.ocw-compact .ocw-back { width:34px; height:34px; }
+.ocw-compact .ocw-quick button { padding:9px 15px; font-size:14px; }
 /* RTL support: when the host element has dir=rtl, flip layout direction */
 [dir="rtl"] .ocw-row.mine { flex-direction:row; }
 [dir="rtl"] .ocw-row.theirs { flex-direction:row-reverse; }
@@ -114,7 +124,6 @@ const oe = "objectchat-widget-styles", Ce = ["👍", "❤️", "😂", "😮", "
 .ocw-react-pill { display:inline-flex; align-items:center; gap:3px; border:1px solid #e3ded7; border-radius:999px; padding:2px 7px; background:#fff; font-size:12px; cursor:pointer; }
 .ocw-react-pill:hover { border-color:var(--ocw-accent); }
 .ocw-react-pill.mine { border-color:var(--ocw-accent); background:#fff8f5; }
-.ocw-react-add { display:none; position:absolute; bottom:100%; left:0; margin-bottom:4px; background:#fff; border:1px solid #e3ded7; border-radius:14px; padding:6px 8px; box-shadow:0 4px 16px rgba(0,0,0,.12); display:flex; gap:4px; z-index:10; }
 .ocw-react-wrap { position:relative; }
 .ocw-react-wrap:not(:hover) .ocw-react-picker { display:none; }
 .ocw-react-picker { position:absolute; bottom:calc(100% + 4px); left:0; background:#fff; border:1px solid #e3ded7; border-radius:14px; padding:6px 8px; box-shadow:0 4px 16px rgba(0,0,0,.12); display:flex; gap:4px; z-index:10; white-space:nowrap; }
@@ -203,10 +212,19 @@ const oe = "objectchat-widget-styles", Ce = ["👍", "❤️", "😂", "😮", "
 .ocw-footer a:hover { color:var(--ocw-accent); }
 .ocw-attach { background:none;border:none;cursor:pointer;font-size:18px;padding:4px 6px;opacity:.6;flex-none; }
 .ocw-attach:hover { opacity:1; }
-.ocw-input textarea { flex:1; resize:none; border:1px solid #e3ded7; border-radius:22px; padding:11px 16px; font:inherit; font-size:14px; background:#fff; outline:none; max-height:96px; }
+.ocw-input textarea { flex:1; min-width:0; resize:none; border:1px solid #e3ded7; border-radius:22px; padding:11px 16px; font:inherit; font-size:14px; line-height:1.4; background:#fff; outline:none; max-height:120px; overflow-y:auto; }
 .ocw-input textarea:focus { border-color:var(--ocw-accent); }
-.ocw-sendbtn { width:42px; height:42px; border-radius:50%; border:none; background:var(--ocw-accent); color:#fff; font-size:18px; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; }
+/* Send button auto-sizes to its label: the default is a fixed circle around an
+ * inline SVG; a TEXT label (i18n.send: "Send", "보내기", "Enviar"…) switches to
+ * .ocw-sendbtn-label — a pill whose width follows the text. A fixed 42px
+ * circle with 18px type overflowed the moment anyone localized the label. */
+.ocw-sendbtn { min-width:42px; height:42px; border-radius:999px; border:none; background:var(--ocw-accent); color:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; padding:0; transition:opacity .15s, transform .1s; }
+.ocw-sendbtn-label { padding:0 16px; white-space:nowrap; }
+.ocw-sendbtn svg { width:19px; height:19px; display:block; }
+.ocw-sendbtn:not(:disabled):hover { transform:scale(1.05); }
+.ocw-sendbtn:not(:disabled):active { transform:scale(.96); }
 .ocw-sendbtn:disabled { opacity:.5; cursor:default; }
+.ocw-sendbtn:focus-visible, .ocw-back:focus-visible, .ocw-chip:focus-visible { outline:2px solid var(--ocw-accent); outline-offset:2px; }
 .ocw-cobrowse-btn { display:none; }
 .ocw-cobrowse-btn.show { display:inline-flex; }
 .ocw-cobrowse-btn.on { color:var(--ocw-accent); border-color:var(--ocw-accent); }
@@ -226,23 +244,23 @@ const oe = "objectchat-widget-styles", Ce = ["👍", "❤️", "😂", "😮", "
 .ocw-bubble-wrap:hover .ocw-translate-btn { opacity:1; }
 .ocw-translated-tag { font-size:10px; color:var(--ocw-mut); margin-top:2px; }
 `;
-function Ie() {
-  if (typeof document > "u" || document.getElementById(oe)) return;
+function Ae() {
+  if (typeof document > "u" || document.getElementById(re)) return;
   const o = document.createElement("style");
-  o.id = oe, o.textContent = Te, document.head.appendChild(o);
+  o.id = re, o.textContent = je, document.head.appendChild(o);
 }
 function t(o, e, i) {
   const s = document.createElement(o);
   return e && (s.className = e), i !== void 0 && (s.textContent = i), s;
 }
-function Se(o) {
+function $e(o) {
   try {
     return new Date(o).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   } catch {
     return "";
   }
 }
-function W(o) {
+function X(o) {
   var e;
   switch (o.kind) {
     case "text":
@@ -259,61 +277,66 @@ function W(o) {
       return `📅 ${o.title} — ${new Date(o.startIso).toLocaleString()}`;
   }
 }
-class Ee {
+class Be {
   /** Last seq the guest has seen per conversationId — used to compute unread badges. */
   constructor(e, i, s, a = {}) {
-    y(this, "scroll");
-    y(this, "chips");
-    y(this, "typing");
-    y(this, "quick");
-    y(this, "formHost");
-    y(this, "csatPanel");
-    y(this, "offlinePanel");
-    y(this, "preChatPanel");
-    y(this, "deflectPanel");
-    y(this, "preChatBuilt", !1);
-    y(this, "preChatDone", !1);
-    y(this, "footer");
-    y(this, "input");
-    y(this, "subjectCard");
-    y(this, "e2eBadge");
-    y(this, "statusBadge");
-    y(this, "headerName");
-    y(this, "connStatus");
-    y(this, "typingTimer", null);
-    y(this, "csatSubmitted", !1);
+    v(this, "scroll");
+    v(this, "chips");
+    v(this, "typing");
+    v(this, "quick");
+    v(this, "formHost");
+    v(this, "csatPanel");
+    v(this, "offlinePanel");
+    v(this, "preChatPanel");
+    v(this, "deflectPanel");
+    v(this, "preChatBuilt", !1);
+    v(this, "preChatDone", !1);
+    v(this, "footer");
+    v(this, "input");
+    v(this, "subjectCard");
+    v(this, "e2eBadge");
+    v(this, "statusBadge");
+    v(this, "headerName");
+    v(this, "connStatus");
+    v(this, "typingTimer", null);
+    v(this, "csatSubmitted", !1);
+    v(this, "sendBtn");
+    /** Container-driven responsive sizing — toggles .ocw-compact (see CSS note). */
+    v(this, "compactObserver", null);
     // ── Co-browsing (shared whiteboard) ─────────────────────────────────────
-    y(this, "cobrowseBtn");
-    y(this, "cobrowseCanvas");
-    y(this, "cobrowseToolbar");
-    y(this, "cobrowseHint");
-    y(this, "cobrowseActive", !1);
-    y(this, "cobrowseColor", "#f5713c");
-    y(this, "lastAnnotationVersion", -1);
-    y(this, "storeRef", null);
-    y(this, "scrollCleanup", null);
+    v(this, "cobrowseBtn");
+    v(this, "cobrowseCanvas");
+    v(this, "cobrowseToolbar");
+    v(this, "cobrowseHint");
+    v(this, "cobrowseActive", !1);
+    v(this, "cobrowseColor", "#f5713c");
+    v(this, "lastAnnotationVersion", -1);
+    v(this, "storeRef", null);
+    v(this, "scrollCleanup", null);
     // ── Live translation ──────────────────────────────────────────────────-
-    y(this, "translationCache", /* @__PURE__ */ new Map());
-    y(this, "showingTranslation", /* @__PURE__ */ new Set());
-    y(this, "subjectBuilt", !1);
-    var m, h, I, T, $, A, P, z, k;
-    this.root = e, this.me = i, this.h = s, this.cfg = a, Ie(), e.replaceChildren(), e.classList.add("ocw"), a.accent && e.style.setProperty("--ocw-accent", a.accent);
-    const c = t("div", "ocw-head");
+    v(this, "translationCache", /* @__PURE__ */ new Map());
+    v(this, "showingTranslation", /* @__PURE__ */ new Set());
+    /** Whether the subject card (server Subject entity, mount config fallback)
+     *  has been built — built once when data first arrives. */
+    v(this, "subjectBuilt", !1);
+    var k, E, I, A, $, z, q, C, j, D;
+    this.root = e, this.me = i, this.h = s, this.cfg = a, Ae(), e.replaceChildren(), e.classList.add("ocw"), a.accent && e.style.setProperty("--ocw-accent", a.accent);
+    const r = t("div", "ocw-head");
     if (this.h.onBack) {
       const x = t("button", "ocw-back", "‹");
-      x.type = "button", x.setAttribute("aria-label", "Back"), x.addEventListener("click", () => this.h.onBack()), c.append(x);
+      x.type = "button", x.setAttribute("aria-label", "Back"), x.addEventListener("click", () => this.h.onBack()), r.append(x);
     }
     const f = t("div", "ocw-avatar");
-    if ((m = a.userInfo) != null && m.avatar) {
+    if ((k = a.userInfo) != null && k.avatar) {
       const x = document.createElement("img");
       x.src = a.userInfo.avatar, x.alt = a.userInfo.name ?? "You", x.style.cssText = "width:100%;height:100%;border-radius:50%;object-fit:cover", f.append(x);
     } else
-      f.textContent = (h = a.userInfo) != null && h.name ? a.userInfo.name[0].toUpperCase() : "🧑";
-    c.append(f);
+      f.textContent = (E = a.userInfo) != null && E.name ? a.userInfo.name[0].toUpperCase() : "🧑";
+    r.append(f);
     const b = t("div", "ocw-head-main");
-    this.headerName = t("div", "ocw-head-name", ((I = a.subject) == null ? void 0 : I.ownerLabel) ?? ((T = a.subject) == null ? void 0 : T.title) ?? ""), b.append(this.headerName), ($ = a.subject) != null && $.subtitle && b.append(t("div", "ocw-head-meta", a.subject.subtitle)), c.append(b), this.statusBadge = t("span", "ocw-badge", ((A = a.subject) == null ? void 0 : A.status) ?? ""), (P = a.subject) != null && P.status || (this.statusBadge.style.display = "none"), c.append(this.statusBadge), this.e2eBadge = t("span", "ocw-e2e", "🔒 E2E"), this.e2eBadge.style.display = "none", c.append(this.e2eBadge), this.connStatus = t("span", "ocw-conn-status"), this.connStatus.style.display = "none", c.append(this.connStatus), this.cobrowseBtn = t("button", "ocw-menu ocw-cobrowse-btn", "🖍"), this.cobrowseBtn.title = "Shared whiteboard — draw to point things out together", this.cobrowseBtn.addEventListener("click", () => {
+    this.headerName = t("div", "ocw-head-name", ((I = a.subject) == null ? void 0 : I.ownerLabel) ?? ((A = a.subject) == null ? void 0 : A.title) ?? ""), b.append(this.headerName), ($ = a.subject) != null && $.subtitle && b.append(t("div", "ocw-head-meta", a.subject.subtitle)), r.append(b), this.statusBadge = t("span", "ocw-badge", ((z = a.subject) == null ? void 0 : z.status) ?? ""), (q = a.subject) != null && q.status || (this.statusBadge.style.display = "none"), r.append(this.statusBadge), this.e2eBadge = t("span", "ocw-e2e", "🔒 E2E"), this.e2eBadge.style.display = "none", r.append(this.e2eBadge), this.connStatus = t("span", "ocw-conn-status"), this.connStatus.style.display = "none", r.append(this.connStatus), this.cobrowseBtn = t("button", "ocw-menu ocw-cobrowse-btn", "🖍"), this.cobrowseBtn.title = "Shared whiteboard — draw to point things out together", this.cobrowseBtn.addEventListener("click", () => {
       this.cobrowseActive = !this.cobrowseActive, this.updateCobrowseUI();
-    }), c.append(this.cobrowseBtn), c.append(t("button", "ocw-menu", "⋯")), this.chips = t("div", "ocw-chiprow"), this.scroll = t("div", "ocw-scroll"), this.subjectCard = t("div", "ocw-subject"), this.typing = t("div", "ocw-typing");
+    }), r.append(this.cobrowseBtn), r.append(t("button", "ocw-menu", "⋯")), this.chips = t("div", "ocw-chiprow"), this.scroll = t("div", "ocw-scroll"), this.subjectCard = t("div", "ocw-subject"), this.typing = t("div", "ocw-typing");
     const d = t("div", "ocw-typing-bubble");
     d.append(t("div", "ocw-typing-dot"), t("div", "ocw-typing-dot"), t("div", "ocw-typing-dot")), this.typing.append(t("div", "ocw-dot", "🧑"), d), this.quick = t("div", "ocw-quick");
     for (const x of a.quickReplies ?? []) {
@@ -322,38 +345,48 @@ class Ee {
         this.h.onSend(x), this.quick.style.display = "none";
       }), this.quick.append(S);
     }
-    this.formHost = t("div", "ocw-form-host"), this.csatPanel = t("div", "ocw-csat"), this.csatPanel.style.display = "none", this.offlinePanel = t("div", "ocw-offline"), this.offlinePanel.style.display = "none", this.preChatPanel = t("div", "ocw-prechat"), this.preChatPanel.style.display = "none", this.deflectPanel = t("div", "ocw-deflect"), this.deflectPanel.style.display = "none", this.input = t("textarea", void 0), this.input.rows = 1, this.input.placeholder = "Message…";
-    const w = t("button", "ocw-sendbtn", ((z = a.i18n) == null ? void 0 : z.send) ?? "➤");
-    w.addEventListener("click", () => this.flushSend()), this.input.addEventListener("input", () => {
+    this.formHost = t("div", "ocw-form-host"), this.csatPanel = t("div", "ocw-csat"), this.csatPanel.style.display = "none", this.offlinePanel = t("div", "ocw-offline"), this.offlinePanel.style.display = "none", this.preChatPanel = t("div", "ocw-prechat"), this.preChatPanel.style.display = "none", this.deflectPanel = t("div", "ocw-deflect"), this.deflectPanel.style.display = "none", this.input = t("textarea", void 0), this.input.rows = 1, this.input.placeholder = ((C = a.i18n) == null ? void 0 : C.placeholder) ?? "Message…";
+    const h = t("button", "ocw-sendbtn");
+    h.type = "button";
+    const y = (j = a.i18n) == null ? void 0 : j.send;
+    y ? (h.textContent = y, h.classList.add("ocw-sendbtn-label"), h.setAttribute("aria-label", y)) : (h.innerHTML = Le, h.setAttribute("aria-label", "Send message")), h.disabled = !0, this.sendBtn = h, h.addEventListener("click", () => this.flushSend()), this.input.addEventListener("input", () => {
       var x, S;
-      this.storeRef && !this.storeRef.messages().some((B) => B.senderRole === "guest") ? (S = (x = this.h).onDeflectQuery) == null || S.call(x, this.input.value) : this.hideDeflection();
+      this.sendBtn.disabled = this.input.value.trim().length === 0, this.autoGrowInput(), this.storeRef && !this.storeRef.messages().some((M) => M.senderRole === "guest") ? (S = (x = this.h).onDeflectQuery) == null || S.call(x, this.input.value) : this.hideDeflection();
     }), this.input.addEventListener("keydown", (x) => {
       x.isComposing || x.keyCode === 229 || (x.key === "Enter" && !x.shiftKey ? (x.preventDefault(), this.flushSend()) : this.signalTyping());
     });
-    const v = t("button", "ocw-attach", "📎");
-    v.title = "Attach image or file";
-    const r = document.createElement("input");
-    r.type = "file", r.accept = "image/*,.pdf,.txt,.doc,.docx", r.style.display = "none", v.addEventListener("click", () => r.click()), r.addEventListener("change", () => {
+    const c = t("button", "ocw-attach", "📎");
+    c.title = "Attach image or file";
+    const u = document.createElement("input");
+    u.type = "file", u.accept = "image/*,.pdf,.txt,.doc,.docx", u.style.display = "none", c.addEventListener("click", () => u.click()), u.addEventListener("change", () => {
       var x;
-      (x = r.files) != null && x[0] && this.h.onAttach && this.h.onAttach(r.files[0]), r.value = "";
+      (x = u.files) != null && x[0] && this.h.onAttach && this.h.onAttach(u.files[0]), u.value = "";
     });
-    const u = t("div", "ocw-input");
-    u.append(v, r, this.input, w);
-    const l = t("div", "ocw-footer");
-    ((k = a.i18n) == null ? void 0 : k.poweredBy) !== void 0 ? l.textContent = a.i18n.poweredBy : l.innerHTML = 'Powered by <a href="https://relay.paramms.com" target="_blank" rel="noopener">Relay</a>', this.footer = l, e.append(c, this.chips, this.scroll, this.typing, this.quick, this.formHost, this.csatPanel, this.offlinePanel, this.preChatPanel, this.deflectPanel, u, this.footer), this.cobrowseCanvas = t("canvas", "ocw-cobrowse-canvas"), this.cobrowseToolbar = t("div", "ocw-cobrowse-toolbar");
+    const l = t("div", "ocw-input");
+    l.append(c, u, this.input, h);
+    const T = t("div", "ocw-footer");
+    ((D = a.i18n) == null ? void 0 : D.poweredBy) !== void 0 ? T.textContent = a.i18n.poweredBy : T.innerHTML = 'Powered by <a href="https://relay.paramms.com" target="_blank" rel="noopener">Relay</a>', this.footer = T, e.append(r, this.chips, this.scroll, this.typing, this.quick, this.formHost, this.csatPanel, this.offlinePanel, this.preChatPanel, this.deflectPanel, l, this.footer), this.cobrowseCanvas = t("canvas", "ocw-cobrowse-canvas"), this.cobrowseToolbar = t("div", "ocw-cobrowse-toolbar");
     for (const x of ["#f5713c", "#1c1b1a", "#2563eb", "#16a34a", "#dc2626"]) {
       const S = t("button", "ocw-cobrowse-swatch");
       S.style.background = x, S.type = "button", x === this.cobrowseColor && S.classList.add("sel"), S.addEventListener("click", () => {
         this.cobrowseColor = x;
-        for (const B of this.cobrowseToolbar.querySelectorAll(".ocw-cobrowse-swatch")) B.classList.remove("sel");
+        for (const M of this.cobrowseToolbar.querySelectorAll(".ocw-cobrowse-swatch")) M.classList.remove("sel");
         S.classList.add("sel");
       }), this.cobrowseToolbar.append(S);
     }
-    const C = t("button", "ocw-cobrowse-clear", "Clear");
-    C.addEventListener("click", () => {
+    const m = t("button", "ocw-cobrowse-clear", "Clear");
+    m.addEventListener("click", () => {
       var x, S;
       return (S = (x = this.h).onAnnotateClear) == null ? void 0 : S.call(x);
-    }), this.cobrowseToolbar.append(C), this.cobrowseHint = t("div", "ocw-cobrowse-hint", "🖍 Draw to point things out — visible to both sides"), e.append(this.cobrowseCanvas, this.cobrowseToolbar, this.cobrowseHint), this.bindCobrowsePointerEvents();
+    }), this.cobrowseToolbar.append(m), this.cobrowseHint = t("div", "ocw-cobrowse-hint", "🖍 Draw to point things out — visible to both sides"), e.append(this.cobrowseCanvas, this.cobrowseToolbar, this.cobrowseHint), this.bindCobrowsePointerEvents();
+    const w = (x) => {
+      e.classList.toggle("ocw-compact", x > 0 && x < Pe);
+    };
+    w(e.clientWidth), typeof ResizeObserver < "u" && (this.compactObserver = new ResizeObserver((x) => {
+      var M;
+      const S = ((M = x[0]) == null ? void 0 : M.contentRect.width) ?? e.clientWidth;
+      w(S);
+    }), this.compactObserver.observe(e));
   }
   /** Returns the scroll container so history.ts can attach scroll listeners. */
   getScrollEl() {
@@ -366,50 +399,53 @@ class Ee {
   }
   /** Call when the widget is unmounted. Disconnects scroll listeners and clears timers. */
   destroy() {
-    var e;
-    (e = this.scrollCleanup) == null || e.call(this), this.scrollCleanup = null, this.typingTimer && (clearTimeout(this.typingTimer), this.typingTimer = null);
+    var e, i;
+    (e = this.scrollCleanup) == null || e.call(this), this.scrollCleanup = null, this.typingTimer && (clearTimeout(this.typingTimer), this.typingTimer = null), (i = this.compactObserver) == null || i.disconnect(), this.compactObserver = null;
   }
-  /** Render list rows, optionally filtered by search query. */
-  /** Build a single WhatsApp-style conversation row. */
-  /** Returns true when the chat screen is visible (not the list). */
-  /** Navigate to the chat screen (slide list left, slide chat in from right). */
-  /** Navigate back to the list screen. */
   flushSend() {
     this.hideDeflection();
     const e = this.input.value.trim();
-    e && (this.input.value = "", this.h.onTyping(!1), this.h.onSend(e));
+    e && (this.input.value = "", this.sendBtn.disabled = !0, this.autoGrowInput(), this.h.onTyping(!1), this.h.onSend(e));
+  }
+  /** Grow the composer with its content (up to the CSS max-height), collapse
+   *  when cleared. scrollHeight is 0 in non-layout environments (jsdom) —
+   *  skip there so tests and SSR-ish mounts are unaffected. */
+  autoGrowInput() {
+    this.input.style.height = "auto";
+    const e = this.input.scrollHeight;
+    e > 0 ? this.input.style.height = `${Math.min(e, 120)}px` : this.input.style.removeProperty("height");
   }
   signalTyping() {
     const e = this.input.value.trim().slice(0, 100) || void 0;
     this.h.onTyping(!0, e), this.typingTimer && clearTimeout(this.typingTimer), this.typingTimer = setTimeout(() => this.h.onTyping(!1), 2e3);
   }
   render(e) {
-    var r, u, l, C, m;
+    var c, u, l, T, m;
     if (this.storeRef = e, this.cobrowseBtn.classList.toggle("show", !!e.subject), !e.subject && this.cobrowseActive && (this.cobrowseActive = !1, this.updateCobrowseUI()), this.cobrowseActive && e.annotationVersion !== this.lastAnnotationVersion && (this.lastAnnotationVersion = e.annotationVersion, this.resizeCobrowseCanvas(), this.redrawCobrowse()), e.accent && this.root.style.setProperty("--ocw-accent", e.accent), this.e2eBadge.style.display = e.e2e ? "inline-flex" : "none", this.buildSubjectCard(e), e.subject) {
-      const h = (r = this.cfg.subject) == null ? void 0 : r.ownerLabel;
-      h && (this.headerName.textContent = h);
+      const w = (c = this.cfg.subject) == null ? void 0 : c.ownerLabel;
+      w && (this.headerName.textContent = w);
     }
     this.quick.style.display = e.messages().length === 0 ? "flex" : "none", this.chips.replaceChildren();
     const i = e.visibleActions();
     this.chips.style.display = i.length ? "flex" : "none";
-    for (const h of i) this.chips.append(this.chipEl(h));
+    for (const w of i) this.chips.append(this.chipEl(w));
     const s = this.scroll.scrollHeight, a = this.scroll.scrollTop;
     if (this.scroll.replaceChildren(), this.subjectCard.childNodes.length && this.scroll.append(this.subjectCard), e.hasMoreHistory) {
-      const h = t("div", "ocw-load-more");
-      h.textContent = "↑ Loading earlier messages…", h.style.pointerEvents = "none", this.scroll.append(h);
+      const w = t("div", "ocw-load-more");
+      w.textContent = "↑ Loading earlier messages…", w.style.pointerEvents = "none", this.scroll.append(w);
     }
-    let c = 0;
-    for (const h of e.messages())
-      this.scroll.append(this.messageEl(h, e)), h.senderId !== this.me && h.seq > c && (c = h.seq);
-    a > 20 ? this.scroll.scrollTop = this.scroll.scrollHeight - s + a : this.scroll.scrollTop = this.scroll.scrollHeight, c > 0 && this.h.onReadUpTo(c);
+    let r = 0;
+    for (const w of e.messages())
+      this.scroll.append(this.messageEl(w, e)), w.senderId !== this.me && w.seq > r && (r = w.seq);
+    a > 20 ? this.scroll.scrollTop = this.scroll.scrollHeight - s + a : this.scroll.scrollTop = this.scroll.scrollHeight, r > 0 && this.h.onReadUpTo(r);
     const f = [...e.typing];
     this.typing.classList.toggle("active", f.length > 0);
     const b = this.typing.querySelector(".ocw-typing-bubble");
     b && b.setAttribute("aria-label", f.length ? "typing" : ""), this.footer.style.display = e.whiteLabel ? "none" : "block";
-    const d = e.messages().some((h) => h.senderRole === "guest");
-    !!((u = e.preChat) != null && u.enabled) && !this.preChatDone && !d && (e.preChat.showWhen !== "offline" || e.offline) ? (this.preChatBuilt || this.buildPreChatPanel(e.preChat), this.preChatPanel.style.display = "block", this.offlinePanel.style.display = "none", (l = this.root.querySelector(".ocw-input")) == null || l.style.setProperty("display", "none")) : (this.preChatPanel.style.display = "none", e.offline ? (this.offlinePanel.style.display === "none" && this.buildOfflinePanel(e.offlineMessage), this.offlinePanel.style.display = "block", (C = this.root.querySelector(".ocw-input")) == null || C.style.setProperty("display", "none")) : (this.offlinePanel.style.display = "none", (m = this.root.querySelector(".ocw-input")) == null || m.style.removeProperty("display")));
-    const v = ["resolved", "closed", "sold", "issued", "checked_out"];
-    this.h.onCsat && !this.csatSubmitted && v.includes(e.state) && e.messages().length > 0 && (this.csatPanel.style.display === "none" && this.buildCsatPanel(), this.csatPanel.style.display = "block");
+    const d = e.messages().some((w) => w.senderRole === "guest");
+    !!((u = e.preChat) != null && u.enabled) && !this.preChatDone && !d && (e.preChat.showWhen !== "offline" || e.offline) ? (this.preChatBuilt || this.buildPreChatPanel(e.preChat), this.preChatPanel.style.display = "block", this.offlinePanel.style.display = "none", (l = this.root.querySelector(".ocw-input")) == null || l.style.setProperty("display", "none")) : (this.preChatPanel.style.display = "none", e.offline ? (this.offlinePanel.style.display === "none" && this.buildOfflinePanel(e.offlineMessage), this.offlinePanel.style.display = "block", (T = this.root.querySelector(".ocw-input")) == null || T.style.setProperty("display", "none")) : (this.offlinePanel.style.display = "none", (m = this.root.querySelector(".ocw-input")) == null || m.style.removeProperty("display")));
+    const y = ["resolved", "closed", "sold", "issued", "checked_out"];
+    this.h.onCsat && !this.csatSubmitted && y.includes(e.state) && e.messages().length > 0 && (this.csatPanel.style.display === "none" && this.buildCsatPanel(), this.csatPanel.style.display = "block");
   }
   setConnStatus(e, i) {
     if (e === "open") {
@@ -427,63 +463,63 @@ class Ee {
     s.placeholder = "Your name", s.type = "text";
     const a = t("input", "ocw-offline-input");
     a.placeholder = "Your email", a.type = "email";
-    const c = t("textarea", "ocw-offline-input");
-    c.placeholder = "Your message", c.rows = 3;
+    const r = t("textarea", "ocw-offline-input");
+    r.placeholder = "Your message", r.rows = 3;
     const f = t("button", "ocw-offline-submit", "Send message");
-    f.addEventListener("click", () => {
-      !a.value.trim() || !c.value.trim() || (this.h.onSend(`[Offline form]
+    f.type = "button", f.addEventListener("click", () => {
+      !a.value.trim() || !r.value.trim() || (f.disabled = !0, this.h.onSend(`[Offline form]
 Name: ${s.value || "Anonymous"}
 Email: ${a.value}
-Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-thanks", "✓ Message sent! We'll reply to your email.")));
-    }), i.append(s, a, c, f), this.offlinePanel.append(i);
+Message: ${r.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-thanks", "✓ Message sent! We'll reply to your email.")));
+    }), i.append(s, a, r, f), this.offlinePanel.append(i);
   }
   buildPreChatPanel(e) {
     var d;
     this.preChatBuilt = !0, this.preChatPanel.replaceChildren(), this.preChatPanel.append(t("div", "ocw-prechat-title", e.title ?? "Before we start…"));
     const i = t("div", "ocw-offline-form"), s = {};
-    for (const w of e.fields ?? ["name", "email"]) {
-      const v = t("input", "ocw-offline-input");
-      v.type = w === "email" ? "email" : w === "phone" ? "tel" : "text", v.placeholder = w === "name" ? "Your name" : w === "email" ? "Your email" : "Your phone number", s[w] = v, i.append(v);
+    for (const h of e.fields ?? ["name", "email"]) {
+      const y = t("input", "ocw-offline-input");
+      y.type = h === "email" ? "email" : h === "phone" ? "tel" : "text", y.placeholder = h === "name" ? "Your name" : h === "email" ? "Your email" : "Your phone number", s[h] = y, i.append(y);
     }
     let a = null;
     if ((d = e.topics) != null && d.length) {
       a = t("select", void 0);
-      const w = document.createElement("option");
-      w.value = "", w.textContent = "What is this about?", a.append(w);
-      for (const v of e.topics) {
-        const r = document.createElement("option");
-        r.value = v, r.textContent = v, a.append(r);
+      const h = document.createElement("option");
+      h.value = "", h.textContent = "What is this about?", a.append(h);
+      for (const y of e.topics) {
+        const c = document.createElement("option");
+        c.value = y, c.textContent = y, a.append(c);
       }
       i.append(a);
     }
-    let c = null, f = null;
+    let r = null, f = null;
     if (e.callbackOption) {
-      const w = t("label", "ocw-prechat-cb");
-      c = document.createElement("input"), c.type = "checkbox", w.append(c, document.createTextNode("📞 Request a call back")), i.append(w), s.phone || (f = t("input", "ocw-offline-input"), f.type = "tel", f.placeholder = "Phone number for the call", f.style.display = "none", c.addEventListener("change", () => f.style.setProperty("display", c.checked ? "block" : "none")), i.append(f));
+      const h = t("label", "ocw-prechat-cb");
+      r = document.createElement("input"), r.type = "checkbox", h.append(r, document.createTextNode("📞 Request a call back")), i.append(h), s.phone || (f = t("input", "ocw-offline-input"), f.type = "tel", f.placeholder = "Phone number for the call", f.style.display = "none", r.addEventListener("change", () => f.style.setProperty("display", r.checked ? "block" : "none")), i.append(f));
     }
     const b = t("button", "ocw-offline-submit", "Start chat");
-    b.addEventListener("click", () => {
-      var u, l, C, m, h, I, T;
-      const w = (u = s.email) == null ? void 0 : u.value.trim();
-      if (s.email && (!w || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(w))) {
+    b.type = "button", b.addEventListener("click", () => {
+      var u, l, T, m, w, k, E;
+      const h = (u = s.email) == null ? void 0 : u.value.trim();
+      if (s.email && (!h || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(h))) {
         s.email.focus();
         return;
       }
-      const v = !!(c != null && c.checked), r = (((l = s.phone) == null ? void 0 : l.value) ?? (f == null ? void 0 : f.value) ?? "").trim();
-      if (v && !r) {
-        (C = s.phone ?? f) == null || C.focus();
+      const y = !!(r != null && r.checked), c = (((l = s.phone) == null ? void 0 : l.value) ?? (f == null ? void 0 : f.value) ?? "").trim();
+      if (y && !c) {
+        (T = s.phone ?? f) == null || T.focus();
         return;
       }
       if (a && ((m = e.topics) != null && m.length) && !a.value) {
         a.focus();
         return;
       }
-      this.completePreChat(), (T = (I = this.h).onPreChat) == null || T.call(I, {
-        ...(h = s.name) != null && h.value.trim() ? { name: s.name.value.trim() } : {},
-        ...w ? { email: w } : {},
-        ...r ? { phone: r } : {},
+      b.disabled = !0, this.completePreChat(), (E = (k = this.h).onPreChat) == null || E.call(k, {
+        ...(w = s.name) != null && w.value.trim() ? { name: s.name.value.trim() } : {},
+        ...h ? { email: h } : {},
+        ...c ? { phone: c } : {},
         ...a != null && a.value ? { topic: a.value } : {},
-        ...v ? { callback: !0 } : {}
+        ...y ? { callback: !0 } : {}
       });
     }), i.append(b), this.preChatPanel.append(i);
   }
@@ -509,15 +545,13 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
     const e = t("div", "ocw-csat-stars"), i = [];
     for (let s = 1; s <= 5; s++) {
       const a = t("button", "ocw-csat-star", "★");
-      a.dataset.score = String(s), a.addEventListener("mouseenter", () => i.forEach((c, f) => c.classList.toggle("lit", f < s))), a.addEventListener("mouseleave", () => i.forEach((c) => c.classList.remove("lit"))), a.addEventListener("click", () => {
-        var c, f;
-        this.csatSubmitted = !0, this.csatPanel.replaceChildren(t("div", "ocw-csat-done", `Thanks for your ${s}★ rating!`)), (f = (c = this.h).onCsat) == null || f.call(c, s);
+      a.dataset.score = String(s), a.addEventListener("mouseenter", () => i.forEach((r, f) => r.classList.toggle("lit", f < s))), a.addEventListener("mouseleave", () => i.forEach((r) => r.classList.remove("lit"))), a.addEventListener("click", () => {
+        var r, f;
+        this.csatSubmitted = !0, this.csatPanel.replaceChildren(t("div", "ocw-csat-done", `Thanks for your ${s}★ rating!`)), (f = (r = this.h).onCsat) == null || f.call(r, s);
       }), i.push(a), e.append(a);
     }
     this.csatPanel.append(e);
   }
-  /** Subject card from the server's Subject entity (per chatroom), with the
-   *  mount config as a fallback. Built once when data first arrives. */
   // ── Co-browsing (shared whiteboard) ──────────────────────────────────────
   updateCobrowseUI() {
     this.cobrowseCanvas.classList.toggle("active", this.cobrowseActive), this.cobrowseToolbar.classList.toggle("active", this.cobrowseActive), this.cobrowseHint.classList.toggle("active", this.cobrowseActive), this.cobrowseBtn.classList.toggle("on", this.cobrowseActive), this.cobrowseActive && (this.resizeCobrowseCanvas(), this.redrawCobrowse());
@@ -532,7 +566,7 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
     if (!i || e.points.length < 2) return;
     const s = this.cobrowseCanvas.width, a = this.cobrowseCanvas.height;
     i.strokeStyle = e.color, i.lineWidth = Math.max(1, e.width * Math.min(s, a)), i.lineJoin = "round", i.lineCap = "round", i.beginPath(), i.moveTo(e.points[0].x * s, e.points[0].y * a);
-    for (const c of e.points.slice(1)) i.lineTo(c.x * s, c.y * a);
+    for (const r of e.points.slice(1)) i.lineTo(r.x * s, r.y * a);
     i.stroke();
   }
   redrawCobrowse() {
@@ -546,15 +580,15 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
   bindCobrowsePointerEvents() {
     let e = !1, i = [];
     const s = (f) => {
-      const b = this.cobrowseCanvas.getBoundingClientRect(), d = b.width > 0 ? (f.clientX - b.left) / b.width : 0, w = b.height > 0 ? (f.clientY - b.top) / b.height : 0;
-      return { x: Math.min(1, Math.max(0, d)), y: Math.min(1, Math.max(0, w)) };
+      const b = this.cobrowseCanvas.getBoundingClientRect(), d = b.width > 0 ? (f.clientX - b.left) / b.width : 0, h = b.height > 0 ? (f.clientY - b.top) / b.height : 0;
+      return { x: Math.min(1, Math.max(0, d)), y: Math.min(1, Math.max(0, h)) };
     }, a = 6e-3;
     this.cobrowseCanvas.addEventListener("pointerdown", (f) => {
       this.cobrowseActive && (e = !0, i = [s(f)], this.cobrowseCanvas.setPointerCapture(f.pointerId));
     }), this.cobrowseCanvas.addEventListener("pointermove", (f) => {
       e && (i.push(s(f)), this.redrawCobrowse(), this.drawStroke({ points: i, color: this.cobrowseColor, width: a }));
     });
-    const c = (f) => {
+    const r = (f) => {
       var b, d;
       if (e) {
         e = !1, i.length > 1 && ((d = (b = this.h).onAnnotate) == null || d.call(b, { id: `an_${Date.now()}_${Math.random().toString(36).slice(2)}`, points: i, color: this.cobrowseColor, width: a })), i = [];
@@ -564,17 +598,17 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
         }
       }
     };
-    this.cobrowseCanvas.addEventListener("pointerup", c), this.cobrowseCanvas.addEventListener("pointercancel", c);
+    this.cobrowseCanvas.addEventListener("pointerup", r), this.cobrowseCanvas.addEventListener("pointercancel", r);
   }
   buildSubjectCard(e) {
     if (this.subjectBuilt) return;
     const i = e.subject, s = this.cfg.subject, a = (i == null ? void 0 : i.title) ?? (s == null ? void 0 : s.title);
     if (!a) return;
     this.subjectBuilt = !0, this.subjectCard.replaceChildren(), this.subjectCard.append(t("div", "ocw-subject-title", a)), s != null && s.subtitle && this.subjectCard.append(t("div", "ocw-subject-sub", s.subtitle));
-    const c = t("div", "ocw-tags");
-    if (i) for (const [b, d] of Object.entries(i.fields)) c.append(t("span", "ocw-tag", `${b}: ${d}`));
-    else for (const b of (s == null ? void 0 : s.tags) ?? []) c.append(t("span", "ocw-tag", b));
-    c.childNodes.length && this.subjectCard.append(c);
+    const r = t("div", "ocw-tags");
+    if (i) for (const [b, d] of Object.entries(i.fields)) r.append(t("span", "ocw-tag", `${b}: ${d}`));
+    else for (const b of (s == null ? void 0 : s.tags) ?? []) r.append(t("span", "ocw-tag", b));
+    r.childNodes.length && this.subjectCard.append(r);
     const f = (i == null ? void 0 : i.state) ?? (s == null ? void 0 : s.status);
     f && (this.statusBadge.textContent = f, this.statusBadge.style.display = "inline-flex");
   }
@@ -590,12 +624,12 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
     return new Promise((i) => {
       const s = t("div", "ocw-modal"), a = t("div", "ocw-modal-card");
       a.append(t("div", "ocw-modal-title", e)), a.append(t("div", "ocw-modal-body", `Confirm “${e}”?`));
-      const c = t("div", "ocw-modal-actions"), f = t("button", "ocw-modal-cancel", "Cancel"), b = t("button", "ocw-modal-ok", "Confirm"), d = (w) => {
-        s.remove(), i(w);
+      const r = t("div", "ocw-modal-actions"), f = t("button", "ocw-modal-cancel", "Cancel"), b = t("button", "ocw-modal-ok", "Confirm"), d = (h) => {
+        s.remove(), i(h);
       };
-      f.addEventListener("click", () => d(!1)), b.addEventListener("click", () => d(!0)), s.addEventListener("click", (w) => {
-        w.target === s && d(!1);
-      }), c.append(f, b), a.append(c), s.append(a), this.root.append(s), b.focus();
+      f.addEventListener("click", () => d(!1)), b.addEventListener("click", () => d(!0)), s.addEventListener("click", (h) => {
+        h.target === s && d(!1);
+      }), r.append(f, b), a.append(r), s.append(a), this.root.append(s), b.focus();
     });
   }
   /** Inline form for a form-effect action: typed inputs (date picker, number,
@@ -606,54 +640,54 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
     const i = t("div", "ocw-form");
     i.append(t("div", "ocw-form-title", e.icon ? `${e.icon} ${e.label}` : e.label));
     const s = /* @__PURE__ */ new Map();
-    for (const w of e.input ?? []) {
-      const v = t("label", "ocw-form-row");
-      if (v.append(t("span", "ocw-form-lbl", w.label)), w.type === "select" && ((b = w.options) != null && b.length)) {
-        const r = t("select", "ocw-form-input");
-        w.required || r.append(t("option", void 0, "— select —"));
-        for (const u of w.options) {
+    for (const h of e.input ?? []) {
+      const y = t("label", "ocw-form-row");
+      if (y.append(t("span", "ocw-form-lbl", h.label)), h.type === "select" && ((b = h.options) != null && b.length)) {
+        const c = t("select", "ocw-form-input");
+        h.required || c.append(t("option", void 0, "— select —"));
+        for (const u of h.options) {
           const l = t("option");
-          l.value = u, l.textContent = u, r.append(l);
+          l.value = u, l.textContent = u, c.append(l);
         }
-        w.required && (r.required = !0), v.append(r), s.set(w.name, r);
+        h.required && (c.required = !0), y.append(c), s.set(h.name, c);
       } else {
-        const r = t("input", "ocw-form-input");
-        r.type = w.type === "number" ? "number" : w.type === "date" ? "datetime-local" : "text", w.required && (r.required = !0), v.append(r), s.set(w.name, r);
+        const c = t("input", "ocw-form-input");
+        c.type = h.type === "number" ? "number" : h.type === "date" ? "datetime-local" : "text", h.required && (c.required = !0), y.append(c), s.set(h.name, c);
       }
-      i.append(v);
+      i.append(y);
     }
-    const a = t("div", "ocw-form-actions"), c = t("button", "ocw-form-cancel", "Cancel"), f = t("button", "ocw-form-submit", "Send");
-    c.addEventListener("click", () => this.formHost.replaceChildren()), f.addEventListener("click", () => {
-      const w = {};
-      for (const [v, r] of s) {
-        if (r.required && !r.value) {
-          r.style.borderColor = "#e5484d";
+    const a = t("div", "ocw-form-actions"), r = t("button", "ocw-form-cancel", "Cancel"), f = t("button", "ocw-form-submit", "Send");
+    r.addEventListener("click", () => this.formHost.replaceChildren()), f.addEventListener("click", () => {
+      const h = {};
+      for (const [y, c] of s) {
+        if (c.required && !c.value) {
+          c.style.borderColor = "#e5484d";
           return;
         }
-        w[v] = r.type === "number" ? Number(r.value) : r.value;
+        h[y] = c.type === "number" ? Number(c.value) : c.value;
       }
-      this.formHost.replaceChildren(), this.h.onInvoke(e.id, w);
-    }), a.append(c, f), i.append(a), this.formHost.append(i), (d = s.values().next().value) == null || d.focus();
+      this.formHost.replaceChildren(), this.h.onInvoke(e.id, h);
+    }), a.append(r, f), i.append(a), this.formHost.append(i), (d = s.values().next().value) == null || d.focus();
   }
   messageEl(e, i) {
-    var r;
+    var c;
     if (e.senderRole === "system") {
       const u = t("div", "ocw-sys");
-      return u.textContent = e.deletedAt ? "message deleted" : W(e.content), u;
+      return u.textContent = e.deletedAt ? "message deleted" : X(e.content), u;
     }
-    const s = e.senderId === this.me, a = !!e.internal, c = t("div", `ocw-row ${a ? "ocw-note mine" : s ? "mine" : "theirs"} ${e.senderRole === "bot" ? "ocw-bot" : ""}`);
-    !s && !a && c.append(t("div", "ocw-dot", e.senderRole === "bot" ? "🤖" : "🧑"));
+    const s = e.senderId === this.me, a = !!e.internal, r = t("div", `ocw-row ${a ? "ocw-note mine" : s ? "mine" : "theirs"} ${e.senderRole === "bot" ? "ocw-bot" : ""}`);
+    !s && !a && r.append(t("div", "ocw-dot", e.senderRole === "bot" ? "🤖" : "🧑"));
     const f = t("div"), b = t("div", "ocw-bubble-wrap");
     if (e.replyToId) {
       const u = t("div", "ocw-reply-to", "↩ replying to a message");
       u.style.cssText = "font-size:11px;color:var(--ocw-mut);margin-bottom:2px;font-style:italic", f.append(u);
     }
     const d = t("div", "ocw-bubble");
-    let w = null;
+    let h = null;
     if (e.deletedAt) d.append(t("span", "ocw-deleted", "message deleted"));
     else if (e.content.kind === "attachment") {
       const u = e.content;
-      if ((r = u.mime) != null && r.startsWith("image/")) {
+      if ((c = u.mime) != null && c.startsWith("image/")) {
         const l = document.createElement("img");
         l.src = u.url, l.alt = u.name ?? "image", l.style.cssText = "max-width:220px;max-height:160px;border-radius:10px;display:block;cursor:pointer", l.addEventListener("click", () => window.open(u.url, "_blank")), d.append(l);
       } else {
@@ -663,34 +697,34 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
     } else if (e.content.kind === "appointment") {
       const u = e.content, l = t("div", "ocw-appt");
       l.append(t("div", "ocw-appt-title", `📅 ${u.title}`)), l.append(t("div", "ocw-appt-time", new Date(u.startIso).toLocaleString() + " – " + new Date(u.endIso).toLocaleTimeString())), u.location && l.append(t("div", "ocw-appt-loc", `📍 ${u.location}`)), u.description && l.append(t("div", "ocw-appt-desc", u.description));
-      const C = t("div", "ocw-appt-links"), m = document.createElement("a");
+      const T = t("div", "ocw-appt-links"), m = document.createElement("a");
       m.href = u.googleUrl, m.target = "_blank", m.rel = "noopener", m.className = "ocw-appt-btn", m.textContent = "📅 Add to Google Calendar";
-      const h = document.createElement("a");
-      h.href = u.icalUrl, h.download = `${u.title}.ics`, h.className = "ocw-appt-btn ocw-appt-btn-sec", h.textContent = "🍎 Apple / iCal", C.append(m, h), l.append(C), d.append(l);
+      const w = document.createElement("a");
+      w.href = u.icalUrl, w.download = `${u.title}.ics`, w.className = "ocw-appt-btn ocw-appt-btn-sec", w.textContent = "🍎 Apple / iCal", T.append(m, w), l.append(T), d.append(l);
     } else
-      w = document.createTextNode(W(e.content)), d.append(w), e.editedAt && d.append(t("span", "ocw-edited", "(edited)"));
-    if (b.append(d), !s && !a && this.h.onTranslate && e.content.kind === "text" && !e.deletedAt && e.seq > 0 && w) {
+      h = document.createTextNode(X(e.content)), d.append(h), e.editedAt && d.append(t("span", "ocw-edited", "(edited)"));
+    if (b.append(d), !s && !a && this.h.onTranslate && e.content.kind === "text" && !e.deletedAt && e.seq > 0 && h) {
       const u = e.content.text;
       if (u.trim()) {
         const l = t("button", "ocw-translate-btn", "🌐");
-        l.type = "button", l.title = "Translate", l.addEventListener("click", (C) => {
-          if (C.stopPropagation(), this.showingTranslation.has(e.id)) {
-            this.showingTranslation.delete(e.id), w.textContent = u, l.textContent = "🌐", l.title = "Translate";
+        l.type = "button", l.title = "Translate", l.addEventListener("click", (T) => {
+          if (T.stopPropagation(), this.showingTranslation.has(e.id)) {
+            this.showingTranslation.delete(e.id), h.textContent = u, l.textContent = "🌐", l.title = "Translate";
             return;
           }
           const m = this.translationCache.get(e.id);
           if (m !== void 0) {
-            this.showingTranslation.add(e.id), w.textContent = m, l.textContent = "↩", l.title = "Show original";
+            this.showingTranslation.add(e.id), h.textContent = m, l.textContent = "↩", l.title = "Show original";
             return;
           }
-          l.textContent = "⏳", this.h.onTranslate(u).then((h) => {
-            if (h === null) {
+          l.textContent = "⏳", this.h.onTranslate(u).then((w) => {
+            if (w === null) {
               l.textContent = "⚠️", l.title = "Translation unavailable", setTimeout(() => {
                 l.textContent = "🌐", l.title = "Translate";
               }, 1500);
               return;
             }
-            this.translationCache.set(e.id, h), this.showingTranslation.add(e.id), w.textContent = h, l.textContent = "↩", l.title = "Show original";
+            this.translationCache.set(e.id, w), this.showingTranslation.add(e.id), h.textContent = w, l.textContent = "↩", l.title = "Show original";
           });
         }), b.append(l);
       }
@@ -699,31 +733,31 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
       const u = t("div", "ocw-msg-menu");
       if (this.h.onEdit) {
         const l = t("button", void 0, "✏️");
-        l.title = "Edit", l.addEventListener("click", (C) => {
-          C.stopPropagation();
-          const m = W(e.content), h = document.createElement("textarea");
-          h.value = m, h.rows = Math.min(4, Math.ceil(m.length / 40) + 1), h.style.cssText = "width:100%;resize:vertical;border:1px solid var(--ocw-accent);border-radius:8px;padding:6px 10px;font:inherit;font-size:14px;background:#fff;color:#1c1b1a;box-sizing:border-box";
-          const I = t("button", "ocw-form-submit", "Save");
-          I.style.cssText = "margin-top:6px;padding:5px 14px;font-size:13px";
-          const T = t("button", "ocw-form-cancel", "Cancel");
-          T.style.cssText = "margin-top:6px;padding:5px 10px;font-size:13px";
-          const $ = t("div");
-          $.style.cssText = "display:flex;gap:6px;justify-content:flex-end", $.append(T, I);
+        l.title = "Edit", l.addEventListener("click", (T) => {
+          T.stopPropagation();
+          const m = X(e.content), w = document.createElement("textarea");
+          w.value = m, w.rows = Math.min(4, Math.ceil(m.length / 40) + 1), w.style.cssText = "width:100%;resize:vertical;border:1px solid var(--ocw-accent);border-radius:8px;padding:6px 10px;font:inherit;font-size:14px;background:#fff;color:#1c1b1a;box-sizing:border-box";
+          const k = t("button", "ocw-form-submit", "Save");
+          k.style.cssText = "margin-top:6px;padding:5px 14px;font-size:13px";
+          const E = t("button", "ocw-form-cancel", "Cancel");
+          E.style.cssText = "margin-top:6px;padding:5px 10px;font-size:13px";
+          const I = t("div");
+          I.style.cssText = "display:flex;gap:6px;justify-content:flex-end", I.append(E, k);
           const A = t("div");
-          A.append(h, $), d.replaceChildren(A), h.focus(), h.select();
-          const P = () => d.replaceChildren(w ?? document.createTextNode(m));
-          T.addEventListener("click", P), I.addEventListener("click", () => {
-            const z = h.value.trim();
-            z && z !== m && this.h.onEdit(e.id, z), P();
-          }), h.addEventListener("keydown", (z) => {
-            z.key === "Enter" && !z.shiftKey && (z.preventDefault(), I.click()), z.key === "Escape" && P();
+          A.append(w, I), d.replaceChildren(A), w.focus(), w.select();
+          const $ = () => d.replaceChildren(h ?? document.createTextNode(m));
+          E.addEventListener("click", $), k.addEventListener("click", () => {
+            const z = w.value.trim();
+            z && z !== m && this.h.onEdit(e.id, z), $();
+          }), w.addEventListener("keydown", (z) => {
+            z.key === "Enter" && !z.shiftKey && (z.preventDefault(), k.click()), z.key === "Escape" && $();
           });
         }), u.append(l);
       }
       if (this.h.onDelete) {
         const l = t("button", "del", "🗑");
-        l.title = "Delete", l.addEventListener("click", (C) => {
-          C.stopPropagation(), this.h.onDelete(e.id);
+        l.title = "Delete", l.addEventListener("click", (T) => {
+          T.stopPropagation(), this.h.onDelete(e.id);
         }), u.append(l);
       }
       b.append(u);
@@ -731,38 +765,40 @@ Message: ${c.value}`), this.offlinePanel.replaceChildren(t("div", "ocw-offline-t
     if (f.append(b), this.h.onReact && !e.deletedAt && e.seq > 0) {
       const u = t("div", "ocw-react-wrap"), l = t("div", "ocw-react");
       if (e.reactions && Object.keys(e.reactions).length)
-        for (const [h, I] of Object.entries(e.reactions)) {
-          const T = t("button", `ocw-react-pill${I.includes(this.me) ? " mine" : ""}`, `${h} ${I.length}`);
-          T.addEventListener("click", () => {
-            var $, A;
-            return (A = ($ = this.h).onReact) == null ? void 0 : A.call($, e.id, h, I.includes(this.me));
-          }), l.append(T);
+        for (const [w, k] of Object.entries(e.reactions)) {
+          const E = t("button", `ocw-react-pill${k.includes(this.me) ? " mine" : ""}`, `${w} ${k.length}`);
+          E.addEventListener("click", () => {
+            var I, A;
+            return (A = (I = this.h).onReact) == null ? void 0 : A.call(I, e.id, w, k.includes(this.me));
+          }), l.append(E);
         }
-      const C = t("button", "ocw-react-btn", "＋"), m = t("div", "ocw-react-picker");
-      for (const h of Ce) {
-        const I = t("button", void 0, h);
-        I.addEventListener("click", (T) => {
-          var A, P, z, k;
-          T.stopPropagation();
-          const $ = (P = (A = e.reactions) == null ? void 0 : A[h]) == null ? void 0 : P.includes(this.me);
-          (k = (z = this.h).onReact) == null || k.call(z, e.id, h, !!$), m.style.display = "none";
-        }), m.append(I);
+      const T = t("button", "ocw-react-btn", "＋"), m = t("div", "ocw-react-picker");
+      for (const w of Ee) {
+        const k = t("button", void 0, w);
+        k.addEventListener("click", (E) => {
+          var A, $, z, q;
+          E.stopPropagation();
+          const I = ($ = (A = e.reactions) == null ? void 0 : A[w]) == null ? void 0 : $.includes(this.me);
+          (q = (z = this.h).onReact) == null || q.call(z, e.id, w, !!I), m.style.display = "none";
+        }), m.append(k);
       }
-      m.style.display = "none", C.addEventListener("click", (h) => {
-        h.stopPropagation(), m.style.display = m.style.display === "none" ? "flex" : "none";
-      }), document.addEventListener("click", () => {
-        m.style.display = "none";
-      }, { once: !0 }), l.append(C), u.append(l, m), f.append(u);
+      m.style.display = "none", T.addEventListener("click", (w) => {
+        w.stopPropagation();
+        const k = m.style.display === "none";
+        m.style.display = k ? "flex" : "none", k && document.addEventListener("click", () => {
+          m.style.display = "none";
+        }, { once: !0 });
+      }), l.append(T), u.append(l, m), f.append(u);
     } else e.reactions && Object.keys(e.reactions).length && f.append(t("div", "ocw-react", Object.entries(e.reactions).map(([u, l]) => `${u}${l.length}`).join(" ")));
-    const v = t("div", "ocw-time ocw-meta", Se(e.ts));
+    const y = t("div", "ocw-time ocw-meta", $e(e.ts));
     if (s && e.status) {
-      const u = t("span", `ocw-tick${e.status === "read" ? " read" : e.status === "delivered" ? " delivered" : ""}`, ze(e.status));
-      v.append(u);
+      const u = t("span", `ocw-tick${e.status === "read" ? " read" : e.status === "delivered" ? " delivered" : ""}`, Me(e.status));
+      y.append(u);
     }
-    return s && e.seq > 0 && i.lastReadByOthers >= e.seq && v.append(t("span", "ocw-seen", " · Seen")), f.append(v), c.append(f), c;
+    return s && e.seq > 0 && i.lastReadByOthers >= e.seq && y.append(t("span", "ocw-seen", " · Seen")), f.append(y), r.append(f), r;
   }
 }
-function ze(o) {
+function Me(o) {
   switch (o) {
     case "read":
       return "✓✓";
@@ -774,35 +810,44 @@ function ze(o) {
       return "🕓";
   }
 }
-const R = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new Map();
-function ne(o) {
+const O = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new Map();
+function ce(o) {
   return `relay-launcher::${o.profileId}::${o.subjectId ?? ""}`;
 }
-function Ae(o) {
+let N = null;
+function Re() {
+  if (N && N.state !== "closed") return N;
+  try {
+    return N = new AudioContext(), N;
+  } catch {
+    return null;
+  }
+}
+function Ne(o) {
   var e;
-  (e = R.get(o)) == null || e.close(), R.delete(o);
+  (e = O.get(o)) == null || e.close(), O.delete(o);
 }
-function Be(o) {
-  var J, Q, G, Z, ee;
-  R.has(o.el) && (R.get(o.el).close(), R.delete(o.el)), o.launcher && ((J = U.get(ne(o))) == null || J.close());
-  const e = fe();
+function _e(o) {
+  var ee, te, oe, ne, ie;
+  O.has(o.el) && (O.get(o.el).close(), O.delete(o.el)), o.launcher && ((ee = W.get(ce(o))) == null || ee.close());
+  const e = ge();
   let i, s = !1;
-  const a = o.token ?? o.userId ?? e, c = a !== e ? e : void 0, { wsUrl: f, httpBase: b } = ue(o.url, o.apiUrl);
-  let d = new xe(a);
-  const w = o.subjectId ? `${a}::${o.subjectId}` : a, v = new be(w);
-  let r, u = !1, l = null, C = null;
+  const a = o.token ?? o.userId ?? e, r = a !== e ? e : void 0, { wsUrl: f, httpBase: b } = me(o.url, o.apiUrl);
+  let d = new ke(a);
+  const h = o.subjectId ? `${a}::${o.subjectId}` : a, y = new ye(h);
+  let c, u = !1, l = null, T = null, m = null;
   !o.launcher && !o.el.style.height && o.el.clientHeight === 0 && (o.el.style.width = o.el.style.width || "100%", o.el.style.height = "600px");
-  for (const n of v.load()) d.addOptimistic(n.clientMsgId, n.content);
-  let m = null, h = null, I = 0, T = !o.launcher;
+  for (const n of y.load()) d.addOptimistic(n.clientMsgId, n.content);
+  let w = null, k = null, E = 0, I = !o.launcher;
   if (o.launcher) {
     const p = (o.position ?? "bottom-right").includes("right");
-    m = document.createElement("div"), m.style.cssText = `position:fixed;${p ? "right:20px" : "left:20px"};bottom:20px;z-index:9999;display:flex;flex-direction:column;align-items:${p ? "flex-end" : "flex-start"};gap:12px`;
-    const g = document.createElement("div"), E = typeof window < "u" ? window.matchMedia("(max-width: 479px)") : null, O = (q) => {
-      g.style.cssText = q ? [
+    w = document.createElement("div"), w.style.cssText = `position:fixed;${p ? "right:20px" : "left:20px"};bottom:20px;z-index:9999;display:flex;flex-direction:column;align-items:${p ? "flex-end" : "flex-start"};gap:12px`;
+    const g = document.createElement("div"), P = typeof window < "u" && typeof window.matchMedia == "function" ? window.matchMedia("(max-width: 479px)") : null, U = (R) => {
+      o.el.classList.toggle("ocw-fs", R), g.style.cssText = R ? [
         "position:fixed",
         "inset:0",
         "width:100%",
-        "height:100%",
+        "height:100dvh",
         "border-radius:0",
         "overflow:hidden",
         "box-shadow:none",
@@ -813,8 +858,8 @@ function Be(o) {
         "opacity:0",
         "z-index:9998"
       ].join(";") : [
-        "width:380px",
-        "height:600px",
+        "width:min(380px, calc(100vw - 40px))",
+        "height:min(600px, calc(100dvh - 108px))",
         "border-radius:16px",
         "overflow:hidden",
         "box-shadow:0 8px 40px rgba(0,0,0,.18)",
@@ -827,109 +872,123 @@ function Be(o) {
         "transform:scale(.95)"
       ].join(";");
     };
-    O((E == null ? void 0 : E.matches) ?? !1);
-    const N = (q) => O(q.matches);
-    E == null || E.addEventListener("change", N), l = E, C = N, o.el.style.cssText = "width:100%;height:100%;overflow:hidden", g.append(o.el);
-    const L = document.createElement("button");
-    L.style.cssText = [
+    U((P == null ? void 0 : P.matches) ?? !1);
+    const F = (R) => U(R.matches);
+    P == null || P.addEventListener("change", F), l = P, T = F, o.el.style.cssText = "width:100%;height:100%;overflow:hidden", g.append(o.el);
+    const K = '<svg viewBox="0 0 24 24" width="26" height="26" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', Y = '<svg viewBox="0 0 24 24" width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>', B = document.createElement("button");
+    B.type = "button", B.style.cssText = [
       "width:56px;height:56px;border-radius:50%",
       `background:${o.accent ?? "#4F63F5"}`,
-      "color:#fff;border:none;font-size:24px;cursor:pointer",
+      "color:#fff;border:none;cursor:pointer",
       "box-shadow:0 4px 16px rgba(0,0,0,.25)",
       "position:relative;flex:none",
+      "display:flex;align-items:center;justify-content:center",
       "transition:transform .15s"
-    ].join(";"), L.textContent = "💬", L.onmouseenter = () => {
-      L.style.transform = "scale(1.08)";
-    }, L.onmouseleave = () => {
-      L.style.transform = "scale(1)";
-    }, h = document.createElement("span"), h.style.cssText = "position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center", L.append(h), m.append(g, L), document.body.append(m);
-    const _ = (q) => {
-      q ? (g.style.display = "flex", requestAnimationFrame(() => {
+    ].join(";"), B.onmouseenter = () => {
+      B.style.transform = "scale(1.08)";
+    }, B.onmouseleave = () => {
+      B.style.transform = "scale(1)";
+    }, k = document.createElement("span"), k.style.cssText = "position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center";
+    const G = () => {
+      B.innerHTML = I ? Y : K, B.setAttribute("aria-label", I ? "Close chat" : "Open chat"), B.setAttribute("aria-expanded", String(I)), B.append(k);
+    };
+    G(), w.append(g, B), document.body.append(w);
+    const se = (R) => {
+      R ? (g.style.display = "flex", requestAnimationFrame(() => {
         g.style.opacity = "1", g.style.transform = "scale(1)";
       })) : (g.style.opacity = "0", g.style.transform = "scale(.95)", setTimeout(() => {
-        T || (g.style.display = "none");
+        I || (g.style.display = "none");
       }, 180));
     };
-    L.addEventListener("click", () => {
-      T = !T, _(T), L.textContent = T ? "✕" : "💬", L.append(h), T && (I = 0, h && (h.style.display = "none"));
-    }), document.addEventListener("keydown", (q) => {
-      q.key === "Escape" && T && (T = !1, _(!1), L.textContent = "💬", L.append(h));
-    });
+    B.addEventListener("click", () => {
+      I = !I, se(I), G(), I && (E = 0, k && (k.style.display = "none"));
+    }), m = (R) => {
+      R.key === "Escape" && I && (I = !1, se(!1), G());
+    }, document.addEventListener("keydown", m);
   }
-  const $ = () => {
-    T || (I++, h && (h.textContent = String(I), h.style.display = "flex"));
-  }, A = () => {
+  const A = () => {
+    I || (E++, k && (k.textContent = String(E), k.style.display = "flex"));
+  }, $ = () => {
     try {
-      const n = new AudioContext(), p = n.createOscillator(), g = n.createGain();
+      const n = Re();
+      if (!n) return;
+      n.state === "suspended" && n.resume().catch(() => {
+      });
+      const p = n.createOscillator(), g = n.createGain();
       p.connect(g), g.connect(n.destination), p.frequency.setValueAtTime(880, n.currentTime), p.frequency.exponentialRampToValueAtTime(440, n.currentTime + 0.15), g.gain.setValueAtTime(0.3, n.currentTime), g.gain.exponentialRampToValueAtTime(1e-3, n.currentTime + 0.3), p.start(), p.stop(n.currentTime + 0.3);
     } catch {
     }
-  }, P = [], z = (n) => {
-    for (; P.length; ) {
-      const p = P.shift();
-      v.add({ clientMsgId: p.clientMsgId, content: p.content, ts: Date.now() }), k.send({ type: "send", conversationId: n, clientMsgId: p.clientMsgId, content: p.content });
+  }, z = [], q = (n) => {
+    for (; z.length; ) {
+      const p = z.shift();
+      y.add({ clientMsgId: p.clientMsgId, content: p.content, ts: Date.now() }), C.send({ type: "send", conversationId: n, clientMsgId: p.clientMsgId, content: p.content });
     }
   };
-  let k;
-  const x = new me(`ocw-e2e-${o.profileId}`);
-  let S = !1;
-  const B = [], D = [];
-  let Y = !1;
-  const F = (n, p) => {
-    x.sealText(p).then((g) => {
-      r && k.send({ type: "send", conversationId: r, clientMsgId: n, content: g });
+  let C;
+  const j = new Te(`ocw-e2e-${o.profileId}`);
+  let D = !1;
+  const x = [], S = [];
+  let M = !1;
+  const V = (n, p) => {
+    j.sealText(p).then((g) => {
+      c && C.send({ type: "send", conversationId: c, clientMsgId: n, content: g });
     });
-  }, ie = (n, p, g) => {
-    x.sealText(p, g).then((E) => {
-      r && k.send({ type: "send", conversationId: r, clientMsgId: n, content: E });
+  }, le = (n, p, g) => {
+    j.sealText(p, g).then((P) => {
+      c && C.send({ type: "send", conversationId: c, clientMsgId: n, content: P });
     });
-  }, se = () => {
-    for (; B.length; ) {
-      const n = B.shift();
-      F(n.clientMsgId, n.text);
+  }, de = () => {
+    for (; x.length; ) {
+      const n = x.shift();
+      V(n.clientMsgId, n.text);
     }
-    for (; D.length; ) {
-      const n = D.shift();
-      F(n.clientMsgId, n.text);
+    for (; S.length; ) {
+      const n = S.shift();
+      V(n.clientMsgId, n.text);
     }
-  }, ae = (n) => {
-    k.send({ type: "fetchPrekey", targetUserId: n });
-  }, re = o.i18n ?? {}, ce = ["ar", "he", "fa", "ur"], le = typeof navigator < "u" ? (navigator.language ?? "").slice(0, 2).toLowerCase() : "";
-  ce.includes(le) && !o.el.dir && (o.el.dir = "rtl", o.el.style.fontFamily = o.el.style.fontFamily || "Tahoma,Arial,system-ui,sans-serif");
-  const K = new ke(), V = `oc_prechat_${o.profileId}_${a.slice(-8)}`, j = new Ee(o.el, a, {
+  }, pe = (n) => {
+    C.send({ type: "fetchPrekey", targetUserId: n });
+  }, he = o.i18n ?? {}, ue = ["ar", "he", "fa", "ur"], fe = typeof navigator < "u" ? (navigator.language ?? "").slice(0, 2).toLowerCase() : "";
+  ue.includes(fe) && !o.el.dir && (o.el.dir = "rtl", o.el.style.fontFamily = o.el.style.fontFamily || "Tahoma,Arial,system-ui,sans-serif");
+  const J = new ze(), Q = `oc_prechat_${o.profileId}_${a.slice(-8)}`, L = new Be(o.el, a, {
     onSend(n) {
       const p = `cm_${Math.random().toString(36).slice(2)}`, g = { kind: "text", text: n };
-      d.addOptimistic(p, g), j.render(d), d.e2e ? x.ready ? F(p, n) : Y ? D.push({ clientMsgId: p, text: n }) : (B.push({ clientMsgId: p, text: n }), d.assignedAgentId && ae(d.assignedAgentId)) : r ? (v.add({ clientMsgId: p, content: g, ts: Date.now() }), k.send({ type: "send", conversationId: r, clientMsgId: p, content: g })) : P.push({ clientMsgId: p, content: g });
+      d.addOptimistic(p, g), L.render(d), d.e2e ? j.ready ? V(p, n) : M ? S.push({ clientMsgId: p, text: n }) : (x.push({ clientMsgId: p, text: n }), d.assignedAgentId && pe(d.assignedAgentId)) : c ? (y.add({ clientMsgId: p, content: g, ts: Date.now() }), C.send({ type: "send", conversationId: c, clientMsgId: p, content: g })) : z.push({ clientMsgId: p, content: g });
     },
     async onAttach(n) {
-      if (!r) return;
+      if (!c) return;
       const p = `${b}/upload?name=${encodeURIComponent(n.name)}`, g = `cm_${Math.random().toString(36).slice(2)}`;
-      d.addOptimistic(g, { kind: "text", text: `📎 Uploading ${n.name}…` }), j.render(d);
+      d.addOptimistic(g, { kind: "text", text: `📎 Uploading ${n.name}…` }), L.render(d);
       try {
-        const E = await fetch(p, {
+        const P = await fetch(p, {
           method: "POST",
-          headers: { "content-type": n.type, ...o.token ? { authorization: `Bearer ${o.token}` } : {} },
+          // Use the resolved connection token (a signed JWT, an explicit userId,
+          // or the anonymous persistent uid) — NOT just opts.token. The server
+          // requires an Authorization header, and the verifier accepts an
+          // anonymous id as a guest; keying off opts.token alone meant anonymous
+          // visitors (the common case) sent no auth and every upload 401'd.
+          headers: { "content-type": n.type, authorization: `Bearer ${a}` },
           body: n
         });
-        if (!E.ok) throw new Error(`Upload failed: ${E.status}`);
-        const { url: O, name: N, mime: L, size: _ } = await E.json();
-        k.send({ type: "send", conversationId: r, clientMsgId: g, content: { kind: "attachment", url: O, name: N, mime: L, size: _ } });
-      } catch (E) {
-        d.addOptimistic(g, { kind: "text", text: `⚠️ Upload failed: ${E.message}` }), j.render(d);
+        if (!P.ok) throw new Error(`Upload failed: ${P.status}`);
+        const { url: U, name: F, mime: K, size: Y } = await P.json();
+        C.send({ type: "send", conversationId: c, clientMsgId: g, content: { kind: "attachment", url: U, name: F, mime: K, size: Y } });
+      } catch (P) {
+        d.addOptimistic(g, { kind: "text", text: `⚠️ Upload failed: ${P.message}` }), L.render(d);
       }
     },
     onInvoke(n, p) {
-      r && k.send({ type: "invoke", conversationId: r, actionId: n, clientInvokeId: `iv_${Math.random().toString(36).slice(2)}`, ...p ? { inputs: p } : {} });
+      c && C.send({ type: "invoke", conversationId: c, actionId: n, clientInvokeId: `iv_${Math.random().toString(36).slice(2)}`, ...p ? { inputs: p } : {} });
     },
     onTyping(n, p) {
-      r && k.send({ type: "typing", conversationId: r, isTyping: n, ...p ? { preview: p } : {} });
+      c && C.send({ type: "typing", conversationId: c, isTyping: n, ...p ? { preview: p } : {} });
     },
     onPreChat(n) {
       try {
-        localStorage.setItem(V, "1");
+        localStorage.setItem(Q, "1");
       } catch {
       }
-      k.send({
+      C.send({
         type: "open",
         profileId: o.profileId,
         ...o.subjectId ? { subjectId: o.subjectId } : {},
@@ -943,39 +1002,39 @@ function Be(o) {
         }
       });
       const p = n.callback ? `📞 Call-back requested${n.phone ? `: ${n.phone}` : ""}${n.topic ? ` — ${n.topic}` : ""}` : n.topic ? `Topic: ${n.topic}` : "";
-      p && r && !d.e2e && k.send({ type: "send", conversationId: r, clientMsgId: `pc_${Math.random().toString(36).slice(2, 12)}`, content: { kind: "text", text: p } });
+      p && c && !d.e2e && C.send({ type: "send", conversationId: c, clientMsgId: `pc_${Math.random().toString(36).slice(2, 12)}`, content: { kind: "text", text: p } });
     },
     onDeflectQuery(n) {
       if (s) return;
       clearTimeout(i);
       const p = n.trim();
       if (p.length < 3) {
-        j.hideDeflection();
+        L.hideDeflection();
         return;
       }
       i = setTimeout(() => {
-        fetch(`${b}/kb/search?profileId=${encodeURIComponent(o.profileId)}&q=${encodeURIComponent(p.slice(0, 200))}`).then((g) => g.ok ? g.json() : { articles: [] }).then((g) => j.showDeflection(g.articles ?? [])).catch(() => j.hideDeflection());
+        fetch(`${b}/kb/search?profileId=${encodeURIComponent(o.profileId)}&q=${encodeURIComponent(p.slice(0, 200))}`).then((g) => g.ok ? g.json() : { articles: [] }).then((g) => L.showDeflection(g.articles ?? [])).catch(() => L.hideDeflection());
       }, 350);
     },
     onReadUpTo(n) {
-      r && k.send({ type: "read", conversationId: r, seq: n });
+      c && C.send({ type: "read", conversationId: c, seq: n });
     },
     onLoadMore() {
-      if (!r || !d.e2e) return;
+      if (!c || !d.e2e) return;
       const n = d.messages()[0];
-      n && k.send({ type: "history", conversationId: r, beforeSeq: n.seq, limit: 20 });
+      n && C.send({ type: "history", conversationId: c, beforeSeq: n.seq, limit: 20 });
     },
     onEdit(n, p) {
-      r && k.send({ type: "edit", conversationId: r, messageId: n, content: { kind: "text", text: p } });
+      c && C.send({ type: "edit", conversationId: c, messageId: n, content: { kind: "text", text: p } });
     },
     onDelete(n) {
-      r && k.send({ type: "delete", conversationId: r, messageId: n });
+      c && C.send({ type: "delete", conversationId: c, messageId: n });
     },
     onReact(n, p, g) {
-      r && k.send({ type: "react", conversationId: r, messageId: n, emoji: p, remove: g });
+      c && C.send({ type: "react", conversationId: c, messageId: n, emoji: p, remove: g });
     },
     onCsat(n) {
-      r && fetch(`${b}/conversations/${r}/csat`, {
+      c && fetch(`${b}/conversations/${c}/csat`, {
         method: "POST",
         headers: { "Content-Type": "application/json", Authorization: `Bearer ${a}` },
         body: JSON.stringify({ score: n })
@@ -983,10 +1042,10 @@ function Be(o) {
       });
     },
     onAnnotate(n) {
-      r && k.send({ type: "annotate", conversationId: r, stroke: n });
+      c && C.send({ type: "annotate", conversationId: c, stroke: n });
     },
     onAnnotateClear() {
-      r && k.send({ type: "annotate_clear", conversationId: r });
+      c && C.send({ type: "annotate_clear", conversationId: c });
     },
     ...o.translateLang ? {
       async onTranslate(n) {
@@ -1009,102 +1068,102 @@ function Be(o) {
     ...o.subject ? { subject: o.subject } : {},
     ...o.quickReplies ? { quickReplies: o.quickReplies } : {},
     ...o.accent ? { accent: o.accent } : {},
-    ...(Q = o.user) != null && Q.name || (G = o.user) != null && G.avatar ? { userInfo: { ...o.user.name ? { name: o.user.name } : {}, ...o.user.avatar ? { avatar: o.user.avatar } : {} } } : {},
-    i18n: re
+    ...(te = o.user) != null && te.name || (oe = o.user) != null && oe.avatar ? { userInfo: { ...o.user.name ? { name: o.user.name } : {}, ...o.user.avatar ? { avatar: o.user.avatar } : {} } } : {},
+    i18n: he
   });
   try {
-    localStorage.getItem(V) && j.completePreChat();
+    localStorage.getItem(Q) && L.completePreChat();
   } catch {
   }
-  const X = o.user && (o.user.name || o.user.email || o.user.avatar || o.user.meta) ? {
+  const Z = o.user && (o.user.name || o.user.email || o.user.avatar || o.user.meta) ? {
     ...o.user.name ? { name: o.user.name } : {},
     ...o.user.email ? { email: o.user.email } : {},
     ...o.user.avatar ? { avatar: o.user.avatar } : {},
     ...o.user.meta ? { meta: o.user.meta } : {}
-  } : void 0, de = {
+  } : void 0, we = {
     type: "open",
     profileId: o.profileId,
     // Direct conversations use the kind/peerId pair; the dm:… subject key is
     // server-derived and owner-keyed, so passing it as subjectId from the
     // NON-owner side would find-or-create a junk duplicate thread.
     ...o.kind === "direct" && o.peerId ? { kind: "direct", peerId: o.peerId } : o.subjectId ? { subjectId: o.subjectId } : {},
-    ...c ? { linkFrom: c } : {},
-    ...X ? { userInfo: X } : {},
+    ...r ? { linkFrom: r } : {},
+    ...Z ? { userInfo: Z } : {},
     ...typeof location < "u" ? { pageUrl: location.href } : {},
     ...typeof document < "u" && document.title ? { pageTitle: document.title } : {},
     // Pass subject display info so the server can persist it to the Subject record.
     // This is how listingTitle and listingMeta get saved without a separate API call.
-    ...(Z = o.subject) != null && Z.title ? { subjectTitle: o.subject.title } : {},
-    ...(ee = o.subject) != null && ee.subtitle ? { subjectMeta: o.subject.subtitle } : {}
+    ...(ne = o.subject) != null && ne.title ? { subjectTitle: o.subject.title } : {},
+    ...(ie = o.subject) != null && ie.subtitle ? { subjectMeta: o.subject.subtitle } : {}
   };
-  k = new ge({
+  C = new Ce({
     ...o.refreshToken ? { refreshToken: o.refreshToken } : {},
     url: f,
     token: a,
-    open: de,
+    open: we,
     getCursor: () => d.highestSeq(),
-    onStatusChange: (n, p) => j.setConnStatus(n, p),
+    onStatusChange: (n, p) => L.setConnStatus(n, p),
     onFrame(n) {
-      if (K.apply(n), n.type === "opened") {
-        if (r = n.conversation.id, !u) {
+      if (J.apply(n), n.type === "opened") {
+        if (c = n.conversation.id, !u) {
           u = !0;
-          for (const p of v.load())
-            k.send({ type: "send", conversationId: r, clientMsgId: p.clientMsgId, content: p.content });
+          for (const p of y.load())
+            C.send({ type: "send", conversationId: c, clientMsgId: p.clientMsgId, content: p.content });
         }
-        we(f, a, r, d, j, b), P.length && z(r);
+        ve(f, a, c, d, L, b), z.length && q(c);
       }
-      if (n.type === "ack" && v.remove(n.clientMsgId), n.type === "prekeyBundle") {
-        n.bundle && (Y = !0, x.x3dhSendTo(n.bundle).then((p) => {
-          const g = [...B.splice(0), ...D.splice(0)];
-          for (const E of g) ie(E.clientMsgId, E.text, p);
-          j.render(d);
+      if (n.type === "ack" && y.remove(n.clientMsgId), n.type === "prekeyBundle") {
+        n.bundle && (M = !0, j.x3dhSendTo(n.bundle).then((p) => {
+          const g = [...x.splice(0), ...S.splice(0)];
+          for (const P of g) le(P.clientMsgId, P.text, p);
+          L.render(d);
         }));
         return;
       }
       if (n.type === "message" && d.e2e) {
-        const p = ye(n.message.content);
-        if (p && !x.ready) {
-          x.x3dhReceiveFrom(p.x3dhIK, p.x3dhEK, p.x3dhSPK).then(async () => {
-            await x.openFrame(n), d.apply(n), j.render(d);
+        const p = Ie(n.message.content);
+        if (p && !j.ready) {
+          j.x3dhReceiveFrom(p.x3dhIK, p.x3dhEK, p.x3dhSPK).then(async () => {
+            await j.openFrame(n), d.apply(n), L.render(d);
           });
           return;
         }
       }
       if (n.type === "peerkey") {
-        x.onPeerKey(n.key).then(() => {
-          se(), j.render(d);
+        j.onPeerKey(n.key).then(() => {
+          de(), L.render(d);
         });
         return;
       }
       (async () => {
-        if (d.e2e && await x.openFrame(n), d.apply(n), n.type === "message" && n.message.senderId !== a && !n.message.internal && ($(), A()), d.e2e && r && !S) {
-          S = !0;
-          const p = await x.initX3DH();
-          k.send({ type: "uploadPrekeys", ...p });
-          const g = await x.begin();
-          k.send({ type: "pubkey", conversationId: r, key: g });
+        if (d.e2e && await j.openFrame(n), d.apply(n), n.type === "message" && n.message.senderId !== a && !n.message.internal && (A(), $()), d.e2e && c && !D) {
+          D = !0;
+          const p = await j.initX3DH();
+          C.send({ type: "uploadPrekeys", ...p });
+          const g = await j.begin();
+          C.send({ type: "pubkey", conversationId: c, key: g });
         }
-        j.render(d);
+        L.render(d);
       })();
     }
-  }), k.connect(), j.render(d);
-  const M = o.launcher ? ne(o) : null, H = { close: () => {
-    s = !0, clearTimeout(i), k.close(), m == null || m.remove(), j.destroy(), K.destroy(), l && C && l.removeEventListener("change", C), R.delete(o.el), M && U.get(M) === H && U.delete(M);
+  }), C.connect(), L.render(d);
+  const H = o.launcher ? ce(o) : null, _ = { close: () => {
+    s = !0, clearTimeout(i), C.close(), w == null || w.remove(), L.destroy(), J.destroy(), l && T && l.removeEventListener("change", T), m && (document.removeEventListener("keydown", m), m = null), O.delete(o.el), H && W.get(H) === _ && W.delete(H);
   } };
-  return R.set(o.el, H), M && U.set(M, H), H;
+  return O.set(o.el, _), H && W.set(H, _), _;
 }
 export {
-  xe as ChatStore,
-  ge as ConnectionManager,
-  me as E2ESession,
-  be as PersistentOutbox,
-  Ee as Renderer,
-  He as asConversationId,
-  ye as extractX3DHInit,
-  Me as httpBaseFromWsUrl,
-  Be as mount,
-  ue as resolveRelayUrls,
-  we as restoreHistory,
-  Ae as unmount
+  ke as ChatStore,
+  Ce as ConnectionManager,
+  Te as E2ESession,
+  ye as PersistentOutbox,
+  Be as Renderer,
+  Ke as asConversationId,
+  Ie as extractX3DHInit,
+  We as httpBaseFromWsUrl,
+  _e as mount,
+  me as resolveRelayUrls,
+  ve as restoreHistory,
+  Ne as unmount
 };
 //# sourceMappingURL=index.js.map