brainerce 1.31.0 → 1.33.0

package/dist/bot/index.mjs

@@ -11,7 +11,17 @@ var CHROME = {
     yourMessage: "Your message",
     send: "Send",
     sent: "Thanks! The team will get back to you by email.",
-    close: "Close"
+    close: "Close",
+    expand: "Expand",
+    collapse: "Collapse",
+    searching: "Searching the store\u2026",
+    addToCart: "Add to cart",
+    added: "Added",
+    view: "View",
+    chooseOptions: "View product",
+    results: "From the store",
+    poweredBy: "Powered by Brainerce",
+    addFailed: "I couldn\u2019t add that to the cart \u2014 try the button on the product card."
   },
   he: {
     online: "\u05DE\u05D7\u05D5\u05D1\u05E8",
@@ -22,15 +32,111 @@ var CHROME = {
     yourMessage: "\u05D4\u05D4\u05D5\u05D3\u05E2\u05D4 \u05E9\u05DC\u05DB\u05DD",
     send: "\u05E9\u05DC\u05D9\u05D7\u05D4",
     sent: "\u05EA\u05D5\u05D3\u05D4! \u05D4\u05E6\u05D5\u05D5\u05EA \u05D9\u05D7\u05D6\u05D5\u05E8 \u05D0\u05DC\u05D9\u05DB\u05DD \u05D1\u05DE\u05D9\u05D9\u05DC.",
-    close: "\u05E1\u05D2\u05D9\u05E8\u05D4"
+    close: "\u05E1\u05D2\u05D9\u05E8\u05D4",
+    expand: "\u05D4\u05E8\u05D7\u05D1\u05D4",
+    collapse: "\u05DB\u05D9\u05D5\u05D5\u05E5",
+    searching: "\u05DE\u05D7\u05E4\u05E9 \u05D1\u05D7\u05E0\u05D5\u05EA\u2026",
+    addToCart: "\u05D4\u05D5\u05E1\u05E4\u05D4 \u05DC\u05E1\u05DC",
+    added: "\u05E0\u05D5\u05E1\u05E3",
+    view: "\u05E6\u05E4\u05D9\u05D9\u05D4",
+    chooseOptions: "\u05DC\u05E6\u05E4\u05D5\u05EA \u05D1\u05DE\u05D5\u05E6\u05E8",
+    results: "\u05DE\u05EA\u05D5\u05DA \u05D4\u05D7\u05E0\u05D5\u05EA",
+    poweredBy: "\u05DE\u05D5\u05E4\u05E2\u05DC \u05E2\u05DC \u05D9\u05D3\u05D9 Brainerce",
+    addFailed: "\u05DC\u05D0 \u05D4\u05E6\u05DC\u05D7\u05EA\u05D9 \u05DC\u05D4\u05D5\u05E1\u05D9\u05E3 \u05DC\u05E1\u05DC \u2014 \u05E0\u05E1\u05D5 \u05D3\u05E8\u05DA \u05D4\u05DB\u05E4\u05EA\u05D5\u05E8 \u05D1\u05DB\u05E8\u05D8\u05D9\u05E1 \u05D4\u05DE\u05D5\u05E6\u05E8."
   }
 };
