.chat-container {
      max-width: 100%;
      margin: auto;
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .message {
      padding: 12px 18px;
      border-radius: 20px;
      margin: 10px 0;
      max-width: 70%;
      position: relative;
      line-height: 1.4;
      font-size: clamp(0.8rem, 1.5vw, 0.87rem);
    }

    .chat {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #333;
      display: inline-block;
      margin-right: 8px;
      vertical-align: middle;
    }

    .message-wrapper {
      display: flex;
      align-items: flex-start;
    }

        /* Messages de Jamel, avatar à gauche */
    .from-jamel-wrapper {
      justify-content: flex-start;
      margin-right: auto;
    }
    .from-jamel-wrapper .avatar {
      order: 0;
    }
    .from-jamel-wrapper .message {
      order: 1;
      background-color: #62c0fe;
      border-bottom-left-radius: 0;
      color: #000;
    }

    /* Messages utilisateur, avatar à droite */
    .from-user-wrapper {
      justify-content: flex-end;
      margin-left: auto;
      max-width: 80%;
      gap: 10px;
    }
    .from-user-wrapper .avatar {
      order: 1;
    }
    .from-user-wrapper .message {
      order: 0;
      background-color: #7dc8e5;
      border-bottom-right-radius: 0;
      color: #000;
    }

  .phrase-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.phrase-form input,
.phrase-form textarea,
.phrase-form button {
  width: 100%;
  max-width: 100%;
  font-size: 1rem;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#confirmation-message {
  font-size: clamp(0.8rem, 1.5vw, 0.87rem);
  margin-top: 10px;
}

.phrase-form button {
  background-color: #62c0fe;
  color: #000;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.phrase-form label {
  display: block;
  text-align: left;
  margin-bottom: 5px; /* optionnel, pour aérer */
}

.phrase-form button:hover {
  background-color: #4aaee1;
}

    /* Avatar Jamel */
    .avatar-jamel {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-jamel.jpg');
    background-size: cover;
    background-position: center;
    }

    /* Avatar utilisateur 1*/
    .avatar-user-1 {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-user-1.jpg');
    background-size: cover;
    background-position: center;
    }

    /* Avatar utilisateur 2*/
    .avatar-user-2 {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-user-2.jpg');
    background-size: cover;
    background-position: center;
    }

    /* Avatar utilisateur 3*/
    .avatar-user-3 {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-user-3.jpg');
    background-size: cover;
    background-position: center;
    }

    /* Avatar utilisateur 4*/
    .avatar-user-4 {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-user-4.jpg');
    background-size: cover;
    background-position: center;
    }

    /* Avatar utilisateur 5*/
    .avatar-user-5 {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-user-5.jpg');
    background-size: cover;
    background-position: center;
    }

    /* Avatar utilisateur 6*/
    .avatar-user-6 {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-user-6.jpg');
    background-size: cover;
    background-position: center;
    }

    /* Avatar utilisateur 7*/
    .avatar-user-7 {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-user-7.jpg');
    background-size: cover;
    background-position: center;
    }

    /* Avatar utilisateur 8*/
    .avatar-user-8 {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-user-8.jpg');
    background-size: cover;
    background-position: center;
    }

    /* Avatar utilisateur 9*/
    .avatar-user-9 {
    background-image: url('/jamel-debbouze/jamel-a-mots-ouverts/avatars/avatar-user-9.jpg');
    background-size: cover;
    background-position: center;
    }