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

body{

margin:0;
background:#eaf2ff;
display:flex;
justify-content:center;

}


.chat-container{

width:100%;
max-width:480px;
height:100vh;

background:white;

display:flex;
flex-direction:column;

}


.header{

background:#005baa;
color:white;

padding:15px;

display:flex;
gap:12px;
align-items:center;

}


.logo{

font-size:35px;

}


.header h2{

margin:0;
font-size:18px;

}


.header p{

margin:3px 0 0;
font-size:14px;

}


.chat-box{

flex:1;

padding:15px;

overflow-y:auto;

}


.message{

padding:12px;

margin-bottom:12px;

border-radius:12px;

line-height:1.5;

}


.bot{

background:#f1f5f9;

}


.user{

background:#005baa;
color:white;

margin-left:50px;

}


.quick{

display:grid;

grid-template-columns:1fr 1fr;

gap:8px;

}


.quick button{

padding:10px;

border:none;

background:#e7f0ff;

border-radius:10px;

cursor:pointer;

}


.input-area{

display:flex;

padding:10px;

border-top:1px solid #ddd;

}


.input-area input{

flex:1;

padding:12px;

border-radius:20px;

border:1px solid #ccc;

}


.input-area button{

margin-left:8px;

border:none;

background:#005baa;

color:white;

border-radius:50%;

width:45px;

font-size:18px;

}


.footer{

font-size:12px;

text-align:center;

padding:8px;

background:#f8fafc;

color:#555;

}