/* ============================================================================
 * EL CHAT — la hoja compartida. Fase 1, 28 de agosto de 2026.
 *
 * La cargan las TRES páginas: app/socio.html, panel/crm.html y
 * panel/espejo.html. Va en un archivo aparte y no dentro de cada una por la
 * lección que este proyecto ya pagó con `.mc-back`: una clase que usan varias
 * pantallas metida en la hoja de UNA sale rota en las otras, y el que la rompe
 * no se entera porque su pantalla se ve bien.
 *
 * NO DEFINE NI UN COLOR PROPIO. Todo sale de los tokens `--laca`, `--papel`,
 * `--tinta`, `--gris`, `--linea`, `--rojo` y `--rojo-tinte`, que las tres
 * páginas ya declaran con los mismos nombres. Así el chat se ve del color de
 * la página que lo abre —incluido su modo oscuro— sin saber en cuál está. Los
 * `var(--x, respaldo)` son por si algún día lo carga una página que no los
 * tenga: se vería sobrio, no roto.
 * ==========================================================================*/

/* --- el hilo ------------------------------------------------------------ */
.ch-hilo{
  display:flex; flex-direction:column; gap:4px;
  padding:6px 2px 10px; overflow-y:auto; overscroll-behavior:contain;
}

.ch-dia{
  display:flex; align-items:center; gap:10px;
  margin:14px 0 8px; color:var(--gris,#7A7066); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.08em;
}
.ch-dia::before,.ch-dia::after{
  content:""; flex:1; height:1px; background:var(--linea,#E6E0D8);
}
.ch-dia span{flex:none}

.ch-msg{display:flex; margin-bottom:3px}
.ch-mio{justify-content:flex-end}
.ch-suyo{justify-content:flex-start}

.ch-burbuja{
  max-width:min(78%,34rem);
  padding:9px 13px 7px;
  border-radius:15px;
  font-size:15px; line-height:1.45;
  border:1px solid var(--linea,#E6E0D8);
  background:var(--papel,#FFFFFF);
  color:var(--tinta,#111111);
  /* La sombra es de la casa: 1px de apoyo, nada de flotar. */
  box-shadow:0 1px 1px rgba(0,0,0,.04);
}
/* Lo propio va en la marca. El borde es del mismo rojo para que la burbuja no
   parezca dos cosas pegadas. */
.ch-mio .ch-burbuja{
  background:var(--rojo,#D81F26); border-color:var(--rojo,#D81F26); color:#fff;
  border-bottom-right-radius:5px;
}
.ch-suyo .ch-burbuja{border-bottom-left-radius:5px}

/* Lo automático NO se pinta como lo que escribió una persona. Es la señal
   visual de la promesa: el cliente sabe cuándo le contestó una máquina. */
.ch-esauto .ch-burbuja{
  background:var(--rojo-tinte,#FCF4F2);
  border-color:var(--rojo,#D81F26);
  border-style:dashed;
  color:var(--tinta,#111111);
}
.ch-auto{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--rojo,#D81F26); margin-bottom:3px; font-weight:600;
}

.ch-texto{white-space:pre-wrap; word-break:break-word}

.ch-pie{
  display:flex; justify-content:flex-end; align-items:center; gap:7px;
  margin-top:3px; font-size:11px; opacity:.72;
  font-variant-numeric:tabular-nums;
}
.ch-mio .ch-pie{color:rgba(255,255,255,.92)}
.ch-visto::before{content:"✓✓ "}

.ch-vacio{
  padding:26px 18px; text-align:center;
  color:var(--gris,#7A7066); font-size:14px; line-height:1.5;
}

/* --- lo que se escribe -------------------------------------------------- */
.ch-escribir{
  display:flex; gap:8px; align-items:flex-end;
  padding-top:10px; border-top:1px solid var(--linea,#E6E0D8);
}
.ch-escribir textarea{
  flex:1; resize:none; min-height:44px; max-height:130px;
  padding:11px 13px; border-radius:12px;
  border:1px solid var(--linea,#E6E0D8);
  background:var(--papel,#FFFFFF); color:var(--tinta,#111111);
  /* 16px EXACTOS, y no es estética: por debajo de 16, Safari en iOS hace zoom
     solo al enfocar el campo — y no se deshace. Este selector (0-1-1) le ganaba
     por especificidad a la regla de 16px del espejo, así que era el ÚNICO sitio
     de la pantalla donde pasaba, y justo el sitio donde Joan le escribe a un
     cliente. 23-sep-2026. */
  font:inherit; font-size:16px; line-height:1.4;
}
.ch-escribir textarea:focus{outline:2px solid var(--rojo,#D81F26); outline-offset:1px}
/* El botón de enviar NO se estira, aunque la página declare `.btn{width:100%}`
   — que es justo lo que hace espejo.html, donde todos los botones son de pulgar
   y ocupan la fila entera. Acá tiene que caber al lado del texto. */
.ch-escribir > button{flex:none; width:auto; min-width:5.5rem; margin:0}
.ch-cuenta{
  font-size:11px; color:var(--gris,#7A7066); text-align:right;
  margin-top:4px; font-variant-numeric:tabular-nums;
}
.ch-cuenta.ch-pasado{color:var(--rojo,#D81F26); font-weight:600}

/* --- la bandeja de Joan ------------------------------------------------- */
.ch-lista{display:flex; flex-direction:column}
.ch-conv{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  width:100%; text-align:left; padding:13px 6px;
  background:none; border:0; border-bottom:1px solid var(--linea,#E6E0D8);
  color:var(--tinta,#111111); font:inherit; cursor:pointer;
}
.ch-conv:hover{background:var(--fondo,#F6F3F0)}
.ch-conv:focus-visible{outline:2px solid var(--rojo,#D81F26); outline-offset:-2px}
.ch-conv-quien{
  display:flex; align-items:center; gap:8px;
  font-weight:600; font-size:15px; grid-column:1;
}
.ch-conv-ultimo{
  grid-column:1; color:var(--gris,#7A7066); font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.ch-conv-cuando{
  grid-column:2; grid-row:1; color:var(--gris,#7A7066); font-size:12px;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* Sin leer: el número, no un punto. Cuántos faltan es lo que decide si abres. */
.ch-sinleer{
  display:inline-grid; place-items:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:10px;
  background:var(--rojo,#D81F26); color:#fff;
  font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.ch-pend .ch-conv-ultimo{color:var(--tinta,#111111)}

@media (prefers-reduced-motion:no-preference){
  .ch-conv{transition:background .12s}
}

/* ===========================================================================
   LA FOTO EN EL CHAT — 22-sep-2026
   Joan: «este chat tambien quiero que se puedan enviar imagenes».

   Lo que se ve es la MINIATURA que hizo el telefono al mandarla (240 px, unos
   6 KB). La grande se pide solo al tocarla: si el hilo bajara la grande, abrir
   una conversacion de veinte mensajes serian dos megas cada vez, con los datos
   del cliente.

   El boton no parece un boton: es la foto. Un marco alrededor de una imagen
   pequeña la hace mas pequeña todavia.
   ========================================================================= */
.ch-foto{display:block;padding:0;margin:0 0 6px;border:0;background:none;cursor:pointer;
  border-radius:10px;overflow:hidden;max-width:220px;line-height:0}
.ch-foto img{display:block;width:100%;height:auto;border-radius:10px}
.ch-foto:disabled{cursor:default}
/* Si la miniatura no llego, se dice que hay un adjunto en vez de dejar un
   hueco: un hueco se lee como un fallo de la pantalla. */
.ch-foto-sin{display:inline-block;padding:10px 12px;border-radius:10px;font-size:13px;
  line-height:1.2;background:rgba(127,127,127,.14)}
.ch-foto:focus-visible{outline:2px solid currentColor;outline-offset:2px}