ttp-agent-sdk 2.35.0 → 2.36.0

package/dist/agent-widget.dev.js

@@ -10949,6 +10949,8 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
                     self._handleCartUpdatedFromServer(message);
                   } else if (type === 'add_to_store_cart') {
                     self._handleAddToStoreCart(message);
+                  } else if (type === 'get_store_cart') {
+                    self._handleGetStoreCart();
                   }
                 });
                 console.log('[TTPEcommerceWidget] E-commerce message listener attached');
@@ -11048,26 +11050,101 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
     // ═══════════════════════════════════════════
 
     /**
-     * Handle add_to_store_cart message from the backend.
-     * Calls Shopify's /cart/add.js from the browser so the item goes into
-     * the store's session-based cart (not a headless Storefront API cart).
-     *
-     * We don't attempt to refresh the theme's cart UI (icon badge, drawer)
-     * because there's no universal mechanism — every theme is different.
-     * The user will see the updated cart when they navigate to /cart or refresh.
-     * Our own CartToast + CartSummary provide immediate visual feedback.
+     * Fetch cart contents from Shopify's AJAX Cart API and send back to backend.
+     * Triggered when the LLM calls get_cart for a Shopify store.
+     * Only the browser can read the store's cart because it requires the session cookie.
      */
   }, {
-    key: "_handleAddToStoreCart",
+    key: "_handleGetStoreCart",
     value: function () {
-      var _handleAddToStoreCart2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(data) {
-        var variantId, quantity, productName, price, _cartResponse$items, _cartResponse$items2, response, cartResponse, cartData, _t3;
+      var _handleGetStoreCart2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+        var response, cart, _t3;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.p = _context4.n) {
             case 0:
-              variantId = data.variantId, quantity = data.quantity, productName = data.productName, price = data.price;
-              _context4.p = 1;
-              _context4.n = 2;
+              _context4.p = 0;
+              _context4.n = 1;
+              return fetch('/cart.js', {
+                method: 'GET',
+                headers: {
+                  'Content-Type': 'application/json'
+                }
+              });
+            case 1:
+              response = _context4.v;
+              if (response.ok) {
+                _context4.n = 2;
+                break;
+              }
+              console.error('[TTP Ecommerce] Failed to fetch /cart.js:', response.status);
+              this._sendToVoiceSDK({
+                t: 'cart_state_result',
+                success: false,
+                error: "Failed to fetch cart: HTTP ".concat(response.status)
+              });
+              return _context4.a(2);
+            case 2:
+              _context4.n = 3;
+              return response.json();
+            case 3:
+              cart = _context4.v;
+              this._sendToVoiceSDK({
+                t: 'cart_state_result',
+                success: true,
+                items: (cart.items || []).map(function (item) {
+                  return {
+                    title: item.title,
+                    variant_title: item.variant_title,
+                    quantity: item.quantity,
+                    price: item.price,
+                    line_price: item.line_price,
+                    image: item.image,
+                    variant_id: item.variant_id,
+                    product_id: item.product_id
+                  };
+                }),
+                item_count: cart.item_count,
+                total_price: cart.total_price,
+                currency: cart.currency
+              });
+              console.log("[TTP Ecommerce] Cart state sent: ".concat(cart.item_count, " items, ").concat(cart.currency, " ").concat((cart.total_price / 100).toFixed(2)));
+              _context4.n = 5;
+              break;
+            case 4:
+              _context4.p = 4;
+              _t3 = _context4.v;
+              console.error('[TTP Ecommerce] Error fetching cart:', _t3);
+              this._sendToVoiceSDK({
+                t: 'cart_state_result',
+                success: false,
+                error: _t3.message || 'Failed to fetch cart'
+              });
+            case 5:
+              return _context4.a(2);
+          }
+        }, _callee4, this, [[0, 4]]);
+      }));
+      function _handleGetStoreCart() {
+        return _handleGetStoreCart2.apply(this, arguments);
+      }
+      return _handleGetStoreCart;
+    }()
+    /**
+     * Add product to Shopify store cart via AJAX Cart API, then report result back to backend.
+     * Must be done from the browser because only the browser has the store's session cookie.
+     */
+  }, {
+    key: "_handleAddToStoreCart",
+    value: (function () {
+      var _handleAddToStoreCart2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(data) {
+        var variantId, quantity, productName, addResponse, errorText, addResult, cartResponse, cart, cartRefreshed, _t4;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.p = _context5.n) {
+            case 0:
+              variantId = data.variantId, quantity = data.quantity;
+              productName = '';
+              _context5.p = 1;
+              _context5.n = 2;
               return fetch('/cart/add.js', {
                 method: 'POST',
                 headers: {
@@ -11075,57 +11152,117 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
                 },
                 body: JSON.stringify({
                   items: [{
-                    id: parseInt(variantId, 10),
+                    id: parseInt(variantId),
                     quantity: quantity || 1
                   }]
                 })
               });
             case 2:
-              response = _context4.v;
-              if (response.ok) {
-                _context4.n = 3;
+              addResponse = _context5.v;
+              if (addResponse.ok) {
+                _context5.n = 4;
                 break;
               }
-              console.error('[TTPEcommerceWidget] Failed to add to Shopify cart:', response.status, response.statusText);
-              return _context4.a(2);
+              _context5.n = 3;
+              return addResponse.text();
             case 3:
-              _context4.n = 4;
-              return response.json();
-            case 4:
-              cartResponse = _context4.v;
-              console.log('[TTPEcommerceWidget] Added to Shopify store cart:', cartResponse);
-              _context4.n = 5;
-              return fetch('/cart.js').then(function (r) {
-                return r.json();
+              errorText = _context5.v;
+              console.error('[TTP Ecommerce] /cart/add.js failed:', addResponse.status, errorText);
+              this._sendToVoiceSDK({
+                t: 'cart_add_result',
+                success: false,
+                error: "Cart add failed: HTTP ".concat(addResponse.status),
+                productName: productName || String(variantId),
+                quantity: quantity || 1
               });
+              return _context5.a(2);
+            case 4:
+              _context5.n = 5;
+              return addResponse.json();
             case 5:
-              cartData = _context4.v;
+              addResult = _context5.v;
+              if (addResult.items && addResult.items.length > 0) {
+                productName = addResult.items[0].title || '';
+              }
+              _context5.n = 6;
+              return fetch('/cart.js');
+            case 6:
+              cartResponse = _context5.v;
+              _context5.n = 7;
+              return cartResponse.json();
+            case 7:
+              cart = _context5.v;
+              cartRefreshed = false;
+              try {
+                cartRefreshed = this._refreshCartCount(cart.item_count);
+              } catch (e) {
+                console.warn('[TTP Ecommerce] Cart count refresh failed (non-critical):', e);
+              }
               this._handleCartUpdatedFromServer({
                 action: 'added',
                 product: {
-                  id: variantId,
-                  name: productName || ((_cartResponse$items = cartResponse.items) === null || _cartResponse$items === void 0 || (_cartResponse$items = _cartResponse$items[0]) === null || _cartResponse$items === void 0 ? void 0 : _cartResponse$items.title) || 'Product',
-                  price: price || ((_cartResponse$items2 = cartResponse.items) === null || _cartResponse$items2 === void 0 || (_cartResponse$items2 = _cartResponse$items2[0]) === null || _cartResponse$items2 === void 0 ? void 0 : _cartResponse$items2.price) / 100 || 0
+                  name: productName,
+                  id: variantId
                 },
-                cartTotal: cartData.total_price / 100,
-                cartItemCount: cartData.item_count
+                cartTotal: cart.total_price / 100,
+                cartItemCount: cart.item_count,
+                currency: cart.currency
               });
-              _context4.n = 7;
+              this._sendToVoiceSDK({
+                t: 'cart_add_result',
+                success: true,
+                cartRefreshed: cartRefreshed,
+                productName: productName,
+                quantity: quantity || 1,
+                cartTotal: cart.total_price,
+                cartItemCount: cart.item_count,
+                currency: cart.currency
+              });
+              console.log("[TTP Ecommerce] Cart add result sent: ".concat(productName, ", refreshed=").concat(cartRefreshed, ", ").concat(cart.item_count, " items"));
+              _context5.n = 9;
               break;
-            case 6:
-              _context4.p = 6;
-              _t3 = _context4.v;
-              console.error('[TTPEcommerceWidget] Error adding to Shopify cart:', _t3);
-            case 7:
-              return _context4.a(2);
+            case 8:
+              _context5.p = 8;
+              _t4 = _context5.v;
+              console.error('[TTP Ecommerce] Error in _handleAddToStoreCart:', _t4);
+              this._sendToVoiceSDK({
+                t: 'cart_add_result',
+                success: false,
+                error: _t4.message || 'Failed to add to cart',
+                productName: productName || String(variantId),
+                quantity: quantity || 1
+              });
+            case 9:
+              return _context5.a(2);
           }
-        }, _callee4, this, [[1, 6]]);
+        }, _callee5, this, [[1, 8]]);
       }));
       function _handleAddToStoreCart(_x2) {
         return _handleAddToStoreCart2.apply(this, arguments);
       }
       return _handleAddToStoreCart;
