#ff-chat-button{

position:fixed;
bottom:20px;
right:20px;
width:60px;
height:60px;
background:#2f6fdb;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
cursor:pointer;
z-index:9999;

}

#ff-chat{

position:fixed;
bottom:90px;
right:20px;
width:320px;
height:420px;
background:white;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,0.2);
display:none;
flex-direction:column;
overflow:hidden;
z-index:9999;

}

#ff-header{

background:#2f6fdb;
color:white;
padding:10px;
font-weight:bold;

}

#ff-body{

flex:1;
padding:10px;
overflow-y:auto;
font-size:14px;

}

.user{

background:#2f6fdb;
color:white;
padding:10px 12px;
border-radius:12px;
margin:6px 0;
max-width:80%;
margin-left:auto;

}

.bot{

background:#f1f1f1;
padding:10px 12px;
border-radius:12px;
margin:6px 0;
max-width:80%;

}

.typing{

font-style:italic;
opacity:0.7;

}

#ff-footer{

display:flex;
border-top:1px solid #eee;

}

#ff-input{

flex:1;
border:none;
padding:10px;
outline:none;

}

#ff-footer button{

border:none;
background:#2f6fdb;
color:white;
padding:10px 14px;
cursor:pointer;

}

.suggestions{
margin-top:10px;
}

.suggestions button{

margin:4px;
padding:6px 10px;
border:none;
background:#eef2ff;
color:#2f6fdb;
border-radius:6px;
cursor:pointer;
font-size:13px;

}

.suggestions button:hover{

background:#2f6fdb;
color:white;

}

.lead-form input,
.lead-form textarea{

width:100%;
margin-bottom:6px;
padding:6px;
border:1px solid #ddd;
border-radius:4px;

}

.lead-form button{

background:#2f6fdb;
color:white;
border:none;
padding:8px;
border-radius:5px;
cursor:pointer;

}

/* typing animation */

.typing-dots{

display:flex;
gap:4px;

}

.typing-dots span{

width:6px;
height:6px;
background:#888;
border-radius:50%;
animation:typing 1s infinite;

}

.typing-dots span:nth-child(2){
animation-delay:0.2s;
}

.typing-dots span:nth-child(3){
animation-delay:0.4s;
}

@keyframes typing{

0%{opacity:0.2}
50%{opacity:1}
100%{opacity:0.2}

}