/* =========================================================================
   La Sala — estilos.

   La conversacion se lee como un chat de movil, no como un foro: burbujas,
   avatar de color propio por participante, respuestas citadas y barra de
   escritura pegada abajo. Los mensajes propios van a la derecha, como en
   cualquier mensajeria.

   Las clases genericas (.sala-form, .sala-boton, .sala-datos, .sala-otros,
   .sala-etq) las comparten el panel de administracion y las normas: lo del
   chat va todo dentro de .sala-chat para no tocarlas.
   ========================================================================= */

:root {
  --sala-burbuja: #1c212a;
  --sala-mia: linear-gradient(135deg, #2563eb, #3b82f6);
  --sala-cristal: rgba(15, 17, 21, .82);
}

.sala-main { max-width: 780px; }

.sala-kicker {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--acento); margin-bottom: 6px;
}
.sala-main h1 { font-size: 1.7rem; line-height: 1.3; margin-bottom: 14px; }

.sala-etq {
  display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texto2); margin-bottom: 4px;
}
.sala-datos { color: var(--texto2); font-size: .86rem; margin-bottom: 18px; }
.sala-cerrada { color: #f5a524; }

.sala-boton {
  display: inline-block; padding: 10px 22px; border: none; cursor: pointer;
  border-radius: 999px; background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff; font: inherit; font-weight: 700; font-size: .9rem;
  text-decoration: none; box-shadow: 0 6px 22px rgba(59, 130, 246, .3);
  transition: transform .2s, box-shadow .2s;
}
.sala-boton:hover:not(:disabled) { transform: translateY(-2px); }
.sala-boton:disabled { opacity: .55; cursor: default; }

.sala-aviso { font-size: .84rem; margin: 8px 0 0; min-height: 1.1em; }
.sala-aviso.ok { color: #4ade80; }
.sala-aviso.mal { color: #ff5252; }

/* formulario clasico: lo usa el panel de administracion */
.sala-form {
  background: var(--panel); border: 1px solid var(--linea); border-radius: 16px;
  padding: 16px 18px; margin-bottom: 22px;
}
.sala-form textarea, .sala-form #sala-texto {
  width: 100%; resize: vertical; min-height: 76px;
  background: var(--panel2); color: var(--texto);
  border: 2px solid var(--linea); border-radius: 12px;
  padding: 11px 13px; font: inherit; font-size: .95rem; outline: none;
}
.sala-form textarea:focus { border-color: var(--acento); }

.sala-otros {
  display: flex; gap: 18px; margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--linea); font-size: .86rem; flex-wrap: wrap;
}
.sala-otros a { color: var(--acento); text-decoration: none; }

/* =======================================================================
   EL CHAT
   ======================================================================= */

.sala-chat {
  max-width: 720px; margin: 0 auto; padding: 0 12px 26px;
}

/* --- cabecera de la sala: se queda arriba al desplazar ----------------- */
.sala-top {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -12px 14px; padding: 12px 16px 13px;
  background: var(--sala-cristal);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--linea);
}
.sala-top .sala-dia-etq {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--acento); font-weight: 700;
}
.sala-top h1 {
  font-size: 1.16rem; line-height: 1.35; margin: 3px 0 0; font-weight: 700;
}
.sala-vivo {
  display: flex; align-items: center; gap: 7px; margin-top: 5px;
  font-size: .76rem; color: var(--texto2);
}
.sala-punto {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .55);
  animation: sala-latir 2.4s infinite;
}
@keyframes sala-latir {
  70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* --- noticia de la que se habla ---------------------------------------- */
.sala-ancla {
  display: block; text-decoration: none;
  background: var(--panel); border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: 6px 14px 14px 6px; padding: 10px 14px; margin-bottom: 16px;
  transition: border-color .18s;
}
.sala-ancla:hover { border-color: var(--acento); }
.sala-ancla .sala-etq { margin-bottom: 2px; }
.sala-ancla strong {
  color: var(--texto); font-size: .9rem; font-weight: 600; line-height: 1.45;
  display: block;
}

/* --- separador de dia --------------------------------------------------- */
.sala-sep { display: flex; justify-content: center; margin: 6px 0 14px; }
.sala-sep span {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: 999px; padding: 4px 14px;
  font-size: .72rem; color: var(--texto2);
}

/* --- apertura de la casa ----------------------------------------------- */
/* Se distingue a simple vista de un participante anonimo: sembrar una
   opinion firmada como "Lince Sereno" seria hacerla pasar por uno mas. */
.sala-anuncio {
  border: 1px solid rgba(59, 130, 246, .4); border-radius: 16px;
  background: linear-gradient(160deg, rgba(59, 130, 246, .13), transparent 70%);
  padding: 14px 16px; margin: 0 0 16px;
}
.sala-anuncio-cab {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
}
.sala-anuncio-cab b { color: var(--acento); font-size: .86rem; }
.sala-sello {
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--acento); color: var(--acento);
  font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
.sala-anuncio .sala-cuerpo { font-size: .95rem; line-height: 1.62; }

/* --- burbujas ----------------------------------------------------------- */
.sala-linea {
  display: flex; align-items: flex-end; gap: 9px; margin-bottom: 3px;
}
.sala-linea.seguido { margin-bottom: 3px; }
.sala-linea + .sala-linea:not(.seguido) { margin-top: 13px; }
.sala-linea.mio { flex-direction: row-reverse; }

.sala-av {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 800; color: #fff; letter-spacing: .02em;
  user-select: none;
}
.sala-linea.seguido .sala-av { visibility: hidden; }
.sala-linea.mio .sala-av { display: none; }

.sala-burbuja {
  max-width: 76%; min-width: 0;
  background: var(--sala-burbuja); border-radius: 18px;
  padding: 8px 13px 6px; position: relative;
}
.sala-linea:not(.mio) .sala-burbuja { border-bottom-left-radius: 6px; }
.sala-linea.mio .sala-burbuja {
  background: var(--sala-mia); border-bottom-right-radius: 6px;
}
.sala-linea.seguido:not(.mio) .sala-burbuja { border-bottom-left-radius: 18px; }
.sala-linea.seguido.mio .sala-burbuja { border-bottom-right-radius: 18px; }

.sala-quien {
  font-size: .76rem; font-weight: 700; margin-bottom: 3px;
  display: flex; align-items: center; gap: 5px;
}
/* En tus propios mensajes tu nombre sobra: ya sabes quien eres. */
.sala-linea.seguido .sala-quien, .sala-linea.mio .sala-quien { display: none; }
.sala-cuerpo { line-height: 1.55; font-size: .93rem; word-wrap: break-word; }
.sala-linea.mio .sala-cuerpo, .sala-linea.mio .sala-quien { color: #fff; }

/* los enlaces se muestran como texto plano, nunca clicables */
.sala-url {
  color: var(--texto2); border-bottom: 1px dotted var(--linea);
  word-break: break-all;
}
.sala-linea.mio .sala-url { color: rgba(255, 255, 255, .8); }

/* cita del mensaje al que se responde, al estilo de cualquier mensajeria */
.sala-cita {
  border-left: 3px solid var(--acento);
  background: rgba(255, 255, 255, .06);
  border-radius: 8px; padding: 5px 9px; margin-bottom: 6px;
  font-size: .8rem; line-height: 1.4;
}
.sala-linea.mio .sala-cita {
  border-left-color: rgba(255, 255, 255, .85);
  background: rgba(0, 0, 0, .18);
}
.sala-cita b { display: block; color: var(--acento); font-size: .72rem; }
.sala-linea.mio .sala-cita b { color: #fff; }
.sala-cita span {
  color: var(--texto2); display: -webkit-box; -webkit-line-clamp: 2;
  line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sala-linea.mio .sala-cita span { color: rgba(255, 255, 255, .78); }

/* titular al que se refiere el mensaje */
.sala-noti {
  display: block; margin-bottom: 6px; padding: 5px 9px;
  border-radius: 8px; background: rgba(255, 255, 255, .06);
  border: 1px dashed var(--linea);
  font-size: .76rem; line-height: 1.35; color: var(--texto2);
  text-decoration: none;
}
a.sala-noti:hover { color: var(--acento); border-color: var(--acento); }
.sala-linea.mio .sala-noti {
  background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .85);
}
.sala-linea.mio a.sala-noti:hover { color: #fff; border-color: #fff; }

/* aviso de "vas a opinar sobre esta noticia", encima de la caja */
.sala-adjunta {
  display: none; align-items: center; gap: 8px; margin-bottom: 7px;
  background: var(--panel); border-left: 3px solid var(--acento);
  border-radius: 6px 10px 10px 6px; padding: 6px 10px; font-size: .78rem;
}
.sala-adjunta.visible { display: flex; }
.sala-adjunta div { min-width: 0; }
.sala-adjunta b { display: block; color: var(--acento); font-size: .72rem; }
.sala-adjunta span:not(.sala-adjunta-icono) {
  color: var(--texto2); display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* pie de la burbuja: hora y acciones, discretos */
.sala-pie {
  display: flex; align-items: center; gap: 4px;
  margin-top: 2px; justify-content: flex-end;
}
.sala-pie time { font-size: .68rem; color: var(--texto2); }
.sala-linea.mio .sala-pie time { color: rgba(255, 255, 255, .72); }
.sala-voto, .sala-responder {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: .7rem; color: var(--texto2); padding: 2px 7px;
  border-radius: 999px; transition: color .15s, background .15s;
}
.sala-voto:hover, .sala-responder:hover {
  color: var(--acento); background: rgba(59, 130, 246, .12);
}
.sala-voto.votado { color: var(--acento); font-weight: 700; }
.sala-linea.mio .sala-voto, .sala-linea.mio .sala-responder {
  color: rgba(255, 255, 255, .8);
}
.sala-linea.mio .sala-voto:hover, .sala-linea.mio .sala-responder:hover {
  color: #fff; background: rgba(255, 255, 255, .16);
}
.sala-oculto { opacity: .55; }
.sala-oculto .sala-burbuja { outline: 1px dashed #f5a524; }

.sala-vacio {
  color: var(--texto2); text-align: center; padding: 34px 10px;
  font-size: .9rem;
}

/* --- lo más votado ------------------------------------------------------ */
.sala-destacado {
  border: 1px solid rgba(59, 130, 246, .3); border-radius: 14px;
  padding: 12px 16px; margin: 0 0 16px;
  background: linear-gradient(180deg, rgba(59, 130, 246, .1), transparent);
}
.sala-destacado blockquote {
  margin: 0; font-size: .95rem; line-height: 1.55; color: var(--texto);
}
.sala-destacado cite {
  display: block; margin-top: 6px; font-style: normal;
  font-size: .76rem; color: var(--texto2);
}

/* --- orden -------------------------------------------------------------- */
.sala-orden {
  display: inline-flex; gap: 3px; margin: 4px 0 16px; padding: 3px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: 999px;
}
.sala-tab {
  background: none; border: none; border-radius: 999px;
  color: var(--texto2); font: inherit; font-size: .78rem; font-weight: 600;
  padding: 5px 14px; cursor: pointer; transition: background .18s, color .18s;
}
.sala-tab.activo { color: #fff; background: var(--acento); }

/* --- barra de escritura, pegada abajo ---------------------------------- */
.sala-escribir {
  position: sticky; bottom: 0; z-index: 25;
  margin: 14px -12px 0; padding: 9px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--sala-cristal);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid var(--linea);
}
.sala-respondiendo {
  display: none; align-items: center; gap: 8px; margin-bottom: 7px;
  background: var(--panel); border-left: 3px solid var(--acento);
  border-radius: 6px 10px 10px 6px; padding: 6px 10px; font-size: .78rem;
}
.sala-respondiendo.visible { display: flex; }
.sala-respondiendo div { min-width: 0; }
.sala-respondiendo b { display: block; color: var(--acento); font-size: .72rem; }
.sala-respondiendo span {
  color: var(--texto2); display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sala-cancelar {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--texto2); font-size: 1.1rem; line-height: 1; padding: 2px 5px;
}
.sala-cancelar:hover { color: #ff5252; }

.sala-caja {
  display: flex; align-items: flex-end; gap: 7px;
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: 24px; padding: 5px 5px 5px 8px;
  transition: border-color .18s;
}
.sala-caja:focus-within { border-color: var(--acento); }
.sala-chat #sala-texto {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  resize: none; color: var(--texto); font: inherit; font-size: .94rem;
  line-height: 1.45; padding: 8px 4px; max-height: 132px; min-height: 22px;
}
.sala-chat #sala-texto::placeholder { color: var(--texto2); }
#sala-bandera {
  background: none; border: none; color: var(--texto2); font-size: 1.05rem;
  padding: 6px 2px; cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none; text-align: center;
}
#sala-bandera option { background: var(--panel); color: var(--texto);
                       font-size: .9rem; }
#sala-enviar {
  flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border: none;
  border-radius: 50%; cursor: pointer; background: var(--sala-mia);
  color: #fff; font-size: 1rem; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(59, 130, 246, .34);
  transition: transform .16s, opacity .16s;
}
#sala-enviar:hover:not(:disabled) { transform: scale(1.07); }
#sala-enviar:disabled { opacity: .45; cursor: default; }

.sala-bajo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: .72rem; color: var(--texto2);
}
.sala-bajo .sala-av { flex: 0 0 20px; width: 20px; height: 20px;
                      font-size: .52rem; }
.sala-enlace {
  background: none; border: none; color: var(--texto2); cursor: pointer;
  font: inherit; font-size: .72rem; text-decoration: underline; padding: 0;
}
.sala-enlace:hover { color: var(--acento); }
.sala-contador { margin-left: auto; }
.sala-contador.cerca { color: #f5a524; }
.sala-chat .sala-aviso { margin: 5px 0 0; font-size: .78rem; }

/* --- cerrada ------------------------------------------------------------ */
.sala-archivada {
  text-align: center; color: var(--texto2); font-size: .84rem;
  background: var(--panel); border: 1px dashed var(--linea);
  border-radius: 14px; padding: 14px; margin-top: 14px;
}

@media (max-width: 700px) {
  .sala-top h1 { font-size: 1.04rem; }
  .sala-burbuja { max-width: 84%; }
  .sala-main h1 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sala-boton, #sala-enviar, .sala-punto { transition: none; animation: none; }
}

/* =========================================================================
   CUENTAS Y MENSAJERIA
   =========================================================================
   En movil la mensajeria ocupa la pantalla entera y usa 100dvh, no 100vh:
   con vh, la barra del navegador que aparece y desaparece al desplazarse
   deja la caja de escribir tapada o flotando. dvh mide el alto que hay de
   verdad en cada momento.
   ========================================================================= */

.cuenta-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: 820px; margin: 14px auto 0; padding: 8px 14px;
  border: 1px solid var(--linea); border-radius: 999px;
  background: var(--panel); font-size: .82rem; color: var(--texto2);
}
.cuenta-barra .cb-quien { margin-right: auto; }
.cuenta-barra b { color: var(--texto); }
.cuenta-barra button {
  border: 1px solid var(--linea); background: var(--panel2); color: var(--texto);
  font: inherit; font-size: .78rem; padding: 7px 14px; border-radius: 999px;
  cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent;
}
.cuenta-barra .cb-alta, .cuenta-barra .cb-msg {
  background: var(--acento); border-color: transparent; color: #fff; font-weight: 700;
}
.cuenta-barra button:active { transform: scale(.96); }
.cb-globito {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: #e6484d; color: #fff;
  font-size: .62rem; font-style: normal; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------ formulario */
.sala-modal {
  position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(4, 6, 12, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sm-caja {
  width: min(380px, 100%); background: var(--panel); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 18px; padding: 22px 20px 20px;
  position: relative; box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.sm-caja h2 { font-size: 1.15rem; margin-bottom: 4px; }
.sm-nota { font-size: .78rem; color: var(--texto2); margin-bottom: 14px; }
.sm-caja label {
  display: block; font-size: .74rem; color: var(--texto2); margin-bottom: 10px;
}
.sm-caja input {
  display: block; width: 100%; margin-top: 5px; padding: 11px 12px;
  border-radius: 11px; border: 2px solid var(--linea); background: var(--panel2);
  color: var(--texto); font: inherit;
  /* 16px o iOS amplia la pagina al enfocar el campo */
  font-size: 16px;
}
.sm-caja input:focus { border-color: var(--acento); outline: none; }
.sm-ok {
  width: 100%; margin-top: 6px; padding: 12px; border: none; border-radius: 11px;
  background: var(--acento); color: #fff; font: inherit; font-weight: 700;
  cursor: pointer;
}
.sm-ok:disabled { opacity: .6; }
.sm-error {
  background: rgba(230, 72, 77, .12); border: 1px solid rgba(230, 72, 77, .4);
  color: #ff9c9c; border-radius: 10px; padding: 8px 10px;
  font-size: .78rem; margin-bottom: 10px;
}
.sm-cambiar { font-size: .76rem; color: var(--texto2); margin-top: 12px;
              text-align: center; }
.sm-cambiar a { color: var(--acento); }
.sm-cerrar {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--linea); background: var(--panel2);
  color: var(--texto2); cursor: pointer; font: inherit;
}

/* ----------------------------------------------------------- mensajeria */
.mensajeria {
  position: fixed; right: 18px; bottom: 18px; z-index: 1500;
  width: min(380px, calc(100vw - 36px)); height: min(560px, 78dvh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: 18px; box-shadow: 0 26px 70px rgba(0, 0, 0, .65);
}
.mensajeria[hidden] { display: none; }
.ms-cab {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--linea); flex: 0 0 auto;
}
.ms-titulo { margin-right: auto; }
.ms-cab button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linea);
  background: var(--panel2); color: var(--texto2); cursor: pointer; font: inherit;
}
.ms-volver { visibility: hidden; }            /* solo dentro de un hilo */
.mensajeria:has(.ms-hilo:not([hidden])) .ms-volver { visibility: visible; }

.ms-lista, .ms-hilo {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
.ms-lista[hidden], .ms-hilo[hidden] { display: none; }
.ms-buscar { padding: 10px 12px; flex: 0 0 auto; }
.ms-buscar input {
  width: 100%; padding: 10px 12px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--panel2); color: var(--texto);
  font: inherit; font-size: 16px;
}
.ms-buscados, .ms-lista > .ms-fila { flex: 0 0 auto; }
.ms-lista { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ms-fila, .ms-encontrado {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: none; background: none; color: var(--texto);
  font: inherit; text-align: left; cursor: pointer; position: relative;
  border-bottom: 1px solid rgba(148, 163, 199, .10);
}
.ms-fila:hover, .ms-encontrado:hover { background: var(--panel2); }
.ms-cara {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3d8bff, #37e6ff); color: #fff;
  font-weight: 800; font-size: .9rem;
}
.ms-txt { min-width: 0; display: flex; flex-direction: column; }
.ms-txt b { font-size: .86rem; }
.ms-txt small {
  color: var(--texto2); font-size: .74rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.ms-globito {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--acento); color: #fff;
  font-size: .66rem; font-style: normal; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ms-vacio { padding: 18px 16px; color: var(--texto2); font-size: .8rem; }

.ms-con {
  padding: 8px 14px; font-size: .78rem; color: var(--texto2);
  border-bottom: 1px solid var(--linea); flex: 0 0 auto;
}
.ms-mensajes {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px; display: flex; flex-direction: column; gap: 7px;
  overscroll-behavior: contain;    /* que no arrastre la pagina de detras */
}
.ms-burbuja {
  max-width: 78%; align-self: flex-start; padding: 9px 12px;
  border-radius: 16px 16px 16px 4px; background: var(--panel2);
  font-size: .87rem; line-height: 1.45; word-break: break-word;
}
.ms-burbuja.mia {
  align-self: flex-end; background: var(--acento); color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.ms-noticia {
  display: block; font-size: .76rem; margin-bottom: 5px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  color: inherit; text-decoration: none; opacity: .92;
}
.ms-noticia:hover { text-decoration: underline; }
.ms-escribir {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--linea);
}
.ms-escribir textarea {
  flex: 1 1 auto; resize: none; max-height: 120px; padding: 10px 12px;
  border-radius: 16px; border: 1px solid var(--linea); background: var(--panel2);
  color: var(--texto); font: inherit; font-size: 16px; line-height: 1.4;
}
.ms-enviar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--acento); color: #fff; cursor: pointer; font-size: 1rem;
}
.ms-enviar:active { transform: scale(.94); }

/* --------------------------------------------------------------- movil */
@media (max-width: 720px) {
  /* A pantalla completa, como cualquier app de mensajes. dvh y no vh: con
     vh, al aparecer y desaparecer la barra del navegador la caja de
     escribir se queda tapada por debajo del borde. */
  .mensajeria {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; height: 100dvh; max-height: none;
    border: none; border-radius: 0;
  }
  .ms-txt small { max-width: 62vw; }
  .ms-burbuja { max-width: 82%; }
  .cuenta-barra { margin: 10px 10px 0; font-size: .78rem; }
  .cuenta-barra .cb-quien { width: 100%; margin-bottom: 4px; }
}
/* con la mensajeria abierta en movil, la pagina de detras no se desplaza */
body.con-mensajeria { overflow: hidden; }
@media (min-width: 721px) {
  body.con-mensajeria { overflow: auto; }
}

/* =========================================================================
   CHAT GENERAL, NOTICIAS COMPARTIDAS Y CONTESTAR CITANDO
   ========================================================================= */

.sala-lema {
  margin: 6px 0 0; font-size: .78rem; color: var(--texto2); line-height: 1.45;
}
.sala-anuncio-cab time { margin-left: auto; font-size: .7rem; color: var(--texto2); }

.sala-anteriores {
  display: block; margin: 0 auto 12px; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--panel); color: var(--texto2);
  font: inherit; font-size: .78rem; cursor: pointer;
}
.sala-anteriores[hidden] { display: none; }
.sala-anteriores:hover { color: var(--texto); border-color: var(--acento); }
.sala-anteriores:disabled { opacity: .55; cursor: default; }

/* --- tarjeta de una noticia compartida ---------------------------------- */
/* Lleva a la portada, que la abre con su resumen. Tiene fondo propio para
   leerse igual dentro de una burbuja gris que de una azul. */
.sala-tarjeta {
  display: block; margin: 2px 0 7px; padding: 9px 11px 9px 12px;
  border-radius: 12px; text-decoration: none;
  background: rgba(8, 11, 19, .55); border: 1px solid rgba(96, 165, 250, .32);
  border-left: 3px solid #3b82f6;
  transition: border-color .16s, background .16s, transform .16s;
}
.sala-tarjeta:hover { border-color: #60a5fa; background: rgba(8, 11, 19, .75); }
.sala-tarjeta:active { transform: scale(.985); }
.st-etq {
  display: block; margin-bottom: 3px; font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #93c5fd;
}
.st-tit {
  display: block; color: #f1f5ff; font-size: .88rem; line-height: 1.38;
  font-weight: 700;
}
.st-medio { display: block; margin-top: 4px; font-size: .68rem; color: #9aa6bd; }
.st-medio::after { content: " →"; }
.sala-linea.mio .sala-tarjeta, .ms-burbuja.mia .sala-tarjeta {
  background: rgba(4, 10, 30, .32); border-color: rgba(255, 255, 255, .35);
  border-left-color: #fff;
}
.sala-linea.mio .st-etq, .ms-burbuja.mia .st-etq { color: #dbeafe; }
.ms-burbuja .sala-tarjeta { margin: 0 0 6px; }

/* --- la cita es un botón: lleva al mensaje citado ----------------------- */
button.sala-cita, button.ms-cita {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer;
}
button.sala-cita { border: 0; border-left: 3px solid var(--acento); }
.sala-linea.mio button.sala-cita { border-left-color: rgba(255, 255, 255, .85); }
.sala-cita.eliminada span, .ms-cita.eliminada span { font-style: italic; }
.ms-cita {
  border: 0; border-left: 3px solid rgba(255, 255, 255, .75);
  background: rgba(0, 0, 0, .18); border-radius: 8px; padding: 5px 9px;
  margin-bottom: 6px; font-size: .78rem; line-height: 1.35;
}
.ms-burbuja:not(.mia) .ms-cita {
  border-left-color: var(--acento); background: rgba(255, 255, 255, .06);
}
.ms-cita b { display: block; font-size: .7rem; }
.ms-burbuja:not(.mia) .ms-cita b { color: var(--acento); }
.ms-cita span {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; opacity: .85;
}
.ms-hora {
  display: block; text-align: right; font-size: .62rem; opacity: .7; margin-top: 3px;
}

.ms-respondiendo {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  margin: 0 12px; padding: 6px 10px; font-size: .78rem;
  border-left: 3px solid var(--acento); background: var(--panel2);
  border-radius: 6px 10px 10px 6px;
}
.ms-respondiendo[hidden] { display: none; }
.ms-respondiendo div { min-width: 0; flex: 1; }
.ms-respondiendo b { display: block; color: var(--acento); font-size: .7rem; }
.ms-respondiendo span {
  display: block; color: var(--texto2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.ms-resp-quitar {
  border: none; background: none; color: var(--texto2); cursor: pointer;
  font-size: 1rem; padding: 2px 5px;
}
.ms-resp-quitar:hover { color: #ff5252; }

/* --- los tres puntitos (solo con ratón) --------------------------------- */
.sg-kebab {
  flex: 0 0 auto; align-self: center; width: 28px; height: 28px;
  border-radius: 50%; border: none; background: none; cursor: pointer;
  color: var(--texto2); font: inherit; font-size: 1.15rem; line-height: 1;
  opacity: 0; transition: opacity .15s, background .15s;
}
.sala-linea:hover .sg-kebab, .sala-linea:focus-within .sg-kebab,
.ms-burbuja:hover .sg-kebab, .ms-burbuja:focus-within .sg-kebab,
.sg-kebab:focus-visible { opacity: 1; }
.sg-kebab:hover { background: rgba(255, 255, 255, .08); color: var(--texto); }
.ms-burbuja { position: relative; }
.ms-burbuja .sg-kebab {
  position: absolute; top: 50%; right: -32px; transform: translateY(-50%);
}
.ms-burbuja.mia .sg-kebab { right: auto; left: -32px; }
@media (hover: hover) and (pointer: fine) {
  /* sitio a los lados para los puntitos de los privados */
  .ms-mensajes { padding-left: 40px; padding-right: 40px; }
}
@media (hover: none), (pointer: coarse) {
  .sg-kebab { display: none; }
  /* la pulsación larga abre nuestro menú, no el del sistema */
  .sala-burbuja, .ms-burbuja {
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  }
}

.sg-menu {
  position: fixed; z-index: 3000; min-width: 200px; padding: 5px;
  background: var(--panel, #161a22); border: 1px solid var(--linea, #2a303b);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  animation: sg-aparece .12s ease-out;
}
.sg-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  border: none; border-radius: 8px; background: none; cursor: pointer;
  color: var(--texto, #eef1f8); font: inherit; font-size: .88rem;
}
.sg-menu button:hover, .sg-menu button:focus-visible {
  background: rgba(59, 130, 246, .18); outline: none;
}
@keyframes sg-aparece { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* --- deslizar para contestar -------------------------------------------- */
/* pan-y: el desplazamiento vertical sigue siendo del navegador, fluido y con
   su inercia; solo el gesto horizontal lo recoge gestos.js */
.sala-burbuja, .ms-burbuja { touch-action: pan-y; }
.sala-burbuja::before, .ms-burbuja::before {
  content: "↩"; position: absolute; left: -38px; top: 50%;
  width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  display: grid; place-items: center; font-size: .9rem;
  background: rgba(59, 130, 246, .2); color: #93c5fd; pointer-events: none;
  opacity: var(--sg, 0); transform: scale(calc(.6 + var(--sg, 0) * .4));
}
.sg-listo::before { background: #3b82f6; color: #fff; }
.sg-vuelve { transition: transform .2s ease; }
.sala-linea.sg-destello .sala-burbuja, .sala-anuncio.sg-destello,
.ms-burbuja.sg-destello { animation: sg-destello 1.4s ease; }
@keyframes sg-destello {
  0%, 35% { box-shadow: 0 0 0 3px rgba(96, 165, 250, .75); }
  100% { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-menu, .sala-linea.sg-destello .sala-burbuja, .ms-burbuja.sg-destello {
    animation: none;
  }
  .sg-vuelve { transition: none; }
}