/* ==========================================================================
   LeadSync - Responsive: una sola columna
   El movil se comporta como WhatsApp/Telegram: lista y chat son dos vistas, no dos
   columnas.

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

/* --- Responsive: una sola columna estilo WhatsApp/Telegram --- */
@media (max-width: 720px) {
  .mobile-only { display: inline-flex; }
  .resizer { display: none; }
  .rail-resizer { display: none; }
  #debug-pin-btn { display: none; }
  .sidebar {
    width: 100% !important;
    min-width: 0;
    border-right: none;
  }
  .audio-bar { left: 0; }
  .app.with-audio-bar .chat { padding-top: 0; }
  .app.with-audio-bar { padding-top: 52px; }
  body:has(#view-panel:not(.hidden)) .app.with-audio-bar { padding-top: 0; }
  .app .chat { display: none; }
  .app.chat-open .sidebar { display: none; }
  .app.chat-open .chat { display: flex; }
  .app.chat-open .chat { animation: chatIn .2s ease; }
  .app.leaving-chat .chat {
    display: flex;
    animation: chatOut .18s ease forwards;
  }
  .app.leaving-chat .sidebar { display: none; }
  .app.entering-list .sidebar { animation: listIn .2s ease; }
  @media (prefers-reduced-motion: reduce) {
    .app.chat-open .chat,
    .app.leaving-chat .chat,
    .app.entering-list .sidebar {
      animation: none;
    }
  }
  .messages { padding: 14px 12px; }
  .bubble { max-width: 85%; }
  .debug-panel {
    width: 100%;
    top: 56px;
    bottom: var(--dock-h, 56px);
  }
  .conversation.debug-pinned { padding-right: 0; }
  .conversation.debug-pinned .chat-header,
  .conversation.debug-pinned .composer {
    margin-right: 0;
  }
  .chat-header { min-height: 56px; }
  .sidebar-header { height: 56px; }
  .composer { min-height: 56px; }
  .chat-header { padding: 8px 12px; }
  /* EN EL MÓVIL EL DEDO PIDE 44px. Se cambia SOLO la variable: el tamaño del botón y el
     suelo de la caja de acciones cuelgan los dos de ella (item B49), así que no se pueden
     quedar uno sin el otro — que es exactamente lo que pasó y recortó el icono del panel. */
  .chat-header { --btn-cabecera: 44px; }
  .chat-header .mic-btn {
    width: var(--btn-cabecera);
    height: var(--btn-cabecera);
  }
  .scroll-bottom {
    /* `--redaccion-h` TAMBIEN AQUI: esta regla repetia el calculo sin ella, asi que en movil
       el boton volvia a quedarse encima de la barra de redaccion. Un mismo calculo escrito
       en dos sitios acaba con uno de los dos viejo; aqui paso a la primera. */
    bottom: calc(var(--dock-h, 56px) + var(--redaccion-h, 0px) + 20px);
    right: 16px;
  }
  .reaction-picker { width: calc(100vw - 24px); }
  .msg-menu { min-width: 180px; }
  .selection-bar { height: 56px; }

  /* sin redimensionado manual en móvil (una columna) */

  /* El divisor del rail SÍ vive en tablet (ahí el menú es una columna de verdad y se puede
     querer más ancho), y NO en el móvil: aquí el menú se abre ENCIMA del contenido y se
     cierra al elegir, así que su ancho no es una preferencia, es un tamaño de paso.
     Estaba apagado desde 1024px, que se llevaba por delante también a las tablets. */

  /* item 20: fijar el panel de depuración no aporta nada en móvil (ocupa todo). */

  /* item 30: en móvil solo hay una columna a la vez (lista O chat), así que la barra
     de audio vuelve a ocupar todo el ancho: no hay lista al lado de la que separarse. */

  /* item 35: como la barra ocupa todo el ancho en móvil, empuja la columna visible
     (lista o chat) desde la .app, no solo el chat. */

  /* Por defecto se ve la lista; al abrir un chat se muestra la conversación. */

  /* item 77: la navegación lista↔chat entraba de golpe, y es el caso de libro donde el
     movimiento HACE FALTA: sin él no se sabe si el chat vino de la derecha o sustituyó a
     la lista, y volver se siente como un salto. Mismo patrón que el panel de Configuración.
     Al SALIR el chat tiene que seguir montado mientras se va, de ahí la clase "leaving" y
     el temporizador de app.js: quitar chat-open de una vez lo haría desaparecer sin animar.
     Animación y no transición: si no llega a correr, el elemento queda en su estado natural
     y no a medias. */

  /* item 32: en móvil el composer mide 56px (no 68 como en escritorio), así que el
     bottom:68px heredado dejaba un hueco de 12px bajo el panel. Se iguala a 56px para
     que el panel llegue justo hasta el composer, sin espacio muerto. */

  /* En móvil el panel es un overlay a ancho completo: sin inset del cuerpo. */

  /* item 18: el composer va con min-height, NO con height. Con altura fija, cualquier
     contenido que saltara de línea se salía de su caja — se veía con el aviso de ventana
     cerrada, que en móvil no cabe en una línea, y también al escribir varias líneas. Con
     min-height crece como en escritorio y --dock-h (que se mide en vivo) lo sigue. */

  /* Con las tres filas de títulos hace falta aire arriba y abajo: sin él, los badges y el
     teléfono quedan pegados al borde (item R6, b_23). 8px vertical y 12px lateral son los
     escalones de la escala que tocan aquí; el gap NO se reduce, para que la separación
     entre acciones se lea igual que en escritorio. */

  /* Área táctil de 44px (Apple HIG) / 48dp (Material): a 34px estos botones se fallan con
     el pulgar. El icono no crece, crece su caja. */

  /* En móvil se oculta el TEXTO de "Ver más" (su icono, la ⓘ, es convención y además la
     acción está por su nombre en el menú de la cabecera).
     PERO NO EL DE TOMAR/SOLTAR/TRANSFERIR (b_23, dicho dos veces): esas acciones NO se
     entienden con el icono solo —una flecha no dice "transferir a otro departamento"— y
     además cambian el estado de una conversación delante de un cliente. La regla del
     manual es explícita: icono + texto si la acción no es obvia solo con icono. El sitio
     sale del menú de la cabecera, que es donde se fueron buscar/renombrar/eliminar. */

  /* NINGÚN BOTÓN PIERDE SU TEXTO POR SER MÓVIL (b_23, dicho dos veces): una flecha no
     dice "transferir a otro departamento". Si no cabe, se va ENTERO al menú, con su
     nombre escrito. */

  /* items 48/50/56: el texto de .bot-toggle NO se oculta aquí. Dejaba el switch del bot
     sin etiqueta en la cabecera y, como los switches de configuración reusan .bot-toggle,
     borraba también sus textos ("Bot activo por defecto…", "Modo debug…"), que son la
     única pista de qué hace cada uno. Hay sitio: a 320-430px la cabecera no desborda
     porque el nombre del chat cede el espacio con su elipsis. */

  /* item 29 + R6: en móvil el lápiz, la basura y la lupa ceden su sitio a lo que SÍ tiene
     que estar a la vista (Tomar/Transferir con su texto, y el switch del bot). Las tres
     acciones están, con su nombre escrito, en el menú "Más acciones" de la cabecera. */

  /* AQUÍ YA NO SE ESCONDE NADA A MANO: lo que cabe lo decide overflowbar.js midiendo, y
     lo que no cabe se va al menú de los tres puntos CON SU NOMBRE. Las reglas por
     breakpoint que había acertaban en un móvil concreto y fallaban en cuanto se estrechaba
     la lista o se fijaba el panel lateral — que es lo que enseñaban b_23 y b_27. */

  /* "Transferir" también se va al menú, con su nombre. "VER MÁS" NO (petición tuya): no
     declara `data-of-label`, así que no participa y se queda al final de la fila, siempre
     visible — es el interruptor de un panel que está en pantalla, y esconderlo dentro de un
     menú obligaba a abrir un menú para cerrar lo que se está viendo. */

  /* El selector es LARGO a propósito. `.dept-actions .ghost-btn { display: inline-flex }`
     vive 200 líneas más abajo, así que con la misma especificidad ganaba por orden y esta
     regla quedaba escrita sin hacer nada. Con tres clases gana siempre, esté donde esté:
     una regla que depende de en qué línea la escribiste se rompe al reordenar el archivo. */
}

/* Pantallas muy angostas: burbujas más anchas. */
@media (max-width: 420px) {
  .bubble { max-width: 90%; }
  .chat-name { font-size: 14px; }
}

/* Separador de día en listas agrupadas por fecha (item 51): notificaciones y cotizaciones.
   Mismo componente en los dos sitios para que se lean igual. */
.notif-day,
.odoo-day {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 4px 5px;
}
.notif-day:first-child,
.odoo-day:first-child {
  padding-top: 2px;
}

/* item 62: el popover de presencia agrupa por rol. El título del grupo y el "··· y N más"
   no son acciones, así que se distinguen del resto de filas del menú: sin hover, sin
   cursor de pulsable y en tono atenuado. */
.msg-menu-title {
  padding: 6px 12px 2px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-dim);
}
.msg-menu-more {
  padding: 2px 12px 6px 34px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Lista completa (modal "Ver todos"): el popover flota junto a una fila, así que crecer sin
   límite lo sacaría de la pantalla; a partir de cierto número se enseña aquí. */
.presence-all-head {
  margin: 12px 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-dim);
}
.presence-all-head:first-child { margin-top: 0; }
.presence-all-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.presence-all-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.presence-all-list .ic {
  width: 15px;
  height: 15px;
  color: var(--text-dim);
}