/* ── CHAT INTERNO + CAMPANA DE NOTIFICACIONES ──────────────────────────
   Usa las variables de tema de aurora.css (--bg1/--text0/--blue…), así que
   sigue al tema claro/oscuro y a la escala tipográfica sin nada extra. */

/* ── Campana (barra superior) ────────────────────────────────────────── */
.noti-wrap { position: relative; display: flex; align-items: center; }

.noti-btn {
  position: relative; background: none; border: none; cursor: pointer;
  color: var(--text2); padding: 6px; display: flex; align-items: center;
  border-radius: 8px; transition: background .15s, color .15s;
}
.noti-btn:hover { background: var(--bg2); color: var(--text0); }
.noti-btn i { font-size: 1.5rem; }
.noti-btn.tiene { color: var(--blue); }

.noti-badge {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff;
  font-size: .95rem; font-weight: 600; line-height: 16px; text-align: center;
}

.noti-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px;
  max-width: calc(100vw - 24px); background: var(--bg1);
  border: 1px solid var(--bd); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28); z-index: 500;
  display: none; flex-direction: column; overflow: hidden;
}
.noti-panel.open { display: flex; }

.noti-panel-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--bd);
  font-weight: 600; color: var(--text0); font-size: 1.15rem;
}
.noti-link {
  background: none; border: none; cursor: pointer; color: var(--blue);
  font-size: 1.02rem; padding: 0; text-align: right;
}
.noti-link:hover { text-decoration: underline; }

.noti-lista { max-height: 320px; overflow-y: auto; }

.noti-item {
  width: 100%; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; background: none; border: none; cursor: pointer;
  text-align: left; border-bottom: 1px solid var(--bd);
}
.noti-item:hover { background: var(--bg2); }
.noti-item > i { font-size: 1.3rem; color: var(--blue); margin-top: 2px; flex: 0 0 auto; }
.noti-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.noti-item-tit { font-weight: 600; color: var(--text0); font-size: 1.1rem; }
.noti-item-sub {
  color: var(--text2); font-size: 1.05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.noti-item-fecha { color: var(--text2); font-size: .95rem; flex: 0 0 auto; }

.noti-vacio { padding: 22px 14px; text-align: center; color: var(--text2); font-size: 1.1rem; }

.noti-permiso {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--bd); background: var(--bg2);
  color: var(--text2); font-size: 1.02rem;
}
.noti-permiso i { font-size: 1.3rem; color: var(--blue); }
.noti-permiso span { flex: 1; }

/* ── Módulo de chat interno ──────────────────────────────────────────── */
/* El contenedor .tcon ya es flex en columna con min-height:0 (aurora.css), así
   que aquí basta con ocupar lo que quede y volver a poner min-height:0 para que
   los hijos con scroll propio no desborden.
   El z-index lo pone por encima del canvas de la red neuronal, que va detrás. */
#tcon-mensajeria { position: relative; }
.msg-layout {
  display: flex; flex: 1 1 auto; min-height: 0;
  position: relative; z-index: 1;
}

/* Columna de contactos. Transparente a propósito: así la red neuronal del fondo
   se ve también por aquí, igual que en el chat y en Manuales. Lo único que se
   queda opaco es el cuadro de redactar, para que el texto no compita con ella. */
.msg-panel {
  flex: 0 0 280px; display: flex; flex-direction: column; min-height: 0;
  position: relative; background: transparent;
}

/* Separador entre los compañeros y la conversación: línea fina de acento que se
   desvanece por los extremos. Va en un pseudo-elemento (y no en border-right)
   porque un borde no admite degradado. */
.msg-panel::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom,
              transparent 0%, var(--blue) 22%, var(--blue) 78%, transparent 100%);
  opacity: .7; pointer-events: none;
}
.msg-panel-top { padding: 16px 14px 10px; border-bottom: 1px solid var(--bd); }
.msg-panel-top h3 {
  margin: 0 0 10px; font-size: 1.35rem; font-weight: 600; color: var(--text0);
  display: flex; align-items: center; gap: 8px;
}
.msg-panel-top h3 i { color: var(--blue); }
.msg-buscar { position: relative; display: flex; align-items: center; }
.msg-buscar i { position: absolute; left: 9px; color: var(--text2); font-size: 1.15rem; }
.msg-buscar .finput { width: 100%; padding-left: 30px; }

