/* Self-contained call presentation, after the application theme overrides. */
#appPortalRoot>#callOverlay {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:0!important; background:transparent; pointer-events:none;
}
#callOverlay .call-card {
  position:relative; isolation:isolate; display:block; box-sizing:border-box;
  width:460px; height:min(680px,calc(100dvh - 48px));
  min-height:380px; max-height:calc(100dvh - 48px); max-width:calc(100vw - 40px);
  padding:0!important; border:1px solid rgba(255,255,255,.15)!important; border-radius:28px!important;
  background:#1b294c!important; color:#fff; overflow:hidden; pointer-events:auto;
  box-shadow:0 24px 80px rgba(10,20,40,.35); font-family:inherit;
  animation:callSurfaceIn .3s ease both; container-type:size;
}
#callOverlay .call-background, #callOverlay .call-videos {position:absolute;inset:0;border-radius:inherit;pointer-events:none}
#callOverlay .call-background {z-index:-2;overflow:hidden}
#callOverlay .call-background>div {position:absolute;inset:-30%;background-size:100% 100%;animation:callMeshDrift 22s ease-in-out infinite alternate}
#callOverlay .call-mesh {background:radial-gradient(ellipse at 20% 20%,#5960a2 0,transparent 48%),radial-gradient(ellipse at 85% 70%,#294e72 0,transparent 55%),linear-gradient(135deg,#263352,#343058)}
#callOverlay .call-connected-mesh {background:radial-gradient(ellipse at 25% 20%,#367a80 0,transparent 48%),radial-gradient(ellipse at 85% 65%,#295e70 0,transparent 56%),linear-gradient(135deg,#20454f,#284e53);opacity:0;transition:opacity .7s ease}
#callOverlay .call-warm-mesh {background:radial-gradient(ellipse at 25% 20%,#94604c 0,transparent 48%),radial-gradient(ellipse at 85% 65%,#73475b 0,transparent 56%),linear-gradient(135deg,#513f48,#493847);opacity:0;transition:opacity .7s ease}
#callOverlay[data-phase="connecting"] .call-connected-mesh {opacity:.55}
#callOverlay.call-active .call-connected-mesh {opacity:1}
#callOverlay[data-phase="reconnecting"] .call-warm-mesh,#callOverlay[data-quality="weak"] .call-warm-mesh {opacity:1}
#callOverlay .call-background::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),transparent 35%,rgba(0,0,0,.25));transition:background .7s,opacity .7s;pointer-events:none}
#callOverlay.call-terminal .call-background::after {background:rgba(9,17,28,.65)}
#callOverlay .call-videos {z-index:-1;min-height:0!important;aspect-ratio:auto!important;background:transparent;overflow:visible}
#callOverlay .call-videos::after {border-radius:inherit;box-shadow:none;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 35%,transparent 55%,rgba(0,0,0,.5));opacity:0;transition:opacity .4s}
#callOverlay.call-remote-ready .call-videos::after {opacity:1}
#callOverlay #remoteAudio {display:none}
#callOverlay #remoteVideo {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:none;border-radius:0;opacity:0;transition:opacity .5s;pointer-events:auto;background:#090c12}
#callOverlay.call-remote-ready #remoteVideo {opacity:1}
#callOverlay #callLocalPreview {position:absolute;right:16px;top:90px;bottom:auto;width:112px;height:158px;max-width:28%;max-height:32%;box-sizing:border-box;background:#090c12;border-radius:19px;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:5;pointer-events:auto;touch-action:none;cursor:grab;transition:left .2s,top .2s,width .2s,height .2s;overflow:hidden}
#callOverlay #localVideo {position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center;border:0;border-radius:inherit;box-shadow:none;transform:none!important;scale:none;pointer-events:none}
#callOverlay .call-preview-flip {position:absolute;right:0;bottom:0;z-index:6;width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:15px 0 0 0;background:rgba(0,0,0,.48);color:#fff;cursor:pointer;touch-action:manipulation}
#callOverlay .call-preview-flip svg {width:24px;height:24px}
#callOverlay .call-preview-flip:disabled {opacity:.5;cursor:wait}
#callOverlay .call-preview-flip:focus-visible {outline-offset:-4px}
#callOverlay .call-header-spacer {width:40px;height:40px;flex:none}
#callOverlay .call-rotation-hint {position:absolute;z-index:6;box-sizing:border-box;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.85);font-size:12px;line-height:18px;text-align:center;pointer-events:none}
#callOverlay #callLocalPreview.call-preview-dragging {cursor:grabbing;transition:none}
#callOverlay .call-header {position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:20px 20px;gap:12px;transition:opacity .22s,transform .22s}
#callOverlay .call-sub {color:rgba(255,255,255,.75);font-size:12px;font-weight:500;letter-spacing:.015em}
#callOverlay .call-glass-btn {width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
#callOverlay svg,#callReturnBtn svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#callOverlay .call-top {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 76px;pointer-events:none;transition:opacity .25s,transform .4s}
#callOverlay .call-avatar-orbit {position:relative;width:132px;height:132px;flex:none;margin:0 0 25px}
#callOverlay .call-avatar-orbit::before,#callOverlay .call-avatar-orbit::after {content:"";position:absolute;inset:-9px;border:1px solid rgba(255,255,255,.22);border-radius:50%;animation:callRipple 2.3s ease-out infinite}
#callOverlay .call-avatar-orbit::after {animation-delay:1.15s}
#callOverlay.call-active .call-avatar-orbit::before,#callOverlay.call-active .call-avatar-orbit::after,#callOverlay.call-terminal .call-avatar-orbit::before,#callOverlay.call-terminal .call-avatar-orbit::after {animation:none;opacity:0;transition:opacity .5s}
#callOverlay .call-avatar {width:100%;height:100%;margin:0;display:grid;place-items:center;border-radius:50%;font-size:46px;font-weight:550;box-shadow:0 10px 32px rgba(0,0,0,.12);color:#fff}
#callOverlay #callTitle {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.025em;color:#fff;margin:0 0 10px}
#callOverlay .call-state {font-size:14px;line-height:20px;color:rgba(255,255,255,.78);min-height:20px}
#callOverlay .call-timer-row {display:flex;align-items:center;justify-content:center;gap:9px;color:rgba(255,255,255,.85);font-size:15px;line-height:20px;font-variant-numeric:tabular-nums}
#callOverlay .call-signal {display:flex;align-items:flex-end;gap:2px;height:13px}
#callOverlay .call-signal i {display:block;width:3px;border-radius:1px;background:currentColor}
#callOverlay .call-signal i:nth-child(1){height:4px}#callOverlay .call-signal i:nth-child(2){height:7px}#callOverlay .call-signal i:nth-child(3){height:10px}#callOverlay .call-signal i:nth-child(4){height:13px}
#callOverlay[data-quality="checking"] .call-signal i,#callOverlay[data-quality="medium"] .call-signal i:last-child,#callOverlay[data-quality="weak"] .call-signal i:nth-child(n+2){opacity:.25}
#callOverlay[data-quality="weak"] #callTimerRow {display:none}
#callOverlay .call-actions,#callOverlay .call-incoming {position:absolute;z-index:6;inset:auto 22px 36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start;padding:0!important;transition:opacity .22s,transform .22s;animation:callControlsIn .24s ease both}
#callOverlay .call-control {display:flex;align-items:center;flex-direction:column;gap:10px;min-width:0}
#callOverlay .call-control>span {font-size:11px;font-weight:500;line-height:14px;text-align:center;color:rgba(255,255,255,.85);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#callOverlay .call-action {display:grid;place-items:center;width:56px;height:56px;min-width:56px;min-height:56px;padding:0;border-radius:50%!important;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.13);color:#fff;cursor:pointer;transition:transform .16s,background .16s,opacity .16s;box-shadow:none}
#callOverlay .call-action svg {width:26px;height:26px}
#callOverlay .call-action.danger {background:#e85060!important;border-color:#e85060!important}
#callOverlay .call-action.success {background:#38b77b!important;border-color:#38b77b!important}
#callOverlay .call-action[aria-pressed="true"] {background:rgba(255,255,255,.92);color:#263d50}
#callOverlay .call-action:disabled {opacity:.35;cursor:default}
#callOverlay .call-action:hover:not(:disabled) {transform:scale(1.03);background:rgba(255,255,255,.22)}
#callOverlay .call-action:active:not(:disabled) {transform:scale(.97)}
#callOverlay button:focus-visible,#callReturnBtn:focus-visible {outline:3px solid #fff;outline-offset:5px}
#callOverlay .call-incoming {grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;inset-inline:55px}
#callOverlay .call-incoming .call-action {width:70px;height:70px}
#callOverlay .call-incoming .call-action svg {width:29px;height:29px}
#callOverlay.call-remote-ready .call-top {justify-content:flex-start;padding-top:96px;align-items:flex-start;padding-left:24px;padding-right:150px;text-align:left}
#callOverlay.call-remote-ready .call-avatar-orbit {display:none}
#callOverlay.call-remote-ready #callTitle {font-size:22px;margin-bottom:6px}
#callOverlay.call-remote-ready .call-top,#callOverlay.call-remote-ready .call-sub {text-shadow:0 2px 10px rgba(0,0,0,.5)}
#callOverlay.call-chrome-hidden .call-header,#callOverlay.call-chrome-hidden .call-top,#callOverlay.call-chrome-hidden .call-actions {opacity:0;transform:translateY(6px);pointer-events:none;visibility:hidden;transition:opacity .22s,transform .22s,visibility 0s .22s}
#callOverlay .call-card:fullscreen {width:100vw!important;height:100dvh!important;max-width:none;max-height:none;border-radius:0!important;resize:none!important}
#callReturnBtn {position:fixed;z-index:var(--z-call,900);right:22px;top:calc(16px + var(--sat,0px));display:flex;align-items:center;gap:12px;padding:12px 16px;max-width:calc(100vw - 32px);border:1px solid rgba(255,255,255,.2);border-radius:22px;background:#2b6067;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.24);cursor:pointer;pointer-events:auto}
#callReturnBtn>span {display:flex;flex-direction:column;gap:3px;max-width:180px;text-align:left}
#callReturnBtn b {font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
#callReturnBtn small {font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}
#callReturnBtn>svg:last-child {width:16px;transform:rotate(180deg)}
@supports (backdrop-filter:blur(12px)){
  #callOverlay .call-glass-btn,#callOverlay .call-action.secondary {backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}
@media(min-width:900px){
  #appPortalRoot>#callOverlay {justify-content:flex-end;align-items:flex-end}
  #callOverlay .call-card {margin:24px;resize:both;min-width:360px;max-width:calc(100vw - 48px)}
  #callOverlay[data-kind="video"] .call-card {width:min(760px,calc(100vw - 48px));height:min(540px,calc(100dvh - 48px))}
}
@media(max-width:899px), (pointer:coarse) and (max-height:500px){
  #callOverlay .call-card {width:100%!important;max-width:none;height:var(--vvh,100dvh)!important;min-height:0!important;max-height:none;border:0!important;border-radius:0!important;box-shadow:none;margin:0}
  #callOverlay .call-header {padding:calc(14px + var(--sat,env(safe-area-inset-top,0px))) max(20px,var(--sar,0px)) 14px max(20px,var(--sal,0px))}
  #callOverlay .call-top {padding-bottom:104px}
  #callOverlay .call-avatar-orbit {width:124px;height:124px}
  #callOverlay .call-actions,#callOverlay .call-incoming {bottom:calc(34px + var(--sab,env(safe-area-inset-bottom,0px)));inset-inline:20px}
  #callOverlay .call-action {width:58px;height:58px;min-width:58px;min-height:58px}
  #callOverlay .call-incoming {inset-inline:50px;gap:50px}
  #callOverlay #callLocalPreview {top:calc(90px + var(--sat,0px));width:110px;height:155px}
  #callOverlay.call-remote-ready .call-top {padding-top:calc(100px + var(--sat,0px))}
}
@container (max-height:480px){
  #callOverlay .call-avatar-orbit {width:82px;height:82px;margin-bottom:14px}
  #callOverlay .call-avatar {font-size:30px}
  #callOverlay .call-top {padding-bottom:65px}
  #callOverlay #callTitle {font-size:24px}
  #callOverlay .call-actions,#callOverlay .call-incoming {bottom:20px}
}
@media(max-height:500px) and (max-width:899px), (max-height:500px) and (pointer:coarse){
  #callOverlay .call-top {padding-bottom:72px;padding-top:35px}
  #callOverlay .call-avatar-orbit {width:76px;height:76px;margin-bottom:12px}
  #callOverlay .call-avatar {font-size:28px}
  #callOverlay #callTitle {font-size:23px}
  #callOverlay .call-actions,#callOverlay .call-incoming {bottom:calc(14px + var(--sab,0px));inset-inline:22%}
  #callOverlay .call-action {width:48px;height:48px;min-width:48px;min-height:48px}
  #callOverlay .call-control {gap:6px}
  #callOverlay .call-header {padding-top:10px}
}
@keyframes callMeshDrift {from{transform:translate(-4%,-2%) rotate(-6deg) scale(1)}to{transform:translate(4%,3%) rotate(7deg) scale(1.12)}}
@keyframes callRipple {from{transform:scale(.95);opacity:.4}to{transform:scale(1.22);opacity:0}}
@keyframes callSurfaceIn {from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes callControlsIn {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #callOverlay *,#callOverlay *::before,#callOverlay *::after {animation:none!important;transition:none!important}
}