/**
 * Estilos del chatbot.
 *
 * Usa las variables del tema Gob.bo cuando están disponibles
 * (--primary-main, --background-default, --texto-default) y define
 * valores propios como respaldo.
 */

.gobbo-chatbot {
	--gobbo-chatbot-accent: var(--primary-main, #194703);
	--gobbo-chatbot-accent-contrast: var(--primary-contrast, #ffffff);
	--gobbo-chatbot-bg: var(--background-default, #ffffff);
	--gobbo-chatbot-bg-alt: var(--background-paper, #f5f6f4);
	--gobbo-chatbot-text: var(--texto-default, #343a40);
	--gobbo-chatbot-border: rgba(0, 0, 0, 0.12);
	--gobbo-chatbot-radius: 12px;
	--gobbo-chatbot-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
	--gobbo-chatbot-size: 72px;
	--gobbo-chatbot-offset: 16px;
	--gobbo-chatbot-zindex: 100000;
	--gobbo-chatbot-panel-width: 360px;
	--gobbo-chatbot-panel-height: 520px;
	--gobbo-chatbot-gap: 12px;

	position: fixed;
	bottom: calc(var(--gobbo-chatbot-offset) + env(safe-area-inset-bottom, 0px));
	z-index: var(--gobbo-chatbot-zindex);
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.45;
}

.gobbo-chatbot--right {
	right: 20px;
}

.gobbo-chatbot--left {
	left: 20px;
}

.gobbo-chatbot [hidden] {
	display: none !important;
}

.gobbo-chatbot .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
 * Botón lanzador
 * ----------------------------------------------------------------------- */

.gobbo-chatbot__launcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
}

.gobbo-chatbot__avatar {
	width: var(--gobbo-chatbot-size);
	height: var(--gobbo-chatbot-size);
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	border: 2px solid #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gobbo-chatbot__launcher:hover .gobbo-chatbot__avatar,
.gobbo-chatbot__launcher:focus-visible .gobbo-chatbot__avatar {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.gobbo-chatbot--right .gobbo-chatbot__launcher {
	flex-direction: row-reverse;
}

.gobbo-chatbot__launcher-text {
	display: none;
	max-width: 260px;
	white-space: normal;
	line-height: 1.35;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--gobbo-chatbot-accent);
	color: var(--gobbo-chatbot-accent-contrast);
	font-size: 0.82rem;
	font-weight: 600;
	box-shadow: var(--gobbo-chatbot-shadow);
}

@media (min-width: 992px) {
	.gobbo-chatbot:not(.gobbo-chatbot--open) .gobbo-chatbot__launcher:hover .gobbo-chatbot__launcher-text,
	.gobbo-chatbot:not(.gobbo-chatbot--open) .gobbo-chatbot__launcher:focus-visible .gobbo-chatbot__launcher-text {
		display: inline-block;
	}
}

/* --------------------------------------------------------------------------
 * Panel de chat
 * ----------------------------------------------------------------------- */

.gobbo-chatbot__panel {
	position: absolute;
	bottom: calc(var(--gobbo-chatbot-size) + var(--gobbo-chatbot-gap));
	width: var(--gobbo-chatbot-panel-width);
	height: var(--gobbo-chatbot-panel-height);
	max-height: calc(100vh - var(--gobbo-chatbot-offset) - var(--gobbo-chatbot-size) - 40px);
	display: flex;
	flex-direction: column;
	background: var(--gobbo-chatbot-bg);
	color: var(--gobbo-chatbot-text);
	border: 1px solid var(--gobbo-chatbot-border);
	border-radius: var(--gobbo-chatbot-radius);
	box-shadow: var(--gobbo-chatbot-shadow);
	overflow: hidden;
	animation: gobbo-chatbot-in 0.18s ease-out;
}

.gobbo-chatbot--right .gobbo-chatbot__panel {
	right: 0;
}

.gobbo-chatbot--left .gobbo-chatbot__panel {
	left: 0;
}

@keyframes gobbo-chatbot-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gobbo-chatbot__panel {
		animation: none;
	}
}

.gobbo-chatbot__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--gobbo-chatbot-accent);
	color: var(--gobbo-chatbot-accent-contrast);
}

.gobbo-chatbot__header-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
}

.gobbo-chatbot__header-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.gobbo-chatbot__title {
	font-size: 0.92rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gobbo-chatbot__status {
	font-size: 0.72rem;
	opacity: 0.85;
}

.gobbo-chatbot__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.gobbo-chatbot__icon-btn:hover,
.gobbo-chatbot__icon-btn:focus-visible {
	background: rgba(255, 255, 255, 0.18);
}

/* --------------------------------------------------------------------------
 * Mensajes
 * ----------------------------------------------------------------------- */

.gobbo-chatbot__messages {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--gobbo-chatbot-bg-alt);
	overscroll-behavior: contain;
}

.gobbo-chatbot__msg {
	max-width: 88%;
	padding: 9px 12px;
	border-radius: 12px;
	font-size: 0.86rem;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.gobbo-chatbot__msg--bot {
	align-self: flex-start;
	background: var(--gobbo-chatbot-bg);
	border: 1px solid var(--gobbo-chatbot-border);
	border-bottom-left-radius: 4px;
}

.gobbo-chatbot__msg--user {
	align-self: flex-end;
	background: var(--gobbo-chatbot-accent);
	color: var(--gobbo-chatbot-accent-contrast);
	border-bottom-right-radius: 4px;
}

.gobbo-chatbot__msg a {
	color: inherit;
	text-decoration: underline;
}

/* El tema Gob.bo define "a:hover { color: var(--primary-light) !important; }",
   que se aplica también dentro del chat y deja el texto ilegible sobre los
   fondos verdes. Aquí se fijan los estados de los enlaces del panel. */
.gobbo-chatbot__msg a,
.gobbo-chatbot__msg a:visited,
.gobbo-chatbot__msg a:hover,
.gobbo-chatbot__msg a:active,
.gobbo-chatbot__msg a:focus-visible {
	color: inherit !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.gobbo-chatbot__msg a:hover,
.gobbo-chatbot__msg a:focus-visible {
	background-color: rgba(127, 127, 127, 0.18);
	text-decoration-thickness: 2px;
}

.gobbo-chatbot__msg--error {
	align-self: stretch;
	max-width: 100%;
	background: transparent;
	border: 1px solid #d93025;
	color: #d93025;
	text-align: center;
}

.gobbo-chatbot__cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.gobbo-chatbot__card {
	display: block;
	padding: 9px 11px;
	background: var(--gobbo-chatbot-bg);
	border: 1px solid var(--gobbo-chatbot-border);
	border-left: 3px solid var(--gobbo-chatbot-accent);
	border-radius: 8px;
	color: inherit !important;
	text-decoration: none;
}

.gobbo-chatbot__card:visited {
	color: inherit !important;
}

.gobbo-chatbot__card:hover,
.gobbo-chatbot__card:focus-visible {
	background: var(--gobbo-chatbot-accent);
	color: var(--gobbo-chatbot-accent-contrast) !important;
}

.gobbo-chatbot__card-title {
	display: block;
	font-size: 0.84rem;
	font-weight: 600;
}

.gobbo-chatbot__card-meta {
	display: block;
	font-size: 0.72rem;
	opacity: 0.75;
}

.gobbo-chatbot__typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.gobbo-chatbot__typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	animation: gobbo-chatbot-blink 1.2s infinite ease-in-out;
}

.gobbo-chatbot__typing span:nth-child(2) {
	animation-delay: 0.2s;
}

.gobbo-chatbot__typing span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes gobbo-chatbot-blink {
	0%, 80%, 100% {
		opacity: 0.25;
	}
	40% {
		opacity: 0.9;
	}
}

/* --------------------------------------------------------------------------
 * Sugerencias
 * ----------------------------------------------------------------------- */

.gobbo-chatbot__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 8px 10px;
	border-top: 1px solid var(--gobbo-chatbot-border);
	background: var(--gobbo-chatbot-bg);
}

.gobbo-chatbot__suggestion {
	padding: 5px 9px;
	border: 1px solid var(--gobbo-chatbot-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--gobbo-chatbot-accent);
	font-size: 0.72rem;
	line-height: 1.3;
	cursor: pointer;
}

.gobbo-chatbot__suggestion:hover,
.gobbo-chatbot__suggestion:focus-visible {
	background: var(--gobbo-chatbot-accent);
	color: var(--gobbo-chatbot-accent-contrast);
}

/* --------------------------------------------------------------------------
 * Formularios
 * ----------------------------------------------------------------------- */

.gobbo-chatbot__form,
.gobbo-chatbot__lead-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--gobbo-chatbot-border);
	background: var(--gobbo-chatbot-bg);
}

