/* ================================================================
   EL ASISTENTE — la página de conversación
   ================================================================
   Una columna angosta y centrada, como cualquier chat: leer una
   respuesta de ocho líneas a lo ancho de una pantalla de escritorio
   cansa. El ancho máximo es el de un párrafo cómodo, no el del
   contenedor.

   Los colores salen de las variables del programa (ver utilidades.css)
   para que siga el tema claro/oscuro sin tener su propia paleta.
   ================================================================ */

.ia-pagina {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* El hilo. Crece y hace scroll solo; la barra de escribir queda fija
   abajo, que es lo que uno espera de un chat. */
.ia-hilo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 16px 8px;
}

.ia-hilo-interior {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Los mensajes ──
   La pregunta va en una burbuja alineada a la derecha; la respuesta,
   suelta sobre el fondo. Es la forma en que se leen los asistentes hoy
   y deja claro de un vistazo quién dijo qué sin repetir un rótulo. */
.ia-msg { display: flex; flex-direction: column; }
.ia-msg-usuario { align-items: flex-end; }

.ia-msg-usuario .ia-burbuja {
  background: var(--color-accent);
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  max-width: 85%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ia-msg-asistente .ia-burbuja {
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

/* Un error no es una respuesta: se marca para que no se confunda con
   lo que dijo el modelo. */
.ia-msg-error .ia-burbuja {
  color: var(--color-rojo);
  border-left: 3px solid var(--color-rojo);
  padding-left: 12px;
}

/* ── Qué miró ──
   Debajo de cada respuesta, en chico: las consultas que corrieron. Una
   cifra de la que no se ve de dónde salió no se puede ni creer ni
   corregir, y acá los datos son los del negocio. */
.ia-fuentes {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ia-fuente {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* ── Esperando ──
   Tres puntos que laten. El modelo se demora entre uno y cuatro
   segundos: sin señal de vida, parece que no se apretó nada. */
.ia-pensando { display: flex; gap: 5px; padding: 4px 0; }
.ia-pensando span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-text-dim);
  animation: ia-latir 1.2s infinite ease-in-out;
}
.ia-pensando span:nth-child(2) { animation-delay: .18s; }
.ia-pensando span:nth-child(3) { animation-delay: .36s; }

@keyframes ia-latir {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .ia-pensando span { animation: none; opacity: .5; }
}

/* ── La bienvenida ──
   Un chat vacío no dice qué se le puede preguntar. Estos ejemplos son
   botones: se aprietan y preguntan. */
.ia-bienvenida {
  max-width: 720px;
  margin: 10vh auto 0;
  text-align: center;
  color: var(--color-text-dim);
}
.ia-bienvenida h2 {
  color: var(--color-text);
  font-size: 20px;
  margin: 0 0 6px;
}
.ia-ejemplos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.ia-ejemplo {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}
.ia-ejemplo:hover { border-color: var(--color-accent); }

/* ── La barra de escribir ── */
.ia-barra {
  flex: 0 0 auto;
  padding: 10px 16px 18px;
  background: var(--color-bg-deep);
}
.ia-barra-interior {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 8px 8px 8px 16px;
}
.ia-barra-interior:focus-within { border-color: var(--color-accent); }

/* Crece con lo que se escribe (lo ajusta _iaAltoDelCampo), hasta un
   tope: una pregunta larga no puede comerse el hilo. */
#ia-campo {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  color: var(--color-text);
  font: inherit;
  line-height: 1.5;
  max-height: 160px;
  padding: 4px 0;
}

.ia-enviar {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.ia-enviar:disabled { opacity: .4; cursor: default; }

.ia-pie {
  max-width: 720px;
  margin: 8px auto 0;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-dim);
}

@media (max-width: 600px) {
  .ia-hilo { padding: 16px 12px 8px; }
  .ia-barra { padding: 8px 12px 14px; }
  .ia-bienvenida { margin-top: 6vh; }
}