/* ==========================================================================
   LeadSync - La transcripcion de una nota de voz (item A89)

   Lo pidio el mirando WhatsApp: un enlace bajo la onda, y el texto debajo, con "Ver mas"
   por escalones. Aqui vive lo de esta pieza; el plegado por escalones es un componente
   aparte (.plegable) porque lo comparte con los mensajes largos del item A82.

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

/* --- El enlace que la pide ------------------------------------------------ */

/* ES UN ENLACE, NO UN BOTON, y se ve como tal: la fila del audio ya tiene tres controles
   -play, velocidad, reenviar- y un cuarto boton competiria con ellos. Aqui lo que se
   ofrece es "lee esto en vez de escucharlo", que es una alternativa, no una accion mas. */
.tr-pedir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 2px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
  font-family: inherit;
}

.tr-pedir:hover span { text-decoration: underline; }

/* Mientras transcribe: sin subrayado, sin puntero y en gris. El estado tiene que VERSE
   (NO_REPETIR 34), o quien pulso no sabe si su clic llego y vuelve a pulsar. */
.tr-cargando {
  color: var(--text-dim);
  cursor: default;
}

.tr-cargando:hover span { text-decoration: none; }

.tr-cargando .ic {
  width: 13px;
  height: 13px;
  animation: tr-gira 1s linear infinite;
}

@keyframes tr-gira {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tr-cargando .ic { animation: none; }
}

/* --- El texto ------------------------------------------------------------- */

/* SEPARADO DEL AUDIO POR UNA LINEA, no solo por aire: son dos cosas distintas dentro de la
   misma burbuja -lo que suena y lo que dice- y sin el corte el texto parece un pie de foto. */
.tr-caja {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);

  /* LA BURBUJA ES `white-space: pre-wrap` -tiene que serlo: asi se ven los saltos de linea
     que escribio el cliente-, y eso se HEREDA. Dentro de una burbuja, la sangria del HTML
     deja de ser invisible: cada salto de linea del marcado es una linea en blanco de verdad.
     Aqui salieron 79 px de aire alrededor de una transcripcion de una sola linea, y el
     tamanio ni siquiera dependia del texto.
     Esta caja es ESTRUCTURA, no texto: su contenido es un parrafo, asi que corta la herencia.
     El `pre-wrap` de la transcripcion vive en .tr-texto, que es donde importa. */
  white-space: normal;

  /* ANCLA DEL CHEVRON, que va absoluto abajo a la derecha (ver plegable.css). */
  position: relative;
}

.tr-texto {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;

  /* APAGADO Y ENTRE COMILLAS, como en WhatsApp, y las dos cosas por el mismo motivo: esto no
     es un mensaje, es una CITA de lo que suena en el audio. Con el mismo color y sin comillas
     se lee como si el cliente lo hubiera escrito, y no lo escribio: lo dijo, y lo transcribio
     una maquina que se puede equivocar.

     LAS COMILLAS SON DE PRESENTACION Y NO DEL DATO. El servidor las quita de lo que devuelve
     el modelo a proposito (llm.limpiarTranscripcion) para que lo guardado sea el texto y nada
     mas: asi una busqueda, una exportacion o el propio bot leen la frase, no la frase
     entrecomillada. Ponerlas aqui es lo que permite las dos cosas a la vez. */
  color: var(--text-dim);

  /* La transcripcion es texto largo del cliente: se envuelve y se parte si hace falta, o
     una palabra pegada de treinta caracteres estira la burbuja entera. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Las comillas van en el pseudo-elemento y no en el texto: ver arriba. Se escriben tal
   cual y no con un escape tipo \201C: ese escape hay que pasarlo por dos capas -el
   script que parchea el fichero y el CSS- y basta con que una se lo coma para que en
   pantalla salga un recuadro vacio. Paso, y se vio en la captura. */
.tr-texto::before { content: "“"; }
.tr-texto::after { content: "”"; }

/* "(no se entiende)" NO ES UNA CITA: es el modelo diciendo que no hay nada que transcribir.
   Sin comillas y en cursiva, para que no se lea como algo que dijo el cliente. */
.tr-vacia .tr-texto {
  font-style: italic;
}
.tr-vacia .tr-texto::before,
.tr-vacia .tr-texto::after { content: none; }