#ai-btn{
position:fixed;
bottom:20px;
right:20px;
width:65px;
height:65px;
background:linear-gradient(45deg,#6C3CF0,#9C27B0);
border-radius:50%;
color:white;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:9999;
font-size:26px;
}

#ai-box{
position:fixed;
bottom:100px;
right:20px;
width:350px;
height:500px;
background:white;
border-radius:15px;
box-shadow:0 20px 60px rgba(0,0,0,.2);
display:none;
flex-direction:column;
overflow:hidden;
}

.ai-header{
background:linear-gradient(45deg,#6C3CF0,#9C27B0);
color:white;
padding:15px;
display:flex;
justify-content:space-between;
}

#ai-body{
flex:1;
overflow:auto;
padding:15px;
background:#f7f8fc;
}

.bot{
background:#eee;
padding:10px;
border-radius:10px;
margin:5px 0;
display:inline-block;
}

.user{
background:#6C3CF0;
color:white;
padding:10px;
border-radius:10px;
margin:5px 0;
float:right;
display:inline-block;
}

.ai-footer{
display:flex;
border-top:1px solid #eee;
}

.ai-footer input{
flex:1;
padding:12px;
border:none;
}

.ai-footer button{
background:#6C3CF0;
color:white;
border:none;
padding:10px;
}

#ai-btn{
position:fixed;
bottom:20px;
right:20px;
z-index:999999;
}

#ai-box{
position:fixed;
bottom:90px;
right:20px;
z-index:999999;
}

.typing{
opacity:.6;
font-style:italic;
}















@media(max-width:600px){

#ai-box{
width:100%;
right:0;
bottom:0;
height:100%;
border-radius:0;
}

}