/*
 * Pantalla única: avatar arriba, conversación en medio, botón grande abajo.
 *
 * Todo está pensado para usarse con un dedo y sin mirar mucho: fuente grande,
 * alto contraste y un botón que no se puede fallar (`docs/04`).
 */

:root {
  --acento: #4f7cff;
  --fondo: #f5f6f8;
  --papel: #ffffff;
  --texto: #14181f;
  --suave: #5d6875;
  --borde: #e2e6ec;
  --tu: #e8ebf0;
  --escuchando: #1d8a4e;
  --pensando: #b8730a;
  --error: #d1373f;
  --alto-boton: 88px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1216;
    --papel: #171b21;
    --texto: #eef1f5;
    --suave: #9aa5b2;
    --borde: #262c35;
    --tu: #232932;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  /* Cuatro filas, una por hijo visible: cabecera, avatar, conversación y pie.
     La conversación es la única que encoge y crece; el resto ocupa lo suyo.
     Cuidado al tocar esto: el <audio> también es hijo del grid y, si el número
     de filas no cuadra, se lleva la fila flexible y la conversación desborda
     por encima del avatar. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 4px;
}

h1 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--suave);
}

#usuario {
  font: inherit;
  font-size: 15px;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--suave);
  cursor: pointer;
}

#avatar-hueco {
  display: grid;
  place-items: center;
  padding: 4px 0 10px;
}

/* Fuera del flujo del grid: es un reproductor sin interfaz, no una fila. */
#voz {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

#avatar {
  width: clamp(130px, 30vh, 190px);
  height: auto;
  display: block;
}

/* Los tres puntos solo aparecen mientras piensa. */
#avatar[data-estado="thinking"] #pensando { opacity: 1; }
#avatar[data-estado="thinking"] #pensando circle {
  animation: saltar 1s infinite ease-in-out;
}
#avatar[data-estado="thinking"] #pensando circle:nth-child(2) { animation-delay: .15s; }
#avatar[data-estado="thinking"] #pensando circle:nth-child(3) { animation-delay: .3s; }

@keyframes saltar {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

#avatar[data-estado="locked"] #candado { opacity: 1; }
#avatar[data-estado="listening"] #anillo { stroke-opacity: .8; }
#avatar:not([data-estado="listening"]) #anillo { stroke-opacity: 0; }
#avatar[data-estado="error"] #cejas { transform: translateY(4px) rotate(-4deg); transform-origin: 50px 38px; }

#avatar #anillo,
#avatar #cejas,
#avatar #candado,
#avatar #pensando {
  transition: stroke-opacity .3s, opacity .3s, transform .3s;
}

#conversacion {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.burbuja {
  max-width: min(86%, 540px);
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--papel);
  border: 1px solid var(--borde);
  animation: aparecer .25s ease-out;
}

.burbuja.tu {
  align-self: flex-end;
  background: var(--tu);
  border-color: transparent;
  border-bottom-right-radius: 5px;
}

.burbuja.memo {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  border-left: 3px solid var(--acento);
}

.burbuja[data-provisional="true"] { opacity: .55; }

.quien {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--suave);
  margin-bottom: 2px;
}

.texto {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

footer {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 16px 18px;
}

#boton {
  width: var(--alto-boton);
  height: var(--alto-boton);
  border-radius: 50%;
  border: none;
  background: var(--acento);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18);
  transition: background .2s, transform .1s;
  /* Sin esto, mantener pulsado en móvil abre el menú del sistema. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#boton:active { transform: scale(.95); }
#boton:disabled { cursor: progress; }

/* El color del botón dice en qué estado está sin tener que leer nada. */
body[data-estado="listening"] #boton { background: var(--escuchando); }
body[data-estado="thinking"] #boton { background: var(--pensando); }
body[data-estado="error"] #boton { background: var(--error); }
body[data-estado="locked"] #boton { background: var(--suave); }

body[data-estado="listening"] #boton {
  animation: latir 1.4s infinite ease-in-out;
}

@keyframes latir {
  0%, 100% { box-shadow: 0 6px 20px rgb(0 0 0 / .18), 0 0 0 0 rgb(29 138 78 / .45); }
  70% { box-shadow: 0 6px 20px rgb(0 0 0 / .18), 0 0 0 18px rgb(29 138 78 / 0); }
}

#pie {
  margin: 0;
  font-size: 14px;
  color: var(--suave);
  min-height: 1.4em;
}

#activacion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--suave);
  cursor: pointer;
}

#activacion input {
  width: 18px;
  height: 18px;
  accent-color: var(--acento);
}

/* Quien pide menos movimiento conserva lo que informa (la boca) y pierde lo
   decorativo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (min-width: 720px) {
  body { --alto-boton: 96px; font-size: 18px; }
  #conversacion { align-items: center; }
  .burbuja { width: 100%; max-width: 620px; }
  .burbuja.tu { align-self: center; }
  .burbuja.memo { align-self: center; }
}