ttp-agent-sdk 2.40.0 → 2.43.0

package/dist/agent-widget.dev.js

@@ -9707,6 +9707,30 @@ function buildAudioConstraints(sampleRate) {
   }
   return _objectSpread(_objectSpread({}, base), userOverrides);
 }
+
+/**
+ * Linear PCM16 resample (main thread). Safari/iOS often runs AudioContext at 44.1/48 kHz
+ * while the voice server expects hello_ack inputSampleRate (e.g. 16 kHz).
+ */
+function resamplePCM16Linear(input, fromRate, toRate) {
+  if (!input || input.length === 0 || fromRate === toRate) {
+    return input;
+  }
+  var ratio = fromRate / toRate;
+  var outLength = Math.max(1, Math.floor(input.length / ratio));
+  var output = new Int16Array(outLength);
+  for (var i = 0; i < outLength; i++) {
+    var srcPos = i * ratio;
+    var i0 = Math.floor(srcPos);
+    var i1 = Math.min(i0 + 1, input.length - 1);
+    var frac = srcPos - i0;
+    var s0 = input[i0];
+    var s1 = input[i1];
+    var s = s0 + (s1 - s0) * frac;
+    output[i] = Math.max(-32768, Math.min(32767, Math.round(s)));
+  }
+  return output;
+}
 var _sharedRecorderContext = null;
 var _sharedRecorderSampleRate = null;
 var _sharedRecorderWorkletLoaded = false;
@@ -9719,6 +9743,7 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
     _this.config = config;
     _this.audioContext = null;
     _this.audioWorkletNode = null;
+    _this._recorderSinkGain = null;
     _this.mediaStream = null;
     _this.isRecording = false;
     _this._starting = false;
@@ -9923,6 +9948,8 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
           _isConnected2,
           _error2,
           source,
+          negotiatedRate,
+          contextRate,
           userMessage,
           _permissionState,
           enhancedError,
@@ -10129,16 +10156,34 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
               source = this.audioContext.createMediaStreamSource(this.mediaStream);
               source.connect(this.audioWorkletNode);
 
+              // WebKit/iOS: a graph that dead-ends at an AudioWorkletNode may not be pulled; force a
+              // silent sink so the worklet process() runs reliably (no audible output).
+              this._recorderSinkGain = this.audioContext.createGain();
+              this._recorderSinkGain.gain.value = 0;
+              this.audioWorkletNode.connect(this._recorderSinkGain);
+              this._recorderSinkGain.connect(this.audioContext.destination);
+
               // Store source reference so we can disconnect it when stopping
               this.mediaStreamSource = source;
+              negotiatedRate = this.config.sampleRate || 16000;
+              contextRate = this.audioContext.sampleRate;
+              if (Math.abs(contextRate - negotiatedRate) > 1) {
+                console.log("\u2139\uFE0F AudioRecorder: Context sample rate ".concat(contextRate, "Hz \u2260 negotiated uplink ").concat(negotiatedRate, "Hz \u2014 resampling in main thread"));
+              }
 
               // Handle messages from AudioWorklet
               this.audioWorkletNode.port.onmessage = function (event) {
-                var _event$data = event.data,
-                  type = _event$data.type,
-                  data = _event$data.data;
+                var payload = event.data;
+                var type = payload.type,
+                  data = payload.data;
                 if (type === 'pcm_audio_data') {
-                  _this2.emit('audioData', data);
+                  var chunkRate = payload.sampleRate || contextRate;
+                  var targetRate = _this2.config.sampleRate || 16000;
+                  if (chunkRate && targetRate && Math.abs(chunkRate - targetRate) > 1) {
+                    _this2.emit('audioData', resamplePCM16Linear(data, chunkRate, targetRate));
+                  } else {
+                    _this2.emit('audioData', data);
+                  }
                 }
               };
 
@@ -10285,6 +10330,15 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
                 console.log('⚠️ AudioRecorder: AudioWorkletNode already disconnected');
               }
             case 4:
+              if (this._recorderSinkGain) {
+                try {
+                  this._recorderSinkGain.disconnect();
+                } catch (e) {
+                  /* ignore */
+                }
+                this._recorderSinkGain = null;
+              }
+
               // Stop media stream tracks (this stops microphone access)
               if (this.mediaStream) {
                 console.log('🛑 AudioRecorder: Stopping media stream tracks...');
@@ -10432,6 +10486,78 @@ var AudioRecorder = /*#__PURE__*/function (_EventEmitter) {
       _sharedRecorderWorkletLoaded = false;
       _sharedRecorderWorkletPath = null;
     }
+
+    /**
+     * Create or resume the shared recorder AudioContext during the user-gesture window (e.g. right
+     * after getUserMedia on mobile). Reduces iOS failures when recording starts only after a long
+     * async WebSocket / hello_ack wait.
+     */
+  }, {
+    key: "primeSharedContext",
+    value: (function () {
+      var _primeSharedContext = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+        var sampleRateHint,
+          rate,
+          ctx,
+          _args7 = arguments,
+          _t7;
+        return _regenerator().w(function (_context7) {
+          while (1) switch (_context7.p = _context7.n) {
+            case 0:
+              sampleRateHint = _args7.length > 0 && _args7[0] !== undefined ? _args7[0] : 16000;
+              if (!(typeof window === 'undefined')) {
+                _context7.n = 1;
+                break;
+              }
+              return _context7.a(2);
+            case 1:
+              rate = sampleRateHint || 16000;
+              _context7.p = 2;
+              if (!(_sharedRecorderContext && _sharedRecorderContext.state !== 'closed')) {
+                _context7.n = 4;
+                break;
+              }
+              if (!(_sharedRecorderContext.state === 'suspended')) {
+                _context7.n = 3;
+                break;
+              }
+              _context7.n = 3;
+              return _sharedRecorderContext.resume();
+            case 3:
+              console.log('♻️ AudioRecorder.primeSharedContext: reused context', _sharedRecorderContext.sampleRate, 'Hz');
+              return _context7.a(2);
+            case 4:
+              ctx = new (window.AudioContext || window.webkitAudioContext)({
+                sampleRate: rate
+              });
+              _sharedRecorderContext = ctx;
+              _sharedRecorderSampleRate = rate;
+              _sharedRecorderWorkletLoaded = false;
+              _sharedRecorderWorkletPath = null;
+              if (!(ctx.state === 'suspended')) {
+                _context7.n = 5;
+                break;
+              }
+              _context7.n = 5;
+              return ctx.resume();
+            case 5:
+              console.log('🎵 AudioRecorder.primeSharedContext: primed requested', rate, 'Hz, actual', ctx.sampleRate, 'Hz');
+              _context7.n = 7;
+              break;
+            case 6:
+              _context7.p = 6;
+              _t7 = _context7.v;
+              console.warn('⚠️ AudioRecorder.primeSharedContext failed (non-fatal):', _t7);
+            case 7:
+              return _context7.a(2);
+          }
+        }, _callee7, null, [[2, 6]]);
+      }));
+      function primeSharedContext() {
+        return _primeSharedContext.apply(this, arguments);
+      }
+      return primeSharedContext;
+    }())
   }]);
 }(_EventEmitter_js__WEBPACK_IMPORTED_MODULE_0__["default"]);
 
@@ -15645,8 +15771,22 @@ var FLAVORS = {
   restaurants: _restaurants_js__WEBPACK_IMPORTED_MODULE_2__.createRestaurantsFlavor,
   tours: _tours_js__WEBPACK_IMPORTED_MODULE_3__.createToursFlavor
 };
+
+/** Common client typos / aliases → canonical keys in FLAVORS */
+var FLAVOR_ALIASES = {
+  resturants: 'restaurants'
+};
+
+/**
+ * Resolve a widget flavor name to a registered factory.
+ * Accepts case-insensitive keys and known aliases (e.g. resturants → restaurants).
+ */
 function loadFlavor(name) {
-  return FLAVORS[name] || null;
+  if (name == null || typeof name !== 'string') {
+    return null;
+  }
+  var key = FLAVOR_ALIASES[name.trim().toLowerCase()] || name.trim().toLowerCase();
+  return FLAVORS[key] || null;
 }
 
 /***/ }),
@@ -17324,8 +17464,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 // Version - injected at build time from package.json via webpack DefinePlugin
-var VERSION = "2.40.0";
-var BUILD_TIME = "2026-03-25T07:23:14.569Z";
+var VERSION = "2.43.0";
+var BUILD_TIME = "2026-03-26T01:57:03.238Z";
 console.log("%c TTP Agent SDK v".concat(VERSION, " (").concat(BUILD_TIME, ") "), 'background: #4f46e5; color: white; font-size: 12px; font-weight: bold; padding: 2px 6px; border-radius: 4px;');
 
 // Named exports
@@ -18376,7 +18516,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   showBlockedModal: () => (/* binding */ showBlockedModal),
 /* harmony export */   showNoMicrophoneModal: () => (/* binding */ showNoMicrophoneModal),
-/* harmony export */   showPrePromptModal: () => (/* binding */ showPrePromptModal)
+/* harmony export */   showPrePromptModal: () => (/* binding */ showPrePromptModal),
+/* harmony export */   showServerDisclaimerModal: () => (/* binding */ showServerDisclaimerModal)
 /* harmony export */ });
 /* harmony import */ var _MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MicPermissionUtils.js */ "./src/shared/MicPermissionUtils.js");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -18538,6 +18679,7 @@ var MicPermissionModal = /*#__PURE__*/function () {
     value: function createOverlay() {
       var overlay = document.createElement('div');
       overlay.className = 'mic-permission-overlay';
+      overlay.setAttribute('dir', 'ltr');
       overlay.style.cssText = "\n      position: fixed;\n      inset: 0;\n      background: rgba(0, 0, 0, 0.6);\n      backdrop-filter: blur(4px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 100001;\n      padding: 20px;\n      animation: mic-fadeIn 0.2s ease-out;\n    ";
 
       // Add fade-in animation if not already added
@@ -18558,7 +18700,7 @@ var MicPermissionModal = /*#__PURE__*/function () {
       }
       var style = document.createElement('style');
       style.id = 'mic-permission-styles';
-      style.textContent = "\n      @keyframes mic-fadeIn {\n        from { opacity: 0; }\n        to { opacity: 1; }\n      }\n      \n      @keyframes mic-slideUp {\n        from {\n          opacity: 0;\n          transform: translateY(20px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n      \n      @keyframes mic-bounce {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(-5px); }\n      }\n      \n      .mic-permission-overlay {\n        position: fixed;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.6);\n        backdrop-filter: blur(4px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 100001;\n        padding: 20px;\n        animation: mic-fadeIn 0.2s ease-out;\n      }\n      \n      .mic-permission-modal {\n        background: #ffffff;\n        border-radius: 16px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n        max-width: 480px;\n        width: 100%;\n        padding: 32px;\n        position: relative;\n        animation: mic-slideUp 0.3s ease-out;\n        max-height: 90vh;\n        overflow-y: auto;\n      }\n      \n      .mic-permission-modal__close {\n        position: absolute;\n        top: 16px;\n        right: 16px;\n        background: none;\n        border: none;\n        font-size: 20px;\n        cursor: pointer;\n        color: #6b7280;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background 0.2s;\n      }\n      \n      .mic-permission-modal__close:hover {\n        background: #e5e7eb;\n      }\n      \n      .mic-permission-modal__icon {\n        font-size: 48px;\n        text-align: center;\n        margin-bottom: 16px;\n      }\n      \n      .mic-permission-modal__title {\n        font-size: 24px;\n        font-weight: 700;\n        color: #111827;\n        margin: 0 0 12px;\n        line-height: 1.3;\n        text-align: center;\n      }\n      \n      .mic-permission-modal__description {\n        color: #6b7280;\n        font-size: 16px;\n        line-height: 1.6;\n        margin: 0 0 20px;\n        text-align: center;\n      }\n      \n      .mic-permission-modal__highlight {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        background: linear-gradient(135deg, #dbeafe, #ede9fe);\n        padding: 16px 20px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        border: 1px solid #bfdbfe;\n      }\n      \n      .mic-permission-modal__highlight-icon {\n        font-size: 24px;\n        animation: mic-bounce 1s infinite;\n      }\n      \n      .mic-permission-modal__status {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        background: #fef2f2;\n        color: #ef4444;\n        padding: 12px 16px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        font-weight: 500;\n      }\n      \n      .mic-permission-modal__note {\n        display: flex;\n        align-items: flex-start;\n        gap: 10px;\n        background: #fffbeb;\n        color: #92400e;\n        padding: 12px 16px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        font-size: 14px;\n        line-height: 1.5;\n        border: 1px solid #fde68a;\n      }\n      \n      .mic-permission-modal__steps {\n        margin-bottom: 20px;\n      }\n      \n      .mic-permission-modal__steps h3 {\n        font-size: 14px;\n        font-weight: 600;\n        color: #6b7280;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        margin: 0 0 12px;\n      }\n      \n      .mic-permission-modal__steps ol {\n        margin: 0;\n        padding-left: 24px;\n        counter-reset: step-counter;\n        list-style: none;\n      }\n      \n      .mic-permission-modal__steps li {\n        position: relative;\n        padding: 12px 0 12px 16px;\n        border-left: 2px solid #e5e7eb;\n        color: #111827;\n        font-size: 15px;\n        line-height: 1.5;\n        counter-increment: step-counter;\n      }\n      \n      .mic-permission-modal__steps li::before {\n        content: counter(step-counter);\n        position: absolute;\n        left: -14px;\n        top: 10px;\n        width: 24px;\n        height: 24px;\n        background: #4f46e5;\n        color: white;\n        border-radius: 50%;\n        font-size: 12px;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      \n      .mic-permission-modal__steps li:last-child {\n        border-left-color: transparent;\n      }\n      \n      .mic-permission-modal__actions {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        margin-top: 24px;\n      }\n      \n      .mic-permission-modal__btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        padding: 14px 24px;\n        border-radius: 8px;\n        font-size: 16px;\n        font-weight: 600;\n        cursor: pointer;\n        transition: all 0.2s;\n        border: none;\n        width: 100%;\n      }\n      \n      .mic-permission-modal__btn--primary {\n        background: #4f46e5;\n        color: white;\n      }\n      \n      .mic-permission-modal__btn--primary:hover {\n        background: #4338ca;\n        transform: translateY(-1px);\n      }\n      \n      .mic-permission-modal__btn--secondary {\n        background: #e5e7eb;\n        color: #111827;\n      }\n      \n      .mic-permission-modal__btn--secondary:hover {\n        background: #d1d5db;\n      }\n      \n      .mic-permission-modal__footer {\n        text-align: center;\n        font-size: 13px;\n        color: #6b7280;\n        margin-top: 20px;\n        margin-bottom: 0;\n      }\n      \n      .mic-permission-modal__visual-guide {\n        width: 100%;\n        max-width: 380px;\n        height: auto;\n        margin: 20px auto;\n        border-radius: 8px;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n        display: block;\n      }\n      \n      .mic-permission-modal__visual-guide-container {\n        text-align: center;\n        margin: 20px 0;\n      }\n      \n      @media (max-width: 480px) {\n        .mic-permission-modal {\n          padding: 24px 20px;\n          margin: 10px;\n          max-height: 85vh;\n        }\n        \n        .mic-permission-modal__title {\n          font-size: 20px;\n        }\n        \n        .mic-permission-modal__icon {\n          font-size: 40px;\n        }\n        \n        .mic-permission-modal__visual-guide {\n          max-width: 100%;\n        }\n      }\n      \n      /* Mobile pre-prompt: compact, action-first layout - buttons always visible above safe area */\n      .mic-permission-modal--mobile {\n        max-height: none;\n        padding: 20px 20px 24px;\n        padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));\n        margin: 12px;\n        align-self: flex-end;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__icon {\n        font-size: 36px;\n        margin-bottom: 12px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__title {\n        font-size: 18px;\n        margin-bottom: 8px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__description {\n        font-size: 14px;\n        margin-bottom: 12px;\n        line-height: 1.5;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__highlight {\n        padding: 12px 16px;\n        margin-bottom: 12px;\n        font-size: 14px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__note {\n        padding: 10px 14px;\n        margin-bottom: 16px;\n        font-size: 13px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__actions {\n        margin-top: 16px;\n        gap: 10px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__btn {\n        padding: 16px 24px;\n        font-size: 16px;\n        min-height: 48px;\n      }\n    ";
+      style.textContent = "\n      @keyframes mic-fadeIn {\n        from { opacity: 0; }\n        to { opacity: 1; }\n      }\n      \n      @keyframes mic-slideUp {\n        from {\n          opacity: 0;\n          transform: translateY(20px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n      \n      @keyframes mic-bounce {\n        0%, 100% { transform: translateY(0); }\n        50% { transform: translateY(-5px); }\n      }\n      \n      /* direction ltr: host page may be RTL (e.g. Hebrew); keep overlay + modal English copy readable */\n      .mic-permission-overlay {\n        position: fixed;\n        inset: 0;\n        direction: ltr;\n        background: rgba(0, 0, 0, 0.6);\n        backdrop-filter: blur(4px);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 100001;\n        padding: 20px;\n        animation: mic-fadeIn 0.2s ease-out;\n      }\n      \n      .mic-permission-modal {\n        direction: ltr;\n        unicode-bidi: isolate;\n        background: #ffffff;\n        border-radius: 16px;\n        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n        max-width: 480px;\n        width: 100%;\n        padding: 32px;\n        position: relative;\n        animation: mic-slideUp 0.3s ease-out;\n        max-height: 90vh;\n        overflow-y: auto;\n      }\n      \n      .mic-permission-modal__close {\n        position: absolute;\n        top: 16px;\n        right: 16px;\n        background: none;\n        border: none;\n        font-size: 20px;\n        cursor: pointer;\n        color: #6b7280;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background 0.2s;\n      }\n      \n      .mic-permission-modal__close:hover {\n        background: #e5e7eb;\n      }\n      \n      .mic-permission-modal__icon {\n        font-size: 48px;\n        text-align: center;\n        margin-bottom: 16px;\n      }\n      \n      .mic-permission-modal__title {\n        font-size: 24px;\n        font-weight: 700;\n        color: #111827;\n        margin: 0 0 12px;\n        line-height: 1.3;\n        text-align: center;\n      }\n      \n      .mic-permission-modal__description {\n        color: #6b7280;\n        font-size: 16px;\n        line-height: 1.6;\n        margin: 0 0 20px;\n        text-align: center;\n      }\n      \n      .mic-permission-modal__highlight {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        background: linear-gradient(135deg, #dbeafe, #ede9fe);\n        padding: 16px 20px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        border: 1px solid #bfdbfe;\n      }\n      \n      .mic-permission-modal__highlight-icon {\n        font-size: 24px;\n        animation: mic-bounce 1s infinite;\n      }\n      \n      .mic-permission-modal__status {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        background: #fef2f2;\n        color: #ef4444;\n        padding: 12px 16px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        font-weight: 500;\n      }\n      \n      .mic-permission-modal__note {\n        display: flex;\n        align-items: flex-start;\n        gap: 10px;\n        background: #fffbeb;\n        color: #92400e;\n        padding: 12px 16px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        font-size: 14px;\n        line-height: 1.5;\n        border: 1px solid #fde68a;\n      }\n      \n      .mic-permission-modal__steps {\n        margin-bottom: 20px;\n      }\n      \n      .mic-permission-modal__steps h3 {\n        font-size: 14px;\n        font-weight: 600;\n        color: #6b7280;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        margin: 0 0 12px;\n      }\n      \n      .mic-permission-modal__steps ol {\n        margin: 0;\n        padding-left: 24px;\n        counter-reset: step-counter;\n        list-style: none;\n      }\n      \n      .mic-permission-modal__steps li {\n        position: relative;\n        padding: 12px 0 12px 16px;\n        border-left: 2px solid #e5e7eb;\n        color: #111827;\n        font-size: 15px;\n        line-height: 1.5;\n        counter-increment: step-counter;\n      }\n      \n      .mic-permission-modal__steps li::before {\n        content: counter(step-counter);\n        position: absolute;\n        left: -14px;\n        top: 10px;\n        width: 24px;\n        height: 24px;\n        background: #4f46e5;\n        color: white;\n        border-radius: 50%;\n        font-size: 12px;\n        font-weight: 600;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      \n      .mic-permission-modal__steps li:last-child {\n        border-left-color: transparent;\n      }\n      \n      .mic-permission-modal__actions {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        margin-top: 24px;\n      }\n      \n      .mic-permission-modal__btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        padding: 14px 24px;\n        border-radius: 8px;\n        font-size: 16px;\n        font-weight: 600;\n        cursor: pointer;\n        transition: all 0.2s;\n        border: none;\n        width: 100%;\n      }\n      \n      .mic-permission-modal__btn--primary {\n        background: #4f46e5;\n        color: white;\n      }\n      \n      .mic-permission-modal__btn--primary:hover {\n        background: #4338ca;\n        transform: translateY(-1px);\n      }\n      \n      .mic-permission-modal__btn--secondary {\n        background: #e5e7eb;\n        color: #111827;\n      }\n      \n      .mic-permission-modal__btn--secondary:hover {\n        background: #d1d5db;\n      }\n      \n      .mic-permission-modal__footer {\n        text-align: center;\n        font-size: 13px;\n        color: #6b7280;\n        margin-top: 20px;\n        margin-bottom: 0;\n      }\n      \n      .mic-permission-modal__visual-guide {\n        width: 100%;\n        max-width: 380px;\n        height: auto;\n        margin: 20px auto;\n        border-radius: 8px;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n        display: block;\n      }\n      \n      .mic-permission-modal__visual-guide-container {\n        text-align: center;\n        margin: 20px 0;\n      }\n      \n      @media (max-width: 480px) {\n        .mic-permission-modal {\n          padding: 24px 20px;\n          margin: 10px;\n          max-height: 85vh;\n        }\n        \n        .mic-permission-modal__title {\n          font-size: 20px;\n        }\n        \n        .mic-permission-modal__icon {\n          font-size: 40px;\n        }\n        \n        .mic-permission-modal__visual-guide {\n          max-width: 100%;\n        }\n      }\n      \n      /* Mobile pre-prompt: compact, action-first layout - buttons always visible above safe area */\n      .mic-permission-modal--mobile {\n        max-height: none;\n        padding: 20px 20px 24px;\n        padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));\n        margin: 12px;\n        align-self: flex-end;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__icon {\n        font-size: 36px;\n        margin-bottom: 12px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__title {\n        font-size: 18px;\n        margin-bottom: 8px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__description {\n        font-size: 14px;\n        margin-bottom: 12px;\n        line-height: 1.5;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__highlight {\n        padding: 12px 16px;\n        margin-bottom: 12px;\n        font-size: 14px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__note {\n        padding: 10px 14px;\n        margin-bottom: 16px;\n        font-size: 13px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__actions {\n        margin-top: 16px;\n        gap: 10px;\n      }\n      \n      .mic-permission-modal--mobile .mic-permission-modal__btn {\n        padding: 16px 24px;\n        font-size: 16px;\n        min-height: 48px;\n      }\n    ";
       document.head.appendChild(style);
     }
 
@@ -18914,6 +19056,52 @@ function showNoMicrophoneModal(onClose) {
   return modal;
 }
 
+/**
+ * Server-driven disclaimer (legal copy from backend hello_ack). Plain text only.
+ */
+function showServerDisclaimerModal(_ref) {
+  var texts = _ref.texts,
+    onAccept = _ref.onAccept,
+    onCancel = _ref.onCancel;
+  var modal = new MicPermissionModal();
+  var overlay = modal.createOverlay();
+  overlay.style.background = 'rgba(0, 0, 0, 0.5)';
+  overlay.style.backdropFilter = 'blur(2px)';
+  var isMobile = isMobileDevice();
+  var modalDiv = document.createElement('div');
+  modalDiv.className = 'mic-permission-modal' + (isMobile ? ' mic-permission-modal--mobile' : '');
+  var lines = (texts || []).map(function (t) {
+    return String(t).trim();
+  }).filter(Boolean);
+  var body = lines.length ? lines.join('\n\n') : 'Please confirm to continue.';
+  var safe = body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  modalDiv.innerHTML = "\n    <h2 class=\"mic-permission-modal__title\">Notice</h2>\n    <div class=\"mic-permission-modal__description\" style=\"white-space:pre-wrap;max-height:50vh;overflow:auto;text-align:left;font-size:15px;line-height:1.5;\">".concat(safe, "</div>\n    <div class=\"mic-permission-modal__actions\">\n      <button type=\"button\" class=\"mic-permission-modal__btn mic-permission-modal__btn--primary\" data-action=\"accept\">Accept</button>\n      <button type=\"button\" class=\"mic-permission-modal__btn mic-permission-modal__btn--secondary\" data-action=\"cancel\">Decline</button>\n    </div>\n  ");
+  if (isMobile) {
+    overlay.style.alignItems = 'flex-end';
+    overlay.style.paddingBottom = 'max(20px, env(safe-area-inset-bottom, 20px))';
+    overlay.style.paddingTop = '20px';
+  }
+  overlay.appendChild(modalDiv);
+  modal.overlay = overlay;
+  modal.modal = modalDiv;
+  modalDiv.querySelector('[data-action="accept"]').addEventListener('click', function () {
+    modal.close();
+    onAccept();
+  });
+  modalDiv.querySelector('[data-action="cancel"]').addEventListener('click', function () {
+    modal.close();
+    onCancel();
+  });
+  overlay.addEventListener('click', function (e) {
+    if (e.target === overlay) {
+      modal.close();
+      onCancel();
+    }
+  });
+  modal.show();
+  return modal;
+}
+
 /***/ }),
 
 /***/ "./src/shared/MicPermissionUtils.js":
@@ -18928,7 +19116,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   checkPermissionState: () => (/* binding */ checkPermissionState),
 /* harmony export */   getDeviceInfo: () => (/* binding */ getDeviceInfo),
 /* harmony export */   getPermissionInstructions: () => (/* binding */ getPermissionInstructions),
-/* harmony export */   openSettings: () => (/* binding */ openSettings)
+/* harmony export */   openSettings: () => (/* binding */ openSettings),
+/* harmony export */   shouldUseMobileVoiceCallUI: () => (/* binding */ shouldUseMobileVoiceCallUI)
 /* harmony export */ });
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
@@ -18996,6 +19185,28 @@ function getDeviceInfo() {
   };
 }
 
+/**
+ * Use the compact mobile voice-call UI (minimized bar + transcript overlay).
+ * Native iOS/Android always use it. Other cases: viewport ≤768px and touch/coarse pointer
+ * (in-app browsers, Instagram/Facebook WebViews with desktop UA, etc.).
+ */
+function shouldUseMobileVoiceCallUI() {
+  var _getDeviceInfo = getDeviceInfo(),
+    isIOS = _getDeviceInfo.isIOS,
+    isAndroid = _getDeviceInfo.isAndroid;
+  if (isIOS || isAndroid) return true;
+  if (typeof window === 'undefined') return false;
+  if (window.innerWidth > 768) return false;
+  var touchCapable = navigator.maxTouchPoints > 0;
+  var coarsePointer = false;
+  try {
+    coarsePointer = window.matchMedia('(pointer: coarse)').matches;
+  } catch (_) {
+    /* matchMedia unsupported */
+  }
+  return touchCapable || coarsePointer;
+}
+
 /**
  * Check microphone permission state using Permissions API
  * Returns 'granted', 'denied', 'prompt', or 'unknown'
@@ -23541,6 +23752,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * - 'dataInjected' - Data injection successfully acknowledged by server
  *
  * - 'dataInjectionError' - Data injection failed (validation, timeout, or server error)
+ *
+ * - 'disclaimersRequired' - Server requires disclaimer acknowledgement (payload: texts, disclaimersHash, ...)
+ * - 'disclaimerRejected' - Server closed or rejected disclaimer ({ code, message })
 
  */
 var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
@@ -23609,6 +23823,18 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
     _this.hasEverConnected = false; // Track if we've successfully connected at least once
 
     _this.helloAckReceived = false;
+
+    /** When true, server hello_ack requires disclaimer_ack before STT/greeting; block recording until cleared */
+    _this.disclaimersPending = false;
+
+    /** Server copy hash (SHA-256) echoed in disclaimer_ack */
+    _this.disclaimersHash = null;
+
+    /** Last server disclaimer payload (for UI) */
+    _this.lastDisclaimerPayload = null;
+
+    /** Set when hangup() runs with an open socket — skip resume-key clear in destroy() */
+    _this._gracefulHangupInitiated = false;
     _this.isRecording = false;
     _this.isPlaying = false;
     _this.isDestroyed = false;
@@ -24379,6 +24605,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
                   console.log('🔌 VoiceSDK v2: WebSocket closed:', event.code, event.reason);
                   _this6.isConnected = false;
                   _this6.helloAckReceived = false;
+                  _this6.disclaimersPending = false;
 
                   // Stop recording if active
 
@@ -24566,7 +24793,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
 
               // Include SDK build time for debugging
               if (true) {
-                helloMessage.lastBuildTime = "2026-03-25T07:23:14.569Z";
+                helloMessage.lastBuildTime = "2026-03-26T01:57:03.238Z";
               }
 
               // TEMPORARILY DISABLED: Always attach page context - backend decides what to use
@@ -24698,6 +24925,19 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
             this.emit('message', message);
             break;
           case 'error':
+            if (message.code && String(message.code).startsWith('DISCLAIMER_')) {
+              if (message.code === 'DISCLAIMER_PENDING') {
+                var err = new Error(message.message || 'Disclaimer acknowledgement required first');
+                err.code = 'DISCLAIMER_PENDING';
+                this.emit('error', err);
+              } else {
+                this.disclaimersPending = false;
+                this.emit('disclaimerRejected', {
+                  code: message.code,
+                  message: message.message || ''
+                });
+              }
+            }
             this.emit('message', message);
             break;
           case 'barge_in':
@@ -24832,10 +25072,11 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               console.warn('⚠️ [VISUAL ASSISTANT] Screenshot error:', message.error);
             }
             break;
+          case 'show_items':
           case 'show_products':
           case 'cart_updated':
           case 'add_to_store_cart':
-            // E-commerce messages - emit for TTPEcommerceWidget to handle
+            // Flavor / commerce messages (show_items = menu, rooms, tours, etc.)
             this.emit('message', message);
             break;
           default:
@@ -25073,6 +25314,10 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
         this.emit('inputFormatNegotiated', message.inputAudioFormat);
       }
 
+      // Server-driven disclaimer gate (voice): when true, client must send disclaimer_ack before using the session.
+      this.disclaimersPending = message.disclaimersRequired === true;
+      this.disclaimersHash = this.disclaimersPending ? message.disclaimersHash || null : null;
+
       // IMPORTANT: Set this AFTER input format negotiation above.
       // VoiceInterface waits for this flag before starting recording,
       // so config.sampleRate must be finalized first.
@@ -25170,6 +25415,47 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
         this.audioPlayer.setOutputFormat(defaultFormat);
         this.formatConverter = null; // No conversion needed when using defaults
       }
+      if (this.disclaimersPending) {
+        var payload = {
+          texts: Array.isArray(message.disclaimerTexts) ? message.disclaimerTexts : [],
+          disclaimersHash: this.disclaimersHash,
+          disclaimersVersion: message.disclaimersVersion,
+          disclaimerTimeoutMs: message.disclaimerTimeoutMs,
+          conversationId: this.conversationId
+        };
+        this.lastDisclaimerPayload = payload;
+        this.emit('disclaimersRequired', payload);
+      } else {
+        this.lastDisclaimerPayload = null;
+      }
+    }
+
+    /**
+     * Acknowledge server disclaimer gate (voice protocol).
+     * @param {boolean} accepted
+     */
+  }, {
+    key: "sendDisclaimerAck",
+    value: function sendDisclaimerAck(accepted) {
+      if (!this.isConnected || !this.websocket || this.websocket.readyState !== WebSocket.OPEN) {
+        console.warn('VoiceSDK v2: Cannot send disclaimer_ack — socket not open');
+        return;
+      }
+      var payload = {
+        t: 'disclaimer_ack',
+        accepted: !!accepted,
+        disclaimersHash: this.disclaimersHash || '',
+        conversationId: this.conversationId || undefined
+      };
+      try {
+        this.websocket.send(JSON.stringify(payload));
+        console.log('📤 VoiceSDK v2: disclaimer_ack sent', {
+          accepted: payload.accepted
+        });
+        this.disclaimersPending = false;
+      } catch (e) {
+        console.error('VoiceSDK v2: disclaimer_ack send failed', e);
+      }
     }
 
     /**
@@ -25649,6 +25935,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
         return;
       }
       console.log('📞 VoiceSDK v2: Hanging up call...');
+      this._gracefulHangupInitiated = true;
 
       // Clear stored conversationId on graceful hangup
       // This prevents attempting resume after intentional end
@@ -25702,6 +25989,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
         var existingMediaStream,
           error,
           _error4,
+          _error5,
           permissionError,
           _args6 = arguments,
           _t4,
@@ -25726,40 +26014,49 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               console.warn('VoiceSDK v2: Already recording');
               return _context6.a(2, true);
             case 2:
+              if (!this.disclaimersPending) {
+                _context6.n = 3;
+                break;
+              }
+              _error4 = new Error('Server disclaimers must be accepted before recording. Call sendDisclaimerAck(true) first.');
+              _error4.code = 'DISCLAIMER_PENDING';
+              this.emit('error', _error4);
+              throw _error4;
+            case 3:
               console.log('🎤 VoiceSDK v2: Starting recording...');
-              _context6.p = 3;
+              _context6.p = 4;
               // CRITICAL for mobile browsers: Request microphone permission FIRST
               // iOS: Pass existingMediaStream to avoid second getUserMedia (can fail on iOS)
               console.log('🎤 VoiceSDK v2: Requesting microphone permission (mobile-friendly)...');
-              _context6.n = 4;
+              _context6.n = 5;
               return this.audioRecorder.start(existingMediaStream ? {
                 existingMediaStream: existingMediaStream
               } : {});
-            case 4:
+            case 5:
               if (!(!this.isConnected || !this.websocket || this.websocket.readyState !== WebSocket.OPEN)) {
-                _context6.n = 9;
+                _context6.n = 10;
                 break;
               }
-              _context6.p = 5;
-              _context6.n = 6;
+              _context6.p = 6;
+              _context6.n = 7;
               return this.audioRecorder.stop();
-            case 6:
-              _context6.n = 8;
-              break;
             case 7:
-              _context6.p = 7;
-              _t4 = _context6.v;
+              _context6.n = 9;
+              break;
             case 8:
-              _error4 = new Error('Connection lost - server may have rejected the call');
-              _error4.name = 'ServerRejected';
-              _error4.isServerRejection = true;
+              _context6.p = 8;
+              _t4 = _context6.v;
+            case 9:
+              _error5 = new Error('Connection lost - server may have rejected the call');
+              _error5.name = 'ServerRejected';
+              _error5.isServerRejection = true;
               // Don't emit error event - this is expected when server rejects
               // The error handler in VoiceInterface will handle it appropriately
-              throw _error4;
-            case 9:
-              _context6.n = 10;
-              return this.audioPlayer.resumeAudioContext();
+              throw _error5;
             case 10:
+              _context6.n = 11;
+              return this.audioPlayer.resumeAudioContext();
+            case 11:
               // After permission is granted, send start_continuous_mode message to server
               this.sendMessage({
                 t: 'start_continuous_mode',
@@ -25769,29 +26066,29 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               // Request screen wake lock to keep screen on during voice call (mobile)
               this._requestWakeLock();
               return _context6.a(2, true);
-            case 11:
-              _context6.p = 11;
+            case 12:
+              _context6.p = 12;
               _t5 = _context6.v;
               if (!(this.audioRecorder && this.audioRecorder.isRecording)) {
-                _context6.n = 15;
+                _context6.n = 16;
                 break;
               }
-              _context6.p = 12;
-              _context6.n = 13;
+              _context6.p = 13;
+              _context6.n = 14;
               return this.audioRecorder.stop();
-            case 13:
-              _context6.n = 15;
-              break;
             case 14:
-              _context6.p = 14;
-              _t6 = _context6.v;
+              _context6.n = 16;
+              break;
             case 15:
+              _context6.p = 15;
+              _t6 = _context6.v;
+            case 16:
               if (!(_t5.isServerRejection || _t5.name === 'ServerRejected')) {
-                _context6.n = 16;
+                _context6.n = 17;
                 break;
               }
               return _context6.a(2, false);
-            case 16:
+            case 17:
               // Log and emit other errors (permission denied, etc.)
               console.error('❌ VoiceSDK v2: Failed to start recording:', _t5);
 
@@ -25806,7 +26103,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
               }
               return _context6.a(2, false);
           }
-        }, _callee6, this, [[12, 14], [5, 7], [3, 11]]);
+        }, _callee6, this, [[13, 15], [6, 8], [4, 12]]);
       }));
       function startRecording() {
         return _startRecording.apply(this, arguments);
@@ -26198,6 +26495,14 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
       }
       this.isConnected = false;
 
+      // hello_ack calls storeConversationId(), which refreshes RESUME_TTL_MS. If connect
+      // then aborts (mic denied, disconnect, etc.) without hangup(), sessionStorage still
+      // looks like a fresh in-call navigation and the widget auto-resumes on refresh.
+      // Graceful hangup() clears storage and sets _gracefulHangupInitiated — do not wipe here.
+      if (this.helloAckReceived && !this._gracefulHangupInitiated) {
+        this.clearStoredConversationId();
+      }
+
       // Reject all pending data injections on destroy
       if (this.pendingInjections.size > 0) {
         console.warn("VoiceSDK v2: Rejecting ".concat(this.pendingInjections.size, " pending data injections due to destroy"));
@@ -27824,6 +28129,7 @@ var AgentSDK = /*#__PURE__*/function () {
         case 'error':
           this.onError(new Error(message.message || message.error || 'Unknown error'));
           break;
+        case 'show_items':
         case 'show_products':
         case 'cart_updated':
         case 'add_to_store_cart':
@@ -28574,190 +28880,99 @@ var ItemCard = /*#__PURE__*/function () {
 
 /***/ }),
 
-/***/ "./src/widget/LandingScreen.js":
+/***/ "./src/widget/TTPChatWidget.js":
 /*!*************************************!*\
-  !*** ./src/widget/LandingScreen.js ***!
+  !*** ./src/widget/TTPChatWidget.js ***!
   \*************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   LandingScreen: () => (/* binding */ LandingScreen)
+/* harmony export */   TTPChatWidget: () => (/* binding */ TTPChatWidget)
 /* harmony export */ });
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+/* harmony import */ var _core_TextChatSDK_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/TextChatSDK.js */ "./src/core/TextChatSDK.js");
+/* harmony import */ var _VoiceInterface_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./VoiceInterface.js */ "./src/widget/VoiceInterface.js");
+/* harmony import */ var _TextInterface_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextInterface.js */ "./src/widget/TextInterface.js");
+/* harmony import */ var _widget_translations_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./widget-translations.js */ "./src/widget/widget-translations.js");
+/* harmony import */ var _flavors_index_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../flavors/index.js */ "./src/flavors/index.js");
+var _excluded = ["agentName"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 /**
- * LandingScreen - Mode selection screen for unified widget mode
- * 
- * Required from parent (widget):
- * - config: { landing, header, language, ... }
- * - translations: object
- * - shadowRoot: ShadowRoot | Document
+ * TTPChatWidget - Pre-built UI widget for text chat using TextChatSDK
+ * Similar to AgentWidget but designed for text-based chat
  */
 
-var LandingScreen = /*#__PURE__*/function () {
-  function LandingScreen(config) {
-    _classCallCheck(this, LandingScreen);
-    this.config = config;
-    this.translations = config.translations || {};
-    this.shadowRoot = config.shadowRoot;
-  }
-
-  /**
-   * Helper to get translated text
-   */
-  return _createClass(LandingScreen, [{
-    key: "t",
-    value: function t(key) {
-      var lang = this.config.language || 'en';
-      var translations = this.translations[lang] || this.translations.en || {};
-      return translations[key] || key;
-    }
 
-    /**
-     * Generate HTML for landing screen
-     */
-  }, {
-    key: "generateHTML",
-    value: function generateHTML() {
-      var landing = this.config.landing || {};
 
-      // Determine logo content based on logoType
-      var logoContent = '';
-      if (landing.logoType === 'image' && landing.logoImageUrl) {
-        logoContent = "<img src=\"".concat(landing.logoImageUrl, "\" alt=\"Logo\" style=\"max-width: 44px; max-height: 44px; object-fit: contain; border: none; outline: none;\">");
-      } else {
-        logoContent = "<span class=\"landing-avatar-emoji\">".concat(landing.logoIcon || landing.logo || '🤖', "</span>");
-      }
-      return "\n      <div class=\"landing-screen\" id=\"landingScreen\">\n        <!-- Avatar -->\n        <div class=\"landing-avatar\">\n          ".concat(logoContent, "\n        </div>\n\n        <!-- Title -->\n        <h2 class=\"landing-title\">").concat(landing.title || this.t('landingTitle'), "</h2>\n        <p class=\"landing-subtitle\">").concat(landing.subtitle || this.t('landingSubtitle') || 'Choose your preferred method', "</p>\n\n        <!-- Mode Selection - Side by Side -->\n        <div class=\"mode-selection\">\n          <!-- Voice Call Option -->\n          <button class=\"mode-card\" id=\"mode-card-voice\">\n            <div class=\"mode-card-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\"/>\n                <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\"/>\n              </svg>\n            </div>\n            <span class=\"mode-card-title\">").concat(landing.voiceCardTitle || this.t('voiceCall'), "</span>\n          </button>\n\n          <!-- Text Chat Option -->\n          <button class=\"mode-card\" id=\"mode-card-text\">\n            <div class=\"mode-card-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"/>\n              </svg>\n            </div>\n            <span class=\"mode-card-title\">").concat(landing.textCardTitle || this.t('textChat'), "</span>\n          </button>\n        </div>\n      </div>\n    ");
-    }
 
-    /**
-     * Generate CSS for landing screen
-     */
-  }, {
-    key: "generateCSS",
-    value: function generateCSS() {
-      var landing = this.config.landing || {};
-      var anim = this.config.animation || {};
 
-      // Add !important when not using Shadow DOM
-      var important = this.config.useShadowDOM === false ? ' !important' : '';
-      return "\n      /* ===== LANDING SCREEN - New Design ===== */\n      .landing-screen { \n        display: none".concat(important, "; \n        flex: 1").concat(important, "; \n        padding: 32px 24px").concat(important, "; \n        background: ").concat(landing.backgroundColor || 'linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.03) 100%)', "; \n        align-items: center").concat(important, "; \n        justify-content: flex-start").concat(important, "; \n        flex-direction: column").concat(important, "; \n        gap: 0").concat(important, "; \n        overflow-y: auto").concat(important, "; \n        min-height: 0").concat(important, ";\n        text-align: center").concat(important, ";\n      }\n      \n      .landing-screen.active { \n        display: flex").concat(important, "; \n      }\n\n      /* Avatar - Richer purple gradient */\n      .landing-avatar {\n        width: 88px").concat(important, ";\n        height: 88px").concat(important, ";\n        border-radius: 22px").concat(important, ";\n        margin-bottom: 20px").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        ").concat(function () {
-        // Determine background based on logo type and background settings
-        if (landing.logoType === 'image') {
-          // For image logos, use logoBackgroundColor if enabled, otherwise transparent
-          if (landing.logoBackgroundEnabled !== false) {
-            var bgColor = landing.logoBackgroundColor || landing.avatarBackground || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
-            return "background: ".concat(bgColor, "; box-shadow: 0 8px 28px rgba(102, 126, 234, 0.35); border: none;");
-          } else {
-            return "background: transparent; box-shadow: none; border: none; outline: none;";
-          }
-        } else {
-          // For icon logos, use avatarBackground (default behavior)
-          var _bgColor = landing.avatarBackground || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
-          return "background: ".concat(_bgColor, "; box-shadow: 0 8px 28px rgba(102, 126, 234, 0.35); border: none;");
-        }
-      }(), "\n      }\n      \n      .landing-avatar img {\n        border: none !important;\n        outline: none !important;\n      }\n\n      .landing-avatar-emoji {\n        font-size: 44px").concat(important, ";\n        line-height: 1").concat(important, ";\n      }\n\n      /* Title & Subtitle */\n      .landing-title { \n        font-size: 20px").concat(important, "; \n        color: ").concat(landing.titleColor || '#1e1b4b', "; \n        font-weight: 600").concat(important, "; \n        margin-bottom: 6px").concat(important, "; \n        text-align: center").concat(important, ";\n        line-height: 1.3").concat(important, ";\n      }\n\n      .landing-subtitle {\n        font-size: 14px").concat(important, ";\n        color: ").concat(landing.subtitleColor || '#64748b', ";\n        margin-bottom: 28px").concat(important, ";\n        text-align: center").concat(important, ";\n      }\n\n      /* Mode Selection - Side by Side */\n      .mode-selection { \n        display: flex").concat(important, "; \n        gap: 12px").concat(important, "; \n        width: 100%").concat(important, "; \n        justify-content: center").concat(important, "; \n      }\n\n      .mode-card { \n        flex: 1").concat(important, "; \n        max-width: 160px").concat(important, "; \n        padding: 20px 16px").concat(important, ";\n        background: ").concat(landing.modeCardBackgroundColor || '#ffffff', "; \n        border: 1px solid ").concat(landing.modeCardBorderColor || 'rgba(0, 0, 0, 0.06)', "; \n        border-radius: 18px").concat(important, "; \n        cursor: pointer").concat(important, "; \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, "; \n        align-items: center").concat(important, "; \n        gap: 12px").concat(important, "; \n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)").concat(important, "; \n        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06)").concat(important, "; \n        font-family: inherit").concat(important, ";\n      }\n\n      .mode-card:hover { \n        transform: translateY(-4px)").concat(important, "; \n        box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2)").concat(important, "; \n        border-color: rgba(124, 58, 237, 0.3)").concat(important, "; \n      }\n\n      .mode-card:active {\n        transform: translateY(-2px)").concat(important, ";\n      }\n\n      /* Mode Card Icon - Vibrant purple gradient */\n      .mode-card-icon { \n        width: 56px").concat(important, "; \n        height: 56px").concat(important, "; \n        display: flex").concat(important, "; \n        align-items: center").concat(important, "; \n        justify-content: center").concat(important, "; \n        border-radius: 16px").concat(important, "; \n        background: ").concat(landing.modeCardIconBackgroundColor || 'linear-gradient(135deg, #7c3aed, #a855f7)', "; \n        color: #fff").concat(important, "; \n        box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35)").concat(important, ";\n      }\n\n      .mode-card-icon svg {\n        width: 26px").concat(important, ";\n        height: 26px").concat(important, ";\n        stroke: white").concat(important, ";\n        fill: none").concat(important, ";\n      }\n\n      .mode-card-title { \n        color: ").concat(landing.modeCardTitleColor || '#1e1b4b', "; \n        font-weight: 600").concat(important, "; \n        font-size: 14px").concat(important, ";\n        text-align: center").concat(important, ";\n      }\n\n      /* Mobile Responsive */\n      @media (max-width: 768px) {\n        .landing-screen {\n          padding: 24px 16px").concat(important, ";\n        }\n\n        .landing-avatar {\n          width: 72px").concat(important, ";\n          height: 72px").concat(important, ";\n          border-radius: 18px").concat(important, ";\n          margin-bottom: 16px").concat(important, ";\n        }\n\n        .landing-avatar-emoji {\n          font-size: 36px").concat(important, ";\n        }\n\n        .landing-title {\n          font-size: 18px").concat(important, ";\n        }\n\n        .landing-subtitle {\n          font-size: 13px").concat(important, ";\n          margin-bottom: 20px").concat(important, ";\n        }\n\n        .mode-selection {\n          gap: 10px").concat(important, ";\n        }\n\n        .mode-card {\n          padding: 16px 12px").concat(important, ";\n          max-width: 140px").concat(important, ";\n        }\n\n        .mode-card-icon {\n          width: 48px").concat(important, ";\n          height: 48px").concat(important, ";\n          border-radius: 14px").concat(important, ";\n        }\n\n        .mode-card-icon svg {\n          width: 22px").concat(important, ";\n          height: 22px").concat(important, ";\n        }\n\n        .mode-card-title {\n          font-size: 13px").concat(important, ";\n        }\n      }\n\n      @media (max-width: 380px) {\n        .mode-selection {\n          flex-direction: column").concat(important, ";\n          align-items: center").concat(important, ";\n        }\n\n        .mode-card {\n          max-width: 100%").concat(important, ";\n          width: 100%").concat(important, ";\n          flex-direction: row").concat(important, ";\n          padding: 14px 18px").concat(important, ";\n          gap: 14px").concat(important, ";\n        }\n\n        .mode-card-icon {\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .mode-card-title {\n          text-align: left").concat(important, ";\n        }\n      }\n    ");
-    }
 
-    /**
-     * Show the landing screen
-     */
-  }, {
-    key: "show",
-    value: function show() {
-      var _this$shadowRoot;
-      var landing = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.getElementById('landingScreen');
-      if (landing) {
-        landing.classList.add('active');
-      }
-    }
+function isNonEmptyConfigString(v) {
+  return v != null && String(v).trim() !== '';
+}
 
-    /**
-     * Hide the landing screen
-     */
-  }, {
-    key: "hide",
-    value: function hide() {
-      var _this$shadowRoot2;
-      var landing = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.getElementById('landingScreen');
-      if (landing) {
-        landing.classList.remove('active');
-      }
-    }
+/** True when the integrator set voice start-call colors (not relying on SDK defaults). */
+function isVoiceStartCallAppearanceCustomized(rawConfig) {
+  var v = rawConfig === null || rawConfig === void 0 ? void 0 : rawConfig.voice;
+  if (!v || _typeof(v) !== 'object') return false;
+  var set = function set(k) {
+    return Object.prototype.hasOwnProperty.call(v, k) && isNonEmptyConfigString(v[k]);
+  };
+  return set('primaryBtnGradient1') || set('primaryBtnGradient2') || set('startCallButtonColor');
+}
+function computeIsLightPanel(panelBg) {
+  if (!panelBg || panelBg.charAt(0) !== '#') return false;
+  var r = parseInt(panelBg.substr(1, 2), 16);
+  var g = parseInt(panelBg.substr(3, 2), 16);
+  var b = parseInt(panelBg.substr(5, 2), 16);
+  return (r * 299 + g * 587 + b * 114) / 1000 > 160;
+}
 
-    /**
-     * Setup event handlers (called by parent widget)
-     */
-  }, {
-    key: "setupEventHandlers",
-    value: function setupEventHandlers() {
-      var _this$shadowRoot3, _this$shadowRoot4;
-      var callbacks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var voiceCard = (_this$shadowRoot3 = this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : _this$shadowRoot3.getElementById('mode-card-voice');
-      var textCard = (_this$shadowRoot4 = this.shadowRoot) === null || _this$shadowRoot4 === void 0 ? void 0 : _this$shadowRoot4.getElementById('mode-card-text');
-      if (voiceCard && callbacks.onSelectVoice) {
-        voiceCard.onclick = callbacks.onSelectVoice;
-      }
-      if (textCard && callbacks.onSelectText) {
-        textCard.onclick = callbacks.onSelectText;
-      }
-    }
-  }]);
-}();
-
-/***/ }),
-
-/***/ "./src/widget/TTPChatWidget.js":
-/*!*************************************!*\
-  !*** ./src/widget/TTPChatWidget.js ***!
-  \*************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   TTPChatWidget: () => (/* binding */ TTPChatWidget)
-/* harmony export */ });
-/* harmony import */ var _core_TextChatSDK_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/TextChatSDK.js */ "./src/core/TextChatSDK.js");
-/* harmony import */ var _VoiceInterface_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./VoiceInterface.js */ "./src/widget/VoiceInterface.js");
-/* harmony import */ var _TextInterface_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextInterface.js */ "./src/widget/TextInterface.js");
-/* harmony import */ var _LandingScreen_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./LandingScreen.js */ "./src/widget/LandingScreen.js");
-/* harmony import */ var _widget_translations_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./widget-translations.js */ "./src/widget/widget-translations.js");
-/* harmony import */ var _flavors_index_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../flavors/index.js */ "./src/flavors/index.js");
-function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
-function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
-function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
-function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /**
- * TTPChatWidget - Pre-built UI widget for text chat using TextChatSDK
- * Similar to AgentWidget but designed for text-based chat
+ * Solid CSS color for "TalkToPC" footer link: brand purple by default; matches start-call accent when customized.
  */
-
-
-
-
-
-
-
+function talkToPcLinkColorForPanel(isLightPanel, mergedVoice, rawConfig, voiceUiEnabled) {
+  var startAccentDark = mergedVoice.primaryBtnGradient1 || mergedVoice.primaryBtnGradient2 || mergedVoice.startCallButtonColor || '#6d56f5';
+  var defaultDark = startAccentDark;
+  var defaultLight = '#7C3AED';
+  var defaults = isLightPanel ? defaultLight : defaultDark;
+  if (!voiceUiEnabled || !isVoiceStartCallAppearanceCustomized(rawConfig)) return defaults;
+  var raw = mergedVoice.primaryBtnGradient1 || mergedVoice.primaryBtnGradient2 || mergedVoice.startCallButtonColor;
+  if (!isNonEmptyConfigString(raw)) return defaults;
+  var t = String(raw).trim();
+  if (t.startsWith('#')) {
+    if (t.length === 4) {
+      var r = t[1];
+      var g = t[2];
+      var b = t[3];
+      return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+    }
+    if (t.length === 7) return t;
+  }
+  var m = t.match(/#[0-9a-fA-F]{6}/i);
+  if (m) return m[0];
+  return defaults;
+}
 var TTPChatWidget = /*#__PURE__*/function () {
   function TTPChatWidget() {
-    var _this$config$text,
+    var _this$config$behavior,
+      _this$config$panel,
+      _this$config$text,
       _this$config$text2,
       _this$config$voice,
       _this$config$voice2,
@@ -28765,8 +28980,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       _this$config$voice4,
       _this$config$voice5,
       _this$config$voice6,
-      _this = this,
-      _this$config$behavior2;
+      _this = this;
     var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _classCallCheck(this, TTPChatWidget);
     this._rawConfig = config;
@@ -28782,9 +28996,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
     this.sdk = new _core_TextChatSDK_js__WEBPACK_IMPORTED_MODULE_0__["default"](this.config);
     this.isOpen = false;
     this.isActive = false;
-    this.translations = _widget_translations_js__WEBPACK_IMPORTED_MODULE_4__["default"];
+    this.translations = _widget_translations_js__WEBPACK_IMPORTED_MODULE_3__["default"];
     // Track current view state in unified mode to prevent resetting when widget is recreated
-    this.currentView = 'landing'; // 'landing', 'text', or 'voice'
+    this.currentView = 'voice'; // 'text' or 'voice' (unified home is always voice hero)
     // Race condition prevention: prevent multiple rapid clicks on Voice Call button
     this.isStartingCall = false;
     // Shadow DOM root for CSS isolation
@@ -28807,7 +29021,13 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
     // Initialize interfaces with proper config (after shadow root is created)
     // Voice interface needs voice config merged with main config
+    var widgetModeForVoice = ((_this$config$behavior = this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mode) || 'unified';
+    var showVoiceUi = widgetModeForVoice === 'unified' || widgetModeForVoice === 'voice-only';
+    var panelBgForBrand = ((_this$config$panel = this.config.panel) === null || _this$config$panel === void 0 ? void 0 : _this$config$panel.backgroundColor) || '#16161e';
+    var talkToPcLink = talkToPcLinkColorForPanel(computeIsLightPanel(panelBgForBrand), this.config.voice, this._rawConfig, showVoiceUi);
     var voiceConfig = _objectSpread(_objectSpread(_objectSpread({}, this.config), this.config.voice), {}, {
+      agentName: this.config.agentName,
+      _talkToPcLinkColor: talkToPcLink,
       // Pass through text input placeholder for voice text input
       inputPlaceholder: ((_this$config$text = this.config.text) === null || _this$config$text === void 0 ? void 0 : _this$config$text.inputPlaceholder) || this.config.inputPlaceholder || 'Type your message...',
       // Pass through send button color for voice send button
@@ -28835,15 +29055,15 @@ var TTPChatWidget = /*#__PURE__*/function () {
       onAudioStoppedPlaying: this.config.onAudioStoppedPlaying,
       onSubtitleDisplay: this.config.onSubtitleDisplay,
       onVoiceCallButtonClick: this.config.onVoiceCallButtonClick,
-      // Callback when call ends - show landing screen (only in unified mode)
-      // BUT: Don't return to landing if we're showing a domain error
+      // Callback when call ends — return to unified home (voice hero), not legacy mode picker
+      // BUT: Don't switch views if we're showing a domain error
       onCallEnd: function onCallEnd() {
-        var _this$config$behavior;
+        var _this$config$behavior2;
         if (_this._isDomainErrorVisible()) {
-          console.log('🚫 Domain error is displayed - NOT returning to landing screen from onCallEnd');
+          console.log('🚫 Domain error is displayed - NOT returning to home from onCallEnd');
           return;
         }
-        var widgetMode = ((_this$config$behavior = _this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mode) || 'unified';
+        var widgetMode = ((_this$config$behavior2 = _this.config.behavior) === null || _this$config$behavior2 === void 0 ? void 0 : _this$config$behavior2.mode) || 'unified';
         if (widgetMode === 'unified') {
           if (window.innerWidth <= 768) {
             var _this$shadowRoot, _this$shadowRoot2;
@@ -28863,7 +29083,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       onShowVoice: function onShowVoice() {
         _this.showVoice();
       },
-      // Callback to show landing page (used by domain error back button)
+      // Callback to show unified home (voice hero; used by domain error back button)
       onShowLanding: function onShowLanding() {
         _this.showLanding();
       },
@@ -28883,18 +29103,6 @@ var TTPChatWidget = /*#__PURE__*/function () {
     });
     this.textInterface = new _TextInterface_js__WEBPACK_IMPORTED_MODULE_2__.TextInterface(textConfig, this.sdk);
 
-    // Landing screen (only for unified mode)
-    var widgetMode = ((_this$config$behavior2 = this.config.behavior) === null || _this$config$behavior2 === void 0 ? void 0 : _this$config$behavior2.mode) || 'unified';
-    if (widgetMode === 'unified') {
-      var landingConfig = _objectSpread(_objectSpread({}, this.config), {}, {
-        translations: this.translations,
-        shadowRoot: this.shadowRoot
-      });
-      this.landingScreen = new _LandingScreen_js__WEBPACK_IMPORTED_MODULE_3__.LandingScreen(landingConfig);
-    } else {
-      this.landingScreen = null;
-    }
-
     // Now create widget HTML and populate shadow root
     this.createWidget();
     this.setupEventHandlers();
@@ -28998,7 +29206,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
     value: function _initFlavor(flavorName) {
       var _this$_flavorObj,
         _this3 = this;
-      var factory = (0,_flavors_index_js__WEBPACK_IMPORTED_MODULE_5__.loadFlavor)(flavorName);
+      var factory = (0,_flavors_index_js__WEBPACK_IMPORTED_MODULE_4__.loadFlavor)(flavorName);
       if (!factory) {
         console.error("[TTPChatWidget] Unknown flavor: \"".concat(flavorName, "\". Available flavors: ecommerce. Widget will run in vanilla mode."));
         return;
@@ -29064,6 +29272,17 @@ var TTPChatWidget = /*#__PURE__*/function () {
       }
     }
 
+    /**
+     * Resolved direction for widget chrome (shadow host, launcher). After mergeWithDefaults,
+     * config.direction is always 'ltr' or 'rtl'.
+     */
+  }, {
+    key: "getEffectiveTextDirection",
+    value: function getEffectiveTextDirection() {
+      var _this$config;
+      return ((_this$config = this.config) === null || _this$config === void 0 ? void 0 : _this$config.direction) === 'rtl' ? 'rtl' : 'ltr';
+    }
+
     /**
      * Open the widget
      */
@@ -29086,7 +29305,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "mergeWithDefaults",
     value: function mergeWithDefaults(userConfig) {
-      var _userConfig$button, _userConfig$button2, _userConfig$icon, _userConfig$icon2, _userConfig$icon3, _userConfig$icon4, _userConfig$icon5, _userConfig$icon6, _userConfig$button3, _userConfig$button4, _userConfig$button5, _userConfig$icon7, _userConfig$button6, _userConfig$button7, _userConfig$button8, _userConfig$button9, _userConfig$icon8, _userConfig$panel, _userConfig$panel2, _userConfig$panel3, _userConfig$panel4, _userConfig$panel5, _userConfig$panel6, _userConfig$voice, _userConfig$panel7, _userConfig$voice2, _userConfig$panel8, _userConfig$voice3, _userConfig$panel9, _userConfig$voice4, _userConfig$panel0, _userConfig$voice5, _userConfig$panel1, _userConfig$voice6, _userConfig$panel10, _userConfig$voice7, _userConfig$voice8, _userConfig$voice9, _userConfig$voice0, _userConfig$voice1, _userConfig$voice10, _userConfig$voice11, _userConfig$voice12, _userConfig$voice13, _userConfig$voice14, _userConfig$voice15, _userConfig$voice16, _userConfig$voice17, _userConfig$voice18, _userConfig$voice19, _userConfig$voice20, _userConfig$voice21, _userConfig$voice22, _userConfig$text, _userConfig$panel11, _userConfig$text2, _userConfig$panel12, _userConfig$text3, _userConfig$panel13, _userConfig$text4, _userConfig$panel14, _userConfig$text5, _userConfig$panel15, _userConfig$text6, _userConfig$panel16, _userConfig$text7, _userConfig$panel17, _userConfig$text8, _userConfig$panel18, _userConfig$text9, _userConfig$panel19, _userConfig$text0, _userConfig$panel20, _userConfig$text1, _userConfig$panel21, _userConfig$text10, _userConfig$panel22, _userConfig$text11, _userConfig$panel23, _userConfig$text12, _userConfig$panel24, _userConfig$text13, _userConfig$panel25, _userConfig$text14, _userConfig$panel26, _userConfig$text15, _userConfig$panel27, _userConfig$text16, _userConfig$panel28, _userConfig$text17, _userConfig$panel29, _userConfig$footer, _userConfig$footer2, _userConfig$footer3, _userConfig$footer4, _userConfig$tooltips, _userConfig$tooltips2, _userConfig$tooltips3, _userConfig$tooltips4, _userConfig$tooltips5, _userConfig$tooltips6, _userConfig$messages, _userConfig$messages2, _userConfig$messages3, _userConfig$messages4, _userConfig$messages5, _userConfig$messages6, _userConfig$messages7, _userConfig$messages8, _userConfig$messages9, _userConfig$messages0, _userConfig$messages1, _userConfig$messages10, _userConfig$messages11, _userConfig$animation, _userConfig$animation2, _userConfig$animation3, _userConfig$animation4, _userConfig$promptAni, _userConfig$promptAni2, _userConfig$promptAni3, _userConfig$promptAni4, _userConfig$promptAni5, _userConfig$promptAni6, _userConfig$promptAni7, _userConfig$promptAni8, _userConfig$promptAni9, _userConfig$promptAni0, _userConfig$behavior, _userConfig$behavior2, _userConfig$behavior3, _userConfig$behavior4, _userConfig$behavior5, _userConfig$behavior6, _userConfig$behavior7, _userConfig$behavior8, _userConfig$accessibi, _userConfig$accessibi2, _userConfig$accessibi3;
+      var _userConfig$button, _userConfig$button2, _userConfig$icon, _userConfig$icon2, _userConfig$icon3, _userConfig$icon4, _userConfig$icon5, _userConfig$button3, _userConfig$button4, _userConfig$button5, _userConfig$icon7, _userConfig$button6, _userConfig$button7, _userConfig$button8, _userConfig$button9, _userConfig$icon8, _userConfig$panel, _userConfig$panel2, _userConfig$panel3, _userConfig$panel4, _userConfig$panel5, _userConfig$panel6, _userConfig$text, _userConfig$panel11, _userConfig$text2, _userConfig$panel12, _userConfig$text3, _userConfig$panel13, _userConfig$text4, _userConfig$panel14, _userConfig$text5, _userConfig$panel15, _userConfig$text6, _userConfig$panel16, _userConfig$text7, _userConfig$panel17, _userConfig$text8, _userConfig$panel18, _userConfig$text9, _userConfig$panel19, _userConfig$text0, _userConfig$panel20, _userConfig$text1, _userConfig$panel21, _userConfig$text10, _userConfig$panel22, _userConfig$text11, _userConfig$panel23, _userConfig$text12, _userConfig$panel24, _userConfig$text13, _userConfig$panel25, _userConfig$text14, _userConfig$panel26, _userConfig$text15, _userConfig$panel27, _userConfig$text16, _userConfig$panel28, _userConfig$text17, _userConfig$panel29, _userConfig$footer, _userConfig$footer2, _userConfig$footer3, _userConfig$footer4, _userConfig$tooltips, _userConfig$tooltips2, _userConfig$tooltips3, _userConfig$tooltips4, _userConfig$tooltips5, _userConfig$tooltips6, _userConfig$messages, _userConfig$messages2, _userConfig$messages3, _userConfig$messages4, _userConfig$messages5, _userConfig$messages6, _userConfig$messages7, _userConfig$messages8, _userConfig$messages9, _userConfig$messages0, _userConfig$messages1, _userConfig$messages10, _userConfig$messages11, _userConfig$animation, _userConfig$animation2, _userConfig$animation3, _userConfig$animation4, _userConfig$promptAni, _userConfig$promptAni2, _userConfig$promptAni3, _userConfig$promptAni4, _userConfig$promptAni5, _userConfig$promptAni6, _userConfig$promptAni7, _userConfig$promptAni8, _userConfig$promptAni9, _userConfig$promptAni0, _userConfig$behavior, _userConfig$behavior2, _userConfig$behavior3, _userConfig$behavior4, _userConfig$behavior5, _userConfig$behavior6, _userConfig$behavior7, _userConfig$behavior8, _userConfig$accessibi, _userConfig$accessibi2, _userConfig$accessibi3;
       // Handle legacy position string format
       var positionConfig = userConfig.position || 'bottom-right';
       if (typeof positionConfig === 'string') {
@@ -29130,7 +29349,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
           }
         });
       }
-      return _objectSpread({
+      return _objectSpread(_objectSpread({
         // Required (agentId is required, appId is optional)
         agentId: userConfig.agentId,
         appId: userConfig.appId,
@@ -29138,22 +29357,35 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // signedUrl accepted as backward-compat alias
         agentSettingsOverride: userConfig.agentSettingsOverride,
         demo: userConfig.demo !== false,
-        direction: userConfig.direction || 'ltr',
-        // Optional - text direction: 'ltr' or 'rtl'
-        language: userConfig.language || 'en',
-        // Optional - language for voice (defaults to 'en')
-
+        direction: function () {
+          if (userConfig.direction === 'rtl' || userConfig.direction === 'ltr') {
+            return userConfig.direction;
+          }
+          var langBase = String(userConfig.language || 'en').toLowerCase().split(/[-_]/)[0];
+          if (langBase === 'he' || langBase === 'ar') return 'rtl';
+          return 'ltr';
+        }(),
+        language: userConfig.language || 'en'
+      }, isNonEmptyConfigString(userConfig.agentName) ? {
+        agentName: String(userConfig.agentName).trim()
+      } : {}), {}, {
         // Icon/Image Configuration
-        icon: _objectSpread({
+        icon: _objectSpread(_objectSpread({
           type: ((_userConfig$icon = userConfig.icon) === null || _userConfig$icon === void 0 ? void 0 : _userConfig$icon.type) || 'custom',
           // 'microphone', 'custom', 'emoji', 'text'
-          customImage: ((_userConfig$icon2 = userConfig.icon) === null || _userConfig$icon2 === void 0 ? void 0 : _userConfig$icon2.customImage) || 'https://talktopc.com/logo192.png',
-          emoji: ((_userConfig$icon3 = userConfig.icon) === null || _userConfig$icon3 === void 0 ? void 0 : _userConfig$icon3.emoji) || '🎤',
-          text: ((_userConfig$icon4 = userConfig.icon) === null || _userConfig$icon4 === void 0 ? void 0 : _userConfig$icon4.text) || 'AI',
-          size: ((_userConfig$icon5 = userConfig.icon) === null || _userConfig$icon5 === void 0 ? void 0 : _userConfig$icon5.size) || 'medium',
+          emoji: ((_userConfig$icon2 = userConfig.icon) === null || _userConfig$icon2 === void 0 ? void 0 : _userConfig$icon2.emoji) || '🎤',
+          text: ((_userConfig$icon3 = userConfig.icon) === null || _userConfig$icon3 === void 0 ? void 0 : _userConfig$icon3.text) || 'AI',
+          size: ((_userConfig$icon4 = userConfig.icon) === null || _userConfig$icon4 === void 0 ? void 0 : _userConfig$icon4.size) || 'medium',
           // 'small', 'medium', 'large', 'xl'
-          backgroundColor: ((_userConfig$icon6 = userConfig.icon) === null || _userConfig$icon6 === void 0 ? void 0 : _userConfig$icon6.backgroundColor) || '#FFFFFF'
-        }, userConfig.icon),
+          backgroundColor: ((_userConfig$icon5 = userConfig.icon) === null || _userConfig$icon5 === void 0 ? void 0 : _userConfig$icon5.backgroundColor) || '#FFFFFF'
+        }, userConfig.icon), {}, {
+          /* After spread: empty / omitted URL → null so desktop pill uses waveform like mobile FAB */
+          customImage: function (_userConfig$icon6) {
+            var v = (_userConfig$icon6 = userConfig.icon) === null || _userConfig$icon6 === void 0 ? void 0 : _userConfig$icon6.customImage;
+            if (v == null || String(v).trim() === '') return null;
+            return String(v).trim();
+          }()
+        }),
         // Positioning Configuration (supports both object and legacy string)
         position: _objectSpread({
           vertical: positionConfig.vertical || 'bottom',
@@ -29185,38 +29417,46 @@ var TTPChatWidget = /*#__PURE__*/function () {
           backdropFilter: ((_userConfig$panel5 = userConfig.panel) === null || _userConfig$panel5 === void 0 ? void 0 : _userConfig$panel5.backdropFilter) || null,
           border: ((_userConfig$panel6 = userConfig.panel) === null || _userConfig$panel6 === void 0 ? void 0 : _userConfig$panel6.border) || '1px solid #E5E7EB'
         }, userConfig.panel),
-        // Voice-specific Configuration
-        voice: _objectSpread({
-          // Voice button colors (inside panel)
-          micButtonColor: ((_userConfig$voice = userConfig.voice) === null || _userConfig$voice === void 0 ? void 0 : _userConfig$voice.micButtonColor) || ((_userConfig$panel7 = userConfig.panel) === null || _userConfig$panel7 === void 0 ? void 0 : _userConfig$panel7.micButtonColor) || primaryColor,
-          micButtonActiveColor: ((_userConfig$voice2 = userConfig.voice) === null || _userConfig$voice2 === void 0 ? void 0 : _userConfig$voice2.micButtonActiveColor) || ((_userConfig$panel8 = userConfig.panel) === null || _userConfig$panel8 === void 0 ? void 0 : _userConfig$panel8.micButtonActiveColor) || '#EF4444',
-          // Voice button hint text (below button)
-          micButtonHint: _objectSpread(_objectSpread({
-            text: ((_userConfig$voice3 = userConfig.voice) === null || _userConfig$voice3 === void 0 || (_userConfig$voice3 = _userConfig$voice3.micButtonHint) === null || _userConfig$voice3 === void 0 ? void 0 : _userConfig$voice3.text) || ((_userConfig$panel9 = userConfig.panel) === null || _userConfig$panel9 === void 0 || (_userConfig$panel9 = _userConfig$panel9.micButtonHint) === null || _userConfig$panel9 === void 0 ? void 0 : _userConfig$panel9.text) || 'Click the button to start voice conversation',
-            color: ((_userConfig$voice4 = userConfig.voice) === null || _userConfig$voice4 === void 0 || (_userConfig$voice4 = _userConfig$voice4.micButtonHint) === null || _userConfig$voice4 === void 0 ? void 0 : _userConfig$voice4.color) || ((_userConfig$panel0 = userConfig.panel) === null || _userConfig$panel0 === void 0 || (_userConfig$panel0 = _userConfig$panel0.micButtonHint) === null || _userConfig$panel0 === void 0 ? void 0 : _userConfig$panel0.color) || '#6B7280',
-            fontSize: ((_userConfig$voice5 = userConfig.voice) === null || _userConfig$voice5 === void 0 || (_userConfig$voice5 = _userConfig$voice5.micButtonHint) === null || _userConfig$voice5 === void 0 ? void 0 : _userConfig$voice5.fontSize) || ((_userConfig$panel1 = userConfig.panel) === null || _userConfig$panel1 === void 0 || (_userConfig$panel1 = _userConfig$panel1.micButtonHint) === null || _userConfig$panel1 === void 0 ? void 0 : _userConfig$panel1.fontSize) || '12px'
-          }, (_userConfig$voice6 = userConfig.voice) === null || _userConfig$voice6 === void 0 ? void 0 : _userConfig$voice6.micButtonHint), (_userConfig$panel10 = userConfig.panel) === null || _userConfig$panel10 === void 0 ? void 0 : _userConfig$panel10.micButtonHint),
-          // Voice interface colors
-          avatarBackgroundColor: ((_userConfig$voice7 = userConfig.voice) === null || _userConfig$voice7 === void 0 ? void 0 : _userConfig$voice7.avatarBackgroundColor) || '#667eea',
-          avatarActiveBackgroundColor: ((_userConfig$voice8 = userConfig.voice) === null || _userConfig$voice8 === void 0 ? void 0 : _userConfig$voice8.avatarActiveBackgroundColor) || '#667eea',
-          statusTitleColor: ((_userConfig$voice9 = userConfig.voice) === null || _userConfig$voice9 === void 0 ? void 0 : _userConfig$voice9.statusTitleColor) || '#1e293b',
-          statusSubtitleColor: ((_userConfig$voice0 = userConfig.voice) === null || _userConfig$voice0 === void 0 ? void 0 : _userConfig$voice0.statusSubtitleColor) || '#64748b',
-          statusDotColor: ((_userConfig$voice1 = userConfig.voice) === null || _userConfig$voice1 === void 0 ? void 0 : _userConfig$voice1.statusDotColor) || '#10b981',
-          statusText: ((_userConfig$voice10 = userConfig.voice) === null || _userConfig$voice10 === void 0 ? void 0 : _userConfig$voice10.statusText) || null,
-          startCallButtonColor: ((_userConfig$voice11 = userConfig.voice) === null || _userConfig$voice11 === void 0 ? void 0 : _userConfig$voice11.startCallButtonColor) || '#667eea',
-          startCallButtonTextColor: ((_userConfig$voice12 = userConfig.voice) === null || _userConfig$voice12 === void 0 ? void 0 : _userConfig$voice12.startCallButtonTextColor) || '#FFFFFF',
-          startCallTitle: ((_userConfig$voice13 = userConfig.voice) === null || _userConfig$voice13 === void 0 ? void 0 : _userConfig$voice13.startCallTitle) || null,
-          startCallSubtitle: ((_userConfig$voice14 = userConfig.voice) === null || _userConfig$voice14 === void 0 ? void 0 : _userConfig$voice14.startCallSubtitle) || null,
-          startCallButtonText: ((_userConfig$voice15 = userConfig.voice) === null || _userConfig$voice15 === void 0 ? void 0 : _userConfig$voice15.startCallButtonText) || null,
-          transcriptBackgroundColor: ((_userConfig$voice16 = userConfig.voice) === null || _userConfig$voice16 === void 0 ? void 0 : _userConfig$voice16.transcriptBackgroundColor) || '#FFFFFF',
-          transcriptTextColor: ((_userConfig$voice17 = userConfig.voice) === null || _userConfig$voice17 === void 0 ? void 0 : _userConfig$voice17.transcriptTextColor) || '#1e293b',
-          transcriptLabelColor: ((_userConfig$voice18 = userConfig.voice) === null || _userConfig$voice18 === void 0 ? void 0 : _userConfig$voice18.transcriptLabelColor) || '#94a3b8',
-          controlButtonColor: ((_userConfig$voice19 = userConfig.voice) === null || _userConfig$voice19 === void 0 ? void 0 : _userConfig$voice19.controlButtonColor) || '#FFFFFF',
-          controlButtonSecondaryColor: ((_userConfig$voice20 = userConfig.voice) === null || _userConfig$voice20 === void 0 ? void 0 : _userConfig$voice20.controlButtonSecondaryColor) || '#64748b',
-          endCallButtonColor: ((_userConfig$voice21 = userConfig.voice) === null || _userConfig$voice21 === void 0 ? void 0 : _userConfig$voice21.endCallButtonColor) || '#ef4444',
-          // Voice language setting
-          language: ((_userConfig$voice22 = userConfig.voice) === null || _userConfig$voice22 === void 0 ? void 0 : _userConfig$voice22.language) || userConfig.language || 'en'
-        }, userConfig.voice),
+        // Voice-specific Configuration (`voice.agentName` is ignored — use root `agentName`)
+        voice: function (_userConfig$voice, _userConfig$panel7, _userConfig$voice2, _userConfig$panel8, _userConfig$voice3, _userConfig$panel9, _userConfig$voice4, _userConfig$panel0, _userConfig$voice5, _userConfig$panel1, _userConfig$voice6, _userConfig$panel10, _userConfig$voice7, _userConfig$voice8, _userConfig$voice9, _userConfig$voice0, _userConfig$voice1, _userConfig$voice10, _userConfig$voice11, _userConfig$voice12, _userConfig$voice13, _userConfig$voice14, _userConfig$voice15, _userConfig$voice16, _userConfig$voice17, _userConfig$voice18, _userConfig$voice$use, _userConfig$voice19, _userConfig$voice20, _userConfig$voice21, _userConfig$voice22, _userConfig$voice23, _userConfig$voice24) {
+          var voiceOut = _objectSpread(_objectSpread({
+            // Voice button colors (inside panel)
+            micButtonColor: ((_userConfig$voice = userConfig.voice) === null || _userConfig$voice === void 0 ? void 0 : _userConfig$voice.micButtonColor) || ((_userConfig$panel7 = userConfig.panel) === null || _userConfig$panel7 === void 0 ? void 0 : _userConfig$panel7.micButtonColor) || primaryColor,
+            micButtonActiveColor: ((_userConfig$voice2 = userConfig.voice) === null || _userConfig$voice2 === void 0 ? void 0 : _userConfig$voice2.micButtonActiveColor) || ((_userConfig$panel8 = userConfig.panel) === null || _userConfig$panel8 === void 0 ? void 0 : _userConfig$panel8.micButtonActiveColor) || '#EF4444',
+            // Voice button hint text (below button)
+            micButtonHint: _objectSpread(_objectSpread({
+              text: ((_userConfig$voice3 = userConfig.voice) === null || _userConfig$voice3 === void 0 || (_userConfig$voice3 = _userConfig$voice3.micButtonHint) === null || _userConfig$voice3 === void 0 ? void 0 : _userConfig$voice3.text) || ((_userConfig$panel9 = userConfig.panel) === null || _userConfig$panel9 === void 0 || (_userConfig$panel9 = _userConfig$panel9.micButtonHint) === null || _userConfig$panel9 === void 0 ? void 0 : _userConfig$panel9.text) || 'Click the button to start voice conversation',
+              color: ((_userConfig$voice4 = userConfig.voice) === null || _userConfig$voice4 === void 0 || (_userConfig$voice4 = _userConfig$voice4.micButtonHint) === null || _userConfig$voice4 === void 0 ? void 0 : _userConfig$voice4.color) || ((_userConfig$panel0 = userConfig.panel) === null || _userConfig$panel0 === void 0 || (_userConfig$panel0 = _userConfig$panel0.micButtonHint) === null || _userConfig$panel0 === void 0 ? void 0 : _userConfig$panel0.color) || '#6B7280',
+              fontSize: ((_userConfig$voice5 = userConfig.voice) === null || _userConfig$voice5 === void 0 || (_userConfig$voice5 = _userConfig$voice5.micButtonHint) === null || _userConfig$voice5 === void 0 ? void 0 : _userConfig$voice5.fontSize) || ((_userConfig$panel1 = userConfig.panel) === null || _userConfig$panel1 === void 0 || (_userConfig$panel1 = _userConfig$panel1.micButtonHint) === null || _userConfig$panel1 === void 0 ? void 0 : _userConfig$panel1.fontSize) || '12px'
+            }, (_userConfig$voice6 = userConfig.voice) === null || _userConfig$voice6 === void 0 ? void 0 : _userConfig$voice6.micButtonHint), (_userConfig$panel10 = userConfig.panel) === null || _userConfig$panel10 === void 0 ? void 0 : _userConfig$panel10.micButtonHint),
+            // Voice interface colors
+            avatarBackgroundColor: ((_userConfig$voice7 = userConfig.voice) === null || _userConfig$voice7 === void 0 ? void 0 : _userConfig$voice7.avatarBackgroundColor) || '#667eea',
+            avatarActiveBackgroundColor: ((_userConfig$voice8 = userConfig.voice) === null || _userConfig$voice8 === void 0 ? void 0 : _userConfig$voice8.avatarActiveBackgroundColor) || '#667eea',
+            statusTitleColor: ((_userConfig$voice9 = userConfig.voice) === null || _userConfig$voice9 === void 0 ? void 0 : _userConfig$voice9.statusTitleColor) || '#1e293b',
+            statusSubtitleColor: ((_userConfig$voice0 = userConfig.voice) === null || _userConfig$voice0 === void 0 ? void 0 : _userConfig$voice0.statusSubtitleColor) || '#64748b',
+            statusDotColor: ((_userConfig$voice1 = userConfig.voice) === null || _userConfig$voice1 === void 0 ? void 0 : _userConfig$voice1.statusDotColor) || '#10b981',
+            statusText: ((_userConfig$voice10 = userConfig.voice) === null || _userConfig$voice10 === void 0 ? void 0 : _userConfig$voice10.statusText) || null,
+            startCallButtonColor: ((_userConfig$voice11 = userConfig.voice) === null || _userConfig$voice11 === void 0 ? void 0 : _userConfig$voice11.startCallButtonColor) || '#667eea',
+            startCallButtonTextColor: ((_userConfig$voice12 = userConfig.voice) === null || _userConfig$voice12 === void 0 ? void 0 : _userConfig$voice12.startCallButtonTextColor) || '#FFFFFF',
+            startCallTitle: ((_userConfig$voice13 = userConfig.voice) === null || _userConfig$voice13 === void 0 ? void 0 : _userConfig$voice13.startCallTitle) || null,
+            startCallSubtitle: ((_userConfig$voice14 = userConfig.voice) === null || _userConfig$voice14 === void 0 ? void 0 : _userConfig$voice14.startCallSubtitle) || null,
+            startCallButtonText: ((_userConfig$voice15 = userConfig.voice) === null || _userConfig$voice15 === void 0 ? void 0 : _userConfig$voice15.startCallButtonText) || null,
+            transcriptBackgroundColor: ((_userConfig$voice16 = userConfig.voice) === null || _userConfig$voice16 === void 0 ? void 0 : _userConfig$voice16.transcriptBackgroundColor) || '#FFFFFF',
+            transcriptTextColor: ((_userConfig$voice17 = userConfig.voice) === null || _userConfig$voice17 === void 0 ? void 0 : _userConfig$voice17.transcriptTextColor) || '#1e293b',
+            transcriptLabelColor: ((_userConfig$voice18 = userConfig.voice) === null || _userConfig$voice18 === void 0 ? void 0 : _userConfig$voice18.transcriptLabelColor) || '#94a3b8',
+            // Live user STT line prefix (e.g. "You: "). null = use translation userTranscriptPrefix; '' = no prefix
+            userTranscriptPrefix: (_userConfig$voice$use = (_userConfig$voice19 = userConfig.voice) === null || _userConfig$voice19 === void 0 ? void 0 : _userConfig$voice19.userTranscriptPrefix) !== null && _userConfig$voice$use !== void 0 ? _userConfig$voice$use : null,
+            controlButtonColor: ((_userConfig$voice20 = userConfig.voice) === null || _userConfig$voice20 === void 0 ? void 0 : _userConfig$voice20.controlButtonColor) || '#FFFFFF',
+            controlButtonSecondaryColor: ((_userConfig$voice21 = userConfig.voice) === null || _userConfig$voice21 === void 0 ? void 0 : _userConfig$voice21.controlButtonSecondaryColor) || '#64748b',
+            endCallButtonColor: ((_userConfig$voice22 = userConfig.voice) === null || _userConfig$voice22 === void 0 ? void 0 : _userConfig$voice22.endCallButtonColor) || '#ef4444',
+            // Voice language setting
+            language: ((_userConfig$voice23 = userConfig.voice) === null || _userConfig$voice23 === void 0 ? void 0 : _userConfig$voice23.language) || userConfig.language || 'en'
+          }, userConfig.voice), isNonEmptyConfigString(userConfig.headerAvatarImageUrl) && !isNonEmptyConfigString((_userConfig$voice24 = userConfig.voice) === null || _userConfig$voice24 === void 0 ? void 0 : _userConfig$voice24.headerAvatarImageUrl) ? {
+            headerAvatarImageUrl: String(userConfig.headerAvatarImageUrl).trim()
+          } : {});
+          delete voiceOut.agentName;
+          return voiceOut;
+        }(),
         // Text-specific Configuration
         text: _objectSpread({
           // Send button colors (inside panel)
@@ -29314,8 +29554,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
             backgroundColor: cleanHeaderConfig.backgroundColor || '#7C3AED',
             // Default purple
             textColor: cleanHeaderConfig.textColor || '#FFFFFF',
-            showCloseButton: cleanHeaderConfig.showCloseButton !== false,
-            mobileLabel: cleanHeaderConfig.mobileLabel || 'Chat'
+            showCloseButton: cleanHeaderConfig.showCloseButton !== false
           }, cleanHeaderConfig);
           return finalHeader;
         }(),
@@ -29386,9 +29625,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
           autoConnect: ((_userConfig$behavior4 = userConfig.behavior) === null || _userConfig$behavior4 === void 0 ? void 0 : _userConfig$behavior4.autoConnect) || false,
           showWelcomeMessage: ((_userConfig$behavior5 = userConfig.behavior) === null || _userConfig$behavior5 === void 0 ? void 0 : _userConfig$behavior5.showWelcomeMessage) !== false,
           welcomeMessage: ((_userConfig$behavior6 = userConfig.behavior) === null || _userConfig$behavior6 === void 0 ? void 0 : _userConfig$behavior6.welcomeMessage) || 'Hello! How can I help you today?',
-          // Voice selection landing (enabled by default)
           enableVoiceMode: ((_userConfig$behavior7 = userConfig.behavior) === null || _userConfig$behavior7 === void 0 ? void 0 : _userConfig$behavior7.enableVoiceMode) !== undefined ? userConfig.behavior.enableVoiceMode : true,
-          // Widget mode: 'unified' (both voice and text with landing screen), 'voice-only' (only voice), 'text-only' (only text)
+          // Widget mode: 'unified' (voice hero + text chat in panel; mobile pre-chat overlay), 'voice-only', 'text-only'
           mode: ((_userConfig$behavior8 = userConfig.behavior) === null || _userConfig$behavior8 === void 0 ? void 0 : _userConfig$behavior8.mode) || 'unified'
         }, userConfig.behavior),
         // Accessibility Configuration
@@ -29470,6 +29708,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // The actual button and panel have pointer-events: auto to receive clicks
       // Using width/height 100% ensures fixed-position children have proper containing block
       host.style.cssText = 'position: fixed; z-index: 10000; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; overflow: visible;';
+      host.setAttribute('dir', this.getEffectiveTextDirection());
 
       // Attach shadow DOM
       this.shadowRoot = host.attachShadow({
@@ -29498,6 +29737,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Container covers viewport but is click-through (pointer-events: none)
       // The actual button and panel have pointer-events: auto to receive clicks
       container.style.cssText = 'position: fixed; z-index: 10000; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; overflow: visible;';
+      container.setAttribute('dir', this.getEffectiveTextDirection());
 
       // Append container to body
       document.body.appendChild(container);
@@ -29529,7 +29769,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         resetCSS = "\n        :host {\n          all: initial".concat(important, ";\n          display: block").concat(important, ";\n          pointer-events: none").concat(important, ";\n        }\n        img {\n          max-width: none !important;\n        }\n        #text-chat-button img {\n          width: 22px !important;\n          height: 22px !important;\n        }\n        #text-chat-button {\n          pointer-events: auto").concat(important, ";\n        }\n        #text-chat-panel {\n          pointer-events: auto").concat(important, ";\n        }\n        .ttp-mobile-fab {\n          pointer-events: auto").concat(important, ";\n        }\n        #ttpMobileLanding {\n          pointer-events: auto").concat(important, ";\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".concat(important, ";\n          font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif").concat(important, ";\n        }\n        \n        /* Theme often sets img { max-width: 100% } which squashes widget art.\n           Do NOT set width/height: auto on all #text-chat-panel img \u2014 that uses\n           !important and overrides ecommerce card images (.ttp-product-image img\n           needs width/height 100% + object-fit), which shows as empty/blank tiles. */\n        #text-chat-panel img {\n          max-width: none").concat(important, ";\n        }\n        \n        #text-chat-button img {\n          max-width: none").concat(important, ";\n          width: 22px !important;\n          height: 22px !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").concat(important, ";\n        }\n        \n        /* Reset any inherited text styles that might break layout */\n        #text-chat-panel {\n          text-align: left").concat(important, ";\n          line-height: normal").concat(important, ";\n          letter-spacing: normal").concat(important, ";\n          word-spacing: normal").concat(important, ";\n          text-transform: none").concat(important, ";\n          text-indent: 0").concat(important, ";\n          text-shadow: none").concat(important, ";\n          white-space: normal").concat(important, ";\n        }\n        \n        /* Flex layout for shell only \u2014 do NOT force display on .landing-screen /\n           .voice-interface / .text-interface: #text-chat-panel + class beats\n           component rules and keeps all three visible (breaks Shopify / useShadowDOM: false). */\n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .widget-header,\n        #text-chat-panel .mode-selection {\n          display: flex").concat(important, ";\n        }\n        \n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container {\n          flex-direction: column").concat(important, ";\n        }\n        \n        #text-chat-panel .mode-selection {\n          flex-direction: row").concat(important, ";\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".concat(important, ";\n          font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif").concat(important, ";\n        }\n        \n        /* Theme often sets img { max-width: 100% } which squashes widget art.\n           Do NOT set width/height: auto on all #text-chat-panel img \u2014 that uses\n           !important and overrides ecommerce card images (.ttp-product-image img\n           needs width/height 100% + object-fit), which shows as empty/blank tiles. */\n        #text-chat-panel img {\n          max-width: none").concat(important, ";\n        }\n        \n        #text-chat-button img {\n          max-width: none").concat(important, ";\n          width: 22px !important;\n          height: 22px !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").concat(important, ";\n        }\n        \n        /* Reset any inherited text styles that might break layout */\n        #text-chat-panel {\n          text-align: left").concat(important, ";\n          line-height: normal").concat(important, ";\n          letter-spacing: normal").concat(important, ";\n          word-spacing: normal").concat(important, ";\n          text-transform: none").concat(important, ";\n          text-indent: 0").concat(important, ";\n          text-shadow: none").concat(important, ";\n          white-space: normal").concat(important, ";\n        }\n        \n        /* Flex layout for shell only \u2014 do NOT force display on .voice-interface /\n           .text-interface: #text-chat-panel + class beats component rules and keeps\n           both visible (breaks Shopify / useShadowDOM: false). */\n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container,\n        #text-chat-panel .widget-header {\n          display: flex").concat(important, ";\n        }\n        \n        #text-chat-panel .widget-shell,\n        #text-chat-panel .panel-inner,\n        #text-chat-panel .widget-container {\n          flex-direction: column").concat(important, ";\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) {
@@ -29543,12 +29783,12 @@ var TTPChatWidget = /*#__PURE__*/function () {
       }
       this.setupWidgetEvents();
 
-      // On desktop, default to voice view (skip landing screen)
-      if (window.innerWidth > 768 && this.currentView === 'landing') {
+      // On desktop, ensure voice hero is shown for unified/voice-only (in-panel mode picker removed)
+      if (window.innerWidth > 768) {
         var _this$config$behavior3;
         var widgetMode = ((_this$config$behavior3 = this.config.behavior) === null || _this$config$behavior3 === void 0 ? void 0 : _this$config$behavior3.mode) || 'unified';
-        var showVoice = widgetMode === 'unified' || widgetMode === 'voice-only';
-        if (showVoice) {
+        var preferVoice = widgetMode === 'unified' || widgetMode === 'voice-only';
+        if (preferVoice && this.currentView !== 'text') {
           this.showVoice();
         }
       }
@@ -29644,8 +29884,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
     key: "generateWidgetHTML",
     value: function generateWidgetHTML() {
       var _this$config$behavior4,
-        _this6 = this,
-        _this$config$icon2;
+        _this6 = this;
       var pos = this.config.position;
       var btn = this.config.button;
       var icon = this.config.icon;
@@ -29673,11 +29912,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
       // Generate position styles
       var positionStyles = this.generatePositionStyles();
-
-      // Generate icon HTML
-      var iconHTML = this.generateIconHTML(iconSize);
       var widgetMode = ((_this$config$behavior4 = this.config.behavior) === null || _this$config$behavior4 === void 0 ? void 0 : _this$config$behavior4.mode) || 'unified';
-      var showLanding = widgetMode === 'unified';
       var showVoice = widgetMode === 'unified' || widgetMode === 'voice-only';
       var showText = widgetMode === 'unified' || widgetMode === 'text-only';
       var voiceEnabled = showVoice;
@@ -29721,7 +29956,15 @@ 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        <!-- Desktop pill launcher (hidden on mobile) -->\n        <button type=\"button\" id=\"text-chat-button\" aria-label=\"Open chat with ").concat(header.title || 'Assistant', "\">\n          <div class=\"ttp-pill-icon\">\n            <img class=\"ttp-launcher-logo\" src=\"").concat(((_this$config$icon2 = this.config.icon) === null || _this$config$icon2 === void 0 ? void 0 : _this$config$icon2.customImage) || 'https://talktopc.com/logo192.png', "\" alt=\"\" />\n          </div>\n          <div class=\"ttp-pill-text\">\n            <span class=\"ttp-pill-title\">").concat(header.title || 'Assistant', "</span>\n            <span class=\"ttp-pill-status\">\n              <span class=\"ttp-launcher-dot\"></span>\n              ").concat(header.onlineIndicatorText !== undefined && header.onlineIndicatorText !== null ? header.onlineIndicatorText : t('online'), "\n            </span>\n          </div>\n        </button>\n        <!-- Mobile FAB (hidden on desktop) -->\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\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    ");
+      var pillTitle = header.pillTitle != null && String(header.pillTitle).trim() !== '' ? String(header.pillTitle).trim() : header.title || 'Assistant';
+      /* Mobile FAB: optional header.mobileLabel; otherwise same main line as desktop pill (pillTitle). Not header.mobileLabel default 'Chat' — that hid pillTitle. */
+      var mobileFabLabel = header.mobileLabel != null && String(header.mobileLabel).trim() !== '' ? String(header.mobileLabel).trim() : pillTitle;
+      var mobileLandingHeroName = this.config.agentName != null && String(this.config.agentName).trim() !== '' ? String(this.config.agentName).trim() : header.title || 'Chat Assistant';
+      var pillCustomImage = icon.customImage != null && String(icon.customImage).trim() !== '' ? String(icon.customImage).trim() : null;
+      var pillWaveformBars = '<span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span><span class="bar"></span>';
+      var pillIconInner = pillCustomImage ? "<img class=\"ttp-launcher-logo\" src=\"".concat(pillCustomImage, "\" alt=\"\" />") : "<div class=\"ttp-pill-waveform\" aria-hidden=\"true\">".concat(pillWaveformBars, "</div>");
+      var pillIconWrapClass = pillCustomImage ? 'ttp-pill-icon' : 'ttp-pill-icon ttp-pill-icon--wave';
+      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        <!-- Desktop pill launcher (hidden on mobile) -->\n        <button type=\"button\" id=\"text-chat-button\" aria-label=\"Open chat with ").concat(pillTitle, "\">\n          <div class=\"").concat(pillIconWrapClass, "\">\n            ").concat(pillIconInner, "\n          </div>\n          <div class=\"ttp-pill-text\">\n            <span class=\"ttp-pill-title\">").concat(pillTitle, "</span>\n            <span class=\"ttp-pill-status\">\n              <span class=\"ttp-launcher-dot\"></span>\n              ").concat(header.onlineIndicatorText !== undefined && header.onlineIndicatorText !== null ? header.onlineIndicatorText : t('online'), "\n            </span>\n          </div>\n        </button>\n        <!-- Mobile FAB (hidden on desktop) -->\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(mobileFabLabel, "</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(mobileLandingHeroName, "</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\n          ").concat(showVoice ? this.voiceInterface.generateHTML() : '', "\n          ").concat(showText ? this.textInterface.generateHTML() : '', "\n          ").concat(this.generateFooterHTML(), "\n          </div>\n        </div>\n      </div>\n    ");
     }
 
     /**
@@ -29771,7 +30014,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var icon = this.config.icon;
       switch (icon.type) {
         case 'custom':
-          return "<img src=\"".concat(icon.customImage, "\" alt=\"Chat Assistant\" style=\"width: ").concat(size, "px; height: ").concat(size, "px; object-fit: contain;\" />");
+          if (icon.customImage != null && String(icon.customImage).trim() !== '') {
+            return "<img src=\"".concat(icon.customImage, "\" alt=\"Chat Assistant\" style=\"width: ").concat(size, "px; height: ").concat(size, "px; object-fit: contain;\" />");
+          }
+          return "<div class=\"ttp-pill-waveform\" aria-hidden=\"true\"><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span><span class=\"bar\"></span></div>";
         case 'emoji':
           return "<span style=\"font-size: ".concat(size, "px; line-height: 1;\">").concat(icon.emoji, "</span>");
         case 'text':
@@ -29837,7 +30083,6 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
       // Determine which interfaces to show
       var widgetMode = ((_this$config$behavior5 = this.config.behavior) === null || _this$config$behavior5 === void 0 ? void 0 : _this$config$behavior5.mode) || 'unified';
-      var showLanding = widgetMode === 'unified';
       var showVoice = widgetMode === 'unified' || widgetMode === 'voice-only';
       var showText = widgetMode === 'unified' || widgetMode === 'text-only';
 
@@ -29852,20 +30097,18 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
       // Detect light vs dark panel background for adaptive footer
       var panelBg = panel.backgroundColor || '#16161e';
-      var isLightPanel = function () {
-        if (!panelBg || panelBg.charAt(0) !== '#') return false;
-        var r = parseInt(panelBg.substr(1, 2), 16);
-        var g = parseInt(panelBg.substr(3, 2), 16);
-        var b = parseInt(panelBg.substr(5, 2), 16);
-        return (r * 299 + g * 587 + b * 114) / 1000 > 160;
-      }();
+      var isLightPanel = computeIsLightPanel(panelBg);
       var footerTextColor = isLightPanel ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.35)';
-      var footerLinkColor = isLightPanel ? voice.primaryBtnGradient1 || '#7C3AED' : '#a78bfa';
+      var footerLinkColor = talkToPcLinkColorForPanel(isLightPanel, voice, this._rawConfig, showVoice);
       var footerBorderColor = isLightPanel ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.06)';
       var idleHeroGrad1 = voice.heroGradient1 || '#2a2550';
       var idleHeroGrad2 = voice.heroGradient2 || '#1a1a2e';
+      var callSurfaceGradient = "linear-gradient(160deg, ".concat(idleHeroGrad1, " 0%, ").concat(idleHeroGrad2, " 100%)");
+      /** In-call panel/footer: same gradient as idle so active call matches landing (hero1 → hero2) */
+      var callActivePanelBg = callSurfaceGradient;
       var voiceIdleVisibleSelector = '#voiceInterface.active #voiceIdleState:not([style*="display: none"]):not([style*="display:none"])';
-      return "\n      /* Inline style display overrides - ensures JS show/hide works with !important CSS */\n      #text-chat-panel [style*=\"display: none\"],\n      #text-chat-panel [style*=\"display:none\"],\n      #text-chat-button-container [style*=\"display: none\"],\n      #text-chat-button-container [style*=\"display:none\"],\n      #ttpMobileLanding[style*=\"display: none\"],\n      #ttpMobileLanding[style*=\"display:none\"] {\n        display: none !important;\n      }\n      #text-chat-panel [style*=\"display: flex\"],\n      #text-chat-panel [style*=\"display:flex\"],\n      #text-chat-button-container [style*=\"display: flex\"],\n      #text-chat-button-container [style*=\"display:flex\"] {\n        display: flex !important;\n      }\n      #text-chat-panel [style*=\"display: block\"],\n      #text-chat-panel [style*=\"display:block\"] {\n        display: block !important;\n      }\n\n      /* MOBILE FIRST - Default styles for all devices */\n      #text-chat-widget {\n        position: fixed !important;\n        z-index: 10000".concat(important, ";\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif").concat(important, ";\n        /* Mobile defaults */\n        right: 10px").concat(important, ";\n        bottom: 10px").concat(important, ";\n        left: auto").concat(important, ";\n        top: auto").concat(important, ";\n      }\n      \n      /* Desktop positioning (only on larger screens) */\n      @media (min-width: 769px) {\n        #text-chat-widget {\n          ").concat(positionStyles, "\n          right: ").concat(this.config.position.horizontal === 'right' ? '20px' : 'auto').concat(important, ";\n          left: ").concat(this.config.position.horizontal === 'left' ? '20px' : 'auto').concat(important, ";\n          bottom: ").concat(this.config.position.vertical === 'bottom' ? '20px' : 'auto').concat(important, ";\n          top: ").concat(this.config.position.vertical === 'top' ? '20px' : 'auto').concat(important, ";\n        }\n      }\n      \n      /* Mobile override (force mobile positioning) */\n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* \u2500\u2500 Desktop Pill Launcher \u2500\u2500 */\n      #text-chat-button {\n        position: relative").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 10px").concat(important, ";\n        padding: 7px 16px 7px 7px").concat(important, ";\n        z-index: 1").concat(important, ";\n        background: ").concat(pillGradient, ";\n        border: 1px solid rgba(139,92,246,0.15)").concat(important, ";\n        border-radius: 999px").concat(important, ";\n        box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15)").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: box-shadow 0.25s, transform 0.2s, padding 0.3s, gap 0.3s").concat(important, ";\n        font-family: inherit").concat(important, ";\n        color: ").concat(pillTextColor, ";\n        overflow: hidden").concat(important, ";\n      }\n      #text-chat-button:hover {\n        transform: translateY(-1px)").concat(important, ";\n        box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2)").concat(important, ";\n      }\n      #text-chat-button.open {\n        gap: 0px").concat(important, ";\n        padding: 7px").concat(important, ";\n      }\n\n      .ttp-pill-icon {\n        width: 36px").concat(important, "; height: 36px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: #ffffff").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .ttp-launcher-logo {\n        width: 22px").concat(important, "; height: 22px").concat(important, "; border-radius: 50%").concat(important, ";\n        object-fit: cover").concat(important, ";\n      }\n\n      .ttp-pill-text {\n        display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 1px").concat(important, ";\n        max-width: 120px").concat(important, ";\n        opacity: 1").concat(important, ";\n        overflow: hidden").concat(important, ";\n        white-space: nowrap").concat(important, ";\n        transition: max-width 0.3s, opacity 0.2s").concat(important, ";\n      }\n      #text-chat-button.open .ttp-pill-text {\n        max-width: 0").concat(important, ";\n        opacity: 0").concat(important, ";\n      }\n      .ttp-pill-title {\n        font-size: 13px").concat(important, "; font-weight: 600").concat(important, "; color: ").concat(pillTextColor, ";\n        line-height: 1.2").concat(important, ";\n      }\n      .ttp-pill-status {\n        display: flex").concat(important, "; align-items: center").concat(important, "; gap: 5px").concat(important, ";\n        font-size: 11px").concat(important, "; color: ").concat(pillTextColor, "8c;\n        line-height: 1.2").concat(important, ";\n      }\n\n      /* Online dot (inside pill status) */\n      .ttp-launcher-dot {\n        width: 7px").concat(important, "; height: 7px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: ").concat(pillDotColor, ";\n        flex-shrink: 0").concat(important, ";\n        animation: ttp-dot-pulse 2s ease-in-out infinite").concat(important, ";\n      }\n      @keyframes ttp-dot-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }\n      \n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n        \n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n        }\n        \n        #text-chat-panel {\n          position: fixed !important;\n          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").concat(important, ";\n          min-height: 56px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 15px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-icon {\n          width: 40px").concat(important, ";\n          height: 40px").concat(important, ";\n          min-width: 40px").concat(important, ";\n          min-height: 40px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 12px 16px !important;\n          min-height: 48px !important;\n        }\n        \n        #text-chat-send {\n          min-width: 48px !important;\n          min-height: 48px !important;\n          width: 48px !important;\n          height: 48px !important;\n        }\n        \n        .landing-screen {\n          padding: 16px").concat(important, ";\n        }\n        \n        .landing-logo {\n          font-size: 40px").concat(important, ";\n        }\n        \n        .landing-title {\n          font-size: 18px").concat(important, ";\n          margin-bottom: 16px").concat(important, ";\n        }\n        \n        .mode-selection {\n          flex-direction: column").concat(important, ";\n          gap: 12px").concat(important, ";\n          align-items: center").concat(important, ";\n        }\n        \n        .mode-card {\n          max-width: 100%").concat(important, ";\n          width: 100%").concat(important, ";\n          padding: 16px").concat(important, ";\n        }\n        \n        .mode-card-icon {\n          width: 50px").concat(important, ";\n          height: 50px").concat(important, ";\n          font-size: 28px").concat(important, ";\n        }\n        \n        .mode-card-title {\n          font-size: 14px").concat(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        #text-chat-button-container {\n          width: auto !important;\n          height: auto !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").concat(important, ";\n          min-height: 52px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 14px").concat(important, ";\n        }\n        \n        .landing-logo {\n          font-size: 36px").concat(important, ";\n        }\n        \n        .landing-title {\n          font-size: 16px").concat(important, ";\n        }\n      }\n      \n      ").concat(anim.enableHover ? "\n        #text-chat-button:hover {\n          transform: translateY(-1px);\n        }\n      " : '', "\n      \n      /* Prompt Animation Keyframes */\n      @keyframes widget-shimmer {\n        0% { transform: translateX(-100%); }\n        100% { transform: translateX(200%); }\n      }\n      \n      @keyframes widget-ripple {\n        0% { transform: scale(1); opacity: 0.6; }\n        100% { transform: scale(2.5); opacity: 0; }\n      }\n      \n      @keyframes widget-float {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-8px); }\n      }\n      \n      @keyframes widget-bounce {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-10px); }\n      }\n      \n      @keyframes widget-pulse-ring {\n        0% { transform: scale(1); opacity: 0.4; }\n        100% { transform: scale(1.8); opacity: 0; }\n      }\n      \n      /* Prompt Bubble Container */\n      #text-chat-button-container {\n        position: fixed").concat(important, ";\n        ").concat(this.config.position.vertical === 'bottom' ? "bottom: ".concat(((_this$config$position = this.config.position.offset) === null || _this$config$position === void 0 ? void 0 : _this$config$position.y) || 20, "px;") : "top: ".concat(((_this$config$position2 = this.config.position.offset) === null || _this$config$position2 === void 0 ? void 0 : _this$config$position2.y) || 20, "px;"), "\n        ").concat(this.config.position.horizontal === 'right' ? "right: ".concat(((_this$config$position3 = this.config.position.offset) === null || _this$config$position3 === void 0 ? void 0 : _this$config$position3.x) || 20, "px;") : "left: ".concat(((_this$config$position4 = this.config.position.offset) === null || _this$config$position4 === void 0 ? void 0 : _this$config$position4.x) || 20, "px;"), "\n        width: auto").concat(important, ";\n        height: auto").concat(important, ";\n        z-index: 10001").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n      }\n      \n      @media (max-width: 768px) {\n        #text-chat-button-container {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-button-container {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* Prompt Bubble Styles */\n      .prompt-bubble {\n        position: absolute").concat(important, ";\n        z-index: 10002").concat(important, ";\n        pointer-events: none").concat(important, ";\n        white-space: nowrap").concat(important, ";\n      }\n      \n      .prompt-bubble.top {\n        bottom: calc(100% + 18px)").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translateX(-50%)").concat(important, ";\n      }\n      \n      .prompt-bubble.left {\n        right: calc(100% + 12px)").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n      }\n      \n      .prompt-bubble.right {\n        left: calc(100% + 12px)").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n      }\n      \n      /* Ensure animations preserve horizontal centering for top position */\n      .prompt-bubble.top.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-float {\n        animation: widget-float 2s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-pulse {\n        animation: pulse 2s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble-content {\n        position: relative").concat(important, ";\n        padding: 8px 16px").concat(important, ";\n        border-radius: 20px").concat(important, ";\n        font-weight: 500").concat(important, ";\n        font-size: 14px").concat(important, ";\n        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3)").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      \n      .prompt-bubble-shimmer {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent)").concat(important, ";\n        animation: widget-shimmer 2s infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-pulse {\n        animation: pulse 2s ease-in-out infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-float {\n        animation: widget-float 2s ease-in-out infinite").concat(important, ";\n      }\n      \n      /* Ensure top-positioned bubbles maintain horizontal centering during animations */\n      .prompt-bubble.top.animation-bounce,\n      .prompt-bubble.top.animation-float,\n      .prompt-bubble.top.animation-pulse {\n        /* Animation keyframes already include translateX(-50%) for centering */\n      }\n      \n      /* Prompt Bubble Arrow */\n      .prompt-bubble-arrow {\n        position: absolute").concat(important, ";\n        width: 0").concat(important, ";\n        height: 0").concat(important, ";\n        border: 8px solid transparent").concat(important, ";\n      }\n      \n      .prompt-bubble.top .prompt-bubble-arrow {\n        top: 100%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translateX(-50%)").concat(important, ";\n        border-top-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-bottom: none").concat(important, ";\n        margin-left: 0").concat(important, ";\n      }\n      \n      .prompt-bubble.left .prompt-bubble-arrow {\n        left: 100%").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        border-left-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-right: none").concat(important, ";\n      }\n      \n      .prompt-bubble.right .prompt-bubble-arrow {\n        right: 100%").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        border-right-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-left: none").concat(important, ";\n      }\n      \n      /* Pulse Rings */\n      .prompt-pulse-rings {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        pointer-events: none").concat(important, ";\n      }\n      \n      .prompt-pulse-ring {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: widget-pulse-ring 2s ease-out infinite").concat(important, ";\n      }\n      \n      .prompt-pulse-ring:nth-child(2) {\n        animation-delay: 0.5s").concat(important, ";\n      }\n      \n      /* Mobile adjustments for prompt bubble */\n      @media (max-width: 768px) {\n        .prompt-bubble-content {\n          font-size: 12px").concat(important, ";\n          padding: 6px 12px").concat(important, ";\n        }\n        \n        .prompt-bubble.top {\n          bottom: calc(100% + 14px)").concat(important, ";\n        }\n        \n        .prompt-bubble.left,\n        .prompt-bubble.right {\n          display: none").concat(important, "; /* Hide side prompts on mobile */\n        }\n      }\n      \n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed").concat(important, ";\n        bottom: calc(54px + 24px)").concat(important, "; /* launcher pill + gap */\n        ").concat(this.config.position.horizontal === 'right' ? 'right: 20px;' : 'left: 20px;', "\n        width: 340px").concat(important, ";\n        max-width: calc(100vw - 40px)").concat(important, ";\n        height: auto").concat(important, ";\n        max-height: calc(100vh - 100px)").concat(important, ";\n        background: ").concat(panelBg, ";\n        border-radius: 20px").concat(important, ";\n        border: ").concat(panel.border || '1px solid rgba(255,255,255,0.08)', ";\n        flex-direction: column").concat(important, ";\n        overflow: hidden").concat(important, ";\n        box-shadow: 0 24px 60px rgba(0,0,0,0.6)").concat(important, ";\n        transform-origin: bottom right").concat(important, ";\n        opacity: 0").concat(important, ";\n        pointer-events: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      \n      #text-chat-panel.open {\n        display: flex").concat(important, ";\n        opacity: 1").concat(important, ";\n        pointer-events: auto").concat(important, ";\n      }\n\n      /* Shell for panel inner */\n      .widget-shell { width: 100%").concat(important, "; padding: 0").concat(important, "; border-radius: 20px").concat(important, "; background: transparent").concat(important, "; overflow: hidden").concat(important, "; display: flex").concat(important, "; flex-direction: column").concat(important, "; box-sizing: border-box").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, "; }\n      .panel-inner { width: 100%").concat(important, "; background: ").concat(panelBg, "; border-radius: 20px").concat(important, "; border: none").concat(important, "; overflow: hidden").concat(important, "; display:flex").concat(important, "; flex-direction: column").concat(important, "; padding: 0").concat(important, "; box-sizing: border-box").concat(important, "; max-width: 100%").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, "; }\n\n      #text-chat-panel .widget-container {\n        width: 100%").concat(important, "; background: ").concat(panelBg, "; overflow: visible").concat(important, "; display: flex").concat(important, "; flex-direction: column").concat(important, "; border-radius: 20px").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, ";\n      }\n\n      /* Voice idle: one gradient for voice UI + footer (Powered by), not a flat strip under buttons */\n      #text-chat-panel.open:has(").concat(voiceIdleVisibleSelector, ") {\n        background: linear-gradient(160deg, ").concat(idleHeroGrad1, " 0%, ").concat(idleHeroGrad2, " 100%)").concat(important, ";\n      }\n      #text-chat-panel .widget-container:has(").concat(voiceIdleVisibleSelector, ") {\n        background: linear-gradient(160deg, ").concat(idleHeroGrad1, " 0%, ").concat(idleHeroGrad2, " 100%)").concat(important, ";\n      }\n      \n      /* 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").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        overflow-x: visible").concat(important, "; /* Change from hidden to visible */\n      }\n      \n      /* Header is removed in new design - hero serves as header */\n      #text-chat-panel .widget-header { display: none").concat(important, "; }\n\n      ").concat(showLanding && this.landingScreen ? this.landingScreen.generateCSS() : '', "\n\n      ").concat(showVoice ? this.voiceInterface.generateCSS() : '', "\n      ").concat(showText ? this.textInterface.generateCSS() : '', "\n      \n      /* Footer Branding */\n      .ttp-footer {\n        padding: 6px 18px 10px").concat(important, ";\n        border-top: 1px solid ").concat(footerBorderColor, ";\n        display: flex").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n        background: transparent").concat(important, ";\n      }\n      .ttp-footer span { font-size: 10px").concat(important, "; color: ").concat(footerTextColor, "; }\n      .ttp-footer a { color: ").concat(footerLinkColor, "; text-decoration: none").concat(important, "; font-weight: 600").concat(important, "; }\n      .ttp-footer a:hover { opacity: 0.85").concat(important, "; }\n      .ttp-footer a b { font-weight: 700").concat(important, "; }\n      \n      #text-chat-send-hint {\n        text-align: center").concat(important, ";\n        line-height: 1.4").concat(important, ";\n      }\n      \n      .agent-thinking {\n        font-style: italic").concat(important, ";\n        color: #6B7280").concat(important, ";\n      }\n\n      /* ========================================\n         MOBILE PILL BUTTON & LANDING OVERLAY\n         Hidden on desktop, shown on mobile only\n         ======================================== */\n      .ttp-mobile-fab {\n        display: none").concat(important, ";\n      }\n\n      .ttp-mobile-landing {\n        display: none").concat(important, ";\n      }\n\n      @keyframes ttpWaveAnimation {\n        0%, 100% { transform: scaleY(0.4); }\n        50% { transform: scaleY(1); }\n      }\n\n      @keyframes ttpPulseAnimation {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.5; }\n      }\n\n      @media (max-width: 768px) {\n        /* Hide desktop pill button on mobile */\n        #text-chat-button {\n          display: none !important;\n        }\n\n        /* Re-flow the container for pill shape */\n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n          min-width: 0 !important;\n          min-height: 0 !important;\n          max-width: none !important;\n          max-height: none !important;\n        }\n\n        /* Show mobile pill button */\n        .ttp-mobile-fab {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 10px").concat(important, ";\n          padding: 10px 16px 10px 12px").concat(important, ";\n          background: ").concat(pillGradient, ";\n          border: none").concat(important, ";\n          border-radius: 24px").concat(important, ";\n          cursor: pointer").concat(important, ";\n          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)").concat(important, ";\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)").concat(important, ";\n          z-index: 1").concat(important, ";\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif").concat(important, ";\n          touch-action: manipulation").concat(important, ";\n          -webkit-tap-highlight-color: transparent").concat(important, ";\n        }\n\n        .ttp-mobile-fab:hover {\n          transform: translateY(-3px)").concat(important, ";\n          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4)").concat(important, ";\n        }\n\n        .ttp-mobile-fab__icon-wrap {\n          width: 36px").concat(important, ";\n          height: 36px").concat(important, ";\n          border-radius: 50%").concat(important, ";\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 2px").concat(important, ";\n          height: 16px").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform .bar {\n          width: 2px").concat(important, ";\n          background: #fff").concat(important, ";\n          border-radius: 1px").concat(important, ";\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform .bar:nth-child(1) { height: 5px").concat(important, "; animation-delay: 0s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(2) { height: 10px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(3) { height: 16px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(4) { height: 8px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(5) { height: 12px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n        .ttp-mobile-fab__label-wrap {\n          display: flex").concat(important, ";\n          flex-direction: column").concat(important, ";\n          align-items: flex-start").concat(important, ";\n          gap: 1px").concat(important, ";\n        }\n\n        .ttp-mobile-fab__label {\n          color: ").concat(pillTextColor, ";\n          font-size: 14px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          line-height: 1.2").concat(important, ";\n        }\n\n        .ttp-mobile-fab__status {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 4px").concat(important, ";\n          font-size: 11px").concat(important, ";\n          color: ").concat(pillTextColor, "b3;\n          line-height: 1.2").concat(important, ";\n        }\n\n        .ttp-mobile-fab__dot {\n          width: 6px").concat(important, ";\n          height: 6px").concat(important, ";\n          background: ").concat(pillDotColor, ";\n          border-radius: 50%").concat(important, ";\n          box-shadow: 0 0 6px ").concat(pillDotColor, "99;\n        }\n\n        /* ---- Mobile Landing Overlay ---- */\n        .ttp-mobile-landing.active {\n          display: block").concat(important, ";\n          position: fixed").concat(important, ";\n          bottom: 16px").concat(important, ";\n          left: 12px").concat(important, ";\n          right: 12px").concat(important, ";\n          background: ").concat(pillGradient, ";\n          border-radius: 20px").concat(important, ";\n          overflow: hidden").concat(important, ";\n          box-shadow:\n            0 10px 40px rgba(0, 0, 0, 0.3),\n            0 0 0 1px rgba(255, 255, 255, 0.1) inset").concat(important, ";\n          z-index: 10002").concat(important, ";\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif").concat(important, ";\n        }\n\n        .ttp-mobile-landing::before {\n          content: ''").concat(important, ";\n          position: absolute").concat(important, ";\n          top: 0").concat(important, ";\n          left: 0").concat(important, ";\n          right: 0").concat(important, ";\n          height: 1px").concat(important, ";\n          background: linear-gradient(90deg,\n            transparent 0%,\n            rgba(255, 255, 255, 0.3) 50%,\n            transparent 100%);\n        }\n\n        .ttp-mobile-landing__header {\n          padding: 14px 16px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 12px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__avatar {\n          width: 44px").concat(important, ";\n          height: 44px").concat(important, ";\n          border-radius: 12px").concat(important, ";\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 3px").concat(important, ";\n          height: 20px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform .bar {\n          width: 3px").concat(important, ";\n          background: rgba(255, 255, 255, 0.9)").concat(important, ";\n          border-radius: 2px").concat(important, ";\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform .bar:nth-child(1) { height: 6px").concat(important, "; animation-delay: 0s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(2) { height: 12px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(3) { height: 20px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(4) { height: 10px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(5) { height: 16px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n        .ttp-mobile-landing__info {\n          flex: 1").concat(important, ";\n          min-width: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__name {\n          color: #fff").concat(important, ";\n          font-size: 15px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          margin-bottom: 2px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__status {\n          color: rgba(255, 255, 255, 0.7)").concat(important, ";\n          font-size: 12px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 5px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__dot {\n          width: 6px").concat(important, ";\n          height: 6px").concat(important, ";\n          background: ").concat(header.onlineIndicatorDotColor || '#10b981', ";\n          border-radius: 50%").concat(important, ";\n          animation: ttpPulseAnimation 2s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-landing__close {\n          width: 32px").concat(important, ";\n          height: 32px").concat(important, ";\n          border-radius: 10px").concat(important, ";\n          background: rgba(255, 255, 255, 0.1)").concat(important, ";\n          border: none").concat(important, ";\n          color: rgba(255, 255, 255, 0.7)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          cursor: pointer").concat(important, ";\n          transition: all 0.2s").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__close:hover {\n          background: rgba(255, 255, 255, 0.2)").concat(important, ";\n          color: #fff").concat(important, ";\n        }\n\n        .ttp-mobile-landing__error {\n          margin: 0 14px 10px").concat(important, ";\n          padding: 10px 12px").concat(important, ";\n          background: #fef2f2").concat(important, ";\n          border: 1px solid #fecaca").concat(important, ";\n          border-radius: 10px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: flex-start").concat(important, ";\n          gap: 8px").concat(important, ";\n          color: #b91c1c").concat(important, ";\n          font-size: 13px").concat(important, ";\n          line-height: 1.4").concat(important, ";\n        }\n        .ttp-mobile-landing__error svg {\n          flex-shrink: 0").concat(important, ";\n          margin-top: 1px").concat(important, ";\n          stroke: #dc2626").concat(important, ";\n        }\n\n        .ttp-mobile-landing__actions {\n          padding: 0 14px 14px").concat(important, ";\n          display: flex").concat(important, ";\n          gap: 10px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn {\n          flex: 1").concat(important, ";\n          padding: 14px").concat(important, ";\n          border-radius: 12px").concat(important, ";\n          border: none").concat(important, ";\n          cursor: pointer").concat(important, ";\n          font-family: inherit").concat(important, ";\n          font-size: 14px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          gap: 10px").concat(important, ";\n          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)").concat(important, ";\n          touch-action: manipulation").concat(important, ";\n          -webkit-tap-highlight-color: transparent").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn svg {\n          width: 20px").concat(important, ";\n          height: 20px").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--call {\n          background: #fff").concat(important, ";\n          color: ").concat(header.backgroundColor || '#7C3AED', ";\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--call:hover {\n          transform: translateY(-2px)").concat(important, ";\n          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--text {\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          color: #fff").concat(important, ";\n          border: 1px solid rgba(255, 255, 255, 0.1)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--text:hover {\n          background: rgba(255, 255, 255, 0.2)").concat(important, ";\n          border-color: rgba(255, 255, 255, 0.2)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__footer {\n          padding: 10px 16px").concat(important, ";\n          display: flex").concat(important, ";\n          justify-content: center").concat(important, ";\n          border-top: 1px solid rgba(255, 255, 255, 0.08)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered {\n          color: rgba(255, 255, 255, 0.4)").concat(important, ";\n          font-size: 11px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 4px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered svg {\n          width: 10px").concat(important, ";\n          height: 10px").concat(important, ";\n          color: #f59e0b").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered a {\n          color: rgba(255, 255, 255, 0.6)").concat(important, ";\n          text-decoration: none").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered a:hover {\n          color: #fff").concat(important, ";\n        }\n      }\n    ");
+      var voiceActiveVisibleSelector = '#voiceInterface.active #voiceActiveState:not([style*="display: none"]):not([style*="display:none"])';
+      return "\n      /* Inline style display overrides - ensures JS show/hide works with !important CSS */\n      #text-chat-panel [style*=\"display: none\"],\n      #text-chat-panel [style*=\"display:none\"],\n      #text-chat-button-container [style*=\"display: none\"],\n      #text-chat-button-container [style*=\"display:none\"],\n      #ttpMobileLanding[style*=\"display: none\"],\n      #ttpMobileLanding[style*=\"display:none\"] {\n        display: none !important;\n      }\n      #text-chat-panel [style*=\"display: flex\"],\n      #text-chat-panel [style*=\"display:flex\"],\n      #text-chat-button-container [style*=\"display: flex\"],\n      #text-chat-button-container [style*=\"display:flex\"] {\n        display: flex !important;\n      }\n      #text-chat-panel [style*=\"display: block\"],\n      #text-chat-panel [style*=\"display:block\"] {\n        display: block !important;\n      }\n\n      /* MOBILE FIRST - Default styles for all devices */\n      #text-chat-widget {\n        position: fixed !important;\n        z-index: 10000".concat(important, ";\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif").concat(important, ";\n        /* Mobile defaults */\n        right: 10px").concat(important, ";\n        bottom: 10px").concat(important, ";\n        left: auto").concat(important, ";\n        top: auto").concat(important, ";\n      }\n      \n      /* Desktop positioning (only on larger screens) */\n      @media (min-width: 769px) {\n        #text-chat-widget {\n          ").concat(positionStyles, "\n          right: ").concat(this.config.position.horizontal === 'right' ? '20px' : 'auto').concat(important, ";\n          left: ").concat(this.config.position.horizontal === 'left' ? '20px' : 'auto').concat(important, ";\n          bottom: ").concat(this.config.position.vertical === 'bottom' ? '20px' : 'auto').concat(important, ";\n          top: ").concat(this.config.position.vertical === 'top' ? '20px' : 'auto').concat(important, ";\n        }\n      }\n      \n      /* Mobile override (force mobile positioning) */\n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* \u2500\u2500 Desktop Pill Launcher \u2500\u2500 */\n      #text-chat-button {\n        position: relative").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 8px").concat(important, ";\n        padding-block: 10px").concat(important, ";\n        padding-inline-start: 6px").concat(important, ";\n        padding-inline-end: 12px").concat(important, ";\n        z-index: 1").concat(important, ";\n        background: ").concat(pillGradient, ";\n        border: 1px solid rgba(139,92,246,0.15)").concat(important, ";\n        border-radius: 999px").concat(important, ";\n        box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15)").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: box-shadow 0.25s, transform 0.2s, padding 0.3s, gap 0.3s").concat(important, ";\n        font-family: inherit").concat(important, ";\n        color: ").concat(pillTextColor, ";\n        overflow: hidden").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      #text-chat-button:hover {\n        transform: translateY(-1px)").concat(important, ";\n        box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2)").concat(important, ";\n      }\n      #text-chat-button.open {\n        gap: 0px").concat(important, ";\n        padding: 9px").concat(important, ";\n        width: auto").concat(important, ";\n        min-width: 0").concat(important, ";\n        max-width: none").concat(important, ";\n      }\n\n      @media (min-width: 769px) {\n        #text-chat-button {\n          width: 158px").concat(important, ";\n          min-width: 158px").concat(important, ";\n          max-width: 158px").concat(important, ";\n        }\n      }\n\n      .ttp-pill-icon {\n        width: 36px").concat(important, "; height: 36px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: #ffffff").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .ttp-launcher-logo {\n        width: 22px").concat(important, "; height: 22px").concat(important, "; border-radius: 50%").concat(important, ";\n        object-fit: cover").concat(important, ";\n      }\n\n      /* Default pill launcher: same animated waveform as mobile FAB / landing */\n      .ttp-pill-icon--wave {\n        background: rgba(255, 255, 255, 0.15)").concat(important, ";\n      }\n      .ttp-pill-waveform {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 2px").concat(important, ";\n        height: 16px").concat(important, ";\n      }\n      .ttp-pill-waveform .bar {\n        width: 2px").concat(important, ";\n        background: #fff").concat(important, ";\n        border-radius: 1px").concat(important, ";\n        animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n      }\n      .ttp-pill-waveform .bar:nth-child(1) { height: 5px").concat(important, "; animation-delay: 0s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(2) { height: 10px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(3) { height: 16px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(4) { height: 8px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n      .ttp-pill-waveform .bar:nth-child(5) { height: 12px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n      .ttp-pill-text {\n        display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 2px").concat(important, ";\n        max-width: 82px").concat(important, ";\n        opacity: 1").concat(important, ";\n        overflow: hidden").concat(important, ";\n        white-space: nowrap").concat(important, ";\n        transition: max-width 0.3s, opacity 0.2s").concat(important, ";\n      }\n      #text-chat-button.open .ttp-pill-text {\n        max-width: 0").concat(important, ";\n        opacity: 0").concat(important, ";\n      }\n      .ttp-pill-title {\n        font-size: 13px").concat(important, "; font-weight: 600").concat(important, "; color: ").concat(pillTextColor, ";\n        line-height: 1.25").concat(important, ";\n        overflow: hidden").concat(important, ";\n        text-overflow: ellipsis").concat(important, ";\n      }\n      .ttp-pill-status {\n        display: flex").concat(important, "; align-items: center").concat(important, "; gap: 4px").concat(important, ";\n        font-size: 11px").concat(important, "; color: ").concat(pillTextColor, "8c;\n        line-height: 1.25").concat(important, ";\n      }\n\n      /* Online dot (inside pill status) */\n      .ttp-launcher-dot {\n        width: 7px").concat(important, "; height: 7px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: ").concat(pillDotColor, ";\n        flex-shrink: 0").concat(important, ";\n        animation: ttp-dot-pulse 2s ease-in-out infinite").concat(important, ";\n      }\n      @keyframes ttp-dot-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }\n      \n      @media (max-width: 768px) {\n        #text-chat-widget {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n        \n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n        }\n        \n        #text-chat-panel {\n          position: fixed !important;\n          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").concat(important, ";\n          min-height: 56px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 15px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-icon {\n          width: 40px").concat(important, ";\n          height: 40px").concat(important, ";\n          min-width: 40px").concat(important, ";\n          min-height: 40px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 12px 16px !important;\n          min-height: 48px !important;\n        }\n        \n        #text-chat-send {\n          min-width: 48px !important;\n          min-height: 48px !important;\n          width: 48px !important;\n          height: 48px !important;\n        }\n        \n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-widget {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n        \n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n        }\n        \n        #text-chat-panel {\n          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").concat(important, ";\n          min-height: 52px").concat(important, ";\n        }\n        \n        #text-chat-panel .header-title {\n          font-size: 14px").concat(important, ";\n        }\n        \n      }\n      \n      ").concat(anim.enableHover ? "\n        #text-chat-button:hover {\n          transform: translateY(-1px);\n        }\n      " : '', "\n      \n      /* Prompt Animation Keyframes */\n      @keyframes widget-shimmer {\n        0% { transform: translateX(-100%); }\n        100% { transform: translateX(200%); }\n      }\n      \n      @keyframes widget-ripple {\n        0% { transform: scale(1); opacity: 0.6; }\n        100% { transform: scale(2.5); opacity: 0; }\n      }\n      \n      @keyframes widget-float {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-8px); }\n      }\n      \n      @keyframes widget-bounce {\n        0%, 100% { transform: translateX(-50%) translateY(0); }\n        50% { transform: translateX(-50%) translateY(-10px); }\n      }\n      \n      @keyframes widget-pulse-ring {\n        0% { transform: scale(1); opacity: 0.4; }\n        100% { transform: scale(1.8); opacity: 0; }\n      }\n      \n      /* Prompt Bubble Container */\n      #text-chat-button-container {\n        position: fixed").concat(important, ";\n        ").concat(this.config.position.vertical === 'bottom' ? "bottom: ".concat(((_this$config$position = this.config.position.offset) === null || _this$config$position === void 0 ? void 0 : _this$config$position.y) || 20, "px;") : "top: ".concat(((_this$config$position2 = this.config.position.offset) === null || _this$config$position2 === void 0 ? void 0 : _this$config$position2.y) || 20, "px;"), "\n        ").concat(this.config.position.horizontal === 'right' ? "right: ".concat(((_this$config$position3 = this.config.position.offset) === null || _this$config$position3 === void 0 ? void 0 : _this$config$position3.x) || 20, "px;") : "left: ".concat(((_this$config$position4 = this.config.position.offset) === null || _this$config$position4 === void 0 ? void 0 : _this$config$position4.x) || 20, "px;"), "\n        width: auto").concat(important, ";\n        height: auto").concat(important, ";\n        z-index: 10001").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n      }\n      \n      @media (max-width: 768px) {\n        #text-chat-button-container {\n          right: 10px !important;\n          bottom: 10px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #text-chat-button-container {\n          right: 8px !important;\n          bottom: 8px !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      }\n      \n      /* Prompt Bubble Styles */\n      .prompt-bubble {\n        position: absolute").concat(important, ";\n        z-index: 10002").concat(important, ";\n        pointer-events: none").concat(important, ";\n        white-space: nowrap").concat(important, ";\n      }\n      \n      .prompt-bubble.top {\n        bottom: calc(100% + 18px)").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translateX(-50%)").concat(important, ";\n      }\n      \n      .prompt-bubble.left {\n        right: calc(100% + 12px)").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n      }\n      \n      .prompt-bubble.right {\n        left: calc(100% + 12px)").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n      }\n      \n      /* Ensure animations preserve horizontal centering for top position */\n      .prompt-bubble.top.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-float {\n        animation: widget-float 2s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble.top.animation-pulse {\n        animation: pulse 2s ease-in-out infinite").concat(important, ";\n        transform: translateX(-50%)").concat(important, "; /* Keep centering */\n      }\n      \n      .prompt-bubble-content {\n        position: relative").concat(important, ";\n        padding: 8px 16px").concat(important, ";\n        border-radius: 20px").concat(important, ";\n        font-weight: 500").concat(important, ";\n        font-size: 14px").concat(important, ";\n        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3)").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      \n      .prompt-bubble-shimmer {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent)").concat(important, ";\n        animation: widget-shimmer 2s infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-bounce {\n        animation: widget-bounce 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-pulse {\n        animation: pulse 2s ease-in-out infinite").concat(important, ";\n      }\n      \n      .prompt-bubble.animation-float {\n        animation: widget-float 2s ease-in-out infinite").concat(important, ";\n      }\n      \n      /* Ensure top-positioned bubbles maintain horizontal centering during animations */\n      .prompt-bubble.top.animation-bounce,\n      .prompt-bubble.top.animation-float,\n      .prompt-bubble.top.animation-pulse {\n        /* Animation keyframes already include translateX(-50%) for centering */\n      }\n      \n      /* Prompt Bubble Arrow */\n      .prompt-bubble-arrow {\n        position: absolute").concat(important, ";\n        width: 0").concat(important, ";\n        height: 0").concat(important, ";\n        border: 8px solid transparent").concat(important, ";\n      }\n      \n      .prompt-bubble.top .prompt-bubble-arrow {\n        top: 100%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translateX(-50%)").concat(important, ";\n        border-top-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-bottom: none").concat(important, ";\n        margin-left: 0").concat(important, ";\n      }\n      \n      .prompt-bubble.left .prompt-bubble-arrow {\n        left: 100%").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        border-left-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-right: none").concat(important, ";\n      }\n      \n      .prompt-bubble.right .prompt-bubble-arrow {\n        right: 100%").concat(important, ";\n        top: 50%").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        border-right-color: var(--prompt-bubble-bg-color, #7c3aed)").concat(important, ";\n        border-left: none").concat(important, ";\n      }\n      \n      /* Pulse Rings */\n      .prompt-pulse-rings {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        pointer-events: none").concat(important, ";\n      }\n      \n      .prompt-pulse-ring {\n        position: absolute").concat(important, ";\n        inset: 0").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: widget-pulse-ring 2s ease-out infinite").concat(important, ";\n      }\n      \n      .prompt-pulse-ring:nth-child(2) {\n        animation-delay: 0.5s").concat(important, ";\n      }\n      \n      /* Mobile adjustments for prompt bubble */\n      @media (max-width: 768px) {\n        .prompt-bubble-content {\n          font-size: 12px").concat(important, ";\n          padding: 6px 12px").concat(important, ";\n        }\n        \n        .prompt-bubble.top {\n          bottom: calc(100% + 14px)").concat(important, ";\n        }\n        \n        .prompt-bubble.left,\n        .prompt-bubble.right {\n          display: none").concat(important, "; /* Hide side prompts on mobile */\n        }\n      }\n      \n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed").concat(important, ";\n        bottom: calc(54px + 24px)").concat(important, "; /* launcher pill + gap */\n        ").concat(this.config.position.horizontal === 'right' ? 'right: 20px;' : 'left: 20px;', "\n        width: 340px").concat(important, ";\n        max-width: calc(100vw - 40px)").concat(important, ";\n        height: auto").concat(important, ";\n        max-height: calc(100vh - 100px)").concat(important, ";\n        background: ").concat(panelBg, ";\n        border-radius: 20px").concat(important, ";\n        border: ").concat(panel.border || '1px solid rgba(255,255,255,0.08)', ";\n        flex-direction: column").concat(important, ";\n        overflow: hidden").concat(important, ";\n        box-shadow: 0 24px 60px rgba(0,0,0,0.6)").concat(important, ";\n        transform-origin: bottom right").concat(important, ";\n        opacity: 0").concat(important, ";\n        pointer-events: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      \n      #text-chat-panel.open {\n        display: flex").concat(important, ";\n        opacity: 1").concat(important, ";\n        pointer-events: auto").concat(important, ";\n      }\n\n      /* Shell for panel inner */\n      .widget-shell { width: 100%").concat(important, "; padding: 0").concat(important, "; border-radius: 20px").concat(important, "; background: transparent").concat(important, "; overflow: hidden").concat(important, "; display: flex").concat(important, "; flex-direction: column").concat(important, "; box-sizing: border-box").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, "; }\n      .panel-inner { width: 100%").concat(important, "; background: ").concat(panelBg, "; border-radius: 20px").concat(important, "; border: none").concat(important, "; overflow: hidden").concat(important, "; display:flex").concat(important, "; flex-direction: column").concat(important, "; padding: 0").concat(important, "; box-sizing: border-box").concat(important, "; max-width: 100%").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, "; }\n\n      #text-chat-panel .widget-container {\n        width: 100%").concat(important, "; background: ").concat(panelBg, "; overflow: visible").concat(important, "; display: flex").concat(important, "; flex-direction: column").concat(important, "; border-radius: 20px").concat(important, "; flex: 1").concat(important, "; min-height: 0").concat(important, ";\n      }\n\n      /* Voice idle: one gradient for voice UI + footer (Powered by), not a flat strip under buttons */\n      #text-chat-panel.open:has(").concat(voiceIdleVisibleSelector, ") {\n        background: linear-gradient(160deg, ").concat(idleHeroGrad1, " 0%, ").concat(idleHeroGrad2, " 100%)").concat(important, ";\n      }\n      #text-chat-panel .widget-container:has(").concat(voiceIdleVisibleSelector, ") {\n        background: linear-gradient(160deg, ").concat(idleHeroGrad1, " 0%, ").concat(idleHeroGrad2, " 100%)").concat(important, ";\n      }\n\n      /* Voice active call: same hero gradient as idle + mobile minimized bar */\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel .widget-container:has(").concat(voiceActiveVisibleSelector, ") {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") .widget-shell {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") .panel-inner {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      #text-chat-panel.open:has(").concat(voiceActiveVisibleSelector, ") .ttp-footer {\n        background: ").concat(callActivePanelBg).concat(important, ";\n      }\n      \n      /* Ensure content areas can scroll when height is constrained */\n      #text-chat-panel .widget-container > .voice-interface,\n      #text-chat-panel .widget-container > .text-interface {\n        flex: 1").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        overflow-x: visible").concat(important, "; /* Change from hidden to visible */\n      }\n      \n      /* Header is removed in new design - hero serves as header */\n      #text-chat-panel .widget-header { display: none").concat(important, "; }\n\n      ").concat(showVoice ? this.voiceInterface.generateCSS() : '', "\n      ").concat(showText ? this.textInterface.generateCSS() : '', "\n      \n      /* Footer Branding */\n      .ttp-footer {\n        padding: 6px 18px 10px").concat(important, ";\n        border-top: 1px solid ").concat(footerBorderColor, ";\n        display: flex").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n        background: transparent").concat(important, ";\n      }\n      .ttp-footer span { font-size: 10px").concat(important, "; color: ").concat(footerTextColor, "; }\n      .ttp-footer a { color: ").concat(footerLinkColor, "; text-decoration: none").concat(important, "; font-weight: 600").concat(important, "; }\n      .ttp-footer a:hover { opacity: 0.85").concat(important, "; }\n      .ttp-footer a b { font-weight: 700").concat(important, "; }\n      \n      #text-chat-send-hint {\n        text-align: center").concat(important, ";\n        line-height: 1.4").concat(important, ";\n      }\n      \n      .agent-thinking {\n        font-style: italic").concat(important, ";\n        color: #6B7280").concat(important, ";\n      }\n\n      /* ========================================\n         MOBILE PILL BUTTON & LANDING OVERLAY\n         Hidden on desktop, shown on mobile only\n         ======================================== */\n      .ttp-mobile-fab {\n        display: none").concat(important, ";\n      }\n\n      .ttp-mobile-landing {\n        display: none").concat(important, ";\n      }\n\n      @keyframes ttpWaveAnimation {\n        0%, 100% { transform: scaleY(0.4); }\n        50% { transform: scaleY(1); }\n      }\n\n      @keyframes ttpPulseAnimation {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.5; }\n      }\n\n      @media (max-width: 768px) {\n        /* Hide desktop pill button on mobile */\n        #text-chat-button {\n          display: none !important;\n        }\n\n        /* Re-flow the container for pill shape */\n        #text-chat-button-container {\n          width: auto !important;\n          height: auto !important;\n          min-width: 0 !important;\n          min-height: 0 !important;\n          max-width: none !important;\n          max-height: none !important;\n        }\n\n        /* Show mobile pill button */\n        .ttp-mobile-fab {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 10px").concat(important, ";\n          padding: 10px 16px 10px 12px").concat(important, ";\n          background: ").concat(pillGradient, ";\n          border: none").concat(important, ";\n          border-radius: 24px").concat(important, ";\n          cursor: pointer").concat(important, ";\n          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)").concat(important, ";\n          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)").concat(important, ";\n          z-index: 1").concat(important, ";\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif").concat(important, ";\n          touch-action: manipulation").concat(important, ";\n          -webkit-tap-highlight-color: transparent").concat(important, ";\n        }\n\n        .ttp-mobile-fab:hover {\n          transform: translateY(-3px)").concat(important, ";\n          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4)").concat(important, ";\n        }\n\n        .ttp-mobile-fab__icon-wrap {\n          width: 36px").concat(important, ";\n          height: 36px").concat(important, ";\n          border-radius: 50%").concat(important, ";\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 2px").concat(important, ";\n          height: 16px").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform .bar {\n          width: 2px").concat(important, ";\n          background: #fff").concat(important, ";\n          border-radius: 1px").concat(important, ";\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-fab__waveform .bar:nth-child(1) { height: 5px").concat(important, "; animation-delay: 0s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(2) { height: 10px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(3) { height: 16px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(4) { height: 8px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n        .ttp-mobile-fab__waveform .bar:nth-child(5) { height: 12px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n        .ttp-mobile-fab__label-wrap {\n          display: flex").concat(important, ";\n          flex-direction: column").concat(important, ";\n          align-items: flex-start").concat(important, ";\n          gap: 1px").concat(important, ";\n        }\n\n        .ttp-mobile-fab__label {\n          color: ").concat(pillTextColor, ";\n          font-size: 14px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          line-height: 1.2").concat(important, ";\n        }\n\n        .ttp-mobile-fab__status {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 4px").concat(important, ";\n          font-size: 11px").concat(important, ";\n          color: ").concat(pillTextColor, "b3;\n          line-height: 1.2").concat(important, ";\n        }\n\n        .ttp-mobile-fab__dot {\n          width: 6px").concat(important, ";\n          height: 6px").concat(important, ";\n          background: ").concat(pillDotColor, ";\n          border-radius: 50%").concat(important, ";\n          box-shadow: 0 0 6px ").concat(pillDotColor, "99;\n        }\n\n        /* ---- Mobile Landing Overlay ---- */\n        .ttp-mobile-landing.active {\n          display: block").concat(important, ";\n          position: fixed").concat(important, ";\n          bottom: 16px").concat(important, ";\n          left: 12px").concat(important, ";\n          right: 12px").concat(important, ";\n          background: ").concat(pillGradient, ";\n          border-radius: 20px").concat(important, ";\n          overflow: hidden").concat(important, ";\n          box-shadow:\n            0 10px 40px rgba(0, 0, 0, 0.3),\n            0 0 0 1px rgba(255, 255, 255, 0.1) inset").concat(important, ";\n          z-index: 10002").concat(important, ";\n          font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif").concat(important, ";\n        }\n\n        .ttp-mobile-landing::before {\n          content: ''").concat(important, ";\n          position: absolute").concat(important, ";\n          top: 0").concat(important, ";\n          left: 0").concat(important, ";\n          right: 0").concat(important, ";\n          height: 1px").concat(important, ";\n          background: linear-gradient(90deg,\n            transparent 0%,\n            rgba(255, 255, 255, 0.3) 50%,\n            transparent 100%);\n        }\n\n        .ttp-mobile-landing__header {\n          padding: 14px 16px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 12px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__avatar {\n          width: 44px").concat(important, ";\n          height: 44px").concat(important, ";\n          border-radius: 12px").concat(important, ";\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform {\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 3px").concat(important, ";\n          height: 20px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform .bar {\n          width: 3px").concat(important, ";\n          background: rgba(255, 255, 255, 0.9)").concat(important, ";\n          border-radius: 2px").concat(important, ";\n          animation: ttpWaveAnimation 0.8s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-landing__waveform .bar:nth-child(1) { height: 6px").concat(important, "; animation-delay: 0s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(2) { height: 12px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(3) { height: 20px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(4) { height: 10px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n        .ttp-mobile-landing__waveform .bar:nth-child(5) { height: 16px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n\n        .ttp-mobile-landing__info {\n          flex: 1").concat(important, ";\n          min-width: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__name {\n          color: #fff").concat(important, ";\n          font-size: 15px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          margin-bottom: 2px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__status {\n          color: rgba(255, 255, 255, 0.7)").concat(important, ";\n          font-size: 12px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 5px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__dot {\n          width: 6px").concat(important, ";\n          height: 6px").concat(important, ";\n          background: ").concat(header.onlineIndicatorDotColor || '#10b981', ";\n          border-radius: 50%").concat(important, ";\n          animation: ttpPulseAnimation 2s ease-in-out infinite").concat(important, ";\n        }\n\n        .ttp-mobile-landing__close {\n          width: 32px").concat(important, ";\n          height: 32px").concat(important, ";\n          border-radius: 10px").concat(important, ";\n          background: rgba(255, 255, 255, 0.1)").concat(important, ";\n          border: none").concat(important, ";\n          color: rgba(255, 255, 255, 0.7)").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          cursor: pointer").concat(important, ";\n          transition: all 0.2s").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__close:hover {\n          background: rgba(255, 255, 255, 0.2)").concat(important, ";\n          color: #fff").concat(important, ";\n        }\n\n        .ttp-mobile-landing__error {\n          margin: 0 14px 10px").concat(important, ";\n          padding: 10px 12px").concat(important, ";\n          background: #fef2f2").concat(important, ";\n          border: 1px solid #fecaca").concat(important, ";\n          border-radius: 10px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: flex-start").concat(important, ";\n          gap: 8px").concat(important, ";\n          color: #b91c1c").concat(important, ";\n          font-size: 13px").concat(important, ";\n          line-height: 1.4").concat(important, ";\n        }\n        .ttp-mobile-landing__error svg {\n          flex-shrink: 0").concat(important, ";\n          margin-top: 1px").concat(important, ";\n          stroke: #dc2626").concat(important, ";\n        }\n\n        .ttp-mobile-landing__actions {\n          padding: 0 14px 14px").concat(important, ";\n          display: flex").concat(important, ";\n          gap: 10px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn {\n          flex: 1").concat(important, ";\n          padding: 14px").concat(important, ";\n          border-radius: 12px").concat(important, ";\n          border: none").concat(important, ";\n          cursor: pointer").concat(important, ";\n          font-family: inherit").concat(important, ";\n          font-size: 14px").concat(important, ";\n          font-weight: 600").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          justify-content: center").concat(important, ";\n          gap: 10px").concat(important, ";\n          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)").concat(important, ";\n          touch-action: manipulation").concat(important, ";\n          -webkit-tap-highlight-color: transparent").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn svg {\n          width: 20px").concat(important, ";\n          height: 20px").concat(important, ";\n          flex-shrink: 0").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--call {\n          background: #fff").concat(important, ";\n          color: ").concat(header.backgroundColor || '#7C3AED', ";\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--call:hover {\n          transform: translateY(-2px)").concat(important, ";\n          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--text {\n          background: rgba(255, 255, 255, 0.15)").concat(important, ";\n          color: #fff").concat(important, ";\n          border: 1px solid rgba(255, 255, 255, 0.1)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__btn--text:hover {\n          background: rgba(255, 255, 255, 0.2)").concat(important, ";\n          border-color: rgba(255, 255, 255, 0.2)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__footer {\n          padding: 10px 16px").concat(important, ";\n          display: flex").concat(important, ";\n          justify-content: center").concat(important, ";\n          border-top: 1px solid rgba(255, 255, 255, 0.08)").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered {\n          color: rgba(255, 255, 255, 0.4)").concat(important, ";\n          font-size: 11px").concat(important, ";\n          display: flex").concat(important, ";\n          align-items: center").concat(important, ";\n          gap: 4px").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered svg {\n          width: 10px").concat(important, ";\n          height: 10px").concat(important, ";\n          color: #f59e0b").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered a {\n          color: ").concat(footerLinkColor).concat(important, ";\n          text-decoration: none").concat(important, ";\n        }\n\n        .ttp-mobile-landing__powered a:hover {\n          opacity: 0.88").concat(important, ";\n        }\n      }\n    ");
     }
   }, {
     key: "setupWidgetEvents",
@@ -29916,6 +30159,16 @@ var TTPChatWidget = /*#__PURE__*/function () {
           return _this7.showText();
         };
       }
+      var textUnifiedBackBtn = this.shadowRoot.getElementById('textUnifiedBackBtn');
+      if (textUnifiedBackBtn) {
+        textUnifiedBackBtn.onclick = function () {
+          var _this7$config$behavio;
+          var widgetMode = ((_this7$config$behavio = _this7.config.behavior) === null || _this7$config$behavio === void 0 ? void 0 : _this7$config$behavio.mode) || 'unified';
+          if (widgetMode !== 'unified') return;
+          _this7.showLanding();
+          _this7._openMobileCallTextLanding();
+        };
+      }
 
       // Build wave bars inside the orb (desktop active call)
       var waveQueryRoot = this.config.useShadowDOM ? this.shadowRoot : document.getElementById('ttp-widget-container');
@@ -29932,280 +30185,67 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
       // Voice selection events (based on widget mode)
       var widgetMode = ((_this$config$behavior6 = this.config.behavior) === null || _this$config$behavior6 === void 0 ? void 0 : _this$config$behavior6.mode) || 'unified';
-      var showLanding = widgetMode === 'unified';
+      var isUnified = widgetMode === 'unified';
       var showVoice = widgetMode === 'unified' || widgetMode === 'voice-only';
       var showText = widgetMode === 'unified' || widgetMode === 'text-only';
       var backBtn = this.shadowRoot.getElementById('backBtn');
-      var landing = this.shadowRoot.getElementById('landingScreen');
       var textInterface = this.shadowRoot.getElementById('textInterface');
       var voiceInterface = this.shadowRoot.getElementById('voiceInterface');
+      var newChatBtn = this.shadowRoot.getElementById('newChatBtn');
 
       // Setup back button handler
       if (backBtn) {
         backBtn.onclick = function () {
           var _this7$voiceInterface, _this7$voiceInterface3;
-          // Check if we're showing a domain error - if so, clear it and go back to landing
+          // Check if we're showing a domain error — clear it and return to voice hero
           if ((_this7$voiceInterface = _this7.voiceInterface) !== null && _this7$voiceInterface !== void 0 && _this7$voiceInterface.isShowingDomainError) {
             var _this7$voiceInterface2;
-            console.log('🔙 Back button clicked - clearing domain error and returning to landing');
+            console.log('🔙 Back button clicked - clearing domain error and returning to voice hero');
             // Clear the domain error flag
             _this7.voiceInterface.isShowingDomainError = false;
             // Reset the connecting state (this will restore normal UI)
             if ((_this7$voiceInterface2 = _this7.voiceInterface) !== null && _this7$voiceInterface2 !== void 0 && _this7$voiceInterface2.resetConnectingState) {
               _this7.voiceInterface.resetConnectingState();
             }
-            // Now show landing (will work since error flag is cleared)
             _this7.showLanding();
+            _this7._openMobileCallTextLanding();
             return;
           }
           if ((_this7$voiceInterface3 = _this7.voiceInterface) !== null && _this7$voiceInterface3 !== void 0 && _this7$voiceInterface3.isActive) {
             // If call is active, show message inside widget instead of modal
             _this7.showBackButtonWarning();
           } else if (window.innerWidth <= 768) {
-            // On mobile, close panel and return to FAB
-            var panel = _this7.shadowRoot.getElementById('text-chat-panel');
-            if (panel) {
-              panel.classList.remove('open');
-              _this7.isOpen = false;
-            }
-            var fab = _this7.shadowRoot.querySelector('.ttp-mobile-fab');
-            if (fab) fab.style.display = '';
             _this7.showLanding();
+            _this7._openMobileCallTextLanding();
           } else {
-            // Desktop: show landing inside panel
+            // Desktop: return to voice hero (unified home)
             _this7.showLanding();
           }
         };
       }
-      if (showLanding && this.landingScreen) {
-        this.landingScreen.setupEventHandlers({
-          onSelectVoice: function () {
-            var _onSelectVoice = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-              var _this7$voiceInterface4, _this7$voiceInterface0, _this7$shadowRoot, _this7$voiceInterface5, _this7$shadowRoot2, _this7$shadowRoot3, _this7$voiceInterface6, panel, idleState, floatingButton, mobileFab, _this7$voiceInterface7, _this7$voiceInterface8, _this7$voiceInterface9, _this7$voiceInterface1, _this7$config$behavio, _widgetMode, _this7$voiceInterface11, _this7$voiceInterface12, _this7$config$behavio2, _this7$voiceInterface10, _this7$voiceInterface13, _this7$shadowRoot4, _this7$shadowRoot5, existingBar, _floatingButton, _mobileFab, _widgetMode2, _t;
-              return _regenerator().w(function (_context2) {
-                while (1) switch (_context2.p = _context2.n) {
-                  case 0:
-                    if (!_this7.isStartingCall) {
-                      _context2.n = 1;
-                      break;
-                    }
-                    console.log('⚠️ Call already starting, ignoring duplicate click');
-                    return _context2.a(2);
-                  case 1:
-                    // Call the callback if provided
-                    if (typeof _this7.config.onVoiceCallButtonClick === 'function') {
-                      try {
-                        _this7.config.onVoiceCallButtonClick({
-                          timestamp: Date.now(),
-                          widgetState: 'start'
-                        });
-                      } catch (error) {
-                        console.error('Error in onVoiceCallButtonClick callback:', error);
-                      }
-                    }
-                    _this7.isStartingCall = true;
-                    _context2.p = 2;
-                    // Show voice interface first (needed for UI state)
-                    // Note: If showVoice() throws, finally block will still reset flag
-                    _this7.showVoice();
-
-                    // CRITICAL: On mobile, hide widget panel IMMEDIATELY to prevent showing old UI
-                    // The idle state with "Connecting..." should never be visible on mobile
-                    if (!((_this7$voiceInterface4 = _this7.voiceInterface) !== null && _this7$voiceInterface4 !== void 0 && _this7$voiceInterface4.isMobile)) {
-                      _context2.n = 4;
-                      break;
-                    }
-                    // Hide widget panel immediately before showing any connecting state
-                    panel = ((_this7$shadowRoot = _this7.shadowRoot) === null || _this7$shadowRoot === void 0 ? void 0 : _this7$shadowRoot.getElementById('text-chat-panel')) || document.getElementById('text-chat-panel');
-                    if (panel) {
-                      panel.classList.remove('open');
-                      panel.style.display = 'none';
-                    }
-                    // Hide idle state to prevent it from showing
-                    idleState = (_this7$voiceInterface5 = _this7.voiceInterface) === null || _this7$voiceInterface5 === void 0 || (_this7$voiceInterface5 = _this7$voiceInterface5.shadowRoot) === null || _this7$voiceInterface5 === void 0 ? void 0 : _this7$voiceInterface5.getElementById('voiceIdleState');
-                    if (idleState) {
-                      idleState.style.display = 'none';
-                    }
-                    // Hide floating button immediately so minimized bar is visible
-                    floatingButton = ((_this7$shadowRoot2 = _this7.shadowRoot) === null || _this7$shadowRoot2 === void 0 ? void 0 : _this7$shadowRoot2.getElementById('text-chat-button')) || document.getElementById('text-chat-button');
-                    if (floatingButton) {
-                      floatingButton.style.display = 'none';
-                    }
-                    mobileFab = (_this7$shadowRoot3 = _this7.shadowRoot) === null || _this7$shadowRoot3 === void 0 ? void 0 : _this7$shadowRoot3.querySelector('.ttp-mobile-fab');
-                    if (mobileFab) {
-                      mobileFab.style.display = 'none';
-                    }
-                    // Create minimized bar with connecting state
-                    if (!((_this7$voiceInterface6 = _this7.voiceInterface) !== null && _this7$voiceInterface6 !== void 0 && _this7$voiceInterface6.createMobileMinimizedBar)) {
-                      _context2.n = 3;
-                      break;
-                    }
-                    _this7.voiceInterface.createMobileMinimizedBar();
-                    // Show connecting status in minimized bar
-                    _this7.voiceInterface.updateMobileStatus('connecting');
-                    // Start timer and waveform immediately - timer runs inside mobile bar (owns its DOM)
-                    (_this7$voiceInterface7 = (_this7$voiceInterface8 = _this7.voiceInterface).startWaveformAnimation) === null || _this7$voiceInterface7 === void 0 || _this7$voiceInterface7.call(_this7$voiceInterface8);
-                    // Ensure UI is painted before starting heavy operations
-                    _context2.n = 3;
-                    return new Promise(function (resolve) {
-                      return requestAnimationFrame(function () {
-                        return requestAnimationFrame(resolve);
-                      });
-                    });
-                  case 3:
-                    _context2.n = 5;
-                    break;
-                  case 4:
-                    // Desktop: Show connecting/loading state in idle state
-                    // This provides feedback during WebSocket connection and SDK initialization
-                    if ((_this7$voiceInterface9 = _this7.voiceInterface) !== null && _this7$voiceInterface9 !== void 0 && _this7$voiceInterface9.showConnectingState) {
-                      _this7.voiceInterface.showConnectingState();
-                    }
-                  case 5:
-                    _context2.n = 6;
-                    return _this7.startVoiceCall();
-                  case 6:
-                    if (!((_this7$voiceInterface0 = _this7.voiceInterface) !== null && _this7$voiceInterface0 !== void 0 && _this7$voiceInterface0.isActive)) {
-                      _context2.n = 7;
-                      break;
-                    }
-                    console.log('✅ Voice call started successfully');
-                    _context2.n = 9;
-                    break;
-                  case 7:
-                    // This shouldn't happen if startVoiceCall() throws properly, but just in case
-                    console.warn('⚠️ startVoiceCall() returned but call is not active');
-
-                    // CRITICAL: Check if we're showing a domain error - if so, stay on voice interface
-                    if (!_this7._isDomainErrorVisible()) {
-                      _context2.n = 8;
-                      break;
-                    }
-                    // Set currentView to voice so we don't return to landing
-                    _this7.currentView = 'voice';
-                    // Ensure voice interface is visible
-                    _this7.showVoice();
-                    // Don't reset connecting state or return to landing - stay on voice interface showing error
-                    console.log('✅ Staying on voice interface with domain error displayed');
-                    return _context2.a(2);
-                  case 8:
-                    // Not a domain error - reset connecting state and return to landing
-                    console.log('⚠️ Not a domain error - returning to landing screen');
-                    if ((_this7$voiceInterface1 = _this7.voiceInterface) !== null && _this7$voiceInterface1 !== void 0 && _this7$voiceInterface1.resetConnectingState) {
-                      _this7.voiceInterface.resetConnectingState();
-                    }
-                    _widgetMode = ((_this7$config$behavio = _this7.config.behavior) === null || _this7$config$behavio === void 0 ? void 0 : _this7$config$behavio.mode) || 'unified';
-                    if (_widgetMode === 'unified') {
-                      _this7.showLanding();
-                    }
-                  case 9:
-                    _context2.n = 12;
-                    break;
-                  case 10:
-                    _context2.p = 10;
-                    _t = _context2.v;
-                    if (!(_t.isServerRejection || _t.name === 'ServerRejected')) {
-                      _context2.n = 11;
-                      break;
-                    }
-                    // Server rejection is expected - the error handler will show domain error message
-                    // Reset connecting state but don't log as error
-                    if ((_this7$voiceInterface10 = _this7.voiceInterface) !== null && _this7$voiceInterface10 !== void 0 && _this7$voiceInterface10.resetConnectingState) {
-                      _this7.voiceInterface.resetConnectingState();
-                    }
-                    // Don't show toast for server rejection - domain error handler will show message
-                    return _context2.a(2);
-                  case 11:
-                    // Log other errors (permission denied, etc.)
-                    console.error('❌ Failed to start voice call:', _t);
-
-                    // Reset connecting state on error
-                    if ((_this7$voiceInterface11 = _this7.voiceInterface) !== null && _this7$voiceInterface11 !== void 0 && _this7$voiceInterface11.resetConnectingState) {
-                      _this7.voiceInterface.resetConnectingState();
-                    }
-
-                    // Clean up mobile bar if it was created early
-                    if ((_this7$voiceInterface12 = _this7.voiceInterface) !== null && _this7$voiceInterface12 !== void 0 && _this7$voiceInterface12.isMobile) {
-                      existingBar = document.getElementById('mobile-voice-call-bar-container');
-                      if (existingBar && (_this7$voiceInterface13 = _this7.voiceInterface) !== null && _this7$voiceInterface13 !== void 0 && _this7$voiceInterface13.removeMobileMinimizedBar) {
-                        _this7.voiceInterface.removeMobileMinimizedBar();
-                      }
-                      // Restore floating button if it was hidden
-                      _floatingButton = ((_this7$shadowRoot4 = _this7.shadowRoot) === null || _this7$shadowRoot4 === void 0 ? void 0 : _this7$shadowRoot4.getElementById('text-chat-button')) || document.getElementById('text-chat-button');
-                      if (_floatingButton) {
-                        _floatingButton.style.display = '';
-                      }
-                      _mobileFab = (_this7$shadowRoot5 = _this7.shadowRoot) === null || _this7$shadowRoot5 === void 0 ? void 0 : _this7$shadowRoot5.querySelector('.ttp-mobile-fab');
-                      if (_mobileFab) {
-                        _mobileFab.style.display = '';
-                      }
-                    }
-
-                    // Show user-friendly error message (unless it's a user cancellation)
-                    if (_t.message !== 'Call cancelled by user') {
-                      _this7.showErrorToast(_t.message || 'Failed to start voice call. Please try again.', 'error');
-                    }
-
-                    // Return to landing screen on error
-                    _widgetMode2 = ((_this7$config$behavio2 = _this7.config.behavior) === null || _this7$config$behavio2 === void 0 ? void 0 : _this7$config$behavio2.mode) || 'unified';
-                    if (_widgetMode2 === 'unified') {
-                      _this7.showLanding();
-                    }
-                  case 12:
-                    _context2.p = 12;
-                    // ✅ Always reset flag, even if showVoice() or startVoiceCall() throws
-                    _this7.isStartingCall = false;
-                    return _context2.f(12);
-                  case 13:
-                    return _context2.a(2);
-                }
-              }, _callee2, null, [[2, 10, 12, 13]]);
-            }));
-            function onSelectVoice() {
-              return _onSelectVoice.apply(this, arguments);
-            }
-            return onSelectVoice;
-          }(),
-          onSelectText: function onSelectText() {
-            return _this7.showText();
-          }
-        });
-
-        // Restore previous view state if user had selected an interface, otherwise show landing
+      if (isUnified) {
         if (this.currentView === 'text') {
-          // User was on text interface, restore it
-          if (landing) landing.classList.remove('active');
           if (textInterface) textInterface.classList.add('active');
           if (voiceInterface) voiceInterface.classList.remove('active');
-          if (backBtn && widgetMode === 'unified') backBtn.classList.add('visible');
+          if (backBtn) backBtn.classList.add('visible');
           if (newChatBtn) newChatBtn.style.display = '';
-        } else if (this.currentView === 'voice') {
-          // User was on voice interface, restore it
-          if (landing) landing.classList.remove('active');
+        } else {
+          // Text-only path is text branch; everything else is unified home (voice hero)
+          this.currentView = 'voice';
           if (textInterface) textInterface.classList.remove('active');
           if (voiceInterface) voiceInterface.classList.add('active');
-          if (backBtn && widgetMode === 'unified') backBtn.classList.add('visible');
+          if (backBtn) backBtn.classList.remove('visible');
           if (newChatBtn) newChatBtn.style.display = 'none';
-        } else {
-          // Initial state or landing: show landing screen
-          this.currentView = 'landing';
-          if (landing) landing.classList.add('active');
-          if (textInterface) textInterface.classList.remove('active');
-          if (voiceInterface) voiceInterface.classList.remove('active');
-          // Hide back button on landing screen (only exists in unified mode)
-          if (backBtn && widgetMode === 'unified') backBtn.classList.remove('visible');
         }
       } else if (widgetMode === 'voice-only') {
         // Voice-only mode: show voice interface directly
         if (voiceInterface) voiceInterface.classList.add('active');
         if (textInterface) textInterface.classList.remove('active');
-        if (landing) landing.classList.remove('active');
         // Back button doesn't exist in voice-only mode (only in unified)
       } else if (widgetMode === 'text-only') {
         // Text-only mode: show text interface directly
         if (textInterface) textInterface.classList.add('active');
         if (voiceInterface) voiceInterface.classList.remove('active');
-        if (landing) landing.classList.remove('active');
         // Back button doesn't exist in text-only mode (only in unified)
       }
 
@@ -30220,13 +30260,12 @@ var TTPChatWidget = /*#__PURE__*/function () {
       }
 
       // Setup header button handlers
-      var newChatBtn = this.shadowRoot.getElementById('newChatBtn');
       if (newChatBtn) {
         newChatBtn.onclick = function () {
           return _this7.textInterface.startNewChat();
         };
-        // Hide new chat button on landing screen initially
-        if (showLanding) {
+        // Hide new chat on unified home (voice hero) initially
+        if (isUnified && this.currentView !== 'text') {
           newChatBtn.style.display = 'none';
         }
       }
@@ -30244,28 +30283,25 @@ var TTPChatWidget = /*#__PURE__*/function () {
     value: function startNewChat() {
       this.textInterface.startNewChat();
     }
+
+    /**
+     * Unified-mode "home": voice idle hero. Name kept for VoiceInterface callbacks.
+     * Legacy two-card in-panel mode picker has been removed.
+     */
   }, {
     key: "showLanding",
     value: function showLanding() {
       if (!this.shadowRoot) return;
-
-      // On desktop, skip landing — show voice idle state as default entry
-      if (window.innerWidth > 768) {
-        this.showVoice();
-        return;
-      }
       if (this._isDomainErrorVisible()) return;
       var widgetMode = this.config.behavior.mode || 'unified';
       if (widgetMode !== 'unified') return;
-      this.currentView = 'landing';
-      var landing = this.shadowRoot.getElementById('landingScreen');
       var textInterface = this.shadowRoot.getElementById('textInterface');
       var voiceInterface = this.shadowRoot.getElementById('voiceInterface');
       var backBtn = this.shadowRoot.getElementById('backBtn');
       var newChatBtn = this.shadowRoot.getElementById('newChatBtn');
-      if (landing) landing.classList.add('active');
+      this.currentView = 'voice';
       if (textInterface) textInterface.classList.remove('active');
-      if (voiceInterface) voiceInterface.classList.remove('active');
+      if (voiceInterface) voiceInterface.classList.add('active');
       if (backBtn) backBtn.classList.remove('visible');
       if (newChatBtn) newChatBtn.style.display = 'none';
     }
@@ -30274,11 +30310,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
     value: function showText() {
       if (!this.shadowRoot) return;
       this.currentView = 'text'; // Track state
-      var landing = this.shadowRoot.getElementById('landingScreen');
       var voiceInterface = this.shadowRoot.getElementById('voiceInterface');
       var backBtn = this.shadowRoot.getElementById('backBtn');
       var newChatBtn = this.shadowRoot.getElementById('newChatBtn');
-      if (landing) landing.classList.remove('active');
       if (voiceInterface) voiceInterface.classList.remove('active');
       this.textInterface.show();
       // Show back button when not on landing (only in unified mode)
@@ -30300,45 +30334,73 @@ var TTPChatWidget = /*#__PURE__*/function () {
     value: function showVoice() {
       if (!this.shadowRoot) return;
       this.currentView = 'voice'; // Track state
-      var landing = this.shadowRoot.getElementById('landingScreen');
       var textInterface = this.shadowRoot.getElementById('textInterface');
       var voiceInterface = this.shadowRoot.getElementById('voiceInterface');
       var backBtn = this.shadowRoot.getElementById('backBtn');
       var newChatBtn = this.shadowRoot.getElementById('newChatBtn');
-      if (landing) landing.classList.remove('active');
       if (textInterface) textInterface.classList.remove('active');
       if (voiceInterface) voiceInterface.classList.add('active');
-      // Show back button when not on landing (only in unified mode)
+      // Voice hero is unified home — no header back (text chat uses its own back bar)
       var widgetMode = this.config.behavior.mode || 'unified';
-      if (backBtn && widgetMode === 'unified') backBtn.classList.add('visible');
+      if (backBtn && widgetMode === 'unified') backBtn.classList.remove('visible');
       // Hide new chat button on voice interface (not applicable)
       if (newChatBtn) newChatBtn.style.display = 'none';
     }
+
+    /**
+     * Mobile (≤768px): close chat panel and show Call vs Chat overlay (#ttpMobileLanding).
+     * Hides FAB while landing is open. No-op on desktop or if mobile chrome is missing.
+     */
   }, {
-    key: "setupMobileWidgetEvents",
-    value: function setupMobileWidgetEvents() {
+    key: "_openMobileCallTextLanding",
+    value: function _openMobileCallTextLanding() {
       var _this8 = this;
-      if (!this.shadowRoot) return;
+      if (!this.shadowRoot || window.innerWidth > 768) 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 = '';
-        _this8.isMobileLandingOpen = false;
-      };
-      var openMobileLanding = function openMobileLanding() {
+
+      // Defer showing landing until after the current pointer/click event finishes.
+      // Otherwise document's "outside click" listener runs in the same bubble as e.g. the text
+      // "Back" button: composedPath includes the panel but not #ttpMobileLanding, so it treated
+      // the click as "outside" and closed the landing immediately (user only saw the FAB again).
+      var open = function open() {
+        if (!_this8.shadowRoot || window.innerWidth > 768) return;
+        var panel = _this8.shadowRoot.getElementById('text-chat-panel');
+        if (panel) {
+          panel.classList.remove('open');
+          _this8.isOpen = false;
+        }
         if (_this8.config.promptAnimation.hideAfterClick) {
           _this8.hidePrompt();
         }
-        // Clear any previous error banner
         var errorBanner = _this8.shadowRoot.getElementById('ttpMobileLandingError');
         if (errorBanner) errorBanner.style.display = 'none';
-        mobileFab.style.display = 'none';
-        mobileLanding.classList.add('active');
+        var fab = _this8.shadowRoot.querySelector('.ttp-mobile-fab');
+        var landing = _this8.shadowRoot.getElementById('ttpMobileLanding');
+        if (!fab || !landing) return;
+        fab.style.display = 'none';
+        landing.classList.add('active');
         _this8.isMobileLandingOpen = true;
       };
-      mobileFab.onclick = openMobileLanding;
+      queueMicrotask(open);
+    }
+  }, {
+    key: "setupMobileWidgetEvents",
+    value: function setupMobileWidgetEvents() {
+      var _this9 = 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 = '';
+        _this9.isMobileLandingOpen = false;
+      };
+      mobileFab.onclick = function () {
+        return _this9._openMobileCallTextLanding();
+      };
       var mobileClose = mobileLanding.querySelector('.ttp-mobile-landing__close');
       if (mobileClose) {
         mobileClose.onclick = closeMobileLanding;
@@ -30347,31 +30409,39 @@ var TTPChatWidget = /*#__PURE__*/function () {
       if (mobileCallBtn) {
         mobileCallBtn.onclick = function () {
           closeMobileLanding();
-          var desktopVoiceCard = _this8.shadowRoot.getElementById('mode-card-voice');
-          if (desktopVoiceCard) {
-            desktopVoiceCard.click();
-          } else {
-            _this8.showVoice();
+          var panel = _this9.shadowRoot.getElementById('text-chat-panel');
+          if (panel) {
+            panel.classList.add('open');
+            _this9.isOpen = true;
           }
+          mobileFab.style.display = 'none';
+          _this9.showVoice();
+          // Landing already chose "Voice call" — start the call (mic permission / pre-prompt) instead of
+          // leaving users on a second "Start Call" tap that feels broken.
+          queueMicrotask(function () {
+            _this9.startVoiceCall().catch(function (err) {
+              console.error('[TTPChatWidget] Mobile landing voice start failed:', err);
+            });
+          });
         };
       }
       var mobileChatBtn = this.shadowRoot.getElementById('ttpMobileChatBtn');
       if (mobileChatBtn) {
         mobileChatBtn.onclick = function () {
           closeMobileLanding();
-          var panel = _this8.shadowRoot.getElementById('text-chat-panel');
+          var panel = _this9.shadowRoot.getElementById('text-chat-panel');
           if (panel) {
             panel.classList.add('open');
-            _this8.isOpen = true;
+            _this9.isOpen = true;
           }
           mobileFab.style.display = 'none';
-          _this8.showText();
+          _this9.showText();
         };
       }
 
       // Close mobile landing on outside click
       document.addEventListener('click', function (e) {
-        if (!_this8.isMobileLandingOpen) return;
+        if (!_this9.isMobileLandingOpen) return;
         var path = e.composedPath();
         if (!path.includes(mobileLanding) && !path.includes(mobileFab)) {
           closeMobileLanding();
@@ -30380,7 +30450,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
       // Close mobile landing on Escape
       document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && _this8.isMobileLandingOpen) {
+        if (e.key === 'Escape' && _this9.isMobileLandingOpen) {
           closeMobileLanding();
         }
       });
@@ -30388,10 +30458,10 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "setupKeyboardNavigation",
     value: function setupKeyboardNavigation() {
-      var _this9 = this;
+      var _this0 = this;
       document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && _this9.isOpen) {
-          _this9.togglePanel();
+        if (e.key === 'Escape' && _this0.isOpen) {
+          _this0.togglePanel();
         }
       });
     }
@@ -30402,7 +30472,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "setupPromptAnimation",
     value: function setupPromptAnimation() {
-      var _this0 = this;
+      var _this1 = this;
       if (!this.shadowRoot) return;
       var promptConfig = this.config.promptAnimation || {};
       // Default to disabled if not specified (enabled === true means explicitly enabled)
@@ -30432,7 +30502,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 () {
-          _this0.hidePrompt();
+          _this1.hidePrompt();
         }, promptConfig.hideAfterSeconds * 1000);
       }
 
@@ -30444,7 +30514,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 = _this0.shadowRoot.getElementById('prompt-pulse-rings');
+          var pulseRings = _this1.shadowRoot.getElementById('prompt-pulse-rings');
           if (pulseRings) pulseRings.style.display = 'none';
 
           // Call original callback if it exists
@@ -30456,7 +30526,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 = _this0.shadowRoot.getElementById('prompt-pulse-rings');
+            var pulseRings = _this1.shadowRoot.getElementById('prompt-pulse-rings');
             if (pulseRings) pulseRings.style.display = 'none';
           });
         }
@@ -30504,7 +30574,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "showPrompt",
     value: function showPrompt() {
-      var _this1 = this;
+      var _this10 = this;
       if (!this.shadowRoot) return;
       var promptConfig = this.config.promptAnimation || {};
       // Default to enabled if not specified
@@ -30524,8 +30594,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 = _this1.shadowRoot.getElementById('prompt-bubble');
-        if (!promptBubble && _this1.shadowRoot !== document) {
+        var promptBubble = _this10.shadowRoot.getElementById('prompt-bubble');
+        if (!promptBubble && _this10.shadowRoot !== document) {
           promptBubble = document.getElementById('prompt-bubble');
         }
         if (promptBubble) {
@@ -30539,8 +30609,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
         // Show pulse rings if enabled
         if (promptConfig.showPulseRings !== false) {
-          var _pulseRings = _this1.shadowRoot.getElementById('prompt-pulse-rings');
-          if (!_pulseRings && _this1.shadowRoot !== document) {
+          var _pulseRings = _this10.shadowRoot.getElementById('prompt-pulse-rings');
+          if (!_pulseRings && _this10.shadowRoot !== document) {
             _pulseRings = document.getElementById('prompt-pulse-rings');
           }
           if (_pulseRings) {
@@ -30577,7 +30647,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         }
         // Start new timer
         this.promptAutoHideTimer = setTimeout(function () {
-          _this1.hidePrompt();
+          _this10.hidePrompt();
         }, promptConfig.hideAfterSeconds * 1000);
       }
     }
@@ -30593,7 +30663,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "_doTogglePanel",
     value: function _doTogglePanel() {
-      var _this10 = this;
+      var _this11 = this;
       if (!this.shadowRoot) return;
       this.isOpen = !this.isOpen;
       var panel = this.shadowRoot.getElementById('text-chat-panel');
@@ -30612,7 +30682,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Panel is opening - hide prompt
         this.hidePrompt();
         setTimeout(function () {
-          var input = _this10.shadowRoot.getElementById('messageInput');
+          var input = _this11.shadowRoot.getElementById('messageInput');
           if (input) input.focus();
         }, 100);
       } else {
@@ -30624,13 +30694,13 @@ var TTPChatWidget = /*#__PURE__*/function () {
         // Panel is closing - show prompt (if enabled)
         this.showPrompt();
         setTimeout(function () {
-          var _this10$config$prompt;
-          var promptBubble = _this10.shadowRoot.getElementById('prompt-bubble');
+          var _this11$config$prompt;
+          var promptBubble = _this11.shadowRoot.getElementById('prompt-bubble');
           if (promptBubble && promptBubble.style.display === 'none') {
             promptBubble.style.display = 'block';
           }
-          var pulseRings = _this10.shadowRoot.getElementById('prompt-pulse-rings');
-          if (pulseRings && ((_this10$config$prompt = _this10.config.promptAnimation) === null || _this10$config$prompt === void 0 ? void 0 : _this10$config$prompt.showPulseRings) !== false) {
+          var pulseRings = _this11.shadowRoot.getElementById('prompt-pulse-rings');
+          if (pulseRings && ((_this11$config$prompt = _this11.config.promptAnimation) === null || _this11$config$prompt === void 0 ? void 0 : _this11$config$prompt.showPulseRings) !== false) {
             if (pulseRings.style.display === 'none') {
               pulseRings.style.display = 'block';
             }
@@ -30774,17 +30844,17 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "startChat",
     value: function () {
-      var _startChat = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-        return _regenerator().w(function (_context3) {
-          while (1) switch (_context3.n) {
+      var _startChat = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
             case 0:
               // No-op with single-shot design; connection happens per message
               this.isActive = true;
               this.textInterface.setActive(true);
             case 1:
-              return _context3.a(2);
+              return _context2.a(2);
           }
-        }, _callee3, this);
+        }, _callee2, this);
       }));
       function startChat() {
         return _startChat.apply(this, arguments);
@@ -30794,16 +30864,16 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "sendMessage",
     value: function () {
-      var _sendMessage = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-        return _regenerator().w(function (_context4) {
-          while (1) switch (_context4.n) {
+      var _sendMessage = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
             case 0:
-              _context4.n = 1;
+              _context3.n = 1;
               return this.textInterface.sendMessage();
             case 1:
-              return _context4.a(2);
+              return _context3.a(2);
           }
-        }, _callee4, this);
+        }, _callee3, this);
       }));
       function sendMessage() {
         return _sendMessage.apply(this, arguments);
@@ -30899,7 +30969,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "updateConfig",
     value: function updateConfig(newConfig) {
-      var _this$config, _this$config2, _this$config$voice8, _this$config$voice9, _this$config$voice0, _this$config$voice1, _this$config$voice10, _this$config$behavior7;
+      var _this$config2, _this$config3, _this$config$voice8, _this$config$voice9, _this$config$voice0, _this$config$voice1, _this$config$voice10;
       // Deep merge nested objects
       var mergedConfig = _objectSpread({}, this.config);
 
@@ -30908,14 +30978,18 @@ var TTPChatWidget = /*#__PURE__*/function () {
         mergedConfig.panel = _objectSpread(_objectSpread({}, this.config.panel), newConfig.panel);
       }
 
-      // Deep merge voice config if it exists
+      // Deep merge voice config if it exists (root `agentName` only — ignore `voice.agentName`)
       if (newConfig.voice) {
-        mergedConfig.voice = _objectSpread(_objectSpread({}, this.config.voice), newConfig.voice);
+        var _newConfig$voice = newConfig.voice,
+          _ignoredVoiceAgentName = _newConfig$voice.agentName,
+          voicePatch = _objectWithoutProperties(_newConfig$voice, _excluded);
+        mergedConfig.voice = _objectSpread(_objectSpread({}, this.config.voice), voicePatch);
         // Deep merge micButtonHint if it exists
         if (newConfig.voice.micButtonHint) {
           var _this$config$voice7;
           mergedConfig.voice.micButtonHint = _objectSpread(_objectSpread({}, (_this$config$voice7 = this.config.voice) === null || _this$config$voice7 === void 0 ? void 0 : _this$config$voice7.micButtonHint), newConfig.voice.micButtonHint);
         }
+        delete mergedConfig.voice.agentName;
       }
 
       // Deep merge text config if it exists
@@ -30935,8 +31009,8 @@ var TTPChatWidget = /*#__PURE__*/function () {
 
       // Update direction if language changed to RTL language
       if (newConfig.language !== undefined) {
-        var rtlLanguages = ['he', 'ar'];
-        if (rtlLanguages.includes(newConfig.language)) {
+        var langBase = String(newConfig.language).toLowerCase().split(/[-_]/)[0];
+        if (langBase === 'he' || langBase === 'ar') {
           mergedConfig.direction = 'rtl';
         } else if (newConfig.direction === undefined) {
           mergedConfig.direction = 'ltr';
@@ -31013,9 +31087,9 @@ var TTPChatWidget = /*#__PURE__*/function () {
       });
 
       // Store current language before merge to detect changes
-      var oldLanguage = ((_this$config = this.config) === null || _this$config === void 0 ? void 0 : _this$config.language) || 'en';
+      var oldLanguage = ((_this$config2 = this.config) === null || _this$config2 === void 0 ? void 0 : _this$config2.language) || 'en';
       // Store current useShadowDOM setting
-      var oldUseShadowDOM = ((_this$config2 = this.config) === null || _this$config2 === void 0 ? void 0 : _this$config2.useShadowDOM) !== false;
+      var oldUseShadowDOM = ((_this$config3 = this.config) === null || _this$config3 === void 0 ? void 0 : _this$config3.useShadowDOM) !== false;
       this.config = this.mergeWithDefaults(mergedConfig);
 
       // Check if useShadowDOM changed - if so, need to recreate container
@@ -31094,6 +31168,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       // Ensure language is correctly passed - use the merged config value
       var currentLanguage = this.config.language || 'en';
       var voiceConfig = _objectSpread(_objectSpread(_objectSpread({}, this.config), this.config.voice), {}, {
+        agentName: this.config.agentName,
         language: currentLanguage,
         // Use the current language from merged config
         translations: this.translations,
@@ -31126,18 +31201,6 @@ var TTPChatWidget = /*#__PURE__*/function () {
       });
       this.textInterface = new _TextInterface_js__WEBPACK_IMPORTED_MODULE_2__.TextInterface(textConfig, this.sdk);
 
-      // Recreate landing screen if in unified mode
-      var widgetMode = ((_this$config$behavior7 = this.config.behavior) === null || _this$config$behavior7 === void 0 ? void 0 : _this$config$behavior7.mode) || 'unified';
-      if (widgetMode === 'unified') {
-        var landingConfig = _objectSpread(_objectSpread({}, this.config), {}, {
-          translations: this.translations,
-          shadowRoot: this.shadowRoot
-        });
-        this.landingScreen = new _LandingScreen_js__WEBPACK_IMPORTED_MODULE_3__.LandingScreen(landingConfig);
-      } else {
-        this.landingScreen = null;
-      }
-
       // Recreate widget with new config (after interfaces are created)
       this.createWidget();
 
@@ -31188,19 +31251,19 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "startVoiceCall",
     value: function () {
-      var _startVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
-        return _regenerator().w(function (_context5) {
-          while (1) switch (_context5.n) {
+      var _startVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
             case 0:
-              _context5.n = 1;
+              _context4.n = 1;
               return this.voiceInterface.startVoiceCall();
             case 1:
               // Flush pending tools after SDK connects
               this._flushPendingClientTools();
             case 2:
-              return _context5.a(2);
+              return _context4.a(2);
           }
-        }, _callee5, this);
+        }, _callee4, this);
       }));
       function startVoiceCall() {
         return _startVoiceCall.apply(this, arguments);
@@ -31253,26 +31316,26 @@ var TTPChatWidget = /*#__PURE__*/function () {
   }, {
     key: "injectData",
     value: (function () {
-      var _injectData = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(data) {
+      var _injectData = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(data) {
         var _this$voiceInterface5;
         var options,
           voiceSDK,
           ack,
-          _args6 = arguments,
-          _t2;
-        return _regenerator().w(function (_context6) {
-          while (1) switch (_context6.p = _context6.n) {
+          _args5 = arguments,
+          _t;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.p = _context5.n) {
             case 0:
-              options = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : {};
+              options = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : {};
               if (!(!data || !data.trim())) {
-                _context6.n = 1;
+                _context5.n = 1;
                 break;
               }
               console.warn('TTPChatWidget: Cannot inject empty data');
               throw new Error('Cannot inject empty data');
             case 1:
               if (!(!this.voiceInterface || !this.voiceInterface.isActive)) {
-                _context6.n = 2;
+                _context5.n = 2;
                 break;
               }
               console.warn('TTPChatWidget: Cannot inject data - voice call is not active');
@@ -31281,28 +31344,28 @@ var TTPChatWidget = /*#__PURE__*/function () {
               // Check if SDK is available
               voiceSDK = (_this$voiceInterface5 = this.voiceInterface) === null || _this$voiceInterface5 === void 0 ? void 0 : _this$voiceInterface5.getVoiceSDK();
               if (voiceSDK) {
-                _context6.n = 3;
+                _context5.n = 3;
                 break;
               }
               console.warn('TTPChatWidget: VoiceSDK not available');
               throw new Error('VoiceSDK not available');
             case 3:
-              _context6.p = 3;
-              _context6.n = 4;
+              _context5.p = 3;
+              _context5.n = 4;
               return voiceSDK.injectData(data, _objectSpread(_objectSpread({}, options), {}, {
                 source: options.source || 'widget_programmatic'
               }));
             case 4:
-              ack = _context6.v;
-              return _context6.a(2, ack);
+              ack = _context5.v;
+              return _context5.a(2, ack);
             case 5:
-              _context6.p = 5;
-              _t2 = _context6.v;
-              throw _t2;
+              _context5.p = 5;
+              _t = _context5.v;
+              throw _t;
             case 6:
-              return _context6.a(2);
+              return _context5.a(2);
           }
-        }, _callee6, this, [[3, 5]]);
+        }, _callee5, this, [[3, 5]]);
       }));
       function injectData(_x) {
         return _injectData.apply(this, arguments);
@@ -31401,12 +31464,12 @@ var TTPChatWidget = /*#__PURE__*/function () {
     key: "_flushPendingClientTools",
     value: function _flushPendingClientTools() {
       var _this$voiceInterface0,
-        _this11 = this;
+        _this12 = this;
       if (this._pendingClientTools && (_this$voiceInterface0 = this.voiceInterface) !== null && _this$voiceInterface0 !== void 0 && _this$voiceInterface0.sdk) {
         this._pendingClientTools.forEach(function (_ref3) {
           var name = _ref3.name,
             handler = _ref3.handler;
-          _this11.voiceInterface.sdk.registerToolHandler(name, handler);
+          _this12.voiceInterface.sdk.registerToolHandler(name, handler);
         });
         this._pendingClientTools = null;
         console.log('TTPChatWidget: Flushed pending client tools');
@@ -31531,10 +31594,13 @@ var TextInterface = /*#__PURE__*/function () {
   }, {
     key: "generateHTML",
     value: function generateHTML() {
-      var _this$config$panel, _this$config$sendButt, _this$config$panel2, _this$config$sendButt2, _this$config$panel3, _this$config$sendButt3, _this$config$panel4, _this$config$sendButt4, _this$config$panel5;
+      var _this$config$panel, _this$config$behavior, _this$config$sendButt, _this$config$panel2, _this$config$sendButt2, _this$config$panel3, _this$config$sendButt3, _this$config$panel4, _this$config$sendButt4, _this$config$panel5;
       // Use text config, fallback to panel config, then translation, then default
       var inputPlaceholder = this.config.inputPlaceholder || ((_this$config$panel = this.config.panel) === null || _this$config$panel === void 0 ? void 0 : _this$config$panel.inputPlaceholder) || this.t('typeMessage') || 'Type your message...';
-      return "<div class=\"text-interface\" id=\"textInterface\">\n      <div class=\"messages-container\" id=\"messagesContainer\">\n        <div class=\"empty-state\">\n          <div class=\"empty-state-icon\">\uD83D\uDCAC</div>\n          <div class=\"empty-state-title\">".concat(this.t('hello'), "</div>\n          <div class=\"empty-state-text\">").concat(this.t('sendMessage'), "</div>\n        </div>\n      </div>\n      <div class=\"input-container\">\n        <div class=\"input-wrapper\" style=\"flex:1;\">\n          <textarea class=\"message-input\" id=\"messageInput\" placeholder=\"").concat(inputPlaceholder, "\" rows=\"1\" dir=\"").concat(this.config.direction || 'ltr', "\"></textarea>\n        </div>\n        <button class=\"send-button\" id=\"sendButton\" aria-label=\"").concat(this.t('sendMessageAria'), "\">").concat(this.config.sendButtonText || '➤', "</button>\n        ").concat((_this$config$sendButt = this.config.sendButtonHint) !== null && _this$config$sendButt !== void 0 && _this$config$sendButt.text || (_this$config$panel2 = this.config.panel) !== null && _this$config$panel2 !== void 0 && (_this$config$panel2 = _this$config$panel2.sendButtonHint) !== null && _this$config$panel2 !== void 0 && _this$config$panel2.text ? "\n          <div class=\"send-button-hint\" style=\"color: ".concat(((_this$config$sendButt2 = this.config.sendButtonHint) === null || _this$config$sendButt2 === void 0 ? void 0 : _this$config$sendButt2.color) || ((_this$config$panel3 = this.config.panel) === null || _this$config$panel3 === void 0 || (_this$config$panel3 = _this$config$panel3.sendButtonHint) === null || _this$config$panel3 === void 0 ? void 0 : _this$config$panel3.color) || '#6B7280', "; font-size: ").concat(((_this$config$sendButt3 = this.config.sendButtonHint) === null || _this$config$sendButt3 === void 0 ? void 0 : _this$config$sendButt3.fontSize) || ((_this$config$panel4 = this.config.panel) === null || _this$config$panel4 === void 0 || (_this$config$panel4 = _this$config$panel4.sendButtonHint) === null || _this$config$panel4 === void 0 ? void 0 : _this$config$panel4.fontSize) || '12px', "; text-align: center; margin-top: 4px;\">\n            ").concat(((_this$config$sendButt4 = this.config.sendButtonHint) === null || _this$config$sendButt4 === void 0 ? void 0 : _this$config$sendButt4.text) || ((_this$config$panel5 = this.config.panel) === null || _this$config$panel5 === void 0 || (_this$config$panel5 = _this$config$panel5.sendButtonHint) === null || _this$config$panel5 === void 0 ? void 0 : _this$config$panel5.text), "\n          </div>\n        ") : '', "\n      </div>\n    </div>");
+      var unifiedMode = ((_this$config$behavior = this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mode) === 'unified';
+      var backArrow = this.config.direction === 'rtl' ? '→' : '←';
+      var backBar = unifiedMode ? "\n      <div class=\"text-interface-top-bar\">\n        <button type=\"button\" class=\"text-interface-back-btn\" id=\"textUnifiedBackBtn\" aria-label=\"".concat(this.t('back'), "\">\n          <span class=\"text-interface-back-icon\" aria-hidden=\"true\">").concat(backArrow, "</span>\n          <span class=\"text-interface-back-label\">").concat(this.t('back'), "</span>\n        </button>\n      </div>") : '';
+      return "<div class=\"text-interface\" id=\"textInterface\">\n      ".concat(backBar, "\n      <div class=\"messages-container\" id=\"messagesContainer\">\n        <div class=\"empty-state\">\n          <div class=\"empty-state-icon\">\uD83D\uDCAC</div>\n          <div class=\"empty-state-title\">").concat(this.t('hello'), "</div>\n          <div class=\"empty-state-text\">").concat(this.t('sendMessage'), "</div>\n        </div>\n      </div>\n      <div class=\"input-container\">\n        <div class=\"input-wrapper\" style=\"flex:1;\">\n          <textarea class=\"message-input\" id=\"messageInput\" placeholder=\"").concat(inputPlaceholder, "\" rows=\"1\" dir=\"").concat(this.config.direction || 'ltr', "\"></textarea>\n        </div>\n        <button class=\"send-button\" id=\"sendButton\" aria-label=\"").concat(this.t('sendMessageAria'), "\">").concat(this.config.sendButtonText || '➤', "</button>\n        ").concat((_this$config$sendButt = this.config.sendButtonHint) !== null && _this$config$sendButt !== void 0 && _this$config$sendButt.text || (_this$config$panel2 = this.config.panel) !== null && _this$config$panel2 !== void 0 && (_this$config$panel2 = _this$config$panel2.sendButtonHint) !== null && _this$config$panel2 !== void 0 && _this$config$panel2.text ? "\n          <div class=\"send-button-hint\" style=\"color: ".concat(((_this$config$sendButt2 = this.config.sendButtonHint) === null || _this$config$sendButt2 === void 0 ? void 0 : _this$config$sendButt2.color) || ((_this$config$panel3 = this.config.panel) === null || _this$config$panel3 === void 0 || (_this$config$panel3 = _this$config$panel3.sendButtonHint) === null || _this$config$panel3 === void 0 ? void 0 : _this$config$panel3.color) || '#6B7280', "; font-size: ").concat(((_this$config$sendButt3 = this.config.sendButtonHint) === null || _this$config$sendButt3 === void 0 ? void 0 : _this$config$sendButt3.fontSize) || ((_this$config$panel4 = this.config.panel) === null || _this$config$panel4 === void 0 || (_this$config$panel4 = _this$config$panel4.sendButtonHint) === null || _this$config$panel4 === void 0 ? void 0 : _this$config$panel4.fontSize) || '12px', "; text-align: center; margin-top: 4px;\">\n            ").concat(((_this$config$sendButt4 = this.config.sendButtonHint) === null || _this$config$sendButt4 === void 0 ? void 0 : _this$config$sendButt4.text) || ((_this$config$panel5 = this.config.panel) === null || _this$config$panel5 === void 0 || (_this$config$panel5 = _this$config$panel5.sendButtonHint) === null || _this$config$panel5 === void 0 ? void 0 : _this$config$panel5.text), "\n          </div>\n        ") : '', "\n      </div>\n    </div>");
     }
 
     /**
@@ -31563,7 +31629,7 @@ var TextInterface = /*#__PURE__*/function () {
 
       // Add !important to display rules when not using Shadow DOM (to override theme CSS)
       var important = this.config.useShadowDOM === false ? ' !important' : '';
-      return "\n      /* Messages container using new classes */\n      #messagesContainer { \n        flex: 1".concat(important, "; \n        overflow-y: auto").concat(important, "; \n        overflow-x: hidden").concat(important, "; \n        padding: 20px").concat(important, "; \n        background: #f8fafc").concat(important, "; \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, "; \n        gap: 16px").concat(important, "; \n        min-height: 0").concat(important, "; \n      }\n      .empty-state { \n        flex: 1").concat(important, "; \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, "; \n        align-items: center").concat(important, "; \n        justify-content: center").concat(important, "; \n        gap: 12px").concat(important, "; \n        color: #64748b").concat(important, "; \n        text-align: center").concat(important, "; \n        padding: 20px").concat(important, "; \n      }\n      .empty-state-icon { font-size: 48px").concat(important, "; opacity: 0.3").concat(important, "; }\n      .empty-state-title { font-size: 20px").concat(important, "; font-weight: 700").concat(important, "; color: #334155").concat(important, "; }\n      .empty-state-text { font-size: 13px").concat(important, "; max-width: 280px").concat(important, "; }\n\n      .text-interface { \n        display: none").concat(important, "; \n        flex: 1").concat(important, "; \n        flex-direction: column").concat(important, "; \n        min-height: 0").concat(important, "; \n        overflow: hidden").concat(important, "; \n      }\n      .text-interface.active { display: flex").concat(important, "; }\n      \n      .message { \n        display: flex").concat(important, "; \n        gap: 8px").concat(important, "; \n        padding: 4px 0").concat(important, "; \n        max-width: 100%").concat(important, "; \n        align-items: center").concat(important, "; \n      }\n      .message.edge-left { flex-direction: row").concat(important, "; }\n      .message.edge-right { flex-direction: row-reverse").concat(important, "; }\n      .message-bubble { \n        padding: 12px").concat(important, "; \n        border-radius: ").concat(messages.borderRadius, "px").concat(important, "; \n        max-width: 80%").concat(important, "; \n        font-size: ").concat(messages.fontSize, "; \n        word-wrap: break-word").concat(important, "; \n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, "; \n        direction: ").concat(this.config.direction || 'ltr', ";\n      }\n      .message.user .message-bubble { \n        background: ").concat(messages.userBackgroundColor).concat(important, "; \n        color: ").concat(messages.userTextColor || messages.textColor).concat(important, "; \n      }\n      .message.agent .message-bubble { \n        background: ").concat(messages.agentBackgroundColor).concat(important, "; \n        color: ").concat(messages.agentTextColor || messages.textColor).concat(important, "; \n      }\n      .message.user { \n        align-self: ").concat(this.config.direction === 'rtl' ? 'flex-start' : 'flex-end').concat(important, "; \n      }\n      .message.agent { \n        align-self: ").concat(this.config.direction === 'rtl' ? 'flex-end' : 'flex-start').concat(important, "; \n      }\n      .message .message-bubble { \n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left', " !important; \n      }\n      ").concat(this.config.direction === 'rtl' ? "\n      .message-bubble {\n        text-align: right !important;\n      }\n      " : '', "\n      .message-avatar { \n        width: 20px").concat(important, "; \n        height: 20px").concat(important, "; \n        display: flex").concat(important, "; \n        align-items: center").concat(important, "; \n        justify-content: center").concat(important, "; \n        flex-shrink: 0").concat(important, "; \n        color: inherit").concat(important, "; \n        font-size: 18px").concat(important, "; \n        line-height: 1").concat(important, "; \n        background: transparent").concat(important, "; \n        border: none").concat(important, "; \n      }\n      .message-avatar.user { background: transparent").concat(important, "; }\n      .message-avatar.agent { background: transparent").concat(important, "; }\n      \n      .message.system {\n        background: ").concat(messages.systemBackgroundColor, ";\n        align-self: flex-start").concat(important, ";\n      }\n      .message.error {\n        background: ").concat(messages.errorBackgroundColor, ";\n        align-self: flex-start").concat(important, ";\n      }\n      \n      .input-container {\n        display: flex").concat(important, ";\n        gap: 8px").concat(important, ";\n        padding: 12px 16px").concat(important, ";\n        background: #FFFFFF").concat(important, ";\n        border-top: 1px solid #E5E7EB").concat(important, ";\n        align-items: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        flex-direction: ").concat(this.config.direction === 'rtl' ? 'row-reverse' : 'row').concat(important, ";\n      }\n      \n      .input-wrapper {\n        position: relative").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      \n      .message-input {\n        width: 100%").concat(important, ";\n        min-height: 32px").concat(important, ";\n        max-height: 120px").concat(important, ";\n        padding: ").concat(inputPadding, ";\n        border: 1px solid ").concat(inputBorderColor, ";\n        border-radius: ").concat(inputBorderRadius, "px;\n        font-size: ").concat(inputFontSize, ";\n        font-family: inherit").concat(important, ";\n        line-height: 1.3").concat(important, ";\n        resize: none").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        background: ").concat(inputBackgroundColor, ";\n        color: ").concat(inputTextColor, ";\n        vertical-align: top").concat(important, ";\n        margin: 0").concat(important, ";\n        display: block").concat(important, ";\n        white-space: pre-wrap").concat(important, ";\n        word-wrap: break-word").concat(important, ";\n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, ";\n        direction: ").concat(this.config.direction || 'ltr', ";\n        -webkit-appearance: none").concat(important, ";\n        appearance: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      \n      .message-input:focus {\n        outline: none").concat(important, ";\n        border-color: ").concat(inputFocusColor, ";\n        background: ").concat(inputBackgroundColor === '#FFFFFF' ? '#FFFFFF' : inputBackgroundColor).concat(important, ";\n        box-shadow: 0 0 0 3px ").concat(inputFocusColor, "33;\n      }\n      \n      .message-input::placeholder {\n        color: #9CA3AF").concat(important, ";\n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, ";\n      }\n      \n      .send-button {\n        width: 40px").concat(important, ";\n        height: 40px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: ").concat(sendButtonColor, ";\n        color: ").concat(sendButtonTextColor, ";\n        font-size: ").concat(this.config.sendButtonFontSize || ((_this$config$panel15 = this.config.panel) === null || _this$config$panel15 === void 0 ? void 0 : _this$config$panel15.sendButtonFontSize) || '18px', ";\n        font-weight: ").concat(this.config.sendButtonFontWeight || ((_this$config$panel16 = this.config.panel) === null || _this$config$panel16 === void 0 ? void 0 : _this$config$panel16.sendButtonFontWeight) || '500', ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n        box-shadow: 0 4px 12px rgba(124, 60, 237, 0.3)").concat(important, ";\n      }\n      \n      .send-button:hover:not(:disabled) {\n        background: ").concat(sendButtonHoverColor, ";\n        transform: scale(1.05)").concat(important, ";\n        box-shadow: 0 6px 16px rgba(124, 60, 237, 0.4)").concat(important, ";\n      }\n      \n      .send-button-hint {\n        width: 100%").concat(important, ";\n        text-align: center").concat(important, ";\n        margin-top: 4px").concat(important, ";\n      }\n      \n      .send-button:disabled {\n        opacity: 0.5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n      \n      .typing-indicator {\n        display: inline-flex").concat(important, ";\n        gap: 4px").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      \n      .typing-dot {\n        width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: #64748b").concat(important, ";\n        animation: typingDot 1.4s ease-in-out infinite").concat(important, ";\n      }\n      \n      .typing-dot:nth-child(2) { animation-delay: 0.2s").concat(important, "; }\n      .typing-dot:nth-child(3) { animation-delay: 0.4s").concat(important, "; }\n      \n      @keyframes typingDot {\n        0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }\n        30% { transform: translateY(-8px); opacity: 1; }\n      }\n      \n      .error-message {\n        padding: 12px").concat(important, ";\n        background: ").concat(messages.errorBackgroundColor, ";\n        border-radius: ").concat(messages.borderRadius, "px;\n        color: #991B1B").concat(important, ";\n        font-size: ").concat(messages.fontSize, ";\n        margin: 8px 0").concat(important, ";\n      }\n      \n      @media (max-width: 768px) {\n        #messagesContainer {\n          padding: 12px").concat(important, ";\n          gap: 12px").concat(important, ";\n        }\n        \n        .message-bubble {\n          max-width: 85%").concat(important, ";\n          font-size: 14px").concat(important, ";\n          padding: 10px").concat(important, ";\n        }\n        \n        .text-input-container {\n          padding: 10px").concat(important, ";\n          gap: 8px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 10px 14px").concat(important, ";\n          min-height: 44px").concat(important, ";\n        }\n        \n        #text-chat-send {\n          min-width: 56px").concat(important, ";\n          min-height: 44px").concat(important, ";\n          width: 56px").concat(important, ";\n          height: 44px").concat(important, ";\n        }\n        \n        .empty-state-icon {\n          font-size: 40px").concat(important, ";\n        }\n        \n        .empty-state-title {\n          font-size: 18px").concat(important, ";\n        }\n        \n        .empty-state-text {\n          font-size: 12px").concat(important, ";\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #messagesContainer {\n          padding: 10px").concat(important, ";\n          gap: 10px").concat(important, ";\n        }\n        \n        .message-bubble {\n          max-width: 90%").concat(important, ";\n          font-size: 13px").concat(important, ";\n          padding: 8px").concat(important, ";\n        }\n        \n        .text-input-container {\n          padding: 8px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important;\n          padding: 8px 12px").concat(important, ";\n        }\n      }\n    ");
+      return "\n      .text-interface-top-bar {\n        flex-shrink: 0".concat(important, ";\n        padding: 10px 12px 8px").concat(important, ";\n        border-bottom: 1px solid #E5E7EB").concat(important, ";\n        background: #FFFFFF").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      .text-interface-back-btn {\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 6px").concat(important, ";\n        padding: 6px 10px").concat(important, ";\n        margin: 0").concat(important, ";\n        border: none").concat(important, ";\n        border-radius: 8px").concat(important, ";\n        background: transparent").concat(important, ";\n        color: #475569").concat(important, ";\n        font-size: 14px").concat(important, ";\n        font-weight: 600").concat(important, ";\n        cursor: pointer").concat(important, ";\n        font-family: inherit").concat(important, ";\n      }\n      .text-interface-back-btn:hover {\n        background: #f1f5f9").concat(important, ";\n        color: #334155").concat(important, ";\n      }\n      .text-interface-back-icon {\n        font-size: 16px").concat(important, ";\n        line-height: 1").concat(important, ";\n      }\n      .text-interface-back-label {\n        line-height: 1.2").concat(important, ";\n      }\n      /* Messages container using new classes */\n      #messagesContainer { \n        flex: 1").concat(important, "; \n        overflow-y: auto").concat(important, "; \n        overflow-x: hidden").concat(important, "; \n        padding: 20px").concat(important, "; \n        background: #f8fafc").concat(important, "; \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, "; \n        gap: 16px").concat(important, "; \n        min-height: 0").concat(important, "; \n      }\n      .empty-state { \n        flex: 1").concat(important, "; \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, "; \n        align-items: center").concat(important, "; \n        justify-content: center").concat(important, "; \n        gap: 12px").concat(important, "; \n        color: #64748b").concat(important, "; \n        text-align: center").concat(important, "; \n        padding: 20px").concat(important, "; \n      }\n      .empty-state-icon { font-size: 48px").concat(important, "; opacity: 0.3").concat(important, "; }\n      .empty-state-title { font-size: 20px").concat(important, "; font-weight: 700").concat(important, "; color: #334155").concat(important, "; }\n      .empty-state-text { font-size: 13px").concat(important, "; max-width: 280px").concat(important, "; }\n\n      .text-interface { \n        display: none").concat(important, "; \n        flex: 1").concat(important, "; \n        flex-direction: column").concat(important, "; \n        min-height: 0").concat(important, "; \n        overflow: hidden").concat(important, "; \n      }\n      .text-interface.active { display: flex").concat(important, "; }\n      \n      .message { \n        display: flex").concat(important, "; \n        gap: 8px").concat(important, "; \n        padding: 4px 0").concat(important, "; \n        max-width: 100%").concat(important, "; \n        align-items: center").concat(important, "; \n      }\n      .message.edge-left { flex-direction: row").concat(important, "; }\n      .message.edge-right { flex-direction: row-reverse").concat(important, "; }\n      .message-bubble { \n        padding: 12px").concat(important, "; \n        border-radius: ").concat(messages.borderRadius, "px").concat(important, "; \n        max-width: 80%").concat(important, "; \n        font-size: ").concat(messages.fontSize, "; \n        word-wrap: break-word").concat(important, "; \n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, "; \n        direction: ").concat(this.config.direction || 'ltr', ";\n      }\n      .message.user .message-bubble { \n        background: ").concat(messages.userBackgroundColor).concat(important, "; \n        color: ").concat(messages.userTextColor || messages.textColor).concat(important, "; \n      }\n      .message.agent .message-bubble { \n        background: ").concat(messages.agentBackgroundColor).concat(important, "; \n        color: ").concat(messages.agentTextColor || messages.textColor).concat(important, "; \n      }\n      .message.user { \n        align-self: ").concat(this.config.direction === 'rtl' ? 'flex-start' : 'flex-end').concat(important, "; \n      }\n      .message.agent { \n        align-self: ").concat(this.config.direction === 'rtl' ? 'flex-end' : 'flex-start').concat(important, "; \n      }\n      .message .message-bubble { \n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left', " !important; \n      }\n      ").concat(this.config.direction === 'rtl' ? "\n      .message-bubble {\n        text-align: right !important;\n      }\n      " : '', "\n      .message-avatar { \n        width: 20px").concat(important, "; \n        height: 20px").concat(important, "; \n        display: flex").concat(important, "; \n        align-items: center").concat(important, "; \n        justify-content: center").concat(important, "; \n        flex-shrink: 0").concat(important, "; \n        color: inherit").concat(important, "; \n        font-size: 18px").concat(important, "; \n        line-height: 1").concat(important, "; \n        background: transparent").concat(important, "; \n        border: none").concat(important, "; \n      }\n      .message-avatar.user { background: transparent").concat(important, "; }\n      .message-avatar.agent { background: transparent").concat(important, "; }\n      \n      .message.system {\n        background: ").concat(messages.systemBackgroundColor, ";\n        align-self: flex-start").concat(important, ";\n      }\n      .message.error {\n        background: ").concat(messages.errorBackgroundColor, ";\n        align-self: flex-start").concat(important, ";\n      }\n      \n      .input-container {\n        display: flex").concat(important, ";\n        gap: 8px").concat(important, ";\n        padding: 12px 16px").concat(important, ";\n        background: #FFFFFF").concat(important, ";\n        border-top: 1px solid #E5E7EB").concat(important, ";\n        align-items: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        flex-direction: ").concat(this.config.direction === 'rtl' ? 'row-reverse' : 'row').concat(important, ";\n      }\n      \n      .input-wrapper {\n        position: relative").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      \n      .message-input {\n        width: 100%").concat(important, ";\n        min-height: 32px").concat(important, ";\n        max-height: 120px").concat(important, ";\n        padding: ").concat(inputPadding, ";\n        border: 1px solid ").concat(inputBorderColor, ";\n        border-radius: ").concat(inputBorderRadius, "px;\n        font-size: ").concat(inputFontSize, ";\n        font-family: inherit").concat(important, ";\n        line-height: 1.3").concat(important, ";\n        resize: none").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        background: ").concat(inputBackgroundColor, ";\n        color: ").concat(inputTextColor, ";\n        vertical-align: top").concat(important, ";\n        margin: 0").concat(important, ";\n        display: block").concat(important, ";\n        white-space: pre-wrap").concat(important, ";\n        word-wrap: break-word").concat(important, ";\n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, ";\n        direction: ").concat(this.config.direction || 'ltr', ";\n        -webkit-appearance: none").concat(important, ";\n        appearance: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      \n      .message-input:focus {\n        outline: none").concat(important, ";\n        border-color: ").concat(inputFocusColor, ";\n        background: ").concat(inputBackgroundColor === '#FFFFFF' ? '#FFFFFF' : inputBackgroundColor).concat(important, ";\n        box-shadow: 0 0 0 3px ").concat(inputFocusColor, "33;\n      }\n      \n      .message-input::placeholder {\n        color: #9CA3AF").concat(important, ";\n        text-align: ").concat(this.config.direction === 'rtl' ? 'right' : 'left').concat(important, ";\n      }\n      \n      .send-button {\n        width: 40px").concat(important, ";\n        height: 40px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: ").concat(sendButtonColor, ";\n        color: ").concat(sendButtonTextColor, ";\n        font-size: ").concat(this.config.sendButtonFontSize || ((_this$config$panel15 = this.config.panel) === null || _this$config$panel15 === void 0 ? void 0 : _this$config$panel15.sendButtonFontSize) || '18px', ";\n        font-weight: ").concat(this.config.sendButtonFontWeight || ((_this$config$panel16 = this.config.panel) === null || _this$config$panel16 === void 0 ? void 0 : _this$config$panel16.sendButtonFontWeight) || '500', ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n        box-shadow: 0 4px 12px rgba(124, 60, 237, 0.3)").concat(important, ";\n      }\n      \n      .send-button:hover:not(:disabled) {\n        background: ").concat(sendButtonHoverColor, ";\n        transform: scale(1.05)").concat(important, ";\n        box-shadow: 0 6px 16px rgba(124, 60, 237, 0.4)").concat(important, ";\n      }\n      \n      .send-button-hint {\n        width: 100%").concat(important, ";\n        text-align: center").concat(important, ";\n        margin-top: 4px").concat(important, ";\n      }\n      \n      .send-button:disabled {\n        opacity: 0.5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n      \n      .typing-indicator {\n        display: inline-flex").concat(important, ";\n        gap: 4px").concat(important, ";\n        align-items: center").concat(important, ";\n      }\n      \n      .typing-dot {\n        width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: #64748b").concat(important, ";\n        animation: typingDot 1.4s ease-in-out infinite").concat(important, ";\n      }\n      \n      .typing-dot:nth-child(2) { animation-delay: 0.2s").concat(important, "; }\n      .typing-dot:nth-child(3) { animation-delay: 0.4s").concat(important, "; }\n      \n      @keyframes typingDot {\n        0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }\n        30% { transform: translateY(-8px); opacity: 1; }\n      }\n      \n      .error-message {\n        padding: 12px").concat(important, ";\n        background: ").concat(messages.errorBackgroundColor, ";\n        border-radius: ").concat(messages.borderRadius, "px;\n        color: #991B1B").concat(important, ";\n        font-size: ").concat(messages.fontSize, ";\n        margin: 8px 0").concat(important, ";\n      }\n      \n      @media (max-width: 768px) {\n        #messagesContainer {\n          padding: 12px").concat(important, ";\n          gap: 12px").concat(important, ";\n        }\n        \n        .message-bubble {\n          max-width: 85%").concat(important, ";\n          font-size: 14px").concat(important, ";\n          padding: 10px").concat(important, ";\n        }\n        \n        .text-input-container {\n          padding: 10px").concat(important, ";\n          gap: 8px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important; /* Prevents iOS zoom on focus */\n          padding: 10px 14px").concat(important, ";\n          min-height: 44px").concat(important, ";\n        }\n        \n        #text-chat-send {\n          min-width: 56px").concat(important, ";\n          min-height: 44px").concat(important, ";\n          width: 56px").concat(important, ";\n          height: 44px").concat(important, ";\n        }\n        \n        .empty-state-icon {\n          font-size: 40px").concat(important, ";\n        }\n        \n        .empty-state-title {\n          font-size: 18px").concat(important, ";\n        }\n        \n        .empty-state-text {\n          font-size: 12px").concat(important, ";\n        }\n      }\n      \n      @media (max-width: 480px) {\n        #messagesContainer {\n          padding: 10px").concat(important, ";\n          gap: 10px").concat(important, ";\n        }\n        \n        .message-bubble {\n          max-width: 90%").concat(important, ";\n          font-size: 13px").concat(important, ";\n          padding: 8px").concat(important, ";\n        }\n        \n        .text-input-container {\n          padding: 8px").concat(important, ";\n        }\n        \n        #text-chat-input {\n          font-size: 16px !important;\n          padding: 8px 12px").concat(important, ";\n        }\n      }\n    ");
     }
 
     /**
@@ -31964,16 +32030,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   VoiceInterface: () => (/* binding */ VoiceInterface)
 /* harmony export */ });
 /* harmony import */ var _index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../index.js */ "./src/index.js");
-/* harmony import */ var _shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../shared/MicPermissionUtils.js */ "./src/shared/MicPermissionUtils.js");
-/* harmony import */ var _shared_applyDelay_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../shared/applyDelay.js */ "./src/shared/applyDelay.js");
-/* harmony import */ var _shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shared/MicPermissionModals.js */ "./src/shared/MicPermissionModals.js");
-/* harmony import */ var _voice_templates_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./voice/templates.js */ "./src/widget/voice/templates.js");
-/* harmony import */ var _voice_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./voice/styles.js */ "./src/widget/voice/styles.js");
-/* harmony import */ var _voice_transcript_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./voice/transcript.js */ "./src/widget/voice/transcript.js");
-/* harmony import */ var _voice_textHandlers_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./voice/textHandlers.js */ "./src/widget/voice/textHandlers.js");
-/* harmony import */ var _voice_handlers_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./voice/handlers.js */ "./src/widget/voice/handlers.js");
-/* harmony import */ var _voice_desktop_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./voice/desktop.js */ "./src/widget/voice/desktop.js");
-/* harmony import */ var _voice_mobile_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./voice/mobile.js */ "./src/widget/voice/mobile.js");
+/* harmony import */ var _core_AudioRecorder_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../core/AudioRecorder.js */ "./src/core/AudioRecorder.js");
+/* harmony import */ var _shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../shared/MicPermissionUtils.js */ "./src/shared/MicPermissionUtils.js");
+/* harmony import */ var _shared_applyDelay_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shared/applyDelay.js */ "./src/shared/applyDelay.js");
+/* harmony import */ var _shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../shared/MicPermissionModals.js */ "./src/shared/MicPermissionModals.js");
+/* harmony import */ var _voice_templates_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./voice/templates.js */ "./src/widget/voice/templates.js");
+/* harmony import */ var _voice_styles_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./voice/styles.js */ "./src/widget/voice/styles.js");
+/* harmony import */ var _voice_transcript_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./voice/transcript.js */ "./src/widget/voice/transcript.js");
+/* harmony import */ var _voice_textHandlers_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./voice/textHandlers.js */ "./src/widget/voice/textHandlers.js");
+/* harmony import */ var _voice_handlers_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./voice/handlers.js */ "./src/widget/voice/handlers.js");
+/* harmony import */ var _voice_desktop_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./voice/desktop.js */ "./src/widget/voice/desktop.js");
+/* harmony import */ var _voice_mobile_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./voice/mobile.js */ "./src/widget/voice/mobile.js");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
@@ -32001,9 +32068,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
+
 var VoiceInterface = /*#__PURE__*/function () {
   function VoiceInterface(config) {
-    var _config$agentSettings;
+    var _this$config$behavior, _config$agentSettings;
     _classCallCheck(this, VoiceInterface);
     this.config = config;
     this.audioStream = null;
@@ -32016,9 +32084,10 @@ var VoiceInterface = /*#__PURE__*/function () {
     this.shadowRoot = config.shadowRoot || document;
     // Text SDK reference for sending text messages during voice calls
     this.textSDK = config.textSDK || null;
-    // Mobile detection
-    this.deviceInfo = (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_1__.getDeviceInfo)();
-    this.isMobile = this.deviceInfo.isMobile;
+    // Mobile voice UI: native iOS/Android, or narrow + touch (WebViews with desktop UA)
+    this.deviceInfo = (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_2__.getDeviceInfo)();
+    var explicitMobileVoice = this.config.mobileVoiceUI !== undefined ? this.config.mobileVoiceUI : (_this$config$behavior = this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mobileVoiceUI;
+    this.isMobile = explicitMobileVoice === true ? true : explicitMobileVoice === false ? false : (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_2__.shouldUseMobileVoiceCallUI)();
     // Conversation messages for mobile UI (owned by mobile module, initialized there)
     // Desktop conversation state
     this.conversationExpanded = false;
@@ -32057,13 +32126,13 @@ var VoiceInterface = /*#__PURE__*/function () {
     });
 
     // Initialize modules with context (delegation pattern)
-    this.templates = new _voice_templates_js__WEBPACK_IMPORTED_MODULE_4__.Templates(this);
-    this.styles = new _voice_styles_js__WEBPACK_IMPORTED_MODULE_5__.Styles(this);
-    this.transcript = new _voice_transcript_js__WEBPACK_IMPORTED_MODULE_6__.Transcript(this);
-    this.textHandlers = new _voice_textHandlers_js__WEBPACK_IMPORTED_MODULE_7__.TextHandlers(this);
-    this.handlers = new _voice_handlers_js__WEBPACK_IMPORTED_MODULE_8__.Handlers(this);
-    this.desktop = new _voice_desktop_js__WEBPACK_IMPORTED_MODULE_9__.Desktop(this);
-    this.mobile = new _voice_mobile_js__WEBPACK_IMPORTED_MODULE_10__.Mobile(this);
+    this.templates = new _voice_templates_js__WEBPACK_IMPORTED_MODULE_5__.Templates(this);
+    this.styles = new _voice_styles_js__WEBPACK_IMPORTED_MODULE_6__.Styles(this);
+    this.transcript = new _voice_transcript_js__WEBPACK_IMPORTED_MODULE_7__.Transcript(this);
+    this.textHandlers = new _voice_textHandlers_js__WEBPACK_IMPORTED_MODULE_8__.TextHandlers(this);
+    this.handlers = new _voice_handlers_js__WEBPACK_IMPORTED_MODULE_9__.Handlers(this);
+    this.desktop = new _voice_desktop_js__WEBPACK_IMPORTED_MODULE_10__.Desktop(this);
+    this.mobile = new _voice_mobile_js__WEBPACK_IMPORTED_MODULE_11__.Mobile(this);
 
     // Setup SDK event handlers
     this.setupSDKEventHandlers();
@@ -32140,27 +32209,8 @@ var VoiceInterface = /*#__PURE__*/function () {
         }
         _this._pendingUserTranscriptFrame = requestAnimationFrame(function () {
           _this._pendingUserTranscriptFrame = null;
-          var mobileBar = document.getElementById('mobile-voice-call-bar-container');
-          if (mobileBar) {
-            var mobileTranscriptText = mobileBar.querySelector('#mobileTranscriptText');
-            if (mobileTranscriptText) {
-              mobileTranscriptText.textContent = 'You: ' + text;
-              mobileTranscriptText.style.color = '#fde68a';
-            }
-          } else {
-            var liveTextCollapsed = _this.shadowRoot.getElementById('liveTextCollapsed');
-            if (liveTextCollapsed) {
-              liveTextCollapsed.textContent = '';
-              liveTextCollapsed.classList.remove('muted');
-              liveTextCollapsed.style.color = '#e8e4f0';
-              var label = document.createElement('span');
-              label.style.fontWeight = '600';
-              label.style.color = '#c4b5fd';
-              label.textContent = 'You: ';
-              liveTextCollapsed.appendChild(label);
-              liveTextCollapsed.appendChild(document.createTextNode(text));
-            }
-          }
+          var userPrefix = _this.getUserTranscriptPrefix();
+          _this._renderUserLiveTranscriptSnippet(userPrefix, text);
         });
 
         // History update is synchronous (small, only on final)
@@ -32378,6 +32428,64 @@ var VoiceInterface = /*#__PURE__*/function () {
       // Fall back to translation system
       return this.t(translationKey);
     }
+
+    /** Prefix before interim/final user speech in the live transcript strip (not history bubbles). */
+  }, {
+    key: "getUserTranscriptPrefix",
+    value: function getUserTranscriptPrefix() {
+      return this.getText('userTranscriptPrefix', 'userTranscriptPrefix');
+    }
+
+    /**
+     * Live user STT line: correct RTL/LTR order, visible gap after "אתה:", and sensible ? placement (utterance in dir=auto).
+     */
+  }, {
+    key: "_renderUserLiveTranscriptSnippet",
+    value: function _renderUserLiveTranscriptSnippet(userPrefix, text) {
+      var isRtl = this.config.direction === 'rtl';
+      var raw = userPrefix !== undefined && userPrefix !== null ? String(userPrefix) : '';
+      var trimmedPrefix = raw.replace(/\s+$/, '');
+      var sepChar = isRtl ? "\xA0" : ' ';
+      var mobileBar = document.getElementById('mobile-voice-call-bar-container');
+      if (mobileBar) {
+        var el = mobileBar.querySelector('#mobileTranscriptText');
+        if (!el) return;
+        el.textContent = '';
+        el.setAttribute('dir', isRtl ? 'rtl' : 'ltr');
+        if (trimmedPrefix) {
+          var prefixSpan = document.createElement('span');
+          prefixSpan.style.fontWeight = '600';
+          prefixSpan.style.color = '#c4b5fd';
+          prefixSpan.textContent = trimmedPrefix;
+          el.appendChild(prefixSpan);
+          el.appendChild(document.createTextNode(sepChar));
+        }
+        var utter = document.createElement('span');
+        utter.setAttribute('dir', 'auto');
+        utter.textContent = text;
+        el.appendChild(utter);
+        el.style.color = '#fde68a';
+        return;
+      }
+      var liveTextCollapsed = this.shadowRoot.getElementById('liveTextCollapsed');
+      if (!liveTextCollapsed) return;
+      liveTextCollapsed.textContent = '';
+      liveTextCollapsed.classList.remove('muted');
+      liveTextCollapsed.style.color = '#e8e4f0';
+      liveTextCollapsed.setAttribute('dir', isRtl ? 'rtl' : 'ltr');
+      if (trimmedPrefix) {
+        var _prefixSpan = document.createElement('span');
+        _prefixSpan.className = 'name ttp-user-live-prefix';
+        _prefixSpan.textContent = trimmedPrefix;
+        liveTextCollapsed.appendChild(_prefixSpan);
+        liveTextCollapsed.appendChild(document.createTextNode(sepChar));
+      }
+      var utterance = document.createElement('span');
+      utterance.className = 'ttp-user-live-utterance';
+      utterance.setAttribute('dir', 'auto');
+      utterance.textContent = text;
+      liveTextCollapsed.appendChild(utterance);
+    }
   }, {
     key: "getTooltip",
     value: function getTooltip(key) {
@@ -32585,7 +32693,7 @@ var VoiceInterface = /*#__PURE__*/function () {
     value: (function () {
       var _startVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
         var _this2 = this;
-        var permissionState, deviceInfo, idleState, activeState;
+        var permissionState, deviceInfo, idleState, activeState, mobilePanelPrePrompt, mobilePanelWasOpen;
         return _regenerator().w(function (_context4) {
           while (1) switch (_context4.n) {
             case 0:
@@ -32600,7 +32708,7 @@ var VoiceInterface = /*#__PURE__*/function () {
 
               // Check permission state first
               _context4.n = 2;
-              return (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_1__.checkPermissionState)();
+              return (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_2__.checkPermissionState)();
             case 2:
               permissionState = _context4.v;
               console.log("\uD83D\uDCCB Current permission state: ".concat(permissionState));
@@ -32613,8 +32721,8 @@ var VoiceInterface = /*#__PURE__*/function () {
               console.log('🚫 Permission is denied, showing blocked modal...');
               // Reset connecting state since we're not proceeding
               this.resetConnectingState();
-              deviceInfo = (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_1__.getDeviceInfo)();
-              (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_3__.showBlockedModal)(function () {
+              deviceInfo = (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_2__.getDeviceInfo)();
+              (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_4__.showBlockedModal)(function () {
                 // Modal closed - user can try again
                 console.log('Blocked modal closed');
               }, function () {
@@ -32629,14 +32737,28 @@ var VoiceInterface = /*#__PURE__*/function () {
                 break;
               }
               console.log('📋 Permission is in prompt state, showing pre-prompt modal with call view...');
-
-              // Switch UI to active call view so it's visible behind the modal
               idleState = this.shadowRoot.getElementById('voiceIdleState');
-              activeState = this.shadowRoot.getElementById('voiceActiveState');
-              if (idleState) idleState.style.display = 'none';
-              if (activeState) activeState.style.display = 'flex';
+              activeState = this.shadowRoot.getElementById('voiceActiveState'); // Desktop: show in-panel active call behind the semi-transparent overlay.
+              // Mobile: do NOT show #voiceActiveState — it is only a non-fixed placeholder; flex layout
+              // pins the fake bar to the top of the panel. Real chrome is body-fixed in proceedWithVoiceCall().
+              mobilePanelPrePrompt = null;
+              mobilePanelWasOpen = false;
+              if (this.isMobile) {
+                if (idleState) idleState.style.display = 'none';
+                if (activeState) activeState.style.display = 'none';
+                // Empty open panel reads as a dark "shadow" behind the sheet — hide it until cancel or call end
+                mobilePanelPrePrompt = this.shadowRoot.getElementById('text-chat-panel') || document.getElementById('text-chat-panel');
+                if (mobilePanelPrePrompt) {
+                  mobilePanelWasOpen = mobilePanelPrePrompt.classList.contains('open');
+                  mobilePanelPrePrompt.classList.remove('open');
+                  mobilePanelPrePrompt.style.display = 'none';
+                }
+              } else {
+                if (idleState) idleState.style.display = 'none';
+                if (activeState) activeState.style.display = 'flex';
+              }
               return _context4.a(2, new Promise(function (resolve, reject) {
-                (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_3__.showPrePromptModal)(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+                (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_4__.showPrePromptModal)(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
                   var _t;
                   return _regenerator().w(function (_context3) {
                     while (1) switch (_context3.p = _context3.n) {
@@ -32662,6 +32784,10 @@ var VoiceInterface = /*#__PURE__*/function () {
                   // Revert UI back to idle state
                   if (idleState) idleState.style.display = 'flex';
                   if (activeState) activeState.style.display = 'none';
+                  if (_this2.isMobile && mobilePanelPrePrompt) {
+                    mobilePanelPrePrompt.style.display = '';
+                    if (mobilePanelWasOpen) mobilePanelPrePrompt.classList.add('open');
+                  }
                   _this2.resetConnectingState();
                   reject(new Error('Call cancelled by user'));
                 });
@@ -32682,17 +32808,52 @@ var VoiceInterface = /*#__PURE__*/function () {
     /**
      * Proceed with voice call after permission check/pre-prompt
      */
+    /**
+     * Show server-driven disclaimer and send disclaimer_ack (voice protocol).
+     */
     )
   }, {
-    key: "proceedWithVoiceCall",
+    key: "resolveServerDisclaimer",
     value: (function () {
-      var _proceedWithVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
-        var _this3 = this;
-        var isResumeCall, panel, header, toggleText, originalSection, compactSection, idleState, _panel, fallbackPanel, preliminaryInputStream, floatingButton, fallbackButton, mobileFabGrant, existingBar, _floatingButton, _fallbackButton, mobileFabDeny, _idleState, _panel2, _fallbackPanel, deviceInfo, _idleState2, activeState, voiceInterface, _this$config$connecti, delayConfig, connected, serverRejected, originalOnError, originalOnDisconnected, attempts, streamToUse, _this$sdk$voiceSDK, error, _existingBar, _existingBar2, _idleState3, _panel3, _fallbackPanel2, _floatingButton2, _fallbackButton2, updateTimer, _streamToUse, _existingBar3, _existingBar4, _idleState4, _panel4, _fallbackPanel3, _floatingButton3, _fallbackButton3, _updateTimer, _deviceInfo, _t2, _t3, _t4, _t5, _t6, _t7;
+      var _resolveServerDisclaimer = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(voiceSDK) {
+        var _payload$texts;
+        var payload, texts;
         return _regenerator().w(function (_context5) {
-          while (1) switch (_context5.p = _context5.n) {
+          while (1) switch (_context5.n) {
             case 0:
-              _context5.p = 0;
+              payload = voiceSDK.lastDisclaimerPayload;
+              texts = payload !== null && payload !== void 0 && (_payload$texts = payload.texts) !== null && _payload$texts !== void 0 && _payload$texts.length ? payload.texts : ['Please confirm to continue.'];
+              return _context5.a(2, new Promise(function (resolve, reject) {
+                (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_4__.showServerDisclaimerModal)({
+                  texts: texts,
+                  onAccept: function onAccept() {
+                    voiceSDK.sendDisclaimerAck(true);
+                    resolve();
+                  },
+                  onCancel: function onCancel() {
+                    voiceSDK.sendDisclaimerAck(false);
+                    reject(new Error('DISCLAIMER_DECLINED'));
+                  }
+                });
+              }));
+          }
+        }, _callee5);
+      }));
+      function resolveServerDisclaimer(_x3) {
+        return _resolveServerDisclaimer.apply(this, arguments);
+      }
+      return resolveServerDisclaimer;
+    }())
+  }, {
+    key: "proceedWithVoiceCall",
+    value: function () {
+      var _proceedWithVoiceCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+        var _this3 = this;
+        var isResumeCall, panel, header, toggleText, originalSection, compactSection, idleState, _panel, fallbackPanel, preliminaryInputStream, _this$config$inputFor, primeSr, floatingButton, fallbackButton, mobileFabGrant, existingBar, _floatingButton, _fallbackButton, mobileFabDeny, _idleState, _panel2, _fallbackPanel, deviceInfo, _idleState2, activeState, voiceInterface, _this$config$connecti, delayConfig, connected, serverRejected, originalOnError, originalOnDisconnected, attempts, serverDisclaimerHandled, vs, streamToUse, _this$sdk$voiceSDK, error, _existingBar, _existingBar2, _idleState3, _panel3, _fallbackPanel2, _floatingButton2, _fallbackButton2, updateTimer, _streamToUse, _existingBar3, _existingBar4, _idleState4, _panel4, _fallbackPanel3, _floatingButton3, _fallbackButton3, _updateTimer, _deviceInfo, _t2, _t3, _t4, _t5, _t6, _t7, _t8;
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.p = _context6.n) {
+            case 0:
+              _context6.p = 0;
               // Clear conversation history for new calls (but preserve it for resume calls)
               isResumeCall = this._resumeInfo !== null && this._resumeInfo !== undefined;
               if (!isResumeCall) {
@@ -32728,7 +32889,7 @@ var VoiceInterface = /*#__PURE__*/function () {
 
               // First, handle UI state changes (but don't create mobile bar yet)
               if (!this.isMobile) {
-                _context5.n = 5;
+                _context6.n = 6;
                 break;
               }
               // On mobile, hide widget panel immediately (but keep floating button visible)
@@ -32753,22 +32914,30 @@ var VoiceInterface = /*#__PURE__*/function () {
                 }
               }
 
+              // Body-fixed bar must exist during the native browser mic prompt — otherwise the screen is blank
+              this.showMobileCallBarAwaitingBrowserMic();
+
               // CRITICAL for mobile: Request permission BEFORE connecting to WebSocket
               // This prevents the agent from starting to speak before permission is granted
               // ELEVENLABS PATTERN: Minimal constraints for first getUserMedia, keep stream alive,
               // pass it to AudioRecorder so we never call getUserMedia twice (iOS fails with 2 streams).
               console.log('📱 Mobile device - requesting mic permission before connecting...');
               preliminaryInputStream = null;
-              _context5.p = 1;
-              _context5.n = 2;
+              _context6.p = 1;
+              _context6.n = 2;
               return navigator.mediaDevices.getUserMedia({
                 audio: true
               });
             case 2:
-              preliminaryInputStream = _context5.v;
+              preliminaryInputStream = _context6.v;
               // DO NOT stop the stream here - keep it alive until startListening completes
               this._preliminaryInputStream = preliminaryInputStream;
               console.log('✅ Mobile: Microphone permission granted - keeping stream alive (ElevenLabs pattern)');
+              primeSr = ((_this$config$inputFor = this.config.inputFormat) === null || _this$config$inputFor === void 0 ? void 0 : _this$config$inputFor.sampleRate) || this.config.sampleRate || 16000;
+              _context6.n = 3;
+              return _core_AudioRecorder_js__WEBPACK_IMPORTED_MODULE_1__["default"].primeSharedContext(primeSr);
+            case 3:
+              this.applyMobileBarConnectingCopy();
 
               // NOW hide the floating button too (permission granted)
               floatingButton = this.shadowRoot.getElementById('text-chat-button');
@@ -32784,11 +32953,11 @@ var VoiceInterface = /*#__PURE__*/function () {
               }
               mobileFabGrant = this.shadowRoot.querySelector('.ttp-mobile-fab');
               if (mobileFabGrant) mobileFabGrant.style.display = 'none';
-              _context5.n = 4;
+              _context6.n = 5;
               break;
-            case 3:
-              _context5.p = 3;
-              _t2 = _context5.v;
+            case 4:
+              _context6.p = 4;
+              _t2 = _context6.v;
               console.error('❌ Mobile: Permission denied before connecting:', _t2);
               // Permission was denied - reset connecting state and restore UI
               this.resetConnectingState();
@@ -32828,24 +32997,24 @@ var VoiceInterface = /*#__PURE__*/function () {
               }
 
               // Show blocked modal
-              deviceInfo = (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_1__.getDeviceInfo)();
-              (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_3__.showBlockedModal)(function () {
+              deviceInfo = (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_2__.getDeviceInfo)();
+              (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_4__.showBlockedModal)(function () {
                 _this3.resetUIState();
               }, function () {
                 window.location.reload();
               });
-              return _context5.a(2);
-            case 4:
-              _context5.n = 6;
-              break;
+              return _context6.a(2);
             case 5:
+              _context6.n = 7;
+              break;
+            case 6:
               // Desktop: Reset connecting state, then hide idle state and show active state
               this.resetConnectingState();
               _idleState2 = this.shadowRoot.getElementById('voiceIdleState');
               activeState = this.shadowRoot.getElementById('voiceActiveState');
               if (_idleState2) _idleState2.style.display = 'none';
               if (activeState) activeState.style.display = 'flex';
-            case 6:
+            case 7:
               voiceInterface = this.shadowRoot.getElementById('voiceInterface'); // Adjust sizes based on container dimensions
               setTimeout(function () {
                 return _this3.adjustSizesForContainer();
@@ -32858,32 +33027,32 @@ var VoiceInterface = /*#__PURE__*/function () {
 
               // Connect using agentId + appId (URL built internally by SDK)
               if (this.config.agentId) {
-                _context5.n = 7;
+                _context6.n = 8;
                 break;
               }
               throw new Error('agentId is required for voice calls');
-            case 7:
+            case 8:
               if (!(this.sdk && this.sdk.isConnected)) {
-                _context5.n = 11;
+                _context6.n = 12;
                 break;
               }
               console.log('🔄 SDK already connected, disconnecting for clean retry...');
-              _context5.p = 8;
+              _context6.p = 9;
               this.sdk.disconnect();
-              _context5.n = 9;
+              _context6.n = 10;
               return new Promise(function (resolve) {
                 return setTimeout(resolve, 100);
               });
-            case 9:
-              _context5.n = 11;
-              break;
             case 10:
-              _context5.p = 10;
-              _t3 = _context5.v;
-              console.warn('Warning: Error disconnecting existing connection:', _t3);
+              _context6.n = 12;
+              break;
             case 11:
+              _context6.p = 11;
+              _t3 = _context6.v;
+              console.warn('Warning: Error disconnecting existing connection:', _t3);
+            case 12:
               if (!this.isMobile) {
-                _context5.n = 12;
+                _context6.n = 13;
                 break;
               }
               delayConfig = (_this$config$connecti = this.config.connectionDelay) !== null && _this$config$connecti !== void 0 ? _this$config$connecti : {
@@ -32891,13 +33060,13 @@ var VoiceInterface = /*#__PURE__*/function () {
                 android: 3000,
                 ios: 0
               };
-              _context5.n = 12;
-              return (0,_shared_applyDelay_js__WEBPACK_IMPORTED_MODULE_2__.applyDelay)(delayConfig);
-            case 12:
-              _context5.n = 13;
-              return this.sdk.connect();
+              _context6.n = 13;
+              return (0,_shared_applyDelay_js__WEBPACK_IMPORTED_MODULE_3__.applyDelay)(delayConfig);
             case 13:
-              connected = _context5.v;
+              _context6.n = 14;
+              return this.sdk.connect();
+            case 14:
+              connected = _context6.v;
               console.log('✅ Connected to WebSocket, connected:', connected);
 
               // Set up text inject ack handler using EventEmitter pattern
@@ -32928,39 +33097,70 @@ var VoiceInterface = /*#__PURE__*/function () {
               // Wait for connection to be fully ready (for hello message exchange)
               // Check both AgentSDK.isConnected and underlying VoiceSDK connection
               attempts = 0;
-            case 14:
-              if (!(attempts < 50)) {
-                _context5.n = 18;
+              serverDisclaimerHandled = false;
+            case 15:
+              if (!(attempts < 150)) {
+                _context6.n = 25;
                 break;
               }
               if (!serverRejected) {
-                _context5.n = 15;
+                _context6.n = 16;
                 break;
               }
               console.log('🚫 Server rejected connection, aborting audio capture');
               throw new Error('DOMAIN_NOT_WHITELISTED');
-            case 15:
+            case 16:
               if (!this.sdk.isConnected) {
-                _context5.n = 16;
+                _context6.n = 23;
                 break;
               }
-              if (!(this.sdk.voiceSDK && this.sdk.voiceSDK.isConnected && this.sdk.voiceSDK.helloAckReceived && this.sdk.voiceSDK.websocket && this.sdk.voiceSDK.websocket.readyState === WebSocket.OPEN)) {
-                _context5.n = 16;
+              vs = this.sdk.voiceSDK; // Verify WebSocket is open AND hello_ack has been received (input format negotiated)
+              if (!(vs && vs.isConnected && vs.helloAckReceived && vs.websocket && vs.websocket.readyState === WebSocket.OPEN)) {
+                _context6.n = 23;
                 break;
               }
-              return _context5.a(3, 18);
-            case 16:
-              _context5.n = 17;
+              if (!(vs.disclaimersPending && !serverDisclaimerHandled)) {
+                _context6.n = 22;
+                break;
+              }
+              serverDisclaimerHandled = true;
+              _context6.p = 17;
+              _context6.n = 18;
+              return this.resolveServerDisclaimer(vs);
+            case 18:
+              _context6.n = 21;
+              break;
+            case 19:
+              _context6.p = 19;
+              _t4 = _context6.v;
+              if (!((_t4 === null || _t4 === void 0 ? void 0 : _t4.message) === 'DISCLAIMER_DECLINED')) {
+                _context6.n = 20;
+                break;
+              }
+              this.resetConnectingState();
+              throw _t4;
+            case 20:
+              throw _t4;
+            case 21:
+              return _context6.a(3, 15);
+            case 22:
+              if (vs.disclaimersPending) {
+                _context6.n = 23;
+                break;
+              }
+              return _context6.a(3, 25);
+            case 23:
+              _context6.n = 24;
               return new Promise(function (resolve) {
                 return setTimeout(resolve, 100);
               });
-            case 17:
+            case 24:
               attempts++;
-              _context5.n = 14;
+              _context6.n = 15;
               break;
-            case 18:
+            case 25:
               if (!serverRejected) {
-                _context5.n = 19;
+                _context6.n = 26;
                 break;
               }
               // Restore original handlers before throwing
@@ -32968,9 +33168,9 @@ var VoiceInterface = /*#__PURE__*/function () {
               this.sdk.onDisconnected = originalOnDisconnected;
               console.log('🚫 Server rejected connection, aborting audio capture');
               throw new Error('DOMAIN_NOT_WHITELISTED');
-            case 19:
+            case 26:
               if (!(!this.sdk.isConnected || !this.sdk.voiceSDK || !this.sdk.voiceSDK.isConnected || !this.sdk.voiceSDK.websocket || this.sdk.voiceSDK.websocket.readyState !== WebSocket.OPEN)) {
-                _context5.n = 20;
+                _context6.n = 27;
                 break;
               }
               // Restore original handlers before throwing
@@ -32978,12 +33178,12 @@ var VoiceInterface = /*#__PURE__*/function () {
               this.sdk.onDisconnected = originalOnDisconnected;
               console.warn('⚠️ Connection lost before starting audio capture');
               throw new Error('Connection lost before starting audio capture');
-            case 20:
+            case 27:
               // Restore original handlers (connection is valid, proceed with audio)
               this.sdk.onError = originalOnError;
               this.sdk.onDisconnected = originalOnDisconnected;
               if (!(this.sdk.isConnected && this.sdk.voiceSDK && this.sdk.voiceSDK.websocket && this.sdk.voiceSDK.websocket.readyState === WebSocket.OPEN)) {
-                _context5.n = 31;
+                _context6.n = 38;
                 break;
               }
               console.log('✅ WebSocket ready, starting listening...');
@@ -32993,35 +33193,35 @@ var VoiceInterface = /*#__PURE__*/function () {
 
               // CRITICAL: startListening() will request microphone permission
               // iOS: Pass preliminary stream to avoid second getUserMedia (single-stream fix)
-              _context5.p = 21;
+              _context6.p = 28;
               streamToUse = this._preliminaryInputStream || null;
               if (streamToUse) this._preliminaryInputStream = null; // Transfer ownership to AudioRecorder
-              _context5.n = 22;
+              _context6.n = 29;
               return this.sdk.startListening(streamToUse);
-            case 22:
+            case 29:
               if (!(!this.sdk.isConnected || !this.sdk.voiceSDK || !this.sdk.voiceSDK.isConnected || !this.sdk.voiceSDK.websocket || this.sdk.voiceSDK.websocket.readyState !== WebSocket.OPEN)) {
-                _context5.n = 27;
+                _context6.n = 34;
                 break;
               }
               if (!((_this$sdk$voiceSDK = this.sdk.voiceSDK) !== null && _this$sdk$voiceSDK !== void 0 && _this$sdk$voiceSDK.isRecording)) {
-                _context5.n = 26;
+                _context6.n = 33;
                 break;
               }
-              _context5.p = 23;
-              _context5.n = 24;
+              _context6.p = 30;
+              _context6.n = 31;
               return this.sdk.voiceSDK.stopRecording();
-            case 24:
-              _context5.n = 26;
+            case 31:
+              _context6.n = 33;
               break;
-            case 25:
-              _context5.p = 25;
-              _t4 = _context5.v;
-            case 26:
+            case 32:
+              _context6.p = 32;
+              _t5 = _context6.v;
+            case 33:
               error = new Error('Connection lost - server may have rejected the call');
               error.name = 'ServerRejected';
               error.isServerRejection = true;
               throw error;
-            case 27:
+            case 34:
               console.log('🎤 Started listening - permission granted');
 
               // ElevenLabs pattern: NOW stop preliminary stream - real input is ready
@@ -33061,23 +33261,23 @@ var VoiceInterface = /*#__PURE__*/function () {
                 // Start live waveform animation interval (delegated to desktop module)
                 this.desktop.startLiveWaveformInterval();
               }
-              _context5.n = 30;
+              _context6.n = 37;
               break;
-            case 28:
-              _context5.p = 28;
-              _t5 = _context5.v;
-              if (!(_t5.isServerRejection || _t5.name === 'ServerRejected')) {
-                _context5.n = 29;
+            case 35:
+              _context6.p = 35;
+              _t6 = _context6.v;
+              if (!(_t6.isServerRejection || _t6.name === 'ServerRejected')) {
+                _context6.n = 36;
                 break;
               }
               // Server rejection is expected - handle it silently
               // The error handler will show domain error message
               this.resetConnectingState();
               // Re-throw so outer catch can handle it appropriately
-              throw _t5;
-            case 29:
+              throw _t6;
+            case 36:
               // Log other errors (permission denied, etc.)
-              console.error('❌ Failed to start listening - permission denied or error:', _t5);
+              console.error('❌ Failed to start listening - permission denied or error:', _t6);
               // Permission was denied or error occurred - reset connecting state and restore UI
               this.resetConnectingState();
               if (this.isMobile) {
@@ -33113,8 +33313,8 @@ var VoiceInterface = /*#__PURE__*/function () {
                 }
               }
               // Re-throw error so it's handled by outer catch
-              throw _t5;
-            case 30:
+              throw _t6;
+            case 37:
               // Start timer (desktop only - mobile bar owns its own timer)
               if (!this.isMobile && !this.callStartTime) {
                 this.callStartTime = Date.now();
@@ -33132,30 +33332,30 @@ var VoiceInterface = /*#__PURE__*/function () {
                   _this3.callTimerInterval = setInterval(updateTimer, 1000);
                 }, 100);
               }
-              _context5.n = 39;
+              _context6.n = 46;
               break;
-            case 31:
+            case 38:
               if (!serverRejected) {
-                _context5.n = 32;
+                _context6.n = 39;
                 break;
               }
               console.log('🚫 Server rejected connection, aborting audio capture');
               throw new Error('DOMAIN_NOT_WHITELISTED');
-            case 32:
+            case 39:
               if (!(!this.sdk.isConnected || !this.sdk.voiceSDK || !this.sdk.voiceSDK.isConnected || !this.sdk.voiceSDK.websocket || this.sdk.voiceSDK.websocket.readyState !== WebSocket.OPEN)) {
-                _context5.n = 33;
+                _context6.n = 40;
                 break;
               }
               console.warn('⚠️ Connection not valid, aborting audio capture');
               throw new Error('Connection lost before starting audio capture');
-            case 33:
+            case 40:
               console.warn('⚠️ Connection not fully ready, but trying to start listening anyway...');
-              _context5.p = 34;
+              _context6.p = 41;
               _streamToUse = this._preliminaryInputStream || null;
               if (_streamToUse) this._preliminaryInputStream = null;
-              _context5.n = 35;
+              _context6.n = 42;
               return this.sdk.startListening(_streamToUse);
-            case 35:
+            case 42:
               console.log('🎤 Started listening - permission granted');
 
               // ElevenLabs pattern: NOW stop preliminary stream - real input is ready
@@ -33195,23 +33395,23 @@ var VoiceInterface = /*#__PURE__*/function () {
                 // Start live waveform animation interval (delegated to desktop module)
                 this.desktop.startLiveWaveformInterval();
               }
-              _context5.n = 38;
+              _context6.n = 45;
               break;
-            case 36:
-              _context5.p = 36;
-              _t6 = _context5.v;
-              if (!(_t6.isServerRejection || _t6.name === 'ServerRejected')) {
-                _context5.n = 37;
+            case 43:
+              _context6.p = 43;
+              _t7 = _context6.v;
+              if (!(_t7.isServerRejection || _t7.name === 'ServerRejected')) {
+                _context6.n = 44;
                 break;
               }
               // Server rejection is expected - handle it silently
               // The error handler will show domain error message
               this.resetConnectingState();
               // Re-throw so outer catch can handle it appropriately
-              throw _t6;
-            case 37:
+              throw _t7;
+            case 44:
               // Log other errors (permission denied, etc.)
-              console.error('❌ Failed to start listening - permission denied or error:', _t6);
+              console.error('❌ Failed to start listening - permission denied or error:', _t7);
               // Permission was denied or error occurred - reset connecting state and restore UI
               this.resetConnectingState();
               if (this.isMobile) {
@@ -33247,8 +33447,8 @@ var VoiceInterface = /*#__PURE__*/function () {
                 }
               }
               // Re-throw error so it's handled by outer catch
-              throw _t6;
-            case 38:
+              throw _t7;
+            case 45:
               // Start timer (desktop only - mobile bar owns its own timer)
               if (!this.isMobile && !this.callStartTime) {
                 this.callStartTime = Date.now();
@@ -33266,16 +33466,16 @@ var VoiceInterface = /*#__PURE__*/function () {
                   _this3.callTimerInterval = setInterval(_updateTimer, 1000);
                 }, 100);
               }
-            case 39:
+            case 46:
               console.log('✅ Voice call started successfully');
-              _context5.n = 45;
+              _context6.n = 52;
               break;
-            case 40:
-              _context5.p = 40;
-              _t7 = _context5.v;
+            case 47:
+              _context6.p = 47;
+              _t8 = _context6.v;
               // Handle server rejection gracefully (don't log as error)
-              if (!(_t7.isServerRejection || _t7.name === 'ServerRejected')) {
-                console.error('❌ Error starting voice call:', _t7);
+              if (!(_t8.isServerRejection || _t8.name === 'ServerRejected')) {
+                console.error('❌ Error starting voice call:', _t8);
               }
 
               // ElevenLabs pattern: Stop preliminary stream on any error path
@@ -33305,50 +33505,50 @@ var VoiceInterface = /*#__PURE__*/function () {
               }
 
               // Handle specific error types with appropriate modals
-              if (!(_t7.name === 'NotAllowedError' || _t7.name === 'PermissionDeniedError')) {
-                _context5.n = 41;
+              if (!(_t8.name === 'NotAllowedError' || _t8.name === 'PermissionDeniedError')) {
+                _context6.n = 48;
                 break;
               }
               // Permission denied - show blocked modal
-              _deviceInfo = (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_1__.getDeviceInfo)();
-              (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_3__.showBlockedModal)(function () {
+              _deviceInfo = (0,_shared_MicPermissionUtils_js__WEBPACK_IMPORTED_MODULE_2__.getDeviceInfo)();
+              (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_4__.showBlockedModal)(function () {
                 // Modal closed
                 _this3.resetUIState();
               }, function () {
                 // User clicked refresh
                 window.location.reload();
               });
-              _context5.n = 45;
+              _context6.n = 52;
               break;
-            case 41:
-              if (!(_t7.name === 'NotFoundError' || _t7.name === 'DevicesNotFoundError')) {
-                _context5.n = 42;
+            case 48:
+              if (!(_t8.name === 'NotFoundError' || _t8.name === 'DevicesNotFoundError')) {
+                _context6.n = 49;
                 break;
               }
               // No microphone found - show no mic modal
-              (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_3__.showNoMicrophoneModal)(function () {
+              (0,_shared_MicPermissionModals_js__WEBPACK_IMPORTED_MODULE_4__.showNoMicrophoneModal)(function () {
                 _this3.resetUIState();
               });
-              _context5.n = 45;
+              _context6.n = 52;
               break;
-            case 42:
-              if (!(_t7 && (_t7.message === 'DOMAIN_NOT_WHITELISTED' || _t7.message && _t7.message.includes('Domain not whitelisted')))) {
-                _context5.n = 44;
+            case 49:
+              if (!(_t8 && (_t8.message === 'DOMAIN_NOT_WHITELISTED' || _t8.message && _t8.message.includes('Domain not whitelisted')))) {
+                _context6.n = 51;
                 break;
               }
-              _context5.n = 43;
+              _context6.n = 50;
               return this.endCallOnServerRejection();
-            case 43:
-              _context5.n = 45;
+            case 50:
+              _context6.n = 52;
               break;
-            case 44:
+            case 51:
               // Other errors - show in transcript
-              this.showError(_t7.message || _t7);
+              this.showError(_t8.message || _t8);
               this.resetUIState();
-            case 45:
-              return _context5.a(2);
+            case 52:
+              return _context6.a(2);
           }
-        }, _callee5, this, [[34, 36], [23, 25], [21, 28], [8, 10], [1, 3], [0, 40]]);
+        }, _callee6, this, [[41, 43], [30, 32], [28, 35], [17, 19], [9, 11], [1, 4], [0, 47]]);
       }));
       function proceedWithVoiceCall() {
         return _proceedWithVoiceCall.apply(this, arguments);
@@ -33359,7 +33559,6 @@ var VoiceInterface = /*#__PURE__*/function () {
      * Stop preliminary mic stream (ElevenLabs pattern).
      * Must be called after startListening succeeds, or on any error path.
      */
-    )
   }, {
     key: "_stopPreliminaryInputStream",
     value: function _stopPreliminaryInputStream() {
@@ -33414,10 +33613,10 @@ 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, mobileFabEnd, errorMsg, _t8, _t9, _t0, _t1, _t10;
-        return _regenerator().w(function (_context6) {
-          while (1) switch (_context6.p = _context6.n) {
+      var _endCallOnServerRejection = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+        var voiceInterfaceEl, landingScreen, _this$sdk$voiceSDK2, _this$sdk$voiceSDK3, audioRecorder, isRecording, _this$sdk$voiceSDK4, activeState, idleState, panel, fallbackPanel, floatingButton, fallbackButton, mobileFabEnd, errorMsg, _t9, _t0, _t1, _t10, _t11;
+        return _regenerator().w(function (_context7) {
+          while (1) switch (_context7.p = _context7.n) {
             case 0:
               console.log('🚫 Server rejected call - ending call and stopping audio capture/VAD...');
               console.log('🚫 Calling endCallOnServerRejection() - will show domain error message');
@@ -33444,94 +33643,94 @@ var VoiceInterface = /*#__PURE__*/function () {
 
               // CRITICAL: Stop audio capture/VAD immediately
               if (!this.sdk) {
-                _context6.n = 22;
+                _context7.n = 22;
                 break;
               }
-              _context6.p = 1;
+              _context7.p = 1;
               // CRITICAL: Stop VAD and audio capture immediately
               // Check if AudioRecorder exists and is recording (even if flags aren't set yet)
               audioRecorder = (_this$sdk$voiceSDK2 = this.sdk.voiceSDK) === null || _this$sdk$voiceSDK2 === void 0 ? void 0 : _this$sdk$voiceSDK2.audioRecorder;
               isRecording = this.sdk.isListening || ((_this$sdk$voiceSDK3 = this.sdk.voiceSDK) === null || _this$sdk$voiceSDK3 === void 0 ? void 0 : _this$sdk$voiceSDK3.isRecording) || audioRecorder && audioRecorder.isRecording || audioRecorder && audioRecorder.audioWorkletNode !== null;
               if (!(isRecording || audioRecorder)) {
-                _context6.n = 19;
+                _context7.n = 19;
                 break;
               }
               console.log('🛑 Stopping audio capture/VAD...');
 
               // First, send stop message to AudioWorklet to stop VAD processing
               if (!(audioRecorder !== null && audioRecorder !== void 0 && audioRecorder.audioWorkletNode)) {
-                _context6.n = 5;
+                _context7.n = 5;
                 break;
               }
               console.log('🛑 Sending stop message to AudioWorklet to stop VAD...');
-              _context6.p = 2;
+              _context7.p = 2;
               audioRecorder.audioWorkletNode.port.postMessage({
                 type: 'stop'
               });
-              _context6.n = 3;
+              _context7.n = 3;
               return new Promise(function (resolve) {
                 return setTimeout(resolve, 150);
               });
             case 3:
-              _context6.n = 5;
+              _context7.n = 5;
               break;
             case 4:
-              _context6.p = 4;
-              _t8 = _context6.v;
-              console.warn('Error sending stop message to AudioWorklet:', _t8);
+              _context7.p = 4;
+              _t9 = _context7.v;
+              console.warn('Error sending stop message to AudioWorklet:', _t9);
             case 5:
               if (!(this.sdk.voiceSDK && typeof this.sdk.voiceSDK.stopRecording === 'function')) {
-                _context6.n = 10;
+                _context7.n = 10;
                 break;
               }
-              _context6.p = 6;
-              _context6.n = 7;
+              _context7.p = 6;
+              _context7.n = 7;
               return this.sdk.voiceSDK.stopRecording();
             case 7:
               console.log('✅ stopRecording() completed');
-              _context6.n = 9;
+              _context7.n = 9;
               break;
             case 8:
-              _context6.p = 8;
-              _t9 = _context6.v;
-              console.warn('Error calling stopRecording:', _t9);
+              _context7.p = 8;
+              _t0 = _context7.v;
+              console.warn('Error calling stopRecording:', _t0);
             case 9:
-              _context6.n = 14;
+              _context7.n = 14;
               break;
             case 10:
               if (!this.sdk.stopListening) {
-                _context6.n = 14;
+                _context7.n = 14;
                 break;
               }
-              _context6.p = 11;
+              _context7.p = 11;
               this.sdk.stopListening();
-              _context6.n = 12;
+              _context7.n = 12;
               return new Promise(function (resolve) {
                 return setTimeout(resolve, 200);
               });
             case 12:
-              _context6.n = 14;
+              _context7.n = 14;
               break;
             case 13:
-              _context6.p = 13;
-              _t0 = _context6.v;
-              console.warn('Error calling stopListening:', _t0);
+              _context7.p = 13;
+              _t1 = _context7.v;
+              console.warn('Error calling stopListening:', _t1);
             case 14:
               if (!(audioRecorder && typeof audioRecorder.stop === 'function')) {
-                _context6.n = 18;
+                _context7.n = 18;
                 break;
               }
-              _context6.p = 15;
-              _context6.n = 16;
+              _context7.p = 15;
+              _context7.n = 16;
               return audioRecorder.stop();
             case 16:
               console.log('✅ AudioRecorder.stop() completed');
-              _context6.n = 18;
+              _context7.n = 18;
               break;
             case 17:
-              _context6.p = 17;
-              _t1 = _context6.v;
-              console.warn('Error calling AudioRecorder.stop():', _t1);
+              _context7.p = 17;
+              _t10 = _context7.v;
+              console.warn('Error calling AudioRecorder.stop():', _t10);
             case 18:
               console.log('✅ Audio capture/VAD stopped');
             case 19:
@@ -33559,12 +33758,12 @@ var VoiceInterface = /*#__PURE__*/function () {
 
               // Hangup the call
               this.sdk.hangup();
-              _context6.n = 21;
+              _context7.n = 21;
               break;
             case 20:
-              _context6.p = 20;
-              _t10 = _context6.v;
-              console.warn('Error stopping listening on server rejection:', _t10);
+              _context7.p = 20;
+              _t11 = _context7.v;
+              console.warn('Error stopping listening on server rejection:', _t11);
               // Force stop media streams even if stopListening fails
               try {
                 if ((_this$sdk$voiceSDK4 = this.sdk.voiceSDK) !== null && _this$sdk$voiceSDK4 !== void 0 && (_this$sdk$voiceSDK4 = _this$sdk$voiceSDK4.audioRecorder) !== null && _this$sdk$voiceSDK4 !== void 0 && _this$sdk$voiceSDK4.mediaStream) {
@@ -33666,9 +33865,9 @@ var VoiceInterface = /*#__PURE__*/function () {
                 }
               }
             case 23:
-              return _context6.a(2);
+              return _context7.a(2);
           }
-        }, _callee6, this, [[15, 17], [11, 13], [6, 8], [2, 4], [1, 20]]);
+        }, _callee7, this, [[15, 17], [11, 13], [6, 8], [2, 4], [1, 20]]);
       }));
       function endCallOnServerRejection() {
         return _endCallOnServerRejection.apply(this, arguments);
@@ -34262,6 +34461,45 @@ var VoiceInterface = /*#__PURE__*/function () {
       return this.mobile.createMobileMinimizedBar();
     }
 
+    /**
+     * Mobile: ensure minimized bar exists with copy for the native getUserMedia permission dialog.
+     */
+  }, {
+    key: "showMobileCallBarAwaitingBrowserMic",
+    value: function showMobileCallBarAwaitingBrowserMic() {
+      if (!document.getElementById('mobile-voice-call-bar-container')) {
+        this.createMobileMinimizedBar();
+      }
+      var root = document.getElementById('mobile-voice-call-bar-container');
+      if (!root) return;
+      var line = this.t('awaitingBrowserMic');
+      var detail = this.t('awaitingBrowserMicDetail');
+      var status = root.querySelector('#mobileStatusText');
+      var headerStatus = root.querySelector('#mobileHeaderStatusText');
+      if (status) status.textContent = line;
+      if (headerStatus) headerStatus.textContent = line;
+      var tx = root.querySelector('#mobileTranscriptText');
+      if (tx) tx.textContent = detail;
+    }
+
+    /**
+     * Mobile: after mic permission granted, show standard "connecting" copy until audio starts.
+     */
+  }, {
+    key: "applyMobileBarConnectingCopy",
+    value: function applyMobileBarConnectingCopy() {
+      var root = document.getElementById('mobile-voice-call-bar-container');
+      if (!root) return;
+      var line = this.t('connecting');
+      var detail = this.t('connectingSubtitle');
+      var status = root.querySelector('#mobileStatusText');
+      var headerStatus = root.querySelector('#mobileHeaderStatusText');
+      if (status) status.textContent = line;
+      if (headerStatus) headerStatus.textContent = line;
+      var tx = root.querySelector('#mobileTranscriptText');
+      if (tx) tx.textContent = detail;
+    }
+
     /**
      * Remove mobile minimized bar
      * Delegates to mobile module
@@ -35495,7 +35733,7 @@ var Handlers = /*#__PURE__*/function () {
         };
       };
       var onTouchEnd = function onTouchEnd(e) {
-        var _mobileTextInputEl$va;
+        var _overlay$classList, _mobileTextInputEl$va;
         var container = document.getElementById('mobile-voice-call-bar-container');
         if (!container || !touchOrigin || !e.changedTouches.length) {
           touchOrigin = null;
@@ -35516,7 +35754,7 @@ var Handlers = /*#__PURE__*/function () {
         var mobileSendBtnEl = container.querySelector('#mobileSendBtn');
         var mobileTextInputEl = container.querySelector('#mobileTextInput');
         var overlay = container.querySelector('#mobileTranscriptOverlay');
-        var isOverlayVisible = overlay && (overlay.style.display === 'flex' || getComputedStyle(overlay).display === 'flex');
+        var isOverlayVisible = !!(overlay !== null && overlay !== void 0 && (_overlay$classList = overlay.classList) !== null && _overlay$classList !== void 0 && _overlay$classList.contains('mobile-transcript-overlay--open'));
         if (hitTest(x, y, endBtn)) {
           e.preventDefault();
           e.stopPropagation();
@@ -35710,20 +35948,23 @@ var Mobile = /*#__PURE__*/function () {
         existingBar.remove();
       }
 
-      // Inject mobile CSS into document head if not already injected
-      if (!document.getElementById('mobile-voice-call-bar-styles')) {
-        var style = document.createElement('style');
-        style.id = 'mobile-voice-call-bar-styles';
-        style.textContent = this.voiceInterface.styles.generateMobileCSS();
-        document.head.appendChild(style);
+      // Inject / refresh mobile CSS in document head (must match current voice config each call)
+      var mobileStyleEl = document.getElementById('mobile-voice-call-bar-styles');
+      if (!mobileStyleEl) {
+        mobileStyleEl = document.createElement('style');
+        mobileStyleEl.id = 'mobile-voice-call-bar-styles';
+        document.head.appendChild(mobileStyleEl);
       }
+      mobileStyleEl.textContent = this.voiceInterface.styles.generateMobileCSS();
 
       // Create container div
       var container = document.createElement('div');
       container.id = 'mobile-voice-call-bar-container';
+      var textDir = this.config.direction === 'rtl' ? 'rtl' : 'ltr';
+      container.setAttribute('dir', textDir);
       container.innerHTML = "\n      <!-- Duration Badge (hidden until first audio) -->\n      <div class=\"mobile-duration-badge mobile-duration-badge--hidden\" id=\"mobileDurationBadge\">\n        <div class=\"mobile-duration-dot\"></div>\n        <span id=\"mobileDurationText\">00:00</span>\n      </div>\n      \n      <!-- Main Bar -->\n      <div class=\"mobile-voice-bar\">\n        <!-- Top Row: Status, Waveform/Spinner, Controls -->\n        <div class=\"mobile-top-row\">\n          <!-- Status Indicator -->\n          <div class=\"mobile-status-indicator\">\n            <div class=\"mobile-status-dot\" id=\"mobileStatusDot\"></div>\n            <span class=\"mobile-status-text\" id=\"mobileStatusText\">".concat(this.t('listening'), "</span>\n          </div>\n          \n          <!-- Centered: Spinner (loading) or Waveform (after first audio) -->\n          <div class=\"mobile-waveform-center\" id=\"mobileWaveform\">\n            <div class=\"mobile-waveform-spinner\" id=\"mobileWaveformSpinner\" aria-hidden=\"false\">\n              <div class=\"mobile-waveform-spinner-inner\"></div>\n            </div>\n            <div class=\"mobile-waveform-bars mobile-waveform-bars--hidden\" id=\"mobileWaveformBars\">\n              ").concat(Array(8).fill(0).map(function (_, i) {
         return "<div class=\"mobile-waveform-bar\" data-index=\"".concat(i, "\"></div>");
-      }).join(''), "\n            </div>\n          </div>\n          \n          <!-- Controls -->\n          <div class=\"mobile-controls\">\n            <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileMuteBtn\" aria-label=\"Mute microphone\">\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-icon\">\n                <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n              </svg>\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-off-icon\" style=\"display: none;\">\n                <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n                <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            \n            <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileSpeakerBtn\" aria-label=\"Toggle speaker\">\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-off-icon\" style=\"display: none;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n                <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            \n            <button type=\"button\" class=\"mobile-end-call-btn\" id=\"mobileEndCallBtn\" aria-label=\"End call\">\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91\"/>\n                <line x1=\"22\" x2=\"2\" y1=\"2\" y2=\"22\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n        \n        <!-- Bottom Row: Transcript (expandable) -->\n        <button type=\"button\" class=\"mobile-transcript-row\" id=\"mobileTranscriptRow\">\n          <p class=\"mobile-transcript-text\" id=\"mobileTranscriptText\">").concat(this.t('transcriptWillAppear'), "</p>\n          <div class=\"mobile-transcript-footer\">\n            <span class=\"mobile-expand-hint\">tap to expand & type</span>\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity: 0.6;\">\n              <path d=\"M7 17L17 7M17 7H7M17 7V17\"/>\n            </svg>\n          </div>\n        </button>\n\n        <!-- Fly-to-cart target: always visible for animation (positioned where cart icon appears) -->\n        <div id=\"ttpFlyToCartTarget\" class=\"ttp-fly-target\" aria-hidden=\"true\"></div>\n\n        <!-- Cart Row - shown when items are in cart -->\n        <div class=\"mobile-cart-row\" id=\"mobileCartRow\" style=\"display: none;\">\n          <div class=\"mobile-cart-row__content\">\n            <span class=\"mobile-cart-row__icon\" data-ttp-fly-target>\uD83D\uDED2</span>\n            <span class=\"mobile-cart-row__text\" id=\"mobileCartText\">0 items \xB7 \u20AA0.00</span>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Expanded Transcript Overlay -->\n      <div class=\"mobile-transcript-overlay\" id=\"mobileTranscriptOverlay\" style=\"display: none;\">\n        <div class=\"mobile-expanded-transcript\" id=\"mobileExpandedTranscript\">\n          <!-- Header -->\n          <div class=\"mobile-transcript-header\">\n            <div class=\"mobile-header-left\">\n              <div class=\"mobile-header-status\">\n                <div class=\"mobile-header-status-dot\"></div>\n                <span class=\"mobile-header-status-text\" id=\"mobileHeaderStatusText\">").concat(this.t('listening'), "</span>\n                <span class=\"mobile-header-duration\" id=\"mobileHeaderDuration\">00:00</span>\n              </div>\n              <span class=\"mobile-transcript-label\">CONVERSATION</span>\n            </div>\n            <button type=\"button\" class=\"mobile-close-transcript-btn\" id=\"mobileCloseTranscriptBtn\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\n              </svg>\n            </button>\n          </div>\n          \n          <!-- Messages Container -->\n          <div class=\"mobile-messages-container\" id=\"mobileMessagesContainer\">\n            <!-- Messages will be dynamically added here -->\n          </div>\n          \n          <!-- Text Input Area -->\n          <div class=\"mobile-input-area\">\n            <div class=\"mobile-input-wrapper\">\n              <input\n                type=\"text\"\n                placeholder=\"Type a message...\"\n                id=\"mobileTextInput\"\n                class=\"mobile-text-input\"\n              />\n              <button type=\"button\" class=\"mobile-send-btn\" id=\"mobileSendBtn\" disabled>\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z\"/>\n                </svg>\n              </button>\n            </div>\n            <p class=\"mobile-input-hint\">\uD83C\uDF99\uFE0F ").concat(this.t('voiceActive') || 'Voice is still active', " \u2022 ").concat(this.t('typeOrSpeak') || 'Type or speak', "</p>\n          </div>\n        </div>\n      </div>\n    ");
+      }).join(''), "\n            </div>\n          </div>\n          \n          <!-- Controls -->\n          <div class=\"mobile-controls\">\n            <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileMuteBtn\" aria-label=\"Mute microphone\">\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-icon\">\n                <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n              </svg>\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-off-icon\" style=\"display: none;\">\n                <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n                <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            \n            <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileSpeakerBtn\" aria-label=\"Toggle speaker\">\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-off-icon\" style=\"display: none;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n                <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            \n            <button type=\"button\" class=\"mobile-end-call-btn\" id=\"mobileEndCallBtn\" aria-label=\"End call\">\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91\"/>\n                <line x1=\"22\" x2=\"2\" y1=\"2\" y2=\"22\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n        \n        <!-- Bottom Row: Transcript (expandable) -->\n        <button type=\"button\" class=\"mobile-transcript-row\" id=\"mobileTranscriptRow\">\n          <p class=\"mobile-transcript-text\" id=\"mobileTranscriptText\" dir=\"").concat(textDir, "\">").concat(this.t('transcriptWillAppear'), "</p>\n          <div class=\"mobile-transcript-footer\">\n            <span class=\"mobile-expand-hint\">tap to expand & type</span>\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity: 0.6;\">\n              <path d=\"M7 17L17 7M17 7H7M17 7V17\"/>\n            </svg>\n          </div>\n        </button>\n\n        <!-- Fly-to-cart target: always visible for animation (positioned where cart icon appears) -->\n        <div id=\"ttpFlyToCartTarget\" class=\"ttp-fly-target\" aria-hidden=\"true\"></div>\n\n        <!-- Cart Row - shown when items are in cart -->\n        <div class=\"mobile-cart-row\" id=\"mobileCartRow\" style=\"display: none;\">\n          <div class=\"mobile-cart-row__content\">\n            <span class=\"mobile-cart-row__icon\" data-ttp-fly-target>\uD83D\uDED2</span>\n            <span class=\"mobile-cart-row__text\" id=\"mobileCartText\">0 items \xB7 \u20AA0.00</span>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Expanded Transcript Overlay -->\n      <div class=\"mobile-transcript-overlay\" id=\"mobileTranscriptOverlay\">\n        <div class=\"mobile-expanded-transcript\" id=\"mobileExpandedTranscript\">\n          <!-- Header -->\n          <div class=\"mobile-transcript-header\">\n            <div class=\"mobile-header-left\">\n              <div class=\"mobile-header-status\">\n                <div class=\"mobile-header-status-dot\"></div>\n                <span class=\"mobile-header-status-text\" id=\"mobileHeaderStatusText\">").concat(this.t('listening'), "</span>\n                <span class=\"mobile-header-duration\" id=\"mobileHeaderDuration\">00:00</span>\n              </div>\n              <span class=\"mobile-transcript-label\">CONVERSATION</span>\n            </div>\n            <button type=\"button\" class=\"mobile-close-transcript-btn\" id=\"mobileCloseTranscriptBtn\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\n              </svg>\n            </button>\n          </div>\n          \n          <!-- Messages Container -->\n          <div class=\"mobile-messages-container\" id=\"mobileMessagesContainer\">\n            <!-- Messages will be dynamically added here -->\n          </div>\n          \n          <!-- Text Input Area -->\n          <div class=\"mobile-input-area\">\n            <div class=\"mobile-input-wrapper\">\n              <input\n                type=\"text\"\n                placeholder=\"Type a message...\"\n                id=\"mobileTextInput\"\n                class=\"mobile-text-input\"\n                dir=\"").concat(textDir, "\"\n              />\n              <button type=\"button\" class=\"mobile-send-btn\" id=\"mobileSendBtn\" disabled>\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z\"/>\n                </svg>\n              </button>\n            </div>\n            <p class=\"mobile-input-hint\">\uD83C\uDF99\uFE0F ").concat(this.t('voiceActive') || 'Voice is still active', " \u2022 ").concat(this.t('typeOrSpeak') || 'Type or speak', "</p>\n          </div>\n        </div>\n      </div>\n    ");
 
       // Append to body
       document.body.appendChild(container);
@@ -35857,7 +36098,7 @@ var Mobile = /*#__PURE__*/function () {
       var container = document.getElementById('mobile-voice-call-bar-container');
       var overlay = container === null || container === void 0 ? void 0 : container.querySelector('#mobileTranscriptOverlay');
       if (overlay) {
-        overlay.style.display = 'flex';
+        overlay.classList.add('mobile-transcript-overlay--open');
         this.isTranscriptExpanded = true;
 
         // Focus input and sync send button state (container-scoped for Shopify)
@@ -35891,7 +36132,7 @@ var Mobile = /*#__PURE__*/function () {
       var container = document.getElementById('mobile-voice-call-bar-container');
       var overlay = container === null || container === void 0 ? void 0 : container.querySelector('#mobileTranscriptOverlay');
       if (overlay) {
-        overlay.style.display = 'none';
+        overlay.classList.remove('mobile-transcript-overlay--open');
         this.isTranscriptExpanded = false;
       }
     }
@@ -35912,6 +36153,8 @@ var Mobile = /*#__PURE__*/function () {
       var customStatusText = this.config.statusText;
       var displayText = '';
       var dotColor = '#6b7280';
+      var brandPrimary = this.config.primaryBtnGradient1 || this.config.startCallButtonColor || '#3b82f6';
+      var brandSecondary = this.config.primaryBtnGradient2 || this.config.avatarGradient2 || brandPrimary;
       if (customStatusText) {
         // Use custom status text for all states
         displayText = customStatusText;
@@ -35920,13 +36163,13 @@ var Mobile = /*#__PURE__*/function () {
         // Use dynamic status based on state
         if (status === 'connecting') {
           displayText = this.t('connecting') || 'Connecting...';
-          dotColor = '#3b82f6'; // Blue for connecting
+          dotColor = brandPrimary;
         } else if (status === 'listening' || status === 'recording') {
           displayText = this.t('listening') || 'Listening...';
           dotColor = '#22c55e';
         } else if (status === 'speaking') {
           displayText = this.t('speaking') || 'Speaking...';
-          dotColor = '#a855f7';
+          dotColor = brandSecondary;
         } else {
           displayText = this.t('paused') || 'Paused';
           dotColor = '#facc15';
@@ -35958,6 +36201,7 @@ var Mobile = /*#__PURE__*/function () {
         // Render message
         var messageEl = document.createElement('div');
         messageEl.className = "mobile-message-bubble ".concat(type);
+        messageEl.setAttribute('dir', this.config.direction === 'rtl' ? 'rtl' : 'ltr');
         messageEl.textContent = text;
         messagesContainer.appendChild(messageEl);
         messagesContainer.scrollTop = messagesContainer.scrollHeight;
@@ -36077,8 +36321,9 @@ var Styles = /*#__PURE__*/function () {
       var agentRoleColor = c.agentRoleColor || 'rgba(255,255,255,0.35)';
       var headlineColor = c.headlineColor || '#ffffff';
       var sublineColor = c.sublineColor || 'rgba(255,255,255,0.45)';
-      var primaryGrad1 = c.primaryBtnGradient1 || '#6d56f5';
-      var primaryGrad2 = c.primaryBtnGradient2 || '#9d8df8';
+      var primaryGrad1 = c.primaryBtnGradient1 || c.startCallButtonColor || '#6d56f5';
+      var primaryGrad2 = c.primaryBtnGradient2 || c.startCallButtonColor || '#9d8df8';
+      var talkToPcFooterLink = c._talkToPcLinkColor || primaryGrad1;
       var primaryTextColor = c.startCallButtonTextColor || '#fff';
       var secondaryBg = c.secondaryBtnBg || 'rgba(255,255,255,0.05)';
       var secondaryBorder = c.secondaryBtnBorder || 'rgba(255,255,255,0.09)';
@@ -36086,7 +36331,8 @@ var Styles = /*#__PURE__*/function () {
       var panelBg = c.panelBackgroundColor || '#16161e';
       var endCallColor = c.endCallButtonColor || '#ef4444';
       var sendBtnColor = c.sendButtonColor || primaryGrad1;
-      return "\n      /* Voice Interface - Dark Theme Desktop */\n      .voice-interface {\n        display: none".concat(important, ";\n        flex: 1").concat(important, ";\n        flex-direction: column").concat(important, ";\n        align-items: stretch").concat(important, ";\n        justify-content: flex-start").concat(important, ";\n        padding: 0").concat(important, ";\n        background: ").concat(panelBg, ";\n        overflow: hidden").concat(important, ";\n        min-height: 0").concat(important, ";\n        height: 100%").concat(important, ";\n        width: 100%").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      .voice-interface.active { display: flex").concat(important, "; }\n\n      .voice-interface.active:has(#voiceIdleState:not([style*=\"display: none\"]):not([style*=\"display:none\"])) {\n        background: transparent").concat(important, ";\n      }\n\n      /* Footer stays transparent so parent panel gradient (incl. Powered by) shows through on idle */\n      .voice-interface.active ~ .ttp-footer {\n        background: transparent").concat(important, ";\n        border-top-color: rgba(255,255,255,0.06)").concat(important, ";\n      }\n      .voice-interface.active ~ .ttp-footer span { color: rgba(255,255,255,0.35)").concat(important, "; }\n      .voice-interface.active ~ .ttp-footer a { color: #a78bfa").concat(important, "; }\n\n      #voiceIdleState {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        width: 100%").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n        background: transparent").concat(important, ";\n      }\n      #voiceIdleState[style*=\"display: none\"],\n      #voiceIdleState[style*=\"display:none\"] {\n        display: none !important;\n      }\n\n      #voiceActiveState {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        width: 100%").concat(important, ";\n        height: 100%").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n        flex: 1").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      #voiceActiveState[style*=\"display: none\"],\n      #voiceActiveState[style*=\"display:none\"] {\n        display: none !important;\n      }\n\n      /* \u2500\u2500 IDLE HERO \u2014 transparent; gradient is on #voiceIdleState so hero + body share one surface \u2500\u2500 */\n      .ttp-hero {\n        position: relative").concat(important, ";\n        padding: 24px 22px 22px").concat(important, ";\n        background: transparent").concat(important, ";\n        border-bottom: none").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      .ttp-hero::after {\n        content: ''").concat(important, ";\n        position: absolute").concat(important, ";\n        top: -40px").concat(important, "; right: -40px").concat(important, ";\n        width: 140px").concat(important, "; height: 140px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: radial-gradient(circle, ").concat(primaryGrad1, "2e 0%, transparent 70%);\n        pointer-events: none").concat(important, ";\n      }\n      .ttp-header {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: space-between").concat(important, ";\n        margin-bottom: 20px").concat(important, ";\n        position: relative").concat(important, ";\n        z-index: 1").concat(important, ";\n      }\n      .ttp-agent { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 10px").concat(important, "; }\n      .ttp-avatar-wrap { position: relative").concat(important, "; }\n      .ttp-avatar {\n        width: 36px").concat(important, "; height: 36px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: linear-gradient(135deg, ").concat(avatarGrad1, ", ").concat(avatarGrad2, ");\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        font-size: 14px").concat(important, "; font-weight: 500").concat(important, "; color: #fff").concat(important, ";\n      }\n      .ttp-online-dot {\n        position: absolute").concat(important, "; bottom: 0").concat(important, "; right: 0").concat(important, ";\n        width: 10px").concat(important, "; height: 10px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: ").concat(onlineDotColor, "; border: 2px solid ").concat(heroGrad2, ";\n      }\n      .ttp-agent-name { font-size: 14px").concat(important, "; font-weight: 500").concat(important, "; color: ").concat(agentNameColor, "; }\n      .ttp-agent-role { font-size: 10px").concat(important, "; color: ").concat(agentRoleColor, "; margin-top: 1px").concat(important, "; }\n      .ttp-close-btn {\n        width: 26px").concat(important, "; height: 26px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: rgba(255,255,255,0.07)").concat(important, "; border: none").concat(important, "; cursor: pointer").concat(important, ";\n        color: rgba(255,255,255,0.4)").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        transition: background 0.2s").concat(important, ";\n      }\n      .ttp-close-btn:hover { background: rgba(255,255,255,0.14)").concat(important, "; }\n      .ttp-headline {\n        font-size: 22px").concat(important, "; font-weight: 500").concat(important, "; color: ").concat(headlineColor, ";\n        line-height: 1.2").concat(important, "; margin-bottom: 6px").concat(important, "; position: relative").concat(important, "; z-index: 1").concat(important, ";\n      }\n      .ttp-subline {\n        font-size: 13px").concat(important, "; color: ").concat(sublineColor, ";\n        line-height: 1.5").concat(important, "; position: relative").concat(important, "; z-index: 1").concat(important, ";\n      }\n\n      /* \u2500\u2500 DOMAIN ERROR CARD \u2500\u2500 */\n      .ttp-domain-error-card {\n        display: flex").concat(important, ";\n        align-items: flex-start").concat(important, ";\n        gap: 12px").concat(important, ";\n        padding: 14px 16px").concat(important, ";\n        border-radius: 12px").concat(important, ";\n        background: rgba(239,68,68,0.08)").concat(important, ";\n        border: 1px solid rgba(239,68,68,0.18)").concat(important, ";\n      }\n      .ttp-domain-error-icon {\n        flex-shrink: 0").concat(important, ";\n        margin-top: 1px").concat(important, ";\n      }\n      .ttp-domain-error-text {\n        font-size: 12px").concat(important, ";\n        line-height: 1.55").concat(important, ";\n        color: rgba(252,165,165,0.85)").concat(important, ";\n      }\n      .ttp-domain-error-text strong {\n        color: #fca5a5").concat(important, ";\n        font-weight: 600").concat(important, ";\n      }\n\n      /* \u2500\u2500 IDLE BODY \u2500\u2500 */\n      .ttp-body {\n        padding: 10px 18px 14px").concat(important, ";\n        display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 6px").concat(important, ";\n      }\n      .ttp-btn-primary {\n        width: 100%").concat(important, "; padding: 11px").concat(important, "; border-radius: 12px").concat(important, ";\n        background: linear-gradient(135deg, ").concat(primaryGrad1, ", ").concat(primaryGrad2, ");\n        border: none").concat(important, "; cursor: pointer").concat(important, ";\n        font-size: 13px").concat(important, "; font-weight: 500").concat(important, "; color: ").concat(primaryTextColor, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, "; gap: 8px").concat(important, ";\n        box-shadow: 0 4px 18px ").concat(primaryGrad1, "59;\n        transition: opacity 0.2s, transform 0.15s").concat(important, ";\n        font-family: inherit").concat(important, ";\n      }\n      .ttp-btn-primary:hover { opacity: 0.9").concat(important, "; transform: translateY(-1px)").concat(important, "; }\n      .ttp-btn-primary:disabled { cursor: not-allowed").concat(important, "; opacity: 0.6").concat(important, "; }\n      .ttp-btn-secondary {\n        width: 100%").concat(important, "; padding: 10px").concat(important, "; border-radius: 12px").concat(important, ";\n        background: ").concat(secondaryBg, ";\n        border: 1px solid ").concat(secondaryBorder, ";\n        cursor: pointer").concat(important, "; font-size: 13px").concat(important, "; color: ").concat(secondaryTextColor, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, "; gap: 8px").concat(important, ";\n        transition: background 0.2s").concat(important, "; font-family: inherit").concat(important, ";\n      }\n      .ttp-btn-secondary:hover { background: ").concat(secondaryBg, "; }\n\n      /* WhatsApp button */\n      .ttp-btn-wa {\n        width: 100%").concat(important, "; padding: 10px").concat(important, "; border-radius: 12px").concat(important, ";\n        background: rgba(37,211,102,0.08)").concat(important, ";\n        border: 1px solid rgba(37,211,102,0.2)").concat(important, ";\n        cursor: pointer").concat(important, "; font-size: 13px").concat(important, "; font-weight: 500").concat(important, "; color: #4ade80").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, "; gap: 8px").concat(important, ";\n        transition: background 0.2s").concat(important, "; font-family: inherit").concat(important, ";\n        text-decoration: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      .ttp-btn-wa:hover { background: rgba(37,211,102,0.14)").concat(important, "; }\n\n      /* Connecting Spinner (reused from old design) */\n      .connecting-spinner {\n        display: inline-block").concat(important, ";\n        width: 16px").concat(important, "; height: 16px").concat(important, ";\n        border: 2px solid rgba(255,255,255,0.3)").concat(important, ";\n        border-top-color: #fff").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: ttp-spin 1s linear infinite").concat(important, ";\n        margin-right: 8px").concat(important, ";\n        vertical-align: middle").concat(important, ";\n      }\n      @keyframes ttp-spin { to { transform: rotate(360deg); } }\n\n      /* \u2500\u2500 ACTIVE CALL \u2500\u2500 */\n      .ttp-call-hero {\n        background: linear-gradient(160deg, ").concat(heroGrad1, " 0%, ").concat(heroGrad2, " 100%);\n        padding: 22px 20px 18px").concat(important, ";\n        border-bottom: 1px solid rgba(255,255,255,0.06)").concat(important, ";\n      }\n      .ttp-call-topbar {\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: space-between").concat(important, ";\n        margin-bottom: 18px").concat(important, ";\n      }\n      .ttp-rec { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 7px").concat(important, "; }\n      .ttp-rec-dot {\n        width: 7px").concat(important, "; height: 7px").concat(important, "; border-radius: 50%").concat(important, "; background: #f87171").concat(important, ";\n        animation: ttp-pulse 1s ease-in-out infinite").concat(important, ";\n      }\n      ").concat(this.config.useShadowDOM === false ? "\n      /* Regular DOM (e.g. Shopify): theme rules often strip span/div sizing \u2014 recording dot + pulse */\n      #ttp-widget-container .ttp-call-topbar .ttp-rec,\n      #text-chat-panel .ttp-call-topbar .ttp-rec {\n        display: flex !important;\n        align-items: center !important;\n        gap: 7px !important;\n        flex-shrink: 0 !important;\n      }\n      #ttp-widget-container .ttp-rec-dot,\n      #ttp-widget-container .compact-timer .ttp-rec-dot,\n      #text-chat-panel .ttp-rec-dot,\n      #text-chat-panel .compact-timer .ttp-rec-dot {\n        display: block !important;\n        flex-shrink: 0 !important;\n        box-sizing: content-box !important;\n        width: 7px !important;\n        height: 7px !important;\n        min-width: 7px !important;\n        min-height: 7px !important;\n        max-width: none !important;\n        max-height: none !important;\n        padding: 0 !important;\n        margin: 0 !important;\n        border: none !important;\n        border-radius: 50% !important;\n        background: #f87171 !important;\n        background-color: #f87171 !important;\n        opacity: 1 !important;\n        visibility: visible !important;\n        -webkit-animation: ttp-pulse 1s ease-in-out infinite !important;\n        animation: ttp-pulse 1s ease-in-out infinite !important;\n      }\n      #ttp-widget-container .ttp-transcript-hdr .ttp-dot,\n      #text-chat-panel .ttp-transcript-hdr .ttp-dot {\n        display: flex !important;\n        width: 3px !important;\n        height: 3px !important;\n        min-width: 3px !important;\n        min-height: 3px !important;\n        border-radius: 50% !important;\n        background: ".concat(avatarGrad2, " !important;\n        background-color: ").concat(avatarGrad2, " !important;\n        opacity: 1 !important;\n        visibility: visible !important;\n        -webkit-animation: ttp-pulse 0.8s ease-in-out infinite !important;\n        animation: ttp-pulse 0.8s ease-in-out infinite !important;\n      }\n      /* Orb waveform: same motion as shadow DOM (ttp-wave keyframes). Do not set opacity !important\n         on bars \u2014 it overrides keyframe opacity and changes the look. */\n      #ttp-widget-container .ttp-wave,\n      #text-chat-panel .ttp-wave {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 3px !important;\n        height: 26px !important;\n        min-height: 26px !important;\n        width: auto !important;\n        min-width: 36px !important;\n        overflow: visible !important;\n        flex-shrink: 0 !important;\n      }\n      #ttp-widget-container .ttp-wave-bar,\n      #text-chat-panel .ttp-wave-bar {\n        display: block !important;\n        box-sizing: content-box !important;\n        width: 2.5px !important;\n        min-width: 2.5px !important;\n        max-width: none !important;\n        flex-shrink: 0 !important;\n        border-radius: 3px !important;\n        background: rgba(255, 255, 255, 0.9) !important;\n        background-color: rgba(255, 255, 255, 0.9) !important;\n        visibility: visible !important;\n        transform-origin: center center !important;\n        -webkit-animation: ttp-wave 0.75s ease-in-out infinite alternate !important;\n        animation: ttp-wave 0.75s ease-in-out infinite alternate !important;\n      }\n      #ttp-widget-container .ttp-orb,\n      #text-chat-panel .ttp-orb {\n        overflow: visible !important;\n      }\n      ") : '', "\n      .ttp-timer { font-size: 11px").concat(important, "; color: rgba(255,255,255,0.4)").concat(important, "; letter-spacing: 0.05em").concat(important, "; }\n      .ttp-call-label { font-size: 11px").concat(important, "; color: rgba(255,255,255,0.25)").concat(important, "; }\n\n      /* \u2500\u2500 ORB \u2500\u2500 */\n      .ttp-orb-wrap {\n        display: flex").concat(important, "; flex-direction: column").concat(important, "; align-items: center").concat(important, ";\n        gap: 12px").concat(important, "; padding: 8px 0").concat(important, ";\n      }\n      .ttp-orb-rings {\n        position: relative").concat(important, "; width: 72px").concat(important, "; height: 72px").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n      }\n      .ttp-ring {\n        position: absolute").concat(important, "; border-radius: 50%").concat(important, ";\n        border: 1.5px solid ").concat(primaryGrad1, "33;\n        animation: ttp-ring 2s ease-in-out infinite").concat(important, ";\n      }\n      .ttp-ring-1 { inset: -8px").concat(important, "; }\n      .ttp-ring-2 { inset: -16px").concat(important, "; border-width: 1px").concat(important, "; border-color: ").concat(primaryGrad1, "1a; animation-delay: 0.5s").concat(important, "; }\n      .ttp-orb {\n        width: 72px").concat(important, "; height: 72px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: linear-gradient(135deg, ").concat(primaryGrad1, ", ").concat(primaryGrad2, ");\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        animation: ttp-orb-breathe 1.4s ease-in-out infinite").concat(important, ";\n        box-shadow: 0 6px 24px ").concat(primaryGrad1, "66;\n      }\n      .ttp-wave { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 3px").concat(important, "; height: 26px").concat(important, "; }\n      .ttp-wave-bar {\n        width: 2.5px").concat(important, "; border-radius: 3px").concat(important, "; background: rgba(255,255,255,0.9)").concat(important, ";\n        animation: ttp-wave 0.75s ease-in-out infinite alternate").concat(important, ";\n      }\n      .ttp-listen-label { font-size: 12px").concat(important, "; color: rgba(255,255,255,0.4)").concat(important, "; }\n\n      /* \u2500\u2500 CONTROLS \u2500\u2500 */\n      .ttp-controls {\n        padding: 16px 20px").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, "; gap: 14px").concat(important, ";\n      }\n      .ttp-ctrl-btn {\n        width: 42px").concat(important, "; height: 42px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: rgba(255,255,255,0.06)").concat(important, ";\n        border: 1px solid rgba(255,255,255,0.09)").concat(important, ";\n        cursor: pointer").concat(important, "; display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        color: rgba(255,255,255,0.4)").concat(important, "; transition: background 0.2s").concat(important, ";\n        position: relative").concat(important, ";\n      }\n      .ttp-ctrl-btn:hover { background: rgba(255,255,255,0.12)").concat(important, "; }\n      .ttp-ctrl-btn.muted {\n        background: rgba(239, 68, 68, 0.15)").concat(important, ";\n        border-color: rgba(239, 68, 68, 0.3)").concat(important, ";\n      }\n      .ttp-end-btn {\n        width: 52px").concat(important, "; height: 52px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: ").concat(endCallColor, "; border: none").concat(important, "; cursor: pointer").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        color: #fff").concat(important, "; transform: rotate(135deg)").concat(important, ";\n        box-shadow: 0 4px 16px ").concat(endCallColor, "59;\n        transition: background 0.2s").concat(important, ";\n      }\n      .ttp-end-btn:hover { background: ").concat(endCallColor, "; opacity: 0.85").concat(important, "; }\n\n      /* Mute/speaker icon toggle */\n      .desktop-mic-icon, .desktop-speaker-icon { display: block").concat(important, "; }\n      .desktop-mic-off-icon, .desktop-speaker-off-icon {\n        position: absolute").concat(important, "; top: 50%").concat(important, "; left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        width: 16px").concat(important, "; height: 16px").concat(important, "; z-index: 10").concat(important, ";\n      }\n\n      /* \u2500\u2500 DESKTOP VOICE SECTION WRAPPER \u2500\u2500 */\n      .desktop-voice-section { flex-shrink: 0").concat(important, "; }\n\n      /* \u2500\u2500 COMPACT VOICE SECTION (shown when items/rooms are visible) \u2500\u2500 */\n      .compact-voice-section {\n        padding: 10px 14px").concat(important, ";\n        background: linear-gradient(180deg, ").concat(heroGrad1, " 0%, ").concat(primaryGrad1, "14 100%);\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: space-between").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        border-bottom: 1px solid rgba(255,255,255,0.06)").concat(important, ";\n      }\n      .compact-left { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 10px").concat(important, "; }\n      .compact-avatar {\n        width: 42px").concat(important, "; height: 42px").concat(important, "; min-width: 42px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: linear-gradient(135deg, ").concat(avatarGrad1, ", ").concat(avatarGrad2, ");\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .compact-orb {\n        width: 32px !important; height: 32px !important;\n        border-radius: 50% !important;\n      }\n      .compact-info { display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 2px").concat(important, "; }\n      .compact-timer {\n        display: flex").concat(important, "; align-items: center").concat(important, "; gap: 5px").concat(important, ";\n        font-size: 11px").concat(important, "; font-weight: 600").concat(important, "; color: #e8e4f0").concat(important, ";\n      }\n      .compact-status {\n        font-size: 10px").concat(important, "; color: rgba(255,255,255,0.4)").concat(important, ";\n      }\n      .compact-controls { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 6px").concat(important, "; }\n      .compact-control-btn {\n        width: 36px").concat(important, "; height: 36px").concat(important, "; min-width: 36px").concat(important, ";\n        border-radius: 50%").concat(important, "; border: none").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        cursor: pointer").concat(important, "; transition: all 0.15s").concat(important, ";\n        position: relative").concat(important, ";\n      }\n      .compact-control-btn svg { width: 16px").concat(important, "; height: 16px").concat(important, "; }\n      .compact-control-btn .desktop-mic-off-icon,\n      .compact-control-btn .desktop-speaker-off-icon {\n        width: 16px").concat(important, "; height: 16px").concat(important, ";\n      }\n      .compact-control-btn.secondary {\n        background: rgba(255,255,255,0.08)").concat(important, "; color: rgba(255,255,255,0.5)").concat(important, ";\n      }\n      .compact-control-btn.secondary:hover {\n        background: rgba(255,255,255,0.14)").concat(important, "; color: rgba(255,255,255,0.7)").concat(important, ";\n      }\n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.15)").concat(important, "; color: #ef4444").concat(important, ";\n      }\n      .compact-control-btn.secondary.muted .desktop-mic-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #ef4444").concat(important, ";\n      }\n      .compact-control-btn.secondary.muted .desktop-mic-off-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-off-icon {\n        width: 16px").concat(important, "; height: 16px").concat(important, ";\n      }\n      .compact-control-btn.danger {\n        width: 40px").concat(important, "; height: 40px").concat(important, "; min-width: 40px").concat(important, ";\n        background: #ef4444").concat(important, "; color: #fff").concat(important, ";\n        box-shadow: 0 3px 10px rgba(239,68,68,0.35)").concat(important, ";\n      }\n      .compact-control-btn.danger:hover {\n        transform: scale(1.05)").concat(important, ";\n        box-shadow: 0 4px 14px rgba(239,68,68,0.45)").concat(important, ";\n      }\n      .compact-control-btn.danger svg { width: 18px").concat(important, "; height: 18px").concat(important, "; overflow: visible").concat(important, "; }\n\n      /* \u2500\u2500 TRANSCRIPT \u2500\u2500 */\n      .ttp-transcript {\n        margin: 0 16px 16px").concat(important, ";\n        padding: 12px 14px").concat(important, ";\n        background: ").concat(primaryGrad1, "24;\n        border: 1px solid ").concat(primaryGrad1, "4d;\n        border-radius: 12px").concat(important, ";\n      }\n      .ttp-transcript-hdr {\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: space-between").concat(important, ";\n        margin-bottom: 7px").concat(important, ";\n      }\n      .ttp-live-label {\n        font-size: 10px").concat(important, "; color: ").concat(primaryGrad2, ";\n        text-transform: uppercase").concat(important, "; letter-spacing: 0.1em").concat(important, ";\n        font-weight: 600").concat(important, ";\n      }\n      .ttp-toggle-text {\n        font-size: 10px").concat(important, "; color: rgba(255,255,255,0.35)").concat(important, ";\n        cursor: pointer").concat(important, "; margin-left: auto").concat(important, "; margin-right: 8px").concat(important, ";\n        transition: color 0.2s").concat(important, ";\n      }\n      .ttp-toggle-text:hover { color: ").concat(primaryGrad2, "; }\n      .ttp-transcript-hdr { cursor: pointer").concat(important, "; }\n      .ttp-dots { display: flex").concat(important, "; gap: 3px").concat(important, "; align-items: center").concat(important, "; }\n      .ttp-dot {\n        width: 3px").concat(important, "; height: 3px").concat(important, "; border-radius: 50%").concat(important, "; background: ").concat(primaryGrad2, ";\n        animation: ttp-pulse 0.8s ease-in-out infinite").concat(important, ";\n      }\n      .ttp-dot:nth-child(2) { animation-delay: 0.2s").concat(important, "; }\n      .ttp-dot:nth-child(3) { animation-delay: 0.4s").concat(important, "; }\n      .ttp-transcript-text { font-size: 12px").concat(important, "; color: #e2e0f0").concat(important, "; line-height: 1.55").concat(important, "; }\n      .ttp-transcript-text .name { color: #c4b5fd").concat(important, "; font-weight: 600").concat(important, "; }\n      .ttp-cursor {\n        display: inline-block").concat(important, "; width: 2px").concat(important, "; height: 12px").concat(important, ";\n        background: ").concat(primaryGrad2, "; vertical-align: middle").concat(important, "; margin-left: 2px").concat(important, ";\n        animation: ttp-blink 0.9s infinite").concat(important, ";\n      }\n\n      /* Transcript collapsed/expanded state */\n      .live-transcript-collapsed { display: block").concat(important, "; }\n      .conversation-history { display: none").concat(important, "; }\n\n      .ttp-transcript.expanded {\n        flex: 1").concat(important, ";\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      .ttp-transcript.expanded .live-transcript-collapsed { display: none").concat(important, "; }\n      .ttp-transcript.expanded .conversation-history {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        max-height: 260px").concat(important, ";\n        scrollbar-width: thin").concat(important, ";\n        scrollbar-color: ").concat(primaryGrad1, "4d transparent;\n      }\n      .ttp-transcript.expanded .conversation-history::-webkit-scrollbar { width: 4px").concat(important, "; }\n      .ttp-transcript.expanded .conversation-history::-webkit-scrollbar-track { background: transparent").concat(important, "; }\n      .ttp-transcript.expanded .conversation-history::-webkit-scrollbar-thumb {\n        background: ").concat(primaryGrad1, "4d; border-radius: 2px").concat(important, ";\n      }\n\n      /* Message rows in history */\n      .conversation-messages { display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 8px").concat(important, "; padding-bottom: 4px").concat(important, "; }\n      .message-row {\n        display: flex").concat(important, "; align-items: flex-start").concat(important, "; gap: 8px").concat(important, ";\n        animation: ttp-msg-in 0.2s ease-out").concat(important, ";\n      }\n      .message-row.user { flex-direction: row-reverse").concat(important, "; }\n      .message-avatar {\n        width: 26px").concat(important, "; height: 26px").concat(important, "; min-width: 26px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        font-size: 10px").concat(important, "; font-weight: 600").concat(important, "; flex-shrink: 0").concat(important, ";\n      }\n      .message-avatar.user {\n        background: rgba(255,255,255,0.12)").concat(important, "; color: rgba(255,255,255,0.6)").concat(important, ";\n      }\n      .message-avatar.assistant {\n        background: linear-gradient(135deg, ").concat(avatarGrad1, ", ").concat(avatarGrad2, ");\n      }\n      .message-avatar .orb {\n        width: 12px").concat(important, "; height: 12px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: rgba(255,255,255,0.9)").concat(important, ";\n      }\n      .message-bubble {\n        padding: 8px 12px").concat(important, ";\n        border-radius: 12px").concat(important, ";\n        font-size: 12px").concat(important, "; line-height: 1.5").concat(important, ";\n        max-width: 80%").concat(important, "; word-wrap: break-word").concat(important, ";\n      }\n      .message-row.assistant .message-bubble {\n        background: rgba(255,255,255,0.08)").concat(important, ";\n        color: #e2e0f0").concat(important, ";\n        border-bottom-left-radius: 4px").concat(important, ";\n      }\n      .message-row.user .message-bubble {\n        background: ").concat(primaryGrad1, "40;\n        color: #e8e4f0").concat(important, ";\n        border-bottom-right-radius: 4px").concat(important, ";\n      }\n      .live-message-row {\n        display: flex").concat(important, "; align-items: flex-start").concat(important, "; gap: 8px").concat(important, ";\n        margin-top: 6px").concat(important, ";\n      }\n      .live-message-row .message-bubble {\n        position: relative").concat(important, ";\n        padding: 14px 12px 8px").concat(important, ";\n        border-radius: 12px").concat(important, ";\n        font-size: 12px").concat(important, "; line-height: 1.5").concat(important, ";\n        background: rgba(255,255,255,0.08)").concat(important, ";\n        color: #e2e0f0").concat(important, ";\n        max-width: 80%").concat(important, "; word-wrap: break-word").concat(important, ";\n      }\n      .live-message-row .live-badge {\n        position: absolute").concat(important, "; top: 0").concat(important, "; left: 10px").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        background: ").concat(primaryGrad1, "; color: #fff").concat(important, ";\n        font-size: 8px").concat(important, "; font-weight: 700").concat(important, ";\n        padding: 2px 6px").concat(important, "; border-radius: 4px").concat(important, ";\n        text-transform: uppercase").concat(important, "; letter-spacing: 0.05em").concat(important, ";\n      }\n      .typing-cursor {\n        display: inline-block").concat(important, "; width: 2px").concat(important, "; height: 12px").concat(important, ";\n        background: ").concat(primaryGrad2, "; vertical-align: middle").concat(important, "; margin-left: 2px").concat(important, ";\n        animation: ttp-blink 0.9s infinite").concat(important, ";\n      }\n      @keyframes ttp-msg-in {\n        from { opacity: 0; transform: translateY(4px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n\n      /* \u2500\u2500 TYPE ROW \u2500\u2500 */\n      .ttp-type-row { display: flex").concat(important, "; gap: 8px").concat(important, "; padding: 0 16px 16px").concat(important, "; flex-wrap: wrap").concat(important, "; }\n      .ttp-input {\n        flex: 1").concat(important, "; padding: 9px 12px").concat(important, ";\n        background: rgba(255,255,255,0.05)").concat(important, ";\n        border: 1px solid rgba(255,255,255,0.09)").concat(important, ";\n        border-radius: 10px").concat(important, "; color: rgba(255,255,255,0.6)").concat(important, ";\n        font-size: 12px").concat(important, "; outline: none").concat(important, "; font-family: inherit").concat(important, ";\n        transition: border-color 0.2s").concat(important, ";\n      }\n      .ttp-input::placeholder { color: rgba(255,255,255,0.25)").concat(important, "; }\n      .ttp-input:focus { border-color: ").concat(primaryGrad1, "80; }\n      .ttp-send-btn {\n        width: 34px").concat(important, "; height: 34px").concat(important, "; border-radius: 9px").concat(important, ";\n        background: ").concat(sendBtnColor, "; border: none").concat(important, "; cursor: pointer").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, "; transition: background 0.2s").concat(important, ";\n      }\n      .ttp-send-btn:hover { background: ").concat(sendBtnColor, "; opacity: 0.85").concat(important, "; }\n\n      /* \u2500\u2500 KEYFRAMES \u2500\u2500 */\n      @keyframes ttp-pulse  { 0%,100%{opacity:1} 50%{opacity:.3} }\n      @keyframes ttp-blink  { 0%,49%{opacity:1} 50%,100%{opacity:0} }\n      @keyframes ttp-ring   { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.22);opacity:0} }\n      @keyframes ttp-orb-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }\n      @keyframes ttp-wave   { from{transform:scaleY(.15);opacity:.3} to{transform:scaleY(1);opacity:.9} }\n      @keyframes ttp-pill-pulse { 0%,100%{box-shadow:0 0 0 0 ").concat(primaryGrad1, "80} 60%{box-shadow:0 0 0 7px ").concat(primaryGrad1, "00} }\n\n      /* Mobile Voice Call UI - Shared styles (also used in generateMobileCSS) */\n      ").concat(this._getSharedMobileCSS(important), "\n\n    ");
+      var callSurfaceGradient = "linear-gradient(160deg, ".concat(heroGrad1, " 0%, ").concat(heroGrad2, " 100%)");
+      return "\n      /* Voice Interface - Dark Theme Desktop */\n      .voice-interface {\n        display: none".concat(important, ";\n        flex: 1").concat(important, ";\n        flex-direction: column").concat(important, ";\n        align-items: stretch").concat(important, ";\n        justify-content: flex-start").concat(important, ";\n        padding: 0").concat(important, ";\n        background: ").concat(panelBg, ";\n        overflow: hidden").concat(important, ";\n        min-height: 0").concat(important, ";\n        height: 100%").concat(important, ";\n        width: 100%").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      .voice-interface.active {\n        display: flex").concat(important, ";\n        background: ").concat(callSurfaceGradient).concat(important, ";\n      }\n\n      .voice-interface.active:has(#voiceIdleState:not([style*=\"display: none\"]):not([style*=\"display:none\"])) {\n        background: transparent").concat(important, ";\n      }\n\n      /* Footer: same in-call purple as voice area (parent also sets bg; this covers any layout gaps) */\n      .voice-interface.active ~ .ttp-footer {\n        background: ").concat(callSurfaceGradient).concat(important, ";\n        border-top-color: rgba(255,255,255,0.06)").concat(important, ";\n      }\n      .voice-interface.active ~ .ttp-footer span { color: rgba(255,255,255,0.35)").concat(important, "; }\n      .voice-interface.active ~ .ttp-footer a { color: ").concat(talkToPcFooterLink).concat(important, "; }\n\n      #voiceIdleState {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        width: 100%").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n        background: transparent").concat(important, ";\n      }\n      #voiceIdleState[style*=\"display: none\"],\n      #voiceIdleState[style*=\"display:none\"] {\n        display: none !important;\n      }\n\n      #voiceActiveState {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        width: 100%").concat(important, ";\n        height: 100%").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n        flex: 1").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      #voiceActiveState[style*=\"display: none\"],\n      #voiceActiveState[style*=\"display:none\"] {\n        display: none !important;\n      }\n\n      /* \u2500\u2500 IDLE HERO \u2014 transparent; gradient is on #voiceIdleState so hero + body share one surface \u2500\u2500 */\n      .ttp-hero {\n        position: relative").concat(important, ";\n        padding: 24px 22px 22px").concat(important, ";\n        background: transparent").concat(important, ";\n        border-bottom: none").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      .ttp-hero::after {\n        content: ''").concat(important, ";\n        position: absolute").concat(important, ";\n        top: -40px").concat(important, "; right: -40px").concat(important, ";\n        width: 140px").concat(important, "; height: 140px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: radial-gradient(circle, ").concat(primaryGrad1, "2e 0%, transparent 70%);\n        pointer-events: none").concat(important, ";\n      }\n      .ttp-header {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: space-between").concat(important, ";\n        margin-bottom: 20px").concat(important, ";\n        position: relative").concat(important, ";\n        z-index: 1").concat(important, ";\n      }\n      .ttp-agent { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 10px").concat(important, "; }\n      .ttp-avatar-wrap { position: relative").concat(important, "; }\n      .ttp-avatar {\n        width: 36px").concat(important, "; height: 36px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: linear-gradient(135deg, ").concat(avatarGrad1, ", ").concat(avatarGrad2, ");\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        font-size: 14px").concat(important, "; font-weight: 500").concat(important, "; color: #fff").concat(important, ";\n      }\n      .ttp-avatar.ttp-avatar--image {\n        padding: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      .ttp-avatar-img {\n        width: 100%").concat(important, ";\n        height: 100%").concat(important, ";\n        object-fit: cover").concat(important, ";\n        display: block").concat(important, ";\n        border-radius: 50%").concat(important, ";\n      }\n      .ttp-online-dot {\n        position: absolute").concat(important, "; bottom: 0").concat(important, "; right: 0").concat(important, ";\n        width: 10px").concat(important, "; height: 10px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: ").concat(onlineDotColor, "; border: 2px solid ").concat(heroGrad2, ";\n      }\n      .ttp-agent-name { font-size: 14px").concat(important, "; font-weight: 500").concat(important, "; color: ").concat(agentNameColor, "; }\n      .ttp-agent-role { font-size: 10px").concat(important, "; color: ").concat(agentRoleColor, "; margin-top: 1px").concat(important, "; }\n      .ttp-close-btn {\n        width: 26px").concat(important, "; height: 26px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: rgba(255,255,255,0.07)").concat(important, "; border: none").concat(important, "; cursor: pointer").concat(important, ";\n        color: rgba(255,255,255,0.4)").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        transition: background 0.2s").concat(important, ";\n      }\n      .ttp-close-btn:hover { background: rgba(255,255,255,0.14)").concat(important, "; }\n      .ttp-headline {\n        font-size: 22px").concat(important, "; font-weight: 500").concat(important, "; color: ").concat(headlineColor, ";\n        line-height: 1.2").concat(important, "; margin-bottom: 6px").concat(important, "; position: relative").concat(important, "; z-index: 1").concat(important, ";\n      }\n      .ttp-subline {\n        font-size: 13px").concat(important, "; color: ").concat(sublineColor, ";\n        line-height: 1.5").concat(important, "; position: relative").concat(important, "; z-index: 1").concat(important, ";\n      }\n\n      /* \u2500\u2500 DOMAIN ERROR CARD \u2500\u2500 */\n      .ttp-domain-error-card {\n        display: flex").concat(important, ";\n        align-items: flex-start").concat(important, ";\n        gap: 12px").concat(important, ";\n        padding: 14px 16px").concat(important, ";\n        border-radius: 12px").concat(important, ";\n        background: rgba(239,68,68,0.08)").concat(important, ";\n        border: 1px solid rgba(239,68,68,0.18)").concat(important, ";\n      }\n      .ttp-domain-error-icon {\n        flex-shrink: 0").concat(important, ";\n        margin-top: 1px").concat(important, ";\n      }\n      .ttp-domain-error-text {\n        font-size: 12px").concat(important, ";\n        line-height: 1.55").concat(important, ";\n        color: rgba(252,165,165,0.85)").concat(important, ";\n      }\n      .ttp-domain-error-text strong {\n        color: #fca5a5").concat(important, ";\n        font-weight: 600").concat(important, ";\n      }\n\n      /* \u2500\u2500 IDLE BODY \u2500\u2500 */\n      .ttp-body {\n        padding: 10px 18px 14px").concat(important, ";\n        display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 6px").concat(important, ";\n      }\n      .ttp-btn-primary {\n        width: 100%").concat(important, "; padding: 11px").concat(important, "; border-radius: 12px").concat(important, ";\n        background: linear-gradient(135deg, ").concat(primaryGrad1, ", ").concat(primaryGrad2, ");\n        border: none").concat(important, "; cursor: pointer").concat(important, ";\n        font-size: 13px").concat(important, "; font-weight: 500").concat(important, "; color: ").concat(primaryTextColor, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, "; gap: 8px").concat(important, ";\n        box-shadow: 0 4px 18px ").concat(primaryGrad1, "59;\n        transition: opacity 0.2s, transform 0.15s").concat(important, ";\n        font-family: inherit").concat(important, ";\n      }\n      .ttp-btn-primary:hover { opacity: 0.9").concat(important, "; transform: translateY(-1px)").concat(important, "; }\n      .ttp-btn-primary:disabled { cursor: not-allowed").concat(important, "; opacity: 0.6").concat(important, "; }\n      .ttp-btn-secondary {\n        width: 100%").concat(important, "; padding: 10px").concat(important, "; border-radius: 12px").concat(important, ";\n        background: ").concat(secondaryBg, ";\n        border: 1px solid ").concat(secondaryBorder, ";\n        cursor: pointer").concat(important, "; font-size: 13px").concat(important, "; color: ").concat(secondaryTextColor, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, "; gap: 8px").concat(important, ";\n        transition: background 0.2s").concat(important, "; font-family: inherit").concat(important, ";\n      }\n      .ttp-btn-secondary:hover { background: ").concat(secondaryBg, "; }\n\n      /* WhatsApp button */\n      .ttp-btn-wa {\n        width: 100%").concat(important, "; padding: 10px").concat(important, "; border-radius: 12px").concat(important, ";\n        background: rgba(37,211,102,0.08)").concat(important, ";\n        border: 1px solid rgba(37,211,102,0.2)").concat(important, ";\n        cursor: pointer").concat(important, "; font-size: 13px").concat(important, "; font-weight: 500").concat(important, "; color: #4ade80").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, "; gap: 8px").concat(important, ";\n        transition: background 0.2s").concat(important, "; font-family: inherit").concat(important, ";\n        text-decoration: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      .ttp-btn-wa:hover { background: rgba(37,211,102,0.14)").concat(important, "; }\n\n      /* Connecting Spinner (reused from old design) */\n      .connecting-spinner {\n        display: inline-block").concat(important, ";\n        width: 16px").concat(important, "; height: 16px").concat(important, ";\n        border: 2px solid rgba(255,255,255,0.3)").concat(important, ";\n        border-top-color: #fff").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: ttp-spin 1s linear infinite").concat(important, ";\n        margin-right: 8px").concat(important, ";\n        vertical-align: middle").concat(important, ";\n      }\n      @keyframes ttp-spin { to { transform: rotate(360deg); } }\n\n      /* \u2500\u2500 ACTIVE CALL \u2500\u2500 */\n      .ttp-call-hero {\n        background: transparent").concat(important, ";\n        padding: 22px 20px 18px").concat(important, ";\n        border-bottom: 1px solid rgba(255,255,255,0.06)").concat(important, ";\n      }\n      .ttp-call-topbar {\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: space-between").concat(important, ";\n        margin-bottom: 18px").concat(important, ";\n      }\n      .ttp-rec { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 7px").concat(important, "; }\n      .ttp-rec-dot {\n        width: 7px").concat(important, "; height: 7px").concat(important, "; border-radius: 50%").concat(important, "; background: #f87171").concat(important, ";\n        animation: ttp-pulse 1s ease-in-out infinite").concat(important, ";\n      }\n      ").concat(this.config.useShadowDOM === false ? "\n      /* Regular DOM (e.g. Shopify): theme rules often strip span/div sizing \u2014 recording dot + pulse */\n      #ttp-widget-container .ttp-call-topbar .ttp-rec,\n      #text-chat-panel .ttp-call-topbar .ttp-rec {\n        display: flex !important;\n        align-items: center !important;\n        gap: 7px !important;\n        flex-shrink: 0 !important;\n      }\n      #ttp-widget-container .ttp-rec-dot,\n      #ttp-widget-container .compact-timer .ttp-rec-dot,\n      #text-chat-panel .ttp-rec-dot,\n      #text-chat-panel .compact-timer .ttp-rec-dot {\n        display: block !important;\n        flex-shrink: 0 !important;\n        box-sizing: content-box !important;\n        width: 7px !important;\n        height: 7px !important;\n        min-width: 7px !important;\n        min-height: 7px !important;\n        max-width: none !important;\n        max-height: none !important;\n        padding: 0 !important;\n        margin: 0 !important;\n        border: none !important;\n        border-radius: 50% !important;\n        background: #f87171 !important;\n        background-color: #f87171 !important;\n        opacity: 1 !important;\n        visibility: visible !important;\n        -webkit-animation: ttp-pulse 1s ease-in-out infinite !important;\n        animation: ttp-pulse 1s ease-in-out infinite !important;\n      }\n      #ttp-widget-container .ttp-transcript-hdr .ttp-dot,\n      #text-chat-panel .ttp-transcript-hdr .ttp-dot {\n        display: flex !important;\n        width: 3px !important;\n        height: 3px !important;\n        min-width: 3px !important;\n        min-height: 3px !important;\n        border-radius: 50% !important;\n        background: ".concat(avatarGrad2, " !important;\n        background-color: ").concat(avatarGrad2, " !important;\n        opacity: 1 !important;\n        visibility: visible !important;\n        -webkit-animation: ttp-pulse 0.8s ease-in-out infinite !important;\n        animation: ttp-pulse 0.8s ease-in-out infinite !important;\n      }\n      /* Orb waveform: same motion as shadow DOM (ttp-wave keyframes). Do not set opacity !important\n         on bars \u2014 it overrides keyframe opacity and changes the look. */\n      #ttp-widget-container .ttp-wave,\n      #text-chat-panel .ttp-wave {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 3px !important;\n        height: 26px !important;\n        min-height: 26px !important;\n        width: auto !important;\n        min-width: 36px !important;\n        overflow: visible !important;\n        flex-shrink: 0 !important;\n      }\n      #ttp-widget-container .ttp-wave-bar,\n      #text-chat-panel .ttp-wave-bar {\n        display: block !important;\n        box-sizing: content-box !important;\n        width: 2.5px !important;\n        min-width: 2.5px !important;\n        max-width: none !important;\n        flex-shrink: 0 !important;\n        border-radius: 3px !important;\n        background: rgba(255, 255, 255, 0.9) !important;\n        background-color: rgba(255, 255, 255, 0.9) !important;\n        visibility: visible !important;\n        transform-origin: center center !important;\n        -webkit-animation: ttp-wave 0.75s ease-in-out infinite alternate !important;\n        animation: ttp-wave 0.75s ease-in-out infinite alternate !important;\n      }\n      #ttp-widget-container .ttp-orb,\n      #text-chat-panel .ttp-orb {\n        overflow: visible !important;\n      }\n      ") : '', "\n      .ttp-timer { font-size: 11px").concat(important, "; color: rgba(255,255,255,0.4)").concat(important, "; letter-spacing: 0.05em").concat(important, "; }\n      .ttp-call-label { font-size: 11px").concat(important, "; color: rgba(255,255,255,0.25)").concat(important, "; }\n\n      /* \u2500\u2500 ORB \u2500\u2500 */\n      .ttp-orb-wrap {\n        display: flex").concat(important, "; flex-direction: column").concat(important, "; align-items: center").concat(important, ";\n        gap: 12px").concat(important, "; padding: 8px 0").concat(important, ";\n      }\n      .ttp-orb-rings {\n        position: relative").concat(important, "; width: 72px").concat(important, "; height: 72px").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n      }\n      .ttp-ring {\n        position: absolute").concat(important, "; border-radius: 50%").concat(important, ";\n        border: 1.5px solid ").concat(primaryGrad1, "33;\n        animation: ttp-ring 2s ease-in-out infinite").concat(important, ";\n      }\n      .ttp-ring-1 { inset: -8px").concat(important, "; }\n      .ttp-ring-2 { inset: -16px").concat(important, "; border-width: 1px").concat(important, "; border-color: ").concat(primaryGrad1, "1a; animation-delay: 0.5s").concat(important, "; }\n      .ttp-orb {\n        width: 72px").concat(important, "; height: 72px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: linear-gradient(135deg, ").concat(primaryGrad1, ", ").concat(primaryGrad2, ");\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        animation: ttp-orb-breathe 1.4s ease-in-out infinite").concat(important, ";\n        box-shadow: 0 6px 24px ").concat(primaryGrad1, "66;\n      }\n      .ttp-wave { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 3px").concat(important, "; height: 26px").concat(important, "; }\n      .ttp-wave-bar {\n        width: 2.5px").concat(important, "; border-radius: 3px").concat(important, "; background: rgba(255,255,255,0.9)").concat(important, ";\n        animation: ttp-wave 0.75s ease-in-out infinite alternate").concat(important, ";\n      }\n      .ttp-listen-label { font-size: 12px").concat(important, "; color: rgba(255,255,255,0.4)").concat(important, "; }\n\n      /* \u2500\u2500 CONTROLS \u2500\u2500 */\n      .ttp-controls {\n        padding: 16px 20px").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, "; gap: 14px").concat(important, ";\n      }\n      .ttp-ctrl-btn {\n        width: 42px").concat(important, "; height: 42px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: rgba(255,255,255,0.06)").concat(important, ";\n        border: 1px solid rgba(255,255,255,0.09)").concat(important, ";\n        cursor: pointer").concat(important, "; display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        color: rgba(255,255,255,0.4)").concat(important, "; transition: background 0.2s").concat(important, ";\n        position: relative").concat(important, ";\n      }\n      .ttp-ctrl-btn:hover { background: rgba(255,255,255,0.12)").concat(important, "; }\n      .ttp-ctrl-btn.muted {\n        background: rgba(239, 68, 68, 0.15)").concat(important, ";\n        border-color: rgba(239, 68, 68, 0.3)").concat(important, ";\n      }\n      .ttp-end-btn {\n        width: 52px").concat(important, "; height: 52px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: ").concat(endCallColor, "; border: none").concat(important, "; cursor: pointer").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        color: #fff").concat(important, "; transform: rotate(135deg)").concat(important, ";\n        box-shadow: 0 4px 16px ").concat(endCallColor, "59;\n        transition: background 0.2s").concat(important, ";\n      }\n      .ttp-end-btn:hover { background: ").concat(endCallColor, "; opacity: 0.85").concat(important, "; }\n\n      /* Mute/speaker icon toggle */\n      .desktop-mic-icon, .desktop-speaker-icon { display: block").concat(important, "; }\n      .desktop-mic-off-icon, .desktop-speaker-off-icon {\n        position: absolute").concat(important, "; top: 50%").concat(important, "; left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        width: 16px").concat(important, "; height: 16px").concat(important, "; z-index: 10").concat(important, ";\n      }\n\n      /* \u2500\u2500 DESKTOP VOICE SECTION WRAPPER \u2500\u2500 */\n      .desktop-voice-section { flex-shrink: 0").concat(important, "; }\n\n      /* \u2500\u2500 COMPACT VOICE SECTION (shown when items/rooms are visible) \u2500\u2500 */\n      .compact-voice-section {\n        padding: 10px 14px").concat(important, ";\n        background: transparent").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: space-between").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        border-bottom: 1px solid rgba(255,255,255,0.06)").concat(important, ";\n      }\n      .compact-left { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 10px").concat(important, "; }\n      .compact-avatar {\n        width: 42px").concat(important, "; height: 42px").concat(important, "; min-width: 42px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: linear-gradient(135deg, ").concat(avatarGrad1, ", ").concat(avatarGrad2, ");\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .compact-orb {\n        width: 32px !important; height: 32px !important;\n        border-radius: 50% !important;\n      }\n      .compact-info { display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 2px").concat(important, "; }\n      .compact-timer {\n        display: flex").concat(important, "; align-items: center").concat(important, "; gap: 5px").concat(important, ";\n        font-size: 11px").concat(important, "; font-weight: 600").concat(important, "; color: #e8e4f0").concat(important, ";\n      }\n      .compact-status {\n        font-size: 10px").concat(important, "; color: rgba(255,255,255,0.4)").concat(important, ";\n      }\n      .compact-controls { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 6px").concat(important, "; }\n      .compact-control-btn {\n        width: 36px").concat(important, "; height: 36px").concat(important, "; min-width: 36px").concat(important, ";\n        border-radius: 50%").concat(important, "; border: none").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        cursor: pointer").concat(important, "; transition: all 0.15s").concat(important, ";\n        position: relative").concat(important, ";\n      }\n      .compact-control-btn svg { width: 16px").concat(important, "; height: 16px").concat(important, "; }\n      .compact-control-btn .desktop-mic-off-icon,\n      .compact-control-btn .desktop-speaker-off-icon {\n        width: 16px").concat(important, "; height: 16px").concat(important, ";\n      }\n      .compact-control-btn.secondary {\n        background: rgba(255,255,255,0.08)").concat(important, "; color: rgba(255,255,255,0.5)").concat(important, ";\n      }\n      .compact-control-btn.secondary:hover {\n        background: rgba(255,255,255,0.14)").concat(important, "; color: rgba(255,255,255,0.7)").concat(important, ";\n      }\n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.15)").concat(important, "; color: #ef4444").concat(important, ";\n      }\n      .compact-control-btn.secondary.muted .desktop-mic-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #ef4444").concat(important, ";\n      }\n      .compact-control-btn.secondary.muted .desktop-mic-off-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-off-icon {\n        width: 16px").concat(important, "; height: 16px").concat(important, ";\n      }\n      .compact-control-btn.danger {\n        width: 40px").concat(important, "; height: 40px").concat(important, "; min-width: 40px").concat(important, ";\n        background: #ef4444").concat(important, "; color: #fff").concat(important, ";\n        box-shadow: 0 3px 10px rgba(239,68,68,0.35)").concat(important, ";\n      }\n      .compact-control-btn.danger:hover {\n        transform: scale(1.05)").concat(important, ";\n        box-shadow: 0 4px 14px rgba(239,68,68,0.45)").concat(important, ";\n      }\n      .compact-control-btn.danger svg { width: 18px").concat(important, "; height: 18px").concat(important, "; overflow: visible").concat(important, "; }\n\n      /* \u2500\u2500 TRANSCRIPT \u2500\u2500 */\n      .ttp-transcript {\n        margin: 0 16px 16px").concat(important, ";\n        padding: 12px 14px").concat(important, ";\n        background: ").concat(primaryGrad1, "24;\n        border: 1px solid ").concat(primaryGrad1, "4d;\n        border-radius: 12px").concat(important, ";\n      }\n      .ttp-transcript-hdr {\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: space-between").concat(important, ";\n        margin-bottom: 7px").concat(important, ";\n      }\n      .ttp-live-label {\n        font-size: 10px").concat(important, "; color: ").concat(primaryGrad2, ";\n        text-transform: uppercase").concat(important, "; letter-spacing: 0.1em").concat(important, ";\n        font-weight: 600").concat(important, ";\n      }\n      .ttp-toggle-text {\n        font-size: 10px").concat(important, "; color: rgba(255,255,255,0.35)").concat(important, ";\n        cursor: pointer").concat(important, "; margin-left: auto").concat(important, "; margin-right: 8px").concat(important, ";\n        transition: color 0.2s").concat(important, ";\n      }\n      .ttp-toggle-text:hover { color: ").concat(primaryGrad2, "; }\n      .ttp-transcript-hdr { cursor: pointer").concat(important, "; }\n      .ttp-dots { display: flex").concat(important, "; gap: 3px").concat(important, "; align-items: center").concat(important, "; }\n      .ttp-dot {\n        width: 3px").concat(important, "; height: 3px").concat(important, "; border-radius: 50%").concat(important, "; background: ").concat(primaryGrad2, ";\n        animation: ttp-pulse 0.8s ease-in-out infinite").concat(important, ";\n      }\n      .ttp-dot:nth-child(2) { animation-delay: 0.2s").concat(important, "; }\n      .ttp-dot:nth-child(3) { animation-delay: 0.4s").concat(important, "; }\n      .ttp-transcript-text {\n        font-size: 12px").concat(important, "; color: #e2e0f0").concat(important, "; line-height: 1.55").concat(important, ";\n        unicode-bidi: isolate").concat(important, ";\n        text-align: start").concat(important, ";\n      }\n      .ttp-transcript-text .name { color: #c4b5fd").concat(important, "; font-weight: 600").concat(important, "; }\n      .ttp-cursor {\n        display: inline-block").concat(important, "; width: 2px").concat(important, "; height: 12px").concat(important, ";\n        background: ").concat(primaryGrad2, "; vertical-align: middle").concat(important, "; margin-inline-start: 2px").concat(important, ";\n        animation: ttp-blink 0.9s infinite").concat(important, ";\n      }\n\n      /* Transcript collapsed/expanded state */\n      .live-transcript-collapsed { display: block").concat(important, "; }\n      .conversation-history { display: none").concat(important, "; }\n\n      .ttp-transcript.expanded {\n        flex: 1").concat(important, ";\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      .ttp-transcript.expanded .live-transcript-collapsed { display: none").concat(important, "; }\n      .ttp-transcript.expanded .conversation-history {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        max-height: 260px").concat(important, ";\n        scrollbar-width: thin").concat(important, ";\n        scrollbar-color: ").concat(primaryGrad1, "4d transparent;\n      }\n      .ttp-transcript.expanded .conversation-history::-webkit-scrollbar { width: 4px").concat(important, "; }\n      .ttp-transcript.expanded .conversation-history::-webkit-scrollbar-track { background: transparent").concat(important, "; }\n      .ttp-transcript.expanded .conversation-history::-webkit-scrollbar-thumb {\n        background: ").concat(primaryGrad1, "4d; border-radius: 2px").concat(important, ";\n      }\n\n      /* Message rows in history */\n      .conversation-messages { display: flex").concat(important, "; flex-direction: column").concat(important, "; gap: 8px").concat(important, "; padding-bottom: 4px").concat(important, "; }\n      .message-row {\n        display: flex").concat(important, "; align-items: flex-start").concat(important, "; gap: 8px").concat(important, ";\n        animation: ttp-msg-in 0.2s ease-out").concat(important, ";\n      }\n      .message-row.user { flex-direction: row-reverse").concat(important, "; }\n      .message-avatar {\n        width: 26px").concat(important, "; height: 26px").concat(important, "; min-width: 26px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        font-size: 10px").concat(important, "; font-weight: 600").concat(important, "; flex-shrink: 0").concat(important, ";\n      }\n      .message-avatar.user {\n        background: rgba(255,255,255,0.12)").concat(important, "; color: rgba(255,255,255,0.6)").concat(important, ";\n      }\n      .message-avatar.assistant {\n        background: linear-gradient(135deg, ").concat(avatarGrad1, ", ").concat(avatarGrad2, ");\n      }\n      .message-avatar .orb {\n        width: 12px").concat(important, "; height: 12px").concat(important, "; border-radius: 50%").concat(important, ";\n        background: rgba(255,255,255,0.9)").concat(important, ";\n      }\n      .message-bubble {\n        padding: 8px 12px").concat(important, ";\n        border-radius: 12px").concat(important, ";\n        font-size: 12px").concat(important, "; line-height: 1.5").concat(important, ";\n        max-width: 80%").concat(important, "; word-wrap: break-word").concat(important, ";\n        unicode-bidi: plaintext").concat(important, ";\n        text-align: start").concat(important, ";\n      }\n      .message-row.assistant .message-bubble {\n        background: rgba(255,255,255,0.08)").concat(important, ";\n        color: #e2e0f0").concat(important, ";\n        border-bottom-left-radius: 4px").concat(important, ";\n      }\n      .message-row.user .message-bubble {\n        background: ").concat(primaryGrad1, "40;\n        color: #e8e4f0").concat(important, ";\n        border-bottom-right-radius: 4px").concat(important, ";\n      }\n      .live-message-row {\n        display: flex").concat(important, "; align-items: flex-start").concat(important, "; gap: 8px").concat(important, ";\n        margin-top: 6px").concat(important, ";\n      }\n      .live-message-row .message-bubble {\n        position: relative").concat(important, ";\n        padding: 14px 12px 8px").concat(important, ";\n        border-radius: 12px").concat(important, ";\n        font-size: 12px").concat(important, "; line-height: 1.5").concat(important, ";\n        background: rgba(255,255,255,0.08)").concat(important, ";\n        color: #e2e0f0").concat(important, ";\n        max-width: 80%").concat(important, "; word-wrap: break-word").concat(important, ";\n      }\n      .live-message-row .live-badge {\n        position: absolute").concat(important, "; top: 0").concat(important, "; left: 10px").concat(important, ";\n        transform: translateY(-50%)").concat(important, ";\n        background: ").concat(primaryGrad1, "; color: #fff").concat(important, ";\n        font-size: 8px").concat(important, "; font-weight: 700").concat(important, ";\n        padding: 2px 6px").concat(important, "; border-radius: 4px").concat(important, ";\n        text-transform: uppercase").concat(important, "; letter-spacing: 0.05em").concat(important, ";\n      }\n      .typing-cursor {\n        display: inline-block").concat(important, "; width: 2px").concat(important, "; height: 12px").concat(important, ";\n        background: ").concat(primaryGrad2, "; vertical-align: middle").concat(important, "; margin-inline-start: 2px").concat(important, ";\n        animation: ttp-blink 0.9s infinite").concat(important, ";\n      }\n      @keyframes ttp-msg-in {\n        from { opacity: 0; transform: translateY(4px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n\n      /* \u2500\u2500 TYPE ROW \u2500\u2500 */\n      .ttp-type-row { display: flex").concat(important, "; gap: 8px").concat(important, "; padding: 0 16px 16px").concat(important, "; flex-wrap: wrap").concat(important, "; }\n      .ttp-input {\n        flex: 1").concat(important, "; padding: 9px 12px").concat(important, ";\n        background: rgba(255,255,255,0.05)").concat(important, ";\n        border: 1px solid rgba(255,255,255,0.09)").concat(important, ";\n        border-radius: 10px").concat(important, "; color: rgba(255,255,255,0.6)").concat(important, ";\n        font-size: 12px").concat(important, "; outline: none").concat(important, "; font-family: inherit").concat(important, ";\n        transition: border-color 0.2s").concat(important, ";\n        text-align: start").concat(important, ";\n      }\n      .ttp-input::placeholder { color: rgba(255,255,255,0.25)").concat(important, "; }\n      .ttp-input:focus { border-color: ").concat(primaryGrad1, "80; }\n      .ttp-send-btn {\n        width: 34px").concat(important, "; height: 34px").concat(important, "; border-radius: 9px").concat(important, ";\n        background: ").concat(sendBtnColor, "; border: none").concat(important, "; cursor: pointer").concat(important, ";\n        display: flex").concat(important, "; align-items: center").concat(important, "; justify-content: center").concat(important, ";\n        flex-shrink: 0").concat(important, "; transition: background 0.2s").concat(important, ";\n      }\n      .ttp-send-btn:hover { background: ").concat(sendBtnColor, "; opacity: 0.85").concat(important, "; }\n\n      /* \u2500\u2500 KEYFRAMES \u2500\u2500 */\n      @keyframes ttp-pulse  { 0%,100%{opacity:1} 50%{opacity:.3} }\n      @keyframes ttp-blink  { 0%,49%{opacity:1} 50%,100%{opacity:0} }\n      @keyframes ttp-ring   { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.22);opacity:0} }\n      @keyframes ttp-orb-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }\n      @keyframes ttp-wave   { from{transform:scaleY(.15);opacity:.3} to{transform:scaleY(1);opacity:.9} }\n      @keyframes ttp-pill-pulse { 0%,100%{box-shadow:0 0 0 0 ").concat(primaryGrad1, "80} 60%{box-shadow:0 0 0 7px ").concat(primaryGrad1, "00} }\n\n      /* Mobile Voice Call UI - Shared styles (also used in generateMobileCSS) */\n      ").concat(this._getSharedMobileCSS(important), "\n\n    ");
     }
 
     /**
@@ -36096,7 +36342,18 @@ var Styles = /*#__PURE__*/function () {
   }, {
     key: "_getSharedMobileCSS",
     value: function _getSharedMobileCSS(important) {
-      return "\n      .mobile-duration-dot {\ndisplay: block !important;\n                width: 6px".concat(important, ";\n        height: 6px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background-color: #ef4444").concat(important, ";\n        animation: mobilePulse 1.5s ease-in-out infinite").concat(important, ";\n      }\n\n      @keyframes mobilePulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.5; transform: scale(0.95); }\n      }\n\n      .mobile-voice-bar {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        gap: 10px").concat(important, ";\n        padding: 14px").concat(important, ";\n        position: relative").concat(important, ";\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%)").concat(important, ";\n        border-radius: 24px 24px 0 0").concat(important, ";\n        box-shadow: 0 -8px 32px rgba(124, 58, 237, 0.5), 0 -2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2)").concat(important, ";\n        width: 100% !important;\n        max-width: 100% !important;\n        pointer-events: auto").concat(important, ";\n        overflow: hidden !important;\n        margin: 0 !important;\n      }\n\n      .mobile-top-row {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: space-between").concat(important, ";\n        position: relative").concat(important, ";\n      }\n\n      .mobile-status-indicator {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 5px").concat(important, ";\n        min-width: 85px").concat(important, ";\n      }\n\n      .mobile-status-dot {\ndisplay: block !important;\n                width: 7px").concat(important, ";\n        height: 7px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background-color: #22c55e").concat(important, ";\n        box-shadow: 0 0 8px #22c55e").concat(important, ";\n        transition: all 0.3s ease").concat(important, ";\n      }\n\n      .mobile-status-text {\n        font-size: 11px").concat(important, ";\n        font-weight: 700").concat(important, ";\n        color: rgba(255,255,255,0.95)").concat(important, ";\n        text-transform: uppercase").concat(important, ";\n        letter-spacing: 0.3px").concat(important, ";\n      }\n\n      .mobile-waveform-center {\n        position: absolute !important;\n        left: 50% !important;\n        transform: translateX(-50%) !important;\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 3px !important;\n        height: 24px !important;\n        visibility: visible !important;\n      }\n\n      .mobile-waveform-bars {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 3px !important;\n      }\n\n      .mobile-waveform-bar {\n        display: block !important;\n        width: 4px !important;\n        min-height: 4px !important;\n        background-color: #fff !important;\n        border-radius: 2px !important;\n        transition: height 0.12s ease-out !important;\n        box-shadow: 0 0 8px rgba(255,255,255,0.5) !important;\n        visibility: visible !important;\n      }\n\n      .mobile-controls {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 6px").concat(important, ";\n        pointer-events: auto").concat(important, ";\n        touch-action: manipulation").concat(important, ";\n        position: relative").concat(important, ";\n        z-index: 120").concat(important, ";\n      }\n\n      .mobile-control-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        min-width: 32px").concat(important, ";\n        min-height: 32px").concat(important, ";\n        max-width: 32px").concat(important, ";\n        max-height: 32px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n        background-color: rgba(255,255,255,0.15)").concat(important, ";\n        position: relative").concat(important, ";\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-control-btn:hover {\n        background-color: rgba(255,255,255,0.25)").concat(important, ";\n      }\n\n      .mobile-control-btn.muted {\n        background-color: rgba(239, 68, 68, 0.3)").concat(important, ";\n      }\n\n      .mobile-control-btn .mobile-mic-icon,\n      .mobile-control-btn .mobile-speaker-icon {\n        position: absolute").concat(important, ";\n        top: 50%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n\n      .mobile-control-btn .mobile-mic-off-icon,\n      .mobile-control-btn .mobile-speaker-off-icon {\n        position: absolute").concat(important, ";\n        top: 50%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n\n      .mobile-control-btn:not(.muted) .mobile-mic-off-icon,\n      .mobile-control-btn:not(.muted) .mobile-speaker-off-icon {\n        display: none !important;\n        visibility: hidden !important;\n        opacity: 0 !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-icon,\n      .mobile-control-btn.muted .mobile-speaker-icon {\n        display: none !important;\n        visibility: hidden !important;\n        opacity: 0 !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-off-icon,\n      .mobile-control-btn.muted .mobile-speaker-off-icon {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n      }\n\n      .mobile-end-call-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 36px").concat(important, ";\n        height: 36px").concat(important, ";\n        min-width: 36px").concat(important, ";\n        min-height: 36px").concat(important, ";\n        max-width: 36px").concat(important, ";\n        max-height: 36px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        background-color: #ef4444").concat(important, ";\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5)").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-end-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n\n      /* ID-specific selectors for WordPress/Shopify compatibility */\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn,\n      #mobileEndCallBtn.mobile-end-call-btn {\n        border-radius: 50% !important;\n        overflow: hidden !important;\n        pointer-events: auto !important;\n        touch-action: manipulation !important;\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        text-decoration: none !important;\n        line-height: 1 !important;\n        font-size: 0 !important;\n        letter-spacing: 0 !important;\n        text-indent: 0 !important;\n        text-transform: none !important;\n        color: transparent !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn {\n        width: 32px !important;\n        height: 32px !important;\n        min-width: 32px !important;\n        min-height: 32px !important;\n        max-width: 32px !important;\n        max-height: 32px !important;\n      }\n\n      #mobileEndCallBtn.mobile-end-call-btn {\n        width: 36px !important;\n        height: 36px !important;\n        min-width: 36px !important;\n        min-height: 36px !important;\n        max-width: 36px !important;\n        max-height: 36px !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn .mobile-mic-icon,\n      #mobileMuteBtn.mobile-control-btn .mobile-mic-off-icon,\n      #mobileSpeakerBtn.mobile-control-btn .mobile-speaker-icon,\n      #mobileSpeakerBtn.mobile-control-btn .mobile-speaker-off-icon,\n      #mobileEndCallBtn.mobile-end-call-btn svg {\n        width: 15px !important;\n        height: 15px !important;\n        max-width: 15px !important;\n        max-height: 15px !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        pointer-events: none !important;\n        overflow: visible !important;\n      }\n\n      #mobile-voice-call-bar-container svg path,\n      #mobile-voice-call-bar-container svg line,\n      #mobile-voice-call-bar-container svg polygon,\n      #mobile-voice-call-bar-container svg circle {\n        pointer-events: none !important;\n        vector-effect: none !important;\n      }\n\n      .mobile-end-call-btn:hover {\n        transform: scale(1.05)").concat(important, ";\n      }\n\n      .mobile-transcript-row {\n        width: 100%").concat(important, ";\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        gap: 6px").concat(important, ";\n        padding: 10px 12px").concat(important, ";\n        background: rgba(255,255,255,0.18)").concat(important, ";\n        border-radius: 14px").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        text-align: left").concat(important, ";\n        backdrop-filter: blur(4px)").concat(important, ";\n        transition: background 0.2s ease").concat(important, ";\n        pointer-events: auto !important;\n        position: relative !important;\n        z-index: 100 !important;\n      }\n\n      .mobile-transcript-row:hover {\n        background: rgba(255,255,255,0.25)").concat(important, ";\n      }\n\n      .mobile-transcript-text {\n        margin: 0").concat(important, ";\n        font-size: 13px").concat(important, ";\n        color: #fff").concat(important, ";\n        line-height: 1.4").concat(important, ";\n        font-weight: 500").concat(important, ";\n        display: -webkit-box !important;\n        -webkit-line-clamp: 2 !important;\n        -webkit-box-orient: vertical !important;\n        overflow: hidden !important;\n        min-height: 2.8em !important;\n      }\n\n      .mobile-transcript-footer {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: space-between").concat(important, ";\n      }\n\n      .mobile-expand-hint {\n        font-size: 10px").concat(important, ";\n        color: rgba(255,255,255,0.6)").concat(important, ";\n        text-transform: uppercase").concat(important, ";\n        letter-spacing: 0.5px").concat(important, ";\n        font-weight: 600").concat(important, ";\n      }\n\n      .mobile-transcript-overlay {\n        position: fixed").concat(important, ";\n        top: 0").concat(important, ";\n        left: 0").concat(important, ";\n        right: 0").concat(important, ";\n        bottom: 0").concat(important, ";\n        background-color: rgba(0,0,0,0.6)").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: flex-end").concat(important, ";\n        padding: 12px").concat(important, ";\n        z-index: 2147483647").concat(important, ";\n        pointer-events: auto").concat(important, ";\n      }\n\n      .mobile-expanded-transcript {\n        width: 100%").concat(important, ";\n        max-height: 75%").concat(important, ";\n        background: #fff").concat(important, ";\n        border-radius: 24px 24px 16px 16px").concat(important, ";\n        overflow: hidden").concat(important, ";\n        box-shadow: 0 -8px 40px rgba(0,0,0,0.3)").concat(important, ";\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n      }\n\n      .mobile-transcript-header {\n        display: flex").concat(important, ";\n        justify-content: space-between").concat(important, ";\n        align-items: center").concat(important, ";\n        padding: 14px 16px").concat(important, ";\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%)").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n\n      .mobile-header-left {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        gap: 2px").concat(important, ";\n      }\n\n      .mobile-header-status {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 6px").concat(important, ";\n      }\n\n      .mobile-header-status-dot {\ndisplay: block !important;\n                width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background-color: #22c55e").concat(important, ";\n        box-shadow: 0 0 6px #22c55e").concat(important, ";\n      }\n\n      .mobile-header-status-text {\n        font-size: 10px").concat(important, ";\n        font-weight: 700").concat(important, ";\n        color: rgba(255,255,255,0.9)").concat(important, ";\n        text-transform: uppercase").concat(important, ";\n        letter-spacing: 0.5px").concat(important, ";\n      }\n\n      .mobile-header-duration {\n        font-size: 10px").concat(important, ";\n        font-weight: 600").concat(important, ";\n        color: rgba(255,255,255,0.7)").concat(important, ";\n        margin-left: 8px").concat(important, ";\n      }\n\n      .mobile-transcript-label {\n        font-size: 11px").concat(important, ";\n        font-weight: 800").concat(important, ";\n        color: rgba(255,255,255,0.7)").concat(important, ";\n        letter-spacing: 1px").concat(important, ";\n      }\n\n      .mobile-close-transcript-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: rgba(255,255,255,0.2)").concat(important, ";\n        color: #fff").concat(important, ";\n        cursor: pointer").concat(important, ";\n      }\n\n      .mobile-close-transcript-btn:hover {\n        background: rgba(255,255,255,0.3)").concat(important, ";\n      }\n\n      .mobile-messages-container {\n        flex: 1").concat(important, ";\n        padding: 16px").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        gap: 12px").concat(important, ";\n      }\n\n      .mobile-message-bubble {\n        max-width: 85%").concat(important, ";\n        padding: 12px 16px").concat(important, ";\n        border-radius: 18px").concat(important, ";\n        font-size: 14px").concat(important, ";\n        line-height: 1.5").concat(important, ";\n        word-wrap: break-word").concat(important, ";\n      }\n\n      .mobile-message-bubble.assistant {\n        align-self: flex-start").concat(important, ";\n        background-color: #f3f4f6").concat(important, ";\n        color: #374151").concat(important, ";\n        border-bottom-left-radius: 4px").concat(important, ";\n      }\n\n      .mobile-message-bubble.user {\n        align-self: flex-end").concat(important, ";\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%)").concat(important, ";\n        color: #fff").concat(important, ";\n        border-bottom-right-radius: 4px").concat(important, ";\n      }\n\n      .mobile-input-area {\n        padding: 12px 16px 16px").concat(important, ";\n        border-top: 1px solid #e5e7eb").concat(important, ";\n        background: #f9fafb").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n\n      .mobile-input-wrapper {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 8px").concat(important, ";\n        padding: 4px 4px 4px 16px").concat(important, ";\n        background: #fff").concat(important, ";\n        border-radius: 24px").concat(important, ";\n        border: 2px solid #e5e7eb").concat(important, ";\n      }\n\n      .mobile-text-input {\n        flex: 1").concat(important, ";\n        border: none").concat(important, ";\n        outline: none").concat(important, ";\n        font-size: 14px").concat(important, ";\n        color: #374151").concat(important, ";\n        background: transparent").concat(important, ";\n        padding: 10px 0").concat(important, ";\n      }\n\n      .mobile-text-input::placeholder {\n        color: #9ca3af").concat(important, ";\n      }\n\n      .mobile-send-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 40px").concat(important, ";\n        height: 40px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%)").concat(important, ";\n        color: #fff").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n      }\n\n      .mobile-send-btn:hover:not(:disabled) {\n        transform: scale(1.05)").concat(important, ";\n      }\n\n      .mobile-send-btn:disabled {\n        opacity: 0.5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n\n      .mobile-input-hint {\n        margin: 8px 0 0").concat(important, ";\n        font-size: 11px").concat(important, ";\n        color: #9ca3af").concat(important, ";\n        text-align: center").concat(important, ";\n        transition: color 0.2s ease").concat(important, ";\n      }\n\n      /* Mobile text input status states */\n      .mobile-input-hint--sending {\n        color: #666").concat(important, ";\n      }\n\n      .mobile-input-hint--success {\n        color: #28a745").concat(important, ";\n      }\n\n      .mobile-input-hint--queued {\n        color: #ffc107").concat(important, ";\n      }\n\n      .mobile-input-hint--error {\n        color: #dc3545").concat(important, ";\n      }\n\n      /* Disabled mobile input styling */\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n\n      #mobileSendBtn:disabled {\n        opacity: 0.5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n    ");
+      var c = this.config;
+      var avatarGrad1 = c.avatarGradient1 || '#6d56f5';
+      var avatarGrad2 = c.avatarGradient2 || '#a78bfa';
+      /* Match .ttp-mobile-landing / mobile FAB (TTPChatWidget pillGradient) — not desktop hero/call surface */
+      var mobileLandingSurface = c.pillGradient || 'linear-gradient(135deg, #581c87, #312e81, #1e1b4b)';
+      /* Primary = Start Call CTA — user bubbles + send only */
+      var primaryGrad1 = c.primaryBtnGradient1 || c.startCallButtonColor || '#6d56f5';
+      var primaryGrad2 = c.primaryBtnGradient2 || c.startCallButtonColor || '#9d8df8';
+      var sendBtnColor = c.sendButtonColor || primaryGrad1;
+      var endCallColor = c.endCallButtonColor || '#ef4444';
+      var mobileAccentGradient = "linear-gradient(135deg, ".concat(sendBtnColor, ", ").concat(primaryGrad2, ")");
+      return "\n      /* Mobile voice idle: optional header image replaces \uD83E\uDD16 */\n      .mobile-voice-interface #voiceIdleState .voice-avatar {\n        width: 80px".concat(important, ";\n        height: 80px").concat(important, ";\n        margin: 12px auto 16px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: linear-gradient(135deg, ").concat(avatarGrad1, ", ").concat(avatarGrad2, ")").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        font-size: 40px").concat(important, ";\n        line-height: 1").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .mobile-voice-interface #voiceIdleState .voice-avatar.voice-avatar--image {\n        padding: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n      }\n      .mobile-voice-interface #voiceIdleState .voice-avatar-img {\n        width: 100%").concat(important, ";\n        height: 100%").concat(important, ";\n        object-fit: cover").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        display: block").concat(important, ";\n      }\n\n      /* Idle hero copy: light text on dark / gradient panels (host themes often force dark body color) */\n      .mobile-voice-interface #voiceIdleState .voice-status {\n        text-align: center").concat(important, ";\n      }\n      .mobile-voice-interface #voiceIdleState .voice-status-title {\n        color: rgba(255,255,255,0.96)").concat(important, ";\n      }\n      .mobile-voice-interface #voiceIdleState .voice-status-subtitle {\n        color: rgba(255,255,255,0.78)").concat(important, ";\n      }\n\n      .mobile-duration-dot {\ndisplay: block !important;\n                width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background-color: #ef4444").concat(important, ";\n        animation: mobilePulse 1.5s ease-in-out infinite").concat(important, ";\n      }\n\n      @keyframes mobilePulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.5; transform: scale(0.95); }\n      }\n\n      .mobile-voice-bar {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        gap: 10px").concat(important, ";\n        padding: 14px").concat(important, ";\n        position: relative").concat(important, ";\n        background: ").concat(mobileLandingSurface).concat(important, ";\n        border-radius: 24px 24px 0 0").concat(important, ";\n        box-shadow:\n          0 -8px 32px rgba(0, 0, 0, 0.3),\n          0 -2px 8px rgba(0, 0, 0, 0.35),\n          inset 0 1px 0 rgba(255, 255, 255, 0.1)").concat(important, ";\n        width: 100% !important;\n        max-width: 100% !important;\n        pointer-events: auto").concat(important, ";\n        overflow: hidden !important;\n        margin: 0 !important;\n      }\n\n      .mobile-top-row {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: space-between").concat(important, ";\n        position: relative").concat(important, ";\n      }\n\n      .mobile-status-indicator {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 5px").concat(important, ";\n        min-width: 85px").concat(important, ";\n      }\n\n      .mobile-status-dot {\ndisplay: block !important;\n                width: 7px").concat(important, ";\n        height: 7px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background-color: #22c55e").concat(important, ";\n        box-shadow: 0 0 8px #22c55e").concat(important, ";\n        transition: all 0.3s ease").concat(important, ";\n      }\n\n      .mobile-status-text {\n        font-size: 11px").concat(important, ";\n        font-weight: 700").concat(important, ";\n        color: rgba(255,255,255,0.95)").concat(important, ";\n        text-transform: uppercase").concat(important, ";\n        letter-spacing: 0.3px").concat(important, ";\n      }\n\n      .mobile-waveform-center {\n        position: absolute !important;\n        left: 50% !important;\n        transform: translateX(-50%) !important;\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 3px !important;\n        height: 24px !important;\n        visibility: visible !important;\n      }\n\n      .mobile-waveform-bars {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 3px !important;\n      }\n\n      .mobile-waveform-bar {\n        display: block !important;\n        width: 4px !important;\n        min-height: 4px !important;\n        background-color: #fff !important;\n        border-radius: 2px !important;\n        transition: height 0.12s ease-out !important;\n        box-shadow: 0 0 8px rgba(255,255,255,0.5) !important;\n        visibility: visible !important;\n      }\n\n      .mobile-controls {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 6px").concat(important, ";\n        pointer-events: auto").concat(important, ";\n        touch-action: manipulation").concat(important, ";\n        position: relative").concat(important, ";\n        z-index: 120").concat(important, ";\n      }\n\n      .mobile-control-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        min-width: 32px").concat(important, ";\n        min-height: 32px").concat(important, ";\n        max-width: 32px").concat(important, ";\n        max-height: 32px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n        background-color: rgba(255,255,255,0.15)").concat(important, ";\n        position: relative").concat(important, ";\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-control-btn:hover {\n        background-color: rgba(255,255,255,0.25)").concat(important, ";\n      }\n\n      .mobile-control-btn.muted {\n        background-color: rgba(239, 68, 68, 0.3)").concat(important, ";\n      }\n\n      .mobile-control-btn .mobile-mic-icon,\n      .mobile-control-btn .mobile-speaker-icon {\n        position: absolute").concat(important, ";\n        top: 50%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n\n      .mobile-control-btn .mobile-mic-off-icon,\n      .mobile-control-btn .mobile-speaker-off-icon {\n        position: absolute").concat(important, ";\n        top: 50%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n\n      .mobile-control-btn:not(.muted) .mobile-mic-off-icon,\n      .mobile-control-btn:not(.muted) .mobile-speaker-off-icon {\n        display: none !important;\n        visibility: hidden !important;\n        opacity: 0 !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-icon,\n      .mobile-control-btn.muted .mobile-speaker-icon {\n        display: none !important;\n        visibility: hidden !important;\n        opacity: 0 !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-off-icon,\n      .mobile-control-btn.muted .mobile-speaker-off-icon {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n      }\n\n      .mobile-end-call-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 36px").concat(important, ";\n        height: 36px").concat(important, ";\n        min-width: 36px").concat(important, ";\n        min-height: 36px").concat(important, ";\n        max-width: 36px").concat(important, ";\n        max-height: 36px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        background-color: ").concat(endCallColor).concat(important, ";\n        box-shadow: 0 4px 14px ").concat(endCallColor, "80").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-end-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n\n      /* ID-specific selectors for WordPress/Shopify compatibility */\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn,\n      #mobileEndCallBtn.mobile-end-call-btn {\n        border-radius: 50% !important;\n        overflow: hidden !important;\n        pointer-events: auto !important;\n        touch-action: manipulation !important;\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        text-decoration: none !important;\n        line-height: 1 !important;\n        font-size: 0 !important;\n        letter-spacing: 0 !important;\n        text-indent: 0 !important;\n        text-transform: none !important;\n        color: transparent !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn {\n        width: 32px !important;\n        height: 32px !important;\n        min-width: 32px !important;\n        min-height: 32px !important;\n        max-width: 32px !important;\n        max-height: 32px !important;\n      }\n\n      #mobileEndCallBtn.mobile-end-call-btn {\n        width: 36px !important;\n        height: 36px !important;\n        min-width: 36px !important;\n        min-height: 36px !important;\n        max-width: 36px !important;\n        max-height: 36px !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn .mobile-mic-icon,\n      #mobileMuteBtn.mobile-control-btn .mobile-mic-off-icon,\n      #mobileSpeakerBtn.mobile-control-btn .mobile-speaker-icon,\n      #mobileSpeakerBtn.mobile-control-btn .mobile-speaker-off-icon,\n      #mobileEndCallBtn.mobile-end-call-btn svg {\n        width: 15px !important;\n        height: 15px !important;\n        max-width: 15px !important;\n        max-height: 15px !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        pointer-events: none !important;\n        overflow: visible !important;\n      }\n\n      #mobile-voice-call-bar-container svg path,\n      #mobile-voice-call-bar-container svg line,\n      #mobile-voice-call-bar-container svg polygon,\n      #mobile-voice-call-bar-container svg circle {\n        pointer-events: none !important;\n        vector-effect: none !important;\n      }\n\n      .mobile-end-call-btn:hover {\n        transform: scale(1.05)").concat(important, ";\n      }\n\n      .mobile-transcript-row {\n        width: 100%").concat(important, ";\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        gap: 6px").concat(important, ";\n        padding: 10px 12px").concat(important, ";\n        background: rgba(255,255,255,0.18)").concat(important, ";\n        border-radius: 14px").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        text-align: start").concat(important, ";\n        backdrop-filter: blur(4px)").concat(important, ";\n        transition: background 0.2s ease").concat(important, ";\n        pointer-events: auto !important;\n        position: relative !important;\n        z-index: 100 !important;\n      }\n\n      .mobile-transcript-row:hover {\n        background: rgba(255,255,255,0.25)").concat(important, ";\n      }\n\n      .mobile-transcript-text {\n        margin: 0").concat(important, ";\n        font-size: 13px").concat(important, ";\n        color: #fff").concat(important, ";\n        line-height: 1.4").concat(important, ";\n        font-weight: 500").concat(important, ";\n        unicode-bidi: plaintext").concat(important, ";\n        text-align: start").concat(important, ";\n        display: -webkit-box !important;\n        -webkit-line-clamp: 2 !important;\n        -webkit-box-orient: vertical !important;\n        overflow: hidden !important;\n        min-height: 2.8em !important;\n      }\n\n      .mobile-transcript-footer {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: space-between").concat(important, ";\n      }\n\n      .mobile-expand-hint {\n        font-size: 10px").concat(important, ";\n        color: rgba(255,255,255,0.6)").concat(important, ";\n        text-transform: uppercase").concat(important, ";\n        letter-spacing: 0.5px").concat(important, ";\n        font-weight: 600").concat(important, ";\n      }\n\n      /* Base: hidden. Inline display:none loses to display:flex!important \u2014 use modifier for open state */\n      .mobile-transcript-overlay {\n        position: fixed").concat(important, ";\n        top: 0").concat(important, ";\n        left: 0").concat(important, ";\n        right: 0").concat(important, ";\n        bottom: 0").concat(important, ";\n        background-color: rgba(0,0,0,0.6)").concat(important, ";\n        display: none").concat(important, ";\n        padding: 12px").concat(important, ";\n        z-index: 2147483647").concat(important, ";\n        pointer-events: auto").concat(important, ";\n      }\n\n      .mobile-transcript-overlay.mobile-transcript-overlay--open {\n        display: flex").concat(important, ";\n        align-items: flex-end").concat(important, ";\n      }\n\n      .mobile-expanded-transcript {\n        width: 100%").concat(important, ";\n        max-height: 75%").concat(important, ";\n        background: #fff").concat(important, ";\n        border-radius: 24px 24px 16px 16px").concat(important, ";\n        overflow: hidden").concat(important, ";\n        box-shadow: 0 -8px 40px rgba(0,0,0,0.3)").concat(important, ";\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n      }\n\n      .mobile-transcript-header {\n        display: flex").concat(important, ";\n        justify-content: space-between").concat(important, ";\n        align-items: center").concat(important, ";\n        padding: 14px 16px").concat(important, ";\n        background: ").concat(mobileLandingSurface).concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n\n      .mobile-header-left {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        gap: 2px").concat(important, ";\n      }\n\n      .mobile-header-status {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 6px").concat(important, ";\n      }\n\n      .mobile-header-status-dot {\ndisplay: block !important;\n                width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background-color: #22c55e").concat(important, ";\n        box-shadow: 0 0 6px #22c55e").concat(important, ";\n      }\n\n      .mobile-header-status-text {\n        font-size: 10px").concat(important, ";\n        font-weight: 700").concat(important, ";\n        color: rgba(255,255,255,0.9)").concat(important, ";\n        text-transform: uppercase").concat(important, ";\n        letter-spacing: 0.5px").concat(important, ";\n      }\n\n      .mobile-header-duration {\n        font-size: 10px").concat(important, ";\n        font-weight: 600").concat(important, ";\n        color: rgba(255,255,255,0.7)").concat(important, ";\n        margin-left: 8px").concat(important, ";\n      }\n\n      .mobile-transcript-label {\n        font-size: 11px").concat(important, ";\n        font-weight: 800").concat(important, ";\n        color: rgba(255,255,255,0.7)").concat(important, ";\n        letter-spacing: 1px").concat(important, ";\n      }\n\n      .mobile-close-transcript-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: rgba(255,255,255,0.2)").concat(important, ";\n        color: #fff").concat(important, ";\n        cursor: pointer").concat(important, ";\n      }\n\n      .mobile-close-transcript-btn:hover {\n        background: rgba(255,255,255,0.3)").concat(important, ";\n      }\n\n      .mobile-messages-container {\n        flex: 1").concat(important, ";\n        padding: 16px").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        gap: 12px").concat(important, ";\n      }\n\n      .mobile-message-bubble {\n        max-width: 85%").concat(important, ";\n        padding: 12px 16px").concat(important, ";\n        border-radius: 18px").concat(important, ";\n        font-size: 14px").concat(important, ";\n        line-height: 1.5").concat(important, ";\n        word-wrap: break-word").concat(important, ";\n        unicode-bidi: plaintext").concat(important, ";\n        text-align: start").concat(important, ";\n      }\n\n      .mobile-message-bubble.assistant {\n        align-self: flex-start").concat(important, ";\n        background-color: #f3f4f6").concat(important, ";\n        color: #374151").concat(important, ";\n        border-bottom-left-radius: 4px").concat(important, ";\n      }\n\n      .mobile-message-bubble.user {\n        align-self: flex-end").concat(important, ";\n        background: ").concat(mobileAccentGradient).concat(important, ";\n        color: #fff").concat(important, ";\n        border-bottom-right-radius: 4px").concat(important, ";\n      }\n\n      .mobile-input-area {\n        padding: 12px 16px 16px").concat(important, ";\n        border-top: 1px solid #e5e7eb").concat(important, ";\n        background: #f9fafb").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n\n      .mobile-input-wrapper {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 8px").concat(important, ";\n        padding: 4px 4px 4px 16px").concat(important, ";\n        background: #fff").concat(important, ";\n        border-radius: 24px").concat(important, ";\n        border: 2px solid #e5e7eb").concat(important, ";\n      }\n\n      .mobile-text-input {\n        flex: 1").concat(important, ";\n        border: none").concat(important, ";\n        outline: none").concat(important, ";\n        font-size: 14px").concat(important, ";\n        color: #374151").concat(important, ";\n        background: transparent").concat(important, ";\n        padding: 10px 0").concat(important, ";\n        text-align: start").concat(important, ";\n      }\n\n      .mobile-text-input::placeholder {\n        color: #9ca3af").concat(important, ";\n      }\n\n      .mobile-send-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 40px").concat(important, ";\n        height: 40px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: ").concat(mobileAccentGradient).concat(important, ";\n        color: #fff").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: all 0.2s ease").concat(important, ";\n      }\n\n      .mobile-send-btn:hover:not(:disabled) {\n        transform: scale(1.05)").concat(important, ";\n      }\n\n      .mobile-send-btn:disabled {\n        opacity: 0.5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n\n      .mobile-input-hint {\n        margin: 8px 0 0").concat(important, ";\n        font-size: 11px").concat(important, ";\n        color: #9ca3af").concat(important, ";\n        text-align: center").concat(important, ";\n        transition: color 0.2s ease").concat(important, ";\n      }\n\n      /* Mobile text input status states */\n      .mobile-input-hint--sending {\n        color: #666").concat(important, ";\n      }\n\n      .mobile-input-hint--success {\n        color: #28a745").concat(important, ";\n      }\n\n      .mobile-input-hint--queued {\n        color: #ffc107").concat(important, ";\n      }\n\n      .mobile-input-hint--error {\n        color: #dc3545").concat(important, ";\n      }\n\n      /* Disabled mobile input styling */\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n\n      #mobileSendBtn:disabled {\n        opacity: 0.5").concat(important, ";\n        cursor: not-allowed").concat(important, ";\n      }\n    ");
     }
 
     /**
@@ -36123,7 +36380,10 @@ var Styles = /*#__PURE__*/function () {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Templates: () => (/* binding */ Templates)
+/* harmony export */   Templates: () => (/* binding */ Templates),
+/* harmony export */   escapeHtmlAttr: () => (/* binding */ escapeHtmlAttr),
+/* harmony export */   resolveIdleHeaderAvatarUrl: () => (/* binding */ resolveIdleHeaderAvatarUrl),
+/* harmony export */   sanitizeHeaderAvatarImageUrl: () => (/* binding */ sanitizeHeaderAvatarImageUrl)
 /* harmony export */ });
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
@@ -36145,6 +36405,37 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * - None (stateless template generation)
  */
 
+/** Allow only http(s) absolute URLs for idle header avatar images. */
+function sanitizeHeaderAvatarImageUrl(raw) {
+  var s = raw != null && String(raw).trim() || '';
+  if (!s) return '';
+  try {
+    var u = new URL(s);
+    if (u.protocol !== 'http:' && u.protocol !== 'https:') return '';
+    return u.href;
+  } catch (_unused) {
+    return '';
+  }
+}
+function escapeHtmlAttr(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+
+/**
+ * Resolve idle header avatar URL from flat + nested voice config (and legacy / API aliases).
+ * The idle UI shows the first letter of the agent name only when this returns ''.
+ */
+function resolveIdleHeaderAvatarUrl(config) {
+  if (!config) return '';
+  var v = config.voice || {};
+  var candidates = [config.headerAvatarImageUrl, v.headerAvatarImageUrl, config.header_avatar_image_url, v.header_avatar_image_url, v.avatarImageUrl, config.avatarImageUrl, v.avatar_image_url, config.avatar_image_url];
+  for (var _i = 0, _candidates = candidates; _i < _candidates.length; _i++) {
+    var raw = _candidates[_i];
+    var u = sanitizeHeaderAvatarImageUrl(raw);
+    if (u) return u;
+  }
+  return '';
+}
 var Templates = /*#__PURE__*/function () {
   function Templates(voiceInterface) {
     _classCallCheck(this, Templates);
@@ -36196,12 +36487,17 @@ var Templates = /*#__PURE__*/function () {
       }
 
       // Desktop UI - new dark theme design
-      var agentName = this.config.headerTitle || this.config.agentName || 'Sasha';
+      // Prefer explicit agent name over header.title so the pill can use a separate CTA (header.pillTitle + header.title).
+      var agentName = this.config.agentName != null && String(this.config.agentName).trim() !== '' ? String(this.config.agentName).trim() : 'Sasha';
       var agentRole = this.config.agentRole || 'AI Voice Assistant';
       var headline = this.config.headline || this.config.startCallTitle || 'Hi there 👋';
       var subline = this.config.subline || this.config.startCallSubtitle || 'Ask me anything — I respond instantly<br>in voice or text.';
       var avatarInitial = agentName.charAt(0).toUpperCase();
-      return "<div class=\"voice-interface\" id=\"voiceInterface\">\n      <!-- Idle View -->\n      <div id=\"voiceIdleState\">\n        <div class=\"ttp-hero\">\n          <div class=\"ttp-header\">\n            <div class=\"ttp-agent\">\n              <div class=\"ttp-avatar-wrap\">\n                <div class=\"ttp-avatar\">".concat(avatarInitial, "</div>\n                <div class=\"ttp-online-dot\"></div>\n              </div>\n              <div>\n                <div class=\"ttp-agent-name\">").concat(agentName, "</div>\n                <div class=\"ttp-agent-role\">").concat(agentRole, "</div>\n              </div>\n            </div>\n            <button type=\"button\" class=\"ttp-close-btn\" id=\"ttpCloseIdle\" aria-label=\"Close widget\">\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M10 2L2 10M2 2l8 8\"/>\n              </svg>\n            </button>\n          </div>\n          <div class=\"ttp-headline\">").concat(headline, "</div>\n          <div class=\"ttp-subline\">").concat(subline, "</div>\n        </div>\n\n        <div class=\"ttp-body\">\n          <button type=\"button\" class=\"ttp-btn-primary\" id=\"startCallBtn\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"").concat(this.config.startCallButtonTextColor || 'white', "\" stroke-width=\"2\">\n              <path d=\"M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z\"/>\n              <path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M8 22h8\"/>\n            </svg>\n            ").concat(this.getText('startCallButtonText', 'startCall') || 'Start Voice Call', "\n          </button>\n          <button type=\"button\" class=\"ttp-btn-secondary\" id=\"startTextBtn\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>\n            </svg>\n            ").concat(this.config.sendMessageText || this.getText('sendMessageText', 'sendMessage') || 'Send a Message', "\n          </button>\n          ").concat((_this$config$whatsapp = this.config.whatsapp) !== null && _this$config$whatsapp !== void 0 && _this$config$whatsapp.number ? "\n          <a class=\"ttp-btn-wa\" id=\"ttpWhatsAppBtn\"\n             href=\"https://wa.me/".concat(this.config.whatsapp.number).concat(this.config.whatsapp.text ? '?text=' + encodeURIComponent(this.config.whatsapp.text) : '', "\"\n             target=\"_blank\" rel=\"noopener\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"#25d366\">\n              <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.655-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"/>\n            </svg>\n            WhatsApp\n          </a>\n          ") : '', "\n        </div>\n      </div>\n\n      <!-- Active Call View -->\n      <div id=\"voiceActiveState\" style=\"display: none;\">\n        <!-- Full voice section (hidden when items/rooms are shown) -->\n        <div class=\"desktop-voice-section\" id=\"desktopVoiceSection\">\n          <div class=\"ttp-call-hero\">\n            <div class=\"ttp-call-topbar\">\n              <div class=\"ttp-rec\">\n                <div class=\"ttp-rec-dot\"></div>\n                <span class=\"ttp-timer\" id=\"desktopTimerText\">00:00</span>\n              </div>\n              <span class=\"ttp-call-label\">Voice call active</span>\n              <button type=\"button\" class=\"ttp-close-btn\" id=\"ttpCloseActive\" aria-label=\"Close widget\">\n                <svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M10 2L2 10M2 2l8 8\"/>\n                </svg>\n              </button>\n            </div>\n\n            <div class=\"ttp-orb-wrap\">\n              <div class=\"ttp-orb-rings\">\n                <div class=\"ttp-ring ttp-ring-1\"></div>\n                <div class=\"ttp-ring ttp-ring-2\"></div>\n                <div class=\"ttp-orb\" id=\"desktopMainWaveform\">\n                  <div class=\"ttp-wave\" id=\"ttp-wave\"></div>\n                </div>\n              </div>\n              <div class=\"ttp-listen-label\" id=\"desktopStatusText\">").concat(this.t('listening') || 'Listening to you...', "</div>\n            </div>\n          </div>\n\n          <div class=\"ttp-controls\">\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopMuteBtn\" title=\"").concat(this.getTooltip('mute'), "\" aria-label=\"Mute microphone\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-mic-icon\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-mic-off-icon\" style=\"display: none; position: absolute;\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-end-btn\" id=\"desktopEndCallBtn\" title=\"").concat(this.getTooltip('endCall'), "\" aria-label=\"End call\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 12 19.79 19.79 0 0 1 1.97 3.4 2 2 0 0 1 3.95 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopSpeakerBtn\" title=\"").concat(this.getTooltip('speaker'), "\" aria-label=\"Toggle speaker\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-speaker-off-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Compact voice section (shown when items/rooms are visible) -->\n        <div class=\"compact-voice-section\" id=\"compactVoiceSection\" style=\"display: none;\">\n          <div class=\"compact-left\">\n            <div class=\"compact-avatar\" id=\"desktopAvatarCompact\">\n              <div class=\"ttp-orb compact-orb\" id=\"desktopMainWaveformCompact\">\n                <div class=\"ttp-wave\"></div>\n              </div>\n            </div>\n            <div class=\"compact-info\">\n              <div class=\"compact-timer\" id=\"desktopTimerCompact\">\n                <span class=\"ttp-rec-dot\"></span>\n                <span id=\"compactTimerText\">00:00</span>\n              </div>\n              <div class=\"compact-status\" id=\"desktopStatusCompact\">\n                <span id=\"compactStatusText\">").concat(this.t('listening') || 'Listening...', "</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"compact-controls\">\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopMuteBtnCompact\" title=\"").concat(this.getTooltip('mute'), "\" aria-label=\"Mute microphone\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-mic-icon\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-mic-off-icon\" style=\"display: none; position: absolute;\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn danger\" id=\"desktopEndCallBtnCompact\" title=\"").concat(this.getTooltip('endCall'), "\" aria-label=\"End call\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"overflow: visible;\">\n                <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 12 19.79 19.79 0 0 1 1.97 3.4 2 2 0 0 1 3.95 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\" transform=\"rotate(135 12 12)\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopSpeakerBtnCompact\" title=\"").concat(this.getTooltip('speaker'), "\" aria-label=\"Toggle speaker\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-speaker-off-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Transcript -->\n        <div class=\"ttp-transcript desktop-conversation-panel\" id=\"desktopConversationPanel\">\n          <div class=\"ttp-transcript-hdr\" id=\"conversationHeader\">\n            <span class=\"ttp-live-label\">Live</span>\n            <span class=\"ttp-toggle-text\" id=\"conversationToggleText\">Show history</span>\n            <div class=\"ttp-dots\">\n              <div class=\"ttp-dot\"></div>\n              <div class=\"ttp-dot\"></div>\n              <div class=\"ttp-dot\"></div>\n            </div>\n          </div>\n          <div class=\"live-transcript-collapsed\" id=\"liveTranscriptCollapsed\">\n            <div class=\"ttp-transcript-text\" id=\"liveTextCollapsed\">\n              ").concat(this.t('transcriptWillAppear') || 'Transcript will appear here...', "<span class=\"ttp-cursor\"></span>\n            </div>\n          </div>\n          <div class=\"conversation-history\" id=\"conversationHistory\">\n            <div class=\"conversation-messages\" id=\"conversationMessages\"></div>\n            <div class=\"live-message-row\" id=\"liveMessageRow\" style=\"display: none;\">\n              <div class=\"message-bubble\">\n                <span class=\"live-badge\">Live</span>\n                <span id=\"liveMessageText\"></span><span class=\"ttp-cursor\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Type row -->\n        <div class=\"ttp-type-row voice-text-input-area\">\n          <input class=\"ttp-input\" type=\"text\" id=\"voiceTextInput\" placeholder=\"").concat(this.getText('inputPlaceholder', 'typeMessage') || 'Or type here…', "\" aria-label=\"Type a message\" />\n          <button type=\"button\" class=\"ttp-send-btn\" id=\"voiceSendBtn\" aria-label=\"Send message\">\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\">\n              <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/>\n              <polygon points=\"22 2 15 22 11 13 2 9 22 2\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>");
+      var headerAvatarUrl = resolveIdleHeaderAvatarUrl(this.config);
+      var idleAvatarInner = headerAvatarUrl ? "<img src=\"".concat(escapeHtmlAttr(headerAvatarUrl), "\" alt=\"\" class=\"ttp-avatar-img\" />") : avatarInitial;
+      var idleAvatarClass = headerAvatarUrl ? 'ttp-avatar ttp-avatar--image' : 'ttp-avatar';
+      var textDir = this.config.direction === 'rtl' ? 'rtl' : 'ltr';
+      return "<div class=\"voice-interface\" id=\"voiceInterface\">\n      <!-- Idle View -->\n      <div id=\"voiceIdleState\">\n        <div class=\"ttp-hero\">\n          <div class=\"ttp-header\">\n            <div class=\"ttp-agent\">\n              <div class=\"ttp-avatar-wrap\">\n                <div class=\"".concat(idleAvatarClass, "\">").concat(idleAvatarInner, "</div>\n                <div class=\"ttp-online-dot\"></div>\n              </div>\n              <div>\n                <div class=\"ttp-agent-name\">").concat(agentName, "</div>\n                <div class=\"ttp-agent-role\">").concat(agentRole, "</div>\n              </div>\n            </div>\n            <button type=\"button\" class=\"ttp-close-btn\" id=\"ttpCloseIdle\" aria-label=\"Close widget\">\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M10 2L2 10M2 2l8 8\"/>\n              </svg>\n            </button>\n          </div>\n          <div class=\"ttp-headline\">").concat(headline, "</div>\n          <div class=\"ttp-subline\">").concat(subline, "</div>\n        </div>\n\n        <div class=\"ttp-body\">\n          <button type=\"button\" class=\"ttp-btn-primary\" id=\"startCallBtn\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"").concat(this.config.startCallButtonTextColor || 'white', "\" stroke-width=\"2\">\n              <path d=\"M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z\"/>\n              <path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M8 22h8\"/>\n            </svg>\n            ").concat(this.getText('startCallButtonText', 'startCall') || 'Start Voice Call', "\n          </button>\n          <button type=\"button\" class=\"ttp-btn-secondary\" id=\"startTextBtn\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>\n            </svg>\n            ").concat(this.config.sendMessageText || this.getText('sendMessageText', 'sendMessage') || 'Send a Message', "\n          </button>\n          ").concat((_this$config$whatsapp = this.config.whatsapp) !== null && _this$config$whatsapp !== void 0 && _this$config$whatsapp.number ? "\n          <a class=\"ttp-btn-wa\" id=\"ttpWhatsAppBtn\"\n             href=\"https://wa.me/".concat(this.config.whatsapp.number).concat(this.config.whatsapp.text ? '?text=' + encodeURIComponent(this.config.whatsapp.text) : '', "\"\n             target=\"_blank\" rel=\"noopener\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"#25d366\">\n              <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.655-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"/>\n            </svg>\n            WhatsApp\n          </a>\n          ") : '', "\n        </div>\n      </div>\n\n      <!-- Active Call View -->\n      <div id=\"voiceActiveState\" style=\"display: none;\">\n        <!-- Full voice section (hidden when items/rooms are shown) -->\n        <div class=\"desktop-voice-section\" id=\"desktopVoiceSection\">\n          <div class=\"ttp-call-hero\">\n            <div class=\"ttp-call-topbar\">\n              <div class=\"ttp-rec\">\n                <div class=\"ttp-rec-dot\"></div>\n                <span class=\"ttp-timer\" id=\"desktopTimerText\">00:00</span>\n              </div>\n              <span class=\"ttp-call-label\">Voice call active</span>\n              <button type=\"button\" class=\"ttp-close-btn\" id=\"ttpCloseActive\" aria-label=\"Close widget\">\n                <svg width=\"9\" height=\"9\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M10 2L2 10M2 2l8 8\"/>\n                </svg>\n              </button>\n            </div>\n\n            <div class=\"ttp-orb-wrap\">\n              <div class=\"ttp-orb-rings\">\n                <div class=\"ttp-ring ttp-ring-1\"></div>\n                <div class=\"ttp-ring ttp-ring-2\"></div>\n                <div class=\"ttp-orb\" id=\"desktopMainWaveform\">\n                  <div class=\"ttp-wave\" id=\"ttp-wave\"></div>\n                </div>\n              </div>\n              <div class=\"ttp-listen-label\" id=\"desktopStatusText\">").concat(this.t('listening') || 'Listening to you...', "</div>\n            </div>\n          </div>\n\n          <div class=\"ttp-controls\">\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopMuteBtn\" title=\"").concat(this.getTooltip('mute'), "\" aria-label=\"Mute microphone\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-mic-icon\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-mic-off-icon\" style=\"display: none; position: absolute;\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-end-btn\" id=\"desktopEndCallBtn\" title=\"").concat(this.getTooltip('endCall'), "\" aria-label=\"End call\">\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 12 19.79 19.79 0 0 1 1.97 3.4 2 2 0 0 1 3.95 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"ttp-ctrl-btn\" id=\"desktopSpeakerBtn\" title=\"").concat(this.getTooltip('speaker'), "\" aria-label=\"Toggle speaker\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-speaker-off-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Compact voice section (shown when items/rooms are visible) -->\n        <div class=\"compact-voice-section\" id=\"compactVoiceSection\" style=\"display: none;\">\n          <div class=\"compact-left\">\n            <div class=\"compact-avatar\" id=\"desktopAvatarCompact\">\n              <div class=\"ttp-orb compact-orb\" id=\"desktopMainWaveformCompact\">\n                <div class=\"ttp-wave\"></div>\n              </div>\n            </div>\n            <div class=\"compact-info\">\n              <div class=\"compact-timer\" id=\"desktopTimerCompact\">\n                <span class=\"ttp-rec-dot\"></span>\n                <span id=\"compactTimerText\">00:00</span>\n              </div>\n              <div class=\"compact-status\" id=\"desktopStatusCompact\">\n                <span id=\"compactStatusText\">").concat(this.t('listening') || 'Listening...', "</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"compact-controls\">\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopMuteBtnCompact\" title=\"").concat(this.getTooltip('mute'), "\" aria-label=\"Mute microphone\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-mic-icon\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-mic-off-icon\" style=\"display: none; position: absolute;\">\n                <path d=\"M12 1a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V4a3 3 0 0 1 3-3z\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn danger\" id=\"desktopEndCallBtnCompact\" title=\"").concat(this.getTooltip('endCall'), "\" aria-label=\"End call\">\n              <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"overflow: visible;\">\n                <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.99 12 19.79 19.79 0 0 1 1.97 3.4 2 2 0 0 1 3.95 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\" transform=\"rotate(135 12 12)\"/>\n              </svg>\n            </button>\n            <button type=\"button\" class=\"compact-control-btn secondary\" id=\"desktopSpeakerBtnCompact\" title=\"").concat(this.getTooltip('speaker'), "\" aria-label=\"Toggle speaker\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" class=\"desktop-speaker-icon\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"desktop-speaker-off-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\" stroke=\"currentColor\" stroke-width=\"1.8\" fill=\"none\"/>\n                <line x1=\"5\" y1=\"5\" x2=\"19\" y2=\"19\" stroke=\"#ef4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\"0.85\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Transcript -->\n        <div class=\"ttp-transcript desktop-conversation-panel\" id=\"desktopConversationPanel\" dir=\"").concat(textDir, "\">\n          <div class=\"ttp-transcript-hdr\" id=\"conversationHeader\">\n            <span class=\"ttp-live-label\">Live</span>\n            <span class=\"ttp-toggle-text\" id=\"conversationToggleText\">Show history</span>\n            <div class=\"ttp-dots\">\n              <div class=\"ttp-dot\"></div>\n              <div class=\"ttp-dot\"></div>\n              <div class=\"ttp-dot\"></div>\n            </div>\n          </div>\n          <div class=\"live-transcript-collapsed\" id=\"liveTranscriptCollapsed\">\n            <div class=\"ttp-transcript-text\" id=\"liveTextCollapsed\">\n              ").concat(this.t('transcriptWillAppear') || 'Transcript will appear here...', "<span class=\"ttp-cursor\"></span>\n            </div>\n          </div>\n          <div class=\"conversation-history\" id=\"conversationHistory\">\n            <div class=\"conversation-messages\" id=\"conversationMessages\"></div>\n            <div class=\"live-message-row\" id=\"liveMessageRow\" style=\"display: none;\">\n              <div class=\"message-bubble\" dir=\"").concat(textDir, "\">\n                <span class=\"live-badge\">Live</span>\n                <span id=\"liveMessageText\"></span><span class=\"ttp-cursor\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Type row -->\n        <div class=\"ttp-type-row voice-text-input-area\">\n          <input class=\"ttp-input\" type=\"text\" id=\"voiceTextInput\" dir=\"").concat(textDir, "\" placeholder=\"").concat(this.getText('inputPlaceholder', 'typeMessage') || 'Or type here…', "\" aria-label=\"Type a message\" />\n          <button type=\"button\" class=\"ttp-send-btn\" id=\"voiceSendBtn\" aria-label=\"Send message\">\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\">\n              <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"/>\n              <polygon points=\"22 2 15 22 11 13 2 9 22 2\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>");
     }
 
     /**
@@ -36211,9 +36507,13 @@ var Templates = /*#__PURE__*/function () {
     key: "generateMobileHTML",
     value: function generateMobileHTML() {
       // For mobile, idle state goes in widget, but active state will be appended to body
-      return "<div class=\"voice-interface mobile-voice-interface\" id=\"voiceInterface\">\n      <!-- Before Call State (same as desktop) -->\n      <div id=\"voiceIdleState\">\n        <div class=\"voice-avatar\" id=\"voiceAvatar\">\uD83E\uDD16</div>\n        <div class=\"voice-status\">\n          <div class=\"voice-status-title\">".concat(this.getText('startCallTitle', 'clickToStartCall'), "</div>\n          <div class=\"voice-status-subtitle\">").concat(this.getText('startCallSubtitle', 'realTimeVoice'), "</div>\n        </div>\n        <button type=\"button\" class=\"start-call-btn\" id=\"startCallBtn\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z\"/>\n          </svg>\n          <span>").concat(this.getText('startCallButtonText', 'startCall'), "</span>\n        </button>\n      </div>\n      \n      <!-- Mobile Active Call State - Hidden placeholder (actual bar will be appended to body) -->\n      <div id=\"voiceActiveState\" class=\"mobile-active-state\" style=\"display: none;\">\n        <!-- Duration Badge -->\n        <div class=\"mobile-duration-badge\" id=\"mobileDurationBadge\">\n          <div class=\"mobile-duration-dot\"></div>\n          <span id=\"mobileDurationText\">00:00</span>\n        </div>\n        \n        <!-- Main Bar -->\n        <div class=\"mobile-voice-bar\">\n          <!-- Top Row: Status, Waveform, Controls -->\n          <div class=\"mobile-top-row\">\n            <!-- Status Indicator -->\n            <div class=\"mobile-status-indicator\">\n              <div class=\"mobile-status-dot\" id=\"mobileStatusDot\"></div>\n              <span class=\"mobile-status-text\" id=\"mobileStatusText\">Listening...</span>\n            </div>\n            \n            <!-- Centered Waveform -->\n            <div class=\"mobile-waveform-center\" id=\"mobileWaveform\">\n              ").concat(Array(8).fill(0).map(function (_, i) {
+      var textDir = this.config.direction === 'rtl' ? 'rtl' : 'ltr';
+      var headerAvatarUrl = resolveIdleHeaderAvatarUrl(this.config);
+      var mobileAvatarInner = headerAvatarUrl ? "<img src=\"".concat(escapeHtmlAttr(headerAvatarUrl), "\" alt=\"\" class=\"voice-avatar-img\" />") : '🤖';
+      var mobileAvatarClass = headerAvatarUrl ? 'voice-avatar voice-avatar--image' : 'voice-avatar';
+      return "<div class=\"voice-interface mobile-voice-interface\" id=\"voiceInterface\" dir=\"".concat(textDir, "\">\n      <!-- Before Call State (same as desktop) -->\n      <div id=\"voiceIdleState\">\n        <div class=\"").concat(mobileAvatarClass, "\" id=\"voiceAvatar\">").concat(mobileAvatarInner, "</div>\n        <div class=\"voice-status\">\n          <div class=\"voice-status-title\">").concat(this.getText('startCallTitle', 'clickToStartCall'), "</div>\n          <div class=\"voice-status-subtitle\">").concat(this.getText('startCallSubtitle', 'realTimeVoice'), "</div>\n        </div>\n        <button type=\"button\" class=\"start-call-btn\" id=\"startCallBtn\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z\"/>\n          </svg>\n          <span>").concat(this.getText('startCallButtonText', 'startCall'), "</span>\n        </button>\n      </div>\n      \n      <!-- Mobile Active Call State - Hidden placeholder (actual bar will be appended to body) -->\n      <div id=\"voiceActiveState\" class=\"mobile-active-state\" style=\"display: none;\">\n        <!-- Duration Badge -->\n        <div class=\"mobile-duration-badge\" id=\"mobileDurationBadge\">\n          <div class=\"mobile-duration-dot\"></div>\n          <span id=\"mobileDurationText\">00:00</span>\n        </div>\n        \n        <!-- Main Bar -->\n        <div class=\"mobile-voice-bar\">\n          <!-- Top Row: Status, Waveform, Controls -->\n          <div class=\"mobile-top-row\">\n            <!-- Status Indicator -->\n            <div class=\"mobile-status-indicator\">\n              <div class=\"mobile-status-dot\" id=\"mobileStatusDot\"></div>\n              <span class=\"mobile-status-text\" id=\"mobileStatusText\">Listening...</span>\n            </div>\n            \n            <!-- Centered Waveform -->\n            <div class=\"mobile-waveform-center\" id=\"mobileWaveform\">\n              ").concat(Array(8).fill(0).map(function (_, i) {
         return "<div class=\"mobile-waveform-bar\" data-index=\"".concat(i, "\"></div>");
-      }).join(''), "\n            </div>\n            \n            <!-- Controls -->\n            <div class=\"mobile-controls\">\n              <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileMuteBtn\" aria-label=\"Mute microphone\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-icon\">\n                  <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                  <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                  <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n                </svg>\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-off-icon\" style=\"display: none;\">\n                  <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                  <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                  <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n                  <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n                </svg>\n              </button>\n              \n              <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileSpeakerBtn\" aria-label=\"Toggle speaker\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-icon\">\n                  <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                  <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n                </svg>\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-off-icon\" style=\"display: none;\">\n                  <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                  <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n                  <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n                </svg>\n              </button>\n              \n              <button type=\"button\" class=\"mobile-end-call-btn\" id=\"mobileEndCallBtn\" aria-label=\"End call\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91\"/>\n                  <line x1=\"22\" x2=\"2\" y1=\"2\" y2=\"22\"/>\n                </svg>\n              </button>\n            </div>\n          </div>\n          \n          <!-- Bottom Row: Transcript (expandable) -->\n          <button type=\"button\" class=\"mobile-transcript-row\" id=\"mobileTranscriptRow\">\n            <p class=\"mobile-transcript-text\" id=\"mobileTranscriptText\">").concat(this.t('transcriptWillAppear'), "</p>\n            <div class=\"mobile-transcript-footer\">\n              <span class=\"mobile-expand-hint\">tap to expand & type</span>\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity: 0.6;\">\n                <path d=\"M7 17L17 7M17 7H7M17 7V17\"/>\n              </svg>\n            </div>\n          </button>\n        </div>\n      </div>\n      \n      <!-- Expanded Transcript Overlay -->\n      <div class=\"mobile-transcript-overlay\" id=\"mobileTranscriptOverlay\" style=\"display: none;\">\n        <div class=\"mobile-expanded-transcript\" id=\"mobileExpandedTranscript\">\n          <!-- Header -->\n          <div class=\"mobile-transcript-header\">\n            <div class=\"mobile-header-left\">\n              <div class=\"mobile-header-status\">\n                <div class=\"mobile-header-status-dot\"></div>\n                <span class=\"mobile-header-status-text\" id=\"mobileHeaderStatusText\">Listening...</span>\n                <span class=\"mobile-header-duration\" id=\"mobileHeaderDuration\">00:00</span>\n              </div>\n              <span class=\"mobile-transcript-label\">CONVERSATION</span>\n            </div>\n            <button type=\"button\" class=\"mobile-close-transcript-btn\" id=\"mobileCloseTranscriptBtn\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\n              </svg>\n            </button>\n          </div>\n          \n          <!-- Messages Container -->\n          <div class=\"mobile-messages-container\" id=\"mobileMessagesContainer\">\n            <!-- Messages will be dynamically added here -->\n          </div>\n          \n          <!-- Text Input Area -->\n          <div class=\"mobile-input-area\">\n            <div class=\"mobile-input-wrapper\">\n              <input\n                type=\"text\"\n                placeholder=\"Type a message...\"\n                id=\"mobileTextInput\"\n                class=\"mobile-text-input\"\n              />\n              <button type=\"button\" class=\"mobile-send-btn\" id=\"mobileSendBtn\" disabled>\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z\"/>\n                </svg>\n              </button>\n            </div>\n            <p class=\"mobile-input-hint\">\uD83C\uDF99\uFE0F Voice is still active \u2022 Type or speak</p>\n          </div>\n        </div>\n      </div>\n    </div>");
+      }).join(''), "\n            </div>\n            \n            <!-- Controls -->\n            <div class=\"mobile-controls\">\n              <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileMuteBtn\" aria-label=\"Mute microphone\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-icon\">\n                  <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                  <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                  <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n                </svg>\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-mic-off-icon\" style=\"display: none;\">\n                  <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/>\n                  <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/>\n                  <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/>\n                  <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n                </svg>\n              </button>\n              \n              <button type=\"button\" class=\"mobile-control-btn\" id=\"mobileSpeakerBtn\" aria-label=\"Toggle speaker\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-icon\">\n                  <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                  <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n                </svg>\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"mobile-speaker-off-icon\" style=\"display: none;\">\n                  <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/>\n                  <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"/>\n                  <line x1=\"4\" y1=\"4\" x2=\"20\" y2=\"20\" stroke=\"#ef4444\" stroke-width=\"1.5\" opacity=\"0.85\"/>\n                </svg>\n              </button>\n              \n              <button type=\"button\" class=\"mobile-end-call-btn\" id=\"mobileEndCallBtn\" aria-label=\"End call\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91\"/>\n                  <line x1=\"22\" x2=\"2\" y1=\"2\" y2=\"22\"/>\n                </svg>\n              </button>\n            </div>\n          </div>\n          \n          <!-- Bottom Row: Transcript (expandable) -->\n          <button type=\"button\" class=\"mobile-transcript-row\" id=\"mobileTranscriptRow\">\n            <p class=\"mobile-transcript-text\" id=\"mobileTranscriptText\" dir=\"").concat(textDir, "\">").concat(this.t('transcriptWillAppear'), "</p>\n            <div class=\"mobile-transcript-footer\">\n              <span class=\"mobile-expand-hint\">tap to expand & type</span>\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"opacity: 0.6;\">\n                <path d=\"M7 17L17 7M17 7H7M17 7V17\"/>\n              </svg>\n            </div>\n          </button>\n        </div>\n      </div>\n      \n      <!-- Expanded Transcript Overlay -->\n      <div class=\"mobile-transcript-overlay\" id=\"mobileTranscriptOverlay\">\n        <div class=\"mobile-expanded-transcript\" id=\"mobileExpandedTranscript\">\n          <!-- Header -->\n          <div class=\"mobile-transcript-header\">\n            <div class=\"mobile-header-left\">\n              <div class=\"mobile-header-status\">\n                <div class=\"mobile-header-status-dot\"></div>\n                <span class=\"mobile-header-status-text\" id=\"mobileHeaderStatusText\">Listening...</span>\n                <span class=\"mobile-header-duration\" id=\"mobileHeaderDuration\">00:00</span>\n              </div>\n              <span class=\"mobile-transcript-label\">CONVERSATION</span>\n            </div>\n            <button type=\"button\" class=\"mobile-close-transcript-btn\" id=\"mobileCloseTranscriptBtn\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M18 6L6 18M6 6l12 12\"/>\n              </svg>\n            </button>\n          </div>\n          \n          <!-- Messages Container -->\n          <div class=\"mobile-messages-container\" id=\"mobileMessagesContainer\">\n            <!-- Messages will be dynamically added here -->\n          </div>\n          \n          <!-- Text Input Area -->\n          <div class=\"mobile-input-area\">\n            <div class=\"mobile-input-wrapper\">\n              <input\n                type=\"text\"\n                placeholder=\"Type a message...\"\n                id=\"mobileTextInput\"\n                class=\"mobile-text-input\"\n                dir=\"").concat(textDir, "\"\n              />\n              <button type=\"button\" class=\"mobile-send-btn\" id=\"mobileSendBtn\" disabled>\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z\"/>\n                </svg>\n              </button>\n            </div>\n            <p class=\"mobile-input-hint\">\uD83C\uDF99\uFE0F Voice is still active \u2022 Type or speak</p>\n          </div>\n        </div>\n      </div>\n    </div>");
     }
   }]);
 }();
@@ -36979,10 +37279,11 @@ var Transcript = /*#__PURE__*/function () {
           messagesToRender = messagesToRender.slice(0, -1);
         }
       }
+      var textDir = this.config.direction === 'rtl' ? 'rtl' : 'ltr';
       console.log('📝 [TRANSCRIPT] Rendering', messagesToRender.length, 'messages (live message excluded)');
       container.innerHTML = messagesToRender.map(function (msg) {
         var isUser = msg.role === 'user';
-        return "\n        <div class=\"message-row ".concat(msg.role, "\">\n          <div class=\"message-avatar ").concat(msg.role, "\">\n            ").concat(isUser ? 'U' : '<div class="orb"></div>', "\n          </div>\n          <div class=\"message-bubble\">").concat(_this.escapeHtml(msg.content), "</div>\n        </div>\n      ");
+        return "\n        <div class=\"message-row ".concat(msg.role, "\">\n          <div class=\"message-avatar ").concat(msg.role, "\">\n            ").concat(isUser ? 'U' : '<div class="orb"></div>', "\n          </div>\n          <div class=\"message-bubble\" dir=\"").concat(textDir, "\">").concat(_this.escapeHtml(msg.content), "</div>\n        </div>\n      ");
       }).join('');
 
       // Scroll to bottom
@@ -37020,10 +37321,13 @@ __webpack_require__.r(__webpack_exports__);
     "startCall": "Start Call",
     "connecting": "Connecting...",
     "connectingSubtitle": "Please wait",
+    "awaitingBrowserMic": "Waiting for microphone…",
+    "awaitingBrowserMicDetail": "Allow access in your browser’s permission prompt.",
     "listening": "Listening...",
     "speakFreely": "Speak freely",
     "liveTranscript": "Live Transcript",
     "transcriptWillAppear": "Transcript will appear here during the call...",
+    "userTranscriptPrefix": "You: ",
     "mute": "Mute",
     "speaker": "Speaker",
     "endCall": "End Call",
@@ -37032,6 +37336,7 @@ __webpack_require__.r(__webpack_exports__);
     "online": "Online",
     "newChat": "New Chat",
     "back": "Back",
+    "backToModeChoice": "Voice or text",
     "close": "Close",
     "error": "Error",
     "typeMessage": "Type your message...",
@@ -37049,10 +37354,13 @@ __webpack_require__.r(__webpack_exports__);
     "startCall": "התחל שיחה",
     "connecting": "מתחבר...",
     "connectingSubtitle": "אנא המתן",
+    "awaitingBrowserMic": "ממתין למיקרופון…",
+    "awaitingBrowserMicDetail": "אשר גישה בחלון ההרשאות של הדפדפן.",
     "listening": "מקשיב...",
     "speakFreely": "דבר בחופשיות",
     "liveTranscript": "תמלול בזמן אמת",
     "transcriptWillAppear": "התמלול יופיע כאן במהלך השיחה...",
+    "userTranscriptPrefix": "אתה: ",
     "mute": "השתק",
     "speaker": "רמקול",
     "endCall": "סיים שיחה",
@@ -37061,6 +37369,7 @@ __webpack_require__.r(__webpack_exports__);
     "online": "מקוון",
     "newChat": "צ'אט חדש",
     "back": "חזור",
+    "backToModeChoice": "קול או טקסט",
     "close": "סגור",
     "error": "שגיאה",
     "typeMessage": "הקלד הודעה...",
@@ -37078,10 +37387,13 @@ __webpack_require__.r(__webpack_exports__);
     "startCall": "ابدأ المكالمة",
     "connecting": "جارٍ الاتصال...",
     "connectingSubtitle": "يرجى الانتظار",
+    "awaitingBrowserMic": "في انتظار الميكروفون…",
+    "awaitingBrowserMicDetail": "اسمح بالوصول في موجه أذونات المتصفح.",
     "listening": "الاستماع...",
     "speakFreely": "تكلم بحرية",
     "liveTranscript": "نص مباشر",
     "transcriptWillAppear": "سيظهر النص هنا أثناء المكالمة...",
+    "userTranscriptPrefix": "أنت: ",
     "mute": "كتم الصوت",
     "speaker": "مكبر الصوت",
     "endCall": "إنهاء المكالمة",
@@ -37090,6 +37402,7 @@ __webpack_require__.r(__webpack_exports__);
     "online": "متصل",
     "newChat": "محادثة جديدة",
     "back": "رجوع",
+    "backToModeChoice": "صوت أو نص",
     "close": "إغلاق",
     "error": "خطأ",
     "typeMessage": "اكتب رسالة...",
@@ -37107,10 +37420,13 @@ __webpack_require__.r(__webpack_exports__);
     "startCall": "Начать звонок",
     "connecting": "Подключение...",
     "connectingSubtitle": "Пожалуйста, подождите",
+    "awaitingBrowserMic": "Ожидание микрофона…",
+    "awaitingBrowserMicDetail": "Разрешите доступ в запросе браузера.",
     "listening": "Слушаю...",
     "speakFreely": "Говорите свободно",
     "liveTranscript": "Живая транскрипция",
     "transcriptWillAppear": "Транскрипция появится здесь во время звонка...",
+    "userTranscriptPrefix": "Вы: ",
     "mute": "Отключить звук",
     "speaker": "Динамик",
     "endCall": "Завершить звонок",
@@ -37119,6 +37435,7 @@ __webpack_require__.r(__webpack_exports__);
     "online": "В сети",
     "newChat": "Новый чат",
     "back": "Назад",
+    "backToModeChoice": "Голос или текст",
     "close": "Закрыть",
     "error": "Ошибка",
     "typeMessage": "Введите сообщение...",
@@ -37136,10 +37453,13 @@ __webpack_require__.r(__webpack_exports__);
     "startCall": "Iniciar llamada",
     "connecting": "Conectando...",
     "connectingSubtitle": "Por favor espere",
+    "awaitingBrowserMic": "Esperando el micrófono…",
+    "awaitingBrowserMicDetail": "Permita el acceso en el cuadro de permisos del navegador.",
     "listening": "Escuchando...",
     "speakFreely": "Habla libremente",
     "liveTranscript": "Transcripción en vivo",
     "transcriptWillAppear": "La transcripción aparecerá aquí durante la llamada...",
+    "userTranscriptPrefix": "Tú: ",
     "mute": "Silenciar",
     "speaker": "Altavoz",
     "endCall": "Terminar llamada",
@@ -37148,6 +37468,7 @@ __webpack_require__.r(__webpack_exports__);
     "online": "En línea",
     "newChat": "Nuevo chat",
     "back": "Atrás",
+    "backToModeChoice": "Voz o texto",
     "close": "Cerrar",
     "error": "Error",
     "typeMessage": "Escribe un mensaje...",
@@ -37165,10 +37486,13 @@ __webpack_require__.r(__webpack_exports__);
     "startCall": "Démarrer l'appel",
     "connecting": "Connexion...",
     "connectingSubtitle": "Veuillez patienter",
+    "awaitingBrowserMic": "En attente du microphone…",
+    "awaitingBrowserMicDetail": "Autorisez l’accès dans la fenêtre d’autorisation du navigateur.",
     "listening": "Écoute...",
     "speakFreely": "Parlez librement",
     "liveTranscript": "Transcripción en direct",
     "transcriptWillAppear": "La transcription apparaîtra ici pendant l'appel...",
+    "userTranscriptPrefix": "Vous : ",
     "mute": "Muet",
     "speaker": "Haut-parleur",
     "endCall": "Terminer l'appel",
@@ -37177,6 +37501,7 @@ __webpack_require__.r(__webpack_exports__);
     "online": "En ligne",
     "newChat": "Nouveau chat",
     "back": "Retour",
+    "backToModeChoice": "Voix ou texte",
     "close": "Fermer",
     "error": "Erreur",
     "typeMessage": "Tapez votre message...",
@@ -37194,10 +37519,13 @@ __webpack_require__.r(__webpack_exports__);
     "startCall": "Anruf starten",
     "connecting": "Verbinden...",
     "connectingSubtitle": "Bitte warten",
+    "awaitingBrowserMic": "Warte auf Mikrofon…",
+    "awaitingBrowserMicDetail": "Erlauben Sie den Zugriff in der Browser-Anfrage.",
     "listening": "Hören...",
     "speakFreely": "Sprechen Sie frei",
     "liveTranscript": "Live-Transkription",
     "transcriptWillAppear": "Die Transkription erscheint hier während des Anrufs...",
+    "userTranscriptPrefix": "Sie: ",
     "mute": "Stumm",
     "speaker": "Lautsprecher",
     "endCall": "Anruf beenden",
@@ -37206,6 +37534,7 @@ __webpack_require__.r(__webpack_exports__);
     "online": "Online",
     "newChat": "Neuer Chat",
     "back": "Zurück",
+    "backToModeChoice": "Sprache oder Text",
     "close": "Schließen",
     "error": "Fehler",
     "typeMessage": "Geben Sie eine Nachricht ein...",