/* La burbuja de la sala, abajo a la derecha.
 *
 * 🚨 El rincón de abajo a la IZQUIERDA ya está ocupado por el filtro de tarifas
 * del tema (`.rate_menu_icon`, bottom 10 / left 10). Por eso esta va a la
 * derecha. Además el tema tiene CSS de un `#btn-backtop` en bottom 20 / right
 * 30 sin marcado; si algún día aparece, se le monta encima — de ahí el offset
 * más alto y el z-index muy por encima de su 99.
 *
 * Capas del sitio, de menor a mayor: el "$" y el backtop 99 · el header 9999 ·
 * el menú lateral 99999999 · el age gate 999999 · el panel de tarifas abierto
 * 999999999999999 · el visor de historias 2147483000.
 *
 * La burbuja se pone POR DEBAJO del visor de historias a propósito: si alguien
 * abre una historia con el chat abierto, la historia manda.
 */
.burbuja-sala { position: static; }

/* 🚨 Nada de la burbuja antes de aceptar los 18. El age gate tapa la pantalla
   con z-index 999999, pero la burbuja va MUY por encima (necesita superar el
   menú lateral, que es 99999999), así que se le montaba encima: en un sitio
   adulto, un chat asomando sobre el muro de edad es exactamente lo que no
   puede pasar. Se apaga con la misma marca que usa el shell (`html.ag-ok`).
   Visto en el navegador, no lo agarra ningún test. */
html:not(.ag-ok) .burbuja-sala__boton,
html:not(.ag-ok) .burbuja-sala__panel { display: none !important; }

.burbuja-sala__boton {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147482000;
  width: 58px; height: 58px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #A87B1E, #E8B33D);
  color: #120D02; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  transition: transform .15s;
}
.burbuja-sala__boton:hover { transform: scale(1.06); }
.burbuja-sala__boton[aria-expanded="true"] { display: none; }

/* Globito de mensajes nuevos desde la última vez que la abrió. */
.burbuja-sala__sinleer {
  position: absolute; top: -2px; right: -2px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #E23B3B; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  border: 2px solid #0A0A0A;
}

/* El panel */
.burbuja-sala__panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147482500;
  width: min(380px, calc(100vw - 36px));
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: #0A0A0A; border: 1px solid rgba(232, 179, 61, .45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .7);
}

/* En el celular ocupa casi toda la pantalla: un panel de 380px en un teléfono
   de 360 deja el chat en una ranura donde no se puede ni leer. */
@media (max-width: 560px) {
  .burbuja-sala__panel {
    right: 0; left: 0; bottom: 0;
    width: 100%; border-radius: 16px 16px 0 0; border-bottom: 0;
  }
}

.burbuja-sala__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  background: rgba(232, 179, 61, .12);
  border-bottom: 1px solid rgba(232, 179, 61, .3);
}
.burbuja-sala__cabeza strong { display: block; color: #FFD980; font-size: 15px; }
.burbuja-sala__cabeza span { display: block; color: #A9A29A; font-size: 12px; }

.burbuja-sala__cerrar {
  width: 40px; height: 40px; flex: 0 0 auto;   /* área de toque cómoda */
  background: none; border: 0; color: #E8D9B0;
  font-size: 28px; line-height: 1; cursor: pointer;
}

/* Dentro de la burbuja la lista es más baja que en /sala/ */
.burbuja-sala__panel .sala__mensajes {
  height: min(46vh, 360px);
  border: 0; border-radius: 0; background: transparent;
}
.burbuja-sala__panel .sala__pie {
  margin: 0; padding: 10px 12px 12px;
  border-top: 1px solid rgba(232, 179, 61, .2);
}
.burbuja-sala__panel .sala__escribir input,
.burbuja-sala__panel .sala__entrar input { flex: 1 1 130px; min-height: 42px; }
.burbuja-sala__panel .sala__escribir button,
.burbuja-sala__panel .sala__entrar button { min-height: 42px; padding: 0 14px; font-size: 14px; }

.burbuja-sala__ver-todo { margin: 10px 0 0; text-align: center; }
.burbuja-sala__ver-todo a { color: #E8B33D; font-size: 13px; }