.gobbo-chatbot__input {
	flex: 1;
	min-width: 0;
	padding: 9px 11px;
	border: 1px solid var(--gobbo-chatbot-border);
	border-radius: 8px;
	background: var(--gobbo-chatbot-bg);
	color: var(--gobbo-chatbot-text);
	font-size: 0.86rem;
	font-family: inherit;
}

.gobbo-chatbot__input:focus {
	outline: 2px solid var(--gobbo-chatbot-accent);
	outline-offset: 1px;
}

.gobbo-chatbot__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 38px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: var(--gobbo-chatbot-accent);
	color: var(--gobbo-chatbot-accent-contrast);
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.gobbo-chatbot__send:hover {
	filter: brightness(0.92);
}

.gobbo-chatbot__lead {
	background: var(--gobbo-chatbot-bg);
	border-top: 1px solid var(--gobbo-chatbot-border);
	max-height: 70%;
	overflow-y: auto;
}

.gobbo-chatbot__lead-form {
	flex-direction: column;
	align-items: stretch;
	border-top: 0;
}

.gobbo-chatbot__lead-title {
	margin: 0 0 4px;
	font-size: 0.86rem;
	font-weight: 700;
}

.gobbo-chatbot__label {
	font-size: 0.76rem;
	font-weight: 600;
	opacity: 0.85;
}

