/**
 * Asesor — el chat.
 * Todo el color sale de css/tokens.css. Aquí no hay un solo hex.
 */

.chat-hilo {
  list-style: none;
  margin: 0 0 var(--e-4);
  padding: 0;
  display: grid;
  gap: var(--e-3);
}

.chat-turno {
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: var(--e-3);
  max-width: 92%;
}

.chat-turno p { margin: 0; line-height: var(--alto-linea); }

/* Quien pregunta va a la derecha; quien contesta, a la izquierda.
   La diferencia también es de borde, no sólo de posición: en un teléfono
   angosto las dos columnas casi se tocan.

   El acento se lo queda el asesor porque es la voz de la app. La persona va
   en neutro a propósito: verde y rojo ya significan capital e interés en el
   resto de la aplicación, y aquí sólo marcarían quién habla. Un color que
   significa dos cosas distintas deja de significar la primera. */
.chat-persona {
  justify-self: end;
  background: var(--superficie-elevada);
  border-right: var(--regla-activa) solid var(--borde-fuerte);
}

.chat-asesor {
  justify-self: start;
  background: var(--superficie);
  border-left: var(--regla-activa) solid var(--acento);
}

.chat-fuente {
  margin-top: var(--e-2) !important;
  padding-top: var(--e-2);
  border-top: var(--regla-fina) solid var(--borde);
  font-size: var(--txt-1);
  color: var(--texto-suave);
}

/* ─── Ejemplos ────────────────────────────────────────────────────────────── */

.chat-ejemplos {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-2);
}

.chat-ejemplo {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie-hundida);
  color: var(--texto);
  border: var(--regla-fina) solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-2);
  text-align: left;
  cursor: pointer;
}

.chat-ejemplo:active { background: var(--superficie-elevada); }

/* ─── Entrada ─────────────────────────────────────────────────────────────── */

.chat-etiqueta {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}

.chat-fila { display: flex; gap: var(--e-2); }

.chat-fila input {
  flex: 1;
  min-width: 0;
  min-height: var(--toque-min);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  color: var(--texto);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-3);
}

.chat-fila .btn { flex-shrink: 0; min-height: var(--toque-min); }

/* A 360 px el botón y el campo no caben lado a lado sin apretarse. */
@media (max-width: 400px) {
  .chat-fila { flex-direction: column; }
  .chat-fila .btn { width: 100%; }
}