-    }() // ═══════════════════════════════════════════
+    }()
+    /**
+     * Simple cart count refresh — update common counter selectors.
+     * Theme-specific refresh (Section Rendering API, etc.) can be added later per-theme.
+     * @returns {boolean} Whether any element was updated
+     */
+    )
+  }, {
+    key: "_refreshCartCount",
+    value: function _refreshCartCount(itemCount) {
+      var refreshed = false;
+      var selectors = ['.cart-count', '.cart-count-bubble', '[data-cart-count]', '.js-cart-count', '.cart-item-count', '#CartCount', '.site-header__cart-count', '.cart-count-tag'];
+      selectors.forEach(function (selector) {
+        document.querySelectorAll(selector).forEach(function (el) {
+          el.textContent = itemCount;
+          refreshed = true;
+        });
+      });
+      return refreshed;
+    }
+
+    // ═══════════════════════════════════════════
     // PRODUCT SELECTION (server manages cart)
     // ═══════════════════════════════════════════
   }, {
@@ -11181,45 +11318,45 @@ var TTPEcommerceWidget = /*#__PURE__*/function () {
           self.ecommerce.handleMessage(payload);
         },
         showProducts: function () {
-          var _showProducts = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(query) {
+          var _showProducts = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(query) {
             var limit,
               sessionId,
               baseUrl,
               response,
               data,
-              _args5 = arguments,
-              _t4;
-            return _regenerator().w(function (_context5) {
-              while (1) switch (_context5.p = _context5.n) {
+              _args6 = arguments,
+              _t5;
+            return _regenerator().w(function (_context6) {
+              while (1) switch (_context6.p = _context6.n) {
                 case 0:
-                  limit = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : 5;
-                  sessionId = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : 'test';
+                  limit = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : 5;
+                  sessionId = _args6.length > 2 && _args6[2] !== undefined ? _args6[2] : 'test';
                   baseUrl = window.__TTP_MOCK_API__ || 'https://backend.talktopc.com';
-                  _context5.p = 1;
-                  _context5.n = 2;
+                  _context6.p = 1;
+                  _context6.n = 2;
                   return fetch("".concat(baseUrl, "/api/partner/mock-store/products/search?q=").concat(encodeURIComponent(query), "&limit=").concat(limit, "&sessionId=").concat(encodeURIComponent(sessionId)));
                 case 2:
-                  response = _context5.v;
-                  _context5.n = 3;
+                  response = _context6.v;
+                  _context6.n = 3;
                   return response.json();
                 case 3:
-                  data = _context5.v;
+                  data = _context6.v;
                   self.ecommerce.handleShowProducts({
                     t: 'show_products',
                     products: data.products,
                     title: "".concat(data.totalCount, " results for \"").concat(query, "\""),
                     layout: data.products.length <= 4 ? 'cards' : 'list'
                   });
-                  _context5.n = 5;
+                  _context6.n = 5;
                   break;
                 case 4:
-                  _context5.p = 4;
-                  _t4 = _context5.v;
-                  console.error('[TTPEcommerceWidget] showProducts failed:', _t4);
+                  _context6.p = 4;
+                  _t5 = _context6.v;
+                  console.error('[TTPEcommerceWidget] showProducts failed:', _t5);
                 case 5:
-                  return _context5.a(2);
+                  return _context6.a(2);
               }
-            }, _callee5, null, [[1, 4]]);
+            }, _callee6, null, [[1, 4]]);
           }));
           function showProducts(_x3) {
             return _showProducts.apply(this, arguments);
@@ -21150,6 +21287,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Callback to show error toast (for domain errors, etc.)
       onErrorToast: function onErrorToast(message, type) {
         _this.showErrorToast(message, type);
+      },
+      onMobileError: function onMobileError(message) {
+        _this.showMobileLandingError(message);
       }
     });
     this.voiceInterface = new _VoiceInterface_js__WEBPACK_IMPORTED_MODULE_1__.VoiceInterface(voiceConfig);
@@ -21442,7 +21582,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
             voiceCardIcon: cleanLandingConfig.voiceCardIcon || '🎤',
             textCardIcon: cleanLandingConfig.textCardIcon || '💬',
             voiceCardTitle: cleanLandingConfig.voiceCardTitle || null,
-            textCardTitle: cleanLandingConfig.textCardTitle || null
+            textCardTitle: cleanLandingConfig.textCardTitle || null,
+            callButtonText: cleanLandingConfig.callButtonText || null,
+            chatButtonText: cleanLandingConfig.chatButtonText || null,
+            statusText: cleanLandingConfig.statusText || null
           }, cleanLandingConfig);
         }(),
         // Header Configuration (top of panel)
@@ -21472,7 +21615,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
             backgroundColor: cleanHeaderConfig.backgroundColor || '#7C3AED',
             // Default purple
             textColor: cleanHeaderConfig.textColor || '#FFFFFF',
-            showCloseButton: cleanHeaderConfig.showCloseButton !== false
+            showCloseButton: cleanHeaderConfig.showCloseButton !== false,
+            mobileLabel: cleanHeaderConfig.mobileLabel || 'Chat'
           }, cleanHeaderConfig);
           return finalHeader;
         }(),
@@ -21678,10 +21822,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var resetCSS = '';
       if (this.config.useShadowDOM) {
         // Shadow DOM mode - use :host selector
-        resetCSS = "\n        :host {\n          all: initial;\n          display: block;\n          pointer-events: none;\n        }\n        img {\n          max-width: none !important;\n        }\n        #text-chat-button img {\n          width: 28px !important;\n          height: 28px !important;\n        }\n        #text-chat-button {\n          pointer-events: auto;\n        }\n        #text-chat-panel {\n          pointer-events: auto;\n        }\n      ";
+        resetCSS = "\n        :host {\n          all: initial;\n          display: block;\n          pointer-events: none;\n        }\n        img {\n          max-width: none !important;\n        }\n        #text-chat-button img {\n          width: 28px !important;\n          height: 28px !important;\n        }\n        #text-chat-button {\n          pointer-events: auto;\n        }\n        #text-chat-panel {\n          pointer-events: auto;\n        }\n        .ttp-mobile-fab {\n          pointer-events: auto;\n        }\n        #ttpMobileLanding {\n          pointer-events: auto;\n        }\n      ";
       } else {
         // Regular DOM mode - targeted reset without breaking widget styles
-        resetCSS = "\n        /* Reset only problematic inherited styles, not all styles */\n        #text-chat-button,\n        #text-chat-panel,\n        #text-chat-panel * {\n          box-sizing: border-box;\n          font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        }\n        \n        /* Prevent theme CSS from affecting images */\n        #text-chat-button img,\n        #text-chat-panel img {\n          max-width: none !important;\n          width: auto;\n          height: auto;\n        }\n        \n        #text-chat-button img {\n          width: 28px !important;\n          height: 28px !important;\n        }\n        \n        /* Ensure button and panel can receive clicks */\n        #text-chat-button,\n        #text-chat-panel {\n          pointer-events: auto;\n        }\n        \n        /* Reset any inherited text styles that might break layout */\n        #text-chat-panel {\n          text-align: left;\n          line-height: normal;\n          letter-spacing: normal;\n          word-spacing: normal;\n          text-transform: none;\n          text-indent: 0;\n          text-shadow: none;\n          white-space: normal;\n        }\n        \n        /* Ensure flexbox works properly */\n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .landing-screen,\n        #text-chat-panel .voice-interface,\n        #text-chat-panel .text-interface,\n        #text-chat-panel .widget-header,\n        #text-chat-panel .mode-selection {\n          display: flex;\n        }\n        \n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .landing-screen,\n        #text-chat-panel .voice-interface,\n        #text-chat-panel .text-interface {\n          flex-direction: column;\n        }\n        \n        #text-chat-panel .mode-selection {\n          flex-direction: row;\n        }\n        \n        /* Ensure proper stacking */\n        #text-chat-button {\n          z-index: 10001 !important;\n        }\n        \n        #text-chat-panel {\n          z-index: 10000 !important;\n        }\n      ";
+        resetCSS = "\n        /* Reset only problematic inherited styles, not all styles */\n        #text-chat-button,\n        #text-chat-panel,\n        #text-chat-panel * {\n          box-sizing: border-box;\n          font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        }\n        \n        /* Prevent theme CSS from affecting images */\n        #text-chat-button img,\n        #text-chat-panel img {\n          max-width: none !important;\n          width: auto;\n          height: auto;\n        }\n        \n        #text-chat-button img {\n          width: 28px !important;\n          height: 28px !important;\n        }\n        \n        /* Ensure button and panel can receive clicks */\n        #text-chat-button,\n        #text-chat-panel,\n        .ttp-mobile-fab,\n        #ttpMobileLanding {\n          pointer-events: auto;\n        }\n        \n        /* Reset any inherited text styles that might break layout */\n        #text-chat-panel {\n          text-align: left;\n          line-height: normal;\n          letter-spacing: normal;\n          word-spacing: normal;\n          text-transform: none;\n          text-indent: 0;\n          text-shadow: none;\n          white-space: normal;\n        }\n        \n        /* Ensure flexbox works properly */\n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .landing-screen,\n        #text-chat-panel .voice-interface,\n        #text-chat-panel .text-interface,\n        #text-chat-panel .widget-header,\n        #text-chat-panel .mode-selection {\n          display: flex;\n        }\n        \n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .landing-screen,\n        #text-chat-panel .voice-interface,\n        #text-chat-panel .text-interface {\n          flex-direction: column;\n        }\n        \n        #text-chat-panel .mode-selection {\n          flex-direction: row;\n        }\n        \n        /* Ensure proper stacking */\n        #text-chat-button {\n          z-index: 10001 !important;\n        }\n        \n        #text-chat-panel {\n          z-index: 10000 !important;\n        }\n      ";
       }
       var widgetHTML = this.generateWidgetHTML();
       if (this.config.useShadowDOM) {
@@ -21850,7 +21994,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         isPromptEnabled: isPromptEnabled,
         willGenerateHTML: !!promptBubbleHTML
       });
