:root{--ink:#0c2230;--teal:#17a38f;--teal-d:#0f7a6b;--red:#e5484d;--paper:#f3f7f8}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Vazirmatn,"IRANSans",Tahoma,"Segoe UI",sans-serif;color:#fff;background:var(--ink)}
.scene{min-height:100%;display:flex;align-items:center;justify-content:center;position:relative;
  background:#12384a linear-gradient(160deg,#0c2230 0%,#134b57 55%,#0f6b66 100%);background-size:cover;background-position:center}
.veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,24,34,.55),rgba(8,24,34,.78))}
.phone{position:relative;z-index:1;width:min(92vw,400px);min-height:min(88vh,680px);display:flex;flex-direction:column;align-items:center;
  padding:max(40px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));text-align:center}
.avatar{position:relative;width:132px;height:132px;margin:24px 0 20px}
.face{position:absolute;inset:14px;border-radius:50%;background:#f3f7f8;color:var(--ink);display:grid;place-items:center;font-size:44px;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(23,163,143,.0)}
.speaking .ring{animation:pulse 1.6s ease-out infinite;border-color:rgba(23,163,143,.8)}
.speaking .r2{animation-delay:.8s}
@keyframes pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.35);opacity:0}}
h1{margin:6px 0 2px;font-size:26px;font-weight:700}
.spec{margin:0;color:#b9d3d8;font-size:15px}
.status{margin:22px 0 4px;font-size:16px;color:#e8f4f2;min-height:24px}
.timer{margin:0;font-size:15px;color:#9fd9cf;font-variant-numeric:tabular-nums}
.caption{flex:1;width:100%;margin:18px 0;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1.9;color:#fff;min-height:96px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.booked{width:100%;background:rgba(23,163,143,.22);border:1px solid rgba(23,163,143,.7);border-radius:14px;padding:12px 14px;margin-bottom:16px;display:flex;flex-direction:column;gap:4px}
.booked[hidden]{display:none}
.controls{display:flex;gap:22px;align-items:center;justify-content:center;min-height:76px}
.round{width:72px;height:72px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;transition:transform .12s,background .2s}
.round svg{width:30px;height:30px;fill:#fff}
.round:active{transform:scale(.94)}
.round:focus-visible{outline:3px solid #fff;outline-offset:3px}
.call{background:var(--teal)}.call:hover{background:var(--teal-d)}
.call:disabled{opacity:.6;cursor:wait}
.hang{background:var(--red)}
.mute{width:56px;height:56px;background:rgba(255,255,255,.16)}
.mute.on{background:#fff}.mute.on svg{fill:var(--ink)}
.hint{margin:16px 0 0;font-size:13px;color:#a6c3c9}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.speaking .ring{animation:none;border-color:rgba(23,163,143,.8)}}