/* UM Messaging Voice Input - stile pulsante microfono, allineato alla palette
   di Indieffusione / Noise Symphony (viola brand campionato dal bottone
   "Invia messaggio" del sito: rgb(94, 53, 157) / #5E359D).

   Pulsante circolare con bordo viola ben visibile (niente etichetta
   testuale, solo icona) e un badge "Novità" che compare solo finché
   l'utente non l'ha ancora usato almeno una volta (poi si nasconde per
   sempre su quel browser). */

.umm-voice-mic {
	--umm-purple: #5e359d;
	--umm-purple-soft: rgba(94, 53, 157, 0.1);
	--umm-accent: #e6397a;

	position: relative;
	overflow: visible;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 8px;
	border: 1.5px solid var(--umm-purple);
	border-radius: 50%;
	cursor: pointer;
	color: var(--umm-purple);
	background: #fff;
	vertical-align: middle;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .1s ease;
}

.umm-voice-mic:hover {
	color: #fff;
	background: var(--umm-purple);
	transform: translateY(-1px);
}

.umm-voice-mic svg {
	position: relative;
	z-index: 1;
	width: 15px;
	height: 15px;
	flex: none;
	display: block;
	fill: currentColor;
}

/* Stesso identico effetto "ripple" del pulsante della chat del sito
   (#asi-fab-ripple / @keyframes ripplePulse): un anello viola che si
   espande e sfuma, in loop continuo, per invitare all'uso — coerente con
   lo stile già presente altrove sul sito. */
.umm-voice-mic::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(94, 53, 157, 0.35);
	animation: umm-voice-ripple 2.2s ease-out infinite;
	pointer-events: none;
}

@keyframes umm-voice-ripple {
	0%   { transform: scale(1); opacity: .4; }
	100% { transform: scale(2.4); opacity: 0; }
}

.umm-voice-mic.is-recording {
	color: #fff;
	background: var(--umm-accent);
	border-color: var(--umm-accent);
	box-shadow: 0 0 0 0 rgba(230, 57, 122, .55);
	animation: umm-voice-pulse 1.3s ease-out infinite;
}

/* Durante la registrazione usiamo il pulse rosa/magenta (già presente) al
   posto del ripple viola, per non sovrapporre due animazioni diverse. */
.umm-voice-mic.is-recording::before {
	content: none;
}

@keyframes umm-voice-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(230, 57, 122, .55); }
	70%  { box-shadow: 0 0 0 8px rgba(230, 57, 122, 0); }
	100% { box-shadow: 0 0 0 0 rgba(230, 57, 122, 0); }
}

.umm-voice-badge {
	position: absolute;
	top: -9px;
	right: -8px;
	padding: 1px 6px;
	background: var(--umm-accent);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	border-radius: 999px;
	line-height: 1.5;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	pointer-events: none;
}

.umm-voice-hint {
	display: none;
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	width: max-content;
	max-width: 220px;
	padding: 8px 12px;
	background: var(--umm-purple, #5e359d);
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	text-align: left;
	white-space: normal;
}

.umm-voice-hint::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: var(--umm-purple, #5e359d) transparent transparent transparent;
}