/* =========================================================
   Matrix Ultra PRO - Fluid Physics & Voice Commerce
   ========================================================= */

/* --- 1. Floating Trigger Button --- */
#matrix-trigger-wrap { 
    position: fixed !important; 
    z-index: 999999 !important; 
    display: flex; 
    align-items: center !important; 
    flex-direction: row-reverse !important; 
    gap: 12px !important; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
    cursor: pointer !important; 
}

.matrix-trigger-text { 
    background-color: var(--mx-trigger-text-bg, #ffffff) !important; 
    color: var(--mx-trigger-text-color, #2d3748) !important; 
    font-size: var(--mx-trigger-text-size, 14px) !important; 
    padding: 10px 18px !important; 
    border-radius: 20px !important; 
    font-family: system-ui, sans-serif !important; 
    font-weight: 800 !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; 
    border: 1px solid rgba(0,0,0,0.05) !important; 
    white-space: nowrap !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    height: fit-content !important; 
    line-height: 1.2 !important; 
    box-sizing: border-box !important; 
    animation: mxBounceIn 0.6s ease !important; 
}

#matrix-trigger { 
    width: var(--mx-trigger-size, 64px) !important; 
    height: var(--mx-trigger-size, 64px) !important; 
    border-radius: 50% !important; 
    background-color: var(--matrix-primary) !important; 
    color: #fff !important; 
    border: none !important; 
    cursor: pointer !important; 
    box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    transition: all 0.3s ease !important; 
    position: relative !important; 
    padding: 0 !important; 
    overflow: hidden !important; 
}

#matrix-trigger img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    border-radius: 50% !important; 
    display: block !important; 
    aspect-ratio: 1/1 !important; 
}

#matrix-trigger:hover { 
    transform: scale(1.08) !important; 
}

.matrix-trigger-online-badge { 
    position: absolute !important; 
    top: 0 !important; 
    right: 0 !important; 
    width: 14px !important; 
    height: 14px !important; 
    background-color: #10b981 !important; 
    border: 2px solid #fff !important; 
    border-radius: 50% !important; 
    z-index: 2 !important; 
    animation: mxPulseBadge 2s infinite !important; 
}

@keyframes mxPulseBadge { 
    0% { box-shadow: 0 0 0 0 var(--matrix-pulse); } 
    70% { box-shadow: 0 0 0 6px rgba(0,0,0,0); } 
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } 
}

/* --- 2. Main Chat Window --- */
#matrix-window { 
    position: fixed !important; 
    bottom: calc(var(--mx-btn-bottom, 110px) + var(--mx-trigger-size, 64px) + 20px) !important; 
    right: var(--mx-btn-right, 30px) !important; 
    width: 380px !important; 
    height: 600px !important; 
    max-height: 80vh !important; 
    background: var(--matrix-chat-bg) !important; 
    border: 1px solid var(--matrix-border) !important; 
    border-radius: 16px !important; 
    box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important; 
    z-index: 999999 !important; 
    display: flex; 
    flex-direction: column !important; 
    font-family: system-ui, sans-serif !important; 
    overflow: hidden !important; 
    opacity: 0 !important; 
    visibility: hidden !important; 
    pointer-events: none !important; 
    transform: translateY(40px) scale(0.9) !important; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
    direction: rtl !important; 
    will-change: transform, opacity;
}

#matrix-window.matrix-chat-active { 
    opacity: 1 !important; 
    visibility: visible !important; 
    pointer-events: auto !important; 
    transform: translateY(0) scale(1) !important; 
}

/* --- 3. Chat Header --- */
#matrix-header { 
    background: var(--matrix-primary) !important; 
    padding: 15px 20px !important; 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    color: #fff !important; 
    border-top-left-radius: 16px !important; 
    border-top-right-radius: 16px !important; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; 
    z-index: 10 !important; 
}

.matrix-header-title { display: flex !important; align-items: center !important; gap: 12px !important; }

.matrix-avatar-img { 
    width: 40px !important; 
    height: 40px !important; 
    min-width: 40px !important; 
    min-height: 40px !important; 
    flex-shrink: 0 !important; 
    border-radius: 50% !important; 
    object-fit: cover !important; 
    border: 2px solid rgba(255,255,255,0.3) !important; 
    display: block !important; 
    aspect-ratio: 1/1 !important; 
}

.matrix-avatar-fallback { 
    width: 40px !important; 
    height: 40px !important; 
    min-width: 40px !important; 
    min-height: 40px !important; 
    flex-shrink: 0 !important; 
    border-radius: 50% !important; 
    background: rgba(255,255,255,0.2) !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    font-weight: 900 !important; 
    font-size: 18px !important; 
    border: 2px solid rgba(255,255,255,0.3) !important; 
    aspect-ratio: 1/1 !important; 
}

.matrix-header-text-wrap { display: flex !important; flex-direction: column !important; }
.matrix-bot-name { font-weight: 800 !important; font-size: 16px !important; line-height: 1.1 !important; }
.matrix-status { font-size: 11px !important; opacity: 0.9 !important; display: flex !important; align-items: center !important; gap: 4px !important; margin-top: 2px !important; }
.matrix-online-dot { width: 8px !important; height: 8px !important; background: #10b981 !important; border-radius: 50% !important; display: inline-block !important; }
.matrix-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; }

.mx-header-btn { 
    background: rgba(255,255,255,0.15) !important; 
    border: none !important; 
    color: #fff !important; 
    width: 32px !important; 
    height: 32px !important; 
    border-radius: 50% !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    font-size: 14px !important; 
    transition: all 0.2s ease !important; 
}

.mx-header-btn:hover { 
    background: rgba(255,255,255,0.3) !important; 
    transform: scale(1.1) !important; 
}

/* --- 4. Smart Toolbar --- */
.mx-smart-toolbar { 
    background: #fff !important; 
    border-bottom: 1px solid rgba(0,0,0,0.05) !important; 
    padding: 8px 15px !important; 
    display: flex !important; 
    gap: 10px !important; 
    justify-content: center !important; 
}

