/* ================================================================
   BANDEJA DE WHATSAPP — estilo visual pensado para parecerse a la app
   real de WhatsApp (mismos colores de burbuja, avatar circular, barra
   de escritura tipo píldora), para que a un empleado acostumbrado a
   WhatsApp le sea más fácil de usar sin tener que aprender una UI
   distinta. La lógica vive en public/js/whatsapp-inbox.js.
   ================================================================ */

/* La bandeja reemplaza el padding/scroll genérico de .vit-carrito-drop-completo
   (pensado para formularios) por un layout propio a pantalla completa: el
   scroll pasa a vivir en .wa-lista / .wa-chat-fondo, no en este contenedor. */
#vit-whatsapp-drop-body.vit-carrito-drop-completo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Barra superior en verde WhatsApp (en vez del genérico morado que usan
   el resto de los dropdowns de FixHub) — para que el panel se sienta
   como la app real desde el primer vistazo. */
#vit-whatsapp-dropdown .vit-carrito-drop-header {
  background: #202c33;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#vit-whatsapp-dropdown .vit-carrito-drop-titulo i { color: #25d366; }

/* Pulso breve del badge del ícono de la navbar cuando llega una
   conversación nueva esperando respuesta — ver _actualizarBadgeWhatsapp. */
@keyframes wa-pulso-badge {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
#vit-whatsapp-badge-nav.wa-badge-pulso { animation: wa-pulso-badge 0.4s var(--ease-apple, ease); }

/* Resalta la subcadena que coincide con la búsqueda, ver
   _resaltarCoincidenciaWhatsapp en whatsapp-inbox.js. */
.wa-resaltado { background: rgba(37, 211, 102, 0.35); color: #fff; border-radius: 2px; }

/* El scroll usa la clase genérica .scroll-morado (ver utilidades.css)
   en vez de un ::-webkit-scrollbar propio acá — así se ve igual al
   resto de FixHub en lugar de la barra gris nativa del navegador. */
.wa-lista { flex: 1; min-height: 0; overflow-y: auto; }

.wa-hilo-wrap { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ── Buscador arriba de la lista, como "Buscar o empezar un chat
   nuevo" de WhatsApp — filtra en el cliente, sin golpear el servidor
   de nuevo (la lista completa ya está cargada). ── */
.wa-buscador-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #202c33;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.wa-buscador-wrap i { color: #8696a0; font-size: 15px; flex-shrink: 0; }
.wa-buscador {
  flex: 1;
  height: 32px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: #e9edef;
  font-size: 13.5px;
  outline: none;
}
.wa-buscador::placeholder { color: #8696a0; }

/* ── Separador de fecha ("Hoy" / "Ayer" / fecha) entre mensajes de
   distintos días, como los hilos reales de WhatsApp. ── */
.wa-separador-fecha {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.wa-separador-fecha span {
  background: #202c33;
  color: #8696a0;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.wa-conv-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.12s var(--ease-apple, ease);
}
.wa-conv-item:hover { background: rgba(255,255,255,0.04); }
/* Último chat abierto: se queda resaltado al volver a la lista, igual
   que el chat seleccionado en WhatsApp Web. */
.wa-conv-item.wa-conv-activo { background: rgba(37, 211, 102, 0.08); }
.wa-conv-item.wa-conv-activo:hover { background: rgba(37, 211, 102, 0.12); }

/* El color de fondo lo pone inline _htmlAvatarWhatsapp() (un color fijo
   por contacto, como WhatsApp/Telegram) — acá solo el layout. */
.wa-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  flex-shrink: 0;
}
/* Punto verde sobre el avatar cuando la conversación espera respuesta
   — el mismo indicador de "no leído" que WhatsApp pone en la miniatura. */
.wa-conv-item.wa-necesita-atencion .wa-avatar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #25d366;
  border: 2px solid #202c33;
}

.wa-conv-info { flex: 1; min-width: 0; }
.wa-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wa-conv-nombre { font-size: 14.5px; font-weight: 600; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-conv-hora { font-size: 11.5px; color: #8696a0; flex-shrink: 0; }
/* Conversación esperando respuesta humana: nombre y hora en verde
   WhatsApp + negrita, igual que un chat "no leído" en la app real. */
.wa-conv-item.wa-necesita-atencion .wa-conv-nombre { color: #e9edef; }
.wa-conv-item.wa-necesita-atencion .wa-conv-hora { color: #25d366; font-weight: 700; }
.wa-conv-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.wa-conv-preview {
  font-size: 12.5px;
  color: #8696a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-conv-item.wa-necesita-atencion .wa-conv-preview { color: #d1d7db; }

.wa-estado-chip {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.wa-estado-bot     { background: rgba(37, 211, 102, 0.18); color: #25d366; }
.wa-estado-humano  { background: #25d366; color: #fff; }

/* ── Hilo de conversación: fondo oscuro tipo WhatsApp, no el gris
   plano del resto de la app — así las burbujas resaltan igual que en
   la app real. ── */
.wa-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #202c33;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.wa-chat-header-info { flex: 1; min-width: 0; }
.wa-chat-header-nombre { font-size: 14.5px; font-weight: 600; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-chat-header-numero { font-size: 12px; color: #8696a0; }

.wa-chat-fondo {
  position: relative;
  flex: 1;
  min-height: 0; /* si no, un flex item con overflow crece al alto de su
    contenido en vez de recortarse y scrollear (bug clásico de flexbox:
    min-height:auto por defecto) — con esto SÍ se puede hacer scroll. */
  overflow-y: auto;
  padding: 14px 10px;
  background-color: #0b141a;
  /* "Papel tapiz" con el mismo doodle repetido de WhatsApp (hojas,
     tazas, notas musicales…) a muy baja opacidad — de lejos es
     indistinguible del fondo real del chat, no un degradado genérico. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4' opacity='0.035'%3E%3Cpath d='M20 30c8-10 22-10 28 0s2 22-8 24-22-4-20-14 10-12 10-12'/%3E%3Ccircle cx='140' cy='40' r='10'/%3E%3Cpath d='M132 40h16M140 32v16'/%3E%3Cpath d='M60 110c0-14 12-24 24-20s16 20 4 28-26-2-24-14'/%3E%3Cpath d='M170 120c6-8 18-8 20 2s-6 16-14 12'/%3E%3Cpath d='M20 170q10-14 24-6t2 24q-16 8-22-6'/%3E%3Cpath d='M150 190c4-10 16-14 24-6'/%3E%3Ccircle cx='190' cy='70' r='4'/%3E%3Ccircle cx='60' cy='10' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
}

/* Entrada suave de los mensajes al renderizar el hilo (apertura o
   refresco), como el pequeño "pop" con el que WhatsApp hace aparecer
   los mensajes nuevos en vez de que salten de golpe. */
@keyframes wa-fila-aparece {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wa-fila { display: flex; margin-bottom: 8px; animation: wa-fila-aparece 0.18s var(--ease-apple, ease) both; }
.wa-fila-in  { justify-content: flex-start; }
.wa-fila-out { justify-content: flex-end; }
/* Mensajes consecutivos de la misma persona quedan más pegados entre
   sí (como agrupa WhatsApp), y solo el primero del grupo lleva la
   "colita" — ver wa-agrupado en whatsapp-inbox.js. */
.wa-fila.wa-agrupado { margin-bottom: 2px; }

.wa-burbuja {
  max-width: 70%;
  padding: 6px 9px 7px 9px;
  border-radius: 8px;
  font-size: 13.6px;
  line-height: 1.35;
  color: #e9edef;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  transition: filter 0.1s var(--ease-apple, ease);
}
.wa-burbuja:hover { filter: brightness(1.08); }
.wa-burbuja-in  { background: #202c33; border-top-left-radius: 0; }
.wa-burbuja-out { background: #005c4b; border-top-right-radius: 0; }
.wa-fila.wa-agrupado .wa-burbuja-in,
.wa-fila.wa-agrupado .wa-burbuja-out { border-top-left-radius: 8px; border-top-right-radius: 8px; }

/* Foto/video sin texto: la imagen llena casi toda la burbuja (como
   WhatsApp) y la hora flota encima en una píldora semitransparente, en
   vez de quedar abajo con el mismo padding que un mensaje de texto. */
.wa-burbuja.wa-burbuja-solo-media { padding: 3px; }
.wa-burbuja.wa-burbuja-solo-media .wa-burbuja-hora {
  position: absolute;
  bottom: 7px;
  right: 7px;
  margin-top: 0;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
}

/* Colita del globo, solo en el primer mensaje de cada grupo — el
   pequeño triángulo que hace que una burbuja se vea "de WhatsApp" y
   no un simple rectángulo redondeado. */
.wa-fila:not(.wa-agrupado) .wa-burbuja-in::before,
.wa-fila:not(.wa-agrupado) .wa-burbuja-out::before {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 8px solid;
}
.wa-fila:not(.wa-agrupado) .wa-burbuja-in::before {
  left: -7px;
  border-top-color: #202c33;
  border-left: 7px solid transparent;
}
.wa-fila:not(.wa-agrupado) .wa-burbuja-out::before {
  right: -7px;
  border-top-color: #005c4b;
  border-right: 7px solid transparent;
}

/* Check de "enviado" en los mensajes salientes — un solo visto gris,
   como WhatsApp antes de la confirmación de entrega/lectura (no hay
   recibos de entrega/lectura reales desde la API todavía). */
.wa-burbuja-check { font-size: 13px; color: rgba(233,237,239,0.6); margin-left: 3px; vertical-align: -1px; }

.wa-media-img {
  display: block;
  max-width: 260px;
  max-height: 320px;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  object-fit: cover;
}
.wa-media-video {
  display: block;
  max-width: 260px;
  max-height: 320px;
  border-radius: 6px;
}
.wa-media-audio { display: block; max-width: 240px; }
.wa-media-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #e9edef;
  text-decoration: none;
  font-size: 13px;
}
.wa-media-doc i { font-size: 20px; color: #8696a0; flex-shrink: 0; }
/* Insignia con la extensión del archivo (PDF, DOC…) en vez de un ícono
   genérico — mismo tipo de detalle que WhatsApp muestra en sus tarjetas
   de documento. */
.wa-media-doc-ext {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #ff5252;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.wa-vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wa-vacio i { font-size: 32px; color: #4a5a63; }

/* Spinner al abrir un hilo, reutilizando el mismo giro de
   #toast-cargando (ver utilidades.css: @keyframes toast-cargando-spin)
   en vez de definir una animación nueva. */
.wa-spinner-wrap { display: flex; align-items: center; justify-content: center; height: 100%; }
.wa-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: #25d366;
  border-radius: 50%;
  animation: toast-cargando-spin 0.7s linear infinite;
}

/* Skeleton de la lista mientras se pide la primera tanda de
   conversaciones — evita el parpadeo en blanco al abrir el panel. */
@keyframes wa-skeleton-pulso { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
.wa-skeleton-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.wa-skeleton-avatar, .wa-skeleton-linea { background: #253138; border-radius: 6px; animation: wa-skeleton-pulso 1.1s ease-in-out infinite; }
.wa-skeleton-avatar { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; }
.wa-skeleton-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wa-skeleton-linea { height: 10px; }
.wa-skeleton-linea.wa-skeleton-corta { width: 55%; }

/* ── Arrastrar y soltar una imagen sobre el hilo (ver ondragover/ondrop
   en whatsapp-inbox.js) — overlay que confirma dónde soltar, oculto
   hasta que el navegador detecta que se está arrastrando algo encima. ── */
.wa-drop-overlay {
  display: none;
  position: absolute;
  inset: 8px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-direction: column;
  background: rgba(0, 168, 132, 0.16);
  border: 2px dashed #00a884;
  border-radius: 10px;
  color: #e9edef;
  font-size: 13.5px;
  font-weight: 600;
  pointer-events: none;
  z-index: 5;
}
.wa-drop-overlay i { font-size: 28px; color: #00a884; }
.wa-chat-fondo.wa-arrastrando .wa-drop-overlay { display: flex; }

/* ── Botón flotante "ir al final", como la flechita hacia abajo de
   WhatsApp cuando estás leyendo mensajes viejos. ── */
.wa-btn-scroll-abajo {
  position: absolute;
  right: 22px;
  bottom: 76px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #202c33;
  color: #e9edef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-btn-scroll-abajo:hover { background: #2a3942; }
.wa-btn-scroll-abajo.oculto { display: none; }
.wa-btn-scroll-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: #25d366;
  color: #0b141a;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-btn-scroll-badge.oculto { display: none; }

/* ── Vista previa del archivo adjuntado antes de enviarlo. ── */
.wa-adjunto-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px;
  padding: 6px 10px;
  background: #202c33;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wa-adjunto-chip img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.wa-adjunto-chip i { font-size: 20px; color: #8696a0; flex-shrink: 0; }
.wa-adjunto-chip span { flex: 1; min-width: 0; font-size: 12.5px; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-adjunto-chip button { border: none; background: transparent; color: #8696a0; cursor: pointer; display: flex; padding: 2px; }
.wa-adjunto-chip button:hover { color: #ff5252; }

/* ── Emoji picker: grilla simple sobre la barra de escritura. ── */
.wa-emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px 10px;
  background: #202c33;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.wa-emoji-picker.oculto { display: none; }
.wa-emoji-picker button {
  border: none;
  background: transparent;
  font-size: 19px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s var(--ease-apple, ease);
}
.wa-emoji-picker button:hover { background: rgba(255,255,255,0.08); }

/* ── Botones de ícono (emoji / adjuntar) a la izquierda del campo de
   texto, mismo tamaño/estilo que el botón de enviar pero planos. ── */
.wa-btn-icono-input {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #8696a0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple, ease), color 0.15s var(--ease-apple, ease);
}
.wa-btn-icono-input:hover { background: rgba(255,255,255,0.08); color: #e9edef; }

.wa-burbuja-origen { font-size: 10.5px; font-weight: 700; margin-bottom: 2px; opacity: 0.8; }
.wa-burbuja-origen-bot     { color: #53bdeb; }
.wa-burbuja-origen-humano  { color: #ffd479; }
.wa-burbuja-texto { white-space: pre-wrap; word-break: break-word; }
.wa-burbuja-hora { font-size: 10.5px; color: rgba(233,237,239,0.6); text-align: right; margin-top: 2px; white-space: nowrap; }

/* ── Barra de escritura: input tipo píldora + botón circular verde,
   igual que WhatsApp — distinto del input cuadrado que usa el resto
   de FixHub, a propósito. ── */
.wa-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #202c33;
  flex-shrink: 0;
}
.wa-input-texto {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 16px;
  border-radius: 21px;
  border: none;
  background: #2a3942;
  color: #e9edef;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.3;
  resize: none;
  overflow-y: auto;
  outline: none;
}
.wa-input-texto::placeholder { color: #8696a0; }
.wa-btn-enviar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: none;
  background: #00a884;
  color: #0b141a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-btn-enviar:hover { background: #06cf9c; }
.wa-btn-enviar:disabled { opacity: 0.5; cursor: not-allowed; }

.wa-btn-volver-bot {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #e9edef;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-btn-volver-bot:hover { background: rgba(255,255,255,0.08); }

.wa-vacio {
  padding: 40px 20px;
  text-align: center;
  color: #8696a0;
  font-size: 13.5px;
}
.wa-vacio-limpiar {
  margin-top: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #25d366;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 15px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-vacio-limpiar:hover { background: rgba(37, 211, 102, 0.12); }

/* ── Chips de filtro sobre la lista ("Todos" / "Esperando respuesta"),
   como los que WhatsApp Web pone arriba de los chats. ── */
.wa-filtros-wrap {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: #202c33;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.wa-filtro-chip {
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #8696a0;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease-apple, ease), color 0.15s var(--ease-apple, ease), border-color 0.15s var(--ease-apple, ease);
}
.wa-filtro-chip:hover { border-color: rgba(255,255,255,0.3); color: #e9edef; }
.wa-filtro-chip.wa-filtro-activo { background: #00a884; border-color: #00a884; color: #052e26; }

/* Flash breve en la fila de la lista cuando le llega un mensaje nuevo
   por el auto-refresco — el mismo tipo de parpadeo sutil que hace
   WhatsApp Web al reordenar un chat hacia arriba. */
@keyframes wa-flash-nuevo { 0% { background: rgba(37, 211, 102, 0.28); } 100% { background: transparent; } }
.wa-conv-item.wa-flash { animation: wa-flash-nuevo 1.2s ease-out; }

/* ── Visor de fotos a pantalla completa (clic en una imagen del hilo),
   en vez de abrirla en una pestaña nueva del navegador. ── */
.wa-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  animation: wa-fila-aparece 0.15s ease both;
}
.wa-lightbox.oculto { display: none; }
.wa-lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.wa-lightbox-barra {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 18px;
}
.wa-lightbox-barra a, .wa-lightbox-barra button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s var(--ease-apple, ease);
}
.wa-lightbox-barra a:hover, .wa-lightbox-barra button:hover { background: rgba(255,255,255,0.22); }

/* ── Foto/video que fallaron el envío: colita roja con "!" en vez del
   doble check, y se puede tocar para reintentar — no se queda pegada
   como "enviando…" para siempre. ── */
.wa-optimista.wa-fallido .wa-burbuja-check { color: #ff5252; cursor: pointer; }
.wa-optimista.wa-fallido .wa-burbuja { opacity: 0.85; }

/* Sticker: sin fondo de burbuja ni sombra — como en WhatsApp real, que
   muestra el PNG transparente "flotando" en vez de meterlo en un
   globo de texto. */
.wa-burbuja.wa-burbuja-sticker { background: transparent; box-shadow: none; padding: 0; }
.wa-burbuja.wa-burbuja-sticker::before { display: none; }
.wa-burbuja.wa-burbuja-sticker .wa-media-img { max-width: 130px; max-height: 130px; object-fit: contain; cursor: default; }
.wa-burbuja.wa-burbuja-sticker .wa-burbuja-hora { background: rgba(0,0,0,0.45); }

.wa-media-img { opacity: 0; transition: opacity 0.25s var(--ease-apple, ease); }
.wa-media-img.wa-media-cargada { opacity: 1; }

/* Spinner adentro del botón de enviar mientras el mensaje va en
   camino, en vez de solo apagarlo — mismo giro reciclado de
   utilidades.css que ya usa .wa-spinner. */
.wa-btn-enviar.wa-enviando { pointer-events: none; }
.wa-btn-enviar.wa-enviando i { display: none; }
.wa-btn-enviar.wa-enviando::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(11,20,26,0.35);
  border-top-color: #0b141a;
  border-radius: 50%;
  animation: toast-cargando-spin 0.6s linear infinite;
}