:root{
  --bg:#0b0b0c; --painel:#141416; --linha:#232327; --texto:#f2f2f2; --suave:#9a9aa2;
  --coral:#ff3b5c; --cta:#c8ff00; --in:#1c1c20; --out:#2a1218; --bot:#16201a;
  --raio:14px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--texto);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
#app{height:100dvh;display:flex;overflow:hidden}
.tela{flex:1;display:flex;flex-direction:column;min-width:0;height:100%}
.tela[hidden]{display:none}

/* topo */
.topo{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--sat)) 14px 10px;
  background:var(--painel);border-bottom:1px solid var(--linha);min-height:56px}
.topo h1{font-size:20px;margin:0;flex:1}
.icone{background:none;border:0;font-size:24px;width:40px;height:40px;border-radius:10px;color:var(--texto)}
.icone:active{background:var(--linha)}

/* login */
.login{margin:auto;width:min(340px,100% - 32px);display:flex;flex-direction:column;gap:12px;padding-top:var(--sat)}
.login-logo{width:72px;height:72px;border-radius:18px;align-self:center}
.login h1{text-align:center;margin:8px 0 0;font-size:22px}
.sub{text-align:center;color:var(--suave);margin:0 0 8px}
input,textarea{background:var(--painel);border:1px solid var(--linha);border-radius:12px;padding:12px 14px;outline:none;width:100%}
input:focus,textarea:focus{border-color:var(--coral)}
.btn-cta{background:var(--cta);color:#111;border:0;border-radius:12px;padding:12px 16px;font-weight:700}
.btn{background:var(--painel);border:1px solid var(--linha);border-radius:12px;padding:10px 14px}
.erro{color:var(--coral);min-height:1.4em;margin:0;text-align:center}

/* lista */
.busca{padding:10px 14px 4px}
.busca input{padding:10px 14px}
.abas{display:flex;gap:6px;padding:6px 14px 8px}
.aba{background:none;border:1px solid var(--linha);border-radius:999px;padding:6px 14px;color:var(--suave);font-size:14px}
.aba.ativa{background:var(--texto);color:#111;border-color:var(--texto)}
.lista{list-style:none;margin:0;padding:0 0 var(--sab);overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.item{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--linha);align-items:center}
.item:active,.item.sel{background:var(--painel)}
.av{width:46px;height:46px;border-radius:50%;background:#2b2b31;display:grid;place-items:center;font-weight:700;flex:none;color:var(--suave)}
.item .meio{flex:1;min-width:0}
.item .l1,.item .l2{display:flex;gap:8px;align-items:center}
.item .nome{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .hora{font-size:12px;color:var(--suave)}
.item .previa{flex:1;color:var(--suave);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{background:var(--cta);color:#111;border-radius:999px;font-size:12px;font-weight:700;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center}
.tags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.tag{font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--linha);color:var(--suave)}
.tag.urg{border-color:var(--coral);color:var(--coral)}
.tag.hum{border-color:#ffb020;color:#ffb020}
.tag.alu{border-color:var(--cta);color:var(--cta)}
.vazio{color:var(--suave);text-align:center;padding:40px 16px}

/* chat */
.chat-topo .quem{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-topo .quem strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-topo .quem span{font-size:12px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-modo{border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;border:0;white-space:nowrap}
.btn-modo.assumir{background:var(--coral);color:#fff}
.btn-modo.devolver{background:var(--painel);border:1px solid var(--linha);color:var(--texto)}
.menu{position:absolute;right:12px;top:calc(60px + var(--sat));background:var(--painel);border:1px solid var(--linha);border-radius:12px;z-index:5;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 30px #0008}
.menu[hidden]{display:none}
.menu button{background:none;border:0;padding:12px 16px;text-align:left}
.menu button:active{background:var(--linha)}
.painel-chat{position:relative}
.faixa{padding:8px 14px;font-size:13px;background:#2a1a08;color:#ffcf7a;border-bottom:1px solid var(--linha)}
.faixa.urg{background:#2a0d13;color:#ff8da0}
.msgs{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:4px;-webkit-overflow-scrolling:touch}
.dia{align-self:center;font-size:12px;color:var(--suave);background:var(--painel);padding:3px 10px;border-radius:999px;margin:8px 0}
.b{max-width:82%;padding:8px 11px 6px;border-radius:var(--raio);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.b.in{align-self:flex-start;background:var(--in);border-bottom-left-radius:4px}
.b.out{align-self:flex-end;background:var(--out);border-bottom-right-radius:4px}
.b.out.bot{background:var(--bot)}
.b .rod{display:flex;gap:6px;justify-content:flex-end;font-size:11px;color:var(--suave);margin-top:3px}
.b .quem-env{font-size:11px;color:var(--suave);margin-bottom:2px}
.b.falhou{border:1px solid var(--coral)}
.b .erro-env{font-size:12px;color:var(--coral);margin-top:3px}
.b img,.b video{max-width:100%;border-radius:10px;display:block}
.b audio{width:240px;max-width:100%}
.b a{color:var(--cta)}
.compor{display:flex;gap:8px;padding:8px 10px calc(8px + var(--sab));background:var(--painel);border-top:1px solid var(--linha);align-items:flex-end}
.compor textarea{resize:none;max-height:140px;border-radius:20px;padding:10px 14px;font-size:16px}
.btn-enviar{width:44px;height:44px;border-radius:50%;border:0;background:var(--cta);color:#111;font-size:18px;flex:none}
.compor.travado textarea{opacity:.5}
.compor.travado .btn-enviar{background:var(--linha);color:var(--suave)}

/* config */
.config{padding:8px 16px calc(24px + var(--sab));overflow-y:auto}
.config h2{font-size:15px;color:var(--suave);text-transform:uppercase;letter-spacing:.04em;margin:22px 0 8px}
.dica{color:var(--suave);font-size:14px;margin:6px 0}
.linha{display:flex;gap:10px;align-items:center;margin:8px 0}
.linha input{width:auto}
.botoes{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.botoes input{flex:1;min-width:150px}
.status{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px}
.status .ok{color:var(--cta)} .status .nao{color:var(--coral)}
.saida{background:var(--painel);border:1px solid var(--linha);border-radius:12px;padding:10px;font-size:12px;white-space:pre-wrap;overflow-x:auto}
.aviso{position:fixed;left:50%;bottom:calc(80px + var(--sab));transform:translateX(-50%);background:var(--texto);color:#111;padding:10px 16px;border-radius:12px;font-size:14px;z-index:20;max-width:calc(100% - 32px)}

/* computador: lista e conversa lado a lado */
@media (min-width:900px){
  .painel-lista{flex:0 0 380px;border-right:1px solid var(--linha)}
  #app.duplo #tela-lista{display:flex}
  #b-voltar{display:none}
}