.nexus-chatbot-widget {
	--nexus-bg: #0b0b0b;
	--nexus-bubble-bg: #1a1a1a;
	--nexus-accent: #00e5e5;
	--nexus-text: #f2f2f2;
	--nexus-text-muted: #9a9a9a;
	--nexus-error: #ff6b6b;
	--nexus-radius: 10px;

	font-family: inherit;
	width: 100%;
	background: var(--nexus-bg);
	border: 1px solid #262626;
	border-radius: var(--nexus-radius);
	overflow: hidden;
	box-sizing: border-box;
}

.nexus-chatbot-widget * {
	box-sizing: border-box;
}

.nexus-chatbot-messages {
	max-height: 65vh;
	min-height: 320px;
	overflow-y: auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;

	/* Ocultamos la barra de scroll visible mientras se mantiene el scroll
	   funcional con el ratón/gesto — más limpio visualmente. */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* navegadores antiguos de Edge/IE */
}

.nexus-chatbot-messages::-webkit-scrollbar {
	display: none; /* Chrome, Edge, Safari */
}

.nexus-chatbot-bubble--assistant a {
	color: var(--nexus-accent);
	text-decoration: underline;
	word-break: break-word;
}

.nexus-chatbot-bubble {
	max-width: 85%;
	padding: 12px 16px;
	border-radius: var(--nexus-radius);
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--nexus-text);
	background: var(--nexus-bubble-bg);
}

.nexus-chatbot-bubble--assistant {
	align-self: stretch;
	max-width: 100%;
	border: 1px solid #2a2a2a;
}

.nexus-chatbot-bubble--user {
	align-self: flex-end;
	background: var(--nexus-accent);
	color: #06282b;
	font-weight: 500;
}

.nexus-chatbot-bubble--error {
	align-self: flex-start;
	background: transparent;
	border: 1px solid var(--nexus-error);
	color: var(--nexus-error);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.nexus-chatbot-retry-btn {
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid var(--nexus-error);
	background: transparent;
	color: var(--nexus-error);
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.nexus-chatbot-retry-btn:hover {
	background: var(--nexus-error);
	color: #1a0000;
}

/* Contenido renderizado desde Markdown: quitamos los márgenes por
   defecto de párrafos/listas para que no rompa el ritmo de la burbuja */
.nexus-chatbot-bubble--assistant p {
	margin: 0 0 10px;
}
.nexus-chatbot-bubble--assistant p:last-of-type {
	margin-bottom: 0;
}
.nexus-chatbot-bubble--assistant h3,
.nexus-chatbot-bubble--assistant h4 {
	margin: 14px 0 8px;
	color: var(--nexus-accent);
}
.nexus-chatbot-bubble--assistant h3:first-child,
.nexus-chatbot-bubble--assistant h4:first-child {
	margin-top: 0;
}
.nexus-chatbot-bubble--assistant ul {
	margin: 0 0 10px;
	padding-left: 20px;
}
.nexus-chatbot-bubble--assistant code {
	background: #262626;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

/* Indicador de "escribiendo…" — tres puntos animados */
.nexus-chatbot-typing {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 16px;
}
.nexus-chatbot-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nexus-text-muted);
	animation: nexus-typing-bounce 1.2s infinite ease-in-out;
}
.nexus-chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.nexus-chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes nexus-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.nexus-chatbot-typing span {
		animation: none;
		opacity: 0.8;
	}
}

/* Chips de preguntas sugeridas */
.nexus-chatbot-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 24px 16px;
}
.nexus-chatbot-chip {
	background: transparent;
	border: 1px solid #333;
	color: var(--nexus-text-muted);
	border-radius: 16px;
	padding: 7px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.nexus-chatbot-chip:hover {
	border-color: var(--nexus-accent);
	color: var(--nexus-accent);
}

.nexus-chatbot-inputbar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid #262626;
}

.nexus-chatbot-buttons {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	justify-content: flex-end;
}

.nexus-chatbot-input-wrap {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
}

.nexus-chatbot-input {
	width: 100%;
	box-sizing: border-box;
	resize: none;
	max-height: 140px;
	padding: 12px 16px;
	padding-bottom: 22px;
	border-radius: 18px;
	border: 1px solid #333;
	background: #151515;
	color: var(--nexus-text);
	font-size: 15px;
	font-family: inherit;
}

.nexus-chatbot-charcount {
	position: absolute;
	right: 14px;
	bottom: 4px;
	font-size: 11px;
	color: var(--nexus-text-muted);
	pointer-events: none;
}

.nexus-chatbot-charcount--warn {
	color: var(--nexus-error);
}

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

.nexus-chatbot-input:disabled {
	opacity: 0.6;
}

.nexus-chatbot-clear,
.nexus-chatbot-send {
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	border: 2px solid var(--nexus-accent);
	transition: opacity 0.15s ease;
}

