/*
 * H2O IA Funnels — presentación del funnel de sistema h2o-ai-agent.
 *
 * Este archivo pertenece a Funnels. Se carga únicamente cuando el funnel
 * h2o-ai-agent está activo y H2O AI Agent ya encoló su renderer visual.
 * El robot sigue siendo un recurso del Agent; la composición del panel del
 * funnel, sus proporciones y su responsive se gobiernan desde aquí.
 */

.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat::before,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__messages,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__message,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__form,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__fields,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__field,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__input,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__send,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__choice {
	box-sizing: border-box;
}

/* Globo orgánico suave: conserva personalidad sin deformar el contenido. */
.h2o-ai-agent[data-h2o-ai-agent].is-chat-open .h2o-ai-agent__chat {
	z-index: 2147483646 !important;
	isolation: isolate;
}

/* Estado cerrado/terminal: no se altera la geometría nativa del widget. */

.h2o-ai-agent[data-h2o-ai-agent].is-chat-open .h2o-ai-agent__chat::before {
	background: #fff !important;
	border-radius: 18% 23% 17% 21% / 16% 19% 22% 18% !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	clip-path: none !important;
	filter: drop-shadow(0 18px 34px rgba(15, 23, 42, .18)) drop-shadow(0 3px 10px rgba(15, 23, 42, .12)) !important;
}

/* Nunca partir palabras letra a letra dentro del funnel. */
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__message,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__field,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__choice {
	word-break: normal !important;
	overflow-wrap: break-word !important;
	hyphens: none;
}

