/* Voice notes on Home (home-voice.js): hold a resting friend to record, slide up
   onto the glass to send, slide sideways to throw it away, let go on the face to
   decide later. Matches the prototype Elliott approved on 2026-10-09. Colors come
   from the app's Tidepool tokens. */
:root {
  --vn-ink: var(--bloom-ink, #111111);
  --vn-muted: var(--bloom-muted, #66665f);
  --vn-canvas: var(--bloom-canvas, #fbfbf7);
  --vn-rec: #ff5a36;          /* recording: the app's live coral */
  --vn-send: #30c25a;         /* send: a calm green */
  --vn-cancel: #ff3b30;       /* throw away */
  --vn-amber: #ffad1f;        /* something for you */
  --vn-amber-deep: #ff7a00;
  --vn-glass: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .64));
  --vn-glass-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .05), 0 0 0 .5px rgba(0, 0, 0, .09);
  --vn-lift: 0 30px 60px -22px rgba(28, 22, 12, .45), 0 10px 22px -12px rgba(28, 22, 12, .25);
  --vn-spring: cubic-bezier(.2, 1.35, .32, 1);
  --vn-ease: cubic-bezier(.25, .8, .25, 1);
}
.dozing-friend, .vn-layer, .vn-toast { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

/* ---------- The resting row ---------- */
.home-dozing .vn-tip[hidden] { display: none; }
.home-dozing .vn-tip { margin: 6px 0 0; font-size: 14px; color: var(--vn-muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.vn-tip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-dozing .home-dozing-faces { margin-top: 20px; }
/* The page scrolls from a face until its note starts (home-voice.js, pressable). */
.dozing-friend { touch-action: pan-y; cursor: pointer; transition: transform .25s var(--vn-ease); }
.dozing-friend.vn-pressing { transform: scale(.92); }
.dozing-friend.vn-away .dozing-face, .dozing-friend.vn-away .vn-halo, .dozing-friend.vn-away .vn-badge, .dozing-friend.vn-away .vn-mine { visibility: hidden; }
.vn-sub { margin-top: -3px; font-size: 11px; font-weight: 600; color: var(--vn-muted); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.vn-sub.vn-for { color: #d96a00; font-weight: 750; }
.vn-sub svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Someone left you a note: awake, glowing, a little equalizer with the count. */
.dozing-friend.vn-lit .dozing-face { animation: vn-awake 3.4s ease-in-out infinite; position: relative; z-index: 1;
  box-shadow: 0 0 0 2.5px var(--vn-canvas), 0 0 0 5px var(--vn-amber); }
.dozing-friend.vn-lit .dozing-name { color: var(--vn-ink); font-weight: 700; }
.vn-halo { position: absolute; top: -10px; left: 50%; width: 68px; height: 68px; margin-left: -34px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 173, 31, .8), rgba(255, 173, 31, .3) 60%, rgba(255, 173, 31, 0));
  animation: vn-glow 2.6s ease-in-out infinite; }
.vn-badge { position: absolute; z-index: 2; top: -7px; left: calc(50% + 12px); height: 21px; padding: 0 7px; border-radius: 11px; display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #ffbe3d, var(--vn-amber-deep)); color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--vn-canvas), 0 4px 10px -3px rgba(255, 122, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .45); }
.vn-eq { display: inline-flex; align-items: center; gap: 1.5px; height: 10px; }
.vn-eq i { display: block; width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 50%; animation: vn-eq .9s ease-in-out infinite; }
.vn-eq i:nth-child(2) { animation-delay: -.3s; } .vn-eq i:nth-child(3) { animation-delay: -.6s; }
.vn-badge.vn-pop { animation: vn-pop .5s var(--vn-spring); }
/* Yours is waiting for them: your own little face snuggled against theirs, bobbing
   while it waits, with a green check once they heard it (Elliott's pick, "Your face"). */
.vn-mine { position: absolute; z-index: 2; top: 26px; left: calc(50% + 8px); width: 25px; height: 25px; border-radius: 50%; background-size: cover; background-position: center; color: transparent; font-size: 0;
  box-shadow: 0 0 0 2px var(--vn-canvas), 0 4px 10px -3px rgba(0, 0, 0, .35); animation: vn-wait 2.8s ease-in-out infinite; }
.vn-mine.vn-pop { animation: vn-pop .5s var(--vn-spring), vn-wait 2.8s .5s ease-in-out infinite; }
.vn-mine.heard { animation: none; opacity: .92; }
.vn-mine i { position: absolute; right: -5px; bottom: -4px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vn-send); color: #fff; box-shadow: 0 0 0 1.5px var(--vn-canvas); }
.vn-mine i svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes vn-wait { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-2.5px) rotate(5deg); } }

@keyframes vn-awake { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-2.5px) rotate(-3deg); } 60% { transform: translateY(0) rotate(2deg); } }
@keyframes vn-glow { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes vn-eq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes vn-pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- The layer over the page ---------- */
.vn-layer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.vn-layer.on { pointer-events: auto; }
.vn-scrim { position: absolute; inset: 0; background: rgba(32, 28, 20, .2); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  opacity: 0; transition: opacity .32s var(--vn-ease); }
.vn-layer.on .vn-scrim { opacity: 1; }

/* The held face, lifted off the page. */
.vn-face { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background-size: cover; background-position: center;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 1)) rotate(var(--r, 0deg));
  --glow: rgba(255, 90, 54, .42);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 0 calc(var(--lv, 0) * 34px) calc(var(--lv, 0) * 10px) var(--glow), 0 14px 30px -10px rgba(28, 22, 12, .5); will-change: transform; transition: transform .55s var(--vn-spring), filter .2s; }
