.active-call-interface{position:fixed;top:20px;right:20px;background:linear-gradient(135deg,#1e40af 0%,#1d4ed8 100%);border-radius:16px;box-shadow:0 8px 32px rgba(37,99,235,.3);padding:24px;z-index:9999;min-width:300px;display:none;color:#fff;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);animation:slideInRight .3s ease-out}.active-call-interface .call-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.active-call-interface .call-info{flex:1}.active-call-interface .caller-name{font-size:1.1em;font-weight:600;margin-bottom:4px;color:#fff}.active-call-interface .call-timer{font-size:.9em;color:rgba(255,255,255,.8);font-family:'Courier New',monospace;font-weight:500}.active-call-interface .call-status{text-align:right}.active-call-interface .status-text{font-size:.85em;color:#fff;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.active-call-interface .call-controls{display:flex;justify-content:center;gap:16px}.active-call-interface .control-btn{width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#fff;font-size:1.2em;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px)}.active-call-interface .control-btn:hover{background:rgba(255,255,255,.2);transform:scale(1.05)}.active-call-interface .control-btn.end-call{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)}.active-call-interface .control-btn.end-call:hover{background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);transform:scale(1.05)}.active-call-interface .control-btn.muted{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}.active-call-interface .control-btn.muted:hover{background:linear-gradient(135deg,#d97706 0%,#b45309 100%)}.call-interface{position:fixed;top:20px;right:20px;background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.15);padding:20px;z-index:9999;min-width:280px;display:none;border:2px solid #2563eb}@media (max-width:768px){.active-call-interface{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border-radius:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%);color:#fff;z-index:10001;animation:fadeIn .3s ease-out}.active-call-interface .call-header{flex-direction:column;text-align:center;padding:60px 20px 40px;background:rgba(0,0,0,.2);backdrop-filter:blur(10px)}.active-call-interface .call-info{margin-bottom:20px}.active-call-interface .caller-name{font-size:1.8em;font-weight:700;margin-bottom:8px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.active-call-interface .call-timer{font-size:1.2em;color:rgba(255,255,255,.9);font-family:'Courier New',monospace;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.3)}.active-call-interface .call-status{text-align:center}.active-call-interface .status-text{font-size:1em;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.active-call-interface .call-controls{display:flex;justify-content:center;gap:30px;padding:60px 20px;background:rgba(0,0,0,.1);backdrop-filter:blur(10px)}.active-call-interface .control-btn{width:70px;height:70px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:1.8em;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.3)}.active-call-interface .control-btn:active{transform:scale(.95)}.active-call-interface .control-btn.end-call{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 8px 24px rgba(239,68,68,.4)}.active-call-interface .control-btn.muted{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);box-shadow:0 8px 24px rgba(245,158,11,.4)}.call-interface{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border-radius:0;padding:20px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#1e293b 0%,#334155 100%);color:#fff;z-index:10001}.call-header{text-align:center;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.2)}.call-status{font-size:1.2em;font-weight:600;color:#60a5fa}.call-duration{font-size:1.1em;color:#9ca3af;margin-top:5px}.call-controls{display:flex;justify-content:center;gap:20px;padding:40px 0;flex-wrap:wrap}.call-controls .btn{width:80px;height:80px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.9em;font-weight:600;border:none;transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.3)}.call-controls .btn-danger{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff}.call-controls .btn-secondary{background:linear-gradient(135deg,#6b7280 0%,#4b5563 100%);color:#fff}.call-controls .btn:hover{transform:scale(1.1);box-shadow:0 6px 16px rgba(0,0,0,.4)}.call-controls .btn i{font-size:1.5em;margin-bottom:5px}}.call-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #e5e7eb}.call-status{font-weight:600;color:#2563eb;font-size:1.1em}.call-duration{font-size:.9em;color:#6b7280;font-family:monospace}.call-controls{display:flex;gap:10px;justify-content:center}.call-controls .btn{padding:8px 16px;border-radius:8px;font-weight:500;transition:all .2s ease}.call-controls .btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.1)}#incoming-call-modal{background:rgba(0,0,0,.7);z-index:10000!important;position:fixed!important;top:0!important;left:0!important;width:100%!important;height:100%!important;display:block!important}#incoming-call-backdrop{z-index:9999!important;position:fixed!important;top:0!important;left:0!important;width:100%!important;height:100%!important;background:rgba(0,0,0,.5)!important}@media (max-width:768px){#incoming-call-modal .modal-dialog{margin:0;height:100%;max-width:100%}#incoming-call-modal .modal-content{height:100%;border-radius:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 20px;animation:fadeIn .3s ease-out}#incoming-call-modal .modal-header{background:rgba(0,0,0,.2);border:none;padding:40px 20px 20px;backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}#incoming-call-modal .modal-title{font-size:1.6em;font-weight:700;color:#60a5fa;text-transform:uppercase;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.3)}#incoming-call-modal .modal-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;background:rgba(0,0,0,.1)}#incoming-call-modal .caller-name{font-size:2.2em;font-weight:700;margin:30px 0 15px 0;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}#incoming-call-modal .caller-shop{font-size:1.3em;color:rgba(255,255,255,.8);margin-bottom:40px;text-shadow:0 1px 2px rgba(0,0,0,.3)}#incoming-call-modal .modal-footer{border:none;padding:40px 20px;justify-content:center;gap:40px;background:rgba(0,0,0,.2);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}#incoming-call-modal .btn{width:90px;height:90px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1em;font-weight:600;border:none;transition:all .3s ease;box-shadow:0 8px 24px rgba(0,0,0,.4);backdrop-filter:blur(10px)}#incoming-call-modal .btn-success{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;box-shadow:0 8px 24px rgba(16,185,129,.4)}#incoming-call-modal .btn-danger{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff;box-shadow:0 8px 24px rgba(239,68,68,.4)}#incoming-call-modal .btn:active{transform:scale(.95)}#incoming-call-modal .btn i{font-size:2em;margin-bottom:8px}#incoming-call-modal .pulse-ring{width:140px;height:120px}#incoming-call-modal .pulse-ring i{font-size:36px!important}.mobile-call{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mobile-call .btn{min-height:44px;min-width:44px;touch-action:manipulation}.mobile-call *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.call-btn.mobile{padding:12px 20px;font-size:1.1em;border-radius:25px;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px}.call-btn{padding:12px 20px;font-size:1.1em;border-radius:25px;min-height:50px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px rgba(37,99,235,.3);background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%)}.call-btn:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(37,99,235,.5);background:linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%)}.call-btn:active{transform:scale(.95) translateY(0);box-shadow:0 2px 6px rgba(37,99,235,.4)}.call-btn.small{padding:8px 14px;font-size:.9em;min-height:40px;border-radius:20px}}#incoming-call-modal .modal-content{border-radius:16px;border:none;box-shadow:0 20px 60px rgba(0,0,0,.3);background:linear-gradient(135deg,#1e293b 0%,#334155 100%);color:#fff}#incoming-call-modal .modal-header{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;border-radius:16px 16px 0 0;border-bottom:none;padding:20px 24px}#incoming-call-modal .modal-title{font-weight:700;font-size:1.2em}#incoming-call-modal .modal-body{padding:40px 24px;text-align:center;background:transparent}#incoming-call-modal .modal-footer{border-top:none;padding:24px;justify-content:center;gap:16px;background:transparent}.call-animation{position:relative;display:flex;justify-content:center;align-items:center;margin:20px 0}.pulse-ring{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#1d4ed8);position:relative;animation:pulse 2s infinite}.pulse-ring::before{content:'';position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border:2px solid #2563eb;border-radius:50%;animation:pulse-ring 2s infinite}.pulse-ring::after{content:'';position:absolute;top:-20px;left:-20px;right:-20px;bottom:-20px;border:2px solid rgba(37,99,235,.3);border-radius:50%;animation:pulse-ring 2s infinite .5s}@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}.dark-theme #incoming-call-modal .modal-content{background:linear-gradient(135deg,#1e293b 0%,#334155 100%);color:#fff}.dark-theme #incoming-call-modal .btn{border-radius:8px;font-weight:600;padding:12px 24px;transition:all .3s ease}.dark-theme #incoming-call-modal .btn-success{background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;box-shadow:0 4px 12px rgba(16,185,129,.3)}.dark-theme #incoming-call-modal .btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,185,129,.4)}.dark-theme #incoming-call-modal .btn-danger{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);border:none;box-shadow:0 4px 12px rgba(239,68,68,.3)}.dark-theme #incoming-call-modal .btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(239,68,68,.4)}.call-btn{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:.9em;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:5px;text-decoration:none;min-width:32px;min-height:28px;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(37,99,235,.2)}.call-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.call-btn:hover::before{left:100%}.call-btn:hover{background:linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.4)}.call-btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(37,99,235,.3)}.call-btn i{font-size:.8em;position:relative;z-index:1}.call-btn.small{padding:3px 6px;font-size:.7em;width:auto;height:auto;min-width:24px;min-height:24px;border-radius:6px}.call-btn.success{background:#10b981}.call-btn.success:hover{background:#059669}.call-btn.danger{background:#ef4444}.call-btn.danger:hover{background:#dc2626}.user-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.user-status.online{background:#10b981}.user-status.offline{background:#6b7280}.user-status.busy{background:#f59e0b}.user-status.away{background:#ef4444}.call-history-item{padding:12px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.call-history-item:last-child{border-bottom:none}.call-info{flex:1}.call-participant{font-weight:600;color:#374151}.call-details{font-size:.9em;color:#6b7280;margin-top:2px}.call-status-badge{padding:4px 8px;border-radius:12px;font-size:.8em;font-weight:500}.call-status-badge.answered{background:#d1fae5;color:#065f46}.call-status-badge.missed{background:#fee2e2;color:#991b1b}.call-status-badge.ended{background:#e0e7ff;color:#3730a3}@media (max-width:768px){.call-interface{top:10px;right:10px;left:10px;min-width:auto;width:calc(100% - 20px)}.call-controls{flex-direction:column;gap:8px}.call-controls .btn{width:100%;padding:12px}#incoming-call-modal .modal-dialog{margin:20px}}@keyframes incoming-call-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}.incoming-call-animation{animation:incoming-call-pulse 2s infinite}.call-quality{display:flex;gap:2px;margin-top:5px}.call-quality-bar{width:3px;height:12px;background:#e5e7eb;border-radius:1px}.call-quality-bar.active{background:#10b981}.mute-indicator{position:absolute;top:-5px;right:-5px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.7em;font-weight:bold}.recording-indicator{display:flex;align-items:center;gap:5px;color:#ef4444;font-size:.8em;margin-top:5px}.recording-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;animation:pulse 1s infinite}@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}@media (max-width:768px){.active-call-interface{animation:fadeIn .3s ease-out}.active-call-interface .control-btn{animation:bounce .6s ease-out}.active-call-interface .control-btn:nth-child(2) {animation-delay:.1s}#incoming-call-modal .modal-content{animation:fadeIn .3s ease-out}#incoming-call-modal .btn{animation:bounce .6s ease-out}#incoming-call-modal .btn:nth-child(2) {animation-delay:.1s}}