/*
 * AE MIA
 * Version 0.2.0
 */

.ae-mia {
	--mia-primary: var(--global-palette1, #2563eb);
	--mia-primary-hover: var(--global-palette2, #1d4ed8);
	--mia-bg: #ffffff;
	--mia-text: #1f2937;
	--mia-muted: #6b7280;
	--mia-border: #e5e7eb;
	--mia-soft: #f4f7fb;

	font-family: inherit;
}


/* BOTÓN FLOTANTE */

.ae-mia-launcher {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 99998;

	display: flex;
	align-items: center;
	gap: 9px;

	padding: 13px 18px;

	border: 0;
	border-radius: 999px;

	background: var(--mia-primary);
	color: #fff;

	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;

	cursor: pointer;

	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.18);

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		background .2s ease;
}


.ae-mia-launcher:hover {
	background: var(--mia-primary-hover);
	transform: translateY(-2px);

	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.22);
}


.ae-mia-launcher:focus-visible,
.ae-mia-close:focus-visible,
.ae-mia-send:focus-visible,
.ae-mia-example:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .3);
	outline-offset: 2px;
}


.ae-mia-launcher-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}


.ae-mia-launcher-text {
	white-space: nowrap;
}


/* PANEL */

.ae-mia-panel {
	position: fixed;
	right: 22px;
	bottom: 84px;

	z-index: 99999;

	width: min(400px, calc(100vw - 32px));
	height: min(650px, calc(100vh - 120px));

	display: flex;
	flex-direction: column;

	background: var(--mia-bg);
	color: var(--mia-text);

	border: 1px solid var(--mia-border);
	border-radius: 20px;

	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.22);

	overflow: hidden;

	opacity: 0;
	visibility: hidden;
	transform: translateY(15px) scale(.98);

	transform-origin: bottom right;

	transition:
		opacity .2s ease,
		transform .2s ease,
		visibility .2s ease;
}


.ae-mia-panel.ae-mia-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}


/* CABECERA */

.ae-mia-header {
	flex: 0 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 15px 16px;

	background: var(--mia-primary);
	color: #fff;
}


.ae-mia-header-info {
	display: flex;
	align-items: center;
	gap: 11px;

	min-width: 0;
}


.ae-mia-avatar {
	width: 40px;
	height: 40px;

	flex: 0 0 40px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background: rgba(255, 255, 255, .2);

	font-size: 19px;
	font-weight: 800;
}


.ae-mia-name {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
}


.ae-mia-subtitle {
	margin-top: 2px;

	font-size: 11px;
	line-height: 1.25;

	opacity: .9;
}


.ae-mia-close {
	width: 38px;
	height: 38px;

	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 38px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: transparent;
	color: #fff;

	font-family: Arial, sans-serif;
	font-size: 29px;
	font-weight: 300;
	line-height: 1;

	cursor: pointer;
}


.ae-mia-close:hover {
	background: rgba(255, 255, 255, .15);
}


/* MENSAJES */

.ae-mia-messages {
	flex: 1 1 auto;

	padding: 18px 16px;

	overflow-y: auto;
	overscroll-behavior: contain;

	background: #f8fafc;
}


.ae-mia-message {
	display: flex;

	margin-bottom: 14px;
}


.ae-mia-message-bot {
	align-items: flex-start;
	gap: 8px;
}


.ae-mia-message-user {
	justify-content: flex-end;
}


.ae-mia-message-avatar {
	width: 30px;
	height: 30px;

	flex: 0 0 30px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background: var(--mia-primary);
	color: #fff;

	font-size: 13px;
	font-weight: 800;
}


.ae-mia-bubble {
	max-width: 82%;

	padding: 11px 13px;

	border-radius: 5px 16px 16px 16px;

	background: #fff;

	border: 1px solid var(--mia-border);

	font-size: 14px;
	line-height: 1.5;

	box-shadow:
		0 2px 8px rgba(0, 0, 0, .04);
}


.ae-mia-message-user .ae-mia-bubble {
	border: 0;

	border-radius: 16px 5px 16px 16px;

	background: var(--mia-primary);
	color: #fff;
}


.ae-mia-bubble p {
	margin: 6px 0 0;
}


.ae-mia-bubble strong {
	font-weight: 700;
}


/* EJEMPLOS */

.ae-mia-examples {
	margin: 12px 0 4px 38px;
}


.ae-mia-examples-title {
	margin: 0 0 9px;

	color: var(--mia-muted);

	font-size: 12px;
}


.ae-mia-example {
	display: block;

	width: 100%;

	margin-bottom: 7px;
	padding: 9px 11px;

	border: 1px solid var(--mia-border);
	border-radius: 10px;

	background: #fff;
	color: var(--mia-text);

	font-family: inherit;
	font-size: 12px;
	line-height: 1.35;
	text-align: left;

	cursor: pointer;

	transition:
		border-color .15s ease,
		background .15s ease;
}


.ae-mia-example:hover {
	border-color: var(--mia-primary);
	background: var(--mia-soft);
}