/* El prompt ya contiene la pregunta de nombre. El label continúa accesible,
 * pero no se vuelve a dibujar como una segunda pregunta visible. */
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__field:has(.h2o-ai-agent__input[data-answer-name="name"]) > span {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* El robot queda por encima del borde del globo, no detrás del panel. */
.h2o-ai-agent[data-h2o-ai-agent][data-placement="floating"].is-chat-open .h2o-ai-agent__button {
	z-index: 2147483647 !important;
}

/*
 * Móvil/tablet: una sola composición estable 1–999 px para ambos puntos de
 * montaje del Agent (floating y shortcode). El modo de montaje no debe cambiar
 * la geometría del funnel abierto.
 */
@media (max-width: 999px) {
	.h2o-ai-agent[data-h2o-ai-agent].is-chat-open {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100dvh !important;
		translate: none !important;
		transform: none !important;
		pointer-events: none !important;
		touch-action: auto;
	}

	.h2o-ai-agent[data-h2o-ai-agent].is-chat-open .h2o-ai-agent__chat {
		position: fixed !important;
		left: 4vw !important;
		right: auto !important;
		top: calc(50dvh - 12px) !important;
		bottom: auto !important;
		width: 92vw !important;
		min-width: 0 !important;
		max-width: 92vw !important;
		max-height: min(68dvh, 560px) !important;
		overflow: visible !important;
		transform: translateY(-50%) scale(.985) !important;
		transform-origin: center center !important;
		pointer-events: auto !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent].is-chat-open .h2o-ai-agent__chat[aria-hidden="false"] {
		transform: translateY(-50%) scale(1) !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent].is-chat-open .h2o-ai-agent__chat::before {
		inset: 0 !important;
		border-radius: 17% 22% 16% 20% / 15% 18% 21% 17% !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__messages {
		min-height: 0 !important;
		max-height: min(32dvh, 260px) !important;
		padding: 28px 32px 6px !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__message {
		width: auto !important;
		max-width: 100% !important;
		margin: 0 0 6px !important;
		padding: 14px 16px !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat-status {
		padding: 0 32px 2px !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__choices {
		width: 100% !important;
		padding: 6px 32px 30px !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__form {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100% !important;
		gap: 10px !important;
		padding: 6px 32px 32px !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__fields,
	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__field,
	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__input,
	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__send,
	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__choice {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* Robot apoyado en la esquina inferior derecha del globo en ambos modos. */
	.h2o-ai-agent[data-h2o-ai-agent].is-chat-open .h2o-ai-agent__button {
		position: fixed !important;
		z-index: 2147483647 !important;
		left: auto !important;
		right: 4.5vw !important;
		top: calc(50dvh + 96px) !important;
		bottom: auto !important;
		width: clamp(92px, 24vw, 124px) !important;
		height: auto !important;
		aspect-ratio: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}
}

/* Escritorio: conserva la relación robot/globo del modo flotante. Shortcode
 * mantiene su composición propia fuera del responsive móvil. */
@media (min-width: 1000px) {
	.h2o-ai-agent[data-h2o-ai-agent][data-placement="floating"] .h2o-ai-agent__chat {
		left: calc(100% - 14px) !important;
		right: auto !important;
		top: calc(50% - 12px) !important;
		width: min(390px, calc(100vw - 32px)) !important;
		max-width: min(390px, calc(100vw - 32px)) !important;
		max-height: min(460px, calc(100dvh - 32px)) !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent].is-chat-open .h2o-ai-agent__chat::before {
		border-radius: 19% 24% 18% 22% / 17% 20% 23% 18% !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent][data-placement="floating"].is-chat-open .h2o-ai-agent__button {
		transform: translate(18%, 28%) scale(.82);
		transform-origin: center center;
	}
}

/* Postlude Agent IA: empresa/teléfono primero; preferencia de contacto después. */
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__form {
	order: 3 !important;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__choices {
	order: 4 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 12px !important;
	padding-top: 4px !important;
	padding-bottom: 10px !important;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__choices::before {
	content: '¿Por qué medio prefieres ser contactado?';
	display: block;
	flex: 0 0 100% !important;
	font-weight: 700;
	line-height: 1.35;
	margin: 4px 0 2px;
	color: inherit;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__choice {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	text-align: left !important;
	flex: 1 1 calc(50% - 6px) !important;
	width: auto !important;
	min-width: 0 !important;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__choice::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-radius: 999px;
	box-sizing: border-box;
	opacity: .75;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__choice:hover::before,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__choice:focus-visible::before,
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__choice[aria-checked="true"]::before {
	opacity: 1;
	box-shadow: inset 0 0 0 4px #fff;
	background: currentColor;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2ofm-agent-postlude-continue {
	order: 5 !important;
	width: calc(100% - 64px) !important;
	max-width: calc(100% - 64px) !important;
	margin: 8px 32px 30px !important;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2ofm-agent-postlude-continue:disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
}



/* 2.7.10: postlude alto, sin tapar texto; radio en dos columnas y botón genérico. */
@media (max-width: 999px) {
	.h2o-ai-agent[data-h2o-ai-agent].is-chat-open .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) {
		max-height: min(82dvh, calc(100dvh - 112px)) !important;
		overflow-y: auto !important;
		overflow-x: visible !important;
		overscroll-behavior: contain;
	}

	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__messages {
		max-height: none !important;
		padding-top: 54px !important;
		padding-bottom: 4px !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__form {
		padding-top: 4px !important;
		padding-bottom: 10px !important;
	}

	.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2o-ai-agent__input[data-answer-name="company"]) .h2o-ai-agent__choice {
		flex-basis: calc(50% - 6px) !important;
	}
}

/* 2.7.14: postlude como formulario nativo; el radio es campo, no opción de avance. */
.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__chat:has(.h2ofm-agent-postlude-radio-source) .h2o-ai-agent__choices[hidden] {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2ofm-agent-postlude-radio-source {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2ofm-agent-postlude-radio-group {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 12px !important;
	width: 100% !important;
	margin-top: 8px !important;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2ofm-agent-postlude-radio-option {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
}

.h2o-ai-agent[data-h2o-ai-agent] .h2o-ai-agent__send:disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
}