.vn-face.dragging { transition: transform .12s linear; }
/* Going home: quick and without overshoot, so it lands as the row's face shows again. */
.vn-face.home { transition: transform .34s var(--vn-ease), filter .2s; }
.vn-face::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--vn-rec); opacity: 0; transform: scale(calc(1 + var(--lv, 0) * .22));
  transition: opacity .2s, border-color .2s; }
.vn-face.rec::before { opacity: .3; }
.vn-layer.live .vn-face.rec::before { opacity: 1; }
.vn-face.talking::before { border-color: var(--vn-amber); opacity: 1; }
.vn-face.talking { --glow: rgba(255, 173, 31, .6); }
.vn-layer[data-state="cancel"] .vn-face::before { border-color: #b9b4aa; }
.vn-layer[data-state="cancel"] .vn-face { --glow: rgba(150, 144, 132, .3); filter: saturate(.55); }
.vn-layer[data-state="send"] .vn-face::before { border-color: var(--vn-send); }
.vn-layer[data-state="send"] .vn-face { --glow: rgba(48, 194, 90, .5); }
.vn-face.hop { animation: vn-hop .6s var(--vn-spring); }
@keyframes vn-hop { 0% { scale: 1; } 35% { scale: 1.16 .9; } 60% { scale: .94 1.08; } 100% { scale: 1; } }
.vn-name { position: absolute; transform: translate(-50%, 0); font-size: 14px; font-weight: 700; color: var(--vn-ink); white-space: nowrap; transition: opacity .2s, transform .55s var(--vn-spring); }
.vn-help { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; color: rgba(17, 17, 17, .62); transition: opacity .2s, color .2s; }
.vn-help b { font-weight: 700; color: var(--vn-ink); }
.vn-layer[data-state="send"] .vn-help b { color: #17803a; }
.vn-layer[data-state="cancel"] .vn-help b { color: #d1291f; }

/* Sideways targets that throw it away. */
.vn-x { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; color: var(--vn-ink);
  background: var(--vn-glass); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: var(--vn-glass-edge), 0 8px 18px -10px rgba(0, 0, 0, .4);
  opacity: 0; transform: scale(calc(.7 + var(--p, 0) * .3)); transition: opacity .2s, transform .3s var(--vn-spring), background .15s, color .15s; }
.vn-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vn-layer.recording .vn-x { opacity: calc(.45 + var(--p, 0) * .55); }
.vn-x.armed { background: var(--vn-cancel); color: #fff; transform: scale(1.22); box-shadow: 0 10px 24px -8px rgba(255, 59, 48, .7); }

/* The glass: it stretches up out of the face and is the place you slide to send. */
.vn-glass { position: absolute; width: 296px; border-radius: 28px; padding: 12px 12px 12px 16px; color: var(--vn-ink);
  background: var(--vn-glass); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: var(--vn-glass-edge), var(--vn-lift);
  transform-origin: var(--neck-x, 50%) calc(100% + 26px); transform: translateY(var(--gy, 0px)) scale(.2, .12); opacity: 0;
  transition: transform .5s var(--vn-spring), opacity .18s, box-shadow .2s, background .2s; }
.vn-glass.open { transform: translateY(var(--gy, 0px)) scale(1); opacity: 1; }
.vn-glass::after { content: ""; position: absolute; left: var(--neck-x, 50%); bottom: -13px; width: 30px; height: 15px; margin-left: -15px;
  background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%); transition: background .2s; }
.vn-glass.no-neck::after { display: none; }
.vn-head { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 13px; font-weight: 700; }
.vn-head .vn-to { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-head .vn-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--vn-muted); }
.vn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vn-rec); box-shadow: 0 0 0 3px rgba(255, 90, 54, .2); animation: vn-blink 1.1s ease-in-out infinite; flex: none; }
@keyframes vn-blink { 50% { opacity: .35; } }
/* Until the microphone is really listening, the dot waits in grey. */
.vn-layer.recording:not(.live) .vn-dot { background: #b9b4aa; box-shadow: none; animation: none; }
.vn-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.vn-wave { flex: 1; min-width: 0; height: 40px; display: block; }
.vn-go { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--vn-ink); background: rgba(17, 17, 17, .07);
  transition: transform .35s var(--vn-spring), background .15s, color .15s, box-shadow .2s; }
