/* HEADER en grid */
.chat-head{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  min-height: 42px;
  z-index: 10;              /* por encima de fondos/paneles */
}

/* grupo izquierdo en una sola celda */
.chat-left{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* flecha NO rompe nada */
.toggle-retroceso{
  display: inline-flex;
  padding: 0;
  margin: 0;
  line-height: 0;
}
/* botón */
.toggle-ambitos{
  grid-column: 1;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid var(--border);border-radius:8px;
}

/* ⚠️ RESET del absolute heredado */
.chat-head .ctx-badge{
  position: static !important;   /* quita absolute */
  inset: auto !important;
  transform: none !important;
  grid-column: 2;
  justify-self: center;          /* centro X */
  align-self: center;            /* centro Y */
  max-width: calc(100% - 80px);  /* margen por botón/gaps, evita desborde */
  min-width: 0;
  z-index: 11;                   /* por delante de líneas/sombras */
}

/* truncado en una línea */
.ctx-badge .ctx-pill{
  display:block; max-width:100%;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

/* placeholder derecho para simetría (opcional) */
.chat-head::after{
  content:""; grid-column:3; width:32px; height:1px;
}

.toggle-ambitos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0b1426;
  color: #ffffff !important;   /* ← fuerza el color blanco */
  font-weight: bold;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, color 0.2s;
}

.toggle-ambitos:hover {
  background: #1e293b;         /* tono más claro al pasar el mouse */
  color: #00e0ff;              /* efecto visual elegante en hover */
}


/* Badge básico (ajustá a tu estilo si ya lo tenés) */
.ctx-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #0b1426;
  color: #cbd5e1;
  font-weight: 600;
  line-height: 1;
  max-width: 100%;
  white-space: nowrap;
}


/* Mata cualquier barra/acentos heredados */
.ctx-badge,
.ctx-badge *{
  background-image: none !important;  /* si venía de un gradient */
  border-left: 0 !important;          /* si era un borde */
  box-shadow: none !important;        /* si era un glow “aplastado” */
}

/* Apaga cualquier pseudo que siga dibujando algo */
.ctx-badge::before,
.ctx-badge::after,
.ctx-badge *::before,
.ctx-badge *::after{
  content: none !important;
  display: none !important;
}

.ctx-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  background:#0b1426 !important;   /* asegura solo color, sin imagen */
  color:#cbd5e1; border:1px solid var(--border);
  border-radius:999px;
  max-width:100%; min-width:0; white-space:nowrap;
}

/* Avatar del badge */
.ctx-avatar-img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 6px;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.ctx-avatar-img:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* ===== Pinned message ===== */
.pinned-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: #0f1a2e;
  color: #e2e8f0;
  font-size: 13px;
}

.pinned-box.hidden {
  display: none;
}

.pinned-body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.pinned-icon {
  flex: 0 0 auto;
}

.pinned-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-clear {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
}

.pinned-clear:hover {
  color: #ffffff;
}


/* El contenedor padre (columna) debe permitir que el hijo scrollee */
.col-chat, .chat-wrapper, .content-col {
  height: 100%;
  min-height: 0;          /* CLAVE */
  min-width: 0;  /* ← FIX SAFARI: previene overflow horizontal */
  overflow: hidden;
  width: 100%;  /* ← FIX SAFARI */
  box-sizing: border-box;  /* ← FIX SAFARI */
}

/* Chat: header / mensajes (1fr) / input */
.chat{
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  max-height: 100%;
  width: 100%;  /* ← FIX SAFARI */
  max-width: 100%;  /* ← FIX SAFARI */
  border: 1px solid var(--border);
  border-radius: 12px;        /* o 0 si lo querés cuadrado */
  background: #0b1222;
  overflow: hidden;           /* el scroll vive en .msgs */
  box-sizing: border-box;  /* ← FIX SAFARI */
}

/* Header ya lo tenés; lo dejo por si falta min-altura */
.chat-head{
  min-height: 42px;
  border-bottom: 1px solid var(--border);
  background: inherit;
}

