/* ==========================================================================
   LeadSync - Reproductor de audio
   El reproductor propio de las notas de voz (item 27).

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* --- Reproductor de audio propio (item 27) --- */
.audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 250px;
  max-width: 100%;
}
.audio-play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
}
.audio-play .ic {
  width: 15px;
  height: 15px;
}
.audio-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* item 33: onda de la nota de voz (canvas) en vez de una línea de progreso. */
.audio-wave {
  width: 100%;
  height: 26px;
  display: block;
  cursor: pointer;
}
.audio-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.audio-time {
  font-size: 10.5px;
  color: var(--text-dim);
}
.audio-mic {
  display: inline-flex;
  color: var(--text-dim);
}
.audio-mic .ic {
  width: 11px;
  height: 11px;
}

/* La velocidad solo sale en la nota que está sonando: en las demás no significaría nada. */
.audio-speed {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 3px 6px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-hover);
  color: var(--text-dim);
}
.audio-speed:hover { color: var(--text); }

/* Micrófono en la lista mientras suena un audio de ese chat (item 27). */
.mic-ic {
  display: inline-flex;
  color: var(--accent);
  flex: 0 0 auto;
}
.mic-ic .ic {
  width: 13px;
  height: 13px;
}

/* item 10: el ojito de "alguien más está en este chat". Va con los otros iconos de estado
   de la fila (micrófono, silenciado, bloqueado) porque es lo mismo: información sobre el
   chat, no una acción. Solo se pinta cuando hay alguien, así que no necesita estado
   apagado. Es pulsable (abre el popover con los nombres) sin parecer un botón. */
.presence-eye {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  cursor: pointer;
  color: var(--info);
  border-radius: 6px;
  padding: 0 2px;
  transition: background-color .12s ease;
}
.presence-eye:hover,
.presence-eye:focus-visible {
  background: var(--bg-hover);
  outline: none;
}
.presence-eye .ic {
  width: 13px;
  height: 13px;
}
.presence-count {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

/* El popover reusa el armazón del menú flotante; solo cambia el rótulo de arriba. */
.presence-pop-head {
  padding: 8px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-dim);
}

/* Hereda de .msg-menu-wrap la posición fija, el z-index y la animación; aquí solo la caja
   (el hueco de 8px entre cabecera y lista sobra: son una sola tarjeta). */
.presence-pop-wrap {
  gap: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px var(--shadow);
  overflow: hidden;
}

/* Dentro del envoltorio, el menú ya no pone su propia caja: sería un borde sobre otro. */
.presence-pop-wrap .msg-menu {
  /* La posición ya la pone `.msg-menu-wrap .msg-menu` (flota el envoltorio, no el menú). */
  background: none;
  border: none;
  box-shadow: none;
  min-width: 168px;
}

/* Las filas son nombres, no acciones: sin puntero de "pulsable" ni resalte al pasar. */
.presence-pop .msg-menu-item { cursor: default; }
.presence-pop .msg-menu-item:hover { background: none; }

/* Barra del audio que sigue sonando fuera de su chat (item 27, fa_22.png). Va fija arriba
   y empuja la app: con box-sizing:border-box el padding-top le come alto a las 100vh, así
   que no hace falta reestructurar el layout.
   item 30: solo debe abarcar el panel del chat, no la lista. Arranca en --chat-left, que
   es DONDE EMPIEZA LA COLUMNA DEL CHAT y se calcula en un solo sitio (tokens/colors.css).
   Aquí se sumaba a mano `--sidebar-w + 5px`, que era correcto hasta que apareció el rail:
   desde entonces la barra empezaba 56px antes y se comía el final de la lista (item B37).
   En móvil (una columna) se resetea a left:0 en la media query, porque ahí no hay lista. */
.audio-bar {
  position: fixed;
  top: 0;
  left: var(--chat-left);
  right: 0;
  z-index: 300;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px var(--shadow);

  /* item 36: entra deslizándose desde arriba y sale hacia arriba (como la barra de
     responder). El hueco (padding del .chat) se reserva de golpe a propósito —la
     compensación de scroll del item 29 lo necesita—, así que la barra se desliza dentro
     del hueco ya reservado en vez de animar el layout. */
  transition: transform .22s ease;
}

/* Se anima el transform, así que NO puede ser display:none: se deja renderizada pero
   desplazada fuera de la vista (arriba). Gana a la .hidden global por especificidad. */
.audio-bar.hidden {
  display: flex !important;
  transform: translateY(-100%);
}

/* Solo en mensajería: con otra sección del menú abierta, la barra sale por arriba y el audio
   sigue sonando; al volver a los chats baja otra vez. */
body:has(#view-panel:not(.hidden)) .audio-bar {
  transform: translateY(-100%);
  pointer-events: none;
}

/* item 35: la barra solo tapa el chat, así que solo el chat debe bajar. Empujar toda la
   .app (como antes) bajaba también la lista y dejaba un hueco vacío sobre "LeadSync". En
   móvil (barra a todo el ancho, una sola columna a la vez) sí se empuja la .app entera:
   ver la media query. */
