/* Asistente de eledeve (inc/assistant.php, assets/js/assistant.js). */

.eledeve-assistant {
	position: fixed;
	right: 30px;
	bottom: 34px;
	z-index: 65;
	font-family: var(--font-body);
}

/* Botón: el mismo de WhatsApp que reemplaza. */
.eledeve-assistant__launcher {
	position: relative;
	display: grid;
	width: 58px;
	height: 58px;
	padding: 0;
	place-items: center;
	background: linear-gradient(135deg, var(--color-blue), var(--color-accent));
	border: 0;
	border-radius: 50%;
	box-shadow:
		0 10px 24px rgba(17, 34, 63, 0.22),
		0 0 0 7px color-mix(in srgb, var(--color-blue) 13%, transparent);
	color: #fff;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.eledeve-assistant__launcher:hover,
.eledeve-assistant__launcher:focus-visible {
	box-shadow:
		0 14px 30px rgba(17, 34, 63, 0.3),
		0 0 0 9px color-mix(in srgb, var(--color-blue) 18%, transparent);
	transform: translateY(-2px);
}

.eledeve-assistant__launcher .eledeve-icon {
	width: 26px;
	height: 26px;
	stroke: #fff;
	stroke-width: 1.9;
}

.eledeve-assistant__icon {
	display: inline-grid;
	place-items: center;
}

/* Invitación breve al lado del botón. */
.eledeve-assistant__hint {
	position: absolute;
	right: 72px;
	bottom: 10px;
	padding: 10px 16px;
	background: var(--color-panel);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	box-shadow: var(--shadow);
	color: var(--color-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateX(8px);
	transition: opacity 220ms ease, transform 220ms ease;
}

.eledeve-assistant__hint.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* Panel. */
.eledeve-assistant__panel {
	position: absolute;
	right: 0;
	bottom: 74px;
	display: flex;
	flex-direction: column;
	width: min(390px, calc(100vw - 48px));
	height: min(600px, calc(100vh - 150px));
	overflow: hidden;
	background: var(--color-panel);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-raised);
	color: var(--color-ink);
	animation: eledeve-assistant-in 200ms ease;
}

.eledeve-assistant__panel[hidden] {
	display: none;
}

@keyframes eledeve-assistant-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
}

.eledeve-assistant__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 14px 16px;
	background: linear-gradient(135deg, var(--color-navy), color-mix(in srgb, var(--color-blue) 55%, var(--color-navy)));
	color: #fff;
}

.eledeve-assistant__avatar {
	display: flex;
	flex: 0 0 38px;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	height: 38px;
	padding-bottom: 10px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
}

.eledeve-assistant__avatar span {
	width: 4px;
	background: var(--color-blue);
	border-radius: 2px;
	animation: eledeve-assistant-eq 1.6s ease-in-out infinite;
}

.eledeve-assistant__avatar span:nth-child(1) { height: 7px; }
.eledeve-assistant__avatar span:nth-child(2) { height: 12px; animation-delay: -0.4s; }
.eledeve-assistant__avatar span:nth-child(3) { height: 16px; background: var(--color-accent); animation-delay: -0.8s; }
.eledeve-assistant__avatar span:nth-child(4) { height: 10px; background: var(--color-accent); animation-delay: -1.2s; }

@keyframes eledeve-assistant-eq {
	50% {
		transform: scaleY(0.55);
	}
}

.eledeve-assistant__avatar span {
	transform-origin: bottom;
}

.eledeve-assistant__title {
	display: flex;
	flex: 1;
	flex-direction: column;
	line-height: 1.2;
}

.eledeve-assistant__title strong {
	font-family: var(--font-display);
	font-size: 1.15rem;
	letter-spacing: 0.01em;
}

.eledeve-assistant__title span {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.8rem;
}

