/* ===== Mensajes (pestaña de Redes Sociales) =====
   Bandeja de dos paneles: la lista de conversaciones (con lo que queda de la ventana de 24 h) y la conversación con su
   caja de respuesta; en angosto, una a la vez. Usa los botones, filtros y avisos de Comunidad (cm-*) y solo tokens. */
.rs-vistas{overflow-x:auto;scrollbar-width:none}
.rs-vistas::-webkit-scrollbar{display:none}
.rs-vistas button{flex:none;white-space:nowrap}
@container rs (max-width:560px){.rs-vistas button{padding:10px 10px;gap:6px;font-size:12.5px}}

.ms-panel{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);height:clamp(480px,70vh,780px);border:1px solid var(--rs-borde);
  border-radius:var(--rs-radio);background:var(--rs-panel);overflow:hidden}
.ms-lista{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--rs-borde)}
.ms-lista>.cm-filtros{padding:10px;border-bottom:1px solid var(--rs-borde)}
.ms-lista>.cm-vacio{margin:10px}
.ms-filas{flex:1;min-height:0;margin:0;padding:6px;list-style:none;overflow:auto;display:grid;align-content:start;gap:2px}
.ms-fila{display:flex;gap:10px;width:100%;padding:10px;border:0;border-radius:12px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;
  transition:background .18s}
.ms-fila:hover{background:rgba(var(--accent-rgb),.08)}
.ms-fila.activa{background:rgba(var(--accent-rgb),.18)}
.ms-fila:focus-visible{outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:-2px}
.ms-fila-texto{display:grid;gap:3px;min-width:0;flex:1}
.ms-fila-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.ms-fila-cab b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-fila-cab small{flex:none;font-size:10.5px;color:var(--muted)}
.ms-fila-previa{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-fila.pendiente .ms-fila-previa{color:var(--text)}
.ms-fila.pendiente .ms-fila-cab b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--accent);vertical-align:middle}
.ms-fila-pie{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ms-red-nombre{font-size:10.5px;color:var(--muted)}
.ms-avatar{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(var(--accent-rgb),.2);color:var(--accent-2);
  font-size:13px;font-weight:800;flex:none}
.ms-avatar.grande{width:40px;height:40px;font-size:14px}
.ms-red-punto{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px var(--rs-panel)}
.ms-ventana{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;
  background:rgba(var(--ok-rgb),.14);color:var(--ok)}
.ms-ventana.urgente{background:rgba(var(--warn-rgb),.16);color:var(--warn)}
.ms-ventana.cerrada{background:rgba(var(--danger-rgb),.13);color:var(--danger)}
.ms-ventana.listo{background:rgba(var(--fg-rgb),.07);color:var(--muted)}
.ms .ms-ventana svg.lucide,.ms .ms-ventana [data-lucide]{width:12px;height:12px}

.ms-hilo{display:flex;flex-direction:column;min-width:0;min-height:0}
.ms-hilo-cab{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rs-borde)}
.ms-quien{display:grid;min-width:0;flex:1}
.ms-quien b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-quien small{font-size:11px;color:var(--muted)}
.ms-hilo-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ms .ms-volver{display:none}
.ms-mensajes{flex:1;min-height:0;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:6px;scroll-behavior:auto}
.ms-mensajes:focus-visible{outline:2px solid rgba(var(--accent-rgb),.5);outline-offset:-2px}
.ms-dia{display:flex;justify-content:center;margin:8px 0 4px}
.ms-dia span{padding:3px 10px;border-radius:999px;background:rgba(var(--fg-rgb),.06);color:var(--muted);font-size:10.5px;font-weight:700}
.ms-burbuja{max-width:min(78%,520px);padding:8px 12px 6px;border-radius:16px;animation:ms-entra .18s ease-out}
.ms-burbuja p{margin:0;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ms-burbuja p em{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-style:normal}
.ms-burbuja small{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:3px;font-size:10px;color:var(--muted)}
.ms-burbuja.persona{align-self:flex-start;background:var(--rs-panel-2);border-bottom-left-radius:5px}
.ms-burbuja.marca{align-self:flex-end;background:rgba(var(--accent-rgb),.22);border-bottom-right-radius:5px}
.ms-auto{display:inline-flex;align-items:center;gap:3px;color:var(--accent-2);font-weight:800}
.ms .ms-auto svg.lucide,.ms .ms-auto [data-lucide]{width:11px;height:11px}
.ms-caja{display:grid;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--rs-borde);background:rgba(var(--panel-rgb),.5)}
.ms-caja textarea{width:100%;min-height:64px;max-height:220px;padding:9px 11px;border:1px solid var(--rs-borde);border-radius:12px;background:var(--panel);color:var(--text);
  font:inherit;font-size:13px;line-height:1.45;resize:vertical}
.ms-caja textarea:focus{border-color:rgba(var(--accent-rgb),.7)}
.ms-caja textarea:focus-visible{outline:2px solid rgba(var(--accent-rgb),.4);outline-offset:1px}
.ms-caja-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ms-largo{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ms-largo.excede{color:var(--danger);font-weight:800}
.ms-cerrada{display:flex;gap:8px;margin:0;padding:12px 14px;border-top:1px solid var(--rs-borde);font-size:12px;line-height:1.5;color:var(--muted)}
.ms-cerrada svg.lucide{color:var(--danger)}
.ms-elige{display:grid;place-items:center;align-content:center;gap:8px;height:100%;padding:24px;text-align:center;color:var(--accent-2)}
.ms-elige svg.lucide{width:34px;height:34px;opacity:.8}
.ms-elige b{color:var(--text-strong);font-size:14px}
.ms-elige p{max-width:42ch;margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
@keyframes ms-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ms-burbuja{animation:none}}

/* Angosto: una cosa a la vez (la lista o la conversación abierta, con «Volver»). */
@container rs (max-width:760px){
  .ms-panel{grid-template-columns:1fr;height:auto;min-height:480px}
  .ms-lista{border-right:0}
  .ms-panel.con-hilo .ms-lista{display:none}
  .ms-panel:not(.con-hilo) .ms-hilo{display:none}
  .ms-panel.con-hilo .ms-hilo{height:clamp(480px,78vh,760px)}
  .ms .ms-volver{display:inline-flex}
  .ms .ms-volver span{display:none}
  .ms-hilo-cab{flex-wrap:wrap;padding:10px}
  .ms-hilo-acciones{width:100%;justify-content:flex-start}
  .ms-burbuja{max-width:88%}
  .ms-caja .cm-botones{width:100%}
  .ms-caja .cm-botones .cm-boton{flex:1 1 auto;justify-content:center}
}