/* Kofe Voice: voice messages, recording, and who is talking out loud. */

/* ------------------------------------------------------------------ a voice message */
.vmsg { --p: 0; display: inline-flex; align-items: center; gap: 10px; min-width: 200px; max-width: 280px; padding: 2px 4px 2px 0; vertical-align: middle; }
.msg .text.has-voice { padding: 8px 14px 8px 8px; }
.vmsg-play { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--lamp, #e3ad54); color: var(--lamp-ink, #2a1c05); cursor: pointer; }
.vmsg-icon { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.vmsg.is-playing .vmsg-icon { width: 11px; height: 13px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.vmsg-bars { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; min-width: 0; }
.vmsg-bars i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: currentColor; opacity: 0.35; }
.vmsg.is-playing .vmsg-bars i { transition: opacity 0.2s; }
.vmsg-bars { -webkit-mask: linear-gradient(90deg, #000 0 calc(var(--p) * 100%), rgba(0, 0, 0, 0.45) calc(var(--p) * 100%)); mask: linear-gradient(90deg, #000 0 calc(var(--p) * 100%), rgba(0, 0, 0, 0.45) calc(var(--p) * 100%)); }
.vmsg.is-playing .vmsg-bars i, .vmsg[style*="--p"] .vmsg-bars i { opacity: 0.9; }
.vmsg-time { font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: 0.75; min-width: 32px; text-align: right; }
.vmsg.is-broken .vmsg-play { background: var(--raised, #302a23); color: var(--muted, #a69d8f); }
.line p .vmsg { margin: 2px 0; }

/* ------------------------------------------------------------------ recording */
.tool-voice.is-on { color: #e0654f; }
.rec-bar { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 8px; border-radius: inherit; background: var(--raised, #302a23); animation: rec-in 0.2s ease; }
.rec-x, .rec-send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.rec-x { background: transparent; color: var(--muted, #a69d8f); }
.rec-x:hover { color: var(--ink, #f4eee2); background: var(--surface, #25201b); }
.rec-send { background: var(--lamp, #e3ad54); color: var(--lamp-ink, #2a1c05); }
.rec-x svg, .rec-send svg { width: 20px; height: 20px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0654f; animation: rec-blink 1.2s ease-in-out infinite; flex: none; }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.rec-hint { flex: 1; color: var(--muted, #a69d8f); font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
@keyframes rec-in { from { opacity: 0; } }

/* ------------------------------------------------------------------ live voice in a room */
.tool-mic.is-on { background: rgba(227, 173, 84, 0.22); color: #e3ad54; }
.seat.talking .av { box-shadow: 0 0 0 3px #e3ad54, 0 0 26px 6px rgba(227, 173, 84, 0.45); animation: talk-pulse 0.9s ease-in-out infinite; }

/* ------------------------------------------------------------------ live voice at a Mafia table */
.mf-mic.is-on { color: #e3ad54; border-color: rgba(227, 173, 84, 0.5); }
.mf-mic.is-live { background: #e3ad54; color: #2a1c05; border-color: #e3ad54; box-shadow: 0 0 0 4px rgba(227, 173, 84, 0.2); }
.mf-seat.is-voice .mf-av, .mf-lseat.is-voice .mf-av { box-shadow: 0 0 0 3px #e3ad54, 0 0 30px rgba(227, 173, 84, 0.55); animation: talk-pulse 0.9s ease-in-out infinite; }
@keyframes talk-pulse { 50% { box-shadow: 0 0 0 5px rgba(227, 173, 84, 0.65), 0 0 36px rgba(227, 173, 84, 0.5); } }
@media (prefers-reduced-motion: reduce) { .seat.talking .av, .mf-seat.is-voice .mf-av, .mf-lseat.is-voice .mf-av, .rec-dot { animation: none; } }