:root{--fundo:#efeae2;--topo:#075e54;--meu:#d9fdd3;--dela:#fff;--txt:#111b21;--sub:#667781}
@media(prefers-color-scheme:dark){:root{--fundo:#0b141a;--topo:#202c33;--meu:#005c4b;--dela:#202c33;--txt:#e9edef;--sub:#8696a0}}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:16px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--fundo);color:var(--txt)}
.tela{max-width:560px;height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--fundo);box-shadow:0 0 30px #0002}
header{display:flex;gap:12px;align-items:center;padding:10px 14px;background:var(--topo);color:#fff;padding-top:max(10px,env(safe-area-inset-top))}
header small{display:block;opacity:.75;font-size:12px}
.avatar{width:40px;height:40px;border-radius:50%;background:#ffffff33;display:grid;place-items:center;font-weight:600}
#msgs{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:5px}
.b{max-width:82%;padding:7px 10px 6px;border-radius:9px;background:var(--dela);box-shadow:0 1px 1px #0002;white-space:pre-wrap;word-wrap:break-word;animation:e .18s ease-out}
.b.eu{align-self:flex-end;background:var(--meu)}
.b small{display:block;text-align:right;font-size:11px;color:var(--sub);margin-top:2px}
.digitando{color:var(--sub);font-style:italic}
.aviso{align-self:center;background:#fff3c4;color:#5a4a00;font-size:13px;padding:5px 10px;border-radius:8px}
@keyframes e{from{opacity:0;transform:translateY(4px)}}
form{display:flex;gap:8px;padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:var(--fundo)}
input{flex:1;border:0;border-radius:22px;padding:11px 16px;font:inherit;background:var(--dela);color:var(--txt);outline:0}
button{width:44px;height:44px;border:0;border-radius:50%;background:#00a884;color:#fff;display:grid;place-items:center;cursor:pointer}
button:disabled{opacity:.5}

.ic{background:transparent;color:var(--sub)}.ic.gravando{background:#e53935;color:#fff;animation:p 1s infinite}@keyframes p{50%{opacity:.55}}
.b img{display:block;max-width:100%;max-height:260px;border-radius:6px}.b audio{display:block;max-width:100%}.b .pdf{font-weight:600}