.toggle-chatbot {
    min-width: 2rem;
    min-height: 2rem;
    max-width: 2rem;
    max-height: 2rem;
    border-radius: 50%;
    padding: 0.4rem;
    background-color: var(--light-color);
    border: var(--soft-color) 0.1rem solid;
    position: fixed;
    top: 96%;
    right: 0%;
    transform: translate(-25%, -50%);
    z-index: 99;
    color: var(--dark-color);
    display: flex; /* Add flexbox display */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.toggle-chatbot:hover {
    color: var(--accent-color);
}

#open-icon {
    display: block;
   
}

#close-icon {
    display: none;
   
}

.chat_container {
display: none;
opacity: 0;
position: fixed;
bottom: 13vh;
right: 4vh;
z-index: 98;
}

.chat_container.show {
display: block;
opacity: 1;
animation: slide-in 1s forwards, fade-in 0.8s forwards;
}
/* 
.chat_container.hide {
opacity: 0;
animation: slide-out 1s forwards, fade-out 1s forwards;
} */

@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*   
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
} */

@keyframes slide-in {
0% {
transform: translateX(+100%);
}
100% {
transform: translateX(0%);
}
}
/* 
@keyframes slide-out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(+100%);
}
} */


.chat {
margin-top: 0px;
display: flex;
justify-content: flex-end;
align-items: center;
width: 45vw;
}

.card {
background-color: var(--light-color);
width: 100%;
max-width: 60vw;
border: none;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card_header {
background-color: var(--accent-color);
color: var(--light-color);
border-bottom: 1px solid var(--soft-color);
padding: 2vh;
}

.user_info{
display: flex;
flex-direction: row;
align-items: center;
}

.user_img {
width: 5vh;
height: 5vh;
border-radius: 50%;
}

.status{
color: var(--soft-color);
}

.msg_card_body {
overflow-y: auto;
padding: 2vh;
height: 38vh;
}

.card-footer {
background-color: var(--light-color);
border-top: 1px solid var(--softer-color);
padding: 1vh;
}

.input-group{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}

.type_msg {
color: var(--text-color);
border: none;
height: auto;
line-height: 1.5;
flex-grow: 1;
width: 80%;
outline: none;
padding: 0.4vh;
box-sizing: border-box; /* Ensure padding is included in the height calculation */
overflow-wrap: break-word;
font-family: 'Nunito', sans-serif;
resize: none;
}


.type_msg:focus {
border: none;
}

.send_btn {
background-color: transparent;
border: none;
height: 4vh;
color: var(--accent-color);
border-radius: 0;
cursor: pointer;
width: 20%;
transition: transform 0.3s ease; 
}

.send_btn:hover {
transform: scale(1.1);
}


.container_msg_send, .container_msg_recu{
display: flex;
flex-direction: row;
}

.container_msg_send{
justify-content: flex-end;
}

.container_msg_recu{
justify-content: flex-start;
}


.msg_send,
.msg_recu {
max-width: 80%;
padding: 1.5vh;
margin: 1.5vh 0;
margin-top: 2.5vh !important;
word-wrap: break-word;
}

.msg_send {
background-color: var(--accent-color);
color: var(--light-color);
align-self: flex-end;
border-radius: 1rem 0 1rem 1rem ;
}

.msg_recu {
background-color: var(--softer-color);
color: var(--text-color);
align-self: flex-start;
border-radius: 0 1rem 1rem 1rem ;
}

.img_cont_msg{
display: flex;
flex-direction: column;
align-items: center;
margin: 0.3rem;
}

.msg_time_send,
.msg_time {
color: var(--soft-color);
font-size: 8px;
justify-content: flex-end;
}

.user_img_msg {
width: 4vh;
height: 4vh;
border-radius: 50%;
justify-content: flex-start;
}

.online_icon {
background-color: red;
height: 1.5vh;
width: 1.5vh;
border-radius: 50%;
display: inline-block;
margin: 0 1.3vh -2.8vh -1.3vh;
}