/* Estilos personalizados para ILU */

body {
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	background-color: #f4f7f6;
	min-height: 100vh;
}

/* Personalización del chat window basada en Ilustricia */
:root {
	/* Colores extraídos de la imagen */
	--chat--color--primary: #00a8e8; /* Azul principal Ilustricia */
	--chat--color--primary-shade-50: #0096d1;
	--chat--color--primary--shade-100: #0084b8;
	
	--chat--color--secondary: #a855f7; /* Púrpura accent (cerebro) */
	--chat--color-secondary-shade-50: #9333ea;
	
	--chat--color-white: #ffffff;
	--chat--color-light: #f8fafc;
	--chat--color-light-shade-50: #f1f5f9;
	--chat--color-light-shade-100: #e2e8f0;
	--chat--color-medium: #94a3b8;
	--chat--color-dark: #0b80ce; /* Azul de la cabecera */
	--chat--color-disabled: #94a3b8;
	--chat--color-typing: #64748b;

	/* Dimensiones y Bordes */
	--chat--spacing: 1.25rem;
	--chat--border-radius: 12px;
	--chat--transition-duration: 0.2s;

	--chat--window--width: 470px;
	--chat--window--height: 650px;

	/* Cabecera (Header) */
	--chat--header-height: 75px;
	--chat--header--padding: 1.5rem var(--chat--spacing);
	--chat--header--background: var(--chat--color-dark);
	--chat--header--color: var(--chat--color-white);
	--chat--heading--font-size: 1.4rem;
	--chat--subtitle--font-size: 0.9rem;
	--chat--subtitle--line-height: 1.5;

	/* Área de texto */
	--chat--textarea--height: 60px;

	/* Mensajes */
	--chat--message--font-size: 0.85rem;
	--chat--message--padding: 0.8rem 1rem;
	--chat--message--border-radius: 15px;
	--chat--message-line-height: 1.6;
	
	--chat--message--bot--background: var(--chat--color-white);
	--chat--message--bot--color: #000000;
	--chat--message--bot--border: 1px solid var(--chat--color-light-shade-100);
	
	--chat--message--user--background: var(--chat--color--primary);
	--chat--message--user--color: var(--chat--color-white);
	--chat--message--user--border: none;

	/* Botón del chat (Toggle) */
	--chat--toggle--background: var(--chat--color--primary);
	--chat--toggle--hover--background: var(--chat--color--primary-shade-50);
	--chat--toggle--active--background: var(--chat--color--primary--shade-100);
	--chat--toggle--color: var(--chat--color-white);
	--chat--toggle--size: 64px;
}

/* Estilos adicionales */
* {
	box-sizing: border-box;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

body {
	animation: fadeIn 0.5s ease-out;
	background-image: radial-gradient(circle at top right, #e0f2fe, #f4f7f6);
}

/* Estilo para el logo en la cabecera si se inserta vía HTML */
.chat-header-logo {
	height: 32px;
	margin-right: 12px;
	vertical-align: middle;
}