/* =========================================================================
   CHAT — la burbuja de la esquina con la recepcionista asomándose (oct 2026; frijolitos desde 2.8.0)

   template-parts/chat-burbuja.php + assets/js/burbuja.js. Carga junto a chat.css.

   El truco de la recepcionista asomándose: la imagen (cabeza, pecho y la mano que saluda) va DETRÁS del círculo,
   que le tapa el cuerpo. Por encima del borde redondo solo salen la cabeza con la diadema, el
   micrófono y la mano que saluda. Una caja con overflow:hidden que termina en el centro del
   círculo la recorta por abajo, así cuando se mete (al cargar o con el panel abierto) no
   asoma nada por debajo del botón.

   Mobile-first: lo de fuera de media query es el teléfono.
   ========================================================================= */

.aiburbuja {
	--d: 58px;                       /* diámetro del círculo */
	position: fixed; z-index: 150;
	right: max(14px, env(safe-area-inset-right));
	bottom: calc(14px + env(safe-area-inset-bottom));
	display: flex; align-items: flex-end; gap: 10px;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.aiburbuja[hidden] { display: none; }
@media (min-width: 860px) { .aiburbuja { --d: 64px; right: 24px; bottom: 24px; } }
/* style.css pone `body.page-vsl > * { position: relative; z-index: 1 }` (la luz de fondo de
   /auditoria y /vendedores) y eso la sacaría de la esquina. */
body.page-vsl > .aiburbuja { position: fixed; z-index: 150; }

/* En /auditoria y /vendedores, en el teléfono, la barra fija de CTA ocupa el borde de abajo. */
@media (max-width: 859px) {
	body:has(.vsl-sticky.is-on) .aiburbuja { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Home: escondida mientras el chat del hero está a la vista. */
.aiburbuja.is-oculta { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* -------- el botón -------- */
.aiburbuja__boton {
	position: relative; display: block; flex: none;
	width: var(--d); height: calc(var(--d) * 2.1);
	padding: 0; border: 0; background: none; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.aiburbuja__boton:focus-visible { outline: none; }
.aiburbuja__boton:focus-visible .aiburbuja__circulo { box-shadow: 0 0 0 3px var(--papel, #FAFAF7), 0 0 0 6px var(--azul, #2438FF); }

.aiburbuja__circulo {
	position: absolute; z-index: 1; left: 0; bottom: 0;
	width: var(--d); height: var(--d); border-radius: 50%;
	background: var(--azul, #2438FF);
	box-shadow: 0 12px 30px -10px rgba(36, 56, 255, 0.6), 0 3px 8px rgba(12, 12, 20, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* La caja que recorta: de arriba del botón hasta el centro del círculo. */
.aiburbuja__gato {
	position: absolute; z-index: 0; pointer-events: none; overflow: hidden;
	top: 0; bottom: calc(var(--d) / 2);
	left: calc(var(--d) * -0.3); right: calc(var(--d) * -0.3);
}
/* 2.8.4: la imagen baja hasta el pecho y se apoya en el centro del círculo, así el corte de abajo
   queda siempre escondido (detrás del círculo y de la caja que recorta) y al entrar sale completa
   desde atrás, con el rebote de siempre. Por encima del borde asoman cabeza, diadema y el brazo. */
.aiburbuja__gato img {
	position: absolute; left: 50%; bottom: 0;
	width: calc(var(--d) * 1.45); height: calc(var(--d) * 1.45); max-width: none;
	margin-left: calc(var(--d) * -0.725);
	/* Entra escondida detrás del círculo y se asoma cuando la página ya cargó (.is-lista). */
	transform: translateY(100%);
	transition: transform 0.55s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.aiburbuja.is-lista .aiburbuja__gato img { transform: none; }
@media (hover: hover) {
	.aiburbuja__boton:hover .aiburbuja__circulo { transform: scale(1.05); }
	.aiburbuja.is-lista .aiburbuja__boton:hover .aiburbuja__gato img { transform: translateY(-6%) rotate(-3deg); }
}

/* El ícono de chat del círculo: dice «esto es un chat» antes de leer nada. */
.aiburbuja__icono {
	position: absolute; z-index: 2; left: 0; bottom: 0; width: var(--d); height: var(--d);
	display: grid; place-items: center; color: #fff;
	transition: opacity 0.2s ease, transform 0.3s ease;
}
.aiburbuja__icono svg { width: 46%; height: 46%; margin-top: 4%; }
.aiburbuja__icono circle { fill: var(--azul, #2438FF); }
.aiburbuja.is-open .aiburbuja__icono { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* La X del círculo: aparece cuando el panel está abierto y la recepcionista se mete detrás. */
.aiburbuja__x {
	position: absolute; z-index: 2; left: 0; bottom: 0; width: var(--d); height: var(--d);
	display: grid; place-items: center; color: #fff;
	opacity: 0; transform: rotate(-90deg) scale(0.5);
	transition: opacity 0.2s ease, transform 0.3s ease;
}
.aiburbuja__x svg { width: 24px; height: 24px; }
.aiburbuja.is-open .aiburbuja__x { opacity: 1; transform: none; }
.aiburbuja.is-open .aiburbuja__gato img,
.aiburbuja.is-open.is-lista .aiburbuja__boton:hover .aiburbuja__gato img { transform: translateY(100%); }

/* -------- el globito «¿Te ayudo?» -------- */
.aiburbuja__globo {
	position: relative; display: flex; align-items: flex-start; gap: 2px;
	max-width: 210px; margin-bottom: calc(var(--d) * 0.35);
	padding: 4px 4px 4px 0; border-radius: 16px 16px 4px 16px;
	background: var(--blanco, #fff); color: var(--tinta, #0C0C14);
	box-shadow: 0 14px 34px -14px rgba(12, 12, 20, 0.35), 0 0 0 1px rgba(12, 12, 20, 0.06);
	animation: aib-globo 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.aiburbuja__globo[hidden] { display: none; }
@keyframes aib-globo { from { opacity: 0; transform: translateY(8px) scale(0.92); } to { opacity: 1; transform: none; } }
.aiburbuja__globo-t {
	font: 600 13.5px/1.35 var(--sans); text-align: left; color: inherit;
	padding: 8px 4px 8px 14px; border: 0; background: none; cursor: pointer;
}
.aiburbuja__globo-x {
	flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
	border: 0; background: none; color: var(--gris, #6B6B73); cursor: pointer;
}
.aiburbuja__globo-x svg { width: 14px; height: 14px; }
.aiburbuja__globo-x:hover { background: var(--papel, #FAFAF7); color: var(--tinta, #0C0C14); }
.aiburbuja.is-open .aiburbuja__globo { display: none; }

/* -------- el panel -------- */
/* Teléfono: hoja a pantalla completa. El botón se esconde: se cierra con la X del panel. */
.aiburbuja__panel {
	position: fixed; inset: 0; z-index: 160;
	display: flex;
	height: 100vh; height: 100dvh;
	animation: aib-panel 0.22s ease-out both;
}
.aiburbuja__panel[hidden] { display: none; }
@keyframes aib-panel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.aiburbuja__panel > .aichat { flex: 1; min-width: 0; min-height: 0; }
@media (max-width: 599px) {
	.aiburbuja.is-open .aiburbuja__boton { visibility: hidden; }
	html.aiburbuja-abierta, html.aiburbuja-abierta body { overflow: hidden; }
}
/* Escritorio y tableta: tarjeta flotante encima del botón. */
@media (min-width: 600px) {
	.aiburbuja__panel {
		inset: auto; right: 0; bottom: calc(var(--d) * 1.95 + 10px);
		position: absolute;
		width: min(400px, calc(100vw - 32px));
		/* Alto: lo que deja el botón (y su margen) con 20px de aire arriba. */
		height: min(640px, calc(100vh - var(--d) * 1.95 - 64px));
		height: min(640px, calc(100dvh - var(--d) * 1.95 - 64px));
		transform-origin: 100% 100%;
	}
}

/* La caja del chat dentro del panel (chat-box.php, variante «burbuja»). */
.aichat--burbuja {
	border-radius: 0; border: 0;
	box-shadow: none;
}
@media (min-width: 600px) {
	.aichat--burbuja {
		border-radius: 20px; border: 1px solid var(--ac-line);
		box-shadow: 0 30px 80px -24px rgba(12, 12, 20, 0.4), 0 10px 26px -10px rgba(12, 12, 20, 0.22);
	}
}
.aichat--burbuja .aichat__barra { padding-top: calc(10px + env(safe-area-inset-top)); }
@media (min-width: 600px) { .aichat--burbuja .aichat__barra { padding-top: 10px; } }
.aichat--burbuja .aichat__cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.aichat--burbuja .aichat__log { height: auto; flex: 1; min-height: 0; padding: 18px 14px 12px; }
.aichat--burbuja .aichat__vacio-t { font-size: 21px; }
.aichat--burbuja .aichat__sug { grid-template-columns: 1fr; }
.aichat--burbuja .aichat__nueva-t { display: none; }
.aichat--burbuja .aichat__composer { padding: 8px 12px 6px; }
.aichat--burbuja .aichat__pie { padding: 4px 16px calc(12px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .aichat--burbuja .aichat__pie { padding-bottom: 12px; } }
.aichat--burbuja .aichat__lead { margin-left: 0 !important; width: 100% !important; }
.aichat--burbuja .aichat__lead-campos { grid-template-columns: 1fr; }

/* Cara de la recepcionista en la barra, en lugar del «a.» (avatar-agente) */
.aichat__gatito {
	position: relative; flex: none; overflow: hidden;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--azul, #2438FF);
}
.aichat__gatito img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateY(5%); }

.aichat__cerrar {
	flex: none; width: 34px; height: 34px; margin-left: 2px; border-radius: 10px;
	display: grid; place-items: center;
	border: 0; background: transparent; color: var(--ac-muted); cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.aichat__cerrar svg { width: 18px; height: 18px; }
.aichat__cerrar:hover { background: var(--ac-sug-hover); color: var(--ac-fg); }

/* -------- sin movimiento -------- */
@media (prefers-reduced-motion: reduce) {
	.aiburbuja, .aiburbuja__circulo, .aiburbuja__gato img, .aiburbuja__x, .aiburbuja__icono { transition: none; }
	.aiburbuja__gato img { transform: none; }
	.aiburbuja__globo, .aiburbuja__panel { animation: none; }
	.aiburbuja__boton:hover .aiburbuja__gato img { transform: none !important; }
}