/* FORMULARIO */

.ae-mia-form {
	flex: 0 0 auto;

	display: flex;
	align-items: flex-end;
	gap: 9px;

	margin: 0;
	padding: 12px;

	border-top: 1px solid var(--mia-border);

	background: #fff;
}


.ae-mia-input {
	width: 100%;
	min-height: 44px;
	max-height: 120px;

	margin: 0;
	padding: 11px 13px;

	resize: none;

	border: 1px solid #d1d5db;
	border-radius: 14px;

	background: #fff;
	color: var(--mia-text);

	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;

	outline: none;
}


.ae-mia-input:focus {
	border-color: var(--mia-primary);

	box-shadow:
		0 0 0 3px rgba(37, 99, 235, .1);
}


.ae-mia-send {
	width: 44px;
	height: 44px;

	flex: 0 0 44px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: var(--mia-primary);
	color: #fff;

	cursor: pointer;

	transition:
		background .15s ease,
		transform .15s ease;
}


.ae-mia-send:hover {
	background: var(--mia-primary-hover);
	transform: scale(1.03);
}


/* PIE */

.ae-mia-footer {
	flex: 0 0 auto;

	padding: 7px 12px 9px;

	border-top: 1px solid #f0f0f0;

	background: #fff;
	color: var(--mia-muted);

	font-size: 10px;
	line-height: 1.35;
	text-align: center;
}


/* MÓVIL */

@media (max-width: 600px) {

	.ae-mia-launcher {
		right: 14px;
		bottom: 14px;

		padding: 13px 16px;
	}


	.ae-mia-panel {
		inset: 10px;

		width: auto;
		height: auto;

		max-width: none;
		max-height: none;

		border-radius: 16px;

		transform-origin: bottom center;
	}


	.ae-mia-panel.ae-mia-open {
		transform: none;
	}


	.ae-mia-header {
		padding-top: max(15px, env(safe-area-inset-top));
	}


	.ae-mia-messages {
		padding: 16px 13px;
	}


	.ae-mia-examples {
		margin-left: 38px;
	}


	.ae-mia-footer {
		padding-bottom:
			max(9px, env(safe-area-inset-bottom));
	}

}


/* PANTALLAS MUY PEQUEÑAS */

@media (max-width: 370px) {

	.ae-mia-launcher-text {
		font-size: 13px;
	}

}
/* =========================
   MIA 0.2
   ========================= */

.ae-mia-bubble-text {
	white-space: pre-wrap;
	word-break: break-word;
}


/* MIA pensando */

.ae-mia-typing {
	display: flex;
	align-items: center;
	gap: 5px;

	min-width: 52px;
	min-height: 38px;
}


.ae-mia-typing span {
	width: 6px;
	height: 6px;

	display: block;

	border-radius: 50%;

	background: #9ca3af;

	animation: ae-mia-typing 1.2s infinite ease-in-out;
}


.ae-mia-typing span:nth-child(2) {
	animation-delay: .15s;
}


.ae-mia-typing span:nth-child(3) {
	animation-delay: .3s;
}


@keyframes ae-mia-typing {

	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: .45;
	}

	30% {
		transform: translateY(-4px);
		opacity: 1;
	}
}


/* Mientras espera respuesta */

.ae-mia-input:disabled {
	background: #f8fafc;
	cursor: wait;
}


.ae-mia-send:disabled {
	opacity: .55;
	cursor: wait;
	transform: none;
}


/* Corregir barra WordPress en móvil */

@media (max-width: 600px) {

	body.admin-bar .ae-mia-panel {
		top: 58px;
	}

}
/* =========================
   MIA 0.2.2
   ========================= */

.ae-mia-header-actions {
	display: flex;
	align-items: center;
	gap: 3px;
}


.ae-mia-reset {
	width: 36px;
	height: 36px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: transparent;
	color: #fff;

	font-family: Arial, sans-serif;
	font-size: 24px;
	line-height: 1;

	cursor: pointer;
}


.ae-mia-reset:hover {
	background: rgba(255, 255, 255, .15);
}


.ae-mia-reset:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .45);
	outline-offset: 1px;
}


.ae-mia-reset:disabled {
	opacity: .45;
	cursor: wait;
}
/* =========================
   MIA 0.3 - FUENTES
   ========================= */

.ae-mia-message-content {
	display: flex;
	flex-direction: column;
	gap: 8px;

	max-width: 82%;
}


.ae-mia-message-content .ae-mia-bubble {
	max-width: 100%;
}


.ae-mia-inline-cite {
	display: inline-block;

	margin-left: 3px;

	color: var(--mia-primary);

	font-size: 11px;
	font-weight: 700;

	text-decoration: none;
}


.ae-mia-inline-cite:hover {
	text-decoration: underline;
}


/* Caja de fuentes */

.ae-mia-sources {
	padding: 10px;

	border: 1px solid #dbe5f1;
	border-radius: 12px;

	background: #f8fbff;
}