+var ICONS = {
+  chat: '<svg viewBox="0 0 24 24" fill="none"><path d="M12 3C7.03 3 3 6.58 3 11c0 2.04.86 3.9 2.28 5.32-.15 1.23-.62 2.39-1.1 3.21-.13.23.05.52.31.47 1.56-.27 3.07-.93 4.13-1.62A10.6 10.6 0 0 0 12 19c4.97 0 9-3.58 9-8s-4.03-8-9-8Z" fill="currentColor"/></svg>',
+  close: '<svg viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+  expand: '<svg viewBox="0 0 24 24" fill="none"><path d="M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  collapse: '<svg viewBox="0 0 24 24" fill="none"><path d="M20 10h-6V4M4 14h6v6M20 4l-6 6M4 20l6-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  mail: '<svg viewBox="0 0 24 24" fill="none"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke="currentColor" stroke-width="1.7"/><path d="m4.5 7.5 7.5 5.5 7.5-5.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  send: '<svg viewBox="0 0 24 24" fill="none"><path d="M4.4 11.2 19 4.6c.7-.3 1.4.4 1.1 1.1l-6.6 14.6c-.3.7-1.3.6-1.5-.1l-1.7-5.4a1 1 0 0 0-.6-.6l-5.4-1.7c-.7-.2-.8-1.2-.1-1.5Z" fill="currentColor"/></svg>',
+  cart: '<svg viewBox="0 0 24 24" fill="none"><path d="M3 4h2l2.4 11.2A2 2 0 0 0 9.36 17H17.5a2 2 0 0 0 1.95-1.55L21 8H6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="20.5" r="1.4" fill="currentColor"/><circle cx="17" cy="20.5" r="1.4" fill="currentColor"/></svg>',
+  check: '<svg viewBox="0 0 24 24" fill="none"><path d="m5 12.5 4.5 4.5L19 7.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  arrow: '<svg viewBox="0 0 24 24" fill="none"><path d="M7 17 17 7M9 7h8v8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  // Brainerce brand mark for the Powered-by footer: the gradient "B"
+  // (emerald→violet), matching the dashboard BrandedLoader identity.
+  brand: '<svg viewBox="0 0 24 24"><defs><linearGradient id="bb-brand-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#34d399"/><stop offset="1" stop-color="#8b5cf6"/></linearGradient></defs><rect x="1.5" y="1.5" width="21" height="21" rx="6" fill="url(#bb-brand-g)"/><text x="12" y="17" text-anchor="middle" font-family="ui-sans-serif,system-ui,sans-serif" font-size="14" font-weight="700" fill="#fff">B</text></svg>'
+};
+var svgParser = typeof DOMParser !== "undefined" ? new DOMParser() : null;
+function icon(name) {
+  const markup = (ICONS[name] ?? ICONS.chat).replace(
+    "<svg ",
+    '<svg xmlns="http://www.w3.org/2000/svg" '
+  );
+  const doc = svgParser?.parseFromString(markup, "image/svg+xml");
+  const el = doc?.documentElement;
+  if (!el || el.nodeName === "parsererror") return document.createTextNode("");
+  el.setAttribute("aria-hidden", "true");
+  el.setAttribute("class", "bb-ic");
+  return el;
+}
 function randomId(prefix) {
   const bytes = new Uint8Array(16);
   crypto.getRandomValues(bytes);
   const b64 = btoa(String.fromCharCode(...bytes)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
   return `${prefix}${b64}`;
 }
+function isSafeUrl(url) {
+  return /^\/(?!\/)/.test(url) || /^https?:\/\//i.test(url);
+}
+var INLINE_RE = /\*\*([^*\n]+)\*\*|\[([^\]\n]+)\]\(([^)\s]+)\)/g;
+function appendInline(parent, text) {
+  let last = 0;
+  INLINE_RE.lastIndex = 0;
+  for (let m = INLINE_RE.exec(text); m; m = INLINE_RE.exec(text)) {
+    if (m.index > last) parent.appendChild(document.createTextNode(text.slice(last, m.index)));
+    if (m[1] !== void 0) {
+      const b = document.createElement("strong");
+      b.textContent = m[1];
+      parent.appendChild(b);
+    } else if (isSafeUrl(m[3])) {
+      const a = document.createElement("a");
+      a.href = m[3];
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      a.textContent = m[2];
+      parent.appendChild(a);
+    } else {
+      parent.appendChild(document.createTextNode(m[2]));
+    }
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) parent.appendChild(document.createTextNode(text.slice(last)));
+}
+function renderRich(el, text) {
+  el.replaceChildren();
+  const lines = text.split("\n");
+  let list = null;
+  let para = null;
+  for (const line of lines) {
+    const bullet = /^\s*[-•*]\s+(.*)$/.exec(line);
+    if (bullet) {
+      para = null;
+      if (!list) {
+        list = document.createElement("ul");
+        el.appendChild(list);
+      }
+      const li = document.createElement("li");
+      appendInline(li, bullet[1]);
+      list.appendChild(li);
+      continue;
+    }
+    list = null;
+    if (!line.trim()) {
+      para = null;
+      continue;
+    }
+    if (!para) {
+      para = document.createElement("p");
+      el.appendChild(para);
+    } else {
+      para.appendChild(document.createElement("br"));
+    }
+    appendInline(para, line);
+  }
+}
 var BrainerceBot = class _BrainerceBot {
   constructor(options) {
     this.settings = { enabled: false };
@@ -39,10 +145,21 @@ var BrainerceBot = class _BrainerceBot {
     this.conversationId = null;
     this.busy = false;
     this.opened = false;
+    this.expanded = false;
     this.destroyed = false;
+    /** Per-turn streaming state. */
+    this.pendingText = "";
+    this.cardsRow = null;
+    this.cardIds = /* @__PURE__ */ new Set();
+    /**
+     * The large dialog owns the screen — the page behind must not scroll.
+     * Locks <body> while a big surface is open; restores on close/collapse.
+     */
+    this.prevBodyOverflow = null;
     this.connectionId = options.connectionId;
     this.baseUrl = (options.baseUrl || DEFAULT_BASE_URL).replace(/\/$/, "");
     this.storageKey = `brainerce-bot:${this.connectionId}`;
+    this.onAddToCart = options.onAddToCart;
   }
   /** Boot the widget. Resolves to null when the bot is disabled server-side. */
   static async mount(options) {
@@ -56,6 +173,10 @@ var BrainerceBot = class _BrainerceBot {
   }
   destroy() {
     this.destroyed = true;
+    if (this.prevBodyOverflow !== null) {
+      document.body.style.overflow = this.prevBodyOverflow;
+      this.prevBodyOverflow = null;
+    }
     this.host?.remove();
   }
   // ---------------------------------------------------------------------------
@@ -102,81 +223,290 @@ var BrainerceBot = class _BrainerceBot {
     }
   }
   // --------------------------------------------------------------------------
-  // Rendering
+  // Rendering — surface system
   // --------------------------------------------------------------------------
+  css(accent, dir, side) {
+    const square = this.settings.bubbleShape === "square";
+    const rWindow = square ? "14px" : "22px";
+    const rBubble = square ? "8px" : "15px";
+    const rTight = "5px";
+    const mode = this.settings.displayMode ?? "floating";
+    const isRail = mode === "side_rail";
+    const isFull = mode === "full_screen";
+    return `
+      :host { all: initial; }
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0;
+        font-family: -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
+        -webkit-font-smoothing: antialiased; }
+      button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
+      .bb { position: fixed; bottom: 24px; ${side}: 24px; z-index: 2147483000; direction: ${dir};
+        /* product-card density scales with the window size */
+        --bb-card-w: 148px; --bb-img-h: 84px; --bb-title-fs: 11.5px; --bb-price-fs: 12.5px; --bb-btn-h: 27px; }
+      /* .big = any large surface (expanded, full-screen mode, mobile takeover) */
+      .bb.big { --bb-card-w: 216px; --bb-img-h: 132px; --bb-title-fs: 13px; --bb-price-fs: 14px; --bb-btn-h: 33px; }
+      .bb.big .bb-msgs, .bb.big .bb-chips, .bb.big .bb-esc {
+        padding-inline: max(20px, calc((100% - 1340px) / 2)); }
+      .bb.big .bb-msgs { gap: 12px; padding-top: 22px; }
+      .bb.big .bb-msg { font-size: 14px; padding: 11px 15px; }
+      .bb.big .bb-header { padding: 15px 22px; }
+      /* Big-surface composer: a full-width message box with the send inside */
+      .bb.big .bb-composer { position: relative; padding: 16px 20px 20px; }
+      .bb.big .bb-input { min-height: 116px; border-radius: 18px; background: #fff;
+        border: 1px solid #e3e5ec; padding: 16px 20px 52px; font-size: 15px;
+        overflow-y: auto; box-shadow: 0 2px 8px -2px rgba(15,18,34,.06); }
+      .bb.big .bb-send { position: absolute; bottom: 34px; inset-inline-end: 36px;
+        width: 42px; height: 42px; }
+      .bb.big .bb-send .bb-ic { width: 19px; height: 19px; }
+      /* Backdrop for the large dialog: dim + blur the storefront behind it */
+      .bb-scrim { position: fixed; inset: 0; background: rgba(15,18,34,.35);
+        -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
+        opacity: 0; pointer-events: none; transition: opacity .25s ease; }
+      .bb.open.big .bb-scrim { opacity: 1; pointer-events: auto; }
+
+      /* ---- launcher ------------------------------------------------------ */
+      .bb-launcher {
+        width: 58px; height: 58px; position: relative; display: flex; align-items: center;
+        justify-content: center; color: #fff; background: ${accent};
+        border-radius: ${square ? "16px" : "999px"}; overflow: hidden;
+        box-shadow: 0 6px 16px -4px color-mix(in srgb, ${accent} 55%, rgba(10,12,30,.4)), 0 2px 6px rgba(10,12,30,.18);
+        transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
+      }
+      .bb-launcher:hover { transform: scale(1.07) translateY(-1px); }
+      .bb-launcher:active { transform: scale(.96); }
+      .bb-launcher img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
+        transition: opacity .18s ease, transform .25s ease; }
+      .bb-launcher .bb-ic { width: 26px; height: 26px; position: absolute;
+        transition: opacity .18s ease, transform .25s ease; }
+      .bb-launcher .bb-l-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
+      .bb.open .bb-launcher .bb-l-chat, .bb.open .bb-launcher img { opacity: 0; transform: rotate(90deg) scale(.6); }
+      .bb.open .bb-launcher img { transform: scale(1.15); }
+      .bb.open .bb-launcher .bb-l-close { opacity: 1; transform: rotate(0) scale(1); }
+
+      /* ---- window -------------------------------------------------------- */
+      .bb-window {
+        position: absolute; bottom: 74px; ${side}: 0;
+        width: 384px; max-width: calc(100vw - 32px);
+        height: min(620px, calc(100vh - 122px));
+        display: flex; flex-direction: column; background: #fff;
+        border-radius: ${rWindow}; overflow: hidden;
+        box-shadow: 0 24px 64px -16px rgba(15,18,34,.28), 0 6px 20px -6px rgba(15,18,34,.14), 0 0 0 1px rgba(15,18,34,.05);
+        opacity: 0; transform: translateY(10px) scale(.97);
+        transform-origin: bottom ${side === "left" ? "left" : "right"};
+        pointer-events: none;
+        transition: opacity .2s ease, transform .24s cubic-bezier(.22,1.2,.36,1);
+      }
+      .bb.open .bb-window { opacity: 1; transform: none; pointer-events: auto; }
+      /* Shopper-expanded = the large centered dialog (same as full-screen mode) */
+      .bb.expanded .bb-window { position: fixed;
+        inset: min(6vh, 60px) max(24px, calc((100vw - 1680px) / 2));
+        width: auto; max-width: none; height: auto; }
+      ${isRail ? `.bb-window { bottom: 0; top: auto; ${side}: 0; height: calc(100vh - 98px); border-end-start-radius: ${rWindow}; }
+             .bb.expanded .bb-window { width: min(560px, calc(100vw - 40px)); }` : ""}
+      ${isFull ? `.bb.open .bb-window { position: fixed;
+               inset: min(6vh, 60px) max(24px, calc((100vw - 1680px) / 2));
+               width: auto; max-width: none; height: auto; }
+             .bb.open .bb-launcher { opacity: 0; pointer-events: none; }` : ""}
+      @media (max-width: 520px) {
+        .bb { bottom: 16px; ${side}: 16px; }
+        .bb.open .bb-window { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
+        .bb.open .bb-launcher { opacity: 0; pointer-events: none; }
+      }
+
+      /* ---- header -------------------------------------------------------- */
+      .bb-header { display: flex; align-items: center; gap: 11px; padding: 13px 16px;
+        background: #fff; border-bottom: 1px solid #eef0f4; flex-shrink: 0; }
+      .bb-avatar { width: 38px; height: 38px; position: relative; flex-shrink: 0;
+        border-radius: 999px; background: color-mix(in srgb, ${accent} 14%, #fff);
+        color: ${accent}; font-size: 15px; font-weight: 700;
+        display: flex; align-items: center; justify-content: center;
+        box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, ${accent} 35%, #fff); }
+      .bb-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
+      .bb-avatar::after { content: ''; position: absolute; bottom: -1px; inset-inline-end: -1px;
+        width: 10px; height: 10px; border-radius: 999px; background: #22c55e; border: 2px solid #fff; }
+      .bb-head-main { flex: 1; min-width: 0; }
+      .bb-name { display: block; font-size: 13.5px; font-weight: 650; color: #14161f;
+        letter-spacing: -.01em; line-height: 1.25;
+        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+      .bb-status { display: block; font-size: 11px; color: #8a8f9e; line-height: 1.3; }
+      .bb-actions { display: flex; align-items: center; gap: 2px; }
+      .bb-iconbtn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
+        border-radius: 8px; color: #9aa0ae; transition: background .12s ease, color .12s ease; }
+      .bb-iconbtn:hover { background: #f3f4f7; color: #4d5260; }
+      .bb-iconbtn .bb-ic { width: 17px; height: 17px; }
+
+      /* ---- messages ------------------------------------------------------ */
+      .bb-msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain;
+        padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 10px;
+        background: linear-gradient(color-mix(in srgb, ${accent} 4%, #f7f8fa), #f7f8fa 140px); }
+      .bb-msgs::-webkit-scrollbar { width: 5px; }
+      .bb-msgs::-webkit-scrollbar-thumb { background: rgba(20,22,31,.12); border-radius: 99px; }
+      .bb-msg { max-width: 84%; padding: 9px 13px; font-size: 13px; line-height: 1.55;
+        word-break: break-word; animation: bb-in .2s ease both; unicode-bidi: plaintext; }
+      .bb-msg p + p, .bb-msg p + ul, .bb-msg ul + p { margin-top: 6px; }
+      .bb-msg ul { padding-inline-start: 18px; }
+      .bb-msg li { margin: 2px 0; }
+      .bb-msg a { color: ${accent}; font-weight: 550; text-decoration: underline; text-underline-offset: 2px; }
+      .bb-msg.bot { align-self: flex-start; background: #fff; color: #232633;
+        border: 1px solid #eceef3; border-radius: ${rBubble}; border-end-start-radius: ${rTight};
+        box-shadow: 0 1px 2px rgba(15,18,34,.04); }
+      .bb-msg.user { align-self: flex-end; background: ${accent}; color: #fff;
+        border-radius: ${rBubble}; border-end-end-radius: ${rTight};
+        box-shadow: 0 2px 6px -2px color-mix(in srgb, ${accent} 50%, rgba(10,12,30,.3)); }
+      .bb-msg.err { align-self: flex-start; background: #fef2f2; color: #b91c1c;
+        border: 1px solid #fecaca; border-radius: ${rBubble}; }
+      @keyframes bb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+      /* typing / tool status */
+      .bb-typing { align-self: flex-start; display: flex; align-items: center; gap: 8px;
+        background: #fff; border: 1px solid #eceef3; border-radius: ${rBubble};
+        border-end-start-radius: ${rTight}; padding: 10px 13px; animation: bb-in .2s ease both; }
+      .bb-typing .bb-dots { display: flex; gap: 4px; }
+      .bb-typing .bb-dots i { width: 6px; height: 6px; border-radius: 99px;
+        background: color-mix(in srgb, ${accent} 65%, #aab); animation: bb-bounce 1.2s ease-in-out infinite; }
+      .bb-typing .bb-dots i:nth-child(2) { animation-delay: .15s; }
+      .bb-typing .bb-dots i:nth-child(3) { animation-delay: .3s; }
+      .bb-typing .bb-tool { font-size: 11.5px; color: #8a8f9e; display: none; }
+      .bb-typing.searching .bb-tool { display: block; }
+      @keyframes bb-bounce { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } }
+
+      /* ---- product cards ------------------------------------------------- */
+      .bb-shelf { align-self: stretch; animation: bb-in .25s ease both; }
+      .bb-shelf-cap { font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
+        color: #9aa0ae; padding: 2px 4px 6px; }
+      .bb-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px;
+        scroll-snap-type: x proximity; scrollbar-width: none; }
+      .bb-cards::-webkit-scrollbar { display: none; }
+      .bb-card { flex: 0 0 var(--bb-card-w); scroll-snap-align: start; background: #fff;
+        border: 1px solid #eceef3; border-radius: 12px; overflow: hidden;
+        display: flex; flex-direction: column;
+        box-shadow: 0 1px 2px rgba(15,18,34,.04);
+        transition: transform .16s ease, box-shadow .16s ease; }
+      .bb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(15,18,34,.18); }
+      .bb-card-img { display: flex; width: 100%; height: var(--bb-img-h); flex: 0 0 var(--bb-img-h); overflow: hidden; background: #f1f2f5; cursor: pointer; }
+      .bb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+      .bb-card-img .bb-ic { width: 22px; height: 22px; color: #c6c9d4; margin: auto; }
+      .bb-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
+      .bb-card-title { font-size: var(--bb-title-fs); font-weight: 600; color: #1c1e29; line-height: 1.35;
+        letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+        overflow: hidden; min-height: 2.7em; cursor: pointer; unicode-bidi: plaintext; }
+      .bb-card-title:hover { color: ${accent}; }
+      .bb-card-price { font-size: var(--bb-price-fs); font-weight: 700; color: #14161f;
+        font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+      .bb-card-cta { display: flex; gap: 5px; margin-top: auto; }
+      .bb-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
+        height: var(--bb-btn-h); border-radius: 8px; font-size: 11px; font-weight: 650;
+        white-space: nowrap; padding: 0 6px;
+        transition: filter .12s ease, background .12s ease, color .12s ease; }
+      .bb-btn .bb-ic { width: 13px; height: 13px; }
+      .bb-btn-add { background: ${accent}; color: #fff; }
+      .bb-btn-add:hover { filter: brightness(1.08); }
+      .bb-btn-add[data-state="busy"] { opacity: .65; pointer-events: none; }
+      .bb-btn-add[data-state="done"] { background: #059669; pointer-events: none; }
+      .bb-btn-ghost { background: #fff; border: 1px solid #e3e5ec; color: #3c4150; flex: 0 0 auto; padding: 0 11px; }
+      .bb-btn-ghost:hover { background: #f6f7f9; border-color: #d5d8e1; }
+      .bb-btn-ghost.bb-wide { flex: 1; color: ${accent}; border-color: color-mix(in srgb, ${accent} 35%, #e3e5ec); }
+      .bb-btn-ghost.bb-wide:hover { background: color-mix(in srgb, ${accent} 6%, #fff); }
+      .bb-btn:disabled { opacity: .45; pointer-events: none; }
+
+      /* in-card variant picker */
+      .bb-card.picking .bb-card-cta { display: none; }
+      .bb-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 4px;
+        padding-top: 8px; border-top: 1px dashed #e9ebf0; position: relative; }
+      .bb-pick-close { position: absolute; top: 6px; inset-inline-end: 0;
+        width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
+        border-radius: 6px; color: #9aa0ae; }
+      .bb-pick-close:hover { background: #f3f4f7; color: #4d5260; }
+      .bb-pick-close .bb-ic { width: 11px; height: 11px; }
+      .bb-pick-key { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
+        letter-spacing: .06em; color: #9aa0ae; unicode-bidi: plaintext; }
+      .bb-pick-vals { display: flex; flex-wrap: wrap; gap: 4px; }
+      .bb-chipv { border: 1px solid #e3e5ec; border-radius: 7px; padding: 3px 9px;
+        font-size: 11px; font-weight: 550; color: #3c4150; background: #fff;
+        transition: border-color .12s ease, background .12s ease, color .12s ease; }
+      .bb-chipv:hover { border-color: color-mix(in srgb, ${accent} 50%, #e3e5ec); }
+      .bb-chipv.sel { background: ${accent}; border-color: ${accent}; color: #fff; }
+      .bb-chipv.off { opacity: .35; pointer-events: none; }
+      .bb-pick-foot { display: flex; align-items: center; justify-content: space-between;
+        gap: 6px; margin-top: 2px; }
+      .bb-pick-foot .bb-btn { flex: 0 0 auto; padding: 0 11px; }
+      .bb-pick-price { font-size: 12.5px; font-weight: 700; color: #14161f;
+        font-variant-numeric: tabular-nums; }
+
+      /* ---- starter chips -------------------------------------------------- */
+      .bb-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 14px 12px; background: #f7f8fa; }
+      .bb-chip { border: 1px solid color-mix(in srgb, ${accent} 30%, #e3e5ec);
+        color: color-mix(in srgb, ${accent} 85%, #000); background: #fff; border-radius: 999px;
+        font-size: 12px; font-weight: 550; padding: 6px 13px;
+        transition: background .12s ease, transform .12s ease; }
+      .bb-chip:hover { background: color-mix(in srgb, ${accent} 7%, #fff); transform: translateY(-1px); }
+
+      /* ---- escalation sheet ----------------------------------------------- */
+      .bb-esc { display: none; flex-direction: column; gap: 8px; padding: 12px 14px;
+        background: #fff; border-top: 1px solid #eef0f4; flex-shrink: 0; }
+      .bb-esc.open { display: flex; animation: bb-in .18s ease both; }
+      .bb-esc-title { font-size: 12px; font-weight: 650; color: #3c4150; }
+      .bb-esc input, .bb-esc textarea { border: 1px solid #e3e5ec; border-radius: 10px;
+        padding: 8px 11px; font-size: 12.5px; color: #1c1e29; outline: none; resize: none; background: #fbfbfd; }
+      .bb-esc input:focus, .bb-esc textarea:focus { border-color: color-mix(in srgb, ${accent} 55%, #e3e5ec);
+        box-shadow: 0 0 0 3px color-mix(in srgb, ${accent} 12%, transparent); background: #fff; }
+      .bb-esc-send { height: 33px; border-radius: 10px; background: ${accent}; color: #fff;
+        font-size: 12.5px; font-weight: 650; }
+      .bb-esc-send:hover { filter: brightness(1.08); }
+      .bb-esc-note { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #047857; font-weight: 550; }
+      .bb-esc-note .bb-ic { width: 15px; height: 15px; }
+
+      /* ---- composer ------------------------------------------------------- */
+      .bb-composer { display: flex; align-items: center; gap: 8px; padding: 11px 12px;
+        background: #fff; border-top: 1px solid #eef0f4; flex-shrink: 0; }
+      .bb-input { flex: 1; border: 1px solid transparent; outline: none; font-size: 13px; color: #1c1e29;
+        background: #f1f2f5; border-radius: 999px; padding: 9px 15px; min-width: 0;
+        resize: none; overflow-y: hidden; height: 38px; line-height: 1.45;
+        transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; }
+      .bb-input::placeholder { color: #9aa0ae; }
+      .bb-input:focus { background: #fff; border-color: color-mix(in srgb, ${accent} 55%, #e3e5ec);
+        box-shadow: 0 0 0 3px color-mix(in srgb, ${accent} 12%, transparent); }
+      .bb-send { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center;
+        justify-content: center; border-radius: 999px; background: ${accent}; color: #fff;
+        transition: transform .15s cubic-bezier(.34,1.56,.64,1), opacity .12s ease, filter .12s ease; }
+      .bb-send .bb-ic { width: 17px; height: 17px; ${dir === "rtl" ? "transform: scaleX(-1);" : ""} }
+      .bb-send:hover { filter: brightness(1.08); transform: scale(1.06); }
+      .bb-send:disabled { opacity: .4; pointer-events: none; }
+
+      /* Powered-by footer */
+      .bb-foot { flex-shrink: 0; display: flex; justify-content: center; align-items: center;
+        padding: 5px 12px 7px; background: #fff; }
+      .bb-foot a { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
+        font-weight: 500; color: #aab0bd; text-decoration: none; letter-spacing: .005em;
+        transition: color .12s ease; }
+      .bb-foot a:hover { color: #6b7280; }
+      .bb-foot .bb-ic { width: 13px; height: 13px; border-radius: 4px; }
+    `;
+  }
   render(target) {
     const accent = this.settings.accentColor || "#6366F1";
     const dir = RTL_LOCALES.has(this.locale) ? "rtl" : "ltr";
-    const radius = this.settings.bubbleShape === "square" ? "8px" : "16px";
     const side = this.settings.position === "start" ? "left" : "right";
     const sideRtlAware = dir === "rtl" ? side === "left" ? "right" : "left" : side;
+    const name = this.settings.displayName || "Assistant";
     this.host = document.createElement("div");
     this.host.setAttribute("data-brainerce-bot", this.connectionId);
     this.root = this.host.attachShadow({ mode: "open" });
     const style = document.createElement("style");
-    style.textContent = `
-      :host { all: initial; }
-      * { box-sizing: border-box; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
-      .bb-root { position: fixed; bottom: 20px; ${sideRtlAware}: 20px; z-index: 2147483000; direction: ${dir}; }
-      .bb-launcher {
-        width: 56px; height: 56px; border: none; cursor: pointer; display: flex;
-        align-items: center; justify-content: center; color: #fff; background: ${accent};
-        border-radius: ${this.settings.bubbleShape === "square" ? "14px" : "9999px"};
-        box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: transform .15s ease;
-        overflow: hidden; padding: 0;
-      }
-      .bb-launcher:hover { transform: scale(1.06); }
-      .bb-launcher img { width: 100%; height: 100%; object-fit: cover; }
-      .bb-window {
-        position: absolute; bottom: 70px; ${sideRtlAware}: 0; width: 360px; max-width: calc(100vw - 32px);
-        height: 540px; max-height: calc(100vh - 110px); display: none; flex-direction: column;
-        background: #fff; border-radius: 16px; overflow: hidden;
-        box-shadow: 0 16px 48px rgba(0,0,0,.24); border: 1px solid rgba(0,0,0,.06);
-      }
-      .bb-window.open { display: flex; }
-      .bb-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: ${accent}; color: #fff; }
-      .bb-avatar { width: 34px; height: 34px; border-radius: 9999px; background: rgba(255,255,255,.25);
-        display: flex; align-items: center; justify-content: center; font-weight: 600; overflow: hidden; flex-shrink: 0; }
-      .bb-avatar img { width: 100%; height: 100%; object-fit: cover; }
-      .bb-head-main { flex: 1; min-width: 0; }
-      .bb-name { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-      .bb-status { font-size: 11px; opacity: .9; display: flex; align-items: center; gap: 5px; }
-      .bb-dot { width: 6px; height: 6px; border-radius: 9999px; background: #34d399; }
-      .bb-iconbtn { background: none; border: none; color: #fff; cursor: pointer; opacity: .85; font-size: 16px; padding: 4px; }
-      .bb-iconbtn:hover { opacity: 1; }
-      .bb-messages { flex: 1; overflow-y: auto; padding: 14px; background: #f7f7f9; display: flex; flex-direction: column; gap: 8px; }
-      .bb-msg { max-width: 80%; padding: 9px 12px; border-radius: ${radius}; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
-      .bb-msg.bot { align-self: flex-start; background: #fff; border: 1px solid rgba(0,0,0,.07); border-end-start-radius: 4px; }
-      .bb-msg.user { align-self: flex-end; background: ${accent}; color: #fff; border-end-end-radius: 4px; }
-      .bb-msg.err { align-self: flex-start; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
-      .bb-typing { align-self: flex-start; font-size: 11.5px; color: #6b7280; padding: 2px 4px; }
-      .bb-card { align-self: flex-start; width: 230px; background: #fff; border: 1px solid rgba(0,0,0,.08);
-        border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; display: block; }
-      .bb-card img { width: 100%; height: 120px; object-fit: cover; display: block; background: #eee; }
-      .bb-card-body { padding: 9px 11px; }
-      .bb-card-title { font-size: 13px; font-weight: 600; margin: 0 0 3px; }
-      .bb-card-price { font-size: 13px; color: ${accent}; font-weight: 600; }
-      .bb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: #f7f7f9; }
-      .bb-chip { border: 1px solid ${accent}; color: ${accent}; background: #fff; border-radius: 9999px;
-        font-size: 12px; padding: 5px 11px; cursor: pointer; }
-      .bb-inputrow { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(0,0,0,.07); background: #fff; }
-      .bb-input { flex: 1; border: none; outline: none; font-size: 13.5px; background: #f1f1f4; border-radius: 9999px; padding: 9px 14px; }
-      .bb-send { border: none; background: ${accent}; color: #fff; width: 36px; height: 36px; border-radius: 9999px; cursor: pointer; font-size: 15px; flex-shrink: 0; }
-      .bb-send:disabled { opacity: .5; cursor: default; }
-      .bb-esc { padding: 12px 14px; background: #fff; border-top: 1px solid rgba(0,0,0,.07); display: none; flex-direction: column; gap: 8px; }
-      .bb-esc.open { display: flex; }
-      .bb-esc input, .bb-esc textarea { border: 1px solid rgba(0,0,0,.12); border-radius: 8px; padding: 8px 10px; font-size: 13px; outline: none; resize: none; }
-      .bb-esc button { border: none; background: ${accent}; color: #fff; border-radius: 8px; padding: 8px; font-size: 13px; cursor: pointer; }
-      .bb-esc-note { font-size: 12px; color: #047857; }
-    `;
+    style.textContent = this.css(accent, dir, sideRtlAware);
     this.root.appendChild(style);
     const rootEl = document.createElement("div");
-    rootEl.className = "bb-root";
+    rootEl.className = "bb";
     this.root.appendChild(rootEl);
+    const scrim = document.createElement("div");
+    scrim.className = "bb-scrim";
+    scrim.addEventListener("click", () => {
+      if (this.expanded) this.toggleExpand();
+      else this.close();
+    });
+    rootEl.appendChild(scrim);
     this.windowEl = document.createElement("div");
     this.windowEl.className = "bb-window";
     rootEl.appendChild(this.windowEl);
-    const name = this.settings.displayName || "Assistant";
     const header = document.createElement("div");
     header.className = "bb-header";
     const avatar = document.createElement("span");
@@ -187,7 +517,7 @@ var BrainerceBot = class _BrainerceBot {
       img.alt = "";
       avatar.appendChild(img);
     } else {
-      avatar.textContent = name.charAt(0).toUpperCase();
+      avatar.appendChild(document.createTextNode(name.charAt(0).toUpperCase()));
     }
     const headMain = document.createElement("span");
     headMain.className = "bb-head-main";
@@ -196,31 +526,24 @@ var BrainerceBot = class _BrainerceBot {
     nameEl.textContent = name;
     const statusEl = document.createElement("span");
     statusEl.className = "bb-status";
-    const dot = document.createElement("span");
-    dot.className = "bb-dot";
-    statusEl.appendChild(dot);
-    statusEl.appendChild(document.createTextNode(this.t("online")));
+    statusEl.textContent = this.t("online");
     headMain.appendChild(nameEl);
     headMain.appendChild(statusEl);
-    const escBtn = document.createElement("button");
-    escBtn.className = "bb-iconbtn";
-    escBtn.dataset.act = "esc";
-    escBtn.title = this.t("leaveMessage");
-    escBtn.textContent = "\u2709";
-    const closeBtn = document.createElement("button");
-    closeBtn.className = "bb-iconbtn";
-    closeBtn.dataset.act = "close";
-    closeBtn.title = this.t("close");
-    closeBtn.textContent = "\u2715";
+    const actions = document.createElement("span");
+    actions.className = "bb-actions";
+    const mode = this.settings.displayMode ?? "floating";
+    if (mode !== "full_screen" && this.settings.allowExpand !== false) {
+      this.expandBtn = this.iconButton("expand", this.t("expand"), () => this.toggleExpand());
+      actions.appendChild(this.expandBtn);
+    }
+    actions.appendChild(this.iconButton("mail", this.t("leaveMessage"), () => this.toggleEscalation()));
+    actions.appendChild(this.iconButton("close", this.t("close"), () => this.close()));
     header.appendChild(avatar);
     header.appendChild(headMain);
-    header.appendChild(escBtn);
-    header.appendChild(closeBtn);
+    header.appendChild(actions);
     this.windowEl.appendChild(header);
-    header.querySelector('[data-act="close"]')?.addEventListener("click", () => this.close());
-    header.querySelector('[data-act="esc"]')?.addEventListener("click", () => this.toggleEscalation());
     this.messagesEl = document.createElement("div");
-    this.messagesEl.className = "bb-messages";
+    this.messagesEl.className = "bb-msgs";
     this.windowEl.appendChild(this.messagesEl);
     this.chipsEl = document.createElement("div");
     this.chipsEl.className = "bb-chips";
@@ -234,6 +557,9 @@ var BrainerceBot = class _BrainerceBot {
     this.windowEl.appendChild(this.chipsEl);
     const esc = document.createElement("div");
     esc.className = "bb-esc";
+    const escTitle = document.createElement("span");
+    escTitle.className = "bb-esc-title";
+    escTitle.textContent = this.t("leaveMessage");
     const escEmail = document.createElement("input");
     escEmail.type = "email";
     escEmail.name = "email";
@@ -244,46 +570,86 @@ var BrainerceBot = class _BrainerceBot {
     escMsg.placeholder = this.t("yourMessage");
     const escSend = document.createElement("button");
     escSend.type = "button";
+    escSend.className = "bb-esc-send";
     escSend.textContent = this.t("send");
+    escSend.addEventListener("click", () => this.submitEscalation(esc));
+    esc.appendChild(escTitle);
     esc.appendChild(escEmail);
     esc.appendChild(escMsg);
     esc.appendChild(escSend);
-    esc.querySelector("button")?.addEventListener("click", () => this.submitEscalation(esc));
     this.windowEl.appendChild(esc);
-    const inputRow = document.createElement("div");
-    inputRow.className = "bb-inputrow";
-    this.inputEl = document.createElement("input");
+    const composer = document.createElement("div");
+    composer.className = "bb-composer";
+    this.inputEl = document.createElement("textarea");
     this.inputEl.className = "bb-input";
+    this.inputEl.rows = 1;
     this.inputEl.placeholder = this.t("placeholder");
     this.inputEl.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") this.send(this.inputEl?.value ?? "");
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        this.send(this.inputEl?.value ?? "");
+      }
     });
-    const sendBtn = document.createElement("button");
-    sendBtn.className = "bb-send";
-    sendBtn.textContent = "\u27A4";
-    sendBtn.addEventListener("click", () => this.send(this.inputEl?.value ?? ""));
-    inputRow.appendChild(this.inputEl);
-    inputRow.appendChild(sendBtn);
-    this.windowEl.appendChild(inputRow);
-    const launcher = document.createElement("button");
-    launcher.className = "bb-launcher";
-    launcher.setAttribute("aria-label", name);
+    this.inputEl.addEventListener("input", () => this.syncSendState());
+    this.sendBtn = document.createElement("button");
+    this.sendBtn.className = "bb-send";
+    this.sendBtn.disabled = true;
+    this.sendBtn.setAttribute("aria-label", this.t("send"));
+    this.sendBtn.appendChild(icon("send"));
+    this.sendBtn.addEventListener("click", () => this.send(this.inputEl?.value ?? ""));
+    composer.appendChild(this.inputEl);
+    composer.appendChild(this.sendBtn);
+    this.windowEl.appendChild(composer);
+    const foot = document.createElement("div");
+    foot.className = "bb-foot";
+    const credit = document.createElement("a");
+    credit.href = "https://brainerce.com";
+    credit.target = "_blank";
+    credit.rel = "noopener noreferrer";
+    credit.appendChild(icon("brand"));
+    credit.appendChild(document.createTextNode(this.t("poweredBy")));
+    foot.appendChild(credit);
+    this.windowEl.appendChild(foot);
+    this.launcherEl = document.createElement("button");
+    this.launcherEl.className = "bb-launcher";
+    this.launcherEl.setAttribute("aria-label", name);
     if (this.settings.avatarUrl && isSafeUrl(this.settings.avatarUrl)) {
       const img = document.createElement("img");
       img.src = this.settings.avatarUrl;
       img.alt = "";
-      launcher.appendChild(img);
+      this.launcherEl.appendChild(img);
     } else {
-      launcher.textContent = "\u{1F4AC}";
+      const chatIc = icon("chat");
+      chatIc.classList.add("bb-l-chat");
+      this.launcherEl.appendChild(chatIc);
     }
-    launcher.addEventListener("click", () => this.opened ? this.close() : this.open());
-    rootEl.appendChild(launcher);
+    const closeIc = icon("close");
+    closeIc.classList.add("bb-l-close");
+    this.launcherEl.appendChild(closeIc);
+    this.launcherEl.addEventListener("click", () => this.opened ? this.close() : this.open());
+    rootEl.appendChild(this.launcherEl);
     target.appendChild(this.host);
   }
+  iconButton(name, label, onClick) {
+    const btn = document.createElement("button");
+    btn.className = "bb-iconbtn";
+    btn.title = label;
+    btn.setAttribute("aria-label", label);
+    btn.appendChild(icon(name));
+    btn.addEventListener("click", onClick);
+    return btn;
+  }
+  syncSendState() {
+    if (this.sendBtn) this.sendBtn.disabled = !(this.inputEl?.value ?? "").trim() || this.busy;
+  }
   open() {
     if (!this.windowEl || this.opened) return;
     this.opened = true;
-    this.windowEl.classList.add("open");
+    const el = this.root?.querySelector(".bb");
+    el?.classList.add("open");
+    const takeover = (this.settings.displayMode ?? "floating") === "full_screen" || window.innerWidth <= 520;
+    el?.classList.toggle("big", takeover || this.expanded);
+    this.syncBodyScroll();
     if (this.messagesEl && this.messagesEl.childElementCount === 0) {
       void this.primeThread();
     }
@@ -291,7 +657,32 @@ var BrainerceBot = class _BrainerceBot {
   }
   close() {
     this.opened = false;
-    this.windowEl?.classList.remove("open");
+    const el = this.root?.querySelector(".bb");
+    el?.classList.remove("open");
+    if (!this.expanded) el?.classList.remove("big");
+    this.syncBodyScroll();
+  }
+  syncBodyScroll() {
+    const big = this.opened && !!this.root?.querySelector(".bb")?.classList.contains("big");
+    if (big && this.prevBodyOverflow === null) {
+      this.prevBodyOverflow = document.body.style.overflow || "";
+      document.body.style.overflow = "hidden";
+    } else if (!big && this.prevBodyOverflow !== null) {
+      document.body.style.overflow = this.prevBodyOverflow;
+      this.prevBodyOverflow = null;
+    }
+  }
+  toggleExpand() {
+    this.expanded = !this.expanded;
+    this.root?.querySelector(".bb")?.classList.toggle("expanded", this.expanded);
+    this.root?.querySelector(".bb")?.classList.toggle("big", this.expanded);
+    this.syncBodyScroll();
+    if (this.expandBtn) {
+      this.expandBtn.replaceChildren(icon(this.expanded ? "collapse" : "expand"));
+      const label = this.t(this.expanded ? "collapse" : "expand");
+      this.expandBtn.title = label;
+      this.expandBtn.setAttribute("aria-label", label);
+    }
   }
   /** First open: restore the server thread, or show the greeting. */
   async primeThread() {
@@ -304,7 +695,8 @@ var BrainerceBot = class _BrainerceBot {
         if (res.ok) {
           const data = await res.json();
           for (const m of data.data) {
-            this.appendMessage(m.role === "assistant" ? "bot" : "user", m.content);
+            const el = this.appendMessage(m.role === "assistant" ? "bot" : "user", "");
+            renderRich(el, m.content);
           }
           if (data.data.length > 0) {
             this.chipsEl?.remove();
@@ -318,7 +710,10 @@ var BrainerceBot = class _BrainerceBot {
       } catch {
       }
     }
-    if (this.settings.greeting) this.appendMessage("bot", this.settings.greeting);
+    if (this.settings.greeting) {
+      const el = this.appendMessage("bot", "");
+      renderRich(el, this.settings.greeting);
+    }
   }
   // --------------------------------------------------------------------------
   // The chat turn
@@ -328,9 +723,13 @@ var BrainerceBot = class _BrainerceBot {
     if (!message || this.busy) return;
     this.busy = true;
     if (this.inputEl) this.inputEl.value = "";
+    this.syncSendState();
     this.chipsEl?.remove();
     this.appendMessage("user", message);
     const typing = this.appendTyping();
+    this.pendingText = "";
+    this.cardsRow = null;
+    this.cardIds = /* @__PURE__ */ new Set();
     let botBubble = null;
     try {
       const res = await fetch(
@@ -371,11 +770,13 @@ var BrainerceBot = class _BrainerceBot {
           botBubble = this.handleFrame(frame, typing, botBubble);
         }
       }
+      if (botBubble && this.pendingText) renderRich(botBubble, this.pendingText);
     } catch {
       this.appendMessage("err", this.t("error"));
     } finally {
       typing.remove();
       this.busy = false;
+      this.syncSendState();
     }
   }
   handleFrame(frame, typing, botBubble) {
@@ -390,16 +791,20 @@ var BrainerceBot = class _BrainerceBot {
           typing.remove();
           botBubble = this.appendMessage("bot", "");
         }
-        botBubble.textContent = (botBubble.textContent ?? "") + frame.text;
+        this.pendingText += frame.text;
+        botBubble.textContent = this.pendingText;
         this.scrollDown();
         return botBubble;
       }
       case "tool":
-        typing.textContent = frame.status === "running" ? "\u22EF" : "";
+        typing.classList.toggle("searching", frame.status === "running");
         return botBubble;
       case "card":
         this.appendCard(frame.card);
         return botBubble;
+      case "action":
+        void this.handleAction(frame);
+        return botBubble;
       case "error":
         this.appendMessage("err", frame.message || this.t("error"));
         return botBubble;
@@ -409,7 +814,239 @@ var BrainerceBot = class _BrainerceBot {
     }
   }
   // --------------------------------------------------------------------------
-  // Escalation + attribution
+  // Product cards
+  // --------------------------------------------------------------------------
+  appendCard(card) {
+    if (!this.messagesEl) return;
+    if (this.cardIds.has(card.productId)) return;
+    this.cardIds.add(card.productId);
+    if (!this.cardsRow) {
+      const shelf = document.createElement("div");
+      shelf.className = "bb-shelf";
+      const cap = document.createElement("div");
+      cap.className = "bb-shelf-cap";
+      cap.textContent = this.t("results");
+      this.cardsRow = document.createElement("div");
+      this.cardsRow.className = "bb-cards";
+      shelf.appendChild(cap);
+      shelf.appendChild(this.cardsRow);
+      this.messagesEl.appendChild(shelf);
+    }
+    const safeHref = isSafeUrl(card.url) ? card.url : null;
+    const el = document.createElement("div");
+    el.className = "bb-card";
+    const goToProduct = () => {
+      this.beacon(card.botRef);
+      if (safeHref) window.location.href = safeHref;
+    };
+    const imgWrap = document.createElement("span");
+    imgWrap.className = "bb-card-img";
+    if (card.imageUrl && isSafeUrl(card.imageUrl)) {
+      const img = document.createElement("img");
+      img.src = card.imageUrl;
+      img.alt = "";
+      img.loading = "lazy";
+      imgWrap.appendChild(img);
+    } else {
+      imgWrap.appendChild(icon("cart"));
+    }
+    imgWrap.addEventListener("click", goToProduct);
+    el.appendChild(imgWrap);
+    const body = document.createElement("span");
+    body.className = "bb-card-body";
+    const title = document.createElement("span");
+    title.className = "bb-card-title";
+    title.textContent = card.title;
+    title.addEventListener("click", goToProduct);
+    const priceEl = document.createElement("span");
+    priceEl.className = "bb-card-price";
+    priceEl.textContent = card.price.formatted;
+    body.appendChild(title);
+    body.appendChild(priceEl);
+    const cta = document.createElement("span");
+    cta.className = "bb-card-cta";
+    if (card.requiresOptions) {
+      const cartBtn = document.createElement("button");
+      cartBtn.className = "bb-btn bb-btn-add";
+      cartBtn.setAttribute("aria-label", this.t("addToCart"));
+      cartBtn.appendChild(icon("cart"));
+      if (card.variants?.length) {
+        cartBtn.addEventListener("click", () => this.togglePicker(body, card, imgWrap));
+      } else {
+        cartBtn.addEventListener("click", goToProduct);
+      }
+      cta.appendChild(cartBtn);
+    } else {
+      const addBtn = document.createElement("button");
+      addBtn.className = "bb-btn bb-btn-add";
+      addBtn.appendChild(icon("cart"));
+      addBtn.appendChild(document.createTextNode(this.t("addToCart")));
+      addBtn.addEventListener("click", () => void this.addToCart(card, addBtn));
+      const viewBtn = document.createElement("button");
+      viewBtn.className = "bb-btn bb-btn-ghost";
+      viewBtn.appendChild(document.createTextNode(this.t("view")));
+      viewBtn.addEventListener("click", goToProduct);
+      cta.appendChild(addBtn);
+      cta.appendChild(viewBtn);
+    }
+    body.appendChild(cta);
+    el.appendChild(body);
+    this.cardsRow.appendChild(el);
+    this.scrollDown();
+  }
+  /**
+   * In-card variant picker: one chip-row per attribute; a complete selection
+   * resolves to a variantId and becomes a real add-to-cart. Variant image and
+   * price update live. Built entirely with createElement (no innerHTML).
+   */
+  togglePicker(body, card, imgWrap) {
+    const cardEl = body.parentElement;
+    const existing = body.querySelector(".bb-pick");
+    if (existing) {
+      existing.remove();
+      cardEl?.classList.remove("picking");
+      return;
+    }
+    cardEl?.classList.add("picking");
+    const variants = card.variants ?? [];
+    const keys = [];
+    for (const v of variants) {
+      for (const k of Object.keys(v.attributes)) if (!keys.includes(k)) keys.push(k);
+    }
+    const sel = {};
+    const pick = document.createElement("span");
+    pick.className = "bb-pick";
+    const resolved = () => variants.find((v) => keys.every((k) => sel[k] && v.attributes[k] === sel[k])) ?? null;
+    const render = () => {
+      pick.replaceChildren();
+      for (const key of keys) {
+        const label = document.createElement("span");
+        label.className = "bb-pick-key";
+        label.textContent = key;
+        const vals = document.createElement("span");
+        vals.className = "bb-pick-vals";
+        const seen = /* @__PURE__ */ new Set();
+        for (const v of variants) {
+          const val = v.attributes[key];
+          if (!val || seen.has(val)) continue;
+          seen.add(val);
+          const possible = variants.some(
+            (x) => x.attributes[key] === val && keys.every((k) => k === key || !sel[k] || x.attributes[k] === sel[k])
+          );
+          const chip = document.createElement("button");
+          chip.className = `bb-chipv${sel[key] === val ? " sel" : ""}${possible ? "" : " off"}`;
+          chip.textContent = val;
+          chip.addEventListener("click", () => {
+            if (sel[key] === val) delete sel[key];
+            else sel[key] = val;
+            render();
+          });
+          vals.appendChild(chip);
+        }
+        pick.appendChild(label);
+        pick.appendChild(vals);
+      }
+      const closeBtn = document.createElement("button");
+      closeBtn.className = "bb-pick-close";
+      closeBtn.setAttribute("aria-label", this.t("close"));
+      closeBtn.appendChild(icon("close"));
+      closeBtn.addEventListener("click", () => {
+        pick.remove();
+        cardEl?.classList.remove("picking");
+      });
+      pick.appendChild(closeBtn);
+      const match = resolved();
+      const foot = document.createElement("span");
+      foot.className = "bb-pick-foot";
+      const priceEl = document.createElement("span");
+      priceEl.className = "bb-pick-price";
+      priceEl.textContent = match ? match.price.formatted : "";
+      const addBtn = document.createElement("button");
+      addBtn.className = "bb-btn bb-btn-add";
+      addBtn.appendChild(icon("cart"));
+      addBtn.appendChild(document.createTextNode(this.t("addToCart")));
+      if (!match) addBtn.disabled = true;
+      addBtn.addEventListener("click", () => {
+        const m = resolved();
+        if (m) void this.addToCart(card, addBtn, m.id);
+      });
+      foot.appendChild(priceEl);
+      foot.appendChild(addBtn);
+      pick.appendChild(foot);
+      if (match?.imageUrl && isSafeUrl(match.imageUrl)) {
+        const img = imgWrap.querySelector("img");
+        if (img) img.src = match.imageUrl;
+      }
+      this.scrollDown();
+    };
+    render();
+    body.appendChild(pick);
+    this.scrollDown();
+  }
+  /**
+   * Add-to-cart resolution chain — must never be a dead button:
+   * 1. host `onAddToCart` option (scaffolded stores: syncs their cart UI)
+   * 2. cancelable `brainerce:bot:add-to-cart` CustomEvent (custom embeds)
+   * 3. fallback: navigate to the product page
+   */
+  async addToCart(card, btn, variantId) {
+    this.beacon(card.botRef);
+    btn.dataset.state = "busy";
+    const handled = await this.dispatchAdd(card.productId, variantId ?? null);
+    if (handled) {
+      btn.dataset.state = "done";
+      btn.replaceChildren(icon("check"), document.createTextNode(this.t("added")));
+      setTimeout(() => {
+        if (!this.destroyed && btn.isConnected) {
+          delete btn.dataset.state;
+          btn.replaceChildren(icon("cart"), document.createTextNode(this.t("addToCart")));
+        }
+      }, 2200);
+    } else {
+      delete btn.dataset.state;
+      if (isSafeUrl(card.url)) window.location.href = card.url;
+    }
+  }
+  /**
+   * The host-cart chain shared by card buttons and bot-initiated actions:
+   * onAddToCart option -> cancelable CustomEvent. Returns whether a host
+   * took the add.
+   */
+  async dispatchAdd(productId, variantId) {
+    try {
+      if (this.onAddToCart) {
+        return await this.onAddToCart({ productId, variantId, quantity: 1 }) !== false;
+      }
+      const ev = new CustomEvent("brainerce:bot:add-to-cart", {
+        detail: { productId, variantId, quantity: 1, connectionId: this.connectionId },
+        cancelable: true,
+        bubbles: true,
+        composed: true
+      });
+      return !window.dispatchEvent(ev);
+    } catch {
+      return false;
+    }
+  }
+  /** Bot-initiated widget actions (the model called the addToCart tool). */
+  async handleAction(frame) {
+    if (frame.action !== "add_to_cart") return;
+    if (frame.botRef) this.beacon(frame.botRef);
+    const ok = await this.dispatchAdd(frame.productId, frame.variantId);
+    if (!ok) this.appendMessage("err", this.t("addFailed"));
+  }
+  /** The durable conversion signal — fire-and-forget, never blocks. */
+  beacon(botRef) {
+    try {
+      navigator.sendBeacon?.(
+        `${this.baseUrl}/api/storefront-bot/attribution/click`,
+        new Blob([JSON.stringify({ botRef })], { type: "application/json" })
+      );
+    } catch {
+    }
+  }
+  // --------------------------------------------------------------------------
+  // Escalation
   // --------------------------------------------------------------------------
   toggleEscalation() {
     this.root?.querySelector(".bb-esc")?.classList.toggle("open");
@@ -436,50 +1073,18 @@ var BrainerceBot = class _BrainerceBot {
       if (res.ok) {
         const note = document.createElement("span");
         note.className = "bb-esc-note";
-        note.textContent = this.t("sent");
+        note.appendChild(icon("check"));
+        note.appendChild(document.createTextNode(this.t("sent")));
         form.replaceChildren(note);
       }
     } catch {
     }
   }
-  appendCard(card) {
-    if (!this.messagesEl) return;
-    const a = document.createElement("a");
-    a.className = "bb-card";
-    a.href = isSafeUrl(card.url) ? card.url : "#";
-    if (card.imageUrl && isSafeUrl(card.imageUrl)) {
-      const img = document.createElement("img");
-      img.src = card.imageUrl;
-      img.alt = "";
-      a.appendChild(img);
-    }
-    const body = document.createElement("span");
-    body.className = "bb-card-body";
-    const title = document.createElement("p");
-    title.className = "bb-card-title";
-    title.textContent = card.title;
-    const priceEl = document.createElement("span");
-    priceEl.className = "bb-card-price";
-    priceEl.textContent = card.price.formatted;
-    body.appendChild(title);
-    body.appendChild(priceEl);
-    a.appendChild(body);
-    a.addEventListener("click", () => {
-      try {
-        navigator.sendBeacon?.(
-          `${this.baseUrl}/api/storefront-bot/attribution/click`,
-          new Blob([JSON.stringify({ botRef: card.botRef })], { type: "application/json" })
-        );
-      } catch {
-      }
-    });
-    this.messagesEl.appendChild(a);
-    this.scrollDown();
-  }
   // --------------------------------------------------------------------------
   appendMessage(kind, text) {
     const el = document.createElement("div");
     el.className = `bb-msg ${kind}`;
+    el.setAttribute("dir", "auto");
     el.textContent = text;
     this.messagesEl?.appendChild(el);
     this.scrollDown();
@@ -488,7 +1093,14 @@ var BrainerceBot = class _BrainerceBot {
   appendTyping() {
     const el = document.createElement("div");
     el.className = "bb-typing";
-    el.textContent = "\u22EF";
+    const dots = document.createElement("span");
+    dots.className = "bb-dots";
+    for (let i = 0; i < 3; i++) dots.appendChild(document.createElement("i"));
+    const tool = document.createElement("span");
+    tool.className = "bb-tool";
+    tool.textContent = this.t("searching");
+    el.appendChild(dots);
+    el.appendChild(tool);
     this.messagesEl?.appendChild(el);
     this.scrollDown();
     return el;
@@ -497,9 +1109,6 @@ var BrainerceBot = class _BrainerceBot {
     if (this.messagesEl) this.messagesEl.scrollTop = this.messagesEl.scrollHeight;
   }
 };
-function isSafeUrl(url) {
-  return /^\/(?!\/)/.test(url) || /^https?:\/\//i.test(url);
-}
 export {
   BrainerceBot
 };