/**
 * Gráfica AI Chat — estilos del front.
 *
 * Todo cuelga de .gaic-chat y usa variables CSS: para reescribir el aspecto
 * basta con redefinir las variables en tu hoja personalizada.
 */

.gaic-chat {
	--gaic-accent: #6595bb;
	--gaic-accent-contrast: #ffffff;
	--gaic-bg: #ffffff;
	--gaic-bg-soft: #f5f7fa;
	--gaic-text: #1d2733;
	--gaic-text-soft: #5b6b7c;
	--gaic-border: #e2e8f0;
	--gaic-radius: 14px;
	--gaic-gap: 16px;
	--gaic-height: 520px;
	--gaic-font: inherit;

	display: flex;
	flex-direction: column;
	max-width: 100%;
	font-family: var(--gaic-font);
	color: var(--gaic-text);
	background: var(--gaic-bg);
	border: 1px solid var(--gaic-border);
	border-radius: var(--gaic-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

/* ---------- Cabecera ---------- */

.gaic-chat__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px var(--gaic-gap);
	border-bottom: 1px solid var(--gaic-border);
	background: var(--gaic-bg-soft);
}

.gaic-chat__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.gaic-chat__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	color: var(--gaic-text-soft);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.gaic-chat__reset:hover {
	color: var(--gaic-text);
	background: rgba(15, 23, 42, .06);
}

/* ---------- Conversación ---------- */

.gaic-chat__log {
	flex: 1 1 auto;
	min-height: 160px;
	height: var(--gaic-height);
	padding: var(--gaic-gap);
	overflow-y: auto;
	scroll-behavior: smooth;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.gaic-msg {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 88%;
}

.gaic-msg--user {
	align-self: flex-end;
	align-items: flex-end;
}

.gaic-msg__role {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gaic-text-soft);
}

.gaic-msg__body {
	padding: 11px 14px;
	border-radius: 12px;
	background: var(--gaic-bg-soft);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.gaic-msg--user .gaic-msg__body {
	background: var(--gaic-accent);
	color: var(--gaic-accent-contrast);
	white-space: pre-wrap;
}

.gaic-msg--user .gaic-msg__body a {
	color: inherit;
}

.gaic-msg__body > *:first-child {
	margin-top: 0;
}

.gaic-msg__body > *:last-child {
	margin-bottom: 0;
}

.gaic-msg__body p {
	margin: 0 0 .7em;
}

.gaic-msg__body ul,
.gaic-msg__body ol {
	margin: 0 0 .7em;
	padding-left: 1.25em;
}

.gaic-msg__body li {
	margin-bottom: .4em;
}

/* Peso explícito: con temas de texto fino (300), «bolder» se queda en 400. */
.gaic-msg__body strong {
	font-weight: 600;
}

.gaic-msg__body .gaic-heading {
	margin: 1.1em 0 .45em;
	font-size: 1.15em;
	line-height: 1.3;
}

.gaic-msg__body .gaic-heading:first-child {
	margin-top: 0;
}

.gaic-msg--bot .gaic-msg__body a {
	color: var(--gaic-accent);
	text-decoration: none;
}

.gaic-msg--bot .gaic-msg__body a:hover {
	text-decoration: underline;
}

.gaic-link__icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0 .3em 0 .15em;
	vertical-align: -.14em;
	object-fit: contain;
	border-radius: 3px;
}

.gaic-msg__body code {
	padding: .1em .35em;
	font-size: .9em;
	background: rgba(15, 23, 42, .07);
	border-radius: 4px;
}

.gaic-msg__body .gaic-code {
	margin: 0 0 .7em;
	padding: 12px;
	overflow-x: auto;
	background: rgba(15, 23, 42, .07);
	border-radius: 8px;
}

.gaic-msg__body .gaic-code code {
	padding: 0;
	background: none;
}

.gaic-msg--error {
	max-width: 100%;
	padding: 10px 14px;
	font-size: .9rem;
	color: #8a1c1c;
	background: #fdecec;
	border: 1px solid #f5c6c6;
	border-radius: 10px;
}

/* ---------- Fuentes ---------- */

.gaic-sources {
	margin-top: 8px;
	padding: 10px 12px;
	font-size: .82rem;
	background: var(--gaic-bg);
	border: 1px dashed var(--gaic-border);
	border-radius: 10px;
}

.gaic-sources__title {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	color: var(--gaic-text-soft);
}

.gaic-sources ul {
	margin: 0;
	padding-left: 1.1em;
}

.gaic-sources a {
	color: var(--gaic-accent);
	text-decoration: none;
}

.gaic-sources a:hover {
	text-decoration: underline;
}

/* ---------- Indicador de escritura ---------- */

.gaic-dots {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	height: 1.1em;
}

.gaic-dots i {
	width: 6px;
	height: 6px;
	background: var(--gaic-text-soft);
	border-radius: 50%;
	opacity: .35;
	animation: gaic-blink 1.2s infinite ease-in-out;
}

.gaic-dots i:nth-child(2) { animation-delay: .18s; }
.gaic-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes gaic-blink {
	0%, 80%, 100% { opacity: .25; transform: translateY(0); }
	40%           { opacity: 1;   transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
	.gaic-dots i { animation: none; }
	.gaic-chat__log { scroll-behavior: auto; }
}

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

.gaic-chat__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 var(--gaic-gap) var(--gaic-gap);
}

.gaic-suggestion {
	padding: 7px 12px;
	font-size: .85rem;
	font-family: inherit;
	color: var(--gaic-text);
	background: var(--gaic-bg-soft);
	border: 1px solid var(--gaic-border);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.gaic-suggestion:hover {
	color: var(--gaic-accent);
	border-color: var(--gaic-accent);
}

/* ---------- Formulario ---------- */

.gaic-chat__form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px var(--gaic-gap);
	border-top: 1px solid var(--gaic-border);
	background: var(--gaic-bg);
}

.gaic-chat__input {
	flex: 1 1 auto;
	min-height: 42px;
	max-height: 160px;
	padding: 10px 12px;
	font: inherit;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--gaic-text);
	background: var(--gaic-bg-soft);
	border: 1px solid var(--gaic-border);
	border-radius: 10px;
	resize: none;
	overflow-y: auto;
}

