/* Cambio de contrato #12 — lo del form-conversación que no puede ir inline.
 *
 * Dos cosas: los puntos del indicador "escribiendo…" (necesitan @keyframes) y el tope de ancho
 * en mobile (necesita una media query).
 */

/* ── Tope de ancho ──────────────────────────────────────────────────────────
 * El chat se pasaba 4 px del viewport a 360. No era su min-content —estrangulado a 200 px se
 * encoge sin quejarse— sino el ancho que hereda: width:100% resolvía contra un ancestro más
 * ancho que el viewport, y el flex con justify-content:center lo dejaba sobresaliendo 2 px de
 * cada lado. Se aisló escondiéndolo: la página pasaba de 364 a 360.
 *
 * Se ata al VIEWPORT y no al ancestro, que es lo único que no depende de una cadena que ya
 * demostró ser difícil de razonar. Los 36 px son el padding lateral que responsive.css le da a
 * esta sección en mobile (18 de cada lado). */
@media (max-width: 767px) {
  .upran-chat {
    max-width: calc(100vw - 36px) !important;
  }
}

/* ── El hilo tiene alto fijo y crece hacia adentro ──────────────────────────
 * Antes el hilo crecía con cada burbuja y con la aparición del indicador, así que TODA la página
 * de abajo se corría. Con alto fijo y scroll interno, la conversación crece hacia adentro y nada
 * afuera se entera: el indicador entra y sale sin cambiar la altura de nada.
 *
 * 340 px en desktop y 58vh en mobile. El 58 no es redondo por gusto: la ventana tiene cabecera
 * (~66 px) y barra de entrada (~90 px) además del hilo, así que 58vh deja el bloque completo
 * dentro de la pantalla en un teléfono chico sin que haya que scrollear la página para ver el
 * campo donde se escribe.
 *
 * min-height: 0 porque el componente trae 210 px inline: en un viewport corto ese mínimo le
 * ganaría al 58vh y el hilo volvería a empujar. */
/* La ventana CRECE HACIA ABAJO, sin scroll interno.
 *
 * La versión anterior tenía alto fijo con scroll adentro. Resolvía el salto de la página pero
 * metía una barra interna, que se lee peor que el problema que arreglaba. Acá el chat crece y
 * todo el contenido queda siempre a la vista.
 *
 * Nada de overflow: el hilo y la ventana muestran todo. El alto lo anima el componente midiendo
 * en JS, porque `height: auto` no es animable — y al terminar vuelve a `auto`, no queda clavado
 * en un número. Ver `crecer()` en UpranChatContacto.
 *
 * NO lleva align-self: flex-start. Lo intenté para "anclar el borde de arriba" y fue un error de
 * eje: en un contenedor flex en COLUMNA, align-self controla el eje transversal, que es el
 * HORIZONTAL. El chat dejó de estirarse y pasó a encogerse al contenido — 354 px con el input y
 * 330 con los chips. El borde superior ya queda clavado sin ayuda: el contenedor apila en
 * columna desde arriba, así que crecer sólo empuja hacia abajo. */

/* EL ANCHO. El runtime envuelve al componente en un div .sc-host, y ese host es hijo de un flex
 * en columna con align-items: center. Un hijo flex así NO SE ESTIRA: se encoge a su contenido.
 * Por eso el ancho del chat seguía a lo que hubiera adentro — 354 px con el input, 330 con los
 * chips, 288 mientras escribía— aunque el chat declare width: 100%: el 100% era de un padre que
 * cambiaba de tamaño.
 *
 * De yapa, eso hacía que el chat SE SALIERA 24 px de su contenedor real (330) en el estado
 * inicial, sin que ningún chequeo lo marcara porque no llegaba a desbordar el viewport.
 *
 * Se aisló volcando la cadena de ancestros DENTRO de las condiciones del gate: medida en una
 * carga limpia daba 354 estable y no se veía nada. Medir afuera de donde aparece el bug fue el
 * error de las tres veces anteriores.
 *
 * :has() para alcanzar al host sin tocar los demás componentes de la página. */
.sc-host:has(.upran-chat) {
  align-self: stretch;
  width: 100%;
}

