/* 语音条 (static/voice-notes.js): a voice message in the outfit's own colours. */
.voice-note { margin: 10px 0; max-width: 100%; }
.vn-pill {
  display: inline-flex; align-items: center; gap: 9px; box-sizing: border-box;
  width: var(--vn-w, 190px); max-width: 100%; min-height: 46px; padding: 5px 6px 5px 5px;
  border-radius: 999px; color: var(--text); -webkit-tap-highlight-color: transparent;
  background: var(--card-solid, #fff);
  background: color-mix(in srgb, var(--accent) 11%, var(--card-solid, #fff));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  transition: width .25s ease;
}
.vn-play {
  flex: none; position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: var(--card-solid, #fff);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Solid shapes: the sprite's soft fill turned all the way up. */
.vn-play .ui-icon { --icon-tint: 1; grid-area: 1 / 1; width: 15px; height: 15px; stroke-width: 1.8; }
.vn-icon-play { transform: translateX(1px); }
.vn-icon-pause, .voice-note[data-state="playing"] .vn-icon-play { display: none; }
.voice-note[data-state="playing"] .vn-icon-pause { display: block; }
.voice-note[data-state="loading"] .vn-play .ui-icon { opacity: 0; }
.voice-note[data-state="loading"] .vn-play::after {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
}
.vn-wave { position: relative; flex: 1; min-width: 0; height: 22px; overflow: hidden; }
.vn-bars {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px;
  color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.vn-bars i { flex: none; width: 2.5px; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 2px; background: currentColor; }
/* What has played, in the accent: the same bars cut at the playing point. */
.vn-done { color: var(--accent); clip-path: inset(0 calc((1 - var(--vn-p, 0)) * 100%) 0 0); }
.vn-time { flex: none; min-width: 2em; font-size: 12px; color: var(--text2); text-align: right; font-variant-numeric: tabular-nums; }
.vn-new { flex: none; width: 6px; height: 6px; margin-left: -4px; border-radius: 50%; background: var(--accent); }
.voice-note[data-heard] .vn-new { display: none; }
.vn-more {
  flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: none; color: var(--text2); cursor: pointer;
}
.vn-more .ui-icon { width: 16px; height: 16px; transition: transform .2s ease; }
.vn-more[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.vn-transcript { margin: 8px 0 0 10px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.vn-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text2); white-space: pre-wrap; overflow-wrap: anywhere; }
.vn-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.vn-actions button, .vn-actions a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px 4px 6px;
  border: 0; border-radius: 16px; background: none; color: var(--accent-deep, var(--accent));
  font: inherit; font-size: 13px; text-decoration: none; cursor: pointer;
}
.vn-actions .ui-icon { width: 15px; height: 15px; }
.vn-fav.on .ui-icon { --icon-tint: 1; }
/* 聊天收藏室 → 语音 */
.vn-saved .voice-note { margin: 8px 0 0; }
.vn-meta { margin: 0; font-size: 12px; color: var(--text3); }
.vn-saved .vn-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vn-saved .voice-note.vn-full .vn-text { display: block; }
.vn-empty { color: var(--text2); line-height: 1.8; }
@media (prefers-reduced-motion: no-preference) {
  .voice-note[data-state="loading"] .vn-play::after { animation: vn-spin .8s linear infinite; }
  .voice-note[data-state="playing"] .vn-play { animation: vn-breathe 1.6s ease-in-out infinite; }
}
@keyframes vn-spin { to { transform: rotate(360deg); } }
@keyframes vn-breathe { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); } }