/* Lista scrolleable y sin solaparse con el input */
/* Fondo del panel de mensajes */
.msgs {

  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;           /* menos espacio entre mensajes */
  background: #ebe8c7;
  
  
}

/* Mensaje base (burbuja) */
/* GLOBO DE MENSAJE – BASE (PC) */
/* =========================
   BURBUJAS DE MENSAJE
   ========================= */

/* Caja externa del mensaje: sin fondo, sin padding */
.msg {
  position: relative;   
  display: flex;
  flex-direction: column;
  align-items: flex-end;      /* los propios a la derecha */
  margin: 6px 8px;
  max-width: 100%;
}

/* Cuerpo de la burbuja (TEXTO por defecto) */
.msg-body {
  max-width: 70%;
  padding: 6px 8px;          /* borde de la burbuja */
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  position: relative;        /* ancla para .msg-meta */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  word-wrap: break-word;
  white-space: normal;
}

/* ENVIADOS (yo) */
.msg.me .msg-body {
  margin-left: auto;
  background: #1ee5ff;
  color: #001018;
  border-bottom-right-radius: 4px;
  font-weight: 600;
}

/* RECIBIDOS */
.msg:not(.me) .msg-body {
  margin-right: auto;
  background: #5e5e5e;
  color: #ffffff;
  border-bottom-left-radius: 4px;
  font-weight: 500;
}

/* Simetría visual: mismas esquinas en ambos lados */
.msg.me .msg-body,
.msg:not(.me) .msg-body {
  border-radius: 18px;
}

/* ===== EMOJI ONLY (NO BURBUJA, MÁS GRANDE) ===== */
.msg-body.msg-body--emoji {
  max-width: 100%;
  padding: 8px 4px;           /* mínimo padding */
  background: transparent !important;     /* ❌ SIN FONDO */
  box-shadow: none !important;            /* ❌ SIN SOMBRA */
  border-radius: 0 !important;            /* ❌ SIN BORDES */
}

.msg-body.msg-body--emoji .msg-text {
  font-size: 4rem;             /* 🔥 EMOJI MÁS GRANDE */
  line-height: 1;
  letter-spacing: 4px;         /* espaciado entre emojis si hay varios */
}

.msg.me .msg-body.msg-body--emoji {
  margin-left: auto;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit;              /* color del tema */
}

.msg:not(.me) .msg-body.msg-body--emoji {
  margin-right: auto;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit;              /* color del tema */
}

/* Refuerzo final (por si otras reglas con #msgs pisan) */
#msgs .msg .msg-body.msg-body--emoji{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

/* En emoji-only, la meta va debajo del emoji */
#msgs .msg .msg-body.msg-body--emoji .msg-meta{
  position: static !important;
  margin-top: 4px !important;
  justify-content: flex-end !important;
}

/* ===== BURBUJAS DE MEDIA (IMAGEN / VIDEO) ===== */
/* Mismo concepto de burbuja, pero:
   - ancho limitado
   - SIN padding (altura = altura de la imagen/video)
   - sin problemas de líneas vacías (line-height:0) */

/* ===== BURBUJAS DE MEDIA (IMAGEN / VIDEO) ===== */
/* Mismo concepto de burbuja, pero:
   - ancho limitado
   - sin aire raro arriba/abajo
   - color según quién envía
*/

/* Burbuja de media */
.msg-body.msg-body-image,
.msg-body.msg-body-video {
  max-width: min(260px, 70vw);
  padding: 4px 4px 22px 4px;   /* 👈 dejamos “piso” para la hora adentro */
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  overflow: hidden;
  white-space: normal;
  line-height: 0;              /* la imagen/video no generan aire */
}

/* Colores (ya los tenés, solo lo recuerdo) */
.msg.me .msg-body.msg-body-image,
.msg.me .msg-body.msg-body-video {
  background: #1ee5ff;
}

.msg:not(.me) .msg-body.msg-body-image,
.msg:not(.me) .msg-body.msg-body-video {
  background: #5e5e5e;
}

