/* ═══ v253 · صفحهٔ تماس پیوی — «شفق یاسی» (رنگ‌ها و پس‌زمینه از پنل) ═══ */
#call107{ --ca:#8b5cf6; --cb:#ec4899; background:#1a0f33 }
#call107 .c7-bg{ filter:blur(42px) brightness(.55) saturate(1.35); background-color:#2a1745 }
#call107 .c7-bg.cfg{ inset:0; filter:none; transform:none }
#call107 .c7-bg::after{ background:linear-gradient(180deg, rgba(26,15,51,.25), rgba(26,15,51,.55) 55%, rgba(16,8,32,.92)) }
.c7-aur{ position:absolute; inset:0; overflow:hidden; pointer-events:none; mix-blend-mode:screen; opacity:.7 }
.c7-aur i{ position:absolute; width:70vmax; height:70vmax; border-radius:50%; filter:blur(60px); opacity:.55; animation:c7aur 14s ease-in-out infinite alternate }
.c7-aur i:nth-child(1){ left:-30vmax; top:-25vmax; background:var(--ca) }
.c7-aur i:nth-child(2){ right:-35vmax; top:10vmax; background:var(--cb); animation-delay:-5s; animation-duration:17s }
.c7-aur i:nth-child(3){ left:-10vmax; bottom:-45vmax; background:#38bdf8; opacity:.28; animation-delay:-9s; animation-duration:20s }
@keyframes c7aur{ 0%{ transform:translate(0,0) scale(1) } 100%{ transform:translate(8vmax,6vmax) scale(1.15) } }
.c7-vig{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 80% at 50% 40%, transparent 50%, rgba(10,4,24,.55)) }
#call107.rvid .c7-aur, #call107.rvid .c7-vig{ display:none }

