/* Chat da Sarah, com as cores da INB: preto, amarelo e verde. */
:root{--fundo:#080909;--cartao:#141614;--linha:#2A2E2A;--texto:#F2F3EE;--suave:#A8ADA6;--amarelo:#FFBB0C;--verde:#5FB3A5}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{height:100dvh;background:var(--fundo);color:var(--texto);font:500 18px/1.45 Rajdhani,Arial,sans-serif;display:flex;flex-direction:column}
.marca{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:2px solid var(--amarelo);background:var(--fundo)}
.logo{width:44px;height:44px;border-radius:50%;object-fit:cover}
.nome{font-weight:700;letter-spacing:.08em;color:var(--amarelo)}
.empresa{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--verde)}
#online{color:var(--verde)}
#digitando{color:var(--amarelo)}
.conversa{flex:1;min-height:0;width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column}
.mensagens{list-style:none;margin:0;padding:16px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:10px 14px;border-radius:14px;background:var(--cartao);border:1px solid var(--verde);overflow-wrap:anywhere;align-self:flex-start}
.msg.minha{align-self:flex-end;background:var(--amarelo);border-color:var(--amarelo);color:#11120D}
.msg.minha .hora{color:#4A4210}
.msg.sistema{align-self:center;background:transparent;border:0;color:var(--suave);font-size:15px}
.msg img{max-width:100%;border-radius:10px;display:block}
.msg audio{width:220px;max-width:100%}
.msg .hora{display:block;font-size:12px;color:var(--suave);margin-top:2px;text-align:right}
.aviso{margin:0 16px 8px;padding:8px 12px;border-radius:10px;background:#2A2205;color:var(--amarelo);font-size:15px}
.barra-envio{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--linha);background:var(--fundo)}
.barra-envio textarea{flex:1;min-width:0;resize:none;font:inherit;color:var(--texto);background:var(--cartao);border:1px solid var(--linha);border-radius:18px;padding:8px 14px;max-height:120px}
.barra-envio textarea:focus{outline:2px solid var(--verde);outline-offset:1px}
.botao-icone,.botao-enviar{border:0;background:var(--cartao);color:var(--texto);width:42px;height:42px;border-radius:50%;font-size:18px;cursor:pointer;display:grid;place-items:center;flex:none}
.botao-enviar{background:var(--amarelo);color:#11120D}
.botao-icone.gravando{background:#E5484D;color:#fff}
.rodape{margin:0;padding:4px 12px 8px;text-align:center;font-size:13px;background:var(--fundo)}
.rodape a{color:var(--suave)}