/* Pie de foto dentro de la burbuja */
.msg-caption {
  margin-top: 4px;
  padding: 0 2px 1px;
  font-size: 12px;
  line-height: 1.3;        /* aquí sí texto normal */
  color: inherit;          /* usa el color de la burbuja (celeste/gris) */
  white-space: pre-wrap;   /* respeta saltos de línea del usuario */
}


/* Hora / meta */
/* Hora / puntito dentro de la burbuja, abajo a la derecha */
.msg-meta {
  position: absolute;
  right: 12px;
  bottom: 4px;                      /* se dibuja sobre el borde inferior de la burbuja */
  margin-top: 0;
  font-size: 11px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 4px;                         /* espacio entre puntito y hora */
}




/* La hora debajo, pegada a la burbuja */
.msg-meta {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.7;
  align-self: flex-end;
}

/* Input fijo en el fondo */
.chat-input {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: #050b15;
  border-top: 1px solid #111827;
  width: 100%;  /* ← FIX SAFARI */
  min-width: 0;  /* ← FIX SAFARI */
  box-sizing: border-box;  /* ← FIX SAFARI */
  overflow: hidden;  /* ← FIX SAFARI */
}

.chat-input-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  width: 100%;  /* ← FIX SAFARI */
  min-width: 0;  /* ← FIX SAFARI */
  box-sizing: border-box;  /* ← FIX SAFARI */
  overflow-x: auto;  /* ← Permite scroll si es necesario en Safari */
  -webkit-overflow-scrolling: touch;  /* ← Smooth scroll en Safari mobile */
}

@media (max-width: 768px) {
  .chat-input-inner {
    flex-wrap: nowrap;
  }

  #msgInput,
  .chat-input input[type="text"] {
    font-size: 16px;
  }

  #msgs {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
}

.chat-input input[type="text"] {
  flex: 1;
  min-width: 0;  /* ← FIX SAFARI: permite que flex la comprima */
  border-radius: 999px;
  border: 1px solid #1f2933;
  background: #000814;
  color: #e5f6ff;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;  /* ← FIX SAFARI */
}

.chat-input input[type="text"]::placeholder {
  color: #6b7280;
}

.chat-input input[type="text"]:focus {
  border-color: #00bcd4;
}

.chat-btn-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00bcd4;
  color: #001018;
  font-size: 18px;
  cursor: pointer;
}

.chat-btn-send:active {
  transform: scale(0.96);
}



/* 0) Config general: bloqueá el scroll global si querés scrollear solo el chat */
html, body { height: 100%; overflow: hidden; }

/* 1) Viewport útil con topbar fijo (ajustá la altura real) */
:root { --topbar-h: 70px; } /* si tu topbar mide 64px, poné 64 */

