/* ── MESSAGE CARD ──────────────────────── */
/* La tarjeta apila verticalmente, como máximo, dos bloques propios: la
   vista previa de "respondiendo a" (si el mensaje es una respuesta) y la
   fila principal (avatar + cuerpo). El "gap" entre ambos lo pone el
   propio navegador a partir del layout — no hay ningún margen de un
   elemento que tenga que "encajar" con el margen de otro elemento
   distinto, así que no hay nada que se pueda desincronizar entre sí.
   La altura de cada bloque es 100% natural, la decide su contenido. */
.message-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 16px 6px 16px;
  border-radius: 4px;
  transition: background var(--transition);
  margin-bottom: 2px;
  position: relative;
  overflow: visible;
}
/* Fila principal: avatar + cuerpo del mensaje, uno al lado del otro */
.msg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  min-width: 0;
}
/* Extra top spacing when a new user starts talking */
.message-card.new-sender {
  margin-top: 18px;
}

/* Grouped message: mismo sender dentro de 58s */
.message-card.msg-grouped {
  margin-top: 1px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Cuando un mensaje "cabecera" (con avatar/nombre/hora) va seguido
   inmediatamente de un mensaje agrupado del mismo usuario, se reduce
   su espacio inferior para que el hueco quede igual que el que hay
   entre dos mensajes agrupados consecutivos (antes quedaba un salto
   más grande justo después del primer mensaje). */
.message-card:not(.msg-grouped):has(+ .message-card.msg-grouped) {
  padding-bottom: 2px;
  margin-bottom: 1px;
}

/* Placeholder del ancho del avatar para alinear texto en mensajes agrupados */
.msg-avatar-placeholder {
  width: 42px;
  min-width: 42px;
  flex-shrink: 0;
  /* Al hacer hover sobre el mensaje agrupado, muestra la hora en lugar del avatar */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hora mini que aparece al hover en mensajes agrupados - solo desktop */
@media (hover: hover) and (pointer: fine) {
  .msg-grouped:hover .msg-avatar-placeholder::after {
    content: attr(data-time);
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: -0.02em;
  }
}

@media (hover: hover) and (pointer: fine) { .message-card:hover { background: rgba(255,255,255,0.04); } }

.msg-avatar {
  width: 42px; height: 42px;
  min-width: 42px; min-height: 42px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
  overflow: hidden;   /* clips avatar img cleanly — no blue border */
  position: relative;
  align-self: flex-start;
  margin-top: 2px;
}
.msg-avatar img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  /* no clip-path needed — parent overflow:hidden handles it */
}
.msg-avatar img.msg-avatar-deco {
  border-radius: 0;
  overflow: visible;
  /* deco overlaps outside avatar */
  inset: -14%;
  width: 128%; height: 128%;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

.msg-body { flex: 1; min-width: 0; }
.msg-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.msg-sender {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-header);
  letter-spacing: -0.01em;
}
.msg-time {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.75;
  letter-spacing: 0;
}
.msg-text {
  font-size: 0.95rem;
  font-weight: 400;
  color: #EBEDF0;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  /* Evita saltos de línea vacíos que generan separación excesiva */
  margin: 0;
  padding: 0;
}
/* Colapsar líneas vacías consecutivas en mensajes */
.msg-text br + br {
  display: none;
}

/* date divider */
.date-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 8px;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.date-divider::before,
.date-divider::after {
  content: ''; flex: 1;
  height: 1px; background: var(--border);
}

/* ── MEDIA MESSAGES ──────────────────── */
.msg-media {
  margin-top: 6px;
  max-width: 320px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  /* Misma reserva de espacio que .msg-gif/.msg-url-img, para evitar el
     salto de layout al cargar (ver comentario ahí). */
  content-visibility: auto;
  contain-intrinsic-size: 320px 200px;
}
.msg-media img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  cursor: pointer;
  background: #111;
}
/* Con spoiler activo, el recuadro debe ajustarse al tamaño real de la
   imagen/vídeo de abajo (que sigue existiendo, solo tapado), no al
   tamaño de reserva 320x200 de arriba — si no, siempre se ve grande
   sin importar el tamaño real del archivo. */
.msg-media.msg-spoiler {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}
.msg-media video {
  display: block;
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  background: #111;
}

