/* ==========================================================================
   LeadSync - Columna del chat
   El area de mensajes y el boton de "ir al final" con su contador.

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

/* --- Chat --- */
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* La franja de la ventana se adapta al ancho de ESTA columna, no al de la pantalla: con
     el panel lateral abierto la columna es estrecha aunque la ventana sea ancha. */
  container: chat / inline-size;
}
.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.conversation {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  transition: padding-right .2s ease;
}

/* Panel de depuración fijado: se achica el CUERPO del chat (mensajes y sus
   barras) mediante el padding de la conversación, pero la cabecera y el composer
   se devuelven a lo ancho completo con un margen negativo (el panel absoluto va
   del borde inferior de la cabecera al superior del composer, así que no los
   pisa). El margen negativo se usa porque `.messages` es un flex-item que crece
   y no responde a margin-right; el padding del contenedor sí lo encoge. */
.conversation.debug-pinned { padding-right: var(--debug-w); }
.conversation.debug-pinned .chat-header,
.conversation.debug-pinned .composer {
  margin-right: calc(-1 * var(--debug-w));
}
.conversation.debug-pinned .scroll-bottom { right: calc(24px + var(--debug-w)); }

/* El botón flota SIEMPRE 16px sobre el dock (--dock-h ya incluye la barra de respuesta
   cuando está abierta y el alto real del composer) Y sobre la barra de redacción, que flota
   ahí en medio cuando está abierta (`--redaccion-h`, 0 cuando no lo está): sin casos
   especiales, los dos sumandos salen de observadores. */
.chat-header,
.composer {
  transition: margin-right .2s ease;
}