.mx-tool-btn { 
    flex: 1 !important; 
    background: #f7fafc !important; 
    border: 1px solid #e2e8f0 !important; 
    padding: 8px !important; 
    border-radius: 8px !important; 
    color: #4a5568 !important; 
    font-size: 12px !important; 
    font-weight: 800 !important; 
    font-family: system-ui, sans-serif !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 6px !important; 
    transition: all 0.2s ease !important; 
}

.mx-tool-btn:hover { 
    background: #edf2f7 !important; 
    border-color: #cbd5e0 !important; 
    color: var(--matrix-primary) !important; 
}

/* --- 5. Logs & Messages Area --- */
#matrix-logs { 
    flex: 1 !important; 
    padding: 20px !important; 
    overflow-y: auto !important; 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 15px !important; 
    scroll-behavior: smooth !important; 
}
#matrix-logs::-webkit-scrollbar { width: 6px; }
#matrix-logs::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 10px; }

@keyframes mxSpringUp {
    0% { transform: translateY(40px) scale(0.95); opacity: 0; }
    50% { transform: translateY(-3px) scale(1.01); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.log-user, .log-ai, .mx-spring-item, .mx-spring-card { 
    opacity: 0; 
    animation: mxSpringUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; 
}
.mx-spring-card:nth-child(1) { animation-delay: 0.1s !important; }
.mx-spring-card:nth-child(2) { animation-delay: 0.2s !important; }
.mx-spring-card:nth-child(3) { animation-delay: 0.3s !important; }

.log-user { 
    align-self: flex-start !important; 
    background: var(--matrix-user-bg) !important; 
    color: var(--matrix-user-text) !important; 
    padding: 12px 16px !important; 
    border-radius: 16px 16px 0 16px !important; 
    max-width: 85% !important; 
    font-size: 14px !important; 
    line-height: 1.4 !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; 
}

.log-ai { 
    align-self: flex-end !important; 
    background: var(--matrix-bot-bg) !important; 
    color: var(--matrix-bot-text) !important; 
    padding: 14px 18px !important; 
    border-radius: 16px 16px 16px 0 !important; 
    max-width: 88% !important; 
    font-size: 14px !important; 
    line-height: 1.5 !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; 
    border: 1px solid rgba(0,0,0,0.02) !important; 
}

/* --- 6. Quick Actions / Welcome Card --- */
.matrix-welcome-card { 
    align-self: center !important; 
    max-width: 100% !important; 
    width: 100% !important; 
    text-align: center !important; 
    background: #fff !important; 
    padding: 20px !important; 
}
.matrix-welcome-card h3 { margin: 0 0 10px 0 !important; color: var(--matrix-primary) !important; font-size: 18px !important; }
.matrix-welcome-card p { margin: 0 0 20px 0 !important; font-size: 14px !important; color: #4a5568 !important; }
.matrix-quick-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }
.matrix-qr-btn { 
    background: #f7fafc !important; 
    border: 1px solid #e2e8f0 !important; 
    color: var(--matrix-primary) !important; 
    padding: 10px 16px !important; 
    border-radius: 20px !important; 
    font-size: 13px !important; 
    font-weight: 800 !important; 
    cursor: pointer !important; 
    font-family: inherit !important; 
    transition: all 0.2s ease !important; 
}
.matrix-qr-btn:hover { background: var(--matrix-primary) !important; color: #fff !important; border-color: var(--matrix-primary) !important; }

/* --- 7. Input Area & Buttons --- */
#matrix-input-wrap { 
    padding: 15px !important; 
    background: #fff !important; 
    border-top: 1px solid rgba(0,0,0,0.05) !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important; 
    z-index: 5 !important; 
}

#matrix-input { 
    flex: 1 !important; 
    background: #f7fafc !important; 
    border: 1px solid #e2e8f0 !important; 
    padding: 12px 15px !important; 
    border-radius: 25px !important; 
    font-family: system-ui, sans-serif !important; 
    font-size: 14px !important; 
    outline: none !important; 
    transition: all 0.2s ease !important; 
}

#matrix-input:focus { 
    background: #fff !important; 
    border-color: var(--matrix-primary) !important; 
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.1) !important; 
}

.matrix-send-btn { 
    background: var(--matrix-primary) !important; 
    color: #fff !important; 
    border: none !important; 
    width: 42px !important; 
    height: 42px !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    cursor: pointer !important; 
    font-size: 18px !important; 
    transition: all 0.2s ease !important; 
}
.matrix-send-btn:hover { transform: translateX(-3px) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; }

.matrix-mic-btn { 
    background: #edf2f7 !important; 
    color: #2d3748 !important; 
    border: none !important; 
    width: 42px !important; 
    height: 42px !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    cursor: pointer !important; 
    font-size: 18px !important; 
    transition: all 0.2s ease !important; 
    position: relative !important; 
    user-select: none !important; 
    -webkit-user-select: none !important; 
}
.matrix-mic-btn.recording { background: #e53e3e !important; color: #fff !important; animation: mxPulseRecord 1.5s infinite !important; }

/* --- 8. AI Audio Visualizer --- */
@keyframes mxBounceIn { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes mxPulseRecord { 0% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7); transform: scale(1); } 50% { box-shadow: 0 0 0 10px rgba(229, 62, 62, 0); transform: scale(1.1); } 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); transform: scale(1); } }
.mx-avatar-speaking { animation: mxSpeaking 1s infinite alternate !important; border-color: var(--matrix-primary) !important; }
@keyframes mxSpeaking { from { box-shadow: 0 0 0 0 var(--matrix-primary); } to { box-shadow: 0 0 0 6px var(--matrix-pulse); } }