/* بالا */
#call107 .c7-top{ flex-direction:row; justify-content:space-between; align-items:center; gap:8px; padding:0 14px; top:calc(12px + env(safe-area-inset-top)) }
.c7-tb{ display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:14px; cursor:pointer; color:#fff; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) }
.c7-tb svg{ width:19px; height:19px }
#call107.st-incoming .c7-tb, #call107.st-ended .c7-tb{ visibility:hidden }
#call107 .c7-lock{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; opacity:.85; padding:5px 11px; border-radius:99px; background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
#call107 .c7-lock svg{ width:12px; height:12px; color:#86efac }
.c7-sig{ display:inline-flex; align-items:flex-end; gap:2px; width:40px; height:40px; justify-content:center; padding-bottom:13px; box-sizing:border-box; border-radius:14px; background:rgba(255,255,255,.1) }
.c7-sig i{ width:3.5px; border-radius:2px; background:rgba(255,255,255,.3) }
.c7-sig i:nth-child(1){ height:5px } .c7-sig i:nth-child(2){ height:8px } .c7-sig i:nth-child(3){ height:11px } .c7-sig i:nth-child(4){ height:14px }
.c7-sig.q4 i, .c7-sig.q3 i:nth-child(-n+3){ background:#86efac } .c7-sig.q1 i:nth-child(1){ background:#fca5a5 }
#call107:not(.st-live) .c7-sig{ visibility:hidden }
#call107 .c7-q{ position:absolute; z-index:3; left:50%; transform:translateX(-50%); top:calc(62px + env(safe-area-inset-top)); white-space:nowrap }

/* وسط */
#call107 .c7-mid{ top:15% }
#call107 .c7-av{ --lv:0; width:150px; height:150px; margin-bottom:16px }
#call107 .c7-av .r1, #call107 .c7-av .r2, #call107 .c7-av .r3{ position:absolute; inset:0; border-radius:50%; border:0; background:radial-gradient(circle, transparent 58%, color-mix(in srgb,var(--ca) 55%,transparent) 60%, transparent 72%); animation:c7ring 2.4s ease-out infinite }
#call107 .c7-av .r2{ animation-delay:.8s; background:radial-gradient(circle, transparent 58%, color-mix(in srgb,var(--cb) 50%,transparent) 60%, transparent 72%) }
#call107 .c7-av .r3{ animation-delay:1.6s }
#call107.st-live .c7-av .r1, #call107.st-live .c7-av .r2, #call107.st-live .c7-av .r3{ display:block; animation:none; opacity:calc(.25 + var(--lv) * 1.2); transition:transform .12s linear, opacity .12s }
#call107.st-live .c7-av .r1{ transform:scale(calc(1.08 + var(--lv) * .35)) } #call107.st-live .c7-av .r2{ transform:scale(calc(1.18 + var(--lv) * .6)) } #call107.st-live .c7-av .r3{ transform:scale(calc(1.3 + var(--lv) * .9)); opacity:calc(var(--lv) * .9) }
#call107.st-ended .c7-av .r3{ display:none }
#call107 .c7-pic{ background:linear-gradient(135deg,var(--ca),var(--cb)); box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 0 8px color-mix(in srgb,var(--ca) 35%,transparent), 0 24px 60px rgba(10,0,30,.6) }
#call107 .c7-av.talk .c7-pic{ box-shadow:0 0 0 3px #fff, 0 0 0 8px color-mix(in srgb,#86efac 45%,transparent), 0 24px 60px rgba(10,0,30,.6) }
.c7-kind{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:900; letter-spacing:.3px; padding:4px 11px; border-radius:99px; color:#fff; background:linear-gradient(135deg,color-mix(in srgb,var(--ca) 70%,transparent),color-mix(in srgb,var(--cb) 60%,transparent)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25) }
.c7-kind svg{ width:13px; height:13px }
#call107 .c7-name{ font-size:27px; letter-spacing:.2px }
#call107 .c7-st{ display:inline-flex; align-items:center; gap:2px; font-size:14.5px; opacity:.9 }
#call107 .c7-st.tm{ padding:5px 14px; border-radius:99px; font-size:15px; font-weight:900; letter-spacing:1px; background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
#call107 .c7-st.tm::before{ content:""; width:7px; height:7px; margin-inline-end:7px; border-radius:50%; background:#f43f5e; box-shadow:0 0 0 0 rgba(244,63,94,.6); animation:c7rec 1.6s ease-out infinite }
@keyframes c7rec{ 70%{ box-shadow:0 0 0 7px rgba(244,63,94,0) } }
.c7-dots{ display:inline-flex; gap:3px; margin-inline-start:4px } .c7-dots u{ width:4px; height:4px; border-radius:50%; background:currentColor; animation:c7dot 1.2s infinite } .c7-dots u:nth-child(2){ animation-delay:.2s } .c7-dots u:nth-child(3){ animation-delay:.4s }
@keyframes c7dot{ 0%,80%,100%{ opacity:.25; transform:translateY(0) } 40%{ opacity:1; transform:translateY(-3px) } }
#call107.rvid .c7-mid{ top:auto; bottom:210px }
#call107.rvid .c7-kind{ display:none }

/* تصویر */
#call107 .c7-local{ border-radius:20px; border:2px solid rgba(255,255,255,.75); box-shadow:0 14px 30px rgba(0,0,0,.5), 0 0 0 4px color-mix(in srgb,var(--ca) 35%,transparent); top:calc(66px + env(safe-area-inset-top)) }
#call107.swap .c7-local{ left:0 !important; top:0 !important; right:auto; width:100%; height:100%; border:0; border-radius:0; box-shadow:none; z-index:1 }
#call107.swap .c7-remote{ position:absolute; z-index:4; inset:auto; right:14px; top:calc(66px + env(safe-area-inset-top)); width:108px; height:150px; border-radius:20px; border:2px solid rgba(255,255,255,.75) }

/* واکنش‌ها */
.c7-fx{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden }
.c7-fx i{ position:absolute; bottom:180px; left:var(--x); font-style:normal; font-size:38px; animation:c7fly 2.6s cubic-bezier(.2,.7,.3,1) forwards; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)) }
@keyframes c7fly{ 0%{ transform:translateY(0) scale(.4) rotate(0); opacity:0 } 12%{ opacity:1; transform:translateY(-30px) scale(1.15) rotate(var(--r)) } 100%{ transform:translateY(-55vh) scale(.9) rotate(calc(var(--r) * -1)); opacity:0 } }
.c7-rx{ position:absolute; z-index:5; left:50%; transform:translateX(-50%); bottom:calc(148px + env(safe-area-inset-bottom)); display:flex; gap:4px; padding:5px; border-radius:99px; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) }
.c7-rx:empty{ display:none }
.c7-rx button{ width:38px; height:38px; padding:0; border:0; border-radius:50%; cursor:pointer; font-size:20px; background:transparent; transition:transform .12s }
.c7-rx button:active{ transform:scale(1.35) }

