pre {
  max-width: 100%;  /* Assure que le texte ne déborde pas du conteneur */
  white-space: pre-wrap;  /* Permet de faire des retours à la ligne automatiquement */
  word-wrap: break-word; /* Coupe les mots trop longs pour éviter le débordement */
  background-color: #f4f4f4; /* Optionnel : ajoute une couleur de fond */
  padding: 10px;
  border-radius: 5px; /* Pour arrondir les bords du <pre> */
  font-family: monospace; /* Police pour afficher du code */
  font-size: 14px; /* Taille de la police */
  color:black!important;
}
.glass{
  backdrop-filter: blur(2px);
  background-color: rgba(255,255,255,0.1);
  color:white!important
}
a{
     color:pink!important
}
body {
  background-color: #1f1f1f;
  color: #ffffff;
  max-height:100vh
}
.card-body {
     pointer-events:none!important;
}
body {
background-image: url('/assets/img/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top;
}

.agents > div:hover{
     box-shadow: inset 0 0 0 2px orange;
}
.agents > div{
     transition:0.3s
}

.container {
  max-width: 70%;
}

#userList {
  height: 100px;
  overflow-y: scroll;
  margin-bottom: 20px;
  border: 1px solid white;
  padding: 10px;
  border-radius: 5px;
}

#messageList {
  height: 100%;
  max-height:100%;
  overflow-y: scroll;
  margin-bottom: 20px;
  border: 1px solid white;
  padding: 10px;
  border-radius: 5px;
}

#messageForm {
  display: flex;
}

#messageInput {
  flex-grow: 1;
  margin-right: 10px;
}
.user_message{
     background:rgba(255,255,255,0.1);
     border-radius:10px!important;
}
.Sophie{
     background:rgba(81, 227, 203, 0.211);
     border-radius:10px!important;
}
.padded {
     font: 1.0rem/2 Ubuntu, sans-serif;
     margin-bottom: 1rem;
   }
   .padded .highlight {
     border-radius:5px;
     display: inline;
     background: #ee4035;
     color: white;
     padding: 0.5rem;
     padding-left: 0;
     padding-right: 0;
     -webkit-box-decoration-break: clone;
     -ms-box-decoration-break: clone;
     -o-box-decoration-break: clone;
     box-decoration-break: clone;
     box-shadow: 0.5rem 0 0 #ee4035, -0.5rem 0 0 #ee4035;
   }
   
/*CHECKBOX*/
.switch {
     display: inline-block;
     height: 34px;
     position: relative;
     width: 60px;
   }
   
   .switch input {
     display:none;
   }
   
   .slider {
     background-color: #ccc;
     bottom: 0;
     cursor: pointer;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
     transition: .4s;
   }
   
   .slider:before {
     background-color: #fff;
     bottom: 4px;
     content: "";
     height: 26px;
     left: 4px;
     position: absolute;
     transition: .4s;
     width: 26px;
   }
   
   input:checked + .slider {
     background-color: #66bb6a;
   }
   
   input:checked + .slider:before {
     transform: translateX(26px);
   }
   
   .slider.round {
     border-radius: 34px;
   }
   
   .slider.round:before {
     border-radius: 50%;
   }

   .chat-window {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chat-header {
    background: rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

.chat-body {
    background: #fff;
}

.chat-footer {
    background: rgba(0, 0, 0, 0.05);
}