.avatar {
width: 2%;
height: auto;
}
.user-message {
text-align: right;
}

.server-message {
  text-align: left;
  background: linear-gradient(-48deg, #DDE8EA -30%, #eaecf0 60%) !important;
}

.media-body.rounded.p-3.bg-success.text-white {
  background: linear-gradient(-48deg, #E2EBEC -30%, #eaecf0 60%) !important;
}

/* .button {
    display: inline-block;
    padding: 6px 27px;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    text-transform: capitalize;
    letter-spacing: 1px;
    box-shadow: 8px 10px 20px 0 rgba(0, 0, 0, 0.22);
    border-radius: 30px;
    font-weight: 400;
    background: linear-gradient(-48deg, #0DCBE5 -30%, #365899 60%) !important;
    border: 1px solid #8378e2;
    background: #8378e2;
    transition: all 500ms ease;
    cursor: pointer;
    color: #fff;
  } */


.back-button-chat{
  position: fixed;
  display: none; 
  right: 15px;
  bottom: 15px; 
  border-radius: 5px; 
  z-index: 11;
}
  /* Style pour le bouton d'envoi */
.button.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  text-align: center;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  background-color: #007bff; /* Couleur de fond du bouton */
  color: #fff; /* Couleur du texte */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Au survol, assombrir légèrement le bouton */
.button.btn:hover {
  background-color: #0056b3;
}

/* Au clic, réduire légèrement la taille du bouton */
.button.btn:active {
  transform: scale(0.98);
}

/* Ajoutez une icône de flèche à droite du texte */
.button.btn::after {
  content: '\f054'; /* Code de l'icône de flèche à droite (FontAwesome) */
  font-family: FontAwesome;
  margin-left: 10px;
  font-size: 14px;
}

/* Style pour l'icône de flèche */
.button.btn::after {
  color: #fff; /* Couleur de l'icône */
  transition: transform 0.2s ease;
}

/* Lorsqu'on survole l'icône de flèche, la faire tourner légèrement */
.button.btn:hover::after {
  transform: rotate(90deg);
}