ttp-agent-sdk 2.36.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");
     }
@@ -10590,17 +10751,18 @@ var EcommerceManager = /*#__PURE__*/function () {
   }, {
     key: "_handleAdd",
     value: function _handleAdd(product) {
-      var _this2 = this;
+      var _this3 = this;
       var price = product.price || 0;
       var qty = product.selectedAmount || 1;
-      this.cartSummary.update(this.cartSummary.itemCount + 1, this.cartSummary.total + price * qty);
+      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 () {
-        _this2.productPicker.hide();
-        _this2._shrinkPanel();
-        _this2._restoreFullVoiceMode();
-        _this2._setContainerMode('summary');
+        _this3.productPicker.hide();
+        _this3._shrinkPanel();
+        _this3._restoreFullVoiceMode();
+        _this3._setContainerMode('summary');
       }, 500);
       this.onProductSelected(product);
     }
@@ -10616,6 +10778,10 @@ var EcommerceManager = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
+      if (this.mobileCarousel) {
+        this.mobileCarousel.destroy();
+        this.mobileCarousel = null;
+      }
       this.productPicker.hide();
       this.cartToast.hide();
       this._shrinkPanel();
@@ -10633,6 +10799,539 @@ var EcommerceManager = /*#__PURE__*/function () {
 
 /***/ }),
 
+/***/ "./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: "_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: "_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'));
+    }
+
+    // ═══════════════════════════════════════════
+    // STYLES
+    // ═══════════════════════════════════════════
+  }, {
+    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";
+    }
+  }]);
+}();
+
+/***/ }),
+
 /***/ "./src/ecommerce/ProductCard.js":
 /*!**************************************!*\
   !*** ./src/ecommerce/ProductCard.js ***!
@@ -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() {
@@ -10973,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();
@@ -11269,6 +11977,13 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
     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,
@@ -11296,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);
         }
@@ -11467,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  ";
 }
 
 /***/ }),
@@ -11857,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();
@@ -11878,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();
@@ -14458,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
@@ -14494,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;
@@ -15829,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"));
@@ -15876,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();
       }
     }
@@ -15964,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) {
@@ -15988,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;
       }
@@ -16018,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);
           }
         }
@@ -16065,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) {
@@ -16131,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);
                 }
@@ -16169,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;
@@ -16318,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;
 
@@ -16374,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
     }
 
@@ -16397,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;) {
@@ -16412,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
               });
             }
@@ -16422,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');
         }
       };
@@ -16546,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);
@@ -19249,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();
@@ -20562,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;
   }
 
   /**
@@ -20833,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;
@@ -21273,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();
         }
       },
@@ -21316,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');
+        }
       }
     }
 
@@ -21376,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');
@@ -21843,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();
@@ -22181,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();
           }
         };
@@ -22585,12 +23413,13 @@ var TTPChatWidget = /*#__PURE__*/function () {
       if (mobileChatBtn) {
         mobileChatBtn.onclick = function () {
           closeMobileLanding();
-          var desktopTextCard = _this7.shadowRoot.getElementById('mode-card-text');
-          if (desktopTextCard) {
-            desktopTextCard.click();
-          } else {
-            _this7.showText();
+          var panel = _this7.shadowRoot.getElementById('text-chat-panel');
+          if (panel) {
+            panel.classList.add('open');
+            _this7.isOpen = true;
           }
+          mobileFab.style.display = 'none';
+          _this7.showText();
         };
       }
 
@@ -22835,6 +23664,11 @@ var TTPChatWidget = /*#__PURE__*/function () {
           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();
@@ -24456,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);
+        }
+      };
     }
 
     /**
@@ -24708,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:
@@ -24751,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;
@@ -24776,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'));
                 });
               }));
@@ -25899,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 = '';
@@ -27314,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);
@@ -27613,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    ");
     }
 
     /**
@@ -27623,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    ");
     }
   }]);
 }();
@@ -27951,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...');