:root{
--wa-green:#25D366;
--wa-dark:#075E54;
--wa-gray:#f0f2f5;
}

body{
margin:0;
font-family:tahoma;
background:var(--wa-gray);
height:100vh;
overflow:hidden;
}

.app-container{
display:flex;
height:100vh;
background:white;
}

/* sidebar */

.sidebar{
width:100%;
max-width:420px;
border-left:1px solid #ddd;
display:flex;
flex-direction:column;
position:relative;
}

.wa-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px;
}

.wa-header h2{
margin:0;
font-size:22px;
}

.header-icons i{
font-size:18px;
margin-right:15px;
cursor:pointer;
color:#54656f;
}

/* search */

.search-container{
padding:10px 15px;
}

.search-bar{
background:#f0f2f5;
border-radius:10px;
display:flex;
align-items:center;
padding:8px 10px;
}

.search-bar input{
border:none;
background:transparent;
outline:none;
width:100%;
font-size:14px;
}

/* chats */

.chat-list{
flex:1;
overflow-y:auto;
}

.chat-item{
display:flex;
align-items:center;
padding:12px 15px;
cursor:pointer;
transition:.2s;
}

.chat-item:hover{
background:#f5f6f6;
}

.avatar{
width:50px;
height:50px;
border-radius:50%;
margin-left:15px;
object-fit:cover;
}

.chat-info{
flex:1;
border-bottom:1px solid #eee;
padding-bottom:8px;
}

.chat-top{
display:flex;
justify-content:space-between;
margin-bottom:4px;
}

.chat-name{
font-weight:bold;
font-size:15px;
}

.chat-time{
font-size:12px;
color:#667781;
}

.chat-msg{
font-size:14px;
color:#667781;
}

/* floating button */

.fab{
position:absolute;
bottom:80px;
left:20px;
width:55px;
height:55px;
background:#1d1d1d;
color:white;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,.3);
}

/* bottom nav */

.bottom-nav{
display:flex;
justify-content:space-around;
border-top:1px solid #eee;
padding:10px 0;
background:white;
}

.nav-item{
font-size:12px;
text-align:center;
color:#54656f;
cursor:pointer;
}

.nav-item i{
display:block;
font-size:18px;
margin-bottom:3px;
}

.nav-item.active{
color:black;
font-weight:bold;
}

/* desktop chat */

.main-chat{
flex:1;
background:#efeae2;
display:flex;
align-items:center;
justify-content:center;
color:#667781;
}

@media(max-width:768px){

.main-chat{
display:none;
}

.sidebar{
max-width:100%;
}

}