/* css/style.css */

body, html {
  background-color: #f8f9fa;
  height: 100%;
}
.chat-container {
  max-width: 700px;
  height: 90vh; /* Ajustez si nécessaire, ou utilisez une hauteur fixe avec flex-grow pour chat-box */
  display: flex;
  flex-direction: column;
  margin: 30px auto;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  padding: 20px;
}
.chat-box {
  flex: 1; /* Permet à la chatbox de prendre l'espace disponible */
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  background: #f9f9f9;
  min-height: 200px; /* Hauteur minimale pour la chatbox */
  max-height: calc(90vh - 150px); /* Pour éviter que la chatbox ne prenne trop de place */
  display: flex; /* Utilisation de flexbox pour aligner les messages */
  flex-direction: column; /* Les messages s'empilent verticalement */
}
.message {
  margin: 10px 0;
}
.user-msg {
  text-align: right;
  align-self: flex-end; /* Aligner à droite dans flexbox */
}
.bot-msg {
  text-align: left;
  align-self: flex-start; /* Aligner à gauche dans flexbox */
}
.message span {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 80%;
  word-wrap: break-word; /* Important pour les longs messages */
}
.user-msg span {
  background-color: #0d6efd;
  color: white;
}
.bot-msg span {
  background-color: #e9ecef;
  color: #333; /* Couleur du texte du bot */
}
.eval-msg span {
  color: #004cff;
  text-align: center; /* Centrer le texte d'évaluation */
  font-size: 0.95rem;
  font-style: italic;
  display: block; /* S'assurer qu'il prend toute la largeur */
}

/* Styles pour l'icône de chargement */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-icon {
  display: inline-block;
  font-size: 1.5rem;
  animation: spin 1.5s linear infinite;
  color: #6c757d; /* Couleur de l'icône de chargement */
}

.system-msg span {
  background-color: #f8f9fa;
  font-size: 0.85rem;
  color: #6c757d;
  font-style: italic;
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  margin-top: 4px;
}

/* Styles spécifiques au formulaire pour les messages (dans expert_form.js) */
.chat-message { 
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 15px;
  max-width: 80%;
}
.chat-message.assistant {
  background-color: #e6f7ff; /* Bleu très clair */
  color: #0d6efd; /* Reprend la couleur du bot */
  align-self: flex-start;
}
.chat-message.user {
  background-color: #d1e7dd; /* Vert très clair */
  color: #007bff; /* Bleu Bootstrap */
  font-weight: bold;
  text-align: right;
  align-self: flex-end;
}
/* Styles pour les éléments de formulaire injectés dans le chat-box */
#expertFormContainer form {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f0f0f0;
}
#expertFormContainer .form-control, #expertFormContainer .form-select {
    width: calc(100% - 10px); /* Ajustez selon le padding */
    margin-bottom: 10px;
}

.action-buttons-container {
    display: flex;
    flex-wrap: wrap; /* Pour que les boutons passent à la ligne si l'espace est insuffisant */
    gap: 10px; /* Espace entre les boutons */
    justify-content: flex-start; /* Aligner à gauche comme les messages du bot */
    padding: 10px 0;
}