ttp-agent-sdk 2.34.13 → 2.35.0

package/dist/agent-widget.dev.js

@@ -9704,9 +9704,7 @@ var WebSocketManager = /*#__PURE__*/function (_EventEmitter) {
                   // Store resolve/reject for later use
                   _this2.connectResolve = resolve;
                   _this2.connectReject = reject;
-
-                  // Get connection from singleton
-                  var url = _this2.config.signedUrl || _this2.config.websocketUrl;
+                  var url = _this2.config.websocketUrl;
                   _WebSocketSingleton_js__WEBPACK_IMPORTED_MODULE_1__["default"].getConnection(url, _this2.config).then(function (connection) {
                     _this2.ws = connection;
 
@@ -9754,7 +9752,7 @@ var WebSocketManager = /*#__PURE__*/function (_EventEmitter) {
 
       // Use singleton's event forwarding
       var handleOpen = function handleOpen(event, url) {
-        var expectedUrl = _this3.config.signedUrl || _this3.config.websocketUrl;
+        var expectedUrl = _this3.config.websocketUrl;
         if (url === expectedUrl) {
           _this3.isConnected = true;
           _this3.emit('connected');
@@ -9768,14 +9766,14 @@ var WebSocketManager = /*#__PURE__*/function (_EventEmitter) {
         }
       };
       var handleClose = function handleClose(event, url) {
-        var expectedUrl = _this3.config.signedUrl || _this3.config.websocketUrl;
+        var expectedUrl = _this3.config.websocketUrl;
         if (url === expectedUrl) {
           _this3.isConnected = false;
           _this3.emit('disconnected', event);
         }
       };
       var handleError = function handleError(event, url) {
-        var expectedUrl = _this3.config.signedUrl || _this3.config.websocketUrl;
+        var expectedUrl = _this3.config.websocketUrl;
         if (url === expectedUrl) {
           _this3.emit('error', event);
 
@@ -9788,7 +9786,7 @@ var WebSocketManager = /*#__PURE__*/function (_EventEmitter) {
         }
       };
       var handleMessage = function handleMessage(event, url) {
-        var expectedUrl = _this3.config.signedUrl || _this3.config.websocketUrl;
+        var expectedUrl = _this3.config.websocketUrl;
         if (url === expectedUrl) {
           _this3.handleMessage(event);
         }
@@ -9824,7 +9822,7 @@ var WebSocketManager = /*#__PURE__*/function (_EventEmitter) {
       }
 
       // Release connection from singleton
-      var url = this.config.signedUrl || this.config.websocketUrl;
+      var url = this.config.websocketUrl;
       if (url) {
         _WebSocketSingleton_js__WEBPACK_IMPORTED_MODULE_1__["default"].releaseConnection(url);
       }
@@ -10210,7 +10208,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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); }
 /**
  * CartSummary - Compact cart summary bar at the bottom of the ecommerce area.
- * Shows item count and total. Hidden when cart is empty.
+ * Shows item count, total, and a "View Cart" link. Hidden when cart is empty.
  */
 var CartSummary = /*#__PURE__*/function () {
   function CartSummary() {
@@ -10218,6 +10216,8 @@ var CartSummary = /*#__PURE__*/function () {
     this.element = null;
     this.itemCount = 0;
     this.total = 0;
+    this.currency = '$';
+    this.cartUrl = '/cart';
   }
   return _createClass(CartSummary, [{
     key: "render",
@@ -10225,19 +10225,20 @@ var CartSummary = /*#__PURE__*/function () {
       var el = document.createElement('div');
       el.className = 'ttp-cart-summary';
       el.style.display = 'none';
-      el.innerHTML = "\n      <div class=\"ttp-cart-info\">\n        <span class=\"ttp-cart-icon\">\uD83D\uDED2</span>\n        <span class=\"ttp-cart-count\">0 items</span>\n      </div>\n      <span class=\"ttp-cart-total\">\u20AA0.00</span>\n    ";
+      el.innerHTML = "\n      <div class=\"ttp-cart-info\">\n        <span class=\"ttp-cart-icon\">\uD83D\uDED2</span>\n        <span class=\"ttp-cart-count\">0 items</span>\n        <span class=\"ttp-cart-separator\">\xB7</span>\n        <span class=\"ttp-cart-total\">".concat(this.currency, "0.00</span>\n      </div>\n      <a class=\"ttp-cart-view\" href=\"").concat(this.cartUrl, "\" target=\"_top\">View Cart \u203A</a>\n    ");
       this.element = el;
       return el;
     }
   }, {
     key: "update",
-    value: function update(itemCount, total) {
+    value: function update(itemCount, total, currency) {
       this.itemCount = itemCount;
       this.total = total;
+      if (currency) this.currency = currency;
       if (this.element) {
         this.element.style.display = itemCount > 0 ? 'flex' : 'none';
         this.element.querySelector('.ttp-cart-count').textContent = "".concat(itemCount, " item").concat(itemCount !== 1 ? 's' : '');
-        this.element.querySelector('.ttp-cart-total').textContent = "\u20AA".concat(total.toFixed(2));
+        this.element.querySelector('.ttp-cart-total').textContent = "".concat(this.currency).concat(total.toFixed(2));
       }
     }
   }]);
@@ -10453,12 +10454,12 @@ var EcommerceManager = /*#__PURE__*/function () {
         return;
       }
       this._switchToCompactMode();
-      this._expandPanel();
       this._setContainerMode('products');
       this.productPicker.hide();
       var effectiveLayout = layout || (products.length <= 4 ? 'cards' : 'list');
       var pickerEl = this.productPicker.show(products, title, effectiveLayout);
       this.container.insertBefore(pickerEl, this.container.firstChild);
+      this._expandPanelToFit(products.length, effectiveLayout);
     }
   }, {
     key: "handleCartUpdated",
@@ -10515,11 +10516,30 @@ var EcommerceManager = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "_expandPanel",
-    value: function _expandPanel() {
+    key: "_expandPanelToFit",
+    value: function _expandPanelToFit(productCount, layout) {
       if (!this.shadowRoot) return;
       var panel = this.shadowRoot.getElementById('text-chat-panel');
-      if (panel) panel.classList.add('ttp-panel-expanded');
+      if (!panel) return;
+
+      // Compact voice bar: 62px (min-height from CSS)
+      // Picker header: 40px (padding 10px*2 + title 16px + border 1px)
+      // Picker outer margin: 20px (margin 8px*2 + border 2px + shadow)
+      // Conversation area: 150px (transcript + input + padding)
+      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);
+      }
+      var totalHeight = chrome + productsHeight;
+      var clampedHeight = Math.min(Math.max(totalHeight, 450), 800);
+      panel.classList.add('ttp-panel-expanded');
+      panel.style.height = "".concat(clampedHeight, "px");
     }
   }, {
     key: "_shrinkPanel",
@@ -10880,6 +10900,7 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
     var _this = this;
     var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _classCallCheck(this, TTPEcommerceWidget);
+    console.log('[TTPEcommerceWidget] v2.35 initialized');
     this.partnerConfig = config.partner || {};
     this.cartConfig = config.cart || {};
     this.widget = new _widget_TTPChatWidget_js__WEBPACK_IMPORTED_MODULE_0__.TTPChatWidget(config);
@@ -10912,34 +10933,31 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
       }
       var self = this;
       var originalConnect = agentSDK.connect.bind(agentSDK);
-      agentSDK.connect = /*#__PURE__*/function () {
-        var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(signedUrl) {
-          return _regenerator().w(function (_context) {
-            while (1) switch (_context.n) {
-              case 0:
-                _context.n = 1;
-                return originalConnect(signedUrl);
-              case 1:
-                if (this.voiceSDK) {
-                  this.voiceSDK.on('message', function (message) {
-                    var type = message.t || message.type;
-                    if (type === 'show_products') {
-                      self.ecommerce.handleShowProducts(message);
-                    } else if (type === 'cart_updated') {
-                      self._handleCartUpdatedFromServer(message);
-                    }
-                  });
-                  console.log('[TTPEcommerceWidget] E-commerce message listener attached');
-                }
-              case 2:
-                return _context.a(2);
-            }
-          }, _callee, this);
-        }));
-        return function (_x) {
-          return _ref.apply(this, arguments);
-        };
-      }();
+      agentSDK.connect = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              _context.n = 1;
+              return originalConnect();
+            case 1:
+              if (this.voiceSDK) {
+                this.voiceSDK.on('message', function (message) {
+                  var type = message.t || message.type;
+                  if (type === 'show_products') {
+                    self.ecommerce.handleShowProducts(message);
+                  } else if (type === 'cart_updated') {
+                    self._handleCartUpdatedFromServer(message);
+                  } else if (type === 'add_to_store_cart') {
+                    self._handleAddToStoreCart(message);
+                  }
+                });
+                console.log('[TTPEcommerceWidget] E-commerce message listener attached');
+              }
+            case 2:
+              return _context.a(2);
+          }
+        }, _callee, this);
+      }));
     }
 
     // ═══════════════════════════════════════════
@@ -10994,7 +11012,7 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
               }
             }, _callee2, null, [[0, 2]]);
           }));
-          return function (_x2) {
+          return function (_x) {
             return _ref2.apply(this, arguments);
           };
         }());
@@ -11026,6 +11044,88 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
     }
 
     // ═══════════════════════════════════════════
+    // SHOPIFY STORE CART (client-side via AJAX Cart API)
+    // ═══════════════════════════════════════════
+
+    /**
+     * Handle add_to_store_cart message from the backend.
+     * Calls Shopify's /cart/add.js from the browser so the item goes into
+     * the store's session-based cart (not a headless Storefront API cart).
+     *
+     * We don't attempt to refresh the theme's cart UI (icon badge, drawer)
+     * because there's no universal mechanism — every theme is different.
+     * The user will see the updated cart when they navigate to /cart or refresh.
+     * Our own CartToast + CartSummary provide immediate visual feedback.
+     */
+  }, {
+    key: "_handleAddToStoreCart",
+    value: function () {
+      var _handleAddToStoreCart2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(data) {
+        var variantId, quantity, productName, price, _cartResponse$items, _cartResponse$items2, response, cartResponse, cartData, _t3;
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.p = _context4.n) {
+            case 0:
+              variantId = data.variantId, quantity = data.quantity, productName = data.productName, price = data.price;
+              _context4.p = 1;
+              _context4.n = 2;
+              return fetch('/cart/add.js', {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                  items: [{
+                    id: parseInt(variantId, 10),
+                    quantity: quantity || 1
+                  }]
+                })
+              });
+            case 2:
+              response = _context4.v;
+              if (response.ok) {
+                _context4.n = 3;
+                break;
+              }
+              console.error('[TTPEcommerceWidget] Failed to add to Shopify cart:', response.status, response.statusText);
+              return _context4.a(2);
+            case 3:
+              _context4.n = 4;
+              return response.json();
+            case 4:
+              cartResponse = _context4.v;
+              console.log('[TTPEcommerceWidget] Added to Shopify store cart:', cartResponse);
+              _context4.n = 5;
+              return fetch('/cart.js').then(function (r) {
+                return r.json();
+              });
+            case 5:
+              cartData = _context4.v;
+              this._handleCartUpdatedFromServer({
+                action: 'added',
+                product: {
+                  id: variantId,
+                  name: productName || ((_cartResponse$items = cartResponse.items) === null || _cartResponse$items === void 0 || (_cartResponse$items = _cartResponse$items[0]) === null || _cartResponse$items === void 0 ? void 0 : _cartResponse$items.title) || 'Product',
+                  price: price || ((_cartResponse$items2 = cartResponse.items) === null || _cartResponse$items2 === void 0 || (_cartResponse$items2 = _cartResponse$items2[0]) === null || _cartResponse$items2 === void 0 ? void 0 : _cartResponse$items2.price) / 100 || 0
+                },
+                cartTotal: cartData.total_price / 100,
+                cartItemCount: cartData.item_count
+              });
+              _context4.n = 7;
+              break;
+            case 6:
+              _context4.p = 6;
+              _t3 = _context4.v;
+              console.error('[TTPEcommerceWidget] Error adding to Shopify cart:', _t3);
+            case 7:
+              return _context4.a(2);
+          }
+        }, _callee4, this, [[1, 6]]);
+      }));
+      function _handleAddToStoreCart(_x2) {
+        return _handleAddToStoreCart2.apply(this, arguments);
+      }
+      return _handleAddToStoreCart;
+    }() // ═══════════════════════════════════════════
     // PRODUCT SELECTION (server manages cart)
     // ═══════════════════════════════════════════
   }, {
@@ -11081,45 +11181,45 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
           self.ecommerce.handleMessage(payload);
         },
         showProducts: function () {
-          var _showProducts = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(query) {
+          var _showProducts = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(query) {
             var limit,
               sessionId,
               baseUrl,
               response,
               data,
-              _args4 = arguments,
-              _t3;
-            return _regenerator().w(function (_context4) {
-              while (1) switch (_context4.p = _context4.n) {
+              _args5 = arguments,
+              _t4;
+            return _regenerator().w(function (_context5) {
+              while (1) switch (_context5.p = _context5.n) {
                 case 0:
-                  limit = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : 5;
-                  sessionId = _args4.length > 2 && _args4[2] !== undefined ? _args4[2] : 'test';
+                  limit = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : 5;
+                  sessionId = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : 'test';
                   baseUrl = window.__TTP_MOCK_API__ || 'https://backend.talktopc.com';
-                  _context4.p = 1;
-                  _context4.n = 2;
+                  _context5.p = 1;
+                  _context5.n = 2;
                   return fetch("".concat(baseUrl, "/api/partner/mock-store/products/search?q=").concat(encodeURIComponent(query), "&limit=").concat(limit, "&sessionId=").concat(encodeURIComponent(sessionId)));
                 case 2:
-                  response = _context4.v;
-                  _context4.n = 3;
+                  response = _context5.v;
+                  _context5.n = 3;
                   return response.json();
                 case 3:
-                  data = _context4.v;
+                  data = _context5.v;
                   self.ecommerce.handleShowProducts({
                     t: 'show_products',
                     products: data.products,
                     title: "".concat(data.totalCount, " results for \"").concat(query, "\""),
                     layout: data.products.length <= 4 ? 'cards' : 'list'
                   });
-                  _context4.n = 5;
+                  _context5.n = 5;
                   break;
                 case 4:
-                  _context4.p = 4;
-                  _t3 = _context4.v;
-                  console.error('[TTPEcommerceWidget] showProducts failed:', _t3);
+                  _context5.p = 4;
+                  _t4 = _context5.v;
+                  console.error('[TTPEcommerceWidget] showProducts failed:', _t4);
                 case 5:
-                  return _context4.a(2);
+                  return _context5.a(2);
               }
-            }, _callee4, null, [[1, 4]]);
+            }, _callee5, null, [[1, 4]]);
           }));
           function showProducts(_x3) {
             return _showProducts.apply(this, arguments);
@@ -11230,7 +11330,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 to 800px.\n * When the class is removed, the panel returns to its CSS-defined default.\n */\n#text-chat-panel.ttp-panel-expanded {\n  height: 800px !important;\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-total { font-size: 14px; font-weight: 700; color: #1e293b; }\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}\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  ";
 }
 
 /***/ }),
@@ -14129,8 +14229,6 @@ function registerVisualTools(registry) {
   });
   if (missingTools.length > 0) {
     console.error('[TTP] ❌ Some visual tools failed to register:', missingTools);
-  } else {
-    console.log('[TTP] 👁️ Visual assistant tools registered successfully:', registeredTools);
   }
 }
 
@@ -14258,9 +14356,9 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
     _this = _callSuper(this, AudioPlayer);
 
     // Version identification log
