/* ==========================================================================
   LeadSync - Ayuda de redaccion (item A26)
   La barra que se abre ENCIMA del composer al pulsar la varita.

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y ese
   orden ES la cascada. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* La barra imita la pildora del composer A PROPOSITO: esta a diez pixeles de ella y son
   dos cajas de texto, asi que si tuvieran dos aspectos distintos habria que mirarlas para
   saber cual es cual. Lo que las distingue es la varita y el sitio, no el estilo. */
.redaccion-bar {
  /* VA FUERA DEL COMPOSER, encima. Antes era un hijo suyo colocado arriba con `order: -1`:
     se veia en su sitio pero el fondo del composer la envolvia, asi que eran dos pildoras
     sobre una misma mancha blanca en vez de una flotando sobre el chat.
     Ahora es hermana de la barra de responder y de la de firma, que ya vivian fuera por lo
     mismo, y hereda de ellas la colocacion: ancho completo, pegada al composer. */
  /* FLOTA SOBRE LA CONVERSACION, no ocupa una fila suya. Fuera del composer pero dentro
     del flujo seguia llevandose su alto del chat, y debajo de los mensajes quedaba una
     franja clara: el fondo de la fila que ocupaba. Absoluta, el chat pasa entero por
     detras y solo se tapa lo que haya justo debajo.
     El orden de capas es el suyo: la conversacion abajo, encima cabecera y composer, y
     encima de todo eso el boton de ir al final y esta barra. */
  position: absolute;
  left: 16px;   /* el mismo aire lateral que el composer, que lleva 12px 16px */
  right: 16px;
  bottom: calc(var(--dock-h, 68px) + 8px);
  z-index: 4;

  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  /* LA PILDORA SI LLEVA FONDO; lo que no lo lleva es lo de ALREDEDOR. Cuando era una fila
     mas de la conversacion, su franja pintaba de blanco todo el ancho y se veia como una
     segunda barra pegada al composer: eso es lo que el queria quitar. Flotando no hay
     franja, y la pildora vuelve a ser opaca -por dentro se escribe, y sobre burbujas de
     colores no se leeria-. */
  background: var(--bg-panel);
  transition: border-color .12s ease;
}
.redaccion-bar:focus-within { border-color: var(--accent); }

.redaccion-bar .rd-ic {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  /* Alineado con la PRIMERA linea del texto, no centrado en la caja: cuando la indicacion
     crece a cuatro lineas, un icono centrado se queda flotando en medio de la nada. */
  height: 32px;
  color: var(--accent);
}
.redaccion-bar .rd-ic .ic {
  width: 18px;
  height: 18px;
}

.rd-in {
  flex: 1 1 auto;
  min-width: 0;
  /* Sin borde ni fondo: la caja es la barra entera, no este campo. Dos bordes concentricos
     es lo que hacia que el composer se viera como un formulario. */
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 7px 0;
  /* El alto lo decide autoAltoTextarea; el tirador esta prohibido en toda la consola y lo
     vigila check-textarea-resize.py. */
}
.rd-in::placeholder { color: var(--text-dim); }

.redaccion-bar .rd-mas {
  flex: 0 0 auto;
  align-self: center;
}

/* Mientras el modelo escribe, la barra se apaga un poco y el cursor lo dice. No se tapa con
   un spinner: la indicacion tiene que seguir viendose, porque es lo que se esta procesando
   y taparla deja al operador sin saber que pidio. */
.redaccion-bar.rd-esperando {
  opacity: .6;
  cursor: progress;
}
.redaccion-bar.rd-esperando .rd-in { cursor: progress; }

/* ENTRA CON MOVIMIENTO: la barra SUSTITUYE el sitio que ocupaba el chat y empuja el
   composer hacia abajo. Sin animacion, aparecer de golpe da un salto y no se ve de donde
   salio. La quita animarUnaVez al terminar (utils/dom.js). */
.redaccion-bar.rd-entra { animation: rd-entra .18s ease-out; }
@keyframes rd-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .redaccion-bar.rd-entra { animation: none; }
}

/* --- El menu de la barra --------------------------------------------------- */

/* EL `position: fixed` ES OBLIGATORIO Y NO DECORATIVO. `.msg-menu` no lo trae -lo pone cada
   caja concreta, igual que `.chat-menu` y `.composer-more`- y sin el, positionFloating
   escribe un top/left que el navegador IGNORA por ser estatico: el menu sale al final de la
   pagina, fuera de la pantalla. Paso aqui, con el aviso ya escrito en signature.css desde el
   item R10. Ahora lo vigila check-menus-fijos.py. */
.redaccion-menu {
  position: fixed;
  z-index: 250;
  min-width: 260px;
}

/* La fila del modo de redaccion: etiqueta a la izquierda y el select a la derecha, como en
   el diseno. UNA fila, no una lista: asi el modo puesto SE VE sin abrir nada. */
.rd-modo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}
.rd-modo-lab {
  color: var(--text);
  font-size: 13.5px;
  white-space: nowrap;
}
.rd-modo-sel {
  flex: 0 0 auto;
  min-width: 116px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.rd-modo-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }