body{
font-family:Arial;
margin:0;
background:#111b21;
color:white;
}

.login-body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.login-box{
background:#202c33;
padding:40px;
border-radius:8px;
width:300px;
text-align:center;
}

.login-box input{
width:100%;
padding:10px;
margin:10px 0;
}

.login-box button{
background:#00a884;
border:none;
padding:10px;
color:white;
width:100%;
}

.topbar{
background:#202c33;
padding:15px;
display:flex;
gap:20px;
align-items:center;
}

.dashboard{
padding:30px;
display:flex;
gap:20px;
}

.card{
background:#202c33;
padding:20px;
border-radius:8px;
width:200px;
}

.chat-container{
display:flex;
height:100vh;
}

.sidebar{
width:30%;
background:#202c33;
padding:15px;
}

.chat{
width:70%;
display:flex;
flex-direction:column;
background:#0b141a;
}

.chat-header{
padding:15px;
background:#202c33;
}

.messages{
flex:1;
overflow-y:auto;
padding:20px;
}

.msg{
max-width:60%;
padding:10px;
margin:10px;
border-radius:8px;
}

.agent{
background:#005c4b;
margin-left:auto;
}

.client{
background:#202c33;
}

.input-area{
display:flex;
padding:10px;
background:#202c33;
}

.input-area input{
flex:1;
padding:10px;
}

.input-area button{
background:#00a884;
border:none;
padding:10px 20px;
color:white;
}