-    console.log('%c🔊 AUDIO PLAYER - SILENT BUFFER PRIMING FIX ENABLED', 'background: #10b981; color: white; font-size: 14px; font-weight: bold; padding: 4px 8px; border-radius: 4px;');
-    console.log('%cAndroid Greeting Cut-Off Fix: Silent buffer priming (150ms) + dynamic startup buffer', 'background: #d1fae5; color: #065f46; font-size: 12px; padding: 2px 6px; border-radius: 3px;');
-    console.log('%cBuild: 2026-01-30-SILENT-BUFFER-PRIMING | Look for [scheduleWAV] and priming logs', 'background: #e0e7ff; color: #1e40af; font-size: 11px; padding: 2px 6px; border-radius: 3px;');
+    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;
@@ -14641,7 +14739,7 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
     value: (function () {
       var _schedulePreparedFrames = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
         var _this4 = this;
-        var queuedFrames, targetLookaheadFrames, _this$audioContext2, _this$audioContext3, _this$audioContext4, _this$audioContext5, scheduledCount, _loop, _ret, _t;
+        var queuedFrames, targetLookaheadFrames, scheduledCount, _loop, _ret, _t;
         return _regenerator().w(function (_context3) {
           while (1) switch (_context3.p = _context3.n) {
             case 0:
@@ -14679,12 +14777,9 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
               // ✅ NEW: Wait for AudioContext to be in 'running' state before proceeding
               // This is critical for mobile devices where AudioContext initialization takes time
               // Replaces fixed timeouts with event-driven waiting
-              console.log('🔍 [scheduleWAV] BEFORE waitForAudioContextReady - state:', (_this$audioContext2 = this.audioContext) === null || _this$audioContext2 === void 0 ? void 0 : _this$audioContext2.state, 'currentTime:', (_this$audioContext3 = this.audioContext) === null || _this$audioContext3 === void 0 ? void 0 : _this$audioContext3.currentTime);
               _context3.n = 4;
               return this.waitForAudioContextReady();
             case 4:
-              console.log('🔍 [scheduleWAV] AFTER waitForAudioContextReady - state:', (_this$audioContext4 = this.audioContext) === null || _this$audioContext4 === void 0 ? void 0 : _this$audioContext4.state, 'currentTime:', (_this$audioContext5 = this.audioContext) === null || _this$audioContext5 === void 0 ? void 0 : _this$audioContext5.currentTime);
-
               // Schedule frames up to target lookahead (ensures smooth playback)
               // Keep scheduling frames as long as we have them and haven't reached the lookahead limit
               scheduledCount = 0;
@@ -15500,20 +15595,13 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
     value: (function () {
       var _waitForAudioContextReady = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
         var _this6 = this;
-        var _this$audioContext6, _this$audioContext7, audioContext;
+        var audioContext;
         return _regenerator().w(function (_context5) {
           while (1) switch (_context5.n) {
             case 0:
-              console.log('🔍 [waitForAudioContextReady] ENTRY - audioContext exists:', !!this.audioContext);
-
-              // ✅ Add null check - ensure AudioContext exists
               if (!this.audioContext) {
-                console.log('🔍 [waitForAudioContextReady] Creating AudioContext...');
                 this.initializeAudioContext();
-                console.log('🔍 [waitForAudioContextReady] After initializeAudioContext - state:', (_this$audioContext6 = this.audioContext) === null || _this$audioContext6 === void 0 ? void 0 : _this$audioContext6.state, 'currentTime:', (_this$audioContext7 = this.audioContext) === null || _this$audioContext7 === void 0 ? void 0 : _this$audioContext7.currentTime);
               }
-
-              // ✅ Add null check after initialization
               if (this.audioContext) {
                 _context5.n = 1;
                 break;
@@ -15522,46 +15610,33 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
               return _context5.a(2, Promise.resolve());
             case 1:
               audioContext = this.audioContext;
-              console.log('🔍 [waitForAudioContextReady] Initial state:', audioContext.state, 'currentTime:', audioContext.currentTime);
-
-              // If already running, proceed immediately
               if (!(audioContext.state === 'running')) {
                 _context5.n = 2;
                 break;
               }
-              console.log('🔍 [waitForAudioContextReady] Already running - returning immediately, currentTime:', audioContext.currentTime);
               return _context5.a(2, Promise.resolve());
             case 2:
               if (!(audioContext.state === 'suspended')) {
-                _context5.n = 5;
+                _context5.n = 4;
                 break;
               }
-              console.log('🔍 [waitForAudioContextReady] State is suspended - calling resume()...');
               _context5.n = 3;
               return audioContext.resume();
             case 3:
-              console.log('🔍 [waitForAudioContextReady] After resume() - state:', audioContext.state, 'currentTime:', audioContext.currentTime);
-
-              // Wait for actual state change (not fixed timeout)
               if (!(audioContext.state !== 'running')) {
                 _context5.n = 4;
                 break;
               }
-              console.log('🔍 [waitForAudioContextReady] Still not running after resume() - waiting for statechange event...');
               return _context5.a(2, new Promise(function (resolve) {
                 var timeout = setTimeout(function () {
-                  // ✅ Clean up temporary listener
                   if (audioContext && _this6._waitForReadyStateHandler) {
                     audioContext.removeEventListener('statechange', _this6._waitForReadyStateHandler);
                     _this6._waitForReadyStateHandler = null;
                   }
-                  console.warn('⚠️ AudioPlayer: AudioContext did not become running within timeout - proceeding anyway, state:', audioContext === null || audioContext === void 0 ? void 0 : audioContext.state, 'currentTime:', audioContext === null || audioContext === void 0 ? void 0 : audioContext.currentTime);
-                  resolve(); // Proceed to avoid blocking
-                }, 2000); // 2 second timeout fallback
-
+                  console.warn('⚠️ AudioPlayer: AudioContext did not become running within timeout - proceeding anyway');
+                  resolve();
+                }, 2000);
                 var checkState = function checkState() {
-                  console.log('🔍 [waitForAudioContextReady] statechange event fired - state:', audioContext === null || audioContext === void 0 ? void 0 : audioContext.state, 'currentTime:', audioContext === null || audioContext === void 0 ? void 0 : audioContext.currentTime);
-                  // ✅ Add null check - audioContext might be null when handler fires
                   if (!audioContext) {
                     clearTimeout(timeout);
                     _this6._waitForReadyStateHandler = null;
@@ -15571,45 +15646,33 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
                   }
                   if (audioContext.state === 'running') {
                     clearTimeout(timeout);
-                    // ✅ Clean up temporary listener
                     if (_this6._waitForReadyStateHandler) {
                       audioContext.removeEventListener('statechange', _this6._waitForReadyStateHandler);
                       _this6._waitForReadyStateHandler = null;
                     }
-                    console.log('✅ [waitForAudioContextReady] AudioContext became running via statechange, currentTime:', audioContext.currentTime);
                     resolve();
                   }
                 };
-
-                // ✅ Store listener reference for cleanup
                 _this6._waitForReadyStateHandler = checkState;
                 audioContext.addEventListener('statechange', checkState);
-
-                // Check immediately in case state changed synchronously
-                console.log('🔍 [waitForAudioContextReady] Synchronous check - state:', audioContext === null || audioContext === void 0 ? void 0 : audioContext.state);
                 if (audioContext && audioContext.state === 'running') {
                   clearTimeout(timeout);
-                  // ✅ Clean up temporary listener
                   if (_this6._waitForReadyStateHandler) {
                     audioContext.removeEventListener('statechange', _this6._waitForReadyStateHandler);
                     _this6._waitForReadyStateHandler = null;
                   }
-                  console.log('✅ [waitForAudioContextReady] State became running synchronously, currentTime:', audioContext.currentTime);
                   resolve();
                 }
               }));
             case 4:
-              console.log('🔍 [waitForAudioContextReady] State is running after resume() - returning, currentTime:', audioContext.currentTime);
-            case 5:
               if (!(audioContext.state === 'closed')) {
-                _context5.n = 6;
+                _context5.n = 5;
                 break;
               }
               console.warn('⚠️ AudioPlayer: AudioContext was closed, recreating...');
               this.initializeAudioContext();
               return _context5.a(2, this.waitForAudioContextReady());
-            case 6:
-              console.log('🔍 [waitForAudioContextReady] EXIT - state:', audioContext.state, 'currentTime:', audioContext.currentTime);
+            case 5:
               return _context5.a(2, Promise.resolve());
           }
         }, _callee4, this);
@@ -16454,14 +16517,15 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
     _classCallCheck(this, VoiceSDK_v2);
     _this = _callSuper(this, VoiceSDK_v2);
     _this.version = '2.0.0';
+
+    // Backward compat: signedUrl → websocketUrl
+    if (config.signedUrl && !config.websocketUrl) {
+      console.warn('⚠️ VoiceSDK: signedUrl is deprecated — use websocketUrl for custom backend URLs, or just provide agentId + appId');
+      config.websocketUrl = config.signedUrl;
+    }
     _this.config = {
       // Connection
-
-      signedUrl: config.signedUrl || config.websocketUrl || 'wss://speech.talktopc.com/ws/conv',
-      // Support both signedUrl and websocketUrl for backward compatibility
-      websocketUrl: config.signedUrl || config.websocketUrl || 'wss://speech.talktopc.com/ws/conv',
-      // Keep for internal use
-
+      websocketUrl: config.websocketUrl || 'wss://speech.talktopc.com/ws/conv',
       agentId: config.agentId,
       appId: config.appId,
       // Input format (what we send to server)
@@ -16576,12 +16640,6 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
 
     // Setup page unload handler for resume state storage
     _this._setupPageUnloadHandler();
-    console.log('🎵 VoiceSDK v2 initialized:', {
-      version: _this.version,
-      outputContainer: _this.config.outputContainer,
-      outputEncoding: _this.config.outputEncoding,
-      outputSampleRate: _this.config.outputSampleRate
-    });
     return _this;
   }
 
@@ -16693,8 +16751,6 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
           });
           console.error('❌ VoiceSDK: Some visual tools failed to register:', missing);
           console.error('   Registered visual tools:', registeredVisualTools);
-        } else {
-          console.log('✅ VoiceSDK: All visual tools registered:', registeredVisualTools);
         }
       } catch (error) {
         console.error('❌ VoiceSDK: Error registering visual assistant tools:', error);
@@ -16715,10 +16771,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
         console.error('❌ VoiceSDK: Missing internal tools:', _missing);
         console.error('   Expected 7 internal tools:', requiredInternalTools);
         console.error('   Registered:', registeredInternalTools);
-      } else {
-        console.log('✅ VoiceSDK: All 7 internal tools registered:', registeredInternalTools);
       }
-      console.log('🔧 VoiceSDK: All registered tools after _registerBuiltInTools():', allRegisteredTools);
     }
 
     /**
@@ -17031,7 +17084,6 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
         this.emit('error', new Error(outputError));
         return;
       }
-      console.log('✅ VoiceSDK v2: Format validation passed');
     }
 
     /**
@@ -17160,37 +17212,28 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "buildWebSocketUrl",
     value: function buildWebSocketUrl() {
-      var baseUrl = this.config.signedUrl || this.config.websocketUrl;
-
-      // Parse existing URL to check what params are already there
+      var baseUrl = this.config.websocketUrl;
       var url = new URL(baseUrl, 'wss://placeholder.com');
-      var existingParams = url.searchParams;
+      var params = url.searchParams;
 
-      // Only add agentId if not already in URL
-      if (this.config.agentId && !existingParams.has('agentId')) {
-        existingParams.append('agentId', this.config.agentId);
+      // Strip any legacy signed_token param
+      params.delete('signed_token');
+      if (this.config.agentId && !params.has('agentId')) {
+        params.append('agentId', this.config.agentId);
       }
-
-      // Only add appId if not already in URL
-      if (this.config.appId && !existingParams.has('appId')) {
-        existingParams.append('appId', this.config.appId);
+      if (this.config.appId && !params.has('appId')) {
+        params.append('appId', this.config.appId);
       }
-
-      // Include conversationId for resume attempt (if available)
       var storedConversationId = this.getStoredConversationId();
-      if (storedConversationId && !existingParams.has('conversationId')) {
-        existingParams.append('conversationId', storedConversationId);
+      if (storedConversationId && !params.has('conversationId')) {
+        params.append('conversationId', storedConversationId);
         console.log('🔄 VoiceSDK v2: Attempting resume via query param:', storedConversationId);
       }
-
-      // Include current page for resume context tracking
       var currentPage = window.location.pathname + window.location.search;
-      if (currentPage && !existingParams.has('currentPage')) {
-        existingParams.append('currentPage', currentPage);
+      if (currentPage && !params.has('currentPage')) {
+        params.append('currentPage', currentPage);
       }
-
-      // Reconstruct URL with all params
-      var queryString = existingParams.toString();
+      var queryString = params.toString();
       if (queryString) {
         return "".concat(url.origin).concat(url.pathname, "?").concat(queryString);
       }
@@ -17237,7 +17280,6 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
                 // Connection opened
 
                 _this6.websocket.onopen = function () {
-                  console.log('✅ VoiceSDK v2: WebSocket connected');
                   _this6.isConnected = true;
                   _this6.hasEverConnected = true; // Mark that we've successfully connected
 
@@ -17249,7 +17291,6 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
 
                     // Verify all tools are registered (safeguard)
                     var registeredTools = _this6.clientToolsRegistry.getRegisteredTools();
-                    console.log('🔧 VoiceSDK v2: Registered tools on connect:', registeredTools);
 
                     // Re-register tools if they're missing (safety check)
                     // 7 internal tools: read_page, capture_screen, and 5 action tools (matches backend tool names)
@@ -20404,8 +20445,6 @@ var AgentSDK = /*#__PURE__*/function () {
         // Get visualAssistant from config or agentSettingsOverride (same pattern as connect())
         var visualAssistant = this.config.visualAssistant || ((_this$config$agentSet = this.config.agentSettingsOverride) === null || _this$config$agentSet === void 0 ? void 0 : _this$config$agentSet.visualAssistant);
         var tempSDK = new _index_js__WEBPACK_IMPORTED_MODULE_0__.VoiceSDK_v2({
-          signedUrl: 'wss://placeholder',
-          // Placeholder, won't be used
           autoReconnect: false,
           agentId: this.config.agentId,
           appId: this.config.appId,
@@ -20435,19 +20474,13 @@ var AgentSDK = /*#__PURE__*/function () {
   }, {
     key: "connect",
     value: function () {
-      var _connect = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(signedUrl) {
+      var _connect = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
         var _this = this;
         var _this$config$agentSet2, visualAssistant, _iterator, _step, _step$value, name, handler, _t;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.p = _context.n) {
             case 0:
               _context.p = 0;
-              if (signedUrl) {
-                _context.n = 1;
-                break;
-              }
-              throw new Error('signedUrl is required');
-            case 1:
               // Clean up existing connection if any
               if (this.voiceSDK) {
                 console.log('🔌 AgentSDK: Cleaning up existing connection');
@@ -20455,13 +20488,10 @@ var AgentSDK = /*#__PURE__*/function () {
                 this.voiceSDK = null;
               }
 
-              // Create VoiceSDK v2 instance
-              // Allow configurable output format, with defaults optimized for widget
               // Get visualAssistant from config or agentSettingsOverride (same pattern as VoiceSDK)
               visualAssistant = this.config.visualAssistant || ((_this$config$agentSet2 = this.config.agentSettingsOverride) === null || _this$config$agentSet2 === void 0 ? void 0 : _this$config$agentSet2.visualAssistant);
               this.voiceSDK = new _index_js__WEBPACK_IMPORTED_MODULE_0__.VoiceSDK_v2({
-                signedUrl: signedUrl,
-                // Use signedUrl parameter (VoiceSDK_v2 supports both signedUrl and websocketUrl)
+                websocketUrl: this.config.websocketUrl,
                 autoReconnect: false,
                 agentId: this.config.agentId,
                 appId: this.config.appId,
@@ -20620,22 +20650,22 @@ var AgentSDK = /*#__PURE__*/function () {
               }
 
               // Connect using VoiceSDK
-              _context.n = 2;
+              _context.n = 1;
               return this.voiceSDK.connect();
-            case 2:
-              _context.n = 4;
+            case 1:
+              _context.n = 3;
               break;
-            case 3:
-              _context.p = 3;
+            case 2:
+              _context.p = 2;
               _t = _context.v;
               this.onError(_t);
               throw _t;
-            case 4:
+            case 3:
               return _context.a(2);
           }
-        }, _callee, this, [[0, 3]]);
+        }, _callee, this, [[0, 2]]);
       }));
-      function connect(_x) {
+      function connect() {
         return _connect.apply(this, arguments);
       }
       return connect;
@@ -21025,6 +21055,13 @@ var TTPChatWidget = /*#__PURE__*/function () {
     _classCallCheck(this, TTPChatWidget);
     // Merge user config with defaults (backward compatible with simple config)
     this.config = this.mergeWithDefaults(config);
+
+    // Backward compat: signedUrl → websocketUrl with deprecation warning
+    if (config.signedUrl && !config.websocketUrl) {
+      console.warn('⚠️ TTPChatWidget: signedUrl is deprecated — use websocketUrl for custom backend URLs, or just provide agentId + appId');
+    }
+    // Silently ignore allowOverride (now server-side only)
+
     this.sdk = new _core_TextChatSDK_js__WEBPACK_IMPORTED_MODULE_0__["default"](this.config);
     this.isOpen = false;
     this.isActive = false;
@@ -21059,17 +21096,12 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Pass through send button color for voice send button
       sendButtonColor: ((_this$config$text2 = this.config.text) === null || _this$config$text2 === void 0 ? void 0 : _this$config$text2.sendButtonColor) || this.config.sendButtonColor || '#7C3AED',
       language: ((_this$config$voice = this.config.voice) === null || _this$config$voice === void 0 ? void 0 : _this$config$voice.language) || this.config.language || 'en',
-      signedUrl: this.config.signedUrl,
-      // Pass through signedUrl if provided
+      websocketUrl: this.config.websocketUrl,
       agentSettingsOverride: this.config.agentSettingsOverride,
-      // Pass through agentSettingsOverride if provided
       visualAssistant: this.config.visualAssistant,
-      // Pass through visualAssistant config
       translations: this.translations,
       shadowRoot: this.shadowRoot,
-      // Pass shadow root reference
       textSDK: this.sdk,
-      // Pass TextChatSDK reference for sending text messages during voice calls
       // Output format defaults for widget: 44100 Hz, 16-bit, PCM, raw
       outputContainer: ((_this$config$voice2 = this.config.voice) === null || _this$config$voice2 === void 0 ? void 0 : _this$config$voice2.outputContainer) || 'raw',
       outputEncoding: ((_this$config$voice3 = this.config.voice) === null || _this$config$voice3 === void 0 ? void 0 : _this$config$voice3.outputEncoding) || 'pcm',
@@ -21268,12 +21300,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Required (agentId is required, appId is optional)
         agentId: userConfig.agentId,
         appId: userConfig.appId,
-        signedUrl: userConfig.signedUrl,
-        // Optional - signed URL for secure authentication (for voice)
+        websocketUrl: userConfig.websocketUrl || userConfig.signedUrl,
+        // signedUrl accepted as backward-compat alias
         agentSettingsOverride: userConfig.agentSettingsOverride,
-        // Optional - agent settings override (requires signed URL with allowOverride=true)
         demo: userConfig.demo !== false,
-        // Optional - defaults to true
         direction: userConfig.direction || 'ltr',
         // Optional - text direction: 'ltr' or 'rtl'
         language: userConfig.language || 'en',
@@ -22772,51 +22802,34 @@ var TTPChatWidget = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "getSignedUrl",
-    value: function () {
-      var _getSignedUrl = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-        var baseUrl, params, wsUrl;
-        return _regenerator().w(function (_context4) {
-          while (1) switch (_context4.n) {
-            case 0:
-              if (!this.config.signedUrl) {
-                _context4.n = 1;
-                break;
-              }
-              return _context4.a(2, this.config.signedUrl);
-            case 1:
-              if (this.config.agentId) {
-                _context4.n = 2;
-                break;
-              }
-              throw new Error('agentId is required when signedUrl is not provided');
-            case 2:
-              // Build WebSocket URL directly
-              // Default uses backend.talktopc.com for text chat (path may need adjustment)
-              baseUrl = this.config.websocketUrl || 'wss://backend.talktopc.com/ws/conv';
-              params = new URLSearchParams();
-              params.append('agentId', this.config.agentId);
-              if (this.config.appId) {
-                params.append('appId', this.config.appId);
-              }
+    key: "buildWebSocketUrl",
+    value: function buildWebSocketUrl() {
+      if (!this.config.agentId) {
+        throw new Error('agentId is required');
+      }
+      var baseUrl = this.config.websocketUrl || 'wss://backend.talktopc.com/ws/conv';
+      var url = new URL(baseUrl, 'wss://placeholder.com');
+      var params = url.searchParams;
 
-              // Add demo flag if in development
-              if (this.config.demo !== false) {
-                params.append('demo', 'true');
-              }
-              wsUrl = "".concat(baseUrl, "?").concat(params.toString());
-              if (true) {
-                console.log('[TTPAgentSDK] WebSocket URL:', wsUrl);
-              }
-              return _context4.a(2, wsUrl);
-          }
-        }, _callee4, this);
-      }));
-      function getSignedUrl() {
-        return _getSignedUrl.apply(this, arguments);
+      // Strip any legacy signed_token param
+      params.delete('signed_token');
+      if (!params.has('agentId')) {
+        params.append('agentId', this.config.agentId);
+      }
+      if (this.config.appId && !params.has('appId')) {
+        params.append('appId', this.config.appId);
       }
-      return getSignedUrl;
-    }() // Delegated to TextInterface
+      if (this.config.demo !== false) {
+        params.append('demo', 'true');
+      }
+      var wsUrl = "".concat(url.origin).concat(url.pathname, "?").concat(params.toString());
+      if (true) {
+        console.log('[TTPAgentSDK] WebSocket URL:', wsUrl);
+      }
+      return wsUrl;
+    }
+
+    // Delegated to TextInterface
   }, {
     key: "addMessage",
     value: function addMessage(type, text) {
@@ -23057,12 +23070,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
         translations: this.translations,
         shadowRoot: this.shadowRoot,
         // Pass shadow root reference
-        signedUrl: this.config.signedUrl,
-        // Pass through signedUrl if provided
+        websocketUrl: this.config.websocketUrl,
         agentSettingsOverride: this.config.agentSettingsOverride,
-        // Pass through agentSettingsOverride if provided
         visualAssistant: this.config.visualAssistant,
-        // Pass through visualAssistant config
         // Output format defaults for widget: 44100 Hz, 16-bit, PCM, raw
         outputContainer: ((_this$config$voice8 = this.config.voice) === null || _this$config$voice8 === void 0 ? void 0 : _this$config$voice8.outputContainer) || 'raw',
         outputEncoding: ((_this$config$voice9 = this.config.voice) === null || _this$config$voice9 === void 0 ? void 0 : _this$config$voice9.outputEncoding) || 'pcm',
@@ -23143,19 +23153,19 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "startVoiceCall",
     value: function () {
-      var _startVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
-        return _regenerator().w(function (_context5) {
-          while (1) switch (_context5.n) {
+      var _startVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
             case 0:
-              _context5.n = 1;
+              _context4.n = 1;
               return this.voiceInterface.startVoiceCall();
             case 1:
               // Flush pending tools after SDK connects
               this._flushPendingClientTools();
             case 2:
-              return _context5.a(2);
+              return _context4.a(2);
           }
-        }, _callee5, this);
+        }, _callee4, this);
       }));
       function startVoiceCall() {
         return _startVoiceCall.apply(this, arguments);
@@ -23208,26 +23218,26 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "injectData",
     value: (function () {
-      var _injectData = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(data) {
+      var _injectData = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(data) {
         var _this$voiceInterface6;
         var options,
           voiceSDK,
           ack,
-          _args6 = arguments,
+          _args5 = arguments,
           _t2;
-        return _regenerator().w(function (_context6) {
-          while (1) switch (_context6.p = _context6.n) {
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.p = _context5.n) {
             case 0:
-              options = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : {};
+              options = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : {};
               if (!(!data || !data.trim())) {
-                _context6.n = 1;
+                _context5.n = 1;
                 break;
               }
               console.warn('TTPChatWidget: Cannot inject empty data');
               throw new Error('Cannot inject empty data');
             case 1:
               if (!(!this.voiceInterface || !this.voiceInterface.isActive)) {
-                _context6.n = 2;
+                _context5.n = 2;
                 break;
               }
               console.warn('TTPChatWidget: Cannot inject data - voice call is not active');
@@ -23236,28 +23246,28 @@ var TTPChatWidget = /*#__PURE__*/function () {
               // Check if SDK is available
               voiceSDK = (_this$voiceInterface6 = this.voiceInterface) === null || _this$voiceInterface6 === void 0 ? void 0 : _this$voiceInterface6.getVoiceSDK();
               if (voiceSDK) {
-                _context6.n = 3;
+                _context5.n = 3;
                 break;
               }
               console.warn('TTPChatWidget: VoiceSDK not available');
               throw new Error('VoiceSDK not available');
             case 3:
-              _context6.p = 3;
-              _context6.n = 4;
+              _context5.p = 3;
+              _context5.n = 4;
               return voiceSDK.injectData(data, _objectSpread(_objectSpread({}, options), {}, {
                 source: options.source || 'widget_programmatic'
               }));
             case 4:
-              ack = _context6.v;
-              return _context6.a(2, ack);
+              ack = _context5.v;
+              return _context5.a(2, ack);
             case 5:
-              _context6.p = 5;
-              _t2 = _context6.v;
+              _context5.p = 5;
+              _t2 = _context5.v;
               throw _t2;
             case 6:
-              return _context6.a(2);
+              return _context5.a(2);
           }
-        }, _callee6, this, [[3, 5]]);
+        }, _callee5, this, [[3, 5]]);
       }));
       function injectData(_x) {
         return _injectData.apply(this, arguments);
@@ -23986,12 +23996,9 @@ var VoiceInterface = /*#__PURE__*/function () {
     this.sdk = new _index_js__WEBPACK_IMPORTED_MODULE_0__.AgentSDK({
       agentId: config.agentId,
       appId: config.appId,
-      signedUrl: config.signedUrl,
-      // Pass through signedUrl if provided
+      websocketUrl: config.websocketUrl,
       agentSettingsOverride: config.agentSettingsOverride,
-      // Pass through agentSettingsOverride if provided
       visualAssistant: visualAssistant,
-      // Pass through visualAssistant config (with fallback to agentSettingsOverride)
       variables: config.variables || {},
       language: config.language || 'en',
       // Output format configuration (defaults to 44100 Hz, 16-bit, PCM, raw)
@@ -24553,7 +24560,7 @@ var VoiceInterface = /*#__PURE__*/function () {
     value: (function () {
       var _proceedWithVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
         var _this3 = this;
-        var isResumeCall, panel, header, toggleText, _voiceInterface, originalSection, compactSection, idleState, _panel, fallbackPanel, sampleRate, mediaStream, floatingButton, fallbackButton, existingBar, _floatingButton, _fallbackButton, _idleState, _panel2, _fallbackPanel, deviceInfo, _idleState2, activeState, voiceInterface, signedUrl, connected, serverRejected, originalOnError, originalOnDisconnected, attempts, _this$sdk$voiceSDK, error, _existingBar, _existingBar2, _idleState3, _panel3, _fallbackPanel2, _floatingButton2, _fallbackButton2, updateTimer, _existingBar3, _existingBar4, _idleState4, _panel4, _fallbackPanel3, _floatingButton3, _fallbackButton3, _updateTimer, _deviceInfo, _t2, _t3, _t4, _t5, _t6, _t7;
+        var isResumeCall, panel, header, toggleText, _voiceInterface, originalSection, compactSection, idleState, _panel, fallbackPanel, sampleRate, mediaStream, floatingButton, fallbackButton, existingBar, _floatingButton, _fallbackButton, _idleState, _panel2, _fallbackPanel, deviceInfo, _idleState2, activeState, voiceInterface, connected, serverRejected, originalOnError, originalOnDisconnected, attempts, _this$sdk$voiceSDK, error, _existingBar, _existingBar2, _idleState3, _panel3, _fallbackPanel2, _floatingButton2, _fallbackButton2, updateTimer, _existingBar3, _existingBar4, _idleState4, _panel4, _fallbackPanel3, _floatingButton3, _fallbackButton3, _updateTimer, _deviceInfo, _t2, _t3, _t4, _t5, _t6, _t7;
         return _regenerator().w(function (_context5) {
           while (1) switch (_context5.p = _context5.n) {
             case 0:
@@ -24730,20 +24737,13 @@ var VoiceInterface = /*#__PURE__*/function () {
                 voiceInterface.scrollTop = 0;
               }
 
-              // Get signed URL and connect
-              // On mobile, permission is already granted at this point
-              // Get signed URL from config or construct it
-              signedUrl = this.config.signedUrl || (this.config.agentId && this.config.appId ? "wss://speech.talktopc.com/ws/conv?agentId=".concat(this.config.agentId, "&appId=").concat(this.config.appId) : null);
-              if (signedUrl) {
+              // Connect using agentId + appId (URL built internally by SDK)
+              if (this.config.agentId) {
                 _context5.n = 7;
                 break;
               }
-              throw new Error('signedUrl or agentId+appId required for voice calls');
+              throw new Error('agentId is required for voice calls');
             case 7:
-              console.log('🔗 Got signed URL:', signedUrl);
-
-              // If SDK is already connected, disconnect first to ensure clean state
-              // This is important for retrying after permission errors
               if (!(this.sdk && this.sdk.isConnected)) {
                 _context5.n = 11;
                 break;
@@ -24751,7 +24751,6 @@ var VoiceInterface = /*#__PURE__*/function () {
               console.log('🔄 SDK already connected, disconnecting for clean retry...');
               _context5.p = 8;
               this.sdk.disconnect();
-              // Wait a bit for disconnect to complete
               _context5.n = 9;
               return new Promise(function (resolve) {
                 return setTimeout(resolve, 100);
@@ -24765,7 +24764,7 @@ var VoiceInterface = /*#__PURE__*/function () {
               console.warn('Warning: Error disconnecting existing connection:', _t3);
             case 11:
               _context5.n = 12;
-              return this.sdk.connect(signedUrl);
+              return this.sdk.connect();
             case 12:
               connected = _context5.v;
               console.log('✅ Connected to WebSocket, connected:', connected);
@@ -24893,6 +24892,7 @@ var VoiceInterface = /*#__PURE__*/function () {
             case 26:
               console.log('🎤 Started listening - permission granted');
               this.isActive = true;
+              this.resetMuteState();
 
               // Update mobile bar if it already exists (created early), otherwise create it
               if (this.isMobile) {
@@ -25026,6 +25026,7 @@ var VoiceInterface = /*#__PURE__*/function () {
             case 34:
               console.log('🎤 Started listening - permission granted');
               this.isActive = true;
+              this.resetMuteState();
 
               // Update mobile bar if it already exists (created early), otherwise create it
               if (this.isMobile) {
@@ -25518,10 +25519,56 @@ var VoiceInterface = /*#__PURE__*/function () {
   }, {
     key: "endVoiceCall",
     value: function endVoiceCall() {
-      var _this$sdk2,
-        _this4 = this;
+      var _this4 = this,
+        _this$sdk2;
       console.log('🔴 Ending voice call...');
 
+      // Reset mic/speaker state + UI immediately so next call never flashes muted UI
+      this.isMicMuted = false;
+      this.isSpeakerMuted = false;
+
+      // Reset mute button DOM state (desktop original + compact)
+      ['desktopMuteBtn', 'desktopMuteBtnCompact'].forEach(function (id) {
+        var btn = _this4.shadowRoot.getElementById(id);
+        if (!btn) return;
+        btn.classList.remove('muted');
+        var micIcon = btn.querySelector('.desktop-mic-icon');
+        var micOffIcon = btn.querySelector('.desktop-mic-off-icon');
+        if (micIcon) micIcon.style.display = 'block';
+        if (micOffIcon) micOffIcon.style.display = 'none';
+      });
+
+      // Reset speaker button DOM state (desktop original + compact)
+      ['desktopSpeakerBtn', 'desktopSpeakerBtnCompact'].forEach(function (id) {
+        var btn = _this4.shadowRoot.getElementById(id);
+        if (!btn) return;
+        btn.classList.remove('muted');
+        var speakerIcon = btn.querySelector('.desktop-speaker-icon');
+        var speakerOffIcon = btn.querySelector('.desktop-speaker-off-icon');
+        if (speakerIcon) speakerIcon.style.display = 'block';
+        if (speakerOffIcon) speakerOffIcon.style.display = 'none';
+      });
+
+      // Reset mobile mute button
+      var mobileMuteBtn = document.getElementById('mobileMuteBtn');
+      if (mobileMuteBtn) {
+        mobileMuteBtn.classList.remove('muted');
+        var mobileMicIcon = mobileMuteBtn.querySelector('.mobile-mic-icon');
+        var mobileMicOffIcon = mobileMuteBtn.querySelector('.mobile-mic-off-icon');
+        if (mobileMicIcon) mobileMicIcon.style.cssText = 'display: block !important; visibility: visible !important; opacity: 1 !important; width: 15px !important; height: 15px !important; margin: 0 !important; padding: 0 !important;';
+        if (mobileMicOffIcon) mobileMicOffIcon.style.cssText = 'display: none !important; visibility: hidden !important; opacity: 0 !important;';
+      }
+
+      // Reset mobile speaker button
+      var mobileSpeakerBtn = document.getElementById('mobileSpeakerBtn');
+      if (mobileSpeakerBtn) {
+        mobileSpeakerBtn.classList.remove('muted');
+        var mobileSpeakerIcon = mobileSpeakerBtn.querySelector('.mobile-speaker-icon');
+        var mobileSpeakerOffIcon = mobileSpeakerBtn.querySelector('.mobile-speaker-off-icon');
+        if (mobileSpeakerIcon) mobileSpeakerIcon.style.cssText = 'display: block !important; visibility: visible !important; opacity: 1 !important; width: 15px !important; height: 15px !important; margin: 0 !important; padding: 0 !important;';
+        if (mobileSpeakerOffIcon) mobileSpeakerOffIcon.style.cssText = 'display: none !important; visibility: hidden !important; opacity: 0 !important;';
+      }
+
       // Reset resume info so next call is treated as a new call (not resume)
       // Resume info is only valid for the first call after page load/refresh
       this._resumeInfo = null;
@@ -26093,6 +26140,73 @@ var VoiceInterface = /*#__PURE__*/function () {
       return this.mobile.stopWaveformAnimation();
     }
 
+    /**
+     * Reset mic and speaker mute state + UI for a fresh call
+     */
+  }, {
+    key: "resetMuteState",
+    value: function resetMuteState() {
+      var _this$sdk3,
+        _this$sdk4,
+        _this5 = this;
+      this.isMicMuted = false;
+      this.isSpeakerMuted = false;
+      console.log('%c🎤 MIC/SPEAKER RESET - New call starting unmuted', 'background: #10b981; color: white; font-size: 14px; font-weight: bold; padding: 4px 8px; border-radius: 4px;');
+
+      // Ensure audio track is enabled
+      if ((_this$sdk3 = this.sdk) !== null && _this$sdk3 !== void 0 && (_this$sdk3 = _this$sdk3.voiceSDK) !== null && _this$sdk3 !== void 0 && (_this$sdk3 = _this$sdk3.audioRecorder) !== null && _this$sdk3 !== void 0 && _this$sdk3.mediaStream) {
+        var track = this.sdk.voiceSDK.audioRecorder.mediaStream.getAudioTracks()[0];
+        if (track) track.enabled = true;
+      }
+
+      // Ensure speaker is unmuted
+      if ((_this$sdk4 = this.sdk) !== null && _this$sdk4 !== void 0 && (_this$sdk4 = _this$sdk4.voiceSDK) !== null && _this$sdk4 !== void 0 && _this$sdk4.audioPlayer) {
+        this.sdk.voiceSDK.audioPlayer.setMuted(false);
+      }
+
+      // Reset desktop mute buttons (original + compact)
+      ['desktopMuteBtn', 'desktopMuteBtnCompact'].forEach(function (id) {
+        var btn = _this5.shadowRoot.getElementById(id);
+        if (!btn) return;
+        btn.classList.remove('muted');
+        var micIcon = btn.querySelector('.desktop-mic-icon');
+        var micOffIcon = btn.querySelector('.desktop-mic-off-icon');
+        if (micIcon) micIcon.style.display = 'block';
+        if (micOffIcon) micOffIcon.style.display = 'none';
+      });
+
+      // Reset desktop speaker buttons (original + compact)
+      ['desktopSpeakerBtn', 'desktopSpeakerBtnCompact'].forEach(function (id) {
+        var btn = _this5.shadowRoot.getElementById(id);
+        if (!btn) return;
+        btn.classList.remove('muted');
+        var speakerIcon = btn.querySelector('.desktop-speaker-icon');
+        var speakerOffIcon = btn.querySelector('.desktop-speaker-off-icon');
+        if (speakerIcon) speakerIcon.style.display = 'block';
+        if (speakerOffIcon) speakerOffIcon.style.display = 'none';
+      });
+
+      // Reset mobile mute button
+      var mobileMuteBtn = document.getElementById('mobileMuteBtn');
+      if (mobileMuteBtn) {
+        mobileMuteBtn.classList.remove('muted');
+        var mobileMicIcon = mobileMuteBtn.querySelector('.mobile-mic-icon');
+        var mobileMicOffIcon = mobileMuteBtn.querySelector('.mobile-mic-off-icon');
+        if (mobileMicIcon) mobileMicIcon.style.cssText = 'display: block !important; visibility: visible !important; opacity: 1 !important; width: 15px !important; height: 15px !important; margin: 0 !important; padding: 0 !important;';
+        if (mobileMicOffIcon) mobileMicOffIcon.style.cssText = 'display: none !important; visibility: hidden !important; opacity: 0 !important;';
+      }
+
+      // Reset mobile speaker button
+      var mobileSpeakerBtn = document.getElementById('mobileSpeakerBtn');
+      if (mobileSpeakerBtn) {
+        mobileSpeakerBtn.classList.remove('muted');
+        var mobileSpeakerIcon = mobileSpeakerBtn.querySelector('.mobile-speaker-icon');
+        var mobileSpeakerOffIcon = mobileSpeakerBtn.querySelector('.mobile-speaker-off-icon');
+        if (mobileSpeakerIcon) mobileSpeakerIcon.style.cssText = 'display: block !important; visibility: visible !important; opacity: 1 !important; width: 15px !important; height: 15px !important; margin: 0 !important; padding: 0 !important;';
+        if (mobileSpeakerOffIcon) mobileSpeakerOffIcon.style.cssText = 'display: none !important; visibility: hidden !important; opacity: 0 !important;';
+      }
+    }
+
     /**
      * Cleanup resources
      */
@@ -27230,7 +27344,7 @@ var Styles = /*#__PURE__*/function () {
       var endCallBtnColor = this.config.endCallButtonColor || '#ef4444';
       var voiceSendButtonColor = this.config.sendButtonColor || ((_this$config$text = this.config.text) === null || _this$config$text === void 0 ? void 0 : _this$config$text.sendButtonColor) || this.config.voiceSendButtonColor || '#7C3AED';
       var important = ' !important';
-      return "\n      /* Voice Interface Styles - Ultra-compact for Wix iframes */\n      .voice-interface { \n        display: none".concat(important, "; \n        flex: 1; \n        flex-direction: column;\n        align-items: stretch; \n        justify-content: flex-start; \n        padding: 0; \n        background: linear-gradient(180deg, #f8fafc 0%, #e0e7ff 100%);\n        overflow: hidden;\n        min-height: 0;\n        height: 100%;\n        width: 100%;\n        box-sizing: border-box;\n      }\n      .voice-interface.active { display: flex").concat(important, "; }\n      \n      /* Voice States - Better scaling gaps */\n      #voiceIdleState {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n        justify-content: center;\n        overflow: hidden;\n        flex: 1;\n        box-sizing: border-box;\n        gap: clamp(6px, 1.5vh, 12px);\n      }\n      \n      #voiceActiveState {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n        justify-content: flex-start;\n        overflow: hidden;\n        flex: 1;\n        box-sizing: border-box;\n        gap: 0;\n        padding: 0;\n      }\n      \n      #voiceActiveState[style*=\"display: none\"] {\n        display: none !important;\n      }\n      \n      /* Voice Avatar - Scales better from small to large */\n      .voice-avatar,\n      .voice-avatar-active {\n        width: clamp(80px, 18vh, 160px);\n        height: clamp(80px, 18vh, 160px);\n        aspect-ratio: 1;\n        border-radius: 50%;\n        background: linear-gradient(135deg, ").concat(avatarBg, " 0%, ").concat(avatarActiveBg, " 100%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: clamp(40px, 9vh, 80px);\n        margin: 0;\n        box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);\n        transition: all 0.3s ease;\n        flex-shrink: 0;\n        position: relative;\n      }\n      \n      .voice-avatar-active {\n        animation: avatarPulse 2s ease-in-out infinite;\n      }\n      \n      @keyframes avatarPulse {\n        0%, 100% { \n          transform: scale(1);\n        }\n        50% { \n          transform: scale(1.05);\n        }\n      }\n      \n      .voice-avatar-active.speaking {\n        animation: avatarSpeak 0.5s ease-in-out infinite;\n      }\n      \n      @keyframes avatarSpeak {\n        0%, 100% { transform: scale(1); }\n        50% { transform: scale(1.08); }\n      }\n      \n      /* Voice Rings Animation */\n      .voice-rings {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n      }\n      \n      .voice-ring {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        border: 2px solid rgba(102, 126, 234, 0.3);\n        border-radius: 50%;\n        opacity: 0;\n        animation: ringExpand 2s ease-out infinite;\n      }\n      \n      .voice-ring:nth-child(2) { animation-delay: 0.5s; }\n      .voice-ring:nth-child(3) { animation-delay: 1s; }\n      \n      @keyframes ringExpand {\n        0% {\n          width: 100%;\n          height: 100%;\n          opacity: 0.6;\n        }\n        100% {\n          width: 160%;\n          height: 160%;\n          opacity: 0;\n        }\n      }\n      \n      /* Voice Status - Scales with container */\n      .voice-status {\n        text-align: center;\n        margin: 0;\n        flex-shrink: 0;\n        min-height: 0;\n      }\n      \n      .voice-status-title {\n        font-size: clamp(12px, 3vh, 20px);\n        font-weight: 600;\n        color: ").concat(statusTitleColor, ";\n        margin-bottom: clamp(2px, 0.5vh, 4px);\n        line-height: 1.2;\n      }\n      \n      .voice-status-subtitle {\n        font-size: clamp(10px, 2vh, 14px);\n        color: ").concat(statusSubtitleColor, ";\n        line-height: 1.2;\n      }\n      \n      /* Start Call Button - Scales with container */\n      .start-call-btn {\n        margin: 0;\n        width: min(280px, 70vw)").concat(important, ";\n        height: clamp(48px, 8vh, 64px)").concat(important, ";\n        border-radius: clamp(24px, 4vh, 32px)").concat(important, ";\n        border: none").concat(important, ";\n        background: ").concat(startCallBtnColor).concat(important, ";\n        color: ").concat(startCallBtnTextColor).concat(important, ";\n        font-size: clamp(14px, 2.5vh, 18px)").concat(important, ";\n        font-weight: 600").concat(important, ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        gap: clamp(8px, 1.5vh, 12px);\n        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);\n        transition: all 0.3s ease;\n        flex-shrink: 0;\n      }\n      \n      .start-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: auto").concat(important, ";\n        height: auto").concat(important, ";\n      }\n      \n      .start-call-btn svg {\n        width: clamp(22px, 4vh, 32px);\n        height: clamp(22px, 4vh, 32px);\n      }\n      \n      .start-call-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);\n      }\n      \n      .start-call-btn:active {\n        transform: translateY(-1px);\n      }\n      .start-call-btn:disabled {\n        cursor: not-allowed").concat(important, ";\n        opacity: 0.6").concat(important, ";\n      }\n      \n      /* Connecting Spinner */\n      .connecting-spinner {\n        display: inline-block;\n        width: 16px;\n        height: 16px;\n        border: 2px solid rgba(255, 255, 255, 0.3);\n        border-top-color: ").concat(startCallBtnTextColor, ";\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n        margin-right: 8px;\n        vertical-align: middle;\n      }\n      \n      @keyframes spin {\n        to { transform: rotate(360deg); }\n      }\n\n      \n      /* Voice Transcript - Scales with container */\n      .voice-transcript {\n        background: ").concat(transcriptBg, ";\n        padding: clamp(6px, 1.5vh, 12px);\n        border-radius: 10px;\n        width: min(360px, calc(100% - 40px));\n        margin: 0;\n        min-height: clamp(80px, 15vh, 120px);\n        max-height: clamp(100px, 18vh, 140px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n        flex-shrink: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        display: flex;\n        flex-direction: column;\n        box-sizing: border-box;\n      }\n      \n      .transcript-label {\n        font-size: clamp(8px, 1.4vh, 11px);\n        color: ").concat(transcriptLabelColor, ";\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.3px;\n        margin-bottom: clamp(3px, 0.6vh, 6px);\n        flex-shrink: 0;\n        word-wrap: break-word;\n      }\n      \n      .transcript-text {\n        font-size: clamp(11px, 2vh, 15px);\n        color: ").concat(transcriptTextColor, ";\n        line-height: 1.4;\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        word-wrap: break-word;\n        overflow-wrap: break-word;\n      }\n      \n      .transcript-text.empty {\n        color: #cbd5e1;\n        font-style: italic;\n      }\n      \n      /* Voice Text Input Area - Type while on voice call */\n      .voice-text-input-area {\n        width: 100%;\n        padding: 14px 16px;\n        margin: 0;\n        flex-shrink: 0;\n        background: #ffffff;\n        border-top: 1px solid rgba(0, 0, 0, 0.06);\n        box-sizing: border-box;\n      }\n      \n      .voice-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        background: #f1f5f9;\n        border-radius: 12px;\n        padding: 4px 4px 4px 14px;\n        border: 1px solid transparent;\n        transition: all 0.2s ease;\n      }\n      \n      .voice-input-wrapper:focus-within {\n        background: #fff;\n        border-color: #a855f7;\n        box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);\n      }\n      \n      .voice-text-input {\n        flex: 1;\n        border: none;\n        outline: none;\n        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 14px;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        background: transparent;\n        padding: 10px 0;\n      }\n      \n      .voice-text-input::placeholder {\n        color: #94a3b8;\n      }\n      \n      .voice-send-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 38px;\n        height: 38px;\n        border-radius: 10px;\n        border: none;\n        background: ").concat(voiceSendButtonColor).concat(important, ";\n        color: #fff;\n        cursor: pointer;\n        transition: transform 0.2s ease;\n        flex-shrink: 0;\n      }\n      \n      .voice-send-btn:hover:not(:disabled) {\n        transform: scale(1.05);\n      }\n      \n      .voice-send-btn:active:not(:disabled) {\n        transform: scale(0.95);\n      }\n      \n      .voice-send-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        transform: none;\n      }\n      \n      .voice-send-btn svg {\n        width: 16px;\n        height: 16px;\n      }\n      \n      .voice-input-hint {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 5px;\n        margin-top: 10px;\n        font-size: 11px;\n        color: #64748b;\n        transition: color 0.2s ease;\n      }\n      \n      .voice-input-hint svg {\n        width: 12px;\n        height: 12px;\n        color: #10b981;\n      }\n      \n      /* Text input status states */\n      .voice-input-hint--sending {\n        color: #666;\n      }\n      \n      .voice-input-hint--success {\n        color: #28a745;\n      }\n      \n      .voice-input-hint--queued {\n        color: #ffc107;\n      }\n      \n      .voice-input-hint--error {\n        color: #dc3545;\n      }\n      \n      /* Disabled input styling */\n      .voice-text-input:disabled,\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5;\n        cursor: not-allowed;\n      }\n      \n      .voice-send-btn:disabled,\n      #mobileSendBtn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n      \n      /* Voice Controls - Scales with container */\n      .voice-controls {\n        display: flex;\n        gap: clamp(8px, 1.8vh, 14px);\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        margin: 0;\n        padding-top: 0;\n      }\n      \n      .voice-control-btn {\n        width: clamp(48px, 9vh, 72px)").concat(important, ";\n        height: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        aspect-ratio: 1").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        transition: all 0.2s;\n        position: relative").concat(important, ";\n        flex-shrink: 0;\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      .voice-control-btn svg {\n        width: 48%").concat(important, ";\n        height: 48%").concat(important, ";\n        min-width: 48%").concat(important, ";\n        min-height: 48%").concat(important, ";\n        max-width: 48%").concat(important, ";\n        max-height: 48%").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      \n      .voice-control-btn.primary {\n        width: clamp(54px, 10vh, 80px)").concat(important, ";\n        height: clamp(54px, 10vh, 80px)").concat(important, ";\n        min-width: clamp(54px, 10vh, 80px)").concat(important, ";\n        min-height: clamp(54px, 10vh, 80px)").concat(important, ";\n        max-width: clamp(54px, 10vh, 80px)").concat(important, ";\n        max-height: clamp(54px, 10vh, 80px)").concat(important, ";\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)").concat(important, ";\n        color: white").concat(important, ";\n        box-shadow: 0 6px 18px rgba(102, 126, 234, 0.4);\n      }\n      \n      .voice-control-btn.primary:hover {\n        transform: scale(1.05);\n      }\n      \n      .voice-control-btn.primary.active {\n        background: ").concat(endCallBtnColor).concat(important, ";\n        animation: recordingPulse 1.5s ease-in-out infinite;\n      }\n      .voice-control-btn.primary.active svg {\n        fill: white").concat(important, ";\n      }\n      \n      /* More specific selectors for WordPress compatibility */\n      #endCallBtn.voice-control-btn.primary.active,\n      #muteBtn.voice-control-btn.secondary,\n      #speakerBtn.voice-control-btn.secondary {\n        border-radius: 50% !important;\n        width: clamp(48px, 9vh, 72px) !important;\n        height: clamp(48px, 9vh, 72px) !important;\n        min-width: clamp(48px, 9vh, 72px) !important;\n        min-height: clamp(48px, 9vh, 72px) !important;\n        max-width: clamp(48px, 9vh, 72px) !important;\n        max-height: clamp(48px, 9vh, 72px) !important;\n        aspect-ratio: 1 !important;\n        overflow: hidden !important;\n      }\n      \n      #endCallBtn.voice-control-btn.primary.active {\n        width: clamp(54px, 10vh, 80px) !important;\n        height: clamp(54px, 10vh, 80px) !important;\n        min-width: clamp(54px, 10vh, 80px) !important;\n        min-height: clamp(54px, 10vh, 80px) !important;\n        max-width: clamp(54px, 10vh, 80px) !important;\n        max-height: clamp(54px, 10vh, 80px) !important;\n      }\n      \n      \n      /* Microphone button specific background color */\n      #muteBtn.voice-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      /* Speaker button specific background color */\n      #speakerBtn.voice-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      \n      #endCallBtn.voice-control-btn.primary.active svg,\n      #muteBtn.voice-control-btn.secondary svg,\n      #speakerBtn.voice-control-btn.secondary svg {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n        width: 48% !important;\n        height: 48% !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        position: relative !important;\n      }\n      \n      @keyframes recordingPulse {\n        0%, 100% { \n          box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);\n        }\n        50% { \n          box-shadow: 0 6px 24px rgba(239, 68, 68, 0.7);\n        }\n      }\n      \n      .voice-control-btn.secondary {\n        background: ").concat(controlBtnColor).concat(important, ";\n        color: ").concat(controlBtnSecondaryColor).concat(important, ";\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\n        width: clamp(48px, 9vh, 72px)").concat(important, ";\n        height: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-height: clamp(48px, 9vh, 72px)").concat(important, ";\n      }\n      \n      .voice-control-btn.secondary:hover {\n        background: #f8fafc").concat(important, ";\n        transform: scale(1.05);\n      }\n      \n      .voice-control-btn.secondary.muted {\n        background: #f3f4f6").concat(important, ";\n      }\n      \n      .voice-control-btn.secondary.muted .mute-icon {\n        stroke: #9ca3af !important;\n      }\n      \n      .voice-control-btn.secondary svg {\n        width: 48%").concat(important, ";\n        height: 48%").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n      \n      .voice-timer {\n        position: absolute;\n        bottom: clamp(-18px, -3vh, -24px);\n        font-size: clamp(9px, 1.6vh, 12px);\n        color: #64748b;\n        font-weight: 500;\n        white-space: nowrap;\n      }\n      \n      /* ===== DESKTOP VOICE SECTION - New Design ===== */\n      .desktop-voice-section {\n        padding: 16px 20px;\n        background: linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.04) 100%);\n        width: 100%;\n        flex-shrink: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n        box-sizing: border-box;\n        text-align: center;\n      }\n      \n      /* Ensure all children are centered */\n      .desktop-voice-section > * {\n        margin-left: auto;\n        margin-right: auto;\n      }\n      \n      .desktop-timer {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 6px !important;\n        padding: 5px 10px !important;\n        background: rgba(0, 0, 0, 0.05) !important;\n        border-radius: 20px !important;\n        font-family: 'JetBrains Mono', 'Courier New', monospace;\n        font-size: 11px !important;\n        color: #64748b !important;\n        margin: 0 auto !important;\n      }\n      \n      .desktop-timer .timer-dot {\n        width: 5px").concat(important, ";\n        height: 5px").concat(important, ";\n        background: #ef4444").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: timerPulse 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      @keyframes timerPulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n      }\n      \n      .desktop-avatar-container {\n        margin-bottom: 12px;\n      }\n      \n      .desktop-avatar-large {\n        width: 80px !important;\n        height: 80px !important;\n        border-radius: 20px !important;\n        margin: 0 auto 12px !important;\n        box-shadow: 0 8px 24px rgba(168, 85, 247, 0.35) !important;\n        background: linear-gradient(135deg, ").concat(avatarBg, " 0%, ").concat(avatarActiveBg, " 100%) !important;\n      }\n      \n      .desktop-waveform {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 4px !important;\n        height: 36px !important;\n        width: 100% !important;\n      }\n      \n      .desktop-waveform-bar {\n        width: 4px !important;\n        background: rgba(255, 255, 255, 0.9) !important;\n        border-radius: 2px !important;\n        animation: waveformAnimation 0.8s ease-in-out infinite !important;\n      }\n      \n      .desktop-waveform-bar[data-index=\"0\"] { height: 14px !important; animation-delay: 0s !important; }\n      .desktop-waveform-bar[data-index=\"1\"] { height: 26px !important; animation-delay: 0.1s !important; }\n      .desktop-waveform-bar[data-index=\"2\"] { height: 36px !important; animation-delay: 0.2s !important; }\n      .desktop-waveform-bar[data-index=\"3\"] { height: 22px !important; animation-delay: 0.3s !important; }\n      .desktop-waveform-bar[data-index=\"4\"] { height: 16px !important; animation-delay: 0.4s !important; }\n      \n      @keyframes waveformAnimation {\n        0%, 100% { transform: scaleY(0.5); }\n        50% { transform: scaleY(1); }\n      }\n      \n      .desktop-waveform.paused .desktop-waveform-bar {\n        animation-play-state: paused;\n      }\n\n      /* New main waveform (used in updated template) */\n      .desktop-main-waveform {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 3px !important;\n        height: 48px !important;\n        width: 100% !important;\n        max-width: 200px !important;\n        margin: 0 auto !important;\n        padding: 0 20px !important;\n      }\n\n      .desktop-main-waveform .waveform-bar {\n        width: 3px !important;\n        background: #a855f7 !important;\n        border-radius: 2px !important;\n        height: 8px !important;\n        animation: waveformAnimation 0.8s ease-in-out infinite !important;\n      }\n\n      .desktop-main-waveform .waveform-bar:nth-child(1) { height: 12px !important; animation-delay: 0s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(2) { height: 20px !important; animation-delay: 0.05s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(3) { height: 28px !important; animation-delay: 0.1s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(4) { height: 36px !important; animation-delay: 0.15s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(5) { height: 44px !important; animation-delay: 0.2s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(6) { height: 50px !important; animation-delay: 0.25s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(7) { height: 54px !important; animation-delay: 0.3s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(8) { height: 56px !important; animation-delay: 0.35s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(9) { height: 54px !important; animation-delay: 0.4s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(10) { height: 50px !important; animation-delay: 0.45s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(11) { height: 44px !important; animation-delay: 0.5s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(12) { height: 36px !important; animation-delay: 0.55s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(13) { height: 28px !important; animation-delay: 0.6s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(14) { height: 20px !important; animation-delay: 0.65s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(15) { height: 12px !important; animation-delay: 0.7s !important; }\n\n      .desktop-status {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 5px !important;\n        font-size: 12px !important;\n        color: ").concat(statusTitleColor, ";\n        font-weight: 500;\n        width: 100%;\n        text-align: center;\n        margin: 0 auto;\n      }\n      \n      .desktop-status .status-dot {\n        width: 5px !important;\n        height: 5px !important;\n        background: ").concat(statusDotColor, " !important;\n        border-radius: 50% !important;\n        animation: statusPulse 1.5s ease-in-out infinite !important;\n      }\n      \n      @keyframes statusPulse {\n        0%, 100% { transform: scale(1); opacity: 1; }\n        50% { transform: scale(1.15); opacity: 0.8; }\n      }\n      \n      .desktop-live-waveform {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        height: 48px;\n        margin-bottom: 20px;\n      }\n      \n      .desktop-live-bar {\n        width: 3px;\n        background: linear-gradient(180deg, ").concat(avatarBg, ", ").concat(avatarActiveBg, ");\n        border-radius: 2px;\n        transition: height 0.1s ease;\n        height: 8px;\n      }\n      \n      .desktop-controls {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        margin: 0 auto;\n      }\n      \n      .desktop-control-btn {\n        width: 46px;\n        height: 46px;\n        border-radius: 50%;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      }\n      \n      .desktop-control-btn svg {\n        width: 20px;\n        height: 20px;\n      }\n      \n      .desktop-mic-icon,\n      .desktop-speaker-icon {\n        width: 20px !important;\n        height: 20px !important;\n        display: block;\n        flex-shrink: 0;\n      }\n      \n      .desktop-control-btn.secondary.muted .desktop-mic-icon,\n      .desktop-control-btn.secondary.muted .desktop-speaker-icon {\n        width: 20px !important;\n        height: 20px !important;\n      }\n      \n      \n      .desktop-control-btn.secondary:hover {\n        background: rgba(0, 0, 0, 0.1);\n        color: #1e293b;\n        transform: scale(1.05);\n      }\n      .desktop-control-btn.secondary.muted {\n        background: #f3f4f6;\n        color: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary.muted .desktop-mic-icon,\n      .desktop-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      /* Desktop speaker button background color */\n      #desktopSpeakerBtn.desktop-control-btn.secondary,\n      #desktopSpeakerBtnCompact.compact-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 46px;\n        height: 46px;\n        transform: translate(-50%, -50%);\n        z-index: 10;\n      }\n      .desktop-control-btn.danger {\n        width: 50px;\n        height: 50px;\n        background: ").concat(endCallBtnColor).concat(important, ";\n        color: #ffffff;\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);\n        overflow: visible;\n      }\n      \n      .desktop-control-btn.danger svg {\n        width: 20px;\n        height: 20px;\n        overflow: visible;\n      }\n      \n      .desktop-control-btn.danger:hover {\n        transform: scale(1.06);\n        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);\n      }\n      \n      .desktop-control-btn.danger:hover {\n        transform: scale(1.06);\n        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);\n      }\n      \n      \n      /* ===== COMPACT VOICE SECTION (Single-row layout) ===== */\n      .compact-voice-section {\n        padding: 10px 14px;\n        background: linear-gradient(180deg, #ffffff, rgba(168, 85, 247, 0.04));\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n        min-height: 62px;\n        flex-shrink: 0;\n      }\n      \n      .compact-left {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n      \n      .compact-avatar {\n        width: 42px;\n        height: 42px;\n        min-width: 42px;\n        min-height: 42px;\n        border-radius: 12px;\n        background: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: visible;\n        position: relative;\n      }\n      \n      /* Waveform container in compact avatar - ensure it's visible */\n      .compact-avatar .desktop-main-waveform {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 2px !important;\n        height: 100% !important;\n        width: 100% !important;\n        padding: 4px !important;\n        transform: scale(0.75) !important;\n        transform-origin: center !important;\n      }\n      \n      /* Ensure waveform bars are visible and animated in compact mode */\n      .compact-avatar .desktop-main-waveform .waveform-bar {\n        width: 2px !important;\n        min-width: 2px !important;\n        background: #a855f7 !important;\n        border-radius: 1px !important;\n        flex-shrink: 0 !important;\n        animation: waveformAnimation 0.8s ease-in-out infinite !important;\n      }\n      \n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(1) { height: 6px !important; animation-delay: 0s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(2) { height: 10px !important; animation-delay: 0.05s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(3) { height: 14px !important; animation-delay: 0.1s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(4) { height: 18px !important; animation-delay: 0.15s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(5) { height: 22px !important; animation-delay: 0.2s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(6) { height: 26px !important; animation-delay: 0.25s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(7) { height: 28px !important; animation-delay: 0.3s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(8) { height: 30px !important; animation-delay: 0.35s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(9) { height: 28px !important; animation-delay: 0.4s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(10) { height: 26px !important; animation-delay: 0.45s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(11) { height: 22px !important; animation-delay: 0.5s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(12) { height: 18px !important; animation-delay: 0.55s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(13) { height: 14px !important; animation-delay: 0.6s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(14) { height: 10px !important; animation-delay: 0.65s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(15) { height: 6px !important; animation-delay: 0.7s !important; }\n\n      }\n      \n      .compact-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      \n      .compact-timer {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        font-family: 'JetBrains Mono', 'Courier New', monospace;\n        font-size: 13px;\n        font-weight: 600;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n      }\n      \n      .compact-timer .timer-dot {\n        width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        background: #ef4444").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: timerPulse 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      .compact-status {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 4px").concat(important, ";\n        font-size: 11px").concat(important, ";\n        color: ").concat(statusTitleColor).concat(important, ";\n      }\n      \n      .compact-status .status-dot {\n        width: 5px").concat(important, ";\n        height: 5px").concat(important, ";\n        background: ").concat(statusDotColor).concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: statusPulse 1.5s ease-in-out infinite").concat(important, ";\n      }\n      \n      @keyframes statusPulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.7; transform: scale(1.1); }\n      }\n      \n      .compact-controls {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n      \n      .compact-control-btn {\n        width: 36px;\n        height: 36px;\n        min-width: 36px;\n        min-height: 36px;\n        border-radius: 50%;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        padding: 0;\n        position: relative;\n      }\n      \n      .compact-control-btn svg {\n        width: 16px;\n        height: 16px;\n      }\n      \n      .compact-control-btn.secondary {\n        background: #f1f5f9;\n        color: #64748b;\n      }\n      \n      \n      /* Compact speaker button background color */\n      #desktopSpeakerBtnCompact.compact-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      /* Compact microphone button background color */\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .compact-control-btn.secondary:hover {\n        background: #e2e8f0;\n        color: #475569;\n      }\n      \n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.1);\n        color: #ef4444;\n      }\n      \n      \n      .compact-control-btn.secondary.muted .desktop-mic-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #ef4444;\n      }\n      \n      .compact-control-btn.secondary.muted .desktop-mic-off-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-off-icon {\n        width: 46px;\n        height: 46px;\n      }\n\n      .compact-control-btn.danger {\n        width: 40px;\n        height: 40px;\n        min-width: 40px;\n        min-height: 40px;\n        background: ").concat(endCallBtnColor).concat(important, ";\n        color: white;\n        box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);\n      }\n      \n      .compact-control-btn.danger:hover {\n        transform: scale(1.05);\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);\n      }\n      \n      .compact-control-btn.danger svg {\n        width: 18px;\n        height: 18px;\n        overflow: visible;\n      }\n      \n/* ===== CONVERSATION PANEL ===== */\n      .desktop-conversation-panel {\n        border-top: 1px solid rgba(0, 0, 0, 0.06);\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n        flex: 1;\n      }\n      \n      .conversation-header {\n        padding: 10px 16px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background: #fafafa;\n        cursor: pointer;\n        flex-shrink: 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.04);\n        transition: background 0.2s ease;\n      }\n      \n      .conversation-header:hover {\n        background: #f5f5f5;\n      }\n      \n      .conversation-label {\n        font-size: 11px;\n        font-weight: 600;\n        color: #64748b;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      \n      .conversation-toggle {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        font-size: 11px;\n        color: #94a3b8;\n        font-weight: 500;\n      }\n      \n      .conversation-toggle svg {\n        transition: transform 0.2s ease;\n      }\n      \n      .conversation-header.expanded .conversation-toggle svg {\n        transform: rotate(180deg);\n      }\n      \n      /* ===== COLLAPSED: Live Transcript Only (2 lines) ===== */\n      .live-transcript-collapsed {\n        padding: 12px 16px;\n        background: #fafafa;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        flex-shrink: 0;\n        min-height: 50px;\n      }\n      \n      .live-indicator {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        font-size: 9px;\n        font-weight: 700;\n        color: ").concat(liveIndicatorTextColor).concat(important, ";\n        text-transform: uppercase;\n        letter-spacing: 0.08em;\n      }\n      \n      .live-indicator .live-dot {\n        height: 5px;\n        width: 5px;\n        background: ").concat(liveIndicatorDotColor).concat(important, ";\n        border-radius: 50%;\n        animation: statusPulse 1.5s ease-in-out infinite;\n      }\n      \n      .live-text-collapsed {\n        font-size: ").concat(liveTranscriptFontSize).concat(important, ";\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        line-height: 1.5;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n      \n      .live-text-collapsed.muted {\n        color: #94a3b8;\n        font-style: italic;\n      }\n      \n      .typing-cursor {\n        display: inline-block;\n        width: 2px;\n        height: 14px;\n        background: #a855f7;\n        margin-left: 2px;\n        animation: blink 1s step-end infinite;\n        vertical-align: middle;\n      }\n      \n      @keyframes blink {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0; }\n      }\n      \n      /* ===== EXPANDED: Full Conversation History ===== */\n      .conversation-history {\n        flex: 1;\n        flex-direction: column;\n        gap: 10px;\n        overflow-y: auto;\n        padding: 14px 16px;\n        min-height: 0;\n      }\n      .conversation-history.visible {\n        display: flex;\n      }\n\n      .conversation-messages {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n      }\n\n      /* Message Rows */\n      .message-row {\n        display: flex;\n        gap: 8px;\n        animation: msgIn 0.25s ease;\n      }\n      \n      @keyframes msgIn {\n        from { opacity: 0; transform: translateY(8px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n      @keyframes slideIn {\n        from { opacity: 0; transform: translateY(-10px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n      \n      @keyframes slideOut {\n        from { opacity: 1; transform: translateY(0); }\n        to { opacity: 0; transform: translateY(-10px); }\n      }\n      \n      .message-row.user {\n        flex-direction: row-reverse;\n      }\n      \n      .message-avatar {\n        width: 28px;\n        height: 28px;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n      }\n\n      .message-avatar.assistant {\n        background: linear-gradient(135deg, #c084fc, #a855f7);\n      }\n\n      .message-avatar.assistant .orb {\n        width: 12px;\n        height: 12px;\n        background: rgba(255, 255, 255, 0.9);\n        border-radius: 50%;\n      }\n\n      .message-avatar.user {\n        background: linear-gradient(135deg, #64748b, #475569);\n        color: #fff;\n        font-size: 11px;\n        font-weight: 600;\n      }\n\n      .message-bubble {\n        max-width: 80%;\n        padding: 9px 13px;\n        border-radius: 12px;\n        font-size: 13px;\n        line-height: 1.5;\n      }\n      \n      .message-row.assistant .message-bubble {\n        background: #fff;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        border: 1px solid rgba(0, 0, 0, 0.06);\n        border-bottom-left-radius: 4px;\n      }\n      \n      .message-row.user .message-bubble {\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n      \n      /* Live message at bottom of history */\n      .live-message-row {\n        display: flex;\n        gap: 8px;\n        padding-top: 8px;\n        border-top: 1px dashed rgba(0, 0, 0, 0.08);\n        margin-top: auto;\n      }\n      \n      .live-message-row .message-bubble {\n        background: #fff;\n        border: 1px solid rgba(16, 185, 129, 0.3);\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        position: relative;\n        border-radius: 14px;\n        border-bottom-left-radius: 4px;\n      }\n      \n      .live-message-row .live-badge {\n        position: absolute;\n        top: -8px;\n        left: 10px;\n        background: #10b981;\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.05em;\n      }\n      \n      /* Hide/show based on expanded state */\n      .desktop-conversation-panel.collapsed .conversation-history {\n        display: none;\n      }\n      \n      .desktop-conversation-panel.collapsed .live-transcript-collapsed {\n        display: flex;\n      }\n      \n      .desktop-conversation-panel.expanded .conversation-history {\n        display: flex;\n        max-height: 400px;\n      }\n      \n      .desktop-conversation-panel.expanded .live-transcript-collapsed {\n        display: none;\n      }\n      \n            /* ===== DARK MODE SUPPORT ===== */\n      @media (prefers-color-scheme: dark) {\n        .desktop-voice-section {\n          background: linear-gradient(180deg, #1e1e2e 0%, rgba(168, 85, 247, 0.08) 100%);\n        }\n\n        .desktop-timer {\n          color: #94a3b8;\n        }\n\n        .desktop-status {\n          color: #34d399;\n        }\n\n        .desktop-status .status-dot {\n      \n      .desktop-control-btn.secondary.muted {\n        background: rgba(255, 255, 255, 0.1);\n        color: #9ca3af;\n      \n      .compact-voice-section {\n        background: linear-gradient(180deg, #1e1e2e 0%, rgba(168, 85, 247, 0.08) 100%);\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n      }\n      \n      .compact-timer {\n        color: #e2e8f0;\n      }\n      \n      .compact-status {\n        color: #34d399;\n      }\n      \n      .compact-status .status-dot {\n        background: #34d399;\n      }\n      \n      .compact-control-btn.secondary {\n        background: rgba(255, 255, 255, 0.08);\n        color: #94a3b8;\n      }\n      \n      .compact-control-btn.secondary:hover {\n        background: rgba(255, 255, 255, 0.15);\n        color: #e2e8f0;\n      }\n      \n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.2);\n        color: #f87171;\n      }\n\n      }\n      \n      .desktop-control-btn.secondary.muted svg {\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 20px;\n      }\n      \n      .desktop-control-btn.secondary.muted {\n        background: #f3f4f6;\n        color: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary.muted svg {\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 20px;\n      }\n        stroke: #9ca3af;\n      }\n        stroke: #9ca3af;\n      }\n          background: #34d399;\n        }\n\n        .desktop-control-btn.secondary {\n          background: rgba(255, 255, 255, 0.08);\n          color: #94a3b8;\n        }\n\n        .desktop-control-btn.secondary:hover {\n          background: rgba(255, 255, 255, 0.15);\n          color: #e2e8f0;\n        }\n\n        .desktop-conversation-panel {\n          border-top: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .conversation-header {\n          background: #1a1a2e;\n        }\n\n        .conversation-header:hover {\n          background: #252540;\n        }\n\n        .conversation-label {\n          color: #94a3b8;\n        }\n\n        .conversation-toggle {\n          color: #64748b;\n        }\n\n        .live-transcript-preview {\n          background: #1a1a2e;\n        }\n        .live-indicator {\n          color: ").concat(liveIndicatorTextColor).concat(important, ";\n        }\n        .live-indicator .live-dot {\n          background: ").concat(liveIndicatorDotColor).concat(important, ";\n        }\n\n        .live-text {\n          color: #e2e8f0;\n        }\n\n        .live-text.muted {\n          color: #64748b;\n        }\n\n        .conversation-history {\n          background: #1a1a2e;\n        }\n\n        .conversation-msg.assistant .conversation-msg-bubble {\n          background: #252540;\n          color: #e2e8f0;\n          border: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .voice-text-input-area {\n          background: #1a1a2e;\n        }\n\n        .voice-text-input {\n          background: #252540 !important;\n          color: #e2e8f0 !important;\n          border-color: rgba(255, 255, 255, 0.1) !important;\n        }\n\n        .voice-text-input::placeholder {\n          color: #64748b !important;\n        }\n\n        .voice-text-input:focus {\n          border-color: ").concat(avatarBg, " !important;\n          box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;\n        }\n\n        .voice-input-hint {\n          color: #64748b !important;\n        }\n\n        .voice-send-btn {\n          background: ").concat(voiceSendButtonColor, " !important;\n        }\n\n        .voice-send-btn:disabled {\n          background: #374151 !important;\n          color: #4b5563 !important;\n        }\n      }\n\n      /* Mobile optimization */\n      @media (max-width: 768px) {\n        .voice-interface {\n          padding: 6px 10px;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        .voice-interface {\n          padding: 5px 8px;\n        }\n      }\n      \n      /* Mobile Voice Call UI - Shared styles (also used in generateMobileCSS) */\n      ").concat(this._getSharedMobileCSS(important), "\n\n    ");
+      return "\n      /* Voice Interface Styles - Ultra-compact for Wix iframes */\n      .voice-interface { \n        display: none".concat(important, "; \n        flex: 1; \n        flex-direction: column;\n        align-items: stretch; \n        justify-content: flex-start; \n        padding: 0; \n        background: linear-gradient(180deg, #f8fafc 0%, #e0e7ff 100%);\n        overflow: hidden;\n        min-height: 0;\n        height: 100%;\n        width: 100%;\n        box-sizing: border-box;\n      }\n      .voice-interface.active { display: flex").concat(important, "; }\n      \n      /* Voice States - Better scaling gaps */\n      #voiceIdleState {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n        justify-content: center;\n        overflow: hidden;\n        flex: 1;\n        box-sizing: border-box;\n        gap: clamp(6px, 1.5vh, 12px);\n      }\n      \n      #voiceActiveState {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n        justify-content: flex-start;\n        overflow: hidden;\n        flex: 1;\n        box-sizing: border-box;\n        gap: 0;\n        padding: 0;\n      }\n      \n      #voiceActiveState[style*=\"display: none\"] {\n        display: none !important;\n      }\n      \n      /* Voice Avatar - Scales better from small to large */\n      .voice-avatar,\n      .voice-avatar-active {\n        width: clamp(80px, 18vh, 160px);\n        height: clamp(80px, 18vh, 160px);\n        aspect-ratio: 1;\n        border-radius: 50%;\n        background: linear-gradient(135deg, ").concat(avatarBg, " 0%, ").concat(avatarActiveBg, " 100%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: clamp(40px, 9vh, 80px);\n        margin: 0;\n        box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);\n        transition: all 0.3s ease;\n        flex-shrink: 0;\n        position: relative;\n      }\n      \n      .voice-avatar-active {\n        animation: avatarPulse 2s ease-in-out infinite;\n      }\n      \n      @keyframes avatarPulse {\n        0%, 100% { \n          transform: scale(1);\n        }\n        50% { \n          transform: scale(1.05);\n        }\n      }\n      \n      .voice-avatar-active.speaking {\n        animation: avatarSpeak 0.5s ease-in-out infinite;\n      }\n      \n      @keyframes avatarSpeak {\n        0%, 100% { transform: scale(1); }\n        50% { transform: scale(1.08); }\n      }\n      \n      /* Voice Rings Animation */\n      .voice-rings {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n      }\n      \n      .voice-ring {\ndisplay: block !important;\n                position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        border: 2px solid rgba(102, 126, 234, 0.3);\n        border-radius: 50%;\n        opacity: 0;\n        animation: ringExpand 2s ease-out infinite;\n      }\n      \n      .voice-ring:nth-child(2) { animation-delay: 0.5s; }\n      .voice-ring:nth-child(3) { animation-delay: 1s; }\n      \n      @keyframes ringExpand {\n        0% {\n          width: 100%;\n          height: 100%;\n          opacity: 0.6;\n        }\n        100% {\n          width: 160%;\n          height: 160%;\n          opacity: 0;\n        }\n      }\n      \n      /* Voice Status - Scales with container */\n      .voice-status {\n        text-align: center;\n        margin: 0;\n        flex-shrink: 0;\n        min-height: 0;\n      }\n      \n      .voice-status-title {\n        font-size: clamp(12px, 3vh, 20px);\n        font-weight: 600;\n        color: ").concat(statusTitleColor, ";\n        margin-bottom: clamp(2px, 0.5vh, 4px);\n        line-height: 1.2;\n      }\n      \n      .voice-status-subtitle {\n        font-size: clamp(10px, 2vh, 14px);\n        color: ").concat(statusSubtitleColor, ";\n        line-height: 1.2;\n      }\n      \n      /* Start Call Button - Scales with container */\n      .start-call-btn {\n        margin: 0;\n        width: min(280px, 70vw)").concat(important, ";\n        height: clamp(48px, 8vh, 64px)").concat(important, ";\n        border-radius: clamp(24px, 4vh, 32px)").concat(important, ";\n        border: none").concat(important, ";\n        background: ").concat(startCallBtnColor).concat(important, ";\n        color: ").concat(startCallBtnTextColor).concat(important, ";\n        font-size: clamp(14px, 2.5vh, 18px)").concat(important, ";\n        font-weight: 600").concat(important, ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        gap: clamp(8px, 1.5vh, 12px);\n        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);\n        transition: all 0.3s ease;\n        flex-shrink: 0;\n      }\n      \n      .start-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: auto").concat(important, ";\n        height: auto").concat(important, ";\n      }\n      \n      .start-call-btn svg {\n        width: clamp(22px, 4vh, 32px);\n        height: clamp(22px, 4vh, 32px);\n      }\n      \n      .start-call-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);\n      }\n      \n      .start-call-btn:active {\n        transform: translateY(-1px);\n      }\n      .start-call-btn:disabled {\n        cursor: not-allowed").concat(important, ";\n        opacity: 0.6").concat(important, ";\n      }\n      \n      /* Connecting Spinner */\n      .connecting-spinner {\n        display: inline-block;\n        width: 16px;\n        height: 16px;\n        border: 2px solid rgba(255, 255, 255, 0.3);\n        border-top-color: ").concat(startCallBtnTextColor, ";\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n        margin-right: 8px;\n        vertical-align: middle;\n      }\n      \n      @keyframes spin {\n        to { transform: rotate(360deg); }\n      }\n\n      \n      /* Voice Transcript - Scales with container */\n      .voice-transcript {\n        background: ").concat(transcriptBg, ";\n        padding: clamp(6px, 1.5vh, 12px);\n        border-radius: 10px;\n        width: min(360px, calc(100% - 40px));\n        margin: 0;\n        min-height: clamp(80px, 15vh, 120px);\n        max-height: clamp(100px, 18vh, 140px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n        flex-shrink: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        display: flex;\n        flex-direction: column;\n        box-sizing: border-box;\n      }\n      \n      .transcript-label {\n        font-size: clamp(8px, 1.4vh, 11px);\n        color: ").concat(transcriptLabelColor, ";\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.3px;\n        margin-bottom: clamp(3px, 0.6vh, 6px);\n        flex-shrink: 0;\n        word-wrap: break-word;\n      }\n      \n      .transcript-text {\n        font-size: clamp(11px, 2vh, 15px);\n        color: ").concat(transcriptTextColor, ";\n        line-height: 1.4;\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        word-wrap: break-word;\n        overflow-wrap: break-word;\n      }\n      \n      .transcript-text.empty {\n        color: #cbd5e1;\n        font-style: italic;\n      }\n      \n      /* Voice Text Input Area - Type while on voice call */\n      .voice-text-input-area {\n        width: 100%;\n        padding: 14px 16px;\n        margin: 0;\n        flex-shrink: 0;\n        background: #ffffff;\n        border-top: 1px solid rgba(0, 0, 0, 0.06);\n        box-sizing: border-box;\n      }\n      \n      .voice-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        background: #f1f5f9;\n        border-radius: 12px;\n        padding: 4px 4px 4px 14px;\n        border: 1px solid transparent;\n        transition: all 0.2s ease;\n      }\n      \n      .voice-input-wrapper:focus-within {\n        background: #fff;\n        border-color: #a855f7;\n        box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);\n      }\n      \n      .voice-text-input {\n        flex: 1;\n        border: none;\n        outline: none;\n        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 14px;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        background: transparent;\n        padding: 10px 0;\n      }\n      \n      .voice-text-input::placeholder {\n        color: #94a3b8;\n      }\n      \n      .voice-send-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 38px;\n        height: 38px;\n        border-radius: 10px;\n        border: none;\n        background: ").concat(voiceSendButtonColor).concat(important, ";\n        color: #fff;\n        cursor: pointer;\n        transition: transform 0.2s ease;\n        flex-shrink: 0;\n      }\n      \n      .voice-send-btn:hover:not(:disabled) {\n        transform: scale(1.05);\n      }\n      \n      .voice-send-btn:active:not(:disabled) {\n        transform: scale(0.95);\n      }\n      \n      .voice-send-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        transform: none;\n      }\n      \n      .voice-send-btn svg {\n        width: 16px;\n        height: 16px;\n      }\n      \n      .voice-input-hint {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 5px;\n        margin-top: 10px;\n        font-size: 11px;\n        color: #64748b;\n        transition: color 0.2s ease;\n      }\n      \n      .voice-input-hint svg {\n        width: 12px;\n        height: 12px;\n        color: #10b981;\n      }\n      \n      /* Text input status states */\n      .voice-input-hint--sending {\n        color: #666;\n      }\n      \n      .voice-input-hint--success {\n        color: #28a745;\n      }\n      \n      .voice-input-hint--queued {\n        color: #ffc107;\n      }\n      \n      .voice-input-hint--error {\n        color: #dc3545;\n      }\n      \n      /* Disabled input styling */\n      .voice-text-input:disabled,\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5;\n        cursor: not-allowed;\n      }\n      \n      .voice-send-btn:disabled,\n      #mobileSendBtn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n      \n      /* Voice Controls - Scales with container */\n      .voice-controls {\n        display: flex;\n        gap: clamp(8px, 1.8vh, 14px);\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        margin: 0;\n        padding-top: 0;\n      }\n      \n      .voice-control-btn {\n        width: clamp(48px, 9vh, 72px)").concat(important, ";\n        height: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        aspect-ratio: 1").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        transition: all 0.2s;\n        position: relative").concat(important, ";\n        flex-shrink: 0;\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      .voice-control-btn svg {\n        width: 48%").concat(important, ";\n        height: 48%").concat(important, ";\n        min-width: 48%").concat(important, ";\n        min-height: 48%").concat(important, ";\n        max-width: 48%").concat(important, ";\n        max-height: 48%").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      \n      .voice-control-btn.primary {\n        width: clamp(54px, 10vh, 80px)").concat(important, ";\n        height: clamp(54px, 10vh, 80px)").concat(important, ";\n        min-width: clamp(54px, 10vh, 80px)").concat(important, ";\n        min-height: clamp(54px, 10vh, 80px)").concat(important, ";\n        max-width: clamp(54px, 10vh, 80px)").concat(important, ";\n        max-height: clamp(54px, 10vh, 80px)").concat(important, ";\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)").concat(important, ";\n        color: white").concat(important, ";\n        box-shadow: 0 6px 18px rgba(102, 126, 234, 0.4);\n      }\n      \n      .voice-control-btn.primary:hover {\n        transform: scale(1.05);\n      }\n      \n      .voice-control-btn.primary.active {\n        background: ").concat(endCallBtnColor).concat(important, ";\n        animation: recordingPulse 1.5s ease-in-out infinite;\n      }\n      .voice-control-btn.primary.active svg {\n        fill: white").concat(important, ";\n      }\n      \n      /* More specific selectors for WordPress compatibility */\n      #endCallBtn.voice-control-btn.primary.active,\n      #muteBtn.voice-control-btn.secondary,\n      #speakerBtn.voice-control-btn.secondary {\n        border-radius: 50% !important;\n        width: clamp(48px, 9vh, 72px) !important;\n        height: clamp(48px, 9vh, 72px) !important;\n        min-width: clamp(48px, 9vh, 72px) !important;\n        min-height: clamp(48px, 9vh, 72px) !important;\n        max-width: clamp(48px, 9vh, 72px) !important;\n        max-height: clamp(48px, 9vh, 72px) !important;\n        aspect-ratio: 1 !important;\n        overflow: hidden !important;\n      }\n      \n      #endCallBtn.voice-control-btn.primary.active {\n        width: clamp(54px, 10vh, 80px) !important;\n        height: clamp(54px, 10vh, 80px) !important;\n        min-width: clamp(54px, 10vh, 80px) !important;\n        min-height: clamp(54px, 10vh, 80px) !important;\n        max-width: clamp(54px, 10vh, 80px) !important;\n        max-height: clamp(54px, 10vh, 80px) !important;\n      }\n      \n      \n      /* Microphone button specific background color */\n      #muteBtn.voice-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      /* Speaker button specific background color */\n      #speakerBtn.voice-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      \n      #endCallBtn.voice-control-btn.primary.active svg,\n      #muteBtn.voice-control-btn.secondary svg,\n      #speakerBtn.voice-control-btn.secondary svg {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n        width: 48% !important;\n        height: 48% !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        position: relative !important;\n      }\n      \n      @keyframes recordingPulse {\n        0%, 100% { \n          box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);\n        }\n        50% { \n          box-shadow: 0 6px 24px rgba(239, 68, 68, 0.7);\n        }\n      }\n      \n      .voice-control-btn.secondary {\n        background: ").concat(controlBtnColor).concat(important, ";\n        color: ").concat(controlBtnSecondaryColor).concat(important, ";\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\n        width: clamp(48px, 9vh, 72px)").concat(important, ";\n        height: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-height: clamp(48px, 9vh, 72px)").concat(important, ";\n      }\n      \n      .voice-control-btn.secondary:hover {\n        background: #f8fafc").concat(important, ";\n        transform: scale(1.05);\n      }\n      \n      .voice-control-btn.secondary.muted {\n        background: #f3f4f6").concat(important, ";\n      }\n      \n      .voice-control-btn.secondary.muted .mute-icon {\n        stroke: #9ca3af !important;\n      }\n      \n      .voice-control-btn.secondary svg {\n        width: 48%").concat(important, ";\n        height: 48%").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n      \n      .voice-timer {\n        position: absolute;\n        bottom: clamp(-18px, -3vh, -24px);\n        font-size: clamp(9px, 1.6vh, 12px);\n        color: #64748b;\n        font-weight: 500;\n        white-space: nowrap;\n      }\n      \n      /* ===== DESKTOP VOICE SECTION - New Design ===== */\n      .desktop-voice-section {\n        padding: 16px 20px;\n        background: linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.04) 100%);\n        width: 100%;\n        flex-shrink: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n        box-sizing: border-box;\n        text-align: center;\n      }\n      \n      /* Ensure all children are centered */\n      .desktop-voice-section > * {\n        margin-left: auto;\n        margin-right: auto;\n      }\n      \n      .desktop-timer {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 6px !important;\n        padding: 5px 10px !important;\n        background: rgba(0, 0, 0, 0.05) !important;\n        border-radius: 20px !important;\n        font-family: 'JetBrains Mono', 'Courier New', monospace;\n        font-size: 11px !important;\n        color: #64748b !important;\n        margin: 0 auto !important;\n      }\n      \n      .desktop-timer .timer-dot {\n        display: block !important;\n        width: 5px").concat(important, ";\n        height: 5px").concat(important, ";\n        background: #ef4444").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: timerPulse 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      @keyframes timerPulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n      }\n      \n      .desktop-avatar-container {\n        margin-bottom: 12px;\n      }\n      \n      .desktop-avatar-large {\n        width: 80px !important;\n        height: 80px !important;\n        border-radius: 20px !important;\n        margin: 0 auto 12px !important;\n        box-shadow: 0 8px 24px rgba(168, 85, 247, 0.35) !important;\n        background: linear-gradient(135deg, ").concat(avatarBg, " 0%, ").concat(avatarActiveBg, " 100%) !important;\n      }\n      \n      .desktop-waveform {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 4px !important;\n        height: 36px !important;\n        width: 100% !important;\n      }\n      \n      .desktop-waveform-bar {\n        display: block !important;\n        width: 4px !important;\n        background: rgba(255, 255, 255, 0.9) !important;\n        border-radius: 2px !important;\n        animation: waveformAnimation 0.8s ease-in-out infinite !important;\n      }\n      \n      .desktop-waveform-bar[data-index=\"0\"] { height: 14px !important; animation-delay: 0s !important; }\n      .desktop-waveform-bar[data-index=\"1\"] { height: 26px !important; animation-delay: 0.1s !important; }\n      .desktop-waveform-bar[data-index=\"2\"] { height: 36px !important; animation-delay: 0.2s !important; }\n      .desktop-waveform-bar[data-index=\"3\"] { height: 22px !important; animation-delay: 0.3s !important; }\n      .desktop-waveform-bar[data-index=\"4\"] { height: 16px !important; animation-delay: 0.4s !important; }\n      \n      @keyframes waveformAnimation {\n        0%, 100% { transform: scaleY(0.5); }\n        50% { transform: scaleY(1); }\n      }\n      \n      .desktop-waveform.paused .desktop-waveform-bar {\n        animation-play-state: paused;\n      }\n\n      /* New main waveform (used in updated template) */\n      .desktop-main-waveform {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 3px !important;\n        height: 48px !important;\n        width: 100% !important;\n        max-width: 200px !important;\n        margin: 0 auto !important;\n        padding: 0 20px !important;\n      }\n\n      .desktop-main-waveform .waveform-bar {\n        display: block !important;\n        width: 3px !important;\n        background: #a855f7 !important;\n        border-radius: 2px !important;\n        height: 8px !important;\n        animation: waveformAnimation 0.8s ease-in-out infinite !important;\n      }\n\n      .desktop-main-waveform .waveform-bar:nth-child(1) { height: 12px !important; animation-delay: 0s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(2) { height: 20px !important; animation-delay: 0.05s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(3) { height: 28px !important; animation-delay: 0.1s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(4) { height: 36px !important; animation-delay: 0.15s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(5) { height: 44px !important; animation-delay: 0.2s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(6) { height: 50px !important; animation-delay: 0.25s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(7) { height: 54px !important; animation-delay: 0.3s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(8) { height: 56px !important; animation-delay: 0.35s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(9) { height: 54px !important; animation-delay: 0.4s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(10) { height: 50px !important; animation-delay: 0.45s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(11) { height: 44px !important; animation-delay: 0.5s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(12) { height: 36px !important; animation-delay: 0.55s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(13) { height: 28px !important; animation-delay: 0.6s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(14) { height: 20px !important; animation-delay: 0.65s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(15) { height: 12px !important; animation-delay: 0.7s !important; }\n\n      .desktop-status {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 5px !important;\n        font-size: 12px !important;\n        color: ").concat(statusTitleColor, ";\n        font-weight: 500;\n        width: 100%;\n        text-align: center;\n        margin: 0 auto;\n      }\n      \n      .desktop-status .status-dot {\n        display: block !important;\n        width: 5px !important;\n        height: 5px !important;\n        background: ").concat(statusDotColor, " !important;\n        border-radius: 50% !important;\n        animation: statusPulse 1.5s ease-in-out infinite !important;\n      }\n      \n      @keyframes statusPulse {\n        0%, 100% { transform: scale(1); opacity: 1; }\n        50% { transform: scale(1.15); opacity: 0.8; }\n      }\n      \n      .desktop-live-waveform {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        height: 48px;\n        margin-bottom: 20px;\n      }\n      \n      .desktop-live-bar {\ndisplay: block !important;\n                width: 3px;\n        background: linear-gradient(180deg, ").concat(avatarBg, ", ").concat(avatarActiveBg, ");\n        border-radius: 2px;\n        transition: height 0.1s ease;\n        height: 8px;\n      }\n      \n      .desktop-controls {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        margin: 0 auto;\n      }\n      \n      .desktop-control-btn {\n        width: 46px;\n        height: 46px;\n        border-radius: 50%;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      }\n      \n      .desktop-control-btn svg {\n        width: 20px;\n        height: 20px;\n      }\n      \n      .desktop-mic-icon,\n      .desktop-speaker-icon {\n        width: 20px !important;\n        height: 20px !important;\n        display: block;\n        flex-shrink: 0;\n      }\n      \n      .desktop-control-btn.secondary.muted .desktop-mic-icon,\n      .desktop-control-btn.secondary.muted .desktop-speaker-icon {\n        width: 20px !important;\n        height: 20px !important;\n      }\n      \n      \n      .desktop-control-btn.secondary:hover {\n        background: rgba(0, 0, 0, 0.1);\n        color: #1e293b;\n        transform: scale(1.05);\n      }\n      .desktop-control-btn.secondary.muted {\n        background: #f3f4f6;\n        color: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary.muted .desktop-mic-icon,\n      .desktop-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      /* Desktop speaker button background color */\n      #desktopSpeakerBtn.desktop-control-btn.secondary,\n      #desktopSpeakerBtnCompact.compact-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 46px;\n        height: 46px;\n        transform: translate(-50%, -50%);\n        z-index: 10;\n      }\n      .desktop-control-btn.danger {\n        width: 50px;\n        height: 50px;\n        background: ").concat(endCallBtnColor).concat(important, ";\n        color: #ffffff;\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);\n        overflow: visible;\n      }\n      \n      .desktop-control-btn.danger svg {\n        width: 20px;\n        height: 20px;\n        overflow: visible;\n      }\n      \n      .desktop-control-btn.danger:hover {\n        transform: scale(1.06);\n        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);\n      }\n      \n      .desktop-control-btn.danger:hover {\n        transform: scale(1.06);\n        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);\n      }\n      \n      \n      /* ===== COMPACT VOICE SECTION (Single-row layout) ===== */\n      .compact-voice-section {\n        padding: 10px 14px;\n        background: linear-gradient(180deg, #ffffff, rgba(168, 85, 247, 0.04));\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n        min-height: 62px;\n        flex-shrink: 0;\n      }\n      \n      .compact-left {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n      \n      .compact-avatar {\n        width: 42px;\n        height: 42px;\n        min-width: 42px;\n        min-height: 42px;\n        border-radius: 12px;\n        background: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: visible;\n        position: relative;\n      }\n      \n      /* Waveform container in compact avatar - ensure it's visible */\n      .compact-avatar .desktop-main-waveform {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 2px !important;\n        height: 100% !important;\n        width: 100% !important;\n        padding: 4px !important;\n        transform: scale(0.75) !important;\n        transform-origin: center !important;\n      }\n      \n      /* Ensure waveform bars are visible and animated in compact mode */\n      .compact-avatar .desktop-main-waveform .waveform-bar {\n        display: block !important;\n        width: 2px !important;\n        min-width: 2px !important;\n        background: #a855f7 !important;\n        border-radius: 1px !important;\n        flex-shrink: 0 !important;\n        animation: waveformAnimation 0.8s ease-in-out infinite !important;\n      }\n      \n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(1) { height: 6px !important; animation-delay: 0s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(2) { height: 10px !important; animation-delay: 0.05s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(3) { height: 14px !important; animation-delay: 0.1s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(4) { height: 18px !important; animation-delay: 0.15s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(5) { height: 22px !important; animation-delay: 0.2s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(6) { height: 26px !important; animation-delay: 0.25s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(7) { height: 28px !important; animation-delay: 0.3s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(8) { height: 30px !important; animation-delay: 0.35s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(9) { height: 28px !important; animation-delay: 0.4s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(10) { height: 26px !important; animation-delay: 0.45s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(11) { height: 22px !important; animation-delay: 0.5s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(12) { height: 18px !important; animation-delay: 0.55s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(13) { height: 14px !important; animation-delay: 0.6s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(14) { height: 10px !important; animation-delay: 0.65s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(15) { height: 6px !important; animation-delay: 0.7s !important; }\n\n      }\n      \n      .compact-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      \n      .compact-timer {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        font-family: 'JetBrains Mono', 'Courier New', monospace;\n        font-size: 13px;\n        font-weight: 600;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n      }\n      \n      .compact-timer .timer-dot {\n        display: block !important;\n        width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        background: #ef4444").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: timerPulse 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      .compact-status {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 4px").concat(important, ";\n        font-size: 11px").concat(important, ";\n        color: ").concat(statusTitleColor).concat(important, ";\n      }\n      \n      .compact-status .status-dot {\n        display: block !important;\n        width: 5px").concat(important, ";\n        height: 5px").concat(important, ";\n        background: ").concat(statusDotColor).concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: statusPulse 1.5s ease-in-out infinite").concat(important, ";\n      }\n      \n      @keyframes statusPulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.7; transform: scale(1.1); }\n      }\n      \n      .compact-controls {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n      \n      .compact-control-btn {\n        width: 36px;\n        height: 36px;\n        min-width: 36px;\n        min-height: 36px;\n        border-radius: 50%;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        padding: 0;\n        position: relative;\n        overflow: hidden;\n      }\n      \n      .compact-control-btn svg {\n        width: 16px;\n        height: 16px;\n      }\n      \n      .compact-control-btn .desktop-mic-off-icon,\n      .compact-control-btn .desktop-speaker-off-icon {\n        width: 34px;\n        height: 34px;\n      }\n      \n      .compact-control-btn.secondary {\n        background: #f1f5f9;\n        color: #64748b;\n      }\n      \n      \n      /* Compact speaker button background color */\n      #desktopSpeakerBtnCompact.compact-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      /* Compact microphone button background color */\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .compact-control-btn.secondary:hover {\n        background: #e2e8f0;\n        color: #475569;\n      }\n      \n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.1);\n        color: #ef4444;\n      }\n      \n      \n      .compact-control-btn.secondary.muted .desktop-mic-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #ef4444;\n      }\n      \n      .compact-control-btn.secondary.muted .desktop-mic-off-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-off-icon {\n        width: 34px;\n        height: 34px;\n      }\n\n      .compact-control-btn.danger {\n        width: 40px;\n        height: 40px;\n        min-width: 40px;\n        min-height: 40px;\n        background: ").concat(endCallBtnColor).concat(important, ";\n        color: white;\n        box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);\n      }\n      \n      .compact-control-btn.danger:hover {\n        transform: scale(1.05);\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);\n      }\n      \n      .compact-control-btn.danger svg {\n        width: 18px;\n        height: 18px;\n        overflow: visible;\n      }\n      \n/* ===== CONVERSATION PANEL ===== */\n      .desktop-conversation-panel {\n        border-top: 1px solid rgba(0, 0, 0, 0.06);\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n        flex: 1;\n      }\n      \n      .conversation-header {\n        padding: 10px 16px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background: #fafafa;\n        cursor: pointer;\n        flex-shrink: 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.04);\n        transition: background 0.2s ease;\n      }\n      \n      .conversation-header:hover {\n        background: #f5f5f5;\n      }\n      \n      .conversation-label {\n        font-size: 11px;\n        font-weight: 600;\n        color: #64748b;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      \n      .conversation-toggle {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        font-size: 11px;\n        color: #94a3b8;\n        font-weight: 500;\n      }\n      \n      .conversation-toggle svg {\n        transition: transform 0.2s ease;\n      }\n      \n      .conversation-header.expanded .conversation-toggle svg {\n        transform: rotate(180deg);\n      }\n      \n      /* ===== COLLAPSED: Live Transcript Only (2 lines) ===== */\n      .live-transcript-collapsed {\n        padding: 12px 16px;\n        background: #fafafa;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        flex-shrink: 0;\n        min-height: 50px;\n      }\n      \n      .live-indicator {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        font-size: 9px;\n        font-weight: 700;\n        color: ").concat(liveIndicatorTextColor).concat(important, ";\n        text-transform: uppercase;\n        letter-spacing: 0.08em;\n      }\n      \n      .live-indicator .live-dot {\ndisplay: block !important;\n                height: 5px;\n        width: 5px;\n        background: ").concat(liveIndicatorDotColor).concat(important, ";\n        border-radius: 50%;\n        animation: statusPulse 1.5s ease-in-out infinite;\n      }\n      \n      .live-text-collapsed {\n        font-size: ").concat(liveTranscriptFontSize).concat(important, ";\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        line-height: 1.5;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n      \n      .live-text-collapsed.muted {\n        color: #94a3b8;\n        font-style: italic;\n      }\n      \n      .typing-cursor {\n        display: inline-block;\n        width: 2px;\n        height: 14px;\n        background: #a855f7;\n        margin-left: 2px;\n        animation: blink 1s step-end infinite;\n        vertical-align: middle;\n      }\n      \n      @keyframes blink {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0; }\n      }\n      \n      /* ===== EXPANDED: Full Conversation History ===== */\n      .conversation-history {\n        flex: 1;\n        flex-direction: column;\n        gap: 10px;\n        overflow-y: auto;\n        padding: 14px 16px;\n        min-height: 0;\n      }\n      .conversation-history.visible {\n        display: flex;\n      }\n\n      .conversation-messages {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n      }\n\n      /* Message Rows */\n      .message-row {\n        display: flex;\n        gap: 8px;\n        animation: msgIn 0.25s ease;\n      }\n      \n      @keyframes msgIn {\n        from { opacity: 0; transform: translateY(8px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n      @keyframes slideIn {\n        from { opacity: 0; transform: translateY(-10px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n      \n      @keyframes slideOut {\n        from { opacity: 1; transform: translateY(0); }\n        to { opacity: 0; transform: translateY(-10px); }\n      }\n      \n      .message-row.user {\n        flex-direction: row-reverse;\n      }\n      \n      .message-avatar {\n        width: 28px;\n        height: 28px;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n      }\n\n      .message-avatar.assistant {\n        background: linear-gradient(135deg, #c084fc, #a855f7);\n      }\n\n      .message-avatar.assistant .orb {\n        width: 12px;\n        height: 12px;\n        background: rgba(255, 255, 255, 0.9);\n        border-radius: 50%;\n      }\n\n      .message-avatar.user {\n        background: linear-gradient(135deg, #64748b, #475569);\n        color: #fff;\n        font-size: 11px;\n        font-weight: 600;\n      }\n\n      .message-bubble {\n        max-width: 80%;\n        padding: 9px 13px;\n        border-radius: 12px;\n        font-size: 13px;\n        line-height: 1.5;\n      }\n      \n      .message-row.assistant .message-bubble {\n        background: #fff;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        border: 1px solid rgba(0, 0, 0, 0.06);\n        border-bottom-left-radius: 4px;\n      }\n      \n      .message-row.user .message-bubble {\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n      \n      /* Live message at bottom of history */\n      .live-message-row {\n        display: flex;\n        gap: 8px;\n        padding-top: 8px;\n        border-top: 1px dashed rgba(0, 0, 0, 0.08);\n        margin-top: auto;\n      }\n      \n      .live-message-row .message-bubble {\n        background: #fff;\n        border: 1px solid rgba(16, 185, 129, 0.3);\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        position: relative;\n        border-radius: 14px;\n        border-bottom-left-radius: 4px;\n      }\n      \n      .live-message-row .live-badge {\ndisplay: block !important;\n                position: absolute;\n        top: -8px;\n        left: 10px;\n        background: #10b981;\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.05em;\n      }\n      \n      /* Hide/show based on expanded state */\n      .desktop-conversation-panel.collapsed .conversation-history {\n        display: none;\n      }\n      \n      .desktop-conversation-panel.collapsed .live-transcript-collapsed {\n        display: flex;\n      }\n      \n      .desktop-conversation-panel.expanded .conversation-history {\n        display: flex;\n        max-height: 400px;\n      }\n      \n      .desktop-conversation-panel.expanded .live-transcript-collapsed {\n        display: none;\n      }\n      \n            /* ===== DARK MODE SUPPORT ===== */\n      @media (prefers-color-scheme: dark) {\n        .desktop-voice-section {\n          background: linear-gradient(180deg, #1e1e2e 0%, rgba(168, 85, 247, 0.08) 100%);\n        }\n\n        .desktop-timer {\n          color: #94a3b8;\n        }\n\n        .desktop-status {\n          color: #34d399;\n        }\n\n        .desktop-status .status-dot {\n      \n      .desktop-control-btn.secondary.muted {\n        background: rgba(255, 255, 255, 0.1);\n        color: #9ca3af;\n      \n      .compact-voice-section {\n        background: linear-gradient(180deg, #1e1e2e 0%, rgba(168, 85, 247, 0.08) 100%);\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n      }\n      \n      .compact-timer {\n        color: #e2e8f0;\n      }\n      \n      .compact-status {\n        color: #34d399;\n      }\n      \n      .compact-status .status-dot {\n        background: #34d399;\n      }\n      \n      .compact-control-btn.secondary {\n        background: rgba(255, 255, 255, 0.08);\n        color: #94a3b8;\n      }\n      \n      .compact-control-btn.secondary:hover {\n        background: rgba(255, 255, 255, 0.15);\n        color: #e2e8f0;\n      }\n      \n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.2);\n        color: #f87171;\n      }\n\n      }\n      \n      .desktop-control-btn.secondary.muted svg {\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 20px;\n      }\n      \n      .desktop-control-btn.secondary.muted {\n        background: #f3f4f6;\n        color: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary.muted svg {\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 20px;\n      }\n        stroke: #9ca3af;\n      }\n        stroke: #9ca3af;\n      }\n          background: #34d399;\n        }\n\n        .desktop-control-btn.secondary {\n          background: rgba(255, 255, 255, 0.08);\n          color: #94a3b8;\n        }\n\n        .desktop-control-btn.secondary:hover {\n          background: rgba(255, 255, 255, 0.15);\n          color: #e2e8f0;\n        }\n\n        .desktop-conversation-panel {\n          border-top: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .conversation-header {\n          background: #1a1a2e;\n        }\n\n        .conversation-header:hover {\n          background: #252540;\n        }\n\n        .conversation-label {\n          color: #94a3b8;\n        }\n\n        .conversation-toggle {\n          color: #64748b;\n        }\n\n        .live-transcript-preview {\n          background: #1a1a2e;\n        }\n        .live-indicator {\n          color: ").concat(liveIndicatorTextColor).concat(important, ";\n        }\n        .live-indicator .live-dot {\n          background: ").concat(liveIndicatorDotColor).concat(important, ";\n        }\n\n        .live-text {\n          color: #e2e8f0;\n        }\n\n        .live-text.muted {\n          color: #64748b;\n        }\n\n        .conversation-history {\n          background: #1a1a2e;\n        }\n\n        .conversation-msg.assistant .conversation-msg-bubble {\n          background: #252540;\n          color: #e2e8f0;\n          border: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .voice-text-input-area {\n          background: #1a1a2e;\n        }\n\n        .voice-text-input {\n          background: #252540 !important;\n          color: #e2e8f0 !important;\n          border-color: rgba(255, 255, 255, 0.1) !important;\n        }\n\n        .voice-text-input::placeholder {\n          color: #64748b !important;\n        }\n\n        .voice-text-input:focus {\n          border-color: ").concat(avatarBg, " !important;\n          box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;\n        }\n\n        .voice-input-hint {\n          color: #64748b !important;\n        }\n\n        .voice-send-btn {\n          background: ").concat(voiceSendButtonColor, " !important;\n        }\n\n        .voice-send-btn:disabled {\n          background: #374151 !important;\n          color: #4b5563 !important;\n        }\n      }\n\n      /* Mobile optimization */\n      @media (max-width: 768px) {\n        .voice-interface {\n          padding: 6px 10px;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        .voice-interface {\n          padding: 5px 8px;\n        }\n      }\n      \n      /* Mobile Voice Call UI - Shared styles (also used in generateMobileCSS) */\n      ").concat(this._getSharedMobileCSS(important), "\n\n    ");
     }
 
     /**
@@ -27240,7 +27354,7 @@ var Styles = /*#__PURE__*/function () {
   }, {
     key: "_getSharedMobileCSS",
     value: function _getSharedMobileCSS(important) {
-      return "\n      .mobile-duration-dot {\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 {\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 {\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 {\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%;\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    ");
     }
 
     /**