/* v22 — المكالمات الصوتية والمرئية بهوية Jokt */
.call{position:fixed;inset:0;z-index:95;background:radial-gradient(70% 50% at 50% 30%,#3a1a6e,#0e0824 70%);color:#fff;overflow:hidden;font-family:Cairo,system-ui,sans-serif}
.call-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .3s}
.call.remote-video .call-remote{opacity:1}
.call-local{position:absolute;z-index:3;top:calc(16px + env(safe-area-inset-top));right:14px;width:104px;height:150px;border-radius:18px;object-fit:cover;background:#000;
  border:2px solid #ffffff40;box-shadow:0 8px 24px #0008;transform:scaleX(-1);touch-action:none}
.call.back-cam .call-local{transform:none}
.call.is-audio .call-local,.call.cam-off .call-local{display:none}
/* اسم الصديق والحالة */
.call-who{position:absolute;z-index:2;left:0;right:0;top:22%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:.3s}
.call-who img{width:110px;height:110px;border-radius:36px;object-fit:cover;border:3px solid transparent;
  background:linear-gradient(#0e0824,#0e0824) padding-box,linear-gradient(135deg,var(--pink,#ff2d87),var(--cyan,#38d1ec)) border-box;animation:callPulse 1.8s ease-in-out infinite}
.call.live .call-who img{animation:none}
.call-who b{font-size:22px}
.call-status{font-size:14px;color:#ffffffcc;direction:rtl}
.call.live .call-status{font:700 15px Poppins,Cairo,sans-serif;direction:ltr}
@keyframes callPulse{50%{box-shadow:0 0 0 14px #ff2d8722}}
/* عند وصول فيديو الصديق: الاسم يصغر أعلى الشاشة */
.call.remote-video .call-who{top:calc(18px + env(safe-area-inset-top));align-items:flex-start;padding:0 16px;flex-direction:row;gap:10px;text-shadow:0 1px 6px #000}
.call.remote-video .call-who img{width:40px;height:40px;border-radius:13px}
.call.remote-video .call-who b{font-size:16px}
.call.remote-video .call-who span{align-self:center}
/* أزرار التحكم */
.call-bar{position:absolute;z-index:4;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;align-items:center;
  padding:12px 8px;border-radius:26px;background:#140b30b8;border:1px solid #ffffff1c;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.call-bar button{display:flex;flex-direction:column;align-items:center;gap:2px;width:60px}
.call-bar button b{width:50px;height:50px;border-radius:18px;display:grid;place-items:center;font-size:21px;background:#ffffff17}
.call-bar button small{font-size:10px;color:#ffffffcc}
.call-bar button.off b{background:#fff;color:#0e0824;filter:grayscale(1)}
.call.is-audio .cb-flip{display:none}
.cb-end b{width:62px!important;height:62px!important;border-radius:22px!important;background:linear-gradient(135deg,#ff2d55,#ff2d87)!important;font-size:26px!important;transform:rotate(135deg);box-shadow:0 8px 22px #ff2d5566}
/* المكالمة الواردة */
.call-ring{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:24px;background:#0e0824e6;backdrop-filter:blur(8px);animation:ringIn .25s ease-out}
@keyframes ringIn{from{opacity:0}}
.cr-card{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;border-radius:28px;text-align:center;
  background:linear-gradient(160deg,#1f1446,#120a2c);border:1px solid #ffffff1a}
.cr-card img{width:96px;height:96px;border-radius:32px;object-fit:cover;animation:callPulse 1.4s ease-in-out infinite}
.cr-card b{font-size:20px;margin-top:6px;color:#fff}
.cr-card small{color:#ffffffcc;font-size:13px}
.cr-btns{display:flex;gap:12px;width:100%;margin-top:16px}
.cr-btns button{flex:1;padding:13px;border-radius:18px;font-weight:800;font-size:15px;color:#fff}
.cr-no{background:#ff2d55}
.cr-yes{background:linear-gradient(135deg,#1fd17a,var(--cyan,#38d1ec));animation:yesShake 1.2s ease-in-out infinite}
@keyframes yesShake{0%,60%,100%{transform:none}70%{transform:rotate(-4deg)}80%{transform:rotate(4deg)}90%{transform:rotate(-2deg)}}
/* أزرار الاتصال في رأس المحادثة وصفحة الحساب */
.call-btns{display:flex;gap:6px;margin-inline-start:auto}
.call-btns button{width:38px;height:38px;border-radius:13px;background:#ffffff12;font-size:17px}
.call-prof{flex:none;width:48px;padding-inline:0}
.call-log-btn{display:block;width:100%;margin:6px 0 10px;padding:11px 14px;border-radius:16px;text-align:start;font-weight:800;font-size:14px;
  background:linear-gradient(135deg,#ff2d871f,#38d1ec1f);border:1px solid #ff2d8744}
.cl-row .cl-call{margin-inline-start:auto;width:40px;height:40px;border-radius:14px;background:#ffffff12;font-size:18px}
.cl-row.missed b,.cl-row.declined b{color:#ff5a7a}
/* v24.4 — أيقونات المكالمة العصرية */
.call-bar button b svg{width:24px;height:24px}
.call-bar button.off b{position:relative;filter:none}
.call-bar button.off b::after{content:'';position:absolute;width:30px;height:2.5px;border-radius:2px;background:#0e0824;transform:rotate(-45deg)}
.cb-end b svg{width:28px;height:28px;color:#fff}