/*!
 * Microfon Assistant – widget.css
 * Tutti i selettori sono confinati nella radice #microfon-assistant o nelle classi mfa-.
 */

#microfon-assistant {
	--mfa-dark: #1a1a1a;
	--mfa-lime: #b0da50;
	--mfa-green: #1c8105;
	--mfa-green-dark: #156303;
	--mfa-text: #4d4c4c;
	--mfa-light: #f6f6f6;
	--mfa-white: #fff;
	--mfa-border: #767676;
	--mfa-line: #d6d6d6;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--mfa-dark);
	text-align: left;
}

/* Local reset: the theme cannot restyle the widget controls. */
#microfon-assistant *,
#microfon-assistant *::before,
#microfon-assistant *::after {
	box-sizing: border-box;
}

#microfon-assistant p,
#microfon-assistant h2,
#microfon-assistant ul,
#microfon-assistant li {
	margin: 0;
	padding: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

#microfon-assistant ul {
	list-style: none;
}

#microfon-assistant button,
#microfon-assistant input,
#microfon-assistant a {
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	min-width: 0;
	max-width: 100%;
}

#microfon-assistant button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	white-space: normal;
	cursor: pointer;
}

#microfon-assistant svg {
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
}

#microfon-assistant :focus {
	outline: none;
}

#microfon-assistant :focus-visible {
	outline: 3px solid var(--mfa-green);
	outline-offset: 2px;
}

#microfon-assistant .mfa-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Launcher ---------- */

#microfon-assistant .mfa-launcher {
	position: fixed;
	bottom: 20px;
	z-index: 99998;
	gap: 8px;
	min-height: 52px;
	padding: 0 22px 0 16px;
	border-radius: 999px;
	background: var(--mfa-dark);
	color: var(--mfa-white);
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

#microfon-assistant .mfa-launcher svg {
	color: var(--mfa-lime);
}

#microfon-assistant .mfa-launcher:hover {
	background: #000;
}

#microfon-assistant.mfa-pos-left .mfa-launcher {
	left: 20px;
}

#microfon-assistant.mfa-pos-right .mfa-launcher {
	right: 20px;
}

/* ---------- Panel ---------- */

#microfon-assistant .mfa-panel {
	position: fixed;
	bottom: 88px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 40px);
	height: 600px;
	max-height: calc(100vh - 108px);
	max-height: calc(100dvh - 108px);
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 16px;
	background: var(--mfa-white);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

#microfon-assistant .mfa-panel[hidden] {
	display: none;
}

#microfon-assistant.mfa-pos-left .mfa-panel {
	left: 20px;
}

#microfon-assistant.mfa-pos-right .mfa-panel {
	right: 20px;
}

#microfon-assistant.mfa-no-launcher .mfa-panel {
	bottom: 20px;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
}

#microfon-assistant .mfa-header {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	min-height: 60px;
	padding: 14px 60px 14px 16px;
	background: var(--mfa-dark);
	color: var(--mfa-white);
}

#microfon-assistant .mfa-header :focus-visible {
	outline-color: var(--mfa-lime);
}

/* Decorative virtual-assistant badge: dark strokes on a lime circle, never a status light. */
#microfon-assistant .mfa-avatar-badge {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--mfa-lime);
	color: var(--mfa-dark);
}

#microfon-assistant .mfa-avatar-badge svg {
	width: 22px;
	height: 22px;
}

#microfon-assistant .mfa-title {
	color: var(--mfa-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

#microfon-assistant .mfa-close {
	position: absolute;
	top: 8px;
	right: 8px;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--mfa-white);
}

#microfon-assistant .mfa-close:hover {
	background: rgba(255, 255, 255, 0.14);
}

/* ---------- Conversation ---------- */

#microfon-assistant .mfa-log {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	padding: 16px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#microfon-assistant .mfa-log:focus-visible {
	outline-offset: -3px;
}

#microfon-assistant .mfa-msg {
	flex: none;
	max-width: 100%;
	overflow-wrap: anywhere;
}

#microfon-assistant .mfa-msg-bot {
	align-self: stretch;
	padding: 12px 14px;
	border-radius: 4px 16px 16px 16px;
	background: var(--mfa-light);
	color: var(--mfa-dark);
}

#microfon-assistant .mfa-msg-user {
	align-self: flex-end;
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 16px 4px 16px 16px;
	background: var(--mfa-dark);
	color: var(--mfa-white);
	white-space: pre-wrap;
}

#microfon-assistant .mfa-msg-safety {
	border-left: 4px solid var(--mfa-dark);
}

#microfon-assistant .mfa-p + .mfa-p {
	margin-top: 8px;
}

#microfon-assistant .mfa-limit {
	font-weight: 600;
}

#microfon-assistant .mfa-subheading {
	margin-top: 14px;
	font-weight: 700;
}

#microfon-assistant .mfa-hint {
	margin-top: 6px;
	color: var(--mfa-text);
}

#microfon-assistant .mfa-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

#microfon-assistant .mfa-option {
	width: 100%;
	padding: 10px 14px;
	border: 2px solid var(--mfa-green);
	border-radius: 12px;
	background: var(--mfa-white);
	color: var(--mfa-dark);
}

#microfon-assistant .mfa-option:hover {
	background: #eef6e2;
}

#microfon-assistant .mfa-cities {
	flex-direction: row;
	flex-wrap: wrap;
}

#microfon-assistant .mfa-cities .mfa-option {
	width: auto;
}

#microfon-assistant .mfa-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin-top: 12px;
	padding: 10px 16px;
	border-radius: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

#microfon-assistant .mfa-btn-primary {
	background: var(--mfa-green);
	color: var(--mfa-white);
}

