app/chat.css

.chat-container{
  width: 90%;
  display: flex;
  flex-direction: column;
  max-width: 800px;
  background-color: rgba(225, 242, 251, 0);
  height: 100%;
  border-radius: 20px;
  align-self: center;
  /* box-shadow: 0 0 100px 100px rgba(168, 232, 255, 0.177); */
}
.history.chat-container{
  margin: 0;
  background-color: #dafbff6e;
  height: 100dvh;
  width: 350px; /* Adjust the width as needed */
  border-radius: 0px 0px 0px 0px;
  border-top-right-radius: 80px;
  border-right: 2px solid #8ed2ff61;
}

input::placeholder{
  text-align: center;
}
pre, code {
  white-space: pre-wrap; /* Ensures the content wraps */
  word-wrap: break-word; /* Forces long words to break */
  overflow-wrap: break-word; /* Handles unbreakable words */
  overflow-x: scroll; /* Allows horizontal scrolling if content exceeds width */
  max-width: calc(100dvw - 130px); /* Ensures the block doesn't exceed its container's width */
}
.message-options{
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 10px;
  background-color: rgba(180, 226, 255, 0.333);
  padding: 10px;
  border-radius: 20px;
  width: fit-content;
}

.message-container{
  margin-top: 0px;
  height: 100%;
  width: calc(100% - 0px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  padding: 10px;
  flex-direction: column;
}

.inp{
  
  width: 100%;
  
  border-radius: 10px;
  border: none;
  outline: none;
  margin: 0px 10px 0px 10px;
  background: transparent;
  box-shadow: none;
}

.inpsection{


  width: 100%;
  
}
.inpsection .btn2{
  min-width: 0px;
  min-height: 0px;
  height: 30px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 
disabled button css
*/
.inpsection .btn2:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.inpsection{
  background-color: rgba(168, 227, 255, 0.329);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  padding: 10px;


}

.message{
  background-color: rgba(26, 26, 26, 0);
  backdrop-filter: blur(5px);
  color: rgb(84, 84, 84);
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #db34697f;
  max-width: 600px;
  width: fit-content;
  word-wrap: break-word;

}
.message-holder{
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  margin: 10px;
}

.user-message{
  align-self: flex-end;
  border: 2px solid #3498db7f;
  background-color: rgba(200, 238, 255, 0);
}

.small{
  font-size: 12px;
  color:gray;
}

/* width */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  border-radius: 50px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
  background: transparent
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
  background: #a5a5a564;
  border-radius: 20px;
  }
  
  .ld-ripple {
      position: relative;
      width: 40px;
      height: 40px;
    }
    
    .ld-ripple div {
      position: absolute;
      border: 2px solid #fff;
      opacity: 1;
      border-radius: 50%;
      animation: ld-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }
    
    .ld-ripple div:nth-child(2) {
      animation-delay: -0.5s;
    }
    
    @keyframes ld-ripple {
      0% {
        top: 18px;
        left: 18px;
        width: 0;
        height: 0;
        opacity: 0;
      }
    
      4.9% {
        top: 18px;
        left: 18px;
        width: 0;
        height: 0;
        opacity: 0;
      }
    
      5% {
        top: 18px;
        left: 18px;
        width: 0;
        height: 0;
        opacity: 1;
      }
    
      100% {
        top: 0px;
        left: 0px;
        width: 36px;
        height: 36px;
        opacity: 0;
      }
    }


/* Style Select */
select {
  background-color: rgba(1, 95, 135, 0.265);
  color: white;
  padding: 10px;
  border-radius: 10px;
  width: fit-content;
  word-wrap: break-word;
}

select option{
  background-color: rgba(35, 93, 97, 0.897);
  color: white;
  padding: 10px;
  border-radius: 10px;
  width: fit-content;
  word-wrap: break-word;
}


code{
  /* Fix so that don't get outside parent */
  position: relative;
  white-space: pre-wrap;
  word-wrap: break-word;

}

pre{
padding: 10px;
background-color: rgba(180, 226, 255, 0.333);
border-radius: 20px;
border: 2px solid #34a9db7f;
/* box-shadow: 0 0 10px #db34697f; */
color: rgb(84, 84, 84);
margin: 20px 0px 20px 0px;

}

pre code{
background-color: transparent;
padding: 0px 0px 0px 0px;
border: none;
border-radius: 0px;
}

code{
background-color: rgba(227, 227, 227, 0.399);
color: rgb(84, 84, 84);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}

.goToConv{
background-color: rgba(255, 255, 255, 0.267);
padding: 20px;
border-radius: 20px;
border: 2px solid rgba(1, 207, 222, 0.382);
cursor: pointer;

}

.titler{
font-size: 20px;
font-weight: bold;
color: #009898;
}
.goToConv p{
color: gray;
font-size: small;
}
.info{
padding: 20px;
}
.perinfo{
background-color: rgba(255, 255, 255, 0.267);
border: 2px solid rgba(1, 207, 222, 0.382);
width: 100%;
padding: 20px;
margin-top: 10px;
border-radius: 20px;
}

.message-holder .btn3{
box-shadow: none;
background-color: transparent;
padding: 10px;
border-radius: 15px;
border: 2px solid rgb(0, 71, 95);
cursor: pointer;
color: rgb(84, 84, 84);
transition-duration: 300ms;
}

.message-holder .btn3:hover{
background-color: rgb(0, 71, 95);
}

.history{

max-width: "350px";
display: "flex";
flex-direction: "column";
align-items: "center";
justify-content: "flex-start";
padding: "20px";
}

.info{

max-width: "300px";
display: "flex";
flex-direction: "column";
align-items: "center";
justify-content: "flex-start";
padding: "20px";
}

.message-holder .small{
color: gray;
}
.message-holder .small:hover{
color: white;
}
.tabsForMobile{
display: none;
}
.chat{
display: flex;
height: 100%;
padding: 10px;
}
.history{
display: flex;
margin-top: 30px;


}
.info{
display: flex;
margin-top: 30px;

}
@media screen and (max-width: 1200px) {
.history{
  display: none;
margin-top: 0px;
width: '90%';


}

.chat-container.history{
  height: 90dvh;
  border: none;
  border-radius: 20px;
}
.tabsForMobile{
  display: flex;
  margin-top: 10px;
}
.chat-container{
  height: 90dvh;
}
.info {
  display: none;
  width: '90%';
margin-top: 0px;

}

.chat{
  display: none;
margin-top: 0px;

}

}

.btn4{
padding: 5px 10px 5px 10px;
border-radius: 10px;
border: 2px solid rgb(0, 71, 95);
cursor: pointer;
color: rgb(84, 84, 84);
transition-duration: 300ms;
}

.btn4.active{
background-color: rgb(0, 71, 95);
color: white;
}