/* ==========================================================================
   Movvel · Widget de chat con IA
   ========================================================================== */

.movvel-chatbot-widget {
	--mc-bg: #FAFAF8;
	--mc-ink: #1A1D1F;
	--mc-ink-soft: #5B6168;
	--mc-border: #E2E5E8;
	--mc-accent: #008375;
	--mc-accent-ink: #FFFFFF;
	--mc-burbuja-cliente: #008375;
	--mc-burbuja-ia: #FFFFFF;
	--mc-radius: 14px;
	--mc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--mc-font);
	color: var(--mc-ink);
	background: var(--mc-bg);
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	max-width: 420px;
	height: 560px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
}

.movvel-chatbot-widget * {
	box-sizing: border-box;
}

.movvel-chatbot-mensajes {
	flex: 1;
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.movvel-chatbot-mensaje {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14.5px;
	line-height: 1.5;
}

.movvel-chatbot-mensaje p {
	margin: 0;
	white-space: pre-wrap;
}

.movvel-chatbot-mensaje.es-cliente {
	align-self: flex-end;
	background: var(--mc-burbuja-cliente);
	color: #FFFFFF;
	border-bottom-right-radius: 4px;
}

.movvel-chatbot-mensaje.es-ia {
	align-self: flex-start;
	background: var(--mc-burbuja-ia);
	color: var(--mc-ink);
	border: 1px solid var(--mc-border);
	border-bottom-left-radius: 4px;
}

.movvel-chatbot-mensaje.es-error {
	align-self: center;
	background: #FBEAEA;
	color: #D14343;
	font-size: 13px;
	text-align: center;
}

.movvel-chatbot-escribiendo {
	display: flex;
	gap: 4px;
	padding: 0 18px 10px;
}

.movvel-chatbot-escribiendo span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mc-ink-soft);
	opacity: 0.4;
	animation: movvel-chatbot-parpadeo 1.2s infinite ease-in-out;
}

.movvel-chatbot-escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.movvel-chatbot-escribiendo span:nth-child(3) { animation-delay: 0.3s; }

@keyframes movvel-chatbot-parpadeo {
	0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
	40% { opacity: 0.9; transform: scale(1); }
}

.movvel-chatbot-form {
	display: flex;
	gap: 8px;
	padding: 14px;
	border-top: 1px solid var(--mc-border);
	background: #FFFFFF;
}

.movvel-chatbot-form textarea {
	flex: 1;
	resize: none;
	font-family: inherit;
	font-size: 14.5px;
	padding: 10px 12px;
	border: 1.5px solid var(--mc-border);
	border-radius: 10px;
	max-height: 90px;
}

.movvel-chatbot-form textarea:focus {
	outline: none;
	border-color: var(--mc-accent);
}

.movvel-chatbot-enviar {
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--mc-accent-ink);
	background: var(--mc-accent);
	border: none;
	border-radius: 10px;
	padding: 0 18px;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.movvel-chatbot-enviar:hover {
	filter: brightness(1.08);
}

.movvel-chatbot-enviar:disabled {
	background: var(--mc-border);
	color: var(--mc-ink-soft);
	cursor: not-allowed;
}

/* ==========================================================================
   Botón flotante global (burbuja + panel desplegable)
   ========================================================================== */

.movvel-chatbot-flotante {
	position: fixed;
	z-index: 9998; /* Justo por debajo del botón de WhatsApp existente (z-index 9999), para no competir por prioridad de clic si algún día se solapan en una resolución muy estrecha. */
	right: 20px;
	bottom: 116px; /* Por encima del botón de WhatsApp, que ahora también tiene icono + texto debajo (~78px de alto) + margen, para que ambos queden visibles y usables, uno encima del otro. */
	font-family: var(--mc-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif);
}

.movvel-chatbot-flotante-boton {
	width: 64px;
	border: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 0;
}

.movvel-chatbot-flotante-boton-icono {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #008375;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 18px rgba(0, 131, 117, 0.4);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.movvel-chatbot-flotante-boton:hover .movvel-chatbot-flotante-boton-icono {
	transform: scale(1.06);
	box-shadow: 0 6px 22px rgba(0, 131, 117, 0.5);
}

.movvel-chatbot-flotante-boton-texto {
	font-size: 11.5px;
	font-weight: 700;
	color: #008375;
	text-align: center;
	line-height: 1.25;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7);
}

.movvel-chatbot-icono-cerrar {
	display: none;
}

/* Cuando el panel está abierto, el botón colapsa a un círculo simple
   con la X de cerrar (sin texto debajo, no estorba al panel ya abierto). */
.movvel-chatbot-flotante.is-open .movvel-chatbot-flotante-boton-texto {
	display: none;
}

.movvel-chatbot-flotante.is-open .movvel-chatbot-icono-abrir {
	display: none;
}

.movvel-chatbot-flotante.is-open .movvel-chatbot-icono-cerrar {
	display: block;
}

.movvel-chatbot-flotante-panel {
	position: absolute;
	right: 0;
	bottom: 92px;
	width: 380px;
	max-width: calc(100vw - 32px);
	background: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	display: flex;
	flex-direction: column;

	/* Oculto por defecto; se muestra solo con .is-open en el ancestro. */
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.movvel-chatbot-flotante.is-open .movvel-chatbot-flotante-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.movvel-chatbot-flotante-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: #008375;
	color: #FFFFFF;
}

.movvel-chatbot-flotante-titulo {
	font-size: 15px;
	font-weight: 700;
}

.movvel-chatbot-flotante-cerrar {
	background: transparent;
	border: none;
	color: #FFFFFF;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

/* Dentro del flotante, el widget pierde su propio borde/radio (ya los
   aporta el panel que lo envuelve) y ocupa todo el ancho disponible. */
.movvel-chatbot-flotante .movvel-chatbot-widget {
	border: none;
	border-radius: 0;
	max-width: none;
	height: 480px;
}

@media (max-width: 480px) {
	.movvel-chatbot-flotante {
		right: 14px;
		bottom: 104px;
	}

	.movvel-chatbot-flotante-panel {
		width: calc(100vw - 28px);
		bottom: 88px;
	}

	.movvel-chatbot-flotante .movvel-chatbot-widget {
		height: 60vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.movvel-chatbot-flotante-panel {
		transition: none;
	}
}

@media (max-width: 480px) {
	.movvel-chatbot-widget {
		max-width: 100%;
		height: 480px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.movvel-chatbot-escribiendo span {
		animation: none;
	}
}