.msg-contactos { flex: 1; overflow-y: auto; min-height: 0; }

.msg-contacto {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: none; border: none; border-bottom: 1px solid var(--bd);
  cursor: pointer; text-align: left;
}
.msg-contacto:hover { background: var(--bg2); }
.msg-contacto.activo { background: var(--bg2); box-shadow: inset 3px 0 0 var(--blue); }

.msg-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--bd); color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 600; position: relative;
}
/* Punto verde = conectado ahora mismo (presencia de auth.py) */
.msg-avatar.on::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--bg1);
}
.msg-contacto-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.msg-contacto-nom { color: var(--text0); font-size: 1.15rem; font-weight: 500; }
.msg-contacto-prev {
  color: var(--text2); font-size: 1.02rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-pend {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--blue); color: #fff;
  font-size: .98rem; font-weight: 600; line-height: 18px; text-align: center;
}

/* Columna de conversación */
.msg-conversacion {
  flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  position: relative;
}
/* Hasta que no se elige a alguien solo se ve el cartel de bienvenida */
.msg-conversacion .msg-cab,
.msg-conversacion .msg-hilo,
.msg-conversacion .msg-redactar { display: none; }
.msg-conversacion.abierta .msg-cab { display: flex; }
.msg-conversacion.abierta .msg-hilo { display: block; }
.msg-conversacion.abierta .msg-redactar { display: block; }
.msg-conversacion.abierta .msg-placeholder { display: none; }

.msg-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; color: var(--text2); padding: 30px;
  text-align: center;
}
.msg-placeholder i { font-size: 3rem; opacity: .45; margin-bottom: 6px; }
.msg-placeholder p { margin: 0; font-size: 1.2rem; }
.msg-placeholder-sub { font-size: 1.05rem; opacity: .8; }

.msg-cab {
  align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--bd); background: transparent;
}
.msg-volver { display: none; }
.msg-cab-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-cab-nom { color: var(--text0); font-size: 1.3rem; font-weight: 600; }
.msg-cab-est { color: var(--text2); font-size: 1.02rem; }
.msg-cab-privado {
  display: flex; align-items: center; gap: 5px; color: var(--text2);
  font-size: 1rem; padding: 4px 9px; border: 1px solid var(--bd); border-radius: 999px;
}

