:root {
  --bg:#0f1115; --bg2:#161920; --bg3:#1d212a; --linha:#272c37;
  --txt:#e6e9ef; --txt2:#9aa3b2; --txt3:#6b7383;
  --acc:#5b8def; --acc2:#4a7ad4;
  --ok:#3fb950; --alerta:#d29922; --erro:#f85149; --roxo:#a371f7;
  --ciano:#39c5cf; --ouro:#e3b341;
  --r:12px; --sombra:0 4px 16px rgba(0,0,0,.4);
  --codbg:#0a0c10; --codtxt:#c9d1d9;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f7f8fa; --bg2:#fff; --bg3:#eef0f4; --linha:#dde1e8;
    --txt:#1a1d23; --txt2:#5a6474; --txt3:#8b94a3;
    --sombra:0 2px 10px rgba(0,0,0,.08);
    --codbg:#f2f4f8; --codtxt:#1a1d23;
  }
}
* { box-sizing:border-box; margin:0; padding:0 }
body {
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased;
}
button, input, select, textarea { font:inherit; color:inherit }
a { color:var(--acc); text-decoration:none }
a:hover { text-decoration:underline }
:focus-visible { outline:2px solid var(--acc); outline-offset:2px }

/* ---------- layout ---------- */
#app { display:none; grid-template-columns:250px 1fr; height:100vh }
#app.on { display:grid }
aside {
  background:var(--bg2); border-right:1px solid var(--linha);
  padding:18px 14px; display:flex; flex-direction:column; gap:6px; overflow-y:auto;
}
main { overflow-y:auto; padding:22px 28px 40px }
.marca { font-weight:700; font-size:16px; letter-spacing:-.3px; padding:0 8px 16px }
.marca span { color:var(--acc) }
.rotulo {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.9px;
  color:var(--txt3); padding:16px 8px 6px; font-weight:600;
}
.item {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:7px 10px; border-radius:8px; cursor:pointer; color:var(--txt2);
  border:none; background:none; width:100%; text-align:left;
}
.item:hover { background:var(--bg3); color:var(--txt) }
.item.on { background:var(--acc); color:#fff }
.item .n { font-size:11px; opacity:.75; font-variant-numeric:tabular-nums }
.item .n.aviso {
  background:var(--alerta); color:#1a1d23; opacity:1; font-weight:700;
  border-radius:20px; padding:0 6px; min-width:18px; text-align:center;
}
.item.on .n.aviso { background:#fff; color:var(--acc) }
.rodape { margin-top:auto; padding-top:14px; border-top:1px solid var(--linha);
  font-size:12px; color:var(--txt3) }

/* barra superior — só aparece no celular */
#barra {
  display:none; align-items:center; gap:12px; padding:10px 14px;
  background:var(--bg2); border-bottom:1px solid var(--linha);
  position:sticky; top:0; z-index:30;
}
#barra .marca { padding:0; font-size:15px }
#menu-btn {
  background:none; border:1px solid var(--linha); border-radius:8px;
  padding:5px 10px; cursor:pointer; font-size:16px; line-height:1;
}
#n-mobile { cursor:pointer }
#velo { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40 }
#velo.on { display:block }

/* ---------- componentes ---------- */
.topo { display:flex; justify-content:space-between; align-items:center;
  gap:16px; margin-bottom:16px; flex-wrap:wrap }
h1 { font-size:21px; font-weight:650; letter-spacing:-.4px }
.sub { color:var(--txt2); font-size:13px; margin-top:3px }

.btn {
  background:var(--acc); color:#fff; border:none; padding:8px 15px;
  border-radius:8px; cursor:pointer; font-weight:550; font-size:13px;
  transition:background .15s;
}
.btn:hover { background:var(--acc2) }
.btn.sec { background:var(--bg3); color:var(--txt); border:1px solid var(--linha) }
.btn.sec:hover { background:var(--linha) }
.btn.ok { background:var(--ok) } .btn.no { background:var(--erro) }
.btn.ok:hover { filter:brightness(1.08) } .btn.no:hover { filter:brightness(1.08) }
.btn:disabled { opacity:.45; cursor:not-allowed }
.btn.pequeno { padding:5px 10px; font-size:12px }