-      return "\n      ".concat(styleTag, "\n      \n      ").concat(this.config.behavior.hidden ? '' : "\n      <div id=\"text-chat-button-container\">\n        ".concat(promptBubbleHTML, "\n        ").concat(isPromptEnabled && promptConfig.showPulseRings !== false ? this.generatePulseRingsHTML(promptConfig) : '', "\n        <button id=\"text-chat-button\" \n                aria-label=\"").concat(this.config.accessibility.ariaLabel, "\"\n                aria-description=\"").concat(this.config.accessibility.ariaDescription, "\">\n        ").concat(iconHTML, "\n      </button>\n      </div>\n      "), "\n      \n      <div id=\"text-chat-panel\">\n        <div class=\"widget-shell\">\n          <div class=\"panel-inner widget-container\" style=\"direction: ").concat(this.config.direction, ";\">\n          <div class=\"widget-header\" style=\"background: ").concat(header.backgroundColor || '#7C3AED', " !important; color: ").concat(header.textColor || '#FFFFFF', " !important;\">\n            <div>\n              ").concat(header.showTitle ? "<div class=\"header-title\">".concat(header.title, "</div>") : '', "\n              <div class=\"header-status\" style=\"color: ").concat(header.onlineIndicatorColor || 'rgba(255,255,255,0.7)', " !important;\">\n                <span class=\"status-dot\" style=\"background: ").concat(header.onlineIndicatorDotColor || '#10b981', " !important;\"></span>\n                <span>").concat(header.onlineIndicatorText !== undefined && header.onlineIndicatorText !== null ? header.onlineIndicatorText : t('online'), "</span>\n              </div>\n            </div>\n            \n            <div style=\"display: flex; gap: 6px; align-items: center; position: relative; z-index: 1;\">\n              <!-- New Chat Button (hide on landing screen, show otherwise) -->\n              <button class=\"header-icon new-chat-btn\" id=\"newChatBtn\" title=\"").concat(getTooltip('newChat'), "\" style=\"").concat(showLanding ? 'display: none;' : '', "\">\n                <span style=\"font-size: 18px; font-weight: bold;\">+</span>\n              </button>\n              \n              <!-- Back Button (only show in unified mode) -->\n              ").concat(widgetMode === 'unified' ? "<button class=\"header-icon back-btn\" id=\"backBtn\" title=\"".concat(getTooltip('back'), "\" style=\"display: none;\">\n                <span style=\"font-size: 16px;\">\u2039</span>\n              </button>") : '', "\n              \n              <!-- Close Button -->\n              ").concat(header.showCloseButton ? '<button class="header-icon close-btn" id="closeBtn" title="' + getTooltip('close') + '">' + '<span style="font-size: 18px; font-weight: bold;">×</span>' + '</button>' : '', "\n            </div>\n          </div>\n\n          ").concat(showLanding && this.landingScreen ? this.landingScreen.generateHTML() : '', "\n\n          ").concat(showVoice ? this.voiceInterface.generateHTML() : '', "\n          ").concat(showText ? this.textInterface.generateHTML() : '', "\n          ").concat(this.generateFooterHTML(), "\n          </div>\n        </div>\n      </div>\n    ");
+      return "\n      ".concat(styleTag, "\n      \n      ").concat(this.config.behavior.hidden ? '' : "\n      <div id=\"text-chat-button-container\">\n        ".concat(promptBubbleHTML, "\n        ").concat(isPromptEnabled && promptConfig.showPulseRings !== false ? this.generatePulseRingsHTML(promptConfig) : '', "\n        <button id=\"text-chat-button\" \n                aria-label=\"").concat(this.config.accessibility.ariaLabel, "\"\n                aria-description=\"").concat(this.config.accessibility.ariaDescription, "\">\n          ").concat(iconHTML, "\n        </button>\n        <button class=\"ttp-mobile-fab\" aria-label=\"").concat(this.config.accessibility.ariaLabel, "\">\n          <div class=\"ttp-mobile-fab__icon-wrap\">\n            <div class=\"ttp-mobile-fab__waveform\">\n              <span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span>\n            </div>\n          </div>\n          <div class=\"ttp-mobile-fab__label-wrap\">\n            <span class=\"ttp-mobile-fab__label\">").concat(header.mobileLabel || 'Chat', "</span>\n            <span class=\"ttp-mobile-fab__status\">\n              <span class=\"ttp-mobile-fab__dot\"></span>\n              ").concat(header.onlineIndicatorText !== undefined && header.onlineIndicatorText !== null ? header.onlineIndicatorText : t('online'), "\n            </span>\n          </div>\n        </button>\n      </div>\n      "), "\n\n      ").concat(this.config.behavior.hidden ? '' : "\n      <div id=\"ttpMobileLanding\" class=\"ttp-mobile-landing\">\n        <div class=\"ttp-mobile-landing__header\">\n          <div class=\"ttp-mobile-landing__avatar\">\n            <div class=\"ttp-mobile-landing__waveform\">\n              <span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span>\n            </div>\n          </div>\n          <div class=\"ttp-mobile-landing__info\">\n            <div class=\"ttp-mobile-landing__name\">".concat(header.title || 'Chat Assistant', "</div>\n            <div class=\"ttp-mobile-landing__status\">\n              <span class=\"ttp-mobile-landing__dot\"></span>\n              ").concat(this.config.landing.statusText || t('online') + ' • ' + (this.config.landing.subtitle || 'Ready to help'), "\n            </div>\n          </div>\n          <button class=\"ttp-mobile-landing__close\" aria-label=\"Close\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"ttp-mobile-landing__error\" id=\"ttpMobileLandingError\" style=\"display:none;\">\n          <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n          </svg>\n          <span class=\"ttp-mobile-landing__error-text\"></span>\n        </div>\n        <div class=\"ttp-mobile-landing__actions\">\n          ").concat(showVoice ? "\n          <button class=\"ttp-mobile-landing__btn ttp-mobile-landing__btn--call\" id=\"ttpMobileCallBtn\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z\"/>\n            </svg>\n            ".concat(this.config.landing.callButtonText || this.config.landing.voiceCardTitle || t('voiceCall'), "\n          </button>\n          ") : '', "\n          ").concat(showText ? "\n          <button class=\"ttp-mobile-landing__btn ttp-mobile-landing__btn--text\" id=\"ttpMobileChatBtn\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>\n            </svg>\n            ".concat(this.config.landing.chatButtonText || this.config.landing.textCardTitle || t('textChat'), "\n          </button>\n          ") : '', "\n        </div>\n        ").concat(this.config.footer.show !== false ? "\n        <div class=\"ttp-mobile-landing__footer\">\n          <div class=\"ttp-mobile-landing__powered\">\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"10\" height=\"10\">\n              <polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"/>\n            </svg>\n            Powered by <a href=\"https://talktopc.com\" target=\"_blank\" rel=\"noopener\">TalkToPC</a>\n          </div>\n        </div>\n        " : '', "\n      </div>\n      "), "\n      \n      <div id=\"text-chat-panel\">\n        <div class=\"widget-shell\">\n          <div class=\"panel-inner widget-container\" style=\"direction: ").concat(this.config.direction, ";\">\n          <div class=\"widget-header\" style=\"background: ").concat(header.backgroundColor || '#7C3AED', " !important; color: ").concat(header.textColor || '#FFFFFF', " !important;\">\n            <div>\n              ").concat(header.showTitle ? "<div class=\"header-title\">".concat(header.title, "</div>") : '', "\n              <div class=\"header-status\" style=\"color: ").concat(header.onlineIndicatorColor || 'rgba(255,255,255,0.7)', " !important;\">\n                <span class=\"status-dot\" style=\"background: ").concat(header.onlineIndicatorDotColor || '#10b981', " !important;\"></span>\n                <span>").concat(header.onlineIndicatorText !== undefined && header.onlineIndicatorText !== null ? header.onlineIndicatorText : t('online'), "</span>\n              </div>\n            </div>\n            \n            <div style=\"display: flex; gap: 6px; align-items: center; position: relative; z-index: 1;\">\n              <!-- New Chat Button (hide on landing screen, show otherwise) -->\n              <button class=\"header-icon new-chat-btn\" id=\"newChatBtn\" title=\"").concat(getTooltip('newChat'), "\" style=\"").concat(showLanding ? 'display: none;' : '', "\">\n                <span style=\"font-size: 18px; font-weight: bold;\">+</span>\n              </button>\n              \n              <!-- Back Button (only show in unified mode) -->\n              ").concat(widgetMode === 'unified' ? "<button class=\"header-icon back-btn\" id=\"backBtn\" title=\"".concat(getTooltip('back'), "\" style=\"display: none;\">\n                <span style=\"font-size: 16px;\">\u2039</span>\n              </button>") : '', "\n              \n              <!-- Close Button -->\n              ").concat(header.showCloseButton ? '<button class="header-icon close-btn" id="closeBtn" title="' + getTooltip('close') + '">' + '<span style="font-size: 18px; font-weight: bold;">×</span>' + '</button>' : '', "\n            </div>\n          </div>\n\n          ").concat(showLanding && this.landingScreen ? this.landingScreen.generateHTML() : '', "\n\n          ").concat(showVoice ? this.voiceInterface.generateHTML() : '', "\n          ").concat(showText ? this.textInterface.generateHTML() : '', "\n          ").concat(this.generateFooterHTML(), "\n          </div>\n        </div>\n      </div>\n    ");
     }
 
     /**
@@ -21976,7 +22120,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Note: Removed headerColor variable - landing screen colors now use explicit defaults
       // to prevent buttons from inheriting header backgroundColor
 
-      return "\n      /* MOBILE FIRST - Default styles for all devices */\n      #text-chat-widget {\n        position: fixed !important;\n        z-index: 10000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        /* Mobile defaults */\n        right: 10px;\n        bottom: 10px;\n        left: auto;\n        top: auto;\n      }\n      \n      /* Desktop positioning (only on larger screens) */\n      @media (min-width: 769px) {\n        #text-chat-widget {\n          ".concat(positionStyles, "\n          right: ").concat(this.config.position.horizontal === 'right' ? '20px' : 'auto', ";\n          left: ").concat(this.config.position.horizontal === 'left' ? '20px' : 'auto', ";\n          bottom: ").concat(this.config.position.vertical === 'bottom' ? '20px' : 'auto', ";\n          top: ").concat(this.config.position.vertical === 'top' ? '20px' : 'auto', ";\n        }\n      }\n      \n      /* Mobile override (force mobile positioning) */\n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      #text-chat-button {\n        position: relative;\n        width: ").concat(buttonSize, "px;\n        height: ").concat(buttonSize, "px;\n        margin: 0;\n        flex-shrink: 0;\n        border-radius: ").concat(btn.shape === 'circle' ? '50%' : btn.shape === 'square' ? '0' : '12px', ";\n        background: ").concat(btn.backgroundColor || icon.backgroundColor || '#7C3AED', ";\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all ").concat(anim.duration, "s ease;\n        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        touch-action: manipulation;\n        -webkit-tap-highlight-color: transparent;\n        -webkit-touch-callout: none;\n        user-select: none;\n        min-width: 44px;\n        min-height: 44px;\n        z-index: 1;\n      }\n      \n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n        \n        #text-chat-button-container {\n          width: 56px !important;\n          height: 56px !important;\n        }\n        \n        #text-chat-button {\n          width: 56px !important;\n          height: 56px !important;\n          min-width: 56px !important;\n          min-height: 56px !important;\n          max-width: 56px !important;\n          max-height: 56px !important;\n        }\n        \n        #text-chat-panel {\n          position: fixed !important;\n          left: 10px !important;\n          right: 10px !important;\n          bottom: 92px !important; /* 56px button + 20px gap + 16px footer */\n          top: 60px !important; /* Add top spacing */\n          width: auto !important;\n          max-width: none !important;\n          height: auto !important; /* Change from max-height to auto */\n          max-height: none !important; /* Remove max-height */\n          transform: none !important;\n          margin: 0 !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 10px 14px;\n          min-height: 56px;\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 15px;\n        }\n        \n        #text-chat-panel .header-icon {\n          width: 40px;\n          height: 40px;\n          min-width: 40px;\n          min-height: 40px;\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 12px 16px !important;\n          min-height: 48px !important;\n        }\n        \n        #text-chat-send {\n          min-width: 48px !important;\n          min-height: 48px !important;\n          width: 48px !important;\n          height: 48px !important;\n        }\n        \n        .landing-screen {\n          padding: 16px;\n        }\n        \n        .landing-logo {\n          font-size: 40px;\n        }\n        \n        .landing-title {\n          font-size: 18px;\n          margin-bottom: 16px;\n        }\n        \n        .mode-selection {\n          flex-direction: column;\n          gap: 12px;\n          align-items: center;\n        }\n        \n        .mode-card {\n          max-width: 100%;\n          width: 100%;\n          padding: 16px;\n        }\n        \n        .mode-card-icon {\n          width: 50px;\n          height: 50px;\n          font-size: 28px;\n        }\n        \n        .mode-card-title {\n          font-size: 14px;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n        \n        #text-chat-button-container {\n          width: 54px !important;\n          height: 54px !important;\n        }\n        \n        #text-chat-button {\n          width: 54px !important;\n          height: 54px !important;\n          min-width: 54px !important;\n          min-height: 54px !important;\n        }\n        \n        #text-chat-panel {\n          left: 8px !important;\n          right: 8px !important;\n          bottom: 86px !important; /* 54px button + 20px gap + 12px footer */\n          top: 50px !important; /* Add top spacing for very small screens */\n          height: auto !important;\n          max-height: none !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 8px 12px;\n          min-height: 52px;\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 14px;\n        }\n        \n        .landing-logo {\n          font-size: 36px;\n        }\n        \n        .landing-title {\n          font-size: 16px;\n        }\n      }\n      \n      ").concat(anim.enableHover ? "\n        #text-chat-button:hover {\n          ".concat(btn.hoverColor ? "background: ".concat(btn.hoverColor, ";") : '', "\n          transform: scale(1.05);\n          box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);\n        }\n      ") : '', "\n      \n      /* Prompt Animation Keyframes */\n      @keyframes widget-shimmer {\n        0% { transform: translateX(-100%); }\n        100% { transform: translateX(200%); }\n      }\n      \n      @keyframes widget-ripple {\n        0% { transform: scale(1); opacity: 0.6; }\n        100% { transform: scale(2.5); opacity: 0; }\n      }\n      \n      @keyframes widget-float {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-8px); }\n      }\n      \n      @keyframes widget-bounce {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-10px); }\n      }\n      \n      @keyframes widget-pulse-ring {\n        0% { transform: scale(1); opacity: 0.4; }\n        100% { transform: scale(1.8); opacity: 0; }\n      }\n      \n      /* Prompt Bubble Container */\n      #text-chat-button-container {\n        position: fixed;\n        ").concat(this.config.position.vertical === 'bottom' ? "bottom: ".concat(((_this$config$position = this.config.position.offset) === null || _this$config$position === void 0 ? void 0 : _this$config$position.y) || 20, "px;") : "top: ".concat(((_this$config$position2 = this.config.position.offset) === null || _this$config$position2 === void 0 ? void 0 : _this$config$position2.y) || 20, "px;"), "\n        ").concat(this.config.position.horizontal === 'right' ? "right: ".concat(((_this$config$position3 = this.config.position.offset) === null || _this$config$position3 === void 0 ? void 0 : _this$config$position3.x) || 20, "px;") : "left: ".concat(((_this$config$position4 = this.config.position.offset) === null || _this$config$position4 === void 0 ? void 0 : _this$config$position4.x) || 20, "px;"), "\n        width: ").concat(buttonSize, "px;\n        height: ").concat(buttonSize, "px;\n        z-index: 10001;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      \n      @media (max-width: 768px) {\n        #text-chat-button-container {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-button-container {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* Prompt Bubble Styles */\n      .prompt-bubble {\n        position: absolute;\n        z-index: 10002;\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      \n      .prompt-bubble.top {\n        bottom: calc(100% + 18px);\n        left: 50%;\n        transform: translateX(-50%);\n      }\n      \n      .prompt-bubble.left {\n        right: calc(100% + 12px);\n        top: 50%;\n        transform: translateY(-50%);\n      }\n      \n      .prompt-bubble.right {\n        left: calc(100% + 12px);\n        top: 50%;\n        transform: translateY(-50%);\n      }\n      \n      /* Ensure animations preserve horizontal centering for top position */\n      .prompt-bubble.top.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-float {\n        animation: widget-float 2s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-pulse {\n        animation: pulse 2s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble-content {\n        position: relative;\n        padding: 8px 16px;\n        border-radius: 20px;\n        font-weight: 500;\n        font-size: 14px;\n        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);\n        overflow: hidden;\n      }\n      \n      .prompt-bubble-shimmer {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);\n        animation: widget-shimmer 2s infinite;\n      }\n      \n      .prompt-bubble.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite;\n      }\n      \n      .prompt-bubble.animation-pulse {\n        animation: pulse 2s ease-in-out infinite;\n      }\n      \n      .prompt-bubble.animation-float {\n        animation: widget-float 2s ease-in-out infinite;\n      }\n      \n      /* Ensure top-positioned bubbles maintain horizontal centering during animations */\n      .prompt-bubble.top.animation-bounce,\n      .prompt-bubble.top.animation-float,\n      .prompt-bubble.top.animation-pulse {\n        /* Animation keyframes already include translateX(-50%) for centering */\n      }\n      \n      /* Prompt Bubble Arrow */\n      .prompt-bubble-arrow {\n        position: absolute;\n        width: 0;\n        height: 0;\n        border: 8px solid transparent;\n      }\n      \n      .prompt-bubble.top .prompt-bubble-arrow {\n        top: 100%;\n        left: 50%;\n        transform: translateX(-50%);\n        border-top-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-bottom: none;\n        margin-left: 0;\n      }\n      \n      .prompt-bubble.left .prompt-bubble-arrow {\n        left: 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        border-left-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-right: none;\n      }\n      \n      .prompt-bubble.right .prompt-bubble-arrow {\n        right: 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        border-right-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-left: none;\n      }\n      \n      /* Pulse Rings */\n      .prompt-pulse-rings {\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        pointer-events: none;\n      }\n      \n      .prompt-pulse-ring {\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        animation: widget-pulse-ring 2s ease-out infinite;\n      }\n      \n      .prompt-pulse-ring:nth-child(2) {\n        animation-delay: 0.5s;\n      }\n      \n      /* Mobile adjustments for prompt bubble */\n      @media (max-width: 768px) {\n        .prompt-bubble-content {\n          font-size: 12px;\n          padding: 6px 12px;\n        }\n        \n        .prompt-bubble.top {\n          bottom: calc(100% + 14px);\n        }\n        \n        .prompt-bubble.left,\n        .prompt-bubble.right {\n          display: none; /* Hide side prompts on mobile */\n        }\n      }\n      \n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed;\n        bottom: calc(").concat(buttonSize, "px + 20px + 20px); /* Button + gap + reduced footer offset */\n        ").concat(this.config.position.horizontal === 'right' ? 'right: 20px;' : 'left: 20px;', "\n        width: ").concat(panel.width, "px;\n        max-width: calc(100vw - 40px);\n        height: ").concat(panel.height, "px;\n        max-height: calc(100vh - ").concat(buttonSize, "px - 40px - 20px); /* Account for footer height */\n        background: transparent;\n        border-radius: ").concat(panel.borderRadius, "px;\n        border: none;\n        flex-direction: column;\n        overflow: hidden;\n        ").concat(panel.backdropFilter ? "backdrop-filter: ".concat(panel.backdropFilter, ";") : '', "\n        ").concat(anim.enableSlide ? "transition: all ".concat(anim.duration, "s ease;") : '', "\n        box-sizing: border-box;\n      }\n      \n      #text-chat-panel.open {\n        display: flex").concat(important, ";\n        ").concat(anim.enableSlide ? 'transform: translateY(0); opacity: 1;' : '', "\n      }\n\n      /* Shell for gradient border/background */\n      .widget-shell { width: 100%; height: 100%; padding: 0; border-radius: ").concat(panel.borderRadius, "px; background: transparent; box-shadow: 0 20px 60px rgba(0,0,0,0.15); overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }\n      .panel-inner { width: 100%; height: 100%; background: #ffffff; border-radius: ").concat(panel.borderRadius, "px; border: ").concat(panel.border, "; overflow: hidden; display:flex; flex-direction: column; padding: 0; box-sizing: border-box; max-width: 100%; }\n\n      /* New structure styles matching provided design */\n      #text-chat-panel .widget-container {\n        width: 100%; height: 100%; background: #FFFFFF; overflow: visible; display: flex; flex-direction: column; border-radius: ").concat(panel.borderRadius, "px;\n        container-type: size;\n      }\n      \n      /* Ensure content areas can scroll when height is constrained */\n      #text-chat-panel .widget-container > .landing-screen,\n      #text-chat-panel .widget-container > .voice-interface,\n      #text-chat-panel .widget-container > .text-interface {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: visible; /* Change from hidden to visible */\n      }\n      \n      /* Header should not scroll */\n      #text-chat-panel .widget-header {\n        padding: 14px 16px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        border-top-left-radius: ").concat(panel.borderRadius, "px;\n        border-top-right-radius: ").concat(panel.borderRadius, "px;\n        flex-shrink: 0;\n        box-sizing: border-box;\n        position: relative;\n        overflow: hidden;\n        background: ").concat(header.backgroundColor || '#7C3AED').concat(important, ";\n        color: ").concat(header.textColor || '#FFFFFF').concat(important, ";\n      }\n      \n      #text-chat-panel .widget-header::before {\n        content: '';\n        position: absolute;\n        top: -50%;\n        right: -20%;\n        width: 180px;\n        height: 180px;\n        background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\n        pointer-events: none;\n      }\n      \n      #text-chat-panel .widget-header > div:first-child {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n        position: relative;\n        z-index: 1;\n      }\n      \n      #text-chat-panel .header-title { font-size: 15px; font-weight: 600; margin: 0; }\n      #text-chat-panel .header-status { display: flex; align-items: center; gap: 5px; font-size: 12px; margin: 0; }\n      #text-chat-panel .status-dot { width: 6px; height: 6px; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }\n      /* Online indicator customization - inline styles take precedence */\n      @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.8; } }\n      /* Header icon buttons */\n      .header-icon {\n        background: rgba(255, 255, 255, 0.1);\n        border: none;\n        color: white;\n        width: 34px;\n        height: 34px;\n        min-width: 34px;\n        min-height: 34px;\n        border-radius: 10px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background 0.2s;\n        flex-shrink: 0;\n        font-size: 16px;\n        padding: 0;\n        box-sizing: border-box;\n        position: relative;\n        z-index: 1;\n      }\n      \n      .header-icon:hover {\n        background: rgba(255, 255, 255, 0.2);\n      }\n      \n      .header-icon svg {\n        pointer-events: none;\n        stroke: white;\n        fill: none;\n      }\n      \n      .back-btn.visible {\n        display: flex !important;\n      }\n\n      ").concat(showLanding && this.landingScreen ? this.landingScreen.generateCSS() : '', "\n\n      ").concat(showVoice ? this.voiceInterface.generateCSS() : '', "\n      ").concat(showText ? this.textInterface.generateCSS() : '', "\n      \n      /* Footer Branding */\n      .widget-footer {\n        box-sizing: border-box;\n      }\n      \n      .footer-brand-link {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      }\n      \n      .footer-brand-link:hover {\n        opacity: 0.9;\n      }\n      \n      @media (max-width: 768px) {\n        .widget-footer {\n          height: 32px;\n        }\n        .widget-footer span {\n          font-size: 10px;\n        }\n        .widget-footer span:last-child {\n          font-size: 8px;\n        }\n      }\n      \n      #text-chat-send-hint {\n        text-align: center;\n        line-height: 1.4;\n      }\n      \n      .agent-thinking {\n        font-style: italic;\n        color: #6B7280;\n      }\n    ");
+      return "\n      /* MOBILE FIRST - Default styles for all devices */\n      #text-chat-widget {\n        position: fixed !important;\n        z-index: 10000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n        /* Mobile defaults */\n        right: 10px;\n        bottom: 10px;\n        left: auto;\n        top: auto;\n      }\n      \n      /* Desktop positioning (only on larger screens) */\n      @media (min-width: 769px) {\n        #text-chat-widget {\n          ".concat(positionStyles, "\n          right: ").concat(this.config.position.horizontal === 'right' ? '20px' : 'auto', ";\n          left: ").concat(this.config.position.horizontal === 'left' ? '20px' : 'auto', ";\n          bottom: ").concat(this.config.position.vertical === 'bottom' ? '20px' : 'auto', ";\n          top: ").concat(this.config.position.vertical === 'top' ? '20px' : 'auto', ";\n        }\n      }\n      \n      /* Mobile override (force mobile positioning) */\n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      #text-chat-button {\n        position: relative;\n        width: ").concat(buttonSize, "px;\n        height: ").concat(buttonSize, "px;\n        margin: 0;\n        flex-shrink: 0;\n        border-radius: ").concat(btn.shape === 'circle' ? '50%' : btn.shape === 'square' ? '0' : '12px', ";\n        background: ").concat(btn.backgroundColor || icon.backgroundColor || '#7C3AED', ";\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: all ").concat(anim.duration, "s ease;\n        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        touch-action: manipulation;\n        -webkit-tap-highlight-color: transparent;\n        -webkit-touch-callout: none;\n        user-select: none;\n        min-width: 44px;\n        min-height: 44px;\n        z-index: 1;\n      }\n      \n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n        \n        #text-chat-button-container {\n          width: 56px !important;\n          height: 56px !important;\n        }\n        \n        #text-chat-button {\n          width: 56px !important;\n          height: 56px !important;\n          min-width: 56px !important;\n          min-height: 56px !important;\n          max-width: 56px !important;\n          max-height: 56px !important;\n        }\n        \n        #text-chat-panel {\n          position: fixed !important;\n          left: 10px !important;\n          right: 10px !important;\n          bottom: 92px !important; /* 56px button + 20px gap + 16px footer */\n          top: 60px !important; /* Add top spacing */\n          width: auto !important;\n          max-width: none !important;\n          height: auto !important; /* Change from max-height to auto */\n          max-height: none !important; /* Remove max-height */\n          transform: none !important;\n          margin: 0 !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 10px 14px;\n          min-height: 56px;\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 15px;\n        }\n        \n        #text-chat-panel .header-icon {\n          width: 40px;\n          height: 40px;\n          min-width: 40px;\n          min-height: 40px;\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 12px 16px !important;\n          min-height: 48px !important;\n        }\n        \n        #text-chat-send {\n          min-width: 48px !important;\n          min-height: 48px !important;\n          width: 48px !important;\n          height: 48px !important;\n        }\n        \n        .landing-screen {\n          padding: 16px;\n        }\n        \n        .landing-logo {\n          font-size: 40px;\n        }\n        \n        .landing-title {\n          font-size: 18px;\n          margin-bottom: 16px;\n        }\n        \n        .mode-selection {\n          flex-direction: column;\n          gap: 12px;\n          align-items: center;\n        }\n        \n        .mode-card {\n          max-width: 100%;\n          width: 100%;\n          padding: 16px;\n        }\n        \n        .mode-card-icon {\n          width: 50px;\n          height: 50px;\n          font-size: 28px;\n        }\n        \n        .mode-card-title {\n          font-size: 14px;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n        \n        #text-chat-button-container {\n          width: 54px !important;\n          height: 54px !important;\n        }\n        \n        #text-chat-button {\n          width: 54px !important;\n          height: 54px !important;\n          min-width: 54px !important;\n          min-height: 54px !important;\n        }\n        \n        #text-chat-panel {\n          left: 8px !important;\n          right: 8px !important;\n          bottom: 86px !important; /* 54px button + 20px gap + 12px footer */\n          top: 50px !important; /* Add top spacing for very small screens */\n          height: auto !important;\n          max-height: none !important;\n        }\n        \n        #text-chat-panel .widget-header {\n          padding: 8px 12px;\n          min-height: 52px;\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 14px;\n        }\n        \n        .landing-logo {\n          font-size: 36px;\n        }\n        \n        .landing-title {\n          font-size: 16px;\n        }\n      }\n      \n      ").concat(anim.enableHover ? "\n        #text-chat-button:hover {\n          ".concat(btn.hoverColor ? "background: ".concat(btn.hoverColor, ";") : '', "\n          transform: scale(1.05);\n          box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);\n        }\n      ") : '', "\n      \n      /* Prompt Animation Keyframes */\n      @keyframes widget-shimmer {\n        0% { transform: translateX(-100%); }\n        100% { transform: translateX(200%); }\n      }\n      \n      @keyframes widget-ripple {\n        0% { transform: scale(1); opacity: 0.6; }\n        100% { transform: scale(2.5); opacity: 0; }\n      }\n      \n      @keyframes widget-float {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-8px); }\n      }\n      \n      @keyframes widget-bounce {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-10px); }\n      }\n      \n      @keyframes widget-pulse-ring {\n        0% { transform: scale(1); opacity: 0.4; }\n        100% { transform: scale(1.8); opacity: 0; }\n      }\n      \n      /* Prompt Bubble Container */\n      #text-chat-button-container {\n        position: fixed;\n        ").concat(this.config.position.vertical === 'bottom' ? "bottom: ".concat(((_this$config$position = this.config.position.offset) === null || _this$config$position === void 0 ? void 0 : _this$config$position.y) || 20, "px;") : "top: ".concat(((_this$config$position2 = this.config.position.offset) === null || _this$config$position2 === void 0 ? void 0 : _this$config$position2.y) || 20, "px;"), "\n        ").concat(this.config.position.horizontal === 'right' ? "right: ".concat(((_this$config$position3 = this.config.position.offset) === null || _this$config$position3 === void 0 ? void 0 : _this$config$position3.x) || 20, "px;") : "left: ".concat(((_this$config$position4 = this.config.position.offset) === null || _this$config$position4 === void 0 ? void 0 : _this$config$position4.x) || 20, "px;"), "\n        width: ").concat(buttonSize, "px;\n        height: ").concat(buttonSize, "px;\n        z-index: 10001;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      \n      @media (max-width: 768px) {\n        #text-chat-button-container {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-button-container {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* Prompt Bubble Styles */\n      .prompt-bubble {\n        position: absolute;\n        z-index: 10002;\n        pointer-events: none;\n        white-space: nowrap;\n      }\n      \n      .prompt-bubble.top {\n        bottom: calc(100% + 18px);\n        left: 50%;\n        transform: translateX(-50%);\n      }\n      \n      .prompt-bubble.left {\n        right: calc(100% + 12px);\n        top: 50%;\n        transform: translateY(-50%);\n      }\n      \n      .prompt-bubble.right {\n        left: calc(100% + 12px);\n        top: 50%;\n        transform: translateY(-50%);\n      }\n      \n      /* Ensure animations preserve horizontal centering for top position */\n      .prompt-bubble.top.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-float {\n        animation: widget-float 2s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-pulse {\n        animation: pulse 2s ease-in-out infinite;\n        transform: translateX(-50%); /* Keep centering */\n      }\n      \n      .prompt-bubble-content {\n        position: relative;\n        padding: 8px 16px;\n        border-radius: 20px;\n        font-weight: 500;\n        font-size: 14px;\n        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);\n        overflow: hidden;\n      }\n      \n      .prompt-bubble-shimmer {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);\n        animation: widget-shimmer 2s infinite;\n      }\n      \n      .prompt-bubble.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite;\n      }\n      \n      .prompt-bubble.animation-pulse {\n        animation: pulse 2s ease-in-out infinite;\n      }\n      \n      .prompt-bubble.animation-float {\n        animation: widget-float 2s ease-in-out infinite;\n      }\n      \n      /* Ensure top-positioned bubbles maintain horizontal centering during animations */\n      .prompt-bubble.top.animation-bounce,\n      .prompt-bubble.top.animation-float,\n      .prompt-bubble.top.animation-pulse {\n        /* Animation keyframes already include translateX(-50%) for centering */\n      }\n      \n      /* Prompt Bubble Arrow */\n      .prompt-bubble-arrow {\n        position: absolute;\n        width: 0;\n        height: 0;\n        border: 8px solid transparent;\n      }\n      \n      .prompt-bubble.top .prompt-bubble-arrow {\n        top: 100%;\n        left: 50%;\n        transform: translateX(-50%);\n        border-top-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-bottom: none;\n        margin-left: 0;\n      }\n      \n      .prompt-bubble.left .prompt-bubble-arrow {\n        left: 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        border-left-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-right: none;\n      }\n      \n      .prompt-bubble.right .prompt-bubble-arrow {\n        right: 100%;\n        top: 50%;\n        transform: translateY(-50%);\n        border-right-color: var(--prompt-bubble-bg-color, #7c3aed);\n        border-left: none;\n      }\n      \n      /* Pulse Rings */\n      .prompt-pulse-rings {\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        pointer-events: none;\n      }\n      \n      .prompt-pulse-ring {\n        position: absolute;\n        inset: 0;\n        border-radius: 50%;\n        animation: widget-pulse-ring 2s ease-out infinite;\n      }\n      \n      .prompt-pulse-ring:nth-child(2) {\n        animation-delay: 0.5s;\n      }\n      \n      /* Mobile adjustments for prompt bubble */\n      @media (max-width: 768px) {\n        .prompt-bubble-content {\n          font-size: 12px;\n          padding: 6px 12px;\n        }\n        \n        .prompt-bubble.top {\n          bottom: calc(100% + 14px);\n        }\n        \n        .prompt-bubble.left,\n        .prompt-bubble.right {\n          display: none; /* Hide side prompts on mobile */\n        }\n      }\n      \n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed;\n        bottom: calc(").concat(buttonSize, "px + 20px + 20px); /* Button + gap + reduced footer offset */\n        ").concat(this.config.position.horizontal === 'right' ? 'right: 20px;' : 'left: 20px;', "\n        width: ").concat(panel.width, "px;\n        max-width: calc(100vw - 40px);\n        height: ").concat(panel.height, "px;\n        max-height: calc(100vh - ").concat(buttonSize, "px - 40px - 20px); /* Account for footer height */\n        background: transparent;\n        border-radius: ").concat(panel.borderRadius, "px;\n        border: none;\n        flex-direction: column;\n        overflow: hidden;\n        ").concat(panel.backdropFilter ? "backdrop-filter: ".concat(panel.backdropFilter, ";") : '', "\n        ").concat(anim.enableSlide ? "transition: all ".concat(anim.duration, "s ease;") : '', "\n        box-sizing: border-box;\n      }\n      \n      #text-chat-panel.open {\n        display: flex").concat(important, ";\n        ").concat(anim.enableSlide ? 'transform: translateY(0); opacity: 1;' : '', "\n      }\n\n      /* Shell for gradient border/background */\n      .widget-shell { width: 100%; height: 100%; padding: 0; border-radius: ").concat(panel.borderRadius, "px; background: transparent; box-shadow: 0 20px 60px rgba(0,0,0,0.15); overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }\n      .panel-inner { width: 100%; height: 100%; background: #ffffff; border-radius: ").concat(panel.borderRadius, "px; border: ").concat(panel.border, "; overflow: hidden; display:flex; flex-direction: column; padding: 0; box-sizing: border-box; max-width: 100%; }\n\n      /* New structure styles matching provided design */\n      #text-chat-panel .widget-container {\n        width: 100%; height: 100%; background: #FFFFFF; overflow: visible; display: flex; flex-direction: column; border-radius: ").concat(panel.borderRadius, "px;\n        container-type: size;\n      }\n      \n      /* Ensure content areas can scroll when height is constrained */\n      #text-chat-panel .widget-container > .landing-screen,\n      #text-chat-panel .widget-container > .voice-interface,\n      #text-chat-panel .widget-container > .text-interface {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: visible; /* Change from hidden to visible */\n      }\n      \n      /* Header should not scroll */\n      #text-chat-panel .widget-header {\n        padding: 14px 16px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        border-top-left-radius: ").concat(panel.borderRadius, "px;\n        border-top-right-radius: ").concat(panel.borderRadius, "px;\n        flex-shrink: 0;\n        box-sizing: border-box;\n        position: relative;\n        overflow: hidden;\n        background: ").concat(header.backgroundColor || '#7C3AED').concat(important, ";\n        color: ").concat(header.textColor || '#FFFFFF').concat(important, ";\n      }\n      \n      #text-chat-panel .widget-header::before {\n        content: '';\n        position: absolute;\n        top: -50%;\n        right: -20%;\n        width: 180px;\n        height: 180px;\n        background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);\n        pointer-events: none;\n      }\n      \n      #text-chat-panel .widget-header > div:first-child {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n        position: relative;\n        z-index: 1;\n      }\n      \n      #text-chat-panel .header-title { font-size: 15px; font-weight: 600; margin: 0; }\n      #text-chat-panel .header-status { display: flex; align-items: center; gap: 5px; font-size: 12px; margin: 0; }\n      #text-chat-panel .status-dot { width: 6px; height: 6px; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }\n      /* Online indicator customization - inline styles take precedence */\n      @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.8; } }\n      /* Header icon buttons */\n      .header-icon {\n        background: rgba(255, 255, 255, 0.1);\n        border: none;\n        color: white;\n        width: 34px;\n        height: 34px;\n        min-width: 34px;\n        min-height: 34px;\n        border-radius: 10px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background 0.2s;\n        flex-shrink: 0;\n        font-size: 16px;\n        padding: 0;\n        box-sizing: border-box;\n        position: relative;\n        z-index: 1;\n      }\n      \n      .header-icon:hover {\n        background: rgba(255, 255, 255, 0.2);\n      }\n      \n      .header-icon svg {\n        pointer-events: none;\n        stroke: white;\n        fill: none;\n      }\n      \n      .back-btn.visible {\n        display: flex !important;\n      }\n\n      ").concat(showLanding && this.landingScreen ? this.landingScreen.generateCSS() : '', "\n\n      ").concat(showVoice ? this.voiceInterface.generateCSS() : '', "\n      ").concat(showText ? this.textInterface.generateCSS() : '', "\n      \n      /* Footer Branding */\n      .widget-footer {\n        box-sizing: border-box;\n      }\n      \n      .footer-brand-link {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n      }\n      \n      .footer-brand-link:hover {\n        opacity: 0.9;\n      }\n      \n      @media (max-width: 768px) {\n        .widget-footer {\n          height: 32px;\n        }\n        .widget-footer span {\n          font-size: 10px;\n        }\n        .widget-footer span:last-child {\n          font-size: 8px;\n        }\n      }\n      \n      #text-chat-send-hint {\n        text-align: center;\n        line-height: 1.4;\n      }\n      \n      .agent-thinking {\n        font-style: italic;\n        color: #6B7280;\n      }\n\n      /* ========================================\n         MOBILE PILL BUTTON & LANDING OVERLAY\n         Hidden on desktop, shown on mobile only\n         ======================================== */\n      .ttp-mobile-fab {\n        display: none;\n      }\n\n      .ttp-mobile-landing {\n        display: none;\n      }\n\n      @keyframes ttpWaveAnimation {\n        0%, 100% { transform: scaleY(0.4); }\n        50% { transform: scaleY(1); }\n      }\n\n      @keyframes ttpPulseAnimation {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.5; }\n      }\n\n      @media (max-width: 768px) {\n        /* Hide desktop circle button on mobile */\n        #text-chat-button {\n          display: none !important;\n        }\n\n        /* Re-flow the container for pill shape */\n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n          min-width: 0 !important;\n          min-height: 0 !important;\n          max-width: none !important;\n          max-height: none !important;\n        }\n\n        /* Show mobile pill button */\n        .ttp-mobile-fab {\n          display: flex;\n          align-items: center;\n          gap: 10px;\n          padding: 10px 16px 10px 12px;\n          background: linear-gradient(135deg, #581c87, ").concat(header.backgroundColor || '#7C3AED', ");\n          border: none;\n          border-radius: 24px;\n          cursor: pointer;\n          box-shadow: 0 8px 24px rgba(88, 28, 135, 0.4);\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n          z-index: 1;\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n          touch-action: manipulation;\n          -webkit-tap-highlight-color: transparent;\n        }\n\n        .ttp-mobile-fab:hover {\n          transform: translateY(-3px);\n          box-shadow: 0 12px 32px rgba(88, 28, 135, 0.5);\n        }\n\n        .ttp-mobile-fab__icon-wrap {\n          width: 36px;\n          height: 36px;\n          border-radius: 50%;\n          background: rgba(255, 255, 255, 0.15);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-shrink: 0;\n        }\n\n        .ttp-mobile-fab__waveform {\n          display: flex;\n          align-items: center;\n          gap: 2px;\n          height: 16px;\n        }\n\n        .ttp-mobile-fab__waveform .bar {\n          width: 2px;\n          background: #fff;\n          border-radius: 1px;\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite;\n        }\n\n        .ttp-mobile-fab__waveform .bar:nth-child(1) { height: 5px; animation-delay: 0s; }\n        .ttp-mobile-fab__waveform .bar:nth-child(2) { height: 10px; animation-delay: 0.1s; }\n        .ttp-mobile-fab__waveform .bar:nth-child(3) { height: 16px; animation-delay: 0.2s; }\n        .ttp-mobile-fab__waveform .bar:nth-child(4) { height: 8px; animation-delay: 0.3s; }\n        .ttp-mobile-fab__waveform .bar:nth-child(5) { height: 12px; animation-delay: 0.4s; }\n\n        .ttp-mobile-fab__label-wrap {\n          display: flex;\n          flex-direction: column;\n          align-items: flex-start;\n          gap: 1px;\n        }\n\n        .ttp-mobile-fab__label {\n          color: #fff;\n          font-size: 14px;\n          font-weight: 600;\n          line-height: 1.2;\n        }\n\n        .ttp-mobile-fab__status {\n          display: flex;\n          align-items: center;\n          gap: 4px;\n          font-size: 11px;\n          color: rgba(255, 255, 255, 0.7);\n          line-height: 1.2;\n        }\n\n        .ttp-mobile-fab__dot {\n          width: 6px;\n          height: 6px;\n          background: ").concat(header.onlineIndicatorDotColor || '#10b981', ";\n          border-radius: 50%;\n          box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);\n        }\n\n        /* ---- Mobile Landing Overlay ---- */\n        .ttp-mobile-landing.active {\n          display: block;\n          position: fixed;\n          bottom: 16px;\n          left: 12px;\n          right: 12px;\n          background: linear-gradient(135deg, #581c87 0%, ").concat(header.backgroundColor || '#7C3AED', " 100%);\n          border-radius: 20px;\n          overflow: hidden;\n          box-shadow:\n            0 10px 40px rgba(88, 28, 135, 0.4),\n            0 0 0 1px rgba(255, 255, 255, 0.1) inset;\n          z-index: 10002;\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n        }\n\n        .ttp-mobile-landing::before {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          height: 1px;\n          background: linear-gradient(90deg,\n            transparent 0%,\n            rgba(255, 255, 255, 0.3) 50%,\n            transparent 100%);\n        }\n\n        .ttp-mobile-landing__header {\n          padding: 14px 16px;\n          display: flex;\n          align-items: center;\n          gap: 12px;\n        }\n\n        .ttp-mobile-landing__avatar {\n          width: 44px;\n          height: 44px;\n          border-radius: 12px;\n          background: rgba(255, 255, 255, 0.15);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-shrink: 0;\n        }\n\n        .ttp-mobile-landing__waveform {\n          display: flex;\n          align-items: center;\n          gap: 3px;\n          height: 20px;\n        }\n\n        .ttp-mobile-landing__waveform .bar {\n          width: 3px;\n          background: rgba(255, 255, 255, 0.9);\n          border-radius: 2px;\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite;\n        }\n\n        .ttp-mobile-landing__waveform .bar:nth-child(1) { height: 6px; animation-delay: 0s; }\n        .ttp-mobile-landing__waveform .bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }\n        .ttp-mobile-landing__waveform .bar:nth-child(3) { height: 20px; animation-delay: 0.2s; }\n        .ttp-mobile-landing__waveform .bar:nth-child(4) { height: 10px; animation-delay: 0.3s; }\n        .ttp-mobile-landing__waveform .bar:nth-child(5) { height: 16px; animation-delay: 0.4s; }\n\n        .ttp-mobile-landing__info {\n          flex: 1;\n          min-width: 0;\n        }\n\n        .ttp-mobile-landing__name {\n          color: #fff;\n          font-size: 15px;\n          font-weight: 600;\n          margin-bottom: 2px;\n        }\n\n        .ttp-mobile-landing__status {\n          color: rgba(255, 255, 255, 0.7);\n          font-size: 12px;\n          display: flex;\n          align-items: center;\n          gap: 5px;\n        }\n\n        .ttp-mobile-landing__dot {\n          width: 6px;\n          height: 6px;\n          background: ").concat(header.onlineIndicatorDotColor || '#10b981', ";\n          border-radius: 50%;\n          animation: ttpPulseAnimation 2s ease-in-out infinite;\n        }\n\n        .ttp-mobile-landing__close {\n          width: 32px;\n          height: 32px;\n          border-radius: 10px;\n          background: rgba(255, 255, 255, 0.1);\n          border: none;\n          color: rgba(255, 255, 255, 0.7);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          cursor: pointer;\n          transition: all 0.2s;\n          flex-shrink: 0;\n        }\n\n        .ttp-mobile-landing__close:hover {\n          background: rgba(255, 255, 255, 0.2);\n          color: #fff;\n        }\n\n        .ttp-mobile-landing__error {\n          margin: 0 14px 10px;\n          padding: 10px 12px;\n          background: #fef2f2;\n          border: 1px solid #fecaca;\n          border-radius: 10px;\n          display: flex;\n          align-items: flex-start;\n          gap: 8px;\n          color: #b91c1c;\n          font-size: 13px;\n          line-height: 1.4;\n        }\n        .ttp-mobile-landing__error svg {\n          flex-shrink: 0;\n          margin-top: 1px;\n          stroke: #dc2626;\n        }\n\n        .ttp-mobile-landing__actions {\n          padding: 0 14px 14px;\n          display: flex;\n          gap: 10px;\n        }\n\n        .ttp-mobile-landing__btn {\n          flex: 1;\n          padding: 14px;\n          border-radius: 12px;\n          border: none;\n          cursor: pointer;\n          font-family: inherit;\n          font-size: 14px;\n          font-weight: 600;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          gap: 10px;\n          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n          touch-action: manipulation;\n          -webkit-tap-highlight-color: transparent;\n        }\n\n        .ttp-mobile-landing__btn svg {\n          width: 20px;\n          height: 20px;\n          flex-shrink: 0;\n        }\n\n        .ttp-mobile-landing__btn--call {\n          background: #fff;\n          color: ").concat(header.backgroundColor || '#7C3AED', ";\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n\n        .ttp-mobile-landing__btn--call:hover {\n          transform: translateY(-2px);\n          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n        }\n\n        .ttp-mobile-landing__btn--text {\n          background: rgba(255, 255, 255, 0.15);\n          color: #fff;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .ttp-mobile-landing__btn--text:hover {\n          background: rgba(255, 255, 255, 0.2);\n          border-color: rgba(255, 255, 255, 0.2);\n        }\n\n        .ttp-mobile-landing__footer {\n          padding: 10px 16px;\n          display: flex;\n          justify-content: center;\n          border-top: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .ttp-mobile-landing__powered {\n          color: rgba(255, 255, 255, 0.4);\n          font-size: 11px;\n          display: flex;\n          align-items: center;\n          gap: 4px;\n        }\n\n        .ttp-mobile-landing__powered svg {\n          width: 10px;\n          height: 10px;\n          color: #f59e0b;\n        }\n\n        .ttp-mobile-landing__powered a {\n          color: rgba(255, 255, 255, 0.6);\n          text-decoration: none;\n        }\n\n        .ttp-mobile-landing__powered a:hover {\n          color: #fff;\n        }\n      }\n    ");
     }
   }, {
     key: "setupWidgetEvents",
@@ -22047,7 +22191,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         this.landingScreen.setupEventHandlers({
           onSelectVoice: function () {
             var _onSelectVoice = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-              var _this6$voiceInterface4, _this6$voiceInterface8, _this6$shadowRoot, _this6$voiceInterface5, _this6$shadowRoot2, _this6$voiceInterface6, panel, idleState, floatingButton, _this6$voiceInterface7, _this6$voiceInterface9, _this6$voiceInterface1, _this6$config$behavio, _idleState, isDomainError, statusTitle, _this6$voiceInterface0, titleText, domainErrorTitle, _widgetMode, _this6$voiceInterface11, _this6$voiceInterface12, _this6$config$behavio2, _this6$voiceInterface10, _this6$voiceInterface13, _this6$shadowRoot3, existingBar, _floatingButton, _widgetMode2, _t;
+              var _this6$voiceInterface4, _this6$voiceInterface8, _this6$shadowRoot, _this6$voiceInterface5, _this6$shadowRoot2, _this6$shadowRoot3, _this6$voiceInterface6, panel, idleState, floatingButton, mobileFab, _this6$voiceInterface7, _this6$voiceInterface9, _this6$voiceInterface1, _this6$config$behavio, _idleState, isDomainError, statusTitle, _this6$voiceInterface0, titleText, domainErrorTitle, _widgetMode, _this6$voiceInterface11, _this6$voiceInterface12, _this6$config$behavio2, _this6$voiceInterface10, _this6$voiceInterface13, _this6$shadowRoot4, _this6$shadowRoot5, existingBar, _floatingButton, _mobileFab, _widgetMode2, _t;
               return _regenerator().w(function (_context) {
                 while (1) switch (_context.p = _context.n) {
                   case 0:
@@ -22097,6 +22241,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
                     if (floatingButton) {
                       floatingButton.style.display = 'none';
                     }
+                    mobileFab = (_this6$shadowRoot3 = _this6.shadowRoot) === null || _this6$shadowRoot3 === void 0 ? void 0 : _this6$shadowRoot3.querySelector('.ttp-mobile-fab');
+                    if (mobileFab) {
+                      mobileFab.style.display = 'none';
+                    }
                     // Create minimized bar with connecting state
                     if (!((_this6$voiceInterface6 = _this6.voiceInterface) !== null && _this6$voiceInterface6 !== void 0 && _this6$voiceInterface6.createMobileMinimizedBar)) {
                       _context.n = 3;
@@ -22206,10 +22354,14 @@ var TTPChatWidget = /*#__PURE__*/function () {
                         _this6.voiceInterface.removeMobileMinimizedBar();
                       }
                       // Restore floating button if it was hidden
-                      _floatingButton = ((_this6$shadowRoot3 = _this6.shadowRoot) === null || _this6$shadowRoot3 === void 0 ? void 0 : _this6$shadowRoot3.getElementById('text-chat-button')) || document.getElementById('text-chat-button');
+                      _floatingButton = ((_this6$shadowRoot4 = _this6.shadowRoot) === null || _this6$shadowRoot4 === void 0 ? void 0 : _this6$shadowRoot4.getElementById('text-chat-button')) || document.getElementById('text-chat-button');
                       if (_floatingButton) {
                         _floatingButton.style.display = '';
                       }
+                      _mobileFab = (_this6$shadowRoot5 = _this6.shadowRoot) === null || _this6$shadowRoot5 === void 0 ? void 0 : _this6$shadowRoot5.querySelector('.ttp-mobile-fab');
+                      if (_mobileFab) {
+                        _mobileFab.style.display = '';
+                      }
                     }
 
                     // Show user-friendly error message (unless it's a user cancellation)
@@ -22302,6 +22454,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
         }
       }
 
+      // Mobile floating button & landing overlay
+      this.setupMobileWidgetEvents();
+
       // Keyboard navigation
       if (this.config.accessibility.keyboardNavigation) {
         this.setupKeyboardNavigation();
@@ -22385,13 +22540,83 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Hide new chat button on voice interface (not applicable)
       if (newChatBtn) newChatBtn.style.display = 'none';
     }
+  }, {
+    key: "setupMobileWidgetEvents",
+    value: function setupMobileWidgetEvents() {
+      var _this7 = this;
+      if (!this.shadowRoot) return;
+      var mobileFab = this.shadowRoot.querySelector('.ttp-mobile-fab');
+      var mobileLanding = this.shadowRoot.getElementById('ttpMobileLanding');
+      if (!mobileFab || !mobileLanding) return;
+      var closeMobileLanding = function closeMobileLanding() {
+        mobileLanding.classList.remove('active');
+        mobileFab.style.display = '';
+        _this7.isMobileLandingOpen = false;
+      };
+      var openMobileLanding = function openMobileLanding() {
+        if (_this7.config.promptAnimation.hideAfterClick) {
+          _this7.hidePrompt();
+        }
+        // Clear any previous error banner
+        var errorBanner = _this7.shadowRoot.getElementById('ttpMobileLandingError');
+        if (errorBanner) errorBanner.style.display = 'none';
+        mobileFab.style.display = 'none';
+        mobileLanding.classList.add('active');
+        _this7.isMobileLandingOpen = true;
+      };
+      mobileFab.onclick = openMobileLanding;
+      var mobileClose = mobileLanding.querySelector('.ttp-mobile-landing__close');
+      if (mobileClose) {
+        mobileClose.onclick = closeMobileLanding;
+      }
+      var mobileCallBtn = this.shadowRoot.getElementById('ttpMobileCallBtn');
+      if (mobileCallBtn) {
+        mobileCallBtn.onclick = function () {
+          closeMobileLanding();
+          var desktopVoiceCard = _this7.shadowRoot.getElementById('mode-card-voice');
+          if (desktopVoiceCard) {
+            desktopVoiceCard.click();
+          } else {
+            _this7.showVoice();
+          }
+        };
+      }
+      var mobileChatBtn = this.shadowRoot.getElementById('ttpMobileChatBtn');
+      if (mobileChatBtn) {
+        mobileChatBtn.onclick = function () {
+          closeMobileLanding();
+          var desktopTextCard = _this7.shadowRoot.getElementById('mode-card-text');
+          if (desktopTextCard) {
+            desktopTextCard.click();
+          } else {
+            _this7.showText();
+          }
+        };
+      }
+
+      // Close mobile landing on outside click
+      document.addEventListener('click', function (e) {
+        if (!_this7.isMobileLandingOpen) return;
+        var path = e.composedPath();
+        if (!path.includes(mobileLanding) && !path.includes(mobileFab)) {
+          closeMobileLanding();
+        }
+      });
+
+      // Close mobile landing on Escape
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && _this7.isMobileLandingOpen) {
+          closeMobileLanding();
+        }
+      });
+    }
   }, {
     key: "setupKeyboardNavigation",
     value: function setupKeyboardNavigation() {
-      var _this7 = this;
+      var _this8 = this;
       document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && _this7.isOpen) {
-          _this7.togglePanel();
+        if (e.key === 'Escape' && _this8.isOpen) {
+          _this8.togglePanel();
         }
       });
     }
