body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#e5ddd5;
}

/* topo */

.top{
background:#075E54;
color:white;
padding:15px;
font-weight:bold;
font-size:16px;
}

/* área do chat */

.chat{
height:75vh;
overflow:auto;
padding:15px;
display:flex;
flex-direction:column;
}

/* mensagens */

.msg{
padding:10px 14px;
border-radius:10px;
margin:6px 0;
max-width:65%;
font-size:14px;
word-break:break-word;
}

/* bot */

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

/* usuário */

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

/* digitando */

.typing{
padding:10px;
font-size:12px;
color:#666;
}

/* input */

.input{
position:fixed;
bottom:0;
left:0;
width:100%;
background:white;
padding:10px;
display:flex;
gap:5px;
box-shadow:0 -2px 5px rgba(0,0,0,0.1);
}

.input input{
flex:1;
padding:10px;
border-radius:6px;
border:1px solid #ccc;
}

.input button{
background:#25D366;
border:0;
padding:10px 18px;
color:white;
border-radius:6px;
cursor:pointer;
}

/* mídia */

audio,video,img{
max-width:220px;
border-radius:8px;
margin-top:5px;
}

/* RESPONSIVO CELULAR */

@media (max-width:600px){

.chat{
height:70vh;
padding:10px;
}

.msg{
max-width:85%;
font-size:13px;
}

audio,video,img{
max-width:200px;
}

.top{
font-size:15px;
padding:12px;
}

}