body{

margin:0;

font-family:Segoe UI,sans-serif;

background:#081526;

color:white;

}

.msg-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 40px;

background:#10233f;

}

.msg-header h1{

margin:0;

color:#64ffda;

}

.msg-header nav{

display:flex;

gap:18px;

}

.msg-header nav a{

color:white;

text-decoration:none;

}

.messaging-layout{

display:grid;

grid-template-columns:

320px

1fr

280px;

height:calc(100vh - 80px);

}

.conversation-list{

background:#10233f;

overflow:auto;

padding:20px;

}

.search-box input{

width:100%;

padding:12px;

border:none;

border-radius:8px;

background:#1c3354;

color:white;

}

.conversation{

padding:15px;

margin-top:10px;

background:#163051;

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.conversation:hover{

background:#1d436f;

}

.chat-window{

display:flex;

flex-direction:column;

background:#0f1d34;

}

.chat-header{

padding:20px;

background:#122849;

}

.chat-messages{

flex:1;

overflow:auto;

padding:25px;

}

.message{

padding:12px 18px;

margin-bottom:15px;

border-radius:16px;

max-width:70%;

}

.message.self{

margin-left:auto;

background:#64ffda;

color:#081526;

}

.message.other{

background:#20395e;

}

.message-composer{

display:flex;

padding:20px;

gap:15px;

background:#122849;

}

.message-composer textarea{

flex:1;

padding:15px;

border:none;

border-radius:12px;

resize:none;

height:70px;

background:#1d3658;

color:white;

}

.message-composer button{

padding:15px 35px;

border:none;

background:#64ffda;

color:#081526;

font-weight:bold;

border-radius:12px;

cursor:pointer;

}

.contact-panel{

background:#10233f;

padding:20px;

overflow:auto;

}

.contact-panel h3{

color:#64ffda;

}

.contact-panel ul{

padding-left:18px;

}

.contact-panel button{

width:100%;

margin-top:12px;

padding:12px;

border:none;

border-radius:10px;

background:#64ffda;

cursor:pointer;

font-weight:bold;

}

@media(max-width:1100px){

.messaging-layout{

grid-template-columns:300px 1fr;

}

.contact-panel{

display:none;

}

}

@media(max-width:768px){

.messaging-layout{

grid-template-columns:1fr;

}

.conversation-list{

display:none;

}

}