/*
 * Enertrim Chatbot - estilos del widget.
 * Paleta coherente con enertrim.com.ar:
 * fondo #0A0C0E, tarjetas #14191E, borde #124E5F,
 * texto #F7F9FB / #D9DEE3, acento #F5A623.
 */

#enertrim-chatbot-root,
#enertrim-chatbot-root * {
	box-sizing: border-box;
}

#enertrim-chatbot-root {
	/*
	 * --enertrim-chatbot-bottom-extra la actualiza el JS (chatbot.js) cuando
	 * detecta otro elemento fijo anclado a la misma esquina (por ejemplo, un
	 * banner de cookies o un botón de WhatsApp de otro plugin), para que
	 * nuestro botón suba y no quede tapado ni tapando nada. 0px si no hay
	 * conflicto.
	 */
	--enertrim-chatbot-bottom-extra: 0px;
	position: fixed;
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--enertrim-chatbot-bottom-extra, 0px));
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Botón flotante redondo */
#enertrim-chatbot-toggle {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #F5A623;
	border: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#enertrim-chatbot-toggle:hover {
	background-color: #F7B84D;
	transform: scale(1.06);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#enertrim-chatbot-toggle:active {
	transform: scale(0.97);
}

/* Foco visible con teclado (Tab), no al hacer click con el mouse. */
#enertrim-chatbot-toggle:focus-visible {
	outline: 3px solid #F7F9FB;
	outline-offset: 3px;
}

/*
 * Los dos íconos (burbuja y X) se superponen en el mismo lugar y se
 * cross-fadean + rotan con CSS al abrir/cerrar. El tamaño se fija acá por
 * CSS (no alcanza con los atributos width/height del SVG): dentro de un
 * contenedor display:flex, un <svg> sin width/height por CSS puede terminar
 * con ancho 0 en algunos navegadores — esa era la causa de que el botón se
 * viera vacío.
 */
.enertrim-chatbot-icon-wrap {
	position: relative;
	width: 24px;
	height: 24px;
	display: block;
}

.enertrim-chatbot-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	display: block;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.enertrim-chatbot-icon--bubble {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

.enertrim-chatbot-icon--close {
	opacity: 0;
	transform: rotate(-45deg) scale(0.6);
}

/* Estado abierto: la burbuja se esconde, aparece la X. */
#enertrim-chatbot-toggle[aria-expanded="true"] .enertrim-chatbot-icon--bubble {
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
}

#enertrim-chatbot-toggle[aria-expanded="true"] .enertrim-chatbot-icon--close {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	#enertrim-chatbot-toggle,
	.enertrim-chatbot-icon {
		transition: none;
	}
}

/* Ventana de chat */
.enertrim-chatbot-window {
	position: fixed;
	right: 24px;
	bottom: calc(96px + env(safe-area-inset-bottom, 0px) + var(--enertrim-chatbot-bottom-extra, 0px));
	width: 360px;
	max-width: calc(100vw - 32px);
	height: min(560px, calc(100vh - 140px));
	background-color: #14191E;
	border: 1px solid #124E5F;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 999999;
}

.enertrim-chatbot-window[hidden] {
	display: none;
}

.enertrim-chatbot-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background-color: #0B3441;
	border-bottom: 1px solid #124E5F;
	flex-shrink: 0;
}

.enertrim-chatbot-title {
	color: #F7F9FB;
	font-weight: 700;
	font-size: 15px;
}

#enertrim-chatbot-close {
	background: transparent;
	border: none;
	color: #D9DEE3;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
}

#enertrim-chatbot-close:hover {
	color: #F7F9FB;
}

.enertrim-chatbot-disclaimer {
	margin: 0;
	padding: 8px 16px;
	font-size: 11px;
	line-height: 1.4;
	color: #8A949E;
	background-color: #0A0C0E;
	border-bottom: 1px solid #124E5F;
	flex-shrink: 0;
}

.enertrim-chatbot-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.enertrim-chatbot-msg {
	display: flex;
}

.enertrim-chatbot-msg--user {
	justify-content: flex-end;
}

.enertrim-chatbot-msg--bot {
	justify-content: flex-start;
}

.enertrim-chatbot-bubble {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.enertrim-chatbot-msg--user .enertrim-chatbot-bubble {
	background-color: #F5A623;
	color: #0A0C0E;
	border-bottom-right-radius: 4px;
}

.enertrim-chatbot-msg--bot .enertrim-chatbot-bubble {
	background-color: #0A0C0E;
	color: #D9DEE3;
	border: 1px solid #124E5F;
	border-bottom-left-radius: 4px;
}

/* Indicador de "escribiendo..." */
.enertrim-chatbot-dots {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 12px 14px;
}

.enertrim-chatbot-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #8A949E;
	animation: enertrim-chatbot-blink 1.2s infinite ease-in-out;
}

.enertrim-chatbot-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

.enertrim-chatbot-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes enertrim-chatbot-blink {
	0%, 80%, 100% {
		opacity: 0.3;
	}
	40% {
		opacity: 1;
	}
}

/* Enlace a WhatsApp, siempre visible */
.enertrim-chatbot-whatsapp {
	display: block;
	margin: 0 16px 12px;
	padding: 9px 14px;
	border: 1px solid #F5A623;
	border-radius: 8px;
	color: #F5A623;
	text-align: center;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	flex-shrink: 0;
}

.enertrim-chatbot-whatsapp:hover {
	background-color: rgba(245, 166, 35, 0.08);
}

/* Formulario de entrada */
.enertrim-chatbot-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 16px 16px;
	border-top: 1px solid #124E5F;
	flex-shrink: 0;
}

.enertrim-chatbot-input {
	flex: 1 1 auto;
	resize: none;
	min-height: 38px;
	max-height: 90px;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid #124E5F;
	background-color: #0A0C0E;
	color: #F7F9FB;
	font-size: 14px;
	font-family: inherit;
}

.enertrim-chatbot-input::placeholder {
	color: #8A949E;
}

.enertrim-chatbot-input:focus {
	outline: none;
	border-color: #F5A623;
}

.enertrim-chatbot-input:disabled {
	opacity: 0.6;
}

.enertrim-chatbot-send {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: none;
	background-color: #F5A623;
	color: #0A0C0E;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.enertrim-chatbot-send:disabled {
	opacity: 0.6;
	cursor: default;
}

/*
 * Pantalla completa en mobile. Usa 100dvh (altura visual real, descontando
 * barras de navegador que aparecen/desaparecen en iOS/Android) con 100vh
 * como respaldo para navegadores que no soporten dvh todavía. El padding con
 * env(safe-area-inset-*) evita que el header o el formulario queden debajo
 * del notch o la barra de gestos del teléfono.
 */
@media (max-width: 480px) {
	.enertrim-chatbot-window {
		right: 0;
		bottom: 0;
		left: 0;
		top: 0;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
	}

	.enertrim-chatbot-header {
		padding-top: calc(14px + env(safe-area-inset-top, 0px));
	}

	.enertrim-chatbot-form {
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * El botón flotante se esconde mientras la ventana ocupa toda la pantalla
	 * (si no, quedaría flotando arriba de un chat a pantalla completa, sin
	 * sentido). Reaparece al cerrar, porque .enertrim-chatbot-window vuelve a
	 * tener [hidden]. :has() tiene buen soporte en navegadores actuales; si
	 * algún navegador viejo no lo soporta, el único efecto es que el botón
	 * queda visible de más arriba de la ventana — no rompe nada.
	 */
	#enertrim-chatbot-toggle:has(+ .enertrim-chatbot-window:not([hidden])) {
		display: none;
	}
}