/* 2) Columnas/padres sin “trabar” el alto de sus hijos */
.app, .layout, .content, .col-chat {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
/* Fallback si 100dvh no está soportado */
@supports not (height: 100dvh) {
  .app, .layout, .content, .col-chat { height: 100vh; }
}

/* 3) Que la columna del chat reste el topbar y no tenga overflow propio */
.col-chat {
  height: calc(100dvh - var(--topbar-h));
  min-height: 0;
  overflow: hidden;
}
@supports not (height: 100dvh) {
  .col-chat { height: calc(100vh - var(--topbar-h)); }
}

/* 4) El chat se encastra en su columna: header / mensajes / input */
.chat{
  display: grid;
  grid-template-rows: auto 1fr auto;  /* header, lista, input */
  height: 100%;
  max-height: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;                 /* deja 0 si lo querés recto */
  background: #0b1222;
  overflow: hidden;                    /* el único scroll vive en .msgs */
}

/* 5) Header fijo y consistente */
.chat-head{
  min-height: 42px;
  border-bottom: 1px solid var(--border);
  background: inherit;
}

/* 6) La lista de mensajes scrollea dentro del hueco */
#chatMensajes .msgs{
  min-height: 0;        /* CLAVE: permite que el grid “aplane” */
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #ebe8c7;
  background-image: url("../../img/fondoChat.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 7) Input fijo abajo */
.chat-input{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  background: inherit;
  border-radius: 0 0 12px 12px;
}

.chat-input-inner {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 0 0 12px 12px;
}

.chat-input input{
  background:#0b1426; border:1px solid var(--border);
  border-radius:10px; padding:10px; color:#cbd5e1;
}

/* 8) iOS/Android barras de sistema: evita que tape el input */
@supports (padding: max(0px)) {
  .chat-input { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}











:root{
  /* cuánto sube el borde inferior en DESKTOP */
  --panel-gap-bottom: 60px;   /* probá 50 / 60 según gusto */
}

/* ========= DESKTOP (≥ 769px) ========= */
@media (min-width: 769px){

  .col-identidades,
  .col-ambitos,
  .col-chat{
    display: flex;
    flex-direction: column;
   
  }

  /* tarjetas más bajas, pegadas arriba y recortadas abajo */
  .col-identidades .id-card,
  .col-ambitos   .amb-card,
  .col-chat      .chat{
    flex: 1 1 auto;
    height: calc(100% - var(--panel-gap-bottom));
    margin-top: 0;
    margin-bottom: var(--panel-gap-bottom);
  }

  /* scroll interno en listas / mensajes */
  .id-card .id-accordion,
  .amb-card .amb-accordion,
  .chat .msgs{
    min-height: 0;
    overflow: auto;
  }
}
@media (max-width: 768px) {
  /* Evitamos que el cuerpo scrollee hacia abajo de forma global */
  html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

/* ========= MOBILE (≤ 768px) ========= */
/* aquí NO recortamos nada, full-height como antes */
/* === Ajuste SOLO para pantallas pequeñas (chat más arriba) === */
/* ========= MOBILE (≤ 768px) ========= */
/* === Ajuste SOLO para pantallas pequeñas (chat más arriba) === */
/* ====== MOBILE ====== */







.msg-status-dot {
  display: inline-block;
  width: 11px;              /* más grande */
  height: 11px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* Colores: iguales pero más visibles */
.msg-status-sent {
  background: #999;         /* enviado */
}

/* Nuevo: 'saved' corresponde al estado guardado en DB (1) */
.msg-status-saved {
  background: #999;         /* guardado */
}

.msg-status-delivered {
  background: #2563eb;      /* entregado */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

.msg-status-read {
  background: #22c55e;      /* leído */
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
}

/* ===== CHECK ICONS (desktop + mobile) ===== */
.msg-status-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  vertical-align: middle;
  color: #9CA3AF; /* default gray */
}

.msg-status-check .msg-check-svg { display: block; }

.msg-status-check.msg-status-sent { color: #9CA3AF; }       /* single gray */
.msg-status-check.msg-status-saved { color: #1D4ED8; }       /* single blue (saved) */
.msg-status-check.msg-status-delivered { color: #6B7280; }  /* base gray (left) */
.msg-status-check.msg-status-read { color: #1D4ED8; }       /* double blue */

/* delivered: left check gray, right check blue */
.msg-status-check.msg-status-delivered .msg-check-svg path:last-child{
  stroke: #2563EB !important;
}

/* read: ambos checks azules (forzado) */
.msg-status-check.msg-status-read .msg-check-svg path{
  stroke: #1D4ED8 !important;
}

/* tamaño y posicion para no romper la meta */
#msgs .msg .msg-meta .msg-status-check { margin-right: 6px; }

/* Mobile fixes: no background box, no tap highlight, SVG stroke control */
.msg-status-check {
  background: transparent !important;
  padding: 0 !important;
  line-height: 0;
  border-radius: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

.msg-status-check .msg-check-svg { display: block; }
.msg-status-check .msg-check-svg path {
  stroke: currentColor !important; /* aseguramos que el trazo use el color del span */
  stroke-width: 2 !important;      /* trazo un poco más grueso */
}

/* aumentar contraste sobre burbujas claras/oscuras: darle un sutil outline mediante filter */
.msg-status-check.msg-status-delivered .msg-check-svg,
.msg-status-check.msg-status-read .msg-check-svg {
  /* removed drop-shadow to avoid rectangular halo on some mobile browsers */
  filter: none !important;
}

/* Force no background/border/shadow on the container span */
.msg-status-check {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Ensure the SVG itself is transparent and only the stroke is visible */
.msg-status-check .msg-check-svg {
  background: transparent !important;
  display: inline-block;
}

.msg-status-check .msg-check-svg path { fill: none !important; }

/* Meta: fecha más discreta y alineada */
/* Punto + fecha */
.msg-meta {
  margin-top: 2px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;                   /* espacio entre punto y fecha */
  font-size: 11px;
  opacity: 0.8;
}

.msg-meta-text {
  font-size: 11px;
  opacity: .8;
}











/* La fila del mensaje sirve de referencia, no cambia tamaños */
.msg {
  position: relative;
}

/* RESET total del botón + estilo de icono flotante */
button.msg-menu-btn-icon-mensajes {
  all: unset;
  position: absolute;
  top: 0px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.2s ease;
  background: transparent;
  z-index: 10;
}

button.msg-menu-btn-icon-mensajes:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}

/* Menú desplegable */
.msg-menu-dropdown {
  position: absolute;
  top: 30px;
  right: 6px;
  min-width: 140px;
  padding: 6px 0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  border: 1px solid #e0e0e0;
  font-size: 14px;
  z-index: 1000;
  display: none;
  list-style: none;
  margin: 0;
}
.msg-menu-dropdown.open {
  display: block;
}
.msg-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  transition: background 0.15s ease;
  width: 100%;
}
.msg-menu-item:hover {
  background: #f2f4f8;
}
.msg-menu-item.danger {
  color: #e53935;
}
.msg-menu-delete {
  color: #e53935;
}

/* Opcional: solo para distinguir acciones */
.msg-menu-item.danger{
  color: #e53935;
}

.msg-menu-item.secondary{
  opacity: .85;
}

.msg-menu-icon {
  font-size: 18px;
  line-height: 1;
  color: inherit;
  position: relative;
}

/* ===== FIX: evitar que .msg-meta se re-defina y encime ===== */
.msg-meta{
  position: absolute;
  right: 12px;
  bottom: 4px;
  margin: 0 !important;     /* mata los margin-top que la enciman */
  align-self: auto !important;
}

/* ===== FIX ANCLAJE: que .msg no ocupe todo el ancho ===== */
.msg{
  display: inline-flex;     /* clave: shrink-to-fit */
  max-width: 70%;           /* igual que tu burbuja de texto */
}

/* Recibidos: el contenedor se va a la izquierda */
.msg:not(.me){
  align-self: flex-start;
}

/* Enviados: el contenedor se va a la derecha */
.msg.me{
  align-self: flex-end;
}

/* Reserva inferior SOLO para texto (porque tu media ya tiene piso 22px) */
.msg-body:not(.msg-body-image):not(.msg-body-video){
  padding-bottom: 18px;
}

/* ===== 3 puntitos: SIEMPRE BLANCOS ===== */
.msg button.msg-menu-btn-icon-mensajes,
.msg .msg-menu-icon{
  color: rgba(255,255,255,.95) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* ===== FECHA: recibidos blanco, enviados gris ===== */
.msg:not(.me) .msg-meta,
.msg:not(.me) .msg-meta-text{
  color: rgba(255,255,255,.92) !important;
  opacity: .95 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

.msg.me .msg-meta,
.msg.me .msg-meta-text{
  color: rgba(0,0,0,.55) !important;  /* gris sobre celeste */
  opacity: .9 !important;
  text-shadow: none !important;
}

  }
/* ====== AJUSTE MOBILE: SCROLL SOLO EN LOS MENSAJES ====== */
/* ====== AJUSTE MOBILE: SCROLL SOLO EN LOS MENSAJES ====== */
@media (max-width: 768px){

  /* Chat con 3 filas: header | mensajes | input */
  #col-chat .chat{
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: calc(100dvh - 120px);
    max-height: calc(100dvh - 120px);
    overflow: hidden;
    min-height: 0;
  }

  /* SOLO los mensajes scrollean */
  #msgs{
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

#msgs{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ===============================
   FIX FINAL (NO BORRAR NADA ARRIBA)
   Evita burbujas aplastadas + meta encimada
   =============================== */

/* 1) Contenedor del mensaje: shrink y referencia para absolute */
#msgs .msg{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  max-width: 70%;
}

/* Alineación por lado (sin cambiar tu lógica de clases) */
#msgs .msg.me{ align-self: flex-end; }
#msgs .msg:not(.me){ align-self: flex-start; }

/* 2) Meta: forzamos UNA forma consistente (absolute) */
#msgs .msg .msg-body .msg-meta{
  position: absolute !important;
  right: 12px !important;
  bottom: 4px !important;
  margin: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;

  white-space: nowrap !important;
  line-height: 1 !important;
}

/* 3) Burbuja de TEXTO: piso + espacio a la derecha para hora+dot */
#msgs .msg .msg-body:not(.msg-body-image):not(.msg-body-video):not(.msg-body--emoji){
  padding-bottom: 18px !important;  /* piso para la fecha */
  padding-right: 56px !important;   /* evita choque con meta */
  min-height: 34px !important;      /* evita deformación en mensajes cortos */
  line-height: 1.25 !important;
}

/* 4) Puntito más chico para no deformar burbujas cortas */
#msgs .msg .msg-status-dot{
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
}
/* ===== Fix burbujas demasiado angostas (mensajes cortos / con salto) ===== */

/* que la burbuja tenga un mínimo razonable */
#msgs .msg .msg-body:not(.msg-body--emoji){
  min-width: 92px;            /* ajustá 80–120 según gusto */
}

/* que no se rompa "ho\nla" como si fuera poema */
#msgs .msg .msg-body:not(.msg-body--emoji){
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* y que la meta no “empuje” visualmente: más cerca del borde */
#msgs .msg .msg-body .msg-meta{
  right: 8px !important;
  bottom: 3px !important;
}



/* ===== FIX: burbujas no ultra-angostas (sin romper meta absolute) ===== */

/* 1) Contenedor se ajusta a la burbuja (para que la meta quede adentro) */
#msgs .msg{
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 70% !important;
}

/* 2) La burbuja debe poder tomar un ancho razonable y envolver normal */
#msgs .msg .msg-body:not(.msg-body--emoji){
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;

  white-space: normal !important;      /* evita el “una palabra por línea” */
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* 3) Si querés un mínimo, que sea suave (no 92px que puede quedar raro) */
#msgs .msg .msg-body:not(.msg-body--emoji){
  min-width: 140px !important;   /* probá 120–180 */
}


@media (min-width: 769px){
  #msgs .msg .msg-body.msg-body-image img.chat-img-msg{
    max-width: 320px;
    height: auto;
    width: auto;
    
  }
}