.card {
  background:var(--bg2); border:1px solid var(--linha);
  border-radius:var(--r); padding:16px; margin-bottom:12px;
}
.card.clicavel { cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s }
.card.clicavel:hover { border-color:var(--acc); transform:translateY(-2px); box-shadow:var(--sombra) }
/* cartão de passagem de etapa: é o call-to-action da tela, ganha um respiro */
.card.transicao {
  background:linear-gradient(135deg, #5b8def14, transparent 55%), var(--bg2);
  border-color:var(--acc);
}

.chip {
  display:inline-flex; align-items:center; gap:5px; font-size:11px;
  padding:2.5px 8px; border-radius:20px; font-weight:600; white-space:nowrap;
}
/* etapas do pipeline do ticket */
.chip.criada        { background:#5b8def22; color:var(--acc) }
.chip.em_espera     { background:var(--bg3); color:var(--txt2) }
.chip.em_execucao, .chip.rodando, .chip.pendente { background:#a371f722; color:var(--roxo) }
.chip.aguardando, .chip.aguardando_input { background:#d2992222; color:var(--alerta) }
.chip.revisao       { background:#39c5cf22; color:var(--ciano) }
.chip.revisao_final { background:#e3b34122; color:var(--ouro) }
.chip.finalizada, .chip.concluida { background:#3fb95022; color:var(--ok) }
.chip.falhou, .chip.cancelado, .chip.cancelada { background:#f8514922; color:var(--erro) }
.chip.sem_alteracao { background:var(--bg3); color:var(--txt2) }
.chip.tag { background:var(--bg3); color:var(--txt2) }
.chip.urgente { background:var(--erro); color:#fff }
.chip.alta { background:#d2992233; color:var(--alerta) }

.campo { margin-bottom:13px }
.campo label { display:block; font-size:12px; color:var(--txt2);
  margin-bottom:5px; font-weight:550 }
.campo input, .campo select, .campo textarea {
  width:100%; background:var(--bg); border:1px solid var(--linha);
  border-radius:8px; padding:9px 11px; outline:none; transition:border-color .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color:var(--acc) }
.campo textarea { resize:vertical; min-height:110px; font-family:inherit }
.dica { font-size:11.5px; color:var(--txt3); margin-top:4px }
.linha2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }

/* ---------- filtros ---------- */
.filtros {
  display:flex; flex-direction:column; gap:8px; margin-bottom:16px;
}
.filtro-linha { display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.filtro-linha > .et {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--txt3); font-weight:600; min-width:58px;
}
.fchip {
  border:1px solid var(--linha); background:var(--bg2); color:var(--txt2);
  border-radius:20px; padding:4px 11px; font-size:12px; cursor:pointer;
  font-weight:550; white-space:nowrap; transition:.12s;
}
.fchip:hover { border-color:var(--acc); color:var(--txt) }
.fchip.on { background:var(--acc); border-color:var(--acc); color:#fff }
.fchip .c { opacity:.7; font-size:11px; margin-left:4px; font-variant-numeric:tabular-nums }
.fchip.aviso.on { background:var(--alerta); border-color:var(--alerta); color:#1a1d23 }
.fchip.chefe { border-color:var(--ouro); color:var(--ouro) }
.fchip.chefe.on { background:var(--ouro); border-color:var(--ouro); color:#1a1d23 }
.busca {
  flex:1; min-width:170px; max-width:340px; background:var(--bg2);
  border:1px solid var(--linha); border-radius:20px; padding:5px 12px; outline:none;
}
.busca:focus { border-color:var(--acc) }

/* ---------- quadro (kanban) ---------- */
.quadro { display:flex; gap:12px; align-items:flex-start; overflow-x:auto; padding-bottom:10px }
.col {
  flex:1 1 300px; min-width:290px; max-width:460px;
  display:flex; flex-direction:column; min-height:0;
  background:var(--bg2); border:1px solid var(--linha); border-radius:var(--r);
  animation:surge .25s ease;
}
@keyframes surge { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
.col.destaque { border-color:var(--alerta); box-shadow:0 0 0 1px var(--alerta) inset }
/* fila do chefe: glow dourado — o olho encontra a coluna de longe */
.col.chefe {
  border-color:var(--ouro);
  box-shadow:0 0 0 1px var(--ouro) inset, 0 0 20px #e3b34124;
}
.col.chefe > .cab { background:linear-gradient(180deg, #e3b3411c, transparent), var(--bg2) }
.col > .cab {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--linha); position:sticky; top:0;
  background:var(--bg2); border-radius:var(--r) var(--r) 0 0; z-index:1;
}
.col > .cab .t { font-weight:650; font-size:12.5px }
.col > .cab .q {
  margin-left:auto; font-size:11px; color:var(--txt3);
  font-variant-numeric:tabular-nums; background:var(--bg3);
  border-radius:20px; padding:1px 7px; font-weight:600;
}
.col > .cab .ponto { width:8px; height:8px; border-radius:50%; flex:none }
.col > .corpo { padding:10px; display:flex; flex-direction:column; gap:9px;
  overflow-y:auto; max-height:calc(100vh - 260px) }
.col > .corpo:empty::after {
  content:'Nada por aqui 🎉'; color:var(--txt3); font-size:12px; padding:6px 2px;
}

.tk {
  background:var(--bg); border:1px solid var(--linha); border-radius:10px;
  padding:10px 11px; cursor:pointer;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.tk:hover { border-color:var(--acc); transform:translateY(-2px); box-shadow:var(--sombra) }
.tk .cabeca { display:flex; gap:6px; align-items:center; margin-bottom:5px; flex-wrap:wrap }
.tk .ref { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
  font-weight:650; color:var(--txt2) }
.tk .tit { font-weight:550; font-size:13.5px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.tk .pe { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-top:7px; font-size:11.5px; color:var(--txt3) }
.tk.pisca { animation:pulso 2.2s ease-in-out infinite }
@keyframes pulso { 0%,100%{border-color:var(--linha)} 50%{border-color:var(--roxo)} }

/* ---------- terminal ---------- */
.term {
  background:var(--codbg); border:1px solid var(--linha); border-radius:var(--r);
  padding:13px 15px; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  max-height:420px; overflow-y:auto; color:var(--codtxt);
}
.term .ev { padding:1.5px 0; white-space:pre-wrap; word-break:break-word }
.term .tool { color:var(--acc) } .term .txt { color:var(--codtxt) }
.term .res  { color:var(--ok); font-weight:600 } .term .err { color:var(--erro) }
.term .meta { color:var(--txt3) }
details.painel > summary {
  cursor:pointer; list-style:none; font-size:12px; color:var(--txt2);
  display:flex; align-items:center; gap:8px; font-weight:600;
}
details.painel > summary::-webkit-details-marker { display:none }
details.painel > summary::before { content:'▸'; font-size:10px; color:var(--txt3) }
details.painel[open] > summary::before { content:'▾' }
details.painel > summary + * { margin-top:11px }

/* ---------- chat ---------- */
.chat { display:flex; flex-direction:column; gap:13px; margin-bottom:16px }
.bolha {
  max-width:min(780px,88%); border:1px solid var(--linha); background:var(--bg2);
  border-radius:14px; padding:11px 14px; position:relative;
}
.bolha.humano { align-self:flex-end; background:var(--acc); border-color:transparent; color:#fff }
.bolha.humano .quem { color:#ffffffcc }
.bolha.humano a { color:#fff; text-decoration:underline }
.bolha.humano code, .bolha.humano pre { background:#00000033; color:#fff }
.bolha.agente { align-self:flex-start }
.bolha .quem { font-size:11px; color:var(--txt3); margin-bottom:5px; font-weight:600 }
.marco {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:11.5px; color:var(--txt3); padding:2px 0;
}
.marco::before, .marco::after { content:''; height:1px; background:var(--linha); flex:1; min-width:12px }
/* mensagem de autor "sistema": passagem de etapa vira linha de timeline */
.marco.sistema { color:var(--txt2); font-size:12px; justify-content:center; text-align:center }

/* ---------- markdown ---------- */
.md { font-size:13.5px; word-break:break-word; overflow-wrap:anywhere }
.md > *:first-child { margin-top:0 }
.md > *:last-child { margin-bottom:0 }
.md p { margin:0 0 8px }
.md h3, .md h4, .md h5, .md h6 { margin:14px 0 6px; font-weight:650; line-height:1.35 }
.md h3 { font-size:15.5px } .md h4 { font-size:14px }
.md h5, .md h6 { font-size:13px; color:var(--txt2) }
.md ul, .md ol { margin:0 0 8px; padding-left:20px }
.md li { margin:2px 0 }
.md li > ul, .md li > ol { margin:2px 0 }
.md code {
  background:var(--bg3); border-radius:5px; padding:1px 5px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.md pre {
  background:var(--codbg); color:var(--codtxt); border:1px solid var(--linha);
  border-radius:8px; padding:10px 12px; overflow-x:auto; margin:0 0 9px;
}
.md pre code { background:none; padding:0; font-size:12px; color:inherit }
.md blockquote {
  border-left:3px solid var(--linha); padding:2px 0 2px 11px;
  margin:0 0 8px; color:var(--txt2);
}
.md hr { border:none; border-top:1px solid var(--linha); margin:12px 0 }
.md table { border-collapse:collapse; margin:0 0 9px; font-size:12.5px; display:block; overflow-x:auto }
.md th, .md td { border:1px solid var(--linha); padding:5px 9px; text-align:left }
.md th { background:var(--bg3); font-weight:650 }
.md strong { font-weight:680 }

/* mantido: estilo antigo de mensagem (não usado no chat novo) */
.msg { border-left:2.5px solid var(--linha); padding:9px 0 9px 13px; margin-bottom:12px }
.msg.humano { border-color:var(--acc) } .msg.agente { border-color:var(--roxo) }
.msg .quem { font-size:11px; color:var(--txt3); margin-bottom:4px; font-weight:600 }
.msg .corpo { white-space:pre-wrap; font-size:13px }

/* ---------- compositor ---------- */
.compositor {
  position:sticky; bottom:0; background:var(--bg); padding:10px 0 4px;
  border-top:1px solid var(--linha); margin-top:6px; z-index:5;
}
.compositor textarea {
  width:100%; background:var(--bg2); border:1px solid var(--linha);
  border-radius:10px; padding:10px 12px; outline:none; min-height:74px;
  resize:vertical; font-family:inherit;
}
.compositor textarea:focus { border-color:var(--acc) }
.acoes { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px }
.acoes .espaco { flex:1 }

.vazio { text-align:center; padding:50px 20px; color:var(--txt3) }
.vazio h3 { color:var(--txt2); font-weight:550; margin-bottom:6px; font-size:15px }

/* ---------- login ---------- */
#login { display:flex; align-items:center; justify-content:center; height:100vh; padding:20px }
#login .card { width:100%; max-width:340px; padding:28px }
#login h1 { margin-bottom:4px } #login .sub { margin-bottom:20px }
.erro-txt { color:var(--erro); font-size:12.5px; margin-top:10px; min-height:17px }

.barra { height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; margin-top:6px }
.barra > div { height:100%; background:var(--ok); transition:width .3s }
.barra > div.alto { background:var(--alerta) } .barra > div.critico { background:var(--erro) }

/* gráfico de 7 dias */
.colunas { display:flex; align-items:flex-end; gap:10px; height:110px; margin-top:10px }
.colunas .d { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:5px; height:100% }
.colunas .d .v { font-size:10.5px; color:var(--txt3); font-variant-numeric:tabular-nums }
.colunas .d .b { width:100%; background:var(--acc); border-radius:4px 4px 0 0; min-height:3px }
.colunas .d .r { font-size:10.5px; color:var(--txt3) }

/* ---------- avisos ---------- */
#avisos { position:fixed; right:16px; bottom:16px; z-index:80;
  display:flex; flex-direction:column; gap:8px; max-width:min(360px,88vw) }
.aviso-tst {
  background:var(--bg2); border:1px solid var(--linha); border-left:3px solid var(--acc);
  border-radius:9px; padding:10px 13px; box-shadow:var(--sombra); font-size:13px;
}
.aviso-tst.erro { border-left-color:var(--erro) }
.aviso-tst.ok { border-left-color:var(--ok) }

@media (max-width:900px) {
  #app.on { grid-template-columns:1fr; grid-template-rows:auto 1fr }
  #barra { display:flex }
  aside {
    position:fixed; top:0; left:0; bottom:0; width:250px; z-index:50;
    transform:translateX(-100%); transition:transform .2s; box-shadow:var(--sombra);
  }
  aside.aberta { transform:none }
  main { padding:16px 14px 40px }
  .linha2 { grid-template-columns:1fr }
  .quadro { flex-direction:column; overflow-x:visible }
  .col { max-width:none; width:100%; flex:none }
  .col > .corpo { max-height:none }
  .bolha { max-width:94% }
  .filtro-linha > .et { min-width:0 }
  .busca { max-width:none }
}

/* ticket criado por um orquestrador: aponta para o objetivo maior */
.chip.orq{background:#a371f722;color:var(--roxo);cursor:pointer;
  font-family:ui-monospace,monospace;text-decoration:none}
.chip.orq:hover{background:#a371f744}

/* ---------- avatares (emoji em círculo) ---------- */
.avatar {
  width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--bg3); border:1px solid var(--linha);
  display:inline-flex; align-items:center; justify-content:center; font-size:15px;
}
.avatar.mini { width:22px; height:22px; font-size:12px }
.avatar.micro { width:16px; height:16px; font-size:9px; vertical-align:-3px; margin-right:4px }
.avatar.grande { width:52px; height:52px; font-size:27px }
.pilha { display:inline-flex; align-items:center }
.pilha .avatar { margin-left:-7px; box-shadow:0 0 0 2px var(--bg) }
.pilha .avatar:first-child { margin-left:0 }
.avatar.mais { font-size:10px; font-weight:700; color:var(--txt2) }
.membro {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  background:var(--bg3); border-radius:20px; padding:3px 10px 3px 3px;
}

/* ---------- XP ---------- */
.xpbar { height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; margin-top:6px }
.xpbar > i {
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--acc), var(--roxo)); transition:width .3s;
}
.xp-num { font-size:17px; font-weight:700; letter-spacing:-.3px; margin-top:4px;
  font-variant-numeric:tabular-nums }

/* usuário logado no rodapé da sidebar */
.eu { display:flex; gap:9px; align-items:center }
.eu-nome { font-weight:600; font-size:12.5px; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.eu-tit { font-size:11px; color:var(--txt3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* badge da fila do admin: pulsa enquanto houver ticket esperando o chefe */
#n-chefe {
  display:none; align-items:center; justify-content:center;
  background:var(--ouro); color:#1a1d23; font-weight:700; font-size:11px;
  border-radius:20px; padding:0 6px; min-width:18px; text-align:center;
  animation:pulsobadge 1.6s ease-in-out infinite;
}
@keyframes pulsobadge { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.item.on #n-chefe { box-shadow:0 0 0 2px #ffffff55 }

/* ---------- modal ---------- */
.veu-modal {
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:70;
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:surge .15s ease;
}
.modal { width:100%; max-width:460px; margin:0; max-height:88vh; overflow-y:auto }
.modal-cab { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
.modal-cab h3 { font-size:15px; font-weight:650; letter-spacing:-.2px }
.modal-cab .x { background:none; border:none; cursor:pointer; color:var(--txt3);
  font-size:14px; padding:2px 6px; border-radius:6px }
.modal-cab .x:hover { background:var(--bg3); color:var(--txt) }

/* seletor de equipe (checkbox list) */
.sel-equipe { display:flex; flex-direction:column; gap:2px; max-height:300px; overflow-y:auto }
.sel-item {
  display:flex; align-items:center; gap:9px; padding:7px 9px;
  border-radius:8px; cursor:pointer; font-size:13px;
}
.sel-item:hover { background:var(--bg3) }
.sel-item input[type=checkbox] { accent-color:var(--acc); width:15px; height:15px; flex:none }

/* ---------- confete (celebração ao finalizar) ---------- */
.confete { position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden }
.confete i {
  position:absolute; top:-14px; width:9px; height:14px; border-radius:2px;
  opacity:.95; animation:cair linear forwards;
}
@keyframes cair { to { transform:translateY(105vh) rotate(680deg); opacity:.55 } }

/* ---------- ranking ---------- */
.ranking-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start }
.podio { display:flex; gap:12px; align-items:flex-end; justify-content:center; margin-bottom:16px }
.podio .lugar {
  flex:1; max-width:210px; text-align:center;
  background:var(--bg2); border:1px solid var(--linha); border-radius:14px;
  padding:16px 12px 14px; display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .15s, box-shadow .15s;
}
.podio .lugar:hover { transform:translateY(-2px); box-shadow:var(--sombra) }
.podio .lugar .xpbar { width:100%; align-self:stretch }
.podio .p1 {
  border-color:var(--ouro); padding-top:26px; padding-bottom:22px;
  background:linear-gradient(180deg, #e3b34116, transparent 60%), var(--bg2);
  box-shadow:0 0 24px #e3b3411f;
}
.podio .p2 { border-color:#9aa3b2 }
.podio .p3 { border-color:#b4764a }
.podio .pos { font-size:22px; margin-bottom:4px }
.tab-rank { width:100%; border-collapse:collapse; font-size:13px }
.tab-rank th {
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--txt3); font-weight:600; padding:7px 10px; border-bottom:1px solid var(--linha);
}
.tab-rank td { padding:9px 10px; border-bottom:1px solid var(--linha); vertical-align:middle }
.tab-rank tr:last-child td { border-bottom:none }
.tab-rank .num { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap }

/* feed lateral "últimos pontos" */
.feed-xp { display:flex; flex-direction:column }
.feed-xp .ev {
  display:flex; gap:9px; align-items:center; padding:8px 0;
  border-bottom:1px solid var(--linha); font-size:12.5px;
}
.feed-xp .ev:last-child { border-bottom:none }
.feed-xp .pts { font-weight:700; color:var(--ok); font-variant-numeric:tabular-nums; flex:none }

/* ---------- equipe ---------- */
.grade-equipe { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px }
.membro-card { margin:0; transition:transform .15s, border-color .15s, box-shadow .15s }
.membro-card:hover { transform:translateY(-2px); border-color:var(--acc); box-shadow:var(--sombra) }
.membro-card.inativo { opacity:.55; filter:grayscale(.4) }

/* seletor de emoji do avatar */
.emojis { display:flex; flex-wrap:wrap; gap:6px }
.emojis button {
  width:38px; height:38px; border-radius:10px; border:1px solid var(--linha);
  background:var(--bg); font-size:19px; cursor:pointer;
  transition:transform .15s, border-color .15s;
}
.emojis button:hover { border-color:var(--acc); transform:translateY(-2px) }
.emojis button.on { border-color:var(--acc); background:#5b8def22 }

@media (max-width:900px) {
  .ranking-grid { grid-template-columns:1fr }
  .podio { flex-wrap:wrap; align-items:stretch }
  .podio .lugar { min-width:140px }
}

/* ---------- página do ticket: layout de chat ---------- */
#conteudo.tela-ticket{display:flex;flex-direction:column;overflow:hidden;padding:14px 22px 16px}
.tk-tela{display:flex;flex-direction:column;flex:1;min-height:0;gap:10px}
.tk-cab{padding:12px 16px;margin:0}
.tk-cab-l1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tk-cab-l1 h1{font-size:19px;margin:0}
.tk-titulo{margin:6px 0 0}
.tk-cab-l3{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tk-meta{margin:0 0 0 auto;text-align:right}
.tk-equipe{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.tk-corpo{flex:1;min-height:0;overflow-y:auto;padding:2px 4px}
.tk-rodape{display:flex;flex-direction:column;gap:8px}
.tk-rodape .compositor{margin:0}
.tk-rodape .card.transicao{margin:0}

/* ao-vivo do agente no pé da conversa */
.chat-vivo{border:1px solid var(--linha);border-radius:var(--r);background:var(--bg2);
  overflow:hidden;margin-top:10px}
.vivo-cab{display:flex;gap:8px;align-items:center;padding:8px 12px;font-size:12px;
  color:var(--txt2);border-bottom:1px solid var(--linha)}
.pulso{width:8px;height:8px;border-radius:50%;background:var(--ok);
  animation:pulso-vivo 1.2s ease-in-out infinite}
@keyframes pulso-vivo{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.term.vivo{border:0;border-radius:0;margin:0;max-height:230px}

/* seletor de pessoas (assignee picker) */
.eq-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.membro-x{border:0;background:none;color:var(--txt3);cursor:pointer;font-size:10px;
  padding:0 2px;line-height:1}
.membro-x:hover{color:var(--erro)}
.eq-mais{width:26px;height:26px;border-radius:50%;border:1px dashed var(--linha);
  background:none;color:var(--txt2);cursor:pointer;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .15s,color .15s,transform .15s}
.eq-mais:hover{border-color:var(--acc);color:var(--acc);transform:scale(1.1)}
.pop-eq{position:absolute;z-index:70;width:268px;padding:6px;margin:0;
  box-shadow:0 14px 36px rgba(0,0,0,.5);animation:pop-entra .12s ease-out}
@keyframes pop-entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pop-eq-cab{font-size:10.5px;font-weight:600;color:var(--txt3);text-transform:uppercase;
  letter-spacing:.6px;padding:5px 8px}
.pop-eq-busca{width:100%;margin:2px 0 4px;padding:6px 9px;border-radius:8px;
  border:1px solid var(--linha);background:var(--bg);color:var(--txt)}
.pop-eq-lista{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.pop-eq-item{display:flex;gap:8px;align-items:center;width:100%;text-align:left;
  padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--txt);
  cursor:pointer;transition:background .12s}
.pop-eq-item:hover{background:var(--bg3)}
.pop-eq-item.on{background:rgba(91,141,239,.14)}
.pop-eq-item:disabled{opacity:.5;cursor:wait}
.pop-eq-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;flex-direction:column;line-height:1.25}
.pop-eq-nome small{color:var(--txt3);font-size:10px}
.pop-eq-ok{margin-left:auto;color:var(--acc);font-weight:700}

/* filhos do orquestrador no cabeçalho do ticket */
.tk-filhos{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:7px}
.tk-filhos .chip{cursor:pointer;text-decoration:none}
.tk-filhos .chip:hover{filter:brightness(1.25)}

/* ---------- chat com agentes (tela 💬 Agentes) ---------- */
/* seletor de interlocutores: pills roláveis na horizontal, o ativo em destaque */
.ag-pills{display:flex;gap:8px;overflow-x:auto;padding:2px;margin-top:10px;
  scrollbar-width:thin}
.ag-pill{display:flex;align-items:center;gap:9px;flex:none;max-width:260px;
  border:1px solid var(--linha);background:var(--bg);border-radius:12px;
  padding:7px 13px 7px 9px;cursor:pointer;text-align:left;color:var(--txt2);
  transition:border-color .15s,background .15s,color .15s,transform .15s}
.ag-pill:hover{border-color:var(--acc);color:var(--txt);transform:translateY(-1px)}
.ag-pill.on{border-color:var(--acc);background:rgba(91,141,239,.12);color:var(--txt);
  box-shadow:0 0 0 1px var(--acc) inset}
.ag-emoji{font-size:21px;flex:none;line-height:1}
.ag-rot{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ag-nome{font-weight:650;font-size:12.5px;white-space:nowrap}
.ag-desc{font-size:10.5px;color:var(--txt3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* a conversa entra com o mesmo surge do kanban — a troca de agente fica suave */
.chat-agentes{animation:surge .25s ease}
/* compositor do chat: começa baixo e cresce com o texto (auto-resize no JS) */
.comp-chat textarea{min-height:44px;max-height:150px;resize:none;overflow-y:auto}
/* cursor do typewriter: pisca no fim do texto enquanto o agente "digita" */
.ag-cursor{display:inline-block;margin-left:1px;color:var(--acc);font-weight:600;
  animation:ag-pisca .9s steps(2) infinite}
@keyframes ag-pisca{0%,49%{opacity:1}50%,100%{opacity:0}}
/* linha única e discreta de atividade: a ferramenta que o agente usa agora */
.ag-atividade{display:flex;gap:8px;align-items:center;font-size:12px;
  color:var(--txt3);padding:5px 4px;animation:surge .2s ease}
/* bastidores: terminal cru guardado num details fechado, para os curiosos */
details.bastidores{margin:6px 0 2px}
details.bastidores > summary{font-size:11px;color:var(--txt3);font-weight:500}
details.bastidores .term{max-height:220px}