/* Live pieces added to the mockup: the call screen and the Talk badge. Same tokens as app.css. */
[hidden]{display:none!important}

.nl{position:relative}
.nbadge{position:absolute;top:8px;right:calc(50% - 22px);width:9px;height:9px;border-radius:50%;background:var(--mind);box-shadow:0 0 0 2px var(--bg)}

.btn.clock svg,.btn.done svg{opacity:.8}

/* the call screen */
.callx{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 28px) 20px calc(env(safe-area-inset-bottom,0px) + 22px);
  background:#0B0B0E;color:#EDEDF0;overflow:hidden;animation:callIn .42s var(--ease) both}
@keyframes callIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
.callx .sky{opacity:.55}
.callx[data-coach="mind"] .sky .ob,.callx[data-coach="body"] .sky .om{opacity:.18}
.cremote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0B0B0E;opacity:0;transition:opacity .5s var(--ease)}
.callx.has-video .cremote{opacity:1}
.callx.has-video .cface{opacity:0}
.cface{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);transition:opacity .4s var(--ease)}
.cface .aura{box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 80px rgba(201,71,143,.35)}
.callx[data-coach="body"] .cface .aura{box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 80px rgba(76,99,224,.35)}
.ctop{position:relative;text-align:center;display:flex;flex-direction:column;gap:4px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.ctop b{font-family:"Fraunces",serif;font-weight:300;font-size:32px;letter-spacing:-.01em}
.ctop span{font-size:15px;color:rgba(255,255,255,.72)}
.cself{position:absolute;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 130px);width:96px;height:132px;object-fit:cover;border-radius:18px;
  background:#17171A;box-shadow:0 10px 30px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);transform:scaleX(-1)}
.cself:not([src]):not(.on){display:block}
.cbar{position:relative;display:flex;gap:22px;justify-content:center;align-items:flex-start;margin-top:auto}
.cb{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;color:#EDEDF0;font:inherit;font-size:13px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cb svg{width:62px;height:62px;padding:18px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease),background .2s var(--ease)}
.cb:active svg{transform:scale(.94)}
.cb[aria-pressed="true"] svg{background:#EDEDF0;color:#0B0B0E}
.cb.answer svg{background:#4F8A5E;width:72px;height:72px;padding:21px}
.cb.decline svg,.cb.end svg{background:#B23A3A}
.cb.decline svg{transform:rotate(135deg);width:72px;height:72px;padding:21px}
.cnote{position:relative;margin-top:14px;font-size:12px;color:rgba(255,255,255,.55)}
@media (prefers-reduced-motion: reduce){.callx{animation:none}}
:root.rm .callx{animation:none}

/* presence: away dots stay quiet (later mockup rules made every dot green) */
.ldot.away{background:var(--faint);box-shadow:none;animation:none}
a.btn{text-decoration:none;color:inherit}