/* Voice-note player (voice-note.js): chat, iPhone, Surprise and Notes pages. Moved out of styles.css so Notes can load it. */
.voice-note-player{
  /* Bars are drawn in one colour and separated by opacity, so the player looks
     right inside any bubble or page palette without needing colour-mix. */
  --voice-ink:#ffffff;
  --voice-dim-opacity:.4;
  display:flex;align-items:center;gap:10px;
  width:min(300px,68vw);padding:9px 12px;margin:2px 0;
  border-radius:22px;background:var(--mine);
  transition:background .2s ease;
}
.voice-note-player:not(.mine){
  --voice-ink:currentColor;
  --voice-dim-opacity:.34;
  background:transparent;padding:6px 2px;
}
.voice-note-audio{display:none}

.voice-note-play{
  flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;
  background:transparent;color:var(--voice-ink);
  display:grid;place-items:center;padding:0;cursor:pointer;
}
.voice-note-play:hover{background:rgba(255,255,255,.14)}
.voice-note-player:not(.mine) .voice-note-play:hover{background:rgba(127,127,127,.16)}
.voice-note-icon-play{
  width:0;height:0;margin-left:3px;
  border-left:13px solid currentColor;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.voice-note-icon-pause{
  width:13px;height:15px;
  border-left:4.5px solid currentColor;border-right:4.5px solid currentColor;
}

.voice-note-wave{
  flex:1 1 auto;min-width:0;height:34px;
  display:flex;align-items:center;gap:2px;
  /* Narrower than even 1px bars need (under ~124px): clip them rather than run under the time. */
  overflow-x:clip;
  cursor:pointer;touch-action:none;
}
.voice-note-wave:focus-visible{outline:2px solid var(--voice-ink);outline-offset:3px;border-radius:6px}
.voice-note-bar{
  /* 1px, not 2px: 42 bars at 2px plus gaps need 166px, more than a phone-width card has,
     and the wave then ran under the time. */
  flex:1 1 0;min-width:1px;border-radius:99px;
  height:var(--bar-height,38%);
  background:var(--voice-ink);
  opacity:var(--voice-dim-opacity);
  transition:height .28s ease,opacity .12s ease;
}
.voice-note-bar.played{opacity:1}
/* A gentle breathing motion while the clip is actually playing. */
.voice-note-player.playing .voice-note-bar.played:nth-last-child(-n+3){
  animation:voice-note-pulse .6s ease-in-out infinite alternate;
}
@keyframes voice-note-pulse{to{transform:scaleY(1.18)}}

.voice-note-side{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto}
.voice-note-time{font-size:11px;font-weight:700;color:var(--voice-ink);font-variant-numeric:tabular-nums;line-height:1}
.voice-note-speed{
  border:0;cursor:pointer;padding:3px 8px;border-radius:99px;
  font-size:11px;font-weight:800;line-height:1;
  background:rgba(255,255,255,.22);color:var(--voice-ink);
}
.voice-note-speed.boosted{background:rgba(255,255,255,.38)}
.voice-note-player:not(.mine) .voice-note-speed{
  background:currentColor;color:inherit;
  box-shadow:inset 0 0 0 999px rgba(127,127,127,.001);
}
.voice-note-player:not(.mine) .voice-note-speed{
  background:transparent;border:1px solid currentColor;opacity:.75;
}
.voice-note-player:not(.mine) .voice-note-speed.boosted{opacity:1;font-weight:900}
@media (prefers-reduced-motion: reduce){
  .voice-note-bar{transition:none}
  .voice-note-player.playing .voice-note-bar.played:nth-last-child(-n+3){animation:none}
}
@media(max-width:480px){.voice-note-player{width:min(258px,74vw)}}