body{
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

a{
    text-decoration: none;
    color: rgb(14, 112, 240);
}
.chatbot_icon {
    position: fixed;
    bottom: 12%;
    right: 2%;
    font-size: 30px;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgb(255 255 255);
    padding: 5px;
    color: rgb(236, 234, 234);
    z-index: 9999;
    box-shadow: rgb(0 74 117 / 48%) 0px 5px 15px;
    animation: floatY 4s ease-in-out infinite;
}

/* Keyframes */
@keyframes floatY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.chatbot_icon img{
    width: 40px;
}

.chatbot_container {
    display: none;
    position: fixed;
    bottom: 8%;
    right: 2%;
    width: 75vh;
    height: 80vh;
    /* border: 1px solid black; */
    border-radius: 15px;
    background-color: white;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    z-index: 9999;
}


.chatbot_logo p{
       height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: rgb(247 102 65);
    /* padding: 10px; */
    text-align: center;
    color: white;
    padding: 6px;
    margin-top: 13px;

}

.chatbot_header_txt p{
    margin: 0;
    margin-bottom: 0px;
    font-weight: 600;
    color: black;
    margin-top: 7px;
}

.chatbot_header_txt span{
    font-size: 14px;
    color: rgb(88, 85, 85);
}

.chatbot_header{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(207, 204, 204);
}

.chatbot_head_lgttl{
    display: flex;
    gap: 10px;
    align-items: center;
    padding-left: 10px;
}

.chatbot_head_btn{
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 10px;
}

.chatbot_head_btn p{
    background-color: #dfdcdc;
    height: 24px;
    padding: 0 7px;
    cursor: pointer;
    color: black;
}



.chatbot_body{
    overflow-x: hidden;
}

.chatbot_welcome_txt{
    background-color: #f8f8f8;
    padding: 2px 5px;
    border-radius: 10px;
    margin: 5px 10px 0 10px;
    
}

.chatbot_welcome_txt p{
    font-size: 14px;
    color:black;
}

.chatbt_bd_head{
    /* position: absolute; */
    display: flex;
    justify-content: space-between;
    width: 96%;
    padding: 0 10px;
}

.chatbt_bd_head p{
    font-size: 14px;
    color:black;
}

.cht_write_cont{
    max-height: 38vh;
    overflow-y: auto;
    padding: 0 6px;
}

.topic_btn{
    opacity: 0;
    width: 200px;
    background: #ffffff;
    padding: 4px;
    border-radius: 5px;
    font-size: 14px;
    margin: 3px;
    /*padding: 5px;*/
    transition: all 0.15s ease;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    animation: fadeSlide 0.4s ease forwards;
    color:black;
}

/* Animation */
@keyframes fadeSlide {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Stagger (1-by-1 effect) */
.topic_btn:nth-child(1)  { animation-delay: 0.05s; }
.topic_btn:nth-child(2)  { animation-delay: 0.1s; }
.topic_btn:nth-child(3)  { animation-delay: 0.15s; }
.topic_btn:nth-child(4)  { animation-delay: 0.2s; }
.topic_btn:nth-child(5)  { animation-delay: 0.25s; }
.topic_btn:nth-child(6)  { animation-delay: 0.3s; }
.topic_btn:nth-child(7)  { animation-delay: 0.35s; }
.topic_btn:nth-child(8)  { animation-delay: 0.4s; }
.topic_btn:nth-child(9)  { animation-delay: 0.45s; }
.topic_btn:nth-child(10) { animation-delay: 0.5s; }
.topic_btn:nth-child(11) { animation-delay: 0.55s; }
.topic_btn:nth-child(12) { animation-delay: 0.6s; }
.topic_btn:nth-child(13) { animation-delay: 0.65s; }

.topic_btn:hover{
       transform: translateY(-4px);
       box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    
}

.topic_btn i{
    margin-right: 8px;
    color: rgb(100, 98, 98);
    
}

.topic_btn_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 20px;
}

.chatbot_footer{
    position: absolute;
    bottom: 4px;
    width: 96.5%;
    padding: 8px ;
    border-top: 1px solid rgb(219, 219, 219);
    background-color: white;
    border-radius: 0 0 10px 10px;
    /* background: red; */
    /* padding: 10px; */
}
.search_box input{
    width: 98%;
    height: 30px;
    border: 1px solid rgb(196, 194, 194);
    border-radius: 8px;
    padding: 0 5px;
    outline: none;
}

.other_queries{
    background-color: rgb(252, 249, 249);
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
}

/* -------------------------------------- */

.qna_container{
    display: flex;
    /* border-top: 1px solid rgb(228, 225, 225); */
    max-height: 59vh;
    height: 59vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* .leftsd_ans_contnr{
    width: 60%;
    border-right: 1px solid rgb(196, 194, 194);;
} */

.leftsd_ans_contnr {
    width: 60%;
    /* height: 400px; */
    overflow-y: auto;
    padding: 15px;
    border-right: 1px solid rgb(196, 194, 194);
    /* background: #f5f5f5; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: hidden;
}

/* common chat bubble */
.chat_msg {
    /* max-width: 70%; */
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 14px;
    animation: fadeIn 0.3s ease;
    color:black;
}

/* left (received) */
.chat_msg.left {
    background: #f3f4f6;
    align-self: flex-start;
    border-bottom-left-radius: 5px;
}

/* right (sent) */
.chat_msg.right {
    background: #f76641;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 5px;
}

/* animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.rightsd_qn_contnr {
    width: 40%;
    position: relative;
    animation: slideInRight 0.5s ease forwards;
    max-width: fit-content;
    overflow-y: auto;
}

/* Animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%); /* right side se start */
        opacity: 0;
    }
    to {
        transform: translateX(0); /* apni position par aa jayega */
        opacity: 1;
    }
}

.sltd_topicnm{
    margin: 5px 10px;
}

.topic_qn{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    padding: 7px;
    background: #f3f4f6;
    border-radius: 9px;
    margin: 10px;
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.15s ease;
    color:black;
}
.topic_qn:hover{
       transform: translateY(-4px);
       box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    
}

/* HTML: <div class="loader"></div> */
.chat_loader {
  width: 30px;
    aspect-ratio: 4;
    --_g: no-repeat radial-gradient(circle closest-side, #b1adad 90%, #0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100% / 3) 100%;
    animation: l7 1s infinite linear;
}
@keyframes l7 {
    33%{background-size:calc(100%/3) 0%  ,calc(100%/3) 100%,calc(100%/3) 100%}
    50%{background-size:calc(100%/3) 100%,calc(100%/3) 0%  ,calc(100%/3) 100%}
    66%{background-size:calc(100%/3) 100%,calc(100%/3) 100%,calc(100%/3) 0%  }
}

/* media query  */

@media (min-width: 320px) and (max-width: 430px) {
  .chatbot_container {

width: 45vh;
    font-size: 13px;
}

.chatbot_header_txt span {
    font-size: 12px;
}

.chatbot_welcome_txt {
    font-size: 12px;
}
.chatbt_bd_head p {
    font-size: 12px;
}

.topic_btn {
width: 272px;
}

.chat_msg {
       font-size: 12px;
    max-width: 86%;
   }

.topic_qn {
font-size: 12px;
}

.chatbot_footer{
width: 94.5%;
}

.cht_write_cont{
    max-height:45vh;
}
}