ttp-agent-sdk 2.48.20 → 2.48.23

package/dist/agent-widget.dev.js

@@ -12129,7 +12129,7 @@ var TextChatSDK = /*#__PURE__*/function (_EventEmitter) {
 
       // SDK build time for debugging
       if (true) {
-        helloMessage.lastBuildTime = "2026-08-27T16:45:39.666Z";
+        helloMessage.lastBuildTime = "2026-08-30T08:48:33.316Z";
       }
       try {
         this.ws.send(JSON.stringify(helloMessage));
@@ -21439,8 +21439,8 @@ var VoiceSDK = _v2_VoiceSDK_js__WEBPACK_IMPORTED_MODULE_0__["default"];
 
 
 // Version - injected at build time from package.json via webpack DefinePlugin
-var VERSION = "2.48.20";
-var BUILD_TIME = "2026-08-27T16:45:39.666Z";
+var VERSION = "2.48.23";
+var BUILD_TIME = "2026-08-30T08:48:33.316Z";
 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
@@ -27192,15 +27192,11 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
       if (typeof this.config.htmlAudioPlayback === 'boolean') {
         return this.config.htmlAudioPlayback;
       }
-      // Default: HTML hop (AudioContext → MediaStreamDestination → <audio>) gives
-      // Safari/Chrome a far-end AEC reference on Apple mobile + macOS where Web
-      // Audio → destination is not in the echo-cancellation loop. On Windows and
-      // Linux desktop, Chrome-wide AEC already covers speaker echo; the hop only
-      // adds adaptive live-stream speed wobble — keep it off there (same as Linux).
+      // Default: hop off everywhere (retired — wobble). Apple uses loopback instead.
       var hopOn = this._needsHtmlAudioHopForAec();
       if (!this._hopDefaultLogged) {
         this._hopDefaultLogged = true;
-        var reason = hopOn ? 'on (mobile / macOS: AEC far-end route)' : 'off (desktop Windows/Linux: stable direct Web Audio playback)';
+        var reason = hopOn ? 'on (explicit override or config)' : 'off (default; Apple uses loopback AEC instead)';
         console.log("\uD83D\uDD0A AudioPlayer: htmlAudioPlayback default \u2192 ".concat(reason));
       }
       return hopOn;
@@ -27274,18 +27270,86 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
         sampleRate: audioDataSampleRate
       };
     }
+
+    /**
+     * Read-only playback-route telemetry for hello (`client`) and client_audio_info.
+     * Does not influence route selection — mirrors flags set by _connectGainToOutput.
+     */
   }, {
-    key: "getHtmlAudioPlaybackInfo",
-    value: function getHtmlAudioPlaybackInfo() {
+    key: "getPlaybackRouteReport",
+    value: function getPlaybackRouteReport() {
+      var win = typeof window !== 'undefined' ? window : null;
+      var ua = navigator.userAgent || '';
+      var platform = navigator.userAgentData && navigator.userAgentData.platform || navigator.platform || '';
+      var hopPref = (0,_hopPlatform_js__WEBPACK_IMPORTED_MODULE_4__.resolveTtpHopEffective)(win, typeof this.config.htmlAudioPlayback === 'boolean' ? this.config.htmlAudioPlayback : undefined, ua, platform);
+      var loopPref = (0,_loopbackAec_js__WEBPACK_IMPORTED_MODULE_5__.resolveTtpLoopbackEffective)(win, typeof this.config.loopbackAec === 'boolean' ? this.config.loopbackAec : undefined, ua, platform);
+      var htmlAudioPlayback = this.wantsHtmlAudioPlayback();
+      var loopbackWanted = this.wantsLoopbackAec();
+      var playbackRoute = this._reportEffectivePlaybackRoute();
       return {
-        htmlAudioPlayback: this.wantsHtmlAudioPlayback(),
+        osFamily: (0,_hopPlatform_js__WEBPACK_IMPORTED_MODULE_4__.detectOsFamily)(ua, platform),
+        htmlAudioPlayback: htmlAudioPlayback,
+        hopSource: hopPref.source,
+        playbackRoute: playbackRoute,
+        loopbackAttach: this._reportLoopbackAttach(loopbackWanted, playbackRoute),
+        // Legacy booleans — kept for downstream consumers that predated tri-state.
         htmlAudioRouteActive: this._htmlAudioRouteActive,
         htmlAudioPlayOk: this._htmlAudioPlayOk,
-        loopbackAec: this.wantsLoopbackAec(),
+        loopbackAec: loopbackWanted,
+        loopbackSource: loopPref.source,
         loopbackRouteActive: this._loopbackReady,
         loopbackPlayOk: this._loopbackPlayOk
       };
     }
+  }, {
+    key: "getHtmlAudioPlaybackInfo",
+    value: function getHtmlAudioPlaybackInfo() {
+      return this.getPlaybackRouteReport();
+    }
+
+    /** Effective last-hop route from established player state (not config intent). */
+  }, {
+    key: "_reportEffectivePlaybackRoute",
+    value: function _reportEffectivePlaybackRoute() {
+      if (this._loopbackReady && !this._loopbackFailed) {
+        return 'loopback';
+      }
+      if (this._htmlAudioRouteActive) {
+        return 'htmlHop';
+      }
+      return 'destination';
+    }
+  }, {
+    key: "_reportLoopbackAttach",
+    value: function _reportLoopbackAttach(loopbackWanted, playbackRoute) {
+      if (!loopbackWanted) {
+        return {
+          outcome: 'not_attempted'
+        };
+      }
+      if (this._loopbackFailed) {
+        return {
+          outcome: 'failed',
+          fallbackTo: playbackRoute
+        };
+      }
+      if (this._loopbackReady && this._loopbackPlayOk) {
+        return {
+          outcome: 'success'
+        };
+      }
+      if (this._loopbackReady && !this._loopbackPlayOk) {
+        // Peer path is up; element play() not yet confirmed.
+        return {
+          outcome: 'pending'
+        };
+      }
+      // Negotiation in flight — audio may be on an interim hop/destination route.
+      return {
+        outcome: 'pending',
+        fallbackTo: playbackRoute
+      };
+    }
 
     /**
      * Last hop: GainNode → MediaStreamDestination → hidden <audio>.
@@ -27467,9 +27531,8 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
     }
 
     /**
-     * Opt-in loopback route. Default OFF: this is an unproven replacement for the
-     * hop running on live customer sites, so it ships dark and is turned on per
-     * machine (?ttp_loopback=1 / localStorage) or per integration (config).
+     * Loopback route. Default ON on Apple (iPhone/iPad/iPod + macOS); OFF elsewhere.
+     * Override: ?ttp_loopback=0|1, localStorage, or config loopbackAec.
      */
   }, {
     key: "wantsLoopbackAec",
@@ -27481,13 +27544,32 @@ var AudioPlayer = /*#__PURE__*/function (_EventEmitter) {
       // requires a reload anyway — that is how it is documented and tested.
       if (this._loopbackWanted === undefined) {
         var override = (0,_loopbackAec_js__WEBPACK_IMPORTED_MODULE_5__.readTtpLoopbackOverride)(typeof window !== 'undefined' ? window : null);
-        this._loopbackWanted = override !== null ? override : typeof this.config.loopbackAec === 'boolean' ? this.config.loopbackAec : false;
+        var wanted;
+        if (override !== null) {
+          wanted = override;
+        } else if (typeof this.config.loopbackAec === 'boolean') {
+          wanted = this.config.loopbackAec;
+        } else {
+          wanted = this._needsLoopbackAecDefault();
+        }
+        this._loopbackWanted = wanted;
         if (this._loopbackWanted) {
-          console.log('🔊 AudioPlayer: loopback AEC requested — TTS will play via a local peer connection');
+          console.log('🔊 AudioPlayer: loopback AEC active — TTS via local peer connection');
         }
       }
       return this._loopbackWanted;
     }
+  }, {
+    key: "_needsLoopbackAecDefault",
+    value: function _needsLoopbackAecDefault() {
+      try {
+        var ua = navigator.userAgent || '';
+        var platform = navigator.userAgentData && navigator.userAgentData.platform || navigator.platform || '';
+        return (0,_hopPlatform_js__WEBPACK_IMPORTED_MODULE_4__.needsLoopbackAecDefault)(ua, platform);
+      } catch (e) {
+        return false;
+      }
+    }
 
     /**
      * Returns the MediaStreamDestination to play into once the loopback is up,
@@ -28868,6 +28950,9 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
     _this.pendingInjections = new Map(); // Maps correlationId to { resolve, reject, timeout }
     _this.injectionCounter = 0; // Counter for generating unique correlation IDs
 
+    // One settled playback-route report per call (first segment audible).
+    _this._playbackRouteSettledSent = false;
+
     // Barge-in detection is handled by the backend, not the frontend
     // The backend analyzes the audio stream and sends 'barge_in' message when user interrupts
     // Frontend only responds to backend barge-in messages
@@ -29280,6 +29365,18 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
         }
         _this3.emit('playbackStarted');
 
+        // Unconditional settled playback-route report on first audible segment —
+        // even when the route matches hello-time telemetry and no htmlAudioRoute
+        // event fired afterward (e.g. loopback succeeded quietly).
+        if (!_this3._playbackRouteSettledSent) {
+          var _info$segmentId;
+          _this3._playbackRouteSettledSent = true;
+          _this3._sendClientAudioInfo(null, {
+            settled: true,
+            segmentId: (_info$segmentId = info === null || info === void 0 ? void 0 : info.segmentId) !== null && _info$segmentId !== void 0 ? _info$segmentId : null
+          });
+        }
+
         // Transcripts are displayed when they arrive (between sentences)
         // No need to handle transcript display here - it's handled in handleTranscript()
 
@@ -29569,6 +29666,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
                   _this5.isConnected = false;
                   _this5.helloAckReceived = false;
                   _this5.disclaimersPending = false;
+                  _this5._playbackRouteSettledSent = false;
 
                   // Discard any audio still held by the first-playback gate
                   _this5._dropPlaybackGate();
@@ -29686,54 +29784,70 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
     key: "_buildClientEnv",
     value: function _buildClientEnv() {
       try {
-        var _uaData$mobile, _window$screen, _window$screen2;
+        var _uaData$mobile, _window$screen, _window$screen2, _this$audioPlayer, _this$audioPlayer$get;
         var ua = navigator.userAgent || '';
         var uaData = navigator.userAgentData;
         var conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
         var isAndroid = /Android/i.test(ua);
         var isIos = /iPhone|iPad|iPod/i.test(ua) || ua.includes('Mac') && 'ontouchend' in document;
+        var platformName = (uaData === null || uaData === void 0 ? void 0 : uaData.platform) || navigator.platform || '';
+        var osFamily = (0,_hopPlatform_js__WEBPACK_IMPORTED_MODULE_7__.detectOsFamily)(ua, platformName, isIos ? 'ios' : isAndroid ? 'android' : 'other');
         // Webview heuristic: Android WebView marks itself with "; wv)" or "Version/x.x Chrome";
         // iOS in-app webviews lack "Safari" in the UA (real Safari always has it).
         var webview = isAndroid && (/\bwv\b/.test(ua) || /Version\/[\d.]+.*Chrome/.test(ua)) || isIos && !/Safari/i.test(ua) || false;
-        var env = {
-          sdkVersion:  true ? "2.48.20" : 0,
+        var env = _objectSpread({
+          sdkVersion:  true ? "2.48.23" : 0,
           ua: ua,
-          platform: (uaData === null || uaData === void 0 ? void 0 : uaData.platform) || navigator.platform || '',
+          platform: platformName,
           mobile: (_uaData$mobile = uaData === null || uaData === void 0 ? void 0 : uaData.mobile) !== null && _uaData$mobile !== void 0 ? _uaData$mobile : isAndroid || isIos,
           os: isIos ? 'ios' : isAndroid ? 'android' : 'other',
+          osFamily: osFamily,
           webview: webview,
           screen: "".concat(((_window$screen = window.screen) === null || _window$screen === void 0 ? void 0 : _window$screen.width) || 0, "x").concat(((_window$screen2 = window.screen) === null || _window$screen2 === void 0 ? void 0 : _window$screen2.height) || 0, "@").concat(window.devicePixelRatio || 1),
           cores: navigator.hardwareConcurrency || null,
           memoryGb: navigator.deviceMemory || null,
           connection: (conn === null || conn === void 0 ? void 0 : conn.effectiveType) || null
-        };
+        }, ((_this$audioPlayer = this.audioPlayer) === null || _this$audioPlayer === void 0 || (_this$audioPlayer$get = _this$audioPlayer.getPlaybackRouteReport) === null || _this$audioPlayer$get === void 0 ? void 0 : _this$audioPlayer$get.call(_this$audioPlayer)) || {
+          osFamily: osFamily,
+          htmlAudioPlayback: null,
+          hopSource: null,
+          playbackRoute: 'destination',
+          loopbackAec: null,
+          loopbackSource: null,
+          loopbackAttach: {
+            outcome: 'not_attempted'
+          }
+        });
         return env;
       } catch (e) {
         console.warn('⚠️ VoiceSDK v2: Failed to build client env:', e);
         return {
-          sdkVersion:  true ? "2.48.20" : 0
+          sdkVersion:  true ? "2.48.23" : 0
         };
       }
     }
 
     /**
-     * One-shot telemetry sent right after recording starts (t:'client_audio_info').
-     * Reports the capture track's ACTUAL settings from getSettings() — echoCancellation /
-     * noiseSuppression / autoGainControl as the browser really applied them (not what we
-     * requested), which is the ground truth for diagnosing speakerphone echo barge-in —
-     * plus mic label, AudioContext rates, and whether the minimal-constraints fallback fired.
+     * Telemetry sent as t:'client_audio_info'. Interim snapshots (capture start,
+     * htmlAudioRoute transitions) use routeReportKind:'interim'. The first audible
+     * segment emits routeReportKind:'settled' exactly once per connection.
      */
   }, {
     key: "_sendClientAudioInfo",
     value: function _sendClientAudioInfo(routeUpdate) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       try {
-        var _this$audioRecorder, _this$audioRecorder$g, _s$echoCancellation, _s$noiseSuppression, _s$autoGainControl, _s$voiceIsolation, _s$sampleRate, _s$channelCount, _this$audioRecorder2, _this$audioPlayer, _this$audioRecorder3, _this$audioPlayer2, _this$audioPlayer2$ge;
+        var _this$audioRecorder, _this$audioRecorder$g, _s$echoCancellation, _s$noiseSuppression, _s$autoGainControl, _s$voiceIsolation, _s$sampleRate, _s$channelCount, _this$audioRecorder2, _this$audioPlayer2, _this$audioRecorder3, _this$audioPlayer3, _this$audioPlayer3$ge;
+        var settled = options.settled === true;
         var track = (_this$audioRecorder = this.audioRecorder) === null || _this$audioRecorder === void 0 || (_this$audioRecorder = _this$audioRecorder.mediaStream) === null || _this$audioRecorder === void 0 || (_this$audioRecorder$g = _this$audioRecorder.getAudioTracks) === null || _this$audioRecorder$g === void 0 ? void 0 : _this$audioRecorder$g.call(_this$audioRecorder)[0];
         // Route updates must go out even before the mic track exists — the hop
-        // state is the whole point of the follow-up.
-        if (!track && !routeUpdate) return;
+        // state is the whole point of the follow-up. Settled reports go out even
+        // if capture never started (monitor / playback-only paths).
+        if (!track && !routeUpdate && !settled) return;
         var s = track && track.getSettings ? track.getSettings() : {};
         var audio = _objectSpread({
+          sdkVersion:  true ? "2.48.23" : 0,
+          routeReportKind: settled ? 'settled' : 'interim',
           aec: (_s$echoCancellation = s.echoCancellation) !== null && _s$echoCancellation !== void 0 ? _s$echoCancellation : null,
           ns: (_s$noiseSuppression = s.noiseSuppression) !== null && _s$noiseSuppression !== void 0 ? _s$noiseSuppression : null,
           agc: (_s$autoGainControl = s.autoGainControl) !== null && _s$autoGainControl !== void 0 ? _s$autoGainControl : null,
@@ -29742,18 +29856,21 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
           channels: (_s$channelCount = s.channelCount) !== null && _s$channelCount !== void 0 ? _s$channelCount : null,
           mic: track ? track.label || null : null,
           captureCtxRate: ((_this$audioRecorder2 = this.audioRecorder) === null || _this$audioRecorder2 === void 0 || (_this$audioRecorder2 = _this$audioRecorder2.audioContext) === null || _this$audioRecorder2 === void 0 ? void 0 : _this$audioRecorder2.sampleRate) || null,
-          playbackCtxRate: ((_this$audioPlayer = this.audioPlayer) === null || _this$audioPlayer === void 0 || (_this$audioPlayer = _this$audioPlayer.audioContext) === null || _this$audioPlayer === void 0 ? void 0 : _this$audioPlayer.sampleRate) || null,
+          playbackCtxRate: ((_this$audioPlayer2 = this.audioPlayer) === null || _this$audioPlayer2 === void 0 || (_this$audioPlayer2 = _this$audioPlayer2.audioContext) === null || _this$audioPlayer2 === void 0 ? void 0 : _this$audioPlayer2.sampleRate) || null,
           constraintsFallback: ((_this$audioRecorder3 = this.audioRecorder) === null || _this$audioRecorder3 === void 0 || (_this$audioRecorder3 = _this$audioRecorder3.mediaStream) === null || _this$audioRecorder3 === void 0 ? void 0 : _this$audioRecorder3._ttpConstraintsFallback) === true
-        }, ((_this$audioPlayer2 = this.audioPlayer) === null || _this$audioPlayer2 === void 0 || (_this$audioPlayer2$ge = _this$audioPlayer2.getHtmlAudioPlaybackInfo) === null || _this$audioPlayer2$ge === void 0 ? void 0 : _this$audioPlayer2$ge.call(_this$audioPlayer2)) || {});
+        }, ((_this$audioPlayer3 = this.audioPlayer) === null || _this$audioPlayer3 === void 0 || (_this$audioPlayer3$ge = _this$audioPlayer3.getPlaybackRouteReport) === null || _this$audioPlayer3$ge === void 0 ? void 0 : _this$audioPlayer3$ge.call(_this$audioPlayer3)) || {});
+        if (settled && options.segmentId != null) {
+          audio.settledAtSegmentId = options.segmentId;
+        }
         if (routeUpdate && routeUpdate.state) {
-          audio.routeUpdate = routeUpdate.state; // 'established' | 'fallback' | 'play_pending'
+          audio.routeUpdate = routeUpdate.state; // 'established' | 'fallback' | 'play_pending' | ...
           if (routeUpdate.reason) audio.routeFallbackReason = routeUpdate.reason;
         }
         this.sendMessage({
           t: 'client_audio_info',
           audio: audio
         });
-        console.log('🎛️ VoiceSDK v2: Sent client_audio_info:', audio);
+        console.log("\uD83C\uDF9B\uFE0F VoiceSDK v2: Sent client_audio_info (".concat(audio.routeReportKind, "):"), audio);
       } catch (e) {
         console.warn('⚠️ VoiceSDK v2: Failed to send client_audio_info:', e);
       }
