/* Widget de chat del agente IA — usa los tokens de home-styles.css, no define paleta propia. */

.ga-chat-widget {
	position: fixed;
	right: clamp(14px, 3vw, 28px);
	bottom: clamp(14px, 3vw, 28px);
	z-index: 9999;
	font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
}

/* Mientras el aviso de cookies este a la vista, el boton del chat sube por
   encima (2026-09-08). En movil ese aviso lleva el boton "Entendido" a
   todo lo ancho y el globo del chat le caia justo encima de la esquina
   derecha, tapando parte de la zona pulsable. :has() lo resuelve sin JS ni
   coordinacion entre los dos componentes, que viven en archivos distintos.
   Si el navegador no soporta :has(), simplemente se queda como estaba. */
body:has(.cookie-banner:not([hidden])) .ga-chat-widget {
	/* Altura real del aviso, la mide medicion.js (cambia al abrir opciones). */
	bottom: calc(clamp(14px, 3vw, 28px) + var(--aviso-cookies-alto, 180px));
}
@media (min-width: 641px) {
	body:has(.cookie-banner:not([hidden])) .ga-chat-widget {
		bottom: calc(clamp(14px, 3vw, 28px) + var(--aviso-cookies-alto, 96px));
	}
}

.ga-chat-toggle {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: none;
	background: var(--red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	transition: background 0.15s, transform 0.15s;
}
.ga-chat-toggle:hover { background: var(--red-hover); transform: translateY(-1px); }
.ga-chat-icon-close { display: none; }
.ga-chat-widget.is-open .ga-chat-icon-open { display: none; }
.ga-chat-widget.is-open .ga-chat-icon-close { display: block; }

.ga-chat-panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	width: min(360px, calc(100vw - 28px));
	height: min(520px, calc(100vh - 120px));
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
/* El display:flex de arriba tiene la misma especificidad que la regla
   [hidden] { display: none } del navegador, y el CSS propio siempre le
   gana al del navegador en ese empate — sin esto el panel queda visible
   siempre, sin importar el atributo hidden que pone el JS. */
.ga-chat-panel[hidden] {
	display: none;
}

.ga-chat-header {
	padding: 14px 18px;
	background: var(--red);
	color: #fff;
	flex: none;
}
.ga-chat-title { display: block; font-weight: 800; font-size: 1rem; }
.ga-chat-subtitle { display: block; font-size: 0.8rem; opacity: 0.9; margin-top: 2px; }

.ga-chat-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ga-msg {
	max-width: 82%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 0.88rem;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}
.ga-msg-user {
	align-self: flex-end;
	background: var(--red);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.ga-msg-assistant {
	align-self: flex-start;
	background: var(--bg);
	border: 1px solid var(--line);
	color: var(--text);
	border-bottom-left-radius: 4px;
}

/* Links reales dentro del texto (pedido 2026-09-02: "los links siguen sin
   ser clickeables") — cuando el agente escribe una URL como texto plano
   en vez de una tarjeta/boton, igual queda clickeable. */
.ga-msg-link { color: inherit; text-decoration: underline; word-break: break-all; }
.ga-msg-user .ga-msg-link { color: #fff; }
.ga-msg-assistant .ga-msg-link { color: var(--red); }

.ga-msg-typing { display: flex; gap: 4px; padding: 12px 14px; align-items: center; }

/* Link a /comparar/ (pedido 2026-09-01): el agente puede agregar
   productos al comparador y mostrar este link en vez de decir "no
   tenemos comparador" — misma burbuja de asistente, con un boton chico
   adentro en vez de texto. */
.ga-msg-action { padding: 10px; }
.ga-compare-link {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--red); color: #fff; text-decoration: none;
	font-weight: 700; font-size: 0.86rem; padding: 9px 16px; border-radius: 999px;
	transition: opacity 0.15s ease;
}
.ga-compare-link:hover { opacity: 0.88; }

/* Tarjetas de producto con foto (version final 2026-09-02): la imagen es
   la que ya esta alojada en el producto (misma URL que la ficha), el
   servidor solo la manda cuando hace falta (opt-in en tools.ts), asi que
   mostrarla aca no "sobrecarga" nada — es una foto igual que cualquier
   otra de la pagina. */
.ga-msg-products { display: flex; flex-direction: column; gap: 8px; }
.ga-product-card {
	display: flex; align-items: center; gap: 10px;
	text-decoration: none; color: var(--text); border: 1px solid var(--line);
	border-radius: 10px; padding: 8px; transition: border-color 0.15s ease, background 0.15s ease;
}
.ga-product-card:hover { border-color: var(--red); background: var(--hover-tint); }
.ga-product-card-img {
	flex: none; width: 52px; height: 52px; border-radius: 8px; object-fit: contain;
	background: #fff; border: 1px solid var(--line);
}
.ga-product-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ga-product-card-name { font-size: 0.8rem; font-weight: 600; }
.ga-product-card-price { font-size: 0.8rem; font-weight: 800; color: var(--red); white-space: nowrap; }
.ga-msg-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--text-dim);
	animation: ga-typing-bounce 1.2s infinite ease-in-out;
}
.ga-msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.ga-msg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ga-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

.ga-recording-indicator {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-top: 1px solid var(--line);
	background: var(--bg);
}
.ga-recording-indicator[hidden] { display: none; }

.ga-rec-bars {
	display: flex;
	align-items: center;
	gap: 3px;
	height: 20px;
	flex: none;
}
.ga-rec-bars span {
	width: 3px;
	height: 18px;
	border-radius: 2px;
	background: var(--red);
	transform: scaleY(0.25);
	transition: transform 0.05s linear;
}

.ga-rec-label {
	font-size: 0.78rem;
	color: var(--text-dim);
}

.ga-chat-form {
	flex: none;
	display: flex;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid var(--line);
	background: var(--surface);
}
.ga-chat-input {
	flex: 1 1 auto;
	resize: none;
	max-height: 120px;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 0.88rem;
	background: var(--bg);
	color: var(--text);
}
.ga-chat-input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

.ga-chat-send {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: none;
	background: var(--red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ga-chat-send:hover { background: var(--red-hover); }

.ga-chat-mic {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.ga-chat-mic:hover { background: var(--bg); }
.ga-mic-icon-recording { display: none; }
.ga-chat-widget.is-recording .ga-chat-mic {
	border-color: var(--red);
	background: var(--red);
	color: #fff;
	animation: ga-mic-pulse 1.4s infinite;
}
.ga-chat-widget.is-recording .ga-mic-icon-idle { display: none; }
.ga-chat-widget.is-recording .ga-mic-icon-recording { display: block; }
/* Cortar la voz del agente a mitad de reproduccion (pedido 2026-09-02):
   mientras suena la respuesta hablada, el mismo boton de microfono pasa a
   funcionar como "detener" — reusa el icono cuadrado de "grabando" (ya es
   un simbolo universal de stop) en vez de agregar un tercer set de iconos. */
.ga-chat-widget.is-voice-playing .ga-chat-mic {
	border-color: var(--red);
	background: var(--red);
	color: #fff;
}
.ga-chat-widget.is-voice-playing .ga-mic-icon-idle { display: none; }
.ga-chat-widget.is-voice-playing .ga-mic-icon-recording { display: block; }
@keyframes ga-mic-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
	50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

@media (max-width: 480px) {
	.ga-chat-panel {
		right: -14px;
		width: 100vw;
		height: calc(100vh - 90px);
		border-radius: 16px 16px 0 0;
	}
}