#chat-open{

position:fixed;

bottom:28px;

right:28px;

width:72px;

height:72px;

border:none;

border-radius:50%;

cursor:pointer;

background:linear-gradient(135deg,#0b2545,#1d4b86);

color:white;

font-size:30px;

box-shadow:0 15px 35px rgba(11,37,69,.35);

transition:.3s;

z-index:9998;

}




#chat-open:hover{

transform:scale(1.08);

box-shadow:0 20px 40px rgba(11,37,69,.45);

}



#chat-window{

position:fixed;

bottom:95px;

right:30px;

width:380px;

height:620px;

background:#fff;

border-radius:24px;

overflow:hidden;

display:none;

flex-direction:column;

box-shadow:0 25px 60px rgba(0,0,0,.20);

animation:chatOpen .35s ease;

z-index:9999;

}



.chat-header{

background:linear-gradient(135deg,#0b2545,#1e497f);

color:white;

padding:18px;

display:flex;

align-items:center;

gap:15px;

}





#chat-close{

cursor:pointer;

font-size:28px;

}




.chat-body{

padding:18px;

overflow-y:auto;

flex:1;

background:#f5f7fb;

}

.bot-message{

background:white;

padding:14px 18px;

border-radius:18px 18px 18px 6px;

margin-bottom:15px;

box-shadow:0 5px 15px rgba(0,0,0,.06);

line-height:1.6;

font-size:15px;

animation:fadeMessage .25s;

}


.quick-buttons{

display:flex;

flex-wrap:wrap;

gap:10px;

}



.quick-buttons button{

background:white;

border:1px solid #dce3ef;

border-radius:12px;

padding:12px;

cursor:pointer;

transition:.25s;

display:flex;

align-items:center;

gap:10px;

font-size:14px;

width:100%;

margin-bottom:8px;

}


.quick-buttons button:hover{

background:#eef5ff;

border-color:#0b2545;

transform:translateX(4px);

}


.chat-footer input{

flex:1;

border:1px solid #ddd;

border-radius:10px;

padding:12px;

outline:none;

}

.chat-footer button{

margin-left:10px;

background:#0b2545;

color:white;

border:none;

border-radius:10px;

width:50px;

cursor:pointer;

}

.user-message{

background:#0b2545;

color:white;

padding:14px 18px;

border-radius:18px 18px 6px 18px;

margin:15px 0;

margin-left:60px;

line-height:1.6;

animation:fadeMessage .25s;

}
@media(max-width:768px){

#chat-window{

width:92%;

right:4%;

height:70vh;

}

}


.chat-header{

display:flex;
align-items:center;
padding:16px;
background:#0b2545;
color:white;

}


.chat-avatar{

width:54px;

height:54px;

border-radius:50%;

background:white;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

flex-shrink:0;

}









.quick-buttons{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-top:18px;

}

.quick-buttons button{

background:#f7f8fa;
border:none;
border-radius:14px;
padding:14px;
cursor:pointer;
font-size:15px;
transition:.25s;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;

}

.quick-buttons button:hover{

background:#0b2545;
color:white;
transform:translateY(-3px);

}

.quick-buttons span{

font-size:14px;
font-weight:600;

}

@keyframes chatOpen{

from{

opacity:0;

transform:translateY(30px) scale(.95);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}







.chat-title{

display:flex;

flex-direction:column;

flex:1;

}

.chat-title strong{

font-size:18px;

}

.chat-title small{

opacity:.9;

font-size:13px;

}






.online-dot{

display:inline-block;

width:8px;

height:8px;

background:#30d158;

border-radius:50%;

margin:0 5px;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.5);

opacity:.5;

}

100%{

transform:scale(1);

opacity:1;

}

}


@keyframes fadeMessage{

from{

opacity:0;

transform:translateY(8px);

}

to{

opacity:1;

transform:translateY(0);

}

}