.call-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px;background:#07101ee8;backdrop-filter:blur(16px)}
.call-overlay .call-panel{position:relative;isolation:isolate;display:block;width:min(430px,100%);height:min(680px,calc(100dvh - 36px));padding:0;overflow:hidden;border:1px solid #ffffff24;border-radius:30px;background:radial-gradient(circle at 50% 25%,#29446c,#101d33 55%,#091321);box-shadow:0 35px 100px #0009;color:#fff}
.call-panel #remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent;opacity:0;transition:opacity .25s}
.call-panel.has-remote-video #remote-video{opacity:1}
.call-panel #local-video{position:absolute;z-index:3;top:18px;right:18px;display:none;width:105px;height:145px;object-fit:cover;border:2px solid #ffffff90;border-radius:17px;background:#172847;box-shadow:0 8px 30px #0007;transform:scaleX(-1)}
.call-panel.has-local-video #local-video{display:block}
.call-overlay .call-panel>.call-identity{position:absolute;z-index:2;inset:0;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:0;margin:0;padding:35px;text-align:center;background:linear-gradient(transparent 45%,#07101ecc)}
.call-identity small{margin-bottom:38px;color:#b9cae8;font-size:9px;font-weight:800;letter-spacing:.18em}
.call-identity .avatar{width:104px;height:104px;border-radius:34px;font-size:27px;box-shadow:0 16px 50px #0005}
.call-identity h2{margin:22px 0 8px;font:28px Georgia,serif}.call-identity p{margin:0;color:#d2dced;font-size:12px}
.has-remote-video .call-identity{justify-content:flex-end;padding-bottom:118px;background:linear-gradient(transparent 58%,#07101edb)}
.has-remote-video .call-identity small,.has-remote-video .call-identity .avatar{display:none}.has-remote-video .call-identity h2{margin:0 0 5px;font-size:20px;text-shadow:0 2px 10px #000}
.call-overlay .call-panel>.call-actions,.call-overlay .call-panel>.call-controls{position:absolute;z-index:5;right:0;bottom:32px;left:0;display:flex;align-items:flex-end;justify-content:center;gap:20px;margin:0;padding:0 20px}
.call-action{display:grid;justify-items:center;gap:7px;border:0;background:transparent;color:#fff;font-size:10px}.call-action span,.call-controls button{display:grid;place-items:center;width:58px;height:58px;border:0;border-radius:50%;background:#ffffff24;color:#fff;font-size:23px;box-shadow:0 8px 24px #0004}
.call-action.reject span,.call-controls .hangup{background:#e94e58}.call-action.accept span{background:#35ad72}.call-action.video span{background:#3976ea}
.call-controls button.active{background:#fff;color:#14233d}
.call-controls .hangup{order:3;transform:rotate(135deg)}
.premium-call-button{position:relative;overflow:hidden;border-color:#263d32!important;background:linear-gradient(145deg,#080e0b,#1e352a)!important;color:#cfff57!important;box-shadow:inset 0 1px #ffffff14,0 8px 22px #13221c24;transition:transform .18s,box-shadow .18s}
.premium-call-button::after{position:absolute;inset:-50%;content:"";background:linear-gradient(115deg,transparent 35%,#cfff5738 50%,transparent 65%);transform:translateX(-55%);transition:transform .45s}
.premium-call-button:hover::after{transform:translateX(55%)}.premium-call-button:hover{transform:translateY(-2px);box-shadow:0 10px 26px #93c92340}
.premium-call-button svg,.call-action svg,.call-controls svg{position:relative;z-index:1;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.call-action.accept span,.call-action.video span{background:linear-gradient(145deg,#080e0b,#20392d);color:#cfff57;box-shadow:inset 0 1px #ffffff18,0 12px 28px #0007,0 0 22px #cfff5720}
.call-controls button:not(.hangup){background:linear-gradient(145deg,#080e0b,#20392d);color:#cfff57;border:1px solid #cfff5730}
@media(max-width:700px){.call-overlay{padding:0}.call-overlay .call-panel{width:100%;height:var(--app-height,100dvh);border:0;border-radius:0}.call-panel #local-video{top:calc(10px + env(safe-area-inset-top));right:12px;width:88px;height:116px}.call-overlay .call-panel>.call-actions,.call-overlay .call-panel>.call-controls{bottom:calc(14px + env(safe-area-inset-bottom));gap:14px;padding:0 10px}.call-action span,.call-controls button{width:54px;height:54px}}
@media(max-height:600px){.call-identity small{margin-bottom:14px}.call-identity .avatar{width:76px;height:76px;border-radius:25px}.call-identity h2{margin:12px 0 5px;font-size:23px}.call-overlay .call-panel>.call-actions,.call-overlay .call-panel>.call-controls{bottom:calc(8px + env(safe-area-inset-bottom))}.call-action span,.call-controls button{width:48px;height:48px}.call-panel #local-video{width:72px;height:92px}}