ttp-agent-sdk 2.35.0 → 2.38.1

package/dist/agent-widget.dev.js

@@ -8349,8 +8349,18 @@ function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new T
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 /**
  * AudioRecorder - Handles audio recording using AudioWorklet
+ *
+ * iOS FIX: Uses a module-level shared AudioContext to avoid the iOS WebKit bug
+ * where closing and immediately recreating an AudioContext causes the new one
+ * to fail silently (getUserMedia returns a "live" stream that produces no audio).
+ * iOS shares a single audio session for all input/output, and AudioContext.close()
+ * doesn't release the hardware synchronously.
  */
 
+var _sharedRecorderContext = null;
+var _sharedRecorderSampleRate = null;
+var _sharedRecorderWorkletLoaded = false;
+var _sharedRecorderWorkletPath = null;
 var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
   function AudioRecorder(config) {
     var _this;
@@ -8361,6 +8371,7 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
     _this.audioWorkletNode = null;
     _this.mediaStream = null;
     _this.isRecording = false;
+    _this._starting = false;
     return _this;
   }
 
@@ -8527,20 +8538,28 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
     value: (function () {
       var _start = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
         var _this2 = this;
-        var permissionState, sampleRate, defaultConstraints, audioConstraints, isConnected, error, _isConnected, _error, processorPath, _isConnected2, _error2, source, userMessage, _permissionState, enhancedError, _t3;
+        var permissionState, sampleRate, defaultConstraints, audioConstraints, isConnected, error, canReuseContext, _isConnected, _error, processorPath, _isConnected2, _error2, source, userMessage, _permissionState, enhancedError, _t3, _t4;
         return _regenerator().w(function (_context3) {
           while (1) switch (_context3.p = _context3.n) {
             case 0:
-              _context3.p = 0;
+              if (!this._starting) {
+                _context3.n = 1;
+                break;
+              }
+              console.warn('⚠️ AudioRecorder: start() already in progress, ignoring duplicate call');
+              return _context3.a(2);
+            case 1:
+              this._starting = true;
+              _context3.p = 2;
               // Always try to request permission - we call getUserMedia every time
               // This ensures the prompt appears if the permission state allows it
               // Even if previously denied, the user might have changed settings, so we always try
               console.log('🎤 AudioRecorder: Requesting microphone access...');
 
               // Check permission state for logging/debugging (but don't block the request)
-              _context3.n = 1;
+              _context3.n = 3;
               return this.checkPermissionState();
-            case 1:
+            case 3:
               permissionState = _context3.v;
               if (permissionState) {
                 console.log("\uD83D\uDCCB AudioRecorder: Current permission state: ".concat(permissionState));
@@ -8558,22 +8577,22 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
                 autoGainControl: true
               };
               audioConstraints = this.config.audioConstraints ? _objectSpread(_objectSpread({}, defaultConstraints), this.config.audioConstraints) : defaultConstraints;
-              _context3.n = 2;
+              _context3.n = 4;
               return navigator.mediaDevices.getUserMedia({
                 audio: _objectSpread({
                   sampleRate: sampleRate,
                   channelCount: 1
                 }, audioConstraints)
               });
-            case 2:
+            case 4:
               this.mediaStream = _context3.v;
               if (!(this.config.checkConnection && typeof this.config.checkConnection === 'function')) {
-                _context3.n = 3;
+                _context3.n = 5;
                 break;
               }
               isConnected = this.config.checkConnection();
               if (isConnected) {
-                _context3.n = 3;
+                _context3.n = 5;
                 break;
               }
               // Silent cleanup - server rejected, this is expected
@@ -8586,81 +8605,121 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
               error.name = 'ServerRejected';
               error.isServerRejection = true;
               throw error;
-            case 3:
-              // Create AudioContext with the same sample rate
+            case 5:
+              // Reuse shared AudioContext if available and compatible (iOS fix)
+              // iOS WebKit has a bug where closing and immediately recreating an AudioContext
+              // causes the new one to fail silently - the audio hardware isn't released in time.
+              // By reusing the same AudioContext across calls, we avoid this race condition entirely.
+              canReuseContext = _sharedRecorderContext && _sharedRecorderContext.state !== 'closed' && _sharedRecorderSampleRate === sampleRate;
+              if (!canReuseContext) {
+                _context3.n = 7;
+                break;
+              }
+              console.log('♻️ AudioRecorder: Reusing shared AudioContext (iOS-safe)');
+              this.audioContext = _sharedRecorderContext;
+              if (!(this.audioContext.state === 'suspended')) {
+                _context3.n = 6;
+                break;
+              }
+              _context3.n = 6;
+              return this.audioContext.resume();
+            case 6:
+              _context3.n = 13;
+              break;
+            case 7:
+              if (!(_sharedRecorderContext && _sharedRecorderContext.state !== 'closed')) {
+                _context3.n = 12;
+                break;
+              }
+              console.log('🔄 AudioRecorder: Sample rate changed, closing old shared AudioContext');
+              _context3.p = 8;
+              _context3.n = 9;
+              return _sharedRecorderContext.close();
+            case 9:
+              _context3.n = 11;
+              break;
+            case 10:
+              _context3.p = 10;
+              _t3 = _context3.v;
+              console.warn('⚠️ AudioRecorder: Error closing old shared context:', _t3);
+            case 11:
+              _sharedRecorderWorkletLoaded = false;
+              _sharedRecorderWorkletPath = null;
+            case 12:
               this.audioContext = new (window.AudioContext || window.webkitAudioContext)({
                 sampleRate: sampleRate
               });
-
-              // Resume AudioContext if suspended
+              _sharedRecorderContext = this.audioContext;
+              _sharedRecorderSampleRate = sampleRate;
+              _sharedRecorderWorkletLoaded = false;
+              console.log('🎵 AudioRecorder: Created new shared AudioContext at', sampleRate, 'Hz');
+            case 13:
               if (!(this.audioContext.state === 'suspended')) {
-                _context3.n = 4;
+                _context3.n = 14;
                 break;
               }
-              _context3.n = 4;
+              _context3.n = 14;
               return this.audioContext.resume();
-            case 4:
+            case 14:
               if (!(this.config.checkConnection && typeof this.config.checkConnection === 'function')) {
-                _context3.n = 6;
+                _context3.n = 15;
                 break;
               }
               _isConnected = this.config.checkConnection();
               if (_isConnected) {
-                _context3.n = 6;
+                _context3.n = 15;
                 break;
               }
               // Silent cleanup - server rejected, this is expected
-              // Clean up media stream and AudioContext
+              // Stop media stream but DON'T close the shared AudioContext
               this.mediaStream.getTracks().forEach(function (track) {
                 return track.stop();
               });
               this.mediaStream = null;
-              if (!(this.audioContext && this.audioContext.state !== 'closed')) {
-                _context3.n = 5;
-                break;
-              }
-              _context3.n = 5;
-              return this.audioContext.close();
-            case 5:
               this.audioContext = null;
               _error = new Error('Connection lost - server may have rejected the call');
               _error.name = 'ServerRejected';
               _error.isServerRejection = true;
               throw _error;
-            case 6:
+            case 15:
               // Get the audio processor path
-              processorPath = this.getAudioProcessorPath(); // Load AudioWorklet module
-              _context3.n = 7;
+              processorPath = this.getAudioProcessorPath(); // Load AudioWorklet module (skip if already loaded on this context)
+              if (!(!_sharedRecorderWorkletLoaded || _sharedRecorderWorkletPath !== processorPath)) {
+                _context3.n = 17;
+                break;
+              }
+              _context3.n = 16;
               return this.audioContext.audioWorklet.addModule(processorPath);
-            case 7:
+            case 16:
+              _sharedRecorderWorkletLoaded = true;
+              _sharedRecorderWorkletPath = processorPath;
+              console.log('✅ AudioRecorder: AudioWorklet module loaded');
+              _context3.n = 18;
+              break;
+            case 17:
+              console.log('♻️ AudioRecorder: AudioWorklet module already loaded, skipping');
+            case 18:
               if (!(this.config.checkConnection && typeof this.config.checkConnection === 'function')) {
-                _context3.n = 9;
+                _context3.n = 19;
                 break;
               }
               _isConnected2 = this.config.checkConnection();
               if (_isConnected2) {
-                _context3.n = 9;
+                _context3.n = 19;
                 break;
               }
               // Silent cleanup - server rejected, this is expected
-              // Clean up everything
+              // Stop media stream but DON'T close the shared AudioContext
               this.mediaStream.getTracks().forEach(function (track) {
                 return track.stop();
               });
               this.mediaStream = null;
-              if (!(this.audioContext && this.audioContext.state !== 'closed')) {
-                _context3.n = 8;
-                break;
-              }
-              _context3.n = 8;
-              return this.audioContext.close();
-            case 8:
               this.audioContext = null;
               _error2 = new Error('Connection lost - server may have rejected the call');
               _error2.name = 'ServerRejected';
               _error2.isServerRejection = true;
               throw _error2;
-            case 9:
+            case 19:
               // Create AudioWorklet node with processor options (sampleRate will be used by processor)
               this.audioWorkletNode = new AudioWorkletNode(this.audioContext, 'audio-processor', {
                 processorOptions: {
@@ -8696,26 +8755,26 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
               console.log('✅ AudioRecorder: Microphone access granted');
               this.isRecording = true;
               this.emit('recordingStarted');
-              _context3.n = 15;
+              _context3.n = 25;
               break;
-            case 10:
-              _context3.p = 10;
-              _t3 = _context3.v;
-              if (!(_t3.isServerRejection || _t3.name === 'ServerRejected')) {
-                _context3.n = 11;
+            case 20:
+              _context3.p = 20;
+              _t4 = _context3.v;
+              if (!(_t4.isServerRejection || _t4.name === 'ServerRejected')) {
+                _context3.n = 21;
                 break;
               }
-              throw _t3;
-            case 11:
+              throw _t4;
+            case 21:
               // Provide helpful error messages for permission issues
-              userMessage = _t3.message;
-              if (!(_t3.name === 'NotAllowedError' || _t3.name === 'PermissionDeniedError')) {
-                _context3.n = 13;
+              userMessage = _t4.message;
+              if (!(_t4.name === 'NotAllowedError' || _t4.name === 'PermissionDeniedError')) {
+                _context3.n = 23;
                 break;
               }
-              _context3.n = 12;
+              _context3.n = 22;
               return this.checkPermissionState();
-            case 12:
+            case 22:
               _permissionState = _context3.v;
               if (_permissionState === 'denied') {
                 // Permission was explicitly blocked - browser won't show prompt again
@@ -8730,29 +8789,33 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
                 userMessage = 'Microphone permission was denied. Click the button again to retry, or enable microphone access in your browser settings (lock icon 🔒 in address bar).';
                 console.error('❌ AudioRecorder: Permission denied. User can try again or change in browser settings.');
               }
-              _context3.n = 14;
+              _context3.n = 24;
               break;
-            case 13:
-              if (_t3.name === 'NotFoundError' || _t3.name === 'DevicesNotFoundError') {
+            case 23:
+              if (_t4.name === 'NotFoundError' || _t4.name === 'DevicesNotFoundError') {
                 userMessage = 'No microphone found. Please connect a microphone and try again.';
                 console.error('❌ AudioRecorder: No microphone device found.');
-              } else if (_t3.name === 'NotReadableError' || _t3.name === 'TrackStartError') {
+              } else if (_t4.name === 'NotReadableError' || _t4.name === 'TrackStartError') {
                 userMessage = 'Microphone is already in use by another application. Please close other apps using the microphone and try again.';
                 console.error('❌ AudioRecorder: Microphone is busy or not readable.');
-              } else if (_t3.name === 'SecurityError' || _t3.name === 'PermissionDeniedError') {
+              } else if (_t4.name === 'SecurityError' || _t4.name === 'PermissionDeniedError') {
                 userMessage = 'Microphone access blocked. On mobile devices, please tap the recording button directly (not from an iframe or popup).';
                 console.error('❌ AudioRecorder: User agent blocked microphone access. This often happens on mobile when not called from direct user interaction.');
               }
-            case 14:
+            case 24:
               enhancedError = new Error(userMessage);
-              enhancedError.name = _t3.name;
-              enhancedError.originalError = _t3;
+              enhancedError.name = _t4.name;
+              enhancedError.originalError = _t4;
               this.emit('error', enhancedError);
               throw enhancedError;
-            case 15:
+            case 25:
+              _context3.p = 25;
+              this._starting = false;
+              return _context3.f(25);
+            case 26:
               return _context3.a(2);
           }
-        }, _callee3, this, [[0, 10]]);
+        }, _callee3, this, [[8, 10], [2, 20, 25, 26]]);
       }));
       function start() {
         return _start.apply(this, arguments);
@@ -8767,7 +8830,7 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
     key: "stop",
     value: (function () {
       var _stop = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-        var _t4;
+        var _t5;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.p = _context4.n) {
             case 0:
@@ -8833,18 +8896,22 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
                 this.mediaStream = null;
               }
 
-              // Close AudioContext (this fully stops all audio processing)
-              if (!(this.audioContext && this.audioContext.state !== 'closed')) {
+              // iOS FIX: Suspend AudioContext instead of closing it.
+              // Closing and recreating AudioContexts on iOS causes the new one to fail silently
+              // because iOS doesn't release the audio hardware synchronously.
+              // The shared AudioContext will be reused on the next start() call.
+              if (!(this.audioContext && this.audioContext.state === 'running')) {
                 _context4.n = 6;
                 break;
               }
-              console.log('🛑 AudioRecorder: Closing AudioContext...');
+              console.log('🛑 AudioRecorder: Suspending AudioContext (kept alive for reuse)...');
               _context4.n = 5;
-              return this.audioContext.close();
+              return this.audioContext.suspend();
             case 5:
-              this.audioContext = null;
-              console.log('✅ AudioRecorder: AudioContext closed');
+              console.log('✅ AudioRecorder: AudioContext suspended');
             case 6:
+              // Release instance reference but keep the shared context alive
+              this.audioContext = null;
               this.audioWorkletNode = null;
               this.isRecording = false;
               this.emit('recordingStopped');
@@ -8853,9 +8920,9 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
               break;
             case 7:
               _context4.p = 7;
-              _t4 = _context4.v;
-              this.emit('error', _t4);
-              throw _t4;
+              _t5 = _context4.v;
+              this.emit('error', _t5);
+              throw _t5;
             case 8:
               return _context4.a(2);
           }
@@ -8875,7 +8942,7 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
     key: "resumeAudioContext",
     value: (function () {
       var _resumeAudioContext = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
-        var audioTracks, activeTracks, _t5;
+        var audioTracks, activeTracks, _t6;
         return _regenerator().w(function (_context5) {
           while (1) switch (_context5.p = _context5.n) {
             case 0:
@@ -8913,9 +8980,9 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
               break;
             case 4:
               _context5.p = 4;
-              _t5 = _context5.v;
-              console.error('❌ AudioRecorder: Failed to resume AudioContext:', _t5);
-              this.emit('error', _t5);
+              _t6 = _context5.v;
+              console.error('❌ AudioRecorder: Failed to resume AudioContext:', _t6);
+              this.emit('error', _t6);
             case 5:
               return _context5.a(2);
           }
@@ -8940,13 +9007,32 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
     }
 
     /**
-     * Cleanup resources
+     * Cleanup resources.
+     * Note: Does NOT close the shared AudioContext - it's reused across instances
+     * to avoid the iOS AudioContext close/create race condition.
      */
   }, {
     key: "destroy",
     value: function destroy() {
       this.stop();
     }
+
+    /**
+     * Fully close the shared AudioContext.
+     * Only call this when the widget is being completely removed from the page.
+     */
+  }], [{
+    key: "closeSharedContext",
+    value: function closeSharedContext() {
+      if (_sharedRecorderContext && _sharedRecorderContext.state !== 'closed') {
+        console.log('🗑️ AudioRecorder: Closing shared AudioContext');
+        _sharedRecorderContext.close();
+      }
+      _sharedRecorderContext = null;
+      _sharedRecorderSampleRate = null;
+      _sharedRecorderWorkletLoaded = false;
+      _sharedRecorderWorkletPath = null;
+    }
   }]);
 }(_EventEmitter_js__WEBPACK_IMPORTED_MODULE_0__["default"]);
 
@@ -10332,6 +10418,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _CartToast_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CartToast.js */ "./src/ecommerce/CartToast.js");
 /* harmony import */ var _CartSummary_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./CartSummary.js */ "./src/ecommerce/CartSummary.js");
 /* harmony import */ var _ecommerceStyles_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ecommerceStyles.js */ "./src/ecommerce/ecommerceStyles.js");
+/* harmony import */ var _MobileProductCarousel_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./MobileProductCarousel.js */ "./src/ecommerce/MobileProductCarousel.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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
@@ -10351,14 +10438,17 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
 var EcommerceManager = /*#__PURE__*/function () {
   function EcommerceManager() {
     var _this = this;
     var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _classCallCheck(this, EcommerceManager);
     this.shadowRoot = config.shadowRoot;
+    this.primaryColor = config.primaryColor || '#3b82f6';
     this.onProductSelected = config.onProductSelected || function () {};
     this.onProductDeselected = config.onProductDeselected || function () {};
+    this.mobileCarousel = null;
     this.productPicker = new _ProductPicker_js__WEBPACK_IMPORTED_MODULE_0__.ProductPicker({
       onProductAdd: function onProductAdd(product) {
         return _this._handleAdd(product);
@@ -10445,7 +10535,6 @@ var EcommerceManager = /*#__PURE__*/function () {
   }, {
     key: "handleShowProducts",
     value: function handleShowProducts(message) {
-      this._ensureReady();
       var products = message.products,
         title = message.title,
         layout = message.layout;
@@ -10453,6 +10542,12 @@ var EcommerceManager = /*#__PURE__*/function () {
         console.warn('[EcommerceManager] show_products with no products');
         return;
       }
+      this._currencySymbol = products[0].currency === 'ILS' ? '₪' : '$';
+      if (this._isMobileCall()) {
+        this._showMobileCarousel(products, title);
+        return;
+      }
+      this._ensureReady();
       this._switchToCompactMode();
       this._setContainerMode('products');
       this.productPicker.hide();
@@ -10461,6 +10556,67 @@ var EcommerceManager = /*#__PURE__*/function () {
       this.container.insertBefore(pickerEl, this.container.firstChild);
       this._expandPanelToFit(products.length, effectiveLayout);
     }
+
+    /**
+     * Detect if we're in a mobile voice call (minimized bar is present on body).
+     */
+  }, {
+    key: "_isMobileCall",
+    value: function _isMobileCall() {
+      return !!document.getElementById('mobile-voice-call-bar-container');
+    }
+
+    /**
+     * Show 3D product carousel above the mobile minimized voice bar.
+     */
+  }, {
+    key: "_showMobileCarousel",
+    value: function _showMobileCarousel(products, title) {
+      var _this2 = this;
+      if (!this.mobileCarousel) {
+        this.mobileCarousel = new _MobileProductCarousel_js__WEBPACK_IMPORTED_MODULE_4__.MobileProductCarousel({
+          primaryColor: this.primaryColor,
+          onProductAdd: function onProductAdd(product) {
+            return _this2._handleMobileAdd(product);
+          },
+          onClose: function onClose() {}
+        });
+      }
+      this.mobileCarousel.show(products, title);
+    }
+  }, {
+    key: "_handleMobileAdd",
+    value: function _handleMobileAdd(product) {
+      var price = product.price || 0;
+      var qty = product.selectedAmount || 1;
+      var currency = product.currency === 'ILS' ? '₪' : '$';
+      this.cartSummary.update(this.cartSummary.itemCount + 1, this.cartSummary.total + price * qty, currency);
+      var cartInfo = {
+        itemCount: this.cartSummary.itemCount,
+        total: this.cartSummary.total,
+        currency: this.cartSummary.currency
+      };
+      this.mobileCarousel.showToast(product.name, cartInfo);
+      this._updateMobileCartRow(cartInfo);
+      this.onProductSelected(product);
+    }
+  }, {
+    key: "_updateMobileCartRow",
+    value: function _updateMobileCartRow(_ref) {
+      var itemCount = _ref.itemCount,
+        total = _ref.total,
+        currency = _ref.currency;
+      var row = document.getElementById('mobileCartRow');
+      var textEl = document.getElementById('mobileCartText');
+      if (!row || !textEl) return;
+      if (itemCount <= 0) {
+        row.style.display = 'none';
+        return;
+      }
+      var itemText = "".concat(itemCount, " item").concat(itemCount !== 1 ? 's' : '');
+      textEl.textContent = "".concat(itemText, " \xB7 ").concat(currency).concat(total.toFixed(2));
+      row.style.display = 'flex';
+    }
   }, {
     key: "handleCartUpdated",
     value: function handleCartUpdated(message) {
@@ -10474,7 +10630,7 @@ var EcommerceManager = /*#__PURE__*/function () {
         this.container.insertBefore(toastEl, this.container.firstChild);
       }
       if (cartTotal !== undefined && cartItemCount !== undefined) {
-        this.cartSummary.update(cartItemCount, cartTotal);
+        this.cartSummary.update(cartItemCount, cartTotal, this._currencySymbol);
       }
     }
 
@@ -10529,15 +10685,20 @@ var EcommerceManager = /*#__PURE__*/function () {
       var chrome = 62 + 40 + 20 + 150;
       var productsHeight;
       if (layout === 'cards') {
-        // Card: image 85 + details ~195 + border 2 = ~282px
-        // Container padding: 24px (12px * 2) + breathing room
         productsHeight = 360;
       } else {
-        // List item: ~58px each, container padding 20px
-        productsHeight = Math.min(productCount * 58 + 20, 400);
+        // Each list item ~58px + 6px gap between items + container padding
+        productsHeight = Math.min(productCount * 64 + 20, 500);
+      }
+
+      // For 3+ products, ensure enough height for at least 3 full items + 4th peeking
+      if (productCount > 2) {
+        var minForThreeAndHalf = Math.ceil(3.5 * 64) + 20;
+        productsHeight = Math.max(productsHeight, minForThreeAndHalf);
       }
       var totalHeight = chrome + productsHeight;
-      var clampedHeight = Math.min(Math.max(totalHeight, 450), 800);
+      var minHeight = productCount > 2 ? 700 : 450;
+      var clampedHeight = Math.min(Math.max(totalHeight, minHeight), 850);
       panel.classList.add('ttp-panel-expanded');
       panel.style.height = "".concat(clampedHeight, "px");
     }
@@ -10585,48 +10746,586 @@ var EcommerceManager = /*#__PURE__*/function () {
     }
 
     // ═══════════════════════════════════════════
-    // INTERNAL HANDLERS
+    // INTERNAL HANDLERS
+    // ═══════════════════════════════════════════
+  }, {
+    key: "_handleAdd",
+    value: function _handleAdd(product) {
+      var _this3 = this;
+      var price = product.price || 0;
+      var qty = product.selectedAmount || 1;
+      var currency = this._currencySymbol || (product.currency === 'ILS' ? '₪' : '$');
+      this.cartSummary.update(this.cartSummary.itemCount + 1, this.cartSummary.total + price * qty, currency);
+      var toastEl = this.cartToast.show(product, 'added');
+      this.container.insertBefore(toastEl, this.container.firstChild);
+      setTimeout(function () {
+        _this3.productPicker.hide();
+        _this3._shrinkPanel();
+        _this3._restoreFullVoiceMode();
+        _this3._setContainerMode('summary');
+      }, 500);
+      this.onProductSelected(product);
+    }
+  }, {
+    key: "_handleUndo",
+    value: function _handleUndo(product) {
+      this.onProductDeselected(product);
+    }
+
+    // ═══════════════════════════════════════════
+    // CLEANUP
+    // ═══════════════════════════════════════════
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.mobileCarousel) {
+        this.mobileCarousel.destroy();
+        this.mobileCarousel = null;
+      }
+      this.productPicker.hide();
+      this.cartToast.hide();
+      this._shrinkPanel();
+      this._restoreFullVoiceMode();
+      if (this.voiceActiveState) {
+        this.voiceActiveState.classList.remove('ttp-products-visible');
+      }
+      if (this.container && this.container.parentNode) {
+        this.container.parentNode.removeChild(this.container);
+      }
+      this.isAttached = false;
+    }
+  }]);
+}();
+
+/***/ }),
+
+/***/ "./src/ecommerce/MobileProductCarousel.js":
+/*!************************************************!*\
+  !*** ./src/ecommerce/MobileProductCarousel.js ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   MobileProductCarousel: () => (/* binding */ MobileProductCarousel)
+/* harmony export */ });
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * MobileProductCarousel — 3D carousel for product display on mobile during voice calls.
+ *
+ * Floats above the minimized voice bar (appended to document.body).
+ * Uses CSS 3D perspective transforms for a rotating wheel effect.
+ * Supports swipe/drag navigation, quantity/weight steppers, out-of-stock states.
+ *
+ * Options:
+ *   primaryColor: hex string (e.g. '#3b82f6')
+ *   onProductAdd(product): fired when user taps Add
+ *   onClose(): fired when user taps close button
+ */
+var MobileProductCarousel = /*#__PURE__*/function () {
+  function MobileProductCarousel() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck(this, MobileProductCarousel);
+    this.onProductAdd = options.onProductAdd || function () {};
+    this.onClose = options.onClose || function () {};
+    this.primaryColor = options.primaryColor || '#3b82f6';
+    this.products = [];
+    this.current = 0;
+    this.amounts = [];
+    this.sellByModes = [];
+    this.container = null;
+    this.wheel = null;
+    this.dotsEl = null;
+    this.anglePerCard = 42;
+    this.radius = 240;
+    this.dragging = false;
+    this.startX = 0;
+    this.swiped = false;
+    this.dragThreshold = 40;
+    this._boundTouchMove = this._onTouchMove.bind(this);
+    this._boundTouchEnd = this._onTouchEnd.bind(this);
+    this._boundMouseMove = this._onMouseMove.bind(this);
+    this._boundMouseUp = this._onMouseUp.bind(this);
+  }
+
+  // ═══════════════════════════════════════════
+  // PUBLIC API
+  // ═══════════════════════════════════════════
+  return _createClass(MobileProductCarousel, [{
+    key: "show",
+    value: function show(products, title) {
+      this.hide();
+      if (!products || products.length === 0) return;
+      this._normalizeProducts(products);
+      this.current = 0;
+      this._injectStyles();
+      this._buildDOM(title);
+      this._buildCards();
+      this._buildDots();
+      this._setupDragEvents();
+      this._updateWheel();
+      document.body.appendChild(this.container);
+      this._positionAboveMobileBar();
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this._removeEventListeners();
+      if (this.container && this.container.parentNode) {
+        this.container.classList.add('ttp-carousel--hiding');
+        var c = this.container;
+        setTimeout(function () {
+          if (c.parentNode) c.parentNode.removeChild(c);
+        }, 280);
+      }
+      this.container = null;
+      this.wheel = null;
+      this.dotsEl = null;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this._removeEventListeners();
+      if (this.container && this.container.parentNode) {
+        this.container.parentNode.removeChild(this.container);
+      }
+      this.container = null;
+      var toast = document.getElementById('ttpCarouselToast');
+      if (toast) toast.remove();
+      var style = document.getElementById('ttp-mobile-carousel-styles');
+      if (style) style.remove();
+    }
+  }, {
+    key: "showToast",
+    value: function showToast(productName, cartInfo) {
+      var existing = document.getElementById('ttpCarouselToast');
+      if (existing) existing.remove();
+      var toast = document.createElement('div');
+      toast.id = 'ttpCarouselToast';
+      toast.className = 'ttp-carousel-toast';
+      var cartLine = cartInfo ? "<div class=\"ttp-carousel-toast__cart\">".concat(cartInfo.itemCount, " item").concat(cartInfo.itemCount !== 1 ? 's' : '', " \xB7 ").concat(cartInfo.currency).concat(cartInfo.total.toFixed(2), "</div>") : '';
+      toast.innerHTML = "\n      <div class=\"ttp-carousel-toast__icon\">\u2713</div>\n      <div class=\"ttp-carousel-toast__text\">\n        <strong>".concat(productName, "</strong> added to cart\n        ").concat(cartLine, "\n      </div>\n    ");
+      toast.style.setProperty('--ttp-carousel-primary', this.primaryColor);
+      document.body.appendChild(toast);
+      var mobileBar = document.getElementById('mobile-voice-call-bar-container');
+      var cartPill = document.getElementById('ttpMobileCartSummary');
+      if (cartPill) {
+        toast.style.bottom = "".concat(parseInt(cartPill.style.bottom) + cartPill.offsetHeight + 8, "px");
+      } else if (mobileBar) {
+        toast.style.bottom = "".concat(mobileBar.offsetHeight + 12, "px");
+      } else {
+        toast.style.bottom = '100px';
+      }
+      setTimeout(function () {
+        toast.classList.add('ttp-carousel-toast--hiding');
+        setTimeout(function () {
+          return toast.remove();
+        }, 300);
+      }, 3000);
+    }
+
+    // ═══════════════════════════════════════════
+    // DOM CONSTRUCTION
+    // ═══════════════════════════════════════════
+  }, {
+    key: "_normalizeProducts",
+    value: function _normalizeProducts(products) {
+      this.products = products.map(function (p) {
+        return _objectSpread(_objectSpread({}, p), {}, {
+          imageUrl: p.imageUrl || p.image_url || '',
+          inStock: p.inStock !== undefined ? p.inStock : p.in_stock !== undefined ? p.in_stock : true,
+          sellBy: p.sellBy || p.sell_by || 'quantity',
+          cartQuantity: p.cartQuantity || p.cart_quantity || 0,
+          brand: p.brand || '',
+          unit: p.unit || '',
+          currency: p.currency || 'USD'
+        });
+      });
+      this.amounts = this.products.map(function (p) {
+        var min = p.sellBy === 'weight' ? 0.5 : 1;
+        return p.cartQuantity > 0 ? p.cartQuantity : min;
+      });
+      this.sellByModes = this.products.map(function (p) {
+        return p.sellBy;
+      });
+    }
+  }, {
+    key: "_buildDOM",
+    value: function _buildDOM(title) {
+      var _this = this;
+      this.container = document.createElement('div');
+      this.container.className = 'ttp-mobile-carousel';
+      this.container.id = 'ttpMobileCarousel';
+      this.container.style.setProperty('--ttp-carousel-primary', this.primaryColor);
+      this.container.style.setProperty('--ttp-carousel-primary-light', this._hexToRgba(this.primaryColor, 0.12));
+      this.container.style.setProperty('--ttp-carousel-primary-dark', this._darkenHex(this.primaryColor, 30));
+      this.container.style.setProperty('--ttp-carousel-primary-shadow', this._hexToRgba(this.primaryColor, 0.3));
+      var header = document.createElement('div');
+      header.className = 'ttp-carousel-header';
+      header.innerHTML = "\n      <span class=\"ttp-carousel-title\">".concat(title || 'Products', "</span>\n      <button class=\"ttp-carousel-close\" aria-label=\"Close\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n        </svg>\n      </button>\n    ");
+      header.querySelector('.ttp-carousel-close').addEventListener('click', function () {
+        _this.hide();
+        _this.onClose();
+      });
+      var area = document.createElement('div');
+      area.className = 'ttp-carousel-area';
+      this.wheel = document.createElement('div');
+      this.wheel.className = 'ttp-carousel-wheel';
+      area.appendChild(this.wheel);
+      this.dotsEl = document.createElement('div');
+      this.dotsEl.className = 'ttp-carousel-dots';
+      this.container.appendChild(header);
+      this.container.appendChild(area);
+      this.container.appendChild(this.dotsEl);
+    }
+  }, {
+    key: "_buildCards",
+    value: function _buildCards() {
+      var _this2 = this;
+      this.products.forEach(function (p, i) {
+        var card = document.createElement('div');
+        card.className = 'ttp-carousel-card' + (!p.inStock ? ' ttp-carousel-card--oos' : '');
+        card.dataset.index = i;
+        var sym = p.currency === 'ILS' ? '₪' : '$';
+        var sellBy = _this2.sellByModes[i];
+        var displayVal = sellBy === 'weight' ? "".concat(_this2.amounts[i].toFixed(1), " kg") : "".concat(_this2.amounts[i]);
+        var inCart = p.cartQuantity > 0;
+        card.innerHTML = "\n        <div class=\"ttp-carousel-card__image\">\n          <img src=\"".concat(p.imageUrl, "\" alt=\"").concat(p.name, "\" onerror=\"this.style.display='none'\" />\n          ").concat(!p.inStock ? '<div class="ttp-carousel-card__badge">Out of Stock</div>' : '', "\n        </div>\n        <div class=\"ttp-carousel-card__info\">\n          ").concat(p.brand ? "<div class=\"ttp-carousel-card__brand\">".concat(p.brand, "</div>") : '', "\n          <div class=\"ttp-carousel-card__name\">").concat(p.name, "</div>\n          ").concat(p.unit ? "<div class=\"ttp-carousel-card__unit\">".concat(p.unit, "</div>") : '', "\n          <div class=\"ttp-carousel-card__price\">").concat(sym).concat(p.price.toFixed(2), "</div>\n        </div>\n        <div class=\"ttp-carousel-card__actions\">\n          <div class=\"ttp-carousel-card__stepper\">\n            <button class=\"ttp-carousel-card__qty-btn ttp-carousel-minus\" data-idx=\"").concat(i, "\" ").concat(!p.inStock ? 'disabled' : '', ">\u2212</button>\n            <span class=\"ttp-carousel-card__qty-val\" id=\"ttpCQty").concat(i, "\">").concat(displayVal, "</span>\n            <button class=\"ttp-carousel-card__qty-btn ttp-carousel-plus\" data-idx=\"").concat(i, "\" ").concat(!p.inStock ? 'disabled' : '', ">+</button>\n          </div>\n          <button class=\"ttp-carousel-card__add-btn").concat(inCart ? ' ttp-carousel-card__add-btn--update' : '', "\" data-idx=\"").concat(i, "\" ").concat(!p.inStock ? 'disabled' : '', ">\n            ").concat(p.inStock ? inCart ? 'Update' : 'Add to Cart' : 'Unavailable', "\n          </button>\n        </div>\n      ");
+        card.style.transform = "rotateY(".concat(i * _this2.anglePerCard, "deg) translateZ(").concat(_this2.radius, "px)");
+        _this2.wheel.appendChild(card);
+      });
+      this._setupCardHandlers();
+    }
+
+    /**
+     * Area-level tap detection — bypasses browser 3D hit-testing entirely.
+     *
+     * Instead of attaching handlers to individual buttons (which requires
+     * the browser to correctly identify which 3D-transformed button was
+     * tapped), we capture ALL touches at the carousel-area level and
+     * manually match the touch coordinates against the current card's
+     * buttons using getBoundingClientRect.
+     */
+  }, {
+    key: "_setupCardHandlers",
+    value: function _setupCardHandlers() {
+      var _this3 = this;
+      var area = this.container.querySelector('.ttp-carousel-area');
+      if (!area) return;
+      var tapOrigin = null;
+      area.addEventListener('touchstart', function (e) {
+        tapOrigin = {
+          x: e.touches[0].clientX,
+          y: e.touches[0].clientY
+        };
+      }, {
+        passive: true
+      });
+      area.addEventListener('touchend', function (e) {
+        if (!tapOrigin || _this3.swiped) {
+          tapOrigin = null;
+          return;
+        }
+        var touch = e.changedTouches[0];
+        var dx = Math.abs(touch.clientX - tapOrigin.x);
+        var dy = Math.abs(touch.clientY - tapOrigin.y);
+        tapOrigin = null;
+        if (dx > 15 || dy > 15) return;
+        e.preventDefault();
+        _this3._handleTapAt(touch.clientX, touch.clientY);
+      });
+      area.addEventListener('click', function (e) {
+        var target = e.target;
+        var card = target.closest('.ttp-carousel-card');
+        if (!card || parseInt(card.dataset.index) !== _this3.current) return;
+        var minus = target.closest('.ttp-carousel-minus');
+        var plus = target.closest('.ttp-carousel-plus');
+        var addBtn = target.closest('.ttp-carousel-card__add-btn');
+        if (minus && !minus.disabled) {
+          e.stopPropagation();
+          _this3._handleMinus();
+        } else if (plus && !plus.disabled) {
+          e.stopPropagation();
+          _this3._handlePlus();
+        } else if (addBtn && !addBtn.disabled) {
+          e.stopPropagation();
+          _this3._handleAdd();
+        }
+      });
+    }
+  }, {
+    key: "_handleTapAt",
+    value: function _handleTapAt(x, y) {
+      var cards = this.wheel.querySelectorAll('.ttp-carousel-card');
+      var currentCard = cards[this.current];
+      if (!currentCard) return;
+      var minus = currentCard.querySelector('.ttp-carousel-minus');
+      var plus = currentCard.querySelector('.ttp-carousel-plus');
+      var addBtn = currentCard.querySelector('.ttp-carousel-card__add-btn');
+      if (this._hitTest(x, y, minus) && !(minus !== null && minus !== void 0 && minus.disabled)) {
+        this._handleMinus();
+      } else if (this._hitTest(x, y, plus) && !(plus !== null && plus !== void 0 && plus.disabled)) {
+        this._handlePlus();
+      } else if (this._hitTest(x, y, addBtn) && !(addBtn !== null && addBtn !== void 0 && addBtn.disabled)) {
+        this._handleAdd();
+      }
+    }
+  }, {
+    key: "_hitTest",
+    value: function _hitTest(x, y, el) {
+      if (!el) return false;
+      var r = el.getBoundingClientRect();
+      return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+    }
+  }, {
+    key: "_handleMinus",
+    value: function _handleMinus() {
+      var idx = this.current;
+      var sellBy = this.sellByModes[idx];
+      var min = sellBy === 'weight' ? 0.5 : 1;
+      var step = sellBy === 'weight' ? 0.5 : 1;
+      if (this.amounts[idx] > min) {
+        this.amounts[idx] = Math.round((this.amounts[idx] - step) * 10) / 10;
+        this._refreshStepper(idx);
+      }
+    }
+  }, {
+    key: "_handlePlus",
+    value: function _handlePlus() {
+      var idx = this.current;
+      var step = this.sellByModes[idx] === 'weight' ? 0.5 : 1;
+      this.amounts[idx] = Math.round((this.amounts[idx] + step) * 10) / 10;
+      this._refreshStepper(idx);
+    }
+  }, {
+    key: "_handleAdd",
+    value: function _handleAdd() {
+      var _cards$idx,
+        _this4 = this;
+      var idx = this.current;
+      var product = this.products[idx];
+      if (!product.inStock) return;
+      var cards = this.wheel.querySelectorAll('.ttp-carousel-card');
+      var btn = (_cards$idx = cards[idx]) === null || _cards$idx === void 0 ? void 0 : _cards$idx.querySelector('.ttp-carousel-card__add-btn');
+      if (btn) {
+        btn.textContent = '✓ Added!';
+        btn.classList.add('ttp-carousel-card__add-btn--added');
+        btn.disabled = true;
+      }
+      this.onProductAdd(_objectSpread(_objectSpread({}, product), {}, {
+        selectedAmount: this.amounts[idx],
+        sellBy: this.sellByModes[idx]
+      }));
+      setTimeout(function () {
+        return _this4.hide();
+      }, 800);
+    }
+  }, {
+    key: "_refreshStepper",
+    value: function _refreshStepper(idx) {
+      var sellBy = this.sellByModes[idx];
+      var min = sellBy === 'weight' ? 0.5 : 1;
+      var el = this.container.querySelector("#ttpCQty".concat(idx));
+      var minusBtn = this.container.querySelector(".ttp-carousel-minus[data-idx=\"".concat(idx, "\"]"));
+      if (el) {
+        el.textContent = sellBy === 'weight' ? "".concat(this.amounts[idx].toFixed(1), " kg") : "".concat(this.amounts[idx]);
+      }
+      if (minusBtn) {
+        minusBtn.disabled = this.amounts[idx] <= min;
+      }
+    }
+  }, {
+    key: "_buildDots",
+    value: function _buildDots() {
+      var _this5 = this;
+      if (this.products.length <= 1) return;
+      this.products.forEach(function (_, i) {
+        var dot = document.createElement('div');
+        dot.className = 'ttp-carousel-dot';
+        dot.addEventListener('click', function () {
+          return _this5.goTo(i);
+        });
+        _this5.dotsEl.appendChild(dot);
+      });
+    }
+
+    // ═══════════════════════════════════════════
+    // 3D WHEEL
+    // ═══════════════════════════════════════════
+  }, {
+    key: "_updateWheel",
+    value: function _updateWheel() {
+      var _this6 = this;
+      var rotation = -(this.current * this.anglePerCard);
+      this.wheel.style.transform = "translateZ(-".concat(this.radius, "px) rotateY(").concat(rotation, "deg)");
+      var cards = this.wheel.querySelectorAll('.ttp-carousel-card');
+      cards.forEach(function (card, i) {
+        var eff = i * _this6.anglePerCard + rotation;
+        while (eff > 180) eff -= 360;
+        while (eff < -180) eff += 360;
+        if (Math.abs(eff) > 90) {
+          card.style.visibility = 'hidden';
+          card.style.opacity = '0';
+        } else {
+          card.style.visibility = 'visible';
+          card.style.opacity = _this6.products[i].inStock ? '1' : '0.7';
+        }
+      });
+      var dots = this.dotsEl.querySelectorAll('.ttp-carousel-dot');
+      dots.forEach(function (dot, i) {
+        return dot.classList.toggle('ttp-carousel-dot--active', i === _this6.current);
+      });
+    }
+  }, {
+    key: "goTo",
+    value: function goTo(i) {
+      this.current = Math.max(0, Math.min(this.products.length - 1, i));
+      this._updateWheel();
+    }
+
+    // ═══════════════════════════════════════════
+    // DRAG / SWIPE
+    // ═══════════════════════════════════════════
+  }, {
+    key: "_setupDragEvents",
+    value: function _setupDragEvents() {
+      var _this7 = this;
+      var area = this.container.querySelector('.ttp-carousel-area');
+      if (!area) return;
+      area.addEventListener('touchstart', function (e) {
+        _this7.dragging = true;
+        _this7.startX = e.touches[0].clientX;
+        _this7.swiped = false;
+      }, {
+        passive: true
+      });
+      area.addEventListener('mousedown', function (e) {
+        _this7.dragging = true;
+        _this7.startX = e.clientX;
+        _this7.swiped = false;
+      });
+      document.addEventListener('touchmove', this._boundTouchMove, {
+        passive: true
+      });
+      document.addEventListener('touchend', this._boundTouchEnd);
+      document.addEventListener('mousemove', this._boundMouseMove);
+      document.addEventListener('mouseup', this._boundMouseUp);
+    }
+  }, {
+    key: "_onTouchMove",
+    value: function _onTouchMove(e) {
+      if (!this.dragging) return;
+      var diff = e.touches[0].clientX - this.startX;
+      if (Math.abs(diff) > this.dragThreshold) {
+        this.goTo(this.current + (diff > 0 ? -1 : 1));
+        this.startX = e.touches[0].clientX;
+        this.swiped = true;
+      }
+    }
+  }, {
+    key: "_onTouchEnd",
+    value: function _onTouchEnd() {
+      var _this8 = this;
+      this.dragging = false;
+      if (this.swiped) {
+        setTimeout(function () {
+          _this8.swiped = false;
+        }, 400);
+      }
+    }
+  }, {
+    key: "_onMouseMove",
+    value: function _onMouseMove(e) {
+      if (!this.dragging) return;
+      var diff = e.clientX - this.startX;
+      if (Math.abs(diff) > this.dragThreshold) {
+        this.goTo(this.current + (diff > 0 ? -1 : 1));
+        this.startX = e.clientX;
+        this.swiped = true;
+      }
+    }
+  }, {
+    key: "_onMouseUp",
+    value: function _onMouseUp() {
+      var _this9 = this;
+      this.dragging = false;
+      if (this.swiped) {
+        setTimeout(function () {
+          _this9.swiped = false;
+        }, 400);
+      }
+    }
+  }, {
+    key: "_removeEventListeners",
+    value: function _removeEventListeners() {
+      document.removeEventListener('touchmove', this._boundTouchMove);
+      document.removeEventListener('touchend', this._boundTouchEnd);
+      document.removeEventListener('mousemove', this._boundMouseMove);
+      document.removeEventListener('mouseup', this._boundMouseUp);
+    }
+
+    // ═══════════════════════════════════════════
+    // POSITIONING
+    // ═══════════════════════════════════════════
+  }, {
+    key: "_positionAboveMobileBar",
+    value: function _positionAboveMobileBar() {
+      var _this0 = this;
+      requestAnimationFrame(function () {
+        if (!_this0.container) return;
+        var bar = document.getElementById('mobile-voice-call-bar-container');
+        if (bar) {
+          var barRect = bar.getBoundingClientRect();
+          _this0.container.style.bottom = "".concat(window.innerHeight - barRect.top + 8, "px");
+        }
+      });
+    }
+
+    // ═══════════════════════════════════════════
+    // COLOR HELPERS
     // ═══════════════════════════════════════════
   }, {
-    key: "_handleAdd",
-    value: function _handleAdd(product) {
-      var _this2 = this;
-      var price = product.price || 0;
-      var qty = product.selectedAmount || 1;
-      this.cartSummary.update(this.cartSummary.itemCount + 1, this.cartSummary.total + price * qty);
-      var toastEl = this.cartToast.show(product, 'added');
-      this.container.insertBefore(toastEl, this.container.firstChild);
-      setTimeout(function () {
-        _this2.productPicker.hide();
-        _this2._shrinkPanel();
-        _this2._restoreFullVoiceMode();
-        _this2._setContainerMode('summary');
-      }, 500);
-      this.onProductSelected(product);
+    key: "_hexToRgba",
+    value: function _hexToRgba(hex, alpha) {
+      var r = parseInt(hex.slice(1, 3), 16);
+      var g = parseInt(hex.slice(3, 5), 16);
+      var b = parseInt(hex.slice(5, 7), 16);
+      return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
     }
   }, {
-    key: "_handleUndo",
-    value: function _handleUndo(product) {
-      this.onProductDeselected(product);
+    key: "_darkenHex",
+    value: function _darkenHex(hex, amount) {
+      var r = Math.max(0, parseInt(hex.slice(1, 3), 16) - amount);
+      var g = Math.max(0, parseInt(hex.slice(3, 5), 16) - amount);
+      var b = Math.max(0, parseInt(hex.slice(5, 7), 16) - amount);
+      return "#".concat(r.toString(16).padStart(2, '0')).concat(g.toString(16).padStart(2, '0')).concat(b.toString(16).padStart(2, '0'));
     }
 
     // ═══════════════════════════════════════════
-    // CLEANUP
+    // STYLES
     // ═══════════════════════════════════════════
   }, {
-    key: "destroy",
-    value: function destroy() {
-      this.productPicker.hide();
-      this.cartToast.hide();
-      this._shrinkPanel();
-      this._restoreFullVoiceMode();
-      if (this.voiceActiveState) {
-        this.voiceActiveState.classList.remove('ttp-products-visible');
-      }
-      if (this.container && this.container.parentNode) {
-        this.container.parentNode.removeChild(this.container);
-      }
-      this.isAttached = false;
+    key: "_injectStyles",
+    value: function _injectStyles() {
+      if (document.getElementById('ttp-mobile-carousel-styles')) return;
+      var s = document.createElement('style');
+      s.id = 'ttp-mobile-carousel-styles';
+      s.textContent = this._generateCSS();
+      document.head.appendChild(s);
+    }
+  }, {
+    key: "_generateCSS",
+    value: function _generateCSS() {
+      return "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOBILE PRODUCT CAROUSEL\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-mobile-carousel {\n  position: fixed;\n  bottom: 120px;\n  left: 0;\n  right: 0;\n  top: 0;\n  z-index: 100000;\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  animation: ttpCarouselIn 0.35s cubic-bezier(0.23, 1, 0.32, 1);\n  -webkit-tap-highlight-color: transparent;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding-bottom: 16px;\n}\n\n.ttp-mobile-carousel > .ttp-carousel-header,\n.ttp-mobile-carousel > .ttp-carousel-area,\n.ttp-mobile-carousel > .ttp-carousel-dots {\n  position: relative;\n  z-index: 1;\n}\n\n.ttp-mobile-carousel::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 420px;\n  background: rgba(0, 0, 0, 0.2);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  border-radius: 24px 24px 0 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.ttp-mobile-carousel.ttp-carousel--hiding {\n  animation: ttpCarouselOut 0.28s ease forwards;\n  pointer-events: none;\n}\n\n@keyframes ttpCarouselIn {\n  from { opacity: 0; transform: translateY(30px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n@keyframes ttpCarouselOut {\n  from { opacity: 1; transform: translateY(0); }\n  to   { opacity: 0; transform: translateY(30px); }\n}\n\n/* \u2500\u2500 Header \u2500\u2500 */\n\n.ttp-carousel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 24px 8px;\n  flex-shrink: 0;\n}\n\n.ttp-carousel-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: #fff;\n  text-shadow: 0 1px 4px rgba(0,0,0,0.4);\n}\n\n.ttp-carousel-close {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 0;\n  background: none;\n  color: #fff;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: auto;\n  padding: 0;\n  opacity: 0.85;\n}\n.ttp-carousel-close:active {\n  opacity: 1;\n}\n\n/* \u2500\u2500 3D Carousel Area \u2500\u2500 */\n\n.ttp-carousel-area {\n  position: relative;\n  height: 300px;\n  flex-shrink: 0;\n  perspective: 800px;\n  perspective-origin: 50% 55%;\n  cursor: grab;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.ttp-carousel-area:active {\n  cursor: grabbing;\n}\n\n.ttp-carousel-wheel {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  transform-style: preserve-3d;\n  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n/* \u2500\u2500 Card \u2500\u2500 */\n\n.ttp-carousel-card {\n  position: absolute;\n  width: 150px;\n  height: 285px;\n  left: 50%;\n  top: 50%;\n  margin-left: -75px;\n  margin-top: -142px;\n  background: #fff;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 8px 32px rgba(0,0,0,0.14);\n  transform-style: preserve-3d;\n  transition: visibility 0.3s, opacity 0.3s;\n  display: flex;\n  flex-direction: column;\n}\n\n.ttp-carousel-card--oos {\n  opacity: 0.7;\n}\n\n/* Card Image */\n.ttp-carousel-card__image {\n  width: 100%;\n  height: 100px;\n  background: linear-gradient(145deg, #f0f4ff, #e8ecf8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n.ttp-carousel-card__image img {\n  max-width: 80%;\n  max-height: 80%;\n  object-fit: contain;\n}\n\n.ttp-carousel-card__badge {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  background: #ef4444;\n  color: #fff;\n  font-size: 8px;\n  font-weight: 700;\n  padding: 2px 6px;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n/* Card Info */\n.ttp-carousel-card__info {\n  padding: 8px 10px 4px;\n  flex-shrink: 0;\n}\n\n.ttp-carousel-card__brand {\n  font-size: 9px;\n  font-weight: 500;\n  color: #94a3b8;\n  margin-bottom: 1px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.ttp-carousel-card__name {\n  font-size: 12px;\n  font-weight: 600;\n  color: #1e1b4b;\n  line-height: 1.25;\n  margin-bottom: 1px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.ttp-carousel-card__unit {\n  font-size: 9px;\n  color: #64748b;\n  margin-bottom: 3px;\n}\n\n.ttp-carousel-card__price {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--ttp-carousel-primary, #3b82f6);\n}\n\n/* Card Actions */\n.ttp-carousel-card__actions {\n  padding: 6px 10px 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: auto;\n}\n\n/* Stepper */\n.ttp-carousel-card__stepper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--ttp-carousel-primary-light, rgba(59,130,246,0.12));\n  border-radius: 10px;\n  padding: 3px;\n}\n\n.ttp-carousel-card__qty-btn {\n  width: 30px;\n  height: 30px;\n  border: none;\n  background: transparent;\n  color: var(--ttp-carousel-primary, #3b82f6);\n  font-size: 17px;\n  font-weight: 600;\n  cursor: pointer;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  z-index: 10;\n  touch-action: manipulation;\n}\n.ttp-carousel-card__qty-btn:active:not(:disabled) {\n  background: var(--ttp-carousel-primary-light, rgba(59,130,246,0.12));\n}\n.ttp-carousel-card__qty-btn:disabled {\n  opacity: 0.3;\n  cursor: default;\n}\n\n.ttp-carousel-card__qty-val {\n  min-width: 40px;\n  text-align: center;\n  font-size: 14px;\n  font-weight: 600;\n  color: #1e1b4b;\n  user-select: none;\n}\n\n/* Add Button */\n.ttp-carousel-card__add-btn {\n  width: 100%;\n  padding: 9px 12px;\n  background: linear-gradient(135deg, var(--ttp-carousel-primary, #3b82f6), var(--ttp-carousel-primary-dark, #2563eb));\n  color: #fff;\n  border: none;\n  border-radius: 10px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  box-shadow: 0 4px 12px var(--ttp-carousel-primary-shadow, rgba(59,130,246,0.3));\n  transition: transform 0.15s, box-shadow 0.15s;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  z-index: 10;\n  touch-action: manipulation;\n}\n.ttp-carousel-card__add-btn:active:not(:disabled) {\n  transform: scale(0.97);\n}\n.ttp-carousel-card__add-btn:disabled {\n  background: #94a3b8;\n  cursor: default;\n  box-shadow: none;\n}\n\n.ttp-carousel-card__add-btn--added {\n  background: linear-gradient(135deg, #10b981, #059669) !important;\n  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;\n}\n\n.ttp-carousel-card__add-btn--update {\n  background: linear-gradient(135deg, #f59e0b, #d97706);\n  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);\n}\n\n/* \u2500\u2500 Dots \u2500\u2500 */\n\n.ttp-carousel-dots {\n  display: flex;\n  justify-content: center;\n  gap: 8px;\n  padding: 8px 0 0;\n  flex-shrink: 0;\n}\n\n.ttp-carousel-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.35);\n  cursor: pointer;\n  transition: all 0.3s;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.ttp-carousel-dot--active {\n  width: 24px;\n  border-radius: 4px;\n  background: #fff;\n}\n\n/* \u2500\u2500 Toast \u2500\u2500 */\n\n.ttp-carousel-toast {\n  position: fixed;\n  left: 16px;\n  right: 16px;\n  bottom: 100px;\n  z-index: 100001;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 8px 32px rgba(0,0,0,0.15);\n  animation: ttpCarouselToastIn 0.3s ease;\n  pointer-events: auto;\n}\n\n.ttp-carousel-toast--hiding {\n  animation: ttpCarouselOut 0.3s ease forwards;\n}\n\n@keyframes ttpCarouselToastIn {\n  from { opacity: 0; transform: translateY(12px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.ttp-carousel-toast__icon {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: #10b981;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 700;\n  flex-shrink: 0;\n}\n\n.ttp-carousel-toast__text {\n  font-size: 13px;\n  color: #1e293b;\n  line-height: 1.3;\n}\n.ttp-carousel-toast__text strong {\n  font-weight: 600;\n}\n.ttp-carousel-toast__cart {\n  font-size: 11px;\n  color: #64748b;\n  margin-top: 2px;\n  font-weight: 500;\n}\n";
     }
   }]);
 }();
@@ -10897,7 +11596,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 var TTPEcommerceWidget = /*#__PURE__*/function () {
   function TTPEcommerceWidget() {
-    var _this = this;
+    var _this$widget$config,
+      _config$colors,
+      _this = this;
     var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _classCallCheck(this, TTPEcommerceWidget);
     console.log('[TTPEcommerceWidget] v2.35 initialized');
@@ -10906,6 +11607,7 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
     this.widget = new _widget_TTPChatWidget_js__WEBPACK_IMPORTED_MODULE_0__.TTPChatWidget(config);
     this.ecommerce = new _EcommerceManager_js__WEBPACK_IMPORTED_MODULE_1__.EcommerceManager({
       shadowRoot: this.widget.shadowRoot,
+      primaryColor: ((_this$widget$config = this.widget.config) === null || _this$widget$config === void 0 || (_this$widget$config = _this$widget$config.colors) === null || _this$widget$config === void 0 ? void 0 : _this$widget$config.primary) || ((_config$colors = config.colors) === null || _config$colors === void 0 ? void 0 : _config$colors.primary) || '#3b82f6',
       onProductSelected: function onProductSelected(product) {
         return _this._handleProductSelected(product);
       },
@@ -10931,6 +11633,9 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
         console.warn('[TTPEcommerceWidget] AgentSDK not available yet');
         return;
       }
+
+      // Disable the unsupported-action warning — this widget handles e-commerce actions
+      agentSDK.onUnsupportedAction = null;
       var self = this;
       var originalConnect = agentSDK.connect.bind(agentSDK);
       agentSDK.connect = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
@@ -10949,6 +11654,8 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
                     self._handleCartUpdatedFromServer(message);
                   } else if (type === 'add_to_store_cart') {
                     self._handleAddToStoreCart(message);
+                  } else if (type === 'get_store_cart') {
+                    self._handleGetStoreCart();
                   }
                 });
                 console.log('[TTPEcommerceWidget] E-commerce message listener attached');
@@ -10971,6 +11678,9 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
       var originalOnCallEnd = vi.config.onCallEnd;
       var ecommerce = this.ecommerce;
       vi.config.onCallEnd = function () {
+        if (ecommerce.mobileCarousel) {
+          ecommerce.mobileCarousel.hide();
+        }
         ecommerce.productPicker.hide();
         ecommerce._setContainerMode('summary');
         ecommerce._shrinkPanel();
@@ -11048,26 +11758,101 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
     // ═══════════════════════════════════════════
 
     /**
-     * Handle add_to_store_cart message from the backend.
-     * Calls Shopify's /cart/add.js from the browser so the item goes into
-     * the store's session-based cart (not a headless Storefront API cart).
-     *
-     * We don't attempt to refresh the theme's cart UI (icon badge, drawer)
-     * because there's no universal mechanism — every theme is different.
-     * The user will see the updated cart when they navigate to /cart or refresh.
-     * Our own CartToast + CartSummary provide immediate visual feedback.
+     * Fetch cart contents from Shopify's AJAX Cart API and send back to backend.
+     * Triggered when the LLM calls get_cart for a Shopify store.
+     * Only the browser can read the store's cart because it requires the session cookie.
      */
   }, {
-    key: "_handleAddToStoreCart",
+    key: "_handleGetStoreCart",
     value: function () {
-      var _handleAddToStoreCart2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(data) {
-        var variantId, quantity, productName, price, _cartResponse$items, _cartResponse$items2, response, cartResponse, cartData, _t3;
+      var _handleGetStoreCart2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+        var response, cart, _t3;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.p = _context4.n) {
             case 0:
-              variantId = data.variantId, quantity = data.quantity, productName = data.productName, price = data.price;
-              _context4.p = 1;
-              _context4.n = 2;
+              _context4.p = 0;
+              _context4.n = 1;
+              return fetch('/cart.js', {
+                method: 'GET',
+                headers: {
+                  'Content-Type': 'application/json'
+                }
+              });
+            case 1:
+              response = _context4.v;
+              if (response.ok) {
+                _context4.n = 2;
+                break;
+              }
+              console.error('[TTP Ecommerce] Failed to fetch /cart.js:', response.status);
+              this._sendToVoiceSDK({
+                t: 'cart_state_result',
+                success: false,
+                error: "Failed to fetch cart: HTTP ".concat(response.status)
+              });
+              return _context4.a(2);
+            case 2:
+              _context4.n = 3;
+              return response.json();
+            case 3:
+              cart = _context4.v;
+              this._sendToVoiceSDK({
+                t: 'cart_state_result',
+                success: true,
+                items: (cart.items || []).map(function (item) {
+                  return {
+                    title: item.title,
+                    variant_title: item.variant_title,
+                    quantity: item.quantity,
+                    price: item.price,
+                    line_price: item.line_price,
+                    image: item.image,
+                    variant_id: item.variant_id,
+                    product_id: item.product_id
+                  };
+                }),
+                item_count: cart.item_count,
+                total_price: cart.total_price,
+                currency: cart.currency
+              });
+              console.log("[TTP Ecommerce] Cart state sent: ".concat(cart.item_count, " items, ").concat(cart.currency, " ").concat((cart.total_price / 100).toFixed(2)));
+              _context4.n = 5;
+              break;
+            case 4:
+              _context4.p = 4;
+              _t3 = _context4.v;
+              console.error('[TTP Ecommerce] Error fetching cart:', _t3);
+              this._sendToVoiceSDK({
+                t: 'cart_state_result',
+                success: false,
+                error: _t3.message || 'Failed to fetch cart'
+              });
+            case 5:
+              return _context4.a(2);
+          }
+        }, _callee4, this, [[0, 4]]);
+      }));
+      function _handleGetStoreCart() {
+        return _handleGetStoreCart2.apply(this, arguments);
+      }
+      return _handleGetStoreCart;
+    }()
+    /**
+     * Add product to Shopify store cart via AJAX Cart API, then report result back to backend.
+     * Must be done from the browser because only the browser has the store's session cookie.
+     */
+  }, {
+    key: "_handleAddToStoreCart",
+    value: (function () {
+      var _handleAddToStoreCart2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(data) {
+        var variantId, quantity, productName, addResponse, errorText, addResult, cartResponse, cart, cartRefreshed, _t4;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.p = _context5.n) {
+            case 0:
+              variantId = data.variantId, quantity = data.quantity;
+              productName = '';
+              _context5.p = 1;
+              _context5.n = 2;
               return fetch('/cart/add.js', {
                 method: 'POST',
                 headers: {
@@ -11075,63 +11860,130 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
                 },
                 body: JSON.stringify({
                   items: [{
-                    id: parseInt(variantId, 10),
+                    id: parseInt(variantId),
                     quantity: quantity || 1
                   }]
                 })
               });
             case 2:
-              response = _context4.v;
-              if (response.ok) {
-                _context4.n = 3;
+              addResponse = _context5.v;
+              if (addResponse.ok) {
+                _context5.n = 4;
                 break;
               }
-              console.error('[TTPEcommerceWidget] Failed to add to Shopify cart:', response.status, response.statusText);
-              return _context4.a(2);
+              _context5.n = 3;
+              return addResponse.text();
             case 3:
-              _context4.n = 4;
-              return response.json();
-            case 4:
-              cartResponse = _context4.v;
-              console.log('[TTPEcommerceWidget] Added to Shopify store cart:', cartResponse);
-              _context4.n = 5;
-              return fetch('/cart.js').then(function (r) {
-                return r.json();
+              errorText = _context5.v;
+              console.error('[TTP Ecommerce] /cart/add.js failed:', addResponse.status, errorText);
+              this._sendToVoiceSDK({
+                t: 'cart_add_result',
+                success: false,
+                error: "Cart add failed: HTTP ".concat(addResponse.status),
+                productName: productName || String(variantId),
+                quantity: quantity || 1
               });
+              return _context5.a(2);
+            case 4:
+              _context5.n = 5;
+              return addResponse.json();
             case 5:
-              cartData = _context4.v;
+              addResult = _context5.v;
+              if (addResult.items && addResult.items.length > 0) {
+                productName = addResult.items[0].title || '';
+              }
+              _context5.n = 6;
+              return fetch('/cart.js');
+            case 6:
+              cartResponse = _context5.v;
+              _context5.n = 7;
+              return cartResponse.json();
+            case 7:
+              cart = _context5.v;
+              cartRefreshed = false;
+              try {
+                cartRefreshed = this._refreshCartCount(cart.item_count);
+              } catch (e) {
+                console.warn('[TTP Ecommerce] Cart count refresh failed (non-critical):', e);
+              }
               this._handleCartUpdatedFromServer({
                 action: 'added',
                 product: {
-                  id: variantId,
-                  name: productName || ((_cartResponse$items = cartResponse.items) === null || _cartResponse$items === void 0 || (_cartResponse$items = _cartResponse$items[0]) === null || _cartResponse$items === void 0 ? void 0 : _cartResponse$items.title) || 'Product',
-                  price: price || ((_cartResponse$items2 = cartResponse.items) === null || _cartResponse$items2 === void 0 || (_cartResponse$items2 = _cartResponse$items2[0]) === null || _cartResponse$items2 === void 0 ? void 0 : _cartResponse$items2.price) / 100 || 0
+                  name: productName,
+                  id: variantId
                 },
-                cartTotal: cartData.total_price / 100,
-                cartItemCount: cartData.item_count
+                cartTotal: cart.total_price / 100,
+                cartItemCount: cart.item_count,
+                currency: cart.currency
+              });
+              this._sendToVoiceSDK({
+                t: 'cart_add_result',
+                success: true,
+                cartRefreshed: cartRefreshed,
+                productName: productName,
+                quantity: quantity || 1,
+                cartTotal: cart.total_price,
+                cartItemCount: cart.item_count,
+                currency: cart.currency
               });
-              _context4.n = 7;
+              console.log("[TTP Ecommerce] Cart add result sent: ".concat(productName, ", refreshed=").concat(cartRefreshed, ", ").concat(cart.item_count, " items"));
+              _context5.n = 9;
               break;
-            case 6:
-              _context4.p = 6;
-              _t3 = _context4.v;
-              console.error('[TTPEcommerceWidget] Error adding to Shopify cart:', _t3);
-            case 7:
-              return _context4.a(2);
+            case 8:
+              _context5.p = 8;
+              _t4 = _context5.v;
+              console.error('[TTP Ecommerce] Error in _handleAddToStoreCart:', _t4);
+              this._sendToVoiceSDK({
+                t: 'cart_add_result',
+                success: false,
+                error: _t4.message || 'Failed to add to cart',
+                productName: productName || String(variantId),
+                quantity: quantity || 1
+              });
+            case 9:
+              return _context5.a(2);
           }
-        }, _callee4, this, [[1, 6]]);
+        }, _callee5, this, [[1, 8]]);
       }));
       function _handleAddToStoreCart(_x2) {
         return _handleAddToStoreCart2.apply(this, arguments);
       }
       return _handleAddToStoreCart;
