ttp-agent-sdk 2.45.7 → 2.45.14

package/dist/agent-widget.dev.js

@@ -10641,7 +10641,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   CLIENT_TOOLS_PARTNER_ID: () => (/* binding */ CLIENT_TOOLS_PARTNER_ID),
 /* harmony export */   ClientScriptManager: () => (/* binding */ ClientScriptManager)
 /* harmony export */ });
-/* harmony import */ var _ecommerce_PartnerScriptRunner_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../ecommerce/PartnerScriptRunner.js */ "./src/ecommerce/PartnerScriptRunner.js");
+/* harmony import */ var _ClientToolsRegistry_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ClientToolsRegistry.js */ "./src/core/ClientToolsRegistry.js");
+/* harmony import */ var _ecommerce_PartnerScriptRunner_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../ecommerce/PartnerScriptRunner.js */ "./src/ecommerce/PartnerScriptRunner.js");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -10688,11 +10689,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 
+
 /** Reserved partner id for the flavor-independent client-tool bundle. */
 var CLIENT_TOOLS_PARTNER_ID = '__client_tools__';
-
-/** Mirror of ClientToolsRegistry.MAX_RESULT_SIZE — 50KB cap on result payloads. */
-var MAX_RESULT_SIZE = 50000;
+var MAX_RESULT_SIZE = _ClientToolsRegistry_js__WEBPACK_IMPORTED_MODULE_0__["default"].MAX_RESULT_SIZE;
 var LOG = '[ClientScriptManager]';
 var ClientScriptManager = /*#__PURE__*/function () {
   /**
@@ -10711,7 +10711,7 @@ var ClientScriptManager = /*#__PURE__*/function () {
     _classCallCheck(this, ClientScriptManager);
     this._send = typeof send === 'function' ? send : function () {};
     this._label = label;
-    this.runner = new _ecommerce_PartnerScriptRunner_js__WEBPACK_IMPORTED_MODULE_0__.PartnerScriptRunner({
+    this.runner = new _ecommerce_PartnerScriptRunner_js__WEBPACK_IMPORTED_MODULE_1__.PartnerScriptRunner({
       genericCtx: true
     });
     // Unsolicited adapter pushes (ctx.emit) go back over the same channel.
@@ -10735,7 +10735,7 @@ var ClientScriptManager = /*#__PURE__*/function () {
      * {@link isClientToolsToolCall}) against the client-tool runner and answer
      * with the standard `client_tool_result` / `client_tool_error` envelopes —
      * the exact shapes ClientToolsRegistry sends, since the backend awaits the
-     * reply keyed by `toolCallId`. Enforces the 50KB result cap.
+     * reply keyed by `toolCallId`. Enforces the result-size cap ({@link ClientToolsRegistry.MAX_RESULT_SIZE}).
      *
      * @param {object} message  { toolCallId, toolName, parameters:{ action, args, partner_id } }
      * @param {string|null} conversationId  the SDK's current conversation id
@@ -10875,7 +10875,7 @@ var ClientScriptManager = /*#__PURE__*/function () {
     /**
      * Execute a `run_partner_script` envelope against the client-tool runner and
      * post the `run_partner_script_result` back over the channel. Enforces the
-     * 50KB result-size cap (oversize → ok:false, error:'RESULT_TOO_LARGE').
+     * result-size cap (mirror ClientToolsRegistry.MAX_RESULT_SIZE).
      *
      * An unknown action (e.g. bundle not yet received) resolves to ok:false with
      * the runner's `adapter_not_in_bundle` reason — same behavior as the existing
@@ -10908,7 +10908,7 @@ var ClientScriptManager = /*#__PURE__*/function () {
             case 3:
               result = _context2.v;
               elapsedMs = Date.now() - startedAt;
-              ok = result && _typeof(result) === 'object' && 'ok' in result ? !!result.ok : true; // 50KB result-size cap (mirror ClientToolsRegistry.MAX_RESULT_SIZE).
+              ok = result && _typeof(result) === 'object' && 'ok' in result ? !!result.ok : true; // Result-size cap (mirror ClientToolsRegistry.MAX_RESULT_SIZE).
               serializedSize = 0;
               try {
                 serializedSize = JSON.stringify(result).length;
@@ -11045,7 +11045,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * the registered handler and sends back the result or error.
  */
 var ClientToolsRegistry = /*#__PURE__*/function () {
-  // 500KB for results containing images (base64)
+  // ~500KB cap on all client_tool_result payloads
 
   function ClientToolsRegistry(sendMessage) {
     var getConversationId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
@@ -11205,10 +11205,7 @@ var ClientToolsRegistry = /*#__PURE__*/function () {
     value: function sendResult(toolCallId, toolName, result, executionTimeMs) {
       var conversationId = this.getConversationId();
       var timestamp = new Date().toISOString();
-
-      // Size validation — images (base64) get a higher limit than text-only results
-      var hasImage = result && _typeof(result) === 'object' && result.image && result.mimeType;
-      var maxSize = hasImage ? ClientToolsRegistry.MAX_IMAGE_RESULT_SIZE : ClientToolsRegistry.MAX_RESULT_SIZE;
+      var maxSize = ClientToolsRegistry.MAX_RESULT_SIZE;
       var serializedSize = 0;
       try {
         serializedSize = JSON.stringify(result).length;
@@ -11218,7 +11215,9 @@ var ClientToolsRegistry = /*#__PURE__*/function () {
       if (serializedSize > maxSize) {
         var sizeKB = Math.round(serializedSize / 1024);
         var limitKB = Math.round(maxSize / 1024);
-        console.error("\uD83D\uDD27 ClientTools: Result for '".concat(toolName, "' exceeds size limit (").concat(sizeKB, "KB > ").concat(limitKB, "KB)"));
+        var productCount = result && Array.isArray(result.products) ? result.products.length : null;
+        var detail = productCount != null ? " (".concat(productCount, " products in payload \u2014 trim search.api rows or raise cap)") : '';
+        console.error("\uD83D\uDD27 ClientTools: Result for '".concat(toolName, "' exceeds size limit (").concat(sizeKB, "KB > ").concat(limitKB, "KB)").concat(detail), (result === null || result === void 0 ? void 0 : result.reason) || (result === null || result === void 0 ? void 0 : result.error) || '');
         this.sendError(toolCallId, toolName, "Result too large: ".concat(sizeKB, "KB exceeds ").concat(limitKB, "KB limit"), 'RESULT_TOO_LARGE', executionTimeMs);
         return;
       }
@@ -11278,9 +11277,7 @@ var ClientToolsRegistry = /*#__PURE__*/function () {
     }
   }]);
 }();
-_defineProperty(ClientToolsRegistry, "MAX_RESULT_SIZE", 50000);
-// 50KB for text-only results
-_defineProperty(ClientToolsRegistry, "MAX_IMAGE_RESULT_SIZE", 512000);
+_defineProperty(ClientToolsRegistry, "MAX_RESULT_SIZE", 512000);
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ClientToolsRegistry);
 
 /***/ }),
@@ -11947,7 +11944,7 @@ var TextChatSDK = /*#__PURE__*/function (_EventEmitter) {
 
       // SDK build time for debugging
       if (true) {
-        helloMessage.lastBuildTime = "2026-06-14T07:18:03.004Z";
+        helloMessage.lastBuildTime = "2026-06-29T06:35:24.857Z";
       }
       try {
         this.ws.send(JSON.stringify(helloMessage));
@@ -13564,6 +13561,7 @@ var EcommerceVoiceStrip = /*#__PURE__*/function () {
     this.onTogglePause = opts.onTogglePause || function () {};
     this.onToggleSpeaker = opts.onToggleSpeaker || function () {};
     this.onSendText = opts.onSendText || function () {};
+    this.onAbout = typeof opts.onAbout === 'function' ? opts.onAbout : null;
     this._kbdOpen = false;
     this._el = null;
     this._build();
@@ -13651,11 +13649,8 @@ var EcommerceVoiceStrip = /*#__PURE__*/function () {
   }, {
     key: "_footerHtml",
     value: function _footerHtml() {
-      if (!this.footer) return '';
-      var _this$footer = this.footer,
-        brandUrl = _this$footer.brandUrl,
-        brandName = _this$footer.brandName;
-      return "\n        <div id=\"ttp-ecom-footer\" class=\"ttp-ecom-footer\">\n          <span>Powered by <a href=\"".concat(brandUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\"><b>").concat(brandName, "</b></a></span>\n        </div>");
+      var brand = this.footer ? "<span>Powered by <a href=\"".concat(this.footer.brandUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\"><b>").concat(this.footer.brandName, "</b></a></span>") : '';
+      return "\n        <div id=\"ttp-ecom-footer\" class=\"ttp-ecom-footer\">\n          ".concat(brand, "\n          <button type=\"button\" class=\"ttp-ecom-info-btn\" id=\"ttp-ecom-btn-info\" title=\"About\" aria-label=\"About\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"9\"/>\n              <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"16\"/>\n              <circle cx=\"12\" cy=\"7.7\" r=\"1.05\" fill=\"currentColor\" stroke=\"none\"/>\n            </svg>\n          </button>\n        </div>");
     }
   }, {
     key: "_wireEvents",
@@ -13684,6 +13679,12 @@ var EcommerceVoiceStrip = /*#__PURE__*/function () {
           return $('ttp-ecom-input').focus();
         }, 50);
       });
+      var infoBtn = $('ttp-ecom-btn-info');
+      if (infoBtn) {
+        infoBtn.addEventListener('click', function () {
+          if (_this.onAbout) _this.onAbout();
+        });
+      }
       $('ttp-ecom-btn-end').addEventListener('click', function () {
         return _this.onHangup();
       });
@@ -13703,11 +13704,16 @@ var EcommerceVoiceStrip = /*#__PURE__*/function () {
   }, {
     key: "show",
     value: function show() {
+      var _this2 = this;
       var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       if (!this._el) return;
       if (opts.reset !== false) this._reset();
       this._el.style.display = '';
       this.syncFromVoice();
+      // Now that the strip has real dimensions, clamp any restored drag position.
+      if (this._dragEnabled) requestAnimationFrame(function () {
+        return _this2.reclampDrag();
+      });
     }
   }, {
     key: "hide",
@@ -13839,6 +13845,177 @@ var EcommerceVoiceStrip = /*#__PURE__*/function () {
       if (!this.getVoiceUiState) return;
       this.syncFromVoice();
     }
+
+    /**
+     * Make the strip draggable by its body. The wrapper is centered with
+     * `translateX(-50%)`; a drag offset is layered on top of that. Control buttons
+     * and the text input don't start a drag. Position is clamped to the viewport
+     * (re-clamped on show/resize) and optionally persisted under `storageKey`.
+     *
+     * @param {Object} opts
+     * @param {boolean} [opts.persist=true]
+     * @param {string}  [opts.storageKey]
+     */
+  }, {
+    key: "enableDrag",
+    value: function enableDrag() {
+      var _this3 = this;
+      var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      if (!this._el || this._dragEnabled) return;
+      var wrapper = this._el; // fixed, centered via translateX(-50%)
+      var handle = wrapper.querySelector('#ttp-ecom-strip');
+      if (!handle) return;
+      this._dragEnabled = true;
+      this._dragPersist = opts.persist !== false;
+      this._dragKey = opts.storageKey || '';
+      this._dragOffset = {
+        x: 0,
+        y: 0
+      };
+      handle.style.setProperty('cursor', 'move');
+      handle.style.setProperty('touch-action', 'none');
+      var EXCLUDE = 'button, a, input, textarea, select, [contenteditable]';
+      var THRESHOLD = 5;
+      var startX = 0,
+        startY = 0,
+        baseX = 0,
+        baseY = 0,
+        baseRect = null;
+      var dragging = false,
+        moved = false;
+      var onMove = function onMove(e) {
+        var dx = e.clientX - startX,
+          dy = e.clientY - startY;
+        if (!moved && Math.hypot(dx, dy) < THRESHOLD) return;
+        moved = true;
+        _this3._dragOffset = _this3._clampDragOffset(baseX + dx, baseY + dy, baseRect);
+        _this3._applyDragOffset();
+      };
+      var _onUp = function onUp(e) {
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', _onUp);
+        handle.style.setProperty('cursor', 'move');
+        try {
+          handle.releasePointerCapture(e.pointerId);
+        } catch (err) {/* not captured */}
+        dragging = false;
+        if (moved && _this3._dragPersist && _this3._dragKey) {
+          try {
+            window.localStorage.setItem(_this3._dragKey, JSON.stringify(_this3._dragOffset));
+          } catch (err) {/* unavailable */}
+        }
+      };
+      var onDown = function onDown(e) {
+        if (e.button != null && e.button !== 0) return; // primary / touch / pen only
+        if (dragging) return;
+        if (e.target && e.target.closest && e.target.closest(EXCLUDE)) return;
+        dragging = true;
+        moved = false;
+        startX = e.clientX;
+        startY = e.clientY;
+        baseX = _this3._dragOffset.x;
+        baseY = _this3._dragOffset.y;
+        baseRect = _this3._dragBaseRect();
+        handle.style.setProperty('cursor', 'grabbing');
+        try {
+          handle.setPointerCapture(e.pointerId);
+        } catch (err) {/* unsupported */}
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', _onUp);
+      };
+      handle.addEventListener('pointerdown', onDown);
+
+      // Restore saved offset (unclamped here — the strip is hidden until show(),
+      // where it gets clamped against real dimensions).
+      if (this._dragPersist && this._dragKey) {
+        try {
+          var saved = JSON.parse(window.localStorage.getItem(this._dragKey) || 'null');
+          if (saved && typeof saved.x === 'number' && typeof saved.y === 'number') {
+            this._dragOffset = {
+              x: saved.x,
+              y: saved.y
+            };
+            this._applyDragOffset();
+          }
+        } catch (err) {/* ignore corrupt storage */}
+      }
+    }
+
+    /**
+     * Base (offset-0) viewport rect used for clamping. Measures the *visible* inner
+     * strip (`#ttp-ecom-strip`), not the wrapper: the wrapper is fixed at `bottom:0`
+     * with bottom padding (incl. safe-area inset), so its bottom edge hugs the
+     * viewport bottom and would wrongly forbid any downward drag. The drag offset is
+     * applied to the wrapper, but both elements move together by the same amount, so
+     * the inner strip's offset-0 rect is just its current rect minus the offset.
+     */
+  }, {
+    key: "_dragBaseRect",
+    value: function _dragBaseRect() {
+      var o = this._dragOffset || {
+        x: 0,
+        y: 0
+      };
+      var inner = this._el && this._el.querySelector('#ttp-ecom-strip') || this._el;
+      var r = inner.getBoundingClientRect();
+      return {
+        left: r.left - o.x,
+        top: r.top - o.y,
+        right: r.right - o.x,
+        bottom: r.bottom - o.y
+      };
+    }
+
+    /**
+     * Clamp a drag offset so the strip stays within the viewport. An 8px margin is
+     * kept on the top/left/right edges. The bottom is allowed to drag *past* the
+     * viewport edge so the strip can be tucked partly off-screen — but at least
+     * `MIN_VISIBLE` (10px) of its top stays on screen so it can always be grabbed
+     * and dragged back up.
+     */
+  }, {
+    key: "_clampDragOffset",
+    value: function _clampDragOffset(x, y, base) {
+      if (!base) return {
+        x: x,
+        y: y
+      };
+      var margin = 8;
+      var MIN_VISIBLE = 10;
+      var minX = margin - base.left,
+        maxX = window.innerWidth - margin - base.right;
+      var minY = margin - base.top,
+        maxY = window.innerHeight - MIN_VISIBLE - base.top;
+      if (minX > maxX) maxX = minX;
+      if (minY > maxY) maxY = minY;
+      return {
+        x: Math.min(Math.max(x, minX), maxX),
+        y: Math.min(Math.max(y, minY), maxY)
+      };
+    }
+
+    /** Apply the drag offset on top of the centering transform. */
+  }, {
+    key: "_applyDragOffset",
+    value: function _applyDragOffset() {
+      if (!this._el) return;
+      var o = this._dragOffset || {
+        x: 0,
+        y: 0
+      };
+      this._el.style.setProperty('transform', "translateX(-50%) translate(".concat(o.x, "px, ").concat(o.y, "px)"), 'important');
+    }
+
+    /** Re-clamp the dragged strip to the current viewport (on show / resize). */
+  }, {
+    key: "reclampDrag",
+    value: function reclampDrag() {
+      if (!this._dragEnabled || !this._el) return;
+      var r = this._el.getBoundingClientRect();
+      if (!r.width && !r.height) return; // hidden — nothing to clamp yet
+      this._dragOffset = this._clampDragOffset(this._dragOffset.x, this._dragOffset.y, this._dragBaseRect());
+      this._applyDragOffset();
+    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -13850,12 +14027,12 @@ var EcommerceVoiceStrip = /*#__PURE__*/function () {
   }, {
     key: "_reset",
     value: function _reset() {
-      var _this2 = this,
+      var _this4 = this,
         _$,
         _$2;
       this._kbdOpen = false;
       var $ = function $(id) {
-        return _this2._el.querySelector('#' + id);
+        return _this4._el.querySelector('#' + id);
       };
       var tx = $('ttp-ecom-transcript');
       if (tx) {
@@ -13898,7 +14075,7 @@ var EcommerceVoiceStrip = /*#__PURE__*/function () {
     }
   }]);
 }();
-EcommerceVoiceStrip._CSS = "\n#ttp-ecom-strip-wrapper {\n  position: fixed;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n  width: min(720px, calc(100vw - 40px));\n  max-width: calc(100vw - 40px);\n  z-index: 2147483647;\n  box-sizing: border-box;\n  padding: 0 14px max(14px, env(safe-area-inset-bottom, 0px));\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  font-feature-settings: \"kern\" 1, \"liga\" 1;\n  pointer-events: none;\n}\n#ttp-ecom-strip-wrapper * { box-sizing: border-box; }\n\n/* Layered glass dock: rim light, soft lift, optional backdrop tint */\n#ttp-ecom-strip {\n  pointer-events: auto;\n  position: relative;\n  isolation: isolate;\n  margin: 0;\n  border-radius: 26px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n  background: var(--ecom-strip-bg, linear-gradient(145deg, #5b21b6 0%, #3730a3 42%, #1e1b4b 100%));\n  background-clip: padding-box;\n  color: var(--ecom-fg, #ffffff);\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.18) inset,\n    0 1px 0 rgba(255, 255, 255, 0.14) inset,\n    0 -20px 40px -8px rgba(0, 0, 0, 0.22) inset,\n    0 12px 32px rgba(0, 0, 0, 0.22),\n    0 28px 56px -16px rgba(0, 0, 0, 0.45),\n    0 0 80px -20px rgba(99, 102, 241, 0.35);\n  overflow: visible;\n}\n\n#ttp-ecom-strip::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  z-index: 0;\n  background: linear-gradient(\n    165deg,\n    rgba(255, 255, 255, 0.08) 0%,\n    rgba(255, 255, 255, 0) 42%,\n    rgba(0, 0, 0, 0.12) 100%\n  );\n}\n\n/* LIVE chip \u2014 glass capsule (backdrop blur), straddles top edge */\n#ttp-ecom-live-edge {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  transform: translate(-50%, -50%);\n  z-index: 4;\n  max-width: calc(100% - 52px);\n  pointer-events: none;\n  padding: 3px 14px 4px;\n  border-radius: 999px;\n  background: rgba(8, 6, 24, 0.78);\n  border: 1px solid rgba(255, 255, 255, 0.28);\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.35),\n    0 4px 16px rgba(0, 0, 0, 0.35),\n    inset 0 1px 0 rgba(255, 255, 255, 0.12);\n}\n@supports (backdrop-filter: blur(1px)) {\n  #ttp-ecom-live-edge {\n    backdrop-filter: blur(14px) saturate(180%);\n    -webkit-backdrop-filter: blur(14px) saturate(180%);\n  }\n}\n\n#ttp-ecom-main-row {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 18px 16px 12px;\n  min-height: 48px;\n}\n\n#ttp-ecom-footer {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 16px 10px;\n  margin-top: -4px;\n  border-top: 1px solid rgba(255, 255, 255, 0.06);\n  padding-top: 6px;\n}\n#ttp-ecom-footer span {\n  font-size: 10px;\n  color: rgba(255, 255, 255, 0.35);\n  white-space: nowrap;\n}\n#ttp-ecom-footer a {\n  color: rgba(167, 139, 250, 0.95);\n  text-decoration: none;\n  font-weight: 600;\n}\n#ttp-ecom-footer a:hover { opacity: 0.85; }\n#ttp-ecom-footer a b { font-weight: 700; }\n\n#ttp-ecom-left-controls,\n#ttp-ecom-right-cluster {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  flex-shrink: 0;\n}\n\n/* Inset \u201Cmeter bridge\u201D for transcript \u2014 keeps one-line layout, adds depth */\n#ttp-ecom-center {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  text-align: start;\n  padding: 7px 12px 7px 14px;\n  border-radius: 16px;\n  background: rgba(0, 0, 0, 0.16);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.07),\n    inset 0 -1px 0 rgba(0, 0, 0, 0.12);\n}\n\n#ttp-ecom-live-row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: 0;\n}\n\n#ttp-ecom-live-label {\n  font-size: 9px;\n  font-weight: 800;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--ecom-accent, #4ade80);\n  opacity: 0.98;\n  white-space: nowrap;\n}\n\n#ttp-ecom-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--ecom-accent, #4ade80);\n  flex-shrink: 0;\n  box-shadow: 0 0 14px rgba(74, 222, 128, 0.45);\n  animation: ttp-ecom-blink 1.35s ease-in-out infinite;\n}\n#ttp-ecom-dot.paused {\n  animation: none;\n  opacity: 0.45;\n  background: rgba(255,255,255,0.35);\n  box-shadow: none;\n}\n@keyframes ttp-ecom-blink {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.25; transform: scale(0.92); }\n}\n\n#ttp-ecom-transcript {\n  font-size: 12px;\n  line-height: 1.42;\n  letter-spacing: 0.015em;\n  color: rgba(255, 255, 255, 0.94);\n  width: 100%;\n  max-width: 100%;\n  overflow: hidden;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n#ttp-ecom-transcript.ttp-ecom-transcript--user {\n  color: rgba(255, 244, 214, 0.98);\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  text-shadow: 0 0 28px rgba(251, 191, 36, 0.22);\n}\n\n/* Squircle glass controls */\n#ttp-ecom-strip .ttp-ecom-ctrl {\n  width: 36px;\n  height: 36px;\n  border-radius: 12px;\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  background: linear-gradient(165deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 100%);\n  color: rgba(255, 255, 255, 0.92);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.18),\n    0 2px 8px rgba(0, 0, 0, 0.15);\n  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.14s ease;\n  outline: none;\n}\n#ttp-ecom-strip .ttp-ecom-ctrl:hover {\n  background: linear-gradient(165deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 100%);\n  border-color: rgba(255, 255, 255, 0.32);\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.22),\n    0 4px 14px rgba(0, 0, 0, 0.2);\n}\n#ttp-ecom-strip .ttp-ecom-ctrl:active { transform: scale(0.94); }\n#ttp-ecom-strip .ttp-ecom-ctrl:focus-visible {\n  outline: 2px solid rgba(165, 180, 252, 0.95);\n  outline-offset: 2px;\n}\n#ttp-ecom-strip .ttp-ecom-ctrl-active {\n  background: linear-gradient(165deg, rgba(129, 140, 248, 0.45) 0%, rgba(99, 102, 241, 0.28) 100%) !important;\n  border-color: rgba(196, 181, 253, 0.65) !important;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.2),\n    0 0 0 1px rgba(99, 102, 241, 0.35),\n    0 6px 18px rgba(79, 70, 229, 0.35) !important;\n}\n#ttp-ecom-strip .ttp-ecom-ctrl-warn {\n  background: linear-gradient(165deg, rgba(252, 165, 165, 0.22) 0%, rgba(239, 68, 68, 0.2) 100%) !important;\n  border-color: rgba(252, 165, 165, 0.55) !important;\n}\n\n#ttp-ecom-strip .ttp-ecom-ctrl-end {\n  width: 40px;\n  height: 40px;\n  border-radius: 14px;\n  background: linear-gradient(165deg, #fb7185 0%, var(--ecom-end, #ef4444) 52%, #991b1b 100%) !important;\n  border: none !important;\n  color: #fff !important;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.25),\n    0 0 0 2px rgba(0, 0, 0, 0.12),\n    0 6px 22px rgba(239, 68, 68, 0.48);\n  transform: rotate(135deg);\n  transition: filter 0.18s ease, transform 0.14s ease, box-shadow 0.2s ease;\n}\n#ttp-ecom-strip .ttp-ecom-ctrl-end:hover {\n  filter: brightness(1.06);\n  transform: rotate(135deg) scale(1.05);\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.28),\n    0 0 0 2px rgba(0, 0, 0, 0.12),\n    0 10px 28px rgba(239, 68, 68, 0.52);\n}\n#ttp-ecom-strip .ttp-ecom-ctrl-end:active {\n  transform: rotate(135deg) scale(0.94);\n}\n\n/* Mini waveform */\n#ttp-ecom-strip .ttp-ecom-mini-wave {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  height: 24px;\n  padding: 0 4px;\n  opacity: 0.9;\n}\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb {\n  width: 3px;\n  border-radius: 3px;\n  background: linear-gradient(180deg, #ddd6fe 0%, var(--ecom-accent, #a78bfa) 100%);\n  animation: ttp-ecom-wa 0.78s ease-in-out infinite;\n}\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(1) { height: 6px; animation-delay: 0s; }\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(2) { height: 11px; animation-delay: 0.1s; }\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(3) { height: 16px; animation-delay: 0.2s; }\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(4) { height: 9px; animation-delay: 0.15s; }\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(5) { height: 12px; animation-delay: 0.05s; }\n@keyframes ttp-ecom-wa {\n  0%, 100% { transform: scaleY(0.38); opacity: 0.5; }\n  50% { transform: scaleY(1); opacity: 1; }\n}\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb.paused {\n  animation-play-state: paused;\n  transform: scaleY(0.32);\n  opacity: 0.28;\n}\n\n/* Input row */\n#ttp-ecom-input-row {\n  display: none;\n  position: relative;\n  z-index: 1;\n  align-items: center;\n  gap: 10px;\n  padding: 0 14px 12px;\n  margin-top: -2px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n#ttp-ecom-input-row.open {\n  display: flex;\n}\n#ttp-ecom-input {\n  flex: 1;\n  height: 40px;\n  border-radius: 12px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n  background: rgba(0, 0, 0, 0.22);\n  color: #fff;\n  font-size: 14px;\n  padding: 0 14px;\n  outline: none;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  transition: border-color 0.18s ease, box-shadow 0.18s ease;\n}\n#ttp-ecom-input::placeholder { color: rgba(255, 255, 255, 0.42); }\n#ttp-ecom-input:focus {\n  border-color: rgba(165, 180, 252, 0.65);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.2),\n    0 0 0 3px rgba(99, 102, 241, 0.25);\n}\n\n#ttp-ecom-strip .ttp-ecom-send {\n  width: 36px;\n  height: 36px;\n  border-radius: 12px;\n  border: none;\n  background: linear-gradient(165deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.1) 100%);\n  color: #fff;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);\n  transition: background 0.18s ease, transform 0.12s ease;\n}\n#ttp-ecom-strip .ttp-ecom-send:hover {\n  background: linear-gradient(165deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.14) 100%);\n}\n#ttp-ecom-strip .ttp-ecom-send:active { transform: scale(0.94); }\n\n@media (max-width: 520px) {\n  #ttp-ecom-strip .ttp-ecom-mini-wave { display: none; }\n  #ttp-ecom-main-row { gap: 7px; padding: 16px 12px 10px; }\n  #ttp-ecom-strip .ttp-ecom-ctrl { width: 36px; height: 36px; }\n  #ttp-ecom-strip .ttp-ecom-ctrl-end { width: 40px; height: 40px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #ttp-ecom-dot { animation: none; opacity: 0.9; }\n  #ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb { animation: none; opacity: 0.65; }\n}\n";
+EcommerceVoiceStrip._CSS = "\n#ttp-ecom-strip-wrapper {\n  position: fixed;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n  width: min(720px, calc(100vw - 40px));\n  max-width: calc(100vw - 40px);\n  z-index: 2147483647;\n  box-sizing: border-box;\n  padding: 0 14px max(14px, env(safe-area-inset-bottom, 0px));\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  font-feature-settings: \"kern\" 1, \"liga\" 1;\n  pointer-events: none;\n}\n#ttp-ecom-strip-wrapper * { box-sizing: border-box; }\n\n/* Layered glass dock: rim light, soft lift, optional backdrop tint */\n#ttp-ecom-strip {\n  pointer-events: auto;\n  position: relative;\n  isolation: isolate;\n  margin: 0;\n  border-radius: 26px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n  background: var(--ecom-strip-bg, linear-gradient(145deg, #5b21b6 0%, #3730a3 42%, #1e1b4b 100%));\n  background-clip: padding-box;\n  color: var(--ecom-fg, #ffffff);\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.18) inset,\n    0 1px 0 rgba(255, 255, 255, 0.14) inset,\n    0 -20px 40px -8px rgba(0, 0, 0, 0.22) inset,\n    0 12px 32px rgba(0, 0, 0, 0.22),\n    0 28px 56px -16px rgba(0, 0, 0, 0.45),\n    0 0 80px -20px rgba(99, 102, 241, 0.35);\n  overflow: visible;\n}\n\n#ttp-ecom-strip::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  z-index: 0;\n  background: linear-gradient(\n    165deg,\n    rgba(255, 255, 255, 0.08) 0%,\n    rgba(255, 255, 255, 0) 42%,\n    rgba(0, 0, 0, 0.12) 100%\n  );\n}\n\n/* LIVE chip \u2014 glass capsule (backdrop blur), straddles top edge */\n#ttp-ecom-live-edge {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  transform: translate(-50%, -50%);\n  z-index: 4;\n  max-width: calc(100% - 52px);\n  pointer-events: none;\n  padding: 3px 14px 4px;\n  border-radius: 999px;\n  background: rgba(8, 6, 24, 0.78);\n  border: 1px solid rgba(255, 255, 255, 0.28);\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.35),\n    0 4px 16px rgba(0, 0, 0, 0.35),\n    inset 0 1px 0 rgba(255, 255, 255, 0.12);\n}\n@supports (backdrop-filter: blur(1px)) {\n  #ttp-ecom-live-edge {\n    backdrop-filter: blur(14px) saturate(180%);\n    -webkit-backdrop-filter: blur(14px) saturate(180%);\n  }\n}\n\n#ttp-ecom-main-row {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 18px 16px 12px;\n  min-height: 48px;\n}\n\n#ttp-ecom-footer {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 0 16px 10px;\n  margin-top: -4px;\n  border-top: 1px solid rgba(255, 255, 255, 0.06);\n  padding-top: 6px;\n}\n.ttp-ecom-info-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  margin: 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  line-height: 0;\n  border-radius: 50%;\n  color: rgba(255, 255, 255, 0.35);\n  transition: color 0.2s, background 0.2s;\n}\n.ttp-ecom-info-btn:hover {\n  color: rgba(255, 255, 255, 0.7);\n  background: rgba(255, 255, 255, 0.08);\n}\n.ttp-ecom-info-btn svg { display: block; }\n#ttp-ecom-footer span {\n  font-size: 10px;\n  color: rgba(255, 255, 255, 0.35);\n  white-space: nowrap;\n}\n#ttp-ecom-footer a {\n  color: rgba(167, 139, 250, 0.95);\n  text-decoration: none;\n  font-weight: 600;\n}\n#ttp-ecom-footer a:hover { opacity: 0.85; }\n#ttp-ecom-footer a b { font-weight: 700; }\n\n#ttp-ecom-left-controls,\n#ttp-ecom-right-cluster {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  flex-shrink: 0;\n}\n\n/* Inset \u201Cmeter bridge\u201D for transcript \u2014 keeps one-line layout, adds depth */\n#ttp-ecom-center {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: center;\n  text-align: start;\n  padding: 7px 12px 7px 14px;\n  border-radius: 16px;\n  background: rgba(0, 0, 0, 0.16);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.07),\n    inset 0 -1px 0 rgba(0, 0, 0, 0.12);\n}\n\n#ttp-ecom-live-row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-width: 0;\n}\n\n#ttp-ecom-live-label {\n  font-size: 9px;\n  font-weight: 800;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--ecom-accent, #4ade80);\n  opacity: 0.98;\n  white-space: nowrap;\n}\n\n#ttp-ecom-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--ecom-accent, #4ade80);\n  flex-shrink: 0;\n  box-shadow: 0 0 14px rgba(74, 222, 128, 0.45);\n  animation: ttp-ecom-blink 1.35s ease-in-out infinite;\n}\n#ttp-ecom-dot.paused {\n  animation: none;\n  opacity: 0.45;\n  background: rgba(255,255,255,0.35);\n  box-shadow: none;\n}\n@keyframes ttp-ecom-blink {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.25; transform: scale(0.92); }\n}\n\n#ttp-ecom-transcript {\n  font-size: 12px;\n  line-height: 1.42;\n  letter-spacing: 0.015em;\n  color: rgba(255, 255, 255, 0.94);\n  width: 100%;\n  max-width: 100%;\n  overflow: hidden;\n  word-break: break-word;\n  overflow-wrap: anywhere;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n#ttp-ecom-transcript.ttp-ecom-transcript--user {\n  color: rgba(255, 244, 214, 0.98);\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  text-shadow: 0 0 28px rgba(251, 191, 36, 0.22);\n}\n\n/* Squircle glass controls */\n#ttp-ecom-strip .ttp-ecom-ctrl {\n  width: 36px;\n  height: 36px;\n  border-radius: 12px;\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  background: linear-gradient(165deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 100%);\n  color: rgba(255, 255, 255, 0.92);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.18),\n    0 2px 8px rgba(0, 0, 0, 0.15);\n  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.14s ease;\n  outline: none;\n}\n#ttp-ecom-strip .ttp-ecom-ctrl:hover {\n  background: linear-gradient(165deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 100%);\n  border-color: rgba(255, 255, 255, 0.32);\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.22),\n    0 4px 14px rgba(0, 0, 0, 0.2);\n}\n#ttp-ecom-strip .ttp-ecom-ctrl:active { transform: scale(0.94); }\n#ttp-ecom-strip .ttp-ecom-ctrl:focus-visible {\n  outline: 2px solid rgba(165, 180, 252, 0.95);\n  outline-offset: 2px;\n}\n#ttp-ecom-strip .ttp-ecom-ctrl-active {\n  background: linear-gradient(165deg, rgba(129, 140, 248, 0.45) 0%, rgba(99, 102, 241, 0.28) 100%) !important;\n  border-color: rgba(196, 181, 253, 0.65) !important;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.2),\n    0 0 0 1px rgba(99, 102, 241, 0.35),\n    0 6px 18px rgba(79, 70, 229, 0.35) !important;\n}\n#ttp-ecom-strip .ttp-ecom-ctrl-warn {\n  background: linear-gradient(165deg, rgba(252, 165, 165, 0.22) 0%, rgba(239, 68, 68, 0.2) 100%) !important;\n  border-color: rgba(252, 165, 165, 0.55) !important;\n}\n\n#ttp-ecom-strip .ttp-ecom-ctrl-end {\n  width: 40px;\n  height: 40px;\n  border-radius: 14px;\n  background: linear-gradient(165deg, #fb7185 0%, var(--ecom-end, #ef4444) 52%, #991b1b 100%) !important;\n  border: none !important;\n  color: #fff !important;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.25),\n    0 0 0 2px rgba(0, 0, 0, 0.12),\n    0 6px 22px rgba(239, 68, 68, 0.48);\n  transform: rotate(135deg);\n  transition: filter 0.18s ease, transform 0.14s ease, box-shadow 0.2s ease;\n}\n#ttp-ecom-strip .ttp-ecom-ctrl-end:hover {\n  filter: brightness(1.06);\n  transform: rotate(135deg) scale(1.05);\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.28),\n    0 0 0 2px rgba(0, 0, 0, 0.12),\n    0 10px 28px rgba(239, 68, 68, 0.52);\n}\n#ttp-ecom-strip .ttp-ecom-ctrl-end:active {\n  transform: rotate(135deg) scale(0.94);\n}\n\n/* Mini waveform */\n#ttp-ecom-strip .ttp-ecom-mini-wave {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  height: 24px;\n  padding: 0 4px;\n  opacity: 0.9;\n}\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb {\n  width: 3px;\n  border-radius: 3px;\n  background: linear-gradient(180deg, #ddd6fe 0%, var(--ecom-accent, #a78bfa) 100%);\n  animation: ttp-ecom-wa 0.78s ease-in-out infinite;\n}\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(1) { height: 6px; animation-delay: 0s; }\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(2) { height: 11px; animation-delay: 0.1s; }\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(3) { height: 16px; animation-delay: 0.2s; }\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(4) { height: 9px; animation-delay: 0.15s; }\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb:nth-child(5) { height: 12px; animation-delay: 0.05s; }\n@keyframes ttp-ecom-wa {\n  0%, 100% { transform: scaleY(0.38); opacity: 0.5; }\n  50% { transform: scaleY(1); opacity: 1; }\n}\n#ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb.paused {\n  animation-play-state: paused;\n  transform: scaleY(0.32);\n  opacity: 0.28;\n}\n\n/* Input row */\n#ttp-ecom-input-row {\n  display: none;\n  position: relative;\n  z-index: 1;\n  align-items: center;\n  gap: 10px;\n  padding: 0 14px 12px;\n  margin-top: -2px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n#ttp-ecom-input-row.open {\n  display: flex;\n}\n#ttp-ecom-input {\n  flex: 1;\n  height: 40px;\n  border-radius: 12px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n  background: rgba(0, 0, 0, 0.22);\n  color: #fff;\n  font-size: 14px;\n  padding: 0 14px;\n  outline: none;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  transition: border-color 0.18s ease, box-shadow 0.18s ease;\n}\n#ttp-ecom-input::placeholder { color: rgba(255, 255, 255, 0.42); }\n#ttp-ecom-input:focus {\n  border-color: rgba(165, 180, 252, 0.65);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.2),\n    0 0 0 3px rgba(99, 102, 241, 0.25);\n}\n\n#ttp-ecom-strip .ttp-ecom-send {\n  width: 36px;\n  height: 36px;\n  border-radius: 12px;\n  border: none;\n  background: linear-gradient(165deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.1) 100%);\n  color: #fff;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);\n  transition: background 0.18s ease, transform 0.12s ease;\n}\n#ttp-ecom-strip .ttp-ecom-send:hover {\n  background: linear-gradient(165deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.14) 100%);\n}\n#ttp-ecom-strip .ttp-ecom-send:active { transform: scale(0.94); }\n\n@media (max-width: 520px) {\n  #ttp-ecom-strip .ttp-ecom-mini-wave { display: none; }\n  #ttp-ecom-main-row { gap: 7px; padding: 16px 12px 10px; }\n  #ttp-ecom-strip .ttp-ecom-ctrl { width: 36px; height: 36px; }\n  #ttp-ecom-strip .ttp-ecom-ctrl-end { width: 40px; height: 40px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #ttp-ecom-dot { animation: none; opacity: 0.9; }\n  #ttp-ecom-strip .ttp-ecom-mini-wave .ttp-ecom-wb { animation: none; opacity: 0.65; }\n}\n";
 
 /***/ }),
 
@@ -15519,7 +15696,7 @@ var PartnerScriptRunner = /*#__PURE__*/function () {
     value: (function () {
       var _runAdapterBody2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(action, args, entry) {
         var _entry$version4;
-        var eventName, safeArgs, productIds, _productIds$, idStr, _idStr, ctx, result, postCtx, _t3, _t4, _t5;
+        var eventName, safeArgs, productIds, _productIds$, idStr, _idStr, ctx, result, _result$totalCount, bytes, kb, extra, postCtx, _t3, _t4, _t5;
         return _regenerator().w(function (_context3) {
           while (1) switch (_context3.p = _context3.n) {
             case 0:
@@ -15583,6 +15760,19 @@ var PartnerScriptRunner = /*#__PURE__*/function () {
                 error: String((_t4 === null || _t4 === void 0 ? void 0 : _t4.message) || _t4)
               });
             case 7:
+              // Payload size diagnostics — log before ClientToolsRegistry rejects oversize results.
+              try {
+                bytes = JSON.stringify(result).length;
+                kb = Math.round(bytes / 1024);
+                extra = action === 'search.api' && result && _typeof(result) === 'object' ? " products=".concat(Array.isArray(result.products) ? result.products.length : '?', " totalCount=").concat((_result$totalCount = result.totalCount) !== null && _result$totalCount !== void 0 ? _result$totalCount : '?') : '';
+                console.log("".concat(LOG, " ").concat(action, " done ok=").concat(adapterResultOk(result), " payload=").concat(kb, "KB").concat(extra));
+                if (bytes > 480000) {
+                  console.warn("".concat(LOG, " ").concat(action, " payload near/over 512KB wire limit (").concat(kb, "KB) \u2014 backend may see totalCount=0"));
+                }
+              } catch (_unused) {/* ignore circular refs */}
+
+              // Inline post-hook runs only when main succeeded (mirror of after-hook
+              // gating). Best-effort: errors are logged, the main result is still returned.
               if (!(entry.postFn && adapterResultOk(result))) {
                 _context3.n = 11;
                 break;
@@ -20113,8 +20303,8 @@ var VoiceSDK = _v2_VoiceSDK_js__WEBPACK_IMPORTED_MODULE_0__["default"];
 
 
 // Version - injected at build time from package.json via webpack DefinePlugin
-var VERSION = "2.45.7";
-var BUILD_TIME = "2026-06-14T07:18:03.004Z";
+var VERSION = "2.45.14";
+var BUILD_TIME = "2026-06-29T06:35:24.857Z";
 console.log("%c TTP Agent SDK v".concat(VERSION, " (").concat(BUILD_TIME, ") "), 'background: #4f46e5; color: white; font-size: 12px; font-weight: bold; padding: 2px 6px; border-radius: 4px;');
 
 // Named exports
@@ -24406,9 +24596,17 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
     // Transcript sync
     _this.pendingSentenceText = null; // Text waiting for first audio chunk
     _this.pendingSynced = null; // Synced actions waiting for first audio chunk
-    _this.sentenceTimings = []; // [{startTime, text, synced, displayed}, ...]
+    _this.sentenceTimings = []; // [{segmentId, startTime, endTime, text, synced, displayed, doneReported}, ...]
     _this.isCheckingTranscripts = false;
 
+    // Audio segment correlation (backend-assigned id carried on audio_start). pendingSegmentId
+    // waits for the segment's first chunk, then is promoted to currentSegmentId at scheduling.
+    // currentSegmentId is stamped onto playbackStarted/playbackStopped so the backend can match
+    // the "stopped" against the last burst it sent. Per-segment completion is reported via the
+    // 'segmentDone' event (finished / barged_in / interrupted + playedMs).
+    _this.pendingSegmentId = null;
+    _this.currentSegmentId = null;
+
     // Flag to prevent queuing new audio after stopImmediate() is called (barge-in protection)
     // This prevents race conditions where audio chunks arrive after stop but before sources are stopped
     // Cleared when markNewSentence() is called (signals new audio is starting)
@@ -24790,7 +24988,7 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
               // Keep scheduling frames as long as we have them and haven't reached the lookahead limit
               scheduledCount = 0;
               _loop = /*#__PURE__*/_regenerator().m(function _loop() {
-                var preparedFrame, source, currentTime, isMobile, startupBuffer, minStartTime, startTime;
+                var preparedFrame, source, currentTime, isMobile, startupBuffer, minStartTime, segFrameEnd, startTime;
                 return _regenerator().w(function (_context3) {
                   while (1) switch (_context3.n) {
                     case 0:
@@ -24850,22 +25048,40 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
                         // Always use nextStartTime (which is already calculated for seamless playback)
                       }
 
-                      // ✅ MOVED OUTSIDE - Record sentence timing on first chunk of EACH sentence
-                      if (_this4.pendingSentenceText) {
+                      // Audio-clock window for THIS frame: [nextStartTime, nextStartTime + duration).
+                      segFrameEnd = _this4.nextStartTime + preparedFrame.duration; // ✅ MOVED OUTSIDE - Record sentence timing on first chunk of EACH sentence
+                      if (_this4.pendingSentenceText || _this4.pendingSegmentId != null) {
+                        // First chunk of a new segment: open a timing entry and adopt its id as current.
                         _this4.sentenceTimings.push({
+                          segmentId: _this4.pendingSegmentId,
                           startTime: _this4.nextStartTime,
+                          endTime: segFrameEnd,
                           text: _this4.pendingSentenceText,
                           synced: _this4.pendingSynced,
-                          displayed: false
+                          displayed: false,
+                          doneReported: false
                         });
-                        console.log("\uD83D\uDCDD AudioPlayer: Sentence scheduled at ".concat(_this4.nextStartTime.toFixed(3), "s: \"").concat(_this4.pendingSentenceText.substring(0, 40), "...\" (synced: ").concat(_this4.pendingSynced ? _this4.pendingSynced.length : 0, ")"));
+                        _this4.currentSegmentId = _this4.pendingSegmentId;
+                        console.log("\uD83D\uDCDD AudioPlayer: Sentence scheduled at ".concat(_this4.nextStartTime.toFixed(3), "s (segmentId: ").concat(_this4.pendingSegmentId, "): \"").concat((_this4.pendingSentenceText || '').substring(0, 40), "...\" (synced: ").concat(_this4.pendingSynced ? _this4.pendingSynced.length : 0, ")"));
+                        // Per-segment START signal: this segment's first frame just scheduled (≈ playback start).
+                        // Mirrors the per-segment 'segmentDone' (end) event; lets the backend fire speech-synced
+                        // actions exactly when THIS line begins playing (vs the coarse, once-per-burst playbackStarted).
+                        if (_this4.currentSegmentId != null) {
+                          _this4.emit('segmentStarted', {
+                            segmentId: _this4.currentSegmentId
+                          });
+                        }
                         _this4.pendingSentenceText = null;
                         _this4.pendingSynced = null;
+                        _this4.pendingSegmentId = null;
 
                         // Start checker if not running
                         if (!_this4.isCheckingTranscripts) {
                           _this4.startTranscriptChecker();
                         }
+                      } else if (_this4.sentenceTimings.length > 0) {
+                        // Subsequent chunk of the current segment: extend its end on the audio clock.
+                        _this4.sentenceTimings[_this4.sentenceTimings.length - 1].endTime = segFrameEnd;
                       }
 
                       // Schedule this chunk to start at nextStartTime
@@ -24920,8 +25136,10 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
                         if (_this4.scheduledBuffers === 0 && _this4.preparedBuffer.length === 0 && _this4.pcmChunkQueue.length === 0 && !_this4._isStopped) {
                           _this4.isPlaying = false;
                           _this4.isSchedulingFrames = false;
-                          console.log('🛑 AudioPlayer: Emitting playbackStopped event (all buffers finished)');
-                          _this4.emit('playbackStopped');
+                          console.log('🛑 AudioPlayer: Emitting playbackStopped event (all buffers finished, segmentId: ' + _this4.currentSegmentId + ')');
+                          _this4.emit('playbackStopped', {
+                            segmentId: _this4.currentSegmentId
+                          });
                         } else if (_this4.preparedBuffer.length > 0 && !_this4._isStopped) {
                           // More frames available, schedule them immediately
 
@@ -24957,8 +25175,10 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
                       };
                       if (!_this4.isPlaying) {
                         _this4.isPlaying = true;
-                        console.log('🎵 AudioPlayer: Emitting playbackStarted event');
-                        _this4.emit('playbackStarted');
+                        console.log('🎵 AudioPlayer: Emitting playbackStarted event (segmentId: ' + _this4.currentSegmentId + ')');
+                        _this4.emit('playbackStarted', {
+                          segmentId: _this4.currentSegmentId
+                        });
                       }
                     case 3:
                       return _context3.a(2);
@@ -26302,14 +26522,66 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
       // Note: scheduledBuffers was already reset to 0 above when clearing scheduledSources
       this.nextStartTime = 0;
 
+      // Report per-segment completion for the interrupted burst BEFORE clearing timing state.
+      // Audible segment → barged_in (ms heard); scheduled-but-unstarted → interrupted;
+      // already-elapsed but unreported → finished. Plus any pending segment (audio_start arrived
+      // but no chunks scheduled yet) → interrupted.
+      try {
+        var nowTs = this.audioContext ? this.audioContext.currentTime : 0;
+        var _iterator = _createForOfIteratorHelper(this.sentenceTimings),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var timing = _step.value;
+            if (timing.doneReported) continue;
+            timing.doneReported = true;
+            var status = void 0,
+              playedMs = void 0;
+            if (timing.endTime != null && nowTs >= timing.endTime) {
+              status = 'finished';
+              playedMs = Math.round((timing.endTime - timing.startTime) * 1000);
+            } else if (nowTs <= timing.startTime) {
+              status = 'interrupted';
+              playedMs = 0;
+            } else {
+              status = 'barged_in';
+              playedMs = Math.round((nowTs - timing.startTime) * 1000);
+            }
+            this.emit('segmentDone', {
+              segmentId: timing.segmentId,
+              status: status,
+              playedMs: playedMs
+            });
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        if (this.pendingSegmentId != null) {
+          this.emit('segmentDone', {
+            segmentId: this.pendingSegmentId,
+            status: 'interrupted',
+            playedMs: 0
+          });
+        }
+      } catch (e) {
+        console.warn('⚠️ AudioPlayer: segmentDone (barge-in) reporting failed:', e && e.message);
+      }
+      // Capture the last segment that was playing for the coarse playbackStopped below
+      // (clearTranscriptState resets currentSegmentId).
+      var stoppedSegmentId = this.currentSegmentId;
+
       // Clear transcript state
       this.clearTranscriptState();
 
       // Emit stopped event - CRITICAL for barge-in
 
       if (wasPlaying) {
-        console.log('🛑 AudioPlayer: Emitting playbackStopped event (stopImmediate called)');
-        this.emit('playbackStopped');
+        console.log('🛑 AudioPlayer: Emitting playbackStopped event (stopImmediate called, segmentId: ' + stoppedSegmentId + ')');
+        this.emit('playbackStopped', {
+          segmentId: stoppedSegmentId
+        });
       }
     }
 
@@ -26319,7 +26591,7 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
      */
   }, {
     key: "markNewSentence",
-    value: function markNewSentence(text, synced) {
+    value: function markNewSentence(text, synced, segmentId) {
       var _this0 = this;
       var wasStopped = this._isStopped;
       var isCurrentlyPlaying = this.isPlaying || this.scheduledSources.size > 0;
@@ -26364,10 +26636,12 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
         console.log("\uD83D\uDCDD AudioPlayer: New sentence queued while audio playing - will start after current sentence finishes");
       }
 
-      // Always update pending sentence text and synced actions (for transcript display)
+      // Always update pending sentence text, synced actions (for transcript display), and the
+      // backend-assigned segment id (echoed back on the playback events for this segment).
       this.pendingSentenceText = text;
       this.pendingSynced = synced || null;
-      console.log("\uD83D\uDCDD AudioPlayer: New sentence marked: \"".concat(text.substring(0, 40), "...\" (wasStopped: ").concat(wasStopped, ", isPlaying: ").concat(isCurrentlyPlaying, ", synced: ").concat(synced ? synced.length : 0, ")"));
+      this.pendingSegmentId = segmentId != null ? segmentId : null;
+      console.log("\uD83D\uDCDD AudioPlayer: New sentence marked (segmentId: ".concat(this.pendingSegmentId, "): \"").concat(text.substring(0, 40), "...\" (wasStopped: ").concat(wasStopped, ", isPlaying: ").concat(isCurrentlyPlaying, ", synced: ").concat(synced ? synced.length : 0, ")"));
 
       // CRITICAL: Set timeout to detect empty sentences (audio_start but no chunks)
       // This prevents queue blocking if backend sends audio_start but no audio chunks follow
@@ -26379,6 +26653,18 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
         // Check if this sentence still has no chunks after timeout
         if (_this0.pendingSentenceText === sentenceText && _this0.scheduledBuffers === 0 && _this0.preparedBuffer.length === 0 && _this0.pcmChunkQueue.length === 0 && !_this0._isStopped) {
           console.warn("\u26A0\uFE0F AudioPlayer: Empty sentence detected after 5s timeout - no chunks received for: \"".concat(sentenceText.substring(0, 40), "...\""));
+          // If this empty sentence carried a segment id, report it done (nothing was heard) and
+          // adopt it as current so the coarse stop below matches the backend's last-sent id.
+          if (_this0.pendingSegmentId != null) {
+            var emptySegId = _this0.pendingSegmentId;
+            _this0.currentSegmentId = emptySegId;
+            _this0.pendingSegmentId = null;
+            _this0.emit('segmentDone', {
+              segmentId: emptySegId,
+              status: 'finished',
+              playedMs: 0
+            });
+          }
           // Clear pending sentence to unblock next sentence
           if (_this0.pendingSentenceText === sentenceText) {
             _this0.pendingSentenceText = null;
@@ -26387,7 +26673,9 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
           // Only if we're not currently playing (to avoid interrupting real playback)
           if (!_this0.isPlaying && _this0.scheduledSources.size === 0) {
             console.log('🛑 AudioPlayer: Emitting playbackStopped for empty sentence timeout');
-            _this0.emit('playbackStopped');
+            _this0.emit('playbackStopped', {
+              segmentId: _this0.currentSegmentId
+            });
           }
         }
         _this0._emptySentenceTimeout = null;
@@ -26407,31 +26695,64 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
       var _checkLoop = function checkLoop() {
         if (!_this1.isCheckingTranscripts || !_this1.audioContext) return;
         var currentTime = _this1.audioContext.currentTime;
-        var _iterator = _createForOfIteratorHelper(_this1.sentenceTimings),
-          _step;
+        var _iterator2 = _createForOfIteratorHelper(_this1.sentenceTimings),
+          _step2;
         try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var timing = _step.value;
-            if (!timing.displayed && currentTime >= timing.startTime) {
-              timing.displayed = true;
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var _timing = _step2.value;
+            if (!_timing.displayed && _timing.text && currentTime >= _timing.startTime) {
+              _timing.displayed = true;
               var eventData = {
-                text: timing.text
+                text: _timing.text
               };
-              if (timing.synced) {
-                eventData.synced = timing.synced;
+              if (_timing.synced) {
+                eventData.synced = _timing.synced;
               }
-              console.log("\uD83D\uDCDD AudioPlayer: Display transcript at ".concat(currentTime.toFixed(3), "s: \"").concat(timing.text.substring(0, 40), "...\" (synced: ").concat(timing.synced ? timing.synced.length : 0, ")"));
+              console.log("\uD83D\uDCDD AudioPlayer: Display transcript at ".concat(currentTime.toFixed(3), "s: \"").concat(_timing.text.substring(0, 40), "...\" (synced: ").concat(_timing.synced ? _timing.synced.length : 0, ")"));
               _this1.emit('transcriptDisplay', eventData);
             }
+            // Per-segment natural finish: this segment's audio window has fully elapsed.
+            if (!_timing.doneReported && _timing.endTime != null && currentTime >= _timing.endTime) {
+              _timing.doneReported = true;
+              var _playedMs = Math.round((_timing.endTime - _timing.startTime) * 1000);
+              _this1.emit('segmentDone', {
+                segmentId: _timing.segmentId,
+                status: 'finished',
+                playedMs: _playedMs
+              });
+            }
           }
         } catch (err) {
-          _iterator.e(err);
+          _iterator2.e(err);
         } finally {
-          _iterator.f();
+          _iterator2.f();
         }
         if (_this1.isPlaying || _this1.scheduledBuffers > 0) {
           requestAnimationFrame(_checkLoop);
         } else {
+          // Playback drained naturally — flush any segment whose finish tick we may have missed
+          // (the last buffer's onended can flip isPlaying=false before this loop's next tick).
+          var _iterator3 = _createForOfIteratorHelper(_this1.sentenceTimings),
+            _step3;
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              var timing = _step3.value;
+              if (!timing.doneReported) {
+                timing.doneReported = true;
+                var end = timing.endTime != null ? timing.endTime : timing.startTime;
+                var playedMs = Math.round((end - timing.startTime) * 1000);
+                _this1.emit('segmentDone', {
+                  segmentId: timing.segmentId,
+                  status: 'finished',
+                  playedMs: playedMs
+                });
+              }
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
           _this1.isCheckingTranscripts = false;
           console.log('📝 AudioPlayer: Transcript checker stopped');
         }
@@ -26447,6 +26768,8 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
     value: function clearTranscriptState() {
       this.pendingSentenceText = null;
       this.pendingSynced = null;
+      this.pendingSegmentId = null;
+      this.currentSegmentId = null;
       this.sentenceTimings = [];
       this.isCheckingTranscripts = false;
       console.log('📝 AudioPlayer: Transcript state cleared');
@@ -26596,13 +26919,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_screenshot_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../utils/screenshot.js */ "./src/utils/screenshot.js");
 /* harmony import */ var _utils_visual_tools_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../utils/visual-tools.js */ "./src/utils/visual-tools.js");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
@@ -27169,19 +27492,23 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
     key: "setupAudioPlayerEvents",
     value: function setupAudioPlayerEvents() {
       var _this3 = this;
-      this.audioPlayer.on('playbackStarted', function () {
+      this.audioPlayer.on('playbackStarted', function (info) {
         _this3.isPlaying = true;
         _this3.emit('playbackStarted');
 
         // Transcripts are displayed when they arrive (between sentences)
         // No need to handle transcript display here - it's handled in handleTranscript()
 
-        // Notify server - CRITICAL for barge-in detection
+        // Notify server - CRITICAL for barge-in detection.
+        // Carry the segmentId of the burst that started playing (echoed from audio_start) so the
+        // backend can correlate playback events with the bursts it sent.
 
         if (_this3.isConnected) {
-          console.log('📤 VoiceSDK v2: Sending audio_started_playing message to server');
+          var segmentId = info && info.segmentId != null ? info.segmentId : null;
+          console.log('📤 VoiceSDK v2: Sending audio_started_playing message to server (segmentId: ' + segmentId + ')');
           _this3.sendMessage({
-            t: 'audio_started_playing'
+            t: 'audio_started_playing',
+            segmentId: segmentId
           });
         } else {
           console.warn('⚠️ VoiceSDK v2: Cannot send audio_started_playing - not connected');
@@ -27205,39 +27532,62 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
         _this3.emit('transcriptDisplay', fullTranscriptData);
         _this3.emit('transcript', fullTranscriptData);
         if (transcriptData.synced && Array.isArray(transcriptData.synced)) {
-          console.log("\uD83D\uDCDD VoiceSDK v2: Emitting ".concat(transcriptData.synced.length, " synced action(s) as message events"));
-          var _iterator = _createForOfIteratorHelper(transcriptData.synced),
-            _step;
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var action = _step.value;
-              _this3.emit('message', action);
-            }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
-          }
+          console.log("\uD83D\uDCDD VoiceSDK v2: Dispatching ".concat(transcriptData.synced.length, " synced action(s)"));
+          void _this3._dispatchSyncedActions(transcriptData.synced);
         }
       });
-      this.audioPlayer.on('playbackStopped', function () {
+      this.audioPlayer.on('playbackStopped', function (info) {
         _this3.isPlaying = false;
         _this3.emit('playbackStopped');
 
         // When playback stops, keep currentPlayingSentenceId to track which sentence just finished
         // The next transcript will arrive between sentences and will be displayed immediately
 
-        // Notify server - CRITICAL for barge-in detection
+        // Notify server - CRITICAL for barge-in detection.
+        // Carry the segmentId of the last burst that was playing so the backend's idle gate can
+        // match this stop against the last burst it sent (deterministic "fully idle").
 
         if (_this3.isConnected) {
-          console.log('📤 VoiceSDK v2: Sending audio_stopped_playing message to server');
+          var segmentId = info && info.segmentId != null ? info.segmentId : null;
+          console.log('📤 VoiceSDK v2: Sending audio_stopped_playing message to server (segmentId: ' + segmentId + ')');
           _this3.sendMessage({
-            t: 'audio_stopped_playing'
+            t: 'audio_stopped_playing',
+            segmentId: segmentId
           });
         } else {
           console.warn('⚠️ VoiceSDK v2: Cannot send audio_stopped_playing - not connected');
         }
       });
+
+      // Per-segment playback completion (finished / barged_in / interrupted) with the ms of THIS
+      // segment actually heard. Additive telemetry alongside the coarse started/stopped events.
+
+      this.audioPlayer.on('segmentDone', function (info) {
+        if (!info) return;
+        if (_this3.isConnected) {
+          console.log('📤 VoiceSDK v2: Sending audio_segment_done (segmentId: ' + info.segmentId + ', status: ' + info.status + ', playedMs: ' + info.playedMs + ')');
+          _this3.sendMessage({
+            t: 'audio_segment_done',
+            segmentId: info.segmentId != null ? info.segmentId : null,
+            status: info.status,
+            playedMs: info.playedMs
+          });
+        }
+      });
+
+      // Per-segment START — fired when a sentence's first frame schedules (≈ it begins playing).
+      // The backend uses this to fire sync_with_speech tool execution exactly as the line is heard.
+
+      this.audioPlayer.on('segmentStarted', function (info) {
+        if (!info || info.segmentId == null) return;
+        if (_this3.isConnected) {
+          console.log('📤 VoiceSDK v2: Sending audio_segment_started (segmentId: ' + info.segmentId + ')');
+          _this3.sendMessage({
+            t: 'audio_segment_started',
+            segmentId: info.segmentId
+          });
+        }
+      });
       this.audioPlayer.on('playbackError', function (error) {
         _this3.emit('playbackError', error);
         _this3.emit('error', error);
@@ -27602,7 +27952,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
 
               // Include SDK build time for debugging
               if (true) {
-                helloMessage.lastBuildTime = "2026-06-14T07:18:03.004Z";
+                helloMessage.lastBuildTime = "2026-06-29T06:35:24.857Z";
               }
 
               // Page context is intentionally NOT attached to the hello message.
@@ -27757,7 +28107,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
           case 'audio_start':
             // Backend sends audio_start with transcript text before audio chunks
             // Store the text in AudioPlayer for synced display when audio actually starts playing
-            console.log('📝 VoiceSDK v2: Received audio_start with text:', message.text);
+            console.log('📝 VoiceSDK v2: Received audio_start with text:', message.text, '(segmentId:', message.segmentId, ')');
 
             // CRITICAL: Record timestamp to prevent premature stop_playing messages from cutting sentences
             this.lastAudioStartTime = Date.now();
@@ -27773,7 +28123,10 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               if (synced) {
                 console.log("\uD83D\uDCDD VoiceSDK v2: audio_start carries ".concat(synced.length, " synced action(s)"));
               }
-              this.audioPlayer.markNewSentence(message.text, synced);
+              // Pass the backend-assigned segmentId (may be undefined for legacy backends) so the
+              // player can echo it back on this segment's playback events.
+              var segmentId = message.segmentId != null ? message.segmentId : null;
+              this.audioPlayer.markNewSentence(message.text, synced, segmentId);
             }
             // Also emit as message for other listeners
             this.emit('message', message);
@@ -28302,6 +28655,104 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
       }
     }
 
+    /**
+     * Dispatch widget actions synced to a TTS sentence boundary.
+     * run_partner_script envelopes must go through the same handler as WS traffic
+     * (show_media and other t= messages still emit as generic message events).
+     * @private
+     */
+  }, {
+    key: "_dispatchSyncedActions",
+    value: (function () {
+      var _dispatchSyncedActions2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(actions) {
+        var _iterator, _step, raw, _t2;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.p = _context3.n) {
+            case 0:
+              _iterator = _createForOfIteratorHelper(actions);
+              _context3.p = 1;
+              _iterator.s();
+            case 2:
+              if ((_step = _iterator.n()).done) {
+                _context3.n = 4;
+                break;
+              }
+              raw = _step.value;
+              _context3.n = 3;
+              return this._dispatchSyncedAction(raw);
+            case 3:
+              _context3.n = 2;
+              break;
+            case 4:
+              _context3.n = 6;
+              break;
+            case 5:
+              _context3.p = 5;
+              _t2 = _context3.v;
+              _iterator.e(_t2);
+            case 6:
+              _context3.p = 6;
+              _iterator.f();
+              return _context3.f(6);
+            case 7:
+              return _context3.a(2);
+          }
+        }, _callee3, this, [[1, 5, 6, 7]]);
+      }));
+      function _dispatchSyncedActions(_x) {
+        return _dispatchSyncedActions2.apply(this, arguments);
+      }
+      return _dispatchSyncedActions;
+    }())
+  }, {
+    key: "_dispatchSyncedAction",
+    value: function () {
+      var _dispatchSyncedAction2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(action) {
+        var message, _t3;
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.p = _context4.n) {
+            case 0:
+              message = action;
+              if (!(typeof message === 'string')) {
+                _context4.n = 3;
+                break;
+              }
+              _context4.p = 1;
+              message = JSON.parse(message);
+              _context4.n = 3;
+              break;
+            case 2:
+              _context4.p = 2;
+              _t3 = _context4.v;
+              console.warn('⚠️ VoiceSDK v2: Ignoring invalid synced action string:', action);
+              return _context4.a(2);
+            case 3:
+              if (!(!message || _typeof(message) !== 'object')) {
+                _context4.n = 4;
+                break;
+              }
+              return _context4.a(2);
+            case 4:
+              if (!(message.t === 'run_partner_script')) {
+                _context4.n = 6;
+                break;
+              }
+              _context4.n = 5;
+              return this._handleRunPartnerScript(message);
+            case 5:
+              return _context4.a(2);
+            case 6:
+              this.emit('message', message);
+            case 7:
+              return _context4.a(2);
+          }
+        }, _callee4, this, [[1, 2]]);
+      }));
+      function _dispatchSyncedAction(_x2) {
+        return _dispatchSyncedAction2.apply(this, arguments);
+      }
+      return _dispatchSyncedAction;
+    }()
     /**
      * Handle a run_partner_script envelope (async partner-adapter dispatch).
      *
@@ -28320,30 +28771,30 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "_handleRunPartnerScript",
     value: (function () {
-      var _handleRunPartnerScript2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(message) {
+      var _handleRunPartnerScript2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(message) {
         var _this$clientToolsRegi;
-        var _ref, requestId, partnerId, action, args, handler, startedAt, result, elapsedMs, ok, reason, extras, preview, _elapsedMs, _t2;
-        return _regenerator().w(function (_context3) {
-          while (1) switch (_context3.p = _context3.n) {
+        var _ref, requestId, partnerId, action, args, handler, startedAt, result, elapsedMs, ok, reason, extras, preview, _elapsedMs, _t4;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.p = _context5.n) {
             case 0:
               _ref = message || {}, requestId = _ref.requestId, partnerId = _ref.partnerId, action = _ref.action;
               args = message && message.args || {};
               if (requestId) {
-                _context3.n = 1;
+                _context5.n = 1;
                 break;
               }
               console.warn('⚠️ VoiceSDK v2: run_partner_script missing requestId; dropping', message);
-              return _context3.a(2);
+              return _context5.a(2);
             case 1:
               if (!_core_ClientScriptManager_js__WEBPACK_IMPORTED_MODULE_5__.ClientScriptManager.isClientToolsScript(message)) {
-                _context3.n = 2;
+                _context5.n = 2;
                 break;
               }
-              return _context3.a(2, this.clientScriptManager.handleRunPartnerScript(message));
+              return _context5.a(2, this.clientScriptManager.handleRunPartnerScript(message));
             case 2:
               handler = (_this$clientToolsRegi = this.clientToolsRegistry) === null || _this$clientToolsRegi === void 0 || (_this$clientToolsRegi = _this$clientToolsRegi.handlers) === null || _this$clientToolsRegi === void 0 ? void 0 : _this$clientToolsRegi.get('run_partner_script');
               if (handler) {
-                _context3.n = 3;
+                _context5.n = 3;
                 break;
               }
               console.error("\uD83E\uDDE9 VoiceSDK v2: no run_partner_script handler registered (ecommerce flavor not loaded?); requestId=".concat(requestId, " partner=").concat(partnerId, " action=").concat(action));
@@ -28355,18 +28806,18 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
                 ok: false,
                 error: 'no_handler_registered'
               });
-              return _context3.a(2);
+              return _context5.a(2);
             case 3:
               startedAt = Date.now();
               console.log("\uD83E\uDDE9 VoiceSDK v2: run_partner_script dispatch partner=".concat(partnerId, " action=").concat(action, " requestId=").concat(requestId));
-              _context3.p = 4;
-              _context3.n = 5;
+              _context5.p = 4;
+              _context5.n = 5;
               return handler({
                 action: action,
                 args: args
               });
             case 5:
-              result = _context3.v;
+              result = _context5.v;
               elapsedMs = Date.now() - startedAt; // Adapters return { ok, ... } themselves. Honor that flag if present;
               // otherwise treat presence-of-result as success.
               ok = result && _typeof(result) === 'object' && 'ok' in result ? !!result.ok : true; // Surface the failure reason inline so debugging doesn't require pulling
@@ -28393,27 +28844,27 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
                 ok: ok,
                 result: result
               });
-              _context3.n = 7;
+              _context5.n = 7;
               break;
             case 6:
-              _context3.p = 6;
-              _t2 = _context3.v;
+              _context5.p = 6;
+              _t4 = _context5.v;
               _elapsedMs = Date.now() - startedAt;
-              console.error("\uD83E\uDDE9 VoiceSDK v2: run_partner_script threw partner=".concat(partnerId, " action=").concat(action, " requestId=").concat(requestId, " (").concat(_elapsedMs, "ms):"), _t2);
+              console.error("\uD83E\uDDE9 VoiceSDK v2: run_partner_script threw partner=".concat(partnerId, " action=").concat(action, " requestId=").concat(requestId, " (").concat(_elapsedMs, "ms):"), _t4);
               this.sendMessage({
                 t: 'run_partner_script_result',
                 requestId: requestId,
                 partnerId: partnerId,
                 action: action,
                 ok: false,
-                error: _t2 && _t2.message || String(_t2)
+                error: _t4 && _t4.message || String(_t4)
               });
             case 7:
-              return _context3.a(2);
+              return _context5.a(2);
           }
-        }, _callee3, this, [[4, 6]]);
+        }, _callee5, this, [[4, 6]]);
       }));
-      function _handleRunPartnerScript(_x) {
+      function _handleRunPartnerScript(_x3) {
         return _handleRunPartnerScript2.apply(this, arguments);
       }
       return _handleRunPartnerScript;
@@ -28458,7 +28909,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "injectData",
     value: (function () {
-      var _injectData = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(data) {
+      var _injectData = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(data) {
         var _this7 = this;
         var options,
           trimmedData,
@@ -28469,15 +28920,15 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
           timeout,
           source,
           message,
-          _args4 = arguments;
-        return _regenerator().w(function (_context4) {
-          while (1) switch (_context4.n) {
+          _args6 = arguments;
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.n) {
             case 0:
-              options = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : {};
+              options = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : {};
               // Validation: data content
               trimmedData = data === null || data === void 0 ? void 0 : data.trim();
               if (trimmedData) {
-                _context4.n = 1;
+                _context6.n = 1;
                 break;
               }
               error = {
@@ -28489,7 +28940,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               throw new Error(error.message);
             case 1:
               if (!(!this.isConnected || !this.websocket)) {
-                _context4.n = 2;
+                _context6.n = 2;
                 break;
               }
               _error = {
@@ -28501,7 +28952,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               throw new Error(_error.message);
             case 2:
               if (!(trimmedData.length > 5000)) {
-                _context4.n = 3;
+                _context6.n = 3;
                 break;
               }
               _error2 = {
@@ -28530,7 +28981,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               }
 
               // Return Promise that resolves when acknowledgment is received
-              return _context4.a(2, new Promise(function (_resolve, _reject) {
+              return _context6.a(2, new Promise(function (_resolve, _reject) {
                 // Set up timeout
                 var timeoutId = setTimeout(function () {
                   // Remove from pending map
@@ -28581,9 +29032,9 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
                 }
               }));
           }
-        }, _callee4, this);
+        }, _callee6, this);
       }));
-      function injectData(_x2) {
+      function injectData(_x4) {
         return _injectData.apply(this, arguments);
       }
       return injectData;
@@ -28713,20 +29164,20 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "handleBinaryMessage",
     value: (function () {
-      var _handleBinaryMessage = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(data) {
-        var arrayBuffer, processedAudio, playbackFormat, container, encoding, pcmData, codec, decoded, _t3;
-        return _regenerator().w(function (_context5) {
-          while (1) switch (_context5.p = _context5.n) {
+      var _handleBinaryMessage = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(data) {
+        var arrayBuffer, processedAudio, playbackFormat, container, encoding, pcmData, codec, decoded, _t5;
+        return _regenerator().w(function (_context7) {
+          while (1) switch (_context7.p = _context7.n) {
             case 0:
               if (!(data instanceof Blob)) {
-                _context5.n = 2;
+                _context7.n = 2;
                 break;
               }
-              _context5.n = 1;
+              _context7.n = 1;
               return data.arrayBuffer();
             case 1:
-              arrayBuffer = _context5.v;
-              _context5.n = 3;
+              arrayBuffer = _context7.v;
+              _context7.n = 3;
               break;
             case 2:
               arrayBuffer = data;
@@ -28734,21 +29185,21 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               // Convert format if needed (before passing to AudioPlayer)
               processedAudio = arrayBuffer;
               if (!(this.formatConverter && this.formatConverter.needsConversion())) {
-                _context5.n = 7;
+                _context7.n = 7;
                 break;
               }
-              _context5.p = 4;
-              _context5.n = 5;
+              _context7.p = 4;
+              _context7.n = 5;
               return this.formatConverter.convert(arrayBuffer);
             case 5:
-              processedAudio = _context5.v;
+              processedAudio = _context7.v;
               console.log('✅ VoiceSDK v2: Audio converted to requested format');
-              _context5.n = 7;
+              _context7.n = 7;
               break;
             case 6:
-              _context5.p = 6;
-              _t3 = _context5.v;
-              console.error('❌ VoiceSDK v2: Format conversion failed:', _t3);
+              _context7.p = 6;
+              _t5 = _context7.v;
+              console.error('❌ VoiceSDK v2: Format conversion failed:', _t5);
               console.warn('   Using backend format without conversion');
               processedAudio = arrayBuffer; // Fall back to original
             case 7:
@@ -28798,11 +29249,11 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
                 this.audioPlayer.playAudio(processedAudio);
               }
             case 8:
-              return _context5.a(2);
+              return _context7.a(2);
           }
-        }, _callee5, this, [[4, 6]]);
+        }, _callee7, this, [[4, 6]]);
       }));
-      function handleBinaryMessage(_x3) {
+      function handleBinaryMessage(_x5) {
         return _handleBinaryMessage.apply(this, arguments);
       }
       return handleBinaryMessage;
@@ -28990,22 +29441,22 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "startRecording",
     value: (function () {
-      var _startRecording = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+      var _startRecording = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
         var existingMediaStream,
           error,
           _error4,
           _error5,
           permissionError,
-          _args6 = arguments,
-          _t4,
-          _t5,
-          _t6;
-        return _regenerator().w(function (_context6) {
-          while (1) switch (_context6.p = _context6.n) {
+          _args8 = arguments,
+          _t6,
+          _t7,
+          _t8;
+        return _regenerator().w(function (_context8) {
+          while (1) switch (_context8.p = _context8.n) {
             case 0:
-              existingMediaStream = _args6.length > 0 && _args6[0] !== undefined ? _args6[0] : null;
+              existingMediaStream = _args8.length > 0 && _args8[0] !== undefined ? _args8[0] : null;
               if (this.isConnected) {
-                _context6.n = 1;
+                _context8.n = 1;
                 break;
               }
               error = new Error('Not connected to voice server');
@@ -29013,14 +29464,14 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               throw error;
             case 1:
               if (!this.isRecording) {
-                _context6.n = 2;
+                _context8.n = 2;
                 break;
               }
               console.warn('VoiceSDK v2: Already recording');
-              return _context6.a(2, true);
+              return _context8.a(2, true);
             case 2:
               if (!this.disclaimersPending) {
-                _context6.n = 3;
+                _context8.n = 3;
                 break;
               }
               _error4 = new Error('Server disclaimers must be accepted before recording. Call sendDisclaimerAck(true) first.');
@@ -29029,28 +29480,28 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               throw _error4;
             case 3:
               console.log('🎤 VoiceSDK v2: Starting recording...');
-              _context6.p = 4;
+              _context8.p = 4;
               // CRITICAL for mobile browsers: Request microphone permission FIRST
               // iOS: Pass existingMediaStream to avoid second getUserMedia (can fail on iOS)
               console.log('🎤 VoiceSDK v2: Requesting microphone permission (mobile-friendly)...');
-              _context6.n = 5;
+              _context8.n = 5;
               return this.audioRecorder.start(existingMediaStream ? {
                 existingMediaStream: existingMediaStream
               } : {});
             case 5:
               if (!(!this.isConnected || !this.websocket || this.websocket.readyState !== WebSocket.OPEN)) {
-                _context6.n = 10;
+                _context8.n = 10;
                 break;
               }
-              _context6.p = 6;
-              _context6.n = 7;
+              _context8.p = 6;
+              _context8.n = 7;
               return this.audioRecorder.stop();
             case 7:
-              _context6.n = 9;
+              _context8.n = 9;
               break;
             case 8:
-              _context6.p = 8;
-              _t4 = _context6.v;
+              _context8.p = 8;
+              _t6 = _context8.v;
             case 9:
               _error5 = new Error('Connection lost - server may have rejected the call');
               _error5.name = 'ServerRejected';
@@ -29059,7 +29510,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               // The error handler in VoiceInterface will handle it appropriately
               throw _error5;
             case 10:
-              _context6.n = 11;
+              _context8.n = 11;
               return this.audioPlayer.resumeAudioContext();
             case 11:
               // After permission is granted, send start_continuous_mode message to server
@@ -29070,45 +29521,45 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
 
               // Request screen wake lock to keep screen on during voice call (mobile)
               this._requestWakeLock();
-              return _context6.a(2, true);
+              return _context8.a(2, true);
             case 12:
-              _context6.p = 12;
-              _t5 = _context6.v;
+              _context8.p = 12;
+              _t7 = _context8.v;
               if (!(this.audioRecorder && this.audioRecorder.isRecording)) {
-                _context6.n = 16;
+                _context8.n = 16;
                 break;
               }
-              _context6.p = 13;
-              _context6.n = 14;
+              _context8.p = 13;
+              _context8.n = 14;
               return this.audioRecorder.stop();
             case 14:
-              _context6.n = 16;
+              _context8.n = 16;
               break;
             case 15:
-              _context6.p = 15;
-              _t6 = _context6.v;
+              _context8.p = 15;
+              _t8 = _context8.v;
             case 16:
-              if (!(_t5.isServerRejection || _t5.name === 'ServerRejected')) {
-                _context6.n = 17;
+              if (!(_t7.isServerRejection || _t7.name === 'ServerRejected')) {
+                _context8.n = 17;
                 break;
               }
-              return _context6.a(2, false);
+              return _context8.a(2, false);
             case 17:
               // Log and emit other errors (permission denied, etc.)
-              console.error('❌ VoiceSDK v2: Failed to start recording:', _t5);
+              console.error('❌ VoiceSDK v2: Failed to start recording:', _t7);
 
               // Provide helpful error messages for permission issues
-              if (_t5.name === 'NotAllowedError' || _t5.name === 'PermissionDeniedError') {
+              if (_t7.name === 'NotAllowedError' || _t7.name === 'PermissionDeniedError') {
                 permissionError = new Error('Microphone permission denied. Please allow microphone access in your browser settings and try again.');
-                permissionError.name = _t5.name;
-                permissionError.originalError = _t5;
+                permissionError.name = _t7.name;
+                permissionError.originalError = _t7;
                 this.emit('error', permissionError);
               } else {
-                this.emit('error', _t5);
+                this.emit('error', _t7);
               }
-              return _context6.a(2, false);
+              return _context8.a(2, false);
           }
-        }, _callee6, this, [[13, 15], [6, 8], [4, 12]]);
+        }, _callee8, this, [[13, 15], [6, 8], [4, 12]]);
       }));
       function startRecording() {
         return _startRecording.apply(this, arguments);
@@ -29122,20 +29573,20 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "stopRecording",
     value: (function () {
-      var _stopRecording = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
-        var _t7;
-        return _regenerator().w(function (_context7) {
-          while (1) switch (_context7.p = _context7.n) {
+      var _stopRecording = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+        var _t9;
+        return _regenerator().w(function (_context9) {
+          while (1) switch (_context9.p = _context9.n) {
             case 0:
               if (this.isRecording) {
-                _context7.n = 1;
+                _context9.n = 1;
                 break;
               }
               console.warn('VoiceSDK v2: Not recording');
-              return _context7.a(2, true);
+              return _context9.a(2, true);
             case 1:
               console.log('🛑 VoiceSDK v2: Stopping recording...');
-              _context7.p = 2;
+              _context9.p = 2;
               // Send stop_continuous_mode message to server
 
               this.sendMessage({
@@ -29153,21 +29604,21 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               this._releaseWakeLock();
 
               // Stop capturing audio from microphone
-              _context7.n = 3;
+              _context9.n = 3;
               return this.audioRecorder.stop();
             case 3:
               // Stop any playing audio
 
               this.stopAudioPlayback();
-              return _context7.a(2, true);
+              return _context9.a(2, true);
             case 4:
-              _context7.p = 4;
-              _t7 = _context7.v;
-              console.error('VoiceSDK v2: Error stopping recording:', _t7);
-              this.emit('error', _t7);
-              return _context7.a(2, false);
+              _context9.p = 4;
+              _t9 = _context9.v;
+              console.error('VoiceSDK v2: Error stopping recording:', _t9);
+              this.emit('error', _t9);
+              return _context9.a(2, false);
           }
-        }, _callee7, this, [[2, 4]]);
+        }, _callee9, this, [[2, 4]]);
       }));
       function stopRecording() {
         return _stopRecording.apply(this, arguments);
@@ -29181,27 +29632,27 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "toggleRecording",
     value: (function () {
-      var _toggleRecording = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
-        return _regenerator().w(function (_context8) {
-          while (1) switch (_context8.n) {
+      var _toggleRecording = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+        return _regenerator().w(function (_context0) {
+          while (1) switch (_context0.n) {
             case 0:
               if (!this.isRecording) {
-                _context8.n = 2;
+                _context0.n = 2;
                 break;
               }
-              _context8.n = 1;
+              _context0.n = 1;
               return this.stopRecording();
             case 1:
-              return _context8.a(2, _context8.v);
+              return _context0.a(2, _context0.v);
             case 2:
-              _context8.n = 3;
+              _context0.n = 3;
               return this.startRecording();
             case 3:
-              return _context8.a(2, _context8.v);
+              return _context0.a(2, _context0.v);
             case 4:
-              return _context8.a(2);
+              return _context0.a(2);
           }
-        }, _callee8, this);
+        }, _callee0, this);
       }));
       function toggleRecording() {
         return _toggleRecording.apply(this, arguments);
@@ -29232,33 +29683,33 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "_requestWakeLock",
     value: (function () {
-      var _requestWakeLock2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+      var _requestWakeLock2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
         var _this9 = this;
-        var _t8;
-        return _regenerator().w(function (_context9) {
-          while (1) switch (_context9.p = _context9.n) {
+        var _t0;
+        return _regenerator().w(function (_context1) {
+          while (1) switch (_context1.p = _context1.n) {
             case 0:
               if ('wakeLock' in navigator) {
-                _context9.n = 1;
+                _context1.n = 1;
                 break;
               }
               console.log('📱 VoiceSDK v2: Wake Lock API not available in this browser');
-              return _context9.a(2);
+              return _context1.a(2);
             case 1:
               if (!(this.wakeLock !== null || this._wakeLockRequesting)) {
-                _context9.n = 2;
+                _context1.n = 2;
                 break;
               }
               console.log('📱 VoiceSDK v2: Wake lock already active or being requested');
-              return _context9.a(2);
+              return _context1.a(2);
             case 2:
-              _context9.p = 2;
+              _context1.p = 2;
               this._wakeLockRequesting = true;
               // Request wake lock (screen type keeps screen on)
-              _context9.n = 3;
+              _context1.n = 3;
               return navigator.wakeLock.request('screen');
             case 3:
-              this.wakeLock = _context9.v;
+              this.wakeLock = _context1.v;
               console.log('📱 VoiceSDK v2: Screen wake lock activated - screen will stay on during call');
 
               // Handle wake lock release (e.g., user switches tabs, locks device)
@@ -29266,23 +29717,23 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
                 console.log('📱 VoiceSDK v2: Wake lock released by system');
                 _this9.wakeLock = null;
               });
-              _context9.n = 5;
+              _context1.n = 5;
               break;
             case 4:
-              _context9.p = 4;
-              _t8 = _context9.v;
+              _context1.p = 4;
+              _t0 = _context1.v;
               // Wake lock request failed (e.g., permission denied, battery saver mode)
-              console.warn('📱 VoiceSDK v2: Failed to request wake lock:', _t8.message);
+              console.warn('📱 VoiceSDK v2: Failed to request wake lock:', _t0.message);
               this.wakeLock = null;
               // Don't throw - this is a nice-to-have feature, not critical
             case 5:
-              _context9.p = 5;
+              _context1.p = 5;
               this._wakeLockRequesting = false;
-              return _context9.f(5);
+              return _context1.f(5);
             case 6:
-              return _context9.a(2);
+              return _context1.a(2);
           }
-        }, _callee9, this, [[2, 4, 5, 6]]);
+        }, _callee1, this, [[2, 4, 5, 6]]);
       }));
       function _requestWakeLock() {
         return _requestWakeLock2.apply(this, arguments);
@@ -29297,34 +29748,34 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "_releaseWakeLock",
     value: (function () {
-      var _releaseWakeLock2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
-        var _t9;
-        return _regenerator().w(function (_context0) {
-          while (1) switch (_context0.p = _context0.n) {
+      var _releaseWakeLock2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10() {
+        var _t1;
+        return _regenerator().w(function (_context10) {
+          while (1) switch (_context10.p = _context10.n) {
             case 0:
               if (!(this.wakeLock === null)) {
-                _context0.n = 1;
+                _context10.n = 1;
                 break;
               }
-              return _context0.a(2);
+              return _context10.a(2);
             case 1:
-              _context0.p = 1;
-              _context0.n = 2;
+              _context10.p = 1;
+              _context10.n = 2;
               return this.wakeLock.release();
             case 2:
               this.wakeLock = null;
               console.log('📱 VoiceSDK v2: Screen wake lock released');
-              _context0.n = 4;
+              _context10.n = 4;
               break;
             case 3:
-              _context0.p = 3;
-              _t9 = _context0.v;
-              console.warn('📱 VoiceSDK v2: Error releasing wake lock:', _t9.message);
+              _context10.p = 3;
+              _t1 = _context10.v;
+              console.warn('📱 VoiceSDK v2: Error releasing wake lock:', _t1.message);
               this.wakeLock = null;
             case 4:
-              return _context0.a(2);
+              return _context10.a(2);
           }
-        }, _callee0, this, [[1, 3]]);
+        }, _callee10, this, [[1, 3]]);
       }));
       function _releaseWakeLock() {
         return _releaseWakeLock2.apply(this, arguments);
@@ -29348,21 +29799,21 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "handleBargeIn",
     value: (function () {
-      var _handleBargeIn = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
-        return _regenerator().w(function (_context1) {
-          while (1) switch (_context1.n) {
+      var _handleBargeIn = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11() {
+        return _regenerator().w(function (_context11) {
+          while (1) switch (_context11.n) {
             case 0:
               this.stopAudioPlayback();
               if (this.isRecording) {
-                _context1.n = 1;
+                _context11.n = 1;
                 break;
               }
-              _context1.n = 1;
+              _context11.n = 1;
               return this.startRecording();
             case 1:
-              return _context1.a(2);
+              return _context11.a(2);
           }
-        }, _callee1, this);
+        }, _callee11, this);
       }));
       function handleBargeIn() {
         return _handleBargeIn.apply(this, arguments);
@@ -32275,10 +32726,17 @@ var TTPChatWidget = /*#__PURE__*/function () {
     this._flavorObj = this.config.flavor && _typeof(this.config.flavor) === 'object' ? this.config.flavor : null;
     if (this._flavorObj && this._flavorObj.type) {
       this._initFlavor(this._flavorObj.type);
-      this._initEcommerceVoiceStrip();
-    } else if (this._flavorObj && !this._flavorObj.type) {
+    } else if (this._flavorObj && !this._flavorObj.type && this._flavorObj.callView !== 'minimized') {
+      // A flavor object with neither a "type" nor callView:'minimized' is malformed.
+      // (callView:'minimized' alone is a valid flavor-less minimized-strip config.)
       console.error('[TTPChatWidget] flavor object is set but missing required "type" field. Widget will run in vanilla mode.');
     }
+    // The desktop minimized bottom strip is flavor-independent: it only needs
+    // flavor.callView === 'minimized' (+ desktop width). Init it regardless of
+    // whether a flavor type is present, so callView:'minimized' works standalone
+    // with no partner/flavor. _initEcommerceVoiceStrip() self-guards and no-ops
+    // when callView !== 'minimized' or on mobile.
+    this._initEcommerceVoiceStrip();
   }
 
   /**
@@ -32694,7 +33152,11 @@ var TTPChatWidget = /*#__PURE__*/function () {
           offset: positionConfig.offset || {
             x: 20,
             y: 20
-          }
+          },
+          // When true, the launcher pill / mobile FAB can be dragged around the
+          // viewport. Set position.draggablePersist:false to reset position each load.
+          draggable: false,
+          draggablePersist: true
         }, _typeof(userConfig.position) === 'object' ? userConfig.position : {}),
         // Button Configuration
         button: _objectSpread({
@@ -33330,6 +33792,125 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var footer = (_root$querySelector = root.querySelector) === null || _root$querySelector === void 0 ? void 0 : _root$querySelector.call(root, '.ttp-footer');
       if (footer) footer.style.display = visible ? '' : 'none';
     }
+
+    /**
+     * Resolve the most recent conversation id used by either channel.
+     * Prefers a live voice/text SDK value, then falls back to persisted state.
+     * @returns {string|null}
+     */
+  }, {
+    key: "_getLastConversationId",
+    value: function _getLastConversationId() {
+      var _this$voiceInterface3, _this$sdk;
+      var live = (_this$voiceInterface3 = this.voiceInterface) === null || _this$voiceInterface3 === void 0 || (_this$voiceInterface3 = _this$voiceInterface3.sdk) === null || _this$voiceInterface3 === void 0 || (_this$voiceInterface3 = _this$voiceInterface3.voiceSDK) === null || _this$voiceInterface3 === void 0 ? void 0 : _this$voiceInterface3.conversationId;
+      if (live) return live;
+      var textId = (_this$sdk = this.sdk) === null || _this$sdk === void 0 || (_this$sdk = _this$sdk.config) === null || _this$sdk === void 0 ? void 0 : _this$sdk.conversationId;
+      if (textId) return textId;
+      try {
+        var raw = sessionStorage.getItem('voice_resume_state');
+        if (raw) {
+          var s = JSON.parse(raw);
+          if (s && s.conversationId) return s.conversationId;
+        }
+      } catch (_) {/* ignore */}
+      try {
+        var t = localStorage.getItem('ttp_text_chat_conversation_id');
+        if (t) return t;
+      } catch (_) {/* ignore */}
+      return null;
+    }
+
+    /** Inline TalkToPC logo mark (speech bubble + sound waves). */
+  }, {
+    key: "_aboutLogoSVG",
+    value: function _aboutLogoSVG() {
+      return "<svg class=\"ttp-about-logo-mark\" width=\"34\" height=\"34\" viewBox=\"0 0 48 48\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"4\" y=\"6\" width=\"40\" height=\"30\" rx=\"10\" fill=\"url(#ttpAboutGrad)\"/>\n      <path d=\"M16 36l-4 7 11-7z\" fill=\"url(#ttpAboutGrad)\"/>\n      <g stroke=\"#ffffff\" stroke-width=\"2.6\" stroke-linecap=\"round\">\n        <line x1=\"18\" y1=\"17\" x2=\"18\" y2=\"25\"/>\n        <line x1=\"24\" y1=\"13\" x2=\"24\" y2=\"29\"/>\n        <line x1=\"30\" y1=\"18\" x2=\"30\" y2=\"24\"/>\n      </g>\n      <defs>\n        <linearGradient id=\"ttpAboutGrad\" x1=\"4\" y1=\"6\" x2=\"44\" y2=\"43\" gradientUnits=\"userSpaceOnUse\">\n          <stop stop-color=\"#8b5cf6\"/>\n          <stop offset=\"1\" stop-color=\"#6d28d9\"/>\n        </linearGradient>\n      </defs>\n    </svg>";
+    }
+
+    /**
+     * Inject the "About" dialog styles into document.head once.
+     * Global (light DOM) so the dialog renders above the desktop minimized strip,
+     * which lives outside the shadow root at the maximum z-index.
+     */
+  }, {
+    key: "_ensureAboutStyles",
+    value: function _ensureAboutStyles() {
+      if (document.getElementById('ttp-about-dialog-styles')) return;
+      var style = document.createElement('style');
+      style.id = 'ttp-about-dialog-styles';
+      style.textContent = "\n      .ttp-about-overlay {\n        position: fixed; inset: 0; z-index: 2147483647;\n        display: flex; align-items: center; justify-content: center;\n        padding: 16px; box-sizing: border-box;\n        background: rgba(15,15,25,0.55);\n        backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);\n        animation: ttpAboutFade 0.18s ease-out;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      }\n      @keyframes ttpAboutFade { from { opacity: 0; } to { opacity: 1; } }\n      .ttp-about-card {\n        position: relative; width: 100%; max-width: 320px; box-sizing: border-box;\n        background: #ffffff; color: #1f2937; border-radius: 16px;\n        padding: 24px 22px 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.35);\n        text-align: center; animation: ttpAboutPop 0.2s ease-out;\n      }\n      @keyframes ttpAboutPop {\n        from { transform: translateY(8px) scale(0.98); opacity: 0; }\n        to { transform: translateY(0) scale(1); opacity: 1; }\n      }\n      .ttp-about-close {\n        position: absolute; top: 10px; inset-inline-end: 10px;\n        background: none; border: none; cursor: pointer; color: #9ca3af;\n        padding: 6px; line-height: 0; border-radius: 50%;\n        transition: background 0.2s, color 0.2s;\n      }\n      .ttp-about-close:hover { background: #f3f4f6; color: #4b5563; }\n      .ttp-about-logo {\n        display: flex; align-items: center; justify-content: center;\n        gap: 8px; margin-bottom: 14px;\n      }\n      .ttp-about-logo-mark { display: block; flex-shrink: 0; }\n      .ttp-about-brand {\n        font-size: 20px; font-weight: 800; letter-spacing: -0.2px; color: #6d28d9;\n      }\n      .ttp-about-title {\n        font-size: 13px; font-weight: 600; text-transform: uppercase;\n        letter-spacing: 1px; color: #9ca3af; margin-bottom: 16px;\n      }\n      .ttp-about-rows {\n        display: flex; flex-direction: column; gap: 10px; text-align: start;\n      }\n      .ttp-about-row {\n        display: flex; flex-direction: column; gap: 3px;\n        background: #f9fafb; border: 1px solid #f0f0f4;\n        border-radius: 10px; padding: 10px 12px;\n      }\n      .ttp-about-key {\n        font-size: 11px; font-weight: 600; text-transform: uppercase;\n        letter-spacing: 0.5px; color: #9ca3af;\n      }\n      .ttp-about-val {\n        font-size: 14px; font-weight: 600; color: #1f2937; word-break: break-all;\n      }\n      .ttp-about-mono {\n        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n        font-size: 12.5px; font-weight: 500;\n      }\n      .ttp-about-muted { color: #9ca3af; font-weight: 500; font-style: italic; }\n    ";
+      document.head.appendChild(style);
+    }
+
+    /** Open the shared "About" dialog (logo + SDK version + last conversation id). */
+  }, {
+    key: "_openAboutModal",
+    value: function _openAboutModal() {
+      var _this8 = this,
+        _overlay$querySelecto;
+      // Toggle: if already open, close it.
+      if (this._aboutOverlay) {
+        this._closeAboutModal();
+        return;
+      }
+      this._ensureAboutStyles();
+      var version =  true ? "2.45.14" : 0;
+      var convId = this._getLastConversationId();
+      var t = function t(k, fb) {
+        try {
+          var _this8$voiceInterface, _this8$voiceInterface2, _this8$textInterface, _this8$textInterface$;
+          return ((_this8$voiceInterface = _this8.voiceInterface) === null || _this8$voiceInterface === void 0 || (_this8$voiceInterface2 = _this8$voiceInterface.t) === null || _this8$voiceInterface2 === void 0 ? void 0 : _this8$voiceInterface2.call(_this8$voiceInterface, k)) || ((_this8$textInterface = _this8.textInterface) === null || _this8$textInterface === void 0 || (_this8$textInterface$ = _this8$textInterface.t) === null || _this8$textInterface$ === void 0 ? void 0 : _this8$textInterface$.call(_this8$textInterface, k)) || fb;
+        } catch (_) {
+          return fb;
+        }
+      };
+      var title = t('aboutTitle', 'About');
+      var versionLabel = t('aboutVersion', 'SDK version');
+      var convLabel = t('aboutConversationId', 'Last conversation ID');
+      var noneLabel = t('aboutNoConversation', 'No conversation yet');
+      var overlay = document.createElement('div');
+      overlay.className = 'ttp-about-overlay';
+      overlay.innerHTML = "\n      <div class=\"ttp-about-card\" role=\"dialog\" aria-modal=\"true\" aria-label=\"".concat(title, "\">\n        <button type=\"button\" class=\"ttp-about-close\" aria-label=\"Close\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n            <path d=\"M10 2L2 10M2 2l8 8\"/>\n          </svg>\n        </button>\n        <div class=\"ttp-about-logo\">").concat(this._aboutLogoSVG(), "<span class=\"ttp-about-brand\">TalkToPC</span></div>\n        <div class=\"ttp-about-title\">").concat(title, "</div>\n        <div class=\"ttp-about-rows\">\n          <div class=\"ttp-about-row\">\n            <span class=\"ttp-about-key\">").concat(versionLabel, "</span>\n            <span class=\"ttp-about-val\" data-about-version></span>\n          </div>\n          <div class=\"ttp-about-row\">\n            <span class=\"ttp-about-key\">").concat(convLabel, "</span>\n            <span class=\"ttp-about-val ttp-about-mono\" data-about-conv></span>\n          </div>\n        </div>\n      </div>");
+
+      // Fill dynamic values via textContent to avoid any injection.
+      var verEl = overlay.querySelector('[data-about-version]');
+      if (verEl) verEl.textContent = version ? "v".concat(version) : '—';
+      var convEl = overlay.querySelector('[data-about-conv]');
+      if (convEl) {
+        convEl.textContent = convId || noneLabel;
+        if (!convId) convEl.classList.add('ttp-about-muted');
+      }
+      var close = function close() {
+        return _this8._closeAboutModal();
+      };
+      overlay.addEventListener('click', function (e) {
+        if (e.target === overlay) close();
+      });
+      (_overlay$querySelecto = overlay.querySelector('.ttp-about-close')) === null || _overlay$querySelecto === void 0 || _overlay$querySelecto.addEventListener('click', function (e) {
+        e.stopPropagation();
+        close();
+      });
+      this._aboutKeyHandler = function (e) {
+        if (e.key === 'Escape') close();
+      };
+      document.addEventListener('keydown', this._aboutKeyHandler);
+      document.body.appendChild(overlay);
+      this._aboutOverlay = overlay;
+    }
+
+    /** Close the "About" dialog if open. */
+  }, {
+    key: "_closeAboutModal",
+    value: function _closeAboutModal() {
+      if (this._aboutKeyHandler) {
+        document.removeEventListener('keydown', this._aboutKeyHandler);
+        this._aboutKeyHandler = null;
+      }
+      if (this._aboutOverlay) {
+        this._aboutOverlay.remove();
+        this._aboutOverlay = null;
+      }
+    }
   }, {
     key: "generatePositionStyles",
     value: function generatePositionStyles() {
@@ -33461,13 +34042,14 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var callActivePanelBg = callSurfaceGradient;
       var voiceIdleVisibleSelector = '#voiceInterface.active #voiceIdleState:not([style*="display: none"]):not([style*="display:none"])';
       var voiceActiveVisibleSelector = '#voiceInterface.active #voiceActiveState:not([style*="display: none"]):not([style*="display:none"])';
-      return "\n      /* Inline style display overrides - ensures JS show/hide works with !important CSS */\n      #text-chat-panel [style*=\"display: none\"],\n      #text-chat-panel [style*=\"display:none\"],\n      #text-chat-button-container [style*=\"display: none\"],\n      #text-chat-button-container [style*=\"display:none\"],\n      #ttpMobileLanding[style*=\"display: none\"],\n      #ttpMobileLanding[style*=\"display:none\"] {\n        display: none !important;\n      }\n      #text-chat-panel [style*=\"display: flex\"],\n      #text-chat-panel [style*=\"display:flex\"],\n      #text-chat-button-container [style*=\"display: flex\"],\n      #text-chat-button-container [style*=\"display:flex\"] {\n        display: flex !important;\n      }\n      #text-chat-panel [style*=\"display: block\"],\n      #text-chat-panel [style*=\"display:block\"] {\n        display: block !important;\n      }\n\n      /* MOBILE FIRST - Default styles for all devices */\n      #text-chat-widget {\n        position: fixed !important;\n        z-index: 10000".concat(important, ";\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif").concat(important, ";\n        /* Mobile defaults */\n        right: 10px").concat(important, ";\n        bottom: 10px").concat(important, ";\n        left: auto").concat(important, ";\n        top: auto").concat(important, ";\n      }\n      \n      /* Desktop positioning (only on larger screens) */\n      @media (min-width: 769px) {\n        #text-chat-widget {\n          ").concat(positionStyles, "\n          right: ").concat(this.config.position.horizontal === 'right' ? '20px' : 'auto').concat(important, ";\n          left: ").concat(this.config.position.horizontal === 'left' ? '20px' : 'auto').concat(important, ";\n          bottom: ").concat(this.config.position.vertical === 'bottom' ? '20px' : 'auto').concat(important, ";\n          top: ").concat(this.config.position.vertical === 'top' ? '20px' : 'auto').concat(important, ";\n        }\n      }\n      \n      /* Mobile override (force mobile positioning) */\n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* \u2500\u2500 Desktop Pill Launcher \u2500\u2500 */\n      #text-chat-button {\n        position: relative").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 8px").concat(important, ";\n        padding-block: 10px").concat(important, ";\n        padding-inline-start: 6px").concat(important, ";\n        padding-inline-end: 12px").concat(important, ";\n        z-index: 1").concat(important, ";\n        background: ").concat(pillGradient, ";\n        border: 1px solid rgba(139,92,246,0.15)").concat(important, ";\n        border-radius: 999px").concat(important, ";\n        box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15)").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: box-shadow 0.25s, transform 0.2s, padding 0.3s, gap 0.3s").concat(important, ";\n        font-family: inherit").concat(important, ";\n        color: ").concat(pillTextColor, ";\n        overflow: hidden").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      #text-chat-button:hover {\n        transform: translateY(-1px)").concat(important, ";\n        box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2)").concat(important, ";\n      }\n      #text-chat-button.open {\n        gap: 0px").concat(important, ";\n        padding: 9px").concat(important, ";\n        width: auto").concat(important, ";\n        min-width: 0").concat(important, ";\n        max-width: none").concat(important, ";\n      }\n\n      @media (min-width: 769px) {\n        #text-chat-button {\n          width: 158px").concat(important, ";\n          min-width: 158px").concat(important, ";\n          max-width: 158px").concat(important, ";\n        }\n      }\n\n      .ttp-pill-icon {\n        width: 36px").concat(important, "; height: 36px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: #ffffff").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .ttp-launcher-logo {\n        width: 22px").concat(important, "; height: 22px").concat(important, "; border-radius: 50%").concat(important, ";\n        object-fit: cover").concat(important, ";\n      }\n\n      /* Default pill launcher: same animated waveform as mobile FAB / landing */\n      .ttp-pill-icon--wave {\n        background: rgba(255, 255, 255, 0.15)").concat(important, ";\n      }\n      .ttp-pill-waveform {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 2px").concat(important, ";\n        height: 16px").concat(important, ";\n      }\n      .ttp-pill-waveform .bar {\n        width: 2px").concat(important, ";\n        background: #fff").concat(important, ";\n        border-radius: 1px").concat(important, ";\n        animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n      }\n      .ttp-pill-waveform .bar:nth-child(1) { height: 5px").concat(important, "; animation-delay: 0s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(2) { height: 10px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(3) { height: 16px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(4) { height: 8px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(5) { height: 12px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n      .ttp-pill-text {\n        display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 2px").concat(important, ";\n        max-width: 82px").concat(important, ";\n        opacity: 1").concat(important, ";\n        overflow: hidden").concat(important, ";\n        white-space: nowrap").concat(important, ";\n        transition: max-width 0.3s, opacity 0.2s").concat(important, ";\n      }\n      #text-chat-button.open .ttp-pill-text {\n        max-width: 0").concat(important, ";\n        opacity: 0").concat(important, ";\n      }\n      .ttp-pill-title {\n        font-size: 13px").concat(important, "; font-weight: 600").concat(important, "; color: ").concat(pillTextColor, ";\n        line-height: 1.25").concat(important, ";\n        overflow: hidden").concat(important, ";\n        text-overflow: ellipsis").concat(important, ";\n      }\n      .ttp-pill-status {\n        display: flex").concat(important, "; align-items: center").concat(important, "; gap: 4px").concat(important, ";\n        font-size: 11px").concat(important, "; color: ").concat(pillTextColor, "8c;\n        line-height: 1.25").concat(important, ";\n      }\n\n      /* Online dot (inside pill status) */\n      .ttp-launcher-dot {\n        width: 7px").concat(important, "; height: 7px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: ").concat(pillDotColor, ";\n        flex-shrink: 0").concat(important, ";\n        animation: ttp-dot-pulse 2s ease-in-out infinite").concat(important, ";\n      }\n      @keyframes ttp-dot-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }\n      \n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n        \n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n        }\n        \n        #text-chat-panel {\n          position: fixed !important;\n          right: 10px !important;\n          left: auto !important;\n          bottom: 92px !important; /* 56px button + 20px gap + 16px footer */\n          top: auto !important;\n          width: 340px !important;\n          max-width: calc(100vw - 20px) !important;\n          height: auto !important;\n          max-height: calc(100vh - 130px) !important;\n          transform: none !important;\n          margin: 0 !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 10px 14px").concat(important, ";\n          min-height: 56px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 15px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-icon {\n          width: 40px").concat(important, ";\n          height: 40px").concat(important, ";\n          min-width: 40px").concat(important, ";\n          min-height: 40px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 12px 16px !important;\n          min-height: 48px !important;\n        }\n        \n        #text-chat-send {\n          min-width: 48px !important;\n          min-height: 48px !important;\n          width: 48px !important;\n          height: 48px !important;\n        }\n        \n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n        \n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n        }\n        \n        #text-chat-panel {\n          right: 8px !important;\n          left: auto !important;\n          bottom: 86px !important; /* 54px button + 20px gap + 12px footer */\n          top: auto !important;\n          width: 340px !important;\n          max-width: calc(100vw - 16px) !important;\n          height: auto !important;\n          max-height: calc(100vh - 120px) !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 8px 12px").concat(important, ";\n          min-height: 52px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 14px").concat(important, ";\n        }\n        \n      }\n      \n      ").concat(anim.enableHover ? "\n        #text-chat-button:hover {\n          transform: translateY(-1px);\n        }\n      " : '', "\n      \n      /* Prompt Animation Keyframes */\n      @keyframes widget-shimmer {\n        0% { transform: translateX(-100%); }\n        100% { transform: translateX(200%); }\n      }\n      \n      @keyframes widget-ripple {\n        0% { transform: scale(1); opacity: 0.6; }\n        100% { transform: scale(2.5); opacity: 0; }\n      }\n      \n      @keyframes widget-float {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-8px); }\n      }\n      \n      @keyframes widget-bounce {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-10px); }\n      }\n      \n      @keyframes widget-pulse-ring {\n        0% { transform: scale(1); opacity: 0.4; }\n        100% { transform: scale(1.8); opacity: 0; }\n      }\n      \n      /* Prompt Bubble Container */\n      #text-chat-button-container {\n        position: fixed").concat(important, ";\n        ").concat(this.config.position.vertical === 'bottom' ? "bottom: ".concat(((_this$config$position = this.config.position.offset) === null || _this$config$position === void 0 ? void 0 : _this$config$position.y) || 20, "px;") : "top: ".concat(((_this$config$position2 = this.config.position.offset) === null || _this$config$position2 === void 0 ? void 0 : _this$config$position2.y) || 20, "px;"), "\n        ").concat(this.config.position.horizontal === 'right' ? "right: ".concat(((_this$config$position3 = this.config.position.offset) === null || _this$config$position3 === void 0 ? void 0 : _this$config$position3.x) || 20, "px;") : "left: ".concat(((_this$config$position4 = this.config.position.offset) === null || _this$config$position4 === void 0 ? void 0 : _this$config$position4.x) || 20, "px;"), "\n        width: auto").concat(important, ";\n        height: auto").concat(important, ";\n        z-index: 10001").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n      }\n      \n      @media (max-width: 768px) {\n        #text-chat-button-container {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-button-container {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* Prompt Bubble Styles */\n      .prompt-bubble {\n        position: absolute").concat(important, ";\n        z-index: 10002").concat(important, ";\n        pointer-events: none").concat(important, ";\n        white-space: nowrap").concat(important, ";\n      }\n      \n      .prompt-bubble.top {\n        bottom: calc(100% + 18px)").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translateX(-50%)").concat(important, ";\n      }\n      \n      .prompt-bubble.left {\n        right: calc(100% + 12px)").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n      }\n      \n      .prompt-bubble.right {\n        left: calc(100% + 12px)").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n      }\n      \n      /* Ensure animations preserve horizontal centering for top position */\n      .prompt-bubble.top.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-float {\n        animation: widget-float 2s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-pulse {\n        animation: pulse 2s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble-content {\n        position: relative").concat(important, ";\n        padding: 8px 16px").concat(important, ";\n        border-radius: 20px").concat(important, ";\n        font-weight: 500").concat(important, ";\n        font-size: 14px").concat(important, ";\n        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3)").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      \n      .prompt-bubble-shimmer {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent)").concat(important, ";\n        animation: widget-shimmer 2s infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-pulse {\n        animation: pulse 2s ease-in-out infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-float {\n        animation: widget-float 2s ease-in-out infinite").concat(important, ";\n      }\n      \n      /* Ensure top-positioned bubbles maintain horizontal centering during animations */\n      .prompt-bubble.top.animation-bounce,\n      .prompt-bubble.top.animation-float,\n      .prompt-bubble.top.animation-pulse {\n        /* Animation keyframes already include translateX(-50%) for centering */\n      }\n      \n      /* Prompt Bubble Arrow */\n      .prompt-bubble-arrow {\n        position: absolute").concat(important, ";\n        width: 0").concat(important, ";\n        height: 0").concat(important, ";\n        border: 8px solid transparent").concat(important, ";\n      }\n      \n      .prompt-bubble.top .prompt-bubble-arrow {\n        top: 100%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translateX(-50%)").concat(important, ";\n        border-top-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-bottom: none").concat(important, ";\n        margin-left: 0").concat(important, ";\n      }\n      \n      .prompt-bubble.left .prompt-bubble-arrow {\n        left: 100%").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        border-left-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-right: none").concat(important, ";\n      }\n      \n      .prompt-bubble.right .prompt-bubble-arrow {\n        right: 100%").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        border-right-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-left: none").concat(important, ";\n      }\n      \n      /* Pulse Rings */\n      .prompt-pulse-rings {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        pointer-events: none").concat(important, ";\n      }\n      \n      .prompt-pulse-ring {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: widget-pulse-ring 2s ease-out infinite").concat(important, ";\n      }\n      \n      .prompt-pulse-ring:nth-child(2) {\n        animation-delay: 0.5s").concat(important, ";\n      }\n      \n      /* Mobile adjustments for prompt bubble */\n      @media (max-width: 768px) {\n        .prompt-bubble-content {\n          font-size: 12px").concat(important, ";\n          padding: 6px 12px").concat(important, ";\n        }\n        \n        .prompt-bubble.top {\n          bottom: calc(100% + 14px)").concat(important, ";\n        }\n        \n        .prompt-bubble.left,\n        .prompt-bubble.right {\n          display: none").concat(important, "; /* Hide side prompts on mobile */\n        }\n      }\n      \n      /* Shared panel chrome; size/position differ \u2014 desktop card vs mobile sheet (see @media blocks earlier) */\n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed").concat(important, ";\n        background: ").concat(panelBg, ";\n        border-radius: 20px").concat(important, ";\n        border: ").concat(panel.border || '1px solid rgba(255,255,255,0.08)', ";\n        flex-direction: column").concat(important, ";\n        overflow: hidden").concat(important, ";\n        box-shadow: 0 24px 60px rgba(0,0,0,0.6)").concat(important, ";\n        opacity: 0").concat(important, ";\n        pointer-events: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      /* Desktop / tablet: floating 340px card anchored to launcher */\n      @media (min-width: 769px) {\n        #text-chat-panel {\n          bottom: calc(54px + 24px)").concat(important, "; /* launcher pill + gap */\n          ").concat(this.config.position.horizontal === 'right' ? 'right: 20px;' : 'left: 20px;', "\n          width: 340px").concat(important, ";\n          max-width: calc(100vw - 40px)").concat(important, ";\n          height: auto").concat(important, ";\n          max-height: calc(100vh - 100px)").concat(important, ";\n          transform-origin: bottom right").concat(important, ";\n        }\n        /* Text chat: fixed height so the message list scrolls instead of growing the panel per message */\n        #text-chat-panel:has(.text-interface.active) {\n          height: min(520px, calc(100vh - 100px))").concat(important, ";\n        }\n      }\n      \n      #text-chat-panel.open {\n        display: flex").concat(important, ";\n        opacity: 1").concat(important, ";\n        pointer-events: auto").concat(important, ";\n      }\n\n      /* Shell for panel inner */\n      .widget-shell { width: 100%").concat(important, "; padding: 0").concat(important, "; border-radius: 20px").concat(important, "; background: transparent").concat(important, "; overflow: hidden").concat(important, "; display: flex").concat(important, "; flex-direction: column").concat(important, "; box-sizing: border-box").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, "; }\n      .panel-inner { width: 100%").concat(important, "; background: ").concat(panelBg, "; border-radius: 20px").concat(important, "; border: none").concat(important, "; overflow: hidden").concat(important, "; display:flex").concat(important, "; flex-direction: column").concat(important, "; padding: 0").concat(important, "; box-sizing: border-box").concat(important, "; max-width: 100%").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, "; }\n\n      #text-chat-panel .widget-container {\n        width: 100%").concat(important, "; background: ").concat(panelBg, "; overflow: visible").concat(important, "; display: flex").concat(important, "; flex-direction: column").concat(important, "; border-radius: 20px").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, ";\n      }\n\n      /* Voice idle: one gradient for voice UI + footer (Powered by), not a flat strip under buttons */\n      #text-chat-panel.open:has(").concat(voiceIdleVisibleSelector, ") {\n        background: linear-gradient(160deg, ").concat(idleHeroGrad1, " 0%, ").concat(idleHeroGrad2, " 100%)").concat(important, ";\n      }\n      #text-chat-panel .widget-container:has(").concat(voiceIdleVisibleSelector, ") {\n        background: linear-gradient(160deg, ").concat(idleHeroGrad1, " 0%, ").concat(idleHeroGrad2, " 100%)").concat(important, ";\n      }\n\n      /* Voice active call: same hero gradient as idle + mobile minimized bar */\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel .widget-container:has(").concat(voiceActiveVisibleSelector, ") {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") .widget-shell {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") .panel-inner {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") .ttp-footer {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n\n      ").concat(textUsesVoiceTheme ? "\n      /* Text chat with voice theme: same hero surface as voice idle; inner shells transparent */\n      #text-chat-panel.open:has(.text-interface.active) {\n        background: ".concat(callSurfaceGradient).concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .widget-shell,\n      #text-chat-panel.open:has(.text-interface.active) .panel-inner,\n      #text-chat-panel.open:has(.text-interface.active) .widget-container {\n        background: transparent").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer {\n        background: transparent").concat(important, ";\n        border-top-color: rgba(255,255,255,0.06)").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer span {\n        color: rgba(255,255,255,0.35)").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer a {\n        color: ").concat(footerLinkOnDarkHero).concat(important, ";\n      }\n      ") : '', "\n      \n      /* Voice may scroll as a whole; text chat keeps a fixed shell and scrolls #messagesContainer only */\n      #text-chat-panel .widget-container > .voice-interface {\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        overflow-x: visible").concat(important, ";\n      }\n      #text-chat-panel .widget-container > .text-interface {\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n        overflow-x: visible").concat(important, ";\n      }\n      \n      /* Header is removed in new design - hero serves as header */\n      #text-chat-panel .widget-header { display: none").concat(important, "; }\n\n      ").concat(showVoice ? this.voiceInterface.generateCSS() : '', "\n      ").concat(showText ? this.textInterface.generateCSS() : '', "\n      \n      /* Footer Branding */\n      .ttp-footer {\n        padding: 6px 18px 10px").concat(important, ";\n        border-top: 1px solid ").concat(footerBorderColor, ";\n        display: flex").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n        background: transparent").concat(important, ";\n      }\n      .ttp-footer span { font-size: 10px").concat(important, "; color: ").concat(footerTextColor, "; }\n      .ttp-footer a { color: ").concat(footerLinkColor, "; text-decoration: none").concat(important, "; font-weight: 600").concat(important, "; }\n      .ttp-footer a:hover { opacity: 0.85").concat(important, "; }\n      .ttp-footer a b { font-weight: 700").concat(important, "; }\n      \n      #text-chat-send-hint {\n        text-align: center").concat(important, ";\n        line-height: 1.4").concat(important, ";\n      }\n      \n      .agent-thinking {\n        font-style: italic").concat(important, ";\n        color: #6B7280").concat(important, ";\n      }\n\n      /* ========================================\n         MOBILE PILL BUTTON & LANDING OVERLAY\n         Hidden on desktop, shown on mobile only\n         ======================================== */\n      .ttp-mobile-fab {\n        display: none").concat(important, ";\n      }\n\n      .ttp-mobile-landing {\n        display: none").concat(important, ";\n      }\n\n      @keyframes ttpWaveAnimation {\n        0%, 100% { transform: scaleY(0.4); }\n        50% { transform: scaleY(1); }\n      }\n\n      @keyframes ttpPulseAnimation {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.5; }\n      }\n\n      @media (max-width: 768px) {\n        /* Hide desktop pill button on mobile */\n        #text-chat-button {\n          display: none !important;\n        }\n\n        /* Re-flow the container for pill shape */\n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n          min-width: 0 !important;\n          min-height: 0 !important;\n          max-width: none !important;\n          max-height: none !important;\n        }\n\n        /* Show mobile pill button */\n        .ttp-mobile-fab {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 10px").concat(important, ";\n          padding: 10px 16px 10px 12px").concat(important, ";\n          background: ").concat(pillGradient, ";\n          border: none").concat(important, ";\n          border-radius: 24px").concat(important, ";\n          cursor: pointer").concat(important, ";\n          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)").concat(important, ";\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)").concat(important, ";\n          z-index: 1").concat(important, ";\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif").concat(important, ";\n          touch-action: manipulation").concat(important, ";\n          -webkit-tap-highlight-color: transparent").concat(important, ";\n        }\n\n        .ttp-mobile-fab:hover {\n          transform: translateY(-3px)").concat(important, ";\n          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4)").concat(important, ";\n        }\n\n        .ttp-mobile-fab__icon-wrap {\n          width: 36px").concat(important, ";\n          height: 36px").concat(important, ";\n          border-radius: 50%").concat(important, ";\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 2px").concat(important, ";\n          height: 16px").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform .bar {\n          width: 2px").concat(important, ";\n          background: #fff").concat(important, ";\n          border-radius: 1px").concat(important, ";\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform .bar:nth-child(1) { height: 5px").concat(important, "; animation-delay: 0s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(2) { height: 10px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(3) { height: 16px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(4) { height: 8px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(5) { height: 12px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n        .ttp-mobile-fab__label-wrap {\n          display: flex").concat(important, ";\n          flex-direction: column").concat(important, ";\n          align-items: flex-start").concat(important, ";\n          gap: 1px").concat(important, ";\n        }\n\n        .ttp-mobile-fab__label {\n          color: ").concat(pillTextColor, ";\n          font-size: 14px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          line-height: 1.2").concat(important, ";\n        }\n\n        .ttp-mobile-fab__status {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 4px").concat(important, ";\n          font-size: 11px").concat(important, ";\n          color: ").concat(pillTextColor, "b3;\n          line-height: 1.2").concat(important, ";\n        }\n\n        .ttp-mobile-fab__dot {\n          width: 6px").concat(important, ";\n          height: 6px").concat(important, ";\n          background: ").concat(pillDotColor, ";\n          border-radius: 50%").concat(important, ";\n          box-shadow: 0 0 6px ").concat(pillDotColor, "99;\n        }\n\n        /* ---- Mobile Landing Overlay ---- */\n        .ttp-mobile-landing.active {\n          display: block").concat(important, ";\n          position: fixed").concat(important, ";\n          bottom: 16px").concat(important, ";\n          left: 12px").concat(important, ";\n          right: 12px").concat(important, ";\n          background: ").concat(pillGradient, ";\n          border-radius: 20px").concat(important, ";\n          overflow: hidden").concat(important, ";\n          box-shadow:\n            0 10px 40px rgba(0, 0, 0, 0.3),\n            0 0 0 1px rgba(255, 255, 255, 0.1) inset").concat(important, ";\n          z-index: 10002").concat(important, ";\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif").concat(important, ";\n        }\n\n        .ttp-mobile-landing::before {\n          content: ''").concat(important, ";\n          position: absolute").concat(important, ";\n          top: 0").concat(important, ";\n          left: 0").concat(important, ";\n          right: 0").concat(important, ";\n          height: 1px").concat(important, ";\n          background: linear-gradient(90deg,\n            transparent 0%,\n            rgba(255, 255, 255, 0.3) 50%,\n            transparent 100%);\n        }\n\n        .ttp-mobile-landing__header {\n          padding: 14px 16px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 12px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__avatar {\n          width: 44px").concat(important, ";\n          height: 44px").concat(important, ";\n          border-radius: 12px").concat(important, ";\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 3px").concat(important, ";\n          height: 20px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform .bar {\n          width: 3px").concat(important, ";\n          background: rgba(255, 255, 255, 0.9)").concat(important, ";\n          border-radius: 2px").concat(important, ";\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform .bar:nth-child(1) { height: 6px").concat(important, "; animation-delay: 0s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(2) { height: 12px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(3) { height: 20px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(4) { height: 10px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(5) { height: 16px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n        .ttp-mobile-landing__info {\n          flex: 1").concat(important, ";\n          min-width: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__name {\n          color: #fff").concat(important, ";\n          font-size: 15px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          margin-bottom: 2px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__status {\n          color: rgba(255, 255, 255, 0.7)").concat(important, ";\n          font-size: 12px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 5px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__dot {\n          width: 6px").concat(important, ";\n          height: 6px").concat(important, ";\n          background: ").concat(header.onlineIndicatorDotColor || '#10b981', ";\n          border-radius: 50%").concat(important, ";\n          animation: ttpPulseAnimation 2s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-landing__close {\n          width: 32px").concat(important, ";\n          height: 32px").concat(important, ";\n          border-radius: 10px").concat(important, ";\n          background: rgba(255, 255, 255, 0.1)").concat(important, ";\n          border: none").concat(important, ";\n          color: rgba(255, 255, 255, 0.7)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          cursor: pointer").concat(important, ";\n          transition: all 0.2s").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__close:hover {\n          background: rgba(255, 255, 255, 0.2)").concat(important, ";\n          color: #fff").concat(important, ";\n        }\n\n        .ttp-mobile-landing__error {\n          margin: 0 14px 10px").concat(important, ";\n          padding: 10px 12px").concat(important, ";\n          background: #fef2f2").concat(important, ";\n          border: 1px solid #fecaca").concat(important, ";\n          border-radius: 10px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: flex-start").concat(important, ";\n          gap: 8px").concat(important, ";\n          color: #b91c1c").concat(important, ";\n          font-size: 13px").concat(important, ";\n          line-height: 1.4").concat(important, ";\n        }\n        .ttp-mobile-landing__error svg {\n          flex-shrink: 0").concat(important, ";\n          margin-top: 1px").concat(important, ";\n          stroke: #dc2626").concat(important, ";\n        }\n\n        .ttp-mobile-landing__actions {\n          padding: 0 14px 14px").concat(important, ";\n          display: flex").concat(important, ";\n          gap: 10px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn {\n          flex: 1").concat(important, ";\n          padding: 14px").concat(important, ";\n          border-radius: 12px").concat(important, ";\n          border: none").concat(important, ";\n          cursor: pointer").concat(important, ";\n          font-family: inherit").concat(important, ";\n          font-size: 14px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          gap: 10px").concat(important, ";\n          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)").concat(important, ";\n          touch-action: manipulation").concat(important, ";\n          -webkit-tap-highlight-color: transparent").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn svg {\n          width: 20px").concat(important, ";\n          height: 20px").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--call {\n          background: #fff").concat(important, ";\n          color: ").concat(header.backgroundColor || '#7C3AED', ";\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--call:hover {\n          transform: translateY(-2px)").concat(important, ";\n          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--text {\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          color: #fff").concat(important, ";\n          border: 1px solid rgba(255, 255, 255, 0.1)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--text:hover {\n          background: rgba(255, 255, 255, 0.2)").concat(important, ";\n          border-color: rgba(255, 255, 255, 0.2)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__footer {\n          padding: 10px 16px").concat(important, ";\n          display: flex").concat(important, ";\n          justify-content: center").concat(important, ";\n          border-top: 1px solid rgba(255, 255, 255, 0.08)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered {\n          color: rgba(255, 255, 255, 0.4)").concat(important, ";\n          font-size: 11px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 4px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered svg {\n          width: 10px").concat(important, ";\n          height: 10px").concat(important, ";\n          color: #f59e0b").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered a {\n          color: ").concat(footerLinkColor).concat(important, ";\n          text-decoration: none").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered a:hover {\n          opacity: 0.88").concat(important, ";\n        }\n      }\n    ");
+      return "\n      /* Inline style display overrides - ensures JS show/hide works with !important CSS */\n      #text-chat-panel [style*=\"display: none\"],\n      #text-chat-panel [style*=\"display:none\"],\n      #text-chat-button-container [style*=\"display: none\"],\n      #text-chat-button-container [style*=\"display:none\"],\n      #ttpMobileLanding[style*=\"display: none\"],\n      #ttpMobileLanding[style*=\"display:none\"] {\n        display: none !important;\n      }\n      #text-chat-panel [style*=\"display: flex\"],\n      #text-chat-panel [style*=\"display:flex\"],\n      #text-chat-button-container [style*=\"display: flex\"],\n      #text-chat-button-container [style*=\"display:flex\"] {\n        display: flex !important;\n      }\n      #text-chat-panel [style*=\"display: block\"],\n      #text-chat-panel [style*=\"display:block\"] {\n        display: block !important;\n      }\n\n      /* MOBILE FIRST - Default styles for all devices */\n      #text-chat-widget {\n        position: fixed !important;\n        z-index: 10000".concat(important, ";\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif").concat(important, ";\n        /* Mobile defaults */\n        right: 10px").concat(important, ";\n        bottom: 10px").concat(important, ";\n        left: auto").concat(important, ";\n        top: auto").concat(important, ";\n      }\n      \n      /* Desktop positioning (only on larger screens) */\n      @media (min-width: 769px) {\n        #text-chat-widget {\n          ").concat(positionStyles, "\n          right: ").concat(this.config.position.horizontal === 'right' ? '20px' : 'auto').concat(important, ";\n          left: ").concat(this.config.position.horizontal === 'left' ? '20px' : 'auto').concat(important, ";\n          bottom: ").concat(this.config.position.vertical === 'bottom' ? '20px' : 'auto').concat(important, ";\n          top: ").concat(this.config.position.vertical === 'top' ? '20px' : 'auto').concat(important, ";\n        }\n      }\n      \n      /* Mobile override (force mobile positioning) */\n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* \u2500\u2500 Desktop Pill Launcher \u2500\u2500 */\n      #text-chat-button {\n        position: relative").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 8px").concat(important, ";\n        padding-block: 10px").concat(important, ";\n        padding-inline-start: 6px").concat(important, ";\n        padding-inline-end: 12px").concat(important, ";\n        z-index: 1").concat(important, ";\n        background: ").concat(pillGradient, ";\n        border: 1px solid rgba(139,92,246,0.15)").concat(important, ";\n        border-radius: 999px").concat(important, ";\n        box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15)").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: box-shadow 0.25s, transform 0.2s, padding 0.3s, gap 0.3s").concat(important, ";\n        font-family: inherit").concat(important, ";\n        color: ").concat(pillTextColor, ";\n        overflow: hidden").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      #text-chat-button:hover {\n        transform: translateY(-1px)").concat(important, ";\n        box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2)").concat(important, ";\n      }\n      #text-chat-button.open {\n        gap: 0px").concat(important, ";\n        padding: 9px").concat(important, ";\n        width: auto").concat(important, ";\n        min-width: 0").concat(important, ";\n        max-width: none").concat(important, ";\n      }\n\n      @media (min-width: 769px) {\n        #text-chat-button {\n          width: 158px").concat(important, ";\n          min-width: 158px").concat(important, ";\n          max-width: 158px").concat(important, ";\n        }\n      }\n\n      .ttp-pill-icon {\n        width: 36px").concat(important, "; height: 36px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: #ffffff").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .ttp-launcher-logo {\n        width: 22px").concat(important, "; height: 22px").concat(important, "; border-radius: 50%").concat(important, ";\n        object-fit: cover").concat(important, ";\n      }\n\n      /* Default pill launcher: same animated waveform as mobile FAB / landing */\n      .ttp-pill-icon--wave {\n        background: rgba(255, 255, 255, 0.15)").concat(important, ";\n      }\n      .ttp-pill-waveform {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 2px").concat(important, ";\n        height: 16px").concat(important, ";\n      }\n      .ttp-pill-waveform .bar {\n        width: 2px").concat(important, ";\n        background: #fff").concat(important, ";\n        border-radius: 1px").concat(important, ";\n        animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n      }\n      .ttp-pill-waveform .bar:nth-child(1) { height: 5px").concat(important, "; animation-delay: 0s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(2) { height: 10px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(3) { height: 16px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(4) { height: 8px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(5) { height: 12px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n      .ttp-pill-text {\n        display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 2px").concat(important, ";\n        max-width: 82px").concat(important, ";\n        opacity: 1").concat(important, ";\n        overflow: hidden").concat(important, ";\n        white-space: nowrap").concat(important, ";\n        transition: max-width 0.3s, opacity 0.2s").concat(important, ";\n      }\n      #text-chat-button.open .ttp-pill-text {\n        max-width: 0").concat(important, ";\n        opacity: 0").concat(important, ";\n      }\n      .ttp-pill-title {\n        font-size: 13px").concat(important, "; font-weight: 600").concat(important, "; color: ").concat(pillTextColor, ";\n        line-height: 1.25").concat(important, ";\n        overflow: hidden").concat(important, ";\n        text-overflow: ellipsis").concat(important, ";\n      }\n      .ttp-pill-status {\n        display: flex").concat(important, "; align-items: center").concat(important, "; gap: 4px").concat(important, ";\n        font-size: 11px").concat(important, "; color: ").concat(pillTextColor, "8c;\n        line-height: 1.25").concat(important, ";\n      }\n\n      /* Online dot (inside pill status) */\n      .ttp-launcher-dot {\n        width: 7px").concat(important, "; height: 7px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: ").concat(pillDotColor, ";\n        flex-shrink: 0").concat(important, ";\n        animation: ttp-dot-pulse 2s ease-in-out infinite").concat(important, ";\n      }\n      @keyframes ttp-dot-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }\n      \n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n        \n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n        }\n        \n        #text-chat-panel {\n          position: fixed !important;\n          right: 10px !important;\n          left: auto !important;\n          bottom: 92px !important; /* 56px button + 20px gap + 16px footer */\n          top: auto !important;\n          width: 340px !important;\n          max-width: calc(100vw - 20px) !important;\n          height: auto !important;\n          max-height: calc(100vh - 130px) !important;\n          transform: none !important;\n          margin: 0 !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 10px 14px").concat(important, ";\n          min-height: 56px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 15px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-icon {\n          width: 40px").concat(important, ";\n          height: 40px").concat(important, ";\n          min-width: 40px").concat(important, ";\n          min-height: 40px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 12px 16px !important;\n          min-height: 48px !important;\n        }\n        \n        #text-chat-send {\n          min-width: 48px !important;\n          min-height: 48px !important;\n          width: 48px !important;\n          height: 48px !important;\n        }\n        \n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n        \n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n        }\n        \n        #text-chat-panel {\n          right: 8px !important;\n          left: auto !important;\n          bottom: 86px !important; /* 54px button + 20px gap + 12px footer */\n          top: auto !important;\n          width: 340px !important;\n          max-width: calc(100vw - 16px) !important;\n          height: auto !important;\n          max-height: calc(100vh - 120px) !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 8px 12px").concat(important, ";\n          min-height: 52px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 14px").concat(important, ";\n        }\n        \n      }\n      \n      ").concat(anim.enableHover ? "\n        #text-chat-button:hover {\n          transform: translateY(-1px);\n        }\n      " : '', "\n      \n      /* Prompt Animation Keyframes */\n      @keyframes widget-shimmer {\n        0% { transform: translateX(-100%); }\n        100% { transform: translateX(200%); }\n      }\n      \n      @keyframes widget-ripple {\n        0% { transform: scale(1); opacity: 0.6; }\n        100% { transform: scale(2.5); opacity: 0; }\n      }\n      \n      @keyframes widget-float {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-8px); }\n      }\n      \n      @keyframes widget-bounce {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-10px); }\n      }\n      \n      @keyframes widget-pulse-ring {\n        0% { transform: scale(1); opacity: 0.4; }\n        100% { transform: scale(1.8); opacity: 0; }\n      }\n      \n      /* Prompt Bubble Container */\n      #text-chat-button-container {\n        position: fixed").concat(important, ";\n        ").concat(this.config.position.vertical === 'bottom' ? "bottom: ".concat(((_this$config$position = this.config.position.offset) === null || _this$config$position === void 0 ? void 0 : _this$config$position.y) || 20, "px;") : "top: ".concat(((_this$config$position2 = this.config.position.offset) === null || _this$config$position2 === void 0 ? void 0 : _this$config$position2.y) || 20, "px;"), "\n        ").concat(this.config.position.horizontal === 'right' ? "right: ".concat(((_this$config$position3 = this.config.position.offset) === null || _this$config$position3 === void 0 ? void 0 : _this$config$position3.x) || 20, "px;") : "left: ".concat(((_this$config$position4 = this.config.position.offset) === null || _this$config$position4 === void 0 ? void 0 : _this$config$position4.x) || 20, "px;"), "\n        width: auto").concat(important, ";\n        height: auto").concat(important, ";\n        z-index: 10001").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n      }\n      \n      @media (max-width: 768px) {\n        #text-chat-button-container {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-button-container {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* Prompt Bubble Styles */\n      .prompt-bubble {\n        position: absolute").concat(important, ";\n        z-index: 10002").concat(important, ";\n        pointer-events: none").concat(important, ";\n        white-space: nowrap").concat(important, ";\n      }\n      \n      .prompt-bubble.top {\n        bottom: calc(100% + 18px)").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translateX(-50%)").concat(important, ";\n      }\n      \n      .prompt-bubble.left {\n        right: calc(100% + 12px)").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n      }\n      \n      .prompt-bubble.right {\n        left: calc(100% + 12px)").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n      }\n      \n      /* Ensure animations preserve horizontal centering for top position */\n      .prompt-bubble.top.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-float {\n        animation: widget-float 2s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-pulse {\n        animation: pulse 2s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble-content {\n        position: relative").concat(important, ";\n        padding: 8px 16px").concat(important, ";\n        border-radius: 20px").concat(important, ";\n        font-weight: 500").concat(important, ";\n        font-size: 14px").concat(important, ";\n        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3)").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      \n      .prompt-bubble-shimmer {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent)").concat(important, ";\n        animation: widget-shimmer 2s infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-pulse {\n        animation: pulse 2s ease-in-out infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-float {\n        animation: widget-float 2s ease-in-out infinite").concat(important, ";\n      }\n      \n      /* Ensure top-positioned bubbles maintain horizontal centering during animations */\n      .prompt-bubble.top.animation-bounce,\n      .prompt-bubble.top.animation-float,\n      .prompt-bubble.top.animation-pulse {\n        /* Animation keyframes already include translateX(-50%) for centering */\n      }\n      \n      /* Prompt Bubble Arrow */\n      .prompt-bubble-arrow {\n        position: absolute").concat(important, ";\n        width: 0").concat(important, ";\n        height: 0").concat(important, ";\n        border: 8px solid transparent").concat(important, ";\n      }\n      \n      .prompt-bubble.top .prompt-bubble-arrow {\n        top: 100%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translateX(-50%)").concat(important, ";\n        border-top-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-bottom: none").concat(important, ";\n        margin-left: 0").concat(important, ";\n      }\n      \n      .prompt-bubble.left .prompt-bubble-arrow {\n        left: 100%").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        border-left-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-right: none").concat(important, ";\n      }\n      \n      .prompt-bubble.right .prompt-bubble-arrow {\n        right: 100%").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        border-right-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-left: none").concat(important, ";\n      }\n      \n      /* Pulse Rings */\n      .prompt-pulse-rings {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        pointer-events: none").concat(important, ";\n      }\n      \n      .prompt-pulse-ring {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: widget-pulse-ring 2s ease-out infinite").concat(important, ";\n      }\n      \n      .prompt-pulse-ring:nth-child(2) {\n        animation-delay: 0.5s").concat(important, ";\n      }\n      \n      /* Mobile adjustments for prompt bubble */\n      @media (max-width: 768px) {\n        .prompt-bubble-content {\n          font-size: 12px").concat(important, ";\n          padding: 6px 12px").concat(important, ";\n        }\n        \n        .prompt-bubble.top {\n          bottom: calc(100% + 14px)").concat(important, ";\n        }\n        \n        .prompt-bubble.left,\n        .prompt-bubble.right {\n          display: none").concat(important, "; /* Hide side prompts on mobile */\n        }\n      }\n      \n      /* Shared panel chrome; size/position differ \u2014 desktop card vs mobile sheet (see @media blocks earlier) */\n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed").concat(important, ";\n        background: ").concat(panelBg, ";\n        border-radius: 20px").concat(important, ";\n        border: ").concat(panel.border || '1px solid rgba(255,255,255,0.08)', ";\n        flex-direction: column").concat(important, ";\n        overflow: hidden").concat(important, ";\n        box-shadow: 0 24px 60px rgba(0,0,0,0.6)").concat(important, ";\n        opacity: 0").concat(important, ";\n        pointer-events: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      /* Desktop / tablet: floating 340px card anchored to launcher */\n      @media (min-width: 769px) {\n        #text-chat-panel {\n          bottom: calc(54px + 24px)").concat(important, "; /* launcher pill + gap */\n          ").concat(this.config.position.horizontal === 'right' ? 'right: 20px;' : 'left: 20px;', "\n          width: 340px").concat(important, ";\n          max-width: calc(100vw - 40px)").concat(important, ";\n          height: auto").concat(important, ";\n          max-height: calc(100vh - 100px)").concat(important, ";\n          transform-origin: bottom right").concat(important, ";\n        }\n        /* Text chat: fixed height so the message list scrolls instead of growing the panel per message */\n        #text-chat-panel:has(.text-interface.active) {\n          height: min(520px, calc(100vh - 100px))").concat(important, ";\n        }\n      }\n      \n      #text-chat-panel.open {\n        display: flex").concat(important, ";\n        opacity: 1").concat(important, ";\n        pointer-events: auto").concat(important, ";\n      }\n\n      /* Shell for panel inner */\n      .widget-shell { width: 100%").concat(important, "; padding: 0").concat(important, "; border-radius: 20px").concat(important, "; background: transparent").concat(important, "; overflow: hidden").concat(important, "; display: flex").concat(important, "; flex-direction: column").concat(important, "; box-sizing: border-box").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, "; }\n      .panel-inner { width: 100%").concat(important, "; background: ").concat(panelBg, "; border-radius: 20px").concat(important, "; border: none").concat(important, "; overflow: hidden").concat(important, "; display:flex").concat(important, "; flex-direction: column").concat(important, "; padding: 0").concat(important, "; box-sizing: border-box").concat(important, "; max-width: 100%").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, "; }\n\n      #text-chat-panel .widget-container {\n        width: 100%").concat(important, "; background: ").concat(panelBg, "; overflow: visible").concat(important, "; display: flex").concat(important, "; flex-direction: column").concat(important, "; border-radius: 20px").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, ";\n      }\n\n      /* Voice idle: one gradient for voice UI + footer (Powered by), not a flat strip under buttons */\n      #text-chat-panel.open:has(").concat(voiceIdleVisibleSelector, ") {\n        background: linear-gradient(160deg, ").concat(idleHeroGrad1, " 0%, ").concat(idleHeroGrad2, " 100%)").concat(important, ";\n      }\n      #text-chat-panel .widget-container:has(").concat(voiceIdleVisibleSelector, ") {\n        background: linear-gradient(160deg, ").concat(idleHeroGrad1, " 0%, ").concat(idleHeroGrad2, " 100%)").concat(important, ";\n      }\n\n      /* Voice active call: same hero gradient as idle + mobile minimized bar */\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel .widget-container:has(").concat(voiceActiveVisibleSelector, ") {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") .widget-shell {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") .panel-inner {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") .ttp-footer {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n\n      ").concat(textUsesVoiceTheme ? "\n      /* Text chat with voice theme: same hero surface as voice idle; inner shells transparent */\n      #text-chat-panel.open:has(.text-interface.active) {\n        background: ".concat(callSurfaceGradient).concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .widget-shell,\n      #text-chat-panel.open:has(.text-interface.active) .panel-inner,\n      #text-chat-panel.open:has(.text-interface.active) .widget-container {\n        background: transparent").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer {\n        background: transparent").concat(important, ";\n        border-top-color: rgba(255,255,255,0.06)").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer span {\n        color: rgba(255,255,255,0.35)").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer a {\n        color: ").concat(footerLinkOnDarkHero).concat(important, ";\n      }\n      ") : '', "\n      \n      /* Voice may scroll as a whole; text chat keeps a fixed shell and scrolls #messagesContainer only */\n      #text-chat-panel .widget-container > .voice-interface {\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        overflow-x: visible").concat(important, ";\n      }\n      #text-chat-panel .widget-container > .text-interface {\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n        overflow-x: visible").concat(important, ";\n      }\n      \n      /* Header is removed in new design - hero serves as header */\n      #text-chat-panel .widget-header { display: none").concat(important, "; }\n\n      ").concat(showVoice ? this.voiceInterface.generateCSS() : '', "\n      ").concat(showText ? this.textInterface.generateCSS() : '', "\n      \n      /* Footer Branding */\n      .ttp-footer {\n        padding: 6px 18px 10px").concat(important, ";\n        border-top: 1px solid ").concat(footerBorderColor, ";\n        display: flex").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n        background: transparent").concat(important, ";\n      }\n      .ttp-footer span { font-size: 10px").concat(important, "; color: ").concat(footerTextColor, "; }\n      .ttp-footer a { color: ").concat(footerLinkColor, "; text-decoration: none").concat(important, "; font-weight: 600").concat(important, "; }\n      .ttp-footer a:hover { opacity: 0.85").concat(important, "; }\n      .ttp-footer a b { font-weight: 700").concat(important, "; }\n      \n      #text-chat-send-hint {\n        text-align: center").concat(important, ";\n        line-height: 1.4").concat(important, ";\n      }\n      \n      .agent-thinking {\n        font-style: italic").concat(important, ";\n        color: #6B7280").concat(important, ";\n      }\n\n      /* ========================================\n         MOBILE PILL BUTTON & LANDING OVERLAY\n         Hidden on desktop, shown on mobile only\n         ======================================== */\n      .ttp-mobile-fab {\n        display: none").concat(important, ";\n      }\n\n      .ttp-mobile-landing {\n        display: none").concat(important, ";\n      }\n\n      @keyframes ttpWaveAnimation {\n        0%, 100% { transform: scaleY(0.4); }\n        50% { transform: scaleY(1); }\n      }\n\n      @keyframes ttpPulseAnimation {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.5; }\n      }\n\n      @media (max-width: 768px) {\n        /* Hide desktop pill button on mobile */\n        #text-chat-button {\n          display: none !important;\n        }\n\n        /* Re-flow the container for pill shape */\n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n          min-width: 0 !important;\n          min-height: 0 !important;\n          max-width: none !important;\n          max-height: none !important;\n        }\n\n        /* Show mobile pill button */\n        .ttp-mobile-fab {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 10px").concat(important, ";\n          padding: 10px 16px 10px 12px").concat(important, ";\n          background: ").concat(pillGradient, ";\n          border: none").concat(important, ";\n          border-radius: 24px").concat(important, ";\n          cursor: pointer").concat(important, ";\n          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)").concat(important, ";\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)").concat(important, ";\n          z-index: 1").concat(important, ";\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif").concat(important, ";\n          touch-action: manipulation").concat(important, ";\n          -webkit-tap-highlight-color: transparent").concat(important, ";\n        }\n\n        .ttp-mobile-fab:hover {\n          transform: translateY(-3px)").concat(important, ";\n          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4)").concat(important, ";\n        }\n\n        .ttp-mobile-fab__icon-wrap {\n          width: 36px").concat(important, ";\n          height: 36px").concat(important, ";\n          border-radius: 50%").concat(important, ";\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 2px").concat(important, ";\n          height: 16px").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform .bar {\n          width: 2px").concat(important, ";\n          background: #fff").concat(important, ";\n          border-radius: 1px").concat(important, ";\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform .bar:nth-child(1) { height: 5px").concat(important, "; animation-delay: 0s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(2) { height: 10px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(3) { height: 16px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(4) { height: 8px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(5) { height: 12px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n        .ttp-mobile-fab__label-wrap {\n          display: flex").concat(important, ";\n          flex-direction: column").concat(important, ";\n          align-items: flex-start").concat(important, ";\n          gap: 1px").concat(important, ";\n        }\n\n        .ttp-mobile-fab__label {\n          color: ").concat(pillTextColor, ";\n          font-size: 14px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          line-height: 1.2").concat(important, ";\n        }\n\n        .ttp-mobile-fab__status {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 4px").concat(important, ";\n          font-size: 11px").concat(important, ";\n          color: ").concat(pillTextColor, "b3;\n          line-height: 1.2").concat(important, ";\n        }\n\n        .ttp-mobile-fab__dot {\n          width: 6px").concat(important, ";\n          height: 6px").concat(important, ";\n          background: ").concat(pillDotColor, ";\n          border-radius: 50%").concat(important, ";\n          box-shadow: 0 0 6px ").concat(pillDotColor, "99;\n        }\n\n        /* ---- Mobile Landing Overlay ---- */\n        .ttp-mobile-landing.active {\n          display: block").concat(important, ";\n          position: fixed").concat(important, ";\n          bottom: 16px").concat(important, ";\n          left: 12px").concat(important, ";\n          right: 12px").concat(important, ";\n          background: ").concat(pillGradient, ";\n          border-radius: 20px").concat(important, ";\n          overflow: hidden").concat(important, ";\n          box-shadow:\n            0 10px 40px rgba(0, 0, 0, 0.3),\n            0 0 0 1px rgba(255, 255, 255, 0.1) inset").concat(important, ";\n          z-index: 10002").concat(important, ";\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif").concat(important, ";\n        }\n\n        .ttp-mobile-landing::before {\n          content: ''").concat(important, ";\n          position: absolute").concat(important, ";\n          top: 0").concat(important, ";\n          left: 0").concat(important, ";\n          right: 0").concat(important, ";\n          height: 1px").concat(important, ";\n          background: linear-gradient(90deg,\n            transparent 0%,\n            rgba(255, 255, 255, 0.3) 50%,\n            transparent 100%);\n        }\n\n        .ttp-mobile-landing__header {\n          padding: 14px 16px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 12px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__avatar {\n          width: 44px").concat(important, ";\n          height: 44px").concat(important, ";\n          border-radius: 12px").concat(important, ";\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 3px").concat(important, ";\n          height: 20px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform .bar {\n          width: 3px").concat(important, ";\n          background: rgba(255, 255, 255, 0.9)").concat(important, ";\n          border-radius: 2px").concat(important, ";\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform .bar:nth-child(1) { height: 6px").concat(important, "; animation-delay: 0s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(2) { height: 12px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(3) { height: 20px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(4) { height: 10px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(5) { height: 16px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n        .ttp-mobile-landing__info {\n          flex: 1").concat(important, ";\n          min-width: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__name {\n          color: #fff").concat(important, ";\n          font-size: 15px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          margin-bottom: 2px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__status {\n          color: rgba(255, 255, 255, 0.7)").concat(important, ";\n          font-size: 12px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 5px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__dot {\n          width: 6px").concat(important, ";\n          height: 6px").concat(important, ";\n          background: ").concat(header.onlineIndicatorDotColor || '#10b981', ";\n          border-radius: 50%").concat(important, ";\n          animation: ttpPulseAnimation 2s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-landing__close {\n          width: 32px").concat(important, ";\n          height: 32px").concat(important, ";\n          border-radius: 10px").concat(important, ";\n          background: rgba(255, 255, 255, 0.1)").concat(important, ";\n          border: none").concat(important, ";\n          color: rgba(255, 255, 255, 0.7)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          cursor: pointer").concat(important, ";\n          transition: all 0.2s").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__close:hover {\n          background: rgba(255, 255, 255, 0.2)").concat(important, ";\n          color: #fff").concat(important, ";\n        }\n\n        .ttp-mobile-landing__error {\n          margin: 0 14px 10px").concat(important, ";\n          padding: 10px 12px").concat(important, ";\n          background: #fef2f2").concat(important, ";\n          border: 1px solid #fecaca").concat(important, ";\n          border-radius: 10px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: flex-start").concat(important, ";\n          gap: 8px").concat(important, ";\n          color: #b91c1c").concat(important, ";\n          font-size: 13px").concat(important, ";\n          line-height: 1.4").concat(important, ";\n        }\n        .ttp-mobile-landing__error svg {\n          flex-shrink: 0").concat(important, ";\n          margin-top: 1px").concat(important, ";\n          stroke: #dc2626").concat(important, ";\n        }\n\n        .ttp-mobile-landing__actions {\n          padding: 0 14px 14px").concat(important, ";\n          display: flex").concat(important, ";\n          gap: 10px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn {\n          flex: 1").concat(important, ";\n          padding: 14px").concat(important, ";\n          border-radius: 12px").concat(important, ";\n          border: none").concat(important, ";\n          cursor: pointer").concat(important, ";\n          font-family: inherit").concat(important, ";\n          font-size: 14px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          gap: 10px").concat(important, ";\n          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)").concat(important, ";\n          touch-action: manipulation").concat(important, ";\n          -webkit-tap-highlight-color: transparent").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn svg {\n          width: 20px").concat(important, ";\n          height: 20px").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--call {\n          background: #fff").concat(important, ";\n          color: ").concat(header.backgroundColor || '#7C3AED', ";\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--call:hover {\n          transform: translateY(-2px)").concat(important, ";\n          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--text {\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          color: #fff").concat(important, ";\n          border: 1px solid rgba(255, 255, 255, 0.1)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--text:hover {\n          background: rgba(255, 255, 255, 0.2)").concat(important, ";\n          border-color: rgba(255, 255, 255, 0.2)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__footer {\n          padding: 10px 16px").concat(important, ";\n          display: flex").concat(important, ";\n          justify-content: center").concat(important, ";\n          border-top: 1px solid rgba(255, 255, 255, 0.08)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered {\n          color: rgba(255, 255, 255, 0.4)").concat(important, ";\n          font-size: 11px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 4px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered svg {\n          width: 10px").concat(important, ";\n          height: 10px").concat(important, ";\n          color: #f59e0b").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered a {\n          color: ").concat(footerLinkColor).concat(important, ";\n          text-decoration: none").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered a:hover {\n          opacity: 0.88").concat(important, ";\n        }\n      }\n\n      /* ========================================\n         \"About\" info (\"i\") button + dialog\n         ======================================== */\n      .ttp-header-actions {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 4px").concat(important, ";\n      }\n      .ttp-info-btn {\n        background: none").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        color: currentColor").concat(important, ";\n        opacity: 0.7").concat(important, ";\n        padding: 4px").concat(important, ";\n        margin: 0").concat(important, ";\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        line-height: 0").concat(important, ";\n        transition: opacity 0.2s, background 0.2s").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .ttp-info-btn:hover {\n        opacity: 1").concat(important, ";\n        background: rgba(127,127,127,0.18)").concat(important, ";\n      }\n      .ttp-info-btn svg { display: block").concat(important, "; }\n      /* Floating variant for views without a header row (mobile idle) */\n      .ttp-info-btn--floating {\n        position: absolute").concat(important, ";\n        top: 10px").concat(important, ";\n        inset-inline-end: 10px").concat(important, ";\n        z-index: 5").concat(important, ";\n      }\n      .ttp-info-btn--onbadge {\n        width: 22px").concat(important, ";\n        height: 22px").concat(important, ";\n        padding: 3px").concat(important, ";\n      }\n      .ttp-info-btn--onbadge svg { width: 13px").concat(important, "; height: 13px").concat(important, "; }\n    ");
     }
   }, {
     key: "setupWidgetEvents",
     value: function setupWidgetEvents() {
-      var _this8 = this,
-        _this$config$behavior8;
+      var _this9 = this,
+        _this$config$behavior8,
+        _this$config$position5;
       if (!this.shadowRoot) return;
 
       // Setup prompt animation visibility and interactions
@@ -33478,16 +34060,18 @@ var TTPChatWidget = /*#__PURE__*/function () {
       if (launcherBtn) {
         launcherBtn.onclick = function (e) {
           e.stopPropagation();
-          if (_this8.config.promptAnimation.hideAfterClick) {
-            _this8.hidePrompt();
+          // A drag just ended — don't treat the trailing click as "open panel".
+          if (_this9._suppressLauncherClick) return;
+          if (_this9.config.promptAnimation.hideAfterClick) {
+            _this9.hidePrompt();
           }
-          _this8.togglePanel();
+          _this9.togglePanel();
         };
       }
       var closeBtn = this.shadowRoot.getElementById('closeBtn');
       if (closeBtn) {
         closeBtn.onclick = function () {
-          _this8._doTogglePanel();
+          _this9._doTogglePanel();
         };
       }
 
@@ -33495,31 +34079,41 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var closeIdle = this.shadowRoot.getElementById('ttpCloseIdle');
       if (closeIdle) {
         closeIdle.onclick = function () {
-          return _this8._doTogglePanel();
+          return _this9._doTogglePanel();
         };
       }
       var closeActive = this.shadowRoot.getElementById('ttpCloseActive');
       if (closeActive) {
         closeActive.onclick = function () {
-          return _this8._doTogglePanel();
+          return _this9._doTogglePanel();
         };
       }
 
+      // "About" info buttons (present in every view: idle / active / compact /
+      // mobile idle / mobile active / text top-bar). One shared dialog.
+      this.shadowRoot.querySelectorAll('.ttp-info-btn').forEach(function (btn) {
+        btn.onclick = function (e) {
+          e.stopPropagation();
+          e.preventDefault();
+          _this9._openAboutModal();
+        };
+      });
+
       // "Send a Message" button in idle view → switch to text interface
       var startTextBtn = this.shadowRoot.getElementById('startTextBtn');
       if (startTextBtn) {
         startTextBtn.onclick = function () {
-          return _this8.showText();
+          return _this9.showText();
         };
       }
       var textUnifiedBackBtn = this.shadowRoot.getElementById('textUnifiedBackBtn');
       if (textUnifiedBackBtn) {
         textUnifiedBackBtn.onclick = function () {
-          var _this8$config$behavio;
-          var widgetMode = ((_this8$config$behavio = _this8.config.behavior) === null || _this8$config$behavio === void 0 ? void 0 : _this8$config$behavio.mode) || 'unified';
+          var _this9$config$behavio;
+          var widgetMode = ((_this9$config$behavio = _this9.config.behavior) === null || _this9$config$behavio === void 0 ? void 0 : _this9$config$behavio.mode) || 'unified';
           if (widgetMode !== 'unified') return;
-          _this8.showLanding();
-          _this8._openMobileCallTextLanding();
+          _this9.showLanding();
+          _this9._openMobileCallTextLanding();
         };
       }
 
@@ -33549,30 +34143,30 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Setup back button handler
       if (backBtn) {
         backBtn.onclick = function () {
-          var _this8$voiceInterface, _this8$voiceInterface3;
+          var _this9$voiceInterface, _this9$voiceInterface3;
           // Check if we're showing a domain error — clear it and return to voice hero
-          if ((_this8$voiceInterface = _this8.voiceInterface) !== null && _this8$voiceInterface !== void 0 && _this8$voiceInterface.isShowingDomainError) {
-            var _this8$voiceInterface2;
+          if ((_this9$voiceInterface = _this9.voiceInterface) !== null && _this9$voiceInterface !== void 0 && _this9$voiceInterface.isShowingDomainError) {
+            var _this9$voiceInterface2;
             console.log('🔙 Back button clicked - clearing domain error and returning to voice hero');
             // Clear the domain error flag
-            _this8.voiceInterface.isShowingDomainError = false;
+            _this9.voiceInterface.isShowingDomainError = false;
             // Reset the connecting state (this will restore normal UI)
-            if ((_this8$voiceInterface2 = _this8.voiceInterface) !== null && _this8$voiceInterface2 !== void 0 && _this8$voiceInterface2.resetConnectingState) {
-              _this8.voiceInterface.resetConnectingState();
+            if ((_this9$voiceInterface2 = _this9.voiceInterface) !== null && _this9$voiceInterface2 !== void 0 && _this9$voiceInterface2.resetConnectingState) {
+              _this9.voiceInterface.resetConnectingState();
             }
-            _this8.showLanding();
-            _this8._openMobileCallTextLanding();
+            _this9.showLanding();
+            _this9._openMobileCallTextLanding();
             return;
           }
-          if ((_this8$voiceInterface3 = _this8.voiceInterface) !== null && _this8$voiceInterface3 !== void 0 && _this8$voiceInterface3.isActive) {
+          if ((_this9$voiceInterface3 = _this9.voiceInterface) !== null && _this9$voiceInterface3 !== void 0 && _this9$voiceInterface3.isActive) {
             // If call is active, show message inside widget instead of modal
-            _this8.showBackButtonWarning();
+            _this9.showBackButtonWarning();
           } else if (window.innerWidth <= 768) {
-            _this8.showLanding();
-            _this8._openMobileCallTextLanding();
+            _this9.showLanding();
+            _this9._openMobileCallTextLanding();
           } else {
             // Desktop: return to voice hero (unified home)
-            _this8.showLanding();
+            _this9.showLanding();
           }
         };
       }
@@ -33615,7 +34209,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Setup header button handlers
       if (newChatBtn) {
         newChatBtn.onclick = function () {
-          return _this8.textInterface.startNewChat();
+          return _this9.textInterface.startNewChat();
         };
         // Hide new chat on unified home (voice hero) initially
         if (isUnified && this.currentView !== 'text') {
@@ -33626,11 +34220,328 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Mobile floating button & landing overlay
       this.setupMobileWidgetEvents();
 
+      // Optional: make the launcher pill / mobile FAB + the open panel draggable
+      // (they move together as one unit). The minimized strip is wired separately
+      // in _initEcommerceVoiceStrip() since it lives outside the shadow DOM.
+      if ((_this$config$position5 = this.config.position) !== null && _this$config$position5 !== void 0 && _this$config$position5.draggable) {
+        this.setupDraggableWidget();
+      }
+
       // Keyboard navigation
       if (this.config.accessibility.keyboardNavigation) {
         this.setupKeyboardNavigation();
       }
     }
+
+    /**
+     * Page-scoped namespace for persisted drag positions (origin+path) so the same
+     * widget on different routes keeps independent spots.
+     */
+  }, {
+    key: "_dragScope",
+    value: function _dragScope() {
+      var scope = '';
+      try {
+        scope = window.location.origin + window.location.pathname;
+      } catch (e) {/* sandboxed */}
+      return scope;
+    }
+
+    /** localStorage key for a dragged surface ('unit' = pill+panel, 'strip'). */
+  }, {
+    key: "_dragStorageKey",
+    value: function _dragStorageKey(kind) {
+      return 'ttp-widget-' + kind + '-pos::' + this._dragScope();
+    }
+
+    /**
+     * The launcher pill and the chat panel move together as one unit. They share a
+     * single translate offset (`this._unitOffset`) so dragging either one (the pill,
+     * the mobile FAB, or a panel header) moves both — they never split apart.
+     */
+  }, {
+    key: "_unitEls",
+    value: function _unitEls() {
+      var root = this.shadowRoot;
+      if (!root) return [];
+      return [root.getElementById('text-chat-button-container'), root.getElementById('text-chat-panel')].filter(Boolean);
+    }
+
+    /** Apply the shared unit offset as a translate transform to both elements. */
+  }, {
+    key: "_applyUnitOffset",
+    value: function _applyUnitOffset() {
+      var o = this._unitOffset || (this._unitOffset = {
+        x: 0,
+        y: 0
+      });
+      var value = "translate(".concat(o.x, "px, ").concat(o.y, "px)");
+      this._unitEls().forEach(function (el) {
+        return el.style.setProperty('transform', value, 'important');
+      });
+    }
+
+    /**
+     * Base (offset-0) viewport rects of the currently-visible unit elements. The
+     * applied transform equals `this._unitOffset`, so subtracting it recovers the
+     * anchored position. Hidden elements (display:none → 0×0) are skipped.
+     */
+  }, {
+    key: "_unitBaseRects",
+    value: function _unitBaseRects() {
+      var o = this._unitOffset || {
+        x: 0,
+        y: 0
+      };
+      var rects = [];
+      this._unitEls().forEach(function (el) {
+        var r = el.getBoundingClientRect();
+        if (!r.width && !r.height) return; // hidden
+        rects.push({
+          left: r.left - o.x,
+          top: r.top - o.y,
+          right: r.right - o.x,
+          bottom: r.bottom - o.y
+        });
+      });
+      return rects;
+    }
+
+    /**
+     * Clamp a desired unit offset so every visible unit element stays within the
+     * viewport (8px margin). Constraints from all visible elements are intersected.
+     */
+  }, {
+    key: "_clampUnitOffset",
+    value: function _clampUnitOffset(x, y, bases) {
+      var margin = 8;
+      var vw = window.innerWidth,
+        vh = window.innerHeight;
+      var minX = -Infinity,
+        maxX = Infinity,
+        minY = -Infinity,
+        maxY = Infinity;
+      bases.forEach(function (b) {
+        minX = Math.max(minX, margin - b.left);
+        maxX = Math.min(maxX, vw - margin - b.right);
+        minY = Math.max(minY, margin - b.top);
+        maxY = Math.min(maxY, vh - margin - b.bottom);
+      });
+      // Element taller/wider than the viewport → keep its top/left edge visible.
+      if (minX > maxX) maxX = minX;
+      if (minY > maxY) maxY = minY;
+      if (!bases.length) return {
+        x: x,
+        y: y
+      };
+      return {
+        x: Math.min(Math.max(x, minX), maxX),
+        y: Math.min(Math.max(y, minY), maxY)
+      };
+    }
+
+    /** Re-clamp the unit to the current viewport (e.g. on resize or panel open). */
+  }, {
+    key: "_reclampUnit",
+    value: function _reclampUnit() {
+      if (!this._unitOffset) return;
+      var bases = this._unitBaseRects();
+      if (!bases.length) return;
+      this._unitOffset = this._clampUnitOffset(this._unitOffset.x, this._unitOffset.y, bases);
+      this._applyUnitOffset();
+    }
+
+    /** Restore a saved unit offset (deferred so elements can be measured at offset 0). */
+  }, {
+    key: "_restoreUnitOffset",
+    value: function _restoreUnitOffset(key) {
+      var _this0 = this;
+      var saved;
+      try {
+        saved = JSON.parse(window.localStorage.getItem(key) || 'null');
+      } catch (e) {
+        return;
+      }
+      if (!saved || typeof saved.x !== 'number' || typeof saved.y !== 'number') return;
+      requestAnimationFrame(function () {
+        _this0._unitOffset = {
+          x: 0,
+          y: 0
+        }; // ensure DOM matches before measuring
+        var bases = _this0._unitBaseRects();
+        _this0._unitOffset = _this0._clampUnitOffset(saved.x, saved.y, bases);
+        _this0._applyUnitOffset();
+      });
+    }
+
+    /**
+     * Wire a single handle to drag the whole pill+panel unit (shared offset).
+     * @param {HTMLElement} handle
+     * @param {Object} opts
+     * @param {boolean} opts.persist
+     * @param {string} opts.key                localStorage key
+     * @param {string} [opts.restCursor]       idle cursor (default 'grab')
+     * @param {string} [opts.excludeSelector]  don't start a drag from these (e.g. buttons)
+     * @param {Function} [opts.onMoved]        called once after a real drag ends
+     */
+  }, {
+    key: "_attachUnitDrag",
+    value: function _attachUnitDrag(handle, opts) {
+      var _this1 = this;
+      var persist = opts.persist,
+        key = opts.key,
+        excludeSelector = opts.excludeSelector,
+        onMoved = opts.onMoved;
+      var restCursor = opts.restCursor || 'grab';
+      handle.style.setProperty('touch-action', 'none');
+      handle.style.setProperty('cursor', restCursor);
+      var DRAG_THRESHOLD = 5; // px before a press becomes a drag
+      var startX = 0,
+        startY = 0,
+        baseX = 0,
+        baseY = 0,
+        bases = [];
+      var dragging = false,
+        moved = false;
+      var onMove = function onMove(e) {
+        var dx = e.clientX - startX;
+        var dy = e.clientY - startY;
+        if (!moved && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+        moved = true;
+        _this1._unitOffset = _this1._clampUnitOffset(baseX + dx, baseY + dy, bases);
+        _this1._applyUnitOffset();
+      };
+      var _onUp = function onUp(e) {
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', _onUp);
+        handle.style.setProperty('cursor', restCursor);
+        try {
+          handle.releasePointerCapture(e.pointerId);
+        } catch (err) {/* not captured */}
+        dragging = false;
+        if (moved) {
+          if (typeof onMoved === 'function') onMoved();
+          if (persist && key) {
+            try {
+              window.localStorage.setItem(key, JSON.stringify(_this1._unitOffset));
+            } catch (err) {/* unavailable */}
+          }
+        }
+      };
+      var onDown = function onDown(e) {
+        if (e.button != null && e.button !== 0) return; // primary / touch / pen only
+        if (dragging) return;
+        if (excludeSelector && e.target && e.target.closest && e.target.closest(excludeSelector)) return;
+        dragging = true;
+        moved = false;
+        var o = _this1._unitOffset || (_this1._unitOffset = {
+          x: 0,
+          y: 0
+        });
+        startX = e.clientX;
+        startY = e.clientY;
+        baseX = o.x;
+        baseY = o.y;
+        bases = _this1._unitBaseRects();
+        handle.style.setProperty('cursor', 'grabbing');
+        try {
+          handle.setPointerCapture(e.pointerId);
+        } catch (err) {/* unsupported */}
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', _onUp);
+      };
+      handle.addEventListener('pointerdown', onDown);
+    }
+
+    /**
+     * Make the launcher pill / mobile FAB AND the open chat panel draggable as one
+     * unit — dragging any of them moves both, so they never split apart. Pill/FAB
+     * drags suppress the trailing click (so the panel doesn't toggle); panel header
+     * bars (.ttp-header / .ttp-call-topbar / .text-interface-top-bar) are drag
+     * handles too, with their interactive controls (e.g. close) excluded.
+     */
+  }, {
+    key: "setupDraggableWidget",
+    value: function setupDraggableWidget() {
+      var _this$config$position6,
+        _this10 = this;
+      var root = this.shadowRoot;
+      if (!root) return;
+      var container = root.getElementById('text-chat-button-container');
+      var panel = root.getElementById('text-chat-panel');
+      if (!container && !panel) return;
+      this._unitOffset = this._unitOffset || {
+        x: 0,
+        y: 0
+      };
+      var persist = ((_this$config$position6 = this.config.position) === null || _this$config$position6 === void 0 ? void 0 : _this$config$position6.draggablePersist) !== false;
+      var key = this._dragStorageKey('unit');
+      if (persist) this._restoreUnitOffset(key);
+
+      // Launcher handles: pill + mobile FAB (suppress the click after a drag).
+      [root.getElementById('text-chat-button'), root.querySelector('.ttp-mobile-fab')].filter(Boolean).forEach(function (h) {
+        return _this10._attachUnitDrag(h, {
+          persist: persist,
+          key: key,
+          restCursor: 'grab',
+          onMoved: function onMoved() {
+            _this10._suppressLauncherClick = true;
+            setTimeout(function () {
+              _this10._suppressLauncherClick = false;
+            }, 0);
+          }
+        });
+      });
+
+      // Panel handles: header bars across voice idle / active call / text views.
+      if (panel) {
+        ['.ttp-header', '.ttp-call-topbar', '.text-interface-top-bar'].map(function (sel) {
+          return panel.querySelector(sel);
+        }).filter(Boolean).forEach(function (h) {
+          return _this10._attachUnitDrag(h, {
+            persist: persist,
+            key: key,
+            restCursor: 'move',
+            excludeSelector: 'button, a, input, textarea, select, [contenteditable]'
+          });
+        });
+      }
+
+      // Re-apply any in-memory offset to freshly-rendered elements (re-render).
+      this._applyUnitOffset();
+      this._bindDragResize();
+    }
+
+    /**
+     * Make the desktop minimized voice strip (EcommerceVoiceStrip) draggable. The
+     * strip lives outside the shadow DOM and owns its own drag logic; we just hand
+     * it a persistence key (so it remembers its spot independently of the unit).
+     */
+  }, {
+    key: "setupDraggableStrip",
+    value: function setupDraggableStrip() {
+      var _this$config$position7;
+      var strip = this._ecommerceVoiceStrip;
+      if (!strip || typeof strip.enableDrag !== 'function') return;
+      strip.enableDrag({
+        persist: ((_this$config$position7 = this.config.position) === null || _this$config$position7 === void 0 ? void 0 : _this$config$position7.draggablePersist) !== false,
+        storageKey: this._dragStorageKey('strip')
+      });
+    }
+
+    /** Bind a single resize listener that re-clamps every dragged surface. */
+  }, {
+    key: "_bindDragResize",
+    value: function _bindDragResize() {
+      var _this11 = this;
+      if (this._dragResizeBound) return;
+      this._dragResizeBound = true;
+      window.addEventListener('resize', function () {
+        var _this11$_ecommerceVoi, _this11$_ecommerceVoi2;
+        _this11._reclampUnit();
+        (_this11$_ecommerceVoi = _this11._ecommerceVoiceStrip) === null || _this11$_ecommerceVoi === void 0 || (_this11$_ecommerceVoi2 = _this11$_ecommerceVoi.reclampDrag) === null || _this11$_ecommerceVoi2 === void 0 || _this11$_ecommerceVoi2.call(_this11$_ecommerceVoi);
+      });
+    }
   }, {
     key: "startNewChat",
     value: function startNewChat() {
@@ -33677,9 +34588,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "_isDomainErrorVisible",
     value: function _isDomainErrorVisible() {
-      var _this$voiceInterface3, _this$voiceInterface4, _idleState$dataset;
-      if ((_this$voiceInterface3 = this.voiceInterface) !== null && _this$voiceInterface3 !== void 0 && _this$voiceInterface3.isShowingDomainError) return true;
-      var idleState = (_this$voiceInterface4 = this.voiceInterface) === null || _this$voiceInterface4 === void 0 || (_this$voiceInterface4 = _this$voiceInterface4.shadowRoot) === null || _this$voiceInterface4 === void 0 ? void 0 : _this$voiceInterface4.getElementById('voiceIdleState');
+      var _this$voiceInterface4, _this$voiceInterface5, _idleState$dataset;
+      if ((_this$voiceInterface4 = this.voiceInterface) !== null && _this$voiceInterface4 !== void 0 && _this$voiceInterface4.isShowingDomainError) return true;
+      var idleState = (_this$voiceInterface5 = this.voiceInterface) === null || _this$voiceInterface5 === void 0 || (_this$voiceInterface5 = _this$voiceInterface5.shadowRoot) === null || _this$voiceInterface5 === void 0 ? void 0 : _this$voiceInterface5.getElementById('voiceIdleState');
       return idleState && ((_idleState$dataset = idleState.dataset) === null || _idleState$dataset === void 0 ? void 0 : _idleState$dataset.domainError) === 'true';
     }
   }, {
@@ -33707,7 +34618,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "_openMobileCallTextLanding",
     value: function _openMobileCallTextLanding() {
-      var _this9 = this;
+      var _this12 = this;
       if (!this.shadowRoot || window.innerWidth > 768) return;
       var mobileFab = this.shadowRoot.querySelector('.ttp-mobile-fab');
       var mobileLanding = this.shadowRoot.getElementById('ttpMobileLanding');
@@ -33718,30 +34629,30 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // "Back" button: composedPath includes the panel but not #ttpMobileLanding, so it treated
       // the click as "outside" and closed the landing immediately (user only saw the FAB again).
       var open = function open() {
-        if (!_this9.shadowRoot || window.innerWidth > 768) return;
-        var panel = _this9.shadowRoot.getElementById('text-chat-panel');
+        if (!_this12.shadowRoot || window.innerWidth > 768) return;
+        var panel = _this12.shadowRoot.getElementById('text-chat-panel');
         if (panel) {
           panel.classList.remove('open');
-          _this9.isOpen = false;
+          _this12.isOpen = false;
         }
-        if (_this9.config.promptAnimation.hideAfterClick) {
-          _this9.hidePrompt();
+        if (_this12.config.promptAnimation.hideAfterClick) {
+          _this12.hidePrompt();
         }
-        var errorBanner = _this9.shadowRoot.getElementById('ttpMobileLandingError');
+        var errorBanner = _this12.shadowRoot.getElementById('ttpMobileLandingError');
         if (errorBanner) errorBanner.style.display = 'none';
-        var fab = _this9.shadowRoot.querySelector('.ttp-mobile-fab');
-        var landing = _this9.shadowRoot.getElementById('ttpMobileLanding');
+        var fab = _this12.shadowRoot.querySelector('.ttp-mobile-fab');
+        var landing = _this12.shadowRoot.getElementById('ttpMobileLanding');
         if (!fab || !landing) return;
         fab.style.display = 'none';
         landing.classList.add('active');
-        _this9.isMobileLandingOpen = true;
+        _this12.isMobileLandingOpen = true;
       };
       queueMicrotask(open);
     }
   }, {
     key: "setupMobileWidgetEvents",
     value: function setupMobileWidgetEvents() {
-      var _this0 = this;
+      var _this13 = this;
       if (!this.shadowRoot) return;
       var mobileFab = this.shadowRoot.querySelector('.ttp-mobile-fab');
       var mobileLanding = this.shadowRoot.getElementById('ttpMobileLanding');
@@ -33749,10 +34660,12 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var closeMobileLanding = function closeMobileLanding() {
         mobileLanding.classList.remove('active');
         mobileFab.style.display = '';
-        _this0.isMobileLandingOpen = false;
+        _this13.isMobileLandingOpen = false;
       };
       mobileFab.onclick = function () {
-        return _this0._openMobileCallTextLanding();
+        // A drag just ended — don't open the landing on the trailing click.
+        if (_this13._suppressLauncherClick) return;
+        _this13._openMobileCallTextLanding();
       };
       var mobileClose = mobileLanding.querySelector('.ttp-mobile-landing__close');
       if (mobileClose) {
@@ -33762,18 +34675,18 @@ var TTPChatWidget = /*#__PURE__*/function () {
       if (mobileCallBtn) {
         mobileCallBtn.onclick = function () {
           closeMobileLanding();
-          var panel = _this0.shadowRoot.getElementById('text-chat-panel');
+          var panel = _this13.shadowRoot.getElementById('text-chat-panel');
           if (panel) {
             panel.style.removeProperty('display');
             panel.classList.add('open');
-            _this0.isOpen = true;
+            _this13.isOpen = true;
           }
           mobileFab.style.display = 'none';
-          _this0.showVoice();
+          _this13.showVoice();
           // Landing already chose "Voice call" — start the call (mic permission / pre-prompt) instead of
           // leaving users on a second "Start Call" tap that feels broken.
           queueMicrotask(function () {
-            _this0.startVoiceCall().catch(function (err) {
+            _this13.startVoiceCall().catch(function (err) {
               console.error('[TTPChatWidget] Mobile landing voice start failed:', err);
             });
           });
@@ -33783,20 +34696,20 @@ var TTPChatWidget = /*#__PURE__*/function () {
       if (mobileChatBtn) {
         mobileChatBtn.onclick = function () {
           closeMobileLanding();
-          var panel = _this0.shadowRoot.getElementById('text-chat-panel');
+          var panel = _this13.shadowRoot.getElementById('text-chat-panel');
           if (panel) {
             panel.style.removeProperty('display');
             panel.classList.add('open');
-            _this0.isOpen = true;
+            _this13.isOpen = true;
           }
           mobileFab.style.display = 'none';
-          _this0.showText();
+          _this13.showText();
         };
       }
 
       // Close mobile landing on outside click
       document.addEventListener('click', function (e) {
-        if (!_this0.isMobileLandingOpen) return;
+        if (!_this13.isMobileLandingOpen) return;
         var path = e.composedPath();
         if (!path.includes(mobileLanding) && !path.includes(mobileFab)) {
           closeMobileLanding();
@@ -33805,7 +34718,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
       // Close mobile landing on Escape
       document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && _this0.isMobileLandingOpen) {
+        if (e.key === 'Escape' && _this13.isMobileLandingOpen) {
           closeMobileLanding();
         }
       });
@@ -33821,19 +34734,19 @@ var TTPChatWidget = /*#__PURE__*/function () {
           _prevIsMobile = nowMobile;
           if (nowMobile) {
             // Switched desktop → mobile: close desktop panel so only mobile FAB shows
-            if (_this0.isOpen) {
-              var _this0$shadowRoot, _this0$shadowRoot2;
-              var panel = (_this0$shadowRoot = _this0.shadowRoot) === null || _this0$shadowRoot === void 0 ? void 0 : _this0$shadowRoot.getElementById('text-chat-panel');
+            if (_this13.isOpen) {
+              var _this13$shadowRoot, _this13$shadowRoot2;
+              var panel = (_this13$shadowRoot = _this13.shadowRoot) === null || _this13$shadowRoot === void 0 ? void 0 : _this13$shadowRoot.getElementById('text-chat-panel');
               if (panel) {
                 panel.classList.remove('open');
-                _this0.isOpen = false;
+                _this13.isOpen = false;
               }
-              var pill = (_this0$shadowRoot2 = _this0.shadowRoot) === null || _this0$shadowRoot2 === void 0 ? void 0 : _this0$shadowRoot2.getElementById('text-chat-button');
+              var pill = (_this13$shadowRoot2 = _this13.shadowRoot) === null || _this13$shadowRoot2 === void 0 ? void 0 : _this13$shadowRoot2.getElementById('text-chat-button');
               if (pill) pill.classList.remove('open');
             }
           } else {
             // Switched mobile → desktop: close mobile landing/FAB so only desktop pill shows
-            if (_this0.isMobileLandingOpen) {
+            if (_this13.isMobileLandingOpen) {
               closeMobileLanding();
             }
             // Ensure mobile FAB is reset to CSS-controlled state (media query hides it on desktop)
@@ -33845,10 +34758,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "setupKeyboardNavigation",
     value: function setupKeyboardNavigation() {
-      var _this1 = this;
+      var _this14 = this;
       document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && _this1.isOpen) {
-          _this1.togglePanel();
+        if (e.key === 'Escape' && _this14.isOpen) {
+          _this14.togglePanel();
         }
       });
     }
@@ -33859,7 +34772,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "setupPromptAnimation",
     value: function setupPromptAnimation() {
-      var _this10 = this;
+      var _this15 = this;
       if (!this.shadowRoot) return;
       var promptConfig = this.config.promptAnimation || {};
       // Default to disabled if not specified (enabled === true means explicitly enabled)
@@ -33889,7 +34802,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Auto-hide after configured seconds (only if widget is closed)
       if (!this.isOpen && promptConfig.hideAfterSeconds !== null && promptConfig.hideAfterSeconds > 0) {
         this.promptAutoHideTimer = setTimeout(function () {
-          _this10.hidePrompt();
+          _this15.hidePrompt();
         }, promptConfig.hideAfterSeconds * 1000);
       }
 
@@ -33901,7 +34814,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Wrap the callback to also hide pulse rings
         this.config.onConversationStart = function () {
           // Hide pulse rings when call starts
-          var pulseRings = _this10.shadowRoot.getElementById('prompt-pulse-rings');
+          var pulseRings = _this15.shadowRoot.getElementById('prompt-pulse-rings');
           if (pulseRings) pulseRings.style.display = 'none';
 
           // Call original callback if it exists
@@ -33913,7 +34826,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Also listen to recordingStarted event from SDK if available
         if (this.voiceInterface.sdk.voiceSDK) {
           this.voiceInterface.sdk.voiceSDK.on('recordingStarted', function () {
-            var pulseRings = _this10.shadowRoot.getElementById('prompt-pulse-rings');
+            var pulseRings = _this15.shadowRoot.getElementById('prompt-pulse-rings');
             if (pulseRings) pulseRings.style.display = 'none';
           });
         }
@@ -33961,7 +34874,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "showPrompt",
     value: function showPrompt() {
-      var _this11 = this;
+      var _this16 = this;
       if (!this.shadowRoot) return;
       var promptConfig = this.config.promptAnimation || {};
       // Default to enabled if not specified
@@ -33981,8 +34894,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Function to actually show the elements
       var doShow = function doShow() {
         // Show prompt bubble (check both shadow root and document for compatibility)
-        var promptBubble = _this11.shadowRoot.getElementById('prompt-bubble');
-        if (!promptBubble && _this11.shadowRoot !== document) {
+        var promptBubble = _this16.shadowRoot.getElementById('prompt-bubble');
+        if (!promptBubble && _this16.shadowRoot !== document) {
           promptBubble = document.getElementById('prompt-bubble');
         }
         if (promptBubble) {
@@ -33996,8 +34909,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
         // Show pulse rings if enabled
         if (promptConfig.showPulseRings !== false) {
-          var _pulseRings = _this11.shadowRoot.getElementById('prompt-pulse-rings');
-          if (!_pulseRings && _this11.shadowRoot !== document) {
+          var _pulseRings = _this16.shadowRoot.getElementById('prompt-pulse-rings');
+          if (!_pulseRings && _this16.shadowRoot !== document) {
             _pulseRings = document.getElementById('prompt-pulse-rings');
           }
           if (_pulseRings) {
@@ -34034,7 +34947,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         }
         // Start new timer
         this.promptAutoHideTimer = setTimeout(function () {
-          _this11.hidePrompt();
+          _this16.hidePrompt();
         }, promptConfig.hideAfterSeconds * 1000);
       }
     }
@@ -34050,14 +34963,23 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "_doTogglePanel",
     value: function _doTogglePanel() {
-      var _this12 = this;
+      var _this17 = this;
       if (!this.shadowRoot) return;
       this.isOpen = !this.isOpen;
       var panel = this.shadowRoot.getElementById('text-chat-panel');
       if (panel) {
         panel.classList.toggle('open');
         if (this.isOpen) {
+          var _this$config$position8;
           panel.style.removeProperty('display');
+          // The panel joins the dragged unit when it opens; re-clamp now that it
+          // has real dimensions (it was hidden/zero-size while closed).
+          if ((_this$config$position8 = this.config.position) !== null && _this$config$position8 !== void 0 && _this$config$position8.draggable) {
+            this._applyUnitOffset();
+            requestAnimationFrame(function () {
+              return _this17._reclampUnit();
+            });
+          }
         }
       }
 
@@ -34072,7 +34994,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Panel is opening - hide prompt
         this.hidePrompt();
         setTimeout(function () {
-          var input = _this12.shadowRoot.getElementById('messageInput');
+          var input = _this17.shadowRoot.getElementById('messageInput');
           if (input) input.focus();
         }, 100);
       } else {
@@ -34084,13 +35006,13 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Panel is closing - show prompt (if enabled)
         this.showPrompt();
         setTimeout(function () {
-          var _this12$config$prompt;
-          var promptBubble = _this12.shadowRoot.getElementById('prompt-bubble');
+          var _this17$config$prompt;
+          var promptBubble = _this17.shadowRoot.getElementById('prompt-bubble');
           if (promptBubble && promptBubble.style.display === 'none') {
             promptBubble.style.display = 'block';
           }
-          var pulseRings = _this12.shadowRoot.getElementById('prompt-pulse-rings');
-          if (pulseRings && ((_this12$config$prompt = _this12.config.promptAnimation) === null || _this12$config$prompt === void 0 ? void 0 : _this12$config$prompt.showPulseRings) !== false) {
+          var pulseRings = _this17.shadowRoot.getElementById('prompt-pulse-rings');
+          if (pulseRings && ((_this17$config$prompt = _this17.config.promptAnimation) === null || _this17$config$prompt === void 0 ? void 0 : _this17$config$prompt.showPulseRings) !== false) {
             if (pulseRings.style.display === 'none') {
               pulseRings.style.display = 'block';
             }
@@ -34282,8 +35204,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "showBackButtonWarning",
     value: function showBackButtonWarning() {
-      var _this$voiceInterface5, _this$voiceInterface$;
-      if (!((_this$voiceInterface5 = this.voiceInterface) !== null && _this$voiceInterface5 !== void 0 && _this$voiceInterface5.isActive)) return;
+      var _this$voiceInterface6, _this$voiceInterface$;
+      if (!((_this$voiceInterface6 = this.voiceInterface) !== null && _this$voiceInterface6 !== void 0 && _this$voiceInterface6.isActive)) return;
 
       // Show warning message in the voice interface
       if ((_this$voiceInterface$ = this.voiceInterface.desktop) !== null && _this$voiceInterface$ !== void 0 && _this$voiceInterface$.showBackButtonWarning) {
@@ -34364,7 +35286,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         _this$config$voice0,
         _this$config$voice1,
         _this$config$voice10,
-        _this13 = this;
+        _this18 = this;
       // Deep merge nested objects
       var mergedConfig = _objectSpread({}, this.config);
 
@@ -34582,20 +35504,20 @@ var TTPChatWidget = /*#__PURE__*/function () {
         outputBitDepth: ((_this$config$voice10 = this.config.voice) === null || _this$config$voice10 === void 0 ? void 0 : _this$config$voice10.outputBitDepth) || 16,
         desktopMinimizedEcommerceStripUi: desktopMinimizedEcommerceStripUi,
         onDesktopMinimizedStripCallStart: desktopMinimizedEcommerceStripUi ? function () {
-          var _this13$_ecommerceVoi;
-          (_this13$_ecommerceVoi = _this13._ecommerceVoiceStrip) === null || _this13$_ecommerceVoi === void 0 || _this13$_ecommerceVoi.show();
-          if (_this13.isOpen) _this13.minimize();
-          _this13._setPanelFooterVisible(false);
-          _this13._setEcommerceStripLauncherVisible(false);
+          var _this18$_ecommerceVoi;
+          (_this18$_ecommerceVoi = _this18._ecommerceVoiceStrip) === null || _this18$_ecommerceVoi === void 0 || _this18$_ecommerceVoi.show();
+          if (_this18.isOpen) _this18.minimize();
+          _this18._setPanelFooterVisible(false);
+          _this18._setEcommerceStripLauncherVisible(false);
         } : undefined,
         onDesktopMinimizedStripLauncherRestore: desktopMinimizedEcommerceStripUi ? function () {
-          return _this13._restoreDesktopEcommerceStripChrome();
+          return _this18._restoreDesktopEcommerceStripChrome();
         } : undefined,
         // Pass event callbacks to voice interface (forward only; panel is not auto-minimized on call start)
         onConversationStart: function onConversationStart() {
-          if (typeof _this13.config.onConversationStart === 'function') {
-            var _this13$config;
-            (_this13$config = _this13.config).onConversationStart.apply(_this13$config, arguments);
+          if (typeof _this18.config.onConversationStart === 'function') {
+            var _this18$config;
+            (_this18$config = _this18.config).onConversationStart.apply(_this18$config, arguments);
           }
         },
         onConversationEnd: this.config.onConversationEnd,
@@ -34604,48 +35526,48 @@ var TTPChatWidget = /*#__PURE__*/function () {
         onAudioStoppedPlaying: this.config.onAudioStoppedPlaying,
         onSubtitleDisplay: this.config.onSubtitleDisplay,
         onCallEnd: function onCallEnd() {
-          var _this13$config$behavi;
-          if (_this13._isDomainErrorVisible()) return;
-          var widgetMode = ((_this13$config$behavi = _this13.config.behavior) === null || _this13$config$behavi === void 0 ? void 0 : _this13$config$behavi.mode) || 'unified';
+          var _this18$config$behavi;
+          if (_this18._isDomainErrorVisible()) return;
+          var widgetMode = ((_this18$config$behavi = _this18.config.behavior) === null || _this18$config$behavi === void 0 ? void 0 : _this18$config$behavi.mode) || 'unified';
           if (widgetMode === 'unified') {
             if (window.innerWidth <= 768) {
-              var _this13$shadowRoot, _this13$shadowRoot2;
-              var panel = (_this13$shadowRoot = _this13.shadowRoot) === null || _this13$shadowRoot === void 0 ? void 0 : _this13$shadowRoot.getElementById('text-chat-panel');
+              var _this18$shadowRoot, _this18$shadowRoot2;
+              var panel = (_this18$shadowRoot = _this18.shadowRoot) === null || _this18$shadowRoot === void 0 ? void 0 : _this18$shadowRoot.getElementById('text-chat-panel');
               if (panel) {
                 panel.classList.remove('open');
-                _this13.isOpen = false;
+                _this18.isOpen = false;
               }
-              var fab = (_this13$shadowRoot2 = _this13.shadowRoot) === null || _this13$shadowRoot2 === void 0 ? void 0 : _this13$shadowRoot2.querySelector('.ttp-mobile-fab');
+              var fab = (_this18$shadowRoot2 = _this18.shadowRoot) === null || _this18$shadowRoot2 === void 0 ? void 0 : _this18$shadowRoot2.querySelector('.ttp-mobile-fab');
               if (fab) fab.style.display = '';
             }
-            _this13.showLanding();
+            _this18.showLanding();
           }
         },
         onShowVoice: function onShowVoice() {
-          _this13.showVoice();
+          _this18.showVoice();
         },
         onShowLanding: function onShowLanding() {
-          _this13.showLanding();
+          _this18.showLanding();
         },
         onDisclaimerDeclined: function onDisclaimerDeclined() {
-          var _this13$config$behavi2;
-          if (_this13._isDomainErrorVisible()) return;
-          var widgetMode = ((_this13$config$behavi2 = _this13.config.behavior) === null || _this13$config$behavi2 === void 0 ? void 0 : _this13$config$behavi2.mode) || 'unified';
+          var _this18$config$behavi2;
+          if (_this18._isDomainErrorVisible()) return;
+          var widgetMode = ((_this18$config$behavi2 = _this18.config.behavior) === null || _this18$config$behavi2 === void 0 ? void 0 : _this18$config$behavi2.mode) || 'unified';
           if (widgetMode === 'voice-only') {
-            _this13.showVoice();
+            _this18.showVoice();
             return;
           }
           if (widgetMode !== 'unified') return;
           if (window.innerWidth <= 768) {
-            var _this13$shadowRoot3;
-            var panel = (_this13$shadowRoot3 = _this13.shadowRoot) === null || _this13$shadowRoot3 === void 0 ? void 0 : _this13$shadowRoot3.getElementById('text-chat-panel');
+            var _this18$shadowRoot3;
+            var panel = (_this18$shadowRoot3 = _this18.shadowRoot) === null || _this18$shadowRoot3 === void 0 ? void 0 : _this18$shadowRoot3.getElementById('text-chat-panel');
             if (panel) {
               panel.classList.remove('open');
-              _this13.isOpen = false;
+              _this18.isOpen = false;
             }
-            _this13._openMobileCallTextLanding();
+            _this18._openMobileCallTextLanding();
           } else {
-            _this13.showLanding();
+            _this18.showLanding();
           }
         },
         direction: this.getEffectiveTextDirection()
@@ -34692,8 +35614,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "_initEcommerceVoiceStrip",
     value: function _initEcommerceVoiceStrip() {
-      var _this14 = this,
-        _this$voiceInterface6;
+      var _this19 = this,
+        _this$config$position9,
+        _this$voiceInterface7;
       var flavor = this.config.flavor && _typeof(this.config.flavor) === 'object' ? this.config.flavor : null;
       if (window.innerWidth <= 768) return;
       if (!flavor || flavor.callView !== 'minimized') return;
@@ -34714,31 +35637,34 @@ var TTPChatWidget = /*#__PURE__*/function () {
           endCallButtonColor: v.endCallButtonColor || '#ef4444'
         },
         getVoiceUiState: function getVoiceUiState() {
-          var _this14$voiceInterfac, _this14$voiceInterfac2, _this14$voiceInterfac3;
+          var _this19$voiceInterfac, _this19$voiceInterfac2, _this19$voiceInterfac3;
           return {
-            isMicMuted: !!((_this14$voiceInterfac = _this14.voiceInterface) !== null && _this14$voiceInterfac !== void 0 && _this14$voiceInterfac.isMicMuted),
-            isPaused: !!((_this14$voiceInterfac2 = _this14.voiceInterface) !== null && _this14$voiceInterfac2 !== void 0 && _this14$voiceInterfac2.isPaused),
-            isSpeakerMuted: !!((_this14$voiceInterfac3 = _this14.voiceInterface) !== null && _this14$voiceInterfac3 !== void 0 && _this14$voiceInterfac3.isSpeakerMuted)
+            isMicMuted: !!((_this19$voiceInterfac = _this19.voiceInterface) !== null && _this19$voiceInterfac !== void 0 && _this19$voiceInterfac.isMicMuted),
+            isPaused: !!((_this19$voiceInterfac2 = _this19.voiceInterface) !== null && _this19$voiceInterfac2 !== void 0 && _this19$voiceInterfac2.isPaused),
+            isSpeakerMuted: !!((_this19$voiceInterfac3 = _this19.voiceInterface) !== null && _this19$voiceInterfac3 !== void 0 && _this19$voiceInterfac3.isSpeakerMuted)
           };
         },
+        onAbout: function onAbout() {
+          return _this19._openAboutModal();
+        },
         onHangup: function onHangup() {
-          if (_this14.voiceInterface) _this14.voiceInterface.endVoiceCall();
+          if (_this19.voiceInterface) _this19.voiceInterface.endVoiceCall();
         },
         onToggleMute: function onToggleMute() {
-          if (_this14.voiceInterface) _this14.voiceInterface.toggleMute();
+          if (_this19.voiceInterface) _this19.voiceInterface.toggleMute();
           strip.syncFromVoice();
         },
         onTogglePause: function onTogglePause() {
-          if (_this14.voiceInterface) _this14.voiceInterface.togglePause();
+          if (_this19.voiceInterface) _this19.voiceInterface.togglePause();
           strip.syncFromVoice();
         },
         onToggleSpeaker: function onToggleSpeaker() {
-          if (_this14.voiceInterface) _this14.voiceInterface.toggleSpeaker();
+          if (_this19.voiceInterface) _this19.voiceInterface.toggleSpeaker();
           strip.syncFromVoice();
         },
         onSendText: function onSendText(text) {
-          var _this14$voiceInterfac4;
-          var voiceSDK = (_this14$voiceInterfac4 = _this14.voiceInterface) === null || _this14$voiceInterfac4 === void 0 || (_this14$voiceInterfac4 = _this14$voiceInterfac4.sdk) === null || _this14$voiceInterfac4 === void 0 ? void 0 : _this14$voiceInterfac4.voiceSDK;
+          var _this19$voiceInterfac4;
+          var voiceSDK = (_this19$voiceInterfac4 = _this19.voiceInterface) === null || _this19$voiceInterfac4 === void 0 || (_this19$voiceInterfac4 = _this19$voiceInterfac4.sdk) === null || _this19$voiceInterfac4 === void 0 ? void 0 : _this19$voiceInterfac4.voiceSDK;
           if (voiceSDK && typeof voiceSDK.sendMessage === 'function') {
             voiceSDK.sendMessage({
               t: 'text_inject',
@@ -34749,8 +35675,13 @@ var TTPChatWidget = /*#__PURE__*/function () {
       });
       this._ecommerceVoiceStrip = strip;
 
+      // Make the strip draggable too when position.draggable is enabled.
+      if ((_this$config$position9 = this.config.position) !== null && _this$config$position9 !== void 0 && _this$config$position9.draggable) {
+        this.setupDraggableStrip();
+      }
+
       // Show strip when conversation starts
-      var agentSDK = (_this$voiceInterface6 = this.voiceInterface) === null || _this$voiceInterface6 === void 0 ? void 0 : _this$voiceInterface6.sdk;
+      var agentSDK = (_this$voiceInterface7 = this.voiceInterface) === null || _this$voiceInterface7 === void 0 ? void 0 : _this$voiceInterface7.sdk;
       if (agentSDK) {
         var origConvStart = agentSDK.onConversationStart;
         agentSDK.onConversationStart = function () {
@@ -34788,7 +35719,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         var _this$voiceInterface$2;
         var origOnCallEnd = this.voiceInterface.config.onCallEnd;
         this.voiceInterface.config.onCallEnd = function () {
-          _this14._restoreDesktopEcommerceStripChrome();
+          _this19._restoreDesktopEcommerceStripChrome();
           if (typeof origOnCallEnd === 'function') origOnCallEnd();
         };
 
@@ -34912,7 +35843,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
     key: "injectData",
     value: (function () {
       var _injectData = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(data) {
-        var _this$voiceInterface7;
+        var _this$voiceInterface8;
         var options,
           voiceSDK,
           ack,
@@ -34937,7 +35868,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
               throw new Error('Voice call is not active');
             case 2:
               // Check if SDK is available
-              voiceSDK = (_this$voiceInterface7 = this.voiceInterface) === null || _this$voiceInterface7 === void 0 ? void 0 : _this$voiceInterface7.getVoiceSDK();
+              voiceSDK = (_this$voiceInterface8 = this.voiceInterface) === null || _this$voiceInterface8 === void 0 ? void 0 : _this$voiceInterface8.getVoiceSDK();
               if (voiceSDK) {
                 _context6.n = 3;
                 break;
@@ -35202,7 +36133,7 @@ var TextInterface = /*#__PURE__*/function () {
       var inputPlaceholder = this.config.inputPlaceholder || ((_this$config$panel = this.config.panel) === null || _this$config$panel === void 0 ? void 0 : _this$config$panel.inputPlaceholder) || this.t('typeMessage') || 'Type your message...';
       var unifiedMode = ((_this$config$behavior = this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mode) === 'unified';
       var backArrow = this.config.direction === 'rtl' ? '→' : '←';
-      var backBar = unifiedMode ? "\n      <div class=\"text-interface-top-bar\">\n        <button type=\"button\" class=\"text-interface-back-btn\" id=\"textUnifiedBackBtn\" aria-label=\"".concat(this.t('back'), "\">\n          <span class=\"text-interface-back-icon\" aria-hidden=\"true\">").concat(backArrow, "</span>\n          <span class=\"text-interface-back-label\">").concat(this.t('back'), "</span>\n        </button>\n      </div>") : '';
+      var backBar = unifiedMode ? "\n      <div class=\"text-interface-top-bar\">\n        <button type=\"button\" class=\"text-interface-back-btn\" id=\"textUnifiedBackBtn\" aria-label=\"".concat(this.t('back'), "\">\n          <span class=\"text-interface-back-icon\" aria-hidden=\"true\">").concat(backArrow, "</span>\n          <span class=\"text-interface-back-label\">").concat(this.t('back'), "</span>\n        </button>\n        <button type=\"button\" class=\"ttp-info-btn\" aria-label=\"").concat(this.t('aboutTitle') || 'About', "\" title=\"").concat(this.t('aboutTitle') || 'About', "\">\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"9\"/>\n            <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"16\"/>\n            <circle cx=\"12\" cy=\"7.7\" r=\"1.05\" fill=\"currentColor\" stroke=\"none\"/>\n          </svg>\n        </button>\n      </div>") : '';
       return "<div class=\"text-interface\" id=\"textInterface\">\n      ".concat(backBar, "\n      <div class=\"messages-container\" id=\"messagesContainer\">\n        <div class=\"empty-state\">\n          <div class=\"empty-state-icon\">\uD83D\uDCAC</div>\n          <div class=\"empty-state-title\">").concat(this.t('hello'), "</div>\n          <div class=\"empty-state-text\">").concat(this.t('sendMessage'), "</div>\n        </div>\n      </div>\n      <div class=\"input-container\">\n        <div class=\"input-wrapper\" style=\"flex:1;\">\n          <textarea class=\"message-input\" id=\"messageInput\" placeholder=\"").concat(inputPlaceholder, "\" rows=\"1\" dir=\"").concat(this.config.direction || 'ltr', "\"></textarea>\n        </div>\n        <button class=\"send-button\" id=\"sendButton\" aria-label=\"").concat(this.t('sendMessageAria'), "\">").concat(this.config.sendButtonText || '➤', "</button>\n        ").concat((_this$config$sendButt = this.config.sendButtonHint) !== null && _this$config$sendButt !== void 0 && _this$config$sendButt.text || (_this$config$panel2 = this.config.panel) !== null && _this$config$panel2 !== void 0 && (_this$config$panel2 = _this$config$panel2.sendButtonHint) !== null && _this$config$panel2 !== void 0 && _this$config$panel2.text ? "\n          <div class=\"send-button-hint\" style=\"color: ".concat(((_this$config$sendButt2 = this.config.sendButtonHint) === null || _this$config$sendButt2 === void 0 ? void 0 : _this$config$sendButt2.color) || ((_this$config$panel3 = this.config.panel) === null || _this$config$panel3 === void 0 || (_this$config$panel3 = _this$config$panel3.sendButtonHint) === null || _this$config$panel3 === void 0 ? void 0 : _this$config$panel3.color) || '#6B7280', "; font-size: ").concat(((_this$config$sendButt3 = this.config.sendButtonHint) === null || _this$config$sendButt3 === void 0 ? void 0 : _this$config$sendButt3.fontSize) || ((_this$config$panel4 = this.config.panel) === null || _this$config$panel4 === void 0 || (_this$config$panel4 = _this$config$panel4.sendButtonHint) === null || _this$config$panel4 === void 0 ? void 0 : _this$config$panel4.fontSize) || '14px', "; text-align: center; margin-top: 4px;\">\n            ").concat(((_this$config$sendButt4 = this.config.sendButtonHint) === null || _this$config$sendButt4 === void 0 ? void 0 : _this$config$sendButt4.text) || ((_this$config$panel5 = this.config.panel) === null || _this$config$panel5 === void 0 || (_this$config$panel5 = _this$config$panel5.sendButtonHint) === null || _this$config$panel5 === void 0 ? void 0 : _this$config$panel5.text), "\n          </div>\n        ") : '', "\n      </div>\n    </div>");
     }
 
@@ -35334,7 +36265,7 @@ var TextInterface = /*#__PURE__*/function () {
 
       // Add !important to display rules when not using Shadow DOM (to override theme CSS)
       var important = this.config.useShadowDOM === false ? ' !important' : '';
-      return "\n      .text-interface-top-bar {\n        flex-shrink: 0".concat(important, ";\n        padding: 10px 12px 8px").concat(important, ";\n        border-bottom: 1px solid ").concat(topBarBorder).concat(important, ";\n        background: ").concat(topBarBg).concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      .text-interface-back-btn {\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 6px").concat(important, ";\n        padding: 6px 10px").concat(important, ";\n        margin: 0").concat(important, ";\n        border: none").concat(important, ";\n        border-radius: 8px").concat(important, ";\n        background: transparent").concat(important, ";\n        color: ").concat(backBtnColor).concat(important, ";\n        font-size: 16px").concat(important, ";\n        font-weight: 600").concat(important, ";\n        cursor: pointer").concat(important, ";\n        font-family: inherit").concat(important, ";\n      }\n      .text-interface-back-btn:hover {\n        background: ").concat(backBtnHoverBg).concat(important, ";\n        color: ").concat(backBtnHoverColor).concat(important, ";\n      }\n      .text-interface-back-icon {\n        font-size: 18px").concat(important, ";\n        line-height: 1").concat(important, ";\n      }\n      .text-interface-back-label {\n        line-height: 1.2").concat(important, ";\n      }\n      /* Messages container using new classes */\n      #messagesContainer { \n        flex: 1").concat(important, "; \n        overflow-y: auto").concat(important, "; \n        overflow-x: hidden").concat(important, "; \n        padding: 20px").concat(important, "; \n        background: ").concat(messagesAreaBg).concat(important, "; \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, "; \n        gap: 16px").concat(important, "; \n        min-height: 0").concat(important, "; \n      }\n      .empty-state { \n        flex: 1").concat(important, "; \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, "; \n        align-items: center").concat(important, "; \n        justify-content: center").concat(important, "; \n        gap: 12px").concat(important, "; \n        color: ").concat(emptyMuted).concat(important, "; \n        text-align: center").concat(important, "; \n        padding: 20px").concat(important, "; \n      }\n      .empty-state-icon { font-size: 52px").concat(important, "; opacity: 0.3").concat(important, "; }\n      .empty-state-title { font-size: 22px").concat(important, "; font-weight: 700").concat(important, "; color: ").concat(emptyTitle).concat(important, "; }\n      .empty-state-text { font-size: 15px").concat(important, "; max-width: 300px").concat(important, "; line-height: 1.45").concat(important, "; }\n\n      .text-interface { \n        display: none").concat(important, "; \n        flex: 1").concat(important, "; \n        flex-direction: column").concat(important, "; \n        min-height: 0").concat(important, "; \n        overflow: hidden").concat(important, "; \n      }\n      .text-interface.active { display: flex").concat(important, "; }\n      \n      .message { \n        display: flex").concat(important, "; \n        gap: 8px").concat(important, "; \n        padding: 4px 0").concat(important, "; \n        max-width: 100%").concat(important, "; \n        align-items: center").concat(important, "; \n      }\n      .message.edge-left { flex-direction: row").concat(important, "; }\n      .message.edge-right { flex-direction: row-reverse").concat(important, "; }\n      .message-bubble { \n        padding: 14px 16px").concat(important, "; \n        border-radius: ").concat(messages.borderRadius, "px").concat(important, "; \n        max-width: 80%").concat(important, "; \n        font-size: ").concat(messages.fontSize).concat(important, "; \n        line-height: 1.45").concat(important, ";\n        word-wrap: break-word").concat(important, "; \n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, "; \n        direction: ").concat(this.config.direction || 'ltr', ";\n      }\n      .message.user .message-bubble { \n        background: ").concat(userBubbleBg).concat(important, "; \n        color: ").concat(userBubbleTextColor).concat(important, "; \n      }\n      .message.agent .message-bubble { \n        background: ").concat(agentBubbleBg).concat(important, "; \n        color: ").concat(agentBubbleTextColor).concat(important, "; \n        border: ").concat(agentBubbleBorder).concat(important, "; \n      }\n\n      .message.user { \n        align-self: ").concat(this.config.direction === 'rtl' ? 'flex-start' : 'flex-end').concat(important, "; \n      }\n      .message.agent { \n        align-self: ").concat(this.config.direction === 'rtl' ? 'flex-end' : 'flex-start').concat(important, "; \n      }\n      .message .message-bubble { \n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left', " !important; \n      }\n      ").concat(this.config.direction === 'rtl' ? "\n      .message-bubble {\n        text-align: right !important;\n      }\n      " : '', "\n      .message-avatar { \n        width: ").concat(avatarSize).concat(important, "; \n        height: ").concat(avatarSize).concat(important, "; \n        min-width: ").concat(avatarSize).concat(important, "; \n        border-radius: 50%").concat(important, "; \n        display: flex").concat(important, "; \n        align-items: center").concat(important, "; \n        justify-content: center").concat(important, "; \n        flex-shrink: 0").concat(important, "; \n        color: inherit").concat(important, "; \n        font-size: ").concat(useVoiceTheme ? '14' : '20', "px").concat(important, "; \n        line-height: 1").concat(important, "; \n        background: transparent").concat(important, "; \n        border: none").concat(important, "; \n        box-sizing: border-box").concat(important, "; \n      }\n      .message-avatar.user { background: ").concat(avatarUserBg).concat(important, "; color: ").concat(avatarUserColor).concat(important, "; }\n      .message-avatar.agent { background: ").concat(avatarAgentBg).concat(important, "; }\n      \n      .message.system {\n        background: ").concat(messages.systemBackgroundColor, ";\n        align-self: flex-start").concat(important, ";\n      }\n      .message.error {\n        background: ").concat(messages.errorBackgroundColor, ";\n        align-self: flex-start").concat(important, ";\n      }\n      \n      .input-container {\n        display: flex").concat(important, ";\n        gap: 8px").concat(important, ";\n        padding: 12px 16px").concat(important, ";\n        background: ").concat(inputContainerBg).concat(important, ";\n        border-top: 1px solid ").concat(inputContainerBorderTop).concat(important, ";\n        align-items: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        flex-direction: ").concat(this.config.direction === 'rtl' ? 'row-reverse' : 'row').concat(important, ";\n      }\n      \n      .input-wrapper {\n        position: relative").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      \n      .message-input {\n        width: 100%").concat(important, ";\n        min-height: ").concat(TEXT_INPUT_MIN_HEIGHT_PX, "px").concat(important, ";\n        max-height: ").concat(TEXT_INPUT_MAX_HEIGHT_PX, "px").concat(important, ";\n        padding: ").concat(inputPadding, ";\n        border: 1px solid ").concat(inputBorderColor, ";\n        border-radius: ").concat(inputBorderRadius, "px;\n        font-size: ").concat(inputFontSize, ";\n        font-family: inherit").concat(important, ";\n        line-height: 1.4").concat(important, ";\n        resize: none").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        background: ").concat(inputBackgroundColor, ";\n        color: ").concat(inputTextColor, ";\n        vertical-align: top").concat(important, ";\n        margin: 0").concat(important, ";\n        display: block").concat(important, ";\n        white-space: pre-wrap").concat(important, ";\n        word-wrap: break-word").concat(important, ";\n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, ";\n        direction: ").concat(this.config.direction || 'ltr', ";\n        -webkit-appearance: none").concat(important, ";\n        appearance: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      \n      .message-input:focus {\n        outline: none").concat(important, ";\n        border-color: ").concat(inputFocusColor, ";\n        background: ").concat(inputFocusBg).concat(important, ";\n        box-shadow: ").concat(inputFocusBoxShadow, ";\n      }\n      \n      .message-input::placeholder {\n        color: ").concat(placeholderColor).concat(important, ";\n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, ";\n      }\n      \n      .send-button {\n        width: 44px").concat(important, ";\n        height: 44px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: ").concat(sendButtonColor, ";\n        color: ").concat(sendButtonTextColor, ";\n        font-size: ").concat(this.config.sendButtonFontSize || ((_this$config$panel15 = this.config.panel) === null || _this$config$panel15 === void 0 ? void 0 : _this$config$panel15.sendButtonFontSize) || '20px', ";\n        font-weight: ").concat(this.config.sendButtonFontWeight || ((_this$config$panel16 = this.config.panel) === null || _this$config$panel16 === void 0 ? void 0 : _this$config$panel16.sendButtonFontWeight) || '500', ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n        box-shadow: 0 4px 12px rgba(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", 0.32)").concat(important, ";\n      }\n      \n      .send-button:hover:not(:disabled) {\n        background: ").concat(sendButtonHoverColor, ";\n        transform: scale(1.05)").concat(important, ";\n        box-shadow: 0 6px 16px rgba(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", 0.42)").concat(important, ";\n      }\n      \n      .send-button-hint {\n        width: 100%").concat(important, ";\n        text-align: center").concat(important, ";\n        margin-top: 4px").concat(important, ";\n      }\n      \n      .send-button:disabled {\n        opacity: 0.5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n      \n      .typing-indicator {\n        display: inline-flex").concat(important, ";\n        gap: 4px").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      \n      .typing-dot {\n        width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: rgba(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", ").concat(typingDotAlpha, ")").concat(important, ";\n        animation: typingDot 1.4s ease-in-out infinite").concat(important, ";\n      }\n      \n      .typing-dot:nth-child(2) { animation-delay: 0.2s").concat(important, "; }\n      .typing-dot:nth-child(3) { animation-delay: 0.4s").concat(important, "; }\n      \n      @keyframes typingDot {\n        0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }\n        30% { transform: translateY(-8px); opacity: 1; }\n      }\n      \n      .error-message {\n        padding: 12px").concat(important, ";\n        background: ").concat(errorBubbleBg, ";\n        border-radius: ").concat(messages.borderRadius, "px;\n        color: ").concat(errorBubbleColor).concat(important, ";\n        border: ").concat(errorBubbleBorder).concat(important, ";\n        font-size: ").concat(messages.fontSize).concat(important, ";\n        margin: 8px 0").concat(important, ";\n      }\n      \n      ").concat(useVoiceTheme ? "\n      #textInterface.active .input-container .send-button-hint {\n        color: rgba(255,255,255,0.72)".concat(important, ";\n      }\n      ") : '', "\n      \n      @media (max-width: 768px) {\n        #messagesContainer {\n          padding: 12px").concat(important, ";\n          gap: 12px").concat(important, ";\n        }\n        \n        .message-bubble {\n          max-width: 85%").concat(important, ";\n          font-size: ").concat(messages.fontSize).concat(important, ";\n          padding: 12px 14px").concat(important, ";\n        }\n        \n        .text-input-container {\n          padding: 10px").concat(important, ";\n          gap: 8px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 10px 14px").concat(important, ";\n          min-height: 44px").concat(important, ";\n        }\n        \n        #text-chat-send {\n          min-width: 56px").concat(important, ";\n          min-height: 44px").concat(important, ";\n          width: 56px").concat(important, ";\n          height: 44px").concat(important, ";\n        }\n        \n        .empty-state-icon {\n          font-size: 44px").concat(important, ";\n        }\n        \n        .empty-state-title {\n          font-size: 20px").concat(important, ";\n        }\n        \n        .empty-state-text {\n          font-size: 14px").concat(important, ";\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #messagesContainer {\n          padding: 10px").concat(important, ";\n          gap: 10px").concat(important, ";\n        }\n        \n        .message-bubble {\n          max-width: 90%").concat(important, ";\n          font-size: ").concat(messages.fontSize).concat(important, ";\n          padding: 10px 12px").concat(important, ";\n        }\n        \n        .text-input-container {\n          padding: 8px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important;\n          padding: 8px 12px").concat(important, ";\n        }\n      }\n    ");
+      return "\n      .text-interface-top-bar {\n        flex-shrink: 0".concat(important, ";\n        padding: 10px 12px 8px").concat(important, ";\n        border-bottom: 1px solid ").concat(topBarBorder).concat(important, ";\n        background: ").concat(topBarBg).concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: space-between").concat(important, ";\n      }\n      .text-interface-top-bar .ttp-info-btn {\n        color: ").concat(backBtnColor).concat(important, ";\n      }\n      .text-interface-top-bar .ttp-info-btn:hover {\n        background: ").concat(backBtnHoverBg).concat(important, ";\n        color: ").concat(backBtnHoverColor).concat(important, ";\n      }\n      .text-interface-back-btn {\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 6px").concat(important, ";\n        padding: 6px 10px").concat(important, ";\n        margin: 0").concat(important, ";\n        border: none").concat(important, ";\n        border-radius: 8px").concat(important, ";\n        background: transparent").concat(important, ";\n        color: ").concat(backBtnColor).concat(important, ";\n        font-size: 16px").concat(important, ";\n        font-weight: 600").concat(important, ";\n        cursor: pointer").concat(important, ";\n        font-family: inherit").concat(important, ";\n      }\n      .text-interface-back-btn:hover {\n        background: ").concat(backBtnHoverBg).concat(important, ";\n        color: ").concat(backBtnHoverColor).concat(important, ";\n      }\n      .text-interface-back-icon {\n        font-size: 18px").concat(important, ";\n        line-height: 1").concat(important, ";\n      }\n      .text-interface-back-label {\n        line-height: 1.2").concat(important, ";\n      }\n      /* Messages container using new classes */\n      #messagesContainer { \n        flex: 1").concat(important, "; \n        overflow-y: auto").concat(important, "; \n        overflow-x: hidden").concat(important, "; \n        padding: 20px").concat(important, "; \n        background: ").concat(messagesAreaBg).concat(important, "; \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, "; \n        gap: 16px").concat(important, "; \n        min-height: 0").concat(important, "; \n      }\n      .empty-state { \n        flex: 1").concat(important, "; \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, "; \n        align-items: center").concat(important, "; \n        justify-content: center").concat(important, "; \n        gap: 12px").concat(important, "; \n        color: ").concat(emptyMuted).concat(important, "; \n        text-align: center").concat(important, "; \n        padding: 20px").concat(important, "; \n      }\n      .empty-state-icon { font-size: 52px").concat(important, "; opacity: 0.3").concat(important, "; }\n      .empty-state-title { font-size: 22px").concat(important, "; font-weight: 700").concat(important, "; color: ").concat(emptyTitle).concat(important, "; }\n      .empty-state-text { font-size: 15px").concat(important, "; max-width: 300px").concat(important, "; line-height: 1.45").concat(important, "; }\n\n      .text-interface { \n        display: none").concat(important, "; \n        flex: 1").concat(important, "; \n        flex-direction: column").concat(important, "; \n        min-height: 0").concat(important, "; \n        overflow: hidden").concat(important, "; \n      }\n      .text-interface.active { display: flex").concat(important, "; }\n      \n      .message { \n        display: flex").concat(important, "; \n        gap: 8px").concat(important, "; \n        padding: 4px 0").concat(important, "; \n        max-width: 100%").concat(important, "; \n        align-items: center").concat(important, "; \n      }\n      .message.edge-left { flex-direction: row").concat(important, "; }\n      .message.edge-right { flex-direction: row-reverse").concat(important, "; }\n      .message-bubble { \n        padding: 14px 16px").concat(important, "; \n        border-radius: ").concat(messages.borderRadius, "px").concat(important, "; \n        max-width: 80%").concat(important, "; \n        font-size: ").concat(messages.fontSize).concat(important, "; \n        line-height: 1.45").concat(important, ";\n        word-wrap: break-word").concat(important, "; \n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, "; \n        direction: ").concat(this.config.direction || 'ltr', ";\n      }\n      .message.user .message-bubble { \n        background: ").concat(userBubbleBg).concat(important, "; \n        color: ").concat(userBubbleTextColor).concat(important, "; \n      }\n      .message.agent .message-bubble { \n        background: ").concat(agentBubbleBg).concat(important, "; \n        color: ").concat(agentBubbleTextColor).concat(important, "; \n        border: ").concat(agentBubbleBorder).concat(important, "; \n      }\n\n      .message.user { \n        align-self: ").concat(this.config.direction === 'rtl' ? 'flex-start' : 'flex-end').concat(important, "; \n      }\n      .message.agent { \n        align-self: ").concat(this.config.direction === 'rtl' ? 'flex-end' : 'flex-start').concat(important, "; \n      }\n      .message .message-bubble { \n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left', " !important; \n      }\n      ").concat(this.config.direction === 'rtl' ? "\n      .message-bubble {\n        text-align: right !important;\n      }\n      " : '', "\n      .message-avatar { \n        width: ").concat(avatarSize).concat(important, "; \n        height: ").concat(avatarSize).concat(important, "; \n        min-width: ").concat(avatarSize).concat(important, "; \n        border-radius: 50%").concat(important, "; \n        display: flex").concat(important, "; \n        align-items: center").concat(important, "; \n        justify-content: center").concat(important, "; \n        flex-shrink: 0").concat(important, "; \n        color: inherit").concat(important, "; \n        font-size: ").concat(useVoiceTheme ? '14' : '20', "px").concat(important, "; \n        line-height: 1").concat(important, "; \n        background: transparent").concat(important, "; \n        border: none").concat(important, "; \n        box-sizing: border-box").concat(important, "; \n      }\n      .message-avatar.user { background: ").concat(avatarUserBg).concat(important, "; color: ").concat(avatarUserColor).concat(important, "; }\n      .message-avatar.agent { background: ").concat(avatarAgentBg).concat(important, "; }\n      \n      .message.system {\n        background: ").concat(messages.systemBackgroundColor, ";\n        align-self: flex-start").concat(important, ";\n      }\n      .message.error {\n        background: ").concat(messages.errorBackgroundColor, ";\n        align-self: flex-start").concat(important, ";\n      }\n      \n      .input-container {\n        display: flex").concat(important, ";\n        gap: 8px").concat(important, ";\n        padding: 12px 16px").concat(important, ";\n        background: ").concat(inputContainerBg).concat(important, ";\n        border-top: 1px solid ").concat(inputContainerBorderTop).concat(important, ";\n        align-items: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        flex-direction: ").concat(this.config.direction === 'rtl' ? 'row-reverse' : 'row').concat(important, ";\n      }\n      \n      .input-wrapper {\n        position: relative").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      \n      .message-input {\n        width: 100%").concat(important, ";\n        min-height: ").concat(TEXT_INPUT_MIN_HEIGHT_PX, "px").concat(important, ";\n        max-height: ").concat(TEXT_INPUT_MAX_HEIGHT_PX, "px").concat(important, ";\n        padding: ").concat(inputPadding, ";\n        border: 1px solid ").concat(inputBorderColor, ";\n        border-radius: ").concat(inputBorderRadius, "px;\n        font-size: ").concat(inputFontSize, ";\n        font-family: inherit").concat(important, ";\n        line-height: 1.4").concat(important, ";\n        resize: none").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        background: ").concat(inputBackgroundColor, ";\n        color: ").concat(inputTextColor, ";\n        vertical-align: top").concat(important, ";\n        margin: 0").concat(important, ";\n        display: block").concat(important, ";\n        white-space: pre-wrap").concat(important, ";\n        word-wrap: break-word").concat(important, ";\n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, ";\n        direction: ").concat(this.config.direction || 'ltr', ";\n        -webkit-appearance: none").concat(important, ";\n        appearance: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      \n      .message-input:focus {\n        outline: none").concat(important, ";\n        border-color: ").concat(inputFocusColor, ";\n        background: ").concat(inputFocusBg).concat(important, ";\n        box-shadow: ").concat(inputFocusBoxShadow, ";\n      }\n      \n      .message-input::placeholder {\n        color: ").concat(placeholderColor).concat(important, ";\n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, ";\n      }\n      \n      .send-button {\n        width: 44px").concat(important, ";\n        height: 44px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: ").concat(sendButtonColor, ";\n        color: ").concat(sendButtonTextColor, ";\n        font-size: ").concat(this.config.sendButtonFontSize || ((_this$config$panel15 = this.config.panel) === null || _this$config$panel15 === void 0 ? void 0 : _this$config$panel15.sendButtonFontSize) || '20px', ";\n        font-weight: ").concat(this.config.sendButtonFontWeight || ((_this$config$panel16 = this.config.panel) === null || _this$config$panel16 === void 0 ? void 0 : _this$config$panel16.sendButtonFontWeight) || '500', ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n        box-shadow: 0 4px 12px rgba(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", 0.32)").concat(important, ";\n      }\n      \n      .send-button:hover:not(:disabled) {\n        background: ").concat(sendButtonHoverColor, ";\n        transform: scale(1.05)").concat(important, ";\n        box-shadow: 0 6px 16px rgba(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", 0.42)").concat(important, ";\n      }\n      \n      .send-button-hint {\n        width: 100%").concat(important, ";\n        text-align: center").concat(important, ";\n        margin-top: 4px").concat(important, ";\n      }\n      \n      .send-button:disabled {\n        opacity: 0.5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n      \n      .typing-indicator {\n        display: inline-flex").concat(important, ";\n        gap: 4px").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      \n      .typing-dot {\n        width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: rgba(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", ").concat(typingDotAlpha, ")").concat(important, ";\n        animation: typingDot 1.4s ease-in-out infinite").concat(important, ";\n      }\n      \n      .typing-dot:nth-child(2) { animation-delay: 0.2s").concat(important, "; }\n      .typing-dot:nth-child(3) { animation-delay: 0.4s").concat(important, "; }\n      \n      @keyframes typingDot {\n        0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }\n        30% { transform: translateY(-8px); opacity: 1; }\n      }\n      \n      .error-message {\n        padding: 12px").concat(important, ";\n        background: ").concat(errorBubbleBg, ";\n        border-radius: ").concat(messages.borderRadius, "px;\n        color: ").concat(errorBubbleColor).concat(important, ";\n        border: ").concat(errorBubbleBorder).concat(important, ";\n        font-size: ").concat(messages.fontSize).concat(important, ";\n        margin: 8px 0").concat(important, ";\n      }\n      \n      ").concat(useVoiceTheme ? "\n      #textInterface.active .input-container .send-button-hint {\n        color: rgba(255,255,255,0.72)".concat(important, ";\n      }\n      ") : '', "\n      \n      @media (max-width: 768px) {\n        #messagesContainer {\n          padding: 12px").concat(important, ";\n          gap: 12px").concat(important, ";\n        }\n        \n        .message-bubble {\n          max-width: 85%").concat(important, ";\n          font-size: ").concat(messages.fontSize).concat(important, ";\n          padding: 12px 14px").concat(important, ";\n        }\n        \n        .text-input-container {\n          padding: 10px").concat(important, ";\n          gap: 8px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 10px 14px").concat(important, ";\n          min-height: 44px").concat(important, ";\n        }\n        \n        #text-chat-send {\n          min-width: 56px").concat(important, ";\n          min-height: 44px").concat(important, ";\n          width: 56px").concat(important, ";\n          height: 44px").concat(important, ";\n        }\n        \n        .empty-state-icon {\n          font-size: 44px").concat(important, ";\n        }\n        \n        .empty-state-title {\n          font-size: 20px").concat(important, ";\n        }\n        \n        .empty-state-text {\n          font-size: 14px").concat(important, ";\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #messagesContainer {\n          padding: 10px").concat(important, ";\n          gap: 10px").concat(important, ";\n        }\n        \n        .message-bubble {\n          max-width: 90%").concat(important, ";\n          font-size: ").concat(messages.fontSize).concat(important, ";\n          padding: 10px 12px").concat(important, ";\n        }\n        \n        .text-input-container {\n          padding: 8px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important;\n          padding: 8px 12px").concat(important, ";\n        }\n      }\n    ");
     }
 
     /**
@@ -37412,6 +38343,7 @@ var VoiceInterface = /*#__PURE__*/function () {
                 clearInterval(this.callTimerInterval);
                 this.callTimerInterval = null;
               }
+              this.callStartTime = null;
 
               // Hide active state, show idle state first
               activeState = this.shadowRoot.getElementById('voiceActiveState');
@@ -37580,6 +38512,10 @@ var VoiceInterface = /*#__PURE__*/function () {
         clearInterval(this.callTimerInterval);
         this.callTimerInterval = null;
       }
+      // Reset the start time so the next call's timer block (gated on !callStartTime)
+      // actually restarts the interval. Without this, the timer only ever runs for the
+      // first call and stays stuck at 00:00 on every subsequent call.
+      this.callStartTime = null;
 
       // Clean up text inject timeouts and handlers (desktop)
       if (this._textInjectTimeout) {
@@ -40327,6 +41263,21 @@ var Templates = /*#__PURE__*/function () {
       return this.voiceInterface.getTooltip(key);
     }
 
+    /**
+     * Shared "About" info ("i") button markup. Opens the About dialog
+     * (SDK version + last conversation id) wired by TTPChatWidget.
+     * @param {string} [extraClass] - extra class(es) for positioning per view
+     * @returns {string}
+     */
+  }, {
+    key: "infoButton",
+    value: function infoButton() {
+      var extraClass = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      var cls = extraClass ? "ttp-info-btn ".concat(extraClass) : 'ttp-info-btn';
+      var label = this.t('aboutTitle') || 'About';
+      return "<button type=\"button\" class=\"".concat(cls, "\" aria-label=\"").concat(escapeHtmlAttr(label), "\" title=\"").concat(escapeHtmlAttr(label), "\">\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"9\"/>\n                <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"16\"/>\n                <circle cx=\"12\" cy=\"7.7\" r=\"1.05\" fill=\"currentColor\" stroke=\"none\"/>\n              </svg>\n            </button>");
+    }
+
     /**
      * Generate HTML for voice interface.
      * Automatically detects mobile vs desktop based on voiceInterface.isMobile
@@ -40357,7 +41308,7 @@ var Templates = /*#__PURE__*/function () {
       var transcriptPlaceholder = this.t('transcriptWillAppear') || '';
       var transcriptDir = (0,_rtlText_js__WEBPACK_IMPORTED_MODULE_0__.dirForTranscriptSnippet)(transcriptPlaceholder, this.config);
       var voiceInputDir = (0,_rtlText_js__WEBPACK_IMPORTED_MODULE_0__.dirForAssistantStreamingText)(this.config);
-      return "<div class=\"voice-interface\" id=\"voiceInterface\">\n      <!-- Idle View -->\n      <div id=\"voiceIdleState\">\n        <div class=\"ttp-hero\">\n          <div class=\"ttp-header\">\n            <div class=\"ttp-agent\">\n              <div class=\"ttp-avatar-wrap\">\n                <div class=\"".concat(idleAvatarClass, "\">").concat(idleAvatarInner, "</div>\n                <div class=\"ttp-online-dot\"></div>\n              </div>\n              <div>\n                <div class=\"ttp-agent-name\">").concat(agentName, "</div>\n                <div class=\"ttp-agent-role\">").concat(agentRole, "</div>\n              </div>\n            </div>\n            <button type=\"button\" class=\"ttp-close-btn\" id=\"ttpCloseIdle\" aria-label=\"Close widget\">\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M10 2L2 10M2 2l8 8\"/>\n              </svg>\n            </button>\n          </div>\n          <div class=\"ttp-headline\">").concat(headline, "</div>\n          <div class=\"ttp-subline\">").concat(subline, "</div>\n        </div>\n\n        <div class=\"ttp-body\">\n          <button type=\"button\" class=\"ttp-btn-primary\" id=\"startCallBtn\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"").concat(this.config.startCallButtonTextColor || 'white', "\" stroke-width=\"2\">\n              <path d=\"M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z\"/>\n              <path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M8 22h8\"/>\n            </svg>\n            ").concat(this.getText('startCallButtonText', 'startCall') || 'Start Voice Call', "\n          </button>\n          ").concat((((_this$config$behavior = this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mode) || 'unified') !== 'voice-only' ? "\n          <button type=\"button\" class=\"ttp-btn-secondary\" id=\"startTextBtn\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>\n            </svg>\n            ".concat(this.config.sendMessageText || this.getText('sendMessageText', 'sendMessage') || 'Send a Message', "\n          </button>\n          ") : '', "\n          ").concat((_this$config$whatsapp = this.config.whatsapp) !== null && _this$config$whatsapp !== void 0 && _this$config$whatsapp.number ? "\n          <a class=\"ttp-btn-wa\" id=\"ttpWhatsAppBtn\"\n             href=\"https://wa.me/".concat(this.config.whatsapp.number).concat(this.config.whatsapp.text ? '?text=' + encodeURIComponent(this.config.whatsapp.text) : '', "\"\n             target=\"_blank\" rel=\"noopener\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"#25d366\">\n              <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.655-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"/>\n            </svg>\n            WhatsApp\n          </a>\n          ") : '', "\n        </div>\n      </div>\n\n      <!-- Active Call View -->\n      <div id=\"voiceActiveState\" style=\"display: none;\">\n        <!-- Full voice section (hidden when items/rooms are shown) -->\n        <div class=\"desktop-voice-section\" id=\"desktopVoiceSection\">\n          <div class=\"ttp-call-hero\">\n            <div class=\"ttp-call-topbar\">\n              <div class=\"ttp-rec\">\n                <div class=\"ttp-rec-dot\"></div>\n                <span class=\"ttp-timer\" id=\"desktopTimerText\">00:00</span>\n              </div>\n              <span class=\"ttp-call-label\">Voice call active</span>\n              <button type=\"button\" class=\"ttp-close-btn\" id=\"ttpCloseActive\" aria-label=\"Close widget\">\n                <svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M10 2L2 10M2 2l8 8\"/>\n                </svg>\n              </button>\n            </div>\n\n            <div class=\"ttp-orb-wrap\">\n              <div class=\"ttp-orb-rings\">\n                <div class=\"ttp-ring ttp-ring-1\"></div>\n                <div class=\"ttp-ring ttp-ring-2\"></div>\n                <div class=\"ttp-orb\" id=\"desktopMainWaveform\">\n                  <div class=\"ttp-wave\" id=\"ttp-wave\"></div>\n                </div>\n              </div>\n              <div class=\"ttp-listen-label\" id=\"desktopStatusText\">").concat(this.t('listening') || 'Listening to you...', "</div>\n            </div>\n          </div>\n\n          <div class=\"ttp-controls\">\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopMuteBtn\" title=\"").concat(this.getTooltip('mute'), "\" aria-label=\"Mute microphone\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-mic-icon\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-mic-off-icon\" style=\"display: none; position: absolute;\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopPauseBtn\" title=\"Pause call\" aria-label=\"Pause call\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"desktop-pause-icon\">\n                <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\" class=\"desktop-play-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"6,4 20,12 6,20\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopSpeakerBtn\" title=\"").concat(this.getTooltip('speaker'), "\" aria-label=\"Toggle speaker\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-speaker-off-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-end-btn\" id=\"desktopEndCallBtn\" title=\"").concat(this.getTooltip('endCall'), "\" aria-label=\"End call\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 12 19.79 19.79 0 0 1 1.97 3.4 2 2 0 0 1 3.95 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Compact voice section (shown when items/rooms are visible) -->\n        <div class=\"compact-voice-section\" id=\"compactVoiceSection\" style=\"display: none;\">\n          <div class=\"compact-left\">\n            <div class=\"compact-avatar\" id=\"desktopAvatarCompact\">\n              <div class=\"ttp-orb compact-orb\" id=\"desktopMainWaveformCompact\">\n                <div class=\"ttp-wave\"></div>\n              </div>\n            </div>\n            <div class=\"compact-info\">\n              <div class=\"compact-timer\" id=\"desktopTimerCompact\">\n                <span class=\"ttp-rec-dot\"></span>\n                <span id=\"compactTimerText\">00:00</span>\n              </div>\n              <div class=\"compact-status\" id=\"desktopStatusCompact\">\n                <span id=\"compactStatusText\">").concat(this.t('listening') || 'Listening...', "</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"compact-controls\">\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopMuteBtnCompact\" title=\"").concat(this.getTooltip('mute'), "\" aria-label=\"Mute microphone\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-mic-icon\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-mic-off-icon\" style=\"display: none; position: absolute;\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopPauseBtnCompact\" title=\"Pause call\" aria-label=\"Pause call\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"desktop-pause-icon\">\n                <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\" class=\"desktop-play-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"6,4 20,12 6,20\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopSpeakerBtnCompact\" title=\"").concat(this.getTooltip('speaker'), "\" aria-label=\"Toggle speaker\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-speaker-off-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn danger\" id=\"desktopEndCallBtnCompact\" title=\"").concat(this.getTooltip('endCall'), "\" aria-label=\"End call\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"overflow: visible;\">\n                <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 12 19.79 19.79 0 0 1 1.97 3.4 2 2 0 0 1 3.95 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\" transform=\"rotate(135 12 12)\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Transcript -->\n        <div class=\"ttp-transcript desktop-conversation-panel\" id=\"desktopConversationPanel\" dir=\"").concat(textDir, "\">\n          <div class=\"ttp-transcript-hdr\" id=\"conversationHeader\">\n            <span class=\"ttp-live-label\">Live</span>\n            <span class=\"ttp-toggle-text\" id=\"conversationToggleText\">Show history</span>\n            <div class=\"ttp-dots\">\n              <div class=\"ttp-dot\"></div>\n              <div class=\"ttp-dot\"></div>\n              <div class=\"ttp-dot\"></div>\n            </div>\n          </div>\n          <div class=\"live-transcript-collapsed\" id=\"liveTranscriptCollapsed\">\n            <div class=\"ttp-transcript-text\" id=\"liveTextCollapsed\" dir=\"").concat(transcriptDir, "\">\n              ").concat(this.t('transcriptWillAppear') || 'Transcript will appear here...', "<span class=\"ttp-cursor\"></span>\n            </div>\n          </div>\n          <div class=\"conversation-history\" id=\"conversationHistory\">\n            <div class=\"conversation-messages\" id=\"conversationMessages\"></div>\n            <div class=\"live-message-row\" id=\"liveMessageRow\" style=\"display: none;\">\n              <div class=\"message-bubble\" dir=\"").concat(transcriptDir, "\">\n                <span class=\"live-badge\">Live</span>\n                <span id=\"liveMessageText\"></span><span class=\"ttp-cursor\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Type row -->\n        <div class=\"ttp-type-row voice-text-input-area\">\n          <input class=\"ttp-input\" type=\"text\" id=\"voiceTextInput\" dir=\"").concat(voiceInputDir, "\" placeholder=\"").concat(this.getText('inputPlaceholder', 'typeMessage') || 'Or type here…', "\" aria-label=\"Type a message\" />\n          <button type=\"button\" class=\"ttp-send-btn\" id=\"voiceSendBtn\" aria-label=\"Send message\">\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\">\n              <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/>\n              <polygon points=\"22 2 15 22 11 13 2 9 22 2\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>");
+      return "<div class=\"voice-interface\" id=\"voiceInterface\">\n      <!-- Idle View -->\n      <div id=\"voiceIdleState\">\n        <div class=\"ttp-hero\">\n          <div class=\"ttp-header\">\n            <div class=\"ttp-agent\">\n              <div class=\"ttp-avatar-wrap\">\n                <div class=\"".concat(idleAvatarClass, "\">").concat(idleAvatarInner, "</div>\n                <div class=\"ttp-online-dot\"></div>\n              </div>\n              <div>\n                <div class=\"ttp-agent-name\">").concat(agentName, "</div>\n                <div class=\"ttp-agent-role\">").concat(agentRole, "</div>\n              </div>\n            </div>\n            <div class=\"ttp-header-actions\">\n              ").concat(this.infoButton(), "\n              <button type=\"button\" class=\"ttp-close-btn\" id=\"ttpCloseIdle\" aria-label=\"Close widget\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M10 2L2 10M2 2l8 8\"/>\n                </svg>\n              </button>\n            </div>\n          </div>\n          <div class=\"ttp-headline\">").concat(headline, "</div>\n          <div class=\"ttp-subline\">").concat(subline, "</div>\n        </div>\n\n        <div class=\"ttp-body\">\n          <button type=\"button\" class=\"ttp-btn-primary\" id=\"startCallBtn\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"").concat(this.config.startCallButtonTextColor || 'white', "\" stroke-width=\"2\">\n              <path d=\"M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z\"/>\n              <path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M8 22h8\"/>\n            </svg>\n            ").concat(this.getText('startCallButtonText', 'startCall') || 'Start Voice Call', "\n          </button>\n          ").concat((((_this$config$behavior = this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mode) || 'unified') !== 'voice-only' ? "\n          <button type=\"button\" class=\"ttp-btn-secondary\" id=\"startTextBtn\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>\n            </svg>\n            ".concat(this.config.sendMessageText || this.getText('sendMessageText', 'sendMessage') || 'Send a Message', "\n          </button>\n          ") : '', "\n          ").concat((_this$config$whatsapp = this.config.whatsapp) !== null && _this$config$whatsapp !== void 0 && _this$config$whatsapp.number ? "\n          <a class=\"ttp-btn-wa\" id=\"ttpWhatsAppBtn\"\n             href=\"https://wa.me/".concat(this.config.whatsapp.number).concat(this.config.whatsapp.text ? '?text=' + encodeURIComponent(this.config.whatsapp.text) : '', "\"\n             target=\"_blank\" rel=\"noopener\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"#25d366\">\n              <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.655-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"/>\n            </svg>\n            WhatsApp\n          </a>\n          ") : '', "\n        </div>\n      </div>\n\n      <!-- Active Call View -->\n      <div id=\"voiceActiveState\" style=\"display: none;\">\n        <!-- Full voice section (hidden when items/rooms are shown) -->\n        <div class=\"desktop-voice-section\" id=\"desktopVoiceSection\">\n          <div class=\"ttp-call-hero\">\n            <div class=\"ttp-call-topbar\">\n              <div class=\"ttp-rec\">\n                <div class=\"ttp-rec-dot\"></div>\n                <span class=\"ttp-timer\" id=\"desktopTimerText\">00:00</span>\n              </div>\n              <span class=\"ttp-call-label\">Voice call active</span>\n              <div class=\"ttp-header-actions\">\n                ").concat(this.infoButton(), "\n                <button type=\"button\" class=\"ttp-close-btn\" id=\"ttpCloseActive\" aria-label=\"Close widget\">\n                  <svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path d=\"M10 2L2 10M2 2l8 8\"/>\n                  </svg>\n                </button>\n              </div>\n            </div>\n\n            <div class=\"ttp-orb-wrap\">\n              <div class=\"ttp-orb-rings\">\n                <div class=\"ttp-ring ttp-ring-1\"></div>\n                <div class=\"ttp-ring ttp-ring-2\"></div>\n                <div class=\"ttp-orb\" id=\"desktopMainWaveform\">\n                  <div class=\"ttp-wave\" id=\"ttp-wave\"></div>\n                </div>\n              </div>\n              <div class=\"ttp-listen-label\" id=\"desktopStatusText\">").concat(this.t('listening') || 'Listening to you...', "</div>\n            </div>\n          </div>\n\n          <div class=\"ttp-controls\">\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopMuteBtn\" title=\"").concat(this.getTooltip('mute'), "\" aria-label=\"Mute microphone\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-mic-icon\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-mic-off-icon\" style=\"display: none; position: absolute;\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopPauseBtn\" title=\"Pause call\" aria-label=\"Pause call\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"desktop-pause-icon\">\n                <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\" class=\"desktop-play-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"6,4 20,12 6,20\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopSpeakerBtn\" title=\"").concat(this.getTooltip('speaker'), "\" aria-label=\"Toggle speaker\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-speaker-off-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-end-btn\" id=\"desktopEndCallBtn\" title=\"").concat(this.getTooltip('endCall'), "\" aria-label=\"End call\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 12 19.79 19.79 0 0 1 1.97 3.4 2 2 0 0 1 3.95 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Compact voice section (shown when items/rooms are visible) -->\n        <div class=\"compact-voice-section\" id=\"compactVoiceSection\" style=\"display: none;\">\n          <div class=\"compact-left\">\n            <div class=\"compact-avatar\" id=\"desktopAvatarCompact\">\n              <div class=\"ttp-orb compact-orb\" id=\"desktopMainWaveformCompact\">\n                <div class=\"ttp-wave\"></div>\n              </div>\n            </div>\n            <div class=\"compact-info\">\n              <div class=\"compact-timer\" id=\"desktopTimerCompact\">\n                <span class=\"ttp-rec-dot\"></span>\n                <span id=\"compactTimerText\">00:00</span>\n              </div>\n              <div class=\"compact-status\" id=\"desktopStatusCompact\">\n                <span id=\"compactStatusText\">").concat(this.t('listening') || 'Listening...', "</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"compact-controls\">\n            ").concat(this.infoButton('ttp-info-btn--onctrl'), "\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopMuteBtnCompact\" title=\"").concat(this.getTooltip('mute'), "\" aria-label=\"Mute microphone\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-mic-icon\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-mic-off-icon\" style=\"display: none; position: absolute;\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopPauseBtnCompact\" title=\"Pause call\" aria-label=\"Pause call\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"desktop-pause-icon\">\n                <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\" class=\"desktop-play-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"6,4 20,12 6,20\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopSpeakerBtnCompact\" title=\"").concat(this.getTooltip('speaker'), "\" aria-label=\"Toggle speaker\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-speaker-off-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn danger\" id=\"desktopEndCallBtnCompact\" title=\"").concat(this.getTooltip('endCall'), "\" aria-label=\"End call\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"overflow: visible;\">\n                <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 12 19.79 19.79 0 0 1 1.97 3.4 2 2 0 0 1 3.95 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\" transform=\"rotate(135 12 12)\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Transcript -->\n        <div class=\"ttp-transcript desktop-conversation-panel\" id=\"desktopConversationPanel\" dir=\"").concat(textDir, "\">\n          <div class=\"ttp-transcript-hdr\" id=\"conversationHeader\">\n            <span class=\"ttp-live-label\">Live</span>\n            <span class=\"ttp-toggle-text\" id=\"conversationToggleText\">Show history</span>\n            <div class=\"ttp-dots\">\n              <div class=\"ttp-dot\"></div>\n              <div class=\"ttp-dot\"></div>\n              <div class=\"ttp-dot\"></div>\n            </div>\n          </div>\n          <div class=\"live-transcript-collapsed\" id=\"liveTranscriptCollapsed\">\n            <div class=\"ttp-transcript-text\" id=\"liveTextCollapsed\" dir=\"").concat(transcriptDir, "\">\n              ").concat(this.t('transcriptWillAppear') || 'Transcript will appear here...', "<span class=\"ttp-cursor\"></span>\n            </div>\n          </div>\n          <div class=\"conversation-history\" id=\"conversationHistory\">\n            <div class=\"conversation-messages\" id=\"conversationMessages\"></div>\n            <div class=\"live-message-row\" id=\"liveMessageRow\" style=\"display: none;\">\n              <div class=\"message-bubble\" dir=\"").concat(transcriptDir, "\">\n                <span class=\"live-badge\">Live</span>\n                <span id=\"liveMessageText\"></span><span class=\"ttp-cursor\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Type row -->\n        <div class=\"ttp-type-row voice-text-input-area\">\n          <input class=\"ttp-input\" type=\"text\" id=\"voiceTextInput\" dir=\"").concat(voiceInputDir, "\" placeholder=\"").concat(this.getText('inputPlaceholder', 'typeMessage') || 'Or type here…', "\" aria-label=\"Type a message\" />\n          <button type=\"button\" class=\"ttp-send-btn\" id=\"voiceSendBtn\" aria-label=\"Send message\">\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\">\n              <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/>\n              <polygon points=\"22 2 15 22 11 13 2 9 22 2\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>");
     }
 
     /**
@@ -40374,7 +41325,7 @@ var Templates = /*#__PURE__*/function () {
       var headerAvatarUrl = resolveIdleHeaderAvatarUrl(this.config);
       var mobileAvatarInner = headerAvatarUrl ? "<img src=\"".concat(escapeHtmlAttr(headerAvatarUrl), "\" alt=\"\" class=\"voice-avatar-img\" />") : '🤖';
       var mobileAvatarClass = headerAvatarUrl ? 'voice-avatar voice-avatar--image' : 'voice-avatar';
-      return "<div class=\"voice-interface mobile-voice-interface\" id=\"voiceInterface\" dir=\"".concat(textDir, "\">\n      <!-- Before Call State (same as desktop) -->\n      <div id=\"voiceIdleState\">\n        <div class=\"").concat(mobileAvatarClass, "\" id=\"voiceAvatar\">").concat(mobileAvatarInner, "</div>\n        <div class=\"voice-status\">\n          <div class=\"voice-status-title\">").concat(this.getText('startCallTitle', 'clickToStartCall'), "</div>\n          <div class=\"voice-status-subtitle\">").concat(this.getText('startCallSubtitle', 'realTimeVoice'), "</div>\n        </div>\n        <button type=\"button\" class=\"start-call-btn\" id=\"startCallBtn\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z\"/>\n          </svg>\n          <span>").concat(this.getText('startCallButtonText', 'startCall'), "</span>\n        </button>\n      </div>\n      \n      <!-- Mobile Active Call State - Hidden placeholder (actual bar will be appended to body) -->\n      <div id=\"voiceActiveState\" class=\"mobile-active-state\" style=\"display: none;\">\n        <!-- Duration Badge -->\n        <div class=\"mobile-duration-badge\" id=\"mobileDurationBadge\">\n          <div class=\"mobile-duration-dot\"></div>\n          <span id=\"mobileDurationText\">00:00</span>\n        </div>\n        \n        <!-- Main Bar -->\n        <div class=\"mobile-voice-bar\">\n          <!-- Top Row: Status, Waveform, Controls -->\n          <div class=\"mobile-top-row\">\n            <!-- Status Indicator -->\n            <div class=\"mobile-status-indicator\">\n              <div class=\"mobile-status-dot\" id=\"mobileStatusDot\"></div>\n              <span class=\"mobile-status-text\" id=\"mobileStatusText\">Listening...</span>\n            </div>\n            \n            <!-- Centered Waveform -->\n            <div class=\"mobile-waveform-center\" id=\"mobileWaveform\">\n              ").concat(Array(7).fill(0).map(function (_, i) {
+      return "<div class=\"voice-interface mobile-voice-interface\" id=\"voiceInterface\" dir=\"".concat(textDir, "\">\n      <!-- Before Call State (same as desktop) -->\n      <div id=\"voiceIdleState\">\n        ").concat(this.infoButton('ttp-info-btn--floating'), "\n        <div class=\"").concat(mobileAvatarClass, "\" id=\"voiceAvatar\">").concat(mobileAvatarInner, "</div>\n        <div class=\"voice-status\">\n          <div class=\"voice-status-title\">").concat(this.getText('startCallTitle', 'clickToStartCall'), "</div>\n          <div class=\"voice-status-subtitle\">").concat(this.getText('startCallSubtitle', 'realTimeVoice'), "</div>\n        </div>\n        <button type=\"button\" class=\"start-call-btn\" id=\"startCallBtn\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z\"/>\n          </svg>\n          <span>").concat(this.getText('startCallButtonText', 'startCall'), "</span>\n        </button>\n      </div>\n      \n      <!-- Mobile Active Call State - Hidden placeholder (actual bar will be appended to body) -->\n      <div id=\"voiceActiveState\" class=\"mobile-active-state\" style=\"display: none;\">\n        <!-- Duration Badge -->\n        <div class=\"mobile-duration-badge\" id=\"mobileDurationBadge\">\n          <div class=\"mobile-duration-dot\"></div>\n          <span id=\"mobileDurationText\">00:00</span>\n          ").concat(this.infoButton('ttp-info-btn--onbadge'), "\n        </div>\n\n        <!-- Main Bar -->\n        <div class=\"mobile-voice-bar\">\n          <!-- Top Row: Status, Waveform, Controls -->\n          <div class=\"mobile-top-row\">\n            <!-- Status Indicator -->\n            <div class=\"mobile-status-indicator\">\n              <div class=\"mobile-status-dot\" id=\"mobileStatusDot\"></div>\n              <span class=\"mobile-status-text\" id=\"mobileStatusText\">Listening...</span>\n            </div>\n            \n            <!-- Centered Waveform -->\n            <div class=\"mobile-waveform-center\" id=\"mobileWaveform\">\n              ").concat(Array(7).fill(0).map(function (_, i) {
         return "<div class=\"mobile-waveform-bar\" data-index=\"".concat(i, "\"></div>");
       }).join(''), "\n            </div>\n            \n            <!-- Controls -->\n            <div class=\"mobile-controls\">\n              <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileMuteBtn\" aria-label=\"Mute microphone\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-icon\">\n                  <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                  <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                  <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n                </svg>\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-off-icon\" style=\"display: none;\">\n                  <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                  <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                  <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n                  <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n                </svg>\n              </button>\n              \n              <button type=\"button\" class=\"mobile-control-btn\" id=\"mobilePauseBtn\" aria-label=\"Pause call\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" class=\"mobile-pause-icon\">\n                  <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                  <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                </svg>\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"#fff\" stroke=\"none\" class=\"mobile-play-icon\" style=\"display: none;\">\n                  <polygon points=\"6,4 20,12 6,20\"/>\n                </svg>\n              </button>\n\n              <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileSpeakerBtn\" aria-label=\"Toggle speaker\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-icon\">\n                  <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                  <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n                </svg>\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-off-icon\" style=\"display: none;\">\n                  <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                  <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n                  <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n                </svg>\n              </button>\n\n              <button type=\"button\" class=\"mobile-end-call-btn\" id=\"mobileEndCallBtn\" aria-label=\"End call\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91\"/>\n                  <line x1=\"22\" x2=\"2\" y1=\"2\" y2=\"22\"/>\n                </svg>\n              </button>\n            </div>\n          </div>\n          \n          <!-- Bottom Row: Transcript (expandable) -->\n          <button type=\"button\" class=\"mobile-transcript-row\" id=\"mobileTranscriptRow\">\n            <p class=\"mobile-transcript-text\" id=\"mobileTranscriptText\" dir=\"").concat(transcriptDir, "\">").concat(this.t('transcriptWillAppear'), "</p>\n            <div class=\"mobile-transcript-footer\">\n              <span class=\"mobile-expand-hint\">tap to expand & type</span>\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity: 0.6;\">\n                <path d=\"M7 17L17 7M17 7H7M17 7V17\"/>\n              </svg>\n            </div>\n          </button>\n        </div>\n      </div>\n      \n      <!-- Expanded Transcript Overlay -->\n      <div class=\"mobile-transcript-overlay\" id=\"mobileTranscriptOverlay\">\n        <div class=\"mobile-expanded-transcript\" id=\"mobileExpandedTranscript\">\n          <!-- Header -->\n          <div class=\"mobile-transcript-header\">\n            <div class=\"mobile-header-left\">\n              <div class=\"mobile-header-status\">\n                <div class=\"mobile-header-status-dot\"></div>\n                <span class=\"mobile-header-status-text\" id=\"mobileHeaderStatusText\">Listening...</span>\n                <span class=\"mobile-header-duration\" id=\"mobileHeaderDuration\">00:00</span>\n              </div>\n              <span class=\"mobile-transcript-label\">CONVERSATION</span>\n            </div>\n            <button type=\"button\" class=\"mobile-close-transcript-btn\" id=\"mobileCloseTranscriptBtn\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\n              </svg>\n            </button>\n          </div>\n          \n          <!-- Messages Container -->\n          <div class=\"mobile-messages-container\" id=\"mobileMessagesContainer\">\n            <!-- Messages will be dynamically added here -->\n          </div>\n          \n          <!-- Text Input Area -->\n          <div class=\"mobile-input-area\">\n            <div class=\"mobile-input-wrapper\">\n              <input\n                type=\"text\"\n                placeholder=\"Type a message...\"\n                id=\"mobileTextInput\"\n                class=\"mobile-text-input\"\n                dir=\"").concat(voiceInputDir, "\"\n              />\n              <button type=\"button\" class=\"mobile-send-btn\" id=\"mobileSendBtn\" disabled>\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z\"/>\n                </svg>\n              </button>\n            </div>\n            <p class=\"mobile-input-hint\">\uD83C\uDF99\uFE0F Voice is still active \u2022 Type or speak</p>\n          </div>\n        </div>\n      </div>\n    </div>");
     }
@@ -41219,7 +42170,11 @@ __webpack_require__.r(__webpack_exports__);
     "typeMessage": "Type your message...",
     "sendMessageAria": "Send message",
     "domainNotValidated": "Domain not validated",
-    "domainErrorMessage": "This domain is not whitelisted. Please contact the administrator to whitelist your website URL."
+    "domainErrorMessage": "This domain is not whitelisted. Please contact the administrator to whitelist your website URL.",
+    "aboutTitle": "About",
+    "aboutVersion": "SDK version",
+    "aboutConversationId": "Last conversation ID",
+    "aboutNoConversation": "No conversation yet"
   },
   "he": {
     "landingTitle": "איך תרצה לתקשר?",
@@ -41252,7 +42207,11 @@ __webpack_require__.r(__webpack_exports__);
     "typeMessage": "הקלד הודעה...",
     "sendMessageAria": "שלח הודעה",
     "domainNotValidated": "דומיין לא מאומת",
-    "domainErrorMessage": "דומיין זה לא ברשימת המורשים. אנא פנה למנהל המערכת כדי להוסיף את כתובת האתר שלך לרשימה."
+    "domainErrorMessage": "דומיין זה לא ברשימת המורשים. אנא פנה למנהל המערכת כדי להוסיף את כתובת האתר שלך לרשימה.",
+    "aboutTitle": "אודות",
+    "aboutVersion": "גרסת SDK",
+    "aboutConversationId": "מזהה שיחה אחרון",
+    "aboutNoConversation": "אין שיחה עדיין"
   },
   "ar": {
     "landingTitle": "كيف تريد التواصل؟",
@@ -41285,7 +42244,11 @@ __webpack_require__.r(__webpack_exports__);
     "typeMessage": "اكتب رسالة...",
     "sendMessageAria": "إرسال رسالة",
     "domainNotValidated": "النطاق غير معتمد",
-    "domainErrorMessage": "هذا النطاق غير مسموح به. يرجى الاتصال بالمسؤول لإضافة عنوان موقع الويب الخاص بك إلى القائمة."
+    "domainErrorMessage": "هذا النطاق غير مسموح به. يرجى الاتصال بالمسؤول لإضافة عنوان موقع الويب الخاص بك إلى القائمة.",
+    "aboutTitle": "حول",
+    "aboutVersion": "إصدار SDK",
+    "aboutConversationId": "معرّف آخر محادثة",
+    "aboutNoConversation": "لا توجد محادثة بعد"
   },
   "ru": {
     "landingTitle": "Как вы хотите общаться?",
@@ -41318,7 +42281,11 @@ __webpack_require__.r(__webpack_exports__);
     "typeMessage": "Введите сообщение...",
     "sendMessageAria": "Отправить сообщение",
     "domainNotValidated": "Домен не проверен",
-    "domainErrorMessage": "Этот домен не в белом списке. Пожалуйста, свяжитесь с администратором, чтобы добавить URL вашего веб-сайта в список."
+    "domainErrorMessage": "Этот домен не в белом списке. Пожалуйста, свяжитесь с администратором, чтобы добавить URL вашего веб-сайта в список.",
+    "aboutTitle": "О приложении",
+    "aboutVersion": "Версия SDK",
+    "aboutConversationId": "ID последнего разговора",
+    "aboutNoConversation": "Разговоров пока нет"
   },
   "es": {
     "landingTitle": "¿Cómo te gustaría comunicarte?",
@@ -41351,7 +42318,11 @@ __webpack_require__.r(__webpack_exports__);
     "typeMessage": "Escribe un mensaje...",
     "sendMessageAria": "Enviar mensaje",
     "domainNotValidated": "Dominio no validado",
-    "domainErrorMessage": "Este dominio no está en la lista blanca. Por favor, contacte al administrador para agregar la URL de su sitio web a la lista."
+    "domainErrorMessage": "Este dominio no está en la lista blanca. Por favor, contacte al administrador para agregar la URL de su sitio web a la lista.",
+    "aboutTitle": "Acerca de",
+    "aboutVersion": "Versión del SDK",
+    "aboutConversationId": "ID de última conversación",
+    "aboutNoConversation": "Aún no hay conversación"
   },
   "fr": {
     "landingTitle": "Comment souhaitez-vous communiquer?",
@@ -41384,7 +42355,11 @@ __webpack_require__.r(__webpack_exports__);
     "typeMessage": "Tapez votre message...",
     "sendMessageAria": "Envoyer un message",
     "domainNotValidated": "Domaine non validé",
-    "domainErrorMessage": "Ce domaine n'est pas sur la liste blanche. Veuillez contacter l'administrateur pour ajouter l'URL de votre site Web à la liste."
+    "domainErrorMessage": "Ce domaine n'est pas sur la liste blanche. Veuillez contacter l'administrateur pour ajouter l'URL de votre site Web à la liste.",
+    "aboutTitle": "À propos",
+    "aboutVersion": "Version du SDK",
+    "aboutConversationId": "ID de la dernière conversation",
+    "aboutNoConversation": "Aucune conversation pour l'instant"
   },
   "de": {
     "landingTitle": "Wie möchten Sie kommunizieren?",
@@ -41417,7 +42392,11 @@ __webpack_require__.r(__webpack_exports__);
     "typeMessage": "Geben Sie eine Nachricht ein...",
     "sendMessageAria": "Nachricht senden",
     "domainNotValidated": "Domain nicht validiert",
-    "domainErrorMessage": "Diese Domain steht nicht auf der Whitelist. Bitte kontaktieren Sie den Administrator, um die URL Ihrer Website zur Liste hinzuzufügen."
+    "domainErrorMessage": "Diese Domain steht nicht auf der Whitelist. Bitte kontaktieren Sie den Administrator, um die URL Ihrer Website zur Liste hinzuzufügen.",
+    "aboutTitle": "Über",
+    "aboutVersion": "SDK-Version",
+    "aboutConversationId": "Letzte Konversations-ID",
+    "aboutNoConversation": "Noch keine Konversation"
   }
 });