/* BRAINMORE - [VOZ-AGENTE] Estilos de la conversacion en tiempo real.
 *
 * ARCHIVO PROPIO Y NO UN AÑADIDO A `voice.css`. La voz asincrona es una capacidad distinta
 * y no se toca: compartir hoja de estilos significa que un ajuste de esta mueve aquella, y
 * el mandato es cero impacto.
 *
 * POSICION: `voice.css` ancla su FAB en (28, 28). Este se ancla mas arriba en la misma
 * columna para que los DOS botones sean visibles a la vez -son dos capacidades, no dos
 * modos del mismo boton, y la pantalla tiene que decirlo-.
 */

#brainmore-conv-fab {
  position: fixed;
  bottom: 116px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 9999;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  user-select: none;
}

#bm-conv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border: none;
  border-radius: 999px;
  background: #101828;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .28);
  transition: background .15s ease, transform .1s ease;
}

#bm-conv-btn:hover { transform: translateY(-1px); }
#bm-conv-btn svg { width: 20px; height: 20px; }
#bm-conv-btn.bm-conv-activo { background: #067647; }

.bm-conv-panel {
  width: 320px;
  max-height: 46vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e4e7ec;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
}

.bm-conv-cabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #344054;
}

/* EL ESTADO SE VE, no se deduce del movimiento del boton. Son los ocho que el producto
 * declara; si aparece uno nuevo sin color, se ve gris y se nota que falta. */
.bm-conv-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #98a2b3;
  flex: 0 0 auto;
}

.bm-conv-punto.bm-conv-conectando  { background: #f79009; animation: bm-conv-latido 1s infinite; }
.bm-conv-punto.bm-conv-escuchando  { background: #12b76a; animation: bm-conv-latido 1.6s infinite; }
.bm-conv-punto.bm-conv-procesando  { background: #2e90fa; animation: bm-conv-latido .8s infinite; }
.bm-conv-punto.bm-conv-hablando    { background: #6938ef; }
.bm-conv-punto.bm-conv-interrumpido{ background: #f04438; }
.bm-conv-punto.bm-conv-error       { background: #d92d20; }
.bm-conv-punto.bm-conv-finalizado  { background: #667085; }

@keyframes bm-conv-latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.bm-conv-transcripcion {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #101828;
}

.bm-conv-linea { padding: 7px 10px; border-radius: 10px; }
.bm-conv-linea.bm-conv-usuario { background: #f2f4f7; align-self: flex-end; max-width: 88%; }
.bm-conv-linea.bm-conv-agente  { background: #ecfdf3; align-self: flex-start; max-width: 92%; }

.bm-conv-acciones { display: flex; gap: 6px; }

.bm-conv-accion {
  flex: 1 1 auto;
  padding: 7px 6px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.bm-conv-accion:hover:not(:disabled) { background: #f9fafb; }
.bm-conv-accion:disabled { opacity: .45; cursor: default; }
.bm-conv-accion.bm-conv-encendido { background: #fffaeb; border-color: #f79009; color: #b54708; }
.bm-conv-accion.bm-conv-terminar { color: #b42318; border-color: #fda29b; }

@media (max-width: 520px) {
  #brainmore-conv-fab { bottom: 104px; right: 16px; left: 16px; align-items: stretch; }
  .bm-conv-panel { width: auto; }
}

/* ── [VOZ] EL PANEL OCULTO ESTABA VISIBLE, Y LA REGLA DE ARRIBA ERA LA CULPABLE ─────────
 *
 * MEDIDO EN EL NAVEGADOR: `#bm-conv-panel` tiene el atributo `hidden` puesto —el modulo lo
 * escribe en su plantilla y lo mantiene con `panel.hidden = nuevo === E.INACTIVO`— y aun asi su
 * `display` computado era `flex` y el panel se veia.
 *
 * `hidden` funciona por una regla de la hoja del NAVEGADOR: `[hidden] { display: none }`. Es la
 * de menor prioridad que existe, asi que CUALQUIER regla de autor que declare `display` le gana.
 * `.bm-conv-panel { display: flex }` se lo llevaba puesto.
 *
 * Consecuencia: el panel de la conversacion en vivo —con «Inactivo», «Silenciar», «Interrumpir»
 * y «Terminar»— estaba flotando sobre el chat TODO EL TIEMPO, aunque no hubiera ninguna
 * conversacion abierta. Tres botones de una llamada que no existe.
 *
 * El modulo no tiene la culpa: hace lo correcto. Lo que faltaba era esta linea.
 */
.bm-conv-panel[hidden] { display: none; }