.nexus-chatbot-clear {
	background: transparent;
	color: var(--nexus-accent);
}

.nexus-chatbot-send {
	background: var(--nexus-accent);
	color: #06282b;
}

.nexus-chatbot-send:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.nexus-chatbot-consent {
	font-size: 12px;
	color: var(--nexus-text-muted);
	padding: 0 20px 16px;
	margin: 0;
}

/* Foco visible por teclado, accesibilidad mínima */
.nexus-chatbot-clear:focus-visible,
.nexus-chatbot-send:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.nexus-chatbot-messages {
		max-height: 60vh;
		padding: 16px;
	}
	.nexus-chatbot-inputbar {
		padding: 12px;
	}
	.nexus-chatbot-clear,
	.nexus-chatbot-send {
		flex: 1;
	}
}

/* ============================================================
   MODO ICONO FLOTANTE (ej. KAI) — burbuja fija + panel emergente
   ============================================================ */

.nexus-chatbot-widget--inline .nexus-chatbot-bubble-toggle,
.nexus-chatbot-widget--inline .nexus-chatbot-panel-header {
	display: none;
}

.nexus-chatbot-widget--floating {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99999;
	width: auto;
	border: none;
	background: transparent;
	overflow: visible;
}

.nexus-chatbot-bubble-toggle {
	height: 60px;
	min-width: 60px;
	border-radius: 32px;
	background: #14181a;
	border: 1px solid #26302f;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
	transition: transform 0.15s ease, padding 0.15s ease;
}

.nexus-chatbot-bubble-toggle:hover {
	transform: scale(1.03);
}

.nexus-chatbot-bubble-icon,
.nexus-chatbot-bubble-icon-img {
	width: 46px;
	height: 46px;
	min-width: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nexus-accent);
	flex-shrink: 0;
}

.nexus-chatbot-bubble-icon-img {
	object-fit: cover;
	background: var(--nexus-accent);
}

.nexus-chatbot-bubble-icon {
	font-size: 24px;
}

.nexus-chatbot-bubble-label {
	color: var(--nexus-text);
	font-weight: 600;
	font-size: 14px;
	padding-right: 14px;
	white-space: nowrap;
}

/* El panel del chat empieza oculto; solo se ve con la clase -open.
   Usamos "top" Y "bottom" a la vez (en vez de solo max-height) para
   que el navegador calcule la altura automáticamente y el panel NUNCA
   pueda crecer por encima de la cabecera de la web, sea cual sea el
   tamaño de la ventana o si hay barra de administración de WordPress.
   OJO: el valor de "top" (260px) está calculado para la cabecera más
   alta de tu web (la de portada, con el menú de dos filas). Si más
   adelante rediseñas la cabecera y queda más baja, puedes reducir
   este número para que el panel aproveche más espacio vertical. */
.nexus-chatbot-widget--floating .nexus-chatbot-panel {
	position: fixed;
	right: 24px;
	bottom: 80px;
	top: 260px;
	width: min(420px, calc(100vw - 48px));
	min-height: 380px;
	background: var(--nexus-bg);
	border: 1px solid #262626;
	border-radius: var(--nexus-radius);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease, top 0.3s ease;
}

.nexus-chatbot-widget--floating.nexus-chatbot-open .nexus-chatbot-panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.nexus-chatbot-widget--floating .nexus-chatbot-messages {
	max-height: none;
	flex: 1 1 auto;
	min-height: 0; /* deja que se encoja si el panel es bajo, en vez de desbordar */
	overflow-y: auto;
	/* Hueco arriba para que el primer mensaje no quede tapado por el
	   botón de cerrar, que ahora flota sobre la esquina del panel en
	   vez de ocupar toda una barra de cabecera. */
	padding-top: 44px;
}

/* Estos SIEMPRE deben verse enteros — solo la zona de mensajes de
   arriba se encoge o hace scroll, nunca el campo de escribir. */
.nexus-chatbot-widget--floating .nexus-chatbot-suggestions,
.nexus-chatbot-widget--floating .nexus-chatbot-inputbar,
.nexus-chatbot-widget--floating .nexus-chatbot-consent {
	flex-shrink: 0;
}

/* Ya no hay barra de cabecera con título — solo un botón de cerrar
   flotando sobre la esquina superior del panel. */
.nexus-chatbot-panel-header {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}

.nexus-chatbot-panel-close {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #1a1a1a;
	border: 1px solid #2a2a2a;
	color: var(--nexus-text-muted);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nexus-chatbot-panel-close:hover {
	color: var(--nexus-text);
	border-color: var(--nexus-accent);
}

@media (max-width: 480px) {
	.nexus-chatbot-widget--floating {
		right: 16px;
		bottom: 16px;
	}
	.nexus-chatbot-widget--floating .nexus-chatbot-panel {
		right: 16px;
		left: 16px;
		width: auto;
		top: 70px;
		bottom: 76px;
	}
}