/* ==========================================================================
   LeadSync - Herramientas del chat
   La busqueda dentro de la conversacion, el modo seleccion y la modal de reenvio.

   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.
   ========================================================================== */

/* --- Barra de búsqueda dentro de la conversación --- */
.chat-find-bar {
  position: absolute;

  /* Tapa la cabecera ENTERA porque es HIJA suya: inset:0 mide lo que mida ella. Con el
     `height: 60px` de antes se quedaba corta en cuanto la cabecera crecía con la fila de
     badges, y los chips asomaban por debajo (item R6). */
  inset: 0;
  padding: 0 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
}
.chat-find-ic {
  display: inline-flex;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.chat-find-ic .ic {
  width: 18px;
  height: 18px;
}
.chat-find-bar input {
  flex: 1;
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease;
}
.chat-find-bar input:focus { border-color: var(--accent); }
.chat-find-count {
  color: var(--text-dim);
  font-size: 12.5px;
  /* Cifras de ancho fijo: sin esto, el contador cambia de ancho al pasar de 9/12 a 10/12 y
     la barra entera da un tironcito con cada resultado. */
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  /* El suelo es para que "1/9" y "10/12" no muevan los botones de al lado. */
  min-width: 36px;
  text-align: center;
}
/* SIN BUSCAR NO HAY NADA QUE CONTAR, y entonces no ocupa. Con el suelo puesto siempre, el
   hueco de 36px mas sus dos separaciones quedaba en medio como un espacio muerto entre el
   campo y las flechas, y ese sitio lo quiere el campo. Lo vio el: *"no entiendo por que
   chat-find-input no abarca ese espacio que tiene ahi"*. */
.chat-find-count:empty {
  display: none;
}

/* El hueco del icono de una fila de menú admite también un avatar (el popover del ojito):
   el círculo manda su propio tamaño y no debe estirarse al ancho del hueco. */
.msg-menu-ic .avatar {
  width: 18px;
  height: 18px;
  font-size: 8.5px;
}

/* Popovers que solo DICEN algo, sin acciones: "¿quién es este círculo?" y "¿qué es este
   botón del mensaje?". Ninguno necesita el ancho de un menú de acciones.
   Van juntos porque son la misma forma, y con nombres distintos porque son cosas distintas:
   una clase reusada para otra cosa es lo que ya costó caro en NO_REPETIR 33. */
.msg-menu.quien-pop,
.msg-menu.op-pop {
  min-width: 0;
  padding: 6px 4px;
}
.op-pop { max-width: 260px; }
.quien-pop .msg-menu-title,
.op-pop .msg-menu-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  color: var(--text);
  /* Relleno PAREJO: el del título de grupo (6 arriba, 2 abajo) está pensado para encabezar
     filas debajo; aquí el título va solo y quedaba caído hacia abajo (06-10). */
  padding: 4px 12px;
  white-space: normal;
  /* RED DE SEGURIDAD PARA LO QUE NO TIENE ESPACIOS (item B65). `white-space: normal` parte
     por los espacios, y una URL no tiene ninguno: se salía de la caja entera. El acortado lo
     hace `fmtEnlace` en el JS —que conserva el dominio, que es lo que identifica el enlace—,
     pero esto tiene que estar igual: un identificador de opción largo, o un nombre pegado
     sin espacios, romperían la caja por el mismo sitio. */
  overflow-wrap: anywhere;
}
.quien-pop .msg-menu-title + .msg-menu-title,
.op-pop .msg-menu-title + .msg-menu-title {
  color: var(--text-dim);
  font-weight: 600;
  margin-top: -2px;
}

/* El círculo se ve pulsable: cursor de mano y un aro al enfocarlo con el teclado. */
.avatar-quien { cursor: pointer; }
.avatar-quien:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Resaltado de coincidencias de búsqueda. */
mark.search-hit {
  background: var(--hit-bg);
  color: var(--hit-fg);
  border-radius: 3px;
  padding: 0 1px;
}
mark.search-hit.current {
  background: var(--accent);
  color: var(--on-accent);
}

/* --- Barra de modo selección (superpone la cabecera del chat) --- */
.selection-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  padding: 0 16px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 6;
}
.sel-count {
  font-weight: 600;
  flex: 1;
}
.selection-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Burbujas en modo selección. */
.messages.selecting .bubble {
  cursor: pointer;
  user-select: none;
}
.messages.selecting .bubble:hover { filter: brightness(1.06); }
.bubble.selected { box-shadow: 0 0 0 2px var(--accent); }

/* --- Selección múltiple de chats en el sidebar (item 7) --- */
.chat-selection-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.chat-selection-bar .sel-count {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.chat-sel-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.session-list.selecting .session-item {
  cursor: pointer;
  user-select: none;
}
.session-item.selected {
  background: var(--accent-dim);
  box-shadow: inset 3px 0 0 var(--accent);
}
.session-item.selected:hover { background: var(--accent-dim); }

/* --- Modal de reenvío: lista de chats --- */
.fwd-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: opacity .15s ease;
}

/* Mientras se reenvía, se bloquea la lista para evitar envíos duplicados. */
.fwd-list.sending {
  pointer-events: none;
  opacity: .5;
}
.fwd-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background-color .12s ease;
}
.fwd-row:hover { background: var(--bg-hover); }

/* item 20: destino con la ventana de 24 h cerrada. El candado va a la derecha, en su
   propia columna, por eso la fila pasa a rejilla en vez de columna. */
.fwd-row.locked {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  opacity: .5;
  cursor: not-allowed;
}
.fwd-row.locked:hover { background: transparent; }
.fwd-row.locked .fwd-name,
.fwd-row.locked .fwd-sub {
  grid-column: 1;
}
.fwd-lock {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  color: var(--text-dim);
}
.fwd-lock .ic {
  width: 16px;
  height: 16px;
}
.fwd-name { font-weight: 600; }
.fwd-sub {
  font-size: 12px;
  color: var(--text-dim);
}
.fwd-empty {
  color: var(--text-dim);
  text-align: center;
  padding: 18px;
}

/* item 31: imagen desproporcionada — se avisa en vez de pintarla y colgar la consola. */
.media-huge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 260px;
  padding: 12px;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: 10px;
}
.media-huge-ic {
  display: inline-flex;
  color: var(--warn);
}
.media-huge-ic .ic {
  width: 20px;
  height: 20px;
}
.media-huge-txt {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.media-huge-btn {
  border: 1px solid var(--warn);
  background: transparent;
  color: var(--warn);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.media-huge-btn:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); }

/* Textarea (edición de mensajes). */
.modal-textarea {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease;
}
/* SIN TIRADOR: lo ponía `resize: vertical`, que gana al `textarea { resize: none }` global
   de modal.css por especificidad (0,1,0 contra 0,0,1). El alto lo decide el contenido, que
   es lo que hace openModal con autoAltoTextarea. Lo vigila check-textarea-resize.py. */
.modal-textarea:focus { border-color: var(--accent); }