/* Voice notes — the record control and the player.
 *
 * ONE stylesheet for all three homes (a quiz answer, the corkboard, the writing desk), because a
 * second copy would drift within a week — the same reasoning client/ui/voice.css gives for the live
 * mic controls it owns. Every colour here is a token, nothing is defined only inside a media query,
 * and the two people stay pink and blue (BRAND §2): a voice note is a person talking, so it is
 * tinted by whose it is wherever the surface around it knows.
 *
 * The visual rule: recording has to look ON from across the room, and playing back has to look like
 * a small warm object rather than a file attachment. */

/* ---------- the record control ---------- */
.vn { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: stretch; }
.vn__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vn__btn { min-height: var(--tap); }
.vn__btn[aria-pressed="true"] {
  background: var(--red-tint); border-color: var(--red); color: var(--on-red-tint);
}
/* The dot that says it is live. Stops dead under reduced motion, like every other motion here. */
.vn__btn[aria-pressed="true"]::before {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px;
  border-radius: 50%; background: var(--red); vertical-align: middle;
  animation: vn-pulse 1.1s ease-in-out infinite;
}
@keyframes vn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.vn__timer { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vn__left { font-size: 12px; color: var(--ink-faint); }
.vn__hint { margin: 0; font-size: 12px; color: var(--ink-faint); }
.vn__err { margin: 0; font-size: 13px; color: var(--red); }
.vn__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vn__size { font-size: 12px; color: var(--ink-faint); }
.vn__audio { width: 100%; max-width: 320px; height: 36px; }

/* ---------- the live meter ---------- */
.vn__meter {
  display: flex; align-items: flex-end; gap: 2px; height: 34px; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: var(--r8); background: var(--paper);
}
.vn__bar {
  flex: 1 1 0; min-width: 2px; height: 6%; border-radius: 2px;
  background: var(--ink-faint); opacity: .55; transition: height 80ms linear;
}
.vn__bar.is-now { background: var(--red); opacity: 1; }

/* ---------- the player ---------- */
.vnp {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r8); background: var(--paper-raised);
  box-shadow: var(--shadow-1); text-align: left;
}
.vnp__head { display: flex; align-items: center; gap: 8px; }
.vnp__icon { font-size: 14px; }
.vnp__who { flex: 1; font-size: 13px; color: var(--ink-soft); }
.vnp__len { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.vnp__audio { width: 100%; height: 34px; }
/* The waveform the note carries with it — drawn from the levels the recorder measured, never
 * from the audio, which is never decoded anywhere but in the listener's own player. */
.vnp__wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.vnp__bar { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--ink-faint); opacity: .5; }
.vnp[data-saved="0"] { border-style: dashed; }
.vnp__unsaved { margin: 0; font-size: 12px; color: var(--ink-faint); }

/* ---------- the player, squeezed into a sticky note ----------
 * A note on the corkboard is a small square of paper, and the full player does not fit in one:
 * the screenshot review showed the audio control crushed to a third of its width and a two-line
 * caption turning into four. Inside a note the chrome comes off — the sticky already says whose it
 * is, in colour and with a dot, so the player only has to be a play button and a length. */
.note .vnp {
  padding: 6px 0 0; border: 0; border-radius: 0; box-shadow: none; background: none;
  border-top: 1px dashed var(--line); margin-top: 6px;
}
.note .vnp__who { display: none; }
.note .vnp__head { gap: 6px; }
.note .vnp__wave { height: 14px; }
.note .vnp__audio { height: 30px; }
.note .vnp[data-saved="0"] { border-style: dashed none none; }
.note .vnp__unsaved { font-size: 11px; line-height: 1.3; }

/* Whose voice it is, when the surface knows. Pink and blue are people, never furniture. */
.vnp.by-a, .vnp.by-pink { border-left: 3px solid var(--pink); }
.vnp.by-b, .vnp.by-blue { border-left: 3px solid var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .vn__btn[aria-pressed="true"]::before { animation: none; }
  .vn__bar { transition: none; }
}