/* ==========================================================================
   LeadSync - Armazon de la aplicacion
   La rejilla principal: barra lateral, columna de conversacion y sus cabeceras.

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

/* --- Layout principal --- */
.app {
  display: flex;
  height: 100vh;

  /* EL ARMAZÓN NO SE DESBORDA. Es una garantía, no un adorno, y viene de un fallo real
     (07-09): la animación de entrada de una sección desplaza la vista 10 px a la derecha, y
     como la vista ocupa todo el ancho, esos 10 px se salían de la página y sacaban una barra
     de scroll HORIZONTAL. Y ahí empieza el bucle: la barra horizontal come 10 px de alto,
     `100vh` NO los descuenta, y entonces aparece también la VERTICAL. Resultado: se puede
     bajar a una franja vacía debajo de la aplicación.

     `clip` y no `hidden` a propósito: `hidden` convierte la caja en un contenedor de scroll
     -y con él el otro eje pasa a `auto` solo-, que es justo el problema que se está
     quitando. `clip` recorta y ya; no hay scroll que ofrecer.

     Lo que se sale de aquí no tiene por qué sufrir: las modales, los toasts y los popovers
     cuelgan de <body> con `position: fixed`, no de este armazón. */
  overflow: clip;
}

/* Divisores arrastrables para redimensionar los paneles. */
.resizer {
  position: relative; /* el ancla de la línea que se pinta (ver ::before) */
  flex: 0 0 auto;
  width: var(--resizer-w);
  cursor: col-resize;
  background: transparent;
  z-index: 8;

  /* SIN ESTO NO HAY ARRASTRE EN TÁCTIL: el navegador se queda el gesto para hacer scroll y
     el `pointermove` deja de llegar a la primera. Es la otra mitad del cambio a eventos de
     puntero de attachResizer. */
  touch-action: none;
}
/* SE PINTA UNA LÍNEA, NO EL DIVISOR ENTERO.
 *
 * Antes se rellenaba los 5-8px de ancho con el verde de marca, y de eso se quejó: una barra
 * gruesa de color por el medio de la consola. El ancho es ÁREA DE AGARRE —hace falta para
 * poder cogerlo con el ratón y con el dedo—, pero lo que se ve no tiene por qué medir lo
 * mismo que lo que se pulsa. La línea va centrada en el eje del divisor. */
.resizer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: transparent;
  transition: background-color .12s ease;
}
.resizer:hover::before,
body.resizing .resizer::before {
  background: var(--accent);
}
.resizer-abs {
  position: absolute;

  /* ARRIBA SIGUE A LA CABECERA, igual que el panel al que pertenece. Aquí había un `60px`
     escrito a mano —el mismo número que el panel ya había dejado de usar por esto mismo—, y
     el divisor asomaba por encima del panel cuando la cabecera crecía. Lo cazó él en una
     captura. Es el mismo número en dos sitios (NO_REPETIR 37): ahora sale del mismo sitio. */
  top: var(--chat-header-h, 60px);
  bottom: var(--dock-h, 68px);

  /* acompaña al panel sobre el dock */
  right: var(--debug-w);
  width: 8px;
  margin-right: -4px;
}
body.resizing {
  cursor: col-resize;
  user-select: none;
}
.sidebar {
  /* ANCLA DEL PANEL DE "NUEVO CHAT" (item A96), que se coloca con `inset: 0` para
     tapar la bandeja entera, cabecera incluida. Sin esto se colocaría contra el
     viewport y taparía también el chat. */
  position: relative;
  width: var(--sidebar-w);
  min-width: 240px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.sidebar-header {
  height: 60px;

  /* 12px a los lados: con el buscador dentro, el sangrado de 18px de la izquierda solo
     servía cuando ahí vivía la marca. */
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  container-type: inline-size;

  /* permite ocultar el wordmark según su propio ancho */
}

/* Las acciones (punto de conexión + botones) nunca se encogen; la marca cede. */

/* `margin-left: auto` y no confiar en el space-between del padre: al esconder la marca en
   escritorio (R5) la cabecera se quedó con un solo hijo, y con space-between un solo hijo
   se va al PRINCIPIO. La campanita apareció a la izquierda sin que nadie la moviera. */
.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.logo {
  font-weight: 700;
  color: var(--accent);
  font-size: 18px;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Al angostar el panel de chats, si "LeadSync" no cabe junto al punto y los
   botones, se oculta por completo (queda solo el logo) en vez de superponerse. */
@container (max-width: 252px) {
  .sidebar-header .logo { display: none; }
}
.conn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: background-color .2s ease;
  cursor: pointer;
}
.conn-dot.ok { background: var(--accent); }
.conn-dot.warn { background: var(--warn); }
.conn-dot.err { background: var(--danger); }
.conn-dot.unknown { background: var(--text-dim); }

/* Pulso sutil cuando algo no está del todo bien, para llamar la atención. */
.conn-dot.warn,
.conn-dot.err {
  box-shadow: 0 0 0 0 currentColor;
  animation: connPulse 1.8s ease-out infinite;
}
.conn-dot.warn { color: var(--warn); }
.conn-dot.err { color: var(--danger); }
@keyframes connPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  70% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }
}

/* Popover de estado de conexión (al pasar el mouse por el punto). */
.conn-popover {
  position: fixed;
  z-index: 260;
  min-width: 220px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px var(--shadow);
  padding: 10px 12px;
  animation: menuIn .12s ease;
  pointer-events: none;

  /* solo informativo; el clic en el punto abre la modal */
}
.conn-pop-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.conn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.conn-row-label {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.conn-row-state {
  font-size: 12px;
  color: var(--text-dim);
}
.conn-pop-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
}
.conn-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-dim);
}
.conn-status-dot.ok { background: var(--accent); }
.conn-status-dot.warn { background: var(--warn); }
.conn-status-dot.err { background: var(--danger); }
.conn-status-dot.unknown { background: var(--text-dim); }

/* Desactivado: hueco, no relleno. Apagado y roto tienen que distinguirse de un vistazo,
   y un círculo vacío se lee como "aquí no hay nada encendido" sin necesidad de leyenda. */
.conn-status-dot.off {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-dim);
}
.conn-row-sub { padding-left: 0; }
.conn-row-sub .conn-row-label {
  font-size: 12px;
  color: var(--text-dim);
}