.chatbot-button{

position:fixed;

bottom:25px;

right:25px;

width:60px;

height:60px;

border-radius:50%;

background:#0F3040;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

cursor:pointer;

z-index:999;

}



.chatbox{


position:fixed;

bottom:100px;

right:25px;

width:350px;

height:500px;

background:white;

border-radius:20px;

box-shadow:0 10px 40px #0003;

display:none;

flex-direction:column;

overflow:hidden;

z-index:999;


}



.chatbox.show{

display:flex;

}



.chat-header{

background:#0F3040;

color:white;

padding:18px;

font-size:18px;

display:flex;

justify-content:space-between;

}



.chat-body{

flex:1;

padding:15px;

overflow-y:auto;

background:#f5f5f5;

}



.bot-message,
.user-message{

padding:12px;

margin-bottom:10px;

border-radius:15px;

max-width:80%;

line-height:1.8;

}



.bot-message{

background:white;

}



.user-message{

background:#0F3040;

color:white;

margin-right:auto;

}



.chat-input{

display:flex;

padding:10px;

border-top:1px solid #ddd;

}



.chat-input input{

flex:1;

padding:10px;

border-radius:10px;

border:1px solid #ccc;

}



.chat-input button{

margin-right:8px;

background:#0F3040;

color:white;

border:none;

padding:10px 15px;

border-radius:10px;

}



@media(max-width:500px){

.chatbox{

right:10px;

left:10px;

width:auto;

}

}
/* =========================
   CHATBOT
========================= */


.chatbot-button{

    position:fixed;

    bottom:25px;

    left:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #A56F63,
        #D99B7F
    );

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    cursor:pointer;

    box-shadow:0 15px 40px #0008;

    z-index:9999;

}




.chatbox{

    position:fixed;

    bottom:100px;

    left:25px;

    width:360px;

    height:500px;

    background:white;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 20px 60px #0008;

    display:none;

    flex-direction:column;

    z-index:9999;

}





.chat-header{


    background:linear-gradient(
        135deg,
        #0F3040,
        #464858
    );


    color:white;


    padding:18px;


    font-weight:800;


    display:flex;


    justify-content:space-between;


}




.chat-header span{

    cursor:pointer;

    font-size:22px;

}




.chat-body{


    flex:1;


    overflow-y:auto;


    padding:15px;


    background:#f5f5f5;


}





.bot-message{


    background:white;


    color:#222;


    padding:12px;


    border-radius:15px;


    margin-bottom:10px;


    line-height:2;


}




.user-message{


    background:#0F3040;


    color:white;


    padding:12px;


    border-radius:15px;


    margin-bottom:10px;


}





.chat-input{


    display:flex;


    background:white;


    border-top:1px solid #ddd;


    padding:10px;


}





/* مشکل تایپ اینجا حل می شود */

.chat-input input{


    flex:1;


    width:auto !important;


    margin:0 !important;


    padding:14px !important;


    border-radius:15px !important;


    border:1px solid #ddd !important;


    background:white !important;


    color:#222 !important;


    -webkit-text-fill-color:#222 !important;


    font-family:"Vazirmatn";


    font-size:15px;


}





.chat-input input::placeholder{


    color:#888 !important;


}





.chat-input button{


    margin-right:8px;


    padding:0 20px;


    border:none;


    border-radius:15px;


    background:linear-gradient(
        135deg,
        #A56F63,
        #D99B7F
    );


    color:white;


    cursor:pointer;


    font-weight:700;


}






@media(max-width:600px){


.chatbox{


    left:10px;

    right:10px;

    width:auto;


}
}
.bot-message a{

color:#A56F63;

text-decoration:underline;

font-weight:800;

display:inline-block;

margin-top:8px;

}