.app.with-audio-bar .chat { padding-top: 52px; }
.ab-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text);
}
.ab-btn:hover { background: var(--bg-hover); }
.ab-btn .ic {
  width: 17px;
  height: 17px;
}
.ab-who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.ab-name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ab-mic {
  display: inline-flex;
  color: var(--accent);
  flex: 0 0 auto;
}
.ab-mic .ic {
  width: 14px;
  height: 14px;
}

/* La barra de progreso va pegada al borde de abajo, como en fa_22.png. */
.ab-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--bg-hover);
  cursor: pointer;
}
.ab-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
}
.media-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, .16);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.media-doc .media-kind {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: currentColor;
  animation: media-spin .7s linear infinite;
}
@keyframes media-spin {
  to { transform: rotate(360deg); }
}
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .9);
  /* Animación y no transición desde rAF (igual que la modal y el aviso): si el rAF no
     corre, el visor se quedaba negro e invisible tapando toda la pantalla. */
  animation: lightboxEntra 150ms ease;
}

@keyframes lightboxEntra {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  flex: 0 0 auto;
}
.lb-top-right {
  display: flex;
  gap: 6px;
}
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.lb-btn:hover { background: rgba(255, 255, 255, .22); }
.lb-btn .ic {
  width: 20px;
  height: 20px;
}

/* item 44: centrado SEGURO. Un `center` normal en flex reparte el sobrante a los dos
   lados, y cuando el hijo es MÁS GRANDE que el contenedor ese reparto se vuelve negativo:
   la parte de arriba y de la izquierda quedan fuera del área scrolleable y no hay forma de
   llegar a ellas. `safe` hace que, al desbordar, se alinee al inicio en vez de centrar. */
.lightbox-stage {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 8px 24px;
  cursor: zoom-out;
  align-items: safe center;
  justify-content: safe center;
}
.lightbox-media {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
.lightbox-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  flex: 0 0 auto;
}
.lb-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 22px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.lb-action:hover { background: rgba(255, 255, 255, .24); }
.lb-action .ic {
  width: 18px;
  height: 18px;
}

/* Ya reaccionado: el botón muestra SOLO el emoji, sin el texto "Reaccionar" (item 47). */
.lb-action.reacted { padding: 6px 14px; }
.lb-emoji {
  font-size: 22px;
  line-height: 1.1;
}

/* item 34: los gestos del carrusel los lleva el JS. Sin esto el navegador se queda el
   arrastre (scroll/zoom) antes de que podamos decidir qué es. Solo en la imagen: el video
   necesita que sus controles nativos sigan recibiendo el toque. */
.lightbox-stage img.lightbox-media { touch-action: none; }

/* item 25: zoom por pasos. Crece el TAMAÑO real (width/height en px), no un transform,
   para que el escenario tenga algo que scrollear de verdad (item 44). Y en píxeles y no en
   max-* porcentual porque max-width solo limita: sobre un sticker, más pequeño que la
   caja, no hacía nada (item 50). */
.lightbox-media.zoomed {
  transition: width .18s ease, height .18s ease;
  cursor: zoom-in;
}
.lightbox-stage.zoomed {
  overflow: auto;
  cursor: default;
}

/* Con la imagen ampliada, el flex no debe encogerla para que quepa. */
.lightbox-stage.zoomed .lightbox-media { flex: 0 0 auto; }
.lb-btn:disabled {
  opacity: .35;
  cursor: default;
}

/* item 36: separador de día. position:sticky da el efecto de WhatsApp sin una línea de
   JS: la píldora se queda arriba del chat mientras se leen los mensajes de ese día y la
   empuja hacia arriba la del día siguiente. pointer-events:none para que no se coma el
   clic derecho de la burbuja que quede debajo. */

/* El grupo hereda la separación entre burbujas de .messages: sin esto, envolverlas se
   llevaría por delante el gap de 8px del chat. */
.day-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.date-divider {

  /* top: 0 y no 6px — con el margen se veía despegado del borde de arriba al quedarse
     pegado (item 76). El separador es una etiqueta de encabezado: pegado al borde se lee
     como parte del marco del chat; a 6px parece que flota por su cuenta. */
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
  pointer-events: none;
}
.date-divider span {
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: 0 2px 8px var(--shadow);
  transition: opacity 180ms ease;
}
/* La fecha PEGADA ARRIBA solo se ve mientras se desplaza, como en WhatsApp: quieta, tapaba
   la burbuja que quedaba debajo. Las que van en su sitio, entre mensajes, no se tocan. */
.messages:not(.desplazando) .date-divider.flotando span {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .date-divider span { transition: none; }
}

/* item 37: el archivo que llega entra por el lado del que viene. Sin fill-mode a
   propósito: al acabar, el elemento se queda en su estado normal, así que aunque el
   navegador no llegue a pintar la animación nunca queda una imagen invisible. */
@keyframes lbEnterRight {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes lbEnterLeft {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.lightbox-media.lb-enter-right { animation: lbEnterRight .18s ease; }
.lightbox-media.lb-enter-left { animation: lbEnterLeft .18s ease; }