body {
    font-family: Verdana, sans-serif;
    
     background: linear-gradient(135deg, #FF9A8B 0%, #FF6A88 50%, #FF99AC 100%);
     
    
     
    overflow-x: hidden;
   /* background-color : #555555;*/
}

/* Header */
.header {
  text-align: center;
  padding: 20px 10px;
  color: #333;
}

.header h1 {
  margin: 0;
  font-size: 2.5em;
  color: #222;
}

.header h2 {
  margin: 10px 0 0;
  font-size: 3rem;
  font-weight: normal;
  color: #444;
  display : block;
}

#date-display {
  margin-top: 10px;
  font-size: 1.2rem;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}



#audioVisualizer {
    position: absolute; /* ou 'fixed' selon le besoin */
    top: 80%;            /* aligne le haut du canvas avec le haut du conteneur */
    left: 25%;           /* aligne le côté gauche du canvas avec le côté gauche du conteneur */
    z-index: 10;       /* assurez-vous que ce z-index est supérieur à celui d'autres éléments */
    width: 100%;
    height: 150px;
    pointer-events: none; /* permet les interactions avec les éléments sous le canvas */
}

#content{
    display : flex;
   
    justify-content: center;
    
    overflow : hidden;
}



.logo {
    padding-left : 30px;
    width: 200px; /* ou la taille que vous voulez */
    height: 100px;
    cursor : pointer;
    
}

h1{
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    text-align : center;
    color : #eeeeee;
}
h2{
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    text-align : center;
    color : #999999;
}

#micro {
    text-align: center; /* centre le texte à l'intérieur du h2 */
    display: block;     /* il l'est par défaut, donc optionnel */
    width: 100%;        /* prend toute la largeur de son parent */
    margin-top: 0px;    /* Diminue la marge du haut */
    margin-bottom: 0px; /* Diminue la marge du bas */
    padding: 0;         /* Enlève tout padding éventuel */
    font-size : 0.8em;
}

/*#wordCountDisplay {
    color: #999999; /* Changez la couleur de texte selon vos préférences 
    font-size: 1.5em; /* Pour un h2, ajustez la taille si nécessaire 
    /* Ajoutez ici d’autres styles tels que l'espacement, la police, etc. 
    padding-top : 70px;
}
*/

#entete{
    height : 50px;
    display : flex;
    padding-left : 35px;
    align-items : center;
    justify-content : center;
    padding-top : 20px;
}

#sousentete{
    display : flex;
    padding-left : 30px;
    align-items : center;
    
}

#loadingMessage{
    padding-left : 30px;
}

/*
.chat-container {
    width: 100%;
    height : 400px;
    margin-left: 40px;
    margin-top: 20px;
    box-shadow: 0 0 10px 2px #ddd;
    font-size: 16px;
    font-family: Verdana, sans-serif;
}


#chat-window {
    background-color: #f9f9f9;
    width: 98%;
    height: 100%;
    border: 1px solid #ddd;
    overflow-y: auto;
    padding: 20px;
    overflow : hidden;
    font-size: 16px;
    font-family: Verdana, sans-serif;
}

*/

/* Chat Container */
.chat-container {
  
  background: #ffffffcc;
  border-radius: 20px;
  padding: 15px;
  width: 75%;
  justify-content: center;
  /*align-items : center;*/
  height: 600px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  overflow: hidden;
}


/* Chat Window */
#chat-window {
  flex-grow: 1;
  min-height: 150px;
  max-height: 300px;
  
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
}

#img-overlay {
    position: absolute;
    top: 10px;      /* Ajuste ce chiffre selon où tu veux l’image */
    right: 10px;    /* Décale l’image du bord droit */
    width: 500px;   /* Ou la taille que tu veux */
    height :500px;
    opacity: 0.88;  /* (optionnel : un léger effet de transparence) */
    z-index: 2;     /* Légèrement au-dessus du textarea de conversation */
    pointer-events: none; /* Pour que l'image ne bloque pas le clic/sélection dessous */
    /* Fondu dégradé en bas ! */
    /* Fondu sur BAS et sur GAUCHE */
    /* Fondu dégradé en bas ! */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    
   
    
}




#chat-window textarea {
  width: 100%;
  height: 100%;
  border: none;
  resize: none;
  background: transparent;
  font-size: 1em;
  color: #333;
  padding: 5px;
  overflow-x: hidden; 
}


#response {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
   padding: 7px;
    font-size: 16px;
    font-family: Verdana, sans-serif;
    background-color : #aaaaaa;
    line-height: 1.6;
    /*overflow: hidden;*/
}

#chat-form {
    width: 100%;
    display: flex;
    
    z-index: 3; /* S'assure qu'il passe devant l'image */
    
    
    
    padding: 10px;
    font-size: 16px;
    font-family: Verdana, sans-serif;
}

#chat-form input[type="text"] {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    
    
    
    /*border: 1px solid #ddd;*/
    font-size: 16px;
    font-family: Verdana, sans-serif;
}

#chat-form button {
    margin-right: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: Verdana, sans-serif;
}

#chat-form button:hover {
    background-color: #4cae4c;
}

#chat-form textarea {
    font-size: 16px;
    font-family: Verdana, sans-serif;
    flex: 1; /* Si vous souhaitez qu'il remplisse l'espace disponible */
    height: auto; /* Hauteur peut être automatique ou fixe, selon vos besoins */
    min-height: 150px; /* Hauteur minimale pour commencer */
    padding: 10px;
    border-radius: 20px;
    margin-right: 10px;
    border: none;/*1px solid #ddd;*/
    resize: none; /* Empêche l'utilisateur de redimensionner le textarea */
    overflow-y: auto; /* Permettre le défilement vertical si le texte est trop long */
}

#spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3498db;
  margin-bottom : 20px;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}