#mx-ai-visualizer { background: #111 !important; padding: 10px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; border-bottom: 1px solid #333 !important; }
.mx-vis-text { color: #a0aec0 !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1px !important; }
.mx-vis-waves { display: flex !important; align-items: center !important; gap: 4px !important; height: 20px !important; }
.mx-siri-wave { width: 4px !important; background: var(--matrix-primary) !important; border-radius: 4px !important; animation: mxWaveAnim 1.2s infinite ease-in-out !important; }
.mx-siri-wave:nth-child(1) { height: 8px !important; animation-delay: -1.2s !important; }
.mx-siri-wave:nth-child(2) { height: 16px !important; animation-delay: -1.0s !important; }
.mx-siri-wave:nth-child(3) { height: 20px !important; animation-delay: -0.8s !important; background: var(--matrix-secondary) !important; }
.mx-siri-wave:nth-child(4) { height: 16px !important; animation-delay: -0.6s !important; }
.mx-siri-wave:nth-child(5) { height: 8px !important; animation-delay: -0.4s !important; }
@keyframes mxWaveAnim { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } }

/* --- 9. Live Voice Call Screen --- */
#mx-live-call-screen { 
    position: absolute !important; 
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; 
    background: #070b14 !important; 
    z-index: 100 !important; 
    display: flex; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; 
    color: #fff !important; 
    padding: 20px !important; 
    overflow: hidden !important; 
}
.mx-live-bg-blobs { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden !important; z-index: 1 !important; filter: blur(70px) !important; opacity: 0.5 !important; pointer-events: none !important; }
.mx-blob { position: absolute !important; border-radius: 50% !important; animation: mxBlobFloat 12s infinite alternate ease-in-out !important; }
.mx-blob-1 { width: 350px !important; height: 350px !important; background: var(--matrix-primary) !important; top: -100px !important; left: -100px !important; }
.mx-blob-2 { width: 300px !important; height: 300px !important; background: var(--matrix-secondary) !important; bottom: -100px !important; right: -50px !important; animation-delay: -6s !important; opacity: 0.8 !important; }
@keyframes mxBlobFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 80px) scale(1.3); } }

