ttp-agent-sdk 2.34.12 → 2.34.14

package/dist/agent-widget.dev.js

@@ -27230,7 +27230,7 @@ var Styles = /*#__PURE__*/function () {
       var endCallBtnColor = this.config.endCallButtonColor || '#ef4444';
       var voiceSendButtonColor = this.config.sendButtonColor || ((_this$config$text = this.config.text) === null || _this$config$text === void 0 ? void 0 : _this$config$text.sendButtonColor) || this.config.voiceSendButtonColor || '#7C3AED';
       var important = ' !important';
-      return "\n      /* Voice Interface Styles - Ultra-compact for Wix iframes */\n      .voice-interface { \n        display: none".concat(important, "; \n        flex: 1; \n        flex-direction: column;\n        align-items: stretch; \n        justify-content: flex-start; \n        padding: 0; \n        background: linear-gradient(180deg, #f8fafc 0%, #e0e7ff 100%);\n        overflow: hidden;\n        min-height: 0;\n        height: 100%;\n        width: 100%;\n        box-sizing: border-box;\n      }\n      .voice-interface.active { display: flex").concat(important, "; }\n      \n      /* Voice States - Better scaling gaps */\n      #voiceIdleState {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n        justify-content: center;\n        overflow: hidden;\n        flex: 1;\n        box-sizing: border-box;\n        gap: clamp(6px, 1.5vh, 12px);\n      }\n      \n      #voiceActiveState {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n        justify-content: flex-start;\n        overflow: hidden;\n        flex: 1;\n        box-sizing: border-box;\n        gap: 0;\n        padding: 0;\n      }\n      \n      #voiceActiveState[style*=\"display: none\"] {\n        display: none !important;\n      }\n      \n      /* Voice Avatar - Scales better from small to large */\n      .voice-avatar,\n      .voice-avatar-active {\n        width: clamp(80px, 18vh, 160px);\n        height: clamp(80px, 18vh, 160px);\n        aspect-ratio: 1;\n        border-radius: 50%;\n        background: linear-gradient(135deg, ").concat(avatarBg, " 0%, ").concat(avatarActiveBg, " 100%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: clamp(40px, 9vh, 80px);\n        margin: 0;\n        box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);\n        transition: all 0.3s ease;\n        flex-shrink: 0;\n        position: relative;\n      }\n      \n      .voice-avatar-active {\n        animation: avatarPulse 2s ease-in-out infinite;\n      }\n      \n      @keyframes avatarPulse {\n        0%, 100% { \n          transform: scale(1);\n        }\n        50% { \n          transform: scale(1.05);\n        }\n      }\n      \n      .voice-avatar-active.speaking {\n        animation: avatarSpeak 0.5s ease-in-out infinite;\n      }\n      \n      @keyframes avatarSpeak {\n        0%, 100% { transform: scale(1); }\n        50% { transform: scale(1.08); }\n      }\n      \n      /* Voice Rings Animation */\n      .voice-rings {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n      }\n      \n      .voice-ring {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        border: 2px solid rgba(102, 126, 234, 0.3);\n        border-radius: 50%;\n        opacity: 0;\n        animation: ringExpand 2s ease-out infinite;\n      }\n      \n      .voice-ring:nth-child(2) { animation-delay: 0.5s; }\n      .voice-ring:nth-child(3) { animation-delay: 1s; }\n      \n      @keyframes ringExpand {\n        0% {\n          width: 100%;\n          height: 100%;\n          opacity: 0.6;\n        }\n        100% {\n          width: 160%;\n          height: 160%;\n          opacity: 0;\n        }\n      }\n      \n      /* Voice Status - Scales with container */\n      .voice-status {\n        text-align: center;\n        margin: 0;\n        flex-shrink: 0;\n        min-height: 0;\n      }\n      \n      .voice-status-title {\n        font-size: clamp(12px, 3vh, 20px);\n        font-weight: 600;\n        color: ").concat(statusTitleColor, ";\n        margin-bottom: clamp(2px, 0.5vh, 4px);\n        line-height: 1.2;\n      }\n      \n      .voice-status-subtitle {\n        font-size: clamp(10px, 2vh, 14px);\n        color: ").concat(statusSubtitleColor, ";\n        line-height: 1.2;\n      }\n      \n      /* Start Call Button - Scales with container */\n      .start-call-btn {\n        margin: 0;\n        width: min(280px, 70vw)").concat(important, ";\n        height: clamp(48px, 8vh, 64px)").concat(important, ";\n        border-radius: clamp(24px, 4vh, 32px)").concat(important, ";\n        border: none").concat(important, ";\n        background: ").concat(startCallBtnColor).concat(important, ";\n        color: ").concat(startCallBtnTextColor).concat(important, ";\n        font-size: clamp(14px, 2.5vh, 18px)").concat(important, ";\n        font-weight: 600").concat(important, ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        gap: clamp(8px, 1.5vh, 12px);\n        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);\n        transition: all 0.3s ease;\n        flex-shrink: 0;\n      }\n      \n      .start-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: auto").concat(important, ";\n        height: auto").concat(important, ";\n      }\n      \n      .start-call-btn svg {\n        width: clamp(22px, 4vh, 32px);\n        height: clamp(22px, 4vh, 32px);\n      }\n      \n      .start-call-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);\n      }\n      \n      .start-call-btn:active {\n        transform: translateY(-1px);\n      }\n      .start-call-btn:disabled {\n        cursor: not-allowed").concat(important, ";\n        opacity: 0.6").concat(important, ";\n      }\n      \n      /* Connecting Spinner */\n      .connecting-spinner {\n        display: inline-block;\n        width: 16px;\n        height: 16px;\n        border: 2px solid rgba(255, 255, 255, 0.3);\n        border-top-color: ").concat(startCallBtnTextColor, ";\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n        margin-right: 8px;\n        vertical-align: middle;\n      }\n      \n      @keyframes spin {\n        to { transform: rotate(360deg); }\n      }\n\n      \n      /* Voice Transcript - Scales with container */\n      .voice-transcript {\n        background: ").concat(transcriptBg, ";\n        padding: clamp(6px, 1.5vh, 12px);\n        border-radius: 10px;\n        width: min(360px, calc(100% - 40px));\n        margin: 0;\n        min-height: clamp(80px, 15vh, 120px);\n        max-height: clamp(100px, 18vh, 140px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n        flex-shrink: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        display: flex;\n        flex-direction: column;\n        box-sizing: border-box;\n      }\n      \n      .transcript-label {\n        font-size: clamp(8px, 1.4vh, 11px);\n        color: ").concat(transcriptLabelColor, ";\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.3px;\n        margin-bottom: clamp(3px, 0.6vh, 6px);\n        flex-shrink: 0;\n        word-wrap: break-word;\n      }\n      \n      .transcript-text {\n        font-size: clamp(11px, 2vh, 15px);\n        color: ").concat(transcriptTextColor, ";\n        line-height: 1.4;\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        word-wrap: break-word;\n        overflow-wrap: break-word;\n      }\n      \n      .transcript-text.empty {\n        color: #cbd5e1;\n        font-style: italic;\n      }\n      \n      /* Voice Text Input Area - Type while on voice call */\n      .voice-text-input-area {\n        width: 100%;\n        padding: 14px 16px;\n        margin: 0;\n        flex-shrink: 0;\n        background: #ffffff;\n        border-top: 1px solid rgba(0, 0, 0, 0.06);\n        box-sizing: border-box;\n      }\n      \n      .voice-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        background: #f1f5f9;\n        border-radius: 12px;\n        padding: 4px 4px 4px 14px;\n        border: 1px solid transparent;\n        transition: all 0.2s ease;\n      }\n      \n      .voice-input-wrapper:focus-within {\n        background: #fff;\n        border-color: #a855f7;\n        box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);\n      }\n      \n      .voice-text-input {\n        flex: 1;\n        border: none;\n        outline: none;\n        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 14px;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        background: transparent;\n        padding: 10px 0;\n      }\n      \n      .voice-text-input::placeholder {\n        color: #94a3b8;\n      }\n      \n      .voice-send-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 38px;\n        height: 38px;\n        border-radius: 10px;\n        border: none;\n        background: ").concat(voiceSendButtonColor).concat(important, ";\n        color: #fff;\n        cursor: pointer;\n        transition: transform 0.2s ease;\n        flex-shrink: 0;\n      }\n      \n      .voice-send-btn:hover:not(:disabled) {\n        transform: scale(1.05);\n      }\n      \n      .voice-send-btn:active:not(:disabled) {\n        transform: scale(0.95);\n      }\n      \n      .voice-send-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        transform: none;\n      }\n      \n      .voice-send-btn svg {\n        width: 16px;\n        height: 16px;\n      }\n      \n      .voice-input-hint {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 5px;\n        margin-top: 10px;\n        font-size: 11px;\n        color: #64748b;\n        transition: color 0.2s ease;\n      }\n      \n      .voice-input-hint svg {\n        width: 12px;\n        height: 12px;\n        color: #10b981;\n      }\n      \n      /* Text input status states */\n      .voice-input-hint--sending {\n        color: #666;\n      }\n      \n      .voice-input-hint--success {\n        color: #28a745;\n      }\n      \n      .voice-input-hint--queued {\n        color: #ffc107;\n      }\n      \n      .voice-input-hint--error {\n        color: #dc3545;\n      }\n      \n      /* Disabled input styling */\n      .voice-text-input:disabled,\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5;\n        cursor: not-allowed;\n      }\n      \n      .voice-send-btn:disabled,\n      #mobileSendBtn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n      \n      /* Voice Controls - Scales with container */\n      .voice-controls {\n        display: flex;\n        gap: clamp(8px, 1.8vh, 14px);\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        margin: 0;\n        padding-top: 0;\n      }\n      \n      .voice-control-btn {\n        width: clamp(48px, 9vh, 72px)").concat(important, ";\n        height: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        aspect-ratio: 1").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        transition: all 0.2s;\n        position: relative").concat(important, ";\n        flex-shrink: 0;\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      \n      .voice-control-btn svg {\n        width: 48%").concat(important, ";\n        height: 48%").concat(important, ";\n        min-width: 48%").concat(important, ";\n        min-height: 48%").concat(important, ";\n        max-width: 48%").concat(important, ";\n        max-height: 48%").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      \n      .voice-control-btn.primary {\n        width: clamp(54px, 10vh, 80px)").concat(important, ";\n        height: clamp(54px, 10vh, 80px)").concat(important, ";\n        min-width: clamp(54px, 10vh, 80px)").concat(important, ";\n        min-height: clamp(54px, 10vh, 80px)").concat(important, ";\n        max-width: clamp(54px, 10vh, 80px)").concat(important, ";\n        max-height: clamp(54px, 10vh, 80px)").concat(important, ";\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)").concat(important, ";\n        color: white").concat(important, ";\n        box-shadow: 0 6px 18px rgba(102, 126, 234, 0.4);\n      }\n      \n      .voice-control-btn.primary:hover {\n        transform: scale(1.05);\n      }\n      \n      .voice-control-btn.primary.active {\n        background: ").concat(endCallBtnColor).concat(important, ";\n        animation: recordingPulse 1.5s ease-in-out infinite;\n      }\n      .voice-control-btn.primary.active svg {\n        fill: white").concat(important, ";\n      }\n      \n      /* More specific selectors for WordPress compatibility */\n      #endCallBtn.voice-control-btn.primary.active,\n      #muteBtn.voice-control-btn.secondary,\n      #speakerBtn.voice-control-btn.secondary {\n        border-radius: 50% !important;\n        width: clamp(48px, 9vh, 72px) !important;\n        height: clamp(48px, 9vh, 72px) !important;\n        min-width: clamp(48px, 9vh, 72px) !important;\n        min-height: clamp(48px, 9vh, 72px) !important;\n        max-width: clamp(48px, 9vh, 72px) !important;\n        max-height: clamp(48px, 9vh, 72px) !important;\n        aspect-ratio: 1 !important;\n        overflow: hidden !important;\n      }\n      \n      #endCallBtn.voice-control-btn.primary.active {\n        width: clamp(54px, 10vh, 80px) !important;\n        height: clamp(54px, 10vh, 80px) !important;\n        min-width: clamp(54px, 10vh, 80px) !important;\n        min-height: clamp(54px, 10vh, 80px) !important;\n        max-width: clamp(54px, 10vh, 80px) !important;\n        max-height: clamp(54px, 10vh, 80px) !important;\n      }\n      \n      \n      /* Microphone button specific background color */\n      #muteBtn.voice-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      /* Speaker button specific background color */\n      #speakerBtn.voice-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      \n      #endCallBtn.voice-control-btn.primary.active svg,\n      #muteBtn.voice-control-btn.secondary svg,\n      #speakerBtn.voice-control-btn.secondary svg {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n        width: 48% !important;\n        height: 48% !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        position: relative !important;\n      }\n      \n      @keyframes recordingPulse {\n        0%, 100% { \n          box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);\n        }\n        50% { \n          box-shadow: 0 6px 24px rgba(239, 68, 68, 0.7);\n        }\n      }\n      \n      .voice-control-btn.secondary {\n        background: ").concat(controlBtnColor).concat(important, ";\n        color: ").concat(controlBtnSecondaryColor).concat(important, ";\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\n        width: clamp(48px, 9vh, 72px)").concat(important, ";\n        height: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-height: clamp(48px, 9vh, 72px)").concat(important, ";\n      }\n      \n      .voice-control-btn.secondary:hover {\n        background: #f8fafc").concat(important, ";\n        transform: scale(1.05);\n      }\n      \n      .voice-control-btn.secondary.muted {\n        background: #f3f4f6").concat(important, ";\n      }\n      \n      .voice-control-btn.secondary.muted .mute-icon {\n        stroke: #9ca3af !important;\n      }\n      \n      .voice-control-btn.secondary svg {\n        width: 48%").concat(important, ";\n        height: 48%").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n      \n      .voice-timer {\n        position: absolute;\n        bottom: clamp(-18px, -3vh, -24px);\n        font-size: clamp(9px, 1.6vh, 12px);\n        color: #64748b;\n        font-weight: 500;\n        white-space: nowrap;\n      }\n      \n      /* ===== DESKTOP VOICE SECTION - New Design ===== */\n      .desktop-voice-section {\n        padding: 16px 20px;\n        background: linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.04) 100%);\n        width: 100%;\n        flex-shrink: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n        box-sizing: border-box;\n        text-align: center;\n      }\n      \n      /* Ensure all children are centered */\n      .desktop-voice-section > * {\n        margin-left: auto;\n        margin-right: auto;\n      }\n      \n      .desktop-timer {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        padding: 5px 10px;\n        background: rgba(0, 0, 0, 0.05);\n        border-radius: 20px;\n        font-family: 'JetBrains Mono', 'Courier New', monospace;\n        font-size: 11px;\n        color: #64748b;\n        margin: 0 auto;\n      }\n      \n      .desktop-timer .timer-dot {\n        width: 5px").concat(important, ";\n        height: 5px").concat(important, ";\n        background: #ef4444").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: timerPulse 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      @keyframes timerPulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n      }\n      \n      .desktop-avatar-container {\n        margin-bottom: 12px;\n      }\n      \n      .desktop-avatar-large {\n        width: 80px !important;\n        height: 80px !important;\n        border-radius: 20px !important;\n        margin: 0 auto 12px !important;\n        box-shadow: 0 8px 24px rgba(168, 85, 247, 0.35) !important;\n        background: linear-gradient(135deg, ").concat(avatarBg, " 0%, ").concat(avatarActiveBg, " 100%) !important;\n      }\n      \n      .desktop-waveform {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        height: 36px;\n        width: 100%;\n      }\n      \n      .desktop-waveform-bar {\n        width: 4px;\n        background: rgba(255, 255, 255, 0.9);\n        border-radius: 2px;\n        animation: waveformAnimation 0.8s ease-in-out infinite;\n      }\n      \n      .desktop-waveform-bar[data-index=\"0\"] { height: 14px").concat(important, "; animation-delay: 0s").concat(important, "; }\n      .desktop-waveform-bar[data-index=\"1\"] { height: 26px").concat(important, "; animation-delay: 0.1s").concat(important, "; }\n      .desktop-waveform-bar[data-index=\"2\"] { height: 36px").concat(important, "; animation-delay: 0.2s").concat(important, "; }\n      .desktop-waveform-bar[data-index=\"3\"] { height: 22px").concat(important, "; animation-delay: 0.3s").concat(important, "; }\n      .desktop-waveform-bar[data-index=\"4\"] { height: 16px").concat(important, "; animation-delay: 0.4s").concat(important, "; }\n      \n      @keyframes waveformAnimation {\n        0%, 100% { transform: scaleY(0.5); }\n        50% { transform: scaleY(1); }\n      }\n      \n      .desktop-waveform.paused .desktop-waveform-bar {\n        animation-play-state: paused;\n      }\n\n      /* New main waveform (used in updated template) */\n      .desktop-main-waveform {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        height: 48px;\n        width: 100%;\n        max-width: 200px;\n        margin: 0 auto;\n        padding: 0 20px;\n      }\n\n      .desktop-main-waveform .waveform-bar {\n        width: 3px;\n        background: #a855f7;\n        border-radius: 2px;\n        height: 8px;\n        animation: waveformAnimation 0.8s ease-in-out infinite;\n      }\n\n      .desktop-main-waveform .waveform-bar:nth-child(1) { height: 12px; animation-delay: 0s; }\n      .desktop-main-waveform .waveform-bar:nth-child(2) { height: 20px; animation-delay: 0.05s; }\n      .desktop-main-waveform .waveform-bar:nth-child(3) { height: 28px; animation-delay: 0.1s; }\n      .desktop-main-waveform .waveform-bar:nth-child(4) { height: 36px; animation-delay: 0.15s; }\n      .desktop-main-waveform .waveform-bar:nth-child(5) { height: 44px; animation-delay: 0.2s; }\n      .desktop-main-waveform .waveform-bar:nth-child(6) { height: 50px; animation-delay: 0.25s; }\n      .desktop-main-waveform .waveform-bar:nth-child(7) { height: 54px; animation-delay: 0.3s; }\n      .desktop-main-waveform .waveform-bar:nth-child(8) { height: 56px; animation-delay: 0.35s; }\n      .desktop-main-waveform .waveform-bar:nth-child(9) { height: 54px; animation-delay: 0.4s; }\n      .desktop-main-waveform .waveform-bar:nth-child(10) { height: 50px; animation-delay: 0.45s; }\n      .desktop-main-waveform .waveform-bar:nth-child(11) { height: 44px; animation-delay: 0.5s; }\n      .desktop-main-waveform .waveform-bar:nth-child(12) { height: 36px; animation-delay: 0.55s; }\n      .desktop-main-waveform .waveform-bar:nth-child(13) { height: 28px; animation-delay: 0.6s; }\n      .desktop-main-waveform .waveform-bar:nth-child(14) { height: 20px; animation-delay: 0.65s; }\n      .desktop-main-waveform .waveform-bar:nth-child(15) { height: 12px; animation-delay: 0.7s; }\n\n      .desktop-status {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 5px;\n        font-size: 12px;\n        color: ").concat(statusTitleColor, ";\n        font-weight: 500;\n        width: 100%;\n        text-align: center;\n        margin: 0 auto;\n      }\n      \n      .desktop-status .status-dot {\n        width: 5px;\n        height: 5px;\n        background: ").concat(statusDotColor, ";\n        border-radius: 50%;\n        animation: statusPulse 1.5s ease-in-out infinite;\n      }\n      \n      @keyframes statusPulse {\n        0%, 100% { transform: scale(1); opacity: 1; }\n        50% { transform: scale(1.15); opacity: 0.8; }\n      }\n      \n      .desktop-live-waveform {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        height: 48px;\n        margin-bottom: 20px;\n      }\n      \n      .desktop-live-bar {\n        width: 3px;\n        background: linear-gradient(180deg, ").concat(avatarBg, ", ").concat(avatarActiveBg, ");\n        border-radius: 2px;\n        transition: height 0.1s ease;\n        height: 8px;\n      }\n      \n      .desktop-controls {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        margin: 0 auto;\n      }\n      \n      .desktop-control-btn {\n        width: 46px;\n        height: 46px;\n        border-radius: 50%;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      }\n      \n      .desktop-control-btn svg {\n        width: 20px;\n        height: 20px;\n      }\n      \n      .desktop-mic-icon,\n      .desktop-speaker-icon {\n        width: 20px !important;\n        height: 20px !important;\n        display: block;\n        flex-shrink: 0;\n      }\n      \n      .desktop-control-btn.secondary.muted .desktop-mic-icon,\n      .desktop-control-btn.secondary.muted .desktop-speaker-icon {\n        width: 20px !important;\n        height: 20px !important;\n      }\n      \n      \n      .desktop-control-btn.secondary:hover {\n        background: rgba(0, 0, 0, 0.1);\n        color: #1e293b;\n        transform: scale(1.05);\n      }\n      .desktop-control-btn.secondary.muted {\n        background: #f3f4f6;\n        color: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary.muted .desktop-mic-icon,\n      .desktop-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      /* Desktop speaker button background color */\n      #desktopSpeakerBtn.desktop-control-btn.secondary,\n      #desktopSpeakerBtnCompact.compact-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 46px;\n        height: 46px;\n        transform: translate(-50%, -50%);\n        z-index: 10;\n      }\n      .desktop-control-btn.danger {\n        width: 50px;\n        height: 50px;\n        background: ").concat(endCallBtnColor).concat(important, ";\n        color: #ffffff;\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);\n        overflow: visible;\n      }\n      \n      .desktop-control-btn.danger svg {\n        width: 20px;\n        height: 20px;\n        overflow: visible;\n      }\n      \n      .desktop-control-btn.danger:hover {\n        transform: scale(1.06);\n        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);\n      }\n      \n      .desktop-control-btn.danger:hover {\n        transform: scale(1.06);\n        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);\n      }\n      \n      \n      /* ===== COMPACT VOICE SECTION (Single-row layout) ===== */\n      .compact-voice-section {\n        padding: 10px 14px;\n        background: linear-gradient(180deg, #ffffff, rgba(168, 85, 247, 0.04));\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n        min-height: 62px;\n        flex-shrink: 0;\n      }\n      \n      .compact-left {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n      \n      .compact-avatar {\n        width: 42px;\n        height: 42px;\n        min-width: 42px;\n        min-height: 42px;\n        border-radius: 12px;\n        background: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: visible;\n        position: relative;\n      }\n      \n      /* Waveform container in compact avatar - ensure it's visible */\n      .compact-avatar .desktop-main-waveform {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 2px;\n        height: 100%;\n        width: 100%;\n        padding: 4px;\n        transform: scale(0.75);\n        transform-origin: center;\n      }\n      \n      /* Ensure waveform bars are visible and animated in compact mode */\n      .compact-avatar .desktop-main-waveform .waveform-bar {\n        width: 2px;\n        min-width: 2px;\n        background: #a855f7;\n        border-radius: 1px;\n        flex-shrink: 0;\n        animation: waveformAnimation 0.8s ease-in-out infinite;\n      }\n      \n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(1) { height: 6px; animation-delay: 0s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(2) { height: 10px; animation-delay: 0.05s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(3) { height: 14px; animation-delay: 0.1s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(4) { height: 18px; animation-delay: 0.15s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(5) { height: 22px; animation-delay: 0.2s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(6) { height: 26px; animation-delay: 0.25s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(7) { height: 28px; animation-delay: 0.3s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(8) { height: 30px; animation-delay: 0.35s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(9) { height: 28px; animation-delay: 0.4s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(10) { height: 26px; animation-delay: 0.45s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(11) { height: 22px; animation-delay: 0.5s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(12) { height: 18px; animation-delay: 0.55s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(13) { height: 14px; animation-delay: 0.6s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(14) { height: 10px; animation-delay: 0.65s; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(15) { height: 6px; animation-delay: 0.7s; }\n\n      }\n      \n      .compact-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      \n      .compact-timer {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        font-family: 'JetBrains Mono', 'Courier New', monospace;\n        font-size: 13px;\n        font-weight: 600;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n      }\n      \n      .compact-timer .timer-dot {\n        width: 6px;\n        height: 6px;\n        background: #ef4444;\n        border-radius: 50%;\n        animation: timerPulse 1s ease-in-out infinite;\n      }\n      \n      .compact-status {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        font-size: 11px;\n        color: ").concat(statusTitleColor, ";\n      }\n      \n      .compact-status .status-dot {\n        width: 5px;\n        height: 5px;\n        background: ").concat(statusDotColor, ";\n        border-radius: 50%;\n        animation: statusPulse 1.5s ease-in-out infinite;\n      }\n      \n      @keyframes statusPulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.7; transform: scale(1.1); }\n      }\n      \n      .compact-controls {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n      \n      .compact-control-btn {\n        width: 36px;\n        height: 36px;\n        min-width: 36px;\n        min-height: 36px;\n        border-radius: 50%;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        padding: 0;\n        position: relative;\n      }\n      \n      .compact-control-btn svg {\n        width: 16px;\n        height: 16px;\n      }\n      \n      .compact-control-btn.secondary {\n        background: #f1f5f9;\n        color: #64748b;\n      }\n      \n      \n      /* Compact speaker button background color */\n      #desktopSpeakerBtnCompact.compact-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      /* Compact microphone button background color */\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .compact-control-btn.secondary:hover {\n        background: #e2e8f0;\n        color: #475569;\n      }\n      \n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.1);\n        color: #ef4444;\n      }\n      \n      \n      .compact-control-btn.secondary.muted .desktop-mic-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #ef4444;\n      }\n      \n      .compact-control-btn.secondary.muted .desktop-mic-off-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-off-icon {\n        width: 46px;\n        height: 46px;\n      }\n\n      .compact-control-btn.danger {\n        width: 40px;\n        height: 40px;\n        min-width: 40px;\n        min-height: 40px;\n        background: ").concat(endCallBtnColor).concat(important, ";\n        color: white;\n        box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);\n      }\n      \n      .compact-control-btn.danger:hover {\n        transform: scale(1.05);\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);\n      }\n      \n      .compact-control-btn.danger svg {\n        width: 18px;\n        height: 18px;\n        overflow: visible;\n      }\n      \n/* ===== CONVERSATION PANEL ===== */\n      .desktop-conversation-panel {\n        border-top: 1px solid rgba(0, 0, 0, 0.06);\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n        flex: 1;\n      }\n      \n      .conversation-header {\n        padding: 10px 16px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background: #fafafa;\n        cursor: pointer;\n        flex-shrink: 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.04);\n        transition: background 0.2s ease;\n      }\n      \n      .conversation-header:hover {\n        background: #f5f5f5;\n      }\n      \n      .conversation-label {\n        font-size: 11px;\n        font-weight: 600;\n        color: #64748b;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      \n      .conversation-toggle {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        font-size: 11px;\n        color: #94a3b8;\n        font-weight: 500;\n      }\n      \n      .conversation-toggle svg {\n        transition: transform 0.2s ease;\n      }\n      \n      .conversation-header.expanded .conversation-toggle svg {\n        transform: rotate(180deg);\n      }\n      \n      /* ===== COLLAPSED: Live Transcript Only (2 lines) ===== */\n      .live-transcript-collapsed {\n        padding: 12px 16px;\n        background: #fafafa;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        flex-shrink: 0;\n        min-height: 50px;\n      }\n      \n      .live-indicator {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        font-size: 9px;\n        font-weight: 700;\n        color: ").concat(liveIndicatorTextColor).concat(important, ";\n        text-transform: uppercase;\n        letter-spacing: 0.08em;\n      }\n      \n      .live-indicator .live-dot {\n        height: 5px;\n        width: 5px;\n        background: ").concat(liveIndicatorDotColor).concat(important, ";\n        border-radius: 50%;\n        animation: statusPulse 1.5s ease-in-out infinite;\n      }\n      \n      .live-text-collapsed {\n        font-size: ").concat(liveTranscriptFontSize).concat(important, ";\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        line-height: 1.5;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n      \n      .live-text-collapsed.muted {\n        color: #94a3b8;\n        font-style: italic;\n      }\n      \n      .typing-cursor {\n        display: inline-block;\n        width: 2px;\n        height: 14px;\n        background: #a855f7;\n        margin-left: 2px;\n        animation: blink 1s step-end infinite;\n        vertical-align: middle;\n      }\n      \n      @keyframes blink {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0; }\n      }\n      \n      /* ===== EXPANDED: Full Conversation History ===== */\n      .conversation-history {\n        flex: 1;\n        flex-direction: column;\n        gap: 10px;\n        overflow-y: auto;\n        padding: 14px 16px;\n        min-height: 0;\n      }\n      .conversation-history.visible {\n        display: flex;\n      }\n\n      .conversation-messages {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n      }\n\n      /* Message Rows */\n      .message-row {\n        display: flex;\n        gap: 8px;\n        animation: msgIn 0.25s ease;\n      }\n      \n      @keyframes msgIn {\n        from { opacity: 0; transform: translateY(8px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n      @keyframes slideIn {\n        from { opacity: 0; transform: translateY(-10px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n      \n      @keyframes slideOut {\n        from { opacity: 1; transform: translateY(0); }\n        to { opacity: 0; transform: translateY(-10px); }\n      }\n      \n      .message-row.user {\n        flex-direction: row-reverse;\n      }\n      \n      .message-avatar {\n        width: 28px;\n        height: 28px;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n      }\n\n      .message-avatar.assistant {\n        background: linear-gradient(135deg, #c084fc, #a855f7);\n      }\n\n      .message-avatar.assistant .orb {\n        width: 12px;\n        height: 12px;\n        background: rgba(255, 255, 255, 0.9);\n        border-radius: 50%;\n      }\n\n      .message-avatar.user {\n        background: linear-gradient(135deg, #64748b, #475569);\n        color: #fff;\n        font-size: 11px;\n        font-weight: 600;\n      }\n\n      .message-bubble {\n        max-width: 80%;\n        padding: 9px 13px;\n        border-radius: 12px;\n        font-size: 13px;\n        line-height: 1.5;\n      }\n      \n      .message-row.assistant .message-bubble {\n        background: #fff;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        border: 1px solid rgba(0, 0, 0, 0.06);\n        border-bottom-left-radius: 4px;\n      }\n      \n      .message-row.user .message-bubble {\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n      \n      /* Live message at bottom of history */\n      .live-message-row {\n        display: flex;\n        gap: 8px;\n        padding-top: 8px;\n        border-top: 1px dashed rgba(0, 0, 0, 0.08);\n        margin-top: auto;\n      }\n      \n      .live-message-row .message-bubble {\n        background: #fff;\n        border: 1px solid rgba(16, 185, 129, 0.3);\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        position: relative;\n        border-radius: 14px;\n        border-bottom-left-radius: 4px;\n      }\n      \n      .live-message-row .live-badge {\n        position: absolute;\n        top: -8px;\n        left: 10px;\n        background: #10b981;\n        color: #fff;\n        font-size: 8px;\n        font-weight: 700;\n        padding: 2px 6px;\n        border-radius: 4px;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      \n      /* Hide/show based on expanded state */\n      .desktop-conversation-panel.collapsed .conversation-history {\n        display: none;\n      }\n      \n      .desktop-conversation-panel.collapsed .live-transcript-collapsed {\n        display: flex;\n      }\n      \n      .desktop-conversation-panel.expanded .conversation-history {\n        display: flex;\n        max-height: 400px;\n      }\n      \n      .desktop-conversation-panel.expanded .live-transcript-collapsed {\n        display: none;\n      }\n      \n            /* ===== DARK MODE SUPPORT ===== */\n      @media (prefers-color-scheme: dark) {\n        .desktop-voice-section {\n          background: linear-gradient(180deg, #1e1e2e 0%, rgba(168, 85, 247, 0.08) 100%);\n        }\n\n        .desktop-timer {\n          color: #94a3b8;\n        }\n\n        .desktop-status {\n          color: #34d399;\n        }\n\n        .desktop-status .status-dot {\n      \n      .desktop-control-btn.secondary.muted {\n        background: rgba(255, 255, 255, 0.1);\n        color: #9ca3af;\n      \n      .compact-voice-section {\n        background: linear-gradient(180deg, #1e1e2e 0%, rgba(168, 85, 247, 0.08) 100%);\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n      }\n      \n      .compact-timer {\n        color: #e2e8f0;\n      }\n      \n      .compact-status {\n        color: #34d399;\n      }\n      \n      .compact-status .status-dot {\n        background: #34d399;\n      }\n      \n      .compact-control-btn.secondary {\n        background: rgba(255, 255, 255, 0.08);\n        color: #94a3b8;\n      }\n      \n      .compact-control-btn.secondary:hover {\n        background: rgba(255, 255, 255, 0.15);\n        color: #e2e8f0;\n      }\n      \n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.2);\n        color: #f87171;\n      }\n\n      }\n      \n      .desktop-control-btn.secondary.muted svg {\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 20px;\n      }\n      \n      .desktop-control-btn.secondary.muted {\n        background: #f3f4f6;\n        color: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary.muted svg {\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 20px;\n      }\n        stroke: #9ca3af;\n      }\n        stroke: #9ca3af;\n      }\n          background: #34d399;\n        }\n\n        .desktop-control-btn.secondary {\n          background: rgba(255, 255, 255, 0.08);\n          color: #94a3b8;\n        }\n\n        .desktop-control-btn.secondary:hover {\n          background: rgba(255, 255, 255, 0.15);\n          color: #e2e8f0;\n        }\n\n        .desktop-conversation-panel {\n          border-top: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .conversation-header {\n          background: #1a1a2e;\n        }\n\n        .conversation-header:hover {\n          background: #252540;\n        }\n\n        .conversation-label {\n          color: #94a3b8;\n        }\n\n        .conversation-toggle {\n          color: #64748b;\n        }\n\n        .live-transcript-preview {\n          background: #1a1a2e;\n        }\n        .live-indicator {\n          color: ").concat(liveIndicatorTextColor).concat(important, ";\n        }\n        .live-indicator .live-dot {\n          background: ").concat(liveIndicatorDotColor).concat(important, ";\n        }\n\n        .live-text {\n          color: #e2e8f0;\n        }\n\n        .live-text.muted {\n          color: #64748b;\n        }\n\n        .conversation-history {\n          background: #1a1a2e;\n        }\n\n        .conversation-msg.assistant .conversation-msg-bubble {\n          background: #252540;\n          color: #e2e8f0;\n          border: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .voice-text-input-area {\n          background: #1a1a2e;\n        }\n\n        .voice-text-input {\n          background: #252540 !important;\n          color: #e2e8f0 !important;\n          border-color: rgba(255, 255, 255, 0.1) !important;\n        }\n\n        .voice-text-input::placeholder {\n          color: #64748b !important;\n        }\n\n        .voice-text-input:focus {\n          border-color: ").concat(avatarBg, " !important;\n          box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;\n        }\n\n        .voice-input-hint {\n          color: #64748b !important;\n        }\n\n        .voice-send-btn {\n          background: ").concat(voiceSendButtonColor, " !important;\n        }\n\n        .voice-send-btn:disabled {\n          background: #374151 !important;\n          color: #4b5563 !important;\n        }\n      }\n\n      /* Mobile optimization */\n      @media (max-width: 768px) {\n        .voice-interface {\n          padding: 6px 10px;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        .voice-interface {\n          padding: 5px 8px;\n        }\n      }\n      \n      /* Mobile Voice Call UI - Shared styles (also used in generateMobileCSS) */\n      ").concat(this._getSharedMobileCSS(important), "\n\n    ");
+      return "\n      /* Voice Interface Styles - Ultra-compact for Wix iframes */\n      .voice-interface { \n        display: none".concat(important, "; \n        flex: 1; \n        flex-direction: column;\n        align-items: stretch; \n        justify-content: flex-start; \n        padding: 0; \n        background: linear-gradient(180deg, #f8fafc 0%, #e0e7ff 100%);\n        overflow: hidden;\n        min-height: 0;\n        height: 100%;\n        width: 100%;\n        box-sizing: border-box;\n      }\n      .voice-interface.active { display: flex").concat(important, "; }\n      \n      /* Voice States - Better scaling gaps */\n      #voiceIdleState {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n        justify-content: center;\n        overflow: hidden;\n        flex: 1;\n        box-sizing: border-box;\n        gap: clamp(6px, 1.5vh, 12px);\n      }\n      \n      #voiceActiveState {\n        display: flex;\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n        height: 100%;\n        min-height: 0;\n        justify-content: flex-start;\n        overflow: hidden;\n        flex: 1;\n        box-sizing: border-box;\n        gap: 0;\n        padding: 0;\n      }\n      \n      #voiceActiveState[style*=\"display: none\"] {\n        display: none !important;\n      }\n      \n      /* Voice Avatar - Scales better from small to large */\n      .voice-avatar,\n      .voice-avatar-active {\n        width: clamp(80px, 18vh, 160px);\n        height: clamp(80px, 18vh, 160px);\n        aspect-ratio: 1;\n        border-radius: 50%;\n        background: linear-gradient(135deg, ").concat(avatarBg, " 0%, ").concat(avatarActiveBg, " 100%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: clamp(40px, 9vh, 80px);\n        margin: 0;\n        box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);\n        transition: all 0.3s ease;\n        flex-shrink: 0;\n        position: relative;\n      }\n      \n      .voice-avatar-active {\n        animation: avatarPulse 2s ease-in-out infinite;\n      }\n      \n      @keyframes avatarPulse {\n        0%, 100% { \n          transform: scale(1);\n        }\n        50% { \n          transform: scale(1.05);\n        }\n      }\n      \n      .voice-avatar-active.speaking {\n        animation: avatarSpeak 0.5s ease-in-out infinite;\n      }\n      \n      @keyframes avatarSpeak {\n        0%, 100% { transform: scale(1); }\n        50% { transform: scale(1.08); }\n      }\n      \n      /* Voice Rings Animation */\n      .voice-rings {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n      }\n      \n      .voice-ring {\ndisplay: block !important;\n                position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        border: 2px solid rgba(102, 126, 234, 0.3);\n        border-radius: 50%;\n        opacity: 0;\n        animation: ringExpand 2s ease-out infinite;\n      }\n      \n      .voice-ring:nth-child(2) { animation-delay: 0.5s; }\n      .voice-ring:nth-child(3) { animation-delay: 1s; }\n      \n      @keyframes ringExpand {\n        0% {\n          width: 100%;\n          height: 100%;\n          opacity: 0.6;\n        }\n        100% {\n          width: 160%;\n          height: 160%;\n          opacity: 0;\n        }\n      }\n      \n      /* Voice Status - Scales with container */\n      .voice-status {\n        text-align: center;\n        margin: 0;\n        flex-shrink: 0;\n        min-height: 0;\n      }\n      \n      .voice-status-title {\n        font-size: clamp(12px, 3vh, 20px);\n        font-weight: 600;\n        color: ").concat(statusTitleColor, ";\n        margin-bottom: clamp(2px, 0.5vh, 4px);\n        line-height: 1.2;\n      }\n      \n      .voice-status-subtitle {\n        font-size: clamp(10px, 2vh, 14px);\n        color: ").concat(statusSubtitleColor, ";\n        line-height: 1.2;\n      }\n      \n      /* Start Call Button - Scales with container */\n      .start-call-btn {\n        margin: 0;\n        width: min(280px, 70vw)").concat(important, ";\n        height: clamp(48px, 8vh, 64px)").concat(important, ";\n        border-radius: clamp(24px, 4vh, 32px)").concat(important, ";\n        border: none").concat(important, ";\n        background: ").concat(startCallBtnColor).concat(important, ";\n        color: ").concat(startCallBtnTextColor).concat(important, ";\n        font-size: clamp(14px, 2.5vh, 18px)").concat(important, ";\n        font-weight: 600").concat(important, ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        gap: clamp(8px, 1.5vh, 12px);\n        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);\n        transition: all 0.3s ease;\n        flex-shrink: 0;\n      }\n      \n      .start-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: auto").concat(important, ";\n        height: auto").concat(important, ";\n      }\n      \n      .start-call-btn svg {\n        width: clamp(22px, 4vh, 32px);\n        height: clamp(22px, 4vh, 32px);\n      }\n      \n      .start-call-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);\n      }\n      \n      .start-call-btn:active {\n        transform: translateY(-1px);\n      }\n      .start-call-btn:disabled {\n        cursor: not-allowed").concat(important, ";\n        opacity: 0.6").concat(important, ";\n      }\n      \n      /* Connecting Spinner */\n      .connecting-spinner {\n        display: inline-block;\n        width: 16px;\n        height: 16px;\n        border: 2px solid rgba(255, 255, 255, 0.3);\n        border-top-color: ").concat(startCallBtnTextColor, ";\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n        margin-right: 8px;\n        vertical-align: middle;\n      }\n      \n      @keyframes spin {\n        to { transform: rotate(360deg); }\n      }\n\n      \n      /* Voice Transcript - Scales with container */\n      .voice-transcript {\n        background: ").concat(transcriptBg, ";\n        padding: clamp(6px, 1.5vh, 12px);\n        border-radius: 10px;\n        width: min(360px, calc(100% - 40px));\n        margin: 0;\n        min-height: clamp(80px, 15vh, 120px);\n        max-height: clamp(100px, 18vh, 140px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n        flex-shrink: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        display: flex;\n        flex-direction: column;\n        box-sizing: border-box;\n      }\n      \n      .transcript-label {\n        font-size: clamp(8px, 1.4vh, 11px);\n        color: ").concat(transcriptLabelColor, ";\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.3px;\n        margin-bottom: clamp(3px, 0.6vh, 6px);\n        flex-shrink: 0;\n        word-wrap: break-word;\n      }\n      \n      .transcript-text {\n        font-size: clamp(11px, 2vh, 15px);\n        color: ").concat(transcriptTextColor, ";\n        line-height: 1.4;\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        word-wrap: break-word;\n        overflow-wrap: break-word;\n      }\n      \n      .transcript-text.empty {\n        color: #cbd5e1;\n        font-style: italic;\n      }\n      \n      /* Voice Text Input Area - Type while on voice call */\n      .voice-text-input-area {\n        width: 100%;\n        padding: 14px 16px;\n        margin: 0;\n        flex-shrink: 0;\n        background: #ffffff;\n        border-top: 1px solid rgba(0, 0, 0, 0.06);\n        box-sizing: border-box;\n      }\n      \n      .voice-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        background: #f1f5f9;\n        border-radius: 12px;\n        padding: 4px 4px 4px 14px;\n        border: 1px solid transparent;\n        transition: all 0.2s ease;\n      }\n      \n      .voice-input-wrapper:focus-within {\n        background: #fff;\n        border-color: #a855f7;\n        box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);\n      }\n      \n      .voice-text-input {\n        flex: 1;\n        border: none;\n        outline: none;\n        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n        font-size: 14px;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        background: transparent;\n        padding: 10px 0;\n      }\n      \n      .voice-text-input::placeholder {\n        color: #94a3b8;\n      }\n      \n      .voice-send-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 38px;\n        height: 38px;\n        border-radius: 10px;\n        border: none;\n        background: ").concat(voiceSendButtonColor).concat(important, ";\n        color: #fff;\n        cursor: pointer;\n        transition: transform 0.2s ease;\n        flex-shrink: 0;\n      }\n      \n      .voice-send-btn:hover:not(:disabled) {\n        transform: scale(1.05);\n      }\n      \n      .voice-send-btn:active:not(:disabled) {\n        transform: scale(0.95);\n      }\n      \n      .voice-send-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        transform: none;\n      }\n      \n      .voice-send-btn svg {\n        width: 16px;\n        height: 16px;\n      }\n      \n      .voice-input-hint {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 5px;\n        margin-top: 10px;\n        font-size: 11px;\n        color: #64748b;\n        transition: color 0.2s ease;\n      }\n      \n      .voice-input-hint svg {\n        width: 12px;\n        height: 12px;\n        color: #10b981;\n      }\n      \n      /* Text input status states */\n      .voice-input-hint--sending {\n        color: #666;\n      }\n      \n      .voice-input-hint--success {\n        color: #28a745;\n      }\n      \n      .voice-input-hint--queued {\n        color: #ffc107;\n      }\n      \n      .voice-input-hint--error {\n        color: #dc3545;\n      }\n      \n      /* Disabled input styling */\n      .voice-text-input:disabled,\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5;\n        cursor: not-allowed;\n      }\n      \n      .voice-send-btn:disabled,\n      #mobileSendBtn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n      \n      /* Voice Controls - Scales with container */\n      .voice-controls {\n        display: flex;\n        gap: clamp(8px, 1.8vh, 14px);\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        margin: 0;\n        padding-top: 0;\n      }\n      \n      .voice-control-btn {\n        width: clamp(48px, 9vh, 72px)").concat(important, ";\n        height: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        aspect-ratio: 1").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        transition: all 0.2s;\n        position: relative").concat(important, ";\n        flex-shrink: 0;\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n      \n      .voice-control-btn svg {\n        width: 48%").concat(important, ";\n        height: 48%").concat(important, ";\n        min-width: 48%").concat(important, ";\n        min-height: 48%").concat(important, ";\n        max-width: 48%").concat(important, ";\n        max-height: 48%").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n        flex-shrink: 0").concat(important, ";\n      }\n      \n      .voice-control-btn.primary {\n        width: clamp(54px, 10vh, 80px)").concat(important, ";\n        height: clamp(54px, 10vh, 80px)").concat(important, ";\n        min-width: clamp(54px, 10vh, 80px)").concat(important, ";\n        min-height: clamp(54px, 10vh, 80px)").concat(important, ";\n        max-width: clamp(54px, 10vh, 80px)").concat(important, ";\n        max-height: clamp(54px, 10vh, 80px)").concat(important, ";\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)").concat(important, ";\n        color: white").concat(important, ";\n        box-shadow: 0 6px 18px rgba(102, 126, 234, 0.4);\n      }\n      \n      .voice-control-btn.primary:hover {\n        transform: scale(1.05);\n      }\n      \n      .voice-control-btn.primary.active {\n        background: ").concat(endCallBtnColor).concat(important, ";\n        animation: recordingPulse 1.5s ease-in-out infinite;\n      }\n      .voice-control-btn.primary.active svg {\n        fill: white").concat(important, ";\n      }\n      \n      /* More specific selectors for WordPress compatibility */\n      #endCallBtn.voice-control-btn.primary.active,\n      #muteBtn.voice-control-btn.secondary,\n      #speakerBtn.voice-control-btn.secondary {\n        border-radius: 50% !important;\n        width: clamp(48px, 9vh, 72px) !important;\n        height: clamp(48px, 9vh, 72px) !important;\n        min-width: clamp(48px, 9vh, 72px) !important;\n        min-height: clamp(48px, 9vh, 72px) !important;\n        max-width: clamp(48px, 9vh, 72px) !important;\n        max-height: clamp(48px, 9vh, 72px) !important;\n        aspect-ratio: 1 !important;\n        overflow: hidden !important;\n      }\n      \n      #endCallBtn.voice-control-btn.primary.active {\n        width: clamp(54px, 10vh, 80px) !important;\n        height: clamp(54px, 10vh, 80px) !important;\n        min-width: clamp(54px, 10vh, 80px) !important;\n        min-height: clamp(54px, 10vh, 80px) !important;\n        max-width: clamp(54px, 10vh, 80px) !important;\n        max-height: clamp(54px, 10vh, 80px) !important;\n      }\n      \n      \n      /* Microphone button specific background color */\n      #muteBtn.voice-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      /* Speaker button specific background color */\n      #speakerBtn.voice-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      \n      #endCallBtn.voice-control-btn.primary.active svg,\n      #muteBtn.voice-control-btn.secondary svg,\n      #speakerBtn.voice-control-btn.secondary svg {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n        width: 48% !important;\n        height: 48% !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        position: relative !important;\n      }\n      \n      @keyframes recordingPulse {\n        0%, 100% { \n          box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);\n        }\n        50% { \n          box-shadow: 0 6px 24px rgba(239, 68, 68, 0.7);\n        }\n      }\n      \n      .voice-control-btn.secondary {\n        background: ").concat(controlBtnColor).concat(important, ";\n        color: ").concat(controlBtnSecondaryColor).concat(important, ";\n        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\n        width: clamp(48px, 9vh, 72px)").concat(important, ";\n        height: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        min-height: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-width: clamp(48px, 9vh, 72px)").concat(important, ";\n        max-height: clamp(48px, 9vh, 72px)").concat(important, ";\n      }\n      \n      .voice-control-btn.secondary:hover {\n        background: #f8fafc").concat(important, ";\n        transform: scale(1.05);\n      }\n      \n      .voice-control-btn.secondary.muted {\n        background: #f3f4f6").concat(important, ";\n      }\n      \n      .voice-control-btn.secondary.muted .mute-icon {\n        stroke: #9ca3af !important;\n      }\n      \n      .voice-control-btn.secondary svg {\n        width: 48%").concat(important, ";\n        height: 48%").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n      \n      .voice-timer {\n        position: absolute;\n        bottom: clamp(-18px, -3vh, -24px);\n        font-size: clamp(9px, 1.6vh, 12px);\n        color: #64748b;\n        font-weight: 500;\n        white-space: nowrap;\n      }\n      \n      /* ===== DESKTOP VOICE SECTION - New Design ===== */\n      .desktop-voice-section {\n        padding: 16px 20px;\n        background: linear-gradient(180deg, #ffffff 0%, rgba(168, 85, 247, 0.04) 100%);\n        width: 100%;\n        flex-shrink: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n        box-sizing: border-box;\n        text-align: center;\n      }\n      \n      /* Ensure all children are centered */\n      .desktop-voice-section > * {\n        margin-left: auto;\n        margin-right: auto;\n      }\n      \n      .desktop-timer {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 6px !important;\n        padding: 5px 10px !important;\n        background: rgba(0, 0, 0, 0.05) !important;\n        border-radius: 20px !important;\n        font-family: 'JetBrains Mono', 'Courier New', monospace;\n        font-size: 11px !important;\n        color: #64748b !important;\n        margin: 0 auto !important;\n      }\n      \n      .desktop-timer .timer-dot {\n        display: block !important;\n        width: 5px").concat(important, ";\n        height: 5px").concat(important, ";\n        background: #ef4444").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: timerPulse 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      @keyframes timerPulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n      }\n      \n      .desktop-avatar-container {\n        margin-bottom: 12px;\n      }\n      \n      .desktop-avatar-large {\n        width: 80px !important;\n        height: 80px !important;\n        border-radius: 20px !important;\n        margin: 0 auto 12px !important;\n        box-shadow: 0 8px 24px rgba(168, 85, 247, 0.35) !important;\n        background: linear-gradient(135deg, ").concat(avatarBg, " 0%, ").concat(avatarActiveBg, " 100%) !important;\n      }\n      \n      .desktop-waveform {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 4px !important;\n        height: 36px !important;\n        width: 100% !important;\n      }\n      \n      .desktop-waveform-bar {\n        display: block !important;\n        width: 4px !important;\n        background: rgba(255, 255, 255, 0.9) !important;\n        border-radius: 2px !important;\n        animation: waveformAnimation 0.8s ease-in-out infinite !important;\n      }\n      \n      .desktop-waveform-bar[data-index=\"0\"] { height: 14px !important; animation-delay: 0s !important; }\n      .desktop-waveform-bar[data-index=\"1\"] { height: 26px !important; animation-delay: 0.1s !important; }\n      .desktop-waveform-bar[data-index=\"2\"] { height: 36px !important; animation-delay: 0.2s !important; }\n      .desktop-waveform-bar[data-index=\"3\"] { height: 22px !important; animation-delay: 0.3s !important; }\n      .desktop-waveform-bar[data-index=\"4\"] { height: 16px !important; animation-delay: 0.4s !important; }\n      \n      @keyframes waveformAnimation {\n        0%, 100% { transform: scaleY(0.5); }\n        50% { transform: scaleY(1); }\n      }\n      \n      .desktop-waveform.paused .desktop-waveform-bar {\n        animation-play-state: paused;\n      }\n\n      /* New main waveform (used in updated template) */\n      .desktop-main-waveform {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 3px !important;\n        height: 48px !important;\n        width: 100% !important;\n        max-width: 200px !important;\n        margin: 0 auto !important;\n        padding: 0 20px !important;\n      }\n\n      .desktop-main-waveform .waveform-bar {\n        display: block !important;\n        width: 3px !important;\n        background: #a855f7 !important;\n        border-radius: 2px !important;\n        height: 8px !important;\n        animation: waveformAnimation 0.8s ease-in-out infinite !important;\n      }\n\n      .desktop-main-waveform .waveform-bar:nth-child(1) { height: 12px !important; animation-delay: 0s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(2) { height: 20px !important; animation-delay: 0.05s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(3) { height: 28px !important; animation-delay: 0.1s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(4) { height: 36px !important; animation-delay: 0.15s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(5) { height: 44px !important; animation-delay: 0.2s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(6) { height: 50px !important; animation-delay: 0.25s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(7) { height: 54px !important; animation-delay: 0.3s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(8) { height: 56px !important; animation-delay: 0.35s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(9) { height: 54px !important; animation-delay: 0.4s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(10) { height: 50px !important; animation-delay: 0.45s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(11) { height: 44px !important; animation-delay: 0.5s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(12) { height: 36px !important; animation-delay: 0.55s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(13) { height: 28px !important; animation-delay: 0.6s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(14) { height: 20px !important; animation-delay: 0.65s !important; }\n      .desktop-main-waveform .waveform-bar:nth-child(15) { height: 12px !important; animation-delay: 0.7s !important; }\n\n      .desktop-status {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 5px !important;\n        font-size: 12px !important;\n        color: ").concat(statusTitleColor, ";\n        font-weight: 500;\n        width: 100%;\n        text-align: center;\n        margin: 0 auto;\n      }\n      \n      .desktop-status .status-dot {\n        display: block !important;\n        width: 5px !important;\n        height: 5px !important;\n        background: ").concat(statusDotColor, " !important;\n        border-radius: 50% !important;\n        animation: statusPulse 1.5s ease-in-out infinite !important;\n      }\n      \n      @keyframes statusPulse {\n        0%, 100% { transform: scale(1); opacity: 1; }\n        50% { transform: scale(1.15); opacity: 0.8; }\n      }\n      \n      .desktop-live-waveform {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        height: 48px;\n        margin-bottom: 20px;\n      }\n      \n      .desktop-live-bar {\ndisplay: block !important;\n                width: 3px;\n        background: linear-gradient(180deg, ").concat(avatarBg, ", ").concat(avatarActiveBg, ");\n        border-radius: 2px;\n        transition: height 0.1s ease;\n        height: 8px;\n      }\n      \n      .desktop-controls {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        margin: 0 auto;\n      }\n      \n      .desktop-control-btn {\n        width: 46px;\n        height: 46px;\n        border-radius: 50%;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      }\n      \n      .desktop-control-btn svg {\n        width: 20px;\n        height: 20px;\n      }\n      \n      .desktop-mic-icon,\n      .desktop-speaker-icon {\n        width: 20px !important;\n        height: 20px !important;\n        display: block;\n        flex-shrink: 0;\n      }\n      \n      .desktop-control-btn.secondary.muted .desktop-mic-icon,\n      .desktop-control-btn.secondary.muted .desktop-speaker-icon {\n        width: 20px !important;\n        height: 20px !important;\n      }\n      \n      \n      .desktop-control-btn.secondary:hover {\n        background: rgba(0, 0, 0, 0.1);\n        color: #1e293b;\n        transform: scale(1.05);\n      }\n      .desktop-control-btn.secondary.muted {\n        background: #f3f4f6;\n        color: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary.muted .desktop-mic-icon,\n      .desktop-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      /* Desktop speaker button background color */\n      #desktopSpeakerBtn.desktop-control-btn.secondary,\n      #desktopSpeakerBtnCompact.compact-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 46px;\n        height: 46px;\n        transform: translate(-50%, -50%);\n        z-index: 10;\n      }\n      .desktop-control-btn.danger {\n        width: 50px;\n        height: 50px;\n        background: ").concat(endCallBtnColor).concat(important, ";\n        color: #ffffff;\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);\n        overflow: visible;\n      }\n      \n      .desktop-control-btn.danger svg {\n        width: 20px;\n        height: 20px;\n        overflow: visible;\n      }\n      \n      .desktop-control-btn.danger:hover {\n        transform: scale(1.06);\n        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);\n      }\n      \n      .desktop-control-btn.danger:hover {\n        transform: scale(1.06);\n        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);\n      }\n      \n      \n      /* ===== COMPACT VOICE SECTION (Single-row layout) ===== */\n      .compact-voice-section {\n        padding: 10px 14px;\n        background: linear-gradient(180deg, #ffffff, rgba(168, 85, 247, 0.04));\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.06);\n        min-height: 62px;\n        flex-shrink: 0;\n      }\n      \n      .compact-left {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n      \n      .compact-avatar {\n        width: 42px;\n        height: 42px;\n        min-width: 42px;\n        min-height: 42px;\n        border-radius: 12px;\n        background: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: visible;\n        position: relative;\n      }\n      \n      /* Waveform container in compact avatar - ensure it's visible */\n      .compact-avatar .desktop-main-waveform {\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        gap: 2px !important;\n        height: 100% !important;\n        width: 100% !important;\n        padding: 4px !important;\n        transform: scale(0.75) !important;\n        transform-origin: center !important;\n      }\n      \n      /* Ensure waveform bars are visible and animated in compact mode */\n      .compact-avatar .desktop-main-waveform .waveform-bar {\n        display: block !important;\n        width: 2px !important;\n        min-width: 2px !important;\n        background: #a855f7 !important;\n        border-radius: 1px !important;\n        flex-shrink: 0 !important;\n        animation: waveformAnimation 0.8s ease-in-out infinite !important;\n      }\n      \n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(1) { height: 6px !important; animation-delay: 0s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(2) { height: 10px !important; animation-delay: 0.05s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(3) { height: 14px !important; animation-delay: 0.1s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(4) { height: 18px !important; animation-delay: 0.15s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(5) { height: 22px !important; animation-delay: 0.2s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(6) { height: 26px !important; animation-delay: 0.25s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(7) { height: 28px !important; animation-delay: 0.3s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(8) { height: 30px !important; animation-delay: 0.35s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(9) { height: 28px !important; animation-delay: 0.4s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(10) { height: 26px !important; animation-delay: 0.45s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(11) { height: 22px !important; animation-delay: 0.5s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(12) { height: 18px !important; animation-delay: 0.55s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(13) { height: 14px !important; animation-delay: 0.6s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(14) { height: 10px !important; animation-delay: 0.65s !important; }\n      .compact-avatar .desktop-main-waveform .waveform-bar:nth-child(15) { height: 6px !important; animation-delay: 0.7s !important; }\n\n      }\n      \n      .compact-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n      \n      .compact-timer {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        font-family: 'JetBrains Mono', 'Courier New', monospace;\n        font-size: 13px;\n        font-weight: 600;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n      }\n      \n      .compact-timer .timer-dot {\n        display: block !important;\n        width: 6px").concat(important, ";\n        height: 6px").concat(important, ";\n        background: #ef4444").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: timerPulse 1s ease-in-out infinite").concat(important, ";\n      }\n      \n      .compact-status {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        gap: 4px").concat(important, ";\n        font-size: 11px").concat(important, ";\n        color: ").concat(statusTitleColor).concat(important, ";\n      }\n      \n      .compact-status .status-dot {\n        display: block !important;\n        width: 5px").concat(important, ";\n        height: 5px").concat(important, ";\n        background: ").concat(statusDotColor).concat(important, ";\n        border-radius: 50%").concat(important, ";\n        animation: statusPulse 1.5s ease-in-out infinite").concat(important, ";\n      }\n      \n      @keyframes statusPulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.7; transform: scale(1.1); }\n      }\n      \n      .compact-controls {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n      \n      .compact-control-btn {\n        width: 36px;\n        height: 36px;\n        min-width: 36px;\n        min-height: 36px;\n        border-radius: 50%;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        padding: 0;\n        position: relative;\n      }\n      \n      .compact-control-btn svg {\n        width: 16px;\n        height: 16px;\n      }\n      \n      .compact-control-btn.secondary {\n        background: #f1f5f9;\n        color: #64748b;\n      }\n      \n      \n      /* Compact speaker button background color */\n      #desktopSpeakerBtnCompact.compact-control-btn.secondary {\n        background: ").concat(speakerButtonColor).concat(important, ";\n      }\n      /* Compact microphone button background color */\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .compact-control-btn.secondary:hover {\n        background: #e2e8f0;\n        color: #475569;\n      }\n      \n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.1);\n        color: #ef4444;\n      }\n      \n      \n      .compact-control-btn.secondary.muted .desktop-mic-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-icon {\n        stroke: #ef4444;\n      }\n      \n      .compact-control-btn.secondary.muted .desktop-mic-off-icon,\n      .compact-control-btn.secondary.muted .desktop-speaker-off-icon {\n        width: 46px;\n        height: 46px;\n      }\n\n      .compact-control-btn.danger {\n        width: 40px;\n        height: 40px;\n        min-width: 40px;\n        min-height: 40px;\n        background: ").concat(endCallBtnColor).concat(important, ";\n        color: white;\n        box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);\n      }\n      \n      .compact-control-btn.danger:hover {\n        transform: scale(1.05);\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);\n      }\n      \n      .compact-control-btn.danger svg {\n        width: 18px;\n        height: 18px;\n        overflow: visible;\n      }\n      \n/* ===== CONVERSATION PANEL ===== */\n      .desktop-conversation-panel {\n        border-top: 1px solid rgba(0, 0, 0, 0.06);\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        overflow: hidden;\n        flex: 1;\n      }\n      \n      .conversation-header {\n        padding: 10px 16px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        background: #fafafa;\n        cursor: pointer;\n        flex-shrink: 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.04);\n        transition: background 0.2s ease;\n      }\n      \n      .conversation-header:hover {\n        background: #f5f5f5;\n      }\n      \n      .conversation-label {\n        font-size: 11px;\n        font-weight: 600;\n        color: #64748b;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      \n      .conversation-toggle {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        font-size: 11px;\n        color: #94a3b8;\n        font-weight: 500;\n      }\n      \n      .conversation-toggle svg {\n        transition: transform 0.2s ease;\n      }\n      \n      .conversation-header.expanded .conversation-toggle svg {\n        transform: rotate(180deg);\n      }\n      \n      /* ===== COLLAPSED: Live Transcript Only (2 lines) ===== */\n      .live-transcript-collapsed {\n        padding: 12px 16px;\n        background: #fafafa;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        flex-shrink: 0;\n        min-height: 50px;\n      }\n      \n      .live-indicator {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        font-size: 9px;\n        font-weight: 700;\n        color: ").concat(liveIndicatorTextColor).concat(important, ";\n        text-transform: uppercase;\n        letter-spacing: 0.08em;\n      }\n      \n      .live-indicator .live-dot {\ndisplay: block !important;\n                height: 5px;\n        width: 5px;\n        background: ").concat(liveIndicatorDotColor).concat(important, ";\n        border-radius: 50%;\n        animation: statusPulse 1.5s ease-in-out infinite;\n      }\n      \n      .live-text-collapsed {\n        font-size: ").concat(liveTranscriptFontSize).concat(important, ";\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        line-height: 1.5;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n      \n      .live-text-collapsed.muted {\n        color: #94a3b8;\n        font-style: italic;\n      }\n      \n      .typing-cursor {\n        display: inline-block;\n        width: 2px;\n        height: 14px;\n        background: #a855f7;\n        margin-left: 2px;\n        animation: blink 1s step-end infinite;\n        vertical-align: middle;\n      }\n      \n      @keyframes blink {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0; }\n      }\n      \n      /* ===== EXPANDED: Full Conversation History ===== */\n      .conversation-history {\n        flex: 1;\n        flex-direction: column;\n        gap: 10px;\n        overflow-y: auto;\n        padding: 14px 16px;\n        min-height: 0;\n      }\n      .conversation-history.visible {\n        display: flex;\n      }\n\n      .conversation-messages {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n      }\n\n      /* Message Rows */\n      .message-row {\n        display: flex;\n        gap: 8px;\n        animation: msgIn 0.25s ease;\n      }\n      \n      @keyframes msgIn {\n        from { opacity: 0; transform: translateY(8px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n      @keyframes slideIn {\n        from { opacity: 0; transform: translateY(-10px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n      \n      @keyframes slideOut {\n        from { opacity: 1; transform: translateY(0); }\n        to { opacity: 0; transform: translateY(-10px); }\n      }\n      \n      .message-row.user {\n        flex-direction: row-reverse;\n      }\n      \n      .message-avatar {\n        width: 28px;\n        height: 28px;\n        border-radius: 8px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n      }\n\n      .message-avatar.assistant {\n        background: linear-gradient(135deg, #c084fc, #a855f7);\n      }\n\n      .message-avatar.assistant .orb {\n        width: 12px;\n        height: 12px;\n        background: rgba(255, 255, 255, 0.9);\n        border-radius: 50%;\n      }\n\n      .message-avatar.user {\n        background: linear-gradient(135deg, #64748b, #475569);\n        color: #fff;\n        font-size: 11px;\n        font-weight: 600;\n      }\n\n      .message-bubble {\n        max-width: 80%;\n        padding: 9px 13px;\n        border-radius: 12px;\n        font-size: 13px;\n        line-height: 1.5;\n      }\n      \n      .message-row.assistant .message-bubble {\n        background: #fff;\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        border: 1px solid rgba(0, 0, 0, 0.06);\n        border-bottom-left-radius: 4px;\n      }\n      \n      .message-row.user .message-bubble {\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n      \n      /* Live message at bottom of history */\n      .live-message-row {\n        display: flex;\n        gap: 8px;\n        padding-top: 8px;\n        border-top: 1px dashed rgba(0, 0, 0, 0.08);\n        margin-top: auto;\n      }\n      \n      .live-message-row .message-bubble {\n        background: #fff;\n        border: 1px solid rgba(16, 185, 129, 0.3);\n        color: ").concat(liveTranscriptTextColor).concat(important, ";\n        position: relative;\n        border-radius: 14px;\n        border-bottom-left-radius: 4px;\n      }\n      \n      .live-message-row .live-badge {\ndisplay: block !important;\n                position: absolute;\n        top: -8px;\n        left: 10px;\n        background: #10b981;\n        color: #fff;\n        font-size: 8px;\n        font-weight: 700;\n        padding: 2px 6px;\n        border-radius: 4px;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n      }\n      \n      /* Hide/show based on expanded state */\n      .desktop-conversation-panel.collapsed .conversation-history {\n        display: none;\n      }\n      \n      .desktop-conversation-panel.collapsed .live-transcript-collapsed {\n        display: flex;\n      }\n      \n      .desktop-conversation-panel.expanded .conversation-history {\n        display: flex;\n        max-height: 400px;\n      }\n      \n      .desktop-conversation-panel.expanded .live-transcript-collapsed {\n        display: none;\n      }\n      \n            /* ===== DARK MODE SUPPORT ===== */\n      @media (prefers-color-scheme: dark) {\n        .desktop-voice-section {\n          background: linear-gradient(180deg, #1e1e2e 0%, rgba(168, 85, 247, 0.08) 100%);\n        }\n\n        .desktop-timer {\n          color: #94a3b8;\n        }\n\n        .desktop-status {\n          color: #34d399;\n        }\n\n        .desktop-status .status-dot {\n      \n      .desktop-control-btn.secondary.muted {\n        background: rgba(255, 255, 255, 0.1);\n        color: #9ca3af;\n      \n      .compact-voice-section {\n        background: linear-gradient(180deg, #1e1e2e 0%, rgba(168, 85, 247, 0.08) 100%);\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n      }\n      \n      .compact-timer {\n        color: #e2e8f0;\n      }\n      \n      .compact-status {\n        color: #34d399;\n      }\n      \n      .compact-status .status-dot {\n        background: #34d399;\n      }\n      \n      .compact-control-btn.secondary {\n        background: rgba(255, 255, 255, 0.08);\n        color: #94a3b8;\n      }\n      \n      .compact-control-btn.secondary:hover {\n        background: rgba(255, 255, 255, 0.15);\n        color: #e2e8f0;\n      }\n      \n      .compact-control-btn.secondary.muted {\n        background: rgba(239, 68, 68, 0.2);\n        color: #f87171;\n      }\n\n      }\n      \n      .desktop-control-btn.secondary.muted svg {\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 20px;\n      }\n      \n      .desktop-control-btn.secondary.muted {\n        background: #f3f4f6;\n        color: #9ca3af;\n      }\n      \n      .desktop-control-btn.secondary.muted svg {\n      \n      .desktop-control-btn.secondary {\n        position: relative;\n      }\n      \n      /* Desktop microphone button background color */\n      #desktopMuteBtn.desktop-control-btn.secondary,\n      #desktopMuteBtnCompact.compact-control-btn.secondary {\n        background: ").concat(micButtonColor).concat(important, ";\n      }\n      \n      .desktop-mic-off-icon,\n      .desktop-speaker-off-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 20px;\n        height: 20px;\n      }\n        stroke: #9ca3af;\n      }\n        stroke: #9ca3af;\n      }\n          background: #34d399;\n        }\n\n        .desktop-control-btn.secondary {\n          background: rgba(255, 255, 255, 0.08);\n          color: #94a3b8;\n        }\n\n        .desktop-control-btn.secondary:hover {\n          background: rgba(255, 255, 255, 0.15);\n          color: #e2e8f0;\n        }\n\n        .desktop-conversation-panel {\n          border-top: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .conversation-header {\n          background: #1a1a2e;\n        }\n\n        .conversation-header:hover {\n          background: #252540;\n        }\n\n        .conversation-label {\n          color: #94a3b8;\n        }\n\n        .conversation-toggle {\n          color: #64748b;\n        }\n\n        .live-transcript-preview {\n          background: #1a1a2e;\n        }\n        .live-indicator {\n          color: ").concat(liveIndicatorTextColor).concat(important, ";\n        }\n        .live-indicator .live-dot {\n          background: ").concat(liveIndicatorDotColor).concat(important, ";\n        }\n\n        .live-text {\n          color: #e2e8f0;\n        }\n\n        .live-text.muted {\n          color: #64748b;\n        }\n\n        .conversation-history {\n          background: #1a1a2e;\n        }\n\n        .conversation-msg.assistant .conversation-msg-bubble {\n          background: #252540;\n          color: #e2e8f0;\n          border: 1px solid rgba(255, 255, 255, 0.08);\n        }\n\n        .voice-text-input-area {\n          background: #1a1a2e;\n        }\n\n        .voice-text-input {\n          background: #252540 !important;\n          color: #e2e8f0 !important;\n          border-color: rgba(255, 255, 255, 0.1) !important;\n        }\n\n        .voice-text-input::placeholder {\n          color: #64748b !important;\n        }\n\n        .voice-text-input:focus {\n          border-color: ").concat(avatarBg, " !important;\n          box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;\n        }\n\n        .voice-input-hint {\n          color: #64748b !important;\n        }\n\n        .voice-send-btn {\n          background: ").concat(voiceSendButtonColor, " !important;\n        }\n\n        .voice-send-btn:disabled {\n          background: #374151 !important;\n          color: #4b5563 !important;\n        }\n      }\n\n      /* Mobile optimization */\n      @media (max-width: 768px) {\n        .voice-interface {\n          padding: 6px 10px;\n        }\n      }\n      \n      @media (max-width: 480px) {\n        .voice-interface {\n          padding: 5px 8px;\n        }\n      }\n      \n      /* Mobile Voice Call UI - Shared styles (also used in generateMobileCSS) */\n      ").concat(this._getSharedMobileCSS(important), "\n\n    ");
     }
 
     /**
@@ -27240,7 +27240,7 @@ var Styles = /*#__PURE__*/function () {
   }, {
     key: "_getSharedMobileCSS",
     value: function _getSharedMobileCSS(important) {
-      return "\n      .mobile-duration-dot {\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background-color: #ef4444;\n        animation: mobilePulse 1.5s ease-in-out infinite;\n      }\n\n      @keyframes mobilePulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.5; transform: scale(0.95); }\n      }\n\n      .mobile-voice-bar {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        padding: 14px;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);\n        border-radius: 24px 24px 0 0;\n        box-shadow: 0 -8px 32px rgba(124, 58, 237, 0.5), 0 -2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);\n        width: 100%;\n        max-width: 100%;\n        pointer-events: auto;\n      }\n\n      .mobile-top-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        position: relative;\n      }\n\n      .mobile-status-indicator {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        min-width: 85px;\n      }\n\n      .mobile-status-dot {\n        width: 7px;\n        height: 7px;\n        border-radius: 50%;\n        background-color: #22c55e;\n        box-shadow: 0 0 8px #22c55e;\n        transition: all 0.3s ease;\n      }\n\n      .mobile-status-text {\n        font-size: 11px;\n        font-weight: 700;\n        color: rgba(255,255,255,0.95);\n        text-transform: uppercase;\n        letter-spacing: 0.3px;\n      }\n\n      .mobile-waveform-center {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        height: 24px;\n      }\n\n      .mobile-waveform-bar {\n        width: 4px;\n        height: 4px;\n        background-color: #fff;\n        border-radius: 2px;\n        transition: height 0.15s ease;\n        box-shadow: 0 0 8px rgba(255,255,255,0.5);\n      }\n\n      .mobile-controls {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .mobile-control-btn {\n        display: flex".concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        min-width: 32px").concat(important, ";\n        min-height: 32px").concat(important, ";\n        max-width: 32px").concat(important, ";\n        max-height: 32px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: all 0.2s ease;\n        background-color: rgba(255,255,255,0.15)").concat(important, ";\n        position: relative").concat(important, ";\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-control-btn:hover {\n        background-color: rgba(255,255,255,0.25)").concat(important, ";\n      }\n\n      .mobile-control-btn.muted {\n        background-color: rgba(239, 68, 68, 0.3)").concat(important, ";\n      }\n\n      .mobile-control-btn svg {\n        position: absolute").concat(important, ";\n        top: 50%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n\n      .mobile-mic-off-icon,\n      .mobile-speaker-off-icon {\n        display: none !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-icon,\n      .mobile-control-btn.muted .mobile-speaker-icon {\n        display: none !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-off-icon,\n      .mobile-control-btn.muted .mobile-speaker-off-icon {\n        display: block !important;\n      }\n\n      .mobile-end-call-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 36px").concat(important, ";\n        height: 36px").concat(important, ";\n        min-width: 36px").concat(important, ";\n        min-height: 36px").concat(important, ";\n        max-width: 36px").concat(important, ";\n        max-height: 36px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        background-color: #ef4444").concat(important, ";\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);\n        transition: all 0.2s ease;\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-end-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n\n      /* ID-specific selectors for WordPress compatibility */\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn,\n      #mobileEndCallBtn.mobile-end-call-btn {\n        border-radius: 50% !important;\n        overflow: hidden !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn {\n        width: 32px !important;\n        height: 32px !important;\n        min-width: 32px !important;\n        min-height: 32px !important;\n        max-width: 32px !important;\n        max-height: 32px !important;\n      }\n\n      #mobileEndCallBtn.mobile-end-call-btn {\n        width: 36px !important;\n        height: 36px !important;\n        min-width: 36px !important;\n        min-height: 36px !important;\n        max-width: 36px !important;\n        max-height: 36px !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn svg,\n      #mobileSpeakerBtn.mobile-control-btn svg,\n      #mobileEndCallBtn.mobile-end-call-btn svg {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n        width: 15px !important;\n        height: 15px !important;\n        margin: 0 !important;\n        padding: 0 !important;\n      }\n\n      .mobile-end-call-btn:hover {\n        transform: scale(1.05);\n      }\n\n      .mobile-transcript-row {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        padding: 10px 12px;\n        background: rgba(255,255,255,0.18);\n        border-radius: 14px;\n        border: none;\n        cursor: pointer;\n        text-align: left;\n        backdrop-filter: blur(4px);\n        transition: background 0.2s ease;\n      }\n\n      .mobile-transcript-row:hover {\n        background: rgba(255,255,255,0.25);\n      }\n\n      .mobile-transcript-text {\n        margin: 0;\n        font-size: 13px;\n        color: #fff;\n        line-height: 1.4;\n        font-weight: 500;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      .mobile-transcript-footer {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .mobile-expand-hint {\n        font-size: 10px;\n        color: rgba(255,255,255,0.6);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        font-weight: 600;\n      }\n\n      .mobile-transcript-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: rgba(0,0,0,0.6);\n        display: flex;\n        align-items: flex-end;\n        padding: 12px;\n        z-index: 100000;\n        pointer-events: auto;\n      }\n\n      .mobile-expanded-transcript {\n        width: 100%;\n        max-height: 75%;\n        background: #fff;\n        border-radius: 24px 24px 16px 16px;\n        overflow: hidden;\n        box-shadow: 0 -8px 40px rgba(0,0,0,0.3);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .mobile-transcript-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 14px 16px;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        flex-shrink: 0;\n      }\n\n      .mobile-header-left {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .mobile-header-status {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .mobile-header-status-dot {\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background-color: #22c55e;\n        box-shadow: 0 0 6px #22c55e;\n      }\n\n      .mobile-header-status-text {\n        font-size: 10px;\n        font-weight: 700;\n        color: rgba(255,255,255,0.9);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n      }\n\n      .mobile-header-duration {\n        font-size: 10px;\n        font-weight: 600;\n        color: rgba(255,255,255,0.7);\n        margin-left: 8px;\n      }\n\n      .mobile-transcript-label {\n        font-size: 11px;\n        font-weight: 800;\n        color: rgba(255,255,255,0.7);\n        letter-spacing: 1px;\n      }\n\n      .mobile-close-transcript-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        border: none;\n        background: rgba(255,255,255,0.2);\n        color: #fff;\n        cursor: pointer;\n      }\n\n      .mobile-close-transcript-btn:hover {\n        background: rgba(255,255,255,0.3);\n      }\n\n      .mobile-messages-container {\n        flex: 1;\n        padding: 16px;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .mobile-message-bubble {\n        max-width: 85%;\n        padding: 12px 16px;\n        border-radius: 18px;\n        font-size: 14px;\n        line-height: 1.5;\n        word-wrap: break-word;\n      }\n\n      .mobile-message-bubble.assistant {\n        align-self: flex-start;\n        background-color: #f3f4f6;\n        color: #374151;\n        border-bottom-left-radius: 4px;\n      }\n\n      .mobile-message-bubble.user {\n        align-self: flex-end;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n\n      .mobile-input-area {\n        padding: 12px 16px 16px;\n        border-top: 1px solid #e5e7eb;\n        background: #f9fafb;\n        flex-shrink: 0;\n      }\n\n      .mobile-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 4px 4px 4px 16px;\n        background: #fff;\n        border-radius: 24px;\n        border: 2px solid #e5e7eb;\n      }\n\n      .mobile-text-input {\n        flex: 1;\n        border: none;\n        outline: none;\n        font-size: 14px;\n        color: #374151;\n        background: transparent;\n        padding: 10px 0;\n      }\n\n      .mobile-text-input::placeholder {\n        color: #9ca3af;\n      }\n\n      .mobile-send-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        border: none;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        cursor: pointer;\n        transition: all 0.2s ease;\n      }\n\n      .mobile-send-btn:hover:not(:disabled) {\n        transform: scale(1.05);\n      }\n\n      .mobile-send-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      .mobile-input-hint {\n        margin: 8px 0 0;\n        font-size: 11px;\n        color: #9ca3af;\n        text-align: center;\n        transition: color 0.2s ease;\n      }\n\n      /* Mobile text input status states */\n      .mobile-input-hint--sending {\n        color: #666;\n      }\n\n      .mobile-input-hint--success {\n        color: #28a745;\n      }\n\n      .mobile-input-hint--queued {\n        color: #ffc107;\n      }\n\n      .mobile-input-hint--error {\n        color: #dc3545;\n      }\n\n      /* Disabled mobile input styling */\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5;\n        cursor: not-allowed;\n      }\n\n      #mobileSendBtn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    ");
+      return "\n      .mobile-duration-dot {\ndisplay: block !important;\n                width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background-color: #ef4444;\n        animation: mobilePulse 1.5s ease-in-out infinite;\n      }\n\n      @keyframes mobilePulse {\n        0%, 100% { opacity: 1; transform: scale(1); }\n        50% { opacity: 0.5; transform: scale(0.95); }\n      }\n\n      .mobile-voice-bar {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        padding: 14px;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);\n        border-radius: 24px 24px 0 0;\n        box-shadow: 0 -8px 32px rgba(124, 58, 237, 0.5), 0 -2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);\n        width: 100%;\n        max-width: 100%;\n        pointer-events: auto;\n      }\n\n      .mobile-top-row {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        position: relative;\n      }\n\n      .mobile-status-indicator {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        min-width: 85px;\n      }\n\n      .mobile-status-dot {\ndisplay: block !important;\n                width: 7px;\n        height: 7px;\n        border-radius: 50%;\n        background-color: #22c55e;\n        box-shadow: 0 0 8px #22c55e;\n        transition: all 0.3s ease;\n      }\n\n      .mobile-status-text {\n        font-size: 11px;\n        font-weight: 700;\n        color: rgba(255,255,255,0.95);\n        text-transform: uppercase;\n        letter-spacing: 0.3px;\n      }\n\n      .mobile-waveform-center {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 3px;\n        height: 24px;\n      }\n\n      .mobile-waveform-bar {\ndisplay: block !important;\n                width: 4px;\n        height: 4px;\n        background-color: #fff;\n        border-radius: 2px;\n        transition: height 0.15s ease;\n        box-shadow: 0 0 8px rgba(255,255,255,0.5);\n      }\n\n      .mobile-controls {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .mobile-control-btn {\n        display: flex".concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 32px").concat(important, ";\n        height: 32px").concat(important, ";\n        min-width: 32px").concat(important, ";\n        min-height: 32px").concat(important, ";\n        max-width: 32px").concat(important, ";\n        max-height: 32px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        transition: all 0.2s ease;\n        background-color: rgba(255,255,255,0.15)").concat(important, ";\n        position: relative").concat(important, ";\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-control-btn:hover {\n        background-color: rgba(255,255,255,0.25)").concat(important, ";\n      }\n\n      .mobile-control-btn.muted {\n        background-color: rgba(239, 68, 68, 0.3)").concat(important, ";\n      }\n\n      .mobile-control-btn svg {\n        position: absolute").concat(important, ";\n        top: 50%").concat(important, ";\n        left: 50%").concat(important, ";\n        transform: translate(-50%, -50%)").concat(important, ";\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n      }\n\n      .mobile-mic-off-icon,\n      .mobile-speaker-off-icon {\n        display: none !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-icon,\n      .mobile-control-btn.muted .mobile-speaker-icon {\n        display: none !important;\n      }\n\n      .mobile-control-btn.muted .mobile-mic-off-icon,\n      .mobile-control-btn.muted .mobile-speaker-off-icon {\n        display: block !important;\n      }\n\n      .mobile-end-call-btn {\n        display: flex").concat(important, ";\n        align-items: center").concat(important, ";\n        justify-content: center").concat(important, ";\n        width: 36px").concat(important, ";\n        height: 36px").concat(important, ";\n        min-width: 36px").concat(important, ";\n        min-height: 36px").concat(important, ";\n        max-width: 36px").concat(important, ";\n        max-height: 36px").concat(important, ";\n        border-radius: 50%").concat(important, ";\n        border: none").concat(important, ";\n        cursor: pointer").concat(important, ";\n        background-color: #ef4444").concat(important, ";\n        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);\n        transition: all 0.2s ease;\n        overflow: hidden").concat(important, ";\n        padding: 0").concat(important, ";\n        margin: 0").concat(important, ";\n        box-sizing: border-box").concat(important, ";\n      }\n\n      .mobile-end-call-btn svg {\n        display: block").concat(important, ";\n        visibility: visible").concat(important, ";\n        opacity: 1").concat(important, ";\n        width: 15px").concat(important, ";\n        height: 15px").concat(important, ";\n        margin: 0").concat(important, ";\n        padding: 0").concat(important, ";\n        position: relative").concat(important, ";\n      }\n\n      /* ID-specific selectors for WordPress compatibility */\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn,\n      #mobileEndCallBtn.mobile-end-call-btn {\n        border-radius: 50% !important;\n        overflow: hidden !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn,\n      #mobileSpeakerBtn.mobile-control-btn {\n        width: 32px !important;\n        height: 32px !important;\n        min-width: 32px !important;\n        min-height: 32px !important;\n        max-width: 32px !important;\n        max-height: 32px !important;\n      }\n\n      #mobileEndCallBtn.mobile-end-call-btn {\n        width: 36px !important;\n        height: 36px !important;\n        min-width: 36px !important;\n        min-height: 36px !important;\n        max-width: 36px !important;\n        max-height: 36px !important;\n      }\n\n      #mobileMuteBtn.mobile-control-btn svg,\n      #mobileSpeakerBtn.mobile-control-btn svg,\n      #mobileEndCallBtn.mobile-end-call-btn svg {\n        display: block !important;\n        visibility: visible !important;\n        opacity: 1 !important;\n        width: 15px !important;\n        height: 15px !important;\n        margin: 0 !important;\n        padding: 0 !important;\n      }\n\n      .mobile-end-call-btn:hover {\n        transform: scale(1.05);\n      }\n\n      .mobile-transcript-row {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        padding: 10px 12px;\n        background: rgba(255,255,255,0.18);\n        border-radius: 14px;\n        border: none;\n        cursor: pointer;\n        text-align: left;\n        backdrop-filter: blur(4px);\n        transition: background 0.2s ease;\n      }\n\n      .mobile-transcript-row:hover {\n        background: rgba(255,255,255,0.25);\n      }\n\n      .mobile-transcript-text {\n        margin: 0;\n        font-size: 13px;\n        color: #fff;\n        line-height: 1.4;\n        font-weight: 500;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      .mobile-transcript-footer {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      .mobile-expand-hint {\n        font-size: 10px;\n        color: rgba(255,255,255,0.6);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        font-weight: 600;\n      }\n\n      .mobile-transcript-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: rgba(0,0,0,0.6);\n        display: flex;\n        align-items: flex-end;\n        padding: 12px;\n        z-index: 100000;\n        pointer-events: auto;\n      }\n\n      .mobile-expanded-transcript {\n        width: 100%;\n        max-height: 75%;\n        background: #fff;\n        border-radius: 24px 24px 16px 16px;\n        overflow: hidden;\n        box-shadow: 0 -8px 40px rgba(0,0,0,0.3);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .mobile-transcript-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 14px 16px;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        flex-shrink: 0;\n      }\n\n      .mobile-header-left {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .mobile-header-status {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .mobile-header-status-dot {\ndisplay: block !important;\n                width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background-color: #22c55e;\n        box-shadow: 0 0 6px #22c55e;\n      }\n\n      .mobile-header-status-text {\n        font-size: 10px;\n        font-weight: 700;\n        color: rgba(255,255,255,0.9);\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n      }\n\n      .mobile-header-duration {\n        font-size: 10px;\n        font-weight: 600;\n        color: rgba(255,255,255,0.7);\n        margin-left: 8px;\n      }\n\n      .mobile-transcript-label {\n        font-size: 11px;\n        font-weight: 800;\n        color: rgba(255,255,255,0.7);\n        letter-spacing: 1px;\n      }\n\n      .mobile-close-transcript-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        border: none;\n        background: rgba(255,255,255,0.2);\n        color: #fff;\n        cursor: pointer;\n      }\n\n      .mobile-close-transcript-btn:hover {\n        background: rgba(255,255,255,0.3);\n      }\n\n      .mobile-messages-container {\n        flex: 1;\n        padding: 16px;\n        overflow-y: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .mobile-message-bubble {\n        max-width: 85%;\n        padding: 12px 16px;\n        border-radius: 18px;\n        font-size: 14px;\n        line-height: 1.5;\n        word-wrap: break-word;\n      }\n\n      .mobile-message-bubble.assistant {\n        align-self: flex-start;\n        background-color: #f3f4f6;\n        color: #374151;\n        border-bottom-left-radius: 4px;\n      }\n\n      .mobile-message-bubble.user {\n        align-self: flex-end;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n\n      .mobile-input-area {\n        padding: 12px 16px 16px;\n        border-top: 1px solid #e5e7eb;\n        background: #f9fafb;\n        flex-shrink: 0;\n      }\n\n      .mobile-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 4px 4px 4px 16px;\n        background: #fff;\n        border-radius: 24px;\n        border: 2px solid #e5e7eb;\n      }\n\n      .mobile-text-input {\n        flex: 1;\n        border: none;\n        outline: none;\n        font-size: 14px;\n        color: #374151;\n        background: transparent;\n        padding: 10px 0;\n      }\n\n      .mobile-text-input::placeholder {\n        color: #9ca3af;\n      }\n\n      .mobile-send-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        border: none;\n        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);\n        color: #fff;\n        cursor: pointer;\n        transition: all 0.2s ease;\n      }\n\n      .mobile-send-btn:hover:not(:disabled) {\n        transform: scale(1.05);\n      }\n\n      .mobile-send-btn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      .mobile-input-hint {\n        margin: 8px 0 0;\n        font-size: 11px;\n        color: #9ca3af;\n        text-align: center;\n        transition: color 0.2s ease;\n      }\n\n      /* Mobile text input status states */\n      .mobile-input-hint--sending {\n        color: #666;\n      }\n\n      .mobile-input-hint--success {\n        color: #28a745;\n      }\n\n      .mobile-input-hint--queued {\n        color: #ffc107;\n      }\n\n      .mobile-input-hint--error {\n        color: #dc3545;\n      }\n\n      /* Disabled mobile input styling */\n      #mobileTextInput:disabled {\n        background-color: #f5f5f5;\n        cursor: not-allowed;\n      }\n\n      #mobileSendBtn:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    ");
     }
 
     /**