-    }() // ═══════════════════════════════════════════
+    }()
+    /**
+     * Simple cart count refresh — update common counter selectors.
+     * Theme-specific refresh (Section Rendering API, etc.) can be added later per-theme.
+     * @returns {boolean} Whether any element was updated
+     */
+    )
+  }, {
+    key: "_refreshCartCount",
+    value: function _refreshCartCount(itemCount) {
+      var refreshed = false;
+      var selectors = ['.cart-count', '.cart-count-bubble', '[data-cart-count]', '.js-cart-count', '.cart-item-count', '#CartCount', '.site-header__cart-count', '.cart-count-tag'];
+      selectors.forEach(function (selector) {
+        document.querySelectorAll(selector).forEach(function (el) {
+          el.textContent = itemCount;
+          refreshed = true;
+        });
+      });
+      return refreshed;
+    }
+
+    // ═══════════════════════════════════════════
     // PRODUCT SELECTION (server manages cart)
     // ═══════════════════════════════════════════
   }, {
     key: "_handleProductSelected",
     value: function _handleProductSelected(product) {
       var quantity = product.selectedAmount || 1;
+      try {
+        var _this$widget$voiceInt2;
+        var voiceSDK = (_this$widget$voiceInt2 = this.widget.voiceInterface) === null || _this$widget$voiceInt2 === void 0 || (_this$widget$voiceInt2 = _this$widget$voiceInt2.sdk) === null || _this$widget$voiceInt2 === void 0 ? void 0 : _this$widget$voiceInt2.voiceSDK;
+        if (voiceSDK !== null && voiceSDK !== void 0 && voiceSDK.stopAudioPlayback) {
+          voiceSDK.stopAudioPlayback();
+        }
+      } catch (e) {/* best-effort */}
       this._sendToVoiceSDK({
         t: 'product_selected',
         productId: product.id,
@@ -11159,8 +12011,8 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
     key: "_sendToVoiceSDK",
     value: function _sendToVoiceSDK(message) {
       try {
-        var _this$widget$voiceInt2;
-        var voiceSDK = (_this$widget$voiceInt2 = this.widget.voiceInterface) === null || _this$widget$voiceInt2 === void 0 || (_this$widget$voiceInt2 = _this$widget$voiceInt2.sdk) === null || _this$widget$voiceInt2 === void 0 ? void 0 : _this$widget$voiceInt2.voiceSDK;
+        var _this$widget$voiceInt3;
+        var voiceSDK = (_this$widget$voiceInt3 = this.widget.voiceInterface) === null || _this$widget$voiceInt3 === void 0 || (_this$widget$voiceInt3 = _this$widget$voiceInt3.sdk) === null || _this$widget$voiceInt3 === void 0 ? void 0 : _this$widget$voiceInt3.voiceSDK;
         if (voiceSDK && voiceSDK.sendMessage) {
           voiceSDK.sendMessage(message);
         }
@@ -11181,45 +12033,45 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
           self.ecommerce.handleMessage(payload);
         },
         showProducts: function () {
-          var _showProducts = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(query) {
+          var _showProducts = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(query) {
             var limit,
               sessionId,
               baseUrl,
               response,
               data,
-              _args5 = arguments,
-              _t4;
-            return _regenerator().w(function (_context5) {
-              while (1) switch (_context5.p = _context5.n) {
+              _args6 = arguments,
+              _t5;
+            return _regenerator().w(function (_context6) {
+              while (1) switch (_context6.p = _context6.n) {
                 case 0:
-                  limit = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : 5;
-                  sessionId = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : 'test';
+                  limit = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : 5;
+                  sessionId = _args6.length > 2 && _args6[2] !== undefined ? _args6[2] : 'test';
                   baseUrl = window.__TTP_MOCK_API__ || 'https://backend.talktopc.com';
-                  _context5.p = 1;
-                  _context5.n = 2;
+                  _context6.p = 1;
+                  _context6.n = 2;
                   return fetch("".concat(baseUrl, "/api/partner/mock-store/products/search?q=").concat(encodeURIComponent(query), "&limit=").concat(limit, "&sessionId=").concat(encodeURIComponent(sessionId)));
                 case 2:
-                  response = _context5.v;
-                  _context5.n = 3;
+                  response = _context6.v;
+                  _context6.n = 3;
                   return response.json();
                 case 3:
-                  data = _context5.v;
+                  data = _context6.v;
                   self.ecommerce.handleShowProducts({
                     t: 'show_products',
                     products: data.products,
                     title: "".concat(data.totalCount, " results for \"").concat(query, "\""),
                     layout: data.products.length <= 4 ? 'cards' : 'list'
                   });
-                  _context5.n = 5;
+                  _context6.n = 5;
                   break;
                 case 4:
-                  _context5.p = 4;
-                  _t4 = _context5.v;
-                  console.error('[TTPEcommerceWidget] showProducts failed:', _t4);
+                  _context6.p = 4;
+                  _t5 = _context6.v;
+                  console.error('[TTPEcommerceWidget] showProducts failed:', _t5);
                 case 5:
-                  return _context5.a(2);
+                  return _context6.a(2);
               }
-            }, _callee5, null, [[1, 4]]);
+            }, _callee6, null, [[1, 4]]);
           }));
           function showProducts(_x3) {
             return _showProducts.apply(this, arguments);
@@ -11330,7 +12182,7 @@ __webpack_require__.r(__webpack_exports__);
  * Follows the same pattern as Styles.generateCSS().
  */
 function generateEcommerceCSS() {
-  return "\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ECOMMERCE AREA\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/*\n * When products are visible, expand the panel dynamically.\n * Actual height is set via inline style by EcommerceManager._expandPanelToFit().\n * When the class is removed, the panel returns to its CSS-defined default.\n */\n#text-chat-panel.ttp-panel-expanded {\n  transition: height 0.25s ease;\n}\n\n/*\n * Layout overrides when ecommerce layer is active.\n * voiceActiveState is a flex column: [voice-controls] [ecommerce] [conversation].\n * Ecommerce area fills the middle and scrolls; conversation panel stays at bottom.\n */\n#voiceActiveState {\n  flex: 1 1 0 !important;\n  min-height: 0 !important;\n  overflow: hidden !important;\n}\n\n.desktop-voice-section {\n  flex-shrink: 1 !important;\n}\n\n.desktop-conversation-panel {\n  flex: 1 1 0 !important;\n  min-height: 0 !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n.desktop-conversation-panel .live-transcript-collapsed {\n  flex: 1 1 0 !important;\n  min-height: 40px !important;\n  overflow: hidden !important;\n}\n\n.desktop-conversation-panel .voice-text-input-area {\n  margin-top: auto !important;\n  padding: 3px 16px !important;\n}\n\n.desktop-conversation-panel .voice-input-hint {\n  display: none !important;\n}\n\n#voiceActiveState.ttp-products-visible .desktop-voice-section {\n  display: none !important;\n}\n\n#voiceActiveState.ttp-products-visible .compact-voice-section {\n  display: flex !important;\n}\n\n#voiceActiveState.ttp-products-visible .desktop-conversation-panel {\n  flex: 0 0 auto !important;\n}\n\n#voiceActiveState.ttp-products-visible .conversation-history {\n  display: none !important;\n}\n\n#voiceActiveState.ttp-products-visible .live-transcript-collapsed {\n  flex: 0 0 auto !important;\n}\n\n.voice-text-input-area {\n  flex-shrink: 0 !important;\n}\n\n.conversation-history {\n  flex: 1 1 0 !important;\n  min-height: 0 !important;\n  overflow-y: auto !important;\n}\n\n.ttp-ecommerce-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  flex: 1 1 0;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: relative;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PRODUCT PICKER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-product-picker {\n  background: #fff;\n  border-radius: 14px;\n  border: 1px solid #e5e7eb;\n  box-shadow: 0 6px 24px rgba(0,0,0,0.08);\n  margin: 8px 12px;\n  overflow: hidden;\n  animation: ttpSlideUp 0.25s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n@keyframes ttpSlideUp {\n  from { opacity: 0; transform: translateY(8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.ttp-picker-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 14px;\n  border-bottom: 1px solid #f1f5f9;\n  flex-shrink: 0;\n}\n\n.ttp-picker-title {\n  font-size: 12px;\n  font-weight: 600;\n  color: #64748b;\n}\n\n.ttp-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #94a3b8;\n  font-size: 14px;\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n.ttp-picker-close:hover {\n  background: #f1f5f9;\n  color: #475569;\n}\n\n/* Horizontal card layout */\n.ttp-products-horizontal {\n  display: flex;\n  gap: 10px;\n  padding: 12px;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n}\n.ttp-products-horizontal::-webkit-scrollbar { height: 4px; }\n.ttp-products-horizontal::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }\n\n/* Vertical list layout */\n.ttp-products-vertical {\n  padding: 8px 12px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n  min-height: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PRODUCT CARD (horizontal)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-product-card {\n  width: 140px;\n  flex-shrink: 0;\n  background: #fff;\n  border-radius: 12px;\n  border: 1px solid #e5e7eb;\n  overflow: hidden;\n  transition: border-color 0.15s;\n}\n.ttp-product-card:hover { border-color: #3b82f6; }\n\n.ttp-product-image {\n  height: 85px;\n  background: #f8fafc;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  overflow: hidden;\n}\n.ttp-product-image img {\n  max-width: 90%;\n  max-height: 75px;\n  object-fit: contain;\n}\n\n.ttp-stock-badge {\n  position: absolute;\n  top: 4px; right: 4px;\n  background: #fef2f2;\n  color: #ef4444;\n  font-size: 9px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.ttp-product-details {\n  padding: 8px 10px 10px;\n}\n\n.ttp-product-name {\n  font-size: 12px;\n  font-weight: 600;\n  color: #1e293b;\n  line-height: 1.3;\n  min-height: 30px;\n}\n\n.ttp-product-meta {\n  font-size: 10px;\n  color: #94a3b8;\n  margin-top: 2px;\n}\n\n.ttp-product-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 6px;\n}\n\n.ttp-product-price {\n  font-size: 14px;\n  font-weight: 700;\n  color: #1e293b;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PRODUCT COMPACT (list view)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-product-compact {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  background: #fff;\n  border-radius: 10px;\n  border: 1px solid #e5e7eb;\n  transition: border-color 0.15s;\n}\n.ttp-product-compact:hover { border-color: #3b82f6; }\n\n.ttp-product-image-sm {\n  width: 40px; height: 40px;\n  border-radius: 8px;\n  background: #f8fafc;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.ttp-product-image-sm img {\n  max-width: 36px;\n  max-height: 36px;\n  object-fit: contain;\n}\n\n.ttp-product-compact .ttp-product-info {\n  flex: 1;\n  min-width: 0;\n}\n.ttp-product-compact .ttp-product-name {\n  min-height: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ttp-product-compact .ttp-product-action {\n  text-align: right;\n  flex-shrink: 0;\n}\n.ttp-product-compact .ttp-product-price {\n  font-size: 13px;\n}\n\n.ttp-out-of-stock {\n  font-size: 10px;\n  color: #ef4444;\n  font-weight: 500;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ADD BUTTON\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-add-btn {\n  padding: 4px 14px;\n  border-radius: 8px;\n  border: none;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  background: #3b82f6;\n  color: #fff;\n  transition: all 0.15s;\n}\n.ttp-add-btn:hover { background: #2563eb; }\n.ttp-add-btn:active { transform: scale(0.95); }\n.ttp-add-btn.ttp-added { background: #10b981 !important; }\n.ttp-add-btn:disabled { cursor: default; }\n.ttp-add-btn.ttp-update-btn { background: #f59e0b; }\n.ttp-add-btn.ttp-update-btn:hover { background: #d97706; }\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CART TOAST\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-cart-toast {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  margin: 0 12px;\n  background: #f0fdf4;\n  border-radius: 12px;\n  border: 1px solid #bbf7d0;\n  animation: ttpToastIn 0.25s ease;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n@keyframes ttpToastIn {\n  from { opacity: 0; transform: translateY(8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n.ttp-cart-toast.ttp-toast-hiding {\n  animation: ttpSlideDown 0.3s ease forwards;\n}\n\n@keyframes ttpSlideDown {\n  to { opacity: 0; transform: translateY(-8px); height: 0; padding: 0; margin: 0; overflow: hidden; }\n}\n\n.ttp-toast-icon {\n  width: 24px; height: 24px;\n  border-radius: 50%;\n  background: #10b981;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 700;\n  flex-shrink: 0;\n}\n\n.ttp-toast-content { flex: 1; min-width: 0; }\n.ttp-toast-title { font-size: 12px; font-weight: 600; color: #166534; }\n.ttp-toast-product {\n  font-size: 11px;\n  color: #15803d;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ttp-toast-undo {\n  background: none;\n  border: 1px solid #86efac;\n  border-radius: 6px;\n  padding: 3px 8px;\n  font-size: 10px;\n  color: #15803d;\n  cursor: pointer;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n.ttp-toast-undo:hover { background: #dcfce7; }\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CART SUMMARY BAR\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-cart-summary {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 14px;\n  margin: 4px 12px 8px;\n  background: #f8fafc;\n  border-radius: 10px;\n  border: 1px solid #e2e8f0;\n}\n\n.ttp-cart-info {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.ttp-cart-icon { font-size: 14px; }\n.ttp-cart-count { font-size: 12px; font-weight: 600; color: #475569; }\n.ttp-cart-separator { font-size: 12px; color: #94a3b8; }\n.ttp-cart-total { font-size: 13px; font-weight: 700; color: #1e293b; }\n.ttp-cart-view {\n  font-size: 12px;\n  font-weight: 600;\n  color: #6366f1;\n  text-decoration: none;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.ttp-cart-view:hover {\n  color: #4f46e5;\n  text-decoration: underline;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   QUANTITY/WEIGHT STEPPER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-stepper {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  margin: 4px 0;\n}\n\n.ttp-stepper-btn {\n  width: 24px;\n  height: 24px;\n  border-radius: 6px;\n  border: 1px solid #e2e8f0;\n  background: #f8fafc;\n  color: #475569;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  line-height: 1;\n  transition: all 0.15s;\n  flex-shrink: 0;\n}\n\n.ttp-stepper-btn:hover:not(:disabled) {\n  background: #e2e8f0;\n  border-color: #cbd5e1;\n}\n\n.ttp-stepper-btn:active:not(:disabled) {\n  transform: scale(0.9);\n}\n\n.ttp-stepper-btn:disabled,\n.ttp-stepper-disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n\n.ttp-stepper-value {\n  font-size: 12px;\n  font-weight: 600;\n  color: #1e293b;\n  min-width: 36px;\n  text-align: center;\n  user-select: none;\n}\n\n.ttp-product-compact .ttp-stepper {\n  justify-content: flex-end;\n}\n\n.ttp-product-compact .ttp-product-action {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 2px;\n}\n\n.ttp-product-card .ttp-stepper {\n  justify-content: center;\n  margin: 4px 0;\n}\n\n.ttp-product-card .ttp-product-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n  ";
+  return "\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ECOMMERCE AREA\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/*\n * When products are visible, expand the panel dynamically.\n * Actual height is set via inline style by EcommerceManager._expandPanelToFit().\n * When the class is removed, the panel returns to its CSS-defined default.\n */\n#text-chat-panel.ttp-panel-expanded {\n  transition: height 0.25s ease;\n}\n\n/*\n * Layout overrides when ecommerce layer is active.\n * voiceActiveState is a flex column: [voice-controls] [ecommerce] [conversation].\n * Ecommerce area fills the middle and scrolls; conversation panel stays at bottom.\n */\n#voiceActiveState {\n  flex: 1 1 0 !important;\n  min-height: 0 !important;\n  overflow: hidden !important;\n}\n\n.desktop-voice-section {\n  flex-shrink: 1 !important;\n}\n\n.desktop-conversation-panel {\n  flex: 1 1 0 !important;\n  min-height: 0 !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n.desktop-conversation-panel .live-transcript-collapsed {\n  flex: 1 1 0 !important;\n  min-height: 40px !important;\n  overflow: hidden !important;\n}\n\n.desktop-conversation-panel .voice-text-input-area {\n  margin-top: auto !important;\n  padding: 3px 16px !important;\n}\n\n.desktop-conversation-panel .voice-input-hint {\n  display: none !important;\n}\n\n#voiceActiveState.ttp-products-visible .desktop-voice-section {\n  display: none !important;\n}\n\n#voiceActiveState.ttp-products-visible .compact-voice-section {\n  display: flex !important;\n}\n\n#voiceActiveState.ttp-products-visible .desktop-conversation-panel {\n  flex: 0 0 auto !important;\n}\n\n#voiceActiveState.ttp-products-visible .conversation-history {\n  display: none !important;\n}\n\n#voiceActiveState.ttp-products-visible .live-transcript-collapsed {\n  flex: 0 0 auto !important;\n}\n\n.voice-text-input-area {\n  flex-shrink: 0 !important;\n}\n\n.conversation-history {\n  flex: 1 1 0 !important;\n  min-height: 0 !important;\n  overflow-y: auto !important;\n}\n\n.ttp-ecommerce-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  flex: 1 1 0;\n  min-height: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  position: relative;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PRODUCT PICKER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-product-picker {\n  background: #fff;\n  border-radius: 14px;\n  border: 1px solid #e5e7eb;\n  box-shadow: 0 6px 24px rgba(0,0,0,0.08);\n  margin: 8px 12px;\n  overflow: hidden;\n  animation: ttpSlideUp 0.25s ease;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n\n@keyframes ttpSlideUp {\n  from { opacity: 0; transform: translateY(8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n.ttp-picker-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 14px;\n  border-bottom: 1px solid #f1f5f9;\n  flex-shrink: 0;\n}\n\n.ttp-picker-title {\n  font-size: 12px;\n  font-weight: 600;\n  color: #64748b;\n}\n\n.ttp-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #94a3b8;\n  font-size: 14px;\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n.ttp-picker-close:hover {\n  background: #f1f5f9;\n  color: #475569;\n}\n\n/* Horizontal card layout */\n.ttp-products-horizontal {\n  display: flex;\n  gap: 10px;\n  padding: 12px;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n}\n.ttp-products-horizontal::-webkit-scrollbar { height: 4px; }\n.ttp-products-horizontal::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }\n\n/* Vertical list layout */\n.ttp-products-vertical {\n  padding: 8px 12px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n  min-height: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PRODUCT CARD (horizontal)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-product-card {\n  width: 140px;\n  flex-shrink: 0;\n  background: #fff;\n  border-radius: 12px;\n  border: 1px solid #e5e7eb;\n  overflow: hidden;\n  transition: border-color 0.15s;\n}\n.ttp-product-card:hover { border-color: #3b82f6; }\n\n.ttp-product-image {\n  height: 85px;\n  background: #f8fafc;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  overflow: hidden;\n}\n.ttp-product-image img {\n  max-width: 90%;\n  max-height: 75px;\n  object-fit: contain;\n}\n\n.ttp-stock-badge {\n  position: absolute;\n  top: 4px; right: 4px;\n  background: #fef2f2;\n  color: #ef4444;\n  font-size: 9px;\n  font-weight: 600;\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.ttp-product-details {\n  padding: 8px 10px 14px;\n}\n\n.ttp-product-name {\n  font-size: 12px;\n  font-weight: 600;\n  color: #1e293b;\n  line-height: 1.3;\n  min-height: 30px;\n}\n\n.ttp-product-meta {\n  font-size: 10px;\n  color: #94a3b8;\n  margin-top: 2px;\n}\n\n.ttp-product-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 6px;\n}\n\n.ttp-product-price {\n  font-size: 14px;\n  font-weight: 700;\n  color: #1e293b;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PRODUCT COMPACT (list view)\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-product-compact {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  background: #fff;\n  border-radius: 10px;\n  border: 1px solid #e5e7eb;\n  transition: border-color 0.15s;\n}\n.ttp-product-compact:hover { border-color: #3b82f6; }\n\n.ttp-product-image-sm {\n  width: 40px; height: 40px;\n  border-radius: 8px;\n  background: #f8fafc;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.ttp-product-image-sm img {\n  max-width: 36px;\n  max-height: 36px;\n  object-fit: contain;\n}\n\n.ttp-product-compact .ttp-product-info {\n  flex: 1;\n  min-width: 0;\n}\n.ttp-product-compact .ttp-product-name {\n  min-height: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ttp-product-compact .ttp-product-action {\n  text-align: right;\n  flex-shrink: 0;\n}\n.ttp-product-compact .ttp-product-price {\n  font-size: 13px;\n}\n\n.ttp-out-of-stock {\n  font-size: 10px;\n  color: #ef4444;\n  font-weight: 500;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   ADD BUTTON\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-add-btn {\n  padding: 4px 14px;\n  border-radius: 8px;\n  border: none;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  background: #3b82f6;\n  color: #fff;\n  transition: all 0.15s;\n}\n.ttp-add-btn:hover { background: #2563eb; }\n.ttp-add-btn:active { transform: scale(0.95); }\n.ttp-add-btn.ttp-added { background: #10b981 !important; }\n.ttp-add-btn:disabled { cursor: default; }\n.ttp-add-btn.ttp-update-btn { background: #f59e0b; }\n.ttp-add-btn.ttp-update-btn:hover { background: #d97706; }\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CART TOAST\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-cart-toast {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 14px;\n  margin: 0 12px;\n  background: #f0fdf4;\n  border-radius: 12px;\n  border: 1px solid #bbf7d0;\n  animation: ttpToastIn 0.25s ease;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n@keyframes ttpToastIn {\n  from { opacity: 0; transform: translateY(8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n.ttp-cart-toast.ttp-toast-hiding {\n  animation: ttpSlideDown 0.3s ease forwards;\n}\n\n@keyframes ttpSlideDown {\n  to { opacity: 0; transform: translateY(-8px); height: 0; padding: 0; margin: 0; overflow: hidden; }\n}\n\n.ttp-toast-icon {\n  width: 24px; height: 24px;\n  border-radius: 50%;\n  background: #10b981;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 700;\n  flex-shrink: 0;\n}\n\n.ttp-toast-content { flex: 1; min-width: 0; }\n.ttp-toast-title { font-size: 12px; font-weight: 600; color: #166534; }\n.ttp-toast-product {\n  font-size: 11px;\n  color: #15803d;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ttp-toast-undo {\n  background: none;\n  border: 1px solid #86efac;\n  border-radius: 6px;\n  padding: 3px 8px;\n  font-size: 10px;\n  color: #15803d;\n  cursor: pointer;\n  font-weight: 600;\n  flex-shrink: 0;\n}\n.ttp-toast-undo:hover { background: #dcfce7; }\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   CART SUMMARY BAR\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-cart-summary {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 14px;\n  margin: 4px 12px 8px;\n  background: #f8fafc;\n  border-radius: 10px;\n  border: 1px solid #e2e8f0;\n}\n\n.ttp-cart-info {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.ttp-cart-icon { font-size: 14px; }\n.ttp-cart-count { font-size: 12px; font-weight: 600; color: #475569; }\n.ttp-cart-separator { font-size: 12px; color: #94a3b8; }\n.ttp-cart-total { font-size: 13px; font-weight: 700; color: #1e293b; }\n.ttp-cart-view {\n  font-size: 12px;\n  font-weight: 600;\n  color: #6366f1;\n  text-decoration: none;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.ttp-cart-view:hover {\n  color: #4f46e5;\n  text-decoration: underline;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   QUANTITY/WEIGHT STEPPER\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.ttp-stepper {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  margin: 4px 0;\n}\n\n.ttp-stepper-btn {\n  width: 24px;\n  height: 24px;\n  border-radius: 6px;\n  border: 1px solid #e2e8f0;\n  background: #f8fafc;\n  color: #475569;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  line-height: 1;\n  transition: all 0.15s;\n  flex-shrink: 0;\n}\n\n.ttp-stepper-btn:hover:not(:disabled) {\n  background: #e2e8f0;\n  border-color: #cbd5e1;\n}\n\n.ttp-stepper-btn:active:not(:disabled) {\n  transform: scale(0.9);\n}\n\n.ttp-stepper-btn:disabled,\n.ttp-stepper-disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n\n.ttp-stepper-value {\n  font-size: 12px;\n  font-weight: 600;\n  color: #1e293b;\n  min-width: 36px;\n  text-align: center;\n  user-select: none;\n}\n\n.ttp-product-compact .ttp-stepper {\n  justify-content: flex-end;\n}\n\n.ttp-product-compact .ttp-product-action {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 2px;\n}\n\n.ttp-product-card .ttp-stepper {\n  justify-content: center;\n  margin: 4px 0;\n}\n\n.ttp-product-card .ttp-product-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n  ";
 }
 
 /***/ }),
@@ -11720,19 +12572,23 @@ var MicPermissionModal = /*#__PURE__*/function () {
 }();
 /**
  * Pre-prompt modal - shown before requesting browser permission
+ * Uses a transparent overlay (no blur) so the call view is visible behind it
  */
 function showPrePromptModal(onAccept, onCancel) {
   var modal = new MicPermissionModal();
   var overlay = modal.createOverlay();
   var deviceInfo = (0,_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_0__.getDeviceInfo)();
+
+  // Remove blur and darken so the call view is visible behind
+  overlay.style.background = 'rgba(0, 0, 0, 0.3)';
+  overlay.style.backdropFilter = 'none';
+  overlay.style.webkitBackdropFilter = 'none';
   var modalDiv = document.createElement('div');
   modalDiv.className = 'mic-permission-modal';
   modalDiv.innerHTML = "\n    <div class=\"mic-permission-modal__icon\">\uD83C\uDFA4</div>\n    <h2 class=\"mic-permission-modal__title\">Enable Your Microphone</h2>\n    <p class=\"mic-permission-modal__description\">\n      To start a voice call with our agent, we need access to your microphone.\n    </p>\n    <div class=\"mic-permission-modal__highlight\">\n      <span class=\"mic-permission-modal__highlight-icon\">\uD83D\uDC46</span>\n      <span>Please click <strong>\"Allow\"</strong> on the next popup</span>\n    </div>\n    ".concat(deviceInfo.isIOS ? "\n      <div class=\"mic-permission-modal__note\">\n        <span>\u2139\uFE0F</span>\n        <span>On iPhone/iPad, you may need to allow microphone access in your device Settings.</span>\n      </div>\n    " : '', "\n    <div class=\"mic-permission-modal__actions\">\n      <button class=\"mic-permission-modal__btn mic-permission-modal__btn--primary\" data-action=\"accept\">\n        Continue\n      </button>\n      <button class=\"mic-permission-modal__btn mic-permission-modal__btn--secondary\" data-action=\"cancel\">\n        Not Now\n      </button>\n    </div>\n  ");
   overlay.appendChild(modalDiv);
   modal.overlay = overlay;
   modal.modal = modalDiv;
-
-  // Event handlers
   modalDiv.querySelector('[data-action="accept"]').addEventListener('click', function () {
     modal.close();
     onAccept();
@@ -11741,8 +12597,6 @@ function showPrePromptModal(onAccept, onCancel) {
     modal.close();
     onCancel();
   });
-
-  // Close on overlay click
   overlay.addEventListener('click', function (e) {
     if (e.target === overlay) {
       modal.close();
@@ -14321,6 +15175,12 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
 
 
 
+// iOS FIX: Shared AudioContext for playback that persists across AudioPlayer instances.
+// iOS WebKit doesn't release audio hardware synchronously when AudioContext.close() is called,
+// so creating a new AudioContext immediately after closing the old one can fail silently.
+var _sharedPlayerContext = null;
+var _sharedPlayerSampleRate = null;
+
 /**
 
  * AudioPlayer v2 - Handles multiple audio formats with codec support
@@ -14357,8 +15217,6 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
 
     // Version identification log
     console.log('%c🔊 AUDIO PLAYER - MIC/SPEAKER RESET ON NEW CALL ENABLED', 'background: #10b981; color: white; font-size: 14px; font-weight: bold; padding: 4px 8px; border-radius: 4px;');
-    console.log('%cFix: Mic/speaker mute state + UI fully reset on call end and call start', 'background: #d1fae5; color: #065f46; font-size: 12px; padding: 2px 6px; border-radius: 3px;');
-    console.log('%cBuild: 2026-02-26-MIC-SPEAKER-RESET', 'background: #e0e7ff; color: #1e40af; font-size: 11px; padding: 2px 6px; border-radius: 3px;');
     console.log('');
     _this.config = config;
     _this.audioContext = null;
@@ -15692,43 +16550,84 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "initializeAudioContext",
     value: function initializeAudioContext() {
-      var _this$outputFormat5, _this$outputFormat6;
+      var _this$outputFormat5,
+        _this7 = this,
+        _this$outputFormat6;
       // Use negotiated sample rate, default to 44100Hz to match server output
-      // This ensures AudioContext matches server output before format negotiation completes
       var desiredSampleRate = ((_this$outputFormat5 = this.outputFormat) === null || _this$outputFormat5 === void 0 ? void 0 : _this$outputFormat5.sampleRate) || 44100;
-
-      // If backend sends non-standard rate (like 22050Hz), check if browser supports it
-      // If not, prefer 44100Hz (default) or 48000Hz to avoid resampling issues
       if (desiredSampleRate !== 48000 && desiredSampleRate !== 44100) {
-        // For non-standard rates, try to use browser's native rate to avoid resampling
-        // This prevents tiny cuts caused by browser resampling
         console.log("\u2139\uFE0F AudioPlayer: Backend requested ".concat(desiredSampleRate, "Hz, but browser may resample"));
         console.log("   Consider requesting 44100Hz or 48000Hz from backend to avoid resampling and improve quality");
       }
 
-      // Check if AudioContext exists and if it matches the desired sample rate
+      // Check if current instance AudioContext exists and matches
       if (this.audioContext) {
         var currentSampleRate = this.audioContext.sampleRate;
-        // If sample rate differs significantly, recreate the AudioContext
         if (Math.abs(currentSampleRate - desiredSampleRate) > 100) {
           console.warn("\u26A0\uFE0F AudioPlayer: AudioContext sample rate (".concat(currentSampleRate, "Hz) doesn't match format (").concat(desiredSampleRate, "Hz), recreating..."));
           this.stopImmediate();
           this._cleanupAudioContext();
         } else {
-          // Sample rate matches (or close enough), no need to recreate
           return;
         }
       }
+
+      // iOS FIX: Reuse shared AudioContext if available and compatible.
+      // iOS WebKit doesn't release audio hardware synchronously on AudioContext.close(),
+      // causing newly created AudioContexts to fail silently.
+      var canReuseShared = _sharedPlayerContext && _sharedPlayerContext.state !== 'closed' && _sharedPlayerSampleRate === desiredSampleRate;
+      if (canReuseShared) {
+        console.log("\u267B\uFE0F AudioPlayer: Reusing shared AudioContext at ".concat(desiredSampleRate, "Hz (iOS-safe)"));
+        this.audioContext = _sharedPlayerContext;
+        var setupAfterResume = function setupAfterResume() {
+          _this7.setupAudioContextStateMonitoring();
+          if (_this7.gainNode) {
+            try {
+              _this7.gainNode.disconnect();
+            } catch (e) {
+              console.warn('⚠️ AudioPlayer: Error disconnecting old GainNode:', e);
+            }
+          }
+          _this7.gainNode = _this7.audioContext.createGain();
+          _this7.gainNode.gain.value = 1.0;
+          _this7.gainNode.connect(_this7.audioContext.destination);
+          if (!_this7._audioContextPrimed) {
+            _this7._primeAudioContext();
+          }
+        };
+        if (this.audioContext.state === 'suspended') {
+          this.audioContext.resume().then(function () {
+            return setupAfterResume();
+          }).catch(function (e) {
+            console.warn('⚠️ AudioPlayer: Error resuming shared context:', e);
+            setupAfterResume();
+          });
+        } else {
+          setupAfterResume();
+        }
+        return;
+      }
       console.log("\uD83C\uDFB5 AudioPlayer: Creating AudioContext at ".concat(desiredSampleRate, "Hz (from outputFormat: ").concat(((_this$outputFormat6 = this.outputFormat) === null || _this$outputFormat6 === void 0 ? void 0 : _this$outputFormat6.sampleRate) || 'not set', ")"));
+
+      // Close old shared context if sample rate changed
+      if (_sharedPlayerContext && _sharedPlayerContext.state !== 'closed') {
+        console.log('🔄 AudioPlayer: Closing old shared AudioContext (sample rate changed)');
+        try {
+          _sharedPlayerContext.close();
+        } catch (e) {
+          console.warn('⚠️ AudioPlayer: Error closing old shared context:', e);
+        }
+      }
       try {
-        // Try to create with specific sample rate
         this.audioContext = new (window.AudioContext || window.webkitAudioContext)({
           sampleRate: desiredSampleRate,
-          latencyHint: 'playback' // ✅ Better for streaming audio - prioritizes smooth playback over low latency
+          latencyHint: 'playback'
         });
-        console.log("\u2705 AudioContext created at ".concat(this.audioContext.sampleRate, "Hz (requested: ").concat(desiredSampleRate, "Hz)"));
 
-        // ❌ CRITICAL: If browser can't create requested sample rate, we have a problem
+        // Store as shared context
+        _sharedPlayerContext = this.audioContext;
+        _sharedPlayerSampleRate = desiredSampleRate;
+        console.log("\u2705 AudioContext created at ".concat(this.audioContext.sampleRate, "Hz (requested: ").concat(desiredSampleRate, "Hz)"));
         if (Math.abs(this.audioContext.sampleRate - desiredSampleRate) > 100) {
           console.error("\u274C CRITICAL: Browser sample rate mismatch!");
           console.error("   Requested: ".concat(desiredSampleRate, "Hz"));
@@ -15739,34 +16638,23 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
           console.warn("\u26A0\uFE0F Browser adjusted sample rate: ".concat(desiredSampleRate, "Hz \u2192 ").concat(this.audioContext.sampleRate, "Hz"));
           console.warn("   Browser will automatically resample audio.");
         }
-
-        // ✅ NEW: Monitor AudioContext state changes (handles mic permission, tab switching, etc.)
         this.setupAudioContextStateMonitoring();
-
-        // Create GainNode for volume/mute control
         this.gainNode = this.audioContext.createGain();
-        this.gainNode.gain.value = 1.0; // Default to full volume
+        this.gainNode.gain.value = 1.0;
         this.gainNode.connect(this.audioContext.destination);
         console.log('✅ AudioPlayer: GainNode created for volume control');
-
-        // Prime audio hardware for Android
         this._primeAudioContext();
       } catch (error) {
-        // Fallback to default if browser doesn't support custom sample rate
         console.error("\u274C Failed to create AudioContext:", error);
         this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        _sharedPlayerContext = this.audioContext;
+        _sharedPlayerSampleRate = this.audioContext.sampleRate;
         console.log("\u2139\uFE0F Using browser default: ".concat(this.audioContext.sampleRate, "Hz"));
-
-        // Setup monitoring for fallback AudioContext too
         this.setupAudioContextStateMonitoring();
-
-        // Create GainNode for volume/mute control
         this.gainNode = this.audioContext.createGain();
-        this.gainNode.gain.value = 1.0; // Default to full volume
+        this.gainNode.gain.value = 1.0;
         this.gainNode.connect(this.audioContext.destination);
         console.log('✅ AudioPlayer: GainNode created for volume control (fallback)');
-
-        // Prime audio hardware for Android
         this._primeAudioContext();
       }
     }
@@ -15827,7 +16715,7 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "_cleanupAudioContext",
     value: function _cleanupAudioContext() {
-      console.log('[TTP AudioPlayer] 🧹 Cleaning up AudioContext (refactored method)');
+      console.log('[TTP AudioPlayer] 🧹 Cleaning up AudioContext (iOS-safe: keeping shared context alive)');
 
       // Disconnect and cleanup gainNode
       if (this.gainNode) {
@@ -15851,24 +16739,34 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
         this._waitForReadyStateHandler = null;
       }
 
-      // Close context if open
-      if (this.audioContext && this.audioContext.state !== 'closed') {
-        this.audioContext.close();
+      // iOS FIX: Suspend instead of closing the AudioContext.
+      // The shared context will be reused by the next AudioPlayer instance.
+      // Closing it would cause the next instance to create a new one,
+      // which fails on iOS due to the audio hardware not being released in time.
+      if (this.audioContext && this.audioContext.state === 'running') {
+        this.audioContext.suspend().catch(function (e) {
+          console.warn('⚠️ AudioPlayer: Error suspending AudioContext during cleanup:', e);
+        });
       }
 
-      // Set to null after cleanup
+      // Release instance reference but keep shared context alive
       this.audioContext = null;
       this._audioContextPrimed = false;
     }
 
     /**
-     * Setup AudioContext state change monitoring
-     * Handles mic permission grants, tab switching, browser suspension, etc.
+     * Fully close the shared AudioContext.
+     * Only call this when the widget is being completely removed from the page.
      */
   }, {
     key: "setupAudioContextStateMonitoring",
-    value: function setupAudioContextStateMonitoring() {
-      var _this7 = this;
+    value:
+    /**
+     * Setup AudioContext state change monitoring
+     * Handles mic permission grants, tab switching, browser suspension, etc.
+     */
+    function setupAudioContextStateMonitoring() {
+      var _this8 = this;
       if (!this.audioContext) {
         return;
       }
@@ -15881,35 +16779,35 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
       // Create handler that references this.audioContext dynamically
       this._audioContextStateChangeHandler = function () {
         // Null check required because audioContext may be cleaned up while handler is queued
-        if (!_this7.audioContext) {
+        if (!_this8.audioContext) {
           console.warn('⚠️ AudioPlayer: State change handler fired but AudioContext is null');
           return;
         }
-        console.log("\uD83C\uDFB5 AudioPlayer: AudioContext state changed to: ".concat(_this7.audioContext.state));
-        if (_this7.audioContext.state === 'suspended' && _this7.isPlaying) {
+        console.log("\uD83C\uDFB5 AudioPlayer: AudioContext state changed to: ".concat(_this8.audioContext.state));
+        if (_this8.audioContext.state === 'suspended' && _this8.isPlaying) {
           // AudioContext was suspended during playback (tab switch, mic permission, etc.)
           console.warn('⚠️ AudioPlayer: AudioContext suspended during playback');
           // Note: Playback will pause automatically, but we should handle queue processing
           // The state change will be handled when we try to process next frame
-        } else if (_this7.audioContext.state === 'running' && !_this7.isPlaying && (_this7.audioQueue.length > 0 || _this7.pcmChunkQueue.length > 0 || _this7.preparedBuffer.length > 0)) {
+        } else if (_this8.audioContext.state === 'running' && !_this8.isPlaying && (_this8.audioQueue.length > 0 || _this8.pcmChunkQueue.length > 0 || _this8.preparedBuffer.length > 0)) {
           // AudioContext resumed and we have queued frames
           // This handles: mic permission grant, tab switching back, browser resume, etc.
           console.log('✅ AudioPlayer: AudioContext resumed - resuming queue processing');
 
           // Resume queue processing if we have frames
-          if (_this7.audioQueue.length > 0 && !_this7.isProcessingQueue) {
+          if (_this8.audioQueue.length > 0 && !_this8.isProcessingQueue) {
             setTimeout(function () {
-              return _this7.processQueue();
+              return _this8.processQueue();
             }, 50);
           }
-          if (_this7.pcmChunkQueue.length > 0 && !_this7.isProcessingPcmQueue) {
+          if (_this8.pcmChunkQueue.length > 0 && !_this8.isProcessingPcmQueue) {
             setTimeout(function () {
-              return _this7.processPcmQueue();
+              return _this8.processPcmQueue();
             }, 50);
           }
-          if (_this7.preparedBuffer.length > 0 && !_this7.isSchedulingFrames) {
+          if (_this8.preparedBuffer.length > 0 && !_this8.isSchedulingFrames) {
             setTimeout(function () {
-              return _this7.scheduleFrames();
+              return _this8.scheduleFrames();
             }, 50);
           }
         }
@@ -15928,7 +16826,7 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
     key: "processQueue",
     value: (function () {
       var _processQueue = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
-        var _this8 = this;
+        var _this9 = this;
         var audioBlob, wasFirstPlay, audioContext, arrayBuffer, audioBuffer, shouldEmitStart, source, _t4;
         return _regenerator().w(function (_context7) {
           while (1) switch (_context7.p = _context7.n) {
@@ -15994,22 +16892,22 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
               // Handle end
 
               source.onended = function () {
-                _this8.currentSource = null;
-                _this8.isProcessingQueue = false;
+                _this9.currentSource = null;
+                _this9.isProcessingQueue = false;
 
                 // Process next chunk
 
-                if (_this8.audioQueue.length > 0) {
+                if (_this9.audioQueue.length > 0) {
                   setTimeout(function () {
-                    return _this8.processQueue();
+                    return _this9.processQueue();
                   }, 50);
                 } else {
                   // No more chunks - stop after delay
 
                   setTimeout(function () {
-                    if (_this8.audioQueue.length === 0 && !_this8.currentSource) {
-                      _this8.isPlaying = false;
-                      _this8.emit('playbackStopped');
+                    if (_this9.audioQueue.length === 0 && !_this9.currentSource) {
+                      _this9.isPlaying = false;
+                      _this9.emit('playbackStopped');
                     }
                   }, 100);
                 }
@@ -16032,7 +16930,7 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
               if (this.audioQueue.length > 0) {
                 this.isProcessingQueue = false;
                 setTimeout(function () {
-                  return _this8.processQueue();
+                  return _this9.processQueue();
                 }, 100);
               } else {
                 this.isPlaying = false;
@@ -16181,7 +17079,7 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "markNewSentence",
     value: function markNewSentence(text) {
-      var _this9 = this;
+      var _this0 = this;
       var wasStopped = this._isStopped;
       var isCurrentlyPlaying = this.isPlaying || this.scheduledSources.size > 0;
 
@@ -16237,20 +17135,20 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
       var sentenceText = text; // Capture for timeout callback
       this._emptySentenceTimeout = setTimeout(function () {
         // Check if this sentence still has no chunks after timeout
-        if (_this9.pendingSentenceText === sentenceText && _this9.scheduledBuffers === 0 && _this9.preparedBuffer.length === 0 && _this9.pcmChunkQueue.length === 0 && !_this9._isStopped) {
+        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), "...\""));
           // Clear pending sentence to unblock next sentence
-          if (_this9.pendingSentenceText === sentenceText) {
-            _this9.pendingSentenceText = null;
+          if (_this0.pendingSentenceText === sentenceText) {
+            _this0.pendingSentenceText = null;
           }
           // Emit playbackStopped to allow next sentence to start
           // Only if we're not currently playing (to avoid interrupting real playback)
-          if (!_this9.isPlaying && _this9.scheduledSources.size === 0) {
+          if (!_this0.isPlaying && _this0.scheduledSources.size === 0) {
             console.log('🛑 AudioPlayer: Emitting playbackStopped for empty sentence timeout');
-            _this9.emit('playbackStopped');
+            _this0.emit('playbackStopped');
           }
         }
-        _this9._emptySentenceTimeout = null;
+        _this0._emptySentenceTimeout = null;
       }, 5000); // 5 second timeout - adjust based on expected chunk arrival rate
     }
 
@@ -16260,14 +17158,14 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "startTranscriptChecker",
     value: function startTranscriptChecker() {
-      var _this0 = this;
+      var _this1 = this;
       if (this.isCheckingTranscripts) return;
       this.isCheckingTranscripts = true;
       console.log('📝 AudioPlayer: Transcript checker started');
       var _checkLoop = function checkLoop() {
-        if (!_this0.isCheckingTranscripts || !_this0.audioContext) return;
-        var currentTime = _this0.audioContext.currentTime;
-        var _iterator = _createForOfIteratorHelper(_this0.sentenceTimings),
+        if (!_this1.isCheckingTranscripts || !_this1.audioContext) return;
+        var currentTime = _this1.audioContext.currentTime;
+        var _iterator = _createForOfIteratorHelper(_this1.sentenceTimings),
           _step;
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
@@ -16275,7 +17173,7 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
             if (!timing.displayed && currentTime >= timing.startTime) {
               timing.displayed = true;
               console.log("\uD83D\uDCDD AudioPlayer: Display transcript at ".concat(currentTime.toFixed(3), "s: \"").concat(timing.text.substring(0, 40), "...\""));
-              _this0.emit('transcriptDisplay', {
+              _this1.emit('transcriptDisplay', {
                 text: timing.text
               });
             }
@@ -16285,10 +17183,10 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
         } finally {
           _iterator.f();
         }
-        if (_this0.isPlaying || _this0.scheduledBuffers > 0) {
+        if (_this1.isPlaying || _this1.scheduledBuffers > 0) {
           requestAnimationFrame(_checkLoop);
         } else {
-          _this0.isCheckingTranscripts = false;
+          _this1.isCheckingTranscripts = false;
           console.log('📝 AudioPlayer: Transcript checker stopped');
         }
       };
@@ -16409,6 +17307,16 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
       this._cleanupAudioContext();
       this.removeAllListeners();
     }
+  }], [{
+    key: "closeSharedContext",
+    value: function closeSharedContext() {
+      if (_sharedPlayerContext && _sharedPlayerContext.state !== 'closed') {
+        console.log('🗑️ AudioPlayer: Closing shared AudioContext');
+        _sharedPlayerContext.close();
+      }
+      _sharedPlayerContext = null;
+      _sharedPlayerSampleRate = null;
+    }
   }]);
 }(_shared_EventEmitter_js__WEBPACK_IMPORTED_MODULE_0__["default"]);
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AudioPlayer);
@@ -19112,6 +20020,10 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
         this.audioRecorder.destroy();
       }
 
+      // Close shared AudioContexts so they don't leak on SPA route changes
+      _AudioPlayer_js__WEBPACK_IMPORTED_MODULE_1__["default"].closeSharedContext();
+      _core_AudioRecorder_js__WEBPACK_IMPORTED_MODULE_2__["default"].closeSharedContext();
+
       // Cleanup client tools registry
       if (this.clientToolsRegistry) {
         var tools = this.clientToolsRegistry.getRegisteredTools();
@@ -20425,6 +21337,7 @@ var AgentSDK = /*#__PURE__*/function () {
     this.onAudioStartPlaying = config.onAudioStartPlaying || function () {};
     this.onAudioStoppedPlaying = config.onAudioStoppedPlaying || function () {};
     this.onSubtitleDisplay = config.onSubtitleDisplay || function () {};
+    this.onUnsupportedAction = null;
   }
 
   /**
@@ -20696,6 +21609,13 @@ var AgentSDK = /*#__PURE__*/function () {
         case 'error':
           this.onError(new Error(message.message || message.error || 'Unknown error'));
           break;
+        case 'show_products':
+        case 'cart_updated':
+        case 'add_to_store_cart':
+          if (typeof this.onUnsupportedAction === 'function') {
+            this.onUnsupportedAction(messageType, message);
+          }
+          break;
         default:
           // Handle other message types
           break;
@@ -21136,6 +22056,17 @@ var TTPChatWidget = /*#__PURE__*/function () {
         }
         var widgetMode = ((_this$config$behavior = _this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mode) || 'unified';
         if (widgetMode === 'unified') {
+          if (window.innerWidth <= 768) {
+            var _this$shadowRoot, _this$shadowRoot2;
+            // Mobile: close panel and show the FAB so user returns to normal state
+            var panel = (_this$shadowRoot = _this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.getElementById('text-chat-panel');
+            if (panel) {
+              panel.classList.remove('open');
+              _this.isOpen = false;
+            }
+            var fab = (_this$shadowRoot2 = _this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.querySelector('.ttp-mobile-fab');
+            if (fab) fab.style.display = '';
+          }
           _this.showLanding();
         }
       },
@@ -21150,6 +22081,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Callback to show error toast (for domain errors, etc.)
       onErrorToast: function onErrorToast(message, type) {
         _this.showErrorToast(message, type);
+      },
+      onMobileError: function onMobileError(message) {
+        _this.showMobileLandingError(message);
       }
     });
     this.voiceInterface = new _VoiceInterface_js__WEBPACK_IMPORTED_MODULE_1__.VoiceInterface(voiceConfig);
@@ -21176,13 +22110,25 @@ var TTPChatWidget = /*#__PURE__*/function () {
     this.createWidget();
     this.setupEventHandlers();
 
-    // Start open if configured (immediately)
+    // Start open if configured
     if (this.config.behavior.startOpen || this.config.behavior.autoOpen) {
-      var _this$shadowRoot;
-      var panel = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.getElementById('text-chat-panel');
-      if (panel) {
-        this.isOpen = true;
-        panel.classList.add('open');
+      if (window.innerWidth <= 768) {
+        var _this$shadowRoot3, _this$shadowRoot4;
+        // Mobile: show the mobile landing overlay instead of the desktop panel
+        var mobileFab = (_this$shadowRoot3 = this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : _this$shadowRoot3.querySelector('.ttp-mobile-fab');
+        var mobileLanding = (_this$shadowRoot4 = this.shadowRoot) === null || _this$shadowRoot4 === void 0 ? void 0 : _this$shadowRoot4.getElementById('ttpMobileLanding');
+        if (mobileFab && mobileLanding) {
+          mobileFab.style.display = 'none';
+          mobileLanding.classList.add('active');
+          this.isMobileLandingOpen = true;
+        }
+      } else {
+        var _this$shadowRoot5;
+        var panel = (_this$shadowRoot5 = this.shadowRoot) === null || _this$shadowRoot5 === void 0 ? void 0 : _this$shadowRoot5.getElementById('text-chat-panel');
+        if (panel) {
+          this.isOpen = true;
+          panel.classList.add('open');
+        }
       }
     }
 
@@ -21236,9 +22182,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "open",
     value: function open() {
-      var _this$shadowRoot2;
+      var _this$shadowRoot6;
       if (this.isOpen) return;
-      var panel = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.getElementById('text-chat-panel');
+      var panel = (_this$shadowRoot6 = this.shadowRoot) === null || _this$shadowRoot6 === void 0 ? void 0 : _this$shadowRoot6.getElementById('text-chat-panel');
       if (panel) {
         this.isOpen = true;
         panel.classList.add('open');
@@ -21442,7 +22388,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
             voiceCardIcon: cleanLandingConfig.voiceCardIcon || '🎤',
             textCardIcon: cleanLandingConfig.textCardIcon || '💬',
             voiceCardTitle: cleanLandingConfig.voiceCardTitle || null,
-            textCardTitle: cleanLandingConfig.textCardTitle || null
+            textCardTitle: cleanLandingConfig.textCardTitle || null,
+            callButtonText: cleanLandingConfig.callButtonText || null,
+            chatButtonText: cleanLandingConfig.chatButtonText || null,
+            statusText: cleanLandingConfig.statusText || null
           }, cleanLandingConfig);
         }(),
         // Header Configuration (top of panel)
@@ -21472,7 +22421,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
             backgroundColor: cleanHeaderConfig.backgroundColor || '#7C3AED',
             // Default purple
             textColor: cleanHeaderConfig.textColor || '#FFFFFF',
-            showCloseButton: cleanHeaderConfig.showCloseButton !== false
+            showCloseButton: cleanHeaderConfig.showCloseButton !== false,
+            mobileLabel: cleanHeaderConfig.mobileLabel || 'Chat'
           }, cleanHeaderConfig);
           return finalHeader;
         }(),
@@ -21678,10 +22628,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var resetCSS = '';
       if (this.config.useShadowDOM) {
         // Shadow DOM mode - use :host selector
-        resetCSS = "\n        :host {\n          all: initial;\n          display: block;\n          pointer-events: none;\n        }\n        img {\n          max-width: none !important;\n        }\n        #text-chat-button img {\n          width: 28px !important;\n          height: 28px !important;\n        }\n        #text-chat-button {\n          pointer-events: auto;\n        }\n        #text-chat-panel {\n          pointer-events: auto;\n        }\n      ";
+        resetCSS = "\n        :host {\n          all: initial;\n          display: block;\n          pointer-events: none;\n        }\n        img {\n          max-width: none !important;\n        }\n        #text-chat-button img {\n          width: 28px !important;\n          height: 28px !important;\n        }\n        #text-chat-button {\n          pointer-events: auto;\n        }\n        #text-chat-panel {\n          pointer-events: auto;\n        }\n        .ttp-mobile-fab {\n          pointer-events: auto;\n        }\n        #ttpMobileLanding {\n          pointer-events: auto;\n        }\n      ";
       } else {
         // Regular DOM mode - targeted reset without breaking widget styles
-        resetCSS = "\n        /* Reset only problematic inherited styles, not all styles */\n        #text-chat-button,\n        #text-chat-panel,\n        #text-chat-panel * {\n          box-sizing: border-box;\n          font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        }\n        \n        /* Prevent theme CSS from affecting images */\n        #text-chat-button img,\n        #text-chat-panel img {\n          max-width: none !important;\n          width: auto;\n          height: auto;\n        }\n        \n        #text-chat-button img {\n          width: 28px !important;\n          height: 28px !important;\n        }\n        \n        /* Ensure button and panel can receive clicks */\n        #text-chat-button,\n        #text-chat-panel {\n          pointer-events: auto;\n        }\n        \n        /* Reset any inherited text styles that might break layout */\n        #text-chat-panel {\n          text-align: left;\n          line-height: normal;\n          letter-spacing: normal;\n          word-spacing: normal;\n          text-transform: none;\n          text-indent: 0;\n          text-shadow: none;\n          white-space: normal;\n        }\n        \n        /* Ensure flexbox works properly */\n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .landing-screen,\n        #text-chat-panel .voice-interface,\n        #text-chat-panel .text-interface,\n        #text-chat-panel .widget-header,\n        #text-chat-panel .mode-selection {\n          display: flex;\n        }\n        \n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .landing-screen,\n        #text-chat-panel .voice-interface,\n        #text-chat-panel .text-interface {\n          flex-direction: column;\n        }\n        \n        #text-chat-panel .mode-selection {\n          flex-direction: row;\n        }\n        \n        /* Ensure proper stacking */\n        #text-chat-button {\n          z-index: 10001 !important;\n        }\n        \n        #text-chat-panel {\n          z-index: 10000 !important;\n        }\n      ";
+        resetCSS = "\n        /* Reset only problematic inherited styles, not all styles */\n        #text-chat-button,\n        #text-chat-panel,\n        #text-chat-panel * {\n          box-sizing: border-box;\n          font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        }\n        \n        /* Prevent theme CSS from affecting images */\n        #text-chat-button img,\n        #text-chat-panel img {\n          max-width: none !important;\n          width: auto;\n          height: auto;\n        }\n        \n        #text-chat-button img {\n          width: 28px !important;\n          height: 28px !important;\n        }\n        \n        /* Ensure button and panel can receive clicks */\n        #text-chat-button,\n        #text-chat-panel,\n        .ttp-mobile-fab,\n        #ttpMobileLanding {\n          pointer-events: auto;\n        }\n        \n        /* Reset any inherited text styles that might break layout */\n        #text-chat-panel {\n          text-align: left;\n          line-height: normal;\n          letter-spacing: normal;\n          word-spacing: normal;\n          text-transform: none;\n          text-indent: 0;\n          text-shadow: none;\n          white-space: normal;\n        }\n        \n        /* Ensure flexbox works properly */\n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .landing-screen,\n        #text-chat-panel .voice-interface,\n        #text-chat-panel .text-interface,\n        #text-chat-panel .widget-header,\n        #text-chat-panel .mode-selection {\n          display: flex;\n        }\n        \n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .landing-screen,\n        #text-chat-panel .voice-interface,\n        #text-chat-panel .text-interface {\n          flex-direction: column;\n        }\n        \n        #text-chat-panel .mode-selection {\n          flex-direction: row;\n        }\n        \n        /* Ensure proper stacking */\n        #text-chat-button {\n          z-index: 10001 !important;\n        }\n        \n        #text-chat-panel {\n          z-index: 10000 !important;\n        }\n      ";
       }
       var widgetHTML = this.generateWidgetHTML();
       if (this.config.useShadowDOM) {
@@ -21699,10 +22649,22 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var panel = this.shadowRoot.getElementById('text-chat-panel');
       if (panel) {
         if (this.config.behavior.startOpen || this.config.behavior.autoOpen) {
-          this.isOpen = true;
-          panel.classList.add('open');
-          // Hide prompt if widget starts open
-          this.hidePrompt();
+          if (window.innerWidth <= 768) {
+            var _this$shadowRoot7, _this$shadowRoot8;
+            // Mobile: show mobile landing overlay
+            var mobileFab = (_this$shadowRoot7 = this.shadowRoot) === null || _this$shadowRoot7 === void 0 ? void 0 : _this$shadowRoot7.querySelector('.ttp-mobile-fab');
+            var mobileLanding = (_this$shadowRoot8 = this.shadowRoot) === null || _this$shadowRoot8 === void 0 ? void 0 : _this$shadowRoot8.getElementById('ttpMobileLanding');
+            if (mobileFab && mobileLanding) {
+              mobileFab.style.display = 'none';
+              mobileLanding.classList.add('active');
+              this.isMobileLandingOpen = true;
+            }
+            this.hidePrompt();
+          } else {
+            this.isOpen = true;
+            panel.classList.add('open');
+            this.hidePrompt();
+          }
         } else {
           // Widget starts closed - show prompt
           this.showPrompt();
@@ -21850,7 +22812,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         isPromptEnabled: isPromptEnabled,
         willGenerateHTML: !!promptBubbleHTML
       });
-      return "\n      ".concat(styleTag, "\n      \n      ").concat(this.config.behavior.hidden ? '' : "\n      <div id=\"text-chat-button-container\">\n        ".concat(promptBubbleHTML, "\n        ").concat(isPromptEnabled && promptConfig.showPulseRings !== false ? this.generatePulseRingsHTML(promptConfig) : '', "\n        <button id=\"text-chat-button\" \n                aria-label=\"").concat(this.config.accessibility.ariaLabel, "\"\n                aria-description=\"").concat(this.config.accessibility.ariaDescription, "\">\n        ").concat(iconHTML, "\n      </button>\n      </div>\n      "), "\n      \n      <div id=\"text-chat-panel\">\n        <div class=\"widget-shell\">\n          <div class=\"panel-inner widget-container\" style=\"direction: ").concat(this.config.direction, ";\">\n          <div class=\"widget-header\" style=\"background: ").concat(header.backgroundColor || '#7C3AED', " !important; color: ").concat(header.textColor || '#FFFFFF', " !important;\">\n            <div>\n              ").concat(header.showTitle ? "<div class=\"header-title\">".concat(header.title, "</div>") : '', "\n              <div class=\"header-status\" style=\"color: ").concat(header.onlineIndicatorColor || 'rgba(255,255,255,0.7)', " !important;\">\n                <span class=\"status-dot\" style=\"background: ").concat(header.onlineIndicatorDotColor || '#10b981', " !important;\"></span>\n                <span>").concat(header.onlineIndicatorText !== undefined && header.onlineIndicatorText !== null ? header.onlineIndicatorText : t('online'), "</span>\n              </div>\n            </div>\n            \n            <div style=\"display: flex; gap: 6px; align-items: center; position: relative; z-index: 1;\">\n              <!-- New Chat Button (hide on landing screen, show otherwise) -->\n              <button class=\"header-icon new-chat-btn\" id=\"newChatBtn\" title=\"").concat(getTooltip('newChat'), "\" style=\"").concat(showLanding ? 'display: none;' : '', "\">\n                <span style=\"font-size: 18px; font-weight: bold;\">+</span>\n              </button>\n              \n              <!-- Back Button (only show in unified mode) -->\n              ").concat(widgetMode === 'unified' ? "<button class=\"header-icon back-btn\" id=\"backBtn\" title=\"".concat(getTooltip('back'), "\" style=\"display: none;\">\n                <span style=\"font-size: 16px;\">\u2039</span>\n              </button>") : '', "\n              \n              <!-- Close Button -->\n              ").concat(header.showCloseButton ? '<button class="header-icon close-btn" id="closeBtn" title="' + getTooltip('close') + '">' + '<span style="font-size: 18px; font-weight: bold;">×</span>' + '</button>' : '', "\n            </div>\n          </div>\n\n          ").concat(showLanding && this.landingScreen ? this.landingScreen.generateHTML() : '', "\n\n          ").concat(showVoice ? this.voiceInterface.generateHTML() : '', "\n          ").concat(showText ? this.textInterface.generateHTML() : '', "\n          ").concat(this.generateFooterHTML(), "\n          </div>\n        </div>\n      </div>\n    ");
+      return "\n      ".concat(styleTag, "\n      \n      ").concat(this.config.behavior.hidden ? '' : "\n      <div id=\"text-chat-button-container\">\n        ".concat(promptBubbleHTML, "\n        ").concat(isPromptEnabled && promptConfig.showPulseRings !== false ? this.generatePulseRingsHTML(promptConfig) : '', "\n        <button id=\"text-chat-button\" \n                aria-label=\"").concat(this.config.accessibility.ariaLabel, "\"\n                aria-description=\"").concat(this.config.accessibility.ariaDescription, "\">\n          ").concat(iconHTML, "\n        </button>\n        <button class=\"ttp-mobile-fab\" aria-label=\"").concat(this.config.accessibility.ariaLabel, "\">\n          <div class=\"ttp-mobile-fab__icon-wrap\">\n            <div class=\"ttp-mobile-fab__waveform\">\n              <span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span>\n            </div>\n          </div>\n          <div class=\"ttp-mobile-fab__label-wrap\">\n            <span class=\"ttp-mobile-fab__label\">").concat(header.mobileLabel || 'Chat', "</span>\n            <span class=\"ttp-mobile-fab__status\">\n              <span class=\"ttp-mobile-fab__dot\"></span>\n              ").concat(header.onlineIndicatorText !== undefined && header.onlineIndicatorText !== null ? header.onlineIndicatorText : t('online'), "\n            </span>\n          </div>\n        </button>\n      </div>\n      "), "\n\n      ").concat(this.config.behavior.hidden ? '' : "\n      <div id=\"ttpMobileLanding\" class=\"ttp-mobile-landing\">\n        <div class=\"ttp-mobile-landing__header\">\n          <div class=\"ttp-mobile-landing__avatar\">\n            <div class=\"ttp-mobile-landing__waveform\">\n              <span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span>\n            </div>\n          </div>\n          <div class=\"ttp-mobile-landing__info\">\n            <div class=\"ttp-mobile-landing__name\">".concat(header.title || 'Chat Assistant', "</div>\n            <div class=\"ttp-mobile-landing__status\">\n              <span class=\"ttp-mobile-landing__dot\"></span>\n              ").concat(this.config.landing.statusText || t('online') + ' • ' + (this.config.landing.subtitle || 'Ready to help'), "\n            </div>\n          </div>\n          <button class=\"ttp-mobile-landing__close\" aria-label=\"Close\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"ttp-mobile-landing__error\" id=\"ttpMobileLandingError\" style=\"display:none;\">\n          <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n          </svg>\n          <span class=\"ttp-mobile-landing__error-text\"></span>\n        </div>\n        <div class=\"ttp-mobile-landing__actions\">\n          ").concat(showVoice ? "\n          <button class=\"ttp-mobile-landing__btn ttp-mobile-landing__btn--call\" id=\"ttpMobileCallBtn\">\n            <svg 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.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 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-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"/>\n            </svg>\n            ".concat(this.config.landing.callButtonText || this.config.landing.voiceCardTitle || t('voiceCall'), "\n          </button>\n          ") : '', "\n          ").concat(showText ? "\n          <button class=\"ttp-mobile-landing__btn ttp-mobile-landing__btn--text\" id=\"ttpMobileChatBtn\">\n            <svg 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.landing.chatButtonText || this.config.landing.textCardTitle || t('textChat'), "\n          </button>\n          ") : '', "\n        </div>\n        ").concat(this.config.footer.show !== false ? "\n        <div class=\"ttp-mobile-landing__footer\">\n          <div class=\"ttp-mobile-landing__powered\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"10\" height=\"10\">\n              <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/>\n            </svg>\n            Powered by <a href=\"https://talktopc.com\" target=\"_blank\" rel=\"noopener\">TalkToPC</a>\n          </div>\n        </div>\n        " : '', "\n      </div>\n      "), "\n      \n      <div id=\"text-chat-panel\">\n        <div class=\"widget-shell\">\n          <div class=\"panel-inner widget-container\" style=\"direction: ").concat(this.config.direction, ";\">\n          <div class=\"widget-header\" style=\"background: ").concat(header.backgroundColor || '#7C3AED', " !important; color: ").concat(header.textColor || '#FFFFFF', " !important;\">\n            <div>\n              ").concat(header.showTitle ? "<div class=\"header-title\">".concat(header.title, "</div>") : '', "\n              <div class=\"header-status\" style=\"color: ").concat(header.onlineIndicatorColor || 'rgba(255,255,255,0.7)', " !important;\">\n                <span class=\"status-dot\" style=\"background: ").concat(header.onlineIndicatorDotColor || '#10b981', " !important;\"></span>\n                <span>").concat(header.onlineIndicatorText !== undefined && header.onlineIndicatorText !== null ? header.onlineIndicatorText : t('online'), "</span>\n              </div>\n            </div>\n            \n            <div style=\"display: flex; gap: 6px; align-items: center; position: relative; z-index: 1;\">\n              <!-- New Chat Button (hide on landing screen, show otherwise) -->\n              <button class=\"header-icon new-chat-btn\" id=\"newChatBtn\" title=\"").concat(getTooltip('newChat'), "\" style=\"").concat(showLanding ? 'display: none;' : '', "\">\n                <span style=\"font-size: 18px; font-weight: bold;\">+</span>\n              </button>\n              \n              <!-- Back Button (only show in unified mode) -->\n              ").concat(widgetMode === 'unified' ? "<button class=\"header-icon back-btn\" id=\"backBtn\" title=\"".concat(getTooltip('back'), "\" style=\"display: none;\">\n                <span style=\"font-size: 16px;\">\u2039</span>\n              </button>") : '', "\n              \n              <!-- Close Button -->\n              ").concat(header.showCloseButton ? '<button class="header-icon close-btn" id="closeBtn" title="' + getTooltip('close') + '">' + '<span style="font-size: 18px; font-weight: bold;">×</span>' + '</button>' : '', "\n            </div>\n          </div>\n\n          ").concat(showLanding && this.landingScreen ? this.landingScreen.generateHTML() : '', "\n\n          ").concat(showVoice ? this.voiceInterface.generateHTML() : '', "\n          ").concat(showText ? this.textInterface.generateHTML() : '', "\n          ").concat(this.generateFooterHTML(), "\n          </div>\n        </div>\n      </div>\n    ");
     }
 
     /**
@@ -21976,7 +22938,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Note: Removed headerColor variable - landing screen colors now use explicit defaults
       // to prevent buttons from inheriting header backgroundColor
 
-      return "\n      /* MOBILE FIRST - Default styles for all devices */\n      #text-chat-widget {\n        position: fixed !important;\n        z-index: 10000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        /* Mobile defaults */\n        right: 10px;\n        bottom: 10px;\n        left: auto;\n        top: auto;\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', ";\n          left: ").concat(this.config.position.horizontal === 'left' ? '20px' : 'auto', ";\n          bottom: ").concat(this.config.position.vertical === 'bottom' ? '20px' : 'auto', ";\n          top: ").concat(this.config.position.vertical === 'top' ? '20px' : 'auto', ";\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      #text-chat-button {\n        position: relative;\n        width: ").concat(buttonSize, "px;\n        height: ").concat(buttonSize, "px;\n        margin: 0;\n        flex-shrink: 0;\n        border-radius: ").concat(btn.shape === 'circle' ? '50%' : btn.shape === 'square' ? '0' : '12px', ";\n        background: ").concat(btn.backgroundColor || icon.backgroundColor || '#7C3AED', ";\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all ").concat(anim.duration, "s ease;\n        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        touch-action: manipulation;\n        -webkit-tap-highlight-color: transparent;\n        -webkit-touch-callout: none;\n        user-select: none;\n        min-width: 44px;\n        min-height: 44px;\n        z-index: 1;\n      }\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: 56px !important;\n          height: 56px !important;\n        }\n        \n        #text-chat-button {\n          width: 56px !important;\n          height: 56px !important;\n          min-width: 56px !important;\n          min-height: 56px !important;\n          max-width: 56px !important;\n          max-height: 56px !important;\n        }\n        \n        #text-chat-panel {\n          position: fixed !important;\n          left: 10px !important;\n          right: 10px !important;\n          bottom: 92px !important; /* 56px button + 20px gap + 16px footer */\n          top: 60px !important; /* Add top spacing */\n          width: auto !important;\n          max-width: none !important;\n          height: auto !important; /* Change from max-height to auto */\n          max-height: none !important; /* Remove max-height */\n          transform: none !important;\n          margin: 0 !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 10px 14px;\n          min-height: 56px;\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 15px;\n        }\n        \n        #text-chat-panel .header-icon {\n          width: 40px;\n          height: 40px;\n          min-width: 40px;\n          min-height: 40px;\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        .landing-screen {\n          padding: 16px;\n        }\n        \n        .landing-logo {\n          font-size: 40px;\n        }\n        \n        .landing-title {\n          font-size: 18px;\n          margin-bottom: 16px;\n        }\n        \n        .mode-selection {\n          flex-direction: column;\n          gap: 12px;\n          align-items: center;\n        }\n        \n        .mode-card {\n          max-width: 100%;\n          width: 100%;\n          padding: 16px;\n        }\n        \n        .mode-card-icon {\n          width: 50px;\n          height: 50px;\n          font-size: 28px;\n        }\n        \n        .mode-card-title {\n          font-size: 14px;\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: 54px !important;\n          height: 54px !important;\n        }\n        \n        #text-chat-button {\n          width: 54px !important;\n          height: 54px !important;\n          min-width: 54px !important;\n          min-height: 54px !important;\n        }\n        \n        #text-chat-panel {\n          left: 8px !important;\n          right: 8px !important;\n          bottom: 86px !important; /* 54px button + 20px gap + 12px footer */\n          top: 50px !important; /* Add top spacing for very small screens */\n          height: auto !important;\n          max-height: none !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 8px 12px;\n          min-height: 52px;\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 14px;\n        }\n        \n        .landing-logo {\n          font-size: 36px;\n        }\n        \n        .landing-title {\n          font-size: 16px;\n        }\n      }\n      \n      ").concat(anim.enableHover ? "\n        #text-chat-button:hover {\n          ".concat(btn.hoverColor ? "background: ".concat(btn.hoverColor, ";") : '', "\n          transform: scale(1.05);\n          box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);\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;\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: ").concat(buttonSize, "px;\n        height: ").concat(buttonSize, "px;\n        z-index: 10001;\n        display: flex;\n        align-items: center;\n        justify-content: center;\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;\n        z-index: 10002;\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      \n      .prompt-bubble.top {\n        bottom: calc(100% + 18px);\n        left: 50%;\n        transform: translateX(-50%);\n      }\n      \n      .prompt-bubble.left {\n        right: calc(100% + 12px);\n        top: 50%;\n        transform: translateY(-50%);\n      }\n      \n      .prompt-bubble.right {\n        left: calc(100% + 12px);\n        top: 50%;\n        transform: translateY(-50%);\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;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-float {\n        animation: widget-float 2s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-pulse {\n        animation: pulse 2s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble-content {\n        position: relative;\n        padding: 8px 16px;\n        border-radius: 20px;\n        font-weight: 500;\n        font-size: 14px;\n        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);\n        overflow: hidden;\n      }\n      \n      .prompt-bubble-shimmer {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);\n        animation: widget-shimmer 2s infinite;\n      }\n      \n      .prompt-bubble.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite;\n      }\n      \n      .prompt-bubble.animation-pulse {\n        animation: pulse 2s ease-in-out infinite;\n      }\n      \n      .prompt-bubble.animation-float {\n        animation: widget-float 2s ease-in-out infinite;\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;\n        width: 0;\n        height: 0;\n        border: 8px solid transparent;\n      }\n      \n      .prompt-bubble.top .prompt-bubble-arrow {\n        top: 100%;\n        left: 50%;\n        transform: translateX(-50%);\n        border-top-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-bottom: none;\n        margin-left: 0;\n      }\n      \n      .prompt-bubble.left .prompt-bubble-arrow {\n        left: 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        border-left-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-right: none;\n      }\n      \n      .prompt-bubble.right .prompt-bubble-arrow {\n        right: 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        border-right-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-left: none;\n      }\n      \n      /* Pulse Rings */\n      .prompt-pulse-rings {\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        pointer-events: none;\n      }\n      \n      .prompt-pulse-ring {\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        animation: widget-pulse-ring 2s ease-out infinite;\n      }\n      \n      .prompt-pulse-ring:nth-child(2) {\n        animation-delay: 0.5s;\n      }\n      \n      /* Mobile adjustments for prompt bubble */\n      @media (max-width: 768px) {\n        .prompt-bubble-content {\n          font-size: 12px;\n          padding: 6px 12px;\n        }\n        \n        .prompt-bubble.top {\n          bottom: calc(100% + 14px);\n        }\n        \n        .prompt-bubble.left,\n        .prompt-bubble.right {\n          display: none; /* Hide side prompts on mobile */\n        }\n      }\n      \n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed;\n        bottom: calc(").concat(buttonSize, "px + 20px + 20px); /* Button + gap + reduced footer offset */\n        ").concat(this.config.position.horizontal === 'right' ? 'right: 20px;' : 'left: 20px;', "\n        width: ").concat(panel.width, "px;\n        max-width: calc(100vw - 40px);\n        height: ").concat(panel.height, "px;\n        max-height: calc(100vh - ").concat(buttonSize, "px - 40px - 20px); /* Account for footer height */\n        background: transparent;\n        border-radius: ").concat(panel.borderRadius, "px;\n        border: none;\n        flex-direction: column;\n        overflow: hidden;\n        ").concat(panel.backdropFilter ? "backdrop-filter: ".concat(panel.backdropFilter, ";") : '', "\n        ").concat(anim.enableSlide ? "transition: all ".concat(anim.duration, "s ease;") : '', "\n        box-sizing: border-box;\n      }\n      \n      #text-chat-panel.open {\n        display: flex").concat(important, ";\n        ").concat(anim.enableSlide ? 'transform: translateY(0); opacity: 1;' : '', "\n      }\n\n      /* Shell for gradient border/background */\n      .widget-shell { width: 100%; height: 100%; padding: 0; border-radius: ").concat(panel.borderRadius, "px; background: transparent; box-shadow: 0 20px 60px rgba(0,0,0,0.15); overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }\n      .panel-inner { width: 100%; height: 100%; background: #ffffff; border-radius: ").concat(panel.borderRadius, "px; border: ").concat(panel.border, "; overflow: hidden; display:flex; flex-direction: column; padding: 0; box-sizing: border-box; max-width: 100%; }\n\n      /* New structure styles matching provided design */\n      #text-chat-panel .widget-container {\n        width: 100%; height: 100%; background: #FFFFFF; overflow: visible; display: flex; flex-direction: column; border-radius: ").concat(panel.borderRadius, "px;\n        container-type: size;\n      }\n      \n      /* Ensure content areas can scroll when height is constrained */\n      #text-chat-panel .widget-container > .landing-screen,\n      #text-chat-panel .widget-container > .voice-interface,\n      #text-chat-panel .widget-container > .text-interface {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: visible; /* Change from hidden to visible */\n      }\n      \n      /* Header should not scroll */\n      #text-chat-panel .widget-header {\n        padding: 14px 16px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        border-top-left-radius: ").concat(panel.borderRadius, "px;\n        border-top-right-radius: ").concat(panel.borderRadius, "px;\n        flex-shrink: 0;\n        box-sizing: border-box;\n        position: relative;\n        overflow: hidden;\n        background: ").concat(header.backgroundColor || '#7C3AED').concat(important, ";\n        color: ").concat(header.textColor || '#FFFFFF').concat(important, ";\n      }\n      \n      #text-chat-panel .widget-header::before {\n        content: '';\n        position: absolute;\n        top: -50%;\n        right: -20%;\n        width: 180px;\n        height: 180px;\n        background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\n        pointer-events: none;\n      }\n      \n      #text-chat-panel .widget-header > div:first-child {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n        position: relative;\n        z-index: 1;\n      }\n      \n      #text-chat-panel .header-title { font-size: 15px; font-weight: 600; margin: 0; }\n      #text-chat-panel .header-status { display: flex; align-items: center; gap: 5px; font-size: 12px; margin: 0; }\n      #text-chat-panel .status-dot { width: 6px; height: 6px; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }\n      /* Online indicator customization - inline styles take precedence */\n      @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.8; } }\n      /* Header icon buttons */\n      .header-icon {\n        background: rgba(255, 255, 255, 0.1);\n        border: none;\n        color: white;\n        width: 34px;\n        height: 34px;\n        min-width: 34px;\n        min-height: 34px;\n        border-radius: 10px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background 0.2s;\n        flex-shrink: 0;\n        font-size: 16px;\n        padding: 0;\n        box-sizing: border-box;\n        position: relative;\n        z-index: 1;\n      }\n      \n      .header-icon:hover {\n        background: rgba(255, 255, 255, 0.2);\n      }\n      \n      .header-icon svg {\n        pointer-events: none;\n        stroke: white;\n        fill: none;\n      }\n      \n      .back-btn.visible {\n        display: flex !important;\n      }\n\n      ").concat(showLanding && this.landingScreen ? this.landingScreen.generateCSS() : '', "\n\n      ").concat(showVoice ? this.voiceInterface.generateCSS() : '', "\n      ").concat(showText ? this.textInterface.generateCSS() : '', "\n      \n      /* Footer Branding */\n      .widget-footer {\n        box-sizing: border-box;\n      }\n      \n      .footer-brand-link {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      }\n      \n      .footer-brand-link:hover {\n        opacity: 0.9;\n      }\n      \n      @media (max-width: 768px) {\n        .widget-footer {\n          height: 32px;\n        }\n        .widget-footer span {\n          font-size: 10px;\n        }\n        .widget-footer span:last-child {\n          font-size: 8px;\n        }\n      }\n      \n      #text-chat-send-hint {\n        text-align: center;\n        line-height: 1.4;\n      }\n      \n      .agent-thinking {\n        font-style: italic;\n        color: #6B7280;\n      }\n    ");
+      return "\n      /* MOBILE FIRST - Default styles for all devices */\n      #text-chat-widget {\n        position: fixed !important;\n        z-index: 10000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        /* Mobile defaults */\n        right: 10px;\n        bottom: 10px;\n        left: auto;\n        top: auto;\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', ";\n          left: ").concat(this.config.position.horizontal === 'left' ? '20px' : 'auto', ";\n          bottom: ").concat(this.config.position.vertical === 'bottom' ? '20px' : 'auto', ";\n          top: ").concat(this.config.position.vertical === 'top' ? '20px' : 'auto', ";\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      #text-chat-button {\n        position: relative;\n        width: ").concat(buttonSize, "px;\n        height: ").concat(buttonSize, "px;\n        margin: 0;\n        flex-shrink: 0;\n        border-radius: ").concat(btn.shape === 'circle' ? '50%' : btn.shape === 'square' ? '0' : '12px', ";\n        background: ").concat(btn.backgroundColor || icon.backgroundColor || '#7C3AED', ";\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all ").concat(anim.duration, "s ease;\n        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        touch-action: manipulation;\n        -webkit-tap-highlight-color: transparent;\n        -webkit-touch-callout: none;\n        user-select: none;\n        min-width: 44px;\n        min-height: 44px;\n        z-index: 1;\n      }\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: 56px !important;\n          height: 56px !important;\n        }\n        \n        #text-chat-button {\n          width: 56px !important;\n          height: 56px !important;\n          min-width: 56px !important;\n          min-height: 56px !important;\n          max-width: 56px !important;\n          max-height: 56px !important;\n        }\n        \n        #text-chat-panel {\n          position: fixed !important;\n          left: 10px !important;\n          right: 10px !important;\n          bottom: 92px !important; /* 56px button + 20px gap + 16px footer */\n          top: 60px !important; /* Add top spacing */\n          width: auto !important;\n          max-width: none !important;\n          height: auto !important; /* Change from max-height to auto */\n          max-height: none !important; /* Remove max-height */\n          transform: none !important;\n          margin: 0 !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 10px 14px;\n          min-height: 56px;\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 15px;\n        }\n        \n        #text-chat-panel .header-icon {\n          width: 40px;\n          height: 40px;\n          min-width: 40px;\n          min-height: 40px;\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        .landing-screen {\n          padding: 16px;\n        }\n        \n        .landing-logo {\n          font-size: 40px;\n        }\n        \n        .landing-title {\n          font-size: 18px;\n          margin-bottom: 16px;\n        }\n        \n        .mode-selection {\n          flex-direction: column;\n          gap: 12px;\n          align-items: center;\n        }\n        \n        .mode-card {\n          max-width: 100%;\n          width: 100%;\n          padding: 16px;\n        }\n        \n        .mode-card-icon {\n          width: 50px;\n          height: 50px;\n          font-size: 28px;\n        }\n        \n        .mode-card-title {\n          font-size: 14px;\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: 54px !important;\n          height: 54px !important;\n        }\n        \n        #text-chat-button {\n          width: 54px !important;\n          height: 54px !important;\n          min-width: 54px !important;\n          min-height: 54px !important;\n        }\n        \n        #text-chat-panel {\n          left: 8px !important;\n          right: 8px !important;\n          bottom: 86px !important; /* 54px button + 20px gap + 12px footer */\n          top: 50px !important; /* Add top spacing for very small screens */\n          height: auto !important;\n          max-height: none !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 8px 12px;\n          min-height: 52px;\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 14px;\n        }\n        \n        .landing-logo {\n          font-size: 36px;\n        }\n        \n        .landing-title {\n          font-size: 16px;\n        }\n      }\n      \n      ").concat(anim.enableHover ? "\n        #text-chat-button:hover {\n          ".concat(btn.hoverColor ? "background: ".concat(btn.hoverColor, ";") : '', "\n          transform: scale(1.05);\n          box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);\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;\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: ").concat(buttonSize, "px;\n        height: ").concat(buttonSize, "px;\n        z-index: 10001;\n        display: flex;\n        align-items: center;\n        justify-content: center;\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;\n        z-index: 10002;\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      \n      .prompt-bubble.top {\n        bottom: calc(100% + 18px);\n        left: 50%;\n        transform: translateX(-50%);\n      }\n      \n      .prompt-bubble.left {\n        right: calc(100% + 12px);\n        top: 50%;\n        transform: translateY(-50%);\n      }\n      \n      .prompt-bubble.right {\n        left: calc(100% + 12px);\n        top: 50%;\n        transform: translateY(-50%);\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;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-float {\n        animation: widget-float 2s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-pulse {\n        animation: pulse 2s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble-content {\n        position: relative;\n        padding: 8px 16px;\n        border-radius: 20px;\n        font-weight: 500;\n        font-size: 14px;\n        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);\n        overflow: hidden;\n      }\n      \n      .prompt-bubble-shimmer {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);\n        animation: widget-shimmer 2s infinite;\n      }\n      \n      .prompt-bubble.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite;\n      }\n      \n      .prompt-bubble.animation-pulse {\n        animation: pulse 2s ease-in-out infinite;\n      }\n      \n      .prompt-bubble.animation-float {\n        animation: widget-float 2s ease-in-out infinite;\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;\n        width: 0;\n        height: 0;\n        border: 8px solid transparent;\n      }\n      \n      .prompt-bubble.top .prompt-bubble-arrow {\n        top: 100%;\n        left: 50%;\n        transform: translateX(-50%);\n        border-top-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-bottom: none;\n        margin-left: 0;\n      }\n      \n      .prompt-bubble.left .prompt-bubble-arrow {\n        left: 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        border-left-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-right: none;\n      }\n      \n      .prompt-bubble.right .prompt-bubble-arrow {\n        right: 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        border-right-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-left: none;\n      }\n      \n      /* Pulse Rings */\n      .prompt-pulse-rings {\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        pointer-events: none;\n      }\n      \n      .prompt-pulse-ring {\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        animation: widget-pulse-ring 2s ease-out infinite;\n      }\n      \n      .prompt-pulse-ring:nth-child(2) {\n        animation-delay: 0.5s;\n      }\n      \n      /* Mobile adjustments for prompt bubble */\n      @media (max-width: 768px) {\n        .prompt-bubble-content {\n          font-size: 12px;\n          padding: 6px 12px;\n        }\n        \n        .prompt-bubble.top {\n          bottom: calc(100% + 14px);\n        }\n        \n        .prompt-bubble.left,\n        .prompt-bubble.right {\n          display: none; /* Hide side prompts on mobile */\n        }\n      }\n      \n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed;\n        bottom: calc(").concat(buttonSize, "px + 20px + 20px); /* Button + gap + reduced footer offset */\n        ").concat(this.config.position.horizontal === 'right' ? 'right: 20px;' : 'left: 20px;', "\n        width: ").concat(panel.width, "px;\n        max-width: calc(100vw - 40px);\n        height: ").concat(panel.height, "px;\n        max-height: calc(100vh - ").concat(buttonSize, "px - 40px - 20px); /* Account for footer height */\n        background: transparent;\n        border-radius: ").concat(panel.borderRadius, "px;\n        border: none;\n        flex-direction: column;\n        overflow: hidden;\n        ").concat(panel.backdropFilter ? "backdrop-filter: ".concat(panel.backdropFilter, ";") : '', "\n        ").concat(anim.enableSlide ? "transition: all ".concat(anim.duration, "s ease;") : '', "\n        box-sizing: border-box;\n      }\n      \n      #text-chat-panel.open {\n        display: flex").concat(important, ";\n        ").concat(anim.enableSlide ? 'transform: translateY(0); opacity: 1;' : '', "\n      }\n\n      /* Shell for gradient border/background */\n      .widget-shell { width: 100%; height: 100%; padding: 0; border-radius: ").concat(panel.borderRadius, "px; background: transparent; box-shadow: 0 20px 60px rgba(0,0,0,0.15); overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }\n      .panel-inner { width: 100%; height: 100%; background: #ffffff; border-radius: ").concat(panel.borderRadius, "px; border: ").concat(panel.border, "; overflow: hidden; display:flex; flex-direction: column; padding: 0; box-sizing: border-box; max-width: 100%; }\n\n      /* New structure styles matching provided design */\n      #text-chat-panel .widget-container {\n        width: 100%; height: 100%; background: #FFFFFF; overflow: visible; display: flex; flex-direction: column; border-radius: ").concat(panel.borderRadius, "px;\n        container-type: size;\n      }\n      \n      /* Ensure content areas can scroll when height is constrained */\n      #text-chat-panel .widget-container > .landing-screen,\n      #text-chat-panel .widget-container > .voice-interface,\n      #text-chat-panel .widget-container > .text-interface {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: visible; /* Change from hidden to visible */\n      }\n      \n      /* Header should not scroll */\n      #text-chat-panel .widget-header {\n        padding: 14px 16px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        border-top-left-radius: ").concat(panel.borderRadius, "px;\n        border-top-right-radius: ").concat(panel.borderRadius, "px;\n        flex-shrink: 0;\n        box-sizing: border-box;\n        position: relative;\n        overflow: hidden;\n        background: ").concat(header.backgroundColor || '#7C3AED').concat(important, ";\n        color: ").concat(header.textColor || '#FFFFFF').concat(important, ";\n      }\n      \n      #text-chat-panel .widget-header::before {\n        content: '';\n        position: absolute;\n        top: -50%;\n        right: -20%;\n        width: 180px;\n        height: 180px;\n        background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\n        pointer-events: none;\n      }\n      \n      #text-chat-panel .widget-header > div:first-child {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n        position: relative;\n        z-index: 1;\n      }\n      \n      #text-chat-panel .header-title { font-size: 15px; font-weight: 600; margin: 0; }\n      #text-chat-panel .header-status { display: flex; align-items: center; gap: 5px; font-size: 12px; margin: 0; }\n      #text-chat-panel .status-dot { width: 6px; height: 6px; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }\n      /* Online indicator customization - inline styles take precedence */\n      @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.8; } }\n      /* Header icon buttons */\n      .header-icon {\n        background: rgba(255, 255, 255, 0.1);\n        border: none;\n        color: white;\n        width: 34px;\n        height: 34px;\n        min-width: 34px;\n        min-height: 34px;\n        border-radius: 10px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background 0.2s;\n        flex-shrink: 0;\n        font-size: 16px;\n        padding: 0;\n        box-sizing: border-box;\n        position: relative;\n        z-index: 1;\n      }\n      \n      .header-icon:hover {\n        background: rgba(255, 255, 255, 0.2);\n      }\n      \n      .header-icon svg {\n        pointer-events: none;\n        stroke: white;\n        fill: none;\n      }\n      \n      .back-btn.visible {\n        display: flex !important;\n      }\n\n      ").concat(showLanding && this.landingScreen ? this.landingScreen.generateCSS() : '', "\n\n      ").concat(showVoice ? this.voiceInterface.generateCSS() : '', "\n      ").concat(showText ? this.textInterface.generateCSS() : '', "\n      \n      /* Footer Branding */\n      .widget-footer {\n        box-sizing: border-box;\n      }\n      \n      .footer-brand-link {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      }\n      \n      .footer-brand-link:hover {\n        opacity: 0.9;\n      }\n      \n      @media (max-width: 768px) {\n        .widget-footer {\n          height: 32px;\n        }\n        .widget-footer span {\n          font-size: 10px;\n        }\n        .widget-footer span:last-child {\n          font-size: 8px;\n        }\n      }\n      \n      #text-chat-send-hint {\n        text-align: center;\n        line-height: 1.4;\n      }\n      \n      .agent-thinking {\n        font-style: italic;\n        color: #6B7280;\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;\n      }\n\n      .ttp-mobile-landing {\n        display: none;\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 circle 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;\n          align-items: center;\n          gap: 10px;\n          padding: 10px 16px 10px 12px;\n          background: linear-gradient(135deg, #581c87, ").concat(header.backgroundColor || '#7C3AED', ");\n          border: none;\n          border-radius: 24px;\n          cursor: pointer;\n          box-shadow: 0 8px 24px rgba(88, 28, 135, 0.4);\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n          z-index: 1;\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n          touch-action: manipulation;\n          -webkit-tap-highlight-color: transparent;\n        }\n\n        .ttp-mobile-fab:hover {\n          transform: translateY(-3px);\n          box-shadow: 0 12px 32px rgba(88, 28, 135, 0.5);\n        }\n\n        .ttp-mobile-fab__icon-wrap {\n          width: 36px;\n          height: 36px;\n          border-radius: 50%;\n          background: rgba(255, 255, 255, 0.15);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-shrink: 0;\n        }\n\n        .ttp-mobile-fab__waveform {\n          display: flex;\n          align-items: center;\n          gap: 2px;\n          height: 16px;\n        }\n\n        .ttp-mobile-fab__waveform .bar {\n          width: 2px;\n          background: #fff;\n          border-radius: 1px;\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite;\n        }\n\n        .ttp-mobile-fab__waveform .bar:nth-child(1) { height: 5px; animation-delay: 0s; }\n        .ttp-mobile-fab__waveform .bar:nth-child(2) { height: 10px; animation-delay: 0.1s; }\n        .ttp-mobile-fab__waveform .bar:nth-child(3) { height: 16px; animation-delay: 0.2s; }\n        .ttp-mobile-fab__waveform .bar:nth-child(4) { height: 8px; animation-delay: 0.3s; }\n        .ttp-mobile-fab__waveform .bar:nth-child(5) { height: 12px; animation-delay: 0.4s; }\n\n        .ttp-mobile-fab__label-wrap {\n          display: flex;\n          flex-direction: column;\n          align-items: flex-start;\n          gap: 1px;\n        }\n\n        .ttp-mobile-fab__label {\n          color: #fff;\n          font-size: 14px;\n          font-weight: 600;\n          line-height: 1.2;\n        }\n\n        .ttp-mobile-fab__status {\n          display: flex;\n          align-items: center;\n          gap: 4px;\n          font-size: 11px;\n          color: rgba(255, 255, 255, 0.7);\n          line-height: 1.2;\n        }\n\n        .ttp-mobile-fab__dot {\n          width: 6px;\n          height: 6px;\n          background: ").concat(header.onlineIndicatorDotColor || '#10b981', ";\n          border-radius: 50%;\n          box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);\n        }\n\n        /* ---- Mobile Landing Overlay ---- */\n        .ttp-mobile-landing.active {\n          display: block;\n          position: fixed;\n          bottom: 16px;\n          left: 12px;\n          right: 12px;\n          background: linear-gradient(135deg, #581c87 0%, ").concat(header.backgroundColor || '#7C3AED', " 100%);\n          border-radius: 20px;\n          overflow: hidden;\n          box-shadow:\n            0 10px 40px rgba(88, 28, 135, 0.4),\n            0 0 0 1px rgba(255, 255, 255, 0.1) inset;\n          z-index: 10002;\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n        }\n\n        .ttp-mobile-landing::before {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          height: 1px;\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;\n          display: flex;\n          align-items: center;\n          gap: 12px;\n        }\n\n        .ttp-mobile-landing__avatar {\n          width: 44px;\n          height: 44px;\n          border-radius: 12px;\n          background: rgba(255, 255, 255, 0.15);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-shrink: 0;\n        }\n\n        .ttp-mobile-landing__waveform {\n          display: flex;\n          align-items: center;\n          gap: 3px;\n          height: 20px;\n        }\n\n        .ttp-mobile-landing__waveform .bar {\n          width: 3px;\n          background: rgba(255, 255, 255, 0.9);\n          border-radius: 2px;\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite;\n        }\n\n        .ttp-mobile-landing__waveform .bar:nth-child(1) { height: 6px; animation-delay: 0s; }\n        .ttp-mobile-landing__waveform .bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }\n        .ttp-mobile-landing__waveform .bar:nth-child(3) { height: 20px; animation-delay: 0.2s; }\n        .ttp-mobile-landing__waveform .bar:nth-child(4) { height: 10px; animation-delay: 0.3s; }\n        .ttp-mobile-landing__waveform .bar:nth-child(5) { height: 16px; animation-delay: 0.4s; }\n\n        .ttp-mobile-landing__info {\n          flex: 1;\n          min-width: 0;\n        }\n\n        .ttp-mobile-landing__name {\n          color: #fff;\n          font-size: 15px;\n          font-weight: 600;\n          margin-bottom: 2px;\n        }\n\n        .ttp-mobile-landing__status {\n          color: rgba(255, 255, 255, 0.7);\n          font-size: 12px;\n          display: flex;\n          align-items: center;\n          gap: 5px;\n        }\n\n        .ttp-mobile-landing__dot {\n          width: 6px;\n          height: 6px;\n          background: ").concat(header.onlineIndicatorDotColor || '#10b981', ";\n          border-radius: 50%;\n          animation: ttpPulseAnimation 2s ease-in-out infinite;\n        }\n\n        .ttp-mobile-landing__close {\n          width: 32px;\n          height: 32px;\n          border-radius: 10px;\n          background: rgba(255, 255, 255, 0.1);\n          border: none;\n          color: rgba(255, 255, 255, 0.7);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          cursor: pointer;\n          transition: all 0.2s;\n          flex-shrink: 0;\n        }\n\n        .ttp-mobile-landing__close:hover {\n          background: rgba(255, 255, 255, 0.2);\n          color: #fff;\n        }\n\n        .ttp-mobile-landing__error {\n          margin: 0 14px 10px;\n          padding: 10px 12px;\n          background: #fef2f2;\n          border: 1px solid #fecaca;\n          border-radius: 10px;\n          display: flex;\n          align-items: flex-start;\n          gap: 8px;\n          color: #b91c1c;\n          font-size: 13px;\n          line-height: 1.4;\n        }\n        .ttp-mobile-landing__error svg {\n          flex-shrink: 0;\n          margin-top: 1px;\n          stroke: #dc2626;\n        }\n\n        .ttp-mobile-landing__actions {\n          padding: 0 14px 14px;\n          display: flex;\n          gap: 10px;\n        }\n\n        .ttp-mobile-landing__btn {\n          flex: 1;\n          padding: 14px;\n          border-radius: 12px;\n          border: none;\n          cursor: pointer;\n          font-family: inherit;\n          font-size: 14px;\n          font-weight: 600;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          gap: 10px;\n          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n          touch-action: manipulation;\n          -webkit-tap-highlight-color: transparent;\n        }\n\n        .ttp-mobile-landing__btn svg {\n          width: 20px;\n          height: 20px;\n          flex-shrink: 0;\n        }\n\n        .ttp-mobile-landing__btn--call {\n          background: #fff;\n          color: ").concat(header.backgroundColor || '#7C3AED', ";\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n\n        .ttp-mobile-landing__btn--call:hover {\n          transform: translateY(-2px);\n          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n        }\n\n        .ttp-mobile-landing__btn--text {\n          background: rgba(255, 255, 255, 0.15);\n          color: #fff;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .ttp-mobile-landing__btn--text:hover {\n          background: rgba(255, 255, 255, 0.2);\n          border-color: rgba(255, 255, 255, 0.2);\n        }\n\n        .ttp-mobile-landing__footer {\n          padding: 10px 16px;\n          display: flex;\n          justify-content: center;\n          border-top: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .ttp-mobile-landing__powered {\n          color: rgba(255, 255, 255, 0.4);\n          font-size: 11px;\n          display: flex;\n          align-items: center;\n          gap: 4px;\n        }\n\n        .ttp-mobile-landing__powered svg {\n          width: 10px;\n          height: 10px;\n          color: #f59e0b;\n        }\n\n        .ttp-mobile-landing__powered a {\n          color: rgba(255, 255, 255, 0.6);\n          text-decoration: none;\n        }\n\n        .ttp-mobile-landing__powered a:hover {\n          color: #fff;\n        }\n      }\n    ");
     }
   }, {
     key: "setupWidgetEvents",
@@ -22037,8 +22999,18 @@ var TTPChatWidget = /*#__PURE__*/function () {
           if ((_this6$voiceInterface3 = _this6.voiceInterface) !== null && _this6$voiceInterface3 !== void 0 && _this6$voiceInterface3.isActive) {
             // If call is active, show message inside widget instead of modal
             _this6.showBackButtonWarning();
+          } else if (window.innerWidth <= 768) {
+            // On mobile, close panel and return to FAB
+            var panel = _this6.shadowRoot.getElementById('text-chat-panel');
+            if (panel) {
+              panel.classList.remove('open');
+              _this6.isOpen = false;
+            }
+            var fab = _this6.shadowRoot.querySelector('.ttp-mobile-fab');
+            if (fab) fab.style.display = '';
+            _this6.showLanding();
           } else {
-            // If not active, just show landing
+            // Desktop: show landing inside panel
             _this6.showLanding();
           }
         };
@@ -22047,7 +23019,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         this.landingScreen.setupEventHandlers({
           onSelectVoice: function () {
             var _onSelectVoice = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-              var _this6$voiceInterface4, _this6$voiceInterface8, _this6$shadowRoot, _this6$voiceInterface5, _this6$shadowRoot2, _this6$voiceInterface6, panel, idleState, floatingButton, _this6$voiceInterface7, _this6$voiceInterface9, _this6$voiceInterface1, _this6$config$behavio, _idleState, isDomainError, statusTitle, _this6$voiceInterface0, titleText, domainErrorTitle, _widgetMode, _this6$voiceInterface11, _this6$voiceInterface12, _this6$config$behavio2, _this6$voiceInterface10, _this6$voiceInterface13, _this6$shadowRoot3, existingBar, _floatingButton, _widgetMode2, _t;
+              var _this6$voiceInterface4, _this6$voiceInterface8, _this6$shadowRoot, _this6$voiceInterface5, _this6$shadowRoot2, _this6$shadowRoot3, _this6$voiceInterface6, panel, idleState, floatingButton, mobileFab, _this6$voiceInterface7, _this6$voiceInterface9, _this6$voiceInterface1, _this6$config$behavio, _idleState, isDomainError, statusTitle, _this6$voiceInterface0, titleText, domainErrorTitle, _widgetMode, _this6$voiceInterface11, _this6$voiceInterface12, _this6$config$behavio2, _this6$voiceInterface10, _this6$voiceInterface13, _this6$shadowRoot4, _this6$shadowRoot5, existingBar, _floatingButton, _mobileFab, _widgetMode2, _t;
               return _regenerator().w(function (_context) {
                 while (1) switch (_context.p = _context.n) {
                   case 0:
@@ -22097,6 +23069,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
                     if (floatingButton) {
                       floatingButton.style.display = 'none';
                     }
+                    mobileFab = (_this6$shadowRoot3 = _this6.shadowRoot) === null || _this6$shadowRoot3 === void 0 ? void 0 : _this6$shadowRoot3.querySelector('.ttp-mobile-fab');
+                    if (mobileFab) {
+                      mobileFab.style.display = 'none';
+                    }
                     // Create minimized bar with connecting state
                     if (!((_this6$voiceInterface6 = _this6.voiceInterface) !== null && _this6$voiceInterface6 !== void 0 && _this6$voiceInterface6.createMobileMinimizedBar)) {
                       _context.n = 3;
@@ -22206,10 +23182,14 @@ var TTPChatWidget = /*#__PURE__*/function () {
                         _this6.voiceInterface.removeMobileMinimizedBar();
                       }
                       // Restore floating button if it was hidden
-                      _floatingButton = ((_this6$shadowRoot3 = _this6.shadowRoot) === null || _this6$shadowRoot3 === void 0 ? void 0 : _this6$shadowRoot3.getElementById('text-chat-button')) || document.getElementById('text-chat-button');
+                      _floatingButton = ((_this6$shadowRoot4 = _this6.shadowRoot) === null || _this6$shadowRoot4 === void 0 ? void 0 : _this6$shadowRoot4.getElementById('text-chat-button')) || document.getElementById('text-chat-button');
                       if (_floatingButton) {
                         _floatingButton.style.display = '';
                       }
+                      _mobileFab = (_this6$shadowRoot5 = _this6.shadowRoot) === null || _this6$shadowRoot5 === void 0 ? void 0 : _this6$shadowRoot5.querySelector('.ttp-mobile-fab');
+                      if (_mobileFab) {
+                        _mobileFab.style.display = '';
+                      }
                     }
 
                     // Show user-friendly error message (unless it's a user cancellation)
@@ -22302,6 +23282,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
         }
       }
 
+      // Mobile floating button & landing overlay
+      this.setupMobileWidgetEvents();
+
       // Keyboard navigation
       if (this.config.accessibility.keyboardNavigation) {
         this.setupKeyboardNavigation();
@@ -22385,13 +23368,84 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Hide new chat button on voice interface (not applicable)
       if (newChatBtn) newChatBtn.style.display = 'none';
     }
+  }, {
+    key: "setupMobileWidgetEvents",
+    value: function setupMobileWidgetEvents() {
+      var _this7 = this;
+      if (!this.shadowRoot) return;
+      var mobileFab = this.shadowRoot.querySelector('.ttp-mobile-fab');
+      var mobileLanding = this.shadowRoot.getElementById('ttpMobileLanding');
+      if (!mobileFab || !mobileLanding) return;
+      var closeMobileLanding = function closeMobileLanding() {
+        mobileLanding.classList.remove('active');
+        mobileFab.style.display = '';
+        _this7.isMobileLandingOpen = false;
+      };
+      var openMobileLanding = function openMobileLanding() {
+        if (_this7.config.promptAnimation.hideAfterClick) {
+          _this7.hidePrompt();
+        }
+        // Clear any previous error banner
+        var errorBanner = _this7.shadowRoot.getElementById('ttpMobileLandingError');
+        if (errorBanner) errorBanner.style.display = 'none';
+        mobileFab.style.display = 'none';
+        mobileLanding.classList.add('active');
+        _this7.isMobileLandingOpen = true;
+      };
+      mobileFab.onclick = openMobileLanding;
+      var mobileClose = mobileLanding.querySelector('.ttp-mobile-landing__close');
+      if (mobileClose) {
+        mobileClose.onclick = closeMobileLanding;
+      }
+      var mobileCallBtn = this.shadowRoot.getElementById('ttpMobileCallBtn');
+      if (mobileCallBtn) {
+        mobileCallBtn.onclick = function () {
+          closeMobileLanding();
+          var desktopVoiceCard = _this7.shadowRoot.getElementById('mode-card-voice');
+          if (desktopVoiceCard) {
+            desktopVoiceCard.click();
+          } else {
+            _this7.showVoice();
+          }
+        };
+      }
+      var mobileChatBtn = this.shadowRoot.getElementById('ttpMobileChatBtn');
+      if (mobileChatBtn) {
+        mobileChatBtn.onclick = function () {
+          closeMobileLanding();
+          var panel = _this7.shadowRoot.getElementById('text-chat-panel');
+          if (panel) {
+            panel.classList.add('open');
+            _this7.isOpen = true;
+          }
+          mobileFab.style.display = 'none';
+          _this7.showText();
+        };
+      }
+
+      // Close mobile landing on outside click
+      document.addEventListener('click', function (e) {
+        if (!_this7.isMobileLandingOpen) return;
+        var path = e.composedPath();
+        if (!path.includes(mobileLanding) && !path.includes(mobileFab)) {
+          closeMobileLanding();
+        }
+      });
+
+      // Close mobile landing on Escape
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && _this7.isMobileLandingOpen) {
+          closeMobileLanding();
+        }
+      });
+    }
   }, {
     key: "setupKeyboardNavigation",
     value: function setupKeyboardNavigation() {
-      var _this7 = this;
+      var _this8 = this;
       document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && _this7.isOpen) {
-          _this7.togglePanel();
+        if (e.key === 'Escape' && _this8.isOpen) {
+          _this8.togglePanel();
         }
       });
     }
@@ -22402,7 +23456,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "setupPromptAnimation",
     value: function setupPromptAnimation() {
-      var _this8 = this;
+      var _this9 = this;
       if (!this.shadowRoot) return;
       var promptConfig = this.config.promptAnimation || {};
       // Default to disabled if not specified (enabled === true means explicitly enabled)
@@ -22432,7 +23486,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 () {
-          _this8.hidePrompt();
+          _this9.hidePrompt();
         }, promptConfig.hideAfterSeconds * 1000);
       }
 
@@ -22444,7 +23498,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 = _this8.shadowRoot.getElementById('prompt-pulse-rings');
+          var pulseRings = _this9.shadowRoot.getElementById('prompt-pulse-rings');
           if (pulseRings) pulseRings.style.display = 'none';
 
           // Call original callback if it exists
@@ -22456,7 +23510,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 = _this8.shadowRoot.getElementById('prompt-pulse-rings');
+            var pulseRings = _this9.shadowRoot.getElementById('prompt-pulse-rings');
             if (pulseRings) pulseRings.style.display = 'none';
           });
         }
@@ -22504,7 +23558,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "showPrompt",
     value: function showPrompt() {
-      var _this9 = this;
+      var _this0 = this;
       if (!this.shadowRoot) return;
       var promptConfig = this.config.promptAnimation || {};
       // Default to enabled if not specified
@@ -22524,8 +23578,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 = _this9.shadowRoot.getElementById('prompt-bubble');
-        if (!promptBubble && _this9.shadowRoot !== document) {
+        var promptBubble = _this0.shadowRoot.getElementById('prompt-bubble');
+        if (!promptBubble && _this0.shadowRoot !== document) {
           promptBubble = document.getElementById('prompt-bubble');
         }
         if (promptBubble) {
@@ -22539,8 +23593,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
         // Show pulse rings if enabled
         if (promptConfig.showPulseRings !== false) {
-          var _pulseRings = _this9.shadowRoot.getElementById('prompt-pulse-rings');
-          if (!_pulseRings && _this9.shadowRoot !== document) {
+          var _pulseRings = _this0.shadowRoot.getElementById('prompt-pulse-rings');
+          if (!_pulseRings && _this0.shadowRoot !== document) {
             _pulseRings = document.getElementById('prompt-pulse-rings');
           }
           if (_pulseRings) {
@@ -22577,7 +23631,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         }
         // Start new timer
         this.promptAutoHideTimer = setTimeout(function () {
-          _this9.hidePrompt();
+          _this0.hidePrompt();
         }, promptConfig.hideAfterSeconds * 1000);
       }
     }
@@ -22593,7 +23647,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "_doTogglePanel",
     value: function _doTogglePanel() {
-      var _this0 = this;
+      var _this1 = this;
       if (!this.shadowRoot) return;
       this.isOpen = !this.isOpen;
       var panel = this.shadowRoot.getElementById('text-chat-panel');
@@ -22606,22 +23660,27 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Panel is opening - hide prompt
         this.hidePrompt();
         setTimeout(function () {
-          var input = _this0.shadowRoot.getElementById('messageInput');
+          var input = _this1.shadowRoot.getElementById('messageInput');
           if (input) input.focus();
         }, 100);
       } else {
+        // Panel is closing — restore mobile FAB if on mobile
+        if (window.innerWidth <= 768) {
+          var fab = this.shadowRoot.querySelector('.ttp-mobile-fab');
+          if (fab) fab.style.display = '';
+        }
         // Panel is closing - show prompt (if enabled)
         // Call showPrompt immediately, then also retry after a delay to ensure it's visible
         this.showPrompt();
         setTimeout(function () {
-          var _this0$config$promptA;
+          var _this1$config$promptA;
           // Double-check and ensure prompt is visible
-          var promptBubble = _this0.shadowRoot.getElementById('prompt-bubble');
+          var promptBubble = _this1.shadowRoot.getElementById('prompt-bubble');
           if (promptBubble && promptBubble.style.display === 'none') {
             promptBubble.style.display = 'block';
           }
-          var pulseRings = _this0.shadowRoot.getElementById('prompt-pulse-rings');
-          if (pulseRings && ((_this0$config$promptA = _this0.config.promptAnimation) === null || _this0$config$promptA === void 0 ? void 0 : _this0$config$promptA.showPulseRings) !== false) {
+          var pulseRings = _this1.shadowRoot.getElementById('prompt-pulse-rings');
+          if (pulseRings && ((_this1$config$promptA = _this1.config.promptAnimation) === null || _this1$config$promptA === void 0 ? void 0 : _this1$config$promptA.showPulseRings) !== false) {
             if (pulseRings.style.display === 'none') {
               pulseRings.style.display = 'block';
             }
@@ -22661,13 +23720,14 @@ var TTPChatWidget = /*#__PURE__*/function () {
         padding: '12px 24px',
         borderRadius: '8px',
         boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-        zIndex: '10000',
+        zIndex: '10003',
         fontSize: '14px',
         fontWeight: '500',
         maxWidth: '90%',
         textAlign: 'center',
         animation: 'slideUp 0.3s ease-out',
-        fontFamily: 'inherit'
+        fontFamily: 'inherit',
+        pointerEvents: 'auto'
       });
 
       // Add CSS animation if not already added
@@ -22692,6 +23752,25 @@ var TTPChatWidget = /*#__PURE__*/function () {
         }, 300);
       }, 4000);
     }
+  }, {
+    key: "showMobileLandingError",
+    value: function showMobileLandingError(message) {
+      if (!this.shadowRoot) return;
+      var mobileLanding = this.shadowRoot.getElementById('ttpMobileLanding');
+      var mobileFab = this.shadowRoot.querySelector('.ttp-mobile-fab');
+      var errorBanner = this.shadowRoot.getElementById('ttpMobileLandingError');
+      if (!mobileLanding || !errorBanner) return;
+
+      // Set error text
+      var errorText = errorBanner.querySelector('.ttp-mobile-landing__error-text');
+      if (errorText) errorText.textContent = message;
+      errorBanner.style.display = 'flex';
+
+      // Show the mobile landing overlay with the error
+      mobileLanding.classList.add('active');
+      if (mobileFab) mobileFab.style.display = 'none';
+      this.isMobileLandingOpen = true;
+    }
 
     /**
      * Show confirmation modal (reusing modal pattern)
@@ -23366,12 +24445,12 @@ var TTPChatWidget = /*#__PURE__*/function () {
     key: "_flushPendingClientTools",
     value: function _flushPendingClientTools() {
       var _this$voiceInterface1,
-        _this1 = this;
+        _this10 = this;
       if (this._pendingClientTools && (_this$voiceInterface1 = this.voiceInterface) !== null && _this$voiceInterface1 !== void 0 && _this$voiceInterface1.sdk) {
         this._pendingClientTools.forEach(function (_ref2) {
           var name = _ref2.name,
             handler = _ref2.handler;
-          _this1.voiceInterface.sdk.registerToolHandler(name, handler);
+          _this10.voiceInterface.sdk.registerToolHandler(name, handler);
         });
         this._pendingClientTools = null;
         console.log('TTPChatWidget: Flushed pending client tools');
@@ -24211,6 +25290,18 @@ var VoiceInterface = /*#__PURE__*/function () {
           return _ref2.apply(this, arguments);
         };
       }();
+
+      // Handle e-commerce actions received on a non-ecommerce widget
+      this.sdk.onUnsupportedAction = function (actionType) {
+        console.warn("\u26A0\uFE0F Received \"".concat(actionType, "\" but this is not an E-Commerce widget. Use TTPEcommerceWidget instead."));
+        var msg = 'This widget does not support e-commerce features. Please use TTPEcommerceWidget to display products.';
+        if (_this.config.onErrorToast) {
+          _this.config.onErrorToast(msg, 'warning');
+        }
+        if (_this.isMobile && _this.config.onMobileError) {
+          _this.config.onMobileError(msg);
+        }
+      };
     }
 
     /**
@@ -24463,7 +25554,7 @@ var VoiceInterface = /*#__PURE__*/function () {
     value: (function () {
       var _startVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
         var _this2 = this;
-        var permissionState, deviceInfo;
+        var permissionState, deviceInfo, idleState, activeState;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.n) {
             case 0:
@@ -24506,14 +25597,19 @@ var VoiceInterface = /*#__PURE__*/function () {
                 _context4.n = 4;
                 break;
               }
-              console.log('📋 Permission is in prompt state, showing pre-prompt modal...');
+              console.log('📋 Permission is in prompt state, showing pre-prompt modal with call view...');
+
+              // Switch UI to active call view so it's visible behind the modal
+              idleState = this.shadowRoot.getElementById('voiceIdleState');
+              activeState = this.shadowRoot.getElementById('voiceActiveState');
+              if (idleState) idleState.style.display = 'none';
+              if (activeState) activeState.style.display = 'flex';
               return _context4.a(2, new Promise(function (resolve, reject) {
                 (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_2__.showPrePromptModal)(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
                   var _t;
                   return _regenerator().w(function (_context3) {
                     while (1) switch (_context3.p = _context3.n) {
                       case 0:
-                        // User accepted pre-prompt - proceed with voice call
                         console.log('✅ Pre-prompt accepted, proceeding with voice call...');
                         _context3.p = 1;
                         _context3.n = 2;
@@ -24531,10 +25627,11 @@ var VoiceInterface = /*#__PURE__*/function () {
                     }
                   }, _callee3, null, [[1, 3]]);
                 })), function () {
-                  // User cancelled pre-prompt - reset connecting state
                   console.log('❌ Pre-prompt cancelled');
+                  // Revert UI back to idle state
+                  if (idleState) idleState.style.display = 'flex';
+                  if (activeState) activeState.style.display = 'none';
                   _this2.resetConnectingState();
-                  // Reject so caller knows call was cancelled
                   reject(new Error('Call cancelled by user'));
                 });
               }));
@@ -24560,7 +25657,7 @@ var VoiceInterface = /*#__PURE__*/function () {
     value: (function () {
       var _proceedWithVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
         var _this3 = this;
-        var isResumeCall, panel, header, toggleText, _voiceInterface, originalSection, compactSection, idleState, _panel, fallbackPanel, sampleRate, mediaStream, floatingButton, fallbackButton, existingBar, _floatingButton, _fallbackButton, _idleState, _panel2, _fallbackPanel, deviceInfo, _idleState2, activeState, voiceInterface, connected, serverRejected, originalOnError, originalOnDisconnected, attempts, _this$sdk$voiceSDK, error, _existingBar, _existingBar2, _idleState3, _panel3, _fallbackPanel2, _floatingButton2, _fallbackButton2, updateTimer, _existingBar3, _existingBar4, _idleState4, _panel4, _fallbackPanel3, _floatingButton3, _fallbackButton3, _updateTimer, _deviceInfo, _t2, _t3, _t4, _t5, _t6, _t7;
+        var isResumeCall, panel, header, toggleText, _voiceInterface, originalSection, compactSection, idleState, _panel, fallbackPanel, sampleRate, mediaStream, floatingButton, fallbackButton, mobileFabGrant, existingBar, _floatingButton, _fallbackButton, mobileFabDeny, _idleState, _panel2, _fallbackPanel, deviceInfo, _idleState2, activeState, voiceInterface, connected, serverRejected, originalOnError, originalOnDisconnected, attempts, _this$sdk$voiceSDK, error, _existingBar, _existingBar2, _idleState3, _panel3, _fallbackPanel2, _floatingButton2, _fallbackButton2, updateTimer, _existingBar3, _existingBar4, _idleState4, _panel4, _fallbackPanel3, _floatingButton3, _fallbackButton3, _updateTimer, _deviceInfo, _t2, _t3, _t4, _t5, _t6, _t7;
         return _regenerator().w(function (_context5) {
           while (1) switch (_context5.p = _context5.n) {
             case 0:
@@ -24667,6 +25764,8 @@ var VoiceInterface = /*#__PURE__*/function () {
                   console.log('✅ Floating button hidden (permission granted, fallback)');
                 }
               }
+              mobileFabGrant = this.shadowRoot.querySelector('.ttp-mobile-fab');
+              if (mobileFabGrant) mobileFabGrant.style.display = 'none';
               _context5.n = 4;
               break;
             case 3:
@@ -24692,6 +25791,8 @@ var VoiceInterface = /*#__PURE__*/function () {
                   _fallbackButton.style.display = '';
                 }
               }
+              mobileFabDeny = this.shadowRoot.querySelector('.ttp-mobile-fab');
+              if (mobileFabDeny) mobileFabDeny.style.display = '';
               _idleState = this.shadowRoot.getElementById('voiceIdleState');
               if (_idleState) {
                 _idleState.style.display = 'flex';
@@ -25262,7 +26363,7 @@ var VoiceInterface = /*#__PURE__*/function () {
     key: "endCallOnServerRejection",
     value: (function () {
       var _endCallOnServerRejection = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
-        var voiceInterfaceEl, landingScreen, _this$sdk$voiceSDK2, _this$sdk$voiceSDK3, audioRecorder, isRecording, _this$sdk$voiceSDK4, activeState, idleState, panel, fallbackPanel, floatingButton, fallbackButton, _t8, _t9, _t0, _t1, _t10;
+        var voiceInterfaceEl, landingScreen, _this$sdk$voiceSDK2, _this$sdk$voiceSDK3, audioRecorder, isRecording, _this$sdk$voiceSDK4, activeState, idleState, panel, fallbackPanel, floatingButton, fallbackButton, mobileFabEnd, errorMsg, _t8, _t9, _t0, _t1, _t10;
         return _regenerator().w(function (_context6) {
           while (1) switch (_context6.p = _context6.n) {
             case 0:
@@ -25475,7 +26576,7 @@ var VoiceInterface = /*#__PURE__*/function () {
                 console.log('🚫 showDomainError() completed, isShowingDomainError:', this.isShowingDomainError);
               }
 
-              // Mobile: restore panel visibility
+              // Mobile: restore panel visibility and show error toast
               if (this.isMobile) {
                 panel = this.shadowRoot.getElementById('text-chat-panel');
                 if (panel) {
@@ -25497,10 +26598,20 @@ var VoiceInterface = /*#__PURE__*/function () {
                     fallbackButton.style.display = '';
                   }
                 }
+                mobileFabEnd = this.shadowRoot.querySelector('.ttp-mobile-fab');
+                if (mobileFabEnd) mobileFabEnd.style.display = '';
 
                 // Remove mobile minimized bar if it exists
                 this.removeMobileMinimizedBar();
                 this.stopWaveformAnimation();
+
+                // Show error in mobile landing overlay since the panel isn't visible
+                errorMsg = this.t('domainNotValidated') || 'Domain not whitelisted. Please contact support.';
+                if (this.config.onMobileError) {
+                  this.config.onMobileError(errorMsg);
+                } else if (this.config.onErrorToast) {
+                  this.config.onErrorToast(errorMsg, 'error');
+                }
               }
             case 23:
               return _context6.a(2);
@@ -25640,13 +26751,15 @@ var VoiceInterface = /*#__PURE__*/function () {
         this.removeMobileMinimizedBar();
         this.messages = [];
 
-        // Show widget panel again (restore it)
-        // Restore widget panel (use shadowRoot if in Shadow DOM)
+        // Restore mobile FAB visibility (it was hidden when call started)
+        var mobileFab = this.shadowRoot.querySelector('.ttp-mobile-fab');
+        if (mobileFab) mobileFab.style.display = '';
+
+        // Restore widget panel (remove inline display:none)
         var panel = this.shadowRoot.getElementById('text-chat-panel');
         if (panel) {
-          panel.style.display = ''; // Remove inline display:none
+          panel.style.display = '';
         } else {
-          // Fallback: try document if not in Shadow DOM
           var fallbackPanel = document.getElementById('text-chat-panel');
           if (fallbackPanel) {
             fallbackPanel.style.display = '';
@@ -27055,7 +28168,7 @@ var Mobile = /*#__PURE__*/function () {
       container.id = 'mobile-voice-call-bar-container';
       container.innerHTML = "\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\">".concat(this.t('listening'), "</span>\n          </div>\n          \n          <!-- Centered Waveform -->\n          <div class=\"mobile-waveform-center\" id=\"mobileWaveform\">\n            ").concat(Array(8).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 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=\"#ef4444\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-off-icon\" style=\"display: none;\">\n                <line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/>\n                <path d=\"M18.89 13.23A7.12 7.12 0 0 0 19 12v-2\"/>\n                <path d=\"M5 10v2a7 7 0 0 0 12 5\"/>\n                <path d=\"M15 9.34V5a3 3 0 0 0-5.68-1.33\"/>\n                <path d=\"M9 9v3a3 3 0 0 0 5.12 2.12\"/>\n                <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n              </svg>\n            </button>\n            \n            <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=\"#ef4444\" 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                <line x1=\"22\" x2=\"16\" y1=\"9\" y2=\"15\"/>\n                <line x1=\"16\" x2=\"22\" y1=\"9\" y2=\"15\"/>\n              </svg>\n            </button>\n            \n            <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 class=\"mobile-transcript-row\" id=\"mobileTranscriptRow\">\n          <p class=\"mobile-transcript-text\" id=\"mobileTranscriptText\">").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      \n      <!-- Expanded Transcript Overlay -->\n      <div class=\"mobile-transcript-overlay\" id=\"mobileTranscriptOverlay\" style=\"display: none;\">\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\">").concat(this.t('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 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              />\n              <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 ").concat(this.t('voiceActive') || 'Voice is still active', " \u2022 ").concat(this.t('typeOrSpeak') || 'Type or speak', "</p>\n          </div>\n        </div>\n      </div>\n    ");
+      }).join(''), "\n          </div>\n          \n          <!-- Controls -->\n          <div class=\"mobile-controls\">\n            <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=\"#ef4444\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-off-icon\" style=\"display: none;\">\n                <line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/>\n                <path d=\"M18.89 13.23A7.12 7.12 0 0 0 19 12v-2\"/>\n                <path d=\"M5 10v2a7 7 0 0 0 12 5\"/>\n                <path d=\"M15 9.34V5a3 3 0 0 0-5.68-1.33\"/>\n                <path d=\"M9 9v3a3 3 0 0 0 5.12 2.12\"/>\n                <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n              </svg>\n            </button>\n            \n            <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=\"#ef4444\" 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                <line x1=\"22\" x2=\"16\" y1=\"9\" y2=\"15\"/>\n                <line x1=\"16\" x2=\"22\" y1=\"9\" y2=\"15\"/>\n              </svg>\n            </button>\n            \n            <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 class=\"mobile-transcript-row\" id=\"mobileTranscriptRow\">\n          <p class=\"mobile-transcript-text\" id=\"mobileTranscriptText\">").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\n        <!-- Cart Row - shown when items are in cart -->\n        <div class=\"mobile-cart-row\" id=\"mobileCartRow\" style=\"display: none;\">\n          <div class=\"mobile-cart-row__content\">\n            <span class=\"mobile-cart-row__icon\">\uD83D\uDED2</span>\n            <span class=\"mobile-cart-row__text\" id=\"mobileCartText\">0 items \xB7 \u20AA0.00</span>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Expanded Transcript Overlay -->\n      <div class=\"mobile-transcript-overlay\" id=\"mobileTranscriptOverlay\" style=\"display: none;\">\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\">").concat(this.t('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 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              />\n              <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 ").concat(this.t('voiceActive') || 'Voice is still active', " \u2022 ").concat(this.t('typeOrSpeak') || 'Type or speak', "</p>\n          </div>\n        </div>\n      </div>\n    ");
 
       // Append to body
       document.body.appendChild(container);
@@ -27354,7 +28467,7 @@ var Styles = /*#__PURE__*/function () {
   }, {
     key: "_getSharedMobileCSS",
     value: function _getSharedMobileCSS(important) {
-      return "\n      .mobile-duration-dot {\ndisplay: block !important;\n                width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background-color: #ef4444;\n        animation: mobilePulse 1.5s ease-in-out infinite;\n      }\n\n      @keyframes mobilePulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.5; transform: scale(0.95); }\n      }\n\n      .mobile-voice-bar {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        padding: 14px;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);\n        border-radius: 24px 24px 0 0;\n        box-shadow: 0 -8px 32px rgba(124, 58, 237, 0.5), 0 -2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);\n        width: 100%;\n        max-width: 100%;\n        pointer-events: auto;\n      }\n\n      .mobile-top-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        position: relative;\n      }\n\n      .mobile-status-indicator {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        min-width: 85px;\n      }\n\n      .mobile-status-dot {\ndisplay: block !important;\n                width: 7px;\n        height: 7px;\n        border-radius: 50%;\n        background-color: #22c55e;\n        box-shadow: 0 0 8px #22c55e;\n        transition: all 0.3s ease;\n      }\n\n      .mobile-status-text {\n        font-size: 11px;\n        font-weight: 700;\n        color: rgba(255,255,255,0.95);\n        text-transform: uppercase;\n        letter-spacing: 0.3px;\n      }\n\n      .mobile-waveform-center {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        height: 24px;\n      }\n\n      .mobile-waveform-bar {\ndisplay: block !important;\n                width: 4px;\n        height: 4px;\n        background-color: #fff;\n        border-radius: 2px;\n        transition: height 0.15s ease;\n        box-shadow: 0 0 8px rgba(255,255,255,0.5);\n      }\n\n      .mobile-controls {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .mobile-control-btn {\n        display: flex".concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        min-width: 32px").concat(important, ";\n        min-height: 32px").concat(important, ";\n        max-width: 32px").concat(important, ";\n        max-height: 32px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: all 0.2s ease;\n        background-color: rgba(255,255,255,0.15)").concat(important, ";\n        position: relative").concat(important, ";\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-control-btn:hover {\n        background-color: rgba(255,255,255,0.25)").concat(important, ";\n      }\n\n      .mobile-control-btn.muted {\n        background-color: rgba(239, 68, 68, 0.3)").concat(important, ";\n      }\n\n      .mobile-control-btn svg {\n        position: absolute").concat(important, ";\n        top: 50%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n\n      .mobile-mic-off-icon,\n      .mobile-speaker-off-icon {\n        display: none !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-icon,\n      .mobile-control-btn.muted .mobile-speaker-icon {\n        display: none !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-off-icon,\n      .mobile-control-btn.muted .mobile-speaker-off-icon {\n        display: block !important;\n      }\n\n      .mobile-end-call-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 36px").concat(important, ";\n        height: 36px").concat(important, ";\n        min-width: 36px").concat(important, ";\n        min-height: 36px").concat(important, ";\n        max-width: 36px").concat(important, ";\n        max-height: 36px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        background-color: #ef4444").concat(important, ";\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);\n        transition: all 0.2s ease;\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-end-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n\n      /* ID-specific selectors for WordPress compatibility */\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn,\n      #mobileEndCallBtn.mobile-end-call-btn {\n        border-radius: 50% !important;\n        overflow: hidden !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn {\n        width: 32px !important;\n        height: 32px !important;\n        min-width: 32px !important;\n        min-height: 32px !important;\n        max-width: 32px !important;\n        max-height: 32px !important;\n      }\n\n      #mobileEndCallBtn.mobile-end-call-btn {\n        width: 36px !important;\n        height: 36px !important;\n        min-width: 36px !important;\n        min-height: 36px !important;\n        max-width: 36px !important;\n        max-height: 36px !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn svg,\n      #mobileSpeakerBtn.mobile-control-btn svg,\n      #mobileEndCallBtn.mobile-end-call-btn svg {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n        width: 15px !important;\n        height: 15px !important;\n        margin: 0 !important;\n        padding: 0 !important;\n      }\n\n      .mobile-end-call-btn:hover {\n        transform: scale(1.05);\n      }\n\n      .mobile-transcript-row {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        padding: 10px 12px;\n        background: rgba(255,255,255,0.18);\n        border-radius: 14px;\n        border: none;\n        cursor: pointer;\n        text-align: left;\n        backdrop-filter: blur(4px);\n        transition: background 0.2s ease;\n      }\n\n      .mobile-transcript-row:hover {\n        background: rgba(255,255,255,0.25);\n      }\n\n      .mobile-transcript-text {\n        margin: 0;\n        font-size: 13px;\n        color: #fff;\n        line-height: 1.4;\n        font-weight: 500;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      .mobile-transcript-footer {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .mobile-expand-hint {\n        font-size: 10px;\n        color: rgba(255,255,255,0.6);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        font-weight: 600;\n      }\n\n      .mobile-transcript-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: rgba(0,0,0,0.6);\n        display: flex;\n        align-items: flex-end;\n        padding: 12px;\n        z-index: 100000;\n        pointer-events: auto;\n      }\n\n      .mobile-expanded-transcript {\n        width: 100%;\n        max-height: 75%;\n        background: #fff;\n        border-radius: 24px 24px 16px 16px;\n        overflow: hidden;\n        box-shadow: 0 -8px 40px rgba(0,0,0,0.3);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .mobile-transcript-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 14px 16px;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        flex-shrink: 0;\n      }\n\n      .mobile-header-left {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .mobile-header-status {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .mobile-header-status-dot {\ndisplay: block !important;\n                width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background-color: #22c55e;\n        box-shadow: 0 0 6px #22c55e;\n      }\n\n      .mobile-header-status-text {\n        font-size: 10px;\n        font-weight: 700;\n        color: rgba(255,255,255,0.9);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n      }\n\n      .mobile-header-duration {\n        font-size: 10px;\n        font-weight: 600;\n        color: rgba(255,255,255,0.7);\n        margin-left: 8px;\n      }\n\n      .mobile-transcript-label {\n        font-size: 11px;\n        font-weight: 800;\n        color: rgba(255,255,255,0.7);\n        letter-spacing: 1px;\n      }\n\n      .mobile-close-transcript-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        border: none;\n        background: rgba(255,255,255,0.2);\n        color: #fff;\n        cursor: pointer;\n      }\n\n      .mobile-close-transcript-btn:hover {\n        background: rgba(255,255,255,0.3);\n      }\n\n      .mobile-messages-container {\n        flex: 1;\n        padding: 16px;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .mobile-message-bubble {\n        max-width: 85%;\n        padding: 12px 16px;\n        border-radius: 18px;\n        font-size: 14px;\n        line-height: 1.5;\n        word-wrap: break-word;\n      }\n\n      .mobile-message-bubble.assistant {\n        align-self: flex-start;\n        background-color: #f3f4f6;\n        color: #374151;\n        border-bottom-left-radius: 4px;\n      }\n\n      .mobile-message-bubble.user {\n        align-self: flex-end;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n\n      .mobile-input-area {\n        padding: 12px 16px 16px;\n        border-top: 1px solid #e5e7eb;\n        background: #f9fafb;\n        flex-shrink: 0;\n      }\n\n      .mobile-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 4px 4px 4px 16px;\n        background: #fff;\n        border-radius: 24px;\n        border: 2px solid #e5e7eb;\n      }\n\n      .mobile-text-input {\n        flex: 1;\n        border: none;\n        outline: none;\n        font-size: 14px;\n        color: #374151;\n        background: transparent;\n        padding: 10px 0;\n      }\n\n      .mobile-text-input::placeholder {\n        color: #9ca3af;\n      }\n\n      .mobile-send-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        border: none;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        cursor: pointer;\n        transition: all 0.2s ease;\n      }\n\n      .mobile-send-btn:hover:not(:disabled) {\n        transform: scale(1.05);\n      }\n\n      .mobile-send-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      .mobile-input-hint {\n        margin: 8px 0 0;\n        font-size: 11px;\n        color: #9ca3af;\n        text-align: center;\n        transition: color 0.2s ease;\n      }\n\n      /* Mobile text input status states */\n      .mobile-input-hint--sending {\n        color: #666;\n      }\n\n      .mobile-input-hint--success {\n        color: #28a745;\n      }\n\n      .mobile-input-hint--queued {\n        color: #ffc107;\n      }\n\n      .mobile-input-hint--error {\n        color: #dc3545;\n      }\n\n      /* Disabled mobile input styling */\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5;\n        cursor: not-allowed;\n      }\n\n      #mobileSendBtn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    ");
+      return "\n      .mobile-duration-dot {\ndisplay: block !important;\n                width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background-color: #ef4444;\n        animation: mobilePulse 1.5s ease-in-out infinite;\n      }\n\n      @keyframes mobilePulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.5; transform: scale(0.95); }\n      }\n\n      .mobile-voice-bar {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        padding: 14px;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);\n        border-radius: 24px 24px 0 0;\n        box-shadow: 0 -8px 32px rgba(124, 58, 237, 0.5), 0 -2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);\n        width: 100% !important;\n        max-width: 100% !important;\n        pointer-events: auto;\n        overflow: hidden !important;\n        margin: 0 !important;\n      }\n\n      .mobile-top-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        position: relative;\n      }\n\n      .mobile-status-indicator {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        min-width: 85px;\n      }\n\n      .mobile-status-dot {\ndisplay: block !important;\n                width: 7px;\n        height: 7px;\n        border-radius: 50%;\n        background-color: #22c55e;\n        box-shadow: 0 0 8px #22c55e;\n        transition: all 0.3s ease;\n      }\n\n      .mobile-status-text {\n        font-size: 11px;\n        font-weight: 700;\n        color: rgba(255,255,255,0.95);\n        text-transform: uppercase;\n        letter-spacing: 0.3px;\n      }\n\n      .mobile-waveform-center {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        height: 24px;\n      }\n\n      .mobile-waveform-bar {\ndisplay: block !important;\n                width: 4px;\n        height: 4px;\n        background-color: #fff;\n        border-radius: 2px;\n        transition: height 0.15s ease;\n        box-shadow: 0 0 8px rgba(255,255,255,0.5);\n      }\n\n      .mobile-controls {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .mobile-control-btn {\n        display: flex".concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        min-width: 32px").concat(important, ";\n        min-height: 32px").concat(important, ";\n        max-width: 32px").concat(important, ";\n        max-height: 32px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: all 0.2s ease;\n        background-color: rgba(255,255,255,0.15)").concat(important, ";\n        position: relative").concat(important, ";\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-control-btn:hover {\n        background-color: rgba(255,255,255,0.25)").concat(important, ";\n      }\n\n      .mobile-control-btn.muted {\n        background-color: rgba(239, 68, 68, 0.3)").concat(important, ";\n      }\n\n      .mobile-control-btn svg {\n        position: absolute").concat(important, ";\n        top: 50%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n\n      .mobile-mic-off-icon,\n      .mobile-speaker-off-icon {\n        display: none !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-icon,\n      .mobile-control-btn.muted .mobile-speaker-icon {\n        display: none !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-off-icon,\n      .mobile-control-btn.muted .mobile-speaker-off-icon {\n        display: block !important;\n      }\n\n      .mobile-end-call-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 36px").concat(important, ";\n        height: 36px").concat(important, ";\n        min-width: 36px").concat(important, ";\n        min-height: 36px").concat(important, ";\n        max-width: 36px").concat(important, ";\n        max-height: 36px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        background-color: #ef4444").concat(important, ";\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);\n        transition: all 0.2s ease;\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-end-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n\n      /* ID-specific selectors for WordPress compatibility */\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn,\n      #mobileEndCallBtn.mobile-end-call-btn {\n        border-radius: 50% !important;\n        overflow: hidden !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn {\n        width: 32px !important;\n        height: 32px !important;\n        min-width: 32px !important;\n        min-height: 32px !important;\n        max-width: 32px !important;\n        max-height: 32px !important;\n      }\n\n      #mobileEndCallBtn.mobile-end-call-btn {\n        width: 36px !important;\n        height: 36px !important;\n        min-width: 36px !important;\n        min-height: 36px !important;\n        max-width: 36px !important;\n        max-height: 36px !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn svg,\n      #mobileSpeakerBtn.mobile-control-btn svg,\n      #mobileEndCallBtn.mobile-end-call-btn svg {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n        width: 15px !important;\n        height: 15px !important;\n        margin: 0 !important;\n        padding: 0 !important;\n      }\n\n      .mobile-end-call-btn:hover {\n        transform: scale(1.05);\n      }\n\n      .mobile-transcript-row {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        padding: 10px 12px;\n        background: rgba(255,255,255,0.18);\n        border-radius: 14px;\n        border: none;\n        cursor: pointer;\n        text-align: left;\n        backdrop-filter: blur(4px);\n        transition: background 0.2s ease;\n      }\n\n      .mobile-transcript-row:hover {\n        background: rgba(255,255,255,0.25);\n      }\n\n      .mobile-transcript-text {\n        margin: 0;\n        font-size: 13px;\n        color: #fff;\n        line-height: 1.4;\n        font-weight: 500;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      .mobile-transcript-footer {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .mobile-expand-hint {\n        font-size: 10px;\n        color: rgba(255,255,255,0.6);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        font-weight: 600;\n      }\n\n      .mobile-transcript-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: rgba(0,0,0,0.6);\n        display: flex;\n        align-items: flex-end;\n        padding: 12px;\n        z-index: 100000;\n        pointer-events: auto;\n      }\n\n      .mobile-expanded-transcript {\n        width: 100%;\n        max-height: 75%;\n        background: #fff;\n        border-radius: 24px 24px 16px 16px;\n        overflow: hidden;\n        box-shadow: 0 -8px 40px rgba(0,0,0,0.3);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .mobile-transcript-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 14px 16px;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        flex-shrink: 0;\n      }\n\n      .mobile-header-left {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .mobile-header-status {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .mobile-header-status-dot {\ndisplay: block !important;\n                width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background-color: #22c55e;\n        box-shadow: 0 0 6px #22c55e;\n      }\n\n      .mobile-header-status-text {\n        font-size: 10px;\n        font-weight: 700;\n        color: rgba(255,255,255,0.9);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n      }\n\n      .mobile-header-duration {\n        font-size: 10px;\n        font-weight: 600;\n        color: rgba(255,255,255,0.7);\n        margin-left: 8px;\n      }\n\n      .mobile-transcript-label {\n        font-size: 11px;\n        font-weight: 800;\n        color: rgba(255,255,255,0.7);\n        letter-spacing: 1px;\n      }\n\n      .mobile-close-transcript-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        border: none;\n        background: rgba(255,255,255,0.2);\n        color: #fff;\n        cursor: pointer;\n      }\n\n      .mobile-close-transcript-btn:hover {\n        background: rgba(255,255,255,0.3);\n      }\n\n      .mobile-messages-container {\n        flex: 1;\n        padding: 16px;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .mobile-message-bubble {\n        max-width: 85%;\n        padding: 12px 16px;\n        border-radius: 18px;\n        font-size: 14px;\n        line-height: 1.5;\n        word-wrap: break-word;\n      }\n\n      .mobile-message-bubble.assistant {\n        align-self: flex-start;\n        background-color: #f3f4f6;\n        color: #374151;\n        border-bottom-left-radius: 4px;\n      }\n\n      .mobile-message-bubble.user {\n        align-self: flex-end;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n\n      .mobile-input-area {\n        padding: 12px 16px 16px;\n        border-top: 1px solid #e5e7eb;\n        background: #f9fafb;\n        flex-shrink: 0;\n      }\n\n      .mobile-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 4px 4px 4px 16px;\n        background: #fff;\n        border-radius: 24px;\n        border: 2px solid #e5e7eb;\n      }\n\n      .mobile-text-input {\n        flex: 1;\n        border: none;\n        outline: none;\n        font-size: 14px;\n        color: #374151;\n        background: transparent;\n        padding: 10px 0;\n      }\n\n      .mobile-text-input::placeholder {\n        color: #9ca3af;\n      }\n\n      .mobile-send-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        border: none;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        cursor: pointer;\n        transition: all 0.2s ease;\n      }\n\n      .mobile-send-btn:hover:not(:disabled) {\n        transform: scale(1.05);\n      }\n\n      .mobile-send-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      .mobile-input-hint {\n        margin: 8px 0 0;\n        font-size: 11px;\n        color: #9ca3af;\n        text-align: center;\n        transition: color 0.2s ease;\n      }\n\n      /* Mobile text input status states */\n      .mobile-input-hint--sending {\n        color: #666;\n      }\n\n      .mobile-input-hint--success {\n        color: #28a745;\n      }\n\n      .mobile-input-hint--queued {\n        color: #ffc107;\n      }\n\n      .mobile-input-hint--error {\n        color: #dc3545;\n      }\n\n      /* Disabled mobile input styling */\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5;\n        cursor: not-allowed;\n      }\n\n      #mobileSendBtn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    ");
     }
 
     /**
@@ -27364,7 +28477,7 @@ var Styles = /*#__PURE__*/function () {
     key: "generateMobileCSS",
     value: function generateMobileCSS() {
       var important = this.config.useShadowDOM === false ? ' !important' : '';
-      return "\n      /* Mobile Voice Call UI - Container positioning */\n      #mobile-voice-call-bar-container {\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 99999;\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n        padding: 0 12px 12px;\n        pointer-events: none;\n      }\n\n      .mobile-duration-badge {\n        position: absolute;\n        top: -28px;\n        left: 50%;\n        transform: translateX(-50%);\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 5px 14px;\n        background: rgba(0,0,0,0.75);\n        border-radius: 20px;\n        font-size: 12px;\n        font-weight: 700;\n        color: #fff;\n        backdrop-filter: blur(8px);\n        z-index: 10;\n        pointer-events: auto;\n      }\n\n      /* Shared mobile styles */\n      ".concat(this._getSharedMobileCSS(important), "\n    ");
+      return "\n      /* Mobile Voice Call UI - Container positioning */\n      #mobile-voice-call-bar-container {\n        position: fixed !important;\n        bottom: 0 !important;\n        left: 0 !important;\n        right: 0 !important;\n        z-index: 99999 !important;\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;\n        padding: 0 12px 12px !important;\n        pointer-events: none;\n        box-sizing: border-box !important;\n        width: 100% !important;\n        max-width: 100vw !important;\n        margin: 0 !important;\n        overflow: visible !important;\n      }\n\n      #mobile-voice-call-bar-container *,\n      #mobile-voice-call-bar-container *::before,\n      #mobile-voice-call-bar-container *::after {\n        box-sizing: border-box !important;\n      }\n\n      .mobile-duration-badge {\n        position: absolute;\n        top: -28px;\n        left: 50%;\n        transform: translateX(-50%);\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 5px 14px;\n        background: rgba(0,0,0,0.75);\n        border-radius: 20px;\n        font-size: 12px;\n        font-weight: 700;\n        color: #fff;\n        backdrop-filter: blur(8px);\n        z-index: 10;\n        pointer-events: auto;\n      }\n\n      /* \u2500\u2500 Mobile Cart Row \u2500\u2500 */\n\n      .mobile-cart-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 7px 16px;\n        background: rgba(255, 255, 255, 0.08);\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\n        border-radius: 0 0 16px 16px;\n        animation: mobileCartRowIn 0.25s ease-out;\n        pointer-events: auto;\n      }\n\n      @keyframes mobileCartRowIn {\n        from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }\n        to   { opacity: 1; max-height: 50px; padding-top: 7px; padding-bottom: 7px; }\n      }\n\n      .mobile-cart-row__content {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .mobile-cart-row__icon {\n        font-size: 13px;\n      }\n\n      .mobile-cart-row__text {\n        font-size: 12px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.9);\n        letter-spacing: 0.2px;\n      }\n\n      /* Shared mobile styles */\n      ".concat(this._getSharedMobileCSS(important), "\n    ");
     }
   }]);
 }();
@@ -27692,6 +28805,14 @@ var TextHandlers = /*#__PURE__*/function () {
       input.value = '';
       if (sendBtn) sendBtn.disabled = true;
 
+      // Stop any currently playing audio and clear the queue before sending
+      try {
+        var voiceSDK = this.voiceInterface.sdk.voiceSDK;
+        if (voiceSDK !== null && voiceSDK !== void 0 && voiceSDK.stopAudioPlayback) {
+          voiceSDK.stopAudioPlayback();
+        }
+      } catch (e) {/* best-effort */}
+
       // Show sending status
       this.showTextInputStatus(isMobile ? 'mobile' : 'desktop', 'sending', 'Sending...');