.mx-live-header { position: absolute !important; top: 20px !important; right: 20px !important; z-index: 10 !important; }
.mx-live-icon-btn { background: rgba(255,255,255,0.15) !important; border: 1px solid rgba(255,255,255,0.1) !important; color: #fff !important; width: 45px !important; height: 45px !important; border-radius: 50% !important; font-size: 18px !important; cursor: pointer !important; transition: 0.2s ease !important; backdrop-filter: blur(5px) !important; }
.mx-live-icon-btn:hover { background: rgba(255,255,255,0.3) !important; transform: scale(1.1) !important; }
.mx-live-call-content { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; z-index: 2 !important; }

.mx-live-orb { 
    width: 140px !important; 
    height: 140px !important; 
    border-radius: 50% !important; 
    background: linear-gradient(135deg, var(--matrix-primary), var(--matrix-secondary)) !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    font-size: 50px !important; 
    box-shadow: 0 0 40px var(--matrix-pulse) !important; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
    position: relative !important; 
    z-index: 5 !important; 
    overflow: hidden !important; 
}
.mx-custom-live-img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; display: block !important; }
.mx-live-orb.listening { transform: scale(1.05) !important; box-shadow: 0 0 60px rgba(16, 185, 129, 0.5) !important; background: linear-gradient(135deg, #10b981, #059669) !important; }
.mx-live-orb.thinking { animation: mxThinkSpin 2s linear infinite !important; box-shadow: 0 0 50px var(--matrix-pulse) !important; background: linear-gradient(135deg, var(--matrix-secondary), var(--matrix-primary)) !important; }
.mx-live-orb.speaking { animation: mxPulseSpeak 1.2s infinite alternate ease-in-out !important; }
@keyframes mxThinkSpin { 100% { transform: rotate(360deg) scale(1.05); } }
@keyframes mxPulseSpeak { 0% { box-shadow: 0 0 20px var(--matrix-primary); transform: scale(1); } 100% { box-shadow: 0 0 80px var(--matrix-primary), 0 0 30px #fff; transform: scale(1.15); } }

.mx-pro-svg { width: 100% !important; height: 100% !important; display: block !important; margin: 0 auto !important; transform-origin: center bottom !important; }
.mx-live-orb .mx-pro-svg { animation: mxBreathe 3s infinite alternate ease-in-out !important; }
@keyframes mxBreathe { 0% { transform: scale(1) translateY(0); } 100% { transform: scale(1.02) translateY(-2px); } }
.mx-live-orb.speaking .mx-glowing-mic { animation: mxPulseMic 0.3s infinite alternate !important; filter: drop-shadow(0 0 8px var(--matrix-primary)) !important; }
@keyframes mxPulseMic { 0% { fill: #fff; transform: scale(1); } 100% { fill: var(--matrix-primary); transform: scale(1.5); } }

#mx-live-eq { display: flex !important; gap: 6px !important; align-items: center !important; justify-content: center !important; height: 50px !important; margin-top: 25px !important; z-index: 5 !important; }
.mx-live-bar { width: 8px !important; height: 6px !important; background: #10b981 !important; border-radius: 4px !important; transition: height 0.05s ease !important; box-shadow: 0 0 10px #10b981 !important; }
.mx-call-status { margin-top: 25px !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: 1px !important; color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; z-index: 5 !important; }
.mx-live-transcript { margin-top: 20px !important; text-align: center !important; font-size: 18px !important; color: #e2e8f0 !important; max-width: 90% !important; line-height: 1.5 !important; min-height: 50px !important; text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important; font-weight: 500 !important; z-index: 5 !important; }
.mx-live-end-action { background: rgba(229, 62, 62, 0.9) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.2) !important; padding: 16px 45px !important; border-radius: 40px !important; font-size: 18px !important; font-weight: 900 !important; cursor: pointer !important; box-shadow: 0 10px 25px rgba(229, 62, 62, 0.4) !important; margin-bottom: 25px !important; transition: all 0.3s ease !important; backdrop-filter: blur(5px) !important; z-index: 10 !important; }
.mx-live-end-action:hover { background: #c53030 !important; transform: translateY(-3px) scale(1.05) !important; box-shadow: 0 15px 30px rgba(229, 62, 62, 0.6) !important; }

/* --- 10. Voice Commerce Toast --- */
#mx-cart-toast {
    position: fixed; 
    top: 40px; 
    left: 50%; 
    transform: translateX(-50%) translateY(-20px) scale(0.9);
    background: rgba(16, 185, 129, 0.95); 
    color: #fff; 
    padding: 15px 30px; 
    border-radius: 30px;
    font-weight: 900; 
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4); 
    z-index: 9999999;
    opacity: 0; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    backdrop-filter: blur(10px); 
    pointer-events: none;
}
#mx-cart-toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* --- 11. Mobile Responsiveness --- */
@media (max-width: 768px) {
    #matrix-window { 
        width: 100% !important; 
        height: 100% !important; 
        max-height: 100% !important; 
        bottom: 0 !important; 
        right: 0 !important; 
        border-radius: 0 !important; 
        border: none !important; 
    }
    #matrix-header { border-radius: 0 !important; padding: 12px 15px !important; }
    .log-user, .log-ai { max-width: 92% !important; font-size: 15px !important; }
    #matrix-input { font-size: 16px !important; } /* מונע הזום האוטומטי המעצבן באייפון (iOS) */
}
.mx-tool-btn.mx-diag-active{background:var(--matrix-primary)!important;color:#fff!important;border-color:var(--matrix-primary)!important;box-shadow:0 0 0 3px var(--matrix-pulse)!important;}
.mx-diag-card .matrix-quick-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
@media(max-width:480px){.mx-diag-card .matrix-quick-actions{grid-template-columns:1fr!important;}}


/* =========================================================
   Matrix AI Commerce PRO v2.5.0 - Ambient Concierge UI
   Luxury non-intrusive living orb experience
   ========================================================= */
:root{
    --mx-ambient-a:#ff6a00;
    --mx-ambient-b:#00e5ff;
    --mx-ambient-c:#8b5cf6;
    --mx-ambient-bg:rgba(8,12,22,.72);
    --mx-ambient-glass:rgba(255,255,255,.10);
    --mx-ambient-line:rgba(255,255,255,.18);
    --mx-ambient-text:#f8fafc;
}
#matrix-trigger-wrap{
    isolation:isolate !important;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.24)) !important;
}
#matrix-trigger-wrap::before{
    content:"" !important;
    position:absolute !important;
    inset:-16px !important;
    border-radius:999px !important;
    background:radial-gradient(circle at 50% 50%, rgba(255,106,0,.25), rgba(0,229,255,.10) 45%, transparent 70%) !important;
    animation:mxAmbientAura 4.8s ease-in-out infinite !important;
    pointer-events:none !important;
    z-index:-1 !important;
}
#matrix-trigger{
    background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.95), rgba(255,255,255,.18) 18%, transparent 30%),
        conic-gradient(from 160deg, var(--mx-ambient-a), var(--mx-ambient-b), var(--mx-ambient-c), var(--mx-ambient-a)) !important;
    border:1px solid rgba(255,255,255,.42) !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 16px 44px rgba(0,0,0,.22), 0 0 34px rgba(255,106,0,.25) !important;
    transform-style:preserve-3d !important;
}
#matrix-trigger::before{
    content:"" !important;
    position:absolute !important;
    inset:8px !important;
    border-radius:inherit !important;
    background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.72), rgba(255,255,255,.08) 42%, rgba(0,0,0,.08) 100%) !important;
    box-shadow:inset 0 -12px 22px rgba(0,0,0,.15), inset 0 12px 28px rgba(255,255,255,.25) !important;
    pointer-events:none !important;
}
#matrix-trigger::after{
    content:"" !important;
    position:absolute !important;
    inset:-3px !important;
    border-radius:inherit !important;
    border:1px solid rgba(0,229,255,.35) !important;
    animation:mxAmbientRing 2.8s ease-in-out infinite !important;
    pointer-events:none !important;
}
#matrix-trigger img{ position:relative !important; z-index:2 !important; opacity:.92 !important; mix-blend-mode:screen !important; }
.matrix-trigger-online-badge{
    background:linear-gradient(135deg,#34d399,#00e5ff) !important;
    box-shadow:0 0 18px rgba(0,229,255,.8) !important;
}
.matrix-trigger-text{
    background:rgba(12,18,32,.72) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
    backdrop-filter:blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter:blur(14px) saturate(1.4) !important;
}
#matrix-trigger-wrap.mx-ambient-listening #matrix-trigger,
#matrix-trigger-wrap.mx-ambient-thinking #matrix-trigger,
#matrix-trigger-wrap.mx-ambient-vision #matrix-trigger,
#matrix-trigger-wrap.mx-ambient-diagnostic #matrix-trigger{
    animation:mxAmbientBreath 1.65s ease-in-out infinite !important;
}
#matrix-trigger-wrap.mx-ambient-thinking #matrix-trigger::after{ border-color:rgba(139,92,246,.7) !important; }
#matrix-trigger-wrap.mx-ambient-vision #matrix-trigger::after{ border-color:rgba(0,229,255,.8) !important; }
#matrix-trigger-wrap.mx-ambient-diagnostic #matrix-trigger::after{ border-color:rgba(255,70,70,.72) !important; }
.mx-ambient-hint{
    position:absolute !important;
    right:calc(var(--mx-trigger-size,64px) + 12px) !important;
    bottom:8px !important;
    max-width:220px !important;
    padding:9px 13px !important;
    border-radius:18px !important;
    font-size:12px !important;
    font-weight:850 !important;
    line-height:1.35 !important;
    color:#fff !important;
    background:linear-gradient(135deg, rgba(15,23,42,.82), rgba(30,41,59,.68)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 14px 36px rgba(0,0,0,.24) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
    opacity:0 !important;
    transform:translateY(8px) scale(.96) !important;
    pointer-events:none !important;
    transition:opacity .28s ease, transform .28s ease !important;
}
#matrix-trigger-wrap:hover .mx-ambient-hint,
#matrix-trigger-wrap.mx-ambient-hint-visible .mx-ambient-hint{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
}
#matrix-window{
    background:linear-gradient(160deg, rgba(12,18,32,.86), rgba(7,10,18,.74)) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:0 28px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.07) inset, 0 0 70px rgba(255,106,0,.14) !important;
    backdrop-filter:blur(26px) saturate(1.35) !important;
    -webkit-backdrop-filter:blur(26px) saturate(1.35) !important;
    border-radius:26px !important;
}
#matrix-window::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:inherit !important;
    background:radial-gradient(circle at 20% 0%, rgba(255,106,0,.22), transparent 32%), radial-gradient(circle at 100% 12%, rgba(0,229,255,.16), transparent 34%) !important;
    pointer-events:none !important;
    z-index:0 !important;
}
#matrix-window > *{ position:relative !important; z-index:1 !important; }
#matrix-header{
    background:linear-gradient(135deg, rgba(255,106,0,.94), rgba(17,24,39,.78) 48%, rgba(0,229,255,.32)) !important;
    border-bottom:1px solid rgba(255,255,255,.13) !important;
    border-top-left-radius:26px !important;
    border-top-right-radius:26px !important;
}
.matrix-avatar-img,.matrix-avatar-fallback{
    box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 0 26px rgba(0,229,255,.25) !important;
}
.mx-smart-toolbar{
    background:rgba(255,255,255,.08) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
}
.mx-tool-btn{
    color:#f8fafc !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.mx-tool-btn:hover,.mx-tool-btn.mx-diag-active{
    background:rgba(255,255,255,.18) !important;
    color:#fff !important;
    transform:translateY(-1px) !important;
}
#matrix-logs{
    background:linear-gradient(180deg, rgba(255,255,255,.03), transparent) !important;
}
.log-ai,.matrix-welcome-card{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(255,255,255,.38) !important;
    box-shadow:0 14px 38px rgba(0,0,0,.13) !important;
}
.log-user{
    background:linear-gradient(135deg, var(--mx-ambient-a), #ff8c00) !important;
    box-shadow:0 12px 30px rgba(255,106,0,.22) !important;
}
#matrix-input{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(255,255,255,.55) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.13) inset !important;
}
.matrix-qr-btn,.mx-product-card,.mx-bundle-card{
    border-radius:18px !important;
    box-shadow:0 12px 30px rgba(0,0,0,.12) !important;
}
.matrix-chat-active{ animation:mxAmbientOpen .38s cubic-bezier(.2,.8,.2,1) both !important; }
@keyframes mxAmbientAura{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.08)}}
@keyframes mxAmbientRing{0%{transform:scale(.98);opacity:.95}70%{transform:scale(1.18);opacity:0}100%{transform:scale(.98);opacity:0}}
@keyframes mxAmbientBreath{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.16) saturate(1.25)}}
@keyframes mxAmbientOpen{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:768px){
    #matrix-window{ width:calc(100vw - 22px) !important; right:11px !important; left:11px !important; border-radius:24px !important; max-height:82vh !important; }
    .mx-ambient-hint{display:none !important;}
}
@media (prefers-reduced-motion:reduce){
    #matrix-trigger-wrap::before,#matrix-trigger::after,#matrix-trigger-wrap.mx-ambient-listening #matrix-trigger,#matrix-trigger-wrap.mx-ambient-thinking #matrix-trigger,#matrix-trigger-wrap.mx-ambient-vision #matrix-trigger,#matrix-trigger-wrap.mx-ambient-diagnostic #matrix-trigger{animation:none !important;}
}


