/*
 * RecordingIndicator — compact red pill shown in the UserArea
 * (next to the mic / deafen controls) while a voice recording is
 * in progress. Pulses softly so it's visible at a glance; clicking
 * opens a confirm dialog that stops the recording.
 */

.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid rgba(237, 66, 69, 0.4);
	border-radius: 999px;
	background: rgba(237, 66, 69, 0.12);
	color: var(--status-danger, #ed4245);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.pill:hover {
	background: rgba(237, 66, 69, 0.2);
	border-color: rgba(237, 66, 69, 0.6);
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--status-danger, #ed4245);
	box-shadow: 0 0 0 0 rgba(237, 66, 69, 0.5);
	animation: recPulse 1.4s ease-out infinite;
}

@keyframes recPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(237, 66, 69, 0.55);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(237, 66, 69, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(237, 66, 69, 0);
	}
}

.timer {
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}

.label {
	text-transform: uppercase;
}