/* ── Tarjeta local de "subiendo..." — solo la ve quien envía ────── */
.upload-progress-card {
  background: #191B20;
  border: 1px solid #33353B;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
  max-width: calc(100% - 88px);
  margin-top: 6px;
  /* Antes quedaba pegada al borde izquierdo (sin el sangrado que sí
     tienen los mensajes normales, que arrancan después del avatar).
     La corremos al mismo punto donde arranca el texto de un mensaje. */
  margin-left: 72px;
}
.upload-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.upload-progress-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #2B2E36;
  color: #c9cdd3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.upload-progress-info { min-width: 0; flex: 1; }
.upload-progress-name {
  font-weight: 700;
  color: #f2f3f5;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-progress-size {
  color: #949ba4;
  font-size: 0.78rem;
  margin-top: 2px;
}
.upload-progress-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #2B2E36;
  border: none;
  color: #c9cdd3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.upload-progress-close:hover { background: #34383f; }
.upload-progress-track {
  height: 4px;
  border-radius: 999px;
  background: #292D35;
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: #413CDD;
  border-radius: 999px;
}

/* ── SPOILER en medios ya enviados: recuadro #171A1E que cubre el medio
   hasta que se toca ─────────────────────────────────────────────── */
.msg-media { position: relative; }
.msg-spoiler-cover {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #171A1E;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
}
.msg-spoiler-cover span {
  color: #f2f3f5;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
/* Mientras está el recuadro puesto, oculta el vídeo/imagen debajo para
   que no se filtre nada por los bordes redondeados ni por el botón de
   play del vídeo. */
.msg-spoiler .msg-video-play-btn { display: none; }

/* ── VIDEO THUMBNAIL in chat ─────────── */
.msg-video-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  max-width: 320px;
  background: #111;
}
.msg-video-thumb {
  display: block;
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  background: #111;
  pointer-events: none; /* controlado por JS */
}
.msg-video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.60);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s, transform 0.15s;
}
.msg-video-wrap:active .msg-video-play-btn {
  background: rgba(0,0,0,0.80);
  transform: translate(-50%, -50%) scale(0.92);
}

/* ── VIDEO VIEWER FULLSCREEN ─────────── */
.vv-overlay {
  position: fixed; inset: 0;
  background: #000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3100;
}
.vv-overlay.open { display: flex; }
.vv-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  z-index: 10;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}
.vv-video-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
#vvVideo {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}
/* Mute button */
.vv-mute-btn {
  position: absolute;
  bottom: 80px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
}
/* Controls bar */
.vv-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 5;
}
.vv-play-pause {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.15);
  border: none; border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.vv-progress-wrap { flex: 1; }
.vv-progress {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  outline: none;
  cursor: pointer;
}
.vv-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.vv-time {
  font-size: 0.78rem;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

/* ── IMAGE LIGHTBOX ──────────────────── */
.lightbox-overlay {
  position: fixed; inset: 0;
  background: #000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}
.lightbox-overlay.open { display: flex; }

/* Top bar */
.lb-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  z-index: 10;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
}
.lb-btn-close,
.lb-btn-more {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.lb-btn-close:hover, .lb-btn-more:hover { background: rgba(255,255,255,0.15); }

/* Image */
.lb-img-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-overlay img {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}

/* Options bottom sheet */
.lb-sheet-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 20;
}
.lb-sheet-overlay.open { display: flex; }
.lb-sheet {
  width: 100%;
  max-width: 500px;
  background: #1e2024;
  border-radius: 16px 16px 0 0;
  padding: 0 0 32px;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.34,1.06,0.64,1);
}
.lb-sheet-overlay.open .lb-sheet { transform: translateY(0); }
.lb-sheet-handle {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  margin: 12px auto 0;
}
.lb-sheet-title {
  font-size: 1rem; font-weight: 700;
  color: #f2f3f5;
  text-align: center;
  padding: 14px 20px 10px;
}
.lb-sheet-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0 0 8px;
}
.lb-sheet-item {
  width: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px;
  background: none; border: none;
  color: #f2f3f5;
  font-size: 0.97rem; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
  font-family: 'Inter', sans-serif;
}
.lb-sheet-item:active { background: rgba(255,255,255,0.07); }
.lb-sheet-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: #2a2d35;
  border-radius: 10px;
  flex-shrink: 0;
}

/* ── LINK EMBEDS ──────────────────────── */
.msg-link {
  color: #00b0f4;
  text-decoration: none;
  word-break: break-all;
}
.msg-link:hover { text-decoration: underline; }

.msg-embed-ig {
  margin-top: 6px;
  max-width: 400px;
}
.msg-embed-ig iframe { max-width: 100% !important; }