/* =========================================================
   Matrix AI v2.5.1 - Design Studio, Fullscreen & Accessibility
   ========================================================= */
#matrix-ui-container.mx-theme-ambient_concierge #matrix-trigger,
#matrix-ui-container.mx-theme-luxury_glass #matrix-trigger,
#matrix-ui-container.mx-theme-liquid_oled_pro #matrix-trigger {
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.96), rgba(255,255,255,.18) 18%, transparent 32%),
        radial-gradient(circle at 50% 60%, var(--mx-design-accent, var(--matrix-primary)), var(--mx-design-secondary, var(--matrix-secondary)) 55%, rgba(5,7,13,.95) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.22) inset,
        0 0 28px color-mix(in srgb, var(--mx-design-accent, var(--matrix-primary)) 60%, transparent),
        0 18px 55px rgba(0,0,0,.24) !important;
}
#matrix-ui-container.mx-trigger-mode-orb_only #matrix-trigger img { display:none !important; }
#matrix-ui-container.mx-trigger-mode-orb_only #matrix-trigger svg { display:none !important; }
#matrix-ui-container.mx-trigger-mode-capsule #matrix-trigger-wrap {
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 999px !important;
    padding: 7px !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.18) !important;
    backdrop-filter: blur(14px) !important;
}
#matrix-ui-container.mx-trigger-mode-logo_clean #matrix-trigger {
    background: #fff !important;
    box-shadow: 0 14px 42px rgba(15,23,42,.18) !important;
}
#matrix-ui-container.mx-glow-soft #matrix-trigger { filter: saturate(1.02) brightness(1) !important; }
#matrix-ui-container.mx-glow-medium #matrix-trigger { filter: saturate(1.12) brightness(1.03) !important; }
#matrix-ui-container.mx-glow-strong #matrix-trigger {
    filter: saturate(1.25) brightness(1.08) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.22) inset,
        0 0 42px color-mix(in srgb, var(--mx-design-accent, var(--matrix-primary)) 72%, transparent),
        0 22px 70px rgba(0,0,0,.30) !important;
}
#matrix-ui-container.mx-theme-ambient_concierge #matrix-window,
#matrix-ui-container.mx-theme-luxury_glass #matrix-window,
#matrix-ui-container.mx-theme-liquid_oled_pro #matrix-window {
    border-radius: var(--mx-window-radius, 22px) !important;
    backdrop-filter: blur(22px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
    border: 1px solid var(--matrix-border) !important;
}
#matrix-ui-container.mx-theme-ambient_concierge #matrix-header,
#matrix-ui-container.mx-theme-liquid_oled_pro #matrix-header {
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
#matrix-ui-container.mx-theme-luxury_glass #matrix-header {
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.56)) !important;
    color: #111827 !important;
}
#matrix-ui-container .mx-header-btn:focus-visible,
#matrix-ui-container button:focus-visible,
#matrix-ui-container input:focus-visible,
#matrix-ui-container textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mx-design-accent, var(--matrix-primary)) 75%, #ffffff) !important;
    outline-offset: 3px !important;
}
#matrix-ui-container.mx-a11y-on #matrix-window {
    font-size: 16px !important;
}
#matrix-ui-container.mx-a11y-on .mx-tool-btn,
#matrix-ui-container.mx-a11y-on .mx-header-btn,
#matrix-ui-container.mx-a11y-on #matrix-send-action,
#matrix-ui-container.mx-a11y-on #matrix-mic-btn,
#matrix-ui-container.mx-a11y-on #matrix-camera-btn {
    min-width: 44px !important;
    min-height: 44px !important;
}
#matrix-window.mx-fullscreen-active {
    top: max(10px, env(safe-area-inset-top)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 22px !important;
    transform: translateY(0) scale(1) !important;
}
body.mx-matrix-fullscreen-lock {
    overflow: hidden !important;
    touch-action: none !important;
}
.mx-ambient-hint {
    max-width: min(260px, calc(100vw - 120px)) !important;
}
@media (max-width: 768px) {
    #matrix-window.matrix-chat-active,
    #matrix-window.mx-mobile-fullscreen.matrix-chat-active {
        position: fixed !important;
        top: env(safe-area-inset-top, 0px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: 999999 !important;
    }
    #matrix-window.mx-mobile-fullscreen #matrix-header {
        padding-top: max(12px, env(safe-area-inset-top)) !important;
    }
    #matrix-logs {
        padding-bottom: 14px !important;
    }
    #matrix-ui-container .matrix-trigger-text {
        max-width: calc(100vw - 110px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    #matrix-ui-container *, #matrix-ui-container *::before, #matrix-ui-container *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   Matrix AI v2.5.2 - Smart Contrast / Readability Guard
   ========================================================= */
#matrix-ui-container.mx-auto-contrast {
    --mx-readable-ai-bg: var(--mx-ai-bubble-bg, var(--matrix-bot-bg, #ffffff));
    --mx-readable-ai-text: var(--mx-ai-bubble-text, var(--matrix-bot-text, #111827));
    --mx-readable-user-bg: var(--mx-user-bubble-bg, var(--matrix-primary, #ff6a00));
    --mx-readable-user-text: var(--mx-user-bubble-text, #ffffff);
}
#matrix-ui-container.mx-auto-contrast .log-ai {
    background: var(--mx-readable-ai-bg) !important;
    color: var(--mx-readable-ai-text) !important;
    border: 1px solid color-mix(in srgb, var(--mx-readable-ai-text) 16%, transparent) !important;
    text-shadow: none !important;
}
#matrix-ui-container.mx-auto-contrast .log-user {
    background: var(--mx-readable-user-bg) !important;
    color: var(--mx-readable-user-text) !important;
    border: 1px solid color-mix(in srgb, var(--mx-readable-user-text) 16%, transparent) !important;
    text-shadow: none !important;
}
#matrix-ui-container.mx-auto-contrast .log-ai *,
#matrix-ui-container.mx-auto-contrast .log-user * {
    color: inherit !important;
}
#matrix-ui-container.mx-auto-contrast .log-ai a,
#matrix-ui-container.mx-auto-contrast .log-user a {
    color: inherit !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 900 !important;
}
#matrix-ui-container.mx-auto-contrast .matrix-welcome-card,
#matrix-ui-container.mx-auto-contrast .mx-spring-card,
#matrix-ui-container.mx-auto-contrast .mx-diag-card,
#matrix-ui-container.mx-auto-contrast .mx-product-card,
#matrix-ui-container.mx-auto-contrast .matrix-product-card {
    background: var(--mx-readable-ai-bg) !important;
    color: var(--mx-readable-ai-text) !important;
    border-color: color-mix(in srgb, var(--mx-readable-ai-text) 14%, transparent) !important;
}
#matrix-ui-container.mx-auto-contrast .matrix-welcome-card p,
#matrix-ui-container.mx-auto-contrast .matrix-welcome-card h3,
#matrix-ui-container.mx-auto-contrast .mx-spring-card *,
#matrix-ui-container.mx-auto-contrast .mx-diag-card *,
#matrix-ui-container.mx-auto-contrast .mx-product-card *,
#matrix-ui-container.mx-auto-contrast .matrix-product-card * {
    color: inherit !important;
}
#matrix-ui-container.mx-auto-contrast .matrix-qr-btn,
#matrix-ui-container.mx-auto-contrast .mx-tool-btn {
    background: color-mix(in srgb, var(--mx-readable-ai-bg) 86%, var(--mx-readable-ai-text) 14%) !important;
    color: var(--mx-readable-ai-text) !important;
    border-color: color-mix(in srgb, var(--mx-readable-ai-text) 18%, transparent) !important;
}
#matrix-ui-container.mx-auto-contrast .matrix-qr-btn:hover,
#matrix-ui-container.mx-auto-contrast .mx-tool-btn:hover {
    background: var(--mx-readable-user-bg) !important;
    color: var(--mx-readable-user-text) !important;
}
#matrix-ui-container.mx-auto-contrast #matrix-input-wrap {
    background: color-mix(in srgb, var(--matrix-chat-bg) 86%, #ffffff 14%) !important;
    border-top-color: color-mix(in srgb, var(--mx-readable-ai-text) 14%, transparent) !important;
}
#matrix-ui-container.mx-auto-contrast #matrix-input {
    background: #ffffff !important;
    color: #111827 !important;
    caret-color: #111827 !important;
    border-color: #cbd5e1 !important;
}
#matrix-ui-container.mx-auto-contrast #matrix-input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}
#matrix-ui-container.mx-theme-liquid_oled_pro.mx-auto-contrast #matrix-input,
#matrix-ui-container.mx-theme-ambient_concierge.mx-auto-contrast #matrix-input {
    background: rgba(255,255,255,.96) !important;
    color: #0f172a !important;
}
#matrix-ui-container.mx-auto-contrast .matrix-trigger-text,
#matrix-ui-container.mx-auto-contrast .mx-ambient-hint {
    color: var(--mx-trigger-text-color, #111827) !important;
    background: var(--mx-trigger-text-bg, #ffffff) !important;
    text-shadow: none !important;
}
#matrix-ui-container.mx-auto-contrast #matrix-header {
    color: #ffffff !important;
}
#matrix-ui-container.mx-theme-luxury_glass.mx-auto-contrast #matrix-header,
#matrix-ui-container.mx-theme-clean_minimal.mx-auto-contrast #matrix-header {
    color: #111827 !important;
}
#matrix-ui-container.mx-auto-contrast .mx-header-btn {
    color: inherit !important;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent) !important;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    #matrix-ui-container.mx-auto-contrast .matrix-qr-btn,
    #matrix-ui-container.mx-auto-contrast .mx-tool-btn {
        background: #ffffff !important;
        color: #111827 !important;
        border-color: #d1d5db !important;
    }
    #matrix-ui-container.mx-auto-contrast .log-ai {
        border-color: rgba(0,0,0,.14) !important;
    }
}


