/* ==============================
   WISE CHAT – mensajes en fila (sin “flotantes”)
   Nombre (alineado derecha + :) + mensaje + hora en una sola línea
   ============================== */

/* Cada mensaje ocupa 100% y se apila (lista) */
.wcMessages .wcMessage,
.wcContainer .wcMessage{
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  width: 100% !important;
  clear: both !important;
  float: none !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

/* ===== COLUMNA FIJA DEL NOMBRE (pegado a la derecha) ===== */
.wcMessages .wcMessage .wcRowHead,
.wcContainer .wcMessage .wcRowHead{
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;

  width: 150px !important;        /* columna del nombre */
  min-width: 150px !important;
  flex: 0 0 150px !important;

  text-align: right !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  float: none !important;
}

/* Nombre ocupa toda la columna y queda a la derecha */
.wcMessages .wcMessage .wcRowHead .wcUser,
.wcContainer .wcMessage .wcRowHead .wcUser{
  display: inline-block !important;
  width: 100% !important;
  text-align: right !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Agrega los dos puntos automáticamente: "Nombre:" */
.wcMessages .wcMessage .wcRowHead .wcUser::after,
.wcContainer .wcMessage .wcRowHead .wcUser::after{
  content: ":" !important;
  margin-left: 4px !important;
}

/* Oculta el tiempo/fecha que aparece en el header */
.wcMessages .wcMessage .wcRowHead .wcTime,
.wcContainer .wcMessage .wcRowHead .wcTime{
  display: none !important;
}

/* Bloque del contenido (mensaje + hora + botón) */
.wcMessages .wcMessage .wcRowBody,
.wcContainer .wcMessage .wcRowBody{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Contenedor interno del mensaje */
.wcMessages .wcMessage .wcContent,
.wcContainer .wcMessage .wcContent{
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Texto del mensaje: se parte bien y no flota */
.wcMessages .wcMessage .wcInternalContent,
.wcContainer .wcMessage .wcInternalContent{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Hora: al final, estable */
.wcMessages .wcMessage .wcRowBody .wcTime,
.wcContainer .wcMessage .wcRowBody .wcTime{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  opacity: 0.7;
  font-size: 0.85em;
}

/* Botón de acciones: que no flote */
.wcMessages .wcMessage .wcActionsButton,
.wcContainer .wcMessage .wcActionsButton{
  flex: 0 0 auto !important;
  margin-left: 6px !important;
  float: none !important;
}

/* Oculta la fecha, deja solo la hora */
.wcMessageTimeDate{
  display: none !important;
}

/* Si Wise Chat mete saltos raros */
.wcMessages .wcMessage br,
.wcContainer .wcMessage br{
  display: none !important;
}

/* Empujar un poco a la izquierda SOLO los mensajes (si lo necesitas) */
.wcMessages .wcMessage{
  transform: translateX(-0px);
}

/* ===============================
   AVSA Group Chat Spacing
   Separación entre el chat y el muro
================================= */

.avsa-group-chat-top {
  margin-bottom: 30px;
}

/* Más aire en móvil */
@media (max-width: 768px) {
  .avsa-group-chat-top {
    margin-bottom: 40px;
  }
}