.msg-embed {
  display: flex;
  margin-top: 6px;
  background: #0B0C0E;
  border-radius: 4px;
  overflow: hidden;
  max-width: 432px;
}
.msg-embed-accent {
  width: 4px;
  flex-shrink: 0;
  background: #43b581; /* verde claro Discord */
  border-radius: 4px 0 0 4px;
}
.msg-embed-content {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.msg-embed-site {
  font-size: 0.75rem;
  color: #b5bac1;
  font-weight: 600;
}
.msg-embed-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #00b0f4;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-embed-title:hover { text-decoration: underline; }
.msg-embed-desc {
  font-size: 0.82rem;
  color: #b5bac1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.msg-embed-thumb {
  margin-top: 8px;
  border-radius: 4px;
  overflow: hidden;
  max-width: 100%;
}
.msg-embed-thumb img {
  max-width: 100%;
  max-height: 180px;
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Embed de YouTube con miniatura + botón de reproducir → iframe al pulsar */
.msg-embed-yt { max-width: 400px; }
.msg-embed-yt .msg-embed-accent { background: #ff0000; }
.msg-embed-yt-fallback {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #b5bac1;
  text-decoration: none;
}
.msg-embed-yt-fallback:hover { text-decoration: underline; color: #dcddde; }
.msg-embed-yt-player {
  position: relative;
  margin-top: 8px;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #000;
  cursor: pointer;
}
.msg-embed-yt-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.msg-embed-yt-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.msg-embed-yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,0,0,0.85);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.msg-embed-yt-player:hover .msg-embed-yt-play {
  background: rgba(255,0,0,1);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Embed de TikTok: miniatura con botón de play superpuesto (enlace externo) */
.msg-embed-tt .msg-embed-accent { background: #00f2ea; }
.msg-embed-tt-thumb { position: relative; display: block; text-decoration: none; }
.msg-embed-tt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.msg-embed-tt-thumb:hover .msg-embed-tt-play {
  background: rgba(0,0,0,0.8);
  transform: translate(-50%, -50%) scale(1.08);
}

/* ── Reply quote ── */
.msg-body .msg-reply-quote {
  display: flex; align-items: center; gap: 6px;
  background: #1a1c20; border-left: 3px solid var(--accent);
  padding: 5px 10px; border-radius: 0 6px 6px 0;
  margin-bottom: 4px; font-size: .8rem; color: #949ba4;
  cursor: pointer; max-width: 100%; overflow: hidden;
}

/* ── Highlight card being replied to ── */
.message-card.replying-to {
  background: rgba(88, 101, 242, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  transition: background 0.4s ease, border-color 0.4s ease;
}

/* ── Reaction pills row ── */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0;
  padding-left: 50px;
  align-items: center;
  width: 100%;
  /* Sits below avatar+body row because of flex-wrap on card */
}
.msg-reactions button:hover {
  background: #35373c !important;
}

/* ── My messages (is-mine) — no extra styling needed ── */

/* ── Floating hover action bar (Discord-style reactions on top) ── */
.message-card {
  position: relative;
}
.msg-hover-bar {
  display: none;
  position: absolute;
  top: -20px;
  right: 10px;
  background: #2b2d31;
  border: 1px solid #3a3d44;
  border-radius: 8px;
  padding: 3px 6px;
  gap: 2px;
  align-items: center;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
/* Solo mostrar en desktop con mouse real, nunca en móvil táctil */
@media (hover: hover) and (pointer: fine) {
  .message-card:hover .msg-hover-bar {
    display: flex;
  }
}
.msg-hover-bar button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  color: #b5bac1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.msg-hover-bar button:hover {
  background: rgba(255,255,255,0.1);
  color: #dbdee1;
}
.msg-hover-bar .hover-divider {
  width: 1px;
  height: 16px;
  background: #3a3d44;
  margin: 0 2px;
  flex-shrink: 0;
}

/* ── Pending / confirmed message states ── */
.message-card.msg-pending {
  opacity: 0.45;
  transition: opacity 0.5s ease;
}
.message-card.msg-confirmed {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* ── Edición de mensajes ── */
.msg-edited { font-size: .68rem; color: #949ba4; margin-left: 4px; user-select: none; }
.msg-edit-box { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 100%; }
.msg-edit-input {
  width: 100%; box-sizing: border-box; resize: none; min-height: 42px; max-height: 240px;
  background: #383a40; color: var(--text, #dbdee1); border: none; border-radius: 8px;
  padding: 10px 12px; font: inherit; line-height: 1.4; outline: none;
}
.msg-edit-hint { font-size: .72rem; color: #949ba4; }
.msg-edit-hint b { color: var(--accent, #5865f2); font-weight: 600; cursor: pointer; }