@@ -29859,7 +29976,7 @@ var VoiceSDK_v2 = /*#__PURE__*/function (_EventEmitter) {
 
               // Include SDK build time for debugging
               if (true) {
-                helloMessage.lastBuildTime = "2026-08-27T16:45:39.666Z";
+                helloMessage.lastBuildTime = "2026-08-30T08:48:33.316Z";
               }
 
               // Client environment (device/browser/webview) for backend logs + Langfuse metadata
@@ -32494,19 +32611,24 @@ var PCMUCodec = /*#__PURE__*/function () {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   TTP_HOP_SESSION_KEY: () => (/* binding */ TTP_HOP_SESSION_KEY),
+/* harmony export */   detectOsFamily: () => (/* binding */ detectOsFamily),
+/* harmony export */   isAppleMobileUa: () => (/* binding */ isAppleMobileUa),
 /* harmony export */   isMacDesktopUa: () => (/* binding */ isMacDesktopUa),
 /* harmony export */   isMobileUa: () => (/* binding */ isMobileUa),
 /* harmony export */   needsHtmlAudioHopForAec: () => (/* binding */ needsHtmlAudioHopForAec),
-/* harmony export */   readTtpHopOverride: () => (/* binding */ readTtpHopOverride)
+/* harmony export */   needsLoopbackAecDefault: () => (/* binding */ needsLoopbackAecDefault),
+/* harmony export */   readTtpHopOverride: () => (/* binding */ readTtpHopOverride),
+/* harmony export */   resolveTtpHopEffective: () => (/* binding */ resolveTtpHopEffective)
 /* harmony export */ });
 /**
- * HTML-audio-hop platform policy + the ttp_hop QA override.
+ * HTML-audio-hop platform policy + loopback default + the ttp_hop QA override.
+ *
+ * The "hop" (AudioContext → MediaStreamDestination → hidden <audio>) caused
+ * speed wobble on many platforms. It is **retired as a default** — hop is off
+ * everywhere unless explicitly forced (?ttp_hop=1 / config).
  *
- * The "hop" is AudioContext → MediaStreamDestination → hidden <audio>, used so
- * the browser's echo canceller sees agent TTS as a far-end reference. Chrome
- * renders that live stream with adaptive jitter-buffer speed control, which
- * audibly wobbles on Windows/Linux desktop — so the hop defaults ON only where
- * Web Audio → destination genuinely lacks an AEC reference (mobile + macOS).
+ * Echo cancellation on Apple (iPhone/iPad/iPod + macOS) uses **local WebRTC
+ * loopback** instead (~20–40 ms Opus, no wobble). See needsLoopbackAecDefault.
  *
  * Kept DOM-free (all inputs passed in) so the policy is unit-testable without
  * a browser: see test/hop-platform.test.mjs.
@@ -32517,19 +32639,32 @@ var TTP_HOP_SESSION_KEY = 'ttp_hop_pref';
 function isMobileUa(ua) {
   return /Android|iPhone|iPad|iPod/i.test(ua || '');
 }
+
+/** iPhone / iPad / iPod only — not Android. */
+function isAppleMobileUa(ua) {
+  return /iPhone|iPad|iPod/i.test(ua || '');
+}
 function isMacDesktopUa(ua, platform) {
   if (/iPhone|iPad|iPod/i.test(ua || '')) return false;
   return /mac/i.test(platform || '') || /Mac OS X/i.test(ua || '');
 }
 
 /**
- * Hop default: on only where Web Audio destination lacks an AEC far-end
- * reference (mobile + macOS). Windows/Linux/ChromeOS desktop: off — Chrome-wide
- * AEC already covers speaker echo there, and the hop only adds speed wobble.
- * Unknown/empty environment: off (fail toward the stable direct path).
+ * Hop default: **off everywhere.** The hop caused speed wobble; Apple platforms
+ * use loopback AEC instead (needsLoopbackAecDefault). Explicit ?ttp_hop=1 or
+ * htmlAudioPlayback: true still forces the hop for QA / legacy fallback.
  */
-function needsHtmlAudioHopForAec(ua, platform) {
-  return isMobileUa(ua) || isMacDesktopUa(ua, platform);
+function needsHtmlAudioHopForAec(_ua, _platform) {
+  return false;
+}
+
+/**
+ * Loopback default: **on** for Apple mobile + macOS — local WebRTC far-end so
+ * Chrome/Safari AEC can cancel speaker echo without the wobbly HTML hop.
+ * Off on Windows/Linux/ChromeOS/Android (direct Web Audio; lower latency).
+ */
+function needsLoopbackAecDefault(ua, platform) {
+  return isAppleMobileUa(ua) || isMacDesktopUa(ua, platform);
 }
 
 /**
@@ -32549,7 +32684,22 @@ function needsHtmlAudioHopForAec(ua, platform) {
  * area but not another, and a blocked sessionStorage must not cost us the
  * localStorage fallback.
  */
-function readTtpHopOverride(win) {
+/**
+ * Coarse OS bucket for logs + Langfuse (matches hop_bargein_baseline.py).
+ */
+function detectOsFamily(ua, platform, osHint) {
+  var text = "".concat(ua || '', " ").concat(platform || '', " ").concat(osHint || '');
+  if (/iPhone|iPad|iPod|\bios\b/i.test(text)) return 'ios';
+  if (/Android/i.test(text)) return 'android';
+  if (/Windows NT|\bwindows\b/i.test(text)) return 'windows';
+  if (/Mac OS X|Macintosh|\bmac/i.test(text)) return 'mac';
+  if (/CrOS/i.test(text)) return 'chromeos';
+  if (/X11|Linux/i.test(text)) return 'linux';
+  return 'other';
+}
+
+/** @returns {{ value: boolean, source: 'url'|'sessionStorage'|'localStorage' } | null} */
+function readTtpHopOverrideDetail(win) {
   var w = win || (typeof window !== 'undefined' ? window : null);
   if (!w) return null;
   var flag = null;
@@ -32560,20 +32710,56 @@ function readTtpHopOverride(win) {
     try {
       w.sessionStorage.setItem(TTP_HOP_SESSION_KEY, flag);
     } catch (e) {/* storage blocked */}
-    return flag === '1';
+    return {
+      value: flag === '1',
+      source: 'url'
+    };
   }
   var mirrored = null;
   try {
     mirrored = w.sessionStorage.getItem(TTP_HOP_SESSION_KEY);
   } catch (e) {/* storage blocked */}
-  if (mirrored === '0' || mirrored === '1') return mirrored === '1';
+  if (mirrored === '0' || mirrored === '1') {
+    return {
+      value: mirrored === '1',
+      source: 'sessionStorage'
+    };
+  }
   var stored = null;
   try {
     stored = w.localStorage.getItem('ttp_hop');
   } catch (e) {/* storage blocked */}
-  if (stored === '0' || stored === '1') return stored === '1';
+  if (stored === '0' || stored === '1') {
+    return {
+      value: stored === '1',
+      source: 'localStorage'
+    };
+  }
   return null;
 }
+function readTtpHopOverride(win) {
+  var detail = readTtpHopOverrideDetail(win);
+  return detail ? detail.value : null;
+}
+
+/** Effective hop preference + where it came from (for telemetry). */
+function resolveTtpHopEffective(win, configOverride, ua, platform) {
+  var _ref, _ref2;
+  var detail = readTtpHopOverrideDetail(win);
+  if (detail) return detail;
+  if (typeof configOverride === 'boolean') {
+    return {
+      value: configOverride,
+      source: 'config'
+    };
+  }
+  var u = (_ref = ua !== null && ua !== void 0 ? ua : typeof navigator !== 'undefined' ? navigator.userAgent : '') !== null && _ref !== void 0 ? _ref : '';
+  var p = (_ref2 = platform !== null && platform !== void 0 ? platform : typeof navigator !== 'undefined' ? navigator.userAgentData && navigator.userAgentData.platform || navigator.platform || '' : '') !== null && _ref2 !== void 0 ? _ref2 : '';
+  return {
+    value: needsHtmlAudioHopForAec(u, p),
+    source: 'default'
+  };
+}
 
 /***/ }),
 
@@ -32590,8 +32776,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   createAecLoopback: () => (/* binding */ createAecLoopback),
 /* harmony export */   isLoopbackAecSupported: () => (/* binding */ isLoopbackAecSupported),
 /* harmony export */   preferHighQualityOpus: () => (/* binding */ preferHighQualityOpus),
-/* harmony export */   readTtpLoopbackOverride: () => (/* binding */ readTtpLoopbackOverride)
+/* harmony export */   readTtpLoopbackOverride: () => (/* binding */ readTtpLoopbackOverride),
+/* harmony export */   resolveTtpLoopbackEffective: () => (/* binding */ resolveTtpLoopbackEffective)
 /* harmony export */ });
+/* harmony import */ var _hopPlatform_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./hopPlatform.js */ "./src/v2/hopPlatform.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); }
@@ -32635,7 +32823,10 @@ var TTP_LOOPBACK_SESSION_KEY = 'ttp_loopback_pref';
  * 84b5af7d). Without the mirror the route would silently revert on the very
  * navigation the tester is exercising.
  */
