/* El chat del asistente de instalación (spec 2026-10-07, §1.4). Cabecera y
   compositor flotan; el hilo se desplaza entre los dos. */
body.tablet--asistente { padding: 0; }
body.tablet--asistente .asistente { min-height: 100dvh; display: flex; flex-direction: column; }

/* Mismo patrón que la cabecera del catálogo (20-shell.css): píldora que flota
   con su propio renglón en el flujo, separada de la barra de estado del iPad
   por el área segura. Sin `env(safe-area-inset-top)` el título quedaba
   encimado sobre la hora y la batería. */
body.tablet--asistente .asistente {
  --borde-izq: calc(var(--margen) + env(safe-area-inset-left));
  --borde-der: calc(var(--margen) + env(safe-area-inset-right));
  padding-top: calc(var(--margen) + env(safe-area-inset-top));
}
body.tablet--asistente .asistente__cabecera {
  position: sticky; top: calc(var(--margen) + env(safe-area-inset-top)); z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 20px; margin-inline: var(--borde-izq) var(--borde-der);
  border-radius: var(--radio-tarjeta);
}
body.tablet--asistente .asistente__titulo { display: flex; align-items: center; gap: 12px; }
body.tablet--asistente .asistente__titulo h1 { margin: 0; font-size: 20px; font-weight: 500; color: var(--tinta-1); }
body.tablet--asistente .asistente__titulo small { color: var(--tinta-2); }
body.tablet--asistente .asistente__acciones { display: flex; align-items: center; gap: 12px; }
body.tablet--asistente .asistente__formulario { color: var(--tinta-2); text-decoration: underline; font-size: 15px; }

body.tablet--asistente .hilo { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px; max-width: 860px; width: 100%; margin: 0 auto; }
/* El compositor flota encima: el fondo del hilo le deja su alto para que lo
   último (chips, «Bautizar») nunca quede tapado. */
body.tablet--asistente .hilo { padding-bottom: calc(var(--control) + 48px + var(--margen) + env(safe-area-inset-bottom)); }
body.tablet--asistente .burbuja {
  max-width: 78%; padding: 12px 16px; border-radius: var(--radio-tarjeta); margin: 0;
  background: var(--vidrio-1); border: 1px solid var(--vidrio-borde); box-shadow: var(--vidrio-relieve);
  color: var(--tinta-1); font-size: 17px; line-height: 1.4; white-space: pre-wrap;
}
body.tablet--asistente .burbuja--user { align-self: flex-end; background: var(--solido); color: var(--solido-tinta); border-color: transparent; }
body.tablet--asistente .burbuja--assistant { align-self: flex-start; }
body.tablet--asistente .burbuja--en-curso { opacity: .85; }
body.tablet--asistente .burbuja--pensando { display: inline-flex; gap: 6px; padding: 14px 18px; }
body.tablet--asistente .burbuja--pensando span { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); animation: pensando 1.2s infinite; }
body.tablet--asistente .burbuja--pensando span:nth-child(2) { animation-delay: .2s; }
body.tablet--asistente .burbuja--pensando span:nth-child(3) { animation-delay: .4s; }
@keyframes pensando { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

body.tablet--asistente .nota { align-self: center; margin: 0; color: var(--tinta-2); font-size: 14px; text-align: center; }
body.tablet--asistente .escalada { align-self: center; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--vidrio-2); color: var(--tinta-1); font-size: 15px; }

body.tablet--asistente .chips--asistente { display: flex; flex-wrap: wrap; gap: 10px; align-self: flex-start; max-width: 78%; }
/* Anula lo que hereda de la fila de chips del shell (20-shell.css): aquí las
   opciones se envuelven en renglones y pueden ser frases largas. */
body.tablet--asistente .chips--asistente { margin: 0; overflow: visible; }
body.tablet--asistente .chips--asistente .chip { white-space: normal; height: auto; min-height: var(--control); padding-block: 8px; text-align: left; }
body.tablet--asistente .chips__forma { display: contents; }
body.tablet--asistente .chips--asistente .chip[disabled] { opacity: .45; }

body.tablet--asistente .tarjeta { align-self: flex-start; width: min(100%, 520px); display: grid; gap: 12px; }
body.tablet--asistente .tarjeta h2 { margin: 0; font-size: 18px; font-weight: 500; color: var(--tinta-1); }
body.tablet--asistente .tarjeta dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
body.tablet--asistente .tarjeta dt { color: var(--tinta-2); font-size: 15px; }
body.tablet--asistente .tarjeta dd { margin: 0; color: var(--tinta-1); font-size: 17px; font-weight: 500; }
body.tablet--asistente .tarjeta--hecha { opacity: .6; }
body.tablet--asistente .tarjeta__forma { display: contents; }
body.tablet--asistente .tarjeta__boton { width: 100%; }
/* El cierre: la pregunta, el «sí» a todo lo ancho y los «no» como chips. La
   validada no se apaga como las demás: es la buena noticia del cierre. */
body.tablet--asistente .confirmacion p { margin: 0; color: var(--tinta-2); font-size: 15px; }
body.tablet--asistente .confirmacion .chips--asistente { max-width: 100%; }
body.tablet--asistente .confirmacion.tarjeta--hecha:has(a) { opacity: 1; }

body.tablet--asistente .compositor { position: sticky; bottom: calc(var(--margen) + env(safe-area-inset-bottom)); z-index: 2; padding: 12px 20px; margin: 0 var(--borde-der) calc(var(--margen) + env(safe-area-inset-bottom)) var(--borde-izq); border-radius: var(--radio-tarjeta); }
body.tablet--asistente .compositor__forma { display: flex; gap: 12px; max-width: 860px; margin: 0 auto; align-items: flex-end; }
body.tablet--asistente .compositor__texto { flex: 1; resize: none; min-height: var(--control); max-height: 160px; }
body.tablet--asistente .compositor__cerrado { max-width: 860px; margin: 0 auto; color: var(--tinta-2); font-size: 15px; text-align: center; }

/* La transcripción de solo lectura en la consola de HQ (spec 2026-10-07, §1.8).
   Las mismas burbujas y notas del hilo, sin el prefijo de la tablet; los tokens
   son los de la consola porque los de la tablet viven bajo `body.tablet`. */
.hilo--lectura { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.hilo--lectura .burbuja {
  max-width: 78%; padding: 12px 16px; border-radius: var(--radius-m); margin: 0;
  background: var(--color-bg-2); border: 1px solid var(--color-line);
  color: var(--color-ink); font-size: 17px; line-height: 1.4; white-space: pre-wrap;
}
.hilo--lectura .burbuja--user { justify-self: end; background: var(--color-brand); color: #fff; border-color: transparent; }
.hilo--lectura .burbuja--assistant { justify-self: start; }
.hilo--lectura .nota { justify-self: center; margin: 0; color: var(--color-ink-2); font-size: 14px; text-align: center; }