/* ===============================
   EDICIÓN INLINE DE MENSAJES
   (NO rompe estilos existentes)
   =============================== */

/* Ocultar / mostrar */
.hidden {
  display: none !important;
}

/* Contenedor de edición */
.msg .message-edit {
  margin-top: 4px; /* mínimo, no cambia layout */
}

/* Textarea de edición (hereda look del mensaje) */
.msg .message-edit textarea {
  width: 100%;
  box-sizing: border-box;

  /* mobile-safe */
  resize: none;
  min-height: 32px;
  max-height: 40vh;
  overflow-y: auto;

  /* estética neutra (no pisa burbuja) */
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.95);

  font: inherit;
  color: inherit;
  outline: none;
}

/* Acciones (✔ ✖) */
.msg .message-edit .edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

/* Botones edición */
.msg .message-edit .btn-save,
.msg .message-edit .btn-cancel {
  min-width: 36px;
  min-height: 36px;

  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.08);
  color: inherit;
  cursor: pointer;
  font-size: 14px;
}

/* Hover solo desktop */
@media (hover: hover) {
  .msg .message-edit .btn-save:hover,
  .msg .message-edit .btn-cancel:hover {
    background: rgba(0,0,0,0.14);
  }
}

/* Marca visual "editado" (opcional, sutil) */
.msg.msg-edited .msg-meta-text::after {
  content: " · editado";
  opacity: 0.6;
  font-size: 0.85em;
}

