/* ==========================================================================
   LeadSync - Firma del operador
   El interruptor de firma y el prefijo que aparece en la burbuja (item R8).

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

/* --- Firma del operador (item R8) ---
   La barra REUSA .reply-bar entera: es el mismo hecho (algo que se va a añadir al mensaje
   antes de enviarlo) y, sobre todo, la misma animación ya resuelta — crece desde el
   composer y sale al revés, sin display:none, que no transiciona. Aquí solo cambia lo
   propio: el color (no es una cita, es una decisión activa) y el tamaño, más bajito porque
   puede quedarse fija durante toda la jornada. */
.sign-bar {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev));
  padding-top: 6px;
  padding-bottom: 6px;
  max-height: 52px;
}

/* La etiqueta va en --text y no en --text-dim: medido sobre el fondo teñido de la barra,
   el atenuado daba 4,49:1 en tema claro y AA pide 4,5. La jerarquía la sostiene igual el
   prefijo, que es el que va en negrita, monoespaciado y con el color de marca. */
.sign-bar-label {
  font-size: 11.5px;
  color: var(--text);
}

/* El prefijo se enseña LITERAL y en monoespaciada: es texto que le llega al cliente, no
   una etiqueta de la consola. Con la tipografía normal se confundiría con lo segundo. */
.sign-bar-prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --accent-strong y no --accent: el verde de marca sobre el fondo claro de la barra
     da 2,78:1 y esto es TEXTO que hay que poder leer (AA pide 4,5). --accent-strong es la
     variante legible por tema, la misma pareja que ya usa la entrada activa del rail. */
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El popover de los tres puntos (item R10). El `position: fixed` es OBLIGATORIO y no
   decorativo: `.msg-menu` no lo trae —lo pone cada caja concreta, igual que `.chat-menu`—
   y sin él positionFloating escribe un top/left que el navegador ignora, así que el
   popover sale a lo ancho de la página y por debajo del borde inferior. */
.composer-more {
  min-width: 250px;
  position: fixed;
  z-index: 250;
}

/* La fila de la firma dentro del popover de los tres puntos (items R8 + R10). */
.menu-firma {
  padding: 8px 12px 10px;
  min-width: 250px;
}
.menu-firma-top {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.menu-firma-ic {
  display: inline-flex;
  color: var(--text-dim);
}
.menu-firma-ic .ic {
  width: 18px;
  height: 18px;
}
.menu-firma-lbl {
  flex: 1;
  font-size: 13.5px;
  color: var(--text);
}
.menu-firma-demo {
  margin: 6px 0 0 28px;
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.45;
}
.menu-firma-demo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent-strong);
  font-weight: 600;
}

/* Ejemplo de Configuración: una burbuja de mentira con la firma puesta. */
.firma-demo {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.firma-demo-bubble {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 340px;
  padding: 8px 11px;
  border-radius: 10px 10px 2px 10px;
  background: var(--operator);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
  /* Un nombre largo o sin espacios se parte en vez de salirse del globo. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.firma-demo-firma { font-weight: 700; }
/* La del bot sale a la IZQUIERDA y con el color de sus globos, como en el chat. */
.firma-demo-bot { justify-content: flex-start; }
.firma-demo-bot .firma-demo-bubble {
  background: var(--bot);
  border-radius: 10px 10px 10px 2px;
}

/* La barra de firma entra y sale animada como la de respuesta; con el movimiento
   reducido, aparece y desaparece sin transición (misma regla que .reply-bar). */
@media (prefers-reduced-motion: reduce) {
  .sign-bar,
  .sign-bar.hidden {
    transition: none;
  }
}