/*
 * Kiros Social – voice module (Speak it + voice post player).
 * Tokens only. Pairs used: on-ink/ink (play button), text/text-muted on surface and
 * surface-2, on-danger/danger (recording), danger-text on surface-2 (errors).
 */

/* ---------- Speak it button + live status ---------- */
.ks-app .ks-voice-btn { gap: 8px; }
.ks-app .ks-voice-btn--icon { min-width: 44px; padding: 0; }
.ks-app .ks-voice-btn.is-recording,
.ks-app .ks-voice-btn.is-recording:hover { background: var(--ks-danger); color: var(--ks-on-danger); border-color: var(--ks-danger); }
.ks-app .ks-voice-btn[disabled][aria-busy="true"] { background: var(--ks-surface-2); color: var(--ks-text-muted); }

.ks-app .ks-voice-live {
	display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 6px 4px 12px; max-width: 100%;
	border-radius: 999px; background: var(--ks-surface-2); color: var(--ks-text); font-size: .875rem; font-weight: 600;
}
.ks-app .ks-voice-live[hidden] { display: none; }
.ks-app .ks-voice-live__text { min-width: 0; color: var(--ks-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ks-app .ks-voice-live.is-error { color: var(--ks-danger-text); border: 1px solid var(--ks-border-strong); }
.ks-app .ks-voice-live.is-error { border-radius: 14px; padding: 8px 12px; }
.ks-app .ks-voice-live.is-error .ks-voice-live__text { color: var(--ks-danger-text); white-space: normal; }
.ks-app .ks-voice-live__cancel { min-height: 30px; padding: 2px 10px; }
.ks-app .ks-voice-meter { display: inline-flex; align-items: center; gap: 3px; height: 22px; --ks-lvl: .15; }
.ks-app .ks-voice-meter i { display: block; width: 4px; height: 100%; border-radius: 3px; background: var(--ks-danger); transform-origin: center; transform: scaleY(calc(.2 + var(--ks-lvl) * .8)); transition: transform 90ms linear; }
.ks-app .ks-voice-meter i:nth-child(2) { transform: scaleY(calc(.2 + var(--ks-lvl) * .62)); }
.ks-app .ks-voice-meter i:nth-child(3) { transform: scaleY(calc(.2 + var(--ks-lvl) * 1)); }
.ks-app .ks-voice-meter i:nth-child(4) { transform: scaleY(calc(.2 + var(--ks-lvl) * .7)); }
.ks-app .ks-voice-meter i:nth-child(5) { transform: scaleY(calc(.2 + var(--ks-lvl) * .5)); }
/* Reduced motion: a still meter, the timer in the text says it is recording. */
.ks-app .ks-voice-live.is-still .ks-voice-meter i { transform: scaleY(.6); transition: none; }
.ks-app .ks-voice-live.is-error .ks-voice-meter { display: none; }

/* ---------- player ---------- */
.ks-app .ks-voice { display: grid; gap: 12px; min-width: 0; }
.ks-app .ks-voice__player { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ks-app .ks-voice__play {
	flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	background: var(--ks-ink); color: var(--ks-on-ink); box-shadow: none;
}
.ks-app .ks-voice__play:hover { background: var(--ks-ink); color: var(--ks-on-ink); filter: brightness(1.15); }
.ks-app .ks-voice__play .ks-icon { margin-left: 2px; }
.ks-app .ks-voice.is-playing .ks-voice__play .ks-icon { margin-left: 0; }
.ks-app .ks-voice__wave {
	flex: 1 1 120px; min-width: 96px; height: 36px; display: flex; align-items: center; gap: 3px; overflow: hidden;
	border-radius: 8px; cursor: pointer;
}
.ks-app .ks-voice__wave i {
	flex: 1 1 0; min-width: 0; max-width: 4px; height: var(--ks-h, 40%); border-radius: 3px;
	background: var(--ks-ink); opacity: .35; transition: opacity 150ms var(--ks-ease, ease);
}
.ks-app .ks-voice__wave i.is-played { opacity: 1; }
.ks-app .ks-voice__time { flex: none; min-width: 3.2em; text-align: right; font-size: .78rem; color: var(--ks-text-muted); font-variant-numeric: tabular-nums; }
.ks-app .ks-voice__written { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ks-text); }
.ks-app .ks-voice__label {
	display: inline-flex; align-items: center; margin-right: 6px; padding: 4px 9px; border-radius: 8px;
	font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	background: var(--ks-surface-2); color: var(--ks-text-muted); vertical-align: 1px;
}
.ks-app .ks-voice__wave:focus-visible { outline: 3px solid var(--ks-focus); outline-offset: 2px; }

/* In a message bubble (voice notes) the player sits on a plain surface chip. */
.ks-app .ks-msg-bubble .ks-voice { width: min(300px, 62vw); }

@media (prefers-reduced-motion: reduce) {
	.ks-app .ks-voice__wave i { transition: none; }
}