.ae-mia-sources-header {
	display: flex;
	flex-direction: column;
	gap: 2px;

	margin-bottom: 8px;
}


.ae-mia-sources-title {
	color: #166534;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
}


.ae-mia-sources-date {
	color: var(--mia-muted);

	font-size: 10px;
	line-height: 1.3;
}


.ae-mia-sources-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}


.ae-mia-source {
	display: flex;
	align-items: flex-start;
	gap: 7px;

	padding: 7px 8px;

	border: 1px solid #e5e7eb;
	border-radius: 8px;

	background: #fff;
	color: var(--mia-text);

	text-decoration: none;

	transition:
		border-color .15s ease,
		background .15s ease;
}


.ae-mia-source:hover {
	border-color: var(--mia-primary);
	background: #f8fafc;
}


.ae-mia-source-number {
	flex: 0 0 auto;

	color: var(--mia-primary);

	font-size: 10px;
	font-weight: 800;
}


.ae-mia-source-info {
	display: flex;
	flex-direction: column;

	min-width: 0;
}


.ae-mia-source-title {
	display: block;

	font-size: 10px;
	font-weight: 600;
	line-height: 1.3;

	overflow: hidden;
	text-overflow: ellipsis;
}


.ae-mia-source-domain {
	display: block;

	margin-top: 2px;

	color: var(--mia-muted);

	font-size: 9px;
	line-height: 1.25;
}


@media (max-width: 600px) {

	.ae-mia-message-content {
		max-width: 86%;
	}

}
/* =====================================================
   MIA 0.4 - GUÍAS INTERNAS EMIGRANTES.EU
   ===================================================== */

.ae-mia-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}


.ae-mia-guide-card {
	padding: 11px;

	border: 1px solid #cfe0ff;
	border-radius: 12px;

	background: #f5f9ff;
}


.ae-mia-guide-heading {
	margin-bottom: 5px;

	color: #174ea6;

	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
}


.ae-mia-guide-title {
	margin-bottom: 9px;

	color: var(--mia-text);

	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
}


.ae-mia-guide-button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 34px;

	padding: 7px 10px;

	border-radius: 8px;

	background: var(--mia-primary);
	color: #fff;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;

	text-align: center;
	text-decoration: none;

	transition:
		background .15s ease,
		transform .15s ease;
}


.ae-mia-guide-button:hover {
	background: var(--mia-primary-hover);
	color: #fff;

	transform: translateY(-1px);
}


.ae-mia-guide-button:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .25);
	outline-offset: 2px;
}


@media (max-width: 600px) {

	.ae-mia-guide-card {
		padding: 10px;
	}

	.ae-mia-guide-button {
		min-height: 36px;
	}
}
/* =====================================================
   MIA 0.5 - ACCIONES CONTEXTUALES
   ===================================================== */

.ae-mia-guide-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
}


.ae-mia-official-button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 34px;

	padding: 7px 10px;

	border: 1px solid var(--mia-primary);
	border-radius: 8px;

	background: #fff;
	color: var(--mia-primary);

	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;

	text-align: center;
	text-decoration: none;

	transition:
		background .15s ease,
		transform .15s ease;
}


.ae-mia-official-button:hover {
	background: #f2f7ff;
	color: var(--mia-primary);

	transform: translateY(-1px);
}


.ae-mia-official-button:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .25);
	outline-offset: 2px;
}

/* =====================================================
   MIA 0.5 - HERRAMIENTAS CONTEXTUALES
   ===================================================== */

.ae-mia-guide-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
}


.ae-mia-document-button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 34px;

	padding: 7px 10px;

	border: 1px solid #d8e2ef;
	border-radius: 8px;

	background: #ffffff;
	color: #24364b;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;

	text-align: center;
	text-decoration: none;

	transition:
		background .15s ease,
		transform .15s ease;
}


.ae-mia-document-button:hover {
	background: #f4f7fb;
	color: #24364b;

	transform: translateY(-1px);
}


.ae-mia-document-button:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .22);
	outline-offset: 2px;
}

/* =====================================================
   MIA 0.5.2 - TASA CONTEXTUAL
   ===================================================== */

.ae-mia-fee-button {
	width: 100%;
	min-height: 34px;

	padding: 7px 10px;

	border: 1px solid #d8e2ef;
	border-radius: 8px;

	background: #ffffff;
	color: #24364b;

	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;

	cursor: pointer;
}


.ae-mia-fee-button:hover {
	background: #f4f7fb;
}


.ae-mia-fee-details {
	padding: 9px 10px;

	border: 1px solid #e2e8f0;
	border-radius: 8px;

	background: #f8fafc;
}


.ae-mia-fee-amount {
	font-size: 15px;
	font-weight: 800;
	color: #172033;
}


.ae-mia-fee-breakdown {
	margin-top: 4px;

	font-size: 10px;
	line-height: 1.35;

	color: #536174;
}


.ae-mia-fee-verified {
	margin-top: 6px;

	font-size: 9px;
	font-weight: 600;

	color: #64748b;
}