/* pbc-mchat: lista de chats en móvil, con los valores del HTML que dio ChatGPT
   para esta pantalla (prefijo pbc-mchat-, maqueta 13/08/2026).

   El HTML de ChatGPT es una pantalla suelta con su propio marcado; aquí la
   pantalla ya existe y la comparte el escritorio (panel doble tipo WhatsApp
   Web), así que los valores del diseño (colores, redondeos, tamaños, sombras)
   se aplican sobre el marcado que ya hay y SOLO en móvil. Lo que ChatGPT
   dibuja nuevo (las cabeceras "Grupos" y "Personales") sí lleva sus clases
   pbc-mchat- tal cual.

   La cabecera azul del HTML de ChatGPT NO se aplica: en móvil la cabecera
   blanca con "Chat" es la que Guille aprobó el 13/08/2026. */

/* Las cabeceras "Grupos" y "Personales" se quitaron el 14/08/2026 (Guille): no
   se podían pulsar y repetían las pestañas de arriba. La lista empieza ya en el
   primer chat, como WhatsApp. Su estilo se fue con ellas. */

@media (max-width: 767.98px) {
  /* Fondo gris azulado de la maqueta, y aire entre las tarjetas. */
  body.cwa-body .cwa-page,
  body.cwa-body .cwa-panel { background: #eef4f8; }

  /* Buscador: pastilla blanca con sombra, no el gris de WhatsApp. */
  body.cwa-body .cwa-tools { padding: .55rem 16px .35rem; }
  body.cwa-body .cwa-search {
    height: 52px;
    gap: 11px;
    padding: 0 16px;
    color: #718397;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 49, 96, .18);
  }
  /* 16px a proposito: por debajo, el iPhone amplia la pantalla al tocar el
     buscador y se queda asi (Bruce, 18/08/2026). Ver pbc-mconver.css. */
  body.cwa-body .cwa-search input {
    font-size: 16px;
    font-weight: 650;
    color: #15263b;
  }

  body.cwa-body .cwa-chips { padding: .6rem 16px .5rem; }

  /* Cada bloque (Grupos / Personales) es una tarjeta blanca redondeada. */
  body.cwa-body .cwa-list {
    overflow: hidden;
    margin: 0 16px;
    background: #ffffff;
    border: 1px solid rgba(198, 214, 225, .52);
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(31, 63, 89, .09);
  }

  /* Filas más altas y con más aire, como el patrón grandote de la ficha. */
  body.cwa-body .cwa-row {
    min-height: 84px;
    gap: 12px;
    padding: 12px 15px;
  }
  body.cwa-body .cwa-row + .cwa-row .cwa-mid { border-top: 0; }
  body.cwa-body .cwa-row + .cwa-row::before {
    content: "";
    position: absolute;
    top: 0;
    right: 15px;
    left: 85px;
    height: 1px;
    background: #e5edf3;
  }
  body.cwa-body .cwa-list li { position: relative; }
  body.cwa-body .cwa-row:active { background: #f3f9fd; }

  /* Foto redonda con aro blanco, también en las salas: en la maqueta todas las
     filas llevan el mismo círculo. La chapita de dos personitas sigue diciendo
     cuál es una sala. */
  body.cwa-body .cwa-ava,
  body.cwa-body .cwa-row[data-kind="group"] .cwa-ava {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #dbe8f1, 0 5px 12px rgba(24, 67, 101, .16);
  }
  body.cwa-body .cwa-row[data-kind="group"] .cwa-ava { background: #e9f1fe; }
  body.cwa-body .cwa-ava img { width: 52px !important; height: 52px !important; }

  body.cwa-body .cwa-name {
    font-size: 16px;
    font-weight: 850;
    color: #15263b;
  }
  body.cwa-body .cwa-snip {
    font-size: 13.5px;
    font-weight: 550;
    color: #6c7c8e;
  }
  body.cwa-body .cwa-row.has-unread .cwa-snip { color: #405368; font-weight: 700; }
  body.cwa-body .cwa-when {
    font-size: 11px;
    font-weight: 750;
    color: #7e8c9c;
  }
  body.cwa-body .cwa-row.has-unread .cwa-when { color: #086bc9; }

  /* Globo de mensajes sin leer: ROJO, como pidió Guille y como está en la
     maqueta. Antes era azul y se confundía con la hora. */
  body.cwa-body .cwa-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #e4474f;
    border: 2px solid #ffffff;
    border-radius: 11px;
    box-shadow: 0 3px 8px rgba(186, 35, 43, .24);
    font-size: 11px;
    font-weight: 900;
  }

  /* Arroba de "te han nombrado", justo a la izquierda de la bolita (como
     WhatsApp). AZUL, el mismo de los avisos del chat de la app, no el rojo de
     la bolita (Guille 24/08/2026). */
  body.cwa-body .cwa-at {
    color: #086bc9;
    font-size: 15px;
    font-weight: 900;
    margin-right: 3px;
  }

  /* "Descubrir más salas" y el cartel de invitado, al mismo margen que las
     tarjetas. */
  body.cwa-body .cwa-disc { margin: 1.2rem 16px 0; }
  body.cwa-body .cwa-guest { margin: .1rem 16px .55rem; }
  body.cwa-body .cwa-pending { margin: 0 16px .6rem; border-bottom: 0;
    background: #ffffff; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(31, 63, 89, .09); }
}