/* ==============================
   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;
  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
================================= */

.avsa-group-chat-top{
  margin-bottom: 30px;
  position: relative;
  z-index: 1; /* bajito, para no tapar nada del header/menú */
}

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

/* ======================================================
   AVSA Likes — Layout global limpio
   ====================================================== */

/* contenedor principal */
.youzify-post-liked-by{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}

/* número de likes */
.youzify-post-liked-by .avsa-like-number{
  display:inline-block !important;
  flex:0 0 auto !important;
  font-size:14px !important;
  line-height:1 !important;
  margin-right:8px !important;
  position:relative !important;
  z-index:5 !important;
}

/* avatars dentro del bloque */
.youzify-post-liked-by > a{
  position:relative !important;
  flex:0 0 auto !important;
}

/* tamaño consistente avatar */
.youzify-post-liked-by a img{
  width:29px !important;
  height:29px !important;
  min-width:29px !important;
  min-height:29px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  display:block !important;
}

/* efecto abanico */
.youzify-post-liked-by > a:not(:first-of-type){
  margin-left:-18px !important;
}

/* espacio entre último avatar y texto */
.youzify-post-liked-by > a:last-of-type{
  margin-right:8px !important;
}

/* texto final */
.youzify-post-liked-by .youzify-liked-this{
  margin-left:0 !important;
  white-space:nowrap !important;
}