/**
 * Componente: Visibilidad contextual de JoinChat
 * Proyecto: La Floristería Miriam Franco
 *
 * Objetivo:
 * Mostrar y ocultar suavemente el widget flotante de JoinChat
 * según la zona visible del sitio, evitando movimientos bruscos
 * o competencia visual con header y footer.
 *
 * Zonas de ocultamiento:
 * - Header principal visible.
 * - Footer institucional visible.
 *
 * Clases requeridas:
 * - #masthead
 * - .ddvs-footer__container
 * - .joinchat
 * - .lf-joinchat-is-hidden
 */

/* ==========================================================
   TRANSICIÓN BASE DEL WIDGET JOINCHAT
   ========================================================== */

/**
 * El efecto se limita a opacidad.
 *
 * Decisión visual:
 * En una interfaz premium, el botón debe desaparecer de forma
 * silenciosa, no desplazarse. Por eso eliminamos translateY().
 *
 * Decisión técnica:
 * Evitamos aplicar transform sobre el contenedor de JoinChat,
 * ya que el plugin puede utilizar transform en sus propios
 * estados o animaciones internas.
 */
.joinchat {
	opacity: 1;
	visibility: visible;

	transition:
		opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0s;

	will-change: opacity;
}

/* ==========================================================
   ESTADO OCULTO: HEADER O FOOTER VISIBLE
   ========================================================== */

/**
 * Oculta JoinChat mediante un fade limpio.
 *
 * visibility espera a que termine el desvanecimiento antes de
 * ocultar completamente el elemento. Así evitamos que desaparezca
 * de forma abrupta mientras aún debería estar animándose.
 */
body.lf-joinchat-is-hidden .joinchat {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 0.36s cubic-bezier(0.4, 0, 1, 1),
		visibility 0s linear 0.36s;
}

/* ==========================================================
   ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   ========================================================== */

/**
 * Respeta la preferencia del usuario cuando su sistema solicita
 * minimizar efectos visuales o animaciones.
 */
@media (prefers-reduced-motion: reduce) {
	.joinchat,
	body.lf-joinchat-is-hidden .joinchat {
		transition: none;
	}
}

body.lf-joinchat-is-hidden .joinchat {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 0.36s cubic-bezier(0.4, 0, 1, 1),
		visibility 0s linear 0.36s;
}



/* ==========================================================
   Corrección de interacción: Chatbox invisible de JoinChat
   ========================================================== */

/**
 * Problema:
 * JoinChat mantiene renderizado el contenedor de la ventana de chat
 * aun cuando visualmente se encuentra cerrado. Esto puede bloquear
 * botones, cards o enlaces ubicados detrás del área invisible.
 *
 * Solución:
 * El chatbox cerrado no recibe eventos de interacción.
 * Únicamente se habilitan cuando el plugin aplica el estado abierto
 * mediante la clase .joinchat--chatbox.
 */
.joinchat__chatbox {
	pointer-events: none;
}

.joinchat--chatbox .joinchat__chatbox {
	pointer-events: auto;
}