/* Internal (رَسان user-to-user) voice/video call screen — public/call-ui.js.
   Audio call: iOS-style — one big avatar + name + status, round blurred controls pinned to the
   bottom. Video call: the remote video fills the whole screen (WhatsApp/Meet-style), name + status
   sit in a top scrim, the self-view is a tappable picture-in-picture that swaps with the main
   video, and the controls float in a pill over the video so the hang-up is ALWAYS on screen. */
.call-overlay{position:fixed;z-index:500;inset:0;display:flex;color:#fff;background:radial-gradient(120% 90% at 50% -10%,#33474250 0,transparent 60%),linear-gradient(180deg,#22322e 0,#0c1412 55%,#070b0a 100%)}
.call-overlay[hidden]{display:none}

/* Any `hidden` group must actually disappear — author `display:` rules below would otherwise
   outrank the UA `[hidden]{display:none}`. */
.call-actions[hidden],#call-end[hidden],.call-control[hidden],#local-video[hidden]{display:none!important}

.call-card{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(46px + env(safe-area-inset-top)) 20px calc(150px + env(safe-area-inset-bottom));animation:call-screen-in .28s ease}
@keyframes call-screen-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

.call-avatar{position:relative;width:120px;height:120px;flex:none;border-radius:50%;margin:9vh 0 0;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;font-size:42px;font-weight:700;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.call-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.call-overlay[data-call-mode="incoming"] .call-avatar::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(50,201,87,.55);animation:call-halo 1.8s ease-out infinite}
@keyframes call-halo{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}

.call-card h2{margin:12px 0 0;font-size:26px;font-weight:800;letter-spacing:.5px}
.call-card p{margin:8px 0 0;color:rgba(255,255,255,.7);font-size:14px;font-weight:500;letter-spacing:.3px}
#call-presence{font-size:12px;color:rgba(255,255,255,.55)}
#call-presence:empty,#call-roster:empty{display:none}
#call-roster{font-size:12px;color:rgba(255,255,255,.55);overflow-wrap:anywhere}

/* ---------- controls: a bottom bar that is ALWAYS on screen ---------- */
.call-card .call-actions{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:center;gap:16px 20px;padding:0 16px;max-width:400px;margin:0 auto}
.call-control{display:flex;flex-direction:column;align-items:center;gap:8px}
.call-control span{font-size:11px;font-weight:500;color:rgba(255,255,255,.78);white-space:nowrap}
.call-actions button{width:64px;height:64px;flex:none;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s ease,transform .1s ease}
.call-actions button:hover{background:rgba(255,255,255,.22)}
.call-actions button:active{transform:scale(.93)}
.call-actions button svg{width:24px;height:24px}
.call-actions #call-mic.muted,.call-actions #call-camera.muted,.call-actions #call-speaker.active{background:#fff;color:#0d1513}
.call-actions #call-flip:disabled{opacity:.5}
.call-actions .call-end-live{background:linear-gradient(180deg,#ff4b57,#e0212f);box-shadow:0 10px 26px rgba(224,33,47,.5)}

.call-actions .call-accept,.call-actions .call-reject{width:70px;height:70px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.call-actions .call-accept{background:linear-gradient(180deg,#3ad866,#23b24c)}
.call-actions .call-reject{background:linear-gradient(180deg,#ff4b57,#e0212f)}
.call-overlay[data-call-mode="incoming"] .call-actions .call-accept{animation:call-answer-bob 1.6s ease-in-out infinite}
@keyframes call-answer-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Big iOS-style hang-up — audio calls only (setMode hides it on video, where the red control in
   the row above is the hang-up instead, so it can never be buried under the video). */
.call-end{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:transparent;color:rgba(255,255,255,.75);cursor:pointer;font-size:12px;font-weight:500}
.call-end-icon{width:70px;height:70px;flex:none;border-radius:50%;background:linear-gradient(180deg,#ff4b57,#e0212f);display:grid;place-items:center;box-shadow:0 12px 30px rgba(224,33,47,.5);transition:transform .1s ease}
.call-end-icon svg{width:28px;height:28px;color:#fff}
.call-end:active .call-end-icon{transform:scale(.94)}
/* When the big button shows (audio), the live row sits above it; when it's hidden (video), the
   row drops to the bottom itself. */
.call-overlay:not(.video) .call-actions-live{bottom:calc(118px + env(safe-area-inset-bottom))}

/* ---------- video call: fullscreen remote, PiP self-view ---------- */
.call-tiles{position:absolute;inset:0;z-index:0;display:none;gap:2px;background:#050807}
.call-overlay.video .call-tiles:not(:empty){display:grid}
.call-overlay.video .call-tiles[data-count="1"]{grid-template-columns:1fr}
.call-overlay.video .call-tiles[data-count="2"]{grid-template-columns:1fr;grid-auto-rows:1fr}
.call-overlay.video .call-tiles[data-count="3"],.call-overlay.video .call-tiles[data-count="4"]{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
.call-tile{position:relative;overflow:hidden;background:#0b1614}
.call-tile video{width:100%;height:100%;object-fit:cover;display:block}
.call-tile-name{position:absolute;right:10px;bottom:8px;left:10px;color:#fff;font-size:12px;text-shadow:0 1px 3px #000b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#local-video{position:absolute;object-fit:cover;background:#0b1614;display:none}
#local-video.mirror{transform:scaleX(-1)}
.call-overlay.video #local-video{display:block;z-index:2;top:calc(78px + env(safe-area-inset-top));inset-inline-end:14px;width:104px;height:150px;border-radius:16px;border:2px solid rgba(255,255,255,.25);box-shadow:0 10px 26px #0009;cursor:pointer}
/* Tap-to-swap: the self-view fills the screen, the remote shrinks to the PiP slot. */
.call-overlay.video.swapped #local-video{top:0;inset-inline-end:0;width:100%;height:100%;border:0;border-radius:0;transform:none}
.call-overlay.video.swapped #local-video.mirror{transform:scaleX(-1)}
.call-overlay.video.swapped .call-tiles{position:absolute;inset:auto 14px auto auto;top:calc(78px + env(safe-area-inset-top));z-index:1;width:104px;height:150px;border-radius:16px;overflow:hidden;border:2px solid rgba(255,255,255,.25)}
.call-overlay.video.swapped .call-tile-name{display:none}

/* Video mode: name/status become a compact top scrim; the big avatar is not used. */
.call-overlay.video .call-card{justify-content:flex-start;padding-top:0}
.call-overlay.video .call-avatar,.call-overlay.video #call-presence,.call-overlay.video #call-roster{display:none}
.call-overlay.video .call-card h2{z-index:3;margin-top:calc(18px + env(safe-area-inset-top));font-size:19px;text-shadow:0 1px 8px #000a}
.call-overlay.video .call-card p{z-index:3;text-shadow:0 1px 8px #000a}
.call-overlay.video::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;z-index:1;background:linear-gradient(180deg,#000a,transparent);pointer-events:none}
.call-overlay.video .call-actions-live{z-index:3;background:rgba(10,16,14,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:26px;padding:12px 8px;gap:12px 14px}
.call-overlay.video .call-actions button{background:rgba(255,255,255,.16)}

/* audio-only: hide video bits entirely */
.call-overlay.audio-only .call-tiles,.call-overlay.audio-only #local-video{display:none!important}

/* iOS foreground audio: CallKit has already supplied the one and only Answer UI. After the call
   connects, keep the conversation visible and add only a compact, native-looking live-control
   sheet. This intentionally does not contain the incoming green/red buttons. */
.call-overlay.ios-connected-controls{inset:auto 12px calc(12px + env(safe-area-inset-bottom));height:226px;border-radius:26px;background:linear-gradient(180deg,rgba(34,50,46,.97),rgba(7,11,10,.98));box-shadow:0 18px 52px #0008;overflow:hidden}
.call-overlay.ios-connected-controls .call-card{padding:18px 16px 126px;animation:call-controls-up .24s ease}
@keyframes call-controls-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.call-overlay.ios-connected-controls .call-avatar,.call-overlay.ios-connected-controls #call-presence,.call-overlay.ios-connected-controls #call-roster,.call-overlay.ios-connected-controls #call-add-control{display:none!important}
.call-overlay.ios-connected-controls .call-card h2{margin:0;font-size:19px}
.call-overlay.ios-connected-controls .call-card p{margin-top:5px}
.call-overlay.ios-connected-controls .call-actions-live{bottom:66px;gap:22px}
.call-overlay.ios-connected-controls .call-actions-live button{width:54px;height:54px}
.call-overlay.ios-connected-controls .call-control span{font-size:10px}
.call-overlay.ios-connected-controls .call-end{right:16px;left:16px;bottom:10px;flex-direction:row;justify-content:center;height:48px;border-radius:16px;background:linear-gradient(180deg,#ff4b57,#e0212f);color:#fff;font-size:13px;font-weight:700}
.call-overlay.ios-connected-controls .call-end-icon{width:auto;height:auto;background:transparent;box-shadow:none}
.call-overlay.ios-connected-controls .call-end-icon svg{width:22px;height:22px}

/* ---------- add-participant picker ---------- */
.call-add-picker{position:absolute;z-index:6;right:20px;left:20px;bottom:calc(180px + env(safe-area-inset-bottom));max-height:44vh;overflow:auto;border-radius:18px;background:#12201d;box-shadow:0 16px 40px #000b;padding:12px}
.call-add-picker header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:#fff;font-size:13px}
.call-add-picker header svg{width:15px;height:15px}
.call-add-close{border:0;background:transparent;color:rgba(255,255,255,.7);cursor:pointer;display:grid;place-items:center;width:26px;height:26px;border-radius:50%}
.call-add-close:hover{background:#ffffff1f}
.call-add-item{display:block;width:100%;text-align:right;border:0;background:transparent;color:#e7f5f1;padding:11px 8px;border-radius:10px;cursor:pointer;font:inherit;font-size:13px}
.call-add-item:hover{background:#ffffff14}
.call-add-empty{color:rgba(255,255,255,.55);font-size:12px;text-align:center;padding:12px 0;margin:0}

@media(min-width:721px){
  .call-overlay.video .call-card{max-width:none}
  .call-overlay.video #local-video,.call-overlay.video.swapped .call-tiles{width:150px;height:210px}
}
/* Call quality indicator (call-ui.js setCallQuality) */
.call-quality{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 0;font-size:12.5px;color:inherit;opacity:.92}
.call-quality-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.call-quality-bars i{display:block;width:4px;border-radius:2px;background:currentColor;opacity:.3}
.call-quality-bars i:nth-child(1){height:5px}.call-quality-bars i:nth-child(2){height:9px}.call-quality-bars i:nth-child(3){height:14px}
.call-quality[data-level="good"] .call-quality-bars i{opacity:1;background:#34c759}
.call-quality[data-level="fair"] .call-quality-bars i:nth-child(-n+2){opacity:1;background:#ffcc00}
.call-quality[data-level="poor"] .call-quality-bars i:nth-child(1){opacity:1;background:#ff3b30}