-function readTtpLoopbackOverride(win) {
+
+
+/** @returns {{ value: boolean, source: 'url'|'sessionStorage'|'localStorage' } | null} */
+function readTtpLoopbackOverrideDetail(win) {
   var w = win || (typeof window !== 'undefined' ? window : null);
   if (!w) return null;
   var flag = null;
@@ -32646,20 +32837,56 @@ function readTtpLoopbackOverride(win) {
     try {
       w.sessionStorage.setItem(TTP_LOOPBACK_SESSION_KEY, flag);
     } catch (e) {/* storage blocked */}
-    return flag === '1';
+    return {
+      value: flag === '1',
+      source: 'url'
+    };
   }
   var mirrored = null;
   try {
     mirrored = w.sessionStorage.getItem(TTP_LOOPBACK_SESSION_KEY);
   } catch (e) {/* storage blocked */}
-  if (mirrored === '0' || mirrored === '1') return mirrored === '1';
+  if (mirrored === '0' || mirrored === '1') {
+    return {
+      value: mirrored === '1',
+      source: 'sessionStorage'
+    };
+  }
   var stored = null;
   try {
     stored = w.localStorage.getItem('ttp_loopback');
   } catch (e) {/* storage blocked */}
-  if (stored === '0' || stored === '1') return stored === '1';
+  if (stored === '0' || stored === '1') {
+    return {
+      value: stored === '1',
+      source: 'localStorage'
+    };
+  }
   return null;
 }
+function readTtpLoopbackOverride(win) {
+  var detail = readTtpLoopbackOverrideDetail(win);
+  return detail ? detail.value : null;
+}
+
+/** Effective loopback preference + where it came from (for telemetry). */
+function resolveTtpLoopbackEffective(win, configOverride, ua, platform) {
+  var _ref, _ref2;
+  var detail = readTtpLoopbackOverrideDetail(win);
+  if (detail) return detail;
+  if (typeof configOverride === 'boolean') {
+    return {
+      value: configOverride,
+      source: 'config'
+    };
+  }
+  var u = (_ref = ua !== null && ua !== void 0 ? ua : typeof navigator !== 'undefined' ? navigator.userAgent : '') !== null && _ref !== void 0 ? _ref : '';
+  var p = (_ref2 = platform !== null && platform !== void 0 ? platform : typeof navigator !== 'undefined' ? navigator.userAgentData && navigator.userAgentData.platform || navigator.platform || '' : '') !== null && _ref2 !== void 0 ? _ref2 : '';
+  return {
+    value: (0,_hopPlatform_js__WEBPACK_IMPORTED_MODULE_0__.needsLoopbackAecDefault)(u, p),
+    source: 'default'
+  };
+}
 function isLoopbackAecSupported(win) {
   var w = win || (typeof window !== 'undefined' ? window : null);
   if (!w) return false;
@@ -32714,13 +32941,13 @@ function preferHighQualityOpus(sdp) {
  * Dependencies are injected (win) so this runs under node --test.
  */
 function createAecLoopback() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    stream = _ref.stream,
-    win = _ref.win,
-    _ref$timeoutMs = _ref.timeoutMs,
-    timeoutMs = _ref$timeoutMs === void 0 ? 4000 : _ref$timeoutMs,
-    _ref$bitrate = _ref.bitrate,
-    bitrate = _ref$bitrate === void 0 ? 128000 : _ref$bitrate;
+  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    stream = _ref3.stream,
+    win = _ref3.win,
+    _ref3$timeoutMs = _ref3.timeoutMs,
+    timeoutMs = _ref3$timeoutMs === void 0 ? 4000 : _ref3$timeoutMs,
+    _ref3$bitrate = _ref3.bitrate,
+    bitrate = _ref3$bitrate === void 0 ? 128000 : _ref3$bitrate;
   var w = win || (typeof window !== 'undefined' ? window : null);
   if (!w) return Promise.reject(new Error('loopback: no window'));
   if (!isLoopbackAecSupported(w)) return Promise.reject(new Error('loopback: RTCPeerConnection unavailable'));
@@ -34951,9 +35178,11 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
-/* harmony import */ var _ecommerce_EcommerceVoiceStrip_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../ecommerce/EcommerceVoiceStrip.js */ "./src/ecommerce/EcommerceVoiceStrip.js");
-/* harmony import */ var _ecommerce_RecipeStore_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../ecommerce/RecipeStore.js */ "./src/ecommerce/RecipeStore.js");
+/* harmony import */ var _v2_hopPlatform_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../v2/hopPlatform.js */ "./src/v2/hopPlatform.js");
+/* harmony import */ var _v2_loopbackAec_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../v2/loopbackAec.js */ "./src/v2/loopbackAec.js");
+/* harmony import */ var _flavors_index_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../flavors/index.js */ "./src/flavors/index.js");
+/* harmony import */ var _ecommerce_EcommerceVoiceStrip_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../ecommerce/EcommerceVoiceStrip.js */ "./src/ecommerce/EcommerceVoiceStrip.js");
+/* harmony import */ var _ecommerce_RecipeStore_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../ecommerce/RecipeStore.js */ "./src/ecommerce/RecipeStore.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; }
@@ -34983,6 +35212,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 
 
 
+
+
 /** Fallback for `buildWebSocketUrl()` when no optional `websocketUrl` override is set (VoiceSDK v2 uses the same default). */
 var DEFAULT_VOICE_WEBSOCKET_URL = 'wss://speech.talktopc.com/ws/conv';
 function isNonEmptyConfigString(v) {
@@ -35379,7 +35610,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
     value: function _initFlavor(flavorName) {
       var _this$_flavorObj,
         _this3 = this;
-      var factory = (0,_flavors_index_js__WEBPACK_IMPORTED_MODULE_4__.loadFlavor)(flavorName);
+      var factory = (0,_flavors_index_js__WEBPACK_IMPORTED_MODULE_6__.loadFlavor)(flavorName);
       if (!factory) {
         console.error("[TTPChatWidget] Unknown flavor: \"".concat(flavorName, "\". Available flavors: ecommerce, hotels, restaurants, tours, learner. Widget will run in vanilla mode."));
         return;
@@ -36366,7 +36597,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       if (!this._recipeStore) {
         var _this$_flavorObj2, _this$config$flavor2;
         var partnerId = ((_this$_flavorObj2 = this._flavorObj) === null || _this$_flavorObj2 === void 0 ? void 0 : _this$_flavorObj2.partnerId) || (_typeof(this.config.flavor) === 'object' ? (_this$config$flavor2 = this.config.flavor) === null || _this$config$flavor2 === void 0 ? void 0 : _this$config$flavor2.partnerId : null) || 'default';
-        this._recipeStore = (0,_ecommerce_RecipeStore_js__WEBPACK_IMPORTED_MODULE_6__.createRecipeStore)((0,_ecommerce_RecipeStore_js__WEBPACK_IMPORTED_MODULE_6__.recipeStorageKey)(partnerId));
+        this._recipeStore = (0,_ecommerce_RecipeStore_js__WEBPACK_IMPORTED_MODULE_8__.createRecipeStore)((0,_ecommerce_RecipeStore_js__WEBPACK_IMPORTED_MODULE_8__.recipeStorageKey)(partnerId));
       }
       return this._recipeStore;
     }
@@ -36458,7 +36689,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
         return;
       }
       this._ensureAboutStyles();
-      var version =  true ? "2.48.20" : 0;
+      var version =  true ? "2.48.23" : 0;
       var convId = this._getLastConversationId();
       var t = function t(k, fb) {
         try {
@@ -36565,6 +36796,47 @@ var TTPChatWidget = /*#__PURE__*/function () {
       } catch (_) {/* storage unavailable — settings still apply for this session */}
     }
 
+    /** Effective HTML-hop / loopback prefs (localStorage override or platform default). */
+  }, {
+    key: "_getPlaybackRoutePrefs",
+    value: function _getPlaybackRoutePrefs() {
+      var win = typeof window !== 'undefined' ? window : null;
+      var htmlHop = (0,_v2_hopPlatform_js__WEBPACK_IMPORTED_MODULE_4__.readTtpHopOverride)(win);
+      var loopback = (0,_v2_loopbackAec_js__WEBPACK_IMPORTED_MODULE_5__.readTtpLoopbackOverride)(win);
+      if (htmlHop === null) {
+        try {
+          var ua = navigator.userAgent || '';
+          var platform = navigator.userAgentData && navigator.userAgentData.platform || navigator.platform || '';
+          htmlHop = (0,_v2_hopPlatform_js__WEBPACK_IMPORTED_MODULE_4__.needsHtmlAudioHopForAec)(ua, platform);
+        } catch (_) {
+          htmlHop = false;
+        }
+      }
+      if (loopback === null) {
+        try {
+          var _ua = navigator.userAgent || '';
+          var _platform = navigator.userAgentData && navigator.userAgentData.platform || navigator.platform || '';
+          loopback = (0,_v2_hopPlatform_js__WEBPACK_IMPORTED_MODULE_4__.needsLoopbackAecDefault)(_ua, _platform);
+        } catch (_) {
+          loopback = false;
+        }
+      }
+      return {
+        htmlHop: !!htmlHop,
+        loopback: !!loopback
+      };
+    }
+  }, {
+    key: "_setPlaybackRoutePrefs",
+    value: function _setPlaybackRoutePrefs(_ref4) {
+      var htmlHop = _ref4.htmlHop,
+        loopback = _ref4.loopback;
+      try {
+        localStorage.setItem('ttp_hop', htmlHop ? '1' : '0');
+        localStorage.setItem('ttp_loopback', loopback ? '1' : '0');
+      } catch (_) {/* storage blocked */}
+    }
+
     /**
      * Persist + push a settings change to whichever channel is live. The backend
      * applies voice speed from the next spoken line and response length from the
@@ -36603,7 +36875,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       this._ensureAboutStyles(); // reuse the overlay/card/close/row styles
       var style = document.createElement('style');
       style.id = 'ttp-callsettings-dialog-styles';
-      style.textContent = "\n      .ttp-cs-row { text-align: start; }\n      .ttp-cs-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }\n      .ttp-cs-val {\n        font-size: 13px; font-weight: 700; color: #6d28d9;\n        font-variant-numeric: tabular-nums;\n      }\n      .ttp-cs-slider {\n        -webkit-appearance: none; appearance: none; width: 100%; height: 6px;\n        border-radius: 3px; background: #e5e7eb; outline: none; cursor: pointer;\n        accent-color: #6d28d9; margin: 4px 0 2px;\n      }\n      .ttp-cs-slider::-webkit-slider-thumb {\n        -webkit-appearance: none; appearance: none; width: 18px; height: 18px;\n        border-radius: 50%; background: #6d28d9; border: 2px solid #ffffff;\n        box-shadow: 0 1px 4px rgba(0,0,0,0.3); cursor: pointer;\n      }\n      .ttp-cs-slider::-moz-range-thumb {\n        width: 18px; height: 18px; border-radius: 50%; background: #6d28d9;\n        border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); cursor: pointer;\n      }\n      .ttp-cs-ends {\n        display: flex; justify-content: space-between;\n        font-size: 10.5px; color: #9ca3af; letter-spacing: 0.2px;\n      }\n    ";
+      style.textContent = "\n      .ttp-cs-row { text-align: start; }\n      .ttp-cs-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }\n      .ttp-cs-val {\n        font-size: 13px; font-weight: 700; color: #6d28d9;\n        font-variant-numeric: tabular-nums;\n      }\n      .ttp-cs-slider {\n        -webkit-appearance: none; appearance: none; width: 100%; height: 6px;\n        border-radius: 3px; background: #e5e7eb; outline: none; cursor: pointer;\n        accent-color: #6d28d9; margin: 4px 0 2px;\n      }\n      .ttp-cs-slider::-webkit-slider-thumb {\n        -webkit-appearance: none; appearance: none; width: 18px; height: 18px;\n        border-radius: 50%; background: #6d28d9; border: 2px solid #ffffff;\n        box-shadow: 0 1px 4px rgba(0,0,0,0.3); cursor: pointer;\n      }\n      .ttp-cs-slider::-moz-range-thumb {\n        width: 18px; height: 18px; border-radius: 50%; background: #6d28d9;\n        border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); cursor: pointer;\n      }\n      .ttp-cs-ends {\n        display: flex; justify-content: space-between;\n        font-size: 10.5px; color: #9ca3af; letter-spacing: 0.2px;\n      }\n      .ttp-cs-toggle-row {\n        display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;\n        padding: 4px 0;\n      }\n      .ttp-cs-toggle-copy { flex: 1; min-width: 0; }\n      .ttp-cs-toggle-hint { font-size: 11px; color: #9ca3af; margin-top: 3px; line-height: 1.35; }\n      .ttp-cs-switch {\n        position: relative; width: 44px; height: 26px; flex-shrink: 0; margin-top: 2px;\n      }\n      .ttp-cs-switch input { opacity: 0; width: 0; height: 0; position: absolute; }\n      .ttp-cs-switch-slider {\n        position: absolute; inset: 0; background: #e5e7eb; border-radius: 999px;\n        transition: background 0.15s ease; cursor: pointer;\n      }\n      .ttp-cs-switch-slider::before {\n        content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;\n        background: #fff; border-radius: 50%; transition: transform 0.15s ease;\n        box-shadow: 0 1px 3px rgba(0,0,0,0.2);\n      }\n      .ttp-cs-switch input:checked + .ttp-cs-switch-slider { background: #6d28d9; }\n      .ttp-cs-switch input:checked + .ttp-cs-switch-slider::before { transform: translateX(18px); }\n      .ttp-cs-playback-note {\n        font-size: 11px; color: #6b7280; line-height: 1.4; margin-top: 8px;\n        padding-top: 10px; border-top: 1px solid #f3f4f6;\n      }\n    ";
       document.head.appendChild(style);
     }
 
@@ -36636,6 +36908,11 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var sensLabel = t('settingsMicSensitivity', 'Mic sensitivity');
       var sensLow = t('sensitivityLow', 'Low');
       var sensHigh = t('sensitivityHigh', 'High');
+      var hopLabel = t('settingsHtmlHop', 'HTML audio hop');
+      var hopHint = t('settingsHtmlHopHint', 'May reduce echo; can cause voice speed wobble on some PCs.');
+      var loopLabel = t('settingsLoopback', 'WebRTC loopback');
+      var loopHint = t('settingsLoopbackHint', 'Fixes speaker echo on Chrome (~20 ms extra latency).');
+      var playbackNote = t('settingsPlaybackNote', 'Audio route changes apply on the next call — end this call and start again, or reload the page.');
       // Slider order: very brief (left) → detailed (right); higher = more detail.
       var LEVELS = ['very_brief', 'brief', 'normal', 'detailed'];
       var levelLabels = {
@@ -36646,15 +36923,18 @@ var TTPChatWidget = /*#__PURE__*/function () {
       };
       var saved = this._loadCallSettings();
       var levelIdx = Math.max(0, LEVELS.indexOf(saved.responseLength));
+      var playback = this._getPlaybackRoutePrefs();
       var overlay = document.createElement('div');
       overlay.className = 'ttp-about-overlay';
-      overlay.innerHTML = "\n      <div class=\"ttp-about-card\" role=\"dialog\" aria-modal=\"true\" aria-label=\"".concat(title, "\">\n        <button type=\"button\" class=\"ttp-about-close\" aria-label=\"Close\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n            <path d=\"M10 2L2 10M2 2l8 8\"/>\n          </svg>\n        </button>\n        <div class=\"ttp-about-title\">").concat(title, "</div>\n        <div class=\"ttp-about-rows\">\n          <div class=\"ttp-about-row ttp-cs-row\">\n            <div class=\"ttp-cs-head\">\n              <span class=\"ttp-about-key\">").concat(speedLabel, "</span>\n              <span class=\"ttp-cs-val\" data-cs-speed-val></span>\n            </div>\n            <input type=\"range\" class=\"ttp-cs-slider\" data-cs-speed\n                   min=\"0.5\" max=\"2\" step=\"0.05\" value=\"").concat(saved.voiceSpeedFactor, "\"\n                   aria-label=\"").concat(speedLabel, "\">\n            <div class=\"ttp-cs-ends\"><span>0.5\xD7</span><span>2\xD7</span></div>\n          </div>\n          <div class=\"ttp-about-row ttp-cs-row\">\n            <div class=\"ttp-cs-head\">\n              <span class=\"ttp-about-key\">").concat(lengthLabel, "</span>\n              <span class=\"ttp-cs-val\" data-cs-length-val></span>\n            </div>\n            <input type=\"range\" class=\"ttp-cs-slider\" data-cs-length\n                   min=\"0\" max=\"3\" step=\"1\" value=\"").concat(levelIdx, "\"\n                   aria-label=\"").concat(lengthLabel, "\">\n            <div class=\"ttp-cs-ends\"><span>").concat(levelLabels.very_brief, "</span><span>").concat(levelLabels.detailed, "</span></div>\n          </div>\n          <div class=\"ttp-about-row ttp-cs-row\">\n            <div class=\"ttp-cs-head\">\n              <span class=\"ttp-about-key\">").concat(sensLabel, "</span>\n              <span class=\"ttp-cs-val\" data-cs-sens-val></span>\n            </div>\n            <input type=\"range\" class=\"ttp-cs-slider\" data-cs-sens\n                   min=\"0.5\" max=\"2\" step=\"0.05\" value=\"").concat(saved.micSensitivity, "\"\n                   aria-label=\"").concat(sensLabel, "\">\n            <div class=\"ttp-cs-ends\"><span>").concat(sensLow, "</span><span>").concat(sensHigh, "</span></div>\n          </div>\n        </div>\n      </div>");
+      overlay.innerHTML = "\n      <div class=\"ttp-about-card\" role=\"dialog\" aria-modal=\"true\" aria-label=\"".concat(title, "\">\n        <button type=\"button\" class=\"ttp-about-close\" aria-label=\"Close\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n            <path d=\"M10 2L2 10M2 2l8 8\"/>\n          </svg>\n        </button>\n        <div class=\"ttp-about-title\">").concat(title, "</div>\n        <div class=\"ttp-about-rows\">\n          <div class=\"ttp-about-row ttp-cs-row\">\n            <div class=\"ttp-cs-head\">\n              <span class=\"ttp-about-key\">").concat(speedLabel, "</span>\n              <span class=\"ttp-cs-val\" data-cs-speed-val></span>\n            </div>\n            <input type=\"range\" class=\"ttp-cs-slider\" data-cs-speed\n                   min=\"0.5\" max=\"2\" step=\"0.05\" value=\"").concat(saved.voiceSpeedFactor, "\"\n                   aria-label=\"").concat(speedLabel, "\">\n            <div class=\"ttp-cs-ends\"><span>0.5\xD7</span><span>2\xD7</span></div>\n          </div>\n          <div class=\"ttp-about-row ttp-cs-row\">\n            <div class=\"ttp-cs-head\">\n              <span class=\"ttp-about-key\">").concat(lengthLabel, "</span>\n              <span class=\"ttp-cs-val\" data-cs-length-val></span>\n            </div>\n            <input type=\"range\" class=\"ttp-cs-slider\" data-cs-length\n                   min=\"0\" max=\"3\" step=\"1\" value=\"").concat(levelIdx, "\"\n                   aria-label=\"").concat(lengthLabel, "\">\n            <div class=\"ttp-cs-ends\"><span>").concat(levelLabels.very_brief, "</span><span>").concat(levelLabels.detailed, "</span></div>\n          </div>\n          <div class=\"ttp-about-row ttp-cs-row\">\n            <div class=\"ttp-cs-head\">\n              <span class=\"ttp-about-key\">").concat(sensLabel, "</span>\n              <span class=\"ttp-cs-val\" data-cs-sens-val></span>\n            </div>\n            <input type=\"range\" class=\"ttp-cs-slider\" data-cs-sens\n                   min=\"0.5\" max=\"2\" step=\"0.05\" value=\"").concat(saved.micSensitivity, "\"\n                   aria-label=\"").concat(sensLabel, "\">\n            <div class=\"ttp-cs-ends\"><span>").concat(sensLow, "</span><span>").concat(sensHigh, "</span></div>\n          </div>\n          <div class=\"ttp-about-row ttp-cs-row\">\n            <div class=\"ttp-cs-toggle-row\">\n              <div class=\"ttp-cs-toggle-copy\">\n                <span class=\"ttp-about-key\">").concat(hopLabel, "</span>\n                <div class=\"ttp-cs-toggle-hint\">").concat(hopHint, "</div>\n              </div>\n              <label class=\"ttp-cs-switch\">\n                <input type=\"checkbox\" data-cs-hop ").concat(playback.htmlHop ? 'checked' : '', " aria-label=\"").concat(hopLabel, "\">\n                <span class=\"ttp-cs-switch-slider\"></span>\n              </label>\n            </div>\n          </div>\n          <div class=\"ttp-about-row ttp-cs-row\">\n            <div class=\"ttp-cs-toggle-row\">\n              <div class=\"ttp-cs-toggle-copy\">\n                <span class=\"ttp-about-key\">").concat(loopLabel, "</span>\n                <div class=\"ttp-cs-toggle-hint\">").concat(loopHint, "</div>\n              </div>\n              <label class=\"ttp-cs-switch\">\n                <input type=\"checkbox\" data-cs-loopback ").concat(playback.loopback ? 'checked' : '', " aria-label=\"").concat(loopLabel, "\">\n                <span class=\"ttp-cs-switch-slider\"></span>\n              </label>\n            </div>\n          </div>\n          <div class=\"ttp-cs-playback-note\">").concat(playbackNote, "</div>\n        </div>\n      </div>");
       var speedSlider = overlay.querySelector('[data-cs-speed]');
       var speedVal = overlay.querySelector('[data-cs-speed-val]');
       var lengthSlider = overlay.querySelector('[data-cs-length]');
       var lengthVal = overlay.querySelector('[data-cs-length-val]');
       var sensSlider = overlay.querySelector('[data-cs-sens]');
       var sensVal = overlay.querySelector('[data-cs-sens-val]');
+      var hopToggle = overlay.querySelector('[data-cs-hop]');
+      var loopToggle = overlay.querySelector('[data-cs-loopback]');
       var fmtSpeed = function fmtSpeed(v) {
         return "".concat(Number(v).toFixed(2).replace(/0$/, ''), "\xD7");
       };
@@ -36685,6 +36965,18 @@ var TTPChatWidget = /*#__PURE__*/function () {
           micSensitivity: Number(sensSlider.value)
         }, false);
       });