/* داک کنترل */
#call107 .c7-ctl{ bottom:calc(22px + env(safe-area-inset-bottom)); padding:0 12px }
.c7-dock{ display:flex; justify-content:center; align-items:flex-start; gap:14px; padding:14px 16px 10px; border-radius:30px; background:rgba(255,255,255,.1); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 20px 40px -20px rgba(0,0,0,.6) }
.c7-dock.in{ gap:46px; padding:18px 28px 12px; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none }
#call107 .c7-b{ width:56px; height:56px }
.c7-dock.in .c7-b{ width:68px; height:68px }
#call107 .c7-b svg{ width:22px; height:22px }
#call107 .c7-b.glass{ background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2) }
#call107 .c7-b.glass.on{ background:#fff; color:#4C1D95 }
#call107 .c7-b.talk{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 0 0 3px #86efac }
#call107 .c7-b.red{ background:linear-gradient(135deg,#fb7185,#e11d48); box-shadow:0 12px 26px -8px rgba(225,29,72,.8) }
#call107 .c7-b.red svg{ width:28px; height:28px }
#call107 .c7-b.green{ background:linear-gradient(135deg,#4ade80,#16a34a); box-shadow:0 12px 26px -8px rgba(22,163,74,.85) }
#call107 .c7-b.green.pulse{ animation:c7wave 1.5s ease-out infinite }
@keyframes c7wave{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.7), 0 12px 26px -8px rgba(22,163,74,.85) } 100%{ box-shadow:0 0 0 22px rgba(74,222,128,0), 0 12px 26px -8px rgba(22,163,74,.85) } }
.c7-dock.in .c7-b.green svg{ animation:c7shake 1.5s ease-in-out infinite }
@keyframes c7shake{ 0%,60%,100%{ transform:rotate(0) } 65%,75%,85%{ transform:rotate(-14deg) } 70%,80%,90%{ transform:rotate(14deg) } }
#call107 .c7-col span{ font-size:10.5px; opacity:.88 }

/* پایان تماس */
.c7-end{ position:absolute; z-index:6; left:0; right:0; bottom:calc(40px + env(safe-area-inset-bottom)); display:flex; justify-content:center; padding:0 16px }
.c7-end:empty{ display:none }
.c7-sum{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:360px; padding:16px; border-radius:26px; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); animation:c7up .3s ease }
@keyframes c7up{ from{ opacity:0; transform:translateY(20px) } }
.c7-sum > span{ display:flex; flex-direction:column; align-items:center; gap:2px } .c7-sum > span small{ font-size:11px; font-weight:800; opacity:.75 } .c7-sum > span b{ font-size:22px; font-weight:900; direction:ltr }
.c7-sumb{ display:flex; gap:8px; width:100%; }
.c7-sumb button{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:46px; border:0; border-radius:16px; cursor:pointer; font:inherit; font-size:13px; font-weight:900; color:#fff; background:linear-gradient(135deg,#4ade80,#16a34a) }
.c7-sumb button.g{ background:rgba(255,255,255,.18) } .c7-sumb svg{ width:17px; height:17px }

/* کوچک‌شده */
#call107.on.mini{ display:block; visibility:hidden; pointer-events:none }
#call107.on.mini.st-ended{ visibility:visible; pointer-events:auto }
#c7mini{ --lv:0; position:fixed; z-index:160; right:14px; top:calc(140px + env(safe-area-inset-top)); display:none; align-items:center; gap:8px; padding:5px 12px 5px 5px; border:0; border-radius:99px; cursor:pointer; touch-action:none; font:inherit; color:#fff;
  background:linear-gradient(135deg,#22c55e,#15803d); box-shadow:0 0 0 calc(var(--lv) * 10px) rgba(74,222,128,.35), 0 12px 26px -8px rgba(21,128,61,.85) }
#c7mini.on{ display:flex; animation:c7up .25s ease }
#c7mini .mp{ width:38px; height:38px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,#8b5cf6,#ec4899); box-shadow:0 0 0 2px #fff }
#c7mini .mp img{ width:100%; height:100%; object-fit:cover } #c7mini .mp b{ font-size:16px; font-weight:900 } #c7mini .mp svg{ width:18px; height:18px }
#c7mini .mt{ font-size:13px; font-weight:900; direction:ltr; letter-spacing:.5px }
#c7mini .mw{ display:inline-flex; align-items:center; gap:2px; height:14px } #c7mini .mw u{ width:3px; height:6px; border-radius:2px; background:#fff; animation:c7eq .9s ease-in-out infinite alternate } #c7mini .mw u:nth-child(2){ animation-delay:-.3s } #c7mini .mw u:nth-child(3){ animation-delay:-.6s }
@keyframes c7eq{ to{ height:14px } }
@media (prefers-reduced-motion:reduce){ .c7-aur i, .c7-fx i, #call107 .c7-b.green.pulse, .c7-dock.in .c7-b.green svg, #c7mini .mw u, .c7-dots u{ animation:none !important } }