@@ -22402,7 +22627,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "setupPromptAnimation",
     value: function setupPromptAnimation() {
-      var _this8 = this;
+      var _this9 = this;
       if (!this.shadowRoot) return;
       var promptConfig = this.config.promptAnimation || {};
       // Default to disabled if not specified (enabled === true means explicitly enabled)
@@ -22432,7 +22657,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Auto-hide after configured seconds (only if widget is closed)
       if (!this.isOpen && promptConfig.hideAfterSeconds !== null && promptConfig.hideAfterSeconds > 0) {
         this.promptAutoHideTimer = setTimeout(function () {
-          _this8.hidePrompt();
+          _this9.hidePrompt();
         }, promptConfig.hideAfterSeconds * 1000);
       }
 
@@ -22444,7 +22669,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Wrap the callback to also hide pulse rings
         this.config.onConversationStart = function () {
           // Hide pulse rings when call starts
-          var pulseRings = _this8.shadowRoot.getElementById('prompt-pulse-rings');
+          var pulseRings = _this9.shadowRoot.getElementById('prompt-pulse-rings');
           if (pulseRings) pulseRings.style.display = 'none';
 
           // Call original callback if it exists
@@ -22456,7 +22681,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Also listen to recordingStarted event from SDK if available
         if (this.voiceInterface.sdk.voiceSDK) {
           this.voiceInterface.sdk.voiceSDK.on('recordingStarted', function () {
-            var pulseRings = _this8.shadowRoot.getElementById('prompt-pulse-rings');
+            var pulseRings = _this9.shadowRoot.getElementById('prompt-pulse-rings');
             if (pulseRings) pulseRings.style.display = 'none';
           });
         }
@@ -22504,7 +22729,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "showPrompt",
     value: function showPrompt() {
-      var _this9 = this;
+      var _this0 = this;
       if (!this.shadowRoot) return;
       var promptConfig = this.config.promptAnimation || {};
       // Default to enabled if not specified
@@ -22524,8 +22749,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Function to actually show the elements
       var doShow = function doShow() {
         // Show prompt bubble (check both shadow root and document for compatibility)
-        var promptBubble = _this9.shadowRoot.getElementById('prompt-bubble');
-        if (!promptBubble && _this9.shadowRoot !== document) {
+        var promptBubble = _this0.shadowRoot.getElementById('prompt-bubble');
+        if (!promptBubble && _this0.shadowRoot !== document) {
           promptBubble = document.getElementById('prompt-bubble');
         }
         if (promptBubble) {
@@ -22539,8 +22764,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
         // Show pulse rings if enabled
         if (promptConfig.showPulseRings !== false) {
-          var _pulseRings = _this9.shadowRoot.getElementById('prompt-pulse-rings');
-          if (!_pulseRings && _this9.shadowRoot !== document) {
+          var _pulseRings = _this0.shadowRoot.getElementById('prompt-pulse-rings');
+          if (!_pulseRings && _this0.shadowRoot !== document) {
             _pulseRings = document.getElementById('prompt-pulse-rings');
           }
           if (_pulseRings) {
@@ -22577,7 +22802,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         }
         // Start new timer
         this.promptAutoHideTimer = setTimeout(function () {
-          _this9.hidePrompt();
+          _this0.hidePrompt();
         }, promptConfig.hideAfterSeconds * 1000);
       }
     }
@@ -22593,7 +22818,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "_doTogglePanel",
     value: function _doTogglePanel() {
-      var _this0 = this;
+      var _this1 = this;
       if (!this.shadowRoot) return;
       this.isOpen = !this.isOpen;
       var panel = this.shadowRoot.getElementById('text-chat-panel');
@@ -22606,7 +22831,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Panel is opening - hide prompt
         this.hidePrompt();
         setTimeout(function () {
-          var input = _this0.shadowRoot.getElementById('messageInput');
+          var input = _this1.shadowRoot.getElementById('messageInput');
           if (input) input.focus();
         }, 100);
       } else {
@@ -22614,14 +22839,14 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Call showPrompt immediately, then also retry after a delay to ensure it's visible
         this.showPrompt();
         setTimeout(function () {
-          var _this0$config$promptA;
+          var _this1$config$promptA;
           // Double-check and ensure prompt is visible
-          var promptBubble = _this0.shadowRoot.getElementById('prompt-bubble');
+          var promptBubble = _this1.shadowRoot.getElementById('prompt-bubble');
           if (promptBubble && promptBubble.style.display === 'none') {
             promptBubble.style.display = 'block';
           }
-          var pulseRings = _this0.shadowRoot.getElementById('prompt-pulse-rings');
-          if (pulseRings && ((_this0$config$promptA = _this0.config.promptAnimation) === null || _this0$config$promptA === void 0 ? void 0 : _this0$config$promptA.showPulseRings) !== false) {
+          var pulseRings = _this1.shadowRoot.getElementById('prompt-pulse-rings');
+          if (pulseRings && ((_this1$config$promptA = _this1.config.promptAnimation) === null || _this1$config$promptA === void 0 ? void 0 : _this1$config$promptA.showPulseRings) !== false) {
             if (pulseRings.style.display === 'none') {
               pulseRings.style.display = 'block';
             }
@@ -22661,13 +22886,14 @@ var TTPChatWidget = /*#__PURE__*/function () {
         padding: '12px 24px',
         borderRadius: '8px',
         boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-        zIndex: '10000',
+        zIndex: '10003',
         fontSize: '14px',
         fontWeight: '500',
         maxWidth: '90%',
         textAlign: 'center',
         animation: 'slideUp 0.3s ease-out',
-        fontFamily: 'inherit'
+        fontFamily: 'inherit',
+        pointerEvents: 'auto'
       });
 
       // Add CSS animation if not already added
@@ -22692,6 +22918,25 @@ var TTPChatWidget = /*#__PURE__*/function () {
         }, 300);
       }, 4000);
     }
+  }, {
+    key: "showMobileLandingError",
+    value: function showMobileLandingError(message) {
+      if (!this.shadowRoot) return;
+      var mobileLanding = this.shadowRoot.getElementById('ttpMobileLanding');
+      var mobileFab = this.shadowRoot.querySelector('.ttp-mobile-fab');
+      var errorBanner = this.shadowRoot.getElementById('ttpMobileLandingError');
+      if (!mobileLanding || !errorBanner) return;
+
+      // Set error text
+      var errorText = errorBanner.querySelector('.ttp-mobile-landing__error-text');
+      if (errorText) errorText.textContent = message;
+      errorBanner.style.display = 'flex';
+
+      // Show the mobile landing overlay with the error
+      mobileLanding.classList.add('active');
+      if (mobileFab) mobileFab.style.display = 'none';
+      this.isMobileLandingOpen = true;
+    }
 
     /**
      * Show confirmation modal (reusing modal pattern)
@@ -23366,12 +23611,12 @@ var TTPChatWidget = /*#__PURE__*/function () {
     key: "_flushPendingClientTools",
     value: function _flushPendingClientTools() {
       var _this$voiceInterface1,
-        _this1 = this;
+        _this10 = this;
       if (this._pendingClientTools && (_this$voiceInterface1 = this.voiceInterface) !== null && _this$voiceInterface1 !== void 0 && _this$voiceInterface1.sdk) {
         this._pendingClientTools.forEach(function (_ref2) {
           var name = _ref2.name,
             handler = _ref2.handler;
-          _this1.voiceInterface.sdk.registerToolHandler(name, handler);
+          _this10.voiceInterface.sdk.registerToolHandler(name, handler);
         });
         this._pendingClientTools = null;
         console.log('TTPChatWidget: Flushed pending client tools');
@@ -24560,7 +24805,7 @@ var VoiceInterface = /*#__PURE__*/function () {
     value: (function () {
       var _proceedWithVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
         var _this3 = this;
-        var isResumeCall, panel, header, toggleText, _voiceInterface, originalSection, compactSection, idleState, _panel, fallbackPanel, sampleRate, mediaStream, floatingButton, fallbackButton, existingBar, _floatingButton, _fallbackButton, _idleState, _panel2, _fallbackPanel, deviceInfo, _idleState2, activeState, voiceInterface, connected, serverRejected, originalOnError, originalOnDisconnected, attempts, _this$sdk$voiceSDK, error, _existingBar, _existingBar2, _idleState3, _panel3, _fallbackPanel2, _floatingButton2, _fallbackButton2, updateTimer, _existingBar3, _existingBar4, _idleState4, _panel4, _fallbackPanel3, _floatingButton3, _fallbackButton3, _updateTimer, _deviceInfo, _t2, _t3, _t4, _t5, _t6, _t7;
+        var isResumeCall, panel, header, toggleText, _voiceInterface, originalSection, compactSection, idleState, _panel, fallbackPanel, sampleRate, mediaStream, floatingButton, fallbackButton, mobileFabGrant, existingBar, _floatingButton, _fallbackButton, mobileFabDeny, _idleState, _panel2, _fallbackPanel, deviceInfo, _idleState2, activeState, voiceInterface, connected, serverRejected, originalOnError, originalOnDisconnected, attempts, _this$sdk$voiceSDK, error, _existingBar, _existingBar2, _idleState3, _panel3, _fallbackPanel2, _floatingButton2, _fallbackButton2, updateTimer, _existingBar3, _existingBar4, _idleState4, _panel4, _fallbackPanel3, _floatingButton3, _fallbackButton3, _updateTimer, _deviceInfo, _t2, _t3, _t4, _t5, _t6, _t7;
         return _regenerator().w(function (_context5) {
           while (1) switch (_context5.p = _context5.n) {
             case 0:
@@ -24667,6 +24912,8 @@ var VoiceInterface = /*#__PURE__*/function () {
                   console.log('✅ Floating button hidden (permission granted, fallback)');
                 }
               }
+              mobileFabGrant = this.shadowRoot.querySelector('.ttp-mobile-fab');
+              if (mobileFabGrant) mobileFabGrant.style.display = 'none';
               _context5.n = 4;
               break;
             case 3:
@@ -24692,6 +24939,8 @@ var VoiceInterface = /*#__PURE__*/function () {
                   _fallbackButton.style.display = '';
                 }
               }
+              mobileFabDeny = this.shadowRoot.querySelector('.ttp-mobile-fab');
+              if (mobileFabDeny) mobileFabDeny.style.display = '';
               _idleState = this.shadowRoot.getElementById('voiceIdleState');
               if (_idleState) {
                 _idleState.style.display = 'flex';
@@ -25262,7 +25511,7 @@ var VoiceInterface = /*#__PURE__*/function () {
     key: "endCallOnServerRejection",
     value: (function () {
       var _endCallOnServerRejection = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
-        var voiceInterfaceEl, landingScreen, _this$sdk$voiceSDK2, _this$sdk$voiceSDK3, audioRecorder, isRecording, _this$sdk$voiceSDK4, activeState, idleState, panel, fallbackPanel, floatingButton, fallbackButton, _t8, _t9, _t0, _t1, _t10;
+        var voiceInterfaceEl, landingScreen, _this$sdk$voiceSDK2, _this$sdk$voiceSDK3, audioRecorder, isRecording, _this$sdk$voiceSDK4, activeState, idleState, panel, fallbackPanel, floatingButton, fallbackButton, mobileFabEnd, errorMsg, _t8, _t9, _t0, _t1, _t10;
         return _regenerator().w(function (_context6) {
           while (1) switch (_context6.p = _context6.n) {
             case 0:
@@ -25475,7 +25724,7 @@ var VoiceInterface = /*#__PURE__*/function () {
                 console.log('🚫 showDomainError() completed, isShowingDomainError:', this.isShowingDomainError);
               }
 
-              // Mobile: restore panel visibility
+              // Mobile: restore panel visibility and show error toast
               if (this.isMobile) {
                 panel = this.shadowRoot.getElementById('text-chat-panel');
                 if (panel) {
@@ -25497,10 +25746,20 @@ var VoiceInterface = /*#__PURE__*/function () {
                     fallbackButton.style.display = '';
                   }
                 }
+                mobileFabEnd = this.shadowRoot.querySelector('.ttp-mobile-fab');
+                if (mobileFabEnd) mobileFabEnd.style.display = '';
 
                 // Remove mobile minimized bar if it exists
                 this.removeMobileMinimizedBar();
                 this.stopWaveformAnimation();
+
+                // Show error in mobile landing overlay since the panel isn't visible
+                errorMsg = this.t('domainNotValidated') || 'Domain not whitelisted. Please contact support.';
+                if (this.config.onMobileError) {
+                  this.config.onMobileError(errorMsg);
+                } else if (this.config.onErrorToast) {
+                  this.config.onErrorToast(errorMsg, 'error');
+                }
               }
             case 23:
               return _context6.a(2);