/* Voice notes in Connect (connect-voice.js). */
.cv-player { display: grid; grid-template-columns: 38px minmax(120px, 1fr) auto auto; align-items: center; gap: 10px; width: min(330px, 70vw); padding: 4px 2px; }
.cv-play { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); border: 0; border-radius: 50%; box-shadow: 0 6px 16px -6px rgba(34, 197, 94, 0.8); cursor: pointer; transition: transform 0.15s; }
.cv-play:hover { transform: scale(1.06); }
.cv-play:focus-visible, .cv-speed:focus-visible, .cv-wave:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 2px; }
.cv-play svg { width: 18px; height: 18px; }
.cv-player.is-loading .cv-play { animation: cv-pulse 0.9s ease-in-out infinite; }
.cv-wave { position: relative; display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.cv-wave i { flex: 1 1 0; min-width: 2px; max-width: 4px; background: rgba(205, 210, 218, 0.38); border-radius: 2px; transition: background 0.15s, transform 0.2s; transform-origin: center; }
.cv-wave i.is-on { background: #22c55e; }
.cv-player.is-mine .cv-wave i { background: rgba(255, 255, 255, 0.42); }
.cv-player.is-mine .cv-wave i.is-on { background: #ffffff; }
.cv-player.is-playing .cv-wave i.is-on:last-of-type, .cv-player.is-playing .cv-wave i.is-on { animation: cv-bounce 0.9s ease-in-out infinite; }
.cv-player.is-playing .cv-wave i:nth-child(3n) { animation-delay: 0.15s; }
.cv-player.is-playing .cv-wave i:nth-child(3n+1) { animation-delay: 0.3s; }
.cv-time { min-width: 34px; color: #aab2c3; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.cv-speed { min-width: 36px; height: 24px; padding: 0 6px; color: #cdd2da; font: 600 0.72rem/1 Inter, sans-serif; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; cursor: pointer; }
.cv-mic { display: none; }
.cv-player.is-error .cv-time { color: #f87171; }
.cn-bubble.has-voice { min-width: 240px; }

/* The microphone next to Send, and the recording bar */
.cv-micbtn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: 6px; padding: 0; color: #cdd2da; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; cursor: pointer; align-self: flex-end; transition: color 0.15s, border-color 0.15s, transform 0.15s; }
.cv-micbtn:hover { color: #22c55e; border-color: rgba(34, 197, 94, 0.55); transform: scale(1.05); }
.cv-micbtn:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.cv-micbtn svg { width: 19px; height: 19px; }
.cv-rec { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px; background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(34, 197, 94, 0.08)); border: 1px solid rgba(34, 197, 94, 0.35); border-radius: 14px; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.06), 0 14px 34px -18px rgba(34, 197, 94, 0.6); animation: cv-in 0.25s ease-out; }
.cv-rec[hidden] { display: none; }
.cv-cancel, .cv-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer; }
.cv-cancel { color: #f87171; background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.35); }
.cv-send { color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); border: 0; box-shadow: 0 8px 20px -8px rgba(34, 197, 94, 0.9); }
.cv-send:disabled { opacity: 0.6; cursor: wait; }
.cv-cancel:focus-visible, .cv-send:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 2px; }
.cv-cancel svg, .cv-send svg { width: 18px; height: 18px; }
.cv-dot { flex: none; width: 10px; height: 10px; background: #ef4444; border-radius: 50%; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: cv-rec 1.2s ease-out infinite; }
.cv-clock { flex: none; min-width: 40px; color: #f1f4fa; font: 600 0.92rem/1 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.cv-live { flex: 1 1 auto; min-width: 40px; height: 34px; }
.cv-note { flex: none; max-width: 40%; color: #aab2c3; font-size: 0.78rem; }
.cv-rec.is-err .cv-note { color: #f87171; }
.cv-rec.is-sending .cv-dot, .cv-rec.is-max .cv-dot { animation: none; background: #22c55e; }
.cv-ctl { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; color: #e8ecf5; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50% !important; cursor: pointer; transition: transform 0.15s, border-color 0.15s, background 0.15s; }
.cv-ctl:hover { transform: scale(1.06); border-color: rgba(124, 196, 255, 0.6); }
.cv-ctl:focus-visible { outline: 2px solid #7cc4ff; outline-offset: 2px; }
.cv-ctl svg { width: 16px; height: 16px; }
.cv-ctl[hidden] { display: none; }
.cv-pause svg { width: 15px; height: 15px; }
.cv-rec.is-paused .cv-pause { color: #ef4444; border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.12); }
.cv-stop { color: #fca5a5; }
.cv-prev { color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); border: 0; }
.cv-rec.is-paused .cv-dot { animation: none; background: #fbbf24; }
.cv-rec.is-paused .cv-clock { color: #fbbf24; }
.cv-rec.is-stopped .cv-dot { display: none; }
.cv-rec.is-stopped { background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), rgba(56, 182, 255, 0.06)); }
@keyframes cv-rec { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } }
@keyframes cv-bounce { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.6); } }
@keyframes cv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
@keyframes cv-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 480px) {
  .cv-player { grid-template-columns: 36px minmax(90px, 1fr) auto auto; gap: 8px; width: min(280px, 72vw); }
  .cv-micbtn { width: 38px; height: 38px; margin-right: 4px; }
  .cv-note { display: none; }
  .cv-rec { gap: 8px; padding: 8px; }
  .cv-ctl, .cv-cancel, .cv-send { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .cv-dot, .cv-player.is-playing .cv-wave i, .cv-rec, .cv-player.is-loading .cv-play { animation: none; } }
/* square.css squares every corner: the recording dot and the round recorder buttons stay round. */
.cv-dot, .cv-cancel, .cv-send, .cv-ctl { border-radius: 50% !important; }
/* Listen button: a pill with its name (founder 2026-10-10: listen before sending) */
.cv-ctl.cv-prev { width: auto; padding: 0 14px 0 11px; gap: 6px; display: inline-flex; align-items: center; border-radius: 999px !important; font: 600 0.82rem/1 Inter, sans-serif; }
.cv-ctl-tx { white-space: nowrap; }
@media (max-width: 480px) { .cv-ctl.cv-prev { padding: 0 10px 0 9px; } }