/* =====================================================================
   MODULE 3.2.1 : assets/css/1-voice-chat.css
   Fonction : Style de l’interface chat vocal
   Objectif : Interface propre, stable, sans doublons, boutons harmonisés
   ===================================================================== */

/* 1) Conteneur */
.novatra-ia-voice{
  max-width: 760px;
  margin: 24px auto;
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
}

/* 2) En-tête */
.novatra-ia-voice-header{ margin-bottom: 14px; }

.novatra-ia-voice-title{
  font-size: 20px;
  line-height: 1.2;
  margin: 6px 0;
}

.novatra-ia-voice-subtitle{
  font-size: 14px;
  opacity: 0.80;
}

/* 3) Blocs */
.novatra-ia-voice-block{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.novatra-ia-label{
  font-size: 13px;
  opacity: 0.85;
  margin: 10px 0 8px 0;
}

/* 4) Champs */
#novatraTranscript{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.16);
  padding: 10px 12px;
  resize: vertical;
}

.novatra-ia-answer{
  width: 100%;
  min-height: 80px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.16);
  padding: 10px 12px;
  background: rgba(0,0,0,0.02);
  white-space: pre-wrap;
}

/* 5) Status + audio */
.novatra-ia-voice-status{
  margin-top: 18px;
  font-size: 15px;
  opacity: 0.85;
}

.novatra-ia-audio{
  width: 100%;
  margin-top: 10px;
}

/* 6) Boutons base */
.novatra-btn{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  transition: transform 0.08s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  padding: 12px 18px;
  line-height: 1;
}

.novatra-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

.novatra-btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.novatra-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* 7) Variantes */
.novatra-primary{
  background: linear-gradient(135deg, rgba(0,170,120,0.20), rgba(0,110,255,0.18));
  border-color: rgba(0,0,0,0.08);
}

/* 8) Ligne micro : bouton à droite sous le textarea + aide sous le bouton */
.novatra-ia-mic-row{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "spacer mic"
    "spacer hint";
  gap: 8px 12px;
  margin-top: 12px;
  margin-bottom: 14px;
  align-items: center;
}

.novatra-btn.novatra-mic{
  grid-area: mic;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

.novatra-ia-mic-hint{
  grid-area: hint;
  justify-self: end;
  margin: 10px 0 0 0;
  font-size: 13px;
  opacity: 0.70;
  line-height: 1.2;
  text-align: right;
}

/* 9) Icône micro */
.novatra-mic-icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.93V21h2v-3.07A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.93V21h2v-3.07A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E");
}

/* Agrandir uniquement l’icône dans Dicter, sans changer la taille du bouton */
.novatra-btn.novatra-mic .novatra-mic-icon{
  width: 26px;
  height: 26px;
}

/* Etat enregistrement */
.novatra-mic.is-recording{
  color: #b00020;
  border-color: rgba(176,0,32,0.35);
  background: linear-gradient(135deg, rgba(176,0,32,0.10), rgba(176,0,32,0.04));
}

.novatra-mic.is-recording .novatra-mic-icon{
  animation: novatraPulse 1.1s infinite;
}

@keyframes novatraPulse{
  0%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.12); opacity: 0.75; }
  100%{ transform: scale(1); opacity: 1; }
}

/* 10) Harmonisation tailles boutons
   Objectif : Effacer et Dicter mêmes hauteurs, largeur proche
   Objectif : Envoyer et Écouter mêmes hauteurs, largeur proche
*/
#novatraClearThread,
#novatraMic,
#novatraAsk,
#novatraListen{
  min-height: 48px;
  padding: 12px 18px;
}

/* Effacer et Dicter */
#novatraClearThread,
#novatraMic{
  min-width: 170px;
}

/* Envoyer et Écouter */
#novatraAsk,
#novatraListen{
  min-width: 210px;
}

/* 11) Zone actions (envoyer, écouter) */
.novatra-ia-voice-controls{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  align-items: center;
}

/* 12) Fil de conversation */
.novatra-ia-thread{
  margin-top: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.65);
}

.novatra-ia-thread-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 10px 6px;
}

.novatra-ia-thread-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.novatra-ia-thread-count{
  display: flex;
  align-items: center;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  font-size: 13px;
  opacity: 0.80;
  line-height: 1;
}

.novatra-ia-thread-body{
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 10px;
}

.nv-thread-item{
  padding: 10px 4px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.nv-thread-item:first-child{ border-top: none; }

.nv-thread-q{
  font-weight: 600;
  margin-bottom: 6px;
}

.nv-thread-a{
  opacity: 0.90;
  line-height: 1.35;
}

.nv-thread-n{
  opacity: 0.60;
  margin-right: 6px;
}

/* =====================================================================
   PATCH FINAL : Fil de conversation
   Objectifs
   1) Le contenu (réponses) doit être sous l’en-tête, jamais sous Effacer
   2) Effacer et 0 sur 3 doivent être sur la même ligne
   3) 0 sur 3 doit être centré dans sa pastille
   ===================================================================== */

/* 1) Conteneur fil : rien ne flotte, rien ne déborde */
.novatra-ia-thread,
.novatra-ia-thread *{
  float: none;
}

/* 2) En-tête du fil : une seule ligne, alignée */
.novatra-ia-thread-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

/* 3) Titre à gauche, prend l’espace disponible */
.novatra-ia-thread-title{
  flex: 1 1 auto;
  min-width: 0;
}

/* 4) Zone droite : compteur + effacer sur la même ligne */
.novatra-ia-thread-right{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

/* 5) Pastille compteur : centrage horizontal et vertical */
.novatra-ia-thread-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 74px;
  height: 34px;
  padding: 0 12px;
  line-height: 1;
}

/* 6) Bouton effacer : même hauteur que la pastille */
#novatraClearThread{
  height: 34px;
  padding: 0 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 7) Corps du fil : passe forcément sous l’en-tête */
.novatra-ia-thread-body{
  display: block;
  width: 100%;
  clear: both;
  margin-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 10px;
}

#novatraAnswer,
#novatraThreadBody {
  white-space: pre-wrap;
  word-break: break-word;
}