/*
 * Estilo del chat (assets/css/whac-chat.css)
 * ==========================================
 * Diseño moderno de burbuja flotante abajo a la derecha. Todo con variables CSS
 * para poder re-tematizar fácil, y respetando "prefers-reduced-motion" (si el
 * usuario pidió menos animaciones, se las quitamos).
 *
 * Nota: usamos un prefijo .whac- en TODO para no chocar con los estilos del tema.
 */

:root {
	--whac-primary: #2563eb;      /* azul principal */
	--whac-primary-2: #7c3aed;    /* violeta para el degradado */
	--whac-bg: #ffffff;           /* fondo del panel */
	--whac-fg: #1f2937;           /* texto principal */
	--whac-muted: #6b7280;        /* texto secundario */
	--whac-user: #2563eb;         /* burbuja del usuario */
	--whac-bot: #f3f4f6;          /* burbuja del asistente */
	--whac-radius: 18px;
	--whac-shadow: 0 12px 40px rgba(15, 23, 42, .18);
	--whac-z: 999999;
}

/* Contenedor general: fija todo abajo a la derecha. */
#whac-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: var(--whac-z);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* -------- Botón flotante -------- */
.whac-launcher {
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	background: linear-gradient( 135deg, var(--whac-primary), var(--whac-primary-2) );
	box-shadow: var(--whac-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .18s ease, box-shadow .18s ease;
	margin-left: auto;
}
.whac-launcher:hover { transform: translateY(-2px) scale(1.05); }
.whac-launcher:focus-visible { outline: 3px solid rgba(37, 99, 235, .5); outline-offset: 2px; }
.whac-launcher.is-open { transform: rotate(360deg) scale(0); opacity: 0; pointer-events: none; }

/* -------- Panel del chat -------- */
.whac-panel {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 370px;
	max-width: calc( 100vw - 40px );
	height: 540px;
	/* 100dvh sigue el área visible real cuando aparecen o desaparecen las
	 * barras del navegador móvil, a diferencia de 100vh que puede quedar alto. */
	max-height: calc( 100vh - 100px );
	max-height: calc( 100dvh - 100px );
	background: var(--whac-bg);
	border-radius: var(--whac-radius);
	box-shadow: var(--whac-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: whac-in .22s ease;
}
/* Cuando WordPress/JS marca [hidden], que de verdad se oculte (gana a display:flex). */
.whac-panel[hidden] { display: none !important; }

@keyframes whac-in {
	from { opacity: 0; transform: translateY(16px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

/* Cabecera con degradado. */
.whac-head {
	background: linear-gradient( 135deg, var(--whac-primary), var(--whac-primary-2) );
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.whac-head__title { font-weight: 700; font-size: 15px; }
.whac-head__close {
	background: transparent; border: 0; color: #fff;
	font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
	opacity: .85; transition: opacity .15s;
}
.whac-head__close:hover { opacity: 1; }

/* Zona de mensajes. */
.whac-log {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fafafa;
}
.whac-msg { display: flex; }
.whac-msg--user { justify-content: flex-end; }
.whac-msg--bot  { justify-content: flex-start; }

.whac-bubble {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.45;
	white-space: pre-wrap;   /* respeta saltos de línea del texto */
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.whac-msg--user .whac-bubble {
	background: var(--whac-user);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.whac-msg--bot .whac-bubble {
	background: var(--whac-bot);
	color: var(--whac-fg);
	border-bottom-left-radius: 4px;
}

/* Animación de "pensando…" (tres puntos que laten). */
.whac-msg.is-thinking .whac-bubble {
	color: var(--whac-muted);
	font-style: italic;
	animation: whac-pulse 1.2s ease-in-out infinite;
}
@keyframes whac-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* Formulario de entrada. */
.whac-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid #eee;
	background: #fff;
}
.whac-input {
	flex: 1;
	resize: none;
	border: 1px solid #d1d5db;
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	max-height: 120px;
	color: var(--whac-fg);
	background: #fff;
}
.whac-input:focus { outline: none; border-color: var(--whac-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.whac-send {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	border: 0; border-radius: 12px; cursor: pointer;
	color: #fff;
	background: linear-gradient( 135deg, var(--whac-primary), var(--whac-primary-2) );
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s, opacity .15s;
}
.whac-send:hover { transform: translateY(-1px); }
.whac-send:disabled { opacity: .5; cursor: default; }

/* Teléfono: ventana compacta que deja visible la noticia detrás. La altura
 * dinámica evita que el teclado o las barras del navegador la recorten. */
@media ( max-width: 600px ), ( max-height: 620px ) {
	.whac-panel {
		position: fixed;
		right: max( 12px, env( safe-area-inset-right ) );
		bottom: max( 12px, env( safe-area-inset-bottom ) );
		left: auto;
		top: auto;
		width: min( 310px, calc( 100vw - 40px ) );
		max-width: calc( 100vw - 40px );
		height: min( 400px, 52dvh );
		max-height: calc( 100dvh - 32px );
		border-radius: 14px;
	}
	.whac-head { padding: 11px 13px; }
	.whac-log { min-height: 0; padding: 12px; }
	.whac-form { padding: 8px; }
	.whac-input { min-width: 0; }
}

/* Tableta: limita el chat para que no tape casi toda la página ni quede fuera
 * de encuadre al girar el iPad. */
@media ( min-width: 601px ) and ( max-width: 1024px ) {
	.whac-panel {
		width: min( 340px, calc( 100vw - 48px ) );
		height: min( 420px, 50dvh );
		max-height: calc( 100dvh - 64px );
	}
}

/* Modo oscuro si el navegador lo pide. */
@media ( prefers-color-scheme: dark ) {
	:root {
		--whac-bg: #1f2937;
		--whac-fg: #f3f4f6;
		--whac-muted: #9ca3af;
		--whac-bot: #374151;
	}
	.whac-log { background: #111827; }
	.whac-form { background: #1f2937; border-top-color: #374151; }
	.whac-input { background: #111827; border-color: #374151; color: #f3f4f6; }
}

/* Respeta a quien pidió menos movimiento. */
@media ( prefers-reduced-motion: reduce ) {
	.whac-panel, .whac-launcher, .whac-send, .whac-msg.is-thinking .whac-bubble { animation: none; transition: none; }
}