.msg-hilo {
  flex: 1; overflow-y: auto; min-height: 0; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.msg-conversacion.abierta .msg-hilo { display: flex; }

.msg-burbuja {
  max-width: min(560px, 74%); padding: 8px 12px; border-radius: 14px;
  border: 1px solid var(--bd); background: var(--bg1); color: var(--text0);
  font-size: 1.15rem; line-height: 1.45; word-wrap: break-word;
}
.msg-burbuja.mia {
  align-self: flex-end; background: var(--blue); border-color: transparent;
  color: #fff; border-bottom-right-radius: 4px;
}
.msg-burbuja.suya { align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-txt { white-space: pre-wrap; }
.msg-hora { font-size: .95rem; opacity: .7; margin-top: 3px; text-align: right; }

.msg-adj {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 5px 10px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  color: inherit; font-size: 1.05rem; font-family: inherit;
}
.msg-burbuja.suya .msg-adj { background: var(--bg2); border-color: var(--bd); }
.msg-adj:hover { filter: brightness(1.1); }
.msg-adj-peso { opacity: .7; font-size: .95rem; }

/* Imagen dentro de una burbuja: se ve entera, con tope de alto, y al pulsarla
   se abre en el visor a tamaño completo. */
.msg-img {
  display: block; margin-top: 6px; max-width: 100%; max-height: 320px;
  border-radius: 10px; cursor: zoom-in; background: var(--bg2);
  min-height: 40px; min-width: 40px;
}
.msg-img-err {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: var(--bg2); color: var(--text2); font-size: 1.02rem;
}

.msg-redactar { border-top: 1px solid var(--bd); padding: 10px 14px 14px; background: var(--bg1); }
.msg-adj-caja { align-items: center; gap: 8px; margin-bottom: 8px; }
.msg-adj-caja .finput { flex: 1; }
.msg-adj-activo {
  align-items: center; gap: 8px; margin-bottom: 8px; padding: 5px 10px;
  border: 1px dashed var(--bd); border-radius: 9px;
  color: var(--text2); font-size: 1.05rem; width: fit-content; max-width: 100%;
}
/* Miniatura de la imagen pendiente de enviar */
.msg-previo {
  width: 34px; height: 34px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--bd); flex: 0 0 auto;
}

/* ── Menú del clip ───────────────────────────────────────────────────── */
.msg-adj-wrap { position: relative; flex: 0 0 auto; }
.msg-clip.activo { color: var(--blue); }

/* Se despliega HACIA ARRIBA (el cuadro de texto está abajo del todo). La
   animación va con transición sobre opacidad + desplazamiento, y con
   visibility para que no capture el ratón mientras está oculto. */
.msg-adj-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20;
  min-width: 210px; padding: 5px;
  background: var(--bg1); border: 1px solid var(--bd); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(.96); transform-origin: bottom left;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .9, .3, 1.2), visibility .16s;
}
.msg-adj-menu.abierto {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.msg-adj-op {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: none; border-radius: 8px; cursor: pointer;
  background: none; color: var(--text0); font-family: inherit; font-size: 1.12rem;
  text-align: left;
}
.msg-adj-op:hover { background: var(--bg2); }
.msg-adj-op i { font-size: 1.3rem; color: var(--blue); flex: 0 0 auto; }

/* Cada opción entra escalonada, para que el despliegue se lea de arriba abajo */
.msg-adj-menu .msg-adj-op {
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.msg-adj-menu.abierto .msg-adj-op { opacity: 1; transform: none; }
.msg-adj-menu.abierto .msg-adj-op:nth-child(1) { transition-delay: .03s; }
.msg-adj-menu.abierto .msg-adj-op:nth-child(2) { transition-delay: .07s; }
.msg-adj-menu.abierto .msg-adj-op:nth-child(3) { transition-delay: .11s; }

/* Quien prefiera no ver animaciones, no las ve. */
@media (prefers-reduced-motion: reduce) {
  .msg-adj-menu, .msg-adj-menu .msg-adj-op { transition-duration: .01ms; }
}
.msg-entrada { display: flex; align-items: flex-end; gap: 8px; }
/* Contorno de acento para que el cuadro de texto destaque sobre la red del
   fondo; al enfocarlo se refuerza con un halo del mismo color. */
.msg-entrada textarea {
  flex: 1; resize: none; max-height: 140px; padding: 9px 12px;
  border: 1px solid var(--blue); border-radius: 12px;
  background: var(--bg0); color: var(--text0);
  font-family: inherit; font-size: 1.15rem; line-height: 1.4;
  transition: box-shadow .15s;
}
.msg-entrada textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .18);
}

.msg-vacio { padding: 22px 14px; text-align: center; color: var(--text2); font-size: 1.1rem; }

/* En pantallas estrechas las dos columnas se turnan: la conversación se abre
   ENCIMA de la lista (absoluta, ocupando todo), y el botón "volver" la cierra.
   Así no hace falta ocultar la lista con selectores frágiles. */
@media (max-width: 720px) {
  /* A pantalla completa no separa nada: la línea de acento sobra. */
  .msg-panel { flex: 1 1 100%; }
  .msg-panel::after { display: none; }
  .msg-conversacion { display: none; }
  .msg-conversacion.abierta {
    display: flex; position: absolute; inset: 0; background: var(--bg0); z-index: 5;
  }
  .msg-volver { display: flex; }
  .msg-burbuja { max-width: 86%; }
}