/* The recording player (voice-player.js): a play button in the site's blue
   beside a bar waveform; what's been played runs indigo to blue to teal, the
   site's gradient, left to right (each bar's --p is how far along it sits). Voicemails and IVR call recordings on the team page, and call
   recordings in /calls history. Uses base.css's --ink / --muted / --line. */
.vp{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:16px;background:linear-gradient(90deg,rgba(59,130,246,.08),rgba(45,212,191,.03));border:1px solid rgba(147,197,253,.18)}
.vp-btn{position:relative;width:40px;height:40px;border-radius:50%;flex:0 0 auto;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--electric,#2563EB),#1D4ED8);box-shadow:0 10px 22px -10px rgba(2,6,23,.55),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s ease,box-shadow .15s ease}
.vp-btn:hover{transform:scale(1.05)}
.vp-btn:focus-visible{outline:2px solid #93C5FD;outline-offset:2px}
.vp-btn svg{width:17px;height:17px}
.vp-pa{display:none}
.vp.playing .vp-pl{display:none}
.vp.playing .vp-pa{display:block}
.vp-spin{position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:#93C5FD;opacity:0}
.vp.loading .vp-spin{opacity:1;animation:vpSpin .8s linear infinite}
@keyframes vpSpin{to{transform:rotate(360deg)}}
.vp-wave{flex:1;min-width:0;height:40px;display:flex;align-items:center;gap:2px;cursor:pointer;touch-action:none;border-radius:6px}
.vp-wave:focus-visible{outline:2px solid rgba(147,197,253,.5);outline-offset:3px}
.vp-wave i{flex:1;min-width:1.5px;height:var(--h);border-radius:2px;background:rgba(147,197,253,.22);transition:background .12s ease,height .35s var(--ease-out,cubic-bezier(.16,1,.3,1))}
.vp-wave i.on{background:color-mix(in oklab,#5EEAD4 calc(var(--p,.5) * 100%),#60A5FA)}
.vp-wave:hover i:not(.on){background:rgba(147,197,253,.32)}
.vp-time{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.vp-time b{color:var(--ink);font-weight:600}
.vp-rate{flex:0 0 auto;font:600 12px/1 'Geist',sans-serif;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:6px 8px;cursor:pointer;min-width:38px}
.vp-rate:hover{color:var(--ink);border-color:rgba(147,197,253,.4)}
.vp.err{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.05)}
.vp.err .vp-btn{background:linear-gradient(135deg,#F87171,#B91C1C)}
@media(max-width:560px){
  .vp{gap:9px;padding:8px 10px 8px 8px}
  .vp-rate{display:none}
  .vp-wave{gap:1.5px;height:34px}
  .vp-wave i:nth-child(odd){display:none}
}
@media(prefers-reduced-motion:reduce){
  .vp.loading .vp-spin{animation:none}
  .vp-wave i{transition:none}
}