#microfon-assistant .mfa-btn-primary:hover {
	background: var(--mfa-green-dark);
	color: var(--mfa-white);
}

#microfon-assistant .mfa-btn-secondary {
	justify-content: center;
	border: 2px solid var(--mfa-dark);
	background: var(--mfa-white);
	color: var(--mfa-dark);
}

#microfon-assistant .mfa-btn-secondary:hover {
	background: var(--mfa-light);
}

#microfon-assistant .mfa-phones {
	margin-top: 4px;
}

#microfon-assistant .mfa-tel,
#microfon-assistant .mfa-maps,
#microfon-assistant .mfa-privacy-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--mfa-green);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#microfon-assistant .mfa-tel:hover,
#microfon-assistant .mfa-maps:hover,
#microfon-assistant .mfa-privacy-link:hover {
	color: var(--mfa-green-dark);
}

#microfon-assistant .mfa-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}

#microfon-assistant .mfa-card {
	padding: 12px 14px;
	border: 1px solid var(--mfa-line);
	border-radius: 12px;
	background: var(--mfa-white);
}

#microfon-assistant .mfa-card .mfa-p + .mfa-p {
	margin-top: 2px;
}

#microfon-assistant .mfa-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--mfa-lime);
	color: var(--mfa-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

#microfon-assistant .mfa-badge-point {
	background: var(--mfa-dark);
	color: var(--mfa-white);
}

#microfon-assistant .mfa-card-title {
	margin-top: 6px;
	font-size: 17px;
	font-weight: 700;
}

#microfon-assistant .mfa-card-name {
	font-weight: 600;
}

#microfon-assistant .mfa-note {
	color: var(--mfa-text);
}

/* ---------- Footer ---------- */

#microfon-assistant .mfa-footer {
	flex: none;
	padding: 8px 12px 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--mfa-line);
	background: var(--mfa-white);
}

/* Small row below the form: «Torna al menu» floats at the left, «Privacy» sits on the same line beside it. */
#microfon-assistant .mfa-footer-bottom {
	display: flow-root;
	margin-top: 4px;
}

#microfon-assistant .mfa-menu {
	float: left;
	min-height: 32px;
	margin-right: 8px;
	padding: 0 4px;
	color: var(--mfa-dark);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* «Privacy»: closed it is a link-like control in the row; open, its text takes the full width below the row. */
#microfon-assistant .mfa-privacy {
	margin: 0;
	padding: 0;
	border: 0;
}

#microfon-assistant .mfa-privacy-summary {
	display: inline-flex;
	align-items: center;
	vertical-align: top;
	width: max-content;
	min-height: 32px;
	padding: 0 4px;
	color: var(--mfa-dark);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 2px;
	list-style: none;
	cursor: pointer;
}

#microfon-assistant .mfa-privacy-summary::-webkit-details-marker {
	display: none;
}

#microfon-assistant .mfa-privacy-text {
	clear: left;
	max-height: 12em;
	margin-top: 4px;
	overflow-y: auto;
	color: var(--mfa-text);
	font-size: 16px;
	line-height: 1.4;
}

#microfon-assistant .mfa-form {
	display: flex;
	gap: 8px;
	margin: 0;
}

#microfon-assistant .mfa-input {
	flex: 1 1 auto;
	width: 100%;
	min-height: 48px;
	padding: 0 12px;
	border: 2px solid var(--mfa-border);
	border-radius: 10px;
	background: var(--mfa-white);
	color: var(--mfa-dark);
	line-height: normal;
	outline-offset: 0;
}

#microfon-assistant .mfa-submit {
	flex: none;
	justify-content: center;
	min-height: 48px;
	padding: 0 18px;
	border-radius: 10px;
	background: var(--mfa-dark);
	color: var(--mfa-white);
	font-weight: 700;
}

#microfon-assistant .mfa-submit:hover {
	background: #000;
}

/* ---------- Mobile: full screen ---------- */

@media (max-width: 480px) {
	#microfon-assistant .mfa-panel,
	#microfon-assistant.mfa-pos-left .mfa-panel,
	#microfon-assistant.mfa-pos-right .mfa-panel,
	#microfon-assistant.mfa-no-launcher .mfa-panel {
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;
		width: 100%;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border: 0;
		border-radius: 0;
	}

	#microfon-assistant.mfa-vv .mfa-panel {
		top: var(--mfa-vvt);
		height: var(--mfa-vvh);
	}

	#microfon-assistant.mfa-is-open .mfa-launcher {
		display: none;
	}

	/* No visible scrollbar inside the full-screen panel; touch, wheel and keyboard still scroll. */
	#microfon-assistant .mfa-log,
	#microfon-assistant .mfa-privacy-text {
		scrollbar-width: none;
	}

	#microfon-assistant .mfa-log::-webkit-scrollbar,
	#microfon-assistant .mfa-privacy-text::-webkit-scrollbar {
		display: none;
	}
}

/* Narrow phones: a little more room for the field, so its placeholder is not cut next to «Invia». */
@media (max-width: 360px) {
	#microfon-assistant .mfa-footer {
		padding-right: 8px;
		padding-left: 8px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	#microfon-assistant .mfa-launcher,
	#microfon-assistant .mfa-option,
	#microfon-assistant .mfa-btn,
	#microfon-assistant .mfa-submit {
		transition: background-color 0.15s ease;
	}
}

/* ---------- Shortcode button (outside the widget root) ---------- */

.mfa-open-button.mfa-open-button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin: 0;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: #1c8105;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}

.mfa-open-button.mfa-open-button:hover {
	background: #156303;
	color: #fff;
}

.mfa-open-button.mfa-open-button:focus-visible {
	outline: 3px solid #1c8105;
	outline-offset: 2px;
}
