/* mensajes.css — la mensajería entera: el marco de dos columnas, la lista de
   conversaciones y el chat con sus burbujas.

   Por debajo de 44rem las dos columnas se apilan: la lista se queda arriba con
   altura corta y el chat debajo, que en un teléfono es la única forma de que
   quepan los dos. */

.mensajeria{
  display:grid; grid-template-columns:16rem 1fr; gap:1rem;
  border:1px solid var(--line); border-radius:var(--radio); overflow:hidden;
  background:var(--card); min-height:26rem; box-shadow:var(--sombra);
}
.mensajeria .lista{border-right:1px solid var(--line); overflow-y:auto; max-height:32rem}
.mensajeria .panel{display:flex; flex-direction:column; min-height:26rem; max-height:32rem}

@media (max-width:44rem){
  .mensajeria{grid-template-columns:1fr; gap:0}
  .mensajeria .lista{border-right:0; border-bottom:1px solid var(--line); max-height:14rem}
}

/* ── Una fila de la lista de conversaciones ───────────────────────────── */
.conv{
  display:flex; gap:.65rem; align-items:center; width:100%; text-align:left;
  padding:.7rem .9rem; border:0; border-bottom:1px solid var(--line);
  background:none; font:inherit; color:inherit; cursor:pointer;
}
.conv:hover{background:var(--brand-suave)}
.conv[aria-current="true"]{background:var(--brand-suave); box-shadow:inset 3px 0 0 var(--brand)}
.conv .txt{min-width:0}
.conv .quien{font-weight:600; font-size:.93rem}
.conv .ultimo{color:var(--muted); font-size:.83rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── El chat: cabecera fija, cuerpo que crece, pie fijo ───────────────── */
.chat-cabeza{
  display:flex; gap:.65rem; align-items:center;
  padding:.7rem .9rem; border-bottom:1px solid var(--line);
}
/* Las dos acciones de protección, al final de la cabecera del chat. */
.chat-acciones{display:flex; gap:.4rem; margin-left:auto; flex-wrap:wrap}

.chat-cuerpo{flex:1; overflow-y:auto; padding:1rem .9rem; display:flex; flex-direction:column; gap:.5rem}
.chat-pie{display:flex; gap:.5rem; padding:.7rem .9rem; border-top:1px solid var(--line)}
.chat-pie input{flex:1}

.burbuja{
  max-width:min(80%,26rem); padding:.5rem .8rem; border-radius:16px;
  font-size:.94rem; line-height:1.5; word-wrap:break-word;
}
.burbuja.ella{background:var(--brand-suave); align-self:flex-start; border-bottom-left-radius:5px}
.burbuja.yo{background:var(--brand); color:var(--brand-ink); align-self:flex-end; border-bottom-right-radius:5px}
.burbuja .hora{display:block; font-size:.72rem; opacity:.65; margin-top:.15rem}
.escribiendo{color:var(--muted); font-size:.85rem; align-self:flex-start; font-style:italic}