body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#e5ddd5;
display:flex;
justify-content:center;
}

/* CONTAINER PRINCIPAL */

.wrapper{
width:100%;
max-width:420px;
height:100vh;
display:flex;
flex-direction:column;
background:#e5ddd5;
position:relative;
}

/* TOPO */

.top{
background:#075E54;
color:white;
padding:10px 12px;
display:flex;
align-items:center;
gap:10px;
font-size:15px;
}

.top img{
width:38px;
height:38px;
border-radius:50%;
object-fit:cover;
}

.top .info{
display:flex;
flex-direction:column;
}

.top .name{
font-weight:bold;
}

.top .status{
font-size:12px;
opacity:.8;
}

/* CHAT */

.chat{
flex:1;
overflow-y:auto;
padding:12px;
padding-bottom:80px;
display:flex;
flex-direction:column;
gap:8px;
background:#e5ddd5;
}

/* MENSAGENS */

.msg{
max-width:75%;
padding:10px 14px;
border-radius:8px;
font-size:14px;
line-height:1.4;
word-wrap:break-word;
}

.bot{
background:white;
align-self:flex-start;
}

.user{
background:#dcf8c6;
align-self:flex-end;
}

/* MIDIAS */

.msg img,
.msg video{
max-width:230px;
border-radius:8px;
}

.msg audio{
width:230px;
}

/* BARRA DE ENVIO */

.inputbar{
position:absolute;
bottom:0;
left:0;
width:100%;
background:#f0f0f0;
border-top:1px solid #ddd;
display:flex;
align-items:center;
gap:6px;
padding:6px;
box-sizing:border-box;
}

/* BOTÕES */

.iconbtn{
width:34px;
height:34px;
border-radius:50%;
background:white;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
border:1px solid #ddd;
}

.inputbar input{
flex:1;
padding:9px 12px;
border-radius:20px;
border:1px solid #ccc;
}

.sendbtn{
background:#25D366;
border:none;
color:white;
width:38px;
height:38px;
border-radius:50%;
}