/* ── El pie se pega al fondo de la pantalla ─────────────────────────────────
 * Cuando el chat crece más que el viewport, el control quedaba debajo del pliegue y había que
 * scrollear para escribir. Con sticky se pega al fondo mientras el final del chat está fuera de
 * pantalla, y se despega solo cuando vuelve a entrar.
 *
 * DOS COSAS TUVIERON QUE CAMBIAR PARA QUE EL STICKY EXISTA:
 *
 * 1. El `overflow: hidden` inline de la ventana. Un ancestro con overflow distinto de visible se
 *    vuelve contenedor de scroll, y el sticky pasa a pegarse a ÉL en vez de al viewport. Como ese
 *    overflow era lo único que recortaba las esquinas redondeadas, el radio pasa a la cabecera y
 *    al pie por separado: mismo resultado visual, sin contenedor de scroll.
 * 2. Superficie sólida y separación. Las burbujas pasan POR DETRÁS del pie al scrollear, así que
 *    sin fondo opaco se leerían encimadas. Fondo --s0 (el que ya tenía), el borde superior que ya
 *    traía, y una sombra suave hacia arriba para despegarlo del hilo. */
.upran-chat {
  overflow: visible !important;
}

.upran-chat > div:first-child {
  border-radius: 12px 12px 0 0;
}

.upran-chat > div:last-child {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 -6px 14px -8px rgba(0, 0, 0, 0.28);
}

/* El pie no puede colapsar. Mientras llega la respuesta el input se oculta, y sin reserva el
 * bloque perdía 58 px: la ventana se achicaba y volvía a crecer, un cabeceo en cada paso. Con la
 * reserva el alto sólo sube, que es lo que pide el gate. Los chips son más altos y la superan
 * sin problema; esto es un piso, no un techo. */
.upran-chat > div:last-child {
  min-height: 128px;
  box-sizing: border-box;
}

/* La transición del alto la escribe el componente inline al medir. Acá sólo se declara que con
 * movimiento reducido no hay ninguna: crecer() ni siquiera entra en ese caso, esto es el segundo
 * cinturón por si alguna vez se anima el alto desde CSS. */
@media (prefers-reduced-motion: reduce) {
  .upran-chat { transition: none !important; }
}

/* El hilo vuelve a mostrar todo. La ventana conserva su `overflow: hidden` inline —es lo que
 * recorta las esquinas redondeadas— y eso NO produce barra: hidden nunca la dibuja. Igual el
 * gate compara scrollWidth con clientWidth en los dos, que es la prueba de que tampoco hay
 * contenido escondido detrás del recorte. */
.upran-chat-hilo {
  overflow: visible;
  /* El componente trae min-height: 210px inline, pensado para cuando el hilo tenía alto fijo.
   * Con una sola burbuja eso dejaba un hueco grande entre el saludo y el campo: el chat abría
   * mucho más alto de lo que su contenido pedía.
   *
   * Ahora la ventana crece sola con cada respuesta y el piso pegajoso impide que se achique, así
   * que el mínimo grande no cumple ninguna función — sólo agrega vacío en el momento en que la
   * pieza tiene que verse liviana, que es cuando alguien recién la mira.
   *
   * 96px es lo que ocupa una burbuja con su avatar y el aire de arriba y abajo: abre compacto y
   * crece desde ahí. */
  min-height: 96px !important;
}

/* ── Puntos del indicador ───────────────────────────────────────────────────
 * Los tres <span> del componente vienen vacíos: acá se les da cuerpo y ritmo. Sin esto el
 * indicador es una burbuja vacía — se detectó al revisar, no al mirar la captura.
 *
 * SIN !important en la animación, a propósito: la regla global de reduced-motion es
 * `* { animation-duration: 0.01ms !important }` y entre dos !important gana la especificidad.
 * Con !important acá, .upran-escribiendo span (0,1,0) le ganaría a `*` (0,0,0) y los puntos
 * seguirían latiendo con movimiento reducido. Es la trampa que este repo ya pisó cuatro veces
 * —panel del menú, toggle de tema, marquee de logos— y que la propia ESPEC-12 dejó anotada
 * para este punto exacto.
 *
 * De todos modos, con movimiento reducido el componente ni siquiera dibuja el indicador: el
 * beat es 0 y las respuestas aparecen instantáneas. Esto es el segundo cinturón. */
.upran-escribiendo span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
  animation: upran-puntito 1.2s ease-in-out infinite;
}

/* Los delays escalonados son lo que convierte tres puntos en una onda. La regla global de
 * reduced-motion NO resetea los delays —sólo las duraciones—, pero acá no hace falta reponerlos:
 * con duración colapsada los tres quedan quietos en su estado final igual. */
.upran-escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.upran-escribiendo span:nth-child(3) { animation-delay: 0.3s; }

@keyframes upran-puntito {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}