+      hopToggle === null || hopToggle === void 0 || hopToggle.addEventListener('change', function () {
+        _this9._setPlaybackRoutePrefs({
+          htmlHop: !!hopToggle.checked,
+          loopback: !!(loopToggle !== null && loopToggle !== void 0 && loopToggle.checked)
+        });
+      });
+      loopToggle === null || loopToggle === void 0 || loopToggle.addEventListener('change', function () {
+        _this9._setPlaybackRoutePrefs({
+          htmlHop: !!(hopToggle !== null && hopToggle !== void 0 && hopToggle.checked),
+          loopback: !!loopToggle.checked
+        });
+      });
       var close = function close() {
         return _this9._closeCallSettingsModal();
       };
@@ -36847,7 +37139,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       var callActivePanelBg = callSurfaceGradient;
       var voiceIdleVisibleSelector = '#voiceInterface.active #voiceIdleState:not([style*="display: none"]):not([style*="display:none"])';
       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          right: 10px !important;\n          left: auto !important;\n          bottom: 92px !important; /* 56px button + 20px gap + 16px footer */\n          top: auto !important;\n          width: 340px !important;\n          max-width: calc(100vw - 20px) !important;\n          height: auto !important;\n          max-height: calc(100vh - 130px) !important;\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          right: 8px !important;\n          left: auto !important;\n          bottom: 86px !important; /* 54px button + 20px gap + 12px footer */\n          top: auto !important;\n          width: 340px !important;\n          max-width: calc(100vw - 16px) !important;\n          height: auto !important;\n          max-height: calc(100vh - 120px) !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      /* Shared panel chrome; size/position differ \u2014 desktop card vs mobile sheet (see @media blocks earlier) */\n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed").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        opacity: 0").concat(important, ";\n        pointer-events: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      /* Desktop / tablet: floating 340px card anchored to launcher */\n      @media (min-width: 769px) {\n        #text-chat-panel {\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          transform-origin: bottom right").concat(important, ";\n        }\n        /* Text chat: fixed height so the message list scrolls instead of growing the panel per message */\n        #text-chat-panel:has(.text-interface.active) {\n          height: min(520px, calc(100vh - 100px))").concat(important, ";\n        }\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      ").concat(textUsesVoiceTheme ? "\n      /* Text chat with voice theme: same hero surface as voice idle; inner shells transparent */\n      #text-chat-panel.open:has(.text-interface.active) {\n        background: ".concat(callSurfaceGradient).concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .widget-shell,\n      #text-chat-panel.open:has(.text-interface.active) .panel-inner,\n      #text-chat-panel.open:has(.text-interface.active) .widget-container {\n        background: transparent").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer {\n        background: transparent").concat(important, ";\n        border-top-color: rgba(255,255,255,0.06)").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer span {\n        color: rgba(255,255,255,0.35)").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer a {\n        color: ").concat(footerLinkOnDarkHero).concat(important, ";\n      }\n      ") : '', "\n      \n      /* Voice may scroll as a whole; text chat keeps a fixed shell and scrolls #messagesContainer only */\n      #text-chat-panel .widget-container > .voice-interface {\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        overflow-x: visible").concat(important, ";\n      }\n      #text-chat-panel .widget-container > .text-interface {\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n        overflow-x: visible").concat(important, ";\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\n      /* ========================================\n         \"About\" info (\"i\") button + dialog\n         ======================================== */\n      .ttp-header-actions {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 4px").concat(important, ";\n      }\n      .ttp-info-btn {\n        background: none").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        color: currentColor").concat(important, ";\n        opacity: 0.7").concat(important, ";\n        padding: 4px").concat(important, ";\n        margin: 0").concat(important, ";\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        line-height: 0").concat(important, ";\n        transition: opacity 0.2s, background 0.2s").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .ttp-info-btn:hover {\n        opacity: 1").concat(important, ";\n        background: rgba(127,127,127,0.18)").concat(important, ";\n      }\n      .ttp-info-btn svg { display: block").concat(important, "; }\n      /* Floating variant for views without a header row (mobile idle) */\n      .ttp-info-btn--floating {\n        position: absolute").concat(important, ";\n        top: 10px").concat(important, ";\n        inset-inline-end: 10px").concat(important, ";\n        z-index: 5").concat(important, ";\n      }\n      .ttp-info-btn--onbadge {\n        width: 22px").concat(important, ";\n        height: 22px").concat(important, ";\n        padding: 3px").concat(important, ";\n      }\n      .ttp-info-btn--onbadge svg { width: 13px").concat(important, "; height: 13px").concat(important, "; }\n    ");
+      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          right: 10px !important;\n          left: auto !important;\n          bottom: 92px !important; /* 56px button + 20px gap + 16px footer */\n          top: auto !important;\n          width: 340px !important;\n          max-width: calc(100vw - 20px) !important;\n          height: auto !important;\n          max-height: calc(100vh - 130px) !important;\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          right: 8px !important;\n          left: auto !important;\n          bottom: 86px !important; /* 54px button + 20px gap + 12px footer */\n          top: auto !important;\n          width: 340px !important;\n          max-width: calc(100vw - 16px) !important;\n          height: auto !important;\n          max-height: calc(100vh - 120px) !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      /* Shared panel chrome; size/position differ \u2014 desktop card vs mobile sheet (see @media blocks earlier) */\n      #text-chat-panel {\n        display: none").concat(important, ";\n        position: fixed").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        opacity: 0").concat(important, ";\n        pointer-events: none").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      /* Desktop / tablet: floating 340px card anchored to launcher */\n      @media (min-width: 769px) {\n        #text-chat-panel {\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          transform-origin: bottom right").concat(important, ";\n        }\n        /* Text chat: fixed height so the message list scrolls instead of growing the panel per message */\n        #text-chat-panel:has(.text-interface.active) {\n          height: min(520px, calc(100vh - 100px))").concat(important, ";\n        }\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      ").concat(textUsesVoiceTheme ? "\n      /* Text chat with voice theme: same hero surface as voice idle; inner shells transparent */\n      #text-chat-panel.open:has(.text-interface.active) {\n        background: ".concat(callSurfaceGradient).concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .widget-shell,\n      #text-chat-panel.open:has(.text-interface.active) .panel-inner,\n      #text-chat-panel.open:has(.text-interface.active) .widget-container {\n        background: transparent").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer {\n        background: transparent").concat(important, ";\n        border-top-color: rgba(255,255,255,0.06)").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer span {\n        color: rgba(255,255,255,0.35)").concat(important, ";\n      }\n      #text-chat-panel.open:has(.text-interface.active) .ttp-footer a {\n        color: ").concat(footerLinkOnDarkHero).concat(important, ";\n      }\n      ") : '', "\n      \n      /* Voice may scroll as a whole; text chat keeps a fixed shell and scrolls #messagesContainer only */\n      #text-chat-panel .widget-container > .voice-interface {\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow-y: auto").concat(important, ";\n        overflow-x: visible").concat(important, ";\n      }\n      #text-chat-panel .widget-container > .text-interface {\n        flex: 1").concat(important, ";\n        min-height: 0").concat(important, ";\n        overflow: hidden").concat(important, ";\n        overflow-x: visible").concat(important, ";\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\n      /* ========================================\n         \"About\" info (\"i\") button + dialog\n         ======================================== */\n      .ttp-header-actions {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 4px").concat(important, ";\n      }\n      .ttp-info-btn {\n        background: none").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        color: currentColor").concat(important, ";\n        opacity: 0.7").concat(important, ";\n        padding: 4px").concat(important, ";\n        margin: 0").concat(important, ";\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        line-height: 0").concat(important, ";\n        transition: opacity 0.2s, background 0.2s").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      .ttp-info-btn:hover {\n        opacity: 1").concat(important, ";\n        background: rgba(127,127,127,0.18)").concat(important, ";\n      }\n      .ttp-info-btn svg { display: block").concat(important, "; }\n      /* Floating variant for views without a header row (mobile idle) */\n      .ttp-info-btn--floating {\n        position: absolute").concat(important, ";\n        top: 10px").concat(important, ";\n        inset-inline-end: 10px").concat(important, ";\n        z-index: 5").concat(important, ";\n      }\n      .ttp-info-btn--floating-settings {\n        inset-inline-end: 46px").concat(important, ";\n      }\n      .ttp-info-btn--onbadge {\n        width: 22px").concat(important, ";\n        height: 22px").concat(important, ";\n        padding: 3px").concat(important, ";\n      }\n      .ttp-info-btn--onbadge svg { width: 13px").concat(important, "; height: 13px").concat(important, "; }\n    ");
     }
   }, {
     key: "setupWidgetEvents",
@@ -38448,7 +38740,7 @@ var TTPChatWidget = /*#__PURE__*/function () {
       }
       var v = this.config.voice || {};
       var strip;
-      strip = new _ecommerce_EcommerceVoiceStrip_js__WEBPACK_IMPORTED_MODULE_5__.EcommerceVoiceStrip({
+      strip = new _ecommerce_EcommerceVoiceStrip_js__WEBPACK_IMPORTED_MODULE_7__.EcommerceVoiceStrip({
         language: this.config.language || 'en',
         direction: this.getEffectiveTextDirection(),
         footer: this.getFooterBranding(),
@@ -39024,8 +39316,8 @@ var TextInterface = /*#__PURE__*/function () {
       var isSpeacart = footer.brand === 'speacart';
       var brandName = isSpeacart ? 'SpeaCart' : 'TalkToPC';
       var brandUrl = isSpeacart ? 'https://speacart.com' : 'https://talktopc.com';
-      var backBar = "\n      <div class=\"text-interface-top-bar\" dir=\"".concat(textDirection, "\">\n        <div class=\"text-interface-agent-heading\">\n          <span class=\"text-interface-agent-avatar\" aria-hidden=\"true\">\n            <span class=\"text-interface-agent-initial\">").concat(agentInitial, "</span>\n          </span>\n          <span class=\"text-interface-agent-copy\" dir=\"").concat(textDirection, "\">\n            <span class=\"text-interface-agent-name\">").concat(agentName, "</span>\n            <span class=\"text-interface-agent-status\"><span aria-hidden=\"true\"></span>").concat(this.t('online'), "</span>\n          </span>\n        </div>\n        <div class=\"text-interface-top-actions\">\n          <button type=\"button\" class=\"text-interface-close-btn\" id=\"textUnifiedCloseBtn\" aria-label=\"").concat(this.t('close'), "\" title=\"").concat(this.t('close'), "\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg>\n          </button>\n        </div>\n      </div>");
-      return "<div class=\"text-interface\" id=\"textInterface\" dir=\"".concat(textDirection, "\">\n      ").concat(backBar, "\n      <div class=\"messages-container\" id=\"messagesContainer\">\n        <div class=\"empty-state\">\n          <div class=\"empty-state-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M20 11.5a7.5 7.5 0 0 1-7.75 7.5 8.9 8.9 0 0 1-3.5-.72L4 20l1.55-4.1A7.2 7.2 0 0 1 4.5 12 7.5 7.5 0 0 1 12.25 4.5 7.5 7.5 0 0 1 20 11.5Z\"/>\n              <path d=\"M8.6 11.8h.01M12.1 11.8h.01M15.6 11.8h.01\" stroke-width=\"2.4\"/>\n            </svg>\n          </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        <button type=\"button\" class=\"text-interface-home-btn\" id=\"textUnifiedHomeBtn\" aria-label=\"").concat(this.t('home'), "\" title=\"").concat(this.t('home'), "\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4.5 10.5 12 4l7.5 6.5v8.25a1.25 1.25 0 0 1-1.25 1.25h-4.5v-5.75h-3.5V20h-4.5a1.25 1.25 0 0 1-1.25-1.25V10.5Z\"/></svg>\n        </button>\n        <div class=\"input-wrapper\" style=\"flex:1;\">\n          <textarea class=\"message-input\" id=\"messageInput\" placeholder=\"").concat(inputPlaceholder, "\" rows=\"1\" dir=\"").concat(textDirection, "\"></textarea>\n        </div>\n        <button class=\"send-button\" id=\"sendButton\" aria-label=\"").concat(this.t('sendMessageAria'), "\">\n          <svg class=\"send-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m21 3-7.8 18-3.6-7.8L3 9.6 21 3Z\"/><path d=\"m9.6 13.2 4.2-3.6\"/></svg>\n        </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) || '14px', "; 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 class=\"text-interface-footer\">\n        <span class=\"text-interface-powered\">Powered by <a href=\"").concat(brandUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\"><b>").concat(brandName, "</b></a></span>\n        <button type=\"button\" class=\"ttp-info-btn\" aria-label=\"").concat(this.t('aboutTitle') || 'About', "\" title=\"").concat(this.t('aboutTitle') || 'About', "\">\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"9\"/>\n            <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"16\"/>\n            <circle cx=\"12\" cy=\"7.7\" r=\"1.05\" fill=\"currentColor\" stroke=\"none\"/>\n          </svg>\n        </button>\n      </div>\n    </div>");
+      var backBar = "\n      <div class=\"text-interface-top-bar\" dir=\"".concat(textDirection, "\">\n        <div class=\"text-interface-agent-heading\">\n          <span class=\"text-interface-agent-avatar\" aria-hidden=\"true\">\n            <span class=\"text-interface-agent-initial\">").concat(agentInitial, "</span>\n          </span>\n          <span class=\"text-interface-agent-copy\" dir=\"").concat(textDirection, "\">\n            <span class=\"text-interface-agent-name\">").concat(agentName, "</span>\n            <span class=\"text-interface-agent-status\"><span aria-hidden=\"true\"></span>").concat(this.t('online'), "</span>\n          </span>\n        </div>\n        <div class=\"text-interface-top-actions\">\n          <button type=\"button\" class=\"ttp-info-btn ttp-settings-btn\" aria-label=\"").concat(this.t('settingsTitle') || 'Settings', "\" title=\"").concat(this.t('settingsTitle') || 'Settings', "\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n              <path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"/>\n            </svg>\n          </button>\n          <button type=\"button\" class=\"text-interface-close-btn\" id=\"textUnifiedCloseBtn\" aria-label=\"").concat(this.t('close'), "\" title=\"").concat(this.t('close'), "\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m6 6 12 12M18 6 6 18\"/></svg>\n          </button>\n        </div>\n      </div>");
+      return "<div class=\"text-interface\" id=\"textInterface\" dir=\"".concat(textDirection, "\">\n      ").concat(backBar, "\n      <div class=\"messages-container\" id=\"messagesContainer\">\n        <div class=\"empty-state\">\n          <div class=\"empty-state-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M20 11.5a7.5 7.5 0 0 1-7.75 7.5 8.9 8.9 0 0 1-3.5-.72L4 20l1.55-4.1A7.2 7.2 0 0 1 4.5 12 7.5 7.5 0 0 1 12.25 4.5 7.5 7.5 0 0 1 20 11.5Z\"/>\n              <path d=\"M8.6 11.8h.01M12.1 11.8h.01M15.6 11.8h.01\" stroke-width=\"2.4\"/>\n            </svg>\n          </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        <button type=\"button\" class=\"text-interface-home-btn\" id=\"textUnifiedHomeBtn\" aria-label=\"").concat(this.t('home'), "\" title=\"").concat(this.t('home'), "\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4.5 10.5 12 4l7.5 6.5v8.25a1.25 1.25 0 0 1-1.25 1.25h-4.5v-5.75h-3.5V20h-4.5a1.25 1.25 0 0 1-1.25-1.25V10.5Z\"/></svg>\n        </button>\n        <div class=\"input-wrapper\" style=\"flex:1;\">\n          <textarea class=\"message-input\" id=\"messageInput\" placeholder=\"").concat(inputPlaceholder, "\" rows=\"1\" dir=\"").concat(textDirection, "\"></textarea>\n        </div>\n        <button class=\"send-button\" id=\"sendButton\" aria-label=\"").concat(this.t('sendMessageAria'), "\">\n          <svg class=\"send-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m21 3-7.8 18-3.6-7.8L3 9.6 21 3Z\"/><path d=\"m9.6 13.2 4.2-3.6\"/></svg>\n        </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) || '14px', "; 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 class=\"text-interface-footer\">\n        <span class=\"text-interface-powered\">Powered by <a href=\"").concat(brandUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\"><b>").concat(brandName, "</b></a></span>\n        <span class=\"text-interface-footer-actions\">\n        <button type=\"button\" class=\"ttp-info-btn ttp-settings-btn\" aria-label=\"").concat(this.t('settingsTitle') || 'Settings', "\" title=\"").concat(this.t('settingsTitle') || 'Settings', "\">\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n            <path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"/>\n          </svg>\n        </button>\n        <button type=\"button\" class=\"ttp-info-btn\" aria-label=\"").concat(this.t('aboutTitle') || 'About', "\" title=\"").concat(this.t('aboutTitle') || 'About', "\">\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"9\"/>\n            <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"16\"/>\n            <circle cx=\"12\" cy=\"7.7\" r=\"1.05\" fill=\"currentColor\" stroke=\"none\"/>\n          </svg>\n        </button>\n        </span>\n      </div>\n    </div>");
     }
 
     /**
@@ -39172,7 +39464,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      .text-interface-top-bar {\n        flex-shrink: 0".concat(important, ";\n        padding: 12px 14px").concat(important, ";\n        border-bottom: 1px solid ").concat(topBarBorder).concat(important, ";\n        background: ").concat(topBarBg).concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: flex-start").concat(important, ";\n        gap: 10px").concat(important, ";\n        direction: ").concat(textDirection).concat(important, ";\n      }\n      .text-interface-agent-heading {\n        display: flex").concat(important, ";\n        flex-direction: row").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 9px").concat(important, ";\n        min-width: 0").concat(important, ";\n        flex: 1").concat(important, ";\n        margin-right: 0").concat(important, ";\n      }\n      .text-interface-agent-avatar {\n        width: 36px").concat(important, ";\n        height: 36px").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex: 0 0 36px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: ").concat(useVoiceTheme ? avatarAgentBg : "linear-gradient(135deg, ".concat(sendButtonColor, ", ").concat(sendButtonHoverColor, ")")).concat(important, ";\n        border: none").concat(important, ";\n        box-shadow: none").concat(important, ";\n      }\n      .text-interface-agent-initial { color: #fff").concat(important, "; font-size: 14px").concat(important, "; font-weight: 500").concat(important, "; line-height: 1").concat(important, "; }\n      .text-interface-agent-copy {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        align-items: flex-start").concat(important, ";\n        gap: 2px").concat(important, ";\n        min-width: 0").concat(important, ";\n      }\n      .text-interface-agent-name {\n        color: #f0eff8").concat(important, ";\n        font-size: 14px").concat(important, ";\n        font-weight: 500").concat(important, ";\n        line-height: 1.15").concat(important, ";\n        overflow: hidden").concat(important, ";\n        text-overflow: ellipsis").concat(important, ";\n        white-space: nowrap").concat(important, ";\n      }\n      .text-interface-agent-status {\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 6px").concat(important, ";\n        color: rgba(255,255,255,0.7)").concat(important, ";\n        font-size: 10px").concat(important, ";\n      }\n      .text-interface-agent-status > span {\n        width: 7px").concat(important, ";\n        height: 7px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: #4ade80").concat(important, ";\n        box-shadow: 0 0 10px rgba(74,222,128,0.75)").concat(important, ";\n      }\n      .text-interface-top-actions { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 4px").concat(important, "; margin-inline-start: auto").concat(important, "; }\n      .text-interface-close-btn:hover,\n      .text-interface-home-btn:hover,\n      .text-interface-footer .ttp-info-btn:hover {\n        background: rgba(255,255,255,0.22)").concat(important, ";\n        color: #ffffff").concat(important, ";\n        box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 4px 14px rgba(0,0,0,0.22)").concat(important, ";\n      }\n      .text-interface-close-btn,\n      .text-interface-home-btn,\n      .text-interface-footer .ttp-info-btn {\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        display: grid").concat(important, ";\n        place-items: center").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        border: 1px solid rgba(255,255,255,0.14)").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: rgba(255,255,255,0.12)").concat(important, ";\n        color: rgba(224,218,255,0.84)").concat(important, ";\n        cursor: pointer").concat(important, ";\n        font-family: inherit").concat(important, ";\n        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease").concat(important, ";\n        box-shadow: inset 0 1px 0 rgba(255,255,255,0.14)").concat(important, ";\n      }\n      .text-interface-home-btn svg,\n      .text-interface-close-btn svg,\n      .text-interface-footer .ttp-info-btn svg { width: 18px").concat(important, "; height: 18px").concat(important, "; fill: none").concat(important, "; stroke: currentColor").concat(important, "; stroke-width: 1.9").concat(important, "; stroke-linecap: round").concat(important, "; stroke-linejoin: round").concat(important, "; }\n      .text-interface-home-btn svg { fill: none").concat(important, "; stroke: currentColor").concat(important, "; width: 20px").concat(important, "; height: 20px").concat(important, "; stroke-width: 1.8").concat(important, "; }\n      .input-container .text-interface-home-btn {\n        width: 38px").concat(important, ";\n        height: 38px").concat(important, ";\n        color: rgba(224,218,255,0.84)").concat(important, ";\n        background: rgba(255,255,255,0.12)").concat(important, ";\n        flex-shrink: 0").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: ").concat(messagesAreaBg).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: ").concat(emptyMuted).concat(important, "; \n        text-align: center").concat(important, "; \n        padding: 20px").concat(important, "; \n      }\n      .empty-state-icon { font-size: 52px").concat(important, "; opacity: 0.3").concat(important, "; }\n      .empty-state-title { font-size: 22px").concat(important, "; font-weight: 700").concat(important, "; color: ").concat(emptyTitle).concat(important, "; }\n      .empty-state-text { font-size: 15px").concat(important, "; max-width: 300px").concat(important, "; line-height: 1.45").concat(important, "; }\n      .empty-state-icon {\n        width: 48px").concat(important, "; height: 48px").concat(important, "; border-radius: 16px").concat(important, ";\n        display: grid").concat(important, "; place-items: center").concat(important, "; color: rgba(230,225,255,0.9)").concat(important, ";\n        background: rgba(255,255,255,0.1)").concat(important, ";\n        border: 1px solid rgba(225,219,255,0.18)").concat(important, ";\n      }\n      .empty-state-icon svg { width: 24px").concat(important, "; height: 24px").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        direction: ").concat(textDirection).concat(important, ";\n      }\n      .text-interface.active { display: flex").concat(important, "; }\n      \n      .message { \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, ";\n        gap: 4px").concat(important, ";\n        padding: 4px 0").concat(important, "; \n        width: 100%").concat(important, ";\n        max-width: 100%").concat(important, "; \n        align-items: stretch").concat(important, ";\n      }\n      .message-bubble { \n        position: relative").concat(important, ";\n        padding: 10px ").concat(MESSAGE_META_GUTTER_PX, "px 10px 14px").concat(important, ";\n        border-radius: 14px").concat(important, ";\n        max-width: min(72%, 440px)").concat(important, ";\n        font-size: ").concat(messageFontSize).concat(important, ";\n        line-height: 1.45").concat(important, ";\n        word-wrap: break-word").concat(important, "; \n        box-shadow: ").concat(useVoiceTheme ? 'inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -1px 0 rgba(5, 3, 26, 0.18), 0 8px 20px rgba(4, 3, 22, 0.24)' : 'none').concat(important, ";\n      }\n      .message-bubble[dir=\"rtl\"] { text-align: right").concat(important, "; direction: rtl").concat(important, "; }\n      .message-bubble[dir=\"ltr\"] { text-align: left").concat(important, "; direction: ltr").concat(important, "; }\n      .message-bubble::before {\n        content: ''").concat(important, ";\n        position: absolute").concat(important, ";\n        top: 1px").concat(important, ";\n        right: 1px").concat(important, ";\n        left: 1px").concat(important, ";\n        height: 48%").concat(important, ";\n        border-radius: 11px 11px 8px 8px").concat(important, ";\n        background: linear-gradient(180deg, rgba(255,255,255,0.19), rgba(255,255,255,0))").concat(important, ";\n        pointer-events: none").concat(important, ";\n      }\n      .message.user .message-bubble { \n        background: ").concat(userBubbleBg).concat(important, "; \n        color: ").concat(userBubbleTextColor).concat(important, "; \n        border-top-right-radius: 4px").concat(important, ";\n      }\n      .message.agent .message-bubble {\n        background: ").concat(agentBubbleBg).concat(important, ";\n        color: ").concat(agentBubbleTextColor).concat(important, ";\n        border: ").concat(agentBubbleBorder).concat(important, ";\n        border-top-left-radius: 4px").concat(important, ";\n      }\n\n      /* ---------------------------------------------------------------\n         Rendered markdown inside the agent bubble.\n         Everything is scoped to .message-bubble so host-page styles can't\n         reach in and the user bubble (plain text) is untouched.\n         Logical properties (padding-inline-start, border-inline-start) keep\n         the layout correct in RTL locales such as Hebrew.\n      ---------------------------------------------------------------- */\n      .message-bubble.md, .message-bubble .md-seg { line-height: 1.55").concat(important, "; }\n      .message-bubble .md-seg { display: block").concat(important, "; }\n\n      .message-bubble p {\n        margin: 0 0 10px").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n      /* Deliberately gated on .md / .md-seg rather than a bare\n         \".message-bubble > *\": the VOICE live-transcript row reuses the\n         .message-bubble class in this same shadow root, and its children\n         (.live-badge, .ttp-cursor) are not ours to restyle. */\n      .message-bubble.md > *:last-child,\n      .message-bubble .md-seg:last-child > *:last-child { margin-bottom: 0").concat(important, "; }\n      .message-bubble.md > *:first-child,\n      .message-bubble .md-seg:first-child > *:first-child { margin-top: 0").concat(important, "; }\n\n      .message-bubble .md-h {\n        margin: 16px 0 7px").concat(important, ";\n        padding: 0").concat(important, ";\n        font-weight: 700").concat(important, ";\n        line-height: 1.3").concat(important, ";\n        color: inherit").concat(important, ";\n      }\n      .message-bubble .md-h1 { font-size: 1.18em").concat(important, "; }\n      .message-bubble .md-h2 { font-size: 1.09em").concat(important, "; }\n      .message-bubble .md-h3 { font-size: 1.02em").concat(important, "; }\n      .message-bubble .md-h4,\n      .message-bubble .md-h5,\n      .message-bubble .md-h6 {\n        font-size: 0.95em").concat(important, ";\n        letter-spacing: 0.02em").concat(important, ";\n        color: ").concat(mdMuted).concat(important, ";\n      }\n\n      /* Logical properties only \u2014 a physical padding-left/border-left after\n         these would resolve to the same property and silently win in LTR. */\n      .message-bubble ul, .message-bubble ol {\n        margin: 8px 0 11px").concat(important, ";\n        padding-inline-start: 1.45em").concat(important, ";\n        list-style-position: outside").concat(important, ";\n      }\n      .message-bubble ul { list-style-type: disc").concat(important, "; }\n      .message-bubble ol { list-style-type: decimal").concat(important, "; }\n      .message-bubble ul ul { list-style-type: circle").concat(important, "; }\n      .message-bubble li {\n        margin: 0 0 5px").concat(important, ";\n        padding: 0").concat(important, ";\n        line-height: 1.5").concat(important, ";\n      }\n      .message-bubble li:last-child { margin-bottom: 0").concat(important, "; }\n      .message-bubble li::marker { color: ").concat(mdAccent).concat(important, "; }\n      .message-bubble li > ul, .message-bubble li > ol { margin: 5px 0 2px").concat(important, "; }\n      .message-bubble li > p { margin: 0 0 5px").concat(important, "; }\n\n      .message-bubble strong, .message-bubble b { font-weight: 700").concat(important, "; }\n      .message-bubble em, .message-bubble i { font-style: italic").concat(important, "; }\n      .message-bubble del { text-decoration: line-through").concat(important, "; opacity: 0.7").concat(important, "; }\n\n      .message-bubble a {\n        color: ").concat(mdLink).concat(important, ";\n        text-decoration: underline").concat(important, ";\n        text-underline-offset: 2px").concat(important, ";\n        word-break: break-word").concat(important, ";\n      }\n      .message-bubble a:hover { opacity: 0.82").concat(important, "; }\n\n      .message-bubble code {\n        font-family: ").concat(mdMono).concat(important, ";\n        font-size: 0.88em").concat(important, ";\n        background: ").concat(mdSubtleBg).concat(important, ";\n        border: 1px solid ").concat(mdBorder).concat(important, ";\n        border-radius: 5px").concat(important, ";\n        padding: 1px 5px").concat(important, ";\n        white-space: break-spaces").concat(important, ";\n        word-break: break-word").concat(important, ";\n        direction: ltr").concat(important, ";\n        unicode-bidi: embed").concat(important, ";\n      }\n      .message-bubble pre {\n        margin: 10px 0 11px").concat(important, ";\n        padding: 10px 12px").concat(important, ";\n        background: ").concat(mdSubtleBg).concat(important, ";\n        border: 1px solid ").concat(mdBorder).concat(important, ";\n        border-radius: 10px").concat(important, ";\n        overflow-x: auto").concat(important, ";\n        direction: ltr").concat(important, ";\n        text-align: left").concat(important, ";\n      }\n      .message-bubble pre code {\n        background: none").concat(important, ";\n        border: none").concat(important, ";\n        border-radius: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        font-size: 0.85em").concat(important, ";\n        line-height: 1.5").concat(important, ";\n        white-space: pre").concat(important, ";\n        word-break: normal").concat(important, ";\n      }\n\n      .message-bubble blockquote {\n        margin: 10px 0").concat(important, ";\n        padding-block: 2px").concat(important, ";\n        padding-inline-start: 12px").concat(important, ";\n        padding-inline-end: 0").concat(important, ";\n        border-inline-start: 3px solid ").concat(mdAccent).concat(important, ";\n        color: ").concat(mdMuted).concat(important, ";\n      }\n      .message-bubble blockquote > *:last-child { margin-bottom: 0").concat(important, "; }\n\n      .message-bubble hr {\n        border: none").concat(important, ";\n        border-top: 1px solid ").concat(mdRule).concat(important, ";\n        height: 0").concat(important, ";\n        margin: 13px 0").concat(important, ";\n      }\n\n      .message-bubble .md-table-wrap {\n        margin: 10px 0 11px").concat(important, ";\n        overflow-x: auto").concat(important, ";\n        border: 1px solid ").concat(mdBorder).concat(important, ";\n        border-radius: 9px").concat(important, ";\n      }\n      .message-bubble table {\n        border-collapse: collapse").concat(important, ";\n        width: 100%").concat(important, ";\n        font-size: 0.93em").concat(important, ";\n      }\n      .message-bubble th, .message-bubble td {\n        padding: 7px 11px").concat(important, ";\n        text-align: start").concat(important, ";\n        border-bottom: 1px solid ").concat(mdBorder).concat(important, ";\n        vertical-align: top").concat(important, ";\n      }\n      .message-bubble thead th {\n        background: ").concat(mdSubtleBg).concat(important, ";\n        font-weight: 700").concat(important, ";\n      }\n      .message-bubble tbody tr:nth-child(even) { background: ").concat(mdSubtlerBg).concat(important, "; }\n      .message-bubble tbody tr:last-child td { border-bottom: none").concat(important, "; }\n\n      .message-bubble .md-img {\n        display: block").concat(important, ";\n        max-width: 100%").concat(important, ";\n        height: auto").concat(important, ";\n        border-radius: 8px").concat(important, ";\n        margin: 8px 0").concat(important, ";\n      }\n\n      .message.user { \n        align-self: stretch").concat(important, ";\n        align-items: stretch").concat(important, ";\n      }\n      .message.agent {\n        align-self: stretch").concat(important, ";\n        align-items: stretch").concat(important, ";\n      }\n      .message.user .message-bubble {\n        margin-left: auto").concat(important, ";\n        margin-right: 0").concat(important, ";\n      }\n      .message.agent .message-bubble {\n        margin-left: 0").concat(important, ";\n        margin-right: auto").concat(important, ";\n      }\n      .message-meta {\n        position: absolute").concat(important, ";\n        right: ").concat(MESSAGE_META_INSET_PX, "px").concat(important, ";\n        bottom: 9px").concat(important, ";\n        z-index: 2").concat(important, ";\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 5px").concat(important, ";\n        margin: 0").concat(important, ";\n        color: rgba(255,255,255,0.55)").concat(important, ";\n        font-size: 10px").concat(important, ";\n        line-height: 1").concat(important, ";\n        direction: ltr").concat(important, ";\n        white-space: nowrap").concat(important, ";\n        pointer-events: none").concat(important, ";\n      }\n      .message.user .message-meta {\n        color: rgba(255,255,255,0.74)").concat(important, ";\n      }\n      .message-content { position: relative").concat(important, "; z-index: 1").concat(important, "; display: inline").concat(important, "; overflow-wrap: anywhere").concat(important, "; word-break: break-word").concat(important, "; direction: inherit").concat(important, "; }\n      .message-meta-spacer { display: inline-block").concat(important, "; width: 0").concat(important, "; height: 1px").concat(important, "; }\n      .message-delivery-checks { color: rgba(255,255,255,0.92)").concat(important, "; font-weight: 700").concat(important, "; letter-spacing: -2px").concat(important, "; }\n      .message-expand-button {\n        position: relative").concat(important, ";\n        z-index: 3").concat(important, ";\n        margin: 0 4px").concat(important, ";\n        padding: 0").concat(important, ";\n        border: 0").concat(important, ";\n        background: transparent").concat(important, ";\n        color: #c4b5fd").concat(important, ";\n        font: inherit").concat(important, ";\n        font-size: 0.78em").concat(important, ";\n        font-weight: 600").concat(important, ";\n        line-height: inherit").concat(important, ";\n        text-decoration: underline").concat(important, ";\n        text-underline-offset: 2px").concat(important, ";\n        cursor: pointer").concat(important, ";\n      }\n      .message-expand-button:hover { color: #ede9fe").concat(important, "; }\n      .message-avatar { \n        width: ").concat(avatarSize).concat(important, "; \n        height: ").concat(avatarSize).concat(important, "; \n        min-width: ").concat(avatarSize).concat(important, "; \n        border-radius: 50%").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: ").concat(useVoiceTheme ? '14' : '20', "px").concat(important, "; \n        line-height: 1").concat(important, "; \n        background: transparent").concat(important, "; \n        border: none").concat(important, "; \n        box-sizing: border-box").concat(important, "; \n      }\n      .message-avatar.user { background: ").concat(avatarUserBg).concat(important, "; color: ").concat(avatarUserColor).concat(important, "; }\n      .message-avatar.agent { background: ").concat(avatarAgentBg).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: ").concat(inputContainerBg).concat(important, ";\n        border-top: 1px solid ").concat(inputContainerBorderTop).concat(important, ";\n        align-items: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        flex-direction: row").concat(important, ";\n        direction: ltr").concat(important, ";\n      }\n      .text-interface-footer {\n        position: relative").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        min-height: 28px").concat(important, ";\n        padding: 4px 12px").concat(important, ";\n        background: ").concat(topBarBg).concat(important, ";\n        border-top: 1px solid ").concat(inputContainerBorderTop).concat(important, ";\n        display: flex").concat(important, ";\n        justify-content: center").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 8px").concat(important, ";\n        direction: ltr").concat(important, ";\n      }\n      .text-interface-footer .ttp-info-btn {\n        position: absolute").concat(important, ";\n        right: 12px").concat(important, ";\n        margin-left: auto").concat(important, ";\n      }\n      .text-interface-powered {\n        color: rgba(255,255,255,0.46)").concat(important, ";\n        font-size: 10px").concat(important, ";\n        line-height: 1.2").concat(important, ";\n        text-align: center").concat(important, ";\n        white-space: nowrap").concat(important, ";\n      }\n      .text-interface-powered a {\n        color: ").concat(sendButtonColor).concat(important, ";\n        text-decoration: none").concat(important, ";\n      }\n      .text-interface.active ~ .ttp-footer {\n        display: none").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: ").concat(TEXT_INPUT_MIN_HEIGHT_PX, "px").concat(important, ";\n        max-height: ").concat(TEXT_INPUT_MAX_HEIGHT_PX, "px").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.4").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: start").concat(important, ";\n        direction: ").concat(textDirection).concat(important, ";\n        unicode-bidi: plaintext").concat(important, ";\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(inputFocusBg).concat(important, ";\n        box-shadow: ").concat(inputFocusBoxShadow, ";\n      }\n      \n      .message-input::placeholder {\n        color: ").concat(placeholderColor).concat(important, ";\n        text-align: start").concat(important, ";\n        direction: ").concat(textDirection).concat(important, ";\n      }\n      \n      .send-button {\n        width: 38px").concat(important, ";\n        height: 38px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: linear-gradient(135deg, ").concat(sendButtonColor, ", ").concat(sendButtonHoverColor, ")").concat(important, ";\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) || '16px', ";\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(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", 0.32)").concat(important, ";\n      }\n      .send-icon {\n        width: 18px").concat(important, ";\n        height: 18px").concat(important, ";\n        fill: none").concat(important, ";\n        stroke: currentColor").concat(important, ";\n        stroke-width: 2.1").concat(important, ";\n        stroke-linecap: round").concat(important, ";\n        stroke-linejoin: round").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(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", 0.42)").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: rgba(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", ").concat(typingDotAlpha, ")").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(errorBubbleBg, ";\n        border-radius: ").concat(messages.borderRadius, "px;\n        color: ").concat(errorBubbleColor).concat(important, ";\n        border: ").concat(errorBubbleBorder).concat(important, ";\n        font-size: ").concat(messageFontSize).concat(important, ";\n        margin: 8px 0").concat(important, ";\n      }\n      \n      ").concat(useVoiceTheme ? "\n      #textInterface.active .input-container .send-button-hint {\n        color: rgba(255,255,255,0.72)".concat(important, ";\n      }\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: ").concat(messageFontSize).concat(important, ";\n          padding: 11px ").concat(MESSAGE_META_GUTTER_PX, "px 11px 14px").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: 44px").concat(important, ";\n        }\n        \n        .empty-state-title {\n          font-size: 20px").concat(important, ";\n        }\n        \n        .empty-state-text {\n          font-size: 14px").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: ").concat(messageFontSize).concat(important, ";\n          padding: 10px ").concat(MESSAGE_META_GUTTER_PX, "px 10px 13px").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: 12px 14px").concat(important, ";\n        border-bottom: 1px solid ").concat(topBarBorder).concat(important, ";\n        background: ").concat(topBarBg).concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: flex-start").concat(important, ";\n        gap: 10px").concat(important, ";\n        direction: ").concat(textDirection).concat(important, ";\n      }\n      .text-interface-agent-heading {\n        display: flex").concat(important, ";\n        flex-direction: row").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 9px").concat(important, ";\n        min-width: 0").concat(important, ";\n        flex: 1").concat(important, ";\n        margin-right: 0").concat(important, ";\n      }\n      .text-interface-agent-avatar {\n        width: 36px").concat(important, ";\n        height: 36px").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        flex: 0 0 36px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: ").concat(useVoiceTheme ? avatarAgentBg : "linear-gradient(135deg, ".concat(sendButtonColor, ", ").concat(sendButtonHoverColor, ")")).concat(important, ";\n        border: none").concat(important, ";\n        box-shadow: none").concat(important, ";\n      }\n      .text-interface-agent-initial { color: #fff").concat(important, "; font-size: 14px").concat(important, "; font-weight: 500").concat(important, "; line-height: 1").concat(important, "; }\n      .text-interface-agent-copy {\n        display: flex").concat(important, ";\n        flex-direction: column").concat(important, ";\n        align-items: flex-start").concat(important, ";\n        gap: 2px").concat(important, ";\n        min-width: 0").concat(important, ";\n      }\n      .text-interface-agent-name {\n        color: #f0eff8").concat(important, ";\n        font-size: 14px").concat(important, ";\n        font-weight: 500").concat(important, ";\n        line-height: 1.15").concat(important, ";\n        overflow: hidden").concat(important, ";\n        text-overflow: ellipsis").concat(important, ";\n        white-space: nowrap").concat(important, ";\n      }\n      .text-interface-agent-status {\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 6px").concat(important, ";\n        color: rgba(255,255,255,0.7)").concat(important, ";\n        font-size: 10px").concat(important, ";\n      }\n      .text-interface-agent-status > span {\n        width: 7px").concat(important, ";\n        height: 7px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: #4ade80").concat(important, ";\n        box-shadow: 0 0 10px rgba(74,222,128,0.75)").concat(important, ";\n      }\n      .text-interface-top-actions { display: flex").concat(important, "; align-items: center").concat(important, "; gap: 4px").concat(important, "; margin-inline-start: auto").concat(important, "; }\n      .text-interface-top-actions .ttp-settings-btn {\n        width: 32px").concat(important, "; height: 32px").concat(important, "; display: grid").concat(important, "; place-items: center").concat(important, ";\n        padding: 0").concat(important, "; margin: 0").concat(important, "; border: 1px solid rgba(255,255,255,0.14)").concat(important, ";\n        border-radius: 50%").concat(important, "; background: rgba(255,255,255,0.12)").concat(important, "; color: rgba(255,255,255,0.92)").concat(important, ";\n        cursor: pointer").concat(important, "; opacity: 0.92").concat(important, ";\n      }\n      .text-interface-top-actions .ttp-settings-btn:hover {\n        background: rgba(255,255,255,0.22)").concat(important, "; opacity: 1").concat(important, ";\n      }\n      .text-interface-footer-actions { display: inline-flex").concat(important, "; align-items: center").concat(important, "; gap: 6px").concat(important, "; }\n      .text-interface-close-btn:hover,\n      .text-interface-home-btn:hover,\n      .text-interface-footer .ttp-info-btn:hover {\n        background: rgba(255,255,255,0.22)").concat(important, ";\n        color: #ffffff").concat(important, ";\n        box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 4px 14px rgba(0,0,0,0.22)").concat(important, ";\n      }\n      .text-interface-close-btn,\n      .text-interface-home-btn,\n      .text-interface-footer .ttp-info-btn {\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        display: grid").concat(important, ";\n        place-items: center").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        border: 1px solid rgba(255,255,255,0.14)").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        background: rgba(255,255,255,0.12)").concat(important, ";\n        color: rgba(224,218,255,0.84)").concat(important, ";\n        cursor: pointer").concat(important, ";\n        font-family: inherit").concat(important, ";\n        transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease").concat(important, ";\n        box-shadow: inset 0 1px 0 rgba(255,255,255,0.14)").concat(important, ";\n      }\n      .text-interface-home-btn svg,\n      .text-interface-close-btn svg,\n      .text-interface-footer .ttp-info-btn svg { width: 18px").concat(important, "; height: 18px").concat(important, "; fill: none").concat(important, "; stroke: currentColor").concat(important, "; stroke-width: 1.9").concat(important, "; stroke-linecap: round").concat(important, "; stroke-linejoin: round").concat(important, "; }\n      .text-interface-home-btn svg { fill: none").concat(important, "; stroke: currentColor").concat(important, "; width: 20px").concat(important, "; height: 20px").concat(important, "; stroke-width: 1.8").concat(important, "; }\n      .input-container .text-interface-home-btn {\n        width: 38px").concat(important, ";\n        height: 38px").concat(important, ";\n        color: rgba(224,218,255,0.84)").concat(important, ";\n        background: rgba(255,255,255,0.12)").concat(important, ";\n        flex-shrink: 0").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: ").concat(messagesAreaBg).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: ").concat(emptyMuted).concat(important, "; \n        text-align: center").concat(important, "; \n        padding: 20px").concat(important, "; \n      }\n      .empty-state-icon { font-size: 52px").concat(important, "; opacity: 0.3").concat(important, "; }\n      .empty-state-title { font-size: 22px").concat(important, "; font-weight: 700").concat(important, "; color: ").concat(emptyTitle).concat(important, "; }\n      .empty-state-text { font-size: 15px").concat(important, "; max-width: 300px").concat(important, "; line-height: 1.45").concat(important, "; }\n      .empty-state-icon {\n        width: 48px").concat(important, "; height: 48px").concat(important, "; border-radius: 16px").concat(important, ";\n        display: grid").concat(important, "; place-items: center").concat(important, "; color: rgba(230,225,255,0.9)").concat(important, ";\n        background: rgba(255,255,255,0.1)").concat(important, ";\n        border: 1px solid rgba(225,219,255,0.18)").concat(important, ";\n      }\n      .empty-state-icon svg { width: 24px").concat(important, "; height: 24px").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        direction: ").concat(textDirection).concat(important, ";\n      }\n      .text-interface.active { display: flex").concat(important, "; }\n      \n      .message { \n        display: flex").concat(important, "; \n        flex-direction: column").concat(important, ";\n        gap: 4px").concat(important, ";\n        padding: 4px 0").concat(important, "; \n        width: 100%").concat(important, ";\n        max-width: 100%").concat(important, "; \n        align-items: stretch").concat(important, ";\n      }\n      .message-bubble { \n        position: relative").concat(important, ";\n        padding: 10px ").concat(MESSAGE_META_GUTTER_PX, "px 10px 14px").concat(important, ";\n        border-radius: 14px").concat(important, ";\n        max-width: min(72%, 440px)").concat(important, ";\n        font-size: ").concat(messageFontSize).concat(important, ";\n        line-height: 1.45").concat(important, ";\n        word-wrap: break-word").concat(important, "; \n        box-shadow: ").concat(useVoiceTheme ? 'inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -1px 0 rgba(5, 3, 26, 0.18), 0 8px 20px rgba(4, 3, 22, 0.24)' : 'none').concat(important, ";\n      }\n      .message-bubble[dir=\"rtl\"] { text-align: right").concat(important, "; direction: rtl").concat(important, "; }\n      .message-bubble[dir=\"ltr\"] { text-align: left").concat(important, "; direction: ltr").concat(important, "; }\n      .message-bubble::before {\n        content: ''").concat(important, ";\n        position: absolute").concat(important, ";\n        top: 1px").concat(important, ";\n        right: 1px").concat(important, ";\n        left: 1px").concat(important, ";\n        height: 48%").concat(important, ";\n        border-radius: 11px 11px 8px 8px").concat(important, ";\n        background: linear-gradient(180deg, rgba(255,255,255,0.19), rgba(255,255,255,0))").concat(important, ";\n        pointer-events: none").concat(important, ";\n      }\n      .message.user .message-bubble { \n        background: ").concat(userBubbleBg).concat(important, "; \n        color: ").concat(userBubbleTextColor).concat(important, "; \n        border-top-right-radius: 4px").concat(important, ";\n      }\n      .message.agent .message-bubble {\n        background: ").concat(agentBubbleBg).concat(important, ";\n        color: ").concat(agentBubbleTextColor).concat(important, ";\n        border: ").concat(agentBubbleBorder).concat(important, ";\n        border-top-left-radius: 4px").concat(important, ";\n      }\n\n      /* ---------------------------------------------------------------\n         Rendered markdown inside the agent bubble.\n         Everything is scoped to .message-bubble so host-page styles can't\n         reach in and the user bubble (plain text) is untouched.\n         Logical properties (padding-inline-start, border-inline-start) keep\n         the layout correct in RTL locales such as Hebrew.\n      ---------------------------------------------------------------- */\n      .message-bubble.md, .message-bubble .md-seg { line-height: 1.55").concat(important, "; }\n      .message-bubble .md-seg { display: block").concat(important, "; }\n\n      .message-bubble p {\n        margin: 0 0 10px").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n      /* Deliberately gated on .md / .md-seg rather than a bare\n         \".message-bubble > *\": the VOICE live-transcript row reuses the\n         .message-bubble class in this same shadow root, and its children\n         (.live-badge, .ttp-cursor) are not ours to restyle. */\n      .message-bubble.md > *:last-child,\n      .message-bubble .md-seg:last-child > *:last-child { margin-bottom: 0").concat(important, "; }\n      .message-bubble.md > *:first-child,\n      .message-bubble .md-seg:first-child > *:first-child { margin-top: 0").concat(important, "; }\n\n      .message-bubble .md-h {\n        margin: 16px 0 7px").concat(important, ";\n        padding: 0").concat(important, ";\n        font-weight: 700").concat(important, ";\n        line-height: 1.3").concat(important, ";\n        color: inherit").concat(important, ";\n      }\n      .message-bubble .md-h1 { font-size: 1.18em").concat(important, "; }\n      .message-bubble .md-h2 { font-size: 1.09em").concat(important, "; }\n      .message-bubble .md-h3 { font-size: 1.02em").concat(important, "; }\n      .message-bubble .md-h4,\n      .message-bubble .md-h5,\n      .message-bubble .md-h6 {\n        font-size: 0.95em").concat(important, ";\n        letter-spacing: 0.02em").concat(important, ";\n        color: ").concat(mdMuted).concat(important, ";\n      }\n\n      /* Logical properties only \u2014 a physical padding-left/border-left after\n         these would resolve to the same property and silently win in LTR. */\n      .message-bubble ul, .message-bubble ol {\n        margin: 8px 0 11px").concat(important, ";\n        padding-inline-start: 1.45em").concat(important, ";\n        list-style-position: outside").concat(important, ";\n      }\n      .message-bubble ul { list-style-type: disc").concat(important, "; }\n      .message-bubble ol { list-style-type: decimal").concat(important, "; }\n      .message-bubble ul ul { list-style-type: circle").concat(important, "; }\n      .message-bubble li {\n        margin: 0 0 5px").concat(important, ";\n        padding: 0").concat(important, ";\n        line-height: 1.5").concat(important, ";\n      }\n      .message-bubble li:last-child { margin-bottom: 0").concat(important, "; }\n      .message-bubble li::marker { color: ").concat(mdAccent).concat(important, "; }\n      .message-bubble li > ul, .message-bubble li > ol { margin: 5px 0 2px").concat(important, "; }\n      .message-bubble li > p { margin: 0 0 5px").concat(important, "; }\n\n      .message-bubble strong, .message-bubble b { font-weight: 700").concat(important, "; }\n      .message-bubble em, .message-bubble i { font-style: italic").concat(important, "; }\n      .message-bubble del { text-decoration: line-through").concat(important, "; opacity: 0.7").concat(important, "; }\n\n      .message-bubble a {\n        color: ").concat(mdLink).concat(important, ";\n        text-decoration: underline").concat(important, ";\n        text-underline-offset: 2px").concat(important, ";\n        word-break: break-word").concat(important, ";\n      }\n      .message-bubble a:hover { opacity: 0.82").concat(important, "; }\n\n      .message-bubble code {\n        font-family: ").concat(mdMono).concat(important, ";\n        font-size: 0.88em").concat(important, ";\n        background: ").concat(mdSubtleBg).concat(important, ";\n        border: 1px solid ").concat(mdBorder).concat(important, ";\n        border-radius: 5px").concat(important, ";\n        padding: 1px 5px").concat(important, ";\n        white-space: break-spaces").concat(important, ";\n        word-break: break-word").concat(important, ";\n        direction: ltr").concat(important, ";\n        unicode-bidi: embed").concat(important, ";\n      }\n      .message-bubble pre {\n        margin: 10px 0 11px").concat(important, ";\n        padding: 10px 12px").concat(important, ";\n        background: ").concat(mdSubtleBg).concat(important, ";\n        border: 1px solid ").concat(mdBorder).concat(important, ";\n        border-radius: 10px").concat(important, ";\n        overflow-x: auto").concat(important, ";\n        direction: ltr").concat(important, ";\n        text-align: left").concat(important, ";\n      }\n      .message-bubble pre code {\n        background: none").concat(important, ";\n        border: none").concat(important, ";\n        border-radius: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        font-size: 0.85em").concat(important, ";\n        line-height: 1.5").concat(important, ";\n        white-space: pre").concat(important, ";\n        word-break: normal").concat(important, ";\n      }\n\n      .message-bubble blockquote {\n        margin: 10px 0").concat(important, ";\n        padding-block: 2px").concat(important, ";\n        padding-inline-start: 12px").concat(important, ";\n        padding-inline-end: 0").concat(important, ";\n        border-inline-start: 3px solid ").concat(mdAccent).concat(important, ";\n        color: ").concat(mdMuted).concat(important, ";\n      }\n      .message-bubble blockquote > *:last-child { margin-bottom: 0").concat(important, "; }\n\n      .message-bubble hr {\n        border: none").concat(important, ";\n        border-top: 1px solid ").concat(mdRule).concat(important, ";\n        height: 0").concat(important, ";\n        margin: 13px 0").concat(important, ";\n      }\n\n      .message-bubble .md-table-wrap {\n        margin: 10px 0 11px").concat(important, ";\n        overflow-x: auto").concat(important, ";\n        border: 1px solid ").concat(mdBorder).concat(important, ";\n        border-radius: 9px").concat(important, ";\n      }\n      .message-bubble table {\n        border-collapse: collapse").concat(important, ";\n        width: 100%").concat(important, ";\n        font-size: 0.93em").concat(important, ";\n      }\n      .message-bubble th, .message-bubble td {\n        padding: 7px 11px").concat(important, ";\n        text-align: start").concat(important, ";\n        border-bottom: 1px solid ").concat(mdBorder).concat(important, ";\n        vertical-align: top").concat(important, ";\n      }\n      .message-bubble thead th {\n        background: ").concat(mdSubtleBg).concat(important, ";\n        font-weight: 700").concat(important, ";\n      }\n      .message-bubble tbody tr:nth-child(even) { background: ").concat(mdSubtlerBg).concat(important, "; }\n      .message-bubble tbody tr:last-child td { border-bottom: none").concat(important, "; }\n\n      .message-bubble .md-img {\n        display: block").concat(important, ";\n        max-width: 100%").concat(important, ";\n        height: auto").concat(important, ";\n        border-radius: 8px").concat(important, ";\n        margin: 8px 0").concat(important, ";\n      }\n\n      .message.user { \n        align-self: stretch").concat(important, ";\n        align-items: stretch").concat(important, ";\n      }\n      .message.agent {\n        align-self: stretch").concat(important, ";\n        align-items: stretch").concat(important, ";\n      }\n      .message.user .message-bubble {\n        margin-left: auto").concat(important, ";\n        margin-right: 0").concat(important, ";\n      }\n      .message.agent .message-bubble {\n        margin-left: 0").concat(important, ";\n        margin-right: auto").concat(important, ";\n      }\n      .message-meta {\n        position: absolute").concat(important, ";\n        right: ").concat(MESSAGE_META_INSET_PX, "px").concat(important, ";\n        bottom: 9px").concat(important, ";\n        z-index: 2").concat(important, ";\n        display: inline-flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 5px").concat(important, ";\n        margin: 0").concat(important, ";\n        color: rgba(255,255,255,0.55)").concat(important, ";\n        font-size: 10px").concat(important, ";\n        line-height: 1").concat(important, ";\n        direction: ltr").concat(important, ";\n        white-space: nowrap").concat(important, ";\n        pointer-events: none").concat(important, ";\n      }\n      .message.user .message-meta {\n        color: rgba(255,255,255,0.74)").concat(important, ";\n      }\n      .message-content { position: relative").concat(important, "; z-index: 1").concat(important, "; display: inline").concat(important, "; overflow-wrap: anywhere").concat(important, "; word-break: break-word").concat(important, "; direction: inherit").concat(important, "; }\n      .message-meta-spacer { display: inline-block").concat(important, "; width: 0").concat(important, "; height: 1px").concat(important, "; }\n      .message-delivery-checks { color: rgba(255,255,255,0.92)").concat(important, "; font-weight: 700").concat(important, "; letter-spacing: -2px").concat(important, "; }\n      .message-expand-button {\n        position: relative").concat(important, ";\n        z-index: 3").concat(important, ";\n        margin: 0 4px").concat(important, ";\n        padding: 0").concat(important, ";\n        border: 0").concat(important, ";\n        background: transparent").concat(important, ";\n        color: #c4b5fd").concat(important, ";\n        font: inherit").concat(important, ";\n        font-size: 0.78em").concat(important, ";\n        font-weight: 600").concat(important, ";\n        line-height: inherit").concat(important, ";\n        text-decoration: underline").concat(important, ";\n        text-underline-offset: 2px").concat(important, ";\n        cursor: pointer").concat(important, ";\n      }\n      .message-expand-button:hover { color: #ede9fe").concat(important, "; }\n      .message-avatar { \n        width: ").concat(avatarSize).concat(important, "; \n        height: ").concat(avatarSize).concat(important, "; \n        min-width: ").concat(avatarSize).concat(important, "; \n        border-radius: 50%").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: ").concat(useVoiceTheme ? '14' : '20', "px").concat(important, "; \n        line-height: 1").concat(important, "; \n        background: transparent").concat(important, "; \n        border: none").concat(important, "; \n        box-sizing: border-box").concat(important, "; \n      }\n      .message-avatar.user { background: ").concat(avatarUserBg).concat(important, "; color: ").concat(avatarUserColor).concat(important, "; }\n      .message-avatar.agent { background: ").concat(avatarAgentBg).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: ").concat(inputContainerBg).concat(important, ";\n        border-top: 1px solid ").concat(inputContainerBorderTop).concat(important, ";\n        align-items: center").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        flex-direction: row").concat(important, ";\n        direction: ltr").concat(important, ";\n      }\n      .text-interface-footer {\n        position: relative").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n        min-height: 28px").concat(important, ";\n        padding: 4px 12px").concat(important, ";\n        background: ").concat(topBarBg).concat(important, ";\n        border-top: 1px solid ").concat(inputContainerBorderTop).concat(important, ";\n        display: flex").concat(important, ";\n        justify-content: center").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 8px").concat(important, ";\n        direction: ltr").concat(important, ";\n      }\n      .text-interface-footer .ttp-info-btn {\n        position: absolute").concat(important, ";\n        right: 12px").concat(important, ";\n        margin-left: auto").concat(important, ";\n      }\n      .text-interface-powered {\n        color: rgba(255,255,255,0.46)").concat(important, ";\n        font-size: 10px").concat(important, ";\n        line-height: 1.2").concat(important, ";\n        text-align: center").concat(important, ";\n        white-space: nowrap").concat(important, ";\n      }\n      .text-interface-powered a {\n        color: ").concat(sendButtonColor).concat(important, ";\n        text-decoration: none").concat(important, ";\n      }\n      .text-interface.active ~ .ttp-footer {\n        display: none").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: ").concat(TEXT_INPUT_MIN_HEIGHT_PX, "px").concat(important, ";\n        max-height: ").concat(TEXT_INPUT_MAX_HEIGHT_PX, "px").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.4").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: start").concat(important, ";\n        direction: ").concat(textDirection).concat(important, ";\n        unicode-bidi: plaintext").concat(important, ";\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(inputFocusBg).concat(important, ";\n        box-shadow: ").concat(inputFocusBoxShadow, ";\n      }\n      \n      .message-input::placeholder {\n        color: ").concat(placeholderColor).concat(important, ";\n        text-align: start").concat(important, ";\n        direction: ").concat(textDirection).concat(important, ";\n      }\n      \n      .send-button {\n        width: 38px").concat(important, ";\n        height: 38px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        background: linear-gradient(135deg, ").concat(sendButtonColor, ", ").concat(sendButtonHoverColor, ")").concat(important, ";\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) || '16px', ";\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(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", 0.32)").concat(important, ";\n      }\n      .send-icon {\n        width: 18px").concat(important, ";\n        height: 18px").concat(important, ";\n        fill: none").concat(important, ";\n        stroke: currentColor").concat(important, ";\n        stroke-width: 2.1").concat(important, ";\n        stroke-linecap: round").concat(important, ";\n        stroke-linejoin: round").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(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", 0.42)").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: rgba(").concat(accentRgb[0], ", ").concat(accentRgb[1], ", ").concat(accentRgb[2], ", ").concat(typingDotAlpha, ")").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(errorBubbleBg, ";\n        border-radius: ").concat(messages.borderRadius, "px;\n        color: ").concat(errorBubbleColor).concat(important, ";\n        border: ").concat(errorBubbleBorder).concat(important, ";\n        font-size: ").concat(messageFontSize).concat(important, ";\n        margin: 8px 0").concat(important, ";\n      }\n      \n      ").concat(useVoiceTheme ? "\n      #textInterface.active .input-container .send-button-hint {\n        color: rgba(255,255,255,0.72)".concat(important, ";\n      }\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: ").concat(messageFontSize).concat(important, ";\n          padding: 11px ").concat(MESSAGE_META_GUTTER_PX, "px 11px 14px").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: 44px").concat(important, ";\n        }\n        \n        .empty-state-title {\n          font-size: 20px").concat(important, ";\n        }\n        \n        .empty-state-text {\n          font-size: 14px").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: ").concat(messageFontSize).concat(important, ";\n          padding: 10px ").concat(MESSAGE_META_GUTTER_PX, "px 10px 13px").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    ");
     }
 
     /**
@@ -45225,7 +45517,7 @@ var Templates = /*#__PURE__*/function () {
       var transcriptPlaceholder = this.t('transcriptWillAppear') || '';
       var transcriptDir = (0,_rtlText_js__WEBPACK_IMPORTED_MODULE_0__.dirForTranscriptSnippet)(transcriptPlaceholder, this.config);
       var voiceInputDir = (0,_rtlText_js__WEBPACK_IMPORTED_MODULE_0__.dirForAssistantStreamingText)(this.config);
-      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            <div class=\"ttp-header-actions\">\n              ").concat(this.infoButton(), "\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>\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          ").concat((((_this$config$behavior = this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mode) || 'unified') !== 'voice-only' ? "\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          ") : '', "\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              <div class=\"ttp-header-actions\">\n                ").concat(this.settingsButton(), "\n                ").concat(this.infoButton(), "\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            </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-ctrl-btn\" id=\"desktopPauseBtn\" title=\"Pause call\" aria-label=\"Pause call\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"desktop-pause-icon\">\n                <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\" class=\"desktop-play-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"6,4 20,12 6,20\"/>\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            <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          </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            ").concat(this.settingsButton('ttp-info-btn--onctrl'), "\n            ").concat(this.infoButton('ttp-info-btn--onctrl'), "\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 secondary\" id=\"desktopPauseBtnCompact\" title=\"Pause call\" aria-label=\"Pause call\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"desktop-pause-icon\">\n                <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\" class=\"desktop-play-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"6,4 20,12 6,20\"/>\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            <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          </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\" dir=\"").concat(transcriptDir, "\">\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(transcriptDir, "\">\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(voiceInputDir, "\" 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>");
+      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            <div class=\"ttp-header-actions\">\n              ").concat(this.settingsButton(), "\n              ").concat(this.infoButton(), "\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>\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          ").concat((((_this$config$behavior = this.config.behavior) === null || _this$config$behavior === void 0 ? void 0 : _this$config$behavior.mode) || 'unified') !== 'voice-only' ? "\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          ") : '', "\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              <div class=\"ttp-header-actions\">\n                ").concat(this.settingsButton(), "\n                ").concat(this.infoButton(), "\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            </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-ctrl-btn\" id=\"desktopPauseBtn\" title=\"Pause call\" aria-label=\"Pause call\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"desktop-pause-icon\">\n                <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\" class=\"desktop-play-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"6,4 20,12 6,20\"/>\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            <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          </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            ").concat(this.settingsButton('ttp-info-btn--onctrl'), "\n            ").concat(this.infoButton('ttp-info-btn--onctrl'), "\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 secondary\" id=\"desktopPauseBtnCompact\" title=\"Pause call\" aria-label=\"Pause call\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" class=\"desktop-pause-icon\">\n                <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n              </svg>\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\" class=\"desktop-play-icon\" style=\"display: none; position: absolute;\">\n                <polygon points=\"6,4 20,12 6,20\"/>\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            <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          </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\" dir=\"").concat(transcriptDir, "\">\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(transcriptDir, "\">\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(voiceInputDir, "\" 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>");
     }
 
     /**
@@ -45242,7 +45534,7 @@ var Templates = /*#__PURE__*/function () {
       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        ").concat(this.infoButton('ttp-info-btn--floating'), "\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          ").concat(this.settingsButton('ttp-info-btn--onbadge'), "\n          ").concat(this.infoButton('ttp-info-btn--onbadge'), "\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(7).fill(0).map(function (_, i) {
+      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        ").concat(this.settingsButton('ttp-info-btn--floating ttp-info-btn--floating-settings'), "\n        ").concat(this.infoButton('ttp-info-btn--floating'), "\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          ").concat(this.settingsButton('ttp-info-btn--onbadge'), "\n          ").concat(this.infoButton('ttp-info-btn--onbadge'), "\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(7).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=\"mobilePauseBtn\" aria-label=\"Pause call\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" class=\"mobile-pause-icon\">\n                  <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                  <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"/>\n                </svg>\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"#fff\" stroke=\"none\" class=\"mobile-play-icon\" style=\"display: none;\">\n                  <polygon points=\"6,4 20,12 6,20\"/>\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(transcriptDir, "\">").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(voiceInputDir, "\"\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>");
     }
@@ -46103,7 +46395,12 @@ __webpack_require__.r(__webpack_exports__);
     "lengthVeryBrief": "Very brief",
     "settingsMicSensitivity": "Mic sensitivity",
     "sensitivityLow": "Low",
-    "sensitivityHigh": "High"
+    "sensitivityHigh": "High",
+    "settingsHtmlHop": "HTML audio hop",
+    "settingsHtmlHopHint": "May reduce echo; can cause voice speed wobble on some PCs.",
+    "settingsLoopback": "WebRTC loopback",
+    "settingsLoopbackHint": "Fixes speaker echo on Chrome (~20 ms extra latency).",
+    "settingsPlaybackNote": "Audio route changes apply on the next call — end this call and start again, or reload the page."
   },
   "he": {
     "landingTitle": "איך תרצה לתקשר?",