.vn-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vn-go svg.nudge { animation: vn-nudge 1.4s var(--vn-ease) infinite; }
@keyframes vn-nudge { 0%, 100% { transform: translateY(2px); } 45% { transform: translateY(-3px); } }
.vn-layer[data-state="send"] .vn-glass { background: linear-gradient(180deg, rgba(232, 250, 237, .94), rgba(214, 245, 223, .82)); box-shadow: var(--vn-glass-edge), 0 0 0 2.5px var(--vn-send), var(--vn-lift); }
.vn-layer[data-state="send"] .vn-glass::after { background: rgba(214, 245, 223, .9); }
.vn-layer[data-state="send"] .vn-go { background: var(--vn-send); color: #fff; transform: scale(1.12); box-shadow: 0 8px 20px -6px rgba(48, 194, 90, .8); }
.vn-layer[data-state="send"] .vn-go svg { animation: none; }
.vn-layer[data-state="cancel"] .vn-glass { background: linear-gradient(180deg, rgba(255, 236, 234, .94), rgba(255, 222, 218, .84)); box-shadow: var(--vn-glass-edge), 0 0 0 2.5px var(--vn-cancel), var(--vn-lift); }
.vn-layer[data-state="cancel"] .vn-glass::after { background: rgba(255, 222, 218, .9); }
.vn-layer[data-state="cancel"] .vn-head { color: #d1291f; }
.vn-layer[data-state="cancel"] .vn-dot { background: var(--vn-cancel); animation: none; }
.vn-layer[data-state="cancel"] .vn-go { opacity: .25; }
.vn-glass.shake { animation: vn-shake .34s linear; }
@keyframes vn-shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

/* After you let go: the same glass, now a little card that waits for you. */
.vn-card-title { font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.vn-card-sub { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--vn-muted); font-variant-numeric: tabular-nums; }
.vn-player { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.vn-play { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--vn-ink); color: #fff; cursor: pointer;
  transition: transform .3s var(--vn-spring); }
.vn-play:active { transform: scale(.9); }
.vn-play svg { width: 16px; height: 16px; fill: currentColor; }
.vn-play.amber { background: linear-gradient(180deg, #ffbe3d, var(--vn-amber-deep)); }
.vn-actions { display: flex; gap: 8px; margin-top: 14px; }
.vn-btn { flex: 1; height: 46px; border: 0; border-radius: 23px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--vn-ink); background: rgba(17, 17, 17, .07); transition: transform .3s var(--vn-spring), background .15s; touch-action: none; }
.vn-btn:active { transform: scale(.95); }
.vn-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vn-btn.ink { background: var(--vn-ink); color: #fff; }
.vn-btn.red { background: rgba(255, 59, 48, .11); color: #d1291f; }
.vn-btn.held { transform: scale(.95); background: rgba(255, 90, 54, .14); color: #c2361b; }
.vn-yours { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 7px 7px 7px 8px; border-radius: 18px; background: rgba(17, 17, 17, .05);
  font-size: 13px; font-weight: 650; color: var(--vn-muted); transition: opacity .25s, transform .25s; }
.vn-yours > span:nth-child(2) { flex: 1; min-width: 0; line-height: 1.3; }
.vn-yours-face { flex: none; width: 28px; height: 28px; border-radius: 50%; background-size: cover; background-position: center; color: transparent; font-size: 0; box-shadow: 0 0 0 2px #fff; }
.vn-yours button { flex: none; height: 32px; padding: 0 13px; border: 0; border-radius: 16px; background: rgba(255, 59, 48, .11); color: #d1291f; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.vn-yours.gone { opacity: 0; transform: scale(.94); }
/* Her notes: one row each, so two look like two. New ones are amber with a dot. */
/* One column no wider than the card: a waveform's canvas reports its pixel size as its width, which
   would otherwise widen the column past the card's edge (Elliott, 2026-10-15). */
.vn-msgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-top: 12px; }
.vn-msg { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 25px; background: rgba(17, 17, 17, .05);
  transition: background .3s, box-shadow .3s; }
.vn-msg.new { background: rgba(255, 173, 31, .14); }
.vn-msg.on { background: rgba(255, 173, 31, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 122, 0, .42); }
.vn-msg:not(.new).on { background: rgba(17, 17, 17, .07); box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, .14); }
.vn-msg .vn-play { width: 36px; height: 36px; transition: transform .3s var(--vn-spring), background .3s; }
.vn-msg .vn-wave { height: 30px; }
.vn-new { flex: none; width: 0; height: 8px; margin-right: -9px; border-radius: 50%; background: var(--vn-amber-deep); transform: scale(0);
  transition: width .35s var(--vn-ease), margin .35s var(--vn-ease), transform .3s var(--vn-ease); }
.vn-msg.new .vn-new { width: 8px; margin: 0 0 0 4px; transform: scale(1); }
.vn-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.vn-meta .vn-time { font-size: 13px; font-weight: 750; color: var(--vn-ink); font-variant-numeric: tabular-nums; }
.vn-at { font-size: 11px; font-weight: 600; color: var(--vn-muted); white-space: nowrap; }
.vn-badge b { font-weight: 800; line-height: 1; }
.vn-note { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--vn-muted); text-align: center; }
.vn-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(17, 17, 17, .06); color: var(--vn-muted); cursor: pointer; }
.vn-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.vn-glass.nudge-card { animation: vn-wiggle .42s var(--vn-ease); }
@keyframes vn-wiggle { 25% { rotate: -1.6deg; } 50% { rotate: 1.4deg; } 75% { rotate: -.8deg; } }
.vn-glass.leave { transition: transform .32s cubic-bezier(.5, 0, .75, 0), opacity .3s .05s, filter .3s; transform: translateY(var(--gy, 0px)) scale(.15) !important; opacity: 0 !important; }
.vn-glass.poof { transition: transform .32s var(--vn-ease), opacity .28s, filter .32s; transform: translateY(var(--gy, 0px)) scale(1.12) !important; opacity: 0 !important; filter: blur(8px); }

/* A note on its way into their face. */
.vn-fly { position: absolute; width: 46px; height: 30px; margin: -15px 0 0 -23px; border-radius: 15px; display: grid; place-items: center; z-index: 5;
  background: linear-gradient(180deg, #4fd877, var(--vn-send)); color: #fff; box-shadow: 0 8px 18px -6px rgba(48, 194, 90, .8); }
.vn-fly .vn-eq { height: 12px; gap: 2px; } .vn-fly .vn-eq i { width: 2.5px; }
.vn-fly-face { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background-size: cover; background-position: center; color: transparent; font-size: 0; box-shadow: 0 0 0 2.5px #fff, 0 10px 22px -8px rgba(0, 0, 0, .5); }
.vn-fly-face.back { filter: saturate(.6); }
.vn-spark { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none; z-index: 6; }
.vn-dust { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #c9c3b8; pointer-events: none; z-index: 6; }

/* A small glass label over a face when you just tap it. */
.vn-tipbubble { position: fixed; z-index: 1001; padding: 9px 13px; border-radius: 16px; font-size: 13px; font-weight: 700; color: var(--vn-ink); white-space: nowrap; pointer-events: none;
  background: var(--vn-glass); -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7); box-shadow: var(--vn-glass-edge), 0 14px 30px -14px rgba(0, 0, 0, .45);
  transform: translate(-50%, -100%) translateY(6px) scale(.85); opacity: 0; transition: transform .38s var(--vn-spring), opacity .2s; }
.vn-tipbubble.show { transform: translate(-50%, -100%) scale(1); opacity: 1; }
.dozing-friend.vn-wiggle .dozing-face { animation: vn-headshake .5s var(--vn-ease); }
@keyframes vn-headshake { 20% { rotate: -9deg; } 45% { rotate: 7deg; } 70% { rotate: -4deg; } }

/* Confirmation pill above the tabs. */
.vn-toast { position: fixed; z-index: 1002; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; padding: 0 8px 0 18px; height: 48px;
  border-radius: 24px; background: rgba(28, 26, 22, .86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; font-size: 14.5px; font-weight: 650; white-space: nowrap;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .55); transform: translate(-50%, 24px) scale(.94); opacity: 0; transition: transform .45s var(--vn-spring), opacity .2s; pointer-events: none; }
.vn-toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.vn-toast.plain { padding-right: 18px; }
.vn-toast button { height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: rgba(255, 255, 255, .14); color: #ffd28a; font: inherit; font-weight: 750; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .vn-face, .vn-glass, .vn-x, .vn-toast, .vn-tipbubble { transition-duration: .01s !important; }
  .vn-halo, .dozing-friend.vn-lit .dozing-face, .vn-eq i, .vn-go svg.nudge, .vn-dot, .vn-mine { animation: none !important; }
  .vn-glass.shake, .vn-face.hop, .vn-glass.nudge-card { animation: none !important; }
}

/* The player that plays a note stays out of sight. */
.vn-media { display: none; }
/* On its own line under the time, so the row keeps to the card's width (Elliott, 2026-10-15). */
.vn-msg.missing .vn-at { text-align: right; }
.vn-msg.missing .vn-at::after { content: "couldn’t play"; display: block; color: #d1291f; }
/* Report a voice note (docs/CHILLIN-SAFETY.md). */
.vn-report { display: block; margin: 6px auto 0; min-height: 36px; padding: 6px 10px; border: 0; background: transparent; font-size: 12px; font-weight: 600; color: var(--vn-muted); text-decoration: underline; }