/* ==================== RESPONSIVE: DESKTOP CON HOVER ==================== */
@media (hover: hover) and (pointer: fine) {
  /* Botón: oculto por defecto en desktop */
  .msg-menu-btn-icon-mensajes {
    opacity: 0 !important;
    pointer-events: none;
  }

  /* Menú: siempre oculto hasta que JS agregue .open */
  .msg-menu-dropdown {
    display: none !important;
  }

  /* Al hacer hover en el mensaje, mostrar botón */
  .msg:hover .msg-menu-btn-icon-mensajes {
    opacity: 1 !important;
    pointer-events: auto;
  }

  /* Mostrar menú solo si JS agrega .open */
  .msg-menu-dropdown.open {
    display: block !important;
  }
}




/* ==================== RESPONSIVE: MOBILE (sin hover) ==================== */
@media (max-width: 768px) {
  /* En mobile, mostrar el botón siempre para acceso táctil */
  .msg-menu-btn-icon-mensajes {
    opacity: 1 !important;
    pointer-events: auto;
  }
}




/* FLECHA DE RETROCESO EN PANEL CHAT*/
/* ANCLA: shrink absoluto */
.toggle-retroceso{
  display: inline;              /* ← NO inline-flex */
  width: auto;
  height: auto;

  padding: 0;
  margin: 0;

  line-height: 0;               /* ← CLAVE: no genera fila */
  white-space: nowrap;

  vertical-align: middle;
 
  grid-column: 2;   /* MISMA columna que el botón */
  grid-row: 1;      /* MISMA fila */


}