/* =========================================================
   Matrix AI v2.5.3 - Real Theme Switcher Fix
   Each Design Studio selection now has a visibly different UI.
   ========================================================= */

/* Reset premium ambient overlay when legacy/minimal themes are selected */
#matrix-ui-container.mx-theme-classic_chat #matrix-window,
#matrix-ui-container.mx-theme-kolbo_signature #matrix-window,
#matrix-ui-container.mx-theme-clean_minimal #matrix-window,
#matrix-ui-container.mx-theme-warm_gold #matrix-window,
#matrix-ui-container.mx-theme-glassmorphism #matrix-window,
#matrix-ui-container.mx-theme-liquid_oled #matrix-window {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Kolbo Signature: orange/black commerce look */
#matrix-ui-container.mx-theme-kolbo_signature #matrix-window {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 18px 58px rgba(255,106,0,.18) !important;
}
#matrix-ui-container.mx-theme-kolbo_signature #matrix-header {
    background: linear-gradient(135deg, #ff6a00, #111827) !important;
    color: #ffffff !important;
}
#matrix-ui-container.mx-theme-kolbo_signature #matrix-trigger {
    background: linear-gradient(135deg, #ff6a00, #111827) !important;
    box-shadow: 0 16px 44px rgba(255,106,0,.32) !important;
}

