
/* ===== تماس صوتی ===== */
.cp-call-ic{width:38px;height:38px;border-radius:12px;border:0;background:linear-gradient(140deg,#4be38b,#14b866);display:grid;place-items:center;cursor:pointer;color:#fff;box-shadow:0 6px 14px -6px rgba(20,184,102,.8)}
.cp-call-ic svg{width:18px;height:18px}
.cp-call-ic.off{background:rgba(120,120,140,.12);color:#8a8fa3;box-shadow:none}.cp-call-ic.off svg{fill:#8a8fa3}
.cp-call-ic{position:relative}
.cp-call-ic.ring{animation:callRing 1.3s ease-in-out 3}
.cp-call-ic.ring::after{content:'';position:absolute;inset:-4px;border-radius:15px;border:2px solid #4be38b;opacity:0;animation:callRip 1.3s ease-out 3}
@keyframes callRing{0%,100%{transform:scale(1) rotate(0)}15%{transform:scale(1.2) rotate(-16deg)}30%{transform:scale(1.2) rotate(14deg)}45%{transform:scale(1.2) rotate(-10deg)}60%{transform:scale(1.1) rotate(7deg)}}
@keyframes callRip{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.55)}}
.callmsg{display:flex;flex-direction:column;gap:5px;min-width:190px}
.callmsg b{font-size:14px}.callmsg small{font-size:12px;opacity:.75;line-height:1.7}
.callmsg-btn{margin-top:4px;border:0;border-radius:12px;padding:9px 16px;background:linear-gradient(140deg,#4be38b,#14b866);color:#fff;font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.callmsg-btn:disabled{opacity:.6;cursor:default}
.callmsg.ok b{color:#1b7a4a}
.cp-callrow{align-items:flex-start;animation:cuIn .2s ease}.cp-callrow small{margin-top:3px;line-height:1.8}
.pv-act.call{width:54px;min-width:54px;flex:none;background:linear-gradient(140deg,#4be38b,#14b866)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 10px 22px -10px rgba(20,184,102,.8)}
.pv-act.call svg{width:24px;height:24px}
#micHelp{position:fixed;inset:0;z-index:100000;display:none;background:rgba(15,8,30,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#fff;font-family:inherit}
#micHelp.on{display:block;animation:cuIn .25s ease}
#micHelp .mh-box{position:absolute;left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 70px);background:#fff;color:#2a1648;border-radius:24px;padding:20px 18px;text-align:center;box-shadow:0 20px 50px -10px rgba(0,0,0,.5)}
#micHelp .mh-ic{width:58px;height:58px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;background:linear-gradient(140deg,#4be38b,#14b866);color:#fff;font-size:28px}
#micHelp b{font-size:17px;display:block;margin-bottom:8px}
#micHelp p{font-size:13.5px;line-height:2;margin:0}
#micHelp .mh-k{display:inline-block;direction:ltr;background:#1f6feb;color:#fff;border-radius:10px;padding:2px 10px;margin:2px;font-weight:800;font-size:13px}
#micHelp .mh-no{display:inline-block;direction:ltr;background:#eee;color:#888;border-radius:10px;padding:2px 10px;margin:2px;font-size:12px;text-decoration:line-through}
#micHelp .mh-arw{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 38%);transform:translateX(-50%);font-size:58px;animation:mhB 1s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
#micHelp .mh-tip{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 30%);text-align:center;font-weight:900;font-size:16px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
@keyframes mhB{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,14px)}}

.cp-callrow{display:flex;align-items:center;gap:10px;margin:8px 12px 0;padding:9px 12px;border-radius:16px;background:rgba(255,255,255,.85);border:1px solid rgba(20,184,102,.25);font-size:13px;font-weight:700;color:#24563c}
.cp-callrow small{display:block;font-weight:500;font-size:11.5px;color:#6c8f7b}
.cp-callrow .switch{margin-inline-start:auto}
html.dark .cp-callrow{background:rgba(30,26,48,.85);color:#b9f3d2}
.call-card{margin-top:24px}
.vip-tag{display:inline-block;font-size:11px;font-weight:800;color:#b07a00;background:#fff3cf;border-radius:99px;padding:1px 8px;margin-inline-start:4px;vertical-align:1px}
.call-card .cc-opt{display:flex;align-items:center;gap:10px;padding:11px 2px;border-top:1px dashed rgba(140,110,190,.22);font-size:13.5px;cursor:pointer}
.call-card .cc-opt:first-of-type{border-top:0}
.call-card .cc-rd{width:20px;height:20px;border-radius:50%;border:2px solid #c9b8e8;flex:none;transition:.2s}
.call-card .cc-opt.on .cc-rd{border:6px solid #7c5cfc}
.call-card .cc-note{margin-top:12px;background:rgba(20,184,102,.09);color:#1b7a4a;border-radius:14px;padding:10px 12px;font-size:12.5px;line-height:1.9;display:flex;gap:8px}
html.dark .call-card .cc-note{color:#9be8bf}
.call-card .cc-sub{font-size:12px;opacity:.7;margin:2px 0 8px;line-height:1.8}
#callUI{position:fixed;inset:0;z-index:99999;color:#fff;display:none;font-family:inherit;overflow:hidden;touch-action:none}
#callUI.on{display:block;animation:cuIn .35s ease}
@keyframes cuIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
#callUI .cu-bg{position:absolute;inset:-60px;background:radial-gradient(circle at 30% 18%,#ff8fb8 0,transparent 45%),radial-gradient(circle at 80% 72%,#7c5cfc 0,transparent 52%),linear-gradient(160deg,#2a1450,#120a24);transition:background .6s}
#callUI.live .cu-bg{background:radial-gradient(circle at 70% 22%,#6ee7b7 0,transparent 40%),radial-gradient(circle at 20% 76%,#7c5cfc 0,transparent 52%),linear-gradient(160deg,#1d1446,#0d0a1f)}
#callUI .cu-photo{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(38px) saturate(1.3);opacity:.45}
#callUI .cu-sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,8,40,.1),rgba(20,8,40,.78))}
#callUI .cu-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 26px);left:0;right:0;text-align:center}
#callUI .cu-pill{display:inline-flex;gap:6px;align-items:center;font-size:12px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px 13px;border-radius:99px;border:1px solid rgba(255,255,255,.2)}
#callUI .cu-av{position:absolute;top:24%;left:50%;width:150px;height:150px;transform:translateX(-50%)}
#callUI .cu-av .cu-img{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.85);box-shadow:0 0 60px rgba(255,120,180,.55);background:linear-gradient(140deg,#ffb3cf,#b18cff)}
#callUI.live .cu-av .cu-img{box-shadow:0 0 60px rgba(110,231,183,.5)}
#callUI .cu-img img,#callUI .cu-img>div{width:100%;height:100%;object-fit:cover}
#callUI .cu-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,170,210,.6);animation:cuRing 2.4s ease-out infinite}
#callUI .cu-ring:nth-child(2){animation-delay:.8s}#callUI .cu-ring:nth-child(3){animation-delay:1.6s}
#callUI.live .cu-ring{border-color:rgba(110,231,183,.55);animation-duration:3.2s}
@keyframes cuRing{from{transform:scale(1);opacity:.9}to{transform:scale(2.1);opacity:0}}
#callUI .cu-nm{position:absolute;top:calc(24% + 190px);left:0;right:0;text-align:center;padding:0 20px}
#callUI .cu-nm b{display:block;font-size:30px;font-weight:900;text-shadow:0 4px 20px rgba(0,0,0,.3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#callUI .cu-st{font-size:15px;opacity:.88;margin-top:8px;display:inline-flex;gap:8px;align-items:center}
#callUI .cu-dots i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin:0 2px;animation:cuDot 1.2s infinite}
#callUI .cu-dots i:nth-child(2){animation-delay:.2s}#callUI .cu-dots i:nth-child(3){animation-delay:.4s}
@keyframes cuDot{0%,100%{opacity:.25}50%{opacity:1}}
#callUI .cu-tm{font-size:22px;font-weight:800;letter-spacing:1px;direction:ltr;margin-top:6px;display:none}
#callUI.live .cu-tm{display:block}#callUI.live .cu-st{display:none}
#callUI .cu-wave{display:none;gap:4px;justify-content:center;align-items:center;height:42px;margin-top:14px}
#callUI.live .cu-wave{display:flex}
#callUI .cu-wave i{width:4px;height:8px;border-radius:4px;background:linear-gradient(#ffd1e4,#b18cff);transition:height .12s}
#callUI .cu-bot{direction:ltr;position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 54px);left:0;right:0;display:flex;justify-content:space-evenly;align-items:flex-end;padding:0 18px}
#callUI .cu-b{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;font-weight:700;background:none;border:0;color:#fff;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#callUI .cu-b .c{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;transition:transform .15s}
#callUI .cu-b:active .c{transform:scale(.92)}
#callUI .cu-b svg{width:31px;height:31px}
#callUI .red{background:linear-gradient(140deg,#ff6b7d,#e8264a);box-shadow:0 12px 30px -6px rgba(232,38,74,.7)}
#callUI .grn{background:linear-gradient(140deg,#4be38b,#14b866);box-shadow:0 12px 30px -6px rgba(20,184,102,.8);animation:cuPulse 1.3s infinite}
@keyframes cuPulse{0%{box-shadow:0 0 0 0 rgba(75,227,139,.55)}100%{box-shadow:0 0 0 26px rgba(75,227,139,0)}}
#callUI .gl{background:rgba(255,255,255,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25)}
#callUI .gl.on{background:#fff;color:#3a1f5c}
#callUI [data-s]{display:none}
#callUI.s-in [data-s~="in"],#callUI.s-out [data-s~="out"],#callUI.s-conn [data-s~="conn"],#callUI.live [data-s~="live"]{display:flex}
