body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 14px;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}

.chat {
max-width: 360px;
margin: 20px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.chat-messages--active{
  min-height: 470px;
}

.chat__title {
margin-bottom: 0;
text-align: start;
padding: 30px 0;
padding-left: 24px;
text-transform: uppercase;
font-family: 'Raleway;', sans-serif;
font-style: italic;
background: linear-gradient(to top left, rgb(170, 33, 255),
rgb(203, 120, 255),
rgb(199, 108, 255),
rgb(194, 104, 255),
rgb(153, 132, 255),
rgb(152, 131, 255));
color: #fff;
font-weight: 700;
font-size: 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative;
cursor: pointer;
}
.chat__title::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 14px;
    background-image: url(../images/arrow-down.svg);
    right: 24px;
    top: 33px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.chat__title--active::before {
      transform: rotate(180deg);
    }
.chat__inner {
display: flex;
flex-direction: column;

}

.chat-messages {
flex-grow: 2;

}

.chat-messages::-webkit-scrollbar{
  cursor: pointer;
  width: 6px;
  max-height: 140px;
  border: 5px rgb(165, 165, 165);;
  border-radius: 15px
}
.chat-messages::-webkit-scrollbar-thumb{
  background-color: rgb(165, 165, 165);
}
.chat-messages__text{
  padding: 14px 16px 18px 16px;
  border-radius: 10px;
  margin-bottom: 8px;
  display: block;
  
}
.chat-messages__greetings{
  margin-top: 30px;
  display: block;
  
  margin-left: 8px;
  align-self: flex-start;
  border-radius: 15px 15px 15px 0px;
  padding: 14px 16px 18px 16px;
  max-width: 245px;
  background-color: rgb(244, 243, 242);
  color: rgb(28, 44, 156);
}
.chat-messages__content {
  padding: 10px;
  margin-top: 28px;
  margin-bottom: 30px;
  
}
.chat-messages__btn{

  background-color: transparent;
  padding: 13px 10px;
  color: rgb(28, 44, 156);
  align-self: flex-end;
  border: 1px solid rgb(181, 190, 254);
  border-radius: 5px;
  
  
  
}
.chat-messages__btn:hover{
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
}
.chat-messages__text{
  color: #1C2C9C;
}


.question {
position: relative;
border-radius: 15px 15px 0px 15px;
max-width: 261px;
background-color: rgba(153, 132, 255, 0.2);
border-color: transparent;
align-self: flex-end;
margin-top: 28px;
margin-bottom: 28px;
opacity: 2;
display: flex;
flex-direction: column;
align-items: flex-end;

color: rgb(28, 44, 156);
}

.answer {
display: flex;
flex-direction: column;
position: relative;
border-radius: 15px 15px 15px 0px;
margin-left: 8px;
max-width: 261px;
display: block;
background-color: rgb(244, 243, 242);
align-self: flex-start;
}
.chat-inputs {
  display: flex;
  max-height: 184px;
  margin-bottom: 20px;
  max-width: 320px;
}

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


#message-container{ 
  max-width: 345px;
  display: flex;
  flex-direction: column;
  
}




.chat-messages::-webkit-scrollbar-thumb {
  background-color: rgb(165, 165, 165);
}

.chat-messages {
  flex-grow: 2;
  overflow-y: auto; 
  height: 340px; 
  
}

/* Стилизация скроллбара */
.chat-messages::-webkit-scrollbar {
  width: 6px;
  height: 30%;
}

.chat-messages::-webkit-scrollbar-track {
  background: #fff;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgb(165, 165, 165);
  border-radius: 15px;
  
}

.chat-messages::-webkit-scrollbar-thumb:hover {
 background: rgb(128, 128, 128);
 box-shadow: inset;
}
.read-icon{
position: absolute;
right: 0;
bottom: -20px;
}
.time-stamp{
position: absolute;
bottom: -25px;
margin-right: 30px;
}
.chat-messages__content-child{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 8px 20px 0;
}