/* Classic Messenger: deliberately simple green chat */
#matrix-ui-container.mx-theme-classic_chat #matrix-window {
    background: #e5ddd5 !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
}
#matrix-ui-container.mx-theme-classic_chat #matrix-header {
    background: #075E54 !important;
    color: #ffffff !important;
    border-radius: 14px 14px 0 0 !important;
}
#matrix-ui-container.mx-theme-classic_chat .mx-smart-toolbar,
#matrix-ui-container.mx-theme-classic_chat #matrix-input-wrap {
    background: #f0f2f5 !important;
}
#matrix-ui-container.mx-theme-classic_chat .log-user {
    border-radius: 12px 12px 0 12px !important;
}
#matrix-ui-container.mx-theme-classic_chat .log-ai {
    border-radius: 12px 12px 12px 0 !important;
}
#matrix-ui-container.mx-theme-classic_chat #matrix-trigger {
    background: #128C7E !important;
    box-shadow: 0 10px 28px rgba(18,140,126,.30) !important;
}

/* Glassmorphism: pink translucent glass */
#matrix-ui-container.mx-theme-glassmorphism #matrix-window {
    background: rgba(255,255,255,.68) !important;
    backdrop-filter: blur(18px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
    border: 1px solid rgba(255,255,255,.48) !important;
    box-shadow: 0 20px 65px rgba(236,72,153,.18) !important;
}
#matrix-ui-container.mx-theme-glassmorphism #matrix-header {
    background: linear-gradient(135deg, rgba(236,72,153,.86), rgba(244,114,182,.72)) !important;
    color: #ffffff !important;
}
#matrix-ui-container.mx-theme-glassmorphism #matrix-trigger {
    background: linear-gradient(135deg, #ec4899, #f472b6) !important;
    box-shadow: 0 16px 46px rgba(236,72,153,.30) !important;
}

/* Liquid OLED legacy: pure black green */
#matrix-ui-container.mx-theme-liquid_oled #matrix-window {
    background: #050505 !important;
    border: 1px solid #262626 !important;
    box-shadow: 0 0 36px rgba(16,185,129,.12) !important;
}
#matrix-ui-container.mx-theme-liquid_oled #matrix-header {
    background: #101010 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #262626 !important;
}
#matrix-ui-container.mx-theme-liquid_oled .mx-smart-toolbar,
#matrix-ui-container.mx-theme-liquid_oled #matrix-input-wrap {
    background: #0b0b0b !important;
    border-color: #262626 !important;
}
#matrix-ui-container.mx-theme-liquid_oled #matrix-trigger {
    background: #10b981 !important;
    box-shadow: 0 0 32px rgba(16,185,129,.28) !important;
}