.eledeve-assistant__close {
	display: grid;
	width: 36px;
	height: 36px;
	padding: 0;
	place-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.eledeve-assistant__close:hover,
.eledeve-assistant__close:focus-visible {
	background: rgba(255, 255, 255, 0.14);
}

.eledeve-assistant__close svg,
.eledeve-assistant__send svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

/* Conversación. */
.eledeve-assistant__log {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 16px 14px;
	overflow-y: auto;
	background: var(--color-paper);
	overscroll-behavior: contain;
}

.eledeve-assistant__msg {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 92%;
	padding: 11px 14px;
	border-radius: 16px;
	font-size: 0.92rem;
	line-height: 1.45;
	animation: eledeve-assistant-msg 220ms ease;
}

.eledeve-assistant__msg:empty {
	display: none;
}

@keyframes eledeve-assistant-msg {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.eledeve-assistant__msg p {
	margin: 0;
	white-space: pre-line;
}

.eledeve-assistant__msg--bot {
	align-self: flex-start;
	background: var(--color-panel);
	border: 1px solid var(--color-line);
	border-bottom-left-radius: 6px;
}

.eledeve-assistant__msg--user {
	align-self: flex-end;
	background: var(--color-blue);
	border-bottom-right-radius: 6px;
	color: #fff;
}

.eledeve-assistant__faq-q {
	font-weight: 700;
}

.eledeve-assistant__card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	background: var(--color-panel-alt);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	color: var(--color-ink);
	text-decoration: none;
	transition: border-color 140ms ease, transform 140ms ease;
}

.eledeve-assistant__card:hover,
.eledeve-assistant__card:focus-visible {
	border-color: var(--color-blue);
	color: var(--color-ink);
	transform: translateX(2px);
}

.eledeve-assistant__card.is-primary {
	background: color-mix(in srgb, var(--color-blue) 12%, var(--color-panel));
	border-color: color-mix(in srgb, var(--color-blue) 45%, var(--color-line));
}

.eledeve-assistant__card .eledeve-assistant__icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	background: var(--color-panel);
	border-radius: 9px;
	color: var(--color-blue);
}

.eledeve-assistant__card .eledeve-icon {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

.eledeve-assistant__card-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.eledeve-assistant__card-text strong {
	font-size: 0.88rem;
	font-weight: 700;
}

.eledeve-assistant__card-text span {
	color: var(--color-muted);
	font-size: 0.8rem;
}

.eledeve-assistant__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.eledeve-assistant__chip {
	min-height: 38px;
	padding: 7px 14px;
	background: var(--color-panel);
	border: 1.5px solid color-mix(in srgb, var(--color-blue) 55%, var(--color-line));
	border-radius: 999px;
	color: var(--color-blue);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}

.eledeve-assistant__chip:hover,
.eledeve-assistant__chip:focus-visible {
	background: var(--color-blue);
	color: #fff;
}

/* Campo de texto. */
.eledeve-assistant__form {
	display: flex;
	gap: 8px;
	padding: 12px;
	background: var(--color-panel);
	border-top: 1px solid var(--color-line);
}

.eledeve-assistant__input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0 14px;
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	color: var(--color-ink);
	font: inherit;
	font-size: 16px; /* Sin zoom automático en iPhone. */
}

.eledeve-assistant__input:focus {
	border-color: var(--color-blue);
	outline: none;
}

.eledeve-assistant__send {
	display: grid;
	flex: 0 0 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	background: var(--color-blue);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}

.eledeve-assistant__send:hover,
.eledeve-assistant__send:focus-visible {
	background: var(--color-blue-hover);
}

/* "Volver arriba" de Academy ocupaba la misma esquina: sube encima. */
body:has(.eledeve-assistant) .academy-to-top {
	bottom: 106px;
}

/* Celular: el panel ocupa el ancho y el botón queda debajo. */
@media (max-width: 820px) {
	.eledeve-assistant {
		right: 16px;
		bottom: 16px;
	}

	.eledeve-assistant__launcher {
		width: 50px;
		height: 50px;
	}

	body:has(.eledeve-assistant) .academy-to-top {
		bottom: 78px;
	}

	.eledeve-assistant__launcher .eledeve-icon {
		width: 23px;
		height: 23px;
	}

	/* En la portada aparece recién al bajar (assistant.js). */
	.js-assistant-defer .eledeve-assistant:not(.is-shown) .eledeve-assistant__launcher {
		opacity: 0;
		pointer-events: none;
		transform: translateY(12px);
		visibility: hidden;
	}

	.js-assistant-defer .eledeve-assistant__launcher {
		transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
	}
}

@media (max-width: 600px) {
	.eledeve-assistant.is-open .eledeve-assistant__launcher {
		display: none;
	}

	.eledeve-assistant__panel {
		position: fixed;
		right: 8px;
		bottom: 8px;
		left: 8px;
		width: auto;
		height: min(78vh, calc(100vh - 80px));
		height: min(78dvh, calc(100dvh - 80px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.eledeve-assistant__launcher,
	.eledeve-assistant__hint,
	.eledeve-assistant__card,
	.eledeve-assistant__panel,
	.eledeve-assistant__msg,
	.eledeve-assistant__avatar span {
		animation: none;
		transition: none;
	}
}