/* --- Botón "ir al final" con contador de mensajes nuevos --- */
.scroll-bottom {
  position: absolute;
  right: 24px;
  bottom: calc(var(--dock-h, 68px) + var(--redaccion-h, 0px) + 16px);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--shadow);
  z-index: 5;
  transition: opacity .18s ease, transform .18s ease, background-color .15s ease, color .15s ease;
}
.scroll-bottom:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.scroll-bottom.hidden { display: none !important; }
.scroll-bottom .ic {
  width: 22px;
  height: 22px;
}
.scroll-bottom-badge {
  position: absolute;
  top: -7px;
  right: -3px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scroll-bottom-badge.hidden { display: none !important; }

/* item R6: la cabecera va con MIN-HEIGHT, no con height. Desde que los badges tienen su
   propia fila (items 6 y 7) el bloque de títulos son TRES renglones —badges, nombre,
   teléfono— y en una caja de alto fijo se salían por arriba: por eso el nombre aparecía
   pisado por los chips (b_22.png). Con min-height la cabecera crece lo que haga falta y
   se queda en 60px cuando no hay badges, que es el caso normal. */
.chat-header {
  /* EL LADO DE UN BOTÓN DE ICONO DE ESTA CABECERA, EN UN SOLO SITIO (item B49).
     Lo consumen el propio botón y el SUELO de la caja de acciones, que necesita saber
     cuánto ocupan los dos que nunca se van al menú. Antes el suelo llevaba el 34 escrito a
     mano y el comentario avisaba: "si cambian, este suelo cambia con ellos". Cambiaron —en
     móvil los botones son de 44— y el suelo se quedó corto, así que el `overflow: hidden`
     recortaba el icono del panel por la izquierda. Con la cuenta colgando de esta variable,
     la media query cambia UN número y el suelo la sigue sola. */
  --btn-cabecera: 34px;

  min-height: 60px;

  /* Escala del manual (4-8-12-16-24), no valores a ojo: 8px de aire vertical y 16px de
     margen lateral, que es el padding estándar de un item de lista y lo alinea con el
     resto de la consola. Antes era 6/18, que no está en la escala y no casaba con nada. */
  padding: 8px 16px;
  position: relative;

  /* la barra de búsqueda se posiciona contra ella */
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* El botón toma su lado de la variable de arriba, y no del `.icon-btn` global, para que el
   suelo de las acciones y el tamaño real no puedan separarse nunca. */
.chat-header .icon-btn {
  width: var(--btn-cabecera);
  height: var(--btn-cabecera);
}

/* El reparto del ancho, que era el otro fallo: sin estas dos declaraciones las acciones
   crecían con su contenido (el botón "Transferir" y el switch del bot) y estrujaban al
   bloque de títulos hasta 30px — el nombre del cliente desaparecía antes que un botón. */

/* EL NOMBRE DEL CLIENTE TIENE SUELO. Sin un min-width, el bloque de títulos encoge hasta
   cero y las acciones nunca llegan a "no caber": crecen a costa de él y la barra que mide
   el desbordamiento no se entera de nada (era el fallo de b_27). Con estos 140px, cuando
   el sitio se acaba quien deja de caber son las ACCIONES, y ahí sí actúa overflowbar.js.
   160 es lo que ocupan un nombre normal y su teléfono debajo sin cortarse a la mitad; por
   debajo de eso, la cabecera deja de decir con quién estás hablando, que es su único
   trabajo. Cuanto más alto es este suelo, antes empieza a llenarse el menú — que es
   exactamente el comportamiento que se quiere. */
.chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 160px;

  /* NO CRECE, Y EL HUECO SOBRANTE SE LO COME EL MARGEN. Con `flex: 1 1 auto` este bloque
     se quedaba TODO el espacio libre y dejaba a la caja de acciones con lo justo, así que
     la barra que mide el desbordamiento concluía que no cabía casi nada y mandaba botones
     al menú incluso sobrando sitio: en "Mensajes guardados" salía el menú de tres puntos
     con la lupa dentro y media cabecera vacía al lado.
     Con `margin-right: auto` las acciones siguen pegadas a la derecha —que es lo que
     conseguía el `flex-grow`— pero el sobrante ya no se lo lleva nadie: la caja de
     acciones recibe su ancho natural y la barra solo esconde cuando de verdad falta. Los
     títulos conservan su suelo de 160px, así que siguen cediendo antes que un botón. */
  flex: 0 1 auto;
  margin-right: auto;
}
.chat-header-actions {
  flex: 0 1 auto;

  /* SUELO DE LOS DOS BOTONES FIJOS (panel y tres puntos). No participan en el
     desbordamiento —sin `data-of-label` la barra no se los puede llevar al menú—, pero
     con el suelo en 0 la caja llegaba a medir 0px y el `overflow: hidden` se los comía:
     no desaparecían del DOM, los recortaba el navegador. Y perder el botón de "más" es lo
     peor, porque es donde ha ido a parar todo lo demás. Medido: con suelo 0, a lista
     ancha la caja quedaba en 0px y los dos botones fuera.

     NO se usa `min-content`: el mínimo de un flex en fila es la suma de TODOS los hijos,
     incluidos los que deberían irse al menú, así que la caja exigía el ancho de todo y
     nunca "no cabía" nada — la barra no escondía nada y la cabecera se desbordaba.

     EL SUELO SE CALCULA, NO SE ESCRIBE (item B49). Antes eran dos números a mano —34 y 12—
     con un comentario pidiendo que alguien se acordara de cambiarlos. En móvil el botón
     pasa a 44px y nadie se acordó: el suelo se quedaba 20px corto y el `overflow: hidden`
     de aquí abajo recortaba el icono del panel por la izquierda. Él lo vio en su teléfono.

     Ahora sale de `--btn-cabecera` (el mismo que le da tamaño al botón) y del gap de esta
     barra, que son los dos botones fijos con su separación: panel y tres puntos. */
  min-width: calc(var(--btn-cabecera) * 2 + var(--gap-acciones));
  overflow: hidden;
}

/* AQUÍ ESTABA LA RAÍZ DE "TODO SE PEGA MÁS Y MÁS". Por defecto un hijo flex tiene
   `flex-shrink: 1`, así que cuando faltaba sitio los botones NO desbordaban: se
   COMPRIMÍAN. Y comprimidos siempre cabían, de modo que la comprobación de desbordamiento
   daba "sí cabe" y no se mandaba nada al menú — mientras la fila se veía cada vez más
   apretada. Con `flex: 0 0 auto` cada botón mide lo que mide, la barra desborda de verdad
   y ahí sí actúa overflowbar.js: el espaciado y el tamaño se quedan constantes y lo que
   cambia es CUÁNTOS botones se ven, que es como se hace un responsive que se sostiene. */
.chat-header-actions > * { flex: 0 0 auto; }
.chat-phone {
  font-weight: 600;
  font-size: 15px;
}
.chat-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

/* --- Acordeón de la cabecera ----------------------------------------------
   Plegada, la cabecera deja solo la fila de badges: el estado de la conversación es lo
   único que hay que tener SIEMPRE delante, y el nombre y el teléfono ya se leyeron al
   entrar. Devuelve dos líneas de alto al chat, que en tablet es donde se agradece.

   SE INTENTÓ PRIMERO con el truco de `grid-template-rows: 1fr -> 0fr`, que es la forma
   moderna de animar un alto automático. AQUÍ NO COLAPSA: se probó forzando `0fr` a mano,
   con `minmax(0, 0fr)` y con `min-height: 0` en el hijo, y la fila se quedaba en sus
   33,8px en los tres casos. En cambio `height: 0` sí la cierra (la cabecera pasa de 71,4
   a 50,7), así que lo que falla es el truco, no la estructura.

   Se anima con `max-height`, que aquí sí sirve porque el alto NO es incierto: son dos
   líneas de texto con `white-space: nowrap`, o sea que nunca envuelven. El tope se pone
   cerca de la medida real (34px) y no en un número grande al azar: con un tope de 200px,
   el cierre no se vería hasta pasada media animación —la altura no empieza a bajar hasta
   que el tope cruza el alto real— y parecería que el botón tarda en responder. */
.chat-plegable {
  max-height: 48px;
  overflow: hidden;
  min-width: 0;

  /* `min-height: 0` porque es un hijo flex de `.chat-titles`, que va en columna: ahí vale
     `auto` y un hijo flex no baja de su contenido. */
  min-height: 0;
  transition: max-height 180ms ease, opacity 140ms ease;
}
.chat-header.compacta .chat-plegable {
  max-height: 0;
  opacity: 0;
}

/* Plegada, la cabecera puede bajar su suelo Y su aire vertical: los 60px y los 8px de
   padding están para que quepan tres filas, y compacta solo queda una. Sin esto el
   acordeón cerraba pero la cabecera seguía midiendo lo mismo, así que no devolvía ni un
   pixel al chat — que es su único motivo de existir.
   El padding LATERAL no se toca: es el que alinea la cabecera con la lista de al lado. */
.chat-header.compacta {
  min-height: 40px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* `min-height: 0` + `overflow: hidden` son obligatorios los dos: sin el primero el hijo no
   baja de su contenido y la fila nunca llega a cerrarse; sin el segundo, el texto se sale
   por encima mientras se cierra. */
.chat-plegable-in {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* La flecha gira para decir en qué estado está. Va DESPUÉS del bloque de títulos y con su
   propio hueco: dentro de `.chat-titles` competiría por el ancho con el nombre. */
.chat-compactar {
  flex: 0 0 auto;
  align-self: center;
}
.chat-compactar .ic {
  transition: transform 180ms ease;
}
.chat-header.compacta .chat-compactar .ic { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  .chat-plegable { transition: none; }
  .chat-compactar .ic { transition: none; }
}
.chat-name {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-sub {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge "BOT" de la cabecera (item 20): mismo look que en la lista, no se encoge. */
.header-bot-badge { flex: 0 0 auto; }
#delete-btn:hover { color: var(--danger); }
.state-badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
}
.state-badge.bot_activo {
  background: var(--accent-dim);
  color: var(--author-bot);
}
.state-badge.humano_activo {
  background: var(--badge-human-bg);
  color: var(--warn);
}
.state-badge.esperando_humano {
  background: var(--warn-bg);
  color: var(--warn);
}

/* item 5 + b_5: fila de configuración con control a la derecha (la fila del switch
   hereda el flex de .bot-toggle; esta clase lo aporta para selects/otros controles). */
.cfg-row {
  display: flex;
  align-items: center;
}
.cfg-row > span:first-child {
  flex: 1;
  min-width: 0;
}