*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#f5f5f5;
}

/* Floating Button */

.chat-button{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

background:#005baa;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

cursor:pointer;

box-shadow:0 5px 20px rgba(0,0,0,.3);

z-index:9999;

}

.chat-window{

position:fixed;

right:25px;

bottom:100px;

width:380px;

height:600px;

background:#fff;

border-radius:18px;

overflow:hidden;

display:none;

flex-direction:column;

box-shadow:0 10px 30px rgba(0,0,0,.2);

z-index:9999;

}

.chat-header{

background:#005baa;

color:#fff;

padding:15px;

display:flex;

justify-content:space-between;

align-items:center;

}

.chat-header button{

background:none;

border:none;

color:white;

font-size:22px;

cursor:pointer;

}

.status{

font-size:13px;

margin-top:3px;

}

.dot{

display:inline-block;

width:8px;

height:8px;

border-radius:50%;

background:#0f0;

margin-right:5px;

}

.chat-body{

flex:1;

padding:15px;

overflow-y:auto;

background:#f3f3f3;

}

.bot-message{

background:white;

padding:12px;

border-radius:12px;

margin-bottom:12px;

max-width:90%;

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

}

.user-message{

background:#005baa;

color:white;

padding:12px;

border-radius:12px;

margin-bottom:12px;

margin-left:auto;

max-width:90%;

}

.chat-footer{

display:flex;

padding:10px;

background:white;

border-top:1px solid #ddd;

}

.chat-footer input{

flex:1;

padding:12px;

border:1px solid #ccc;

border-radius:8px;

outline:none;

}

.chat-footer button{

margin-left:10px;

width:50px;

border:none;

background:#005baa;

color:white;

border-radius:8px;

cursor:pointer;

}

@media(max-width:600px){

.chat-window{

width:100%;

height:100%;

right:0;

bottom:0;

border-radius:0;

}

.chat-button{

right:15px;

bottom:15px;

}

}