.gobbo-chatbot__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 0.72rem;
	line-height: 1.35;
	opacity: 0.85;
}

.gobbo-chatbot__consent input {
	margin-top: 2px;
	flex-shrink: 0;
}

.gobbo-chatbot__error {
	margin: 0;
	font-size: 0.76rem;
	color: #d93025;
}

.gobbo-chatbot__lead-actions {
	display: flex;
	gap: 8px;
}

.gobbo-chatbot__cancel-lead {
	padding: 8px 12px;
	border: 1px solid var(--gobbo-chatbot-border);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-size: 0.82rem;
	font-family: inherit;
	cursor: pointer;
}

.gobbo-chatbot__footer {
	padding: 6px 12px 8px;
	background: var(--gobbo-chatbot-bg);
	text-align: center;
	font-size: 0.7rem;
}

.gobbo-chatbot__footer a,
.gobbo-chatbot__footer a:visited {
	color: inherit;
	opacity: 0.8;
}

.gobbo-chatbot__footer a:hover,
.gobbo-chatbot__footer a:focus-visible {
	color: inherit !important;
	opacity: 1;
	text-decoration: underline;
}

.gobbo-chatbot__channels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.gobbo-chatbot__channel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 8px;
	background: var(--gobbo-chatbot-accent);
	color: var(--gobbo-chatbot-accent-contrast) !important;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

.gobbo-chatbot__channel:visited {
	color: var(--gobbo-chatbot-accent-contrast) !important;
}

.gobbo-chatbot__channel:hover,
.gobbo-chatbot__channel:focus-visible {
	color: var(--gobbo-chatbot-accent-contrast) !important;
	box-shadow: inset 0 0 0 2px var(--gobbo-chatbot-accent-contrast);
}

/* --------------------------------------------------------------------------
 * Integración con el tema Gob.bo
 * ----------------------------------------------------------------------- */

/* Las redes sociales flotantes quedan debajo del panel cuando el chat está abierto. */
body.gobbo-chatbot-open .redes-flotantes {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Modo oscuro
 * ----------------------------------------------------------------------- */

/* El tema Gob.bo marca el modo oscuro en <html data-theme="dark">. */
[data-theme="dark"] .gobbo-chatbot,
.gobbo-chatbot[data-scheme="dark"] {
	--gobbo-chatbot-bg: #22242a;
	--gobbo-chatbot-bg-alt: #1b1d21;
	--gobbo-chatbot-text: #e9ecef;
	--gobbo-chatbot-border: rgba(255, 255, 255, 0.16);
	--gobbo-chatbot-accent-contrast: #ffffff;
}

.gobbo-chatbot[data-scheme="light"] {
	--gobbo-chatbot-bg: #ffffff;
	--gobbo-chatbot-bg-alt: #f5f6f4;
	--gobbo-chatbot-text: #343a40;
	--gobbo-chatbot-border: rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
 * Móvil
 * ----------------------------------------------------------------------- */

@media (max-width: 575.98px) {
	.gobbo-chatbot {
		--gobbo-chatbot-size: 80px !important;
		left: 0;
		right: 0;
		bottom: calc(var(--gobbo-chatbot-offset) + env(safe-area-inset-bottom, 0px));
		display: flex;
		align-items: flex-end;
	}

	.gobbo-chatbot--right,
	.gobbo-chatbot--left {
		left: 0;
		right: 0;
	}

	.gobbo-chatbot--right {
		justify-content: flex-end;
	}

	.gobbo-chatbot--left {
		justify-content: flex-start;
	}

	.gobbo-chatbot__launcher {
		margin: 0 16px;
	}

	.gobbo-chatbot__avatar {
		width: var(--gobbo-chatbot-size);
		height: var(--gobbo-chatbot-size);
	}

	/* Con el panel abierto (hoja inferior) el botón queda detrás: se oculta. */
	.gobbo-chatbot--open .gobbo-chatbot__launcher {
		display: none;
	}

	.gobbo-chatbot__panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 86vh;
		max-height: 86vh;
		border-radius: 14px 14px 0 0;
	}
}