*{

box-sizing:border-box;

}


body{

margin:0;

font-family:
"Segoe UI",
Arial;

background:#e5e7eb;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

}



.chat-container{

width:420px;

height:600px;

background:white;

border-radius:20px;

overflow:hidden;

display:flex;

flex-direction:column;

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

}



/* Header */


.chat-header{

background:#2563eb;

color:white;

padding:20px;

font-size:20px;

font-weight:bold;

}


.chat-header span{

float:right;

font-size:13px;

background:#22c55e;

padding:5px 10px;

border-radius:20px;

}



/* Messages */


.chat-body{

flex:1;

padding:20px;

overflow-y:auto;

background:#f8fafc;

}



.message{

display:flex;

margin-bottom:15px;

}



.message.bot{

justify-content:flex-start;

}


.message.user{

justify-content:flex-end;

}



.bubble{

max-width:75%;

padding:12px 16px;

border-radius:18px;

font-size:15px;

line-height:1.5;

}



.bot .bubble{

background:#e2e8f0;

color:#111827;

border-bottom-left-radius:5px;

}



.user .bubble{

background:#2563eb;

color:white;

border-bottom-right-radius:5px;

}



/* Typing */


.typing{

font-style:italic;

color:#64748b;

}



/* Footer */


.chat-footer{

display:flex;

padding:15px;

border-top:1px solid #ddd;

}



.chat-footer input{

flex:1;

padding:12px;

border-radius:25px;

border:1px solid #ccc;

outline:none;

}



.chat-footer button{

margin-left:10px;

width:45px;

height:45px;

border-radius:50%;

border:none;

background:#2563eb;

color:white;

font-size:20px;

cursor:pointer;

}



@media(max-width:500px){


.chat-container{

width:100%;

height:100vh;

border-radius:0;

}


}
.call-btn,
.video-btn{

border:none;

padding:10px 15px;

border-radius:20px;

color:white;

cursor:pointer;

font-weight:bold;

}


.call-btn{

background:#16a34a;

}


.video-btn{

background:#2563eb;

}