/* Lista de conversaciones del chat. Extraido de templates/community_wa.html el
   14/08/2026: 14 KB de estilos iban DENTRO del HTML, asi que el navegador se los
   volvia a bajar y a leer cada vez que se volvia a la lista (Guille: "volver atras
   desde un grupo tarda mucho"). El <link> queda donde estaba el <style>, para que
   el orden de la cascada no cambie. */
  /* Cabecera azul (la navbar v2 transparente se lee encima) y panel blanco
     centrado tipo app, mismo ancho que la sala (760px). */
  .cwa-hero { background: hsl(var(--primary)); padding: 4.6rem 1rem 0; }
  .cwa-hero-in { max-width: 760px; margin: 0 auto; color: hsl(var(--pbc-on-color)); padding: .3rem 0 .75rem;
    display: flex; align-items: center; gap: .6rem; }
  .cwa-hero h1 { font-family: var(--pbc-font); font-weight: var(--pbc-weight-bold); font-size: 1.5rem; margin: 0;
    flex: 1; min-width: 0; }
  /* Los tres puntitos abren el MISMO menú de la web (el de la hamburguesa): así
     quitamos la barra azul de arriba sin perder idioma, compartir ni perfil.
     En escritorio no hacen falta: allí la barra de la web sigue puesta. */
  .cwa-more { display: none; background: none; border: none; color: hsl(var(--pbc-ink));
    padding: .3rem; border-radius: 10px; cursor: pointer; line-height: 0; }
  .cwa-more:hover { background: hsl(var(--pbc-page)); }

  /* ===== Móvil: la CABECERA ÚNICA de la app (Guille, 14/08/2026) =====
     Antes aquí había una cabecera blanca con "Chat" en negro (maqueta del
     13/08). Guille pidió que la cabecera azul sea IDÉNTICA en todas las
     pantallas, así que la pinta includes/mobile_topbar.html y esta se esconde
     entera en móvil. Los tres puntitos (menú de la web) se quedan solo en
     escritorio: en móvil ya están la campana, la ayuda y la foto de la cabecera
     única, más la barra de abajo. */
  @media (max-width: 767.98px) {
    .cwa-hero { display: none !important; }
    /*Se esconde SOLO la barra visible (el contenedor de dentro de la
       navbar). La navbar en sí se queda: dentro viven el panel deslizante del menú
       y su fondo oscuro, que son los que abren los tres puntitos.*/
    body.cwa-body .navbar > .container { display: none !important; }
    body.cwa-body .navbar { background: none !important; box-shadow: none !important;
      position: static !important; height: 0 !important; min-height: 0 !important; }
    /* Blanco con un pelín de gris, como la maqueta: la pantalla respira y las
       tarjetas de bandera no se pierden sobre blanco puro. */
    .cwa-page, .cwa-panel { background: #fbfcfd; }
    /* Raya de separación algo más visible que en escritorio: en el móvil de
       Guille las filas se leían pegadas, sin línea entre una y otra. */
    .cwa-row + .cwa-row .cwa-mid { border-top-color: #e8ecf2; }
    .cwa-row { padding: .7rem .9rem; }
  }
  .cwa-page { background: hsl(var(--pbc-page)); min-height: 60vh; padding-bottom: 3rem; }
  .cwa-panel { max-width: 760px; margin: 0 auto; background: hsl(var(--pbc-surface)); min-height: 70vh;
    padding-bottom: 5.5rem; position: relative; }
  @media (min-width: 800px) {
    .cwa-panel { border-left: 1px solid hsl(var(--pbc-line-soft)); border-right: 1px solid hsl(var(--pbc-line-soft)); }
  }

  /* Buscador y filtros, pegados arriba como WhatsApp. */
  .cwa-tools { padding: .7rem .9rem .5rem; display: flex; align-items: center; gap: .5rem; }
  .cwa-tools .cwa-search { flex: 1; min-width: 0; }
  /* Nuevo grupo (16/09/2026): al lado del buscador, en móvil y escritorio. */
  .cwa-newgroup { display: flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; border-radius: 12px; background: hsl(var(--pbc-page));
    color: hsl(var(--pbc-ink)); text-decoration: none; }
  .cwa-newgroup:hover { filter: brightness(.96); }
  .cwa-newgroup .dm-ic { width: 22px; height: 22px; stroke: currentColor; fill: none;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .cwa-search { display: flex; align-items: center; gap: .5rem; background: hsl(var(--pbc-page));
    border-radius: 12px; padding: .55rem .9rem; }
  .cwa-search input { flex: 1; border: none; background: transparent; font-size: 1rem;
    font-family: inherit; }
  .cwa-search input:focus { outline: none; }
  .cwa-search .lupa { color: hsl(var(--pbc-muted)); font-size: .95rem; }
  .cwa-chips { display: flex; gap: .45rem; padding: .6rem .9rem .5rem; overflow-x: auto;
    scrollbar-width: none; }
  .cwa-chips::-webkit-scrollbar { display: none; }
  .cwa-chip { border: none; background: hsl(var(--pbc-page)); color: hsl(var(--pbc-ink-soft)); border-radius: 999px;
    padding: .38rem .85rem; font-size: .84rem; font-weight: 700; cursor: pointer;
    white-space: nowrap; font-family: inherit; }
  .cwa-chip.on { background: #d9e9ff; color: hsl(var(--primary)); }
  /* Numerito dentro del chip, como WhatsApp ("No leídos 10"). */
  .cwa-chip .n { margin-left: .3rem; font-weight: 400; opacity: .85; }
  /* Cartel del invitado: dice en una línea qué puede hacer aquí y dónde está la
     puerta. Va debajo de las pestañas, encima de la lista. */
  .cwa-guest { display: flex; align-items: center; gap: .6rem; margin: .1rem .9rem .55rem;
               padding: .6rem .75rem; border-radius: .75rem; background: hsl(var(--pbc-blue-soft));
               color: #22405c; font-size: .88rem; line-height: 1.3; }
  .cwa-guest .txt { flex: 1 1 auto; }
  .cwa-guest .go { flex: 0 0 auto; background: hsl(var(--primary)); color: hsl(var(--pbc-on-color));
                   border-radius: 999px; padding: .4rem .85rem; font-weight: 600;
                   text-decoration: none; white-space: nowrap; }
  .cwa-guest .go:hover { filter: brightness(1.06); }

  /* Fila de solicitudes pendientes, arriba del todo. Como la fila "Archivados"
     de WhatsApp: una fila más de la lista, sin banda de color, con el icono en
     el hueco de la foto y el numerito azul a la derecha. */
  .cwa-pending { display: flex; align-items: center; gap: .8rem; padding: .62rem .9rem;
    text-decoration: none; border-bottom: 1px solid hsl(var(--pbc-page)); }
  .cwa-pending:hover { background: #f5f6f6; }
  .cwa-pending .ico { width: 50px; height: 50px; border-radius: 50%; background: hsl(var(--pbc-blue-soft));
    color: hsl(var(--primary)); display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex: 0 0 50px; }
  .cwa-pending .tt { flex: 1; min-width: 0; }
  .cwa-pending .tt .t1 { font-weight: 700; color: #111b21; font-size: .98rem; }
  .cwa-pending .tt .t2 { font-size: .86rem; color: hsl(var(--pbc-muted)); margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cwa-pending .n { background: hsl(var(--primary)); color: hsl(var(--pbc-on-color)); border-radius: 999px;
    min-width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center;
    justify-content: center; font-size: .75rem; font-weight: 700; padding: 0 .3rem;
    flex: 0 0 auto; }

  /* Filas de conversación, como la lista de chats de WhatsApp. */
  .cwa-list { list-style: none; margin: 0; padding: 0; }
  /* El chat tardaba MUCHO en abrirse (Guille, 13/08/2026). Medido: 4,3 s en
     ordenador, de los cuales 2,3 s eran el navegador colocando 14.500 trozos de
     página, casi todos fuera de la pantalla. Con esto el navegador solo dibuja
     las filas que se ven y va dibujando el resto al bajar; la altura de reserva
     es la de una fila, para que la barra de scroll no dé saltos. La lista sigue
     ENTERA en la página: el buscador y los filtros la ven igual que antes. */
  .cwa-list > li { content-visibility: auto; contain-intrinsic-size: auto 68px; }
  .cwa-row { display: flex; align-items: center; gap: .8rem; padding: .62rem .9rem;
    text-decoration: none; }
  .cwa-row:hover { background: #f5f6f6; }
  .cwa-row + .cwa-row .cwa-mid { border-top: 1px solid hsl(var(--pbc-page)); }
  .cwa-ava { width: 50px; height: 50px; border-radius: 50%; flex: 0 0 50px; position: relative;
    background: hsl(var(--pbc-blue-soft)); display: flex; align-items: center; justify-content: center; }
  .cwa-ava img { width: 50px !important; height: 50px !important; border-radius: 50%;
    object-fit: cover; display: block; }
  .cwa-ava .ini { font-weight: 700; font-size: 1.15rem; color: hsl(var(--primary)); }
  .cwa-ava .emoji { font-size: 1.5rem; }
  /* Dos banderas en diagonal para las salas de idiomas. */
  .cwa-ava .fi { position: absolute; font-size: 1.15rem; border-radius: 4px; }
  .cwa-ava .fa { top: 8px; left: 7px; }
  .cwa-ava .fb { bottom: 8px; right: 7px; }
  .cwa-ava .dot { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px;
    border-radius: 50%; background: #25d366; border: 2px solid hsl(var(--pbc-surface)); }
  /* Grupo = cuadradito azul claro con sus dos banderas; persona = círculo (con su
     marco de rango si lo tiene). Así se distingue el tipo de chat antes de leer el
     nombre (maqueta aprobada 13/08/2026). */
  .cwa-row[data-kind="group"] .cwa-ava { border-radius: 14px; background: hsl(var(--pbc-blue-soft)); }
  /* El circulito con marco de rango ya trae su propio tamaño y su aro: aquí solo
     se le quita el fondo azul de debajo para que no asome por las esquinas. */
  .cwa-ava .pbc-flair { background: none; }
  /* Chapita blanca con dos personitas en la esquina del avatar de grupo: en la
     maqueta es lo que dice "esto es una sala", sin tener que leer el nombre. */
  .cwa-gchip { position: absolute; right: -5px; bottom: -5px; width: 21px; height: 21px;
    border-radius: 50%; background: hsl(var(--pbc-surface)); border: 1px solid #e4e9f0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(21,38,59,.12); }
  .cwa-gchip svg { width: 13px; height: 13px; color: hsl(var(--primary)); }
  .cwa-mid { flex: 1; min-width: 0; padding: .35rem 0; }
  .cwa-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
  .cwa-name { font-weight: 700; color: #111b21; font-size: .98rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .cwa-when { font-size: .74rem; color: hsl(var(--pbc-muted)); flex: 0 0 auto; }
  .cwa-row.has-unread .cwa-when { color: hsl(var(--primary)); font-weight: 700; }
  .cwa-l2 { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    margin-top: .1rem; }
  .cwa-snip { font-size: .86rem; color: hsl(var(--pbc-muted)); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; min-width: 0; }
  .cwa-snip b { font-weight: 700; color: hsl(var(--pbc-ink-soft)); }
  /* Micro de WhatsApp delante de "Mensaje de voz (0:07)": pegado al texto y a
     la misma altura que las letras, como en la lista de WhatsApp. */
  .cwa-mic { vertical-align: -.15em; margin-right: .22rem; flex: none; }
  .cwa-badge { background: hsl(var(--primary)); color: hsl(var(--pbc-on-color)); border-radius: 999px;
    min-width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center;
    justify-content: center; font-size: .75rem; font-weight: 700; padding: 0 .3rem;
    flex: 0 0 auto; }
  /* Arroba de "te han nombrado", a la izquierda de la bolita (como WhatsApp):
     sin fondo y AZUL, el mismo azul de los avisos del chat de la app (Guille
     24/08/2026), para que se lea "@ 3" sin confundirse con la bolita roja. */
  .cwa-at { color: hsl(var(--pbc-blue)); font-weight: 900; font-size: .95rem;
    line-height: 1; margin-right: .18rem; flex: 0 0 auto; }
  .cwa-empty { text-align: center; color: #889; padding: 2.5rem 1rem; font-size: .95rem; }

  /* "Ver las conversaciones de antes": la lista llega con las cincuenta primeras
     y este botón trae el resto (18/08/2026). Con menos de cincuenta chats no se
     pinta, así que la mayoría de la gente no lo ve nunca.
     OJO (18/08/2026): esto se llamaba .cwa-more, el MISMO nombre que los tres
     puntitos de la cabecera de arriba. Al ir después en el fichero, pisaba su
     estilo y los puntitos salían como una caja blanca ancha encima del título
     "Chat". De ahí el nombre propio: .cwa-older. */
  .cwa-older { display: block; width: calc(100% - 1.8rem); margin: .6rem .9rem 0;
    border: 1px dashed #dfe5ea; border-radius: 12px; background: hsl(var(--pbc-surface));
    padding: .75rem; font: inherit; font-size: .88rem; font-weight: 700;
    color: hsl(var(--pbc-blue)); cursor: pointer; }
  .cwa-older:disabled { opacity: .55; }

  /* ===== Salas que encajan con lo que buscas =====
     Viola Boehm, 14/09/2026: escribia "Spanish" en el buscador del chat y, como
     no estaba en esa sala, solo le salia "No chats here". Ahora el buscador de
     arriba mira en dos sitios y las salas a las que aun no te has unido se
     pintan aqui, con su boton de Unirme, sin bajar hasta el final. */
  .cwa-found { margin: .4rem .9rem 0; padding-top: .7rem; border-top: 1px solid #f0f2f5; }
  .cwa-found-h { font-size: .78rem; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: #667781; padding: 0 .1rem .45rem; }
  .cwa-found-grid { display: flex; flex-direction: column; gap: .45rem; }
  .cwa-found-row { display: flex; align-items: center; gap: .55rem; background: #fff;
    border: 1px solid #e6e9ef; border-radius: 12px; padding: .6rem .7rem;
    text-decoration: none; color: #12232E; font-size: .92rem; font-weight: 600; }
  .cwa-found-row:hover { background: #f5f7fb; color: #12232E; }
  .cwa-found-row .nm { display: flex; align-items: center; gap: .4rem; min-width: 0; flex: 1; }
  .cwa-found-row .nm .fi { border-radius: 3px; flex: none; }
  .cwa-found-row .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cwa-found-row .n { color: #889; font-weight: 400; font-size: .78rem; flex: none; }
  /* El boton de Unirme: azul de la marca, redondo y claro. Si ya estas dentro,
     dice Abrir y va en hueco, para que no parezca que te apunta otra vez. */
  .cwa-found-row .go { flex: none; background: hsl(var(--primary)); color: #fff;
    border-radius: 999px; padding: .34rem .85rem; font-size: .8rem; font-weight: 700; }
  .cwa-found-row .go.in { background: #fff; color: hsl(var(--primary));
    border: 1px solid #cfe0f5; }
  .cwa-found-all { display: block; width: 100%; margin: .55rem 0 0; border: 1px dashed #dfe5ea;
    border-radius: 12px; background: #fff; padding: .6rem; font: inherit; font-size: .85rem;
    font-weight: 700; color: #086BC9; cursor: pointer; }

  /* Descubrir salas nuevas: plegado bajo la lista. El titulo ya no es un texto
     perdido al final, es un BOTON centrado (Viola, 14/09/2026). */
  .cwa-disc { margin: 1rem .9rem 0; border-top: 1px solid hsl(var(--pbc-page)); padding-top: .9rem;
    padding-bottom: 1.2rem; }
  .cwa-disc summary { cursor: pointer; font-weight: 700; color: hsl(var(--pbc-ink-soft)); font-size: .92rem;
    padding: .5rem 0; list-style: none; display: flex; align-items: center; gap: .5rem; }
  .cwa-disc summary.cwa-disc-btn { width: fit-content; max-width: 100%; margin: 0 auto;
    justify-content: center; gap: .45rem; padding: .62rem 1.15rem; border-radius: 999px;
    border: 1px solid #cfe0f5; background: #fff; color: #086BC9; font-size: .92rem;
    box-shadow: 0 2px 8px rgba(18,35,46,.07); }
  .cwa-disc summary.cwa-disc-btn:hover { background: #f2f7fd; }
  .cwa-disc summary::-webkit-details-marker { display: none; }
  .cwa-disc summary .chev { transition: transform .15s; color: #86a7cc; }
  .cwa-disc summary:not(.cwa-disc-btn) .chev { margin-left: auto; color: #99a; }
  .cwa-disc[open] summary .chev { transform: rotate(180deg); }
  /* Con la barra de abajo puesta, el boton no puede quedar debajo de ella. */
  body.has-pbc-mnav .cwa-disc { padding-bottom: calc(64px + 1.2rem + env(safe-area-inset-bottom, 0px)); }
  .cwa-disc-search { display: flex; align-items: center; gap: .5rem; background: hsl(var(--pbc-page));
    border-radius: 8px; padding: .45rem .8rem; margin: .3rem 0 .2rem; }
  .cwa-disc-search input { flex: 1; border: none; background: transparent; font-size: 1rem;
    color: hsl(var(--pbc-ink)); min-width: 0; }
  .cwa-disc-search input:focus { outline: none; }
  .cwa-disc-search .lupa { color: hsl(var(--pbc-muted)); font-size: .95rem; }
  .cwa-disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .5rem; padding: .4rem 0 1rem; }
  .cwa-disc-card { display: flex; align-items: center; gap: .5rem; border: 1px solid hsl(var(--pbc-line-soft));
    border-radius: 12px; padding: .55rem .7rem; text-decoration: none; color: hsl(var(--pbc-ink));
    font-size: .88rem; font-weight: 600; }
  .cwa-disc-card:hover { background: #f5f7fb; }
  .cwa-disc-card .fi { border-radius: 3px; }
  .cwa-disc-card .mem { margin-left: auto; color: #889; font-weight: 400; font-size: .78rem; }
  .cwa-disc-card .yes { color: #1d9e75; }
  /* Salas que aún no existen (catálogo mundial): mismo botón, en verde de "estrenar". */
  .cwa-disc-world { padding-bottom: 1rem; }
  .cwa-disc-world .ttl { font-size: .8rem; font-weight: 700; color: hsl(var(--pbc-muted)); padding: .2rem 0 .4rem; }
  .cwa-disc-world .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .5rem; }
  .cwa-disc-world .cwa-disc-card { width: 100%; text-align: left; background: hsl(var(--pbc-surface));
    border-color: #bfe6d5; color: hsl(var(--pbc-ink)); cursor: pointer; }
  .cwa-disc-world .cwa-disc-card:disabled { opacity: .5; }

  /* Botón flotante de chat nuevo (buscar persona), como el redondel de WhatsApp. */
  .cwa-fab { position: fixed; right: max(1rem, calc(50vw - 380px + 1rem)); bottom: 1.3rem;
    width: 56px; height: 56px; border-radius: 50%; background: hsl(var(--primary));
    z-index: 1031;
    color: hsl(var(--pbc-on-color)); display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; text-decoration: none; box-shadow: 0 4px 14px rgba(18,35,46,.25); }
  .cwa-fab svg { display: block; }
  /* Con la barra de navegación inferior puesta (móvil), el redondel sube por
     encima de ella: si no, queda debajo de "Exchanges/Chat" y no se puede tocar.
     La clase la pone el script de includes/mobile_bottom_nav.html. */
  body.has-pbc-mnav .cwa-fab { bottom: calc(64px + 1rem + env(safe-area-inset-bottom, 0px)); }

  /* Foto en grande al pinchar la foto (como WhatsApp): ventana <dialog> nativa. */
  .cwa-photo-dlg { border: none; border-radius: 16px; padding: 0; background: #111b21;
    max-width: min(86vw, 480px); }
  .cwa-photo-dlg::backdrop { background: rgba(17,27,33,.75); }
  .cwa-photo-dlg img { display: block; width: 100% !important; height: auto !important; }
  .cwa-photo-dlg .nm { color: hsl(var(--pbc-on-color)); font-weight: 700; padding: .6rem .9rem; font-size: .95rem; }

  /* ===== Escritorio (≥900px): pantalla partida como WhatsApp Web =====
     Izquierda, la lista con su buscador y filtros; derecha, la conversación
     abierta en un panel del mismo dominio. El alto lo fija el JS en --cwa-h
     para que cada columna tenga su PROPIO scroll, como WhatsApp. */
  .cwa-right { display: none; }
  @media (min-width: 900px) {
    .cwa-panel { max-width: 1280px; display: grid;
      grid-template-columns: 400px minmax(0, 1fr);
      height: var(--cwa-h, 78vh); min-height: 0; padding-bottom: 0; }
    .cwa-left { overflow-y: auto; min-height: 0; border-right: 1px solid hsl(var(--pbc-line-soft));
      position: relative; }
    .cwa-right { display: flex; flex-direction: column; min-height: 0; background: hsl(var(--pbc-page)); }
    .cwa-right iframe { border: none; width: 100%; height: 100%; flex: 1; }
    .cwa-hello { flex: 1; display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: .6rem; color: hsl(var(--pbc-muted)); text-align: center; padding: 1rem; }
    .cwa-hello .big { font-size: 2.6rem; }
    .cwa-row.act { background: hsl(var(--pbc-blue-soft)); }
    .cwa-fab { position: sticky; bottom: 1.1rem; margin: .6rem 1rem .9rem auto; }
  }

/* Nuevo grupo en MÓVIL: misma pastilla blanca que el buscador de al lado. */
@media (max-width: 767.98px) {
  body.cwa-body .cwa-newgroup { width: 52px; height: 52px; border-radius: 20px;
    background: hsl(var(--pbc-surface)); border: 1px solid rgba(255, 255, 255, .88);
    box-shadow: 0 8px 20px rgba(0, 49, 96, .18); }
}