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

/* TOPO */

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

/* CHAT */

.chat{
height:calc(100vh - 120px);
overflow-y:auto;
padding:12px;
padding-bottom:100px;
display:flex;
flex-direction:column;
gap:6px;
box-sizing:border-box;
}

/* MENSAGENS */

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

.bot{
background:#ffffff;
align-self:flex-start;
box-shadow:0 1px 1px rgba(0,0,0,0.2);
}

.user{
background:#dcf8c6;
align-self:flex-end;
box-shadow:0 1px 1px rgba(0,0,0,0.2);
}

/* MIDIAS */

img{
max-width:230px;
border-radius:8px;
}

video{
max-width:230px;
border-radius:8px;
}

/* AUDIO */

audio{
width:230px;
border-radius:20px;
background:#f0f0f0;
padding:5px;
}

/* BARRA DE ENVIO */

.inputbar{
position:fixed;
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;
cursor:pointer;
border:1px solid #ddd;
flex-shrink:0;
transition:0.2s;
}

.iconbtn:hover

/* INPUT */

.inputbar input[type="text"]{
flex:1;
padding:9px 12px;
border-radius:20px;
border:1px solid #ccc;
font-size:14px;
outline:none;
min-width:0;
}

/* FILE */

.inputbar input[type="file"]{
display:none;
}

/* BOTAO ENVIAR */

.sendbtn{
background:#25D366;
border:none;
color:white;
width:38px;
height:38px;
border-radius:50%;
font-size:16px;
cursor:pointer;
flex-shrink:0;
transition:0.2s;
}

.sendbtn:hover

/* MOBILE */

@media (max-width:700px){

.chat{
padding:10px;
padding-bottom:110px;
}

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

img{
max-width:180px;
}

video{
max-width:200px;
}

audio{
width:200px;
}

.inputbar{
padding:6px;
gap:6px;
}

.inputbar input[type="text"]{
font-size:14px;
padding:8px 10px;
}

.iconbtn{
width:32px;
height:32px;
font-size:15px;
}

.sendbtn{
width:36px;
height:36px;
}

}

/* DIGITANDO */

.typing{
background:#ffffff;
align-self:flex-start;
padding:10px 14px;
border-radius:8px;
width:60px;
display:flex;
gap:4px;
}

.typing span{
width:6px;
height:6px;
background:#999;
border-radius:50%;
animation:blink 1.4s infinite;
}

.typing span:nth-child(2){
animation-delay:.2s;
}

.typing span:nth-child(3){
animation-delay:.4s;
}

@keyframes blink{
0%{opacity:.2}
20%{opacity:1}
100%{opacity:.2}
}

/* CHECK AZUL */

.check{
font-size:11px;
color:#4fc3f7;
margin-top:4px;
text-align:right;
}