.gaic-chat__input:focus {
	outline: 2px solid var(--gaic-accent);
	outline-offset: 1px;
}

.gaic-chat__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	color: var(--gaic-accent-contrast);
	background: var(--gaic-accent);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity .15s ease;
}

.gaic-chat__send:disabled {
	opacity: .5;
	cursor: default;
}

.gaic-chat__disclaimer {
	margin: 0;
	padding: 0 var(--gaic-gap) 12px;
	font-size: .75rem;
	line-height: 1.4;
	color: var(--gaic-text-soft);
}

.gaic-chat--locked {
	padding: var(--gaic-gap);
	text-align: center;
}

/* ---------- Diseño «portada» ---------- */

/* Los display de los componentes anulan el atributo hidden. */
.gaic-chat [hidden] {
	display: none !important;
}

.gaic-chat--hero {
	border-color: transparent;
	box-shadow: none;
}

.gaic-chat--hero.is-empty .gaic-chat__header,
.gaic-chat--hero.is-empty .gaic-chat__log,
.gaic-chat--hero:not(.is-empty) .gaic-chat__welcome {
	display: none;
}

.gaic-chat__welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Misma altura que la conversación: al empezar no salta la página. */
	min-height: var(--gaic-height);
	padding: calc(var(--gaic-gap) * 2) var(--gaic-gap) var(--gaic-gap);
	text-align: center;
}