/* SVG: tamaño real de la flecha */
.toggle-retroceso > .icon-retroceso{
  display: inline-block;        /* ← NO block */
  width: 26px;                  /* largo de la flecha */
  height: 20px;

  vertical-align: middle;
}

/* ======================== MODAL DE REACCIONES ======================== */
.reactions-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease-in-out;
  backdrop-filter: blur(2px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reactions-modal-content {
  background: linear-gradient(135deg, #1a2235 0%, #2d3e5f 100%);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 400px;
  justify-content: center;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reaction-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 28px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 50px;
}

.reaction-btn:hover {
  background: rgba(30, 229, 255, 0.2);
  border-color: rgba(30, 229, 255, 0.5);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(30, 229, 255, 0.3);
}

.reaction-btn:active {
  transform: scale(0.95);
}

/* ======================== EMOTICONES EN MENSAJES ======================== */
.msg-reactions {
  position: absolute;
  bottom: -15px;
  right: 0;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  max-width: 80%;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  z-index: 10;
  animation: popIn 0.3s ease-out;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.msg-reaction-item {
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.msg-reaction-item:hover {
  transform: scale(1.3) rotate(5deg);
}

.msg-reaction-count {
  font-size: 10px;
  color: #cbd5e1;
  margin-left: -6px;
  position: relative;
  z-index: 1;
}

.msg {
  padding-bottom: 8px;
}

.msg-with-reactions {
  margin-bottom: 12px;
}
/* ==================== PINNED MESSAGE BOX ==================== */
.pinned-box {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 40px 4px 8px;
  background: linear-gradient(135deg, #fef08a 0%, #fef3c7 100%);
  border-bottom: 2px solid #fbbf24;
  border-left: 4px solid #f59e0b;
  color: #92400e;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 32px;
  max-height: 60px;
  overflow: hidden;
  z-index: 20;
  animation: slideDown 0.3s ease-out;
  box-sizing: border-box;
  width: 100%;
}

.pinned-box.hidden {
  display: none;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pinned-box-icon {
  flex-shrink: 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.pinned-box-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  cursor: pointer;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  max-height: 52px;
}

.pinned-box-content:hover {
  opacity: 0.7;
}

.pinned-box-close {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  background: none;
  border: none;
  color: #92400e;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pinned-box-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #78350f;
}

/* ==================== JUMP TO REPLIED MESSAGE ==================== */
.msg-jump-highlight .msg-body {
  animation: msgJumpPulse 1s ease;
}

@keyframes msgJumpPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.0);
  }
  30% {
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.95);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.0);
  }
}