/* Liquid OLED Pro: futuristic neon, distinct from legacy OLED */
#matrix-ui-container.mx-theme-liquid_oled_pro #matrix-window {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--mx-design-accent,#ff6a00) 18%, transparent), transparent 36%),
        linear-gradient(180deg, #05070d, #070b14) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 0 70px color-mix(in srgb, var(--mx-design-accent,#ff6a00) 18%, transparent), 0 24px 80px rgba(0,0,0,.48) !important;
}
#matrix-ui-container.mx-theme-liquid_oled_pro #matrix-header {
    background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.02)) !important;
    color: #f8fafc !important;
}

/* Luxury Glass: bright premium glass */
#matrix-ui-container.mx-theme-luxury_glass #matrix-window {
    background: rgba(255,255,255,.74) !important;
    backdrop-filter: blur(24px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.22) !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    box-shadow: 0 26px 74px rgba(15,23,42,.18) !important;
}
#matrix-ui-container.mx-theme-luxury_glass #matrix-header {
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62)) !important;
    color: #111827 !important;
}

/* Ambient Concierge: keep living orb premium */
#matrix-ui-container.mx-theme-ambient_concierge #matrix-window {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--mx-design-accent,#ff6a00) 20%, transparent), transparent 34%),
        rgba(9,15,30,.82) !important;
    color: #f8fafc !important;
}

/* Warm Gold: warm luxury */
#matrix-ui-container.mx-theme-warm_gold #matrix-window {
    background: #fffaf0 !important;
    border: 1px solid #fde68a !important;
    box-shadow: 0 22px 64px rgba(146,64,14,.18) !important;
}
#matrix-ui-container.mx-theme-warm_gold #matrix-header {
    background: linear-gradient(135deg, #92400e, #f59e0b) !important;
    color: #ffffff !important;
}
#matrix-ui-container.mx-theme-warm_gold #matrix-trigger {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    box-shadow: 0 16px 42px rgba(217,119,6,.30) !important;
}

/* Clean Minimal: clean white UI */
#matrix-ui-container.mx-theme-clean_minimal #matrix-window {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 42px rgba(15,23,42,.13) !important;
}
#matrix-ui-container.mx-theme-clean_minimal #matrix-header {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e5e7eb !important;
}
#matrix-ui-container.mx-theme-clean_minimal .mx-smart-toolbar,
#matrix-ui-container.mx-theme-clean_minimal #matrix-input-wrap {
    background: #ffffff !important;
}
#matrix-ui-container.mx-theme-clean_minimal #matrix-trigger {
    background: #ffffff !important;
    color: var(--matrix-primary) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 14px 36px rgba(15,23,42,.14) !important;
}

/* Prevent trigger mode rules from forcing the same ambient look over all themes */
#matrix-ui-container.mx-trigger-mode-logo_clean:not(.mx-theme-ambient_concierge):not(.mx-theme-luxury_glass):not(.mx-theme-liquid_oled_pro) #matrix-trigger,
#matrix-ui-container.mx-trigger-mode-capsule:not(.mx-theme-ambient_concierge):not(.mx-theme-luxury_glass):not(.mx-theme-liquid_oled_pro) #matrix-trigger {
    background-image: none !important;
}

/* Admin selection should affect the text bubble too */
#matrix-ui-container.mx-theme-liquid_oled .matrix-trigger-text,
#matrix-ui-container.mx-theme-liquid_oled_pro .matrix-trigger-text,
#matrix-ui-container.mx-theme-ambient_concierge .matrix-trigger-text {
    background: rgba(15,23,42,.88) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.16) !important;
}
#matrix-ui-container.mx-theme-clean_minimal .matrix-trigger-text,
#matrix-ui-container.mx-theme-luxury_glass .matrix-trigger-text {
    background: #ffffff !important;
    color: #111827 !important;
}
#matrix-ui-container.mx-theme-classic_chat .matrix-trigger-text {
    background: #ffffff !important;
    color: #075E54 !important;
}
#matrix-ui-container.mx-theme-warm_gold .matrix-trigger-text {
    background: #fff7ed !important;
    color: #92400e !important;
}


/* =========================================================
   Matrix AI v2.5.4 - Live Call Fullscreen Overlay Fix
   ========================================================= */
#mx-live-call-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 1000002 !important;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--mx-design-accent, var(--matrix-primary)) 22%, transparent), transparent 34%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--mx-design-secondary, var(--matrix-secondary)) 18%, transparent), transparent 36%),
        rgba(5, 7, 13, 0.98) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
    padding:
        max(20px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
#mx-live-call-screen.mx-live-fullscreen-active {
    display: flex !important;
}
body.mx-live-call-lock {
    overflow: hidden !important;
    touch-action: none !important;
}
body.mx-live-call-lock #matrix-window {
    overflow: hidden !important;
}
#mx-live-call-screen .mx-live-header {
    position: absolute !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    left: max(16px, env(safe-area-inset-left)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 50 !important;
    pointer-events: none !important;
}
#mx-live-call-screen .mx-live-header button {
    pointer-events: auto !important;
}
#mx-live-call-screen .mx-live-call-content {
    position: relative !important;
    z-index: 20 !important;
    width: min(720px, 94vw) !important;
    max-height: calc(100dvh - 150px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
#mx-live-call-screen .mx-live-transcript {
    max-height: min(24dvh, 210px) !important;
    overflow-y: auto !important;
}
#mx-live-call-screen .mx-live-end-action {
    position: fixed !important;
    bottom: max(22px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 60 !important;
}
#mx-live-call-screen .mx-live-bg-blobs {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
@media (max-width: 768px) {
    #mx-live-call-screen {
        border-radius: 0 !important;
        padding-top: max(22px, env(safe-area-inset-top)) !important;
        padding-bottom: max(84px, env(safe-area-inset-bottom)) !important;
    }
    #mx-live-call-screen .mx-live-call-content {
        width: 100% !important;
        max-height: calc(100dvh - 120px) !important;
    }
    #mx-live-call-screen .mx-live-orb {
        transform: scale(.9) !important;
    }
}