.gaic-chat__logo {
	width: var(--gaic-logo-size, 88px);
	height: var(--gaic-logo-size, 88px);
	margin-bottom: 8px;
	object-fit: contain;
	border-radius: var(--gaic-logo-radius, 50%);
}

.gaic-chat__hero-title {
	margin: 0;
	font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--gaic-text);
}

.gaic-chat__byline {
	margin: 0;
	font-size: .95rem;
	color: var(--gaic-text-soft);
}

.gaic-chat__description {
	max-width: 36em;
	margin-top: 8px;
	line-height: 1.55;
	color: var(--gaic-text-soft);
}

.gaic-chat__description p {
	margin: 0 0 .5em;
}

.gaic-chat__description p:last-child {
	margin-bottom: 0;
}

.gaic-chat--hero .gaic-chat__suggestions {
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 22px 0 0;
}

.gaic-chat--hero .gaic-suggestion {
	max-width: 100%;
	padding: 10px 20px;
	font-size: .95rem;
	line-height: 1.35;
	text-align: center;
	border-color: transparent;
}

.gaic-chat--hero .gaic-suggestion:hover,
.gaic-chat--hero .gaic-suggestion:focus-visible {
	color: var(--gaic-accent);
	border-color: var(--gaic-accent);
}

.gaic-chat--hero .gaic-chat__form {
	align-items: flex-end;
	margin: 0 var(--gaic-gap) var(--gaic-gap);
	padding: 6px 6px 6px 18px;
	background: var(--gaic-bg-soft);
	border: 1px solid var(--gaic-border);
	border-radius: 28px;
	transition: border-color .15s ease;
}

.gaic-chat--hero .gaic-chat__form:focus-within {
	border-color: var(--gaic-accent);
}

.gaic-chat--hero .gaic-chat__input {
	min-height: 40px;
	padding: 9px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.gaic-chat--hero .gaic-chat__input:focus {
	outline: none;
}

.gaic-chat--hero .gaic-chat__send {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.gaic-chat--hero .gaic-chat__disclaimer {
	text-align: center;
}

/* Respuestas a todo el ancho, sin globo; la pregunta del usuario, en píldora. */
.gaic-chat--hero .gaic-msg--bot {
	max-width: 100%;
}

.gaic-chat--hero .gaic-msg--bot .gaic-msg__body {
	padding: 0 4px;
	background: transparent;
}

.gaic-chat--hero .gaic-msg--user .gaic-msg__body {
	padding: 10px 18px;
	border-radius: 22px;
}

.gaic-chat--hero .gaic-msg__role {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media (max-width: 480px) {
	.gaic-chat__welcome {
		min-height: 0;
	}

	.gaic-chat--hero .gaic-suggestion {
		width: 100%;
	}
}

/* ---------- Accesibilidad ---------- */

.gaic-chat .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;
}

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

@media (prefers-color-scheme: dark) {
	.gaic-chat:not(.gaic-chat--light) {
		--gaic-bg: #14181f;
		--gaic-bg-soft: #1d232c;
		--gaic-text: #e8edf3;
		--gaic-text-soft: #9aa8b8;
		--gaic-border: #2b333e;
		box-shadow: none;
	}

	.gaic-chat:not(.gaic-chat--light) .gaic-msg__body code,
	.gaic-chat:not(.gaic-chat--light) .gaic-msg__body .gaic-code {
		background: rgba(255, 255, 255, .08);
	}

	.gaic-chat:not(.gaic-chat--light) .gaic-chat__reset:hover {
		background: rgba(255, 255, 255, .08);
	}

	.gaic-chat:not(.gaic-chat--light) .gaic-msg--error {
		color: #ffb4b4;
		background: rgba(180, 40, 40, .18);
		border-color: rgba(180, 40, 40, .4);
	}
}

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

@media (max-width: 480px) {
	.gaic-chat {
		--gaic-gap: